Text stability sync

Full websocket system (for running)

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Install deps
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Copy source
+COPY . .
+
+# Build app
+RUN npm run build
+
+ENV NODE_ENV=production
+EXPOSE 3000
+
+CMD ["npm", "run", "start"]

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "dev-run",
       "version": "0.1.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@codemirror/lang-go": "^6.0.1",
         "@codemirror/lang-java": "^6.0.2",
@@ -44,6 +45,7 @@
         "@radix-ui/react-tooltip": "^1.2.7",
         "@supabase/ssr": "^0.8.0",
         "@supabase/supabase-js": "^2.94.1",
+        "@types/js-cookie": "^3.0.6",
         "@uiw/codemirror-theme-vscode": "^4.25.4",
         "@uiw/react-codemirror": "^4.25.4",
         "axios": "^1.13.5",
@@ -53,6 +55,7 @@
         "date-fns": "^4.1.0",
         "embla-carousel-react": "^8.6.0",
         "ioredis": "^5.9.2",
+        "js-cookie": "^3.0.5",
         "lucide-react": "^0.563.0",
         "next": "16.1.6",
         "next-ws": "^2.1.16",
@@ -3892,6 +3895,12 @@
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.19.32",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.32.tgz",
@@ -4927,6 +4936,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "build": "next build",
-    "build": "npm run build:lib && next build",
+    "start": "next start",
-    "postinstall": "npm run ws -- -y",
+    "dev": "next dev",
-    "ws": "npx --yes next-ws-cli@latest patch"
+    "postinstall": "next-ws patch"
   },
   "dependencies": {
     "@codemirror/lang-go": "^6.0.1",
@@ -45,6 +45,7 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@supabase/ssr": "^0.8.0",
     "@supabase/supabase-js": "^2.94.1",
+    "@types/js-cookie": "^3.0.6",
     "@uiw/codemirror-theme-vscode": "^4.25.4",
     "@uiw/react-codemirror": "^4.25.4",
     "axios": "^1.13.5",
@@ -54,6 +55,7 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "ioredis": "^5.9.2",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.563.0",
     "next": "16.1.6",
     "next-ws": "^2.1.16",

src/app/api/auth/callback/route.ts

@@ -1,9 +1,11 @@
 // app/auth/callback/route.ts
 import { NextRequest, NextResponse } from "next/server";
 import { createClient } from "@/lib/supabase/server";
+import { getOrigin } from "@/lib/origin/server";
 
 export async function GET(req: NextRequest) {
   const code = req.nextUrl.searchParams.get("code");
+  const { httpOrigin } = await getOrigin();
 
   if (!code) {
     return NextResponse.json({ error: "code param required" }, { status: 400 });
@@ -18,5 +20,5 @@ export async function GET(req: NextRequest) {
     return NextResponse.json({ error: error.message }, { status: 500 });
   }
 
-  return NextResponse.redirect(new URL("/runs", req.url));
+  return NextResponse.redirect(`${httpOrigin}/problems`);
 }

src/app/api/run/move/route.ts

@@ -1,33 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { createClient } from "@/lib/supabase/server";
-import * as Core from "@/modules/live-run/core";
-import { getSession } from "@/modules/account/core";
-
-export async function POST(req: NextRequest) {
-  const { runId, moves, file, language } = await req.json();
-
-  if (!runId || !moves || file === undefined || language === undefined)
-    return NextResponse.json(
-      { error: "body requires runId, moves, file and language" },
-      { status: 400 },
-    );
-
-  const supabase = await createClient();
-
-  const session = await getSession(supabase);
-
-  if (!session)
-    return NextResponse.json({ error: "Invalid session" }, { status: 401 });
-
-  const liveRun = await Core.getLiveRun(runId);
-
-  if (!liveRun)
-    return NextResponse.json(
-      { error: "Run is not live or does not exist" },
-      { status: 401 },
-    );
-
-  const run = await Core.addLiveRunEvent(liveRun.id, file, language, moves);
-
-  return NextResponse.json({ ok: true, run });
-}

src/app/api/run/route.ts

@@ -1,80 +1,246 @@
-import { NextRequest, NextResponse } from "next/server";
+import { WebSocketServer, WebSocket } from "ws";
-import { createClient } from "@/lib/supabase/server";
-import * as Core from "@/modules/live-run/core";
-import { getSession } from "@/modules/account/core";
 import { randomUUID } from "crypto";
+import { createClientCookie } from "@/lib/supabase/server";
+import { getSession } from "@/modules/account/core";
+import * as Core from "@/modules/live-run/core";
+import { ClientMessage } from "./types";
+import { NextRequest } from "next/server";
+import { redis } from "@/lib/redis";
 
-export async function PUT(req: NextRequest) {
+export function GET(req: NextRequest) {
-  const { problem, category } = await req.json();
+  const headers = new Headers();
+  headers.set("Connection", "Upgrade");
+  headers.set("Upgrade", "websocket");
+  return new Response("Upgrade Required", { status: 426, headers });
+}
 
-  if (!problem || !category)
+export function UPGRADE(client: WebSocket, server: WebSocketServer) {
-    return NextResponse.json(
+  client.once("message", async (raw) => {
-      { error: "body requires problem and category" },
+    const {
-      { status: 400 },
+      cookies,
+      requestId,
+    }: { cookies: Record<string, string>; requestId: string } = JSON.parse(
+      raw.toString(),
     );
 
-  const supabase = await createClient();
+    if (!cookies) {
+      client.send(JSON.stringify({ ok: false, error: "Missing cookies" }));
+      client.close();
+      return;
+    }
 
+    const supabase = await createClientCookie(new Map(Object.entries(cookies)));
     const session = await getSession(supabase);
 
-  if (!session)
+    if (!session) {
-    return NextResponse.json({ error: "Invalid session" }, { status: 401 });
+      client.send(JSON.stringify({ ok: false, error: "Invalid session" }));
+      return;
+    }
+
+    client.send(JSON.stringify({ requestId, ok: true }));
+
+    console.log(`User ${session[1].username} connected to live run`);
+
+    client.on("message", async (raw) => {
+      try {
+        const { requestId, ...msg }: ClientMessage = JSON.parse(raw.toString());
+
+        switch (msg.type) {
+          /* ---------------- CREATE ---------------- */
+          case "create": {
+            const { problem, category } = msg;
+
+            if (!problem || !category) {
+              client.send(
+                JSON.stringify({
+                  requestId,
+                  ok: false,
+                  error: "problem and category required",
+                }),
+              );
+              return;
+            }
 
             const runId = randomUUID();
 
             await Core.addLiveRun({
+              id: runId,
               problem,
               category,
-    id: runId,
               username: session[1].username,
               views: 0,
-    start: new Date().getTime(),
+              start: Date.now(),
               runsCount: 0,
             });
 
-  return NextResponse.json({ ok: true, runId });
+            client.send(
+              JSON.stringify({
+                requestId,
+                ok: true,
+                type: "create",
+                data: { runId },
+              }),
+            );
+            break;
           }
 
-export async function POST(req: NextRequest) {
+          /* ---------------- DELETE ---------------- */
-  const { runId } = await req.json();
+          case "move": {
+            const { runId, moves, file, language } = msg;
 
-  if (!runId)
+            if (
-    return NextResponse.json({ error: "body requires runId" }, { status: 400 });
+              !runId ||
-
+              !moves ||
-  const supabase = await createClient();
+              file === undefined ||
-
+              language === undefined
-  const session = await getSession(supabase);
+            ) {
-
+              client.send(
-  if (!session)
+                JSON.stringify({
-    return NextResponse.json({ error: "Invalid session" }, { status: 401 });
+                  requestId,
+                  ok: false,
+                  error: "body requires runId, moves, file and language",
+                }),
+              );
+              return;
+            }
 
             const liveRun = await Core.getLiveRun(runId);
 
-  if (!liveRun)
+            if (!liveRun) {
-    return NextResponse.json(
+              client.send(
-      { error: "Run is not live or does not exist" },
+                JSON.stringify({
-      { status: 401 },
+                  requestId,
+                  ok: false,
+                  error: "Run is not live or does not exist",
+                }),
               );
+              return;
+            }
+
+            const run = await Core.addLiveRunEvent(
+              liveRun.id,
+              file,
+              language,
+              moves,
+            );
+
+            client.send(
+              JSON.stringify({
+                requestId,
+                ok: true,
+                type: "move",
+                data: run,
+              }),
+            );
+
+            break;
+          }
+
+          /* ---------------- SUBMIT ---------------- */
+          case "submit": {
+            const { runId } = msg;
+
+            if (!runId) {
+              client.send(
+                JSON.stringify({
+                  requestId,
+                  ok: false,
+                  error: "runId required",
+                }),
+              );
+              return;
+            }
+
+            const liveRun = await Core.getLiveRun(runId);
+
+            if (!liveRun) {
+              client.send(
+                JSON.stringify({
+                  requestId,
+                  ok: false,
+                  error: "Run is not live or does not exist",
+                }),
+              );
+              return;
+            }
 
             const run = await Core.submitRun(supabase, liveRun, session[0].id);
 
-  return NextResponse.json({ ok: true, run });
+            client.send(
+              JSON.stringify({
+                requestId,
+                ok: true,
+                type: "submit",
+                data: run,
+              }),
+            );
+            break;
           }
 
-export async function DELETE(req: NextRequest) {
+          /* ---------------- DELETE ---------------- */
-  const runId = req.nextUrl.searchParams.get("runId");
+          case "delete": {
+            const { runId } = msg;
 
-  if (!runId)
+            if (!runId) {
-    return NextResponse.json({ error: "missing ?runId=" }, { status: 400 });
+              client.send(
-
+                JSON.stringify({
-  const supabase = await createClient();
+                  requestId,
-
+                  ok: false,
-  const session = await getSession(supabase);
+                  error: "runId required",
-
+                }),
-  if (!session)
+              );
-    return NextResponse.json({ error: "Invalid session" }, { status: 401 });
+              return;
+            }
 
             const run = await Core.removeLiveRun(runId);
 
-  return NextResponse.json({ ok: true, run });
+            client.send(
+              JSON.stringify({
+                requestId,
+                ok: true,
+                type: "delete",
+                data: run,
+              }),
+            );
+            break;
+          }
+
+          case "getText":
+            const { runId } = msg;
+            const data = await redis.get(`liveRunText:${runId}`);
+
+            client.send(
+              JSON.stringify({
+                requestId,
+                ok: true,
+                data,
+              }),
+            );
+            break;
+
+          default:
+            client.send(
+              JSON.stringify({
+                requestId,
+                ok: false,
+                error: "Unknown message type",
+              }),
+            );
+        }
+      } catch (err) {
+        console.error(err);
+        client.send(
+          JSON.stringify({
+            requestId,
+            ok: false,
+            error: "Malformed message",
+          }),
+        );
+      }
+    });
+  });
+
+  client.on("close", () => {
+    // optional cleanup
+  });
 }

src/app/api/run/types.ts

@@ -0,0 +1,32 @@
+import { LiveRunMove } from "@/modules/live-run/types";
+
+export type ClientMessage = { requestId: string } & (
+  | {
+      type: "create";
+      problem: string;
+      category: "any%" | "100%";
+    }
+  | {
+      type: "move";
+      runId: string;
+      file: string;
+      language: string;
+      moves: LiveRunMove[];
+    }
+  | {
+      type: "submit";
+      runId: string;
+    }
+  | {
+      type: "delete";
+      runId: string;
+    }
+  | {
+      type: "getText";
+      runId: string;
+    }
+);
+
+export type ServerMessage =
+  | { ok: true; type: string; data?: any }
+  | { ok: false; error: string };

src/app/api/view-run/route.ts

@@ -2,7 +2,8 @@ import { WebSocketServer, WebSocket } from "ws";
 import Redis from "ioredis";
 import { NextRequest, NextResponse } from "next/server";
 import { LiveRunEvent } from "@/modules/live-run/types";
-import { getLiveRun, updateLiveRunViews } from "@/modules/live-run/core";
+import { updateLiveRunViews } from "@/modules/live-run/core";
+import { redis } from "@/lib/redis";
 
 export function GET(req: NextRequest) {
   const headers = new Headers();
@@ -12,7 +13,7 @@ export function GET(req: NextRequest) {
 }
 
 export function UPGRADE(client: WebSocket, server: WebSocketServer) {
-  const subscriber = new Redis();
+  const subscriber = new Redis(process.env.REDIS_URL!);
   let runId: string;
 
   client.once("message", async (message) => {
@@ -23,7 +24,7 @@ export function UPGRADE(client: WebSocket, server: WebSocketServer) {
     let lastEvent: LiveRunEvent | null = null;
 
     const sendText = async () => {
-      const text = await subscriber.get(`liveRunText:${runId}`);
+      const text = await redis.get(`liveRunText:${runId}`);
 
       if (client.readyState === WebSocket.OPEN) {
         client.send(
@@ -59,7 +60,7 @@ export function UPGRADE(client: WebSocket, server: WebSocketServer) {
   });
 
   client.once("close", async () => {
-    if (runId) await subscriber.unsubscribe(`liveRun:${runId}`);
+    await subscriber.unsubscribe(`liveRunEvent:${runId}`);
     subscriber.quit();
     await updateLiveRunViews(runId, -1);
   });

src/app/problems/page.tsx

@@ -9,6 +9,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import useAction from "@/hook/use-action";
 import { getProblems } from "@/modules/problems/actions";
 import axios from "axios";
+import Cookies from "js-cookie";
 
 export default function Problems() {
   const [problems] = useAction(getProblems);
@@ -16,7 +17,7 @@ export default function Problems() {
   useEffect(() => {
     (async () => {
       await axios.post("http://127.0.0.1:63780/auth", {
-        saveCookies: document.cookie,
+        saveCookies: Cookies.get(),
       });
     })().catch(() => {});
   }, []);

src/app/runs/[runId]/components/Editor.tsx

@@ -11,7 +11,7 @@ import { java } from "@codemirror/lang-java";
 import { useEffect, useRef, useState } from "react";
 import { LiveRun, LiveRunEvent, LiveRunMove } from "@/modules/live-run/types";
 import useAction from "@/hook/use-action";
-import { getOrigin } from "@/modules/getOrigin";
+import { getOrigin } from "@/lib/origin/client";
 
 type Language =
   | "javascript"
@@ -56,9 +56,9 @@ export default function Editor({
 
   // WebSocket connection
   useEffect(() => {
-    if (!run || !origin?.host) return;
+    if (!run || !origin?.wsOrigin) return;
 
-    const ws = new WebSocket(`ws://${origin.host}/api/view-run`);
+    const ws = new WebSocket(`${origin.wsOrigin}/api/view-run`);
 
     ws.onopen = () => {
       ws.send(run.id);
@@ -100,7 +100,7 @@ export default function Editor({
     };
 
     return () => ws.close();
-  }, [run, ]);
+  }, [run]);
 
   return (
     <CodeMirror

src/lib/origin/client.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import * as Core from "./server";
+
+export async function getOrigin() {
+  return Core.getOrigin();
+}

src/lib/origin/server.ts

@@ -0,0 +1,29 @@
+import "server-only";
+
+import { headers } from "next/headers";
+
+export async function getOrigin(): Promise<{
+  protocol: string;
+  host: string;
+  wsProtocol: string;
+  httpOrigin: string;
+  wsOrigin: string;
+}> {
+  const h = await headers();
+  const host = process.env.ORIGIN || h.get(":authority") || "localhost:3000";
+  const protocol =
+    process.env.ORIGIN_PROTO ||
+    h.get("x-forwarded-proto") ||
+    h.get(":scheme") ||
+    "https";
+
+  const wsProtocol = protocol === "https" ? "wss" : "ws";
+
+  return {
+    protocol,
+    host,
+    wsProtocol,
+    httpOrigin: `${protocol}://${host}`,
+    wsOrigin: `${wsProtocol}://${host}`,
+  };
+}

src/lib/redis.ts

@@ -2,3 +2,7 @@ import "server-only";
 import Redis from "ioredis";
 
 export const redis = new Redis(process.env.REDIS_URL!);
+
+redis.on("error", (err) => {
+  console.error("Redis error:", err);
+});

src/lib/supabase/server.ts

@@ -27,22 +27,20 @@ export async function createClient() {
   );
 }
 
-export async function createClientApi() {
+export async function createClientCookie(cookies: Map<string, string>) {
-  const cookieStore = await cookies();
-
   return createServerClient(
     process.env.SUPABASE_URL!,
     process.env.SUPABASE_SECRET_KEY!,
     {
       cookies: {
         get(name: string) {
-          return cookieStore.get(name)?.value;
+          return cookies.get(name) || null;
         },
-        set(name: string, value: string, options: CookieOptions) {
+        set(name: string, value: string) {
-          cookieStore.set(name, value, options);
+          cookies.set(name, value);
         },
         remove(name: string, options: CookieOptions) {
-          cookieStore.set(name, "", options);
+          cookies.delete(name);
         },
       },
     },

src/modules/account/actions.ts

@@ -1,21 +1,19 @@
 "use server";
 
+import { getOrigin } from "@/lib/origin/server";
 import * as Core from "./core";
 import { createClient } from "@/lib/supabase/server";
-import { headers } from "next/headers";
 import { redirect } from "next/navigation";
 
 export async function signInWithGitHub() {
   const supabase = await createClient();
 
-  const h = await headers();
+  const { httpOrigin } = await getOrigin();
-  const host = h.get("host");
-  const protocol = h.get("x-forwarded-proto") ?? "https";
 
   const { data, error } = await supabase.auth.signInWithOAuth({
     provider: "github",
     options: {
-      redirectTo: `${protocol}://${host}/api/auth/callback`,
+      redirectTo: `${httpOrigin}/api/auth/callback`,
     },
   });
 

src/modules/getOrigin.ts

@@ -1,11 +0,0 @@
-"use server";
-
-import { headers } from "next/headers";
-
-export async function getOrigin(): Promise<{ protocol: string; host: string }> {
-  const h = await headers();
-  const host = h.get("host") || "localhost:3000";
-  const protocol = h.get("x-forwarded-proto") ?? "https";
-
-  return { protocol, host };
-}

src/modules/live-run/core.ts

@@ -79,8 +79,6 @@ export async function addLiveRunEvent(
   language: string,
   moves: LiveRunMove[],
 ) {
-  const redis = new Redis();
-
   // Make sure the live run exists
   const runExists = await redis.exists(`liveRun:${runId}`);
   if (!runExists) throw "Invalid live run";