feat: implement dashboard mockup and route

src/web/public/style.css

@@ -456,3 +456,152 @@ header nav a:hover::after {
         padding-right: 1rem;
     }
 }
+/* Dashboard Layout */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.stat-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    text-align: center;
+    box-shadow: var(--shadow-sm);
+}
+
+.stat-card h3 {
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+}
+
+.stat-card .stat-value {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-main);
+    font-family: var(--font-heading);
+}
+
+.dashboard-main {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 1.5rem;
+}
+
+.panel {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.panel.control-panel {
+    grid-column: 1 / -1;
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0.75rem;
+}
+
+.panel-header h2 {
+    font-size: 1.1rem;
+    margin: 0;
+}
+
+/* Activity Feed */
+.activity-feed {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.activity-item {
+    display: flex;
+    gap: 1rem;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    font-size: 0.9rem;
+}
+
+.activity-item .time {
+    color: var(--text-muted);
+    font-family: monospace;
+}
+
+.activity-item.info .message { color: var(--text-main); }
+.activity-item.success .message { color: hsl(150, 60%, 45%); }
+.activity-item.warning .message { color: hsl(35, 90%, 60%); }
+.activity-item.error .message { color: hsl(0, 80%, 60%); }
+
+.badge.live {
+    background: hsla(0, 100%, 50%, 0.2);
+    color: hsl(0, 100%, 60%);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.7rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+}
+
+/* Mock Chart */
+.mock-chart-container {
+    height: 200px;
+    display: flex;
+    align-items: flex-end;
+    gap: 4px;
+    padding-top: 1rem;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 0.5rem;
+}
+
+.mock-chart-bar {
+    flex: 1;
+    background: var(--primary);
+    opacity: 0.5;
+    border-radius: 2px 2px 0 0;
+    transition: height 0.5s ease;
+}
+
+.mock-chart-bar:hover {
+    opacity: 0.8;
+}
+
+.metrics-legend {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    text-align: center;
+}
+
+/* Responsive Dashboard */
+@media (max-width: 768px) {
+    .dashboard-grid {
+        grid-template-columns: 1fr 1fr; /* 2 columns on tablet/mobile */
+    }
+    
+    .dashboard-main {
+        grid-template-columns: 1fr; /* Stack panels */
+    }
+}

src/web/router.test.ts

@@ -13,6 +13,13 @@ describe("Web Router", () => {
         expect(text).toContain('id="uptime-display"');
     });
 
+    it("should return dashboard page on /dashboard", async () => {
+        const req = new Request("http://localhost/dashboard");
+        const res = await router(req);
+        expect(res.status).toBe(200);
+        expect(await res.text()).toContain("Live Activity");
+    });
+
     it("should return health check on /health", async () => {
         const req = new Request("http://localhost/health");
         const res = await router(req);

src/web/router.ts

@@ -1,5 +1,6 @@
 import { homeRoute } from "./routes/home";
 import { healthRoute } from "./routes/health";
+import { dashboardRoute } from "./routes/dashboard";
 import { file } from "bun";
 import { join, resolve } from "path";
 
@@ -19,12 +20,6 @@ export async function router(request: Request): Promise<Response> {
             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);
 
@@ -35,8 +30,6 @@ export async function router(request: Request): Promise<Response> {
                     return new Response(staticFile);
                 }
             } else {
-                // If path traversal detected, return 403 or 404. 
-                // 403 indicates we caught them.
                 return new Response("Forbidden", { status: 403 });
             }
         }
@@ -47,6 +40,9 @@ export async function router(request: Request): Promise<Response> {
         if (url.pathname === "/health") {
             return healthRoute();
         }
+        if (url.pathname === "/dashboard") {
+            return dashboardRoute();
+        }
     }
 
     return new Response("Not Found", { status: 404 });

src/web/routes/dashboard.ts

@@ -0,0 +1,95 @@
+import { BaseLayout } from "../views/layout";
+import { AuroraClient } from "@/lib/BotClient";
+
+export function dashboardRoute(): Response {
+    // Gather real data where possible, mock where not
+    const guildCount = AuroraClient.guilds.cache.size;
+    const userCount = AuroraClient.guilds.cache.reduce((acc, guild) => acc + guild.memberCount, 0); // Approximation
+    const commandCount = AuroraClient.commands.size;
+    const ping = AuroraClient.ws.ping;
+
+    // In a real app, these would be dynamic charts or lists
+    const mockedActivity = [
+        { time: "10:42:01", type: "info", message: "User 'Syntax' ran /profile" },
+        { time: "10:41:55", type: "success", message: "Task 'HourlyCleanup' completed" },
+        { time: "10:40:12", type: "warning", message: "API Latency spike detected (150ms)" },
+        { time: "10:39:00", type: "info", message: "Bot connected to Gateway" },
+    ];
+
+    const content = `
+        <div class="dashboard-grid">
+            <!-- Top Stats Row -->
+            <div class="stat-card">
+                <h3>Servers</h3>
+                <div class="stat-value">${guildCount}</div>
+            </div>
+            <div class="stat-card">
+                <h3>Users</h3>
+                <div class="stat-value">${userCount}</div>
+            </div>
+            <div class="stat-card">
+                <h3>Commands</h3>
+                <div class="stat-value">${commandCount}</div>
+            </div>
+            <div class="stat-card">
+                <h3>Ping</h3>
+                <div class="stat-value">${ping < 0 ? "?" : ping}ms</div>
+            </div>
+
+            <!-- Main Content Area -->
+            <div class="dashboard-main">
+                <div class="panel activity-panel">
+                    <div class="panel-header">
+                        <h2>Live Activity</h2>
+                        <span class="badge live">LIVE</span>
+                    </div>
+                    <ul class="activity-feed">
+                        ${mockedActivity.map(log => `
+                            <li class="activity-item ${log.type}">
+                                <span class="time">${log.time}</span>
+                                <span class="message">${log.message}</span>
+                            </li>
+                        `).join('')}
+                        <li class="activity-item info"><span class="time">--:--:--</span> <span class="message">Waiting for events...</span></li>
+                    </ul>
+                </div>
+
+                <div class="panel metrics-panel">
+                    <div class="panel-header">
+                        <h2>System Metrics</h2>
+                    </div>
+                    <div class="mock-chart-container">
+                        <div class="mock-chart-bar" style="height: 40%"></div>
+                        <div class="mock-chart-bar" style="height: 60%"></div>
+                        <div class="mock-chart-bar" style="height: 30%"></div>
+                        <div class="mock-chart-bar" style="height: 80%"></div>
+                        <div class="mock-chart-bar" style="height: 50%"></div>
+                        <div class="mock-chart-bar" style="height: 90%"></div>
+                        <div class="mock-chart-bar" style="height: 45%"></div>
+                    </div>
+                    <div class="metrics-legend">
+                        <span>CPU Load (Mock)</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Control Panel -->
+            <div class="panel control-panel">
+                <div class="panel-header">
+                    <h2>Quick Actions</h2>
+                </div>
+                <div class="action-buttons">
+                    <button class="btn btn-secondary" disabled>Clear Cache</button>
+                    <button class="btn btn-secondary" disabled>Reload Commands</button>
+                    <button class="btn btn-danger" disabled>Restart Bot</button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    const html = BaseLayout({ title: "Dashboard", content });
+
+    return new Response(html, {
+        headers: { "Content-Type": "text/html" },
+    });
+}

src/web/views/layout.ts

@@ -31,6 +31,7 @@ export function BaseLayout({ title, content }: LayoutProps): string {
         <h1>Aurora Web</h1>
         <nav>
             <a href="/">Home</a>
+            <a href="/dashboard">Dashboard</a>
         </nav>
     </header>
     <main>

tickets/2026-01-07-web-interface-feature-expansion.md

@@ -0,0 +1,50 @@
+# 2026-01-07-web-interface-feature-expansion
+
+**Status:** Draft
+**Created:** 2026-01-07
+**Tags:** product-design, feature-request, ui
+
+## 1. Context & User Story
+* **As a:** Bot Administrator
+* **I want to:** have more useful features on the web dashboard
+* **So that:** getting insights into the bot's performance and managing it becomes easier than using text commands.
+
+## 2. Technical Requirements
+### Proposed Features
+1.  **Live Console / Activity Feed:**
+    *   Stream abbreviated logs or important events (e.g., "User X joined", "Command Y executed").
+2.  **Metrics Dashboard:**
+    *   Visual charts for command usage (Top 5 commands).
+    *   Memory usage and CPU load over time.
+    *   API Latency gauge.
+3.  **Command Palette / Control Panel:**
+    *   Buttons to clear cache, reload configuration, or restart specific services.
+4.  **Guild/User Browser:**
+    *   Read-only list of top guilds or users by activity/economy balance.
+
+### Data Model Changes
+- [ ] May require exposing existing Service data to the Web module.
+
+### API / Interface
+- [ ] `GET /api/stats` or `WS` subscription for metrics.
+- [ ] `GET /api/logs` (tail).
+
+## 3. Constraints & Validations (CRITICAL)
+- **Security:** Modifying bot state (Control Panel) requires strict authentication/authorization (Future Ticket). For now, read-only/safe actions only.
+- **Privacy:** Do not expose sensitive user PII in the web logs or dashboard without encryption/masking.
+
+## 4. Acceptance Criteria
+1. [ ] A list of prioritized features is approved.
+2. [ ] UI Mockups (code or image) for the "Dashboard" view.
+3. [ ] Data sources for these features are identified in the codebase.
+
+## 5. Implementation Plan
+- [x] **Phase 1:** Brainstorm & Mockup (This Ticket).
+- [ ] **Phase 2:** Create individual implementation tickets for selected features (e.g., "Implement Metrics Graph").
+
+## Implementation Notes
+- Created `/dashboard` route with a code-based mockup.
+- Implemented responsive CSS Grid layout for the dashboard.
+- Integrated real `AuroraClient` data for Server Count, User Count, and Command Count.
+- Added placeholder UI for "Live Activity" and "Metrics".
+- Next steps: Connect WebSocket "HEARTBEAT" to the dashboard metrics and implement real logger streaming.