Add IP session limiting

Author: sarahsturgeon

web/frontend/src/App.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
   import { onMount, afterUpdate } from "svelte";
   import Modal from "./lib/Modal.svelte";
+  import IPLimited from "./lib/IPLimited.svelte";
   import Console from "./lib/Console.svelte";
   import Editor from "./lib/Editor.svelte";
   import ScriptViewer from "./lib/ScriptViewer.svelte";
   import { isEditorOpen, sessionState, scriptMap, sessionMetadata } from "./lib/stores";
 
   let session = { id: null };
   let socket: WebSocket | null = null;
-  let view: "modal" | "loading" | "not-found" | "console" = "modal";
+  let view: "modal" | "loading" | "not-found" | "console" | "ip-limited" = "modal";
+  let ipLimit = 2;
   let readonlyLogs: string | null = null;
   let editorPanel: HTMLElement;
   let consolePanel: HTMLElement;
@@ -129,8 +131,10 @@
 
 <ScriptViewer />
 <main class="flex flex-row h-screen overflow-hidden">
-  {#if view === "modal"}
-    <Modal on:startsession={(e) => connectWebSocket(e.detail.sessionId, e.detail.sessionType)} />
+  {#if view === "ip-limited"}
+    <IPLimited limit={ipLimit} />
+  {:else if view === "modal"}
+    <Modal on:startsession={(e) => connectWebSocket(e.detail.sessionId, e.detail.sessionType)} on:iplimited={(e) => { ipLimit = e.detail.limit; view = "ip-limited"; }} />
   {:else if view === "loading"}
     <div class="flex items-center justify-center w-full h-full bg-gray-900">
       <span class="text-gray-500 font-mono text-sm">Loading session...</span>
@@ -161,7 +165,8 @@
       </button>
     </div>
     {#if $isEditorOpen}
-      <div id="resizer" on:mousedown={handleMouseDown}></div>
+      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+      <div id="resizer" on:mousedown={handleMouseDown} role="separator" aria-orientation="vertical"></div>
       <div bind:this={editorPanel} class="h-full" style="width: 33%;">
         <Editor {socket} />
       </div>

web/frontend/src/lib/Console.svelte

@@ -230,6 +230,7 @@
     <div class="mt-auto p-4">
         <div class="flex items-center border-t border-gray-700 pt-3">
             <span class="{inactive ? 'text-gray-600' : 'text-green-400'} mr-2 shrink-0">&gt;</span>
+            <!-- svelte-ignore a11y-autofocus -->
             <input type="text" bind:this={commandInput} on:keydown={handleKeydown} class="w-full bg-transparent border-none focus:ring-0 focus:outline-none {inactive ? 'text-gray-600 placeholder-gray-600 cursor-not-allowed' : 'text-gray-200 placeholder-gray-500'}" placeholder="{inactive ? 'Session ended' : 'Enter command...'}" autocomplete="off" autofocus disabled>
         </div>
     </div>

web/frontend/src/lib/IPLimited.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    export let limit: number = 2;
+</script>
+
+<div class="fixed inset-0 bg-gray-900 bg-opacity-80 flex items-center justify-center z-50 transition-opacity duration-300">
+    <div class="bg-gray-800 p-8 rounded-lg shadow-2xl transform scale-95 transition-transform duration-300 w-full max-w-md">
+        <svg class="h-10 w-10 text-red-400 mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+        </svg>
+        <h2 class="text-2xl font-bold mb-2 text-white">Session Limit Reached</h2>
+        <p class="text-gray-400">You already have {limit} active session{limit === 1 ? "" : "s"} running. Please wait for an existing session to end before starting a new one.</p>
+    </div>
+</div>

web/frontend/src/lib/Modal.svelte

@@ -17,6 +17,9 @@
 
             if (data.status === "READY") {
                 dispatch("startsession", { sessionId: data.sessionId, sessionType: containerType });
+            } else if (data.status === "IP_LIMIT") {
+                dispatch("iplimited", { limit: data.limit });
+                inQueue = false;
             } else if (data.status === "QUEUED") {
                 queuePosition = data.position;
                 pollQueueStatus(data.ticketId);

web/frontend/src/lib/ScriptViewer.svelte

@@ -35,11 +35,11 @@
 <svelte:window on:keydown={handleKeydown} />
 
 {#if $viewingScript}
-    <div class="fixed inset-0 bg-gray-900 bg-opacity-80 flex items-center justify-center z-[60]" on:click={handleBackdropClick}>
+    <div class="fixed inset-0 bg-gray-900 bg-opacity-80 flex items-center justify-center z-[60]" on:click={handleBackdropClick} on:keydown={handleKeydown} role="dialog" aria-modal="true" aria-label="Script viewer" tabindex="-1">
         <div class="bg-gray-800 rounded-lg shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col border border-gray-700/50">
             <div class="flex justify-between items-center px-4 py-3 border-b border-gray-700">
                 <span class="font-mono text-sm text-indigo-400">{$viewingScript.name}</span>
-                <button on:click={close} class="text-gray-400 hover:text-white transition-colors">
+                <button on:click={close} class="text-gray-400 hover:text-white transition-colors" aria-label="Close script viewer">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                     </svg>

web/src/index.ts

@@ -428,11 +428,15 @@ export class GmodSixtyFour extends BaseSession {}
 export class GmodPrerelease extends BaseSession {}
 export class GmodDev extends BaseSession {}
 
+const MAX_SESSIONS_PER_IP = 2;
+
 export class QueueDO extends DurableObject<Env> {
   activeSessions: Map<string, string>; // sessionId → type
+  sessionIPs: Map<string, string>; // sessionId → IP
   waitingQueue: {
     ticketId: string;
     sessionType: string;
+    ip: string;
     resolve: (value: string) => void
   }[];
   resolvedTickets: Map<string, { sessionId: string; sessionType: string }>;
@@ -441,6 +445,7 @@ export class QueueDO extends DurableObject<Env> {
   constructor(ctx: DurableObjectState, env: Env) {
     super(ctx, env);
     this.activeSessions = new Map();
+    this.sessionIPs = new Map();
     this.waitingQueue = [];
     this.resolvedTickets = new Map();
     this.maxPerType = {
@@ -452,6 +457,14 @@ export class QueueDO extends DurableObject<Env> {
 
   }
 
+  activeSessionCountForIP(ip: string): number {
+    let count = 0;
+    for (const [sessionId, sessionIp] of this.sessionIPs) {
+      if (sessionIp === ip && this.activeSessions.has(sessionId)) count++;
+    }
+    return count;
+  }
+
   activeCountForType(type: string): number {
     let count = 0;
     for (const t of this.activeSessions.values()) {
@@ -472,13 +485,26 @@ export class QueueDO extends DurableObject<Env> {
 
     if (url.pathname === "/api/request-session") {
       const sessionType = url.searchParams.get("type") || "public";
+      const clientIP = request.headers.get("CF-Connecting-IP") || "unknown";
+
+      if (clientIP !== "unknown" && this.activeSessionCountForIP(clientIP) >= MAX_SESSIONS_PER_IP) {
+        return new Response(JSON.stringify({
+          status: "IP_LIMIT",
+          limit: MAX_SESSIONS_PER_IP,
+        }), {
+          status: 429,
+          headers: { "Content-Type": "application/json" },
+        });
+      }
+
       if (this.hasCapacity(sessionType)) {
         const sessionId = crypto.randomUUID();
         this.activeSessions.set(sessionId, sessionType);
+        this.sessionIPs.set(sessionId, clientIP);
         return new Response(JSON.stringify({ status: "READY", sessionId }), { headers: { "Content-Type": "application/json" }, });
       } else {
         const ticketId = crypto.randomUUID();
-        this.waitingQueue.push({ ticketId, sessionType, resolve: (sessionId: string) => {
+        this.waitingQueue.push({ ticketId, sessionType, ip: clientIP, resolve: (sessionId: string) => {
           this.resolvedTickets.set(ticketId, { sessionId, sessionType });
         }});
         const position = this.waitingQueue.filter(w => w.sessionType === sessionType).length;
@@ -542,13 +568,15 @@ export class QueueDO extends DurableObject<Env> {
       const { sessionId } = await request.json<{sessionId: string}>();
       const closedType = this.activeSessions.get(sessionId);
       this.activeSessions.delete(sessionId);
+      this.sessionIPs.delete(sessionId);
 
       if (closedType) {
         const idx = this.waitingQueue.findIndex(w => w.sessionType === closedType);
         if (idx !== -1) {
           const nextInLine = this.waitingQueue.splice(idx, 1)[0];
           const newSessionId = crypto.randomUUID();
           this.activeSessions.set(newSessionId, nextInLine.sessionType);
+          this.sessionIPs.set(newSessionId, nextInLine.ip);
           nextInLine.resolve(newSessionId);
         }
       }