feat: responsive mobile layout and touch optimizations

.gitignore

@@ -44,4 +44,4 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 src/db/data
 src/db/log
 scratchpad/
-tickets/
+

src/commands/admin/note.ts

@@ -1,6 +1,7 @@
 import { createCommand } from "@/lib/utils";
 import { SlashCommandBuilder, PermissionFlagsBits, MessageFlags } from "discord.js";
 import { ModerationService } from "@/modules/moderation/moderation.service";
+import { CaseType } from "@/lib/constants";
 import { getNoteSuccessEmbed, getModerationErrorEmbed } from "@/modules/moderation/moderation.view";
 
 export const note = createCommand({
@@ -31,7 +32,7 @@ export const note = createCommand({
 
             // Create the note case
             const moderationCase = await ModerationService.createCase({
-                type: 'note',
+                type: CaseType.NOTE,
                 userId: targetUser.id,
                 username: targetUser.username,
                 moderatorId: interaction.user.id,

src/db/indexes.test.ts

@@ -7,7 +7,7 @@ describe("Database Indexes", () => {
             SELECT indexname FROM pg_indexes 
             WHERE tablename = 'users'
         `;
-        const indexNames = result.map(r => r.indexname);
+        const indexNames = (result as unknown as { indexname: string }[]).map(r => r.indexname);
         expect(indexNames).toContain("users_balance_idx");
         expect(indexNames).toContain("users_level_xp_idx");
     });
@@ -17,7 +17,7 @@ describe("Database Indexes", () => {
             SELECT indexname FROM pg_indexes 
             WHERE tablename = 'transactions'
         `;
-        const indexNames = result.map(r => r.indexname);
+        const indexNames = (result as unknown as { indexname: string }[]).map(r => r.indexname);
         expect(indexNames).toContain("transactions_created_at_idx");
     });
 
@@ -26,7 +26,7 @@ describe("Database Indexes", () => {
             SELECT indexname FROM pg_indexes 
             WHERE tablename = 'moderation_cases'
         `;
-        const indexNames = result.map(r => r.indexname);
+        const indexNames = (result as unknown as { indexname: string }[]).map(r => r.indexname);
         expect(indexNames).toContain("moderation_cases_user_id_idx");
         expect(indexNames).toContain("moderation_cases_case_id_idx");
     });
@@ -36,7 +36,7 @@ describe("Database Indexes", () => {
             SELECT indexname FROM pg_indexes 
             WHERE tablename = 'user_timers'
         `;
-        const indexNames = result.map(r => r.indexname);
+        const indexNames = (result as unknown as { indexname: string }[]).map(r => r.indexname);
         expect(indexNames).toContain("user_timers_expires_at_idx");
         expect(indexNames).toContain("user_timers_lookup_idx");
     });

src/index.ts

@@ -1,11 +1,14 @@
 import { AuroraClient } from "@/lib/BotClient";
 import { env } from "@lib/env";
 
+import { WebServer } from "@/web/server";
+
 // Load commands & events
 await AuroraClient.loadCommands();
 await AuroraClient.loadEvents();
 await AuroraClient.deployCommands();
 
+WebServer.start();
 
 // login with the token from .env
 if (!env.DISCORD_BOT_TOKEN) {
@@ -14,5 +17,10 @@ if (!env.DISCORD_BOT_TOKEN) {
 AuroraClient.login(env.DISCORD_BOT_TOKEN);
 
 // Handle graceful shutdown
-process.on("SIGINT", () => AuroraClient.shutdown());
+const shutdownHandler = () => {
-process.on("SIGTERM", () => AuroraClient.shutdown());
+    WebServer.stop();
+    AuroraClient.shutdown();
+};
+
+process.on("SIGINT", shutdownHandler);
+process.on("SIGTERM", shutdownHandler);

src/lib/env.ts

@@ -5,6 +5,7 @@ const envSchema = z.object({
     DISCORD_CLIENT_ID: z.string().optional(),
     DISCORD_GUILD_ID: z.string().optional(),
     DATABASE_URL: z.string().min(1, "Database URL is required"),
+    PORT: z.coerce.number().default(3000),
 });
 
 const parsedEnv = envSchema.safeParse(process.env);

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/public/style.css

@@ -0,0 +1,458 @@
+:root {
+    /* Color Palette - HSL (Hue, Saturation, Lightness) */
+    /* Primary (Aurora Cyan) */
+    --primary-h: 180;
+    --primary-s: 100%;
+    --primary-l: 50%;
+    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
+
+    /* Secondary (Aurora Purple) */
+    --secondary-h: 270;
+    --secondary-s: 100%;
+    --secondary-l: 65%;
+    --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
+
+    /* Backgrounds (Dark Slate) */
+    --bg-h: 222;
+    --bg-s: 47%;
+    --bg-l: 7%;
+    /* Very Dark */
+    --bg-color: hsl(var(--bg-h), var(--bg-s), var(--bg-l));
+
+    --card-bg-h: 217;
+    --card-bg-s: 33%;
+    --card-bg-l: 15%;
+    --card-bg: hsl(var(--card-bg-h), var(--card-bg-s), var(--card-bg-l));
+
+    /* Text */
+    --text-main: hsl(210, 40%, 98%);
+    --text-muted: hsl(215, 20%, 65%);
+    --text-accent: var(--primary);
+
+    /* Borders */
+    --border-color: hsl(215, 25%, 25%);
+
+    /* Typography */
+    --font-heading: 'Outfit', system-ui, sans-serif;
+    --font-body: 'Inter', system-ui, sans-serif;
+
+    /* Spacing & Radii */
+    --radius-md: 0.75rem;
+    --radius-lg: 1rem;
+    --header-height: 4rem;
+
+    /* Effects */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-glow: 0 0 15px hsla(var(--primary-h), var(--primary-s), 50%, 0.15);
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-main);
+    font-family: var(--font-body);
+    margin: 0;
+    line-height: 1.6;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--font-heading);
+    margin-top: 0;
+    line-height: 1.2;
+    color: var(--text-main);
+}
+
+h1 {
+    font-weight: 700;
+}
+
+/* Header */
+header {
+    background: rgba(15, 23, 42, 0.8);
+    /* Semi-transparent */
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border-color);
+    height: var(--header-height);
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 50;
+}
+
+header h1 {
+    font-size: 1.5rem;
+    margin: 0;
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: -0.02em;
+}
+
+header nav a {
+    color: var(--text-muted);
+    text-decoration: none;
+    font-weight: 500;
+    margin-left: 1.5rem;
+    transition: color 0.15s ease;
+    font-size: 0.95rem;
+}
+
+header nav a:hover {
+    color: var(--primary);
+}
+
+/* Main Layout */
+main {
+    flex: 1;
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+/* Card Component */
+.card {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow-md);
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-glow), var(--shadow-md);
+    border-color: hsla(var(--primary-h), var(--primary-s), 50%, 0.3);
+}
+
+.card h2 {
+    font-size: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--text-main);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.card p {
+    color: var(--text-muted);
+    margin-bottom: 0;
+    font-size: 0.95rem;
+}
+
+/* Links */
+a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: opacity 0.2s;
+}
+
+a:hover {
+    opacity: 0.8;
+}
+
+/* Buttons (Future Proofing) */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    font-family: var(--font-heading);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+    font-size: 0.9rem;
+    text-decoration: none;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary), hsl(var(--primary-h), 90%, 45%));
+    color: #000;
+    /* Contrast text on Cyan */
+    box-shadow: 0 4px 6px -1px hsla(var(--primary-h), var(--primary-s), 50%, 0.2);
+}
+
+.btn-primary:hover {
+    filter: brightness(1.1);
+    box-shadow: 0 6px 8px -1px hsla(var(--primary-h), var(--primary-s), 50%, 0.3);
+}
+
+/* Forms & Inputs */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+textarea,
+select {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background-color: rgba(15, 23, 42, 0.5);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    color: var(--text-main);
+    font-family: var(--font-body);
+    font-size: 0.95rem;
+    transition: all 0.2s;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px hsla(var(--primary-h), var(--primary-s), 50%, 0.2);
+    background-color: rgba(15, 23, 42, 0.8);
+}
+
+/* Tables */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+}
+
+th {
+    text-align: left;
+    padding: 1rem;
+    background-color: rgba(15, 23, 42, 0.5);
+    color: var(--text-muted);
+    font-weight: 600;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-bottom: 1px solid var(--border-color);
+}
+
+td {
+    padding: 1rem;
+    border-bottom: 1px solid #1e293b;
+    /* Fallback or specific border */
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    color: var(--text-main);
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+tr:hover td {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+/* Footer */
+footer {
+    padding: 2rem;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    border-top: 1px solid var(--border-color);
+    background: var(--bg-color);
+}
+
+/* Utilities */
+.text-gradient {
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* Animations & Micro-Interactions */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Entry Animations */
+.fade-in {
+    animation: fadeIn 0.4s ease-out forwards;
+}
+
+/* Stagger animations for children using nth-child */
+main>* {
+    opacity: 0;
+    /* Initially hidden */
+    animation: slideUp 0.5s ease-out forwards;
+}
+
+main>*:nth-child(1) {
+    animation-delay: 0.1s;
+}
+
+main>*:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+main>*:nth-child(3) {
+    animation-delay: 0.3s;
+}
+
+main>*:nth-child(4) {
+    animation-delay: 0.4s;
+}
+
+/* Dynamic Background */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background:
+        radial-gradient(circle at 15% 50%, hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.08), transparent 25%),
+        radial-gradient(circle at 85% 30%, hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.08), transparent 25%);
+    z-index: -1;
+    pointer-events: none;
+}
+
+/* Link Interactions */
+a {
+    position: relative;
+    transition: color 0.2s ease, opacity 0.2s ease;
+}
+
+header nav a::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 0%;
+    height: 2px;
+    background: var(--primary);
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+header nav a:hover::after {
+    width: 100%;
+}
+
+/* Accessibility: Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+    :root {
+        --header-height: 3.5rem;
+        /* Compact header on mobile */
+    }
+
+    body {
+        font-size: 14px;
+        /* Slightly smaller base font */
+    }
+
+    /* Layout Adjustments */
+    header {
+        padding: 0 1rem;
+    }
+
+    header nav a {
+        margin-left: 1rem;
+        font-size: 0.9rem;
+    }
+
+    main {
+        padding: 1rem;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    /* Typography Scaling */
+    h1 {
+        font-size: 1.75rem;
+    }
+
+    h2 {
+        font-size: 1.5rem;
+    }
+
+    h3 {
+        font-size: 1.25rem;
+    }
+
+    /* Card Adjustments */
+    .card {
+        padding: 1.25rem;
+        border-radius: var(--radius-md);
+        /* Slightly smaller radius */
+    }
+
+    /* Stack flex containers if needed (general util) */
+    .flex-col-mobile {
+        flex-direction: column !important;
+    }
+
+    /* Touch Targets */
+    .btn,
+    a,
+    input,
+    select {
+        min-height: 44px;
+        /* Compliance with touch target guidelines */
+    }
+
+    /* Horizontal scroll for wide tables */
+    .table-container {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        margin-left: -1rem;
+        margin-right: -1rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}

src/web/router.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "bun:test";
+import { router } from "./router";
+
+describe("Web Router", () => {
+    it("should return home page on /", async () => {
+        const req = new Request("http://localhost/");
+        const res = await router(req);
+        expect(res.status).toBe(200);
+        expect(res.headers.get("Content-Type")).toBe("text/html");
+        expect(await res.text()).toContain("Aurora Web");
+    });
+
+    it("should return health check on /health", async () => {
+        const req = new Request("http://localhost/health");
+        const res = await router(req);
+        expect(res.status).toBe(200);
+        expect(res.headers.get("Content-Type")).toBe("application/json");
+        const data = await res.json();
+        expect(data).toHaveProperty("status", "ok");
+    });
+
+    it("should block path traversal", async () => {
+        // Attempts to go up two directories to reach the project root or src
+        const req = new Request("http://localhost/public/../../package.json");
+        const res = await router(req);
+        // Should be 403 Forbidden or 404 Not Found (our logical change makes it 403)
+        expect([403, 404]).toContain(res.status);
+    });
+
+    it("should serve existing static file", async () => {
+        // We know style.css exists in src/web/public
+        const req = new Request("http://localhost/public/style.css");
+        const res = await router(req);
+        expect(res.status).toBe(200);
+        if (res.status === 200) {
+            const text = await res.text();
+            expect(text).toContain("body");
+        }
+    });
+
+    it("should not serve static files on non-GET methods", async () => {
+        const req = new Request("http://localhost/public/style.css", { method: "POST" });
+        const res = await router(req);
+        expect(res.status).toBe(404);
+    });
+
+    it("should return 404 for unknown routes", async () => {
+        const req = new Request("http://localhost/unknown");
+        const res = await router(req);
+        expect(res.status).toBe(404);
+    });
+});

src/web/router.ts

@@ -0,0 +1,53 @@
+import { homeRoute } from "./routes/home";
+import { healthRoute } from "./routes/health";
+import { file } from "bun";
+import { join, resolve } from "path";
+
+export async function router(request: Request): Promise<Response> {
+    const url = new URL(request.url);
+    const method = request.method;
+
+    // Resolve the absolute path to the public directory
+    const publicDir = resolve(import.meta.dir, "public");
+
+    if (method === "GET") {
+        // Handle Static Files
+        // We handle requests starting with /public/ OR containing an extension (like /style.css)
+        if (url.pathname.startsWith("/public/") || url.pathname.includes(".")) {
+            // Normalize path: remove /public prefix if present so that
+            // /public/style.css and /style.css both map to .../public/style.css
+            const relativePath = url.pathname.replace(/^\/public/, "");
+
+            // Resolve full path
+            // We use join with relativePath. If relativePath starts with /, join handles it correctly
+            // effectively treating it as a segment.
+            // However, to be extra safe with 'resolve', we ensure we are resolving from publicDir.
+            // simple join(publicDir, relativePath) is usually enough with 'bun'.
+            // But we use 'resolve' to handle .. segments correctly.
+            // We prepend '.' to relativePath to ensure it's treated as relative to publicDir logic
+            const normalizedRelative = relativePath.startsWith("/") ? "." + relativePath : relativePath;
+            const requestedPath = resolve(publicDir, normalizedRelative);
+
+            // Security Check: Block Path Traversal
+            if (requestedPath.startsWith(publicDir)) {
+                const staticFile = file(requestedPath);
+                if (await staticFile.exists()) {
+                    return new Response(staticFile);
+                }
+            } else {
+                // If path traversal detected, return 403 or 404. 
+                // 403 indicates we caught them.
+                return new Response("Forbidden", { status: 403 });
+            }
+        }
+
+        if (url.pathname === "/" || url.pathname === "/index.html") {
+            return homeRoute();
+        }
+        if (url.pathname === "/health") {
+            return healthRoute();
+        }
+    }
+
+    return new Response("Not Found", { status: 404 });
+}

src/web/routes/health.ts

@@ -0,0 +1,9 @@
+export function healthRoute(): Response {
+    return new Response(JSON.stringify({
+        status: "ok",
+        uptime: process.uptime(),
+        timestamp: new Date().toISOString()
+    }), {
+        headers: { "Content-Type": "application/json" },
+    });
+}

src/web/routes/home.ts

@@ -0,0 +1,25 @@
+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>
+            <p>The Aurora web server is up and running!</p>
+        </div>
+        <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>
+    `;
+
+    const html = BaseLayout({ title: "Home", content });
+
+    return new Response(html, {
+        headers: { "Content-Type": "text/html" },
+    });
+}

src/web/server.ts

@@ -0,0 +1,24 @@
+import { env } from "@/lib/env";
+import { router } from "./router";
+import type { Server } from "bun";
+
+export class WebServer {
+    private static server: Server<unknown> | null = null;
+
+    public static start() {
+        this.server = Bun.serve({
+            port: env.PORT || 3000,
+            fetch: router,
+        });
+
+        console.log(`🌐 Web server listening on http://localhost:${this.server.port}`);
+    }
+
+    public static stop() {
+        if (this.server) {
+            this.server.stop();
+            console.log("🛑 Web server stopped");
+            this.server = null;
+        }
+    }
+}

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/utils/html.test.ts

@@ -0,0 +1,17 @@
+
+import { describe, expect, it } from "bun:test";
+import { escapeHtml } from "./html";
+
+describe("HTML Utils", () => {
+    it("should escape special characters", () => {
+        const unsafe = '<script>alert("xss")</script>';
+        const safe = escapeHtml(unsafe);
+        expect(safe).toBe("&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;");
+    });
+
+    it("should handle mixed content", () => {
+        const unsafe = 'Hello & "World"';
+        const safe = escapeHtml(unsafe);
+        expect(safe).toBe("Hello &amp; &quot;World&quot;");
+    });
+});

src/web/utils/html.ts

@@ -0,0 +1,14 @@
+
+/**
+ * Escapes unsafe characters in a string to prevent XSS.
+ * @param unsafe - The raw string to escape.
+ * @returns The escaped string safe for HTML insertion.
+ */
+export function escapeHtml(unsafe: string): string {
+    return unsafe
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}

src/web/views/layout.ts

@@ -0,0 +1,38 @@
+import { escapeHtml } from "../utils/html";
+
+interface LayoutProps {
+    title: string;
+    content: string;
+}
+
+export function BaseLayout({ title, content }: LayoutProps): string {
+    const safeTitle = escapeHtml(title);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${safeTitle} | Aurora</title>
+    <link rel="stylesheet" href="/style.css">
+    <meta name="description" content="Aurora Bot Web Interface">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header>
+        <h1>Aurora Web</h1>
+        <nav>
+            <a href="/">Home</a>
+        </nav>
+    </header>
+    <main>
+        ${content}
+    </main>
+    <footer>
+        <p>&copy; ${new Date().getFullYear()} Aurora Bot</p>
+    </footer>
+    <script src="/script.js" defer></script>
+</body>
+</html>`;
+}