[OA][Fullstack] - OA Websockets by LOTaher · Pull Request #278 · sandboxnu/sarge

LOTaher · 2026-04-06T20:33:53Z

[OA][Fullstack] - OA Websockets

Changes

Added POST /api/token to generate a JWT that the WS server will verify
Updated WS server to handle client connections using JWT authentication.
Created useHeartbeat hook that allows the client to make continuous websocket requests to the server
Created LostConnectionModal component to be displayed when the candidate disconnects. This also displays the AssessmentSkeleton component in the background.
When disconnected the isConnected value from the useHeartbeat hook triggers to false and changes the state of the page. This changes back to true when the client and server can establish a connection again

Notes

There is currently no time bank on the websocket server side. This is v1 of the implementation which simply lets the candidate know they are disconnected. On the first disconnection, the OA will submit, and when reconnected, the candidate should be brought to the AssessmentOutro component FOR NOW.
Our JWT token is hardcoded for easy testing

Screenshots

https://sandboxneu.slack.com/archives/C09E7L2RK16/p1775507945604729?thread_ts=1775507637.130809&cid=C09E7L2RK16

Checklist

Please go through all items before requesting reviewers:

Closes

Closes #273

vercel · 2026-04-06T20:34:01Z

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

Project	Deployment	Actions	Updated (UTC)
sarge	Ready	Preview, Comment	Apr 7, 2026 3:32am

bderbs30 · 2026-04-06T22:29:12Z


    return (
        <div className="flex h-screen w-full flex-col overflow-hidden">
+            {/* onOpenChange is returning nothing as we don't have recovery implemented just yet  */}


when you say "recovery," do you mean a client disconnects and then reconnects after a brief delay?

Yes, this is to tee us nicely for handling us having a seperate countdown for clients who have disconnected, and give them a chance to reconnect.

bderbs30 · 2026-04-06T22:32:22Z

@@ -0,0 +1,61 @@
+import { Skeleton } from '@/lib/components/ui/Skeleton';


Something to note (I saw this post abt this package that does exact skeleton according to the content - not really needed here but could be something so that skeleton is just a wrapper and we don't have to do this in the future) not prio tho

bderbs30 · 2026-04-06T22:33:00Z

+            <ResizableHandle className="bg-sarge-gray-200 w-px" />
+
+            <ResizablePanel defaultSize={65} minSize={40}>
+                <div className="flex h-full flex-col overflow-hidden bg-[#3a414f]">


are we just doing this hex bc we have nothing in the design system? (idt we have skeleton so would be fine if not)

This hex is the same color as our monacode text editor theme

I think eventually we'll make a design token for this then I know olivia has new designs for the editor

bderbs30 · 2026-04-06T22:33:24Z

-                        <button
-                            type="button"
+                        <Button
+                            variant="icon"


yeah this is better

bderbs30 · 2026-04-06T22:38:58Z

+
+    return {
+        ...ws,
+        isConnected: ws.readyState === ReadyState.OPEN,


I think this will show the modal when we start the oa - the is connected starts as false

(I think it will correct itself) but we should show this modal if there has been a connection established and then lost

could add a hasconnected flag that becomes true on the WS reaches open state

Not too sure if I understand what you're saying here. This shows the Modal if the WS connection is not open. The server will always be open on our end, so if the client disconnects, it goes to a CLOSED state, meaning that isConnected would be false

bderbs30 · 2026-04-06T22:44:57Z

Also I think the timer will still keep counting down when they're disconnected

bderbs30 · 2026-04-06T22:47:25Z

I think opening multiple tabs could cause issues as well since the map is keyed by the email

so if we have tab A connected, then tab B connects which overwrites Tab A's entry??? so then if Tab A disconnects (which removes the entry) then Tab b's socket would be left without a mapping

idk if this is intended, but I know I've accidentally opened two tabs during an oa so this would kinda break this instance (not common, but could be something that would happen)

bderbs30 · 2026-04-06T22:48:58Z

+
+    const jwt = await new SignJWT({ email })
+        .setProtectedHeader({ alg: 'HS256' })
+        .setExpirationTime('2h')


does the jwt regen throughout the oa at all bc couldn't an oa be longer than 2h so this would cut someone off early

No it doesn't! What's the "max time" you think an OA would be right now. We need some sort of limit just for token lifetimes and WS stuff.

hmm ig the longest I've taken is 90 minutes so maybe 2 hours is fine for now

Ok! Could totally be temporary

cherman23 · 2026-04-07T00:56:03Z

+
+export async function POST(request: NextRequest) {
+    try {
+        // TODO: add route security


Have we made a ticket for this?

Not yet. Will be written, but not urgent for showcase

cherman23 · 2026-04-07T00:56:36Z

@@ -0,0 +1,5 @@
+import z from 'zod';
+
+export const TokenSchema = z.object({


We should name this to something that signifies it is for the OA only.

assessment outro update outro update intro make prettier [OA][Fullstack] - OA Websockets (#278) * progress * modal + handling skeleton and stateful code editor * prettier * update tokenschema name [OA][Fullstack] - OA Websockets - follow up (#278) window unfocused modal (#279) * window unfocused modal * PR fixes update button

LOTaher added 2 commits April 5, 2026 17:11

progress

465f6db

modal + handling skeleton and stateful code editor

ed269f1

LOTaher requested review from ahweigl, bderbs30 and cherman23 April 6, 2026 20:34

prettier

bf95c3e

vercel Bot deployed to Preview April 6, 2026 20:37 View deployment

bderbs30 reviewed Apr 6, 2026

View reviewed changes

cherman23 requested changes Apr 7, 2026

View reviewed changes

update tokenschema name

a78986c

vercel Bot deployed to Preview April 7, 2026 03:32 View deployment

LOTaher merged commit 2a0f43e into main Apr 7, 2026
4 checks passed

LOTaher added a commit that referenced this pull request Apr 7, 2026

[OA][Fullstack] - OA Websockets - follow up (#278)

38d826d

		@@ -0,0 +1,61 @@
		import { Skeleton } from '@/lib/components/ui/Skeleton';

		@@ -0,0 +1,5 @@
		import z from 'zod';

		export const TokenSchema = z.object({

Conversation

LOTaher commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

[OA][Fullstack] - OA Websockets

Changes

Notes

Screenshots

Checklist

Closes

Uh oh!

vercel Bot commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LOTaher Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bderbs30 commented Apr 6, 2026

Uh oh!

bderbs30 commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

LOTaher commented Apr 6, 2026 •

edited

Loading

vercel Bot commented Apr 6, 2026 •

edited

Loading

LOTaher Apr 6, 2026 •

edited

Loading

bderbs30 commented Apr 6, 2026 •

edited

Loading