diff --git a/frontend/src/components/Emboldened.tsx b/frontend/src/components/Emboldened.tsx
index e518486..3d8d591 100644
--- a/frontend/src/components/Emboldened.tsx
+++ b/frontend/src/components/Emboldened.tsx
@@ -29,7 +29,7 @@ const Emboldened = ({
       )}
     >
       {children ?? (
-        <span class="animate-pulse bg-teal-800 max-h-1 overflow-hidden select-none text-transparent">
+        <span className="animate-pulse bg-teal-800 max-h-1 overflow-hidden select-none text-transparent">
           {skeletonWidth ?? "?"}
         </span>
       )}
diff --git a/frontend/src/components/useSocket.ts b/frontend/src/components/useSocket.ts
index d73f8c1..a727a9c 100644
--- a/frontend/src/components/useSocket.ts
+++ b/frontend/src/components/useSocket.ts
@@ -1,29 +1,39 @@
+import { withBackend } from "@/util";
 import { useEffect, useRef, useState } from "react";
 
-interface Download {
+export interface Download {
   token: number;
   filename: string;
   last_used: string;
   download_time: string;
 }
 
-interface Executable {
+export interface Executable {
   id: string;
   filename: string;
   size: number;
 }
 
-interface UseSocketResult {
+export interface UseSocketResult {
   id: number | null;
+  status: Status;
   executables: Executable[] | null;
   downloads: Download[] | null;
+  buildLog: string | null;
   deleteDownload: (id: number) => void;
 }
 
+export type Status = "connected" | "disconnected" | "connecting";
+
 function useSocket(): UseSocketResult {
   const [id, setId] = useState<number | null>(null);
   const [downloads, setDownloads] = useState<Download[] | null>(null);
-  const [executables, setExecutables] = useState<Executable[] | null>(null);
+  const [executables, setExecutables] = useState<{
+    build_log: string | null;
+    executables: Executable[];
+  } | null>(null);
+  const [status, setStatus] = useState<Status>("connecting");
+
   const socketRef = useRef<WebSocket | null>(null);
   const allowReconnectRef = useRef<boolean>(true);
 
@@ -37,7 +47,7 @@ function useSocket(): UseSocketResult {
     }
     socketRef.current.send(
       JSON.stringify({
-        type: "delete",
+        type: "delete-download-token",
         token: download_token,
       })
     );
@@ -46,9 +56,10 @@ function useSocket(): UseSocketResult {
   useEffect(() => {
     function connect() {
       const socket = new WebSocket(
-        (window.location.protocol === "https:" ? "wss://" : "ws://") +
-          (import.meta.env.DEV ? "localhost:5800" : window.location.host) +
+        withBackend(
+          window.location.protocol === "https:" ? "wss://" : "ws://",
           "/ws"
+        )
       );
       socketRef.current = socket;
 
@@ -64,7 +75,10 @@ function useSocket(): UseSocketResult {
             setDownloads(data.session.downloads as Download[]);
             break;
           case "executables":
-            setExecutables(data.executables as Executable[]);
+            setExecutables({
+              build_log: data.build_log,
+              executables: data.executables as Executable[],
+            });
             break;
           default:
             console.warn("Received unknown message type", data.type);
@@ -97,7 +111,14 @@ function useSocket(): UseSocketResult {
     };
   }, []);
 
-  return { id, downloads, executables, deleteDownload };
+  return {
+    id,
+    downloads,
+    status,
+    executables: executables?.executables ?? null,
+    buildLog: executables?.build_log,
+    deleteDownload,
+  };
 }
 
 export default useSocket;
diff --git a/frontend/src/util.ts b/frontend/src/util.ts
index e2a4c02..42aa8b7 100644
--- a/frontend/src/util.ts
+++ b/frontend/src/util.ts
@@ -1,3 +1,4 @@
+import { WindowIcon } from "@heroicons/react/16/solid";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -22,3 +23,16 @@ export function os(): Platform | "other" {
 export function toHex(value: number): string {
   return "0x" + value.toString(16).toUpperCase();
 }
+
+// Either uses the current window's host, or the backend API host depending on the environment
+// If the second argument is provided, the first becomes the protocol. The protocol of the window is used otherwise.
+// Example: withBackend('/download') -> 'localhost:5800/download'
+// Example: withBackend('/download') -> 'dynamic-preauth.xevion.dev/download'
+// Example: withBackend('https://', '/download') -> 'https://localhost:5800/download'
+// Example: withBackend('https://', '/download') -> 'https://dynamic-preauth.xevion.dev/download'
+export function withBackend(arg1: string, arg2?: string): string {
+  const path = arg2 != undefined ? arg2 : arg1;
+  const protocol = arg2 != undefined ? arg1 : window.location.protocol + "//";
+  const host = import.meta.env.DEV ? "localhost:5800" : window.location.host;
+  return protocol + host + path;
+}