Merge branch 'main' of https://git.ayau.me/syntaxbullet/discord-rpg-concept

.dockerignore

@@ -0,0 +1,39 @@
+# Dependencies - handled inside container
+node_modules
+web/node_modules
+
+# Git
+.git
+.gitignore
+
+# Logs and data
+logs
+*.log
+shared/db/data
+shared/db/log
+
+# Development tools
+.env
+.env.example
+.opencode
+.agent
+
+# Documentation
+docs
+*.md
+!README.md
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Build artifacts
+dist
+.cache
+*.tsbuildinfo

.gitignore

@@ -1,5 +1,6 @@
 .env
 node_modules
+docker-compose.override.yml
 shared/db-logs
 shared/db/data
 shared/db/loga
@@ -45,3 +46,4 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 src/db/data
 src/db/log
 scratchpad/
+tickets/

AGENTS.md

@@ -0,0 +1,244 @@
+# AGENTS.md - AI Coding Agent Guidelines
+
+## Project Overview
+
+AuroraBot is a Discord bot with a web dashboard built using Bun, Discord.js, React, and PostgreSQL with Drizzle ORM.
+
+## Build/Lint/Test Commands
+
+```bash
+# Development
+bun --watch bot/index.ts         # Run bot with hot reload
+bun --hot web/src/index.ts       # Run web dashboard with hot reload
+
+# Testing
+bun test                         # Run all tests ( expect some tests to fail when running all at once like this due to the nature of the tests )
+bun test path/to/file.test.ts    # Run single test file
+bun test --watch                 # Watch mode
+bun test shared/modules/economy  # Run tests in directory
+
+# Database
+bun run generate                 # Generate Drizzle migrations (Docker)
+bun run migrate                  # Run migrations (Docker)
+bun run db:push                  # Push schema changes (Docker)
+bun run db:push:local            # Push schema changes (local)
+bun run db:studio                # Open Drizzle Studio
+
+# Web Dashboard
+cd web && bun run build          # Build production web assets
+cd web && bun run dev            # Development server
+```
+
+## Project Structure
+
+```
+bot/                    # Discord bot
+├── commands/           # Slash commands by category
+├── events/             # Discord event handlers
+├── lib/                # Bot core (BotClient, handlers, loaders)
+├── modules/            # Feature modules (views, interactions)
+└── graphics/           # Canvas image generation
+
+shared/                 # Shared between bot and web
+├── db/                 # Database schema and migrations
+├── lib/                # Utils, config, errors, types
+└── modules/            # Domain services (economy, user, etc.)
+
+web/                    # React dashboard
+├── src/pages/          # React pages
+├── src/components/     # UI components (ShadCN/Radix)
+└── src/hooks/          # React hooks
+```
+
+## Import Conventions
+
+Use path aliases defined in tsconfig.json:
+
+```typescript
+// External packages first
+import { SlashCommandBuilder } from "discord.js";
+import { eq } from "drizzle-orm";
+
+// Path aliases second
+import { economyService } from "@shared/modules/economy/economy.service";
+import { UserError } from "@shared/lib/errors";
+import { users } from "@db/schema";
+import { createErrorEmbed } from "@lib/embeds";
+import { handleTradeInteraction } from "@modules/trade/trade.interaction";
+
+// Relative imports last
+import { localHelper } from "./helper";
+```
+
+**Available Aliases:**
+
+- `@/*` - bot/
+- `@shared/*` - shared/
+- `@db/*` - shared/db/
+- `@lib/*` - bot/lib/
+- `@modules/*` - bot/modules/
+- `@commands/*` - bot/commands/
+
+## Naming Conventions
+
+| Element          | Convention              | Example                                  |
+| ---------------- | ----------------------- | ---------------------------------------- |
+| Files            | camelCase or kebab-case | `BotClient.ts`, `economy.service.ts`     |
+| Classes          | PascalCase              | `CommandHandler`, `UserError`            |
+| Functions        | camelCase               | `createCommand`, `handleShopInteraction` |
+| Constants        | UPPER_SNAKE_CASE        | `EVENTS`, `BRANDING`                     |
+| Enums            | PascalCase              | `TimerType`, `TransactionType`           |
+| Services         | camelCase singleton     | `economyService`, `userService`          |
+| Types/Interfaces | PascalCase              | `Command`, `Event`, `GameConfigType`     |
+| DB tables        | snake_case              | `users`, `moderation_cases`              |
+| Custom IDs       | snake_case with prefix  | `shop_buy_`, `trade_accept_`             |
+
+## Code Patterns
+
+### Command Definition
+
+```typescript
+export const commandName = createCommand({
+  data: new SlashCommandBuilder()
+    .setName("commandname")
+    .setDescription("Description"),
+  execute: async (interaction) => {
+    await interaction.deferReply();
+    // Implementation
+  },
+});
+```
+
+### Service Pattern (Singleton Object)
+
+```typescript
+export const serviceName = {
+  methodName: async (params: ParamType): Promise<ReturnType> => {
+    return await withTransaction(async (tx) => {
+      // Database operations
+    });
+  },
+};
+```
+
+### Module File Organization
+
+- `*.view.ts` - Creates Discord embeds/components
+- `*.interaction.ts` - Handles button/select/modal interactions
+- `*.types.ts` - Module-specific TypeScript types
+- `*.service.ts` - Business logic (in shared/modules/)
+- `*.test.ts` - Test files (co-located with source)
+
+## Error Handling
+
+### Custom Error Classes
+
+```typescript
+import { UserError, SystemError } from "@shared/lib/errors";
+
+// User-facing errors (shown to user)
+throw new UserError("You don't have enough coins!");
+
+// System errors (logged, generic message shown)
+throw new SystemError("Database connection failed");
+```
+
+### Standard Error Pattern
+
+```typescript
+try {
+  const result = await service.method();
+  await interaction.editReply({ embeds: [createSuccessEmbed(result)] });
+} catch (error) {
+  if (error instanceof UserError) {
+    await interaction.editReply({ embeds: [createErrorEmbed(error.message)] });
+  } else {
+    console.error("Unexpected error:", error);
+    await interaction.editReply({
+      embeds: [createErrorEmbed("An unexpected error occurred.")],
+    });
+  }
+}
+```
+
+## Database Patterns
+
+### Transaction Usage
+
+```typescript
+import { withTransaction } from "@/lib/db";
+
+return await withTransaction(async (tx) => {
+  const user = await tx.query.users.findFirst({
+    where: eq(users.id, discordId),
+  });
+
+  await tx
+    .update(users)
+    .set({ coins: newBalance })
+    .where(eq(users.id, discordId));
+  await tx.insert(transactions).values({ userId: discordId, amount, type });
+
+  return user;
+}, existingTx); // Pass existing tx if in nested transaction
+```
+
+### Schema Notes
+
+- Use `bigint` mode for Discord IDs and currency amounts
+- Relations defined separately from table definitions
+- Schema location: `shared/db/schema.ts`
+
+## Testing
+
+### Test File Structure
+
+```typescript
+import { describe, it, expect, mock, beforeEach } from "bun:test";
+
+// Mock modules BEFORE imports
+mock.module("@shared/db/DrizzleClient", () => ({
+  DrizzleClient: { query: mockQuery },
+}));
+
+describe("serviceName", () => {
+  beforeEach(() => {
+    mockFn.mockClear();
+  });
+
+  it("should handle expected case", async () => {
+    // Arrange
+    mockFn.mockResolvedValue(testData);
+
+    // Act
+    const result = await service.method(input);
+
+    // Assert
+    expect(result).toEqual(expected);
+    expect(mockFn).toHaveBeenCalledWith(expectedArgs);
+  });
+});
+```
+
+## Tech Stack
+
+- **Runtime:** Bun 1.0+
+- **Bot:** Discord.js 14.x
+- **Web:** React 19 + Bun HTTP Server
+- **Database:** PostgreSQL 16+ with Drizzle ORM
+- **UI:** Tailwind CSS v4 + ShadCN/Radix
+- **Validation:** Zod
+- **Testing:** Bun Test
+- **Container:** Docker
+
+## Key Files Reference
+
+| Purpose       | File                   |
+| ------------- | ---------------------- |
+| Bot entry     | `bot/index.ts`         |
+| DB schema     | `shared/db/schema.ts`  |
+| Error classes | `shared/lib/errors.ts` |
+| Config loader | `shared/lib/config.ts` |
+| Environment   | `shared/lib/env.ts`    |
+| Embed helpers | `bot/lib/embeds.ts`    |
+| Command utils | `shared/lib/utils.ts`  |

Dockerfile

@@ -1,21 +1,55 @@
+# ============================================
+# Base stage - shared configuration
+# ============================================
 FROM oven/bun:latest AS base
 WORKDIR /app
 
-# Install system dependencies
-RUN apt-get update && apt-get install -y git && rm -rf /var/lib/apt/lists/*
+# Install system dependencies with cleanup in same layer
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends git && \
+    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
-# Install root project dependencies
+# ============================================
+# Dependencies stage - installs all deps
+# ============================================
+FROM base AS deps
+
+# Copy only package files first (better layer caching)
 COPY package.json bun.lock ./
-RUN bun install --frozen-lockfile
-
-# Install web project dependencies
 COPY web/package.json web/bun.lock ./web/
-RUN cd web && bun install --frozen-lockfile
 
-# Copy source code
-COPY . .
+# Install all dependencies in one layer
+RUN bun install --frozen-lockfile && \
+    cd web && bun install --frozen-lockfile
 
-# Expose ports (3000 for web dashboard)
+# ============================================
+# Development stage - for local dev with volume mounts
+# ============================================
+FROM base AS development
+
+# Copy dependencies from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=deps /app/web/node_modules ./web/node_modules
+
+# Expose ports
+EXPOSE 3000
+
+# Default command
+CMD ["bun", "run", "dev"]
+
+# ============================================
+# Production stage - full app with source code
+# ============================================
+FROM base AS production
+
+# Copy dependencies from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=deps /app/web/node_modules ./web/node_modules
+
+# Copy source code
+COPY . .
+
+# Expose ports
 EXPOSE 3000
 
 # Default command

bot/commands/admin/listing.ts

@@ -10,7 +10,7 @@ import {
 } from "discord.js";
 import { inventoryService } from "@shared/modules/inventory/inventory.service";
 import { createSuccessEmbed, createErrorEmbed, createBaseEmbed } from "@lib/embeds";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { items } from "@db/schema";
 import { ilike, isNotNull, and } from "drizzle-orm";
 import { DrizzleClient } from "@shared/db/DrizzleClient";
@@ -65,10 +65,10 @@ export const listing = createCommand({
             await interaction.editReply({ content: `✅ Listing for **${item.name}** posted in ${targetChannel}.` });
         } catch (error: any) {
             if (error instanceof UserError) {
-                await interaction.reply({ embeds: [createErrorEmbed(error.message)], ephemeral: true });
+                await interaction.editReply({ embeds: [createErrorEmbed(error.message)] });
             } else {
                 console.error("Error creating listing:", error);
-                await interaction.reply({ embeds: [createErrorEmbed("An unexpected error occurred.")], ephemeral: true });
+                await interaction.editReply({ embeds: [createErrorEmbed("An unexpected error occurred.")] });
             }
         }
     },

bot/commands/admin/update.ts

@@ -49,7 +49,7 @@ async function handleUpdate(interaction: any) {
     const force = interaction.options.getBoolean("force") || false;
 
     try {
-        // 1. Check for updates
+        // 1. Check for updates (now includes requirements in one call)
         await interaction.editReply({ embeds: [getCheckingEmbed()] });
         const updateInfo = await UpdateService.checkForUpdates();
 
@@ -60,8 +60,8 @@ async function handleUpdate(interaction: any) {
             return;
         }
 
-        // 2. Analyze requirements
-        const requirements = await UpdateService.checkUpdateRequirements(updateInfo.branch);
+        // 2. Extract requirements from the combined response
+        const { requirements } = updateInfo;
         const categories = UpdateService.categorizeChanges(requirements.changedFiles);
 
         // 3. Show confirmation with details
@@ -97,6 +97,7 @@ async function handleUpdate(interaction: any) {
                     timestamp: Date.now(),
                     runMigrations: requirements.needsMigrations,
                     installDependencies: requirements.needsRootInstall || requirements.needsWebInstall,
+                    buildWebAssets: requirements.needsWebBuild,
                     previousCommit: previousCommit.substring(0, 7),
                     newCommit: updateInfo.latestCommit
                 });

bot/commands/economy/daily.ts

@@ -3,13 +3,14 @@ import { createCommand } from "@shared/lib/utils";
 import { SlashCommandBuilder } from "discord.js";
 import { economyService } from "@shared/modules/economy/economy.service";
 import { createErrorEmbed, createSuccessEmbed } from "@lib/embeds";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 
 export const daily = createCommand({
     data: new SlashCommandBuilder()
         .setName("daily")
         .setDescription("Claim your daily reward"),
     execute: async (interaction) => {
+        await interaction.deferReply();
         try {
             const result = await economyService.claimDaily(interaction.user.id);
 
@@ -21,14 +22,14 @@ export const daily = createCommand({
                 )
                 .setColor("Gold");
 
-            await interaction.reply({ embeds: [embed] });
+            await interaction.editReply({ embeds: [embed] });
 
         } catch (error: any) {
             if (error instanceof UserError) {
-                await interaction.reply({ embeds: [createErrorEmbed(error.message)], ephemeral: true });
+                await interaction.editReply({ embeds: [createErrorEmbed(error.message)] });
             } else {
                 console.error("Error claiming daily:", error);
-                await interaction.reply({ embeds: [createErrorEmbed("An unexpected error occurred.")], ephemeral: true });
+                await interaction.editReply({ embeds: [createErrorEmbed("An unexpected error occurred.")] });
             }
         }
     }

bot/commands/economy/exam.ts

@@ -1,21 +1,7 @@
 import { createCommand } from "@shared/lib/utils";
 import { SlashCommandBuilder } from "discord.js";
-import { userService } from "@shared/modules/user/user.service";
 import { createErrorEmbed, createSuccessEmbed } from "@lib/embeds";
-import { UserError } from "@/lib/errors";
-import { userTimers, users } from "@db/schema";
-import { eq, and, sql } from "drizzle-orm";
-import { DrizzleClient } from "@shared/db/DrizzleClient";
-import { config } from "@shared/lib/config";
-import { TimerType } from "@shared/lib/constants";
-
-const EXAM_TIMER_TYPE = TimerType.EXAM_SYSTEM;
-const EXAM_TIMER_KEY = 'default';
-
-interface ExamMetadata {
-    examDay: number;
-    lastXp: string;
-}
+import { examService, ExamStatus } from "@shared/modules/economy/exam.service";
 
 const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 
@@ -25,105 +11,42 @@ export const exam = createCommand({
         .setDescription("Take your weekly exam to earn rewards based on your XP progress."),
     execute: async (interaction) => {
         await interaction.deferReply();
-        const user = await userService.getOrCreateUser(interaction.user.id, interaction.user.username);
-        if (!user) {
-            await interaction.editReply({ embeds: [createErrorEmbed("Failed to retrieve user data.")] });
-            return;
-        }
-        const now = new Date();
-        const currentDay = now.getDay();
 
         try {
-            // 1. Fetch existing timer/exam data
-            const timer = await DrizzleClient.query.userTimers.findFirst({
-                where: and(
-                    eq(userTimers.userId, user.id),
-                    eq(userTimers.type, EXAM_TIMER_TYPE),
-                    eq(userTimers.key, EXAM_TIMER_KEY)
-                )
-            });
+            // First, try to take the exam or check status
+            const result = await examService.takeExam(interaction.user.id);
 
-            // 2. First Run Logic
-            if (!timer) {
-                // Set exam day to today
-                const nextExamDate = new Date(now);
-                nextExamDate.setDate(now.getDate() + 7);
-                nextExamDate.setHours(0, 0, 0, 0);
-                const nextExamTimestamp = Math.floor(nextExamDate.getTime() / 1000);
-
-                const metadata: ExamMetadata = {
-                    examDay: currentDay,
-                    lastXp: (user.xp ?? 0n).toString()
-                };
-
-                await DrizzleClient.insert(userTimers).values({
-                    userId: user.id,
-                    type: EXAM_TIMER_TYPE,
-                    key: EXAM_TIMER_KEY,
-                    expiresAt: nextExamDate,
-                    metadata: metadata
-                });
+            if (result.status === ExamStatus.NOT_REGISTERED) {
+                // Register the user
+                const regResult = await examService.registerForExam(interaction.user.id, interaction.user.username);
+                const nextRegTimestamp = Math.floor(regResult.nextExamAt!.getTime() / 1000);
 
                 await interaction.editReply({
                     embeds: [createSuccessEmbed(
-                        `You have registered for the exam! Your exam day is **${DAYS[currentDay]}** (Server Time).\n` +
-                        `Come back on <t:${nextExamTimestamp}:D> (<t:${nextExamTimestamp}:R>) to take your first exam!`,
+                        `You have registered for the exam! Your exam day is **${DAYS[regResult.examDay!]}** (Server Time).\n` +
+                        `Come back on <t:${nextRegTimestamp}:D> (<t:${nextRegTimestamp}:R>) to take your first exam!`,
                         "Exam Registration Successful"
                     )]
                 });
                 return;
             }
 
-            const metadata = timer.metadata as unknown as ExamMetadata;
-            const examDay = metadata.examDay;
-
-            // 3. Cooldown Check
-            const expiresAt = new Date(timer.expiresAt);
-            expiresAt.setHours(0, 0, 0, 0);
-
-            if (now < expiresAt) {
-                // Calculate time remaining
-                const timestamp = Math.floor(expiresAt.getTime() / 1000);
+            const nextExamTimestamp = Math.floor(result.nextExamAt!.getTime() / 1000);
 
+            if (result.status === ExamStatus.COOLDOWN) {
                 await interaction.editReply({
                     embeds: [createErrorEmbed(
                         `You have already taken your exam for this week (or are waiting for your first week to pass).\n` +
-                        `Next exam available: <t:${timestamp}:D> (<t:${timestamp}:R>)`
+                        `Next exam available: <t:${nextExamTimestamp}:D> (<t:${nextExamTimestamp}:R>)`
                     )]
                 });
                 return;
             }
 
-            // 4. Day Check
-            if (currentDay !== examDay) {
-                // Calculate next correct exam day to correct the schedule
-                let daysUntil = (examDay - currentDay + 7) % 7;
-                if (daysUntil === 0) daysUntil = 7;
-
-                const nextExamDate = new Date(now);
-                nextExamDate.setDate(now.getDate() + daysUntil);
-                nextExamDate.setHours(0, 0, 0, 0);
-                const nextExamTimestamp = Math.floor(nextExamDate.getTime() / 1000);
-
-                const newMetadata: ExamMetadata = {
-                    examDay: examDay,
-                    lastXp: (user.xp ?? 0n).toString()
-                };
-
-                await DrizzleClient.update(userTimers)
-                    .set({
-                        expiresAt: nextExamDate,
-                        metadata: newMetadata
-                    })
-                    .where(and(
-                        eq(userTimers.userId, user.id),
-                        eq(userTimers.type, EXAM_TIMER_TYPE),
-                        eq(userTimers.key, EXAM_TIMER_KEY)
-                    ));
-
+            if (result.status === ExamStatus.MISSED) {
                 await interaction.editReply({
                     embeds: [createErrorEmbed(
-                        `You missed your exam day! Your exam day is **${DAYS[examDay]}** (Server Time).\n` +
+                        `You missed your exam day! Your exam day is **${DAYS[result.examDay!]}** (Server Time).\n` +
                         `You verify your attendance but score a **0**.\n` +
                         `Your next exam opportunity is: <t:${nextExamTimestamp}:D> (<t:${nextExamTimestamp}:R>)`,
                         "Exam Failed"
@@ -132,74 +55,21 @@ export const exam = createCommand({
                 return;
             }
 
-            // 5. Reward Calculation
-            const lastXp = BigInt(metadata.lastXp || "0"); // Fallback just in case
-            const currentXp = user.xp ?? 0n;
-            const diff = currentXp - lastXp;
-
-            // Calculate Reward
-            const multMin = config.economy.exam.multMin;
-            const multMax = config.economy.exam.multMax;
-            const multiplier = Math.random() * (multMax - multMin) + multMin;
-
-            // Allow negative reward? existing description implies "difference", usually gain. 
-            // If diff is negative (lost XP?), reward might be 0.
-            let reward = 0n;
-            if (diff > 0n) {
-                reward = BigInt(Math.floor(Number(diff) * multiplier));
-            }
-
-            // 6. Update State
-            const nextExamDate = new Date(now);
-            nextExamDate.setDate(now.getDate() + 7);
-            nextExamDate.setHours(0, 0, 0, 0);
-            const nextExamTimestamp = Math.floor(nextExamDate.getTime() / 1000);
-
-            const newMetadata: ExamMetadata = {
-                examDay: examDay,
-                lastXp: currentXp.toString()
-            };
-
-            await DrizzleClient.transaction(async (tx) => {
-                // Update Timer
-                await tx.update(userTimers)
-                    .set({
-                        expiresAt: nextExamDate,
-                        metadata: newMetadata
-                    })
-                    .where(and(
-                        eq(userTimers.userId, user.id),
-                        eq(userTimers.type, EXAM_TIMER_TYPE),
-                        eq(userTimers.key, EXAM_TIMER_KEY)
-                    ));
-
-                // Add Currency
-                if (reward > 0n) {
-                    await tx.update(users)
-                        .set({
-                            balance: sql`${users.balance} + ${reward}`
-                        })
-                        .where(eq(users.id, user.id));
-                }
-            });
-
+            // If it reached here with AVAILABLE, it means they passed
             await interaction.editReply({
                 embeds: [createSuccessEmbed(
-                    `**XP Gained:** ${diff.toString()}\n` +
-                    `**Multiplier:** x${multiplier.toFixed(2)}\n` +
-                    `**Reward:** ${reward.toString()} Currency\n\n` +
+                    `**XP Gained:** ${result.xpDiff?.toString()}\n` +
+                    `**Multiplier:** x${result.multiplier?.toFixed(2)}\n` +
+                    `**Reward:** ${result.reward?.toString()} Currency\n\n` +
                     `See you next week: <t:${nextExamTimestamp}:D>`,
                     "Exam Passed!"
                 )]
             });
 
         } catch (error: any) {
-            if (error instanceof UserError) {
-                await interaction.reply({ embeds: [createErrorEmbed(error.message)], ephemeral: true });
-            } else {
             console.error("Error in exam command:", error);
-                await interaction.reply({ embeds: [createErrorEmbed("An unexpected error occurred.")], ephemeral: true });
-            }
+            await interaction.editReply({ embeds: [createErrorEmbed(error.message || "An unexpected error occurred.")] });
         }
     }
 });
+

bot/commands/economy/pay.ts

@@ -5,7 +5,7 @@ import { economyService } from "@shared/modules/economy/economy.service";
 import { userService } from "@shared/modules/user/user.service";
 import { config } from "@shared/lib/config";
 import { createErrorEmbed, createSuccessEmbed } from "@lib/embeds";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 
 export const pay = createCommand({
     data: new SlashCommandBuilder()

bot/commands/economy/trivia.ts

@@ -3,7 +3,7 @@ import { SlashCommandBuilder } from "discord.js";
 import { triviaService } from "@shared/modules/trivia/trivia.service";
 import { getTriviaQuestionView } from "@/modules/trivia/trivia.view";
 import { createErrorEmbed } from "@lib/embeds";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { config } from "@shared/lib/config";
 import { TriviaCategory } from "@shared/lib/constants";
 

bot/commands/inventory/use.ts

@@ -5,7 +5,7 @@ import { userService } from "@shared/modules/user/user.service";
 import { createErrorEmbed } from "@lib/embeds";
 import { getItemUseResultEmbed } from "@/modules/inventory/inventory.view";
 import type { ItemUsageData } from "@shared/lib/types";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { config } from "@shared/lib/config";
 
 export const use = createCommand({

bot/commands/quest/quests.ts

@@ -1,25 +1,83 @@
 import { createCommand } from "@shared/lib/utils";
 import { SlashCommandBuilder, MessageFlags } from "discord.js";
 import { questService } from "@shared/modules/quest/quest.service";
-import { createWarningEmbed } from "@lib/embeds";
-import { getQuestListEmbed } from "@/modules/quest/quest.view";
+import { createSuccessEmbed } from "@lib/embeds";
+import { 
+    getQuestListComponents, 
+    getAvailableQuestsComponents, 
+    getQuestActionRows 
+} from "@/modules/quest/quest.view";
 
 export const quests = createCommand({
     data: new SlashCommandBuilder()
         .setName("quests")
-        .setDescription("View your active quests"),
+        .setDescription("View your active and available quests"),
     execute: async (interaction) => {
-        await interaction.deferReply({ flags: MessageFlags.Ephemeral });
+        const response = await interaction.deferReply({ flags: MessageFlags.Ephemeral });
 
-        const userQuests = await questService.getUserQuests(interaction.user.id);
+        const userId = interaction.user.id;
 
-        if (!userQuests || userQuests.length === 0) {
-            await interaction.editReply({ embeds: [createWarningEmbed("You have no active quests.", "Quest Log")] });
-            return;
+        const updateView = async (viewType: 'active' | 'available') => {
+            const userQuests = await questService.getUserQuests(userId);
+            const availableQuests = await questService.getAvailableQuests(userId);
+
+            const containers = viewType === 'active'
+                ? getQuestListComponents(userQuests)
+                : getAvailableQuestsComponents(availableQuests);
+
+            const actionRows = getQuestActionRows(viewType);
+
+            await interaction.editReply({
+                content: null,
+                embeds: null as any,
+                components: [...containers, ...actionRows] as any,
+                flags: MessageFlags.IsComponentsV2,
+                allowedMentions: { parse: [] }
+            });
+        };
+
+        // Initial view
+        await updateView('active');
+
+        const collector = response.createMessageComponentCollector({
+            time: 120000, // 2 minutes
+            componentType: undefined // Allow buttons
+        });
+
+        collector.on('collect', async (i) => {
+            if (i.user.id !== interaction.user.id) return;
+
+            try {
+                if (i.customId === "quest_view_active") {
+                    await i.deferUpdate();
+                    await updateView('active');
+                } else if (i.customId === "quest_view_available") {
+                    await i.deferUpdate();
+                    await updateView('available');
+                } else if (i.customId.startsWith("quest_accept:")) {
+                    const questIdStr = i.customId.split(":")[1];
+                    if (!questIdStr) return;
+                    const questId = parseInt(questIdStr);
+                    await questService.assignQuest(userId, questId);
+
+                    await i.reply({
+                        embeds: [createSuccessEmbed(`You have accepted a new quest!`, "Quest Accepted")],
+                        flags: MessageFlags.Ephemeral
+                    });
+
+                    await updateView('active');
                 }
+            } catch (error) {
+                console.error("Quest interaction error:", error);
+                await i.followUp({
+                    content: "Something went wrong while processing your quest interaction.",
+                    flags: MessageFlags.Ephemeral
+                });
+            }
+        });
 
-        const embed = getQuestListEmbed(userQuests);
-
-        await interaction.editReply({ embeds: [embed] });
+        collector.on('end', () => {
+            interaction.editReply({ components: [] }).catch(() => {});
+        });
     }
 });

bot/lib/BotClient.ts

@@ -1,4 +1,4 @@
-import { Client as DiscordClient, Collection, GatewayIntentBits, REST, Routes } from "discord.js";
+import { Client as DiscordClient, Collection, GatewayIntentBits, REST, Routes, MessageFlags } from "discord.js";
 import { join } from "node:path";
 import type { Command } from "@shared/lib/types";
 import { env } from "@shared/lib/env";
@@ -74,6 +74,27 @@ export class Client extends DiscordClient {
             console.log(`🛠️ System Action: Maintenance mode ${enabled ? "ON" : "OFF"}${reason ? ` (${reason})` : ""}`);
             this.maintenanceMode = enabled;
         });
+
+        systemEvents.on(EVENTS.QUEST.COMPLETED, async (data: { userId: string, quest: any, rewards: any }) => {
+            const { userId, quest, rewards } = data;
+            try {
+                const user = await this.users.fetch(userId);
+                if (!user) return;
+
+                const { getQuestCompletionComponents } = await import("@/modules/quest/quest.view");
+                const components = getQuestCompletionComponents(quest, rewards);
+
+                // Try to send to the user's DM
+                await user.send({ 
+                    components: components as any,
+                    flags: [MessageFlags.IsComponentsV2]
+                }).catch(async () => {
+                    console.warn(`Could not DM user ${userId} quest completion message. User might have DMs disabled.`);
+                });
+            } catch (error) {
+                console.error("Failed to send quest completion notification:", error);
+            }
+        });
     }
 
     async loadCommands(reload: boolean = false) {
@@ -176,4 +197,4 @@ export class Client extends DiscordClient {
     }
 }
 
-export const AuroraClient = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.MessageContent, GatewayIntentBits.GuildMessages, GatewayIntentBits.GuildMembers] });
+export const AuroraClient = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.MessageContent, GatewayIntentBits.GuildMessages, GatewayIntentBits.GuildMembers, GatewayIntentBits.DirectMessages] });

bot/lib/clientStats.ts

@@ -23,6 +23,7 @@ export function getClientStats(): ClientStats {
         bot: {
             name: AuroraClient.user?.username || "Aurora",
             avatarUrl: AuroraClient.user?.displayAvatarURL() || null,
+            status: AuroraClient.user?.presence.activities[0]?.state || AuroraClient.user?.presence.activities[0]?.name || null,
         },
         guilds: AuroraClient.guilds.cache.size,
         ping: AuroraClient.ws.ping,

bot/lib/embeds.ts

@@ -1,4 +1,15 @@
 import { Colors, type ColorResolvable, EmbedBuilder } from "discord.js";
+import { BRANDING } from "@shared/lib/constants";
+import pkg from "../../package.json";
+
+/**
+ * Applies standard branding to an embed.
+ */
+function applyBranding(embed: EmbedBuilder): EmbedBuilder {
+    return embed.setFooter({ 
+        text: `${BRANDING.FOOTER_TEXT} v${pkg.version}` 
+    });
+}
 
 /**
  * Creates a standardized error embed.
@@ -7,11 +18,13 @@ import { Colors, type ColorResolvable, EmbedBuilder } from "discord.js";
  * @returns An EmbedBuilder instance configured as an error.
  */
 export function createErrorEmbed(message: string, title: string = "Error"): EmbedBuilder {
-    return new EmbedBuilder()
+    const embed = new EmbedBuilder()
         .setTitle(`❌ ${title}`)
         .setDescription(message)
         .setColor(Colors.Red)
         .setTimestamp();
+    
+    return applyBranding(embed);
 }
 
 /**
@@ -21,11 +34,13 @@ export function createErrorEmbed(message: string, title: string = "Error"): Embe
  * @returns An EmbedBuilder instance configured as a warning.
  */
 export function createWarningEmbed(message: string, title: string = "Warning"): EmbedBuilder {
-    return new EmbedBuilder()
+    const embed = new EmbedBuilder()
         .setTitle(`⚠️ ${title}`)
         .setDescription(message)
         .setColor(Colors.Yellow)
         .setTimestamp();
+
+    return applyBranding(embed);
 }
 
 /**
@@ -35,11 +50,13 @@ export function createWarningEmbed(message: string, title: string = "Warning"):
  * @returns An EmbedBuilder instance configured as a success.
  */
 export function createSuccessEmbed(message: string, title: string = "Success"): EmbedBuilder {
-    return new EmbedBuilder()
+    const embed = new EmbedBuilder()
         .setTitle(`✅ ${title}`)
         .setDescription(message)
         .setColor(Colors.Green)
         .setTimestamp();
+
+    return applyBranding(embed);
 }
 
 /**
@@ -49,11 +66,13 @@ export function createSuccessEmbed(message: string, title: string = "Success"):
  * @returns An EmbedBuilder instance configured as info.
  */
 export function createInfoEmbed(message: string, title: string = "Info"): EmbedBuilder {
-    return new EmbedBuilder()
+    const embed = new EmbedBuilder()
         .setTitle(`ℹ️ ${title}`)
         .setDescription(message)
         .setColor(Colors.Blue)
         .setTimestamp();
+
+    return applyBranding(embed);
 }
 
 /**
@@ -65,11 +84,12 @@ export function createInfoEmbed(message: string, title: string = "Info"): EmbedB
  */
 export function createBaseEmbed(title?: string, description?: string, color?: ColorResolvable): EmbedBuilder {
     const embed = new EmbedBuilder()
-        .setTimestamp();
+        .setTimestamp()
+        .setColor(color ?? BRANDING.COLOR);
 
     if (title) embed.setTitle(title);
     if (description) embed.setDescription(description);
-    if (color) embed.setColor(color);
 
-    return embed;
+    return applyBranding(embed);
 }
+

bot/lib/errors.ts

@@ -1,18 +0,0 @@
-export class ApplicationError extends Error {
-    constructor(message: string) {
-        super(message);
-        this.name = this.constructor.name;
-    }
-}
-
-export class UserError extends ApplicationError {
-    constructor(message: string) {
-        super(message);
-    }
-}
-
-export class SystemError extends ApplicationError {
-    constructor(message: string) {
-        super(message);
-    }
-}

bot/lib/handlers/AutocompleteHandler.ts

@@ -1,5 +1,6 @@
 import { AutocompleteInteraction } from "discord.js";
 import { AuroraClient } from "@/lib/BotClient";
+import { logger } from "@shared/lib/logger";
  
 
 /**
@@ -16,7 +17,7 @@ export class AutocompleteHandler {
         try {
             await command.autocomplete(interaction);
         } catch (error) {
-            console.error(`Error handling autocomplete for ${interaction.commandName}:`, error);
+            logger.error("bot", `Error handling autocomplete for ${interaction.commandName}`, error);
         }
     }
 }

bot/lib/handlers/CommandHandler.ts

@@ -2,6 +2,7 @@ import { ChatInputCommandInteraction, MessageFlags } from "discord.js";
 import { AuroraClient } from "@/lib/BotClient";
 import { userService } from "@shared/modules/user/user.service";
 import { createErrorEmbed } from "@lib/embeds";
+import { logger } from "@shared/lib/logger";
 
 
 /**
@@ -13,7 +14,7 @@ export class CommandHandler {
         const command = AuroraClient.commands.get(interaction.commandName);
 
         if (!command) {
-            console.error(`No command matching ${interaction.commandName} was found.`);
+            logger.error("bot", `No command matching ${interaction.commandName} was found.`);
             return;
         }
 
@@ -28,14 +29,14 @@ export class CommandHandler {
         try {
             await userService.getOrCreateUser(interaction.user.id, interaction.user.username);
         } catch (error) {
-            console.error("Failed to ensure user exists:", error);
+            logger.error("bot", "Failed to ensure user exists", error);
         }
 
         try {
             await command.execute(interaction);
             AuroraClient.lastCommandTimestamp = Date.now();
         } catch (error) {
-            console.error(String(error));
+            logger.error("bot", `Error executing command ${interaction.commandName}`, error);
             const errorEmbed = createErrorEmbed('There was an error while executing this command!');
 
             if (interaction.replied || interaction.deferred) {

bot/lib/handlers/ComponentInteractionHandler.ts

@@ -1,7 +1,8 @@
 import { ButtonInteraction, StringSelectMenuInteraction, ModalSubmitInteraction, MessageFlags } from "discord.js";
  
-import { UserError } from "@lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { createErrorEmbed } from "@lib/embeds";
+import { logger } from "@shared/lib/logger";
 
 type ComponentInteraction = ButtonInteraction | StringSelectMenuInteraction | ModalSubmitInteraction;
 
@@ -28,7 +29,7 @@ export class ComponentInteractionHandler {
                         return;
                     }
                 } else {
-                    console.error(`Handler method ${route.method} not found in module`);
+                    logger.error("bot", `Handler method ${route.method} not found in module`);
                 }
             }
         }
@@ -52,7 +53,7 @@ export class ComponentInteractionHandler {
 
         // Log system errors (non-user errors) for debugging
         if (!isUserError) {
-            console.error(`Error in ${handlerName}:`, error);
+            logger.error("bot", `Error in ${handlerName}`, error);
         }
 
         const errorEmbed = createErrorEmbed(errorMessage);
@@ -72,7 +73,7 @@ export class ComponentInteractionHandler {
             }
         } catch (replyError) {
             // If we can't send a reply, log it
-            console.error(`Failed to send error response in ${handlerName}:`, replyError);
+            logger.error("bot", `Failed to send error response in ${handlerName}`, replyError);
         }
     }
 }

bot/modules/admin/update.types.ts

@@ -5,6 +5,7 @@ export interface RestartContext {
     timestamp: number;
     runMigrations: boolean;
     installDependencies: boolean;
+    buildWebAssets: boolean;
     previousCommit: string;
     newCommit: string;
 }
@@ -12,6 +13,7 @@ export interface RestartContext {
 export interface UpdateCheckResult {
     needsRootInstall: boolean;
     needsWebInstall: boolean;
+    needsWebBuild: boolean;
     needsMigrations: boolean;
     changedFiles: string[];
     error?: Error;

bot/modules/admin/update.view.ts

@@ -31,7 +31,7 @@ export function getUpdatesAvailableMessage(
     force: boolean
 ) {
     const { branch, currentCommit, latestCommit, commitCount, commits } = updateInfo;
-    const { needsRootInstall, needsWebInstall, needsMigrations } = requirements;
+    const { needsRootInstall, needsWebInstall, needsWebBuild, needsMigrations } = requirements;
 
     // Build commit list (max 5)
     const commitList = commits
@@ -50,6 +50,7 @@ export function getUpdatesAvailableMessage(
     const reqs: string[] = [];
     if (needsRootInstall) reqs.push("📦 Install root dependencies");
     if (needsWebInstall) reqs.push("🌐 Install web dependencies");
+    if (needsWebBuild) reqs.push("🏗️ Build web dashboard");
     if (needsMigrations) reqs.push("🗃️ Run database migrations");
     if (reqs.length === 0) reqs.push("⚡ Quick update (no extra steps)");
 
@@ -124,6 +125,9 @@ export function getUpdatingEmbed(requirements: UpdateCheckResult) {
     if (requirements.needsRootInstall || requirements.needsWebInstall) {
         steps.push("📦 Dependencies will be installed after restart");
     }
+    if (requirements.needsWebBuild) {
+        steps.push("🏗️ Web dashboard will be rebuilt after restart");
+    }
     if (requirements.needsMigrations) {
         steps.push("🗃️ Migrations will run after restart");
     }
@@ -157,16 +161,19 @@ export function getErrorEmbed(error: unknown) {
 export interface PostRestartResult {
     installSuccess: boolean;
     installOutput: string;
+    webBuildSuccess: boolean;
+    webBuildOutput: string;
     migrationSuccess: boolean;
     migrationOutput: string;
     ranInstall: boolean;
+    ranWebBuild: boolean;
     ranMigrations: boolean;
     previousCommit?: string;
     newCommit?: string;
 }
 
 export function getPostRestartEmbed(result: PostRestartResult, hasRollback: boolean) {
-    const isSuccess = result.installSuccess && result.migrationSuccess;
+    const isSuccess = result.installSuccess && result.webBuildSuccess && result.migrationSuccess;
 
     const embed = new EmbedBuilder()
         .setTitle(isSuccess ? "✅ Update Complete" : "⚠️ Update Completed with Issues")
@@ -192,6 +199,13 @@ export function getPostRestartEmbed(result: PostRestartResult, hasRollback: bool
         );
     }
 
+    if (result.ranWebBuild) {
+        results.push(result.webBuildSuccess
+            ? "✅ Web dashboard built"
+            : "❌ Web dashboard build failed"
+        );
+    }
+
     if (result.ranMigrations) {
         results.push(result.migrationSuccess
             ? "✅ Migrations applied"
@@ -216,6 +230,14 @@ export function getPostRestartEmbed(result: PostRestartResult, hasRollback: bool
         });
     }
 
+    if (result.webBuildOutput && !result.webBuildSuccess) {
+        embed.addFields({
+            name: "Web Build Output",
+            value: `\`\`\`\n${truncate(result.webBuildOutput, OUTPUT_TRUNCATE_LENGTH)}\n\`\`\``,
+            inline: false
+        });
+    }
+
     if (result.migrationOutput && !result.migrationSuccess) {
         embed.addFields({
             name: "Migration Output",
@@ -259,6 +281,66 @@ export function getRunningMigrationsEmbed() {
     );
 }
 
+export function getBuildingWebEmbed() {
+    return createInfoEmbed(
+        "🌐 Building web dashboard assets...\nThis may take a moment.",
+        "⏳ Building Web Dashboard"
+    );
+}
+
+export interface PostRestartProgress {
+    installDeps: boolean;
+    buildWeb: boolean;
+    runMigrations: boolean;
+    currentStep: "starting" | "install" | "build" | "migrate" | "done";
+    installDone?: boolean;
+    buildDone?: boolean;
+    migrateDone?: boolean;
+}
+
+export function getPostRestartProgressEmbed(progress: PostRestartProgress) {
+    const steps: string[] = [];
+
+    // Installation step
+    if (progress.installDeps) {
+        if (progress.currentStep === "install") {
+            steps.push("⏳ Installing dependencies...");
+        } else if (progress.installDone) {
+            steps.push("✅ Dependencies installed");
+        } else {
+            steps.push("⬚ Install dependencies");
+        }
+    }
+
+    // Web build step
+    if (progress.buildWeb) {
+        if (progress.currentStep === "build") {
+            steps.push("⏳ Building web dashboard...");
+        } else if (progress.buildDone) {
+            steps.push("✅ Web dashboard built");
+        } else {
+            steps.push("⬚ Build web dashboard");
+        }
+    }
+
+    // Migrations step
+    if (progress.runMigrations) {
+        if (progress.currentStep === "migrate") {
+            steps.push("⏳ Running migrations...");
+        } else if (progress.migrateDone) {
+            steps.push("✅ Migrations applied");
+        } else {
+            steps.push("⬚ Run migrations");
+        }
+    }
+
+    if (steps.length === 0) {
+        steps.push("⚡ Quick restart (no extra steps needed)");
+    }
+
+    return createInfoEmbed(steps.join("\n"), "🔄 Post-Update Tasks");
+}
+
 export function getRollbackSuccessEmbed(commit: string) {
     return createSuccessEmbed(
         `Successfully rolled back to commit \`${commit}\`.\nThe bot will restart now.`,

bot/modules/economy/lootdrop.interaction.ts

@@ -1,6 +1,6 @@
 import { ButtonInteraction } from "discord.js";
 import { lootdropService } from "@shared/modules/economy/lootdrop.service";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { getLootdropClaimedMessage } from "./lootdrop.view";
 
 export async function handleLootdropInteraction(interaction: ButtonInteraction) {

bot/modules/economy/shop.interaction.ts

@@ -1,7 +1,7 @@
 import { ButtonInteraction, MessageFlags } from "discord.js";
 import { inventoryService } from "@shared/modules/inventory/inventory.service";
 import { userService } from "@shared/modules/user/user.service";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 
 export async function handleShopInteraction(interaction: ButtonInteraction) {
     if (!interaction.customId.startsWith("shop_buy_")) return;

bot/modules/feedback/feedback.interaction.ts

@@ -4,7 +4,7 @@ import { config } from "@shared/lib/config";
 import { AuroraClient } from "@/lib/BotClient";
 import { buildFeedbackMessage, getFeedbackModal } from "./feedback.view";
 import { FEEDBACK_CUSTOM_IDS, type FeedbackType, type FeedbackData } from "./feedback.types";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 
 export const handleFeedbackInteraction = async (interaction: Interaction) => {
     // Handle select menu for choosing feedback type

bot/modules/quest/quest.view.ts

@@ -1,4 +1,13 @@
-import { EmbedBuilder } from "discord.js";
+import {
+    ActionRowBuilder,
+    ButtonBuilder,
+    ButtonStyle,
+    ContainerBuilder,
+    TextDisplayBuilder,
+    SeparatorBuilder,
+    SeparatorSpacingSize,
+    MessageFlags
+} from "discord.js";
 
 /**
  * Quest entry with quest details and progress
@@ -7,12 +16,33 @@ interface QuestEntry {
     progress: number | null;
     completedAt: Date | null;
     quest: {
+        id: number;
         name: string;
         description: string | null;
+        triggerEvent: string;
+        requirements: any;
         rewards: any;
     };
 }
 
+/**
+ * Available quest interface
+ */
+interface AvailableQuest {
+    id: number;
+    name: string;
+    description: string | null;
+    rewards: any;
+    requirements: any;
+}
+
+// Color palette for containers
+const COLORS = {
+    ACTIVE: 0x3498db,    // Blue - in progress
+    AVAILABLE: 0x2ecc71, // Green - available
+    COMPLETED: 0xf1c40f  // Gold - completed
+};
+
 /**
  * Formats quest rewards object into a human-readable string
  */
@@ -20,35 +50,169 @@ function formatQuestRewards(rewards: { xp?: number, balance?: number }): string
     const rewardStr: string[] = [];
     if (rewards?.xp) rewardStr.push(`${rewards.xp} XP`);
     if (rewards?.balance) rewardStr.push(`${rewards.balance} 🪙`);
-    return rewardStr.join(", ");
+    return rewardStr.join(" • ") || "None";
 }
 
 /**
- * Returns the quest status display string
+ * Renders a simple progress bar
  */
-function getQuestStatus(completedAt: Date | null): string {
-    return completedAt ? "✅ Completed" : "📝 In Progress";
+function renderProgressBar(current: number, total: number, size: number = 10): string {
+    const percentage = Math.min(current / total, 1);
+    const progress = Math.round(size * percentage);
+    const empty = size - progress;
+
+    const progressText = "▰".repeat(progress);
+    const emptyText = "▱".repeat(empty);
+
+    return `${progressText}${emptyText} ${Math.round(percentage * 100)}%`;
 }
 
 /**
- * Creates an embed displaying a user's quest log
+ * Creates Components v2 containers for the quest list (active quests only)
  */
-export function getQuestListEmbed(userQuests: QuestEntry[]): EmbedBuilder {
-    const embed = new EmbedBuilder()
-        .setTitle("📜 Quest Log")
-        .setColor(0x3498db); // Blue
+export function getQuestListComponents(userQuests: QuestEntry[]): ContainerBuilder[] {
+    // Filter to only show in-progress quests (not completed)
+    const activeQuests = userQuests.filter(entry => entry.completedAt === null);
+
+    const container = new ContainerBuilder()
+        .setAccentColor(COLORS.ACTIVE)
+        .addTextDisplayComponents(
+            new TextDisplayBuilder().setContent("# 📜 Quest Log"),
+            new TextDisplayBuilder().setContent("-# Your active quests")
+        );
+
+    if (activeQuests.length === 0) {
+        container.addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small));
+        container.addTextDisplayComponents(
+            new TextDisplayBuilder().setContent("*You have no active quests. Check available quests!*")
+        );
+        return [container];
+    }
+
+    activeQuests.forEach((entry) => {
+        container.addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small));
 
-    userQuests.forEach(entry => {
-        const status = getQuestStatus(entry.completedAt);
         const rewards = entry.quest.rewards as { xp?: number, balance?: number };
         const rewardsText = formatQuestRewards(rewards);
 
-        embed.addFields({
-            name: `${entry.quest.name} (${status})`,
-            value: `${entry.quest.description}\n**Rewards:** ${rewardsText}\n**Progress:** ${entry.progress}%`,
-            inline: false
-        });
+        const requirements = entry.quest.requirements as { target?: number };
+        const target = requirements?.target || 1;
+        const progress = entry.progress || 0;
+        const progressBar = renderProgressBar(progress, target);
+
+        container.addTextDisplayComponents(
+            new TextDisplayBuilder().setContent(`**${entry.quest.name}**`),
+            new TextDisplayBuilder().setContent(entry.quest.description || "*No description*"),
+            new TextDisplayBuilder().setContent(`📊 ${progressBar} \`${progress}/${target}\`  •  🎁 ${rewardsText}`)
+        );
     });
 
-    return embed;
+    return [container];
+}
+
+/**
+ * Creates Components v2 containers for available quests with inline accept buttons
+ */
+export function getAvailableQuestsComponents(availableQuests: AvailableQuest[]): ContainerBuilder[] {
+    const container = new ContainerBuilder()
+        .setAccentColor(COLORS.AVAILABLE)
+        .addTextDisplayComponents(
+            new TextDisplayBuilder().setContent("# 🗺️ Available Quests"),
+            new TextDisplayBuilder().setContent("-# Quests you can accept")
+        );
+
+    if (availableQuests.length === 0) {
+        container.addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small));
+        container.addTextDisplayComponents(
+            new TextDisplayBuilder().setContent("*No new quests available at the moment.*")
+        );
+        return [container];
+    }
+
+    // Limit to 10 quests (5 action rows max with 2 added for navigation)
+    const questsToShow = availableQuests.slice(0, 10);
+
+    questsToShow.forEach((quest) => {
+        container.addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small));
+
+        const rewards = quest.rewards as { xp?: number, balance?: number };
+        const rewardsText = formatQuestRewards(rewards);
+
+        const requirements = quest.requirements as { target?: number };
+        const target = requirements?.target || 1;
+
+        container.addTextDisplayComponents(
+            new TextDisplayBuilder().setContent(`**${quest.name}**`),
+            new TextDisplayBuilder().setContent(quest.description || "*No description*"),
+            new TextDisplayBuilder().setContent(`🎯 Goal: \`${target}\`  •  🎁 ${rewardsText}`)
+        );
+
+        // Add accept button inline within the container
+        container.addActionRowComponents(
+            new ActionRowBuilder<ButtonBuilder>().addComponents(
+                new ButtonBuilder()
+                    .setCustomId(`quest_accept:${quest.id}`)
+                    .setLabel("Accept Quest")
+                    .setStyle(ButtonStyle.Success)
+                    .setEmoji("✅")
+            )
+        );
+    });
+
+    return [container];
+}
+
+/**
+ * Returns action rows for navigation only
+ */
+export function getQuestActionRows(viewType: 'active' | 'available'): ActionRowBuilder<ButtonBuilder>[] {
+    // Navigation row
+    const navRow = new ActionRowBuilder<ButtonBuilder>().addComponents(
+        new ButtonBuilder()
+            .setCustomId("quest_view_active")
+            .setLabel("📜 Active")
+            .setStyle(viewType === 'active' ? ButtonStyle.Primary : ButtonStyle.Secondary)
+            .setDisabled(viewType === 'active'),
+        new ButtonBuilder()
+            .setCustomId("quest_view_available")
+            .setLabel("🗺️ Available")
+            .setStyle(viewType === 'available' ? ButtonStyle.Primary : ButtonStyle.Secondary)
+            .setDisabled(viewType === 'available')
+    );
+
+    return [navRow];
+}
+
+/**
+ * Creates Components v2 celebratory message for quest completion
+ */
+export function getQuestCompletionComponents(quest: any, rewards: { xp: bigint, balance: bigint }): ContainerBuilder[] {
+    const rewardsText = formatQuestRewards({
+        xp: Number(rewards.xp),
+        balance: Number(rewards.balance)
+    });
+
+    const container = new ContainerBuilder()
+        .setAccentColor(COLORS.COMPLETED)
+        .addTextDisplayComponents(
+            new TextDisplayBuilder().setContent("# 🎉 Quest Completed!"),
+            new TextDisplayBuilder().setContent(`Congratulations! You've completed **${quest.name}**`)
+        )
+        .addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small))
+        .addTextDisplayComponents(
+            new TextDisplayBuilder().setContent(`📝 ${quest.description || "No description provided."}`),
+            new TextDisplayBuilder().setContent(`🎁 **Rewards Earned:** ${rewardsText}`)
+        );
+
+    return [container];
+}
+
+/**
+ * Gets MessageFlags and allowedMentions for Components v2 messages
+ */
+export function getComponentsV2MessageFlags() {
+    return {
+        flags: MessageFlags.IsComponentsV2,
+        allowedMentions: { parse: [] as const }
+    };
 }

bot/modules/trade/trade.interaction.ts

@@ -10,7 +10,7 @@ import {
 import { tradeService } from "@shared/modules/trade/trade.service";
 import { inventoryService } from "@shared/modules/inventory/inventory.service";
 import { createErrorEmbed, createWarningEmbed, createSuccessEmbed, createInfoEmbed } from "@lib/embeds";
-import { UserError } from "@lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { getTradeDashboard, getTradeMoneyModal, getItemSelectMenu, getTradeCompletedEmbed } from "./trade.view";
 
 

bot/modules/trivia/trivia.interaction.ts

@@ -1,7 +1,7 @@
 import { ButtonInteraction } from "discord.js";
 import { triviaService } from "@shared/modules/trivia/trivia.service";
 import { getTriviaResultView, getTriviaTimeoutView } from "./trivia.view";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 
 export async function handleTriviaInteraction(interaction: ButtonInteraction) {
     const parts = interaction.customId.split('_');

bot/modules/user/enrollment.interaction.ts

@@ -3,7 +3,7 @@ import { config } from "@shared/lib/config";
 import { getEnrollmentSuccessMessage } from "./enrollment.view";
 import { classService } from "@shared/modules/class/class.service";
 import { userService } from "@shared/modules/user/user.service";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { sendWebhookMessage } from "@/lib/webhookUtils";
 
 export async function handleEnrollmentInteraction(interaction: ButtonInteraction) {

bun.lock

@@ -9,12 +9,12 @@
         "discord.js": "^14.25.1",
         "dotenv": "^17.2.3",
         "drizzle-orm": "^0.44.7",
+        "postgres": "^3.4.7",
         "zod": "^4.1.13",
       },
       "devDependencies": {
         "@types/bun": "latest",
         "drizzle-kit": "^0.31.7",
-        "postgres": "^3.4.7",
       },
       "peerDependencies": {
         "typescript": "^5",

docker-compose.yml

@@ -10,8 +10,8 @@ services:
     # ports:
     #   - "127.0.0.1:${DB_PORT}:5432"
     volumes:
+      # Host-mounted to preserve existing VPS data
       - ./shared/db/data:/var/lib/postgresql/data
-      - ./shared/db/log:/var/log/postgresql
     networks:
       - internal
     healthcheck:
@@ -23,17 +23,19 @@ services:
   app:
     container_name: aurora_app
     restart: unless-stopped
-    image: aurora-app
     build:
       context: .
       dockerfile: Dockerfile
+      target: development  # Use development stage
     working_dir: /app
     ports:
       - "127.0.0.1:3000:3000"
     volumes:
+      # Mount source code for hot reloading
       - .:/app
-      - /app/node_modules
-      - /app/web/node_modules
+      # Use named volumes for node_modules (prevents host overwrite + caches deps)
+      - app_node_modules:/app/node_modules
+      - web_node_modules:/app/web/node_modules
     environment:
       - HOST=0.0.0.0
       - DB_USER=${DB_USER}
@@ -61,30 +63,22 @@ services:
 
   studio:
     container_name: aurora_studio
-    image: aurora-app
-    build:
-      context: .
-      dockerfile: Dockerfile
-    working_dir: /app
+    # Reuse the same built image as app (no duplicate builds!)
+    extends:
+      service: app
+    # Clear inherited ports from app and only expose studio port
     ports:
+      !override
       - "127.0.0.1:4983:4983"
-    volumes:
-      - .:/app
-      - /app/node_modules
-      - /app/web/node_modules
-    environment:
-      - DB_USER=${DB_USER}
-      - DB_PASSWORD=${DB_PASSWORD}
-      - DB_NAME=${DB_NAME}
-      - DB_PORT=5432
-      - DB_HOST=db
-      - DATABASE_URL=postgresql://${DB_USER}:${DB_PASSWORD}@db:5432/${DB_NAME}
-    depends_on:
-      db:
-        condition: service_healthy
-    networks:
-      - internal
-      - web
+    # Override healthcheck since studio doesn't serve on port 3000
+    healthcheck:
+      test: [ "CMD", "bun", "-e", "fetch('http://localhost:4983').then(r => process.exit(0)).catch(() => process.exit(1))" ]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
+    # Disable restart for studio (it's an on-demand tool)
+    restart: "no"
     command: [ "bun", "x", "drizzle-kit", "studio", "--port", "4983", "--host", "0.0.0.0" ]
 
 networks:
@@ -93,3 +87,10 @@ networks:
     internal: true # No external access
   web:
     driver: bridge # Can be accessed from host
+
+volumes:
+  # Named volumes for node_modules caching
+  app_node_modules:
+    name: aurora_app_node_modules  
+  web_node_modules:
+    name: aurora_web_node_modules

docs/main.md

@@ -0,0 +1,168 @@
+# Aurora - Discord RPG Bot
+
+A comprehensive, feature-rich Discord RPG bot built with modern technologies using a monorepo architecture.
+
+## Architecture Overview
+
+Aurora uses a **Single Process Monolith** architecture that runs both the Discord bot and web dashboard in the same Bun process. This design maximizes performance by eliminating inter-process communication overhead and simplifies deployment to a single Docker container.
+
+## Monorepo Structure
+
+```
+aurora-bot-discord/
+├── bot/                 # Discord bot implementation
+│   ├── commands/        # Slash command implementations
+│   ├── events/          # Discord event handlers
+│   ├── lib/             # Bot core logic (BotClient, utilities)
+│   └── index.ts         # Bot entry point
+├── web/                 # React web dashboard
+│   ├── src/             # React components and pages
+│   │   ├── pages/       # Dashboard pages (Admin, Settings, Home)
+│   │   ├── components/  # Reusable UI components
+│   │   └── server.ts    # Web server with API endpoints
+│   └── build.ts         # Vite build configuration
+├── shared/              # Shared code between bot and web
+│   ├── db/              # Database schema and Drizzle ORM
+│   ├── lib/             # Utilities, config, logger, events
+│   ├── modules/         # Domain services (economy, admin, quest)
+│   └── config/          # Configuration files
+├── docker-compose.yml   # Docker services (app, db)
+└── package.json         # Root package manifest
+```
+
+## Main Application Parts
+
+### 1. Discord Bot (`bot/`)
+
+The bot is built with Discord.js v14 and handles all Discord-related functionality.
+
+**Core Components:**
+
+- **BotClient** (`bot/lib/BotClient.ts`): Central client that manages commands, events, and Discord interactions
+- **Commands** (`bot/commands/`): Slash command implementations organized by category:
+  - `admin/`: Server management commands (config, prune, warnings, notes)
+  - `economy/`: Economy commands (balance, daily, pay, trade, trivia)
+  - `inventory/`: Item management commands
+  - `leveling/`: XP and level tracking
+  - `quest/`: Quest commands
+  - `user/`: User profile commands
+- **Events** (`bot/events/`): Discord event handlers:
+  - `interactionCreate.ts`: Command interactions
+  - `messageCreate.ts`: Message processing
+  - `ready.ts`: Bot ready events
+  - `guildMemberAdd.ts`: New member handling
+
+### 2. Web Dashboard (`web/`)
+
+A React 19 + Bun web application for bot administration and monitoring.
+
+**Key Pages:**
+
+- **Home** (`/`): Dashboard overview with live statistics
+- **Admin Overview** (`/admin/overview`): Real-time bot metrics
+- **Admin Quests** (`/admin/quests`): Quest management interface
+- **Settings** (`/settings/*`): Configuration pages for:
+  - General settings
+  - Economy settings
+  - Systems settings
+  - Roles settings
+
+**Web Server Features:**
+
+- Built with Bun's native HTTP server
+- WebSocket support for real-time updates
+- REST API endpoints for dashboard data
+- SPA fallback for client-side routing
+- Bun dev server with hot module replacement
+
+### 3. Shared Core (`shared/`)
+
+Shared code accessible by both bot and web applications.
+
+**Database Layer (`shared/db/`):**
+
+- **schema.ts**: Drizzle ORM schema definitions for:
+  - `users`: User profiles with economy data
+  - `items`: Item catalog with rarities and types
+  - `inventory`: User item holdings
+  - `transactions`: Economy transaction history
+  - `classes`: RPG class system
+  - `moderationCases`: Moderation logs
+  - `quests`: Quest definitions
+
+**Modules (`shared/modules/`):**
+
+- **economy/**: Economy service, lootdrops, daily rewards, trading
+- **admin/**: Administrative actions (maintenance mode, cache clearing)
+- **quest/**: Quest creation and tracking
+- **dashboard/**: Dashboard statistics and real-time event bus
+- **leveling/**: XP and leveling logic
+
+**Utilities (`shared/lib/`):**
+
+- `config.ts`: Application configuration management
+- `logger.ts`: Structured logging system
+- `env.ts`: Environment variable handling
+- `events.ts`: Event bus for inter-module communication
+- `constants.ts`: Application-wide constants
+
+## Main Use-Cases
+
+### For Discord Users
+
+1. **Class System**: Users can join different RPG classes with unique roles
+2. **Economy**:
+   - View balance and net worth
+   - Earn currency through daily rewards, trivia, and lootdrops
+   - Send payments to other users
+3. **Trading**: Secure trading system between users
+4. **Inventory Management**: Collect, use, and trade items with rarities
+5. **Leveling**: XP-based progression system tied to activity
+6. **Quests**: Complete quests for rewards
+7. **Lootdrops**: Random currency drops in text channels
+
+### For Server Administrators
+
+1. **Bot Configuration**: Adjust economy rates, enable/disable features via dashboard
+2. **Moderation Tools**:
+   - Warn, note, and track moderation cases
+   - Mass prune inactive members
+   - Role management
+3. **Quest Management**: Create and manage server-specific quests
+4. **Monitoring**:
+   - Real-time dashboard with live statistics
+   - Activity charts and event logs
+   - Economy leaderboards
+
+### For Developers
+
+1. **Single Process Architecture**: Easy debugging with unified runtime
+2. **Type Safety**: Full TypeScript across all modules
+3. **Testing**: Bun test framework with unit tests for core services
+4. **Docker Support**: Production-ready containerization
+5. **Remote Access**: SSH tunneling scripts for production debugging
+
+## Technology Stack
+
+| Layer            | Technology                        |
+| ---------------- | --------------------------------- |
+| Runtime          | Bun 1.0+                          |
+| Bot Framework    | Discord.js 14.x                   |
+| Web Framework    | React 19 + Bun                    |
+| Database         | PostgreSQL 17                     |
+| ORM              | Drizzle ORM                       |
+| Styling          | Tailwind CSS v4 + ShadCN/Radix UI |
+| Validation       | Zod                               |
+| Containerization | Docker                            |
+
+## Running the Application
+
+```bash
+# Database migrations
+bun run migrate
+
+# Production (Docker)
+docker compose up
+```
+
+The bot and dashboard process run on port 3000 and are accessible at `http://localhost:3000`.

package.json

@@ -1,5 +1,6 @@
 {
   "name": "app",
+  "version": "1.1.3",
   "module": "bot/index.ts",
   "type": "module",
   "private": true,
@@ -20,7 +21,8 @@
     "studio:remote": "bash shared/scripts/remote-studio.sh",
     "dashboard:remote": "bash shared/scripts/remote-dashboard.sh",
     "remote": "bash shared/scripts/remote.sh",
-    "test": "bun test"
+    "test": "bun test",
+    "docker:cleanup": "bash shared/scripts/docker-cleanup.sh"
   },
   "dependencies": {
     "@napi-rs/canvas": "^0.1.84",

shared/lib/constants.ts

@@ -85,3 +85,9 @@ export enum TriviaCategory {
     ANIMALS = 27,
     ANIME_MANGA = 31,
 }
+
+export const BRANDING = {
+    COLOR: 0x00d4ff as const,
+    FOOTER_TEXT: 'Aurora' as const,
+};
+

shared/lib/events.ts

@@ -17,5 +17,8 @@ export const EVENTS = {
         RELOAD_COMMANDS: "actions:reload_commands",
         CLEAR_CACHE: "actions:clear_cache",
         MAINTENANCE_MODE: "actions:maintenance_mode",
+    },
+    QUEST: {
+        COMPLETED: "quest:completed",
     }
 } as const;

shared/lib/logger.test.ts

@@ -0,0 +1,118 @@
+import { expect, test, describe, beforeAll, afterAll, spyOn } from "bun:test";
+import { logger } from "./logger";
+import { existsSync, unlinkSync, readFileSync, writeFileSync } from "fs";
+import { join } from "path";
+
+describe("Logger", () => {
+    const logDir = join(process.cwd(), "logs");
+    const logFile = join(logDir, "error.log");
+
+    beforeAll(() => {
+        // Cleanup if exists
+        try {
+            if (existsSync(logFile)) unlinkSync(logFile);
+        } catch (e) {}
+    });
+
+    test("should log info messages to console with correct format", () => {
+        const spy = spyOn(console, "log");
+        const message = "Formatting test";
+        logger.info("system", message);
+        
+        expect(spy).toHaveBeenCalled();
+        const callArgs = spy.mock.calls[0]?.[0];
+        expect(callArgs).toBeDefined();
+        if (callArgs) {
+            // Strict regex check for ISO timestamp and format
+            const regex = /^\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z\] \[INFO\] \[SYSTEM\] Formatting test$/;
+            expect(callArgs).toMatch(regex);
+        }
+        spy.mockRestore();
+    });
+
+    test("should write error logs to file with stack trace", async () => {
+        const errorMessage = "Test error message";
+        const testError = new Error("Source error");
+        
+        logger.error("system", errorMessage, testError);
+
+        // Polling for file write instead of fixed timeout
+        let content = "";
+        for (let i = 0; i < 20; i++) {
+            if (existsSync(logFile)) {
+                content = readFileSync(logFile, "utf-8");
+                if (content.includes("Source error")) break;
+            }
+            await new Promise(resolve => setTimeout(resolve, 50));
+        }
+
+        expect(content).toMatch(/^\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z\] \[ERROR\] \[SYSTEM\] Test error message: Source error/);
+        expect(content).toContain("Stack Trace:");
+        expect(content).toContain("Error: Source error");
+        expect(content).toContain("logger.test.ts");
+    });
+
+    test("should handle log directory creation failures gracefully", async () => {
+        const consoleSpy = spyOn(console, "error");
+        
+        // We trigger an error by trying to use a path that is a file where a directory should be
+        const triggerFile = join(process.cwd(), "logs_fail_trigger");
+        
+        try {
+            writeFileSync(triggerFile, "not a directory");
+            
+            // Manually override paths for this test instance
+            const originalLogDir = (logger as any).logDir;
+            const originalLogPath = (logger as any).errorLogPath;
+            
+            (logger as any).logDir = triggerFile;
+            (logger as any).errorLogPath = join(triggerFile, "error.log");
+            (logger as any).initialized = false;
+
+            logger.error("system", "This should fail directory creation");
+            
+            // Wait for async initialization attempt
+            await new Promise(resolve => setTimeout(resolve, 100));
+            
+            expect(consoleSpy).toHaveBeenCalled();
+            expect(consoleSpy.mock.calls.some(call => 
+                String(call[0]).includes("Failed to initialize logger directory")
+            )).toBe(true);
+
+            // Reset logger state
+            (logger as any).logDir = originalLogDir;
+            (logger as any).errorLogPath = originalLogPath;
+            (logger as any).initialized = false;
+        } finally {
+            if (existsSync(triggerFile)) unlinkSync(triggerFile);
+            consoleSpy.mockRestore();
+        }
+    });
+
+    test("should include complex data objects in logs", () => {
+        const spy = spyOn(console, "log");
+        const data = { userId: "123", tags: ["test"] };
+        logger.info("bot", "Message with data", data);
+        
+        expect(spy).toHaveBeenCalled();
+        const callArgs = spy.mock.calls[0]?.[0];
+        expect(callArgs).toBeDefined();
+        if (callArgs) {
+            expect(callArgs).toContain(` | Data: ${JSON.stringify(data)}`);
+        }
+        spy.mockRestore();
+    });
+
+    test("should handle circular references in data objects", () => {
+        const spy = spyOn(console, "log");
+        const data: any = { name: "circular" };
+        data.self = data;
+        
+        logger.info("bot", "Circular test", data);
+        
+        expect(spy).toHaveBeenCalled();
+        const callArgs = spy.mock.calls[0]?.[0];
+        expect(callArgs).toContain("[Circular]");
+        spy.mockRestore();
+    });
+});

shared/lib/logger.ts

@@ -0,0 +1,162 @@
+import { join, resolve } from "path";
+import { appendFile, mkdir, stat } from "fs/promises";
+import { existsSync } from "fs";
+
+export enum LogLevel {
+    DEBUG = 0,
+    INFO = 1,
+    WARN = 2,
+    ERROR = 3,
+}
+
+const LogLevelNames = {
+    [LogLevel.DEBUG]: "DEBUG",
+    [LogLevel.INFO]: "INFO",
+    [LogLevel.WARN]: "WARN",
+    [LogLevel.ERROR]: "ERROR",
+};
+
+export type LogSource = "bot" | "web" | "shared" | "system";
+
+export interface LogEntry {
+    timestamp: string;
+    level: string;
+    source: LogSource;
+    message: string;
+    data?: any;
+    stack?: string;
+}
+
+class Logger {
+    private logDir: string;
+    private errorLogPath: string;
+    private initialized: boolean = false;
+    private initPromise: Promise<void> | null = null;
+
+    constructor() {
+        // Use resolve with __dirname or process.cwd() but make it more robust
+        // Since this is in shared/lib/, we can try to find the project root
+        // For now, let's stick to a resolved path from process.cwd() or a safer alternative
+        this.logDir = resolve(process.cwd(), "logs");
+        this.errorLogPath = join(this.logDir, "error.log");
+    }
+
+    private async ensureInitialized() {
+        if (this.initialized) return;
+        if (this.initPromise) return this.initPromise;
+
+        this.initPromise = (async () => {
+            try {
+                await mkdir(this.logDir, { recursive: true });
+                this.initialized = true;
+            } catch (err: any) {
+                if (err.code === "EEXIST" || err.code === "ENOTDIR") {
+                    try {
+                        const stats = await stat(this.logDir);
+                        if (stats.isDirectory()) {
+                            this.initialized = true;
+                            return;
+                        }
+                    } catch (statErr) {}
+                }
+                console.error(`[SYSTEM] Failed to initialize logger directory at ${this.logDir}:`, err);
+            } finally {
+                this.initPromise = null;
+            }
+        })();
+
+        return this.initPromise;
+    }
+
+    private safeStringify(data: any): string {
+        try {
+            return JSON.stringify(data);
+        } catch (err) {
+            const seen = new WeakSet();
+            return JSON.stringify(data, (key, value) => {
+                if (typeof value === "object" && value !== null) {
+                    if (seen.has(value)) return "[Circular]";
+                    seen.add(value);
+                }
+                return value;
+            });
+        }
+    }
+
+    private formatMessage(entry: LogEntry): string {
+        const dataStr = entry.data ? ` | Data: ${this.safeStringify(entry.data)}` : "";
+        const stackStr = entry.stack ? `\nStack Trace:\n${entry.stack}` : "";
+        return `[${entry.timestamp}] [${entry.level}] [${entry.source.toUpperCase()}] ${entry.message}${dataStr}${stackStr}`;
+    }
+
+    private async writeToErrorLog(formatted: string) {
+        await this.ensureInitialized();
+        try {
+            await appendFile(this.errorLogPath, formatted + "\n");
+        } catch (err) {
+            console.error("[SYSTEM] Failed to write to error log file:", err);
+        }
+    }
+
+    private log(level: LogLevel, source: LogSource, message: string, errorOrData?: any) {
+        const timestamp = new Date().toISOString();
+        const levelName = LogLevelNames[level];
+        
+        const entry: LogEntry = {
+            timestamp,
+            level: levelName,
+            source,
+            message,
+        };
+
+        if (level === LogLevel.ERROR && errorOrData instanceof Error) {
+            entry.stack = errorOrData.stack;
+            entry.message = `${message}: ${errorOrData.message}`;
+        } else if (errorOrData !== undefined) {
+            entry.data = errorOrData;
+        }
+
+        const formatted = this.formatMessage(entry);
+
+        // Print to console
+        switch (level) {
+            case LogLevel.DEBUG:
+                console.debug(formatted);
+                break;
+            case LogLevel.INFO:
+                console.log(formatted);
+                break;
+            case LogLevel.WARN:
+                console.warn(formatted);
+                break;
+            case LogLevel.ERROR:
+                console.error(formatted);
+                break;
+        }
+
+        // Persistent error logging
+        if (level === LogLevel.ERROR) {
+            this.writeToErrorLog(formatted).catch(() => {
+                // Silently fail to avoid infinite loops
+            });
+        }
+    }
+
+    debug(source: LogSource, message: string, data?: any) {
+        this.log(LogLevel.DEBUG, source, message, data);
+    }
+
+    info(source: LogSource, message: string, data?: any) {
+        this.log(LogLevel.INFO, source, message, data);
+    }
+
+    warn(source: LogSource, message: string, data?: any) {
+        this.log(LogLevel.WARN, source, message, data);
+    }
+
+    error(source: LogSource, message: string, error?: any) {
+        this.log(LogLevel.ERROR, source, message, error);
+    }
+}
+
+export const logger = new Logger();

shared/modules/admin/update.service.test.ts

@@ -1,5 +1,4 @@
-import { describe, expect, test, mock, beforeEach, afterAll, spyOn } from "bun:test";
-import * as fs from "fs/promises";
+import { describe, expect, test, mock, beforeEach, afterAll } from "bun:test";
 
 // Mock child_process BEFORE importing the service
 const mockExec = mock((cmd: string, callback?: any) => {
@@ -8,23 +7,32 @@ const mockExec = mock((cmd: string, callback?: any) => {
         return { unref: () => { } };
     }
 
-    if (cmd.includes("git rev-parse")) {
-        callback(null, { stdout: "main\n" });
+    // Simulate successful command execution
+    let stdout = "";
+    
+    if (cmd.includes("git rev-parse --abbrev-ref")) {
+        stdout = "main\n";
+    } else if (cmd.includes("git rev-parse --short")) {
+        stdout = "abc1234\n";
+    } else if (cmd.includes("git rev-parse HEAD")) {
+        stdout = "abc1234567890\n";
     } else if (cmd.includes("git fetch")) {
-        callback(null, { stdout: "" });
+        stdout = "";
     } else if (cmd.includes("git log")) {
-        callback(null, { stdout: "abcdef Update 1\n123456 Update 2" });
+        stdout = "abcdef|Update 1|Author1\n123456|Update 2|Author2";
     } else if (cmd.includes("git diff")) {
-        callback(null, { stdout: "package.json\nsrc/index.ts" });
+        stdout = "package.json\nsrc/index.ts\nshared/lib/schema.ts";
     } else if (cmd.includes("git reset")) {
-        callback(null, { stdout: "HEAD is now at abcdef Update 1" });
+        stdout = "HEAD is now at abcdef Update 1";
     } else if (cmd.includes("bun install")) {
-        callback(null, { stdout: "Installed dependencies" });
+        stdout = "Installed dependencies";
     } else if (cmd.includes("drizzle-kit migrate")) {
-        callback(null, { stdout: "Migrations applied" });
-    } else {
-        callback(null, { stdout: "" });
+        stdout = "Migrations applied";
+    } else if (cmd.includes("bun run build")) {
+        stdout = "Build completed";
     }
+
+    callback(null, stdout, "");
 });
 
 mock.module("child_process", () => ({
@@ -32,9 +40,9 @@ mock.module("child_process", () => ({
 }));
 
 // Mock fs/promises
-const mockWriteFile = mock((path: string, content: string) => Promise.resolve());
-const mockReadFile = mock((path: string, encoding: string) => Promise.resolve("{}"));
-const mockUnlink = mock((path: string) => Promise.resolve());
+const mockWriteFile = mock((_path: string, _content: string) => Promise.resolve());
+const mockReadFile = mock((_path: string, _encoding: string) => Promise.resolve("{}"));
+const mockUnlink = mock((_path: string) => Promise.resolve());
 
 mock.module("fs/promises", () => ({
     writeFile: mockWriteFile,
@@ -43,9 +51,9 @@ mock.module("fs/promises", () => ({
 }));
 
 // Mock view module to avoid import issues
-mock.module("./update.view", () => ({
-    getPostRestartEmbed: () => ({ title: "Update Complete" }),
-    getInstallingDependenciesEmbed: () => ({ title: "Installing..." }),
+mock.module("@/modules/admin/update.view", () => ({
+    getPostRestartEmbed: () => ({ embeds: [{ title: "Update Complete" }], components: [] }),
+    getPostRestartProgressEmbed: () => ({ title: "Progress..." }),
 }));
 
 describe("UpdateService", () => {
@@ -72,7 +80,8 @@ describe("UpdateService", () => {
 
             expect(result.hasUpdates).toBe(true);
             expect(result.branch).toBe("main");
-            expect(result.log).toContain("Update 1");
+            expect(result.commits.length).toBeGreaterThan(0);
+            expect(result.commits[0].message).toContain("Update 1");
         });
 
         test("should call git rev-parse, fetch, and log commands", async () => {
@@ -83,43 +92,82 @@ describe("UpdateService", () => {
             expect(calls.some((cmd: string) => cmd.includes("git fetch"))).toBe(true);
             expect(calls.some((cmd: string) => cmd.includes("git log"))).toBe(true);
         });
+
+        test("should include requirements in the response", async () => {
+            const result = await UpdateService.checkForUpdates();
+
+            expect(result.requirements).toBeDefined();
+            expect(result.requirements.needsRootInstall).toBe(true); // package.json is in mock
+            expect(result.requirements.needsMigrations).toBe(true); // schema.ts is in mock
+            expect(result.requirements.changedFiles).toContain("package.json");
+        });
     });
 
     describe("performUpdate", () => {
         test("should run git reset --hard with correct branch", async () => {
             await UpdateService.performUpdate("main");
 
-            const lastCall = mockExec.mock.lastCall;
-            expect(lastCall).toBeDefined();
-            expect(lastCall![0]).toContain("git reset --hard origin/main");
+            const calls = mockExec.mock.calls.map((c: any) => c[0]);
+            expect(calls.some((cmd: string) => cmd.includes("git reset --hard origin/main"))).toBe(true);
         });
     });
 
-    describe("checkUpdateRequirements", () => {
+    describe("checkUpdateRequirements (deprecated)", () => {
         test("should detect package.json and schema.ts changes", async () => {
             const result = await UpdateService.checkUpdateRequirements("main");
 
-            expect(result.needsInstall).toBe(true);
-            expect(result.needsMigrations).toBe(false); // mock doesn't include schema.ts
+            expect(result.needsRootInstall).toBe(true);
+            expect(result.needsMigrations).toBe(true);
             expect(result.error).toBeUndefined();
         });
 
         test("should call git diff with correct branch", async () => {
             await UpdateService.checkUpdateRequirements("develop");
 
-            const lastCall = mockExec.mock.lastCall;
-            expect(lastCall).toBeDefined();
-            expect(lastCall![0]).toContain("git diff HEAD..origin/develop");
+            const calls = mockExec.mock.calls.map((c: any) => c[0]);
+            expect(calls.some((cmd: string) => cmd.includes("git diff HEAD..origin/develop"))).toBe(true);
         });
     });
 
     describe("installDependencies", () => {
-        test("should run bun install and return output", async () => {
-            const output = await UpdateService.installDependencies();
+        test("should run bun install for root only", async () => {
+            const output = await UpdateService.installDependencies({ root: true, web: false });
 
-            expect(output).toBe("Installed dependencies");
-            const lastCall = mockExec.mock.lastCall;
-            expect(lastCall![0]).toBe("bun install");
+            expect(output).toContain("Root");
+            const calls = mockExec.mock.calls.map((c: any) => c[0]);
+            expect(calls.some((cmd: string) => cmd === "bun install")).toBe(true);
+        });
+
+        test("should run bun install for both root and web in parallel", async () => {
+            const output = await UpdateService.installDependencies({ root: true, web: true });
+
+            expect(output).toContain("Root");
+            expect(output).toContain("Web");
+            const calls = mockExec.mock.calls.map((c: any) => c[0]);
+            expect(calls.some((cmd: string) => cmd === "bun install")).toBe(true);
+            expect(calls.some((cmd: string) => cmd.includes("cd web && bun install"))).toBe(true);
+        });
+    });
+
+    describe("categorizeChanges", () => {
+        test("should categorize files correctly", () => {
+            const files = [
+                "bot/commands/admin/update.ts",
+                "bot/modules/admin/update.view.ts",
+                "web/src/components/Button.tsx",
+                "shared/lib/utils.ts",
+                "package.json",
+                "drizzle/0001_migration.sql"
+            ];
+
+            const categories = UpdateService.categorizeChanges(files);
+
+            expect(categories["Commands"]).toBe(1);
+            expect(categories["Modules"]).toBe(1);
+            expect(categories["Web Dashboard"]).toBe(1);
+            expect(categories["Library"]).toBe(1);
+            expect(categories["Dependencies"]).toBe(1);
+            expect(categories["Database"]).toBe(1);
         });
     });
 
@@ -130,7 +178,10 @@ describe("UpdateService", () => {
                 userId: "456",
                 timestamp: Date.now(),
                 runMigrations: true,
-                installDependencies: false
+                installDependencies: false,
+                buildWebAssets: false,
+                previousCommit: "abc1234",
+                newCommit: "def5678"
             };
 
             await UpdateService.prepareRestartContext(context);
@@ -143,6 +194,39 @@ describe("UpdateService", () => {
         });
     });
 
+    describe("saveRollbackPoint", () => {
+        test("should save current commit hash to file", async () => {
+            const commit = await UpdateService.saveRollbackPoint();
+
+            expect(commit).toBeTruthy();
+            expect(mockWriteFile).toHaveBeenCalled();
+            const lastCall = mockWriteFile.mock.lastCall as [string, string] | undefined;
+            expect(lastCall![0]).toContain("rollback_commit");
+        });
+    });
+
+    describe("hasRollbackPoint", () => {
+        test("should return true when rollback file exists", async () => {
+            mockReadFile.mockImplementationOnce(() => Promise.resolve("abc123"));
+            
+            // Clear cache first
+            (UpdateService as any).rollbackPointExists = null;
+            
+            const result = await UpdateService.hasRollbackPoint();
+            expect(result).toBe(true);
+        });
+
+        test("should return false when rollback file does not exist", async () => {
+            mockReadFile.mockImplementationOnce(() => Promise.reject(new Error("ENOENT")));
+            
+            // Clear cache first
+            (UpdateService as any).rollbackPointExists = null;
+            
+            const result = await UpdateService.hasRollbackPoint();
+            expect(result).toBe(false);
+        });
+    });
+
     describe("triggerRestart", () => {
         test("should use RESTART_COMMAND env var when set", async () => {
             const originalEnv = process.env.RESTART_COMMAND;
@@ -150,24 +234,19 @@ describe("UpdateService", () => {
 
             await UpdateService.triggerRestart();
 
-            const lastCall = mockExec.mock.lastCall;
-            expect(lastCall).toBeDefined();
-            expect(lastCall![0]).toBe("pm2 restart bot");
+            const calls = mockExec.mock.calls.map((c: any) => c[0]);
+            expect(calls.some((cmd: string) => cmd === "pm2 restart bot")).toBe(true);
 
             process.env.RESTART_COMMAND = originalEnv;
         });
 
-        test("should write to trigger file when no env var", async () => {
+        test("should call process.exit when no env var is set", async () => {
             const originalEnv = process.env.RESTART_COMMAND;
             delete process.env.RESTART_COMMAND;
 
+            // Just verify it doesn't throw - actual process.exit is mocked by setTimeout
             await UpdateService.triggerRestart();
 
-            expect(mockWriteFile).toHaveBeenCalled();
-            const lastCall = mockWriteFile.mock.lastCall as [string, string] | undefined;
-            expect(lastCall).toBeDefined();
-            expect(lastCall![0]).toContain("restart_trigger");
-
             process.env.RESTART_COMMAND = originalEnv;
         });
     });
@@ -181,7 +260,7 @@ describe("UpdateService", () => {
 
         const createMockChannel = () => ({
             isSendable: () => true,
-            send: mock(() => Promise.resolve())
+            send: mock(() => Promise.resolve({ edit: mock(() => Promise.resolve()), delete: mock(() => Promise.resolve()) }))
         });
 
         test("should ignore stale context (>10 mins old)", async () => {
@@ -190,7 +269,10 @@ describe("UpdateService", () => {
                 userId: "456",
                 timestamp: Date.now() - (15 * 60 * 1000), // 15 mins ago
                 runMigrations: true,
-                installDependencies: true
+                installDependencies: true,
+                buildWebAssets: false,
+                previousCommit: "abc",
+                newCommit: "def"
             };
 
             mockReadFile.mockImplementationOnce(() => Promise.resolve(JSON.stringify(staleContext)));
@@ -227,7 +309,10 @@ describe("UpdateService", () => {
                 userId: "456",
                 timestamp: Date.now(),
                 runMigrations: false,
-                installDependencies: false
+                installDependencies: false,
+                buildWebAssets: false,
+                previousCommit: "abc",
+                newCommit: "def"
             };
 
             mockReadFile.mockImplementationOnce(() => Promise.resolve(JSON.stringify(validContext)));
@@ -236,7 +321,7 @@ describe("UpdateService", () => {
             const { TextChannel } = await import("discord.js");
             const mockChannel = Object.create(TextChannel.prototype);
             mockChannel.isSendable = () => true;
-            mockChannel.send = mock(() => Promise.resolve());
+            mockChannel.send = mock(() => Promise.resolve({ edit: mock(() => Promise.resolve()), delete: mock(() => Promise.resolve()) }));
 
             const mockClient = createMockClient(mockChannel);
 

shared/modules/admin/update.service.ts

@@ -1,8 +1,8 @@
-import { exec } from "child_process";
+import { exec, type ExecException } from "child_process";
 import { promisify } from "util";
 import { writeFile, readFile, unlink } from "fs/promises";
 import { Client, TextChannel } from "discord.js";
-import { getPostRestartEmbed, getInstallingDependenciesEmbed, getRunningMigrationsEmbed } from "@/modules/admin/update.view";
+import { getPostRestartEmbed, getPostRestartProgressEmbed, type PostRestartProgress } from "@/modules/admin/update.view";
 import type { PostRestartResult } from "@/modules/admin/update.view";
 import type { RestartContext, UpdateCheckResult, UpdateInfo, CommitInfo } from "@/modules/admin/update.types";
 
@@ -10,32 +10,69 @@ const execAsync = promisify(exec);
 
 // Constants
 const STALE_CONTEXT_MS = 10 * 60 * 1000; // 10 minutes
+const DEFAULT_TIMEOUT_MS = 30_000; // 30 seconds for git commands
+const INSTALL_TIMEOUT_MS = 120_000; // 2 minutes for dependency installation
+const BUILD_TIMEOUT_MS = 180_000; // 3 minutes for web build
 
+/**
+ * Execute a command with timeout protection
+ */
+async function execWithTimeout(
+    cmd: string,
+    timeoutMs: number = DEFAULT_TIMEOUT_MS
+): Promise<{ stdout: string; stderr: string }> {
+    return new Promise((resolve, reject) => {
+        const process = exec(cmd, (error: ExecException | null, stdout: string, stderr: string) => {
+            if (error) {
+                reject(error);
+            } else {
+                resolve({ stdout, stderr });
+            }
+        });
 
+        const timer = setTimeout(() => {
+            process.kill("SIGTERM");
+            reject(new Error(`Command timed out after ${timeoutMs}ms: ${cmd}`));
+        }, timeoutMs);
+
+        process.on("exit", () => clearTimeout(timer));
+    });
+}
 
 export class UpdateService {
     private static readonly CONTEXT_FILE = ".restart_context.json";
     private static readonly ROLLBACK_FILE = ".rollback_commit.txt";
 
+    // Cache for rollback state (set when we save, cleared on cleanup)
+    private static rollbackPointExists: boolean | null = null;
+
     /**
      * Check for available updates with detailed commit information
+     * Optimized: Parallel git commands and combined requirements check
      */
-    static async checkForUpdates(): Promise<UpdateInfo> {
-        const { stdout: branchName } = await execAsync("git rev-parse --abbrev-ref HEAD");
+    static async checkForUpdates(): Promise<UpdateInfo & { requirements: UpdateCheckResult }> {
+        // Get branch first (needed for subsequent commands)
+        const { stdout: branchName } = await execWithTimeout("git rev-parse --abbrev-ref HEAD");
         const branch = branchName.trim();
 
-        const { stdout: currentCommit } = await execAsync("git rev-parse --short HEAD");
+        // Parallel execution: get current commit while fetching
+        const [currentResult] = await Promise.all([
+            execWithTimeout("git rev-parse --short HEAD"),
+            execWithTimeout(`git fetch origin ${branch} --prune`) // Only fetch current branch
+        ]);
+        const currentCommit = currentResult.stdout.trim();
 
-        await execAsync("git fetch --all");
+        // After fetch completes, get remote info in parallel
+        const [latestResult, logResult, diffResult] = await Promise.all([
+            execWithTimeout(`git rev-parse --short origin/${branch}`),
+            execWithTimeout(`git log HEAD..origin/${branch} --format="%h|%s|%an" --no-merges`),
+            execWithTimeout(`git diff HEAD..origin/${branch} --name-only`)
+        ]);
 
-        const { stdout: latestCommit } = await execAsync(`git rev-parse --short origin/${branch}`);
+        const latestCommit = latestResult.stdout.trim();
 
-        // Get commit log with author info
-        const { stdout: logOutput } = await execAsync(
-            `git log HEAD..origin/${branch} --format="%h|%s|%an" --no-merges`
-        );
-
-        const commits: CommitInfo[] = logOutput
+        // Parse commit log
+        const commits: CommitInfo[] = logResult.stdout
             .trim()
             .split("\n")
             .filter(line => line.length > 0)
@@ -44,24 +81,26 @@ export class UpdateService {
                 return { hash: hash || "", message: message || "", author: author || "" };
             });
 
+        // Parse changed files and analyze requirements in one pass
+        const changedFiles = diffResult.stdout.trim().split("\n").filter(f => f.length > 0);
+        const requirements = this.analyzeChangedFiles(changedFiles);
+
         return {
             hasUpdates: commits.length > 0,
             branch,
-            currentCommit: currentCommit.trim(),
-            latestCommit: latestCommit.trim(),
+            currentCommit,
+            latestCommit,
             commitCount: commits.length,
-            commits
+            commits,
+            requirements
         };
     }
 
     /**
-     * Analyze what the update requires
+     * Analyze changed files to determine update requirements
+     * Extracted for reuse and clarity
      */
-    static async checkUpdateRequirements(branch: string): Promise<UpdateCheckResult> {
-        try {
-            const { stdout } = await execAsync(`git diff HEAD..origin/${branch} --name-only`);
-            const changedFiles = stdout.trim().split("\n").filter(f => f.length > 0);
-
+    private static analyzeChangedFiles(changedFiles: string[]): UpdateCheckResult {
         const needsRootInstall = changedFiles.some(file =>
             file === "package.json" || file === "bun.lock"
         );
@@ -70,6 +109,14 @@ export class UpdateService {
             file === "web/package.json" || file === "web/bun.lock"
         );
 
+        // Only rebuild web if essential source files changed
+        const needsWebBuild = changedFiles.some(file =>
+            file.match(/^web\/src\/(components|pages|lib|index)/) ||
+            file === "web/build.ts" ||
+            file === "web/tailwind.config.ts" ||
+            file === "web/tsconfig.json"
+        );
+
         const needsMigrations = changedFiles.some(file =>
             file.includes("schema.ts") || file.startsWith("drizzle/")
         );
@@ -77,14 +124,27 @@ export class UpdateService {
         return {
             needsRootInstall,
             needsWebInstall,
+            needsWebBuild,
             needsMigrations,
             changedFiles
         };
+    }
+
+    /**
+     * @deprecated Use checkForUpdates() which now includes requirements
+     * Kept for backwards compatibility
+     */
+    static async checkUpdateRequirements(branch: string): Promise<UpdateCheckResult> {
+        try {
+            const { stdout } = await execWithTimeout(`git diff HEAD..origin/${branch} --name-only`);
+            const changedFiles = stdout.trim().split("\n").filter(f => f.length > 0);
+            return this.analyzeChangedFiles(changedFiles);
         } catch (e) {
             console.error("Failed to check update requirements:", e);
             return {
                 needsRootInstall: false,
                 needsWebInstall: false,
+                needsWebBuild: false,
                 needsMigrations: false,
                 changedFiles: [],
                 error: e instanceof Error ? e : new Error(String(e))
@@ -119,9 +179,10 @@ export class UpdateService {
      * Save the current commit for potential rollback
      */
     static async saveRollbackPoint(): Promise<string> {
-        const { stdout } = await execAsync("git rev-parse HEAD");
+        const { stdout } = await execWithTimeout("git rev-parse HEAD");
         const commit = stdout.trim();
         await writeFile(this.ROLLBACK_FILE, commit);
+        this.rollbackPointExists = true; // Cache the state
         return commit;
     }
 
@@ -131,8 +192,9 @@ export class UpdateService {
     static async rollback(): Promise<{ success: boolean; message: string }> {
         try {
             const rollbackCommit = await readFile(this.ROLLBACK_FILE, "utf-8");
-            await execAsync(`git reset --hard ${rollbackCommit.trim()}`);
+            await execWithTimeout(`git reset --hard ${rollbackCommit.trim()}`);
             await unlink(this.ROLLBACK_FILE);
+            this.rollbackPointExists = false;
             return { success: true, message: `Rolled back to ${rollbackCommit.trim().substring(0, 7)}` };
         } catch (e) {
             return {
@@ -144,12 +206,18 @@ export class UpdateService {
 
     /**
      * Check if a rollback point exists
+     * Uses cache when available to avoid file system access
      */
     static async hasRollbackPoint(): Promise<boolean> {
+        if (this.rollbackPointExists !== null) {
+            return this.rollbackPointExists;
+        }
         try {
             await readFile(this.ROLLBACK_FILE, "utf-8");
+            this.rollbackPointExists = true;
             return true;
         } catch {
+            this.rollbackPointExists = false;
             return false;
         }
     }
@@ -158,26 +226,32 @@ export class UpdateService {
      * Perform the git update
      */
     static async performUpdate(branch: string): Promise<void> {
-        await execAsync(`git reset --hard origin/${branch}`);
+        await execWithTimeout(`git reset --hard origin/${branch}`);
     }
 
     /**
      * Install dependencies for specified projects
+     * Optimized: Parallel installation
      */
     static async installDependencies(options: { root: boolean; web: boolean }): Promise<string> {
-        const outputs: string[] = [];
+        const tasks: Promise<{ label: string; output: string }>[] = [];
 
         if (options.root) {
-            const { stdout } = await execAsync("bun install");
-            outputs.push(`📦 Root: ${stdout.trim() || "Done"}`);
+            tasks.push(
+                execWithTimeout("bun install", INSTALL_TIMEOUT_MS)
+                    .then(({ stdout }) => ({ label: "📦 Root", output: stdout.trim() || "Done" }))
+            );
         }
 
         if (options.web) {
-            const { stdout } = await execAsync("cd web && bun install");
-            outputs.push(`🌐 Web: ${stdout.trim() || "Done"}`);
+            tasks.push(
+                execWithTimeout("cd web && bun install", INSTALL_TIMEOUT_MS)
+                    .then(({ stdout }) => ({ label: "🌐 Web", output: stdout.trim() || "Done" }))
+            );
         }
 
-        return outputs.join("\n");
+        const results = await Promise.all(tasks);
+        return results.map(r => `${r.label}: ${r.output}`).join("\n");
     }
 
     /**
@@ -218,7 +292,7 @@ export class UpdateService {
             }
 
             const result = await this.executePostRestartTasks(context, channel);
-            await this.notifyPostRestartResult(channel, result, context);
+            await this.notifyPostRestartResult(channel, result);
             await this.cleanupContext();
         } catch (e) {
             console.error("Failed to handle post-restart context:", e);
@@ -259,51 +333,120 @@ export class UpdateService {
         const result: PostRestartResult = {
             installSuccess: true,
             installOutput: "",
+            webBuildSuccess: true,
+            webBuildOutput: "",
             migrationSuccess: true,
             migrationOutput: "",
             ranInstall: context.installDependencies,
+            ranWebBuild: context.buildWebAssets,
             ranMigrations: context.runMigrations,
             previousCommit: context.previousCommit,
             newCommit: context.newCommit
         };
 
-        // 1. Install Dependencies if needed
+        // Track progress for consolidated message
+        const progress: PostRestartProgress = {
+            installDeps: context.installDependencies,
+            buildWeb: context.buildWebAssets,
+            runMigrations: context.runMigrations,
+            currentStep: "starting"
+        };
+
+        // Only send progress message if there are tasks to run
+        const hasTasks = context.installDependencies || context.buildWebAssets || context.runMigrations;
+        let progressMessage = hasTasks
+            ? await channel.send({ embeds: [getPostRestartProgressEmbed(progress)] })
+            : null;
+
+        // Helper to update progress message
+        const updateProgress = async () => {
+            if (progressMessage) {
+                await progressMessage.edit({ embeds: [getPostRestartProgressEmbed(progress)] });
+            }
+        };
+
+        // 1. Install Dependencies if needed (PARALLELIZED)
         if (context.installDependencies) {
             try {
-                await channel.send({ embeds: [getInstallingDependenciesEmbed()] });
+                progress.currentStep = "install";
+                await updateProgress();
 
-                const { stdout: rootOutput } = await execAsync("bun install");
-                const { stdout: webOutput } = await execAsync("cd web && bun install");
+                // Parallel installation of root and web dependencies
+                const [rootResult, webResult] = await Promise.all([
+                    execWithTimeout("bun install", INSTALL_TIMEOUT_MS)
+                        .then(({ stdout }) => ({ success: true, output: stdout.trim() || "Done" }))
+                        .catch(err => ({ success: false, output: err instanceof Error ? err.message : String(err) })),
+                    execWithTimeout("cd web && bun install", INSTALL_TIMEOUT_MS)
+                        .then(({ stdout }) => ({ success: true, output: stdout.trim() || "Done" }))
+                        .catch(err => ({ success: false, output: err instanceof Error ? err.message : String(err) }))
+                ]);
 
-                result.installOutput = `📦 Root: ${rootOutput.trim() || "Done"}\n🌐 Web: ${webOutput.trim() || "Done"}`;
+                result.installSuccess = rootResult.success && webResult.success;
+                result.installOutput = `📦 Root: ${rootResult.output}\n🌐 Web: ${webResult.output}`;
+                progress.installDone = true;
+
+                if (!result.installSuccess) {
+                    console.error("Dependency Install Failed:", result.installOutput);
+                }
             } catch (err: unknown) {
                 result.installSuccess = false;
                 result.installOutput = err instanceof Error ? err.message : String(err);
+                progress.installDone = true;
                 console.error("Dependency Install Failed:", err);
             }
         }
 
-        // 2. Run Migrations
+        // 2. Build Web Assets if needed
+        if (context.buildWebAssets) {
+            try {
+                progress.currentStep = "build";
+                await updateProgress();
+
+                const { stdout } = await execWithTimeout("cd web && bun run build", BUILD_TIMEOUT_MS);
+                result.webBuildOutput = stdout.trim() || "Build completed successfully";
+                progress.buildDone = true;
+            } catch (err: unknown) {
+                result.webBuildSuccess = false;
+                result.webBuildOutput = err instanceof Error ? err.message : String(err);
+                progress.buildDone = true;
+                console.error("Web Build Failed:", err);
+            }
+        }
+
+        // 3. Run Migrations
         if (context.runMigrations) {
             try {
-                await channel.send({ embeds: [getRunningMigrationsEmbed()] });
-                const { stdout } = await execAsync("bun x drizzle-kit migrate");
+                progress.currentStep = "migrate";
+                await updateProgress();
+
+                const { stdout } = await execWithTimeout("bun x drizzle-kit migrate", DEFAULT_TIMEOUT_MS);
                 result.migrationOutput = stdout;
+                progress.migrateDone = true;
             } catch (err: unknown) {
                 result.migrationSuccess = false;
                 result.migrationOutput = err instanceof Error ? err.message : String(err);
+                progress.migrateDone = true;
                 console.error("Migration Failed:", err);
             }
         }
 
+        // Delete progress message before final result
+        if (progressMessage) {
+            try {
+                await progressMessage.delete();
+            } catch {
+                // Message may already be deleted, ignore
+            }
+        }
+
         return result;
     }
 
     private static async notifyPostRestartResult(
         channel: TextChannel,
-        result: PostRestartResult,
-        context: RestartContext
+        result: PostRestartResult
     ): Promise<void> {
+        // Use cached rollback state - we just saved it before restart
         const hasRollback = await this.hasRollbackPoint();
         await channel.send(getPostRestartEmbed(result, hasRollback));
     }
@@ -314,5 +457,6 @@ export class UpdateService {
         } catch {
             // File may not exist, ignore
         }
+        // Don't clear rollback cache here - rollback file persists
     }
 }

shared/modules/dashboard/dashboard.types.ts

@@ -13,6 +13,7 @@ export const DashboardStatsSchema = z.object({
     bot: z.object({
         name: z.string(),
         avatarUrl: z.string().nullable(),
+        status: z.string().nullable(),
     }),
     guilds: z.object({
         count: z.number(),
@@ -84,6 +85,7 @@ export const ClientStatsSchema = z.object({
     bot: z.object({
         name: z.string(),
         avatarUrl: z.string().nullable(),
+        status: z.string().nullable(),
     }),
     guilds: z.number(),
     ping: z.number(),

shared/modules/economy/economy.service.ts

@@ -87,7 +87,7 @@ export const economyService = {
             });
 
             if (cooldown && cooldown.expiresAt > now) {
-                throw new UserError(`Daily already claimed today. Next claim <t:${Math.floor(cooldown.expiresAt.getTime() / 1000)}:F>`);
+                throw new UserError(`You have already claimed your daily reward today.\nNext claim available: <t:${Math.floor(cooldown.expiresAt.getTime() / 1000)}:F> (<t:${Math.floor(cooldown.expiresAt.getTime() / 1000)}:R>)`);
             }
 
             // Get user for streak logic
@@ -196,6 +196,10 @@ export const economyService = {
                 description: description,
             });
 
+            // Trigger Quest Event
+            const { questService } = await import("@shared/modules/quest/quest.service");
+            await questService.handleEvent(id, type, 1, txFn);
+
             return user;
         }, tx);
     },

shared/modules/economy/exam.service.test.ts

@@ -0,0 +1,237 @@
+import { describe, it, expect, mock, beforeEach, setSystemTime } from "bun:test";
+import { examService, ExamStatus } from "@shared/modules/economy/exam.service";
+import { users, userTimers, transactions } from "@db/schema";
+
+// Define mock functions
+const mockFindFirst = mock();
+const mockInsert = mock();
+const mockUpdate = mock();
+const mockValues = mock();
+const mockReturning = mock();
+const mockSet = mock();
+const mockWhere = mock();
+
+// Chainable mock setup
+mockInsert.mockReturnValue({ values: mockValues });
+mockValues.mockReturnValue({ returning: mockReturning });
+mockUpdate.mockReturnValue({ set: mockSet });
+mockSet.mockReturnValue({ where: mockWhere });
+mockWhere.mockReturnValue({ returning: mockReturning });
+
+// Mock DrizzleClient
+mock.module("@shared/db/DrizzleClient", () => {
+    const createMockTx = () => ({
+        query: {
+            users: { findFirst: mockFindFirst },
+            userTimers: { findFirst: mockFindFirst },
+        },
+        insert: mockInsert,
+        update: mockUpdate,
+    });
+
+    return {
+        DrizzleClient: {
+            query: {
+                users: { findFirst: mockFindFirst },
+                userTimers: { findFirst: mockFindFirst },
+            },
+            insert: mockInsert,
+            update: mockUpdate,
+            transaction: async (cb: any) => {
+                return cb(createMockTx());
+            }
+        },
+    };
+});
+
+// Mock withTransaction
+mock.module("@/lib/db", () => ({
+    withTransaction: async (cb: any, tx?: any) => {
+        if (tx) return cb(tx);
+        return cb({
+            query: {
+                users: { findFirst: mockFindFirst },
+                userTimers: { findFirst: mockFindFirst },
+            },
+            insert: mockInsert,
+            update: mockUpdate,
+        });
+    }
+}));
+
+// Mock Config
+mock.module("@shared/lib/config", () => ({
+    config: {
+        economy: {
+            exam: {
+                multMin: 1.0,
+                multMax: 2.0,
+            }
+        }
+    }
+}));
+
+// Mock User Service
+mock.module("@shared/modules/user/user.service", () => ({
+    userService: {
+        getOrCreateUser: mock()
+    }
+}));
+
+// Mock Dashboard Service
+mock.module("@shared/modules/dashboard/dashboard.service", () => ({
+    dashboardService: {
+        recordEvent: mock()
+    }
+}));
+
+describe("ExamService", () => {
+    beforeEach(() => {
+        mockFindFirst.mockReset();
+        mockInsert.mockClear();
+        mockUpdate.mockClear();
+        mockValues.mockClear();
+        mockReturning.mockClear();
+        mockSet.mockClear();
+        mockWhere.mockClear();
+    });
+
+    describe("getExamStatus", () => {
+        it("should return NOT_REGISTERED if no timer exists", async () => {
+            mockFindFirst.mockResolvedValue(undefined);
+            const status = await examService.getExamStatus("1");
+            expect(status.status).toBe(ExamStatus.NOT_REGISTERED);
+        });
+
+        it("should return COOLDOWN if now < expiresAt", async () => {
+            const now = new Date("2024-01-10T12:00:00Z");
+            setSystemTime(now);
+            const future = new Date("2024-01-11T00:00:00Z");
+            
+            mockFindFirst.mockResolvedValue({ 
+                expiresAt: future,
+                metadata: { examDay: 3, lastXp: "100" }
+            });
+
+            const status = await examService.getExamStatus("1");
+            expect(status.status).toBe(ExamStatus.COOLDOWN);
+            expect(status.nextExamAt?.getTime()).toBe(future.setHours(0,0,0,0));
+        });
+
+        it("should return MISSED if it is the wrong day", async () => {
+            const now = new Date("2024-01-15T12:00:00Z"); // Monday (1)
+            setSystemTime(now);
+            const past = new Date("2024-01-10T00:00:00Z"); // Wednesday (3) last week
+            
+            mockFindFirst.mockResolvedValue({ 
+                expiresAt: past,
+                metadata: { examDay: 3, lastXp: "100" } // Registered for Wednesday
+            });
+
+            const status = await examService.getExamStatus("1");
+            expect(status.status).toBe(ExamStatus.MISSED);
+            expect(status.examDay).toBe(3);
+        });
+
+        it("should return AVAILABLE if it is the correct day", async () => {
+            const now = new Date("2024-01-17T12:00:00Z"); // Wednesday (3)
+            setSystemTime(now);
+            const past = new Date("2024-01-10T00:00:00Z");
+            
+            mockFindFirst.mockResolvedValue({ 
+                expiresAt: past,
+                metadata: { examDay: 3, lastXp: "100" }
+            });
+
+            const status = await examService.getExamStatus("1");
+            expect(status.status).toBe(ExamStatus.AVAILABLE);
+            expect(status.examDay).toBe(3);
+            expect(status.lastXp).toBe(100n);
+        });
+    });
+
+    describe("registerForExam", () => {
+        it("should create user and timer correctly", async () => {
+            const now = new Date("2024-01-15T12:00:00Z"); // Monday (1)
+            setSystemTime(now);
+
+            const { userService } = await import("@shared/modules/user/user.service");
+            (userService.getOrCreateUser as any).mockResolvedValue({ id: 1n, xp: 500n });
+
+            const result = await examService.registerForExam("1", "testuser");
+
+            expect(result.status).toBe(ExamStatus.NOT_REGISTERED);
+            expect(result.examDay).toBe(1);
+            
+            expect(mockInsert).toHaveBeenCalledWith(userTimers);
+            expect(mockInsert).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    describe("takeExam", () => {
+        it("should return NOT_REGISTERED if not registered", async () => {
+            mockFindFirst.mockResolvedValueOnce({ id: 1n }) // user check
+                         .mockResolvedValueOnce(undefined); // timer check
+
+            const result = await examService.takeExam("1");
+            expect(result.status).toBe(ExamStatus.NOT_REGISTERED);
+        });
+
+        it("should handle missed exam and schedule for next exam day", async () => {
+            const now = new Date("2024-01-15T12:00:00Z"); // Monday (1)
+            setSystemTime(now);
+            const past = new Date("2024-01-10T00:00:00Z");
+            
+            mockFindFirst.mockResolvedValueOnce({ id: 1n, xp: 600n }) // user
+                         .mockResolvedValueOnce({ 
+                             expiresAt: past,
+                             metadata: { examDay: 3, lastXp: "500" } // Registered for Wednesday
+                         }); // timer
+
+            const result = await examService.takeExam("1");
+
+            expect(result.status).toBe(ExamStatus.MISSED);
+            expect(result.examDay).toBe(3);
+            
+            // Should set next exam to next Wednesday
+            // Monday (1) + 2 days = Wednesday (3)
+            const expected = new Date("2024-01-17T00:00:00Z");
+            expect(result.nextExamAt!.getTime()).toBe(expected.getTime());
+            
+            expect(mockUpdate).toHaveBeenCalledWith(userTimers);
+        });
+
+        it("should calculate rewards and update state when passed", async () => {
+            const now = new Date("2024-01-17T12:00:00Z"); // Wednesday (3)
+            setSystemTime(now);
+            const past = new Date("2024-01-10T00:00:00Z");
+            
+            mockFindFirst.mockResolvedValueOnce({ id: 1n, username: "testuser", xp: 1000n, balance: 0n }) // user
+                         .mockResolvedValueOnce({ 
+                             expiresAt: past,
+                             metadata: { examDay: 3, lastXp: "500" }
+                         }); // timer
+
+            const result = await examService.takeExam("1");
+
+            expect(result.status).toBe(ExamStatus.AVAILABLE);
+            expect(result.xpDiff).toBe(500n);
+            // Multiplier is between 1.0 and 2.0 based on mock config
+            expect(result.multiplier).toBeGreaterThanOrEqual(1.0);
+            expect(result.multiplier).toBeLessThanOrEqual(2.0);
+            expect(result.reward).toBeGreaterThanOrEqual(500n);
+            expect(result.reward).toBeLessThanOrEqual(1000n);
+
+            expect(mockUpdate).toHaveBeenCalledWith(userTimers);
+            expect(mockUpdate).toHaveBeenCalledWith(users);
+            
+            // Verify transaction
+            expect(mockInsert).toHaveBeenCalledWith(transactions);
+            expect(mockValues).toHaveBeenCalledWith(expect.objectContaining({
+                amount: result.reward,
+                userId: 1n,
+                type: expect.anything()
+            }));
+        });
+    });
+});

shared/modules/economy/exam.service.ts

@@ -0,0 +1,262 @@
+import { users, userTimers, transactions } from "@db/schema";
+import { eq, and, sql } from "drizzle-orm";
+import { TimerType, TransactionType } from "@shared/lib/constants";
+import { config } from "@shared/lib/config";
+import { withTransaction } from "@/lib/db";
+import type { Transaction } from "@shared/lib/types";
+import { UserError } from "@shared/lib/errors";
+
+const EXAM_TIMER_TYPE = TimerType.EXAM_SYSTEM;
+const EXAM_TIMER_KEY = 'default';
+
+export interface ExamMetadata {
+    examDay: number;
+    lastXp: string;
+}
+
+export enum ExamStatus {
+    NOT_REGISTERED = 'NOT_REGISTERED',
+    COOLDOWN = 'COOLDOWN',
+    MISSED = 'MISSED',
+    AVAILABLE = 'AVAILABLE',
+}
+
+export interface ExamActionResult {
+    status: ExamStatus;
+    nextExamAt?: Date;
+    reward?: bigint;
+    xpDiff?: bigint;
+    multiplier?: number;
+    examDay?: number;
+}
+
+export const examService = {
+    /**
+     * Get the current exam status for a user.
+     */
+    async getExamStatus(userId: string, tx?: Transaction) {
+        return await withTransaction(async (txFn) => {
+            const timer = await txFn.query.userTimers.findFirst({
+                where: and(
+                    eq(userTimers.userId, BigInt(userId)),
+                    eq(userTimers.type, EXAM_TIMER_TYPE),
+                    eq(userTimers.key, EXAM_TIMER_KEY)
+                )
+            });
+
+            if (!timer) {
+                return { status: ExamStatus.NOT_REGISTERED };
+            }
+
+            const now = new Date();
+            const expiresAt = new Date(timer.expiresAt);
+            expiresAt.setHours(0, 0, 0, 0);
+
+            if (now < expiresAt) {
+                return { 
+                    status: ExamStatus.COOLDOWN, 
+                    nextExamAt: expiresAt 
+                };
+            }
+
+            const metadata = timer.metadata as unknown as ExamMetadata;
+            const currentDay = now.getDay();
+
+            if (currentDay !== metadata.examDay) {
+                return { 
+                    status: ExamStatus.MISSED, 
+                    nextExamAt: expiresAt,
+                    examDay: metadata.examDay
+                };
+            }
+
+            return { 
+                status: ExamStatus.AVAILABLE,
+                examDay: metadata.examDay,
+                lastXp: BigInt(metadata.lastXp || "0")
+            };
+        }, tx);
+    },
+
+    /**
+     * Register a user for the first time.
+     */
+    async registerForExam(userId: string, username: string, tx?: Transaction): Promise<ExamActionResult> {
+        return await withTransaction(async (txFn) => {
+            // Ensure user exists
+            const { userService } = await import("@shared/modules/user/user.service");
+            const user = await userService.getOrCreateUser(userId, username, txFn);
+            if (!user) throw new Error("Failed to get or create user.");
+
+            const now = new Date();
+            const currentDay = now.getDay();
+
+            // Set next exam to next week
+            const nextExamDate = new Date(now);
+            nextExamDate.setDate(now.getDate() + 7);
+            nextExamDate.setHours(0, 0, 0, 0);
+
+            const metadata: ExamMetadata = {
+                examDay: currentDay,
+                lastXp: (user.xp ?? 0n).toString()
+            };
+
+            await txFn.insert(userTimers).values({
+                userId: BigInt(userId),
+                type: EXAM_TIMER_TYPE,
+                key: EXAM_TIMER_KEY,
+                expiresAt: nextExamDate,
+                metadata: metadata
+            });
+
+            return {
+                status: ExamStatus.NOT_REGISTERED,
+                nextExamAt: nextExamDate,
+                examDay: currentDay
+            };
+        }, tx);
+    },
+
+    /**
+     * Take the exam. Handles missed exams and reward calculations.
+     */
+    async takeExam(userId: string, tx?: Transaction): Promise<ExamActionResult> {
+        return await withTransaction(async (txFn) => {
+            const user = await txFn.query.users.findFirst({
+                where: eq(users.id, BigInt(userId))
+            });
+
+            if (!user) throw new Error("User not found");
+
+            const timer = await txFn.query.userTimers.findFirst({
+                where: and(
+                    eq(userTimers.userId, BigInt(userId)),
+                    eq(userTimers.type, EXAM_TIMER_TYPE),
+                    eq(userTimers.key, EXAM_TIMER_KEY)
+                )
+            });
+
+            if (!timer) {
+                return { status: ExamStatus.NOT_REGISTERED };
+            }
+
+            const now = new Date();
+            const expiresAt = new Date(timer.expiresAt);
+            expiresAt.setHours(0, 0, 0, 0);
+
+            if (now < expiresAt) {
+                 return { 
+                    status: ExamStatus.COOLDOWN, 
+                    nextExamAt: expiresAt 
+                };
+            }
+
+            const metadata = timer.metadata as unknown as ExamMetadata;
+            const examDay = metadata.examDay;
+            const currentDay = now.getDay();
+
+            if (currentDay !== examDay) {
+                // Missed exam logic
+                let daysUntil = (examDay - currentDay + 7) % 7;
+                if (daysUntil === 0) daysUntil = 7;
+
+                const nextExamDate = new Date(now);
+                nextExamDate.setDate(now.getDate() + daysUntil);
+                nextExamDate.setHours(0, 0, 0, 0);
+
+                const newMetadata: ExamMetadata = {
+                    examDay: examDay,
+                    lastXp: (user.xp ?? 0n).toString()
+                };
+
+                await txFn.update(userTimers)
+                    .set({
+                        expiresAt: nextExamDate,
+                        metadata: newMetadata
+                    })
+                    .where(and(
+                        eq(userTimers.userId, BigInt(userId)),
+                        eq(userTimers.type, EXAM_TIMER_TYPE),
+                        eq(userTimers.key, EXAM_TIMER_KEY)
+                    ));
+
+                return {
+                    status: ExamStatus.MISSED,
+                    nextExamAt: nextExamDate,
+                    examDay: examDay
+                };
+            }
+
+            // Reward Calculation
+            const lastXp = BigInt(metadata.lastXp || "0");
+            const currentXp = user.xp ?? 0n;
+            const diff = currentXp - lastXp;
+
+            const multMin = config.economy.exam.multMin;
+            const multMax = config.economy.exam.multMax;
+            const multiplier = Math.random() * (multMax - multMin) + multMin;
+
+            let reward = 0n;
+            if (diff > 0n) {
+                // Use scaled BigInt arithmetic to avoid precision loss with large XP values
+                const scaledMultiplier = BigInt(Math.round(multiplier * 10000));
+                reward = (diff * scaledMultiplier) / 10000n;
+            }
+
+            const nextExamDate = new Date(now);
+            nextExamDate.setDate(now.getDate() + 7);
+            nextExamDate.setHours(0, 0, 0, 0);
+
+            const newMetadata: ExamMetadata = {
+                examDay: examDay,
+                lastXp: currentXp.toString()
+            };
+
+            // Update Timer
+            await txFn.update(userTimers)
+                .set({
+                    expiresAt: nextExamDate,
+                    metadata: newMetadata
+                })
+                .where(and(
+                    eq(userTimers.userId, BigInt(userId)),
+                    eq(userTimers.type, EXAM_TIMER_TYPE),
+                    eq(userTimers.key, EXAM_TIMER_KEY)
+                ));
+
+            // Add Currency
+            if (reward > 0n) {
+                await txFn.update(users)
+                    .set({
+                        balance: sql`${users.balance} + ${reward}`
+                    })
+                    .where(eq(users.id, BigInt(userId)));
+
+                // Add Transaction Record
+                await txFn.insert(transactions).values({
+                    userId: BigInt(userId),
+                    amount: reward,
+                    type: TransactionType.EXAM_REWARD,
+                    description: `Weekly exam reward (XP Diff: ${diff})`,
+                });
+            }
+
+            // Record dashboard event
+            const { dashboardService } = await import("@shared/modules/dashboard/dashboard.service");
+            await dashboardService.recordEvent({
+                type: 'success',
+                message: `${user.username} passed their exam: ${reward.toLocaleString()} AU`,
+                icon: '🎓'
+            });
+
+            return {
+                status: ExamStatus.AVAILABLE,
+                nextExamAt: nextExamDate,
+                reward,
+                xpDiff: diff,
+                multiplier,
+                examDay
+            };
+        }, tx);
+    }
+};

shared/modules/inventory/inventory.service.ts

@@ -37,6 +37,11 @@ export const inventoryService = {
                         eq(inventory.itemId, itemId)
                     ))
                     .returning();
+
+                // Trigger Quest Event
+                const { questService } = await import("@shared/modules/quest/quest.service");
+                await questService.handleEvent(userId, `ITEM_COLLECT:${itemId}`, Number(quantity), txFn);
+
                 return entry;
             } else {
                 // Check Slot Limit
@@ -60,6 +65,11 @@ export const inventoryService = {
                         quantity: quantity,
                     })
                     .returning();
+
+                // Trigger Quest Event
+                const { questService } = await import("@shared/modules/quest/quest.service");
+                await questService.handleEvent(userId, `ITEM_COLLECT:${itemId}`, Number(quantity), txFn);
+
                 return entry;
             }
         }, tx);
@@ -179,6 +189,10 @@ export const inventoryService = {
                 await inventoryService.removeItem(userId, itemId, 1n, txFn);
             }
 
+            // Trigger Quest Event
+            const { questService } = await import("@shared/modules/quest/quest.service");
+            await questService.handleEvent(userId, `ITEM_USE:${itemId}`, 1, txFn);
+
             return { success: true, results, usageData, item };
         }, tx);
     },

shared/modules/leveling/leveling.service.ts

@@ -68,6 +68,10 @@ export const levelingService = {
                 .where(eq(users.id, BigInt(id)))
                 .returning();
 
+            // Trigger Quest Event
+            const { questService } = await import("@shared/modules/quest/quest.service");
+            await questService.handleEvent(id, 'XP_GAIN', Number(amount), txFn);
+
             return { user: updatedUser, levelUp, currentLevel: newLevel };
         }, tx);
     },

shared/modules/quest/quest.service.test.ts

@@ -33,6 +33,7 @@ mock.module("@shared/db/DrizzleClient", () => {
     const createMockTx = () => ({
         query: {
             userQuests: { findFirst: mockFindFirst, findMany: mockFindMany },
+            quests: { findMany: mockFindMany },
         },
         insert: mockInsert,
         update: mockUpdate,
@@ -148,4 +149,147 @@ describe("questService", () => {
             expect(result).toEqual(mockData as any);
         });
     });
+
+    describe("getAvailableQuests", () => {
+        it("should return quests not yet accepted by user", async () => {
+            // First call to findMany (userQuests) returns accepted quest IDs
+            // Second call to findMany (quests) returns available quests
+            mockFindMany
+                .mockResolvedValueOnce([{ questId: 1 }]) // userQuests
+                .mockResolvedValueOnce([{ id: 2, name: "New Quest" }]); // quests
+
+            const result = await questService.getAvailableQuests("1");
+
+            expect(result).toEqual([{ id: 2, name: "New Quest" }] as any);
+            expect(mockFindMany).toHaveBeenCalledTimes(2);
+        });
+
+        it("should return all quests if user has no assigned quests", async () => {
+            mockFindMany
+                .mockResolvedValueOnce([]) // userQuests
+                .mockResolvedValueOnce([{ id: 1 }, { id: 2 }]); // quests
+
+            const result = await questService.getAvailableQuests("1");
+
+            expect(result).toEqual([{ id: 1 }, { id: 2 }] as any);
+        });
+    });
+
+    describe("handleEvent", () => {
+        it("should progress a quest with sub-events", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 101,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "ITEM_USE:101", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+            mockReturning.mockResolvedValue([{ userId: 1n, questId: 101, progress: 1 }]);
+
+            await questService.handleEvent("1", "ITEM_USE:101", 1);
+
+            expect(mockUpdate).toHaveBeenCalled();
+            expect(mockSet).toHaveBeenCalledWith({ progress: 1 });
+        });
+
+        it("should complete a quest when target reached using sub-events", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 101,
+                progress: 4,
+                completedAt: null,
+                quest: { 
+                    triggerEvent: "ITEM_COLLECT:505", 
+                    requirements: { target: 5 },
+                    rewards: { balance: 100 }
+                }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+            mockFindFirst.mockResolvedValue(mockUserQuest); // For completeQuest
+
+            await questService.handleEvent("1", "ITEM_COLLECT:505", 1);
+
+            // Verify completeQuest was called (it will update completedAt)
+            expect(mockUpdate).toHaveBeenCalled();
+            expect(mockSet).toHaveBeenCalledWith({ completedAt: expect.any(Date) });
+        });
+
+        it("should progress a quest with generic events", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 102,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "ITEM_COLLECT", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+            mockReturning.mockResolvedValue([{ userId: 1n, questId: 102, progress: 1 }]);
+
+            await questService.handleEvent("1", "ITEM_COLLECT:505", 1);
+
+            expect(mockUpdate).toHaveBeenCalled();
+            expect(mockSet).toHaveBeenCalledWith({ progress: 1 });
+        });
+
+        it("should ignore events that are not prefix matches", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 103,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "ITEM_COLLECT", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+
+            await questService.handleEvent("1", "ITEM_COLLECT_UNRELATED", 1);
+
+            expect(mockUpdate).not.toHaveBeenCalled();
+        });
+
+        it("should not progress a specific quest with a different specific event", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 104,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "ITEM_COLLECT:101", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+
+            await questService.handleEvent("1", "ITEM_COLLECT:202", 1);
+
+            expect(mockUpdate).not.toHaveBeenCalled();
+        });
+
+        it("should not progress a specific quest with a generic event", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 105,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "ITEM_COLLECT:101", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+
+            await questService.handleEvent("1", "ITEM_COLLECT", 1);
+
+            expect(mockUpdate).not.toHaveBeenCalled();
+        });
+
+        it("should ignore irrelevant events", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 101,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "DIFFERENT_EVENT", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+
+            await questService.handleEvent("1", "TEST_EVENT", 1);
+
+            expect(mockUpdate).not.toHaveBeenCalled();
+        });
+    });
 });

shared/modules/quest/quest.service.ts

@@ -1,4 +1,4 @@
-import { userQuests } from "@db/schema";
+import { userQuests, quests } from "@db/schema";
 import { eq, and } from "drizzle-orm";
 import { UserError } from "@shared/lib/errors";
 import { DrizzleClient } from "@shared/db/DrizzleClient";
@@ -7,6 +7,7 @@ import { levelingService } from "@shared/modules/leveling/leveling.service";
 import { withTransaction } from "@/lib/db";
 import type { Transaction } from "@shared/lib/types";
 import { TransactionType } from "@shared/lib/constants";
+import { systemEvents, EVENTS } from "@shared/lib/events";
 
 export const questService = {
     assignQuest: async (userId: string, questId: number, tx?: Transaction) => {
@@ -34,6 +35,40 @@ export const questService = {
         }, tx);
     },
 
+    handleEvent: async (userId: string, eventName: string, weight: number = 1, tx?: Transaction) => {
+        return await withTransaction(async (txFn) => {
+            // 1. Fetch active user quests for this event
+            const activeUserQuests = await txFn.query.userQuests.findMany({
+                where: and(
+                    eq(userQuests.userId, BigInt(userId)),
+                ),
+                with: {
+                    quest: true
+                }
+            });
+
+            const relevant = activeUserQuests.filter(uq => {
+                const trigger = uq.quest.triggerEvent;
+                // Exact match or prefix match (e.g. ITEM_COLLECT matches ITEM_COLLECT:101)
+                const isMatch = eventName === trigger || eventName.startsWith(trigger + ":");
+                return isMatch && !uq.completedAt;
+            });
+
+            for (const uq of relevant) {
+                const requirements = uq.quest.requirements as { target?: number };
+                const target = requirements?.target || 1;
+
+                const newProgress = (uq.progress || 0) + weight;
+
+                if (newProgress >= target) {
+                    await questService.completeQuest(userId, uq.questId, txFn);
+                } else {
+                    await questService.updateProgress(userId, uq.questId, newProgress, txFn);
+                }
+            }
+        }, tx);
+    },
+
     completeQuest: async (userId: string, questId: number, tx?: Transaction) => {
         return await withTransaction(async (txFn) => {
             const userQuest = await txFn.query.userQuests.findFirst({
@@ -73,6 +108,14 @@ export const questService = {
                 results.xp = xp;
             }
 
+            // Emit completion event for the bot to handle notifications
+            systemEvents.emit(EVENTS.QUEST.COMPLETED, {
+                userId,
+                questId,
+                quest: userQuest.quest,
+                rewards: results
+            });
+
             return { success: true, rewards: results };
         }, tx);
     },
@@ -84,5 +127,75 @@ export const questService = {
                 quest: true,
             }
         });
+    },
+
+    async getAvailableQuests(userId: string) {
+        const userQuestIds = (await DrizzleClient.query.userQuests.findMany({
+            where: eq(userQuests.userId, BigInt(userId)),
+            columns: {
+                questId: true
+            }
+        })).map(uq => uq.questId);
+
+        return await DrizzleClient.query.quests.findMany({
+            where: (quests, { notInArray }) => userQuestIds.length > 0
+                ? notInArray(quests.id, userQuestIds)
+                : undefined
+        });
+    },
+
+    async createQuest(data: {
+        name: string;
+        description: string;
+        triggerEvent: string;
+        requirements: { target: number };
+        rewards: { xp: number; balance: number };
+    }, tx?: Transaction) {
+        return await withTransaction(async (txFn) => {
+            return await txFn.insert(quests)
+                .values({
+                    name: data.name,
+                    description: data.description,
+                    triggerEvent: data.triggerEvent,
+                    requirements: data.requirements,
+                    rewards: data.rewards,
+                })
+                .returning();
+        }, tx);
+    },
+
+    async getAllQuests() {
+        return await DrizzleClient.query.quests.findMany({
+            orderBy: (quests, { asc }) => [asc(quests.id)],
+        });
+    },
+
+    async deleteQuest(id: number, tx?: Transaction) {
+        return await withTransaction(async (txFn) => {
+            return await txFn.delete(quests)
+                .where(eq(quests.id, id))
+                .returning();
+        }, tx);
+    },
+
+    async updateQuest(id: number, data: {
+        name?: string;
+        description?: string;
+        triggerEvent?: string;
+        requirements?: { target?: number };
+        rewards?: { xp?: number; balance?: number };
+    }, tx?: Transaction) {
+        return await withTransaction(async (txFn) => {
+            return await txFn.update(quests)
+                .set({
+                    ...(data.name !== undefined && { name: data.name }),
+                    ...(data.description !== undefined && { description: data.description }),
+                    ...(data.triggerEvent !== undefined && { triggerEvent: data.triggerEvent }),
+                    ...(data.requirements !== undefined && { requirements: data.requirements }),
+                    ...(data.rewards !== undefined && { rewards: data.rewards }),
+                })
+                .where(eq(quests.id, id))
+                .returning();
+        }, tx);
     }
 };

shared/scripts/docker-cleanup.sh

@@ -0,0 +1,98 @@
+#!/bin/bash
+# Cleanup script for Docker resources
+# Use: ./shared/scripts/docker-cleanup.sh
+# Use: ./shared/scripts/docker-cleanup.sh --full  (for aggressive cleanup)
+
+set -e
+
+echo "🧹 Aurora Docker Cleanup"
+echo "========================"
+echo ""
+
+# Show current disk usage first
+echo "📊 Current Docker disk usage:"
+docker system df
+echo ""
+
+# Stop running containers for this project
+echo "📦 Stopping Aurora containers..."
+docker compose down 2>/dev/null || true
+
+# Remove dangling images (untagged images from failed builds)
+echo ""
+echo "🗑️  Removing dangling images..."
+docker image prune -f
+
+# Check for --full flag for aggressive cleanup
+if [[ "$1" == "--full" ]]; then
+    echo ""
+    echo "🔥 Full cleanup mode - removing all unused Docker resources..."
+    
+    # Remove all unused images, not just dangling ones
+    echo "  → Removing unused images..."
+    docker image prune -a -f
+    
+    # Remove build cache
+    echo "  → Removing build cache..."
+    docker builder prune -a -f
+    
+    # Remove unused volumes (except named ones we need)
+    echo "  → Removing unused volumes..."
+    docker volume prune -f
+    
+    # Remove unused networks
+    echo "  → Removing unused networks..."
+    docker network prune -f
+    
+    # Remove node_modules volumes
+    echo "  → Removing node_modules volumes..."
+    docker volume rm aurora_app_node_modules aurora_web_node_modules 2>/dev/null || true
+    
+    echo ""
+    echo "✅ Full cleanup complete!"
+else
+    # Interactive mode
+    echo ""
+    read -p "🔧 Remove Docker build cache? (y/N): " -n 1 -r
+    echo
+    if [[ $REPLY =~ ^[Yy]$ ]]; then
+        docker builder prune -f
+        echo "✓ Build cache cleared"
+    fi
+
+    echo ""
+    read -p "🖼️  Remove ALL unused images (not just dangling)? (y/N): " -n 1 -r
+    echo
+    if [[ $REPLY =~ ^[Yy]$ ]]; then
+        docker image prune -a -f
+        echo "✓ Unused images removed"
+    fi
+
+    echo ""
+    read -p "📁 Remove node_modules volumes? (forces fresh install) (y/N): " -n 1 -r
+    echo
+    if [[ $REPLY =~ ^[Yy]$ ]]; then
+        docker volume rm aurora_app_node_modules aurora_web_node_modules 2>/dev/null || true
+        echo "✓ Node modules volumes removed"
+    fi
+
+    echo ""
+    read -p "🧨 Run full system prune (removes ALL unused data)? (y/N): " -n 1 -r
+    echo
+    if [[ $REPLY =~ ^[Yy]$ ]]; then
+        docker system prune -a -f --volumes
+        echo "✓ Full system prune complete"
+    fi
+
+    echo ""
+    echo "✅ Cleanup complete!"
+fi
+
+echo ""
+echo "📊 Docker disk usage after cleanup:"
+docker system df
+echo ""
+echo "💡 Tip: Check container logs with: sudo du -sh /var/lib/docker/containers/*/*.log"
+echo "💡 Tip: Truncate logs with: sudo truncate -s 0 /var/lib/docker/containers/*/*.log"
+echo ""
+echo "Run 'docker compose up --build' to rebuild"

tsconfig.json

@@ -13,6 +13,7 @@
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
+    "resolveJsonModule": true,
     "noEmit": true,
     // Best practices
     "strict": true,

web/build.ts

@@ -135,6 +135,7 @@ const build = async () => {
     minify: true,
     target: "browser",
     sourcemap: "linked",
+    publicPath: "/", // Use absolute paths for SPA routing compatibility
     define: {
       "process.env.NODE_ENV": JSON.stringify((cliConfig as any).watch ? "development" : "production"),
     },
@@ -159,14 +160,86 @@ console.log(`\n✅ Build completed in ${buildTime}ms\n`);
 
 if ((cliConfig as any).watch) {
   console.log("👀 Watching for changes...\n");
-  // Keep the process alive for watch mode
-  // Bun.build with watch:true handles the watching, 
-  // we just need to make sure the script doesn't exit.
-  process.stdin.resume();
 
-  // Also, handle manual exit
+  // Polling-based file watcher for Docker compatibility
+  // Docker volumes don't propagate filesystem events (inotify) reliably
+  const srcDir = path.join(process.cwd(), "src");
+  const POLL_INTERVAL_MS = 1000;
+  let lastMtimes = new Map<string, number>();
+  let isRebuilding = false;
+
+  // Collect all file mtimes in src directory
+  const collectMtimes = async (): Promise<Map<string, number>> => {
+    const mtimes = new Map<string, number>();
+    const glob = new Bun.Glob("**/*.{ts,tsx,js,jsx,css,html}");
+    
+    for await (const file of glob.scan({ cwd: srcDir, absolute: true })) {
+      try {
+        const stat = await Bun.file(file).stat();
+        if (stat) {
+          mtimes.set(file, stat.mtime.getTime());
+        }
+      } catch {
+        // File may have been deleted, skip
+      }
+    }
+    return mtimes;
+  };
+
+  // Initial collection
+  lastMtimes = await collectMtimes();
+
+  // Polling loop
+  const poll = async () => {
+    if (isRebuilding) return;
+
+    const currentMtimes = await collectMtimes();
+    const changedFiles: string[] = [];
+
+    // Check for new or modified files
+    for (const [file, mtime] of currentMtimes) {
+      const lastMtime = lastMtimes.get(file);
+      if (lastMtime === undefined || lastMtime < mtime) {
+        changedFiles.push(path.relative(srcDir, file));
+      }
+    }
+
+    // Check for deleted files
+    for (const file of lastMtimes.keys()) {
+      if (!currentMtimes.has(file)) {
+        changedFiles.push(path.relative(srcDir, file) + " (deleted)");
+      }
+    }
+
+    if (changedFiles.length > 0) {
+      isRebuilding = true;
+      console.log(`\n🔄 Changes detected:`);
+      changedFiles.forEach(f => console.log(`   • ${f}`));
+      console.log("");
+
+      try {
+        const rebuildStart = performance.now();
+        await build();
+        const rebuildEnd = performance.now();
+        console.log(`\n✅ Rebuild completed in ${(rebuildEnd - rebuildStart).toFixed(2)}ms\n`);
+      } catch (err) {
+        console.error("❌ Rebuild failed:", err);
+      }
+
+      lastMtimes = currentMtimes;
+      isRebuilding = false;
+    }
+  };
+
+  const interval = setInterval(poll, POLL_INTERVAL_MS);
+
+  // Handle manual exit
   process.on("SIGINT", () => {
+    clearInterval(interval);
     console.log("\n👋 Stopping build watcher...");
     process.exit(0);
   });
+
+  // Keep process alive
+  process.stdin.resume();
 }

web/bun.lock

@@ -7,7 +7,9 @@
       "dependencies": {
         "@hookform/resolvers": "^5.2.2",
         "@radix-ui/react-accordion": "^1.2.12",
+        "@radix-ui/react-collapsible": "^1.1.12",
         "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-scroll-area": "^1.2.10",
         "@radix-ui/react-select": "^2.2.6",
@@ -20,6 +22,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.562.0",
+        "next-themes": "^0.4.6",
         "react": "^19",
         "react-dom": "^19",
         "react-hook-form": "^7.70.0",
@@ -93,6 +96,8 @@
 
     "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
 
+    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
+
     "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
@@ -101,6 +106,8 @@
 
     "@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
 
+    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
+
     "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
 
     "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
@@ -233,6 +240,8 @@
 
     "lucide-react": ["lucide-react@0.562.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw=="],
 
+    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
+
     "react": ["react@19.2.3", "", {}, "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA=="],
 
     "react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="],
@@ -295,6 +304,8 @@
 
     "@radix-ui/react-label/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
 
+    "@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],

web/package.json

@@ -11,7 +11,9 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
@@ -24,6 +26,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
+    "next-themes": "^0.4.6",
     "react": "^19",
     "react-dom": "^19",
     "react-hook-form": "^7.70.0",

web/src/App.tsx

@@ -1,21 +1,52 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import "./index.css";
-import { Dashboard } from "./pages/Dashboard";
+
 import { DesignSystem } from "./pages/DesignSystem";
+import { AdminQuests } from "./pages/AdminQuests";
+import { AdminOverview } from "./pages/admin/Overview";
+import { AdminItems } from "./pages/admin/Items";
+
 import { Home } from "./pages/Home";
 import { Toaster } from "sonner";
+import { NavigationProvider } from "./contexts/navigation-context";
+import { MainLayout } from "./components/layout/main-layout";
+
+import { SettingsLayout } from "./pages/settings/SettingsLayout";
+import { GeneralSettings } from "./pages/settings/General";
+import { EconomySettings } from "./pages/settings/Economy";
+import { SystemsSettings } from "./pages/settings/Systems";
+import { RolesSettings } from "./pages/settings/Roles";
 
 export function App() {
   return (
     <BrowserRouter>
+      <NavigationProvider>
         <Toaster richColors position="top-right" theme="dark" />
+        <MainLayout>
           <Routes>
-        <Route path="/dashboard" element={<Dashboard />} />
+
             <Route path="/design-system" element={<DesignSystem />} />
+            <Route path="/admin" element={<Navigate to="/admin/overview" replace />} />
+            <Route path="/admin/overview" element={<AdminOverview />} />
+            <Route path="/admin/quests" element={<AdminQuests />} />
+            <Route path="/admin/items" element={<AdminItems />} />
+
+            
+            <Route path="/settings" element={<SettingsLayout />}>
+              <Route index element={<Navigate to="/settings/general" replace />} />
+              <Route path="general" element={<GeneralSettings />} />
+              <Route path="economy" element={<EconomySettings />} />
+              <Route path="systems" element={<SystemsSettings />} />
+              <Route path="roles" element={<RolesSettings />} />
+            </Route>
+
             <Route path="/" element={<Home />} />
           </Routes>
+        </MainLayout>
+      </NavigationProvider>
     </BrowserRouter>
   );
 }
 
 export default App;
+

web/src/components/commands-drawer.tsx

@@ -51,7 +51,9 @@ export function CommandsDrawer({ open, onOpenChange }: CommandsDrawerProps) {
                 }
                 setEnabledState(state);
             }).catch(err => {
-                toast.error("Failed to load commands");
+                toast.error("Failed to load commands", {
+                    description: "Unable to fetch command list. Please try again."
+                });
                 console.error(err);
             }).finally(() => {
                 setLoading(false);
@@ -94,11 +96,14 @@ export function CommandsDrawer({ open, onOpenChange }: CommandsDrawerProps) {
 
             setEnabledState(prev => ({ ...prev, [commandName]: enabled }));
             toast.success(`/${commandName} ${enabled ? "enabled" : "disabled"}`, {
+                description: `Command has been ${enabled ? "enabled" : "disabled"} successfully.`,
                 duration: 2000,
-                id: "command-toggle", // Replace previous toast instead of stacking
+                id: "command-toggle",
             });
         } catch (error) {
-            toast.error("Failed to toggle command");
+            toast.error("Failed to toggle command", {
+                description: "Unable to update command status. Please try again."
+            });
             console.error(error);
         } finally {
             setSaving(null);

web/src/components/layout/app-sidebar.tsx

@@ -0,0 +1,220 @@
+import { Link } from "react-router-dom"
+import { ChevronRight } from "lucide-react"
+import {
+  Sidebar,
+  SidebarContent,
+
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarRail,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import { useNavigation, type NavItem } from "@/contexts/navigation-context"
+
+import { cn } from "@/lib/utils"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useSocket } from "@/hooks/use-socket"
+
+function NavItemWithSubMenu({ item }: { item: NavItem }) {
+  const { state } = useSidebar()
+  const isCollapsed = state === "collapsed"
+
+  // When collapsed, show a dropdown menu on hover/click
+  if (isCollapsed) {
+    return (
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              tooltip={item.title}
+              className={cn(
+                "transition-all duration-200 ease-in-out font-medium py-4 min-h-10",
+                item.isActive 
+                  ? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary" 
+                  : "text-muted-foreground hover:text-foreground hover:bg-white/5"
+              )}
+            >
+              <item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            side="right"
+            align="start"
+            sideOffset={8}
+            className="min-w-[180px] bg-background/95 backdrop-blur-xl border-border/50"
+          >
+            <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              {item.title}
+            </div>
+              {item.subItems?.map((subItem) => (
+              <DropdownMenuItem key={subItem.title} asChild className="group/dropitem">
+                <Link 
+                  to={subItem.url}
+                  className={cn(
+                    "cursor-pointer py-4 min-h-10 flex items-center gap-2",
+                    subItem.isActive 
+                      ? "text-primary bg-primary/10" 
+                      : "text-muted-foreground hover:text-inherit"
+                  )}
+                >
+                  <subItem.icon className={cn("size-4", subItem.isActive ? "text-primary" : "text-muted-foreground group-hover/dropitem:text-inherit")} />
+                  {subItem.title}
+                </Link>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    )
+  }
+
+  // When expanded, show collapsible sub-menu
+  return (
+    <Collapsible defaultOpen={item.isActive} className="group/collapsible">
+      <SidebarMenuItem className="flex flex-col">
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton
+              tooltip={item.title}
+              className={cn(
+                "transition-all duration-200 ease-in-out font-medium py-4 min-h-10",
+                item.isActive 
+                  ? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary" 
+                  : "text-muted-foreground hover:text-foreground hover:bg-white/5"
+              )}
+            >
+              <item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
+              <span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>
+                {item.title}
+              </span>
+              <ChevronRight className="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" />
+            </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+          <SidebarMenuSub>
+            {item.subItems?.map((subItem) => (
+              <SidebarMenuSubItem key={subItem.title}>
+                <SidebarMenuSubButton
+                  asChild
+                  isActive={subItem.isActive}
+                  className={cn(
+                    "transition-all duration-200 py-4 min-h-10 group/subitem",
+                    subItem.isActive 
+                      ? "text-primary bg-primary/10" 
+                      : "text-muted-foreground hover:text-inherit"
+                  )}
+                >
+                  <Link to={subItem.url}>
+                    <subItem.icon className={cn("size-4", subItem.isActive ? "text-primary" : "text-muted-foreground group-hover/subitem:text-inherit")} />
+                    <span>{subItem.title}</span>
+                  </Link>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  )
+}
+
+function NavItemLink({ item }: { item: NavItem }) {
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        asChild
+        isActive={item.isActive}
+        tooltip={item.title}
+        className={cn(
+          "transition-all duration-200 ease-in-out font-medium",
+          item.isActive 
+            ? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary" 
+            : "text-muted-foreground hover:text-foreground hover:bg-white/5"
+        )}
+      >
+        <Link to={item.url} className="flex items-center gap-3 py-4 min-h-10 group-data-[collapsible=icon]:justify-center">
+          <item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
+          <span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>{item.title}</span>
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  )
+}
+
+export function AppSidebar() {
+  const { navItems } = useNavigation()
+  const { stats } = useSocket()
+  
+  return (
+    <Sidebar collapsible="icon" className="border-r border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60">
+      <SidebarHeader className="pb-4 pt-4">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild className="hover:bg-primary/10 transition-colors">
+              <Link to="/">
+                {stats?.bot?.avatarUrl ? (
+                  <img 
+                    src={stats.bot.avatarUrl} 
+                    alt={stats.bot.name}
+                    className="size-10 rounded-full group-data-[collapsible=icon]:size-8 object-cover shadow-lg" 
+                  />
+                ) : (
+                  <div className="flex aspect-square size-10 items-center justify-center rounded-full bg-aurora sun-flare shadow-lg group-data-[collapsible=icon]:size-8">
+                    <span className="sr-only">Aurora</span>
+                  </div>
+                )}
+                <div className="grid flex-1 text-left text-sm leading-tight ml-2 group-data-[collapsible=icon]:hidden">
+                  <span className="truncate font-bold text-primary text-base">Aurora</span>
+                  <span className="truncate text-xs text-muted-foreground font-medium">
+                    {stats?.bot?.status || "Online"}
+                  </span>
+                </div>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent className="px-2 group-data-[collapsible=icon]:px-0">
+        <SidebarGroup>
+          <SidebarGroupLabel className="text-muted-foreground/70 uppercase tracking-wider text-xs font-bold mb-2 px-2 group-data-[collapsible=icon]:hidden">
+            Menu
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu className="gap-2 group-data-[collapsible=icon]:items-center">
+              {navItems.map((item) => (
+                item.subItems ? (
+                  <NavItemWithSubMenu key={item.title} item={item} />
+                ) : (
+                  <NavItemLink key={item.title} item={item} />
+                )
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+
+
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+

web/src/components/layout/main-layout.tsx

@@ -0,0 +1,56 @@
+import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "./app-sidebar"
+import { MobileNav } from "@/components/navigation/mobile-nav"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Separator } from "@/components/ui/separator"
+import { useNavigation } from "@/contexts/navigation-context"
+
+interface MainLayoutProps {
+  children: React.ReactNode
+}
+
+export function MainLayout({ children }: MainLayoutProps) {
+  const isMobile = useIsMobile()
+  const { breadcrumbs, currentTitle } = useNavigation()
+
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        {/* Header with breadcrumbs */}
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 transition-all duration-300 ease-in-out">
+          <div className="flex items-center gap-2 px-4 w-full">
+            <SidebarTrigger className="-ml-1 text-muted-foreground hover:text-primary transition-colors" />
+            <Separator orientation="vertical" className="mr-2 h-4 bg-border/50" />
+            <nav aria-label="Breadcrumb" className="flex items-center gap-1 text-sm bg-muted/30 px-3 py-1.5 rounded-full border border-border/30">
+              {breadcrumbs.length === 0 ? (
+                <span className="text-sm font-medium text-primary px-1">{currentTitle}</span>
+              ) : (
+                breadcrumbs.map((crumb, index) => (
+                  <span key={crumb.url} className="flex items-center gap-1">
+                    {index > 0 && (
+                      <span className="text-muted-foreground/50">/</span>
+                    )}
+                    {index === breadcrumbs.length - 1 ? (
+                      <span className="text-sm font-medium text-primary px-1">{crumb.title}</span>
+                    ) : (
+                      <span className="text-sm text-muted-foreground hover:text-foreground transition-colors px-1">{crumb.title}</span>
+                    )}
+                  </span>
+                ))
+              )}
+            </nav>
+          </div>
+        </header>
+
+        {/* Main content */}
+        <div className="flex-1 overflow-auto">
+          {children}
+        </div>
+
+        {/* Mobile bottom navigation */}
+        {isMobile && <MobileNav />}
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

web/src/components/navigation/mobile-nav.tsx

@@ -0,0 +1,41 @@
+import { Link } from "react-router-dom"
+import { useNavigation } from "@/contexts/navigation-context"
+import { cn } from "@/lib/utils"
+
+export function MobileNav() {
+  const { navItems } = useNavigation()
+
+  return (
+    <nav className="fixed bottom-4 left-4 right-4 z-50 rounded-2xl border border-border/40 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 md:hidden shadow-lg shadow-black/5">
+      <div className="flex h-16 items-center justify-around px-2">
+        {navItems.map((item) => (
+          <Link
+            key={item.title}
+            to={item.url}
+            className={cn(
+              "flex flex-col items-center justify-center gap-1 rounded-xl px-4 py-2 text-xs font-medium transition-all duration-200",
+              "min-w-[48px] min-h-[48px]",
+              item.isActive
+                ? "text-primary bg-primary/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]"
+                : "text-muted-foreground/80 hover:text-foreground hover:bg-white/5"
+            )}
+          >
+            <item.icon className={cn(
+              "size-5 transition-transform duration-200",
+              item.isActive && "scale-110 fill-primary/20"
+            )} />
+            <span className={cn(
+              "truncate max-w-[60px] text-[10px]",
+              item.isActive && "font-bold"
+            )}>
+              {item.title}
+            </span>
+            {item.isActive && (
+              <span className="absolute bottom-1 h-0.5 w-4 rounded-full bg-primary/50 blur-[1px]" />
+            )}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  )
+}

web/src/components/quest-form.tsx

@@ -0,0 +1,297 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./ui/card";
+import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "./ui/form";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import { Textarea } from "./ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { toast } from "sonner";
+import { ScrollArea } from "./ui/scroll-area";
+import { Star, Coins } from "lucide-react";
+
+interface QuestListItem {
+    id: number;
+    name: string;
+    description: string | null;
+    triggerEvent: string;
+    requirements: { target?: number };
+    rewards: { xp?: number; balance?: number };
+}
+
+const questSchema = z.object({
+    name: z.string().min(3, "Name must be at least 3 characters"),
+    description: z.string().optional(),
+    triggerEvent: z.string().min(1, "Trigger event is required"),
+    target: z.number().min(1, "Target must be at least 1"),
+    xpReward: z.number().min(0).optional(),
+    balanceReward: z.number().min(0).optional(),
+});
+
+type QuestFormValues = z.infer<typeof questSchema>;
+
+interface QuestFormProps {
+    initialData?: QuestListItem;
+    onUpdate?: () => void;
+    onCancel?: () => void;
+}
+
+const TRIGGER_EVENTS = [
+    { label: "XP Gain", value: "XP_GAIN" },
+    { label: "Item Collect", value: "ITEM_COLLECT" },
+    { label: "Item Use", value: "ITEM_USE" },
+    { label: "Daily Reward", value: "DAILY_REWARD" },
+    { label: "Lootbox Currency Reward", value: "LOOTBOX" },
+    { label: "Exam Reward", value: "EXAM_REWARD" },
+    { label: "Purchase", value: "PURCHASE" },
+    { label: "Transfer In", value: "TRANSFER_IN" },
+    { label: "Transfer Out", value: "TRANSFER_OUT" },
+    { label: "Trade In", value: "TRADE_IN" },
+    { label: "Trade Out", value: "TRADE_OUT" },
+    { label: "Quest Reward", value: "QUEST_REWARD" },
+    { label: "Trivia Entry", value: "TRIVIA_ENTRY" },
+    { label: "Trivia Win", value: "TRIVIA_WIN" },
+];
+
+export function QuestForm({ initialData, onUpdate, onCancel }: QuestFormProps) {
+    const isEditMode = initialData !== undefined;
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const form = useForm<QuestFormValues>({
+        resolver: zodResolver(questSchema),
+        defaultValues: {
+            name: initialData?.name || "",
+            description: initialData?.description || "",
+            triggerEvent: initialData?.triggerEvent || "XP_GAIN",
+            target: (initialData?.requirements as { target?: number })?.target || 1,
+            xpReward: (initialData?.rewards as { xp?: number })?.xp || 100,
+            balanceReward: (initialData?.rewards as { balance?: number })?.balance || 500,
+        },
+    });
+
+    React.useEffect(() => {
+        if (initialData) {
+            form.reset({
+                name: initialData.name || "",
+                description: initialData.description || "",
+                triggerEvent: initialData.triggerEvent || "XP_GAIN",
+                target: (initialData.requirements as { target?: number })?.target || 1,
+                xpReward: (initialData.rewards as { xp?: number })?.xp || 100,
+                balanceReward: (initialData.rewards as { balance?: number })?.balance || 500,
+            });
+        }
+    }, [initialData, form]);
+
+    const onSubmit = async (data: QuestFormValues) => {
+        setIsSubmitting(true);
+        try {
+            const url = isEditMode ? `/api/quests/${initialData.id}` : "/api/quests";
+            const method = isEditMode ? "PUT" : "POST";
+
+            const response = await fetch(url, {
+                method: method,
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(data),
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || (isEditMode ? "Failed to update quest" : "Failed to create quest"));
+            }
+
+            toast.success(isEditMode ? "Quest updated successfully!" : "Quest created successfully!", {
+                description: `${data.name} has been ${isEditMode ? "updated" : "added to the database"}.`,
+            });
+            form.reset({
+                name: "",
+                description: "",
+                triggerEvent: "XP_GAIN",
+                target: 1,
+                xpReward: 100,
+                balanceReward: 500,
+            });
+            onUpdate?.();
+        } catch (error) {
+            console.error("Submission error:", error);
+            toast.error(isEditMode ? "Failed to update quest" : "Failed to create quest", {
+                description: error instanceof Error ? error.message : "An unknown error occurred",
+            });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <Card className="glass-card overflow-hidden">
+            <div className="h-1.5 bg-primary w-full" />
+            <CardHeader>
+                <CardTitle className="text-2xl font-bold text-primary">{isEditMode ? "Edit Quest" : "Create New Quest"}</CardTitle>
+                <CardDescription>
+                    {isEditMode ? "Update the quest configuration." : "Configure a new quest for the Aurora RPG academy."}
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <FormField
+                                control={form.control}
+                                name="name"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Quest Name</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Collector's Journey" {...field} className="bg-background/50" />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="triggerEvent"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Trigger Event</FormLabel>
+                                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                            <FormControl>
+                                                <SelectTrigger className="bg-background/50">
+                                                    <SelectValue placeholder="Select an event" />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent className="glass-card border-border/50">
+                                                <ScrollArea className="h-48">
+                                                    {TRIGGER_EVENTS.map((event) => (
+                                                        <SelectItem key={event.value} value={event.value}>
+                                                            {event.label}
+                                                        </SelectItem>
+                                                    ))}
+                                                </ScrollArea>
+                                            </SelectContent>
+                                        </Select>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <FormField
+                            control={form.control}
+                            name="description"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Description</FormLabel>
+                                    <FormControl>
+                                        <Textarea 
+                                            placeholder="Assigns a task to the student..." 
+                                            {...field} 
+                                            className="min-h-[100px] bg-background/50"
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <FormField
+                                control={form.control}
+                                name="target"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Target Value</FormLabel>
+                                        <FormControl>
+                                            <Input 
+                                                type="number" 
+                                                {...field} 
+                                                onChange={e => field.onChange(parseInt(e.target.value))}
+                                                className="bg-background/50"
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="xpReward"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel className="flex items-center gap-2">
+                                            <Star className="w-4 h-4 text-amber-400" />
+                                            XP Reward
+                                        </FormLabel>
+                                        <FormControl>
+                                            <Input 
+                                                type="number" 
+                                                {...field} 
+                                                onChange={e => field.onChange(parseInt(e.target.value))}
+                                                className="bg-background/50"
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="balanceReward"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel className="flex items-center gap-2">
+                                            <Coins className="w-4 h-4 text-amber-500" />
+                                            AU Reward
+                                        </FormLabel>
+                                        <FormControl>
+                                            <Input 
+                                                type="number" 
+                                                {...field} 
+                                                onChange={e => field.onChange(parseInt(e.target.value))}
+                                                className="bg-background/50"
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        {isEditMode ? (
+                            <div className="flex gap-4">
+                                <Button
+                                    type="submit"
+                                    disabled={isSubmitting}
+                                    className="flex-1 bg-primary text-primary-foreground hover:glow-primary active-press py-6 text-lg font-bold"
+                                >
+                                    {isSubmitting ? "Updating..." : "Update Quest"}
+                                </Button>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    onClick={onCancel}
+                                    className="flex-1 py-6 text-lg font-bold"
+                                >
+                                    Cancel
+                                </Button>
+                            </div>
+                        ) : (
+                            <Button
+                                type="submit"
+                                disabled={isSubmitting}
+                                className="w-full bg-primary text-primary-foreground hover:glow-primary active-press py-6 text-lg font-bold"
+                            >
+                                {isSubmitting ? "Creating..." : "Create Quest"}
+                            </Button>
+                        )}
+                    </form>
+                </Form>
+            </CardContent>
+        </Card>
+    );
+}

web/src/components/quest-table.tsx

@@ -0,0 +1,288 @@
+import React from "react";
+import { toast } from "sonner";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Badge } from "./ui/badge";
+import { Skeleton } from "./ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
+import { cn } from "../lib/utils";
+import { FileText, RefreshCw, Trash2, Pencil, Star, Coins } from "lucide-react";
+
+interface QuestListItem {
+    id: number;
+    name: string;
+    description: string | null;
+    triggerEvent: string;
+    requirements: { target?: number };
+    rewards: { xp?: number; balance?: number };
+}
+
+interface QuestTableProps {
+    quests: QuestListItem[];
+    isInitialLoading: boolean;
+    isRefreshing: boolean;
+    onRefresh?: () => void;
+    onDelete?: (id: number) => void;
+    onEdit?: (id: number) => void;
+}
+
+const TRIGGER_EVENT_LABELS: Record<string, string> = {
+    XP_GAIN: "XP Gain",
+    ITEM_COLLECT: "Item Collect",
+    ITEM_USE: "Item Use",
+    DAILY_REWARD: "Daily Reward",
+    LOOTBOX: "Lootbox Currency Reward",
+    EXAM_REWARD: "Exam Reward",
+    PURCHASE: "Purchase",
+    TRANSFER_IN: "Transfer In",
+    TRANSFER_OUT: "Transfer Out",
+    TRADE_IN: "Trade In",
+    TRADE_OUT: "Trade Out",
+    QUEST_REWARD: "Quest Reward",
+    TRIVIA_ENTRY: "Trivia Entry",
+    TRIVIA_WIN: "Trivia Win",
+};
+
+function getTriggerEventLabel(triggerEvent: string): string {
+    return TRIGGER_EVENT_LABELS[triggerEvent] || triggerEvent;
+}
+
+function TruncatedText({ text, maxLength = 100 }: { text: string; maxLength?: number }) {
+    if (!text || text.length <= maxLength) {
+        return <span>{text || "-"}</span>;
+    }
+
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <span className="cursor-help border-b border-dashed border-muted-foreground/50">
+                        {text.slice(0, maxLength)}...
+                    </span>
+                </TooltipTrigger>
+                <TooltipContent className="max-w-md">
+                    <p>{text}</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+}
+
+function QuestTableSkeleton() {
+    return (
+        <div className="space-y-3 animate-pulse">
+            <div className="grid grid-cols-8 gap-4 px-4 py-2 text-sm font-medium text-muted-foreground">
+                <Skeleton className="h-4 w-8" />
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-4 w-48" />
+                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-4 w-24" />
+            </div>
+            {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} className="grid grid-cols-8 gap-4 px-4 py-3 border-t border-border/50">
+                    <Skeleton className="h-5 w-8" />
+                    <Skeleton className="h-5 w-32" />
+                    <Skeleton className="h-5 w-48" />
+                    <Skeleton className="h-5 w-24" />
+                    <Skeleton className="h-5 w-16" />
+                    <Skeleton className="h-5 w-24" />
+                    <Skeleton className="h-5 w-24" />
+                    <Skeleton className="h-5 w-16" />
+                </div>
+            ))}
+        </div>
+    );
+}
+
+function EmptyQuestState() {
+    return (
+        <div className="flex flex-col items-center justify-center py-12 text-center animate-in fade-in duration-500">
+            <div className="rounded-full bg-muted/50 p-4 mb-4">
+                <FileText className="w-8 h-8 text-muted-foreground" />
+            </div>
+            <h3 className="text-lg font-semibold text-foreground">No quests available</h3>
+            <p className="text-muted-foreground mt-1 max-w-sm">
+                There are no quests in the database yet. Create your first quest using the form below.
+            </p>
+        </div>
+    );
+}
+
+function QuestTableContent({ quests, onDelete, onEdit }: { quests: QuestListItem[]; onDelete?: (id: number) => void; onEdit?: (id: number) => void }) {
+    if (quests.length === 0) {
+        return <EmptyQuestState />;
+    }
+
+    return (
+        <div className="overflow-x-auto animate-in fade-in slide-in-from-bottom-2 duration-300">
+            <table className="w-full">
+                <thead>
+                    <tr className="border-b border-border/50">
+                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-16">
+                            ID
+                        </th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-40">
+                            Name
+                        </th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-64">
+                            Description
+                        </th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-36">
+                            Trigger Event
+                        </th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-20">
+                            Target
+                        </th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-32">
+                            XP Reward
+                        </th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-32">
+                            AU Reward
+                        </th>
+                        <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground w-24">
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {quests.map((quest) => {
+                        const requirements = quest.requirements as { target?: number };
+                        const rewards = quest.rewards as { xp?: number; balance?: number };
+                        const target = requirements?.target || 1;
+
+                        return (
+                            <tr
+                                key={quest.id}
+                                id={`quest-row-${quest.id}`}
+                                className="border-b border-border/30 hover:bg-muted/20 transition-colors animate-in fade-in slide-in-from-left-2 duration-300"
+                            >
+                                <td className="py-3 px-4 text-sm text-muted-foreground font-mono">
+                                    #{quest.id}
+                                </td>
+                                <td className="py-3 px-4 text-sm font-medium text-foreground">
+                                    {quest.name}
+                                </td>
+                                <td className="py-3 px-4 text-sm text-muted-foreground">
+                                    <TruncatedText text={quest.description || ""} maxLength={50} />
+                                </td>
+                                <td className="py-3 px-4">
+                                    <Badge variant="outline" className="text-xs border-border/50">
+                                        {getTriggerEventLabel(quest.triggerEvent)}
+                                    </Badge>
+                                </td>
+                                <td className="py-3 px-4 text-sm text-foreground font-mono">
+                                    {target}
+                                </td>
+                                <td className="py-3 px-4 text-sm text-foreground">
+                                    {rewards?.xp ? (
+                                        <span className="flex items-center gap-1">
+                                            <Star className="w-4 h-4 text-amber-400" />
+                                            <span className="font-mono">{rewards.xp}</span>
+                                        </span>
+                                    ) : (
+                                        <span className="text-muted-foreground">-</span>
+                                    )}
+                                </td>
+                                <td className="py-3 px-4 text-sm text-foreground">
+                                    {rewards?.balance ? (
+                                        <span className="flex items-center gap-1">
+                                            <Coins className="w-4 h-4 text-amber-500" />
+                                            <span className="font-mono">{rewards.balance}</span>
+                                        </span>
+                                    ) : (
+                                        <span className="text-muted-foreground">-</span>
+                                    )}
+                                </td>
+                                <td className="py-3 px-4">
+                                    <div className="flex items-center gap-1">
+                                        <button
+                                            onClick={() => onEdit?.(quest.id)}
+                                            className="p-1.5 rounded-md hover:bg-muted/50 transition-colors text-muted-foreground hover:text-foreground"
+                                            title="Edit quest"
+                                        >
+                                            <Pencil className="w-4 h-4" />
+                                        </button>
+                                        <button
+                                            onClick={() => {
+                                                toast("Delete this quest?", {
+                                                    description: "This action cannot be undone.",
+                                                    action: {
+                                                        label: "Delete",
+                                                        onClick: () => onDelete?.(quest.id)
+                                                    },
+                                                    cancel: {
+                                                        label: "Cancel",
+                                                        onClick: () => {}
+                                                    },
+                                                    style: {
+                                                        background: "var(--destructive)",
+                                                        color: "var(--destructive-foreground)"
+                                                    },
+                                                    actionButtonStyle: {
+                                                        background: "var(--destructive)",
+                                                        color: "var(--destructive-foreground)"
+                                                    }
+                                                });
+                                            }}
+                                            className="p-1.5 rounded-md hover:bg-muted/50 transition-colors text-muted-foreground hover:text-destructive"
+                                            title="Delete quest"
+                                        >
+                                            <Trash2 className="w-4 h-4" />
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                        );
+                    })}
+                </tbody>
+            </table>
+        </div>
+    );
+}
+
+export function QuestTable({ quests, isInitialLoading, isRefreshing, onRefresh, onDelete, onEdit }: QuestTableProps) {
+    const showSkeleton = isInitialLoading && quests.length === 0;
+
+    return (
+        <Card className="glass-card overflow-hidden">
+            <CardHeader className="pb-3">
+                <div className="flex items-center justify-between">
+                    <CardTitle className="text-xl font-bold text-primary">Quest Inventory</CardTitle>
+                    <div className="flex items-center gap-3">
+                        {showSkeleton ? (
+                            <Badge variant="secondary" className="animate-pulse">
+                                Loading...
+                            </Badge>
+                        ) : (
+                            <Badge variant="outline" className="border-border/50">
+                                {quests.length} quest{quests.length !== 1 ? "s" : ""}
+                            </Badge>
+                        )}
+                        <button
+                            onClick={onRefresh}
+                            disabled={isRefreshing}
+                            className={cn(
+                                "p-2 rounded-md hover:bg-muted/50 transition-colors",
+                                isRefreshing && "cursor-wait"
+                            )}
+                            title="Refresh quests"
+                        >
+                            <RefreshCw className={cn(
+                                "w-[18px] h-[18px] text-muted-foreground transition-transform",
+                                isRefreshing && "animate-spin"
+                            )} />
+                        </button>
+                    </div>
+                </div>
+            </CardHeader>
+            <CardContent>
+                {showSkeleton ? (
+                    <QuestTableSkeleton />
+                ) : (
+                    <QuestTableContent quests={quests} onDelete={onDelete} onEdit={onEdit} />
+                )}
+            </CardContent>
+        </Card>
+    );
+}

web/src/components/stat-card.tsx

@@ -46,12 +46,14 @@ export function StatCard({
                             Manage <ChevronRight className="w-3 h-3" />
                         </span>
                     )}
+                    <div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center ring-1 ring-primary/20">
                         <Icon className={cn(
-                        "h-4 w-4 transition-all duration-300",
-                        onClick && "group-hover:text-primary group-hover:scale-110",
-                        iconClassName || "text-muted-foreground"
+                            "h-4 w-4 transition-all duration-300 text-primary",
+                            onClick && "group-hover:scale-110",
+                            iconClassName
                         )} />
                     </div>
+                </div>
             </CardHeader>
             <CardContent>
                 {isLoading ? (

web/src/components/ui/badge.tsx

@@ -8,14 +8,14 @@ const badgeVariants = cva(
         variants: {
             variant: {
                 default:
-                    "border-transparent bg-primary text-primary-foreground hover:opacity-90",
+                    "border-transparent bg-primary text-primary-foreground hover:opacity-90 hover-scale shadow-sm",
                 secondary:
-                    "border-transparent bg-secondary text-secondary-foreground hover:opacity-80",
+                    "border-transparent bg-secondary text-secondary-foreground hover:opacity-80 hover-scale",
                 destructive:
-                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-                outline: "text-foreground border-border hover:bg-accent hover:text-accent-foreground",
-                aurora: "border-transparent bg-aurora text-primary-foreground shadow-sm",
-                glass: "glass-card border-border/50 text-foreground",
+                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 hover-scale",
+                outline: "text-foreground border-border hover:bg-accent hover:text-accent-foreground transition-colors",
+                aurora: "border-transparent bg-aurora text-primary-foreground shadow-sm hover-scale",
+                glass: "glass-card border-border/50 text-foreground hover:bg-accent/50 backdrop-blur-md",
             },
         },
         defaultVariants: {

web/src/components/ui/button.tsx

@@ -9,18 +9,18 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 hover-glow active-press shadow-md",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active-press shadow-sm",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active-press",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 active-press shadow-sm",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active-press",
         link: "text-primary underline-offset-4 hover:underline",
-        aurora: "bg-aurora text-primary-foreground shadow-sm hover:opacity-90",
-        glass: "glass-card border-border/50 text-foreground hover:bg-accent/50",
+        aurora: "bg-aurora text-primary-foreground shadow-sm hover:opacity-90 hover-glow active-press",
+        glass: "glass-card border-border/50 text-foreground hover:bg-accent/50 hover-lift active-press",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",

web/src/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-lg border py-6 shadow-sm",
+        "glass-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-all",
         className
       )}
       {...props}

web/src/components/ui/collapsible.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

web/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

web/src/components/ui/input.tsx

@@ -8,8 +8,8 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/20 border-input/50 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base text-foreground shadow-xs transition-all outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm backdrop-blur-sm",
+        "focus-visible:border-primary/50 focus-visible:bg-input/40 focus-visible:ring-2 focus-visible:ring-primary/20",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}

web/src/components/ui/sidebar.tsx

@@ -29,7 +29,7 @@ const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_WIDTH_ICON = "64px"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 type SidebarContextProps = {
@@ -309,7 +309,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
+        "bg-aurora-page text-foreground font-outfit overflow-x-hidden relative flex w-full flex-1 flex-col",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
@@ -387,7 +387,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      className={cn("relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center", className)}
       {...props}
     />
   )
@@ -467,14 +467,14 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
+      className={cn("group/menu-item relative flex group-data-[collapsible=icon]:justify-center", className)}
       {...props}
     />
   )
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -686,8 +686,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        "ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
         "group-data-[collapsible=icon]:hidden",

web/src/components/ui/sonner.tsx

@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

web/src/contexts/navigation-context.tsx

@@ -0,0 +1,147 @@
+import * as React from "react"
+import { useLocation, type Location } from "react-router-dom"
+import { Home, Palette, ShieldCheck, Settings, LayoutDashboard, Trophy, SlidersHorizontal, Coins, Cog, UserCog, Package, type LucideIcon } from "lucide-react"
+
+export interface NavSubItem {
+  title: string
+  url: string
+  icon: LucideIcon
+  isActive?: boolean
+}
+
+export interface NavItem {
+  title: string
+  url: string
+  icon: LucideIcon
+  isActive?: boolean
+  subItems?: NavSubItem[]
+}
+
+export interface Breadcrumb {
+  title: string
+  url: string
+}
+
+interface NavigationContextProps {
+  navItems: NavItem[]
+  breadcrumbs: Breadcrumb[]
+  currentPath: string
+  currentTitle: string
+}
+
+const NavigationContext = React.createContext<NavigationContextProps | null>(null)
+
+interface NavConfigItem extends Omit<NavItem, "isActive" | "subItems"> {
+  subItems?: Omit<NavSubItem, "isActive">[]
+}
+
+const NAV_CONFIG: NavConfigItem[] = [
+  { title: "Home", url: "/", icon: Home },
+
+  { title: "Design System", url: "/design-system", icon: Palette },
+  { 
+    title: "Admin", 
+    url: "/admin", 
+    icon: ShieldCheck,
+    subItems: [
+      { title: "Overview", url: "/admin/overview", icon: LayoutDashboard },
+      { title: "Quests", url: "/admin/quests", icon: Trophy },
+      { title: "Items", url: "/admin/items", icon: Package },
+    ]
+  },
+  {
+    title: "Settings",
+    url: "/settings",
+    icon: Settings,
+    subItems: [
+      { title: "General", url: "/settings/general", icon: SlidersHorizontal },
+      { title: "Economy", url: "/settings/economy", icon: Coins },
+      { title: "Systems", url: "/settings/systems", icon: Cog },
+      { title: "Roles", url: "/settings/roles", icon: UserCog },
+    ]
+  },
+]
+
+function generateBreadcrumbs(location: Location): Breadcrumb[] {
+  const pathParts = location.pathname.split("/").filter(Boolean)
+  const breadcrumbs: Breadcrumb[] = []
+
+  let currentPath = ""
+  for (const part of pathParts) {
+    currentPath += `/${part}`
+    // Capitalize and clean up the part for display
+    const title = part
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ")
+    breadcrumbs.push({ title, url: currentPath })
+  }
+
+  return breadcrumbs
+}
+
+function getPageTitle(pathname: string): string {
+  // Check top-level items first
+  for (const item of NAV_CONFIG) {
+    if (item.url === pathname) return item.title
+    // Check sub-items
+    if (item.subItems) {
+      const subItem = item.subItems.find((sub) => sub.url === pathname)
+      if (subItem) return subItem.title
+    }
+  }
+
+  // Handle nested routes
+  const parts = pathname.split("/").filter(Boolean)
+  const lastPart = parts[parts.length - 1]
+  if (lastPart) {
+    return lastPart
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ")
+  }
+
+  return "Aurora"
+}
+
+export function NavigationProvider({ children }: { children: React.ReactNode }) {
+  const location = useLocation()
+
+  const value = React.useMemo<NavigationContextProps>(() => {
+    const navItems = NAV_CONFIG.map((item) => {
+      const isParentActive = item.subItems 
+        ? location.pathname.startsWith(item.url)
+        : location.pathname === item.url
+      
+      return {
+        ...item,
+        isActive: isParentActive,
+        subItems: item.subItems?.map((subItem) => ({
+          ...subItem,
+          isActive: location.pathname === subItem.url,
+        })),
+      }
+    })
+
+    return {
+      navItems,
+      breadcrumbs: generateBreadcrumbs(location),
+      currentPath: location.pathname,
+      currentTitle: getPageTitle(location.pathname),
+    }
+  }, [location.pathname])
+
+  return (
+    <NavigationContext.Provider value={value}>
+      {children}
+    </NavigationContext.Provider>
+  )
+}
+
+export function useNavigation() {
+  const context = React.useContext(NavigationContext)
+  if (!context) {
+    throw new Error("useNavigation must be used within a NavigationProvider")
+  }
+  return context
+}

web/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

web/src/hooks/use-settings.ts

@@ -0,0 +1,187 @@
+import { useEffect, useState, useCallback } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { toast } from "sonner";
+
+// Sentinel value for "none" selection
+export const NONE_VALUE = "__none__";
+
+// Schema definition matching backend config
+const bigIntStringSchema = z.coerce.string()
+    .refine((val) => /^\d+$/.test(val), { message: "Must be a valid integer" });
+
+export const formSchema = z.object({
+    leveling: z.object({
+        base: z.number(),
+        exponent: z.number(),
+        chat: z.object({
+            cooldownMs: z.number(),
+            minXp: z.number(),
+            maxXp: z.number(),
+        })
+    }),
+    economy: z.object({
+        daily: z.object({
+            amount: bigIntStringSchema,
+            streakBonus: bigIntStringSchema,
+            weeklyBonus: bigIntStringSchema,
+            cooldownMs: z.number(),
+        }),
+        transfers: z.object({
+            allowSelfTransfer: z.boolean(),
+            minAmount: bigIntStringSchema,
+        }),
+        exam: z.object({
+            multMin: z.number(),
+            multMax: z.number(),
+        })
+    }),
+    inventory: z.object({
+        maxStackSize: bigIntStringSchema,
+        maxSlots: z.number(),
+    }),
+    commands: z.record(z.string(), z.boolean()).optional(),
+    lootdrop: z.object({
+        activityWindowMs: z.number(),
+        minMessages: z.number(),
+        spawnChance: z.number(),
+        cooldownMs: z.number(),
+        reward: z.object({
+            min: z.number(),
+            max: z.number(),
+            currency: z.string(),
+        })
+    }),
+    studentRole: z.string().optional(),
+    visitorRole: z.string().optional(),
+    colorRoles: z.array(z.string()).default([]),
+    welcomeChannelId: z.string().optional(),
+    welcomeMessage: z.string().optional(),
+    feedbackChannelId: z.string().optional(),
+    terminal: z.object({
+        channelId: z.string(),
+        messageId: z.string()
+    }).optional(),
+    moderation: z.object({
+        prune: z.object({
+            maxAmount: z.number(),
+            confirmThreshold: z.number(),
+            batchSize: z.number(),
+            batchDelayMs: z.number(),
+        }),
+        cases: z.object({
+            dmOnWarn: z.boolean(),
+            logChannelId: z.string().optional(),
+            autoTimeoutThreshold: z.number().optional()
+        })
+    }),
+    trivia: z.object({
+        entryFee: bigIntStringSchema,
+        rewardMultiplier: z.number(),
+        timeoutSeconds: z.number(),
+        cooldownMs: z.number(),
+        categories: z.array(z.number()).default([]),
+        difficulty: z.enum(['easy', 'medium', 'hard', 'random']),
+    }).optional(),
+    system: z.record(z.string(), z.any()).optional(),
+});
+
+export type FormValues = z.infer<typeof formSchema>;
+
+export interface ConfigMeta {
+    roles: { id: string, name: string, color: string }[];
+    channels: { id: string, name: string, type: number }[];
+    commands: { name: string, category: string }[];
+}
+
+export const toSelectValue = (v: string | undefined | null) => v || NONE_VALUE;
+export const fromSelectValue = (v: string) => v === NONE_VALUE ? "" : v;
+
+export function useSettings() {
+    const [meta, setMeta] = useState<ConfigMeta | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema) as any,
+        defaultValues: {
+            economy: {
+                daily: { amount: "0", streakBonus: "0", weeklyBonus: "0", cooldownMs: 0 },
+                transfers: { minAmount: "0", allowSelfTransfer: false },
+                exam: { multMin: 1, multMax: 1 }
+            },
+            leveling: { base: 100, exponent: 1.5, chat: { minXp: 10, maxXp: 20, cooldownMs: 60000 } },
+            inventory: { maxStackSize: "1", maxSlots: 10 },
+            moderation: {
+                prune: { maxAmount: 100, confirmThreshold: 50, batchSize: 100, batchDelayMs: 1000 },
+                cases: { dmOnWarn: true }
+            },
+            lootdrop: {
+                spawnChance: 0.05,
+                minMessages: 10,
+                cooldownMs: 300000,
+                activityWindowMs: 600000,
+                reward: { min: 100, max: 500, currency: "AU" }
+            }
+        }
+    });
+
+    const loadSettings = useCallback(async () => {
+        setLoading(true);
+        try {
+            const [config, metaData] = await Promise.all([
+                fetch("/api/settings").then(res => res.json()),
+                fetch("/api/settings/meta").then(res => res.json())
+            ]);
+            form.reset(config as any);
+            setMeta(metaData);
+        } catch (err) {
+            toast.error("Failed to load settings", {
+                description: "Unable to fetch bot configuration. Please try again."
+            });
+            console.error(err);
+        } finally {
+            setLoading(false);
+        }
+    }, [form]);
+
+    useEffect(() => {
+        loadSettings();
+    }, [loadSettings]);
+
+    const saveSettings = async (data: FormValues) => {
+        setIsSaving(true);
+        try {
+            const response = await fetch("/api/settings", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(data)
+            });
+
+            if (!response.ok) throw new Error("Failed to save");
+
+            toast.success("Settings saved successfully", {
+                description: "Bot configuration has been updated and reloaded."
+            });
+            // Reload settings to ensure we have the latest state
+            await loadSettings();
+        } catch (error) {
+            toast.error("Failed to save settings", {
+                description: error instanceof Error ? error.message : "Unable to save changes. Please try again."
+            });
+            console.error(error);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return {
+        form,
+        meta,
+        loading,
+        isSaving,
+        saveSettings,
+        loadSettings
+    };
+}

web/src/pages/AdminQuests.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+import { QuestForm } from "../components/quest-form";
+import { QuestTable } from "../components/quest-table";
+import { SectionHeader } from "../components/section-header";
+import { toast } from "sonner";
+
+interface QuestListItem {
+    id: number;
+    name: string;
+    description: string | null;
+    triggerEvent: string;
+    requirements: { target?: number };
+    rewards: { xp?: number; balance?: number };
+}
+
+export function AdminQuests() {
+    const [quests, setQuests] = React.useState<QuestListItem[]>([]);
+    const [isInitialLoading, setIsInitialLoading] = React.useState(true);
+    const [isRefreshing, setIsRefreshing] = React.useState(false);
+    const [lastCreatedQuestId, setLastCreatedQuestId] = React.useState<number | null>(null);
+    const [editingQuest, setEditingQuest] = React.useState<QuestListItem | null>(null);
+    const [isFormModeEdit, setIsFormModeEdit] = React.useState(false);
+    const formRef = React.useRef<HTMLDivElement>(null);
+
+    const fetchQuests = React.useCallback(async (isRefresh = false) => {
+        if (isRefresh) {
+            setIsRefreshing(true);
+        } else {
+            setIsInitialLoading(true);
+        }
+        try {
+            const response = await fetch("/api/quests");
+            if (!response.ok) {
+                throw new Error("Failed to fetch quests");
+            }
+            const data = await response.json();
+            if (data.success && Array.isArray(data.data)) {
+                setQuests(data.data);
+            }
+        } catch (error) {
+            console.error("Error fetching quests:", error);
+            toast.error("Failed to load quests", {
+                description: error instanceof Error ? error.message : "Unknown error",
+            });
+        } finally {
+            setIsInitialLoading(false);
+            setIsRefreshing(false);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        fetchQuests(false);
+    }, [fetchQuests]);
+
+    React.useEffect(() => {
+        if (lastCreatedQuestId !== null) {
+            const element = document.getElementById(`quest-row-${lastCreatedQuestId}`);
+            if (element) {
+                element.scrollIntoView({ behavior: "smooth", block: "center" });
+                element.classList.add("bg-primary/10");
+                setTimeout(() => {
+                    element.classList.remove("bg-primary/10");
+                }, 2000);
+            }
+            setLastCreatedQuestId(null);
+        }
+    }, [lastCreatedQuestId, quests]);
+
+    const handleQuestCreated = () => {
+        fetchQuests(true);
+        toast.success("Quest list updated", {
+            description: "The quest inventory has been refreshed.",
+        });
+    };
+
+    const handleDeleteQuest = async (id: number) => {
+        try {
+            const response = await fetch(`/api/quests/${id}`, {
+                method: "DELETE",
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.message || "Failed to delete quest");
+            }
+
+            setQuests((prev) => prev.filter((q) => q.id !== id));
+            toast.success("Quest deleted", {
+                description: `Quest #${id} has been successfully deleted.`,
+            });
+        } catch (error) {
+            console.error("Error deleting quest:", error);
+            toast.error("Failed to delete quest", {
+                description: error instanceof Error ? error.message : "Unknown error",
+            });
+        }
+    };
+
+    const handleEditQuest = (id: number) => {
+        const quest = quests.find(q => q.id === id);
+        if (quest) {
+            setEditingQuest(quest);
+            setIsFormModeEdit(true);
+            formRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+    };
+
+    const handleQuestUpdated = () => {
+        fetchQuests(true);
+        setEditingQuest(null);
+        setIsFormModeEdit(false);
+        toast.success("Quest list updated", {
+            description: "The quest inventory has been refreshed.",
+        });
+    };
+
+    const handleFormCancel = () => {
+        setEditingQuest(null);
+        setIsFormModeEdit(false);
+    };
+
+    return (
+        <main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-12">
+            <SectionHeader
+                badge="Quest Management"
+                title="Quests"
+                description="Create and manage quests for the Aurora RPG students."
+            />
+
+            <div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
+                <QuestTable
+                    quests={quests}
+                    isInitialLoading={isInitialLoading}
+                    isRefreshing={isRefreshing}
+                    onRefresh={() => fetchQuests(true)}
+                    onDelete={handleDeleteQuest}
+                    onEdit={handleEditQuest}
+                />
+            </div>
+
+            <div className="animate-in fade-in slide-up duration-700" ref={formRef}>
+                <QuestForm
+                    initialData={editingQuest || undefined}
+                    onUpdate={handleQuestUpdated}
+                    onCancel={handleFormCancel}
+                />
+            </div>
+        </main>
+    );
+}
+
+export default AdminQuests;

web/src/pages/Dashboard.tsx

@@ -1,201 +0,0 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { useSocket } from "../hooks/use-socket";
-import { Badge } from "../components/ui/badge";
-import { StatCard } from "../components/stat-card";
-import { RecentActivity } from "../components/recent-activity";
-import { ActivityChart } from "../components/activity-chart";
-import { LootdropCard } from "../components/lootdrop-card";
-import { LeaderboardCard } from "../components/leaderboard-card";
-import { CommandsDrawer } from "../components/commands-drawer";
-import { Server, Users, Terminal, Activity, Coins, TrendingUp, Flame, Package } from "lucide-react";
-import { cn } from "../lib/utils";
-import { SettingsDrawer } from "../components/settings-drawer";
-
-export function Dashboard() {
-    const { isConnected, stats } = useSocket();
-    const [commandsDrawerOpen, setCommandsDrawerOpen] = useState(false);
-
-    return (
-        <div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
-            {/* Navigation */}
-            <nav className="sticky top-0 z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
-                <div className="flex items-center gap-3">
-                    {/* Bot Avatar */}
-                    {stats?.bot?.avatarUrl ? (
-                        <img
-                            src={stats.bot.avatarUrl}
-                            alt="Aurora Avatar"
-                            className="w-8 h-8 rounded-full border border-primary/20 shadow-sm object-cover"
-                        />
-                    ) : (
-                        <div className="w-8 h-8 rounded-full bg-aurora sun-flare shadow-sm" />
-                    )}
-
-                    <span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
-
-                    {/* Live Status Badge */}
-                    <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full border transition-colors duration-500 ${isConnected
-                        ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500"
-                        : "bg-red-500/10 border-red-500/20 text-red-500"
-                        }`}>
-                        <div className="relative flex h-2 w-2">
-                            {isConnected && (
-                                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75"></span>
-                            )}
-                            <span className={`relative inline-flex rounded-full h-2 w-2 ${isConnected ? "bg-emerald-500" : "bg-red-500"}`}></span>
-                        </div>
-                        <span className="text-[10px] font-bold tracking-wider uppercase">
-                            {isConnected ? "Live" : "Offline"}
-                        </span>
-                    </div>
-                </div>
-
-                <div className="flex items-center gap-6">
-                    <Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Home
-                    </Link>
-                    <Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Design System
-                    </Link>
-                    <div className="h-4 w-px bg-border/50" />
-                    <SettingsDrawer />
-                </div>
-            </nav>
-
-            {/* Dashboard Content */}
-            <main className="pt-8 px-8 pb-8 max-w-7xl mx-auto space-y-8">
-
-                {/* Stats Grid */}
-                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 animate-in fade-in slide-up">
-                    <StatCard
-                        title="Total Servers"
-                        icon={Server}
-                        isLoading={!stats}
-                        value={stats?.guilds.count.toLocaleString()}
-                        subtitle={stats?.guilds.changeFromLastMonth
-                            ? `${stats.guilds.changeFromLastMonth > 0 ? '+' : ''}${stats.guilds.changeFromLastMonth} from last month`
-                            : "Active Guilds"
-                        }
-                    />
-
-                    <StatCard
-                        title="Total Users"
-                        icon={Users}
-                        isLoading={!stats}
-                        value={stats?.users.total.toLocaleString()}
-                        subtitle={stats ? `${stats.users.active.toLocaleString()} active now` : undefined}
-                        className="delay-100"
-                    />
-
-                    <StatCard
-                        title="Commands"
-                        icon={Terminal}
-                        isLoading={!stats}
-                        value={stats?.commands.total.toLocaleString()}
-                        subtitle={stats ? `${stats.commands.active} active · ${stats.commands.disabled} disabled` : undefined}
-                        className="delay-200"
-                        onClick={() => setCommandsDrawerOpen(true)}
-                    />
-
-                    <StatCard
-                        title="System Ping"
-                        icon={Activity}
-                        isLoading={!stats}
-                        value={stats ? `${Math.round(stats.ping.avg)}ms` : undefined}
-                        subtitle="Average latency"
-                        className="delay-300"
-                        valueClassName={stats ? cn(
-                            "transition-colors duration-300",
-                            stats.ping.avg < 100 ? "text-emerald-500" :
-                                stats.ping.avg < 200 ? "text-yellow-500" : "text-red-500"
-                        ) : undefined}
-                    />
-                </div>
-
-                {/* Activity Chart */}
-                <div className="animate-in fade-in slide-up delay-400">
-                    <ActivityChart />
-                </div>
-
-                <div className="grid gap-8 lg:grid-cols-3 animate-in fade-in slide-up delay-500">
-                    {/* Economy Stats */}
-                    <div className="lg:col-span-2 space-y-4">
-                        <h2 className="text-xl font-semibold tracking-tight">Economy Overview</h2>
-                        <div className="grid gap-4 md:grid-cols-2">
-                            <StatCard
-                                title="Total Wealth"
-                                icon={Coins}
-                                isLoading={!stats}
-                                value={stats ? `${Number(stats.economy.totalWealth).toLocaleString()} AU` : undefined}
-                                subtitle="Astral Units in circulation"
-                                valueClassName="text-primary"
-                                iconClassName="text-primary"
-                            />
-
-                            <StatCard
-                                title="Items Circulating"
-                                icon={Package}
-                                isLoading={!stats}
-                                value={stats?.economy.totalItems?.toLocaleString()}
-                                subtitle="Total items owned by users"
-                                className="delay-75"
-                                valueClassName="text-blue-500"
-                                iconClassName="text-blue-500"
-                            />
-
-                            <StatCard
-                                title="Average Level"
-                                icon={TrendingUp}
-                                isLoading={!stats}
-                                value={stats ? `Lvl ${stats.economy.avgLevel}` : undefined}
-                                subtitle="Global player average"
-                                className="delay-100"
-                                valueClassName="text-secondary"
-                                iconClassName="text-secondary"
-                            />
-
-                            <StatCard
-                                title="Top /daily Streak"
-                                icon={Flame}
-                                isLoading={!stats}
-                                value={stats?.economy.topStreak}
-                                subtitle="Days daily streak"
-                                className="delay-200"
-                                valueClassName="text-destructive"
-                                iconClassName="text-destructive"
-                            />
-                        </div>
-
-                        <LeaderboardCard
-                            data={stats?.leaderboards}
-                            isLoading={!stats}
-                            className="w-full"
-                        />
-                    </div>
-
-                    {/* Recent Activity & Lootdrops */}
-                    <div className="space-y-4">
-                        <LootdropCard
-                            drop={stats?.activeLootdrops?.[0]}
-                            state={stats?.lootdropState}
-                            isLoading={!stats}
-                        />
-                        <h2 className="text-xl font-semibold tracking-tight">Live Feed</h2>
-                        <RecentActivity
-                            events={stats?.recentEvents || []}
-                            isLoading={!stats}
-                            className="h-[calc(100%-2rem)]"
-                        />
-                    </div>
-                </div>
-            </main >
-
-            {/* Commands Drawer */}
-            <CommandsDrawer
-                open={commandsDrawerOpen}
-                onOpenChange={setCommandsDrawerOpen}
-            />
-        </div >
-    );
-}

web/src/pages/DesignSystem.tsx

@@ -1,24 +1,28 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { Badge } from "../components/ui/badge";
-import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
+import { Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter } from "../components/ui/card";
 import { Button } from "../components/ui/button";
 import { Switch } from "../components/ui/switch";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Textarea } from "../components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip";
 import { FeatureCard } from "../components/feature-card";
 import { InfoCard } from "../components/info-card";
 import { SectionHeader } from "../components/section-header";
 import { TestimonialCard } from "../components/testimonial-card";
 import { StatCard } from "../components/stat-card";
 import { LootdropCard } from "../components/lootdrop-card";
-import { Activity, Coins, Flame, Trophy } from "lucide-react";
-import { SettingsDrawer } from "../components/settings-drawer";
-
-import { RecentActivity } from "../components/recent-activity";
-import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
 import { LeaderboardCard, type LeaderboardData } from "../components/leaderboard-card";
 import { ActivityChart } from "../components/activity-chart";
-import { type ActivityData } from "@shared/modules/dashboard/dashboard.types";
+import { RecentActivity } from "../components/recent-activity";
+import { QuestForm } from "../components/quest-form";
+import { Activity, Coins, Flame, Trophy, Check, User, Mail, Shield, Bell } from "lucide-react";
+import { type RecentEvent, type ActivityData } from "@shared/modules/dashboard/dashboard.types";
 
+// Mock Data
 const mockEvents: RecentEvent[] = [
     { type: 'success', message: 'User leveled up to 5', timestamp: new Date(Date.now() - 1000 * 60 * 5), icon: '⬆️' },
     { type: 'info', message: 'New user joined', timestamp: new Date(Date.now() - 1000 * 60 * 15), icon: '👋' },
@@ -36,89 +40,65 @@ const mockActivityData: ActivityData[] = Array.from({ length: 24 }).map((_, i) =
     };
 });
 
-const mockManyEvents: RecentEvent[] = Array.from({ length: 15 }).map((_, i) => ({
-    type: i % 3 === 0 ? 'success' : i % 3 === 1 ? 'info' : 'error', // Use string literals matching the type definition
-    message: `Event #${i + 1} generated for testing scroll behavior`,
-    timestamp: new Date(Date.now() - 1000 * 60 * i * 10),
-    icon: i % 3 === 0 ? '✨' : i % 3 === 1 ? 'ℹ️' : '🚨',
-}));
-
 const mockLeaderboardData: LeaderboardData = {
     topLevels: [
         { username: "StellarMage", level: 99 },
         { username: "MoonWalker", level: 85 },
         { username: "SunChaser", level: 72 },
-        { username: "NebulaKnight", level: 68 },
-        { username: "CometRider", level: 65 },
-        { username: "VoidWalker", level: 60 },
-        { username: "AstroBard", level: 55 },
-        { username: "StarGazer", level: 50 },
-        { username: "CosmicDruid", level: 45 },
-        { username: "GalaxyGuard", level: 42 }
     ],
     topWealth: [
         { username: "GoldHoarder", balance: "1000000" },
         { username: "MerchantKing", balance: "750000" },
         { username: "LuckyLooter", balance: "500000" },
-        { username: "CryptoMiner", balance: "450000" },
-        { username: "MarketMaker", balance: "300000" },
-        { username: "TradeWind", balance: "250000" },
-        { username: "CoinKeeper", balance: "150000" },
-        { username: "GemHunter", balance: "100000" },
-        { username: "DustCollector", balance: "50000" },
-        { username: "BrokeBeginner", balance: "100" }
     ],
     topNetWorth: [
         { username: "MerchantKing", netWorth: "1500000" },
         { username: "GoldHoarder", netWorth: "1250000" },
         { username: "LuckyLooter", netWorth: "850000" },
-        { username: "MarketMaker", netWorth: "700000" },
-        { username: "GemHunter", netWorth: "650000" },
-        { username: "CryptoMiner", netWorth: "550000" },
-        { username: "TradeWind", netWorth: "400000" },
-        { username: "CoinKeeper", netWorth: "250000" },
-        { username: "DustCollector", netWorth: "150000" },
-        { username: "BrokeBeginner", netWorth: "5000" }
     ]
 };
 
 export function DesignSystem() {
     return (
-        <div className="min-h-screen bg-aurora-page text-foreground font-outfit">
-            {/* Navigation */}
-            <nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
-                <div className="flex items-center gap-2">
-                    <div className="w-8 h-8 rounded-full bg-aurora sun-flare" />
-                    <span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
-                </div>
-                <div className="flex items-center gap-6">
-                    <Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Home
-                    </Link>
-                    <Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Dashboard
-                    </Link>
-                </div>
-            </nav>
-
-            <div className="pt-32 px-8 max-w-6xl mx-auto space-y-12 text-center md:text-left">
+        <div className="pt-8 px-8 max-w-7xl mx-auto space-y-8 text-center md:text-left pb-24">
             {/* Header Section */}
             <header className="space-y-4 animate-in fade-in">
-                    <Badge variant="aurora" className="mb-2">v1.2.0-solar</Badge>
-                    <h1 className="text-6xl font-extrabold tracking-tight text-primary">
+                <div className="flex flex-col md:flex-row items-center md:items-start justify-between gap-4">
+                    <div className="space-y-2">
+                        <Badge variant="aurora" className="mb-2">v2.0.0-solaris</Badge>
+                        <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-primary glow-text">
                             Aurora Design System
                         </h1>
-                    <p className="text-xl text-muted-foreground max-w-2xl mx-auto md:mx-0">
-                        Welcome to the Solaris Dark theme. A warm, celestial-inspired aesthetic designed for the Aurora astrology RPG.
+                        <p className="text-xl text-muted-foreground max-w-2xl">
+                            The Solaris design language. A cohesive collection of celestial components, 
+                            glassmorphic surfaces, and radiant interactions.
                         </p>
+                    </div>
+                    <div className="hidden md:block">
+                        <div className="size-32 rounded-full bg-aurora opacity-20 blur-3xl animate-pulse" />
+                    </div>
+                </div>
             </header>
 
+            <Tabs defaultValue="foundations" className="space-y-8 animate-in slide-up delay-100">
+                <div className="flex items-center justify-center md:justify-start">
+                    <TabsList className="grid w-full max-w-md grid-cols-3">
+                        <TabsTrigger value="foundations">Foundations</TabsTrigger>
+                        <TabsTrigger value="components">Components</TabsTrigger>
+                        <TabsTrigger value="patterns">Patterns</TabsTrigger>
+                    </TabsList>
+                </div>
+
+                {/* FOUNDATIONS TAB */}
+                <TabsContent value="foundations" className="space-y-12">
                      {/* Color Palette */}
-                <section className="space-y-6 animate-in slide-up delay-100">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Color Palette
-                    </h2>
+                     <section className="space-y-6">
+                        <div className="flex items-center gap-4">
+                             <div className="h-px bg-border flex-1" />
+                             <h2 className="text-2xl font-bold text-foreground">Color Palette</h2>
+                             <div className="h-px bg-border flex-1" />
+                        </div>
+                        
                         <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                             <ColorSwatch label="Primary" color="bg-primary" text="text-primary-foreground" />
                             <ColorSwatch label="Secondary" color="bg-secondary" text="text-secondary-foreground" />
@@ -130,54 +110,16 @@ export function DesignSystem() {
                         </div>
                     </section>
 
-                {/* Badges & Pills */}
-                <section className="space-y-6 animate-in slide-up delay-200">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Badges & Tags
-                    </h2>
-                    <div className="flex flex-wrap gap-4 items-center justify-center md:justify-start">
-                        <Badge className="hover-scale cursor-default">Primary</Badge>
-                        <Badge variant="secondary" className="hover-scale cursor-default">Secondary</Badge>
-                        <Badge variant="aurora" className="hover-scale cursor-default">Solaris</Badge>
-                        <Badge variant="glass" className="hover-scale cursor-default">Celestial Glass</Badge>
-                        <Badge variant="outline" className="hover-scale cursor-default">Outline</Badge>
-                        <Badge variant="destructive" className="hover-scale cursor-default">Destructive</Badge>
-                    </div>
-                </section>
-
-                {/* Animations & Interactions */}
-                <section className="space-y-6 animate-in slide-up delay-300">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Animations & Interactions
-                    </h2>
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                        <div className="glass-card p-6 rounded-xl hover-lift cursor-pointer space-y-2">
-                            <h3 className="font-bold text-primary">Hover Lift</h3>
-                            <p className="text-sm text-muted-foreground">Smooth upward translation with enhanced depth.</p>
-                        </div>
-                        <div className="glass-card p-6 rounded-xl hover-glow cursor-pointer space-y-2">
-                            <h3 className="font-bold text-primary">Hover Glow</h3>
-                            <p className="text-sm text-muted-foreground">Subtle border and shadow illumination on hover.</p>
-                        </div>
-                        <div className="flex items-center justify-center p-6">
-                            <Button className="bg-primary text-primary-foreground active-press font-bold px-8 py-6 rounded-xl shadow-lg">
-                                Press Interaction
-                            </Button>
-                        </div>
-                    </div>
-                </section>
-
                     {/* Gradients & Special Effects */}
-                <section className="space-y-6 animate-in slide-up delay-400">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Gradients & Effects
-                    </h2>
+                    <section className="space-y-6">
+                         <div className="flex items-center gap-4">
+                             <div className="h-px bg-border flex-1" />
+                             <h2 className="text-2xl font-bold text-foreground">Gradients & Effects</h2>
+                             <div className="h-px bg-border flex-1" />
+                        </div>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-center">
                             <div className="space-y-4">
-                            <h3 className="text-xl font-medium text-muted-foreground">The Solaris Gradient (Background)</h3>
+                                <h3 className="text-xl font-medium text-muted-foreground">The Solaris Gradient</h3>
                                 <div className="h-32 w-full rounded-xl bg-aurora-page sun-flare flex items-center justify-center border border-border hover-glow transition-all">
                                     <span className="text-primary font-bold text-2xl">Celestial Void</span>
                                 </div>
@@ -193,281 +135,14 @@ export function DesignSystem() {
                         </div>
                     </section>
 
-                {/* Components Showcase */}
-                <section className="space-y-6 animate-in slide-up delay-500">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Component Showcase
-                    </h2>
-                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                        {/* Action Card with Tags */}
-                        <Card className="glass-card sun-flare overflow-hidden border-none text-left hover-lift transition-all">
-                            <div className="h-2 bg-primary w-full" />
-                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                                <CardTitle className="text-primary">Celestial Action</CardTitle>
-                                <Badge variant="aurora" className="h-5">New</Badge>
-                            </CardHeader>
-                            <CardContent className="space-y-4">
-                                <div className="flex gap-2">
-                                    <Badge variant="glass" className="text-[10px] uppercase">Quest</Badge>
-                                    <Badge variant="glass" className="text-[10px] uppercase">Level 15</Badge>
-                                </div>
-                                <p className="text-muted-foreground text-sm">
-                                    Experience the warmth of the sun in every interaction and claim your rewards.
-                                </p>
-                                <div className="flex gap-2 pt-2">
-                                    <Button className="bg-primary text-primary-foreground active-press font-bold px-6">
-                                        Ascend
-                                    </Button>
-                                </div>
-                            </CardContent>
-                        </Card>
-
-                        {/* Profile/Entity Card with Tags */}
-                        <Card className="glass-card text-left hover-lift transition-all">
-                            <CardHeader className="pb-2">
-                                <div className="flex justify-between items-start">
-                                    <div className="w-12 h-12 rounded-full bg-aurora border-2 border-primary/20 hover-scale transition-transform cursor-pointer" />
-                                    <Badge variant="secondary" className="bg-green-500/10 text-green-500 border-green-500/20">Online</Badge>
-                                </div>
-                                <CardTitle className="mt-4">Stellar Navigator</CardTitle>
-                                <p className="text-xs text-muted-foreground uppercase tracking-wider">Level 42 Mage</p>
-                            </CardHeader>
-                            <CardContent className="space-y-4">
-                                <div className="flex flex-wrap gap-2">
-                                    <Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Astronomy</Badge>
-                                    <Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Pyromancy</Badge>
-                                    <Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Leadership</Badge>
-                                </div>
-                                <div className="h-1.5 w-full bg-secondary/20 rounded-full overflow-hidden">
-                                    <div className="h-full bg-aurora w-[75%] animate-in slide-up delay-500" />
-                                </div>
-                            </CardContent>
-                        </Card>
-
-                        {/* Interactive Card with Tags */}
-                        <Card className="glass-card text-left hover-glow transition-all">
-                            <CardHeader>
-                                <div className="flex items-center gap-2 mb-2">
-                                    <Badge variant="glass" className="bg-primary/10 text-primary border-primary/20">Beta</Badge>
-                                </div>
-                                <div className="flex justify-between items-center">
-                                    <CardTitle>System Settings</CardTitle>
-                                    <SettingsDrawer />
-                                </div>
-                            </CardHeader>
-                            <CardContent className="space-y-6">
-                                <div className="flex items-center justify-between">
-                                    <div className="space-y-0.5">
-                                        <div className="font-medium">Starry Background</div>
-                                        <div className="text-sm text-muted-foreground">Enable animated SVG stars</div>
-                                    </div>
-                                    <Switch defaultChecked />
-                                </div>
-                                <div className="flex items-center justify-between">
-                                    <div className="space-y-0.5">
-                                        <div className="font-medium flex items-center gap-2">
-                                            Solar Flare Glow
-                                            <Badge className="bg-amber-500/10 text-amber-500 border-amber-500/20 text-[9px] h-4">Pro</Badge>
-                                        </div>
-                                        <div className="text-sm text-muted-foreground">Add bloom to primary elements</div>
-                                    </div>
-                                    <Switch defaultChecked />
-                                </div>
-                            </CardContent>
-                        </Card>
-                    </div>
-                </section>
-
-                {/* Refactored Application Components */}
-                <section className="space-y-6 animate-in slide-up delay-600">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Application Components
-                    </h2>
-
-                    <div className="space-y-12">
-                        {/* Section Header Demo */}
-                        <div className="border border-border/50 rounded-xl p-8 bg-background/50">
-                            <SectionHeader
-                                badge="Components"
-                                title="Section Headers"
-                                description="Standardized header component for defining page sections with badge, title, and description."
-                            />
-                        </div>
-
-                        {/* Feature Cards Demo */}
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            <FeatureCard
-                                title="Feature Card"
-                                category="UI Element"
-                                description="A versatile card component for the bento grid layout."
-                                icon={<div className="w-20 h-20 bg-primary/20 rounded-full animate-pulse" />}
-                            />
-                            <FeatureCard
-                                title="Interactive Feature"
-                                category="Interactive"
-                                description="Supports custom children nodes for complex content."
-                            >
-                                <div className="mt-2 p-3 bg-secondary/10 border border-secondary/20 rounded text-center text-secondary text-sm font-bold">
-                                    Custom Child Content
-                                </div>
-                            </FeatureCard>
-                        </div>
-
-                        {/* Info Cards Demo */}
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                            <InfoCard
-                                icon={<div className="w-6 h-6 rounded-full bg-primary animate-ping" />}
-                                title="Info Card"
-                                description="Compact card for highlighting features or perks with an icon."
-                                iconWrapperClassName="bg-primary/20 text-primary"
-                            />
-                        </div>
-
-                        {/* Stat Cards Demo */}
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                            <StatCard
-                                title="Standard Stat"
-                                value="1,234"
-                                subtitle="Active users"
-                                icon={Activity}
-                                isLoading={false}
-                            />
-                            <StatCard
-                                title="Colored Stat"
-                                value="9,999 AU"
-                                subtitle="Total Wealth"
-                                icon={Coins}
-                                isLoading={false}
-                                valueClassName="text-primary"
-                                iconClassName="text-primary"
-                            />
-                            <StatCard
-                                title="Loading State"
-                                value={null}
-                                icon={Flame}
-                                isLoading={true}
-                            />
-                        </div>
-
-                        {/* Data Visualization Demo */}
-                        <div className="space-y-4">
-                            <h3 className="text-xl font-semibold text-muted-foreground">Data Visualization</h3>
-                            <div className="grid grid-cols-1 gap-6">
-                                <ActivityChart
-                                    data={mockActivityData}
-                                />
-                                <ActivityChart
-                                // Empty charts (loading state)
-                                />
-                            </div>
-                        </div>
-
-                        {/* Game Event Cards Demo */}
-                        <div className="space-y-4">
-                            <h3 className="text-xl font-semibold text-muted-foreground">Game Event Cards</h3>
-                            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                                <LootdropCard
-                                    isLoading={true}
-                                />
-                                <LootdropCard
-                                    drop={null}
-                                    state={{
-                                        monitoredChannels: 3,
-                                        hottestChannel: {
-                                            id: "123",
-                                            messages: 42,
-                                            progress: 42,
-                                            cooldown: false
-                                        },
-                                        config: { requiredMessages: 100, dropChance: 0.1 }
-                                    }}
-                                    isLoading={false}
-                                />
-                                <LootdropCard
-                                    drop={null}
-                                    state={{
-                                        monitoredChannels: 3,
-                                        hottestChannel: {
-                                            id: "123",
-                                            messages: 100,
-                                            progress: 100,
-                                            cooldown: true
-                                        },
-                                        config: { requiredMessages: 100, dropChance: 0.1 }
-                                    }}
-                                    isLoading={false}
-                                />
-                                <LootdropCard
-                                    drop={{
-                                        rewardAmount: 500,
-                                        currency: "AU",
-                                        createdAt: new Date().toISOString(),
-                                        expiresAt: new Date(Date.now() + 60000).toISOString()
-                                    }}
-                                    isLoading={false}
-                                />
-                            </div>
-                        </div>
-
-                        {/* Leaderboard Demo */}
-                        <div className="space-y-4">
-                            <h3 className="text-xl font-semibold text-muted-foreground">Leaderboard Cards</h3>
-                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                                <LeaderboardCard
-                                    isLoading={true}
-                                />
-                                <LeaderboardCard
-                                    data={mockLeaderboardData}
-                                    isLoading={false}
-                                />
-                            </div>
-                        </div>
-
-                        {/* Testimonial Cards Demo */}
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            <TestimonialCard
-                                quote="The testimonial card is perfect for social proof sections."
-                                author="Jane Doe"
-                                role="Beta Tester"
-                                avatarGradient="bg-gradient-to-br from-pink-500 to-rose-500"
-                            />
-                        </div>
-
-                        {/* Recent Activity Demo */}
-                        <div className="space-y-4">
-                            <h3 className="text-xl font-semibold text-muted-foreground">Recent Activity Feed</h3>
-                            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 h-[500px]">
-                                <RecentActivity
-                                    events={[]}
-                                    isLoading={true}
-                                    className="h-full"
-                                />
-                                <RecentActivity
-                                    events={[]}
-                                    isLoading={false}
-                                    className="h-full"
-                                />
-                                <RecentActivity
-                                    events={mockEvents}
-                                    isLoading={false}
-                                    className="h-full"
-                                />
-                                <RecentActivity
-                                    events={mockManyEvents}
-                                    isLoading={false}
-                                    className="h-full"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </section>
-
                     {/* Typography */}
-                <section className="space-y-8 pb-12">
-                    <h2 className="text-step-3 font-bold text-center">Fluid Typography</h2>
-                    <div className="space-y-6">
+                    <section className="space-y-8">
+                         <div className="flex items-center gap-4">
+                             <div className="h-px bg-border flex-1" />
+                             <h2 className="text-2xl font-bold text-foreground">Typography</h2>
+                             <div className="h-px bg-border flex-1" />
+                        </div>
+                        <div className="space-y-2 border border-border/50 rounded-xl p-8 bg-card/50">
                             <TypographyRow step="-2" className="text-step--2" label="Step -2 (Small Print)" />
                             <TypographyRow step="-1" className="text-step--1" label="Step -1 (Small)" />
                             <TypographyRow step="0" className="text-step-0" label="Step 0 (Base / Body)" />
@@ -477,19 +152,214 @@ export function DesignSystem() {
                             <TypographyRow step="4" className="text-step-4 text-primary" label="Step 4 (H1 / Title)" />
                             <TypographyRow step="5" className="text-step-5 text-primary font-black" label="Step 5 (Display)" />
                         </div>
-                    <p className="text-step--1 text-muted-foreground text-center italic">
-                        Try resizing your browser window to see the text scale smoothly.
-                    </p>
                     </section>
+                </TabsContent>
+
+                {/* COMPONENTS TAB */}
+                <TabsContent value="components" className="space-y-12">
+                    {/* Buttons & Badges */}
+                    <section className="space-y-6">
+                        <SectionTitle title="Buttons & Badges" />
+                        <Card className="p-8">
+                            <div className="space-y-8">
+                                <div className="space-y-4">
+                                    <Label>Buttons</Label>
+                                    <div className="flex flex-wrap gap-4">
+                                        <Button variant="default">Default</Button>
+                                        <Button variant="secondary">Secondary</Button>
+                                        <Button variant="outline">Outline</Button>
+                                        <Button variant="ghost">Ghost</Button>
+                                        <Button variant="destructive">Destructive</Button>
+                                        <Button variant="link">Link</Button>
+                                        <Button variant="aurora">Aurora</Button>
+                                        <Button variant="glass">Glass</Button>
                                     </div>
                                 </div>
+                                <div className="space-y-4">
+                                    <Label>Badges</Label>
+                                    <div className="flex flex-wrap gap-4">
+                                        <Badge>Primary</Badge>
+                                        <Badge variant="secondary">Secondary</Badge>
+                                        <Badge variant="outline">Outline</Badge>
+                                        <Badge variant="destructive">Destructive</Badge>
+                                        <Badge variant="aurora">Aurora</Badge>
+                                        <Badge variant="glass">Glass</Badge>
+                                    </div>
+                                </div>
+                            </div>
+                        </Card>
+                    </section>
+                    
+                    {/* Form Controls */}
+                    <section className="space-y-6">
+                        <SectionTitle title="Form Controls" />
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <Card className="p-6 space-y-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="email">Email Address</Label>
+                                    <Input id="email" placeholder="enter@email.com" type="email" />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="bio">Bio</Label>
+                                    <Textarea id="bio" placeholder="Tell us about yourself..." />
+                                </div>
+                                <div className="flex items-center justify-between">
+                                    <Label htmlFor="notifications">Enable Notifications</Label>
+                                    <Switch id="notifications" />
+                                </div>
+                            </Card>
+                            <Card className="p-6 space-y-6">
+                                <div className="space-y-2">
+                                    <Label>Role Selection</Label>
+                                     <Select>
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select a role" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="admin">Administrator</SelectItem>
+                                            <SelectItem value="mod">Moderator</SelectItem>
+                                            <SelectItem value="user">User</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div className="space-y-2">
+                                    <Label>Tooltip Demo</Label>
+                                    <div className="p-4 border border-dashed rounded-lg flex items-center justify-center">
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <Button variant="outline">Hover Me</Button>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p>This is a glowing tooltip!</p>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                    </div>
+                                </div>
+                            </Card>
+                        </div>
+                    </section>
+
+                     {/* Cards & Containers */}
+                     <section className="space-y-6">
+                        <SectionTitle title="Cards & Containers" />
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <Card className="hover-lift">
+                                <CardHeader>
+                                    <CardTitle>Standard Card</CardTitle>
+                                    <CardDescription>Default glassmorphic style</CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                    <p className="text-sm text-muted-foreground">The default card component comes with built-in separation and padding.</p>
+                                </CardContent>
+                                <CardFooter>
+                                    <Button size="sm" variant="secondary" className="w-full">Action</Button>
+                                </CardFooter>
+                            </Card>
+
+                            <Card className="bg-aurora/10 border-primary/20 hover-glow">
+                                <CardHeader>
+                                    <CardTitle className="text-primary">Highlighted Card</CardTitle>
+                                    <CardDescription>Active or featured state</CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                     <p className="text-sm text-muted-foreground">Use this variation to draw attention to specific content blocks.</p>
+                                </CardContent>
+                            </Card>
+
+                            <Card className="border-dashed shadow-none bg-transparent">
+                                <CardHeader>
+                                    <CardTitle>Ghost/Dashed Card</CardTitle>
+                                    <CardDescription>Placeholder or empty state</CardDescription>
+                                </CardHeader>
+                                <CardContent className="flex items-center justify-center py-8">
+                                    <div className="bg-muted p-4 rounded-full">
+                                        <Activity className="size-6 text-muted-foreground" />
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        </div>
+                    </section>
+                </TabsContent>
+
+                {/* PATTERNS TAB */}
+                <TabsContent value="patterns" className="space-y-12">
+                     {/* Dashboard Widgets */}
+                     <section className="space-y-6">
+                        <SectionTitle title="Dashboard Widgets" />
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <StatCard
+                                title="Total XP"
+                                value="1,240,500"
+                                subtitle="+12% from last week"
+                                icon={Trophy}
+                                isLoading={false}
+                                iconClassName="text-yellow-500"
+                            />
+                            <StatCard
+                                title="Active Users"
+                                value="3,405"
+                                subtitle="Currently online"
+                                icon={User}
+                                isLoading={false}
+                                iconClassName="text-blue-500"
+                            />
+                            <StatCard
+                                title="System Load"
+                                value="42%"
+                                subtitle="Optimal performance"
+                                icon={Activity}
+                                isLoading={false}
+                                iconClassName="text-green-500"
+                            />
+                        </div>
+                    </section>
+
+                    {/* Complex Lists */}
+                    <section className="space-y-6">
+                         <SectionTitle title="Complex Lists & Charts" />
+                         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                            <RecentActivity
+                                events={mockEvents}
+                                isLoading={false}
+                                className="h-[400px]"
+                            />
+                            <LeaderboardCard
+                                data={mockLeaderboardData}
+                                isLoading={false}
+                                className="h-[400px]"
+                            />
+                         </div>
+                    </section>
+
+                     {/* Application Patterns */}
+                     <section className="space-y-6">
+                         <SectionTitle title="Application Forms" />
+                         <div className="max-w-xl mx-auto">
+                            <QuestForm />
+                         </div>
+                    </section>
+                </TabsContent>
+            </Tabs>
+        </div>
+    );
+}
+
+function SectionTitle({ title }: { title: string }) {
+    return (
+        <div className="flex items-center gap-4 py-4">
+             <div className="h-0.5 bg-linear-to-r from-transparent via-primary/50 to-transparent flex-1" />
+             <h2 className="text-xl font-bold text-foreground/80 uppercase tracking-widest">{title}</h2>
+             <div className="h-0.5 bg-linear-to-r from-transparent via-primary/50 to-transparent flex-1" />
+        </div>
     );
 }
 
 function TypographyRow({ step, className, label }: { step: string, className: string, label: string }) {
     return (
-        <div className="flex flex-col md:flex-row md:items-baseline gap-4 border-b border-border/50 pb-4">
-            <span className="text-step--2 font-mono text-muted-foreground w-20">Step {step}</span>
+        <div className="flex flex-col md:flex-row md:items-baseline gap-4 border-b border-border/50 pb-4 last:border-0 last:pb-0">
+            <span className="text-xs font-mono text-muted-foreground w-24 shrink-0">var(--step-{step})</span>
             <p className={`${className} font-medium truncate`}>{label}</p>
         </div>
     );
@@ -497,9 +367,13 @@ function TypographyRow({ step, className, label }: { step: string, className: st
 
 function ColorSwatch({ label, color, text = "text-foreground", border = false }: { label: string, color: string, text?: string, border?: boolean }) {
     return (
-        <div className="space-y-2">
-            <div className={`h-20 w-full rounded-lg ${color} ${border ? 'border border-border' : ''} flex items-end p-2 shadow-lg`}>
-                <span className={`text-xs font-bold uppercase tracking-widest ${text}`}>{label}</span>
+        <div className="group space-y-2 cursor-pointer">
+            <div className={`h-24 w-full rounded-xl ${color} ${border ? 'border border-border' : ''} flex items-end p-3 shadow-lg group-hover:scale-105 transition-transform duration-300 relative overflow-hidden`}>
+                <div className="absolute inset-0 bg-linear-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+                <span className={`text-xs font-bold uppercase tracking-widest ${text} relative z-10`}>{label}</span>
+            </div>
+            <div className="flex justify-between text-xs text-muted-foreground px-1">
+                 <span>{color.replace('bg-', '')}</span>
             </div>
         </div>
     );

web/src/pages/Home.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { FeatureCard } from "../components/feature-card";
@@ -17,25 +16,9 @@ import {
 
 export function Home() {
     return (
-        <div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
-            {/* Navigation (Simple) */}
-            <nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
-                <div className="flex items-center gap-2">
-                    <div className="w-8 h-8 rounded-full bg-aurora sun-flare" />
-                    <span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
-                </div>
-                <div className="flex items-center gap-6">
-                    <Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Dashboard
-                    </Link>
-                    <Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Design System
-                    </Link>
-
-                </div>
-            </nav>
+        <>
             {/* Hero Section */}
-            <header className="relative pt-32 pb-20 px-8 text-center max-w-5xl mx-auto space-y-10">
+            <header className="relative pt-16 pb-20 px-8 text-center max-w-5xl mx-auto space-y-10">
                 <Badge variant="glass" className="mb-4 py-1.5 px-4 text-step--1 animate-in zoom-in spin-in-12 duration-700 delay-100">
                     The Ultimate Academic Strategy RPG
                 </Badge>
@@ -229,7 +212,7 @@ export function Home() {
                     </div>
                 </div>
             </footer>
-        </div>
+        </>
     );
 }
 

web/src/pages/admin/Items.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { SectionHeader } from "../../components/section-header";
+
+export function AdminItems() {
+    return (
+        <main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-12">
+            <SectionHeader
+                badge="Item Management"
+                title="Items"
+                description="Create and manage items for the Aurora RPG."
+            />
+
+            <div className="animate-in fade-in slide-up duration-700">
+                <p className="text-muted-foreground">Items management coming soon...</p>
+            </div>
+        </main>
+    );
+}
+
+export default AdminItems;

web/src/pages/admin/Overview.tsx

@@ -0,0 +1,164 @@
+import React, { useState } from "react";
+import { SectionHeader } from "../../components/section-header";
+import { useSocket } from "../../hooks/use-socket";
+import { StatCard } from "../../components/stat-card";
+import { ActivityChart } from "../../components/activity-chart";
+import { LootdropCard } from "../../components/lootdrop-card";
+import { LeaderboardCard } from "../../components/leaderboard-card";
+import { RecentActivity } from "../../components/recent-activity";
+import { CommandsDrawer } from "../../components/commands-drawer";
+import { Server, Users, Terminal, Activity, Coins, TrendingUp, Flame, Package } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+export function AdminOverview() {
+    const { isConnected, stats } = useSocket();
+    const [commandsDrawerOpen, setCommandsDrawerOpen] = useState(false);
+
+    return (
+        <>
+        <main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
+            <SectionHeader
+                badge="Admin Dashboard"
+                title="Overview"
+                description="Monitor your Aurora RPG server statistics and activity."
+            />
+
+            {/* Stats Grid */}
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 animate-in fade-in slide-up duration-700">
+                <StatCard
+                    title="Total Servers"
+                    icon={Server}
+                    isLoading={!stats}
+                    value={stats?.guilds.count.toLocaleString()}
+                    subtitle={stats?.guilds.changeFromLastMonth
+                        ? `${stats.guilds.changeFromLastMonth > 0 ? '+' : ''}${stats.guilds.changeFromLastMonth} from last month`
+                        : "Active Guilds"
+                    }
+                />
+
+                <StatCard
+                    title="Total Users"
+                    icon={Users}
+                    isLoading={!stats}
+                    value={stats?.users.total.toLocaleString()}
+                    subtitle={stats ? `${stats.users.active.toLocaleString()} active now` : undefined}
+                    className="delay-100"
+                />
+
+                <StatCard
+                    title="Commands"
+                    icon={Terminal}
+                    isLoading={!stats}
+                    value={stats?.commands.total.toLocaleString()}
+                    subtitle={stats ? `${stats.commands.active} active · ${stats.commands.disabled} disabled` : undefined}
+                    className="delay-200"
+                    onClick={() => setCommandsDrawerOpen(true)}
+                />
+
+                <StatCard
+                    title="System Ping"
+                    icon={Activity}
+                    isLoading={!stats}
+                    value={stats ? `${Math.round(stats.ping.avg)}ms` : undefined}
+                    subtitle="Average latency"
+                    className="delay-300"
+                    valueClassName={stats ? cn(
+                        "transition-colors duration-300",
+                        stats.ping.avg < 100 ? "text-emerald-500" :
+                            stats.ping.avg < 200 ? "text-yellow-500" : "text-red-500"
+                    ) : undefined}
+                />
+            </div>
+
+            {/* Activity Chart */}
+            <div className="animate-in fade-in slide-up delay-400">
+                <ActivityChart />
+            </div>
+
+            <div className="grid gap-8 lg:grid-cols-3 animate-in fade-in slide-up delay-500">
+                {/* Economy Stats */}
+                <div className="lg:col-span-2 space-y-6">
+                    <div>
+                        <h2 className="text-xl font-semibold tracking-tight mb-4">Economy Overview</h2>
+                        <div className="grid gap-4 md:grid-cols-2">
+                            <StatCard
+                                title="Total Wealth"
+                                icon={Coins}
+                                isLoading={!stats}
+                                value={stats ? `${Number(stats.economy.totalWealth).toLocaleString()} AU` : undefined}
+                                subtitle="Astral Units in circulation"
+                                valueClassName="text-primary"
+                                iconClassName="text-primary"
+                            />
+
+                            <StatCard
+                                title="Items Circulating"
+                                icon={Package}
+                                isLoading={!stats}
+                                value={stats?.economy.totalItems?.toLocaleString()}
+                                subtitle="Total items owned by users"
+                                className="delay-75"
+                                valueClassName="text-blue-500"
+                                iconClassName="text-blue-500"
+                            />
+
+                            <StatCard
+                                title="Average Level"
+                                icon={TrendingUp}
+                                isLoading={!stats}
+                                value={stats ? `Lvl ${stats.economy.avgLevel}` : undefined}
+                                subtitle="Global player average"
+                                className="delay-100"
+                                valueClassName="text-secondary"
+                                iconClassName="text-secondary"
+                            />
+
+                            <StatCard
+                                title="Top /daily Streak"
+                                icon={Flame}
+                                isLoading={!stats}
+                                value={stats?.economy.topStreak}
+                                subtitle="Days daily streak"
+                                className="delay-200"
+                                valueClassName="text-destructive"
+                                iconClassName="text-destructive"
+                            />
+                        </div>
+                    </div>
+
+                    <LeaderboardCard
+                        data={stats?.leaderboards}
+                        isLoading={!stats}
+                        className="w-full"
+                    />
+                </div>
+
+                {/* Recent Activity & Lootdrops */}
+                <div className="space-y-6">
+                    <LootdropCard
+                        drop={stats?.activeLootdrops?.[0]}
+                        state={stats?.lootdropState}
+                        isLoading={!stats}
+                    />
+                    <div className="h-[calc(100%-12rem)] min-h-[400px]">
+                        <h2 className="text-xl font-semibold tracking-tight mb-4">Live Feed</h2>
+                        <RecentActivity
+                            events={stats?.recentEvents || []}
+                            isLoading={!stats}
+                            className="h-full"
+                        />
+                    </div>
+                </div>
+            </div>
+        </main>
+        
+        {/* Commands Drawer */}
+        <CommandsDrawer 
+            open={commandsDrawerOpen} 
+            onOpenChange={setCommandsDrawerOpen}
+        />
+        </>
+    );
+}
+
+export default AdminOverview;

web/src/pages/settings/Economy.tsx

@@ -0,0 +1,290 @@
+import React from "react";
+import { useSettingsForm } from "./SettingsLayout";
+import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Users, Backpack, Sparkles, CreditCard, MessageSquare } from "lucide-react";
+
+export function EconomySettings() {
+    const { form } = useSettingsForm();
+
+    return (
+        <div className="space-y-6 animate-in fade-in slide-up duration-500">
+            <Accordion type="multiple" className="w-full space-y-4" defaultValue={["daily", "inventory"]}>
+                <AccordionItem value="daily" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-yellow-500/10 flex items-center justify-center text-yellow-500">
+                                <Users className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Daily Rewards</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="economy.daily.amount"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Base Amount</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="text" className="bg-background/50" placeholder="100" />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">Reward (AU)</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="economy.daily.streakBonus"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Streak Bonus</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="text" className="bg-background/50" placeholder="10" />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">Bonus/day</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="economy.daily.weeklyBonus"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Weekly Bonus</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="text" className="bg-background/50" placeholder="50" />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">7-day bonus</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="economy.daily.cooldownMs"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Cooldown (ms)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="inventory" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center text-orange-500">
+                                <Backpack className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Inventory</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="inventory.maxStackSize"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Max Stack Size</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="text" className="bg-background/50" />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="inventory.maxSlots"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Max Slots</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="leveling" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
+                                <Sparkles className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Leveling & XP</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="leveling.base"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Base XP</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="leveling.exponent"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Exponent</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <div className="bg-muted/30 p-4 rounded-lg space-y-3">
+                            <h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
+                                <MessageSquare className="w-3 h-3" /> Chat XP
+                            </h4>
+                            <div className="grid grid-cols-3 gap-4">
+                                <FormField
+                                    control={form.control}
+                                    name="leveling.chat.minXp"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Min</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="leveling.chat.maxXp"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Max</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="leveling.chat.cooldownMs"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Cooldown</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="transfers" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center text-green-500">
+                                <CreditCard className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Transfers</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <FormField
+                            control={form.control}
+                            name="economy.transfers.allowSelfTransfer"
+                            render={({ field }) => (
+                                <FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
+                                    <div className="space-y-0.5">
+                                        <FormLabel className="text-sm font-medium">Allow Self-Transfer</FormLabel>
+                                        <FormDescription className="text-xs">
+                                            Permit users to transfer currency to themselves.
+                                        </FormDescription>
+                                    </div>
+                                    <FormControl>
+                                        <Switch
+                                            checked={field.value}
+                                            onCheckedChange={field.onChange}
+                                        />
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="economy.transfers.minAmount"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Minimum Transfer Amount</FormLabel>
+                                    <FormControl>
+                                        <Input {...field} type="text" placeholder="1" className="bg-background/50" />
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="exam" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-500">
+                                <Sparkles className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Exams</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="economy.exam.multMin"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Min Multiplier</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="economy.exam.multMax"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Max Multiplier</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
+        </div>
+    );
+}

web/src/pages/settings/General.tsx

@@ -0,0 +1,149 @@
+import React from "react";
+import { useSettingsForm } from "./SettingsLayout";
+import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { MessageSquare, Terminal } from "lucide-react";
+import { fromSelectValue, toSelectValue, NONE_VALUE } from "@/hooks/use-settings";
+
+export function GeneralSettings() {
+    const { form, meta } = useSettingsForm();
+
+    return (
+        <div className="space-y-8 animate-in fade-in slide-up duration-500">
+            <div className="space-y-4">
+                <div className="flex items-center gap-2 mb-4">
+                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
+                        <MessageSquare className="w-3 h-3 mr-1" /> Onboarding
+                    </Badge>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <FormField
+                        control={form.control}
+                        name="welcomeChannelId"
+                        render={({ field }) => (
+                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
+                                <FormLabel className="text-foreground/80">Welcome Channel</FormLabel>
+                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                    <FormControl>
+                                        <SelectTrigger className="bg-background/50 border-border/50">
+                                            <SelectValue placeholder="Select a channel" />
+                                        </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                        <SelectItem value={NONE_VALUE}>None</SelectItem>
+                                        {meta?.channels
+                                            .filter(c => c.type === 0)
+                                            .map(c => (
+                                                <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
+                                            ))}
+                                    </SelectContent>
+                                </Select>
+                                <FormDescription>Where to send welcome messages.</FormDescription>
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="welcomeMessage"
+                        render={({ field }) => (
+                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
+                                <FormLabel className="text-foreground/80">Welcome Message Template</FormLabel>
+                                <FormControl>
+                                    <Textarea
+                                        {...field}
+                                        value={field.value || ""}
+                                        placeholder="Welcome {user}!"
+                                        className="min-h-[100px] font-mono text-xs bg-background/50 border-border/50 focus:border-primary/50 focus:ring-primary/20 resize-none"
+                                    />
+                                </FormControl>
+                                <FormDescription>Available variables: {"{user}"}, {"{count}"}.</FormDescription>
+                            </FormItem>
+                        )}
+                    />
+                </div>
+            </div>
+
+            <div className="space-y-4">
+                <div className="flex items-center gap-2 mb-4">
+                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
+                        Channels & Features
+                    </Badge>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <FormField
+                        control={form.control}
+                        name="feedbackChannelId"
+                        render={({ field }) => (
+                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
+                                <FormLabel className="text-foreground/80">Feedback Channel</FormLabel>
+                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                    <FormControl>
+                                        <SelectTrigger className="bg-background/50 border-border/50">
+                                            <SelectValue placeholder="Select a channel" />
+                                        </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                        <SelectItem value={NONE_VALUE}>None</SelectItem>
+                                        {meta?.channels.filter(c => c.type === 0).map(c => (
+                                            <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <FormDescription>Where user feedback is sent.</FormDescription>
+                            </FormItem>
+                        )}
+                    />
+
+                    <div className="glass-card p-5 rounded-xl border border-border/50 space-y-4">
+                        <div className="flex items-center gap-2 mb-2">
+                            <Terminal className="w-4 h-4 text-muted-foreground" />
+                            <h4 className="font-medium text-sm">Terminal Embed</h4>
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="terminal.channelId"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Channel</FormLabel>
+                                        <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                            <FormControl>
+                                                <SelectTrigger className="bg-background/50 border-border/50 h-9 text-xs">
+                                                    <SelectValue placeholder="Select channel" />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent>
+                                                <SelectItem value={NONE_VALUE}>None</SelectItem>
+                                                {meta?.channels.filter(c => c.type === 0).map(c => (
+                                                    <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="terminal.messageId"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Message ID</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} value={field.value || ""} placeholder="Message ID" className="font-mono text-xs bg-background/50 border-border/50 h-9" />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

web/src/pages/settings/Roles.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import { useSettingsForm } from "./SettingsLayout";
+import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { Palette, Users } from "lucide-react";
+import { fromSelectValue, toSelectValue } from "@/hooks/use-settings";
+
+export function RolesSettings() {
+    const { form, meta } = useSettingsForm();
+
+    return (
+        <div className="space-y-8 animate-in fade-in slide-up duration-500">
+            <div className="space-y-4">
+                <div className="flex items-center gap-2 mb-4">
+                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
+                        <Users className="w-3 h-3 mr-1" /> System Roles
+                    </Badge>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <FormField
+                        control={form.control}
+                        name="studentRole"
+                        render={({ field }) => (
+                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
+                                <FormLabel className="font-bold">Student Role</FormLabel>
+                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                    <FormControl>
+                                        <SelectTrigger className="bg-background/50">
+                                            <SelectValue placeholder="Select role" />
+                                        </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                        {meta?.roles.map(r => (
+                                            <SelectItem key={r.id} value={r.id}>
+                                                <span className="flex items-center gap-2">
+                                                    <span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
+                                                    {r.name}
+                                                </span>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <FormDescription className="text-xs">Default role for new members/students.</FormDescription>
+                            </FormItem>
+                        )}
+                    />
+                    <FormField
+                        control={form.control}
+                        name="visitorRole"
+                        render={({ field }) => (
+                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
+                                <FormLabel className="font-bold">Visitor Role</FormLabel>
+                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                    <FormControl>
+                                        <SelectTrigger className="bg-background/50">
+                                            <SelectValue placeholder="Select role" />
+                                        </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                        {meta?.roles.map(r => (
+                                            <SelectItem key={r.id} value={r.id}>
+                                                <span className="flex items-center gap-2">
+                                                    <span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
+                                                    {r.name}
+                                                </span>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <FormDescription className="text-xs">Role for visitors/guests.</FormDescription>
+                            </FormItem>
+                        )}
+                    />
+                </div>
+            </div>
+
+            <div className="space-y-4">
+                <div className="flex items-center gap-2 mb-4">
+                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
+                        <Palette className="w-3 h-3 mr-1" /> Color Roles
+                    </Badge>
+                </div>
+
+                <div className="glass-card p-6 rounded-xl border border-border/50 bg-card/30">
+                    <div className="mb-4">
+                        <FormDescription className="text-sm">
+                            Select roles that users can choose from to set their name color in the bot.
+                        </FormDescription>
+                    </div>
+                    <ScrollArea className="h-[400px] pr-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+                            {meta?.roles.map((role) => (
+                                <FormField
+                                    key={role.id}
+                                    control={form.control}
+                                    name="colorRoles"
+                                    render={({ field }) => {
+                                        const isSelected = field.value?.includes(role.id);
+                                        return (
+                                            <FormItem
+                                                key={role.id}
+                                                className={`flex flex-row items-center space-x-3 space-y-0 p-3 rounded-lg border transition-all cursor-pointer ${
+                                                    isSelected 
+                                                        ? 'bg-primary/10 border-primary/30 ring-1 ring-primary/20' 
+                                                        : 'hover:bg-muted/50 border-transparent'
+                                                }`}
+                                            >
+                                                <FormControl>
+                                                    <Switch
+                                                        checked={isSelected}
+                                                        onCheckedChange={(checked) => {
+                                                            return checked
+                                                                ? field.onChange([...(field.value || []), role.id])
+                                                                : field.onChange(
+                                                                    field.value?.filter(
+                                                                        (value: string) => value !== role.id
+                                                                    )
+                                                                )
+                                                        }}
+                                                    />
+                                                </FormControl>
+                                                <FormLabel className="font-medium flex items-center gap-2 cursor-pointer w-full text-foreground text-sm">
+                                                    <span className="w-3 h-3 rounded-full shadow-sm" style={{ background: role.color }} />
+                                                    {role.name}
+                                                </FormLabel>
+                                            </FormItem>
+                                        )
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    </ScrollArea>
+                </div>
+            </div>
+        </div>
+    );
+}

web/src/pages/settings/SettingsLayout.tsx

@@ -0,0 +1,65 @@
+import React, { createContext, useContext } from "react";
+import { Outlet } from "react-router-dom";
+import { useSettings, type FormValues, type ConfigMeta } from "@/hooks/use-settings";
+import { Form } from "@/components/ui/form";
+import { SectionHeader } from "@/components/section-header";
+import { Button } from "@/components/ui/button";
+import { Save, Loader2 } from "lucide-react";
+
+interface SettingsContextType {
+    form: ReturnType<typeof useSettings>["form"];
+    meta: ConfigMeta | null;
+}
+
+const SettingsContext = createContext<SettingsContextType | null>(null);
+
+export const useSettingsForm = () => {
+    const context = useContext(SettingsContext);
+    if (!context) throw new Error("useSettingsForm must be used within SettingsLayout");
+    return context;
+};
+
+export function SettingsLayout() {
+    const { form, meta, loading, isSaving, saveSettings } = useSettings();
+
+    if (loading) {
+        return (
+            <div className="flex-1 flex items-center justify-center flex-col gap-4 min-h-[400px]">
+                <Loader2 className="w-10 h-10 animate-spin text-primary" />
+                <p className="text-muted-foreground animate-pulse">Loading configuration...</p>
+            </div>
+        );
+    }
+
+    return (
+        <SettingsContext.Provider value={{ form, meta }}>
+            <main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
+            <div className="flex justify-between items-end">
+                <SectionHeader
+                    badge="System"
+                    title="Configuration"
+                    description="Manage bot behavior, economy, and game systems."
+                />
+                <Button 
+                    onClick={form.handleSubmit(saveSettings)} 
+                    disabled={isSaving || !form.formState.isDirty}
+                    className="shadow-lg hover:shadow-primary/20 transition-all font-bold min-w-[140px]"
+                >
+                    {isSaving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
+                    Save Changes
+                </Button>
+            </div>
+
+            <div className="glass-card rounded-2xl border border-border/50 overflow-hidden">
+                <Form {...form}>
+                    <form className="flex flex-col h-full">
+                        <div className="p-8">
+                            <Outlet />
+                        </div>
+                    </form>
+                </Form>
+            </div>
+            </main>
+        </SettingsContext.Provider>
+    );
+}

web/src/pages/settings/Systems.tsx

@@ -0,0 +1,338 @@
+import React from "react";
+import { useSettingsForm } from "./SettingsLayout";
+import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { CreditCard, Shield } from "lucide-react";
+import { fromSelectValue, toSelectValue, NONE_VALUE } from "@/hooks/use-settings";
+
+export function SystemsSettings() {
+    const { form, meta } = useSettingsForm();
+
+    return (
+        <div className="space-y-6 animate-in fade-in slide-up duration-500">
+            <Accordion type="multiple" className="w-full space-y-4" defaultValue={["lootdrop", "moderation"]}>
+                <AccordionItem value="lootdrop" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-500">
+                                <CreditCard className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Loot Drops</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="lootdrop.spawnChance"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Spawn Chance (0-1)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" step="0.01" min="0" max="1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="lootdrop.minMessages"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Min Messages</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <div className="bg-muted/30 p-4 rounded-lg space-y-3">
+                            <h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Rewards</h4>
+                            <div className="grid grid-cols-3 gap-4">
+                                <FormField
+                                    control={form.control}
+                                    name="lootdrop.reward.min"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Min</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="lootdrop.reward.max"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Max</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="lootdrop.reward.currency"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Currency</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} placeholder="AU" className="h-9 text-sm" />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="lootdrop.cooldownMs"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Cooldown (ms)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="lootdrop.activityWindowMs"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Activity Window (ms)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="trivia" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500 text-sm">
+                                🎯
+                            </div>
+                            <span className="font-bold">Trivia</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="trivia.entryFee"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Entry Fee (AU)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="text" className="bg-background/50" placeholder="50" />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">Cost to play</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="trivia.rewardMultiplier"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Reward Multiplier</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">multiplier</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="trivia.timeoutSeconds"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Timeout (seconds)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="trivia.cooldownMs"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Cooldown (ms)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <FormField
+                            control={form.control}
+                            name="trivia.difficulty"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Difficulty</FormLabel>
+                                    <Select onValueChange={field.onChange} value={field.value}>
+                                        <FormControl>
+                                            <SelectTrigger className="bg-background/50">
+                                                <SelectValue placeholder="Select difficulty" />
+                                            </SelectTrigger>
+                                        </FormControl>
+                                        <SelectContent>
+                                            <SelectItem value="easy">Easy</SelectItem>
+                                            <SelectItem value="medium">Medium</SelectItem>
+                                            <SelectItem value="hard">Hard</SelectItem>
+                                            <SelectItem value="random">Random</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </FormItem>
+                            )}
+                        />
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="moderation" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center text-red-500">
+                                <Shield className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Moderation</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-6 pb-4">
+                        <div className="space-y-4">
+                            <h4 className="font-bold text-sm text-foreground/80 uppercase tracking-wider">Case Management</h4>
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.cases.dmOnWarn"
+                                    render={({ field }) => (
+                                        <FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
+                                            <div className="space-y-0.5">
+                                                <FormLabel className="text-sm font-medium">DM on Warm</FormLabel>
+                                                <FormDescription className="text-xs">Notify via DM</FormDescription>
+                                            </div>
+                                            <FormControl>
+                                                <Switch checked={field.value} onCheckedChange={field.onChange} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.cases.logChannelId"
+                                    render={({ field }) => (
+                                        <FormItem className="glass-card p-4 rounded-xl border border-border/50">
+                                            <FormLabel className="text-sm">Log Channel</FormLabel>
+                                            <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                                <FormControl>
+                                                    <SelectTrigger className="bg-background/50 h-9">
+                                                        <SelectValue placeholder="Select a channel" />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    <SelectItem value={NONE_VALUE}>None</SelectItem>
+                                                    {meta?.channels.filter(c => c.type === 0).map(c => (
+                                                        <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                            <FormField
+                                control={form.control}
+                                name="moderation.cases.autoTimeoutThreshold"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Auto Timeout Threshold</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" min="0" className="bg-background/50" onChange={e => field.onChange(e.target.value ? Number(e.target.value) : undefined)} />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">Warnings before auto-timeout.</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <div className="space-y-4">
+                            <h4 className="font-bold text-sm text-foreground/80 uppercase tracking-wider">Message Pruning</h4>
+                            <div className="grid grid-cols-2 gap-4">
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.prune.maxAmount"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel className="text-xs">Max Amount</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.prune.confirmThreshold"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel className="text-xs">Confirm Threshold</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.prune.batchSize"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel className="text-xs">Batch Size</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.prune.batchDelayMs"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel className="text-xs">Batch Delay (ms)</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
+        </div>
+    );
+}

web/src/server.ts

@@ -6,6 +6,7 @@
 
 import { serve, spawn, type Subprocess } from "bun";
 import { join, resolve, dirname } from "path";
+import { logger } from "@shared/lib/logger";
 
 export interface WebServerConfig {
     port?: number;
@@ -39,7 +40,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
     const isDev = process.env.NODE_ENV !== "production";
 
     if (isDev) {
-        console.log("🛠️  Starting Web Bundler in Watch Mode...");
+        logger.info("web", "Starting Web Bundler in Watch Mode...");
         try {
             buildProcess = spawn(["bun", "run", "build.ts", "--watch"], {
                 cwd: webRoot,
@@ -47,7 +48,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                 stderr: "inherit",
             });
         } catch (error) {
-            console.error("Failed to start build process:", error);
+            logger.error("web", "Failed to start build process", error);
         }
     }
 
@@ -75,7 +76,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                 // Security Check: limit concurrent connections
                 const currentConnections = server.pendingWebSockets;
                 if (currentConnections >= MAX_CONNECTIONS) {
-                    console.warn(`⚠️ [WS] Connection rejected: limit reached (${currentConnections}/${MAX_CONNECTIONS})`);
+                    logger.warn("web", `Connection rejected: limit reached (${currentConnections}/${MAX_CONNECTIONS})`);
                     return new Response("Connection limit reached", { status: 429 });
                 }
 
@@ -94,7 +95,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                     const stats = await getFullDashboardStats();
                     return Response.json(stats);
                 } catch (error) {
-                    console.error("Error fetching dashboard stats:", error);
+                    logger.error("web", "Error fetching dashboard stats", error);
                     return Response.json(
                         { error: "Failed to fetch dashboard statistics" },
                         { status: 500 }
@@ -124,7 +125,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                     const activity = await activityPromise;
                     return Response.json(activity);
                 } catch (error) {
-                    console.error("Error fetching activity stats:", error);
+                    logger.error("web", "Error fetching activity stats", error);
                     return Response.json(
                         { error: "Failed to fetch activity statistics" },
                         { status: 500 }
@@ -160,7 +161,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                         return Response.json(result);
                     }
                 } catch (error) {
-                    console.error("Error executing administrative action:", error);
+                    logger.error("web", "Error executing administrative action", error);
                     return Response.json(
                         { error: "Failed to execute administrative action" },
                         { status: 500 }
@@ -168,6 +169,120 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                 }
             }
 
+            // Quest Management
+            if (url.pathname === "/api/quests" && req.method === "POST") {
+                try {
+                    const { questService } = await import("@shared/modules/quest/quest.service");
+                    const data = await req.json();
+
+                    // Basic validation could be added here or rely on service/DB
+                    const result = await questService.createQuest({
+                        name: data.name,
+                        description: data.description || "",
+                        triggerEvent: data.triggerEvent,
+                        requirements: { target: Number(data.target) || 1 },
+                        rewards: {
+                            xp: Number(data.xpReward) || 0,
+                            balance: Number(data.balanceReward) || 0
+                        }
+                    });
+
+                    return Response.json({ success: true, quest: result[0] });
+                } catch (error) {
+                    logger.error("web", "Error creating quest", error);
+                    return Response.json(
+                        { error: "Failed to create quest", details: error instanceof Error ? error.message : String(error) },
+                        { status: 500 }
+                    );
+                }
+            }
+
+            if (url.pathname === "/api/quests" && req.method === "GET") {
+                try {
+                    const { questService } = await import("@shared/modules/quest/quest.service");
+                    const quests = await questService.getAllQuests();
+
+                    return Response.json({
+                        success: true,
+                        data: quests.map(q => ({
+                            id: q.id,
+                            name: q.name,
+                            description: q.description,
+                            triggerEvent: q.triggerEvent,
+                            requirements: q.requirements,
+                            rewards: q.rewards,
+                        })),
+                    });
+                } catch (error) {
+                    logger.error("web", "Error fetching quests", error);
+                    return Response.json(
+                        { error: "Failed to fetch quests", details: error instanceof Error ? error.message : String(error) },
+                        { status: 500 }
+                    );
+                }
+            }
+
+            if (url.pathname.startsWith("/api/quests/") && req.method === "DELETE") {
+                const id = parseInt(url.pathname.split("/").pop() || "0", 10);
+
+                if (!id) {
+                    return Response.json({ error: "Invalid quest ID" }, { status: 400 });
+                }
+
+                try {
+                    const { questService } = await import("@shared/modules/quest/quest.service");
+                    const result = await questService.deleteQuest(id);
+
+                    if (result.length === 0) {
+                        return Response.json({ error: "Quest not found" }, { status: 404 });
+                    }
+
+                    return Response.json({ success: true, deleted: result[0].id });
+                } catch (error) {
+                    logger.error("web", "Error deleting quest", error);
+                    return Response.json(
+                        { error: "Failed to delete quest", details: error instanceof Error ? error.message : String(error) },
+                        { status: 500 }
+                    );
+                }
+            }
+
+            if (url.pathname.startsWith("/api/quests/") && req.method === "PUT") {
+                const id = parseInt(url.pathname.split("/").pop() || "0", 10);
+
+                if (!id) {
+                    return Response.json({ error: "Invalid quest ID" }, { status: 400 });
+                }
+
+                try {
+                    const { questService } = await import("@shared/modules/quest/quest.service");
+                    const data = await req.json();
+
+                    const result = await questService.updateQuest(id, {
+                        name: data.name,
+                        description: data.description,
+                        triggerEvent: data.triggerEvent,
+                        requirements: { target: Number(data.target) || 1 },
+                        rewards: {
+                            xp: Number(data.xpReward) || 0,
+                            balance: Number(data.balanceReward) || 0
+                        }
+                    });
+
+                    if (result.length === 0) {
+                        return Response.json({ error: "Quest not found" }, { status: 404 });
+                    }
+
+                    return Response.json({ success: true, quest: result[0] });
+                } catch (error) {
+                    logger.error("web", "Error updating quest", error);
+                    return Response.json(
+                        { error: "Failed to update quest", details: error instanceof Error ? error.message : String(error) },
+                        { status: 500 }
+                    );
+                }
+            }
+
             // Settings Management
             if (url.pathname === "/api/settings") {
                 try {
@@ -196,7 +311,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                         return Response.json({ success: true });
                     }
                 } catch (error) {
-                    console.error("Settings error:", error);
+                    logger.error("web", "Settings error", error);
                     return Response.json(
                         { error: "Failed to process settings request", details: error instanceof Error ? error.message : String(error) },
                         { status: 400 }
@@ -235,7 +350,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
 
                     return Response.json({ roles, channels, commands });
                 } catch (error) {
-                    console.error("Error fetching settings meta:", error);
+                    logger.error("web", "Error fetching settings meta", error);
                     return Response.json(
                         { error: "Failed to fetch metadata" },
                         { status: 500 }
@@ -294,7 +409,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
         websocket: {
             open(ws) {
                 ws.subscribe("dashboard");
-                console.log(`🔌 [WS] Client connected. Total: ${server.pendingWebSockets}`);
+                logger.debug("web", `Client connected. Total: ${server.pendingWebSockets}`);
 
                 // Send initial stats
                 getFullDashboardStats().then(stats => {
@@ -308,7 +423,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                             const stats = await getFullDashboardStats();
                             server.publish("dashboard", JSON.stringify({ type: "STATS_UPDATE", data: stats }));
                         } catch (error) {
-                            console.error("Error in stats broadcast:", error);
+                            logger.error("web", "Error in stats broadcast", error);
                         }
                     }, 5000);
                 }
@@ -319,7 +434,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
 
                     // Defense-in-depth: redundant length check before parsing
                     if (messageStr.length > MAX_PAYLOAD_BYTES) {
-                        console.error("❌ [WS] Payload exceeded maximum limit");
+                        logger.error("web", "Payload exceeded maximum limit");
                         return;
                     }
 
@@ -328,7 +443,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                     const parsed = WsMessageSchema.safeParse(rawData);
 
                     if (!parsed.success) {
-                        console.error("❌ [WS] Invalid message format:", parsed.error.issues);
+                        logger.error("web", "Invalid message format", parsed.error.issues);
                         return;
                     }
 
@@ -336,12 +451,12 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                         ws.send(JSON.stringify({ type: "PONG" }));
                     }
                 } catch (e) {
-                    console.error("❌ [WS] Failed to handle message:", e instanceof Error ? e.message : "Malformed JSON");
+                    logger.error("web", "Failed to handle message", e);
                 }
             },
             close(ws) {
                 ws.unsubscribe("dashboard");
-                console.log(`🔌 [WS] Client disconnected. Total remaining: ${server.pendingWebSockets}`);
+                logger.debug("web", `Client disconnected. Total remaining: ${server.pendingWebSockets}`);
 
                 // Stop broadcast interval if no clients left
                 if (server.pendingWebSockets === 0 && statsBroadcastInterval) {
@@ -382,12 +497,12 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
         // Helper to unwrap result or return default
         const unwrap = <T>(result: PromiseSettledResult<T>, defaultValue: T, name: string): T => {
             if (result.status === 'fulfilled') return result.value;
-            console.error(`Failed to fetch ${name}:`, result.reason);
+            logger.error("web", `Failed to fetch ${name}`, result.reason);
             return defaultValue;
         };
 
         const clientStats = unwrap(results[0], {
-            bot: { name: 'Aurora', avatarUrl: null },
+            bot: { name: 'Aurora', avatarUrl: null, status: null },
             guilds: 0,
             commandsRegistered: 0,
             commandsKnown: 0,
@@ -403,7 +518,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
         const recentEvents = unwrap(results[4], [], 'recentEvents');
         const totalItems = unwrap(results[5], 0, 'totalItems');
         const activeLootdrops = unwrap(results[6], [], 'activeLootdrops');
-        const leaderboards = unwrap(results[7], { topLevels: [], topWealth: [] }, 'leaderboards');
+        const leaderboards = unwrap(results[7], { topLevels: [], topWealth: [], topNetWorth: [] }, 'leaderboards');
         const lootdropState = unwrap(results[8], undefined, 'lootdropState');
 
         return {

web/styles/globals.css

@@ -277,4 +277,38 @@
   .delay-500 {
     animation-delay: 500ms;
   }
+
+  /* Sidebar collapsed state - center icons */
+  [data-state="collapsed"] [data-sidebar="header"],
+  [data-state="collapsed"] [data-sidebar="footer"] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  [data-state="collapsed"] [data-sidebar="content"] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  [data-state="collapsed"] [data-sidebar="group"] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    align-items: center !important;
+  }
+
+  [data-state="collapsed"] [data-sidebar="menu"] {
+    align-items: center !important;
+    width: 100% !important;
+  }
+
+  [data-state="collapsed"] [data-sidebar="menu-item"] {
+    display: flex !important;
+    justify-content: center !important;
+    width: 100% !important;
+  }
+
+  [data-state="collapsed"] [data-sidebar="menu-button"] {
+    justify-content: center !important;
+    gap: 0 !important;
+  }
 }