feat: add web asset rebuilding to update command and consolidate post-restart messages

- Detect web/src/** changes and trigger frontend rebuild after updates
- Add buildWebAssets flag to RestartContext and needsWebBuild to UpdateCheckResult
- Consolidate post-restart progress into single editable message
- Delete progress message after completion, show only final result

AGENTS.md

@@ -0,0 +1,238 @@
+# 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
+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` |

bot/commands/admin/update.ts

@@ -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/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.`,

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

shared/docs/COMMANDS.md

@@ -1,63 +0,0 @@
-# Command Reference
-
-This document lists all available slash commands in Aurora, categorized by their function.
-
-## Economy
-
-| Command | Description | Options | Permissions |
-|---|---|---|---|
-| `/balance` | View your or another user's balance. | `user` (Optional): The user to check. | Everyone |
-| `/daily` | Claim your daily currency reward and streak bonus. | None | Everyone |
-| `/pay` | Transfer currency to another user. | `user` (Required): Recipient.<br>`amount` (Required): Amount to send. | Everyone |
-| `/trade` | Start a trade session with another user. | `user` (Required): The user to trade with. | Everyone |
-| `/exam` | Take your weekly exam to earn rewards based on XP gain. | None | Everyone |
-
-## Inventory & Items
-
-| Command | Description | Options | Permissions |
-|---|---|---|---|
-| `/inventory` | View your or another user's inventory. | `user` (Optional): The user to check. | Everyone |
-| `/use` | Use an item from your inventory. | `item` (Required): The item to use (Autocomplete). | Everyone |
-
-## User & Social
-
-| Command | Description | Options | Permissions |
-|---|---|---|---|
-| `/profile` | View your or another user's Student ID card. | `user` (Optional): The user to view. | Everyone |
-| `/leaderboard` | View top players. | `type` (Required): 'Level / XP' or 'Balance'. | Everyone |
-| `/feedback` | Submit feedback, bug reports, or suggestions. | None | Everyone |
-| `/quests` | View your active quests. | None | Everyone |
-
-## Admin
-
-> [!IMPORTANT]
-> These commands require Administrator permissions or specific roles as configured.
-
-### General Management
-| Command | Description | Options |
-|---|---|---|
-| `/config` | Manage bot configuration. | `group` (Req): Section.<br>`key` (Req): Setting.<br>`value` (Req): New value. |
-| `/refresh` | Refresh commands or configuration cache. | `type`: 'Commands' or 'Config'. |
-| `/update` | Update the bot from the repository. | None |
-| `/features` | Enable/Disable system features. | `feature` (Req): Feature name.<br>`enabled` (Req): True/False. |
-| `/webhook` | Send a message via webhook. | `payload` (Req): JSON payload. |
-
-### Moderation
-| Command | Description | Options |
-|---|---|---|
-| `/warn` | Warn a user. | `user` (Req): Target.<br>`reason` (Req): Reason. |
-| `/warnings` | View active warnings for a user. | `user` (Req): Target. |
-| `/clearwarning`| Clear a specific warning. | `case_id` (Req): Case ID. |
-| `/case` | View details of a specific moderation case. | `case_id` (Req): Case ID. |
-| `/cases` | View moderation history for a user. | `user` (Req): Target. |
-| `/note` | Add a note to a user. | `user` (Req): Target.<br>`note` (Req): Content. |
-| `/notes` | View notes for a user. | `user` (Req): Target. |
-| `/prune` | Bulk delete messages. | `amount` (Req): Number (1-100). |
-
-### Game Admin
-| Command | Description | Options |
-|---|---|---|
-| `/create_item` | Create a new item in the database. | (Modal based interaction) |
-| `/create_color`| Create a new color role. | `name` (Req): Role name.<br>`hex` (Req): Hex color code. |
-| `/listing` | Manage shop listings (Admin view). | None (Context sensitive?) |
-| `/terminal` | Control the terminal display channel. | `action`: 'setup', 'update', 'clear'. |

shared/docs/CONFIGURATION.md

@@ -1,160 +0,0 @@
-# Configuration Guide
-
-This document outlines the structure and available options for the `config/config.json` file. The configuration is validated using Zod schemas at runtime (see `src/lib/config.ts`).
-
-## Core Structure
-
-### Leveling
-Configuration for the XP and leveling system.
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `base` | `number` | The base XP required for the first level. |
-| `exponent` | `number` | The exponent used to calculate XP curves. |
-| `chat.cooldownMs` | `number` | Time in milliseconds between XP gains from chat. |
-| `chat.minXp` | `number` | Minimum XP awarded per message. |
-| `chat.maxXp` | `number` | Maximum XP awarded per message. |
-
-### Economy
-Settings for currency, rewards, and transfers.
-
-#### Daily
-| Field | Type | Description |
-|-------|------|-------------|
-| `amount` | `integer` | Base amount granted by `/daily`. |
-| `streakBonus` | `integer` | Bonus amount per streak day. |
-| `weeklyBonus` | `integer` | Bonus amount for a 7-day streak. |
-| `cooldownMs` | `number` | Cooldown period for the command (usually 24h). |
-
-#### Transfers
-| Field | Type | Description |
-|-------|------|-------------|
-| `allowSelfTransfer` | `boolean` | Whether users can transfer money to themselves. |
-| `minAmount` | `integer` | Minimum amount required for a transfer. |
-
-#### Exam
-| Field | Type | Description |
-|-------|------|-------------|
-| `multMin` | `number` | Minimum multiplier for exam rewards. |
-| `multMax` | `number` | Maximum multiplier for exam rewards. |
-
-### Inventory
-| Field | Type | Description |
-|-------|------|-------------|
-| `maxStackSize` | `integer` | Maximum count of a single item in one slot. |
-| `maxSlots` | `number` | Total number of inventory slots available. |
-
-### Lootdrop
-Settings for the random chat loot drop events.
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `activityWindowMs` | `number` | Time window to track activity for spawning drops. |
-| `minMessages` | `number` | Minimum messages required in window to trigger drop. |
-| `spawnChance` | `number` | Probability (0-1) of a drop spawning when conditions met. |
-| `cooldownMs` | `number` | Minimum time between loot drops. |
-| `reward.min` | `number` | Minimum currency reward. |
-| `reward.max` | `number` | Maximum currency reward. |
-| `reward.currency` | `string` | The currency ID/Symbol used for rewards. |
-
-### Roles
-| Field | Type | Description |
-|-------|------|-------------|
-| `studentRole` | `string` | Discord Role ID for students. |
-| `visitorRole` | `string` | Discord Role ID for visitors. |
-| `colorRoles` | `string[]` | List of Discord Role IDs available as color roles. |
-
-### Moderation
-Automated moderation settings.
-
-#### Prune
-| Field | Type | Description |
-|-------|------|-------------|
-| `maxAmount` | `number` | Maximum messages to delete in one go. |
-| `confirmThreshold` | `number` | Amount above which confirmation is required. |
-| `batchSize` | `number` | Size of delete batches. |
-| `batchDelayMs` | `number` | Delay between batches. |
-
-#### Cases
-| Field | Type | Description |
-|-------|------|-------------|
-| `dmOnWarn` | `boolean` | Whether to DM users when they are warned. |
-| `logChannelId` | `string` | (Optional) Channel ID for moderation logs. |
-| `autoTimeoutThreshold` | `number` | (Optional) Warn count to trigger auto-timeout. |
-
-### System & Misc
-| Field | Type | Description |
-|-------|------|-------------|
-| `commands` | `Object` | Map of command names (keys) to boolean (values) to enable/disable them. |
-| `welcomeChannelId` | `string` | (Optional) Channel ID for welcome messages. |
-| `welcomeMessage` | `string` | (Optional) Custom welcome message text. |
-| `feedbackChannelId` | `string` | (Optional) Channel ID where feedback is posted. |
-| `terminal.channelId` | `string` | (Optional) Channel ID for terminal display. |
-| `terminal.messageId` | `string` | (Optional) Message ID for terminal display. |
-
-## Example Config
-
-```json
-{
-    "leveling": {
-        "base": 100,
-        "exponent": 1.5,
-        "chat": {
-            "cooldownMs": 60000,
-            "minXp": 15,
-            "maxXp": 25
-        }
-    },
-    "economy": {
-        "daily": {
-            "amount": "100",
-            "streakBonus": "10",
-            "weeklyBonus": "500",
-            "cooldownMs": 86400000
-        },
-        "transfers": {
-            "allowSelfTransfer": false,
-            "minAmount": "10"
-        },
-        "exam": {
-            "multMin": 1.0,
-            "multMax": 2.0
-        }
-    },
-    "inventory": {
-        "maxStackSize": "99",
-        "maxSlots": 20
-    },
-    "lootdrop": {
-        "activityWindowMs": 300000,
-        "minMessages": 10,
-        "spawnChance": 0.05,
-        "cooldownMs": 3600000,
-        "reward": {
-            "min": 50,
-            "max": 150,
-            "currency": "CREDITS"
-        }
-    },
-    "commands": {
-        "example": true
-    },
-    "studentRole": "123456789012345678",
-    "visitorRole": "123456789012345678",
-    "colorRoles": [],
-    "moderation": {
-        "prune": {
-            "maxAmount": 100,
-            "confirmThreshold": 50,
-            "batchSize": 100,
-            "batchDelayMs": 1000
-        },
-        "cases": {
-            "dmOnWarn": true
-        }
-    }
-}
-```
-
-> [!NOTE]
-> Fields marked as `integer` or `bigint` in the types can often be provided as strings in the JSON to ensure precision, but the system handles parsing them.

shared/docs/DATABASE.md

@@ -1,149 +0,0 @@
-# Database Schema
-
-This document outlines the database schema for the Aurora project. The database is PostgreSQL, managed via Drizzle ORM.
-
-## Tables
-
-### Users (`users`)
-Stores user data, economy, and progression.
-
-| Column | Type | Description |
-|---|---|---|
-| `id` | `bigint` | Primary Key. Discord User ID. |
-| `class_id` | `bigint` | Foreign Key -> `classes.id`. |
-| `username` | `varchar(255)` | User's Discord username. |
-| `is_active` | `boolean` | Whether the user is active (default: true). |
-| `balance` | `bigint` | User's currency balance. |
-| `xp` | `bigint` | User's experience points. |
-| `level` | `integer` | User's level. |
-| `daily_streak` | `integer` | Current streak of daily command usage. |
-| `settings` | `jsonb` | User-specific settings. |
-| `created_at` | `timestamp` | Record creation time. |
-| `updated_at` | `timestamp` | Last update time. |
-
-### Classes (`classes`)
-Available character classes.
-
-| Column | Type | Description |
-|---|---|---|
-| `id` | `bigint` | Primary Key. Custom ID. |
-| `name` | `varchar(255)` | Class name (Unique). |
-| `balance` | `bigint` | Class bank balance (shared/flavor). |
-| `role_id` | `varchar(255)` | Discord Role ID associated with the class. |
-
-### Items (`items`)
-Definitions of items available in the game.
-
-| Column | Type | Description |
-|---|---|---|
-| `id` | `serial` | Primary Key. Auto-incrementing ID. |
-| `name` | `varchar(255)` | Item name (Unique). |
-| `description` | `text` | Item description. |
-| `rarity` | `varchar(20)` | Common, Rare, etc. Default: 'Common'. |
-| `type` | `varchar(50)` | MATERIAL, CONSUMABLE, EQUIPMENT, etc. |
-| `usage_data` | `jsonb` | Effect data for consumables/usables. |
-| `price` | `bigint` | Base value of the item. |
-| `icon_url` | `text` | URL for the item's icon. |
-| `image_url` | `text` | URL for the item's large image. |
-
-### Inventory (`inventory`)
-Items held by users.
-
-| Column | Type | Description |
-|---|---|---|
-| `user_id` | `bigint` | PK/FK -> `users.id`. |
-| `item_id` | `integer` | PK/FK -> `items.id`. |
-| `quantity` | `bigint` | Amount held. Must be > 0. |
-
-### Transactions (`transactions`)
-Currency transaction history.
-
-| Column | Type | Description |
-|---|---|---|
-| `id` | `bigserial` | Primary Key. |
-| `user_id` | `bigint` | FK -> `users.id`. The user affecting the balance. |
-| `related_user_id` | `bigint` | FK -> `users.id`. The other party (if any). |
-| `amount` | `bigint` | Amount transferred. |
-| `type` | `varchar(50)` | Transaction type identifier. |
-| `description` | `text` | Human-readable description. |
-| `created_at` | `timestamp` | Time of transaction. |
-
-### Item Transactions (`item_transactions`)
-Item flow history.
-
-| Column | Type | Description |
-|---|---|---|
-| `id` | `bigserial` | Primary Key. |
-| `user_id` | `bigint` | FK -> `users.id`. |
-| `related_user_id` | `bigint` | FK -> `users.id`. |
-| `item_id` | `integer` | FK -> `items.id`. |
-| `quantity` | `bigint` | Amount gained (+) or lost (-). |
-| `type` | `varchar(50)` | TRADE, SHOP_BUY, DROP, etc. |
-| `description` | `text` | Description. |
-| `created_at` | `timestamp` | Time of transaction. |
-
-### Quests (`quests`)
-Quest definitions.
-
-| Column | Type | Description |
-|---|---|---|
-| `id` | `serial` | Primary Key. |
-| `name` | `varchar(255)` | Quest title. |
-| `description` | `text` | Quest text. |
-| `trigger_event` | `varchar(50)` | Event that triggers progress checks. |
-| `requirements` | `jsonb` | Completion criteria. |
-| `rewards` | `jsonb` | Rewards for completion. |
-
-### User Quests (`user_quests`)
-User progress on quests.
-
-| Column | Type | Description |
-|---|---|---|
-| `user_id` | `bigint` | PK/FK -> `users.id`. |
-| `quest_id` | `integer` | PK/FK -> `quests.id`. |
-| `progress` | `integer` | Current progress value. |
-| `completed_at` | `timestamp` | Completion time (null if active). |
-
-### User Timers (`user_timers`)
-Generic timers for cooldowns, temporary effects, etc.
-
-| Column | Type | Description |
-|---|---|---|
-| `user_id` | `bigint` | PK/FK -> `users.id`. |
-| `type` | `varchar(50)` | PK. Timer type (COOLDOWN, EFFECT, ACCESS). |
-| `key` | `varchar(100)` | PK. specific ID (e.g. 'daily'). |
-| `expires_at` | `timestamp` | When the timer expires. |
-| `metadata` | `jsonb` | Extra data. |
-
-### Lootdrops (`lootdrops`)
-Active chat loot drop events.
-
-| Column | Type | Description |
-|---|---|---|
-| `message_id` | `varchar(255)` | Primary Key. Discord Message ID. |
-| `channel_id` | `varchar(255)` | Discord Channel ID. |
-| `reward_amount` | `integer` | Currency amount. |
-| `currency` | `varchar(50)` | Currency type constant. |
-| `claimed_by` | `bigint` | FK -> `users.id`. Null if unclaimed. |
-| `created_at` | `timestamp` | Spawn time. |
-| `expires_at` | `timestamp` | Despawn time. |
-
-### Moderation Cases (`moderation_cases`)
-History of moderation actions.
-
-| Column | Type | Description |
-|---|---|---|
-| `id` | `bigserial` | Primary Key. |
-| `case_id` | `varchar(50)` | Unique friendly ID. |
-| `type` | `varchar(20)` | warn, timeout, kick, ban, etc. |
-| `user_id` | `bigint` | Target user ID. |
-| `username` | `varchar(255)` | Target username snapshot. |
-| `moderator_id` | `bigint` | Acting moderator ID. |
-| `moderator_name` | `varchar(255)` | Moderator username snapshot. |
-| `reason` | `text` | Reason for action. |
-| `metadata` | `jsonb` | Extra data. |
-| `active` | `boolean` | Is this case active? |
-| `created_at` | `timestamp` | Creation time. |
-| `resolved_at` | `timestamp` | Resolution/Expiration time. |
-| `resolved_by` | `bigint` | User ID who resolved it. |
-| `resolved_reason` | `text` | Reason for resolution. |

shared/docs/LOOTBOX_GUIDE.md

@@ -1,127 +0,0 @@
-# Lootbox Creation Guide
-
-Currently, the Item Wizard does not support creating **Lootbox** items directly. Instead, they must be inserted manually into the database. This guide details the required JSON structure for the `LOOTBOX` effect.
-
-## Item Structure
-
-To create a lootbox, you need to insert a row into the `items` table. The critical part is the `usageData` JSON column.
-
-```json
-{
-  "consume": true,
-  "effects": [
-    {
-      "type": "LOOTBOX",
-      "pool": [ ... ]
-    }
-  ]
-}
-```
-
-## Loot Table Structure
-
-The `pool` property is an array of `LootTableItem` objects. A random item is selected based on the total `weight` of all items in the pool.
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `type` | `string` | One of: `CURRENCY`, `ITEM`, `XP`, `NOTHING`. |
-| `weight` | `number` | The relative probability weight of this outcome. |
-| `message` | `string` | (Optional) Custom message to display when this outcome is selected. |
-
-### Outcome Types
-
-#### 1. Currency
-Gives the user coins.
-
-```json
-{
-  "type": "CURRENCY",
-  "weight": 50,
-  "amount": 100,          // Fixed amount OR
-  "minAmount": 50,        // Minimum random amount
-  "maxAmount": 150        // Maximum random amount
-}
-```
-
-#### 2. XP
-Gives the user Experience Points.
-
-```json
-{
-  "type": "XP",
-  "weight": 30,
-  "amount": 500           // Fixed amount OR range (minAmount/maxAmount)
-}
-```
-
-#### 3. Item
-Gives the user another item (by ID).
-
-```json
-{
-  "type": "ITEM",
-  "weight": 10,
-  "itemId": 42,           // The ID of the item to give
-  "amount": 1             // (Optional) Quantity to give, default 1
-}
-```
-
-#### 4. Nothing
-An empty roll.
-
-```json
-{
-  "type": "NOTHING",
-  "weight": 10,
-  "message": "The box was empty! Better luck next time."
-}
-```
-
-## Complete Example
-
-Here is a full SQL insert example (using a hypothetical SQL client or Drizzle studio) for a "Basic Lootbox":
-
-**Name**: Basic Lootbox
-**Type**: CONSUMABLE
-**Effect**:
-- 50% chance for 100-200 Coins
-- 30% chance for 500 XP
-- 10% chance for Item ID 5 (e.g. Rare Gem)
-- 10% chance for Nothing
-
-**JSON for `usageData`**:
-```json
-{
-  "consume": true,
-  "effects": [
-    {
-      "type": "LOOTBOX",
-      "pool": [
-        {
-          "type": "CURRENCY",
-          "weight": 50,
-          "minAmount": 100,
-          "maxAmount": 200
-        },
-        {
-          "type": "XP",
-          "weight": 30,
-          "amount": 500
-        },
-        {
-          "type": "ITEM",
-          "weight": 10,
-          "itemId": 5,
-          "amount": 1,
-          "message": "Startstruck! You found a Rare Gem!"
-        },
-        {
-          "type": "NOTHING",
-          "weight": 10,
-          "message": "It's empty..."
-        }
-      ]
-    }
-  ]
-}
-```

shared/docs/MODULE_STRUCTURE.md

@@ -1,72 +0,0 @@
-# Aurora Module Structure Guide
-
-This guide documents the standard module organization patterns used in the Aurora codebase. Following these patterns ensures consistency, maintainability, and clear separation of concerns.
-
-## Module Anatomy
-
-A typical module in `@modules/` is organized into several files, each with a specific responsibility. 
-
-Example: `trade` module
-- `trade.service.ts`: Business logic and data access.
-- `trade.view.ts`: Discord UI components (embeds, modals, select menus).
-- `trade.interaction.ts`: Handler for interaction events (buttons, modals, etc.).
-- `trade.types.ts`: TypeScript interfaces and types.
-- `trade.service.test.ts`: Unit tests for the service logic.
-
-## File Responsibilities
-
-### 1. Service (`*.service.ts`)
-The core of the module. It contains the business logic, database interactions (using Drizzle), and state management.
-- **Rules**:
-  - Export a singleton instance: `export const tradeService = new TradeService();`
-  - Should not contain Discord-specific rendering logic (return data, not embeds).
-  - Throw `UserError` for validation issues that should be shown to the user.
-
-### 2. View (`*.view.ts`)
-Handles the creation of Discord-specific UI elements like `EmbedBuilder`, `ActionRowBuilder`, and `ModalBuilder`.
-- **Rules**:
-  - Focus on formatting and presentation.
-  - Takes raw data (from services) and returns Discord components.
-
-### 3. Interaction Handler (`*.interaction.ts`)
-The entry point for Discord component interactions (buttons, select menus, modals).
-- **Rules**:
-  - Export a single handler function: `export async function handleTradeInteraction(interaction: Interaction) { ... }`
-  - Routes internal `customId` patterns to specific logic.
-  - Relies on `ComponentInteractionHandler` for centralized error handling.
-  - **No local try-catch** for standard validation errors; let them bubble up as `UserError`.
-
-### 4. Types (`*.types.ts`)
-Central location for module-specific TypeScript types and constants.
-- **Rules**:
-  - Define interfaces for complex data structures.
-  - Use enums or literal types for states and custom IDs.
-
-## Interaction Routing
-
-All interaction handlers must be registered in `src/lib/interaction.routes.ts`. 
-
-```typescript
-{
-    predicate: (i) => i.customId.startsWith("module_"),
-    handler: () => import("@/modules/module/module.interaction"),
-    method: 'handleModuleInteraction'
-}
-```
-
-## Error Handling Standards
-
-Aurora uses a centralized error handling pattern in `ComponentInteractionHandler`.
-
-1. **UserError**: Use this for validation errors or issues the user can fix (e.g., "Insufficient funds").
-   - `throw new UserError("You need more coins!");`
-2. **SystemError / Generic Error**: Use this for unexpected system failures.
-   - These are logged to the console/logger and show a generic "Unexpected error" message to the user.
-
-## Naming Conventions
-
-- **Directory Name**: Lowercase, singular (e.g., `trade`, `inventory`).
-- **File Names**: `moduleName.type.ts` (e.g., `trade.service.ts`).
-- **Class Names**: PascalCase (e.g., `TradeService`).
-- **Service Instances**: camelCase (e.g., `tradeService`).
-- **Interaction Method**: `handle[ModuleName]Interaction`.

shared/modules/admin/update.service.ts

@@ -2,7 +2,7 @@ import { exec } 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";
 
@@ -70,6 +70,14 @@ export class UpdateService {
                 file === "web/package.json" || file === "web/bun.lock"
             );
 
+            // Detect if web source files changed (requires rebuild)
+            const needsWebBuild = changedFiles.some(file =>
+                file.startsWith("web/src/") ||
+                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,6 +85,7 @@ export class UpdateService {
             return {
                 needsRootInstall,
                 needsWebInstall,
+                needsWebBuild,
                 needsMigrations,
                 changedFiles
             };
@@ -85,6 +94,7 @@ export class UpdateService {
             return {
                 needsRootInstall: false,
                 needsWebInstall: false,
+                needsWebBuild: false,
                 needsMigrations: false,
                 changedFiles: [],
                 error: e instanceof Error ? e : new Error(String(e))
@@ -259,43 +269,100 @@ 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
         };
 
+        // 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
         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");
 
                 result.installOutput = `📦 Root: ${rootOutput.trim() || "Done"}\n🌐 Web: ${webOutput.trim() || "Done"}`;
+                progress.installDone = true;
             } catch (err: unknown) {
                 result.installSuccess = false;
                 result.installOutput = err instanceof Error ? err.message : String(err);
+                progress.installDone = true; // Mark as done even on failure
                 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 execAsync("cd web && bun run build");
+                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()] });
+                progress.currentStep = "migrate";
+                await updateProgress();
+
                 const { stdout } = await execAsync("bun x drizzle-kit migrate");
                 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;
     }
 

shared/modules/quest/quest.service.ts

@@ -162,5 +162,40 @@ export const questService = {
                 })
                 .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);
     }
 };

web/bun.lock

@@ -22,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",
@@ -239,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=="],

web/package.json

@@ -26,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/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

@@ -46,7 +46,7 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
             <SidebarMenuButton
               tooltip={item.title}
               className={cn(
-                "transition-all duration-200 ease-in-out font-medium",
+                "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"
@@ -64,15 +64,18 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
             <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>
+              {item.subItems?.map((subItem) => (
+              <DropdownMenuItem key={subItem.title} asChild className="group/dropitem">
                 <Link 
                   to={subItem.url}
                   className={cn(
-                    "cursor-pointer",
-                    subItem.isActive && "text-primary bg-primary/10"
+                    "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>
@@ -89,20 +92,20 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
       <SidebarMenuItem className="flex flex-col">
         <CollapsibleTrigger asChild>
           <SidebarMenuButton
-            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"
-            )}
-          >
-            <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>
+              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>
@@ -112,13 +115,14 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
                   asChild
                   isActive={subItem.isActive}
                   className={cn(
-                    "transition-all duration-200",
+                    "transition-all duration-200 py-4 min-h-10 group/subitem",
                     subItem.isActive 
                       ? "text-primary bg-primary/10" 
-                      : "text-muted-foreground hover:text-foreground"
+                      : "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>

web/src/components/quest-form.tsx

@@ -10,6 +10,16 @@ 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"),
@@ -22,6 +32,12 @@ const questSchema = z.object({
 
 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" },
@@ -39,25 +55,42 @@ const TRIGGER_EVENTS = [
     { label: "Trivia Win", value: "TRIVIA_WIN" },
 ];
 
-export function QuestForm() {
+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: "",
-            description: "",
-            triggerEvent: "XP_GAIN",
-            target: 1,
-            xpReward: 100,
-            balanceReward: 500,
+            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 response = await fetch("/api/quests", {
-                method: "POST",
+            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",
                 },
@@ -66,16 +99,24 @@ export function QuestForm() {
 
             if (!response.ok) {
                 const errorData = await response.json();
-                throw new Error(errorData.error || "Failed to create quest");
+                throw new Error(errorData.error || (isEditMode ? "Failed to update quest" : "Failed to create quest"));
             }
 
-            toast.success("Quest created successfully!", {
-                description: `${data.name} has been added to the database.`,
+            toast.success(isEditMode ? "Quest updated successfully!" : "Quest created successfully!", {
+                description: `${data.name} has been ${isEditMode ? "updated" : "added to the database"}.`,
             });
-            form.reset();
+            form.reset({
+                name: "",
+                description: "",
+                triggerEvent: "XP_GAIN",
+                target: 1,
+                xpReward: 100,
+                balanceReward: 500,
+            });
+            onUpdate?.();
         } catch (error) {
             console.error("Submission error:", error);
-            toast.error("Failed to create quest", {
+            toast.error(isEditMode ? "Failed to update quest" : "Failed to create quest", {
                 description: error instanceof Error ? error.message : "An unknown error occurred",
             });
         } finally {
@@ -84,12 +125,12 @@ export function QuestForm() {
     };
 
     return (
-        <Card className="glass-card max-w-2xl mx-auto overflow-hidden">
+        <Card className="glass-card overflow-hidden">
             <div className="h-1.5 bg-primary w-full" />
             <CardHeader>
-                <CardTitle className="text-2xl font-bold text-primary">Create New Quest</CardTitle>
+                <CardTitle className="text-2xl font-bold text-primary">{isEditMode ? "Edit Quest" : "Create New Quest"}</CardTitle>
                 <CardDescription>
-                    Configure a new quest for the Aurora RPG academy.
+                    {isEditMode ? "Update the quest configuration." : "Configure a new quest for the Aurora RPG academy."}
                 </CardDescription>
             </CardHeader>
             <CardContent>
@@ -181,7 +222,10 @@ export function QuestForm() {
                                 name="xpReward"
                                 render={({ field }) => (
                                     <FormItem>
-                                        <FormLabel>XP Reward</FormLabel>
+                                        <FormLabel className="flex items-center gap-2">
+                                            <Star className="w-4 h-4 text-amber-400" />
+                                            XP Reward
+                                        </FormLabel>
                                         <FormControl>
                                             <Input 
                                                 type="number" 
@@ -200,7 +244,10 @@ export function QuestForm() {
                                 name="balanceReward"
                                 render={({ field }) => (
                                     <FormItem>
-                                        <FormLabel>AU Reward</FormLabel>
+                                        <FormLabel className="flex items-center gap-2">
+                                            <Coins className="w-4 h-4 text-amber-500" />
+                                            AU Reward
+                                        </FormLabel>
                                         <FormControl>
                                             <Input 
                                                 type="number" 
@@ -215,13 +262,33 @@ export function QuestForm() {
                             />
                         </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>
+                        {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>

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/ui/sidebar.tsx

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

@@ -1,10 +1,11 @@
 import * as React from "react"
 import { useLocation, type Location } from "react-router-dom"
-import { Home, Palette, ShieldCheck, Users, Settings, BarChart3, Scroll, type LucideIcon } from "lucide-react"
+import { Home, Palette, ShieldCheck, Settings, LayoutDashboard, Trophy, SlidersHorizontal, Coins, Cog, UserCog, type LucideIcon } from "lucide-react"
 
 export interface NavSubItem {
   title: string
   url: string
+  icon: LucideIcon
   isActive?: boolean
 }
 
@@ -43,9 +44,8 @@ const NAV_CONFIG: NavConfigItem[] = [
     url: "/admin", 
     icon: ShieldCheck,
     subItems: [
-      { title: "Overview", url: "/admin/overview" },
-      { title: "Quests", url: "/admin/quests" },
-
+      { title: "Overview", url: "/admin/overview", icon: LayoutDashboard },
+      { title: "Quests", url: "/admin/quests", icon: Trophy },
     ]
   },
   {
@@ -53,10 +53,10 @@ const NAV_CONFIG: NavConfigItem[] = [
     url: "/settings",
     icon: Settings,
     subItems: [
-      { title: "General", url: "/settings/general" },
-      { title: "Economy", url: "/settings/economy" },
-      { title: "Systems", url: "/settings/systems" },
-      { title: "Roles", url: "/settings/roles" },
+      { 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 },
     ]
   },
 ]

web/src/hooks/use-settings.ts

@@ -137,7 +137,9 @@ export function useSettings() {
             form.reset(config as any);
             setMeta(metaData);
         } catch (err) {
-            toast.error("Failed to load settings");
+            toast.error("Failed to load settings", {
+                description: "Unable to fetch bot configuration. Please try again."
+            });
             console.error(err);
         } finally {
             setLoading(false);
@@ -165,7 +167,9 @@ export function useSettings() {
             // Reload settings to ensure we have the latest state
             await loadSettings();
         } catch (error) {
-            toast.error("Failed to save settings");
+            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);

web/src/pages/AdminQuests.tsx

@@ -1,8 +1,124 @@
 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
@@ -11,8 +127,23 @@ export function AdminQuests() {
                 description="Create and manage quests for the Aurora RPG students."
             />
 
-            <div className="animate-in fade-in slide-up duration-700">
-                <QuestForm />
+            <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>
     );

web/src/pages/DesignSystem.tsx

@@ -349,9 +349,9 @@ export function DesignSystem() {
 function SectionTitle({ title }: { title: string }) {
     return (
         <div className="flex items-center gap-4 py-4">
-             <div className="h-0.5 bg-gradient-to-r from-transparent via-primary/50 to-transparent flex-1" />
+             <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-gradient-to-r from-transparent via-primary/50 to-transparent flex-1" />
+             <div className="h-0.5 bg-linear-to-r from-transparent via-primary/50 to-transparent flex-1" />
         </div>
     );
 }
@@ -369,7 +369,7 @@ function ColorSwatch({ label, color, text = "text-foreground", border = false }:
     return (
         <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-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+                <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">

web/src/server.ts

@@ -197,6 +197,92 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                 }
             }
 
+            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 {