HotPlate/discord-rpg-concept
1
0
Fork 0
forked from syntaxbullet/AuroraBot-discord
Code Pull Requests Activity

feat: implement dashboard mockup and route

Browse Source
This commit is contained in:
syntaxbullet
2026-01-07 13:29:06 +01:00
parent ac4025e179
commit 63f55b6dfd
6 changed files with 307 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/web/public/style.css
View File

@@ -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 */
}
}

7
src/web/router.test.ts
View File

@@ -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);

12
src/web/router.ts
View File

@@ -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 });

95
src/web/routes/dashboard.ts Normal file
View File

@@ -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" },
});
}

1
src/web/views/layout.ts
View File

@@ -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>

50
tickets/2026-01-07-web-interface-feature-expansion.md Normal file
View File

@@ -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.