feat: save progress on web server foundation and add new tickets

src/web/public/script.js

@@ -0,0 +1,36 @@
+function formatUptime(seconds) {
+    if (seconds < 0) return "0s";
+
+    const days = Math.floor(seconds / (3600 * 24));
+    const hours = Math.floor((seconds % (3600 * 24)) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+
+    const parts = [];
+    if (days > 0) parts.push(`${days}d`);
+    if (hours > 0) parts.push(`${hours}h`);
+    if (minutes > 0) parts.push(`${minutes}m`);
+    parts.push(`${secs}s`);
+
+    return parts.join(" ");
+}
+
+function updateUptime() {
+    const el = document.getElementById("uptime-display");
+    if (!el) return;
+
+    const startTimestamp = parseInt(el.getAttribute("data-start-timestamp"), 10);
+    if (isNaN(startTimestamp)) return;
+
+    const now = Date.now();
+    const elapsedSeconds = (now - startTimestamp) / 1000;
+
+    el.textContent = formatUptime(elapsedSeconds);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    // Update immediately to prevent stale content flash if possible
+    updateUptime();
+    // Update every second
+    setInterval(updateUptime, 1000);
+});

src/web/routes/home.ts

@@ -1,6 +1,10 @@
 import { BaseLayout } from "../views/layout";
+import { formatUptime } from "../utils/format";
 
 export function homeRoute(): Response {
+    const uptime = formatUptime(process.uptime());
+    const startTimestamp = Date.now() - (process.uptime() * 1000);
+
     const content = `
         <div class="card">
             <h2>Welcome</h2>
@@ -9,6 +13,7 @@ export function homeRoute(): Response {
         <div class="card">
             <h3>Status</h3>
             <p>System operational.</p>
+            <p><strong>Uptime:</strong> <span id="uptime-display" data-start-timestamp="${Math.floor(startTimestamp)}">${uptime}</span></p>
         </div>
     `;
 

src/web/utils/format.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "bun:test";
+import { formatUptime } from "./format";
+
+describe("formatUptime", () => {
+    it("formats seconds correctly", () => {
+        expect(formatUptime(45)).toBe("45s");
+    });
+
+    it("formats minutes and seconds", () => {
+        expect(formatUptime(65)).toBe("1m 5s");
+    });
+
+    it("formats hours, minutes, and seconds", () => {
+        expect(formatUptime(3665)).toBe("1h 1m 5s");
+    });
+
+    it("formats days correctly", () => {
+        expect(formatUptime(90061)).toBe("1d 1h 1m 1s");
+    });
+
+    it("handles zero", () => {
+        expect(formatUptime(0)).toBe("0s");
+    });
+});

src/web/utils/format.ts

@@ -0,0 +1,20 @@
+/**
+ * Formats a duration in seconds into a human-readable string.
+ * Example: 3665 -> "1h 1m 5s"
+ */
+export function formatUptime(seconds: number): string {
+    if (seconds < 0) return "0s";
+
+    const days = Math.floor(seconds / (3600 * 24));
+    const hours = Math.floor((seconds % (3600 * 24)) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+
+    const parts = [];
+    if (days > 0) parts.push(`${days}d`);
+    if (hours > 0) parts.push(`${hours}h`);
+    if (minutes > 0) parts.push(`${minutes}m`);
+    parts.push(`${secs}s`);
+
+    return parts.join(" ");
+}

src/web/views/layout.ts

@@ -29,6 +29,7 @@ export function BaseLayout({ title, content }: LayoutProps): string {
     <footer>
         <p>&copy; ${new Date().getFullYear()} Aurora Bot</p>
     </footer>
+    <script src="/script.js" defer></script>
 </body>
 </html>`;
 }