feat: implement cheat overlay #57

pan93412 · 2026-01-04T18:20:59Z

No description provided.

vercel · 2026-01-04T18:21:00Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
dbplay-app	Ready	Preview, Comment	Jan 4, 2026 6:35pm

Copilot

Pull request overview

This PR implements a cheat detection and overlay system for the application. The feature detects potential cheating behaviors (opening developer tools and leaving the application window) and blocks users with a warning overlay when cheating is detected.

Key changes include:

Added GraphQL schema for CheatRecord entity with queries and mutations to track and manage cheat records
Implemented cheat detection using the devtools-detect library and window blur events
Created a blocking overlay UI that displays when a user has unresolved cheat records

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
schema.graphql	Defines CheatRecord type, connection types, mutations, and queries for cheat tracking
pnpm-lock.yaml	Adds devtools-detect@4.0.2 dependency lock
package.json	Adds devtools-detect library for detecting developer tools
lib/features.ts	Adds LOCK_USER_ON_LEAVING feature flag with helper function
gql/graphql.ts	Auto-generated TypeScript types for CheatRecord GraphQL schema
gql/gql.ts	Auto-generated GraphQL document definitions for cheat-related queries and mutations
components/cheat/index.tsx	Main cheat detection logic with event listeners and GraphQL integration
components/cheat/cheat-overlay.tsx	Blocking UI overlay displayed when user is flagged for cheating
app/(app)/layout.tsx	Integrates CheatWrapper component into application layout

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

lib/features.ts

components/cheat/index.tsx

components/cheat/cheat-overlay.tsx

components/cheat/index.tsx

components/cheat/cheat-overlay.tsx

components/cheat/index.tsx

schema.graphql

Copilot

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 7 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-04T18:40:46Z

components/cheat/cheat-overlay.tsx

+    <div
+      className={`
+        flex min-h-svh flex-col items-center justify-center gap-6
+        bg-linear-to-br from-red-50 via-white to-red-100 p-6


The CSS class 'bg-linear-to-br' appears to be invalid. Tailwind CSS uses 'bg-gradient-to-br' for bottom-right gradients. This will result in the gradient not being applied to the background.

Suggested change

bg-linear-to-br from-red-50 via-white to-red-100 p-6

bg-gradient-to-br from-red-50 via-white to-red-100 p-6

Copilot · 2026-01-04T18:40:46Z

components/cheat/index.tsx

+    const devtoolsChangeHandler = async () => {
+      await createRecord("開啟開發者工具");
+    };
+
+    const screenLeaveHandler = async () => {
+      await createRecord("離開系統");
+    };
+
+    window.addEventListener("devtoolschange", devtoolsChangeHandler);


The 'devtoolschange' event from the devtools-detect library only fires when devtools are opened or closed, not on every state change. This means if devtools are already open when the page loads, it won't trigger the event. Consider checking the initial devtools state when the component mounts.

Copilot · 2026-01-04T18:40:46Z

components/cheat/index.tsx

+  useEffect(() => {
+    if (!enable) {
+      return;
+    }
+
+    let throttle = false;
+    let throttleTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    const createRecord = async (reason: string) => {
+      if (throttle) {
+        return;
+      }
+      throttle = true;
+
+      await createMyCheatRecord({ variables: { reason } });
+
+      throttleTimeout = setTimeout(() => {
+        throttle = false;
+        throttleTimeout = null;
+      }, THROTTLE_TIME_MS);
+    };
+
+    const devtoolsChangeHandler = async () => {
+      await createRecord("開啟開發者工具");
+    };
+
+    const screenLeaveHandler = async () => {
+      await createRecord("離開系統");
+    };
+
+    window.addEventListener("devtoolschange", devtoolsChangeHandler);
+    window.addEventListener("blur", screenLeaveHandler);
+
+    return () => {
+      window.removeEventListener("devtoolschange", devtoolsChangeHandler);
+      window.removeEventListener("blur", screenLeaveHandler);
+      if (throttleTimeout) {
+        clearTimeout(throttleTimeout);
+      }
+    };
+  }, [enable, createMyCheatRecord]);


The useEffect dependency array includes 'createMyCheatRecord' which is a function from useMutation. This function has a stable identity and doesn't need to be in the dependency array. However, including it is not harmful. More importantly, the effect creates closures over the 'throttle' and 'throttleTimeout' variables which are reset on re-runs, potentially causing issues if the effect re-runs while throttling is active.

Copilot · 2026-01-04T18:40:47Z

schema.graphql

+  If userID is not provided, the current user will be used.
+  For this case, you should have "me:write" scope.
+  
+  If userID is provided, you should have "cheat_record:write" scope.


The mutation documentation states that if userID is not provided, you need 'me:write' scope, and if userID is provided, you need 'cheat_record:write' scope. However, there's a potential security concern: allowing users to create cheat records for themselves with just 'me:write' scope could be exploited. Consider whether self-reporting should be allowed or if cheat records should only be created by authorized personnel.

Suggested change

If userID is not provided, the current user will be used.

For this case, you should have "me:write" scope.

If userID is provided, you should have "cheat_record:write" scope.

This mutation is intended to be used by authorized staff or systems.

Regardless of whether userID is provided, you must have "cheat_record:write" scope.

If userID is not provided, the implementation may infer the target user from context.

Copilot · 2026-01-04T18:40:47Z

schema.graphql

+  """Resolve a cheat record."""
+  resolveCheatRecord(cheatRecordID: ID!, reason: String!): Boolean!


The 'resolveCheatRecord' mutation allows resolving cheat records but only requires a reason parameter. Consider adding validation to ensure only authorized personnel (e.g., administrators or proctors) can resolve cheat records, and potentially include additional fields like who resolved it and when.

Suggested change

"""Resolve a cheat record."""

resolveCheatRecord(cheatRecordID: ID!, reason: String!): Boolean!

"""Resolve a cheat record. Only authorized staff (e.g., administrators or proctors) may perform this action."""

resolveCheatRecord(cheatRecordID: ID!, reason: String!): Boolean! @scope(scope: "admin")

Copilot · 2026-01-04T18:40:47Z

components/cheat/cheat-overlay.tsx

+      <Link
+        href="/"
+        className={`flex items-center gap-2 self-center font-medium`}
+      >
+        <div
+          className={`
+            flex size-6 items-center justify-center rounded-md
+            text-primary-foreground
+          `}
+        >
+          <Logo />
+        </div>
+        資料庫練功坊
+      </Link>
+      <Card className="min-w-md">
+        <CardHeader className="flex w-full flex-col items-center text-center">
+          <AlertTriangle className="mb-2 size-7 text-red-500" aria-hidden />
+          <CardTitle className="text-xl">您已經被系統判定為作弊</CardTitle>
+          <CardDescription className="space-y-2">
+            <p>
+              您的帳號已被系統判定為作弊，禁止繼續作答。作弊將會導致考試成績作廢，同時我們也會將您的記錄交給校方懲處。
+            </p>
+            <p>
+              如果您沒有作弊行為，請當場與監考官告知，我們判斷後可以解除這個狀態。
+            </p>
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center gap-4">
+          <Button asChild variant="outline">
+            <Link href="/login">重新登入</Link>


The cheat overlay allows users to navigate back to the home page and even log in again, but this doesn't prevent them from bypassing the cheat detection. Since CheatWrapper is rendered inside the app layout after authentication, a user could potentially clear their session and log back in to reset their cheat status. Consider whether the overlay should prevent all navigation or if server-side enforcement is needed.

components/cheat/index.tsx

feat: implement cheat overlay

657e318

Copilot AI review requested due to automatic review settings January 4, 2026 18:21

pan93412 self-assigned this Jan 4, 2026

Copilot started reviewing on behalf of pan93412 January 4, 2026 18:21 View session

vercel bot deployed to Preview January 4, 2026 18:21 View deployment

Copilot AI reviewed Jan 4, 2026

View reviewed changes

pan93412 added 5 commits January 5, 2026 02:30

docs(lib): correct documentation of requireExplicitlyEnabled

474a28a

refactor(cheat): remove debug message

4340320

refactor: add aria-hidden for AlertTriangle

0b93f7c

refactor(cheat): use feature flag in lib/features

5320874

style: reformat codebase

c49bd20

pan93412 requested a review from Copilot January 4, 2026 18:35

Copilot started reviewing on behalf of pan93412 January 4, 2026 18:35 View session

vercel bot deployed to Preview January 4, 2026 18:35 View deployment

Copilot AI reviewed Jan 4, 2026

View reviewed changes

pan93412 merged commit 9d42e37 into main Jan 5, 2026
12 checks passed

	bg-linear-to-br from-red-50 via-white to-red-100 p-6
	bg-gradient-to-br from-red-50 via-white to-red-100 p-6

		"""Resolve a cheat record."""
		resolveCheatRecord(cheatRecordID: ID!, reason: String!): Boolean!

feat: implement cheat overlay #57

feat: implement cheat overlay #57

Uh oh!

Conversation

pan93412 commented Jan 4, 2026

Uh oh!

vercel bot commented Jan 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Jan 4, 2026 •

edited

Loading