From 6e57ab07e4fb1f1b9bf72102a15878ef1eb9a9d9 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 14 Jan 2026 15:12:51 +0100
Subject: [PATCH 01/32] chore: update gitiignore

---
 .agent/workflows/create-ticket.md | 63 --------------------
 .agent/workflows/map-impact.md    | 89 ---------------------------
 .agent/workflows/review.md        | 72 ----------------------
 .agent/workflows/work.md          | 99 -------------------------------
 .gitignore                        |  2 +
 5 files changed, 2 insertions(+), 323 deletions(-)
 delete mode 100644 .agent/workflows/create-ticket.md
 delete mode 100644 .agent/workflows/map-impact.md
 delete mode 100644 .agent/workflows/review.md
 delete mode 100644 .agent/workflows/work.md

diff --git a/.agent/workflows/create-ticket.md b/.agent/workflows/create-ticket.md
deleted file mode 100644
index a874ac9..0000000
--- a/.agent/workflows/create-ticket.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-description: Converts conversational brain dumps into structured, metric-driven Markdown tickets in the ./tickets directory.
----
-
-# WORKFLOW: PRAGMATIC ARCHITECT TICKET GENERATOR
-
-## 1. High-Level Goal
-Transform informal user "brain dumps" into high-precision, metric-driven engineering tickets stored as Markdown files in the `./tickets/` directory. The workflow enforces a quality gate via targeted inquiry before any file persistence occurs, ensuring all tasks are observable, measurable, and actionable.
-
-## 2. Assumptions & Clarifications
-- **Assumptions:** The agent has write access to the `./tickets/` and `/temp/` directories. The current date is accessible for naming conventions. "Metrics" refer to quantifiable constraints (latency, line counts, status codes).
-- **Ambiguities:** If the user provides a second brain dump while a ticket is in progress, the agent will prioritize the current workflow until completion or explicit cancellation.
-
-## 3. Stage Breakdown
-
-### Stage 1: Discovery & Quality Gate
-- **Stage Name:** Requirement Analysis
-- **Purpose:** Analyze input for vagueness and enforce the "Quality Gate" by extracting metrics.
-- **Inputs:** Raw user brain dump (text).
-- **Actions:** 1. Identify "Known Unknowns" (vague terms like "fast," "better," "clean").
-    2. Formulate exactly three (3) targeted questions to convert vague goals into comparable metrics.
-    3. Check for logical inconsistencies in the request.
-- **Outputs:** Three questions presented to the user.
-- **Persistence Strategy:** Save the original brain dump and the three questions to `/temp/pending_ticket_state.json`.
-
-### Stage 2: Drafting & Refinement
-- **Stage Name:** Ticket Drafting
-- **Purpose:** Synthesize the original dump and user answers into a structured Markdown draft.
-- **Inputs:** User responses to the three questions; `/temp/pending_ticket_state.json`.
-- **Actions:** 1. Construct a Markdown draft using the provided template.
-    2. Generate a slug-based filename: `YYYYMMDD-slug.md`.
-    3. Present the draft and filename to the user for review.
-- **Outputs:** Formatted Markdown text and suggested filename displayed in the chat.
-- **Persistence Strategy:** Update `/temp/pending_ticket_state.json` with the full Markdown content and the proposed filename.
-
-### Stage 3: Execution & Persistence
-- **Stage Name:** Finalization
-- **Purpose:** Commit the approved ticket to the permanent `./tickets/` directory.
-- **Inputs:** User confirmation (e.g., "Go," "Approved"); `/temp/pending_ticket_state.json`.
-- **Actions:** 1. Write the finalized Markdown content to `./tickets/[filename]`.
-    2. Delete the temporary state file in `/temp/`.
-- **Outputs:** Confirmation message containing the relative path to the new file.
-- **Persistence Strategy:** Permanent write to `./tickets/`.
-
-## 4. Data & File Contracts
-- **State File:** `/temp/pending_ticket_state.json`
-    - Schema: `{ "original_input": string, "questions": string[], "answers": string[], "draft_content": string, "filename": string, "step": integer }`
-- **Output File:** `./tickets/YYYYMMDD-[slug].md`
-    - Format: Markdown
-    - Sections: `# Title`, `## Context`, `## Acceptance Criteria`, `## Suggested Affected Files`, `## Technical Constraints`.
-
-## 5. Failure & Recovery Handling
-- **Incomplete Inputs:** If the user fails to answer the 3 questions, the agent must politely restate that metrics are required for high-precision engineering and repeat the questions.
-- **Inconsistencies:** If the user’s answers contradict the original dump, the agent must flag the contradiction and ask for a tie-break before drafting.
-- **Missing Directory:** If `./tickets/` does not exist during Stage 3, the agent must attempt to create it before writing the file.
-
-## 6. Final Deliverable Specification
-- **Format:** A valid Markdown file in the `./tickets/` folder.
-- **Quality Bar:**
-    - Zero fluff in the Context section.
-    - All Acceptance Criteria must be binary (pass/fail) or metric-based.
-    - Filename must strictly follow `YYYYMMDD-slug.md` (e.g., `20240520-auth-refactor.md`).
-    - No "Status" or "Priority" fields.
\ No newline at end of file
diff --git a/.agent/workflows/map-impact.md b/.agent/workflows/map-impact.md
deleted file mode 100644
index 3ec027d..0000000
--- a/.agent/workflows/map-impact.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-description: Analyzes the codebase to find dependencies and side effects related to a specific ticket.
----
-
-# WORKFLOW: Dependency Architect & Blast Radius Analysis
-
-## 1. High-Level Goal
-Perform a deterministic "Blast Radius" analysis for a code change defined in a Jira/Linear-style ticket. The agent will identify direct consumers, side effects, and relevant test suites, then append a structured "Impact Analysis" section to the original ticket file to guide developers and ensure high-velocity execution without regressions.
-
-## 2. Assumptions & Clarifications
-- **Location:** Tickets are stored in the `./tickets/` directory as Markdown files.
-- **Code Access:** The agent has full read access to the project root and subdirectories.
-- **Scope:** Dependency tracing is limited to "one level deep" (direct imports/references) unless a global configuration or core database schema change is detected.
-- **Ambiguity Handling:** If "Suggested Affected Files" are missing from the ticket, the agent will attempt to infer them from the "Acceptance Criteria" logic; if inference is impossible, the agent will halt and request the file list.
-
-## 3. Stage Breakdown
-
-### Stage 1: Ticket Parsing & Context Extraction
-- **Purpose:** Extract the specific files and logic constraints requiring analysis.
-- **Inputs:** A specific ticket filename (e.g., `./tickets/TASK-123.md`).
-- **Actions:**
-    1. Read the ticket file.
-    2. Extract the list of "Suggested Affected Files".
-    3. Extract keywords and logic from the "Acceptance Criteria".
-    4. Validate that all "Suggested Affected Files" exist in the current codebase.
-- **Outputs:** A JSON object containing the target file list and key logic requirements.
-- **Persistence Strategy:** Save extracted data to `/temp/context.json`.
-
-### Stage 2: Recursive Dependency Mapping
-- **Purpose:** Identify which external modules rely on the target files.
-- **Inputs:** `/temp/context.json`.
-- **Actions:**
-    1. For each file in the target list, perform a search (e.g., `grep` or AST walk) for import statements or references in the rest of the codebase.
-    2. Filter out internal references within the same module (focus on external consumers).
-    3. Detect if the change involves shared utilities (e.g., `utils/`, `common/`) or database schemas (e.g., `prisma/schema.prisma`).
-- **Outputs:** A list of unique consumer file paths and their specific usage context.
-- **Persistence Strategy:** Save findings to `/temp/dependencies.json`.
-
-### Stage 3: Test Suite Identification
-- **Purpose:** Locate the specific test files required to validate the change.
-- **Inputs:** `/temp/context.json` and `/temp/dependencies.json`.
-- **Actions:**
-    1. Search for files following patterns: `[filename].test.ts`, `[filename].spec.js`, or within `__tests__` folders related to affected files.
-    2. Identify integration or E2E tests that cover the consumer paths identified in Stage 2.
-- **Outputs:** A list of relevant test file paths.
-- **Persistence Strategy:** Save findings to `/temp/tests.json`.
-
-### Stage 4: Risk Hotspot Synthesis
-- **Purpose:** Interpret raw dependency data into actionable risk warnings.
-- **Inputs:** All files in `/temp/`.
-- **Actions:**
-    1. Analyze the volume of consumers; if a file has >5 consumers, flag it as a "High Impact Hotspot."
-    2. Check for breaking contract changes (e.g., interface modifications) based on the "Acceptance Criteria".
-    3. Formulate specific "Risk Hotspot" warnings (e.g., "Changing Auth interface affects 12 files; consider a wrapper.").
-- **Outputs:** A structured Markdown-ready report object.
-- **Persistence Strategy:** Save final report data to `/temp/final_analysis.json`.
-
-### Stage 5: Ticket Augmentation & Finalization
-- **Purpose:** Update the physical ticket file with findings.
-- **Inputs:** Original ticket file and `/temp/final_analysis.json`.
-- **Actions:**
-    1. Read the current content of the ticket file.
-    2. Generate a Markdown section titled `## Impact Analysis (Generated: 2026-01-09)`.
-    3. Append the Direct Consumers, Test Coverage, and Risk Hotspots sections.
-    4. Write the combined content back to the original file path.
-- **Outputs:** Updated Markdown ticket.
-- **Persistence Strategy:** None (Final Action).
-
-## 4. Data & File Contracts
-- **State File (`/temp/state.json`):** - `affected_files`: string[]
-  - `consumers`: { path: string, context: string }[]
-  - `tests`: string[]
-  - `risks`: string[]
-- **File Format:** All `/temp` files must be valid JSON.
-- **Ticket Format:** Standard Markdown. Use `###` for sub-headers in the generated section.
-
-## 5. Failure & Recovery Handling
-- **Missing Ticket:** If the ticket path is invalid, exit immediately with error: "TICKET_NOT_FOUND".
-- **Zero Consumers Found:** If no external consumers are found, state "No external dependencies detected" in the report; do not fail.
-- **Broken Imports:** If AST parsing fails due to syntax errors in the codebase, fallback to `grep` for string-based matching.
-- **Write Permission:** If the ticket file is read-only, output the final Markdown to the console and provide a warning.
-
-## 6. Final Deliverable Specification
-- **Format:** The original ticket file must be modified in-place.
-- **Content:**
-    - **Direct Consumers:** Bulleted list of `[File Path]: [Usage description]`.
-    - **Test Coverage:** Bulleted list of `[File Path]`.
-    - **Risk Hotspots:** Clear, one-sentence warnings for high-risk areas.
-- **Quality Bar:** No hallucinations. Every file path listed must exist in the repository. No deletions of original ticket content.
\ No newline at end of file
diff --git a/.agent/workflows/review.md b/.agent/workflows/review.md
deleted file mode 100644
index df25445..0000000
--- a/.agent/workflows/review.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-description: Performs a high-intensity, "hostile" technical audit of the provided code.
----
-
-# WORKFLOW: HOSTILE TECHNICAL AUDIT & SECURITY REVIEW
-
-## 1. High-Level Goal
-Execute a multi-pass, hyper-critical technical audit of provided source code to identify fatal logic flaws, security vulnerabilities, and architectural debt. The agent acts as a hostile reviewer with a "guilty until proven innocent" mindset, aiming to justify a REJECTED verdict unless the code demonstrates exceptional robustness and simplicity.
-
-## 2. Assumptions & Clarifications
-- **Assumption:** The user will provide either raw code snippets or paths to files within the agent's accessible environment.
-- **Assumption:** The agent has access to `/temp/` for multi-stage state persistence.
-- **Clarification:** If a "ticket description" or "requirement" is not provided, the agent will infer intent from the code but must flag "Lack of Context" as a potential risk.
-- **Clarification:** "Hostile" refers to a rigorous, zero-tolerance standard, not unprofessional language.
-
-## 3. Stage Breakdown
-
-### Stage 1: Contextual Ingestion & Dependency Mapping
-- **Purpose:** Map the attack surface and understand the logical flow before the audit.
-- **Inputs:** Target source code files.
-- **Actions:** - Identify all external dependencies and entry points.
-    - Map data flow from input to storage/output.
-    - Identify "High-Risk Zones" (e.g., auth logic, DB queries, memory management).
-- **Outputs:** A structured map of the code's architecture.
-- **Persistence Strategy:** Save `audit_map.json` to `/temp/` containing the file list and identified High-Risk Zones.
-
-### Stage 2: Security & Logic Stress Test (The "Hostile" Pass)
-- **Purpose:** Identify reasons to reject the code based on security and logical integrity.
-- **Inputs:** `/temp/audit_map.json` and source code.
-- **Actions:**
-    - Scan for injection, race conditions, and improper state handling.
-    - Simulate edge cases: null inputs, buffer overflows, and malformed data.
-    - Evaluate "Silent Failures": Does the code swallow exceptions or fail to log critical errors?
-- **Outputs:** List of fatal flaws and security risks.
-- **Persistence Strategy:** Save `vulnerabilities.json` to `/temp/`.
-
-### Stage 3: Performance & Velocity Debt Assessment
-- **Purpose:** Evaluate the "Pragmatic Performance" and maintainability of the implementation.
-- **Inputs:** Source code and `/temp/vulnerabilities.json`.
-- **Actions:**
-    - Identify redundant API calls or unnecessary allocations.
-    - Flag "Over-Engineering" (unnecessary abstractions) vs. "Lazy Code" (hardcoded values).
-    - Identify missing unit test scenarios for identified edge cases.
-- **Outputs:** List of optimization debt and missing test scenarios.
-- **Persistence Strategy:** Save `debt_and_tests.json` to `/temp/`.
-
-### Stage 4: Synthesis & Verdict Generation
-- **Purpose:** Compile all findings into the final "Hostile Audit" report.
-- **Inputs:** `/temp/vulnerabilities.json` and `/temp/debt_and_tests.json`.
-- **Actions:**
-    - Consolidate all findings into the mandated "Response Format."
-    - Apply the "Burden of Proof" rule: If any Fatal Flaws or Security Risks exist, the verdict is REJECTED.
-    - Ensure no sycophantic language is present.
-- **Outputs:** Final Audit Report.
-- **Persistence Strategy:** Final output is delivered to the user; `/temp/` files may be purged.
-
-## 4. Data & File Contracts
-- **Filename:** `/temp/audit_context.json` | **Schema:** `{ "high_risk_zones": [], "entry_points": [] }`
-- **Filename:** `/temp/findings.json` | **Schema:** `{ "fatal_flaws": [], "security_risks": [], "debt": [], "missing_tests": [] }`
-- **Final Report Format:** Markdown with specific headers: `## 🛑 FATAL FLAWS`, `## ⚠️ SECURITY & VULNERABILITIES`, `## 📉 VELOCITY DEBT`, `## 🧪 MISSING TESTS`, and `### VERDICT`.
-
-## 5. Failure & Recovery Handling
-- **Incomplete Input:** If the code is snippet-based and missing context, the agent must assume the worst-case scenario for the missing parts and flag them as "Critical Unknowns."
-- **Stage Failure:** If a specific file cannot be parsed, log the error in the `findings.json` and proceed with the remaining files.
-- **Clarification:** The agent will NOT ask for clarification mid-audit. It will make a "hostile assumption" and document it as a risk.
-
-## 6. Final Deliverable Specification
-- **Tone:** Senior Security Auditor. Clinical, critical, and direct.
-- **Acceptance Criteria:** - No "Good job" or introductory filler.
-    - Every flaw must include [Why it fails] and [How to fix it].
-    - Verdict must be REJECTED unless the code is "solid" (simple, robust, and secure).
-    - Must identify at least one specific edge case for the "Missing Tests" section.
\ No newline at end of file
diff --git a/.agent/workflows/work.md b/.agent/workflows/work.md
deleted file mode 100644
index 93e0af8..0000000
--- a/.agent/workflows/work.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-description: Work on a ticket
----
-
-# WORKFLOW: Automated Feature Implementation and Review Cycle
-
-## 1. High-Level Goal
-The objective of this workflow is to autonomously ingest a task from a local `/tickets` directory, establish a dedicated development environment via Git branching, implement the requested changes with incremental commits, validate the work through an internal review process, and finalize the lifecycle by cleaning up ticket artifacts and seeking user authorization for the final merge.
-
----
-
-## 2. Assumptions & Clarifications
-- **Assumptions:**
-  - The `/tickets` directory contains one or more files representing tasks (e.g., `.md` or `.txt`).
-  - The agent has authenticated access to the local Git repository.
-  - A "Review Workflow" exists as an executable command or internal process.
-  - The branch naming convention is `feature/[ticket-filename-slug]`.
-- **Ambiguities:**
-  - If multiple tickets exist, the agent will select the one with the earliest "Last Modified" timestamp.
-  - "Regular commits" are defined as committing after every logically complete file change or functional milestone.
-
----
-
-## 3. Stage Breakdown
-
-### Stage 1: Ticket Selection and Branch Initialization
-- **Purpose:** Identify the next task and prepare the workspace.
-- **Inputs:** Contents of the `/tickets` directory.
-- **Actions:**
-  1. Scan `/tickets` and select the oldest file.
-  2. Parse the ticket content to understand requirements.
-  3. Ensure the current working directory is a Git repository.
-  4. Create and switch to a new branch: `feature/[ticket-id]`.
-- **Outputs:** Active feature branch.
-- **Persistence Strategy:** Save `state.json` to `/temp` containing `ticket_path`, `branch_name`, and `start_time`.
-
-### Stage 2: Implementation and Incremental Committing
-- **Purpose:** Execute the technical requirements of the ticket.
-- **Inputs:** `/temp/state.json`, Ticket requirements.
-- **Actions:**
-  1. Modify codebase according to requirements.
-  2. For every distinct file change or logical unit of work:
-     - Run basic syntax checks.
-     - Execute `git add [file]`.
-     - Execute `git commit -m "feat: [brief description of change]"`
-  3. Repeat until the feature is complete.
-- **Outputs:** Committed code changes on the feature branch.
-- **Persistence Strategy:** Update `state.json` with `implementation_complete: true` and a list of `modified_files`.
-
-### Stage 3: Review Workflow Execution
-- **Purpose:** Validate the implementation against quality standards.
-- **Inputs:** `/temp/state.json`, Modified codebase.
-- **Actions:**
-  1. Trigger the "Review Workflow" (static analysis, tests, or linter).
-  2. If errors are found:
-     - Log errors to `/temp/review_log.txt`.
-     - Re-enter Stage 2 to apply fixes and commit.
-  3. If review passes:
-     - Proceed to Stage 4.
-- **Outputs:** Review results/logs.
-- **Persistence Strategy:** Update `state.json` with `review_passed: true`.
-
-### Stage 4: Cleanup and User Handoff
-- **Purpose:** Finalize the ticket lifecycle and request merge permission.
-- **Inputs:** `/temp/state.json`.
-- **Actions:**
-  1. Delete the ticket file from `/tickets` using the path stored in `state.json`.
-  2. Format a summary of changes and a request for merge.
-- **Outputs:** Deletion of the ticket file; user-facing summary.
-- **Persistence Strategy:** Clear `/temp/state.json` upon successful completion.
-
----
-
-## 4. Data & File Contracts
-- **State File:** `/temp/state.json`
-  - Format: JSON
-  - Schema: `{ "ticket_path": string, "branch_name": string, "implementation_complete": boolean, "review_passed": boolean }`
-- **Ticket Files:** Located in `/tickets/*` (Markdown or Plain Text).
-- **Logs:** `/temp/review_log.txt` (Plain Text) for capturing stderr from review tools.
-
----
-
-## 5. Failure & Recovery Handling
-- **Empty Ticket Directory:** If no files are found in `/tickets`, the agent will output "NO_TICKETS_FOUND" and terminate the workflow.
-- **Commit Failures:** If a commit fails (e.g., pre-commit hooks), the agent must resolve the hook violation before retrying the commit.
-- **Review Failure Loop:** If the review fails more than 3 times for the same issue, the agent must halt and output a "BLOCKER_REPORT" detailing the persistent errors to the user.
-- **State Recovery:** On context reset, the agent must check `/temp/state.json` to resume the workflow from the last recorded stage.
-
----
-
-## 6. Final Deliverable Specification
-- **Final Output:** A clear message to the user in the following format:
-  > **Task Completed:** [Ticket Name]
-  > **Branch:** [Branch Name]
-  > **Changes:** [Brief list of modified files]
-  > **Review Status:** Passed
-  > **Cleanup:** Ticket file removed from /tickets.
-  > **Action Required:** Would you like me to merge [Branch Name] into `main`? (Yes/No)
-- **Quality Bar:** Code must be committed with descriptive messages; the ticket file must be successfully deleted; the workspace must be left on the feature branch awaiting the merge command.
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 956a946..cfa4f05 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,7 @@
 .env
 node_modules
+docker-compose.override.yml
+.agent
 shared/db-logs
 shared/db/data
 shared/db/loga

From 4af2690babdbf822776bd58ff9fafcd7a1449059 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 14 Jan 2026 16:10:23 +0100
Subject: [PATCH 02/32] feat: implement branded discord embeds and versioning

---
 .agent/skills/create-ticket/SKILL.md          | 51 ++++++++++++++++++
 .agent/skills/review/SKILL.md                 | 54 +++++++++++++++++++
 .../001-refactor-command-validation.md        | 30 +++++++++++
 .../tickets/002-centralized-error-logging.md  | 31 +++++++++++
 .../work/tickets/003-modularize-web-server.md | 32 +++++++++++
 .../tickets/004-branded-discord-embeds.md     | 28 ++++++++++
 .../work/tickets/005-refactor-exam-logic.md   | 29 ++++++++++
 .gitignore                                    |  1 -
 bot/lib/embeds.ts                             | 34 +++++++++---
 bun.lock                                      |  2 +-
 package.json                                  |  1 +
 shared/lib/constants.ts                       |  6 +++
 tsconfig.json                                 |  1 +
 13 files changed, 291 insertions(+), 9 deletions(-)
 create mode 100644 .agent/skills/create-ticket/SKILL.md
 create mode 100644 .agent/skills/review/SKILL.md
 create mode 100644 .agent/work/tickets/001-refactor-command-validation.md
 create mode 100644 .agent/work/tickets/002-centralized-error-logging.md
 create mode 100644 .agent/work/tickets/003-modularize-web-server.md
 create mode 100644 .agent/work/tickets/004-branded-discord-embeds.md
 create mode 100644 .agent/work/tickets/005-refactor-exam-logic.md

diff --git a/.agent/skills/create-ticket/SKILL.md b/.agent/skills/create-ticket/SKILL.md
new file mode 100644
index 0000000..f854aea
--- /dev/null
+++ b/.agent/skills/create-ticket/SKILL.md
@@ -0,0 +1,51 @@
+---
+name: create-ticket
+description: Create a ticket for a task that needs to be worked on.
+---
+
+# Skill: create-ticket
+
+## Purpose
+
+Decompose high-level objectives into "Atomic Tickets" to maximize development velocity and minimize cognitive overhead.
+
+## Execution Rules
+
+1. **Directory Check:** Scan `.agent/work/tickets/`. Determine sequence number `NNN`.
+2. **Naming:** `.agent/work/tickets/NNN-brief-description.md`.
+3. **The Atomic/Velocity Test:** - Max 3 files modified.
+   - Max 80 lines of logic.
+   - Must be verifiable via a single command or test suite.
+   - If it exceeds these, **split it.**
+4. **Context Injection:** Include relevant code snippets or interface definitions directly in the ticket to prevent "context hunting."
+5. **No Breaking Changes:** If a ticket changes a shared interface, it must include the refactor for consumers or be split into a "Transition" ticket.
+
+## Ticket Template
+
+### Context & Goal
+
+[Why this matters + the specific problem it solves.]
+
+### Dependencies
+
+- [e.g., Ticket #NNN]
+
+### Affected Files
+
+- `path/to/file_A.ext`: [Specific change description]
+- `path/to/file_B.ext`: [Specific change description]
+
+### Technical Constraints & Strategy
+
+- [e.g., Implementation: Use the existing X wrapper instead of a new fetch call.]
+- [e.g., Constraint: Maintain backward compatibility with Y.]
+
+### Definition of Done (Binary)
+
+- [ ] Criterion 1 (e.g., `npm test` passes for `X.test.ts`)
+- [ ] Criterion 2 (e.g., UI component renders without hydration errors)
+- [ ] Criterion 3 (e.g., API response matches the schema in `types.ts`)
+
+### New Test Files
+
+- `path/to/test_A.ext`: [What is being tested]
diff --git a/.agent/skills/review/SKILL.md b/.agent/skills/review/SKILL.md
new file mode 100644
index 0000000..8481d15
--- /dev/null
+++ b/.agent/skills/review/SKILL.md
@@ -0,0 +1,54 @@
+---
+name: code-review
+description: A "Default-to-Fail" audit of codebase changes. Observation only; no file modifications.
+---
+
+# Skill: code-review
+
+## Purpose
+
+Protect the codebase from "feature creep," technical debt, and weak validation. This skill assumes the latest changes are flawed until they pass a rigorous audit.
+
+## Execution Rules
+
+1. **Read-Only Protocol:** This is a diagnostic skill. **Under no circumstances should any files be modified.** Provide feedback only.
+2. **Default-to-Fail:** Assume the code is broken or insufficient. The burden of proof lies on the code and its tests.
+3. **The Atomic Veto:** - Check the diff. If it exceeds 3 files or 80 lines of logic, **Veto immediately.**
+   - Reason: "Change exceeds atomic threshold; high risk of cognitive load."
+4. **Strictness Audit (Tests):**
+   - **Veto** if assertions are fuzzy (e.g., `toBeTruthy()`).
+   - **Veto** if there is no "Red Path" (failure case) test.
+   - **Veto** if the test is "loose" (e.g., doesn't check specific property values).
+5. **Direct Feedback:** No sycophancy. Use "Blockers" for issues and "Verdict: APPROVE" only when the code is bulletproof.
+
+## Review Template
+
+### Verdict: [FAIL / APPROVE]
+
+**Primary Blocker:** [One sentence identifying the biggest reason for rejection.]
+
+---
+
+### 1. Atomic Constraint Check
+
+- **Files Changed:** [Count] / 3
+- **Logic Lines:** [Count] / 80
+- **Status:** [PASS / FAIL (Veto if FAIL)]
+
+### 2. Test Strictness Audit
+
+- **Assertion Quality:** [List specific lines with fuzzy matchers. Demand strict equality.]
+- **Failure Coverage:** [Does a test exist for the 'Error/Empty' state? If no, FAIL.]
+- **Logic Sync:** [Does the test actually exercise the logic added, or just side effects?]
+
+### 3. Logic & Resilience
+
+- **Unchecked States:** [Identify unhandled nulls, undefineds, or missing error catches.]
+- **Efficiency:** [Is there a faster path or a redundant operation?]
+
+### 4. Direct Actionables
+
+_Note: The reviewer does not apply these. The user/agent must create a ticket or apply fixes manually._
+
+1. [Specific fix for Blocker 1]
+2. [Specific fix for Blocker 2]
diff --git a/.agent/work/tickets/001-refactor-command-validation.md b/.agent/work/tickets/001-refactor-command-validation.md
new file mode 100644
index 0000000..9c0c946
--- /dev/null
+++ b/.agent/work/tickets/001-refactor-command-validation.md
@@ -0,0 +1,30 @@
+### Context & Goal
+
+Currently, every command manually performs checks like user existence or maintenance mode, or these are hardcoded into the `CommandHandler`. Standardizing these requirements in the command definition itself makes the code cleaner and more declarative.
+
+### Dependencies
+
+- None
+
+### Affected Files
+
+- `shared/lib/types.ts`: Update `Command` interface to include a optional `requirements` object.
+- `bot/lib/handlers/CommandHandler.ts`: Update to read and enforce these requirements.
+- `bot/commands/economy/balance.ts`: Refactor to use the new requirements (example).
+
+### Technical Constraints & Strategy
+
+- Implementation: Use a standardized `requirements` object in the `Command` interface.
+- Requirements could include: `userExists: boolean`, `permissions: string[]`, `devOnly: boolean`.
+- Ensure `CommandHandler` provides clear error messages to the user when a requirement fails.
+
+### Definition of Done (Binary)
+
+- [ ] `Command` interface updated in `types.ts`.
+- [ ] `CommandHandler.ts` enforces requirements before executing command.
+- [ ] At least one command (e.g., `balance`) is refactored to use the new system.
+- [ ] Clear error embeds are shown to the user when requirements aren't met.
+
+### New Test Files
+
+- None (Verification via manual testing of command execution).
diff --git a/.agent/work/tickets/002-centralized-error-logging.md b/.agent/work/tickets/002-centralized-error-logging.md
new file mode 100644
index 0000000..607c759
--- /dev/null
+++ b/.agent/work/tickets/002-centralized-error-logging.md
@@ -0,0 +1,31 @@
+### Context & Goal
+
+The bot currently relies on `console.error` which is hard to track and lacks context. A centralized error logging service will allow for better debugging, persistent error logs, and future integration with services like Sentry or Discord webhooks for alerts.
+
+### Dependencies
+
+- None
+
+### Affected Files
+
+- `shared/lib/logger.ts`: New file for the unified logger service.
+- `bot/lib/handlers/CommandHandler.ts`: Update to use the new logger for command errors.
+- `web/src/server.ts`: Update to use the new logger for API and WebSocket errors.
+
+### Technical Constraints & Strategy
+
+- Implementation: Create a `Logger` class/object in `shared/lib`.
+- Support log levels: `info`, `warn`, `error`, `debug`.
+- Errors should capture: timestamp, source (bot/web), error message, and stack trace if available.
+- For now, logging to console and a local log file (e.g., `logs/error.log`) is sufficient.
+
+### Definition of Done (Binary)
+
+- [ ] `Logger` service implemented in `shared/lib/logger.ts`.
+- [ ] Command errors are logged via the new service.
+- [ ] Web server errors are logged via the new service.
+- [ ] Log output is formatted consistently.
+
+### New Test Files
+
+- `shared/lib/logger.test.ts`: Verify logger output and file writing.
diff --git a/.agent/work/tickets/003-modularize-web-server.md b/.agent/work/tickets/003-modularize-web-server.md
new file mode 100644
index 0000000..45b7db2
--- /dev/null
+++ b/.agent/work/tickets/003-modularize-web-server.md
@@ -0,0 +1,32 @@
+### Context & Goal
+
+The current `web/src/server.ts` is a monolithic file with a very long `fetch` handler. This makes it difficult to read and maintain. Modularizing the logic into separate route handlers and middleware-like functions will improve code quality and scalability.
+
+### Dependencies
+
+- None
+
+### Affected Files
+
+- `web/src/server.ts`: Refactor to use modular handlers.
+- `web/src/routes/api.ts`: New file for API route definitions.
+- `web/src/routes/static.ts`: New file for static file serving logic.
+- `web/src/routes/websocket.ts`: New file for WebSocket event handling.
+
+### Technical Constraints & Strategy
+
+- Implementation: Move different responsibilities (API, Static, WS) into separate files.
+- The main `serve` configuration should just call these modules.
+- Ensure the SPA fallback logic remains intact.
+
+### Definition of Done (Binary)
+
+- [ ] `web/src/server.ts` length reduced by at least 50%.
+- [ ] API routes moved to dedicated module.
+- [ ] Static file serving moved to dedicated module.
+- [ ] WebSocket logic moved to dedicated module.
+- [ ] Dashboard still loads and functions correctly.
+
+### New Test Files
+
+- None (Verification via manual testing of the dashboard).
diff --git a/.agent/work/tickets/004-branded-discord-embeds.md b/.agent/work/tickets/004-branded-discord-embeds.md
new file mode 100644
index 0000000..951163c
--- /dev/null
+++ b/.agent/work/tickets/004-branded-discord-embeds.md
@@ -0,0 +1,28 @@
+### Context & Goal
+
+Enhance the user experience by standardizing the look and feel of Discord embeds. Adding consistent branding like a custom footer (with version info) and using the bot's accent color will make the bot feel more professional.
+
+### Dependencies
+
+- None
+
+### Affected Files
+
+- `bot/lib/embeds.ts`: Update standard embed creators.
+- `shared/lib/constants.ts`: Add branding-related constants (colors, footer text).
+
+### Technical Constraints & Strategy
+
+- Implementation: Update `createBaseEmbed` and other helpers to automatically include footers and standard colors.
+- Use info from `package.json` for versioning in the footer.
+- Ensure the changes don't break existing layouts where custom colors might be needed.
+
+### Definition of Done (Binary)
+
+- [x] All standard embeds now include a consistent footer.
+- [x] Embeds use a predefined brand color by default.
+- [x] Version number is automatically pulled for the footer.
+
+### New Test Files
+
+- None.
diff --git a/.agent/work/tickets/005-refactor-exam-logic.md b/.agent/work/tickets/005-refactor-exam-logic.md
new file mode 100644
index 0000000..3c65355
--- /dev/null
+++ b/.agent/work/tickets/005-refactor-exam-logic.md
@@ -0,0 +1,29 @@
+### Context & Goal
+
+The `exam` command currently contains a lot of business logic, including reward calculations, timer management, and complex database transactions. Moving this logic to a dedicated `ExamService` will improve testability, maintainability, and keep the command file focused on user interaction.
+
+### Dependencies
+
+- None
+
+### Affected Files
+
+- `shared/modules/economy/exam.service.ts`: New file for the exam logic.
+- `bot/commands/economy/exam.ts`: Refactor to use the new service.
+
+### Technical Constraints & Strategy
+
+- Implementation: Create an `ExamService` that handles `getExamStatus`, `takeExam`, and `registerForExam`.
+- The command should only handle user input and formatting the response embeds based on the service's result.
+- Ensure the Drizzle transactions are correctly handled within the service.
+
+### Definition of Done (Binary)
+
+- [ ] `ExamService` implemented with methods for all exam-related operations.
+- [ ] `bot/commands/economy/exam.ts` refactored to use the service.
+- [ ] Logic is covered by unit tests in a new test file.
+- [ ] Manual verification shows the exam command still works as expected.
+
+### New Test Files
+
+- `shared/modules/economy/exam.service.test.ts`: Unit tests for reward calculations and state transitions.
diff --git a/.gitignore b/.gitignore
index cfa4f05..cab42e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,6 @@
 .env
 node_modules
 docker-compose.override.yml
-.agent
 shared/db-logs
 shared/db/data
 shared/db/loga
diff --git a/bot/lib/embeds.ts b/bot/lib/embeds.ts
index 6e618af..e8645d0 100644
--- a/bot/lib/embeds.ts
+++ b/bot/lib/embeds.ts
@@ -1,4 +1,15 @@
 import { Colors, type ColorResolvable, EmbedBuilder } from "discord.js";
+import { BRANDING } from "@shared/lib/constants";
+import pkg from "../../package.json";
+
+/**
+ * Applies standard branding to an embed.
+ */
+function applyBranding(embed: EmbedBuilder): EmbedBuilder {
+    return embed.setFooter({ 
+        text: `${BRANDING.FOOTER_TEXT} v${pkg.version}` 
+    });
+}
 
 /**
  * Creates a standardized error embed.
@@ -7,11 +18,13 @@ import { Colors, type ColorResolvable, EmbedBuilder } from "discord.js";
  * @returns An EmbedBuilder instance configured as an error.
  */
 export function createErrorEmbed(message: string, title: string = "Error"): EmbedBuilder {
-    return new EmbedBuilder()
+    const embed = new EmbedBuilder()
         .setTitle(`❌ ${title}`)
         .setDescription(message)
         .setColor(Colors.Red)
         .setTimestamp();
+    
+    return applyBranding(embed);
 }
 
 /**
@@ -21,11 +34,13 @@ export function createErrorEmbed(message: string, title: string = "Error"): Embe
  * @returns An EmbedBuilder instance configured as a warning.
  */
 export function createWarningEmbed(message: string, title: string = "Warning"): EmbedBuilder {
-    return new EmbedBuilder()
+    const embed = new EmbedBuilder()
         .setTitle(`⚠️ ${title}`)
         .setDescription(message)
         .setColor(Colors.Yellow)
         .setTimestamp();
+
+    return applyBranding(embed);
 }
 
 /**
@@ -35,11 +50,13 @@ export function createWarningEmbed(message: string, title: string = "Warning"):
  * @returns An EmbedBuilder instance configured as a success.
  */
 export function createSuccessEmbed(message: string, title: string = "Success"): EmbedBuilder {
-    return new EmbedBuilder()
+    const embed = new EmbedBuilder()
         .setTitle(`✅ ${title}`)
         .setDescription(message)
         .setColor(Colors.Green)
         .setTimestamp();
+
+    return applyBranding(embed);
 }
 
 /**
@@ -49,11 +66,13 @@ export function createSuccessEmbed(message: string, title: string = "Success"):
  * @returns An EmbedBuilder instance configured as info.
  */
 export function createInfoEmbed(message: string, title: string = "Info"): EmbedBuilder {
-    return new EmbedBuilder()
+    const embed = new EmbedBuilder()
         .setTitle(`ℹ️ ${title}`)
         .setDescription(message)
         .setColor(Colors.Blue)
         .setTimestamp();
+
+    return applyBranding(embed);
 }
 
 /**
@@ -65,11 +84,12 @@ export function createInfoEmbed(message: string, title: string = "Info"): EmbedB
  */
 export function createBaseEmbed(title?: string, description?: string, color?: ColorResolvable): EmbedBuilder {
     const embed = new EmbedBuilder()
-        .setTimestamp();
+        .setTimestamp()
+        .setColor(color ?? BRANDING.COLOR);
 
     if (title) embed.setTitle(title);
     if (description) embed.setDescription(description);
-    if (color) embed.setColor(color);
 
-    return embed;
+    return applyBranding(embed);
 }
+
diff --git a/bun.lock b/bun.lock
index f46e892..2fba0dd 100644
--- a/bun.lock
+++ b/bun.lock
@@ -9,12 +9,12 @@
         "discord.js": "^14.25.1",
         "dotenv": "^17.2.3",
         "drizzle-orm": "^0.44.7",
+        "postgres": "^3.4.7",
         "zod": "^4.1.13",
       },
       "devDependencies": {
         "@types/bun": "latest",
         "drizzle-kit": "^0.31.7",
-        "postgres": "^3.4.7",
       },
       "peerDependencies": {
         "typescript": "^5",
diff --git a/package.json b/package.json
index 95cceac..8ac85e5 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "app",
+  "version": "1.0.0",
   "module": "bot/index.ts",
   "type": "module",
   "private": true,
diff --git a/shared/lib/constants.ts b/shared/lib/constants.ts
index 3d85bad..0df339f 100644
--- a/shared/lib/constants.ts
+++ b/shared/lib/constants.ts
@@ -85,3 +85,9 @@ export enum TriviaCategory {
     ANIMALS = 27,
     ANIME_MANGA = 31,
 }
+
+export const BRANDING = {
+    COLOR: 0x00d4ff as const,
+    FOOTER_TEXT: 'AuroraBot' as const,
+};
+
diff --git a/tsconfig.json b/tsconfig.json
index 6e79a5d..e4570b6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,7 @@
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
+    "resolveJsonModule": true,
     "noEmit": true,
     // Best practices
     "strict": true,

From 915f1bc4ad341ee42ce403f01bad005690163881 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 14 Jan 2026 16:26:27 +0100
Subject: [PATCH 03/32] fix(economy): improve daily cooldown message and
 consolidate UserError class

---
 .../completed/004-branded-discord-embeds.md   | 28 +++++++++++++++++++
 bot/commands/admin/listing.ts                 |  6 ++--
 bot/commands/economy/daily.ts                 |  9 +++---
 bot/commands/economy/exam.ts                  |  6 ++--
 bot/commands/economy/pay.ts                   |  2 +-
 bot/commands/economy/trivia.ts                |  2 +-
 bot/commands/inventory/use.ts                 |  2 +-
 bot/lib/errors.ts                             | 18 ------------
 .../handlers/ComponentInteractionHandler.ts   |  2 +-
 bot/modules/economy/lootdrop.interaction.ts   |  2 +-
 bot/modules/economy/shop.interaction.ts       |  2 +-
 bot/modules/feedback/feedback.interaction.ts  |  2 +-
 bot/modules/trade/trade.interaction.ts        |  2 +-
 bot/modules/trivia/trivia.interaction.ts      |  2 +-
 bot/modules/user/enrollment.interaction.ts    |  2 +-
 package.json                                  |  2 +-
 shared/lib/constants.ts                       |  2 +-
 shared/modules/economy/economy.service.ts     |  2 +-
 18 files changed, 52 insertions(+), 41 deletions(-)
 create mode 100644 .agent/work/completed/004-branded-discord-embeds.md
 delete mode 100644 bot/lib/errors.ts

diff --git a/.agent/work/completed/004-branded-discord-embeds.md b/.agent/work/completed/004-branded-discord-embeds.md
new file mode 100644
index 0000000..951163c
--- /dev/null
+++ b/.agent/work/completed/004-branded-discord-embeds.md
@@ -0,0 +1,28 @@
+### Context & Goal
+
+Enhance the user experience by standardizing the look and feel of Discord embeds. Adding consistent branding like a custom footer (with version info) and using the bot's accent color will make the bot feel more professional.
+
+### Dependencies
+
+- None
+
+### Affected Files
+
+- `bot/lib/embeds.ts`: Update standard embed creators.
+- `shared/lib/constants.ts`: Add branding-related constants (colors, footer text).
+
+### Technical Constraints & Strategy
+
+- Implementation: Update `createBaseEmbed` and other helpers to automatically include footers and standard colors.
+- Use info from `package.json` for versioning in the footer.
+- Ensure the changes don't break existing layouts where custom colors might be needed.
+
+### Definition of Done (Binary)
+
+- [x] All standard embeds now include a consistent footer.
+- [x] Embeds use a predefined brand color by default.
+- [x] Version number is automatically pulled for the footer.
+
+### New Test Files
+
+- None.
diff --git a/bot/commands/admin/listing.ts b/bot/commands/admin/listing.ts
index a9f15b6..7468e18 100644
--- a/bot/commands/admin/listing.ts
+++ b/bot/commands/admin/listing.ts
@@ -10,7 +10,7 @@ import {
 } from "discord.js";
 import { inventoryService } from "@shared/modules/inventory/inventory.service";
 import { createSuccessEmbed, createErrorEmbed, createBaseEmbed } from "@lib/embeds";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { items } from "@db/schema";
 import { ilike, isNotNull, and } from "drizzle-orm";
 import { DrizzleClient } from "@shared/db/DrizzleClient";
@@ -65,10 +65,10 @@ export const listing = createCommand({
             await interaction.editReply({ content: `✅ Listing for **${item.name}** posted in ${targetChannel}.` });
         } catch (error: any) {
             if (error instanceof UserError) {
-                await interaction.reply({ embeds: [createErrorEmbed(error.message)], ephemeral: true });
+                await interaction.editReply({ embeds: [createErrorEmbed(error.message)] });
             } else {
                 console.error("Error creating listing:", error);
-                await interaction.reply({ embeds: [createErrorEmbed("An unexpected error occurred.")], ephemeral: true });
+                await interaction.editReply({ embeds: [createErrorEmbed("An unexpected error occurred.")] });
             }
         }
     },
diff --git a/bot/commands/economy/daily.ts b/bot/commands/economy/daily.ts
index 3a6b5c4..09a6b19 100644
--- a/bot/commands/economy/daily.ts
+++ b/bot/commands/economy/daily.ts
@@ -3,13 +3,14 @@ import { createCommand } from "@shared/lib/utils";
 import { SlashCommandBuilder } from "discord.js";
 import { economyService } from "@shared/modules/economy/economy.service";
 import { createErrorEmbed, createSuccessEmbed } from "@lib/embeds";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 
 export const daily = createCommand({
     data: new SlashCommandBuilder()
         .setName("daily")
         .setDescription("Claim your daily reward"),
     execute: async (interaction) => {
+        await interaction.deferReply();
         try {
             const result = await economyService.claimDaily(interaction.user.id);
 
@@ -21,14 +22,14 @@ export const daily = createCommand({
                 )
                 .setColor("Gold");
 
-            await interaction.reply({ embeds: [embed] });
+            await interaction.editReply({ embeds: [embed] });
 
         } catch (error: any) {
             if (error instanceof UserError) {
-                await interaction.reply({ embeds: [createErrorEmbed(error.message)], ephemeral: true });
+                await interaction.editReply({ embeds: [createErrorEmbed(error.message)] });
             } else {
                 console.error("Error claiming daily:", error);
-                await interaction.reply({ embeds: [createErrorEmbed("An unexpected error occurred.")], ephemeral: true });
+                await interaction.editReply({ embeds: [createErrorEmbed("An unexpected error occurred.")] });
             }
         }
     }
diff --git a/bot/commands/economy/exam.ts b/bot/commands/economy/exam.ts
index 890d184..926b2aa 100644
--- a/bot/commands/economy/exam.ts
+++ b/bot/commands/economy/exam.ts
@@ -2,7 +2,7 @@ import { createCommand } from "@shared/lib/utils";
 import { SlashCommandBuilder } from "discord.js";
 import { userService } from "@shared/modules/user/user.service";
 import { createErrorEmbed, createSuccessEmbed } from "@lib/embeds";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { userTimers, users } from "@db/schema";
 import { eq, and, sql } from "drizzle-orm";
 import { DrizzleClient } from "@shared/db/DrizzleClient";
@@ -195,10 +195,10 @@ export const exam = createCommand({
 
         } catch (error: any) {
             if (error instanceof UserError) {
-                await interaction.reply({ embeds: [createErrorEmbed(error.message)], ephemeral: true });
+                await interaction.editReply({ embeds: [createErrorEmbed(error.message)] });
             } else {
                 console.error("Error in exam command:", error);
-                await interaction.reply({ embeds: [createErrorEmbed("An unexpected error occurred.")], ephemeral: true });
+                await interaction.editReply({ embeds: [createErrorEmbed("An unexpected error occurred.")] });
             }
         }
     }
diff --git a/bot/commands/economy/pay.ts b/bot/commands/economy/pay.ts
index 2d87899..b51163d 100644
--- a/bot/commands/economy/pay.ts
+++ b/bot/commands/economy/pay.ts
@@ -5,7 +5,7 @@ import { economyService } from "@shared/modules/economy/economy.service";
 import { userService } from "@shared/modules/user/user.service";
 import { config } from "@shared/lib/config";
 import { createErrorEmbed, createSuccessEmbed } from "@lib/embeds";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 
 export const pay = createCommand({
     data: new SlashCommandBuilder()
diff --git a/bot/commands/economy/trivia.ts b/bot/commands/economy/trivia.ts
index f35a567..3463bfa 100644
--- a/bot/commands/economy/trivia.ts
+++ b/bot/commands/economy/trivia.ts
@@ -3,7 +3,7 @@ import { SlashCommandBuilder } from "discord.js";
 import { triviaService } from "@shared/modules/trivia/trivia.service";
 import { getTriviaQuestionView } from "@/modules/trivia/trivia.view";
 import { createErrorEmbed } from "@lib/embeds";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { config } from "@shared/lib/config";
 import { TriviaCategory } from "@shared/lib/constants";
 
diff --git a/bot/commands/inventory/use.ts b/bot/commands/inventory/use.ts
index 448a346..d425395 100644
--- a/bot/commands/inventory/use.ts
+++ b/bot/commands/inventory/use.ts
@@ -5,7 +5,7 @@ import { userService } from "@shared/modules/user/user.service";
 import { createErrorEmbed } from "@lib/embeds";
 import { getItemUseResultEmbed } from "@/modules/inventory/inventory.view";
 import type { ItemUsageData } from "@shared/lib/types";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { config } from "@shared/lib/config";
 
 export const use = createCommand({
diff --git a/bot/lib/errors.ts b/bot/lib/errors.ts
deleted file mode 100644
index 32bce8c..0000000
--- a/bot/lib/errors.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export class ApplicationError extends Error {
-    constructor(message: string) {
-        super(message);
-        this.name = this.constructor.name;
-    }
-}
-
-export class UserError extends ApplicationError {
-    constructor(message: string) {
-        super(message);
-    }
-}
-
-export class SystemError extends ApplicationError {
-    constructor(message: string) {
-        super(message);
-    }
-}
diff --git a/bot/lib/handlers/ComponentInteractionHandler.ts b/bot/lib/handlers/ComponentInteractionHandler.ts
index 4773bee..ac4a7eb 100644
--- a/bot/lib/handlers/ComponentInteractionHandler.ts
+++ b/bot/lib/handlers/ComponentInteractionHandler.ts
@@ -1,6 +1,6 @@
 import { ButtonInteraction, StringSelectMenuInteraction, ModalSubmitInteraction, MessageFlags } from "discord.js";
  
-import { UserError } from "@lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { createErrorEmbed } from "@lib/embeds";
 
 type ComponentInteraction = ButtonInteraction | StringSelectMenuInteraction | ModalSubmitInteraction;
diff --git a/bot/modules/economy/lootdrop.interaction.ts b/bot/modules/economy/lootdrop.interaction.ts
index 72f1893..fae70c3 100644
--- a/bot/modules/economy/lootdrop.interaction.ts
+++ b/bot/modules/economy/lootdrop.interaction.ts
@@ -1,6 +1,6 @@
 import { ButtonInteraction } from "discord.js";
 import { lootdropService } from "@shared/modules/economy/lootdrop.service";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { getLootdropClaimedMessage } from "./lootdrop.view";
 
 export async function handleLootdropInteraction(interaction: ButtonInteraction) {
diff --git a/bot/modules/economy/shop.interaction.ts b/bot/modules/economy/shop.interaction.ts
index 30b470e..0b397ae 100644
--- a/bot/modules/economy/shop.interaction.ts
+++ b/bot/modules/economy/shop.interaction.ts
@@ -1,7 +1,7 @@
 import { ButtonInteraction, MessageFlags } from "discord.js";
 import { inventoryService } from "@shared/modules/inventory/inventory.service";
 import { userService } from "@shared/modules/user/user.service";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 
 export async function handleShopInteraction(interaction: ButtonInteraction) {
     if (!interaction.customId.startsWith("shop_buy_")) return;
diff --git a/bot/modules/feedback/feedback.interaction.ts b/bot/modules/feedback/feedback.interaction.ts
index 4ccfc7e..4c67d6d 100644
--- a/bot/modules/feedback/feedback.interaction.ts
+++ b/bot/modules/feedback/feedback.interaction.ts
@@ -4,7 +4,7 @@ import { config } from "@shared/lib/config";
 import { AuroraClient } from "@/lib/BotClient";
 import { buildFeedbackMessage, getFeedbackModal } from "./feedback.view";
 import { FEEDBACK_CUSTOM_IDS, type FeedbackType, type FeedbackData } from "./feedback.types";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 
 export const handleFeedbackInteraction = async (interaction: Interaction) => {
     // Handle select menu for choosing feedback type
diff --git a/bot/modules/trade/trade.interaction.ts b/bot/modules/trade/trade.interaction.ts
index ea4a45b..acdc537 100644
--- a/bot/modules/trade/trade.interaction.ts
+++ b/bot/modules/trade/trade.interaction.ts
@@ -10,7 +10,7 @@ import {
 import { tradeService } from "@shared/modules/trade/trade.service";
 import { inventoryService } from "@shared/modules/inventory/inventory.service";
 import { createErrorEmbed, createWarningEmbed, createSuccessEmbed, createInfoEmbed } from "@lib/embeds";
-import { UserError } from "@lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { getTradeDashboard, getTradeMoneyModal, getItemSelectMenu, getTradeCompletedEmbed } from "./trade.view";
 
 
diff --git a/bot/modules/trivia/trivia.interaction.ts b/bot/modules/trivia/trivia.interaction.ts
index 5bf5006..69de286 100644
--- a/bot/modules/trivia/trivia.interaction.ts
+++ b/bot/modules/trivia/trivia.interaction.ts
@@ -1,7 +1,7 @@
 import { ButtonInteraction } from "discord.js";
 import { triviaService } from "@shared/modules/trivia/trivia.service";
 import { getTriviaResultView, getTriviaTimeoutView } from "./trivia.view";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 
 export async function handleTriviaInteraction(interaction: ButtonInteraction) {
     const parts = interaction.customId.split('_');
diff --git a/bot/modules/user/enrollment.interaction.ts b/bot/modules/user/enrollment.interaction.ts
index b15b0aa..bec444a 100644
--- a/bot/modules/user/enrollment.interaction.ts
+++ b/bot/modules/user/enrollment.interaction.ts
@@ -3,7 +3,7 @@ import { config } from "@shared/lib/config";
 import { getEnrollmentSuccessMessage } from "./enrollment.view";
 import { classService } from "@shared/modules/class/class.service";
 import { userService } from "@shared/modules/user/user.service";
-import { UserError } from "@/lib/errors";
+import { UserError } from "@shared/lib/errors";
 import { sendWebhookMessage } from "@/lib/webhookUtils";
 
 export async function handleEnrollmentInteraction(interaction: ButtonInteraction) {
diff --git a/package.json b/package.json
index 8ac85e5..f4225b0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.0.0",
+  "version": "1.1.3",
   "module": "bot/index.ts",
   "type": "module",
   "private": true,
diff --git a/shared/lib/constants.ts b/shared/lib/constants.ts
index 0df339f..653d187 100644
--- a/shared/lib/constants.ts
+++ b/shared/lib/constants.ts
@@ -88,6 +88,6 @@ export enum TriviaCategory {
 
 export const BRANDING = {
     COLOR: 0x00d4ff as const,
-    FOOTER_TEXT: 'AuroraBot' as const,
+    FOOTER_TEXT: 'Aurora' as const,
 };
 
diff --git a/shared/modules/economy/economy.service.ts b/shared/modules/economy/economy.service.ts
index b093401..6d026e4 100644
--- a/shared/modules/economy/economy.service.ts
+++ b/shared/modules/economy/economy.service.ts
@@ -87,7 +87,7 @@ export const economyService = {
             });
 
             if (cooldown && cooldown.expiresAt > now) {
-                throw new UserError(`Daily already claimed today. Next claim <t:${Math.floor(cooldown.expiresAt.getTime() / 1000)}:F>`);
+                throw new UserError(`You have already claimed your daily reward today.\nNext claim available: <t:${Math.floor(cooldown.expiresAt.getTime() / 1000)}:F> (<t:${Math.floor(cooldown.expiresAt.getTime() / 1000)}:R>)`);
             }
 
             // Get user for streak logic

From f79ee6fbc7ea20ded95f95d3d413005b1a66593b Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 14 Jan 2026 16:27:49 +0100
Subject: [PATCH 04/32] refactor: remove completed ticket file

---
 .../completed/004-branded-discord-embeds.md   | 28 -------------------
 1 file changed, 28 deletions(-)
 delete mode 100644 .agent/work/completed/004-branded-discord-embeds.md

diff --git a/.agent/work/completed/004-branded-discord-embeds.md b/.agent/work/completed/004-branded-discord-embeds.md
deleted file mode 100644
index 951163c..0000000
--- a/.agent/work/completed/004-branded-discord-embeds.md
+++ /dev/null
@@ -1,28 +0,0 @@
-### Context & Goal
-
-Enhance the user experience by standardizing the look and feel of Discord embeds. Adding consistent branding like a custom footer (with version info) and using the bot's accent color will make the bot feel more professional.
-
-### Dependencies
-
-- None
-
-### Affected Files
-
-- `bot/lib/embeds.ts`: Update standard embed creators.
-- `shared/lib/constants.ts`: Add branding-related constants (colors, footer text).
-
-### Technical Constraints & Strategy
-
-- Implementation: Update `createBaseEmbed` and other helpers to automatically include footers and standard colors.
-- Use info from `package.json` for versioning in the footer.
-- Ensure the changes don't break existing layouts where custom colors might be needed.
-
-### Definition of Done (Binary)
-
-- [x] All standard embeds now include a consistent footer.
-- [x] Embeds use a predefined brand color by default.
-- [x] Version number is automatically pulled for the footer.
-
-### New Test Files
-
-- None.

From 54944283a30bdf40596e89b8523c8df4e64e4c85 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 14 Jan 2026 17:58:28 +0100
Subject: [PATCH 05/32] feat: implement centralized logger with file
 persistence

---
 shared/lib/logger.test.ts | 118 +++++++++++++++++++++++++++
 shared/lib/logger.ts      | 162 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 280 insertions(+)
 create mode 100644 shared/lib/logger.test.ts
 create mode 100644 shared/lib/logger.ts

diff --git a/shared/lib/logger.test.ts b/shared/lib/logger.test.ts
new file mode 100644
index 0000000..71ce86b
--- /dev/null
+++ b/shared/lib/logger.test.ts
@@ -0,0 +1,118 @@
+import { expect, test, describe, beforeAll, afterAll, spyOn } from "bun:test";
+import { logger } from "./logger";
+import { existsSync, unlinkSync, readFileSync, writeFileSync } from "fs";
+import { join } from "path";
+
+describe("Logger", () => {
+    const logDir = join(process.cwd(), "logs");
+    const logFile = join(logDir, "error.log");
+
+    beforeAll(() => {
+        // Cleanup if exists
+        try {
+            if (existsSync(logFile)) unlinkSync(logFile);
+        } catch (e) {}
+    });
+
+    test("should log info messages to console with correct format", () => {
+        const spy = spyOn(console, "log");
+        const message = "Formatting test";
+        logger.info("system", message);
+        
+        expect(spy).toHaveBeenCalled();
+        const callArgs = spy.mock.calls[0]?.[0];
+        expect(callArgs).toBeDefined();
+        if (callArgs) {
+            // Strict regex check for ISO timestamp and format
+            const regex = /^\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z\] \[INFO\] \[SYSTEM\] Formatting test$/;
+            expect(callArgs).toMatch(regex);
+        }
+        spy.mockRestore();
+    });
+
+    test("should write error logs to file with stack trace", async () => {
+        const errorMessage = "Test error message";
+        const testError = new Error("Source error");
+        
+        logger.error("system", errorMessage, testError);
+
+        // Polling for file write instead of fixed timeout
+        let content = "";
+        for (let i = 0; i < 20; i++) {
+            if (existsSync(logFile)) {
+                content = readFileSync(logFile, "utf-8");
+                if (content.includes("Source error")) break;
+            }
+            await new Promise(resolve => setTimeout(resolve, 50));
+        }
+
+        expect(content).toMatch(/^\[\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z\] \[ERROR\] \[SYSTEM\] Test error message: Source error/);
+        expect(content).toContain("Stack Trace:");
+        expect(content).toContain("Error: Source error");
+        expect(content).toContain("logger.test.ts");
+    });
+
+    test("should handle log directory creation failures gracefully", async () => {
+        const consoleSpy = spyOn(console, "error");
+        
+        // We trigger an error by trying to use a path that is a file where a directory should be
+        const triggerFile = join(process.cwd(), "logs_fail_trigger");
+        
+        try {
+            writeFileSync(triggerFile, "not a directory");
+            
+            // Manually override paths for this test instance
+            const originalLogDir = (logger as any).logDir;
+            const originalLogPath = (logger as any).errorLogPath;
+            
+            (logger as any).logDir = triggerFile;
+            (logger as any).errorLogPath = join(triggerFile, "error.log");
+            (logger as any).initialized = false;
+
+            logger.error("system", "This should fail directory creation");
+            
+            // Wait for async initialization attempt
+            await new Promise(resolve => setTimeout(resolve, 100));
+            
+            expect(consoleSpy).toHaveBeenCalled();
+            expect(consoleSpy.mock.calls.some(call => 
+                String(call[0]).includes("Failed to initialize logger directory")
+            )).toBe(true);
+
+            // Reset logger state
+            (logger as any).logDir = originalLogDir;
+            (logger as any).errorLogPath = originalLogPath;
+            (logger as any).initialized = false;
+        } finally {
+            if (existsSync(triggerFile)) unlinkSync(triggerFile);
+            consoleSpy.mockRestore();
+        }
+    });
+
+    test("should include complex data objects in logs", () => {
+        const spy = spyOn(console, "log");
+        const data = { userId: "123", tags: ["test"] };
+        logger.info("bot", "Message with data", data);
+        
+        expect(spy).toHaveBeenCalled();
+        const callArgs = spy.mock.calls[0]?.[0];
+        expect(callArgs).toBeDefined();
+        if (callArgs) {
+            expect(callArgs).toContain(` | Data: ${JSON.stringify(data)}`);
+        }
+        spy.mockRestore();
+    });
+
+    test("should handle circular references in data objects", () => {
+        const spy = spyOn(console, "log");
+        const data: any = { name: "circular" };
+        data.self = data;
+        
+        logger.info("bot", "Circular test", data);
+        
+        expect(spy).toHaveBeenCalled();
+        const callArgs = spy.mock.calls[0]?.[0];
+        expect(callArgs).toContain("[Circular]");
+        spy.mockRestore();
+    });
+});
diff --git a/shared/lib/logger.ts b/shared/lib/logger.ts
new file mode 100644
index 0000000..ed0cf61
--- /dev/null
+++ b/shared/lib/logger.ts
@@ -0,0 +1,162 @@
+import { join, resolve } from "path";
+import { appendFile, mkdir, stat } from "fs/promises";
+import { existsSync } from "fs";
+
+export enum LogLevel {
+    DEBUG = 0,
+    INFO = 1,
+    WARN = 2,
+    ERROR = 3,
+}
+
+const LogLevelNames = {
+    [LogLevel.DEBUG]: "DEBUG",
+    [LogLevel.INFO]: "INFO",
+    [LogLevel.WARN]: "WARN",
+    [LogLevel.ERROR]: "ERROR",
+};
+
+export type LogSource = "bot" | "web" | "shared" | "system";
+
+export interface LogEntry {
+    timestamp: string;
+    level: string;
+    source: LogSource;
+    message: string;
+    data?: any;
+    stack?: string;
+}
+
+class Logger {
+    private logDir: string;
+    private errorLogPath: string;
+    private initialized: boolean = false;
+    private initPromise: Promise<void> | null = null;
+
+    constructor() {
+        // Use resolve with __dirname or process.cwd() but make it more robust
+        // Since this is in shared/lib/, we can try to find the project root
+        // For now, let's stick to a resolved path from process.cwd() or a safer alternative
+        this.logDir = resolve(process.cwd(), "logs");
+        this.errorLogPath = join(this.logDir, "error.log");
+    }
+
+    private async ensureInitialized() {
+        if (this.initialized) return;
+        if (this.initPromise) return this.initPromise;
+
+        this.initPromise = (async () => {
+            try {
+                await mkdir(this.logDir, { recursive: true });
+                this.initialized = true;
+            } catch (err: any) {
+                if (err.code === "EEXIST" || err.code === "ENOTDIR") {
+                    try {
+                        const stats = await stat(this.logDir);
+                        if (stats.isDirectory()) {
+                            this.initialized = true;
+                            return;
+                        }
+                    } catch (statErr) {}
+                }
+                console.error(`[SYSTEM] Failed to initialize logger directory at ${this.logDir}:`, err);
+            } finally {
+                this.initPromise = null;
+            }
+        })();
+
+        return this.initPromise;
+    }
+
+    private safeStringify(data: any): string {
+        try {
+            return JSON.stringify(data);
+        } catch (err) {
+            const seen = new WeakSet();
+            return JSON.stringify(data, (key, value) => {
+                if (typeof value === "object" && value !== null) {
+                    if (seen.has(value)) return "[Circular]";
+                    seen.add(value);
+                }
+                return value;
+            });
+        }
+    }
+
+    private formatMessage(entry: LogEntry): string {
+        const dataStr = entry.data ? ` | Data: ${this.safeStringify(entry.data)}` : "";
+        const stackStr = entry.stack ? `\nStack Trace:\n${entry.stack}` : "";
+        return `[${entry.timestamp}] [${entry.level}] [${entry.source.toUpperCase()}] ${entry.message}${dataStr}${stackStr}`;
+    }
+
+    private async writeToErrorLog(formatted: string) {
+        await this.ensureInitialized();
+        try {
+            await appendFile(this.errorLogPath, formatted + "\n");
+        } catch (err) {
+            console.error("[SYSTEM] Failed to write to error log file:", err);
+        }
+    }
+
+    private log(level: LogLevel, source: LogSource, message: string, errorOrData?: any) {
+        const timestamp = new Date().toISOString();
+        const levelName = LogLevelNames[level];
+        
+        const entry: LogEntry = {
+            timestamp,
+            level: levelName,
+            source,
+            message,
+        };
+
+        if (level === LogLevel.ERROR && errorOrData instanceof Error) {
+            entry.stack = errorOrData.stack;
+            entry.message = `${message}: ${errorOrData.message}`;
+        } else if (errorOrData !== undefined) {
+            entry.data = errorOrData;
+        }
+
+        const formatted = this.formatMessage(entry);
+
+        // Print to console
+        switch (level) {
+            case LogLevel.DEBUG:
+                console.debug(formatted);
+                break;
+            case LogLevel.INFO:
+                console.log(formatted);
+                break;
+            case LogLevel.WARN:
+                console.warn(formatted);
+                break;
+            case LogLevel.ERROR:
+                console.error(formatted);
+                break;
+        }
+
+        // Persistent error logging
+        if (level === LogLevel.ERROR) {
+            this.writeToErrorLog(formatted).catch(() => {
+                // Silently fail to avoid infinite loops
+            });
+        }
+    }
+
+    debug(source: LogSource, message: string, data?: any) {
+        this.log(LogLevel.DEBUG, source, message, data);
+    }
+
+    info(source: LogSource, message: string, data?: any) {
+        this.log(LogLevel.INFO, source, message, data);
+    }
+
+    warn(source: LogSource, message: string, data?: any) {
+        this.log(LogLevel.WARN, source, message, data);
+    }
+
+    error(source: LogSource, message: string, error?: any) {
+        this.log(LogLevel.ERROR, source, message, error);
+    }
+}
+
+export const logger = new Logger();

From 1e20a5a7a04afe9e35e5164e431c52c12886c45c Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 14 Jan 2026 17:58:28 +0100
Subject: [PATCH 06/32] refactor: migrate bot handlers to centralized logger

---
 bot/lib/handlers/AutocompleteHandler.ts         | 3 ++-
 bot/lib/handlers/CommandHandler.ts              | 7 ++++---
 bot/lib/handlers/ComponentInteractionHandler.ts | 7 ++++---
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/bot/lib/handlers/AutocompleteHandler.ts b/bot/lib/handlers/AutocompleteHandler.ts
index 61b5132..d5a0498 100644
--- a/bot/lib/handlers/AutocompleteHandler.ts
+++ b/bot/lib/handlers/AutocompleteHandler.ts
@@ -1,5 +1,6 @@
 import { AutocompleteInteraction } from "discord.js";
 import { AuroraClient } from "@/lib/BotClient";
+import { logger } from "@shared/lib/logger";
  
 
 /**
@@ -16,7 +17,7 @@ export class AutocompleteHandler {
         try {
             await command.autocomplete(interaction);
         } catch (error) {
-            console.error(`Error handling autocomplete for ${interaction.commandName}:`, error);
+            logger.error("bot", `Error handling autocomplete for ${interaction.commandName}`, error);
         }
     }
 }
diff --git a/bot/lib/handlers/CommandHandler.ts b/bot/lib/handlers/CommandHandler.ts
index 3fc8647..eeb4b08 100644
--- a/bot/lib/handlers/CommandHandler.ts
+++ b/bot/lib/handlers/CommandHandler.ts
@@ -2,6 +2,7 @@ import { ChatInputCommandInteraction, MessageFlags } from "discord.js";
 import { AuroraClient } from "@/lib/BotClient";
 import { userService } from "@shared/modules/user/user.service";
 import { createErrorEmbed } from "@lib/embeds";
+import { logger } from "@shared/lib/logger";
 
 
 /**
@@ -13,7 +14,7 @@ export class CommandHandler {
         const command = AuroraClient.commands.get(interaction.commandName);
 
         if (!command) {
-            console.error(`No command matching ${interaction.commandName} was found.`);
+            logger.error("bot", `No command matching ${interaction.commandName} was found.`);
             return;
         }
 
@@ -28,14 +29,14 @@ export class CommandHandler {
         try {
             await userService.getOrCreateUser(interaction.user.id, interaction.user.username);
         } catch (error) {
-            console.error("Failed to ensure user exists:", error);
+            logger.error("bot", "Failed to ensure user exists", error);
         }
 
         try {
             await command.execute(interaction);
             AuroraClient.lastCommandTimestamp = Date.now();
         } catch (error) {
-            console.error(String(error));
+            logger.error("bot", `Error executing command ${interaction.commandName}`, error);
             const errorEmbed = createErrorEmbed('There was an error while executing this command!');
 
             if (interaction.replied || interaction.deferred) {
diff --git a/bot/lib/handlers/ComponentInteractionHandler.ts b/bot/lib/handlers/ComponentInteractionHandler.ts
index ac4a7eb..f99d127 100644
--- a/bot/lib/handlers/ComponentInteractionHandler.ts
+++ b/bot/lib/handlers/ComponentInteractionHandler.ts
@@ -2,6 +2,7 @@ import { ButtonInteraction, StringSelectMenuInteraction, ModalSubmitInteraction,
  
 import { UserError } from "@shared/lib/errors";
 import { createErrorEmbed } from "@lib/embeds";
+import { logger } from "@shared/lib/logger";
 
 type ComponentInteraction = ButtonInteraction | StringSelectMenuInteraction | ModalSubmitInteraction;
 
@@ -28,7 +29,7 @@ export class ComponentInteractionHandler {
                         return;
                     }
                 } else {
-                    console.error(`Handler method ${route.method} not found in module`);
+                    logger.error("bot", `Handler method ${route.method} not found in module`);
                 }
             }
         }
@@ -52,7 +53,7 @@ export class ComponentInteractionHandler {
 
         // Log system errors (non-user errors) for debugging
         if (!isUserError) {
-            console.error(`Error in ${handlerName}:`, error);
+            logger.error("bot", `Error in ${handlerName}`, error);
         }
 
         const errorEmbed = createErrorEmbed(errorMessage);
@@ -72,7 +73,7 @@ export class ComponentInteractionHandler {
             }
         } catch (replyError) {
             // If we can't send a reply, log it
-            console.error(`Failed to send error response in ${handlerName}:`, replyError);
+            logger.error("bot", `Failed to send error response in ${handlerName}`, replyError);
         }
     }
 }

From c7730b93552b99b7bea1213e228b18eb7d84692c Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 14 Jan 2026 17:58:28 +0100
Subject: [PATCH 07/32] refactor: migrate web server to centralized logger

---
 web/src/server.ts | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/web/src/server.ts b/web/src/server.ts
index 90809aa..9b666a2 100644
--- a/web/src/server.ts
+++ b/web/src/server.ts
@@ -6,6 +6,7 @@
 
 import { serve, spawn, type Subprocess } from "bun";
 import { join, resolve, dirname } from "path";
+import { logger } from "@shared/lib/logger";
 
 export interface WebServerConfig {
     port?: number;
@@ -39,7 +40,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
     const isDev = process.env.NODE_ENV !== "production";
 
     if (isDev) {
-        console.log("🛠️  Starting Web Bundler in Watch Mode...");
+        logger.info("web", "Starting Web Bundler in Watch Mode...");
         try {
             buildProcess = spawn(["bun", "run", "build.ts", "--watch"], {
                 cwd: webRoot,
@@ -47,7 +48,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                 stderr: "inherit",
             });
         } catch (error) {
-            console.error("Failed to start build process:", error);
+            logger.error("web", "Failed to start build process", error);
         }
     }
 
@@ -75,7 +76,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                 // Security Check: limit concurrent connections
                 const currentConnections = server.pendingWebSockets;
                 if (currentConnections >= MAX_CONNECTIONS) {
-                    console.warn(`⚠️ [WS] Connection rejected: limit reached (${currentConnections}/${MAX_CONNECTIONS})`);
+                    logger.warn("web", `Connection rejected: limit reached (${currentConnections}/${MAX_CONNECTIONS})`);
                     return new Response("Connection limit reached", { status: 429 });
                 }
 
@@ -94,7 +95,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                     const stats = await getFullDashboardStats();
                     return Response.json(stats);
                 } catch (error) {
-                    console.error("Error fetching dashboard stats:", error);
+                    logger.error("web", "Error fetching dashboard stats", error);
                     return Response.json(
                         { error: "Failed to fetch dashboard statistics" },
                         { status: 500 }
@@ -124,7 +125,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                     const activity = await activityPromise;
                     return Response.json(activity);
                 } catch (error) {
-                    console.error("Error fetching activity stats:", error);
+                    logger.error("web", "Error fetching activity stats", error);
                     return Response.json(
                         { error: "Failed to fetch activity statistics" },
                         { status: 500 }
@@ -160,7 +161,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                         return Response.json(result);
                     }
                 } catch (error) {
-                    console.error("Error executing administrative action:", error);
+                    logger.error("web", "Error executing administrative action", error);
                     return Response.json(
                         { error: "Failed to execute administrative action" },
                         { status: 500 }
@@ -196,7 +197,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                         return Response.json({ success: true });
                     }
                 } catch (error) {
-                    console.error("Settings error:", error);
+                    logger.error("web", "Settings error", error);
                     return Response.json(
                         { error: "Failed to process settings request", details: error instanceof Error ? error.message : String(error) },
                         { status: 400 }
@@ -235,7 +236,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
 
                     return Response.json({ roles, channels, commands });
                 } catch (error) {
-                    console.error("Error fetching settings meta:", error);
+                    logger.error("web", "Error fetching settings meta", error);
                     return Response.json(
                         { error: "Failed to fetch metadata" },
                         { status: 500 }
@@ -294,7 +295,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
         websocket: {
             open(ws) {
                 ws.subscribe("dashboard");
-                console.log(`🔌 [WS] Client connected. Total: ${server.pendingWebSockets}`);
+                logger.debug("web", `Client connected. Total: ${server.pendingWebSockets}`);
 
                 // Send initial stats
                 getFullDashboardStats().then(stats => {
@@ -308,7 +309,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                             const stats = await getFullDashboardStats();
                             server.publish("dashboard", JSON.stringify({ type: "STATS_UPDATE", data: stats }));
                         } catch (error) {
-                            console.error("Error in stats broadcast:", error);
+                            logger.error("web", "Error in stats broadcast", error);
                         }
                     }, 5000);
                 }
@@ -319,7 +320,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
 
                     // Defense-in-depth: redundant length check before parsing
                     if (messageStr.length > MAX_PAYLOAD_BYTES) {
-                        console.error("❌ [WS] Payload exceeded maximum limit");
+                        logger.error("web", "Payload exceeded maximum limit");
                         return;
                     }
 
@@ -328,7 +329,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                     const parsed = WsMessageSchema.safeParse(rawData);
 
                     if (!parsed.success) {
-                        console.error("❌ [WS] Invalid message format:", parsed.error.issues);
+                        logger.error("web", "Invalid message format", parsed.error.issues);
                         return;
                     }
 
@@ -336,12 +337,12 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                         ws.send(JSON.stringify({ type: "PONG" }));
                     }
                 } catch (e) {
-                    console.error("❌ [WS] Failed to handle message:", e instanceof Error ? e.message : "Malformed JSON");
+                    logger.error("web", "Failed to handle message", e);
                 }
             },
             close(ws) {
                 ws.unsubscribe("dashboard");
-                console.log(`🔌 [WS] Client disconnected. Total remaining: ${server.pendingWebSockets}`);
+                logger.debug("web", `Client disconnected. Total remaining: ${server.pendingWebSockets}`);
 
                 // Stop broadcast interval if no clients left
                 if (server.pendingWebSockets === 0 && statsBroadcastInterval) {
@@ -382,7 +383,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
         // Helper to unwrap result or return default
         const unwrap = <T>(result: PromiseSettledResult<T>, defaultValue: T, name: string): T => {
             if (result.status === 'fulfilled') return result.value;
-            console.error(`Failed to fetch ${name}:`, result.reason);
+            logger.error("web", `Failed to fetch ${name}`, result.reason);
             return defaultValue;
         };
 
@@ -403,7 +404,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
         const recentEvents = unwrap(results[4], [], 'recentEvents');
         const totalItems = unwrap(results[5], 0, 'totalItems');
         const activeLootdrops = unwrap(results[6], [], 'activeLootdrops');
-        const leaderboards = unwrap(results[7], { topLevels: [], topWealth: [] }, 'leaderboards');
+        const leaderboards = unwrap(results[7], { topLevels: [], topWealth: [], topNetWorth: [] }, 'leaderboards');
         const lootdropState = unwrap(results[8], undefined, 'lootdropState');
 
         return {

From 94a5a183d0c5295f89c41018ae9feb21686dac9b Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 14 Jan 2026 18:10:13 +0100
Subject: [PATCH 08/32] feat(economy): refactor exam command to use ExamService
 with status-based flow and full test coverage

---
 bot/commands/economy/exam.ts                | 172 ++-----------
 shared/modules/economy/exam.service.test.ts | 237 ++++++++++++++++++
 shared/modules/economy/exam.service.ts      | 262 ++++++++++++++++++++
 3 files changed, 520 insertions(+), 151 deletions(-)
 create mode 100644 shared/modules/economy/exam.service.test.ts
 create mode 100644 shared/modules/economy/exam.service.ts

diff --git a/bot/commands/economy/exam.ts b/bot/commands/economy/exam.ts
index 926b2aa..f7bfde2 100644
--- a/bot/commands/economy/exam.ts
+++ b/bot/commands/economy/exam.ts
@@ -1,21 +1,7 @@
 import { createCommand } from "@shared/lib/utils";
 import { SlashCommandBuilder } from "discord.js";
-import { userService } from "@shared/modules/user/user.service";
 import { createErrorEmbed, createSuccessEmbed } from "@lib/embeds";
-import { UserError } from "@shared/lib/errors";
-import { userTimers, users } from "@db/schema";
-import { eq, and, sql } from "drizzle-orm";
-import { DrizzleClient } from "@shared/db/DrizzleClient";
-import { config } from "@shared/lib/config";
-import { TimerType } from "@shared/lib/constants";
-
-const EXAM_TIMER_TYPE = TimerType.EXAM_SYSTEM;
-const EXAM_TIMER_KEY = 'default';
-
-interface ExamMetadata {
-    examDay: number;
-    lastXp: string;
-}
+import { examService, ExamStatus } from "@shared/modules/economy/exam.service";
 
 const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 
@@ -25,105 +11,42 @@ export const exam = createCommand({
         .setDescription("Take your weekly exam to earn rewards based on your XP progress."),
     execute: async (interaction) => {
         await interaction.deferReply();
-        const user = await userService.getOrCreateUser(interaction.user.id, interaction.user.username);
-        if (!user) {
-            await interaction.editReply({ embeds: [createErrorEmbed("Failed to retrieve user data.")] });
-            return;
-        }
-        const now = new Date();
-        const currentDay = now.getDay();
 
         try {
-            // 1. Fetch existing timer/exam data
-            const timer = await DrizzleClient.query.userTimers.findFirst({
-                where: and(
-                    eq(userTimers.userId, user.id),
-                    eq(userTimers.type, EXAM_TIMER_TYPE),
-                    eq(userTimers.key, EXAM_TIMER_KEY)
-                )
-            });
+            // First, try to take the exam or check status
+            const result = await examService.takeExam(interaction.user.id);
 
-            // 2. First Run Logic
-            if (!timer) {
-                // Set exam day to today
-                const nextExamDate = new Date(now);
-                nextExamDate.setDate(now.getDate() + 7);
-                nextExamDate.setHours(0, 0, 0, 0);
-                const nextExamTimestamp = Math.floor(nextExamDate.getTime() / 1000);
-
-                const metadata: ExamMetadata = {
-                    examDay: currentDay,
-                    lastXp: (user.xp ?? 0n).toString()
-                };
-
-                await DrizzleClient.insert(userTimers).values({
-                    userId: user.id,
-                    type: EXAM_TIMER_TYPE,
-                    key: EXAM_TIMER_KEY,
-                    expiresAt: nextExamDate,
-                    metadata: metadata
-                });
+            if (result.status === ExamStatus.NOT_REGISTERED) {
+                // Register the user
+                const regResult = await examService.registerForExam(interaction.user.id, interaction.user.username);
+                const nextRegTimestamp = Math.floor(regResult.nextExamAt!.getTime() / 1000);
 
                 await interaction.editReply({
                     embeds: [createSuccessEmbed(
-                        `You have registered for the exam! Your exam day is **${DAYS[currentDay]}** (Server Time).\n` +
-                        `Come back on <t:${nextExamTimestamp}:D> (<t:${nextExamTimestamp}:R>) to take your first exam!`,
+                        `You have registered for the exam! Your exam day is **${DAYS[regResult.examDay!]}** (Server Time).\n` +
+                        `Come back on <t:${nextRegTimestamp}:D> (<t:${nextRegTimestamp}:R>) to take your first exam!`,
                         "Exam Registration Successful"
                     )]
                 });
                 return;
             }
 
-            const metadata = timer.metadata as unknown as ExamMetadata;
-            const examDay = metadata.examDay;
-
-            // 3. Cooldown Check
-            const expiresAt = new Date(timer.expiresAt);
-            expiresAt.setHours(0, 0, 0, 0);
-
-            if (now < expiresAt) {
-                // Calculate time remaining
-                const timestamp = Math.floor(expiresAt.getTime() / 1000);
+            const nextExamTimestamp = Math.floor(result.nextExamAt!.getTime() / 1000);
 
+            if (result.status === ExamStatus.COOLDOWN) {
                 await interaction.editReply({
                     embeds: [createErrorEmbed(
                         `You have already taken your exam for this week (or are waiting for your first week to pass).\n` +
-                        `Next exam available: <t:${timestamp}:D> (<t:${timestamp}:R>)`
+                        `Next exam available: <t:${nextExamTimestamp}:D> (<t:${nextExamTimestamp}:R>)`
                     )]
                 });
                 return;
             }
 
-            // 4. Day Check
-            if (currentDay !== examDay) {
-                // Calculate next correct exam day to correct the schedule
-                let daysUntil = (examDay - currentDay + 7) % 7;
-                if (daysUntil === 0) daysUntil = 7;
-
-                const nextExamDate = new Date(now);
-                nextExamDate.setDate(now.getDate() + daysUntil);
-                nextExamDate.setHours(0, 0, 0, 0);
-                const nextExamTimestamp = Math.floor(nextExamDate.getTime() / 1000);
-
-                const newMetadata: ExamMetadata = {
-                    examDay: examDay,
-                    lastXp: (user.xp ?? 0n).toString()
-                };
-
-                await DrizzleClient.update(userTimers)
-                    .set({
-                        expiresAt: nextExamDate,
-                        metadata: newMetadata
-                    })
-                    .where(and(
-                        eq(userTimers.userId, user.id),
-                        eq(userTimers.type, EXAM_TIMER_TYPE),
-                        eq(userTimers.key, EXAM_TIMER_KEY)
-                    ));
-
+            if (result.status === ExamStatus.MISSED) {
                 await interaction.editReply({
                     embeds: [createErrorEmbed(
-                        `You missed your exam day! Your exam day is **${DAYS[examDay]}** (Server Time).\n` +
+                        `You missed your exam day! Your exam day is **${DAYS[result.examDay!]}** (Server Time).\n` +
                         `You verify your attendance but score a **0**.\n` +
                         `Your next exam opportunity is: <t:${nextExamTimestamp}:D> (<t:${nextExamTimestamp}:R>)`,
                         "Exam Failed"
@@ -132,74 +55,21 @@ export const exam = createCommand({
                 return;
             }
 
-            // 5. Reward Calculation
-            const lastXp = BigInt(metadata.lastXp || "0"); // Fallback just in case
-            const currentXp = user.xp ?? 0n;
-            const diff = currentXp - lastXp;
-
-            // Calculate Reward
-            const multMin = config.economy.exam.multMin;
-            const multMax = config.economy.exam.multMax;
-            const multiplier = Math.random() * (multMax - multMin) + multMin;
-
-            // Allow negative reward? existing description implies "difference", usually gain. 
-            // If diff is negative (lost XP?), reward might be 0.
-            let reward = 0n;
-            if (diff > 0n) {
-                reward = BigInt(Math.floor(Number(diff) * multiplier));
-            }
-
-            // 6. Update State
-            const nextExamDate = new Date(now);
-            nextExamDate.setDate(now.getDate() + 7);
-            nextExamDate.setHours(0, 0, 0, 0);
-            const nextExamTimestamp = Math.floor(nextExamDate.getTime() / 1000);
-
-            const newMetadata: ExamMetadata = {
-                examDay: examDay,
-                lastXp: currentXp.toString()
-            };
-
-            await DrizzleClient.transaction(async (tx) => {
-                // Update Timer
-                await tx.update(userTimers)
-                    .set({
-                        expiresAt: nextExamDate,
-                        metadata: newMetadata
-                    })
-                    .where(and(
-                        eq(userTimers.userId, user.id),
-                        eq(userTimers.type, EXAM_TIMER_TYPE),
-                        eq(userTimers.key, EXAM_TIMER_KEY)
-                    ));
-
-                // Add Currency
-                if (reward > 0n) {
-                    await tx.update(users)
-                        .set({
-                            balance: sql`${users.balance} + ${reward}`
-                        })
-                        .where(eq(users.id, user.id));
-                }
-            });
-
+            // If it reached here with AVAILABLE, it means they passed
             await interaction.editReply({
                 embeds: [createSuccessEmbed(
-                    `**XP Gained:** ${diff.toString()}\n` +
-                    `**Multiplier:** x${multiplier.toFixed(2)}\n` +
-                    `**Reward:** ${reward.toString()} Currency\n\n` +
+                    `**XP Gained:** ${result.xpDiff?.toString()}\n` +
+                    `**Multiplier:** x${result.multiplier?.toFixed(2)}\n` +
+                    `**Reward:** ${result.reward?.toString()} Currency\n\n` +
                     `See you next week: <t:${nextExamTimestamp}:D>`,
                     "Exam Passed!"
                 )]
             });
 
         } catch (error: any) {
-            if (error instanceof UserError) {
-                await interaction.editReply({ embeds: [createErrorEmbed(error.message)] });
-            } else {
-                console.error("Error in exam command:", error);
-                await interaction.editReply({ embeds: [createErrorEmbed("An unexpected error occurred.")] });
-            }
+            console.error("Error in exam command:", error);
+            await interaction.editReply({ embeds: [createErrorEmbed(error.message || "An unexpected error occurred.")] });
         }
     }
 });
+
diff --git a/shared/modules/economy/exam.service.test.ts b/shared/modules/economy/exam.service.test.ts
new file mode 100644
index 0000000..692955b
--- /dev/null
+++ b/shared/modules/economy/exam.service.test.ts
@@ -0,0 +1,237 @@
+import { describe, it, expect, mock, beforeEach, setSystemTime } from "bun:test";
+import { examService, ExamStatus } from "@shared/modules/economy/exam.service";
+import { users, userTimers, transactions } from "@db/schema";
+
+// Define mock functions
+const mockFindFirst = mock();
+const mockInsert = mock();
+const mockUpdate = mock();
+const mockValues = mock();
+const mockReturning = mock();
+const mockSet = mock();
+const mockWhere = mock();
+
+// Chainable mock setup
+mockInsert.mockReturnValue({ values: mockValues });
+mockValues.mockReturnValue({ returning: mockReturning });
+mockUpdate.mockReturnValue({ set: mockSet });
+mockSet.mockReturnValue({ where: mockWhere });
+mockWhere.mockReturnValue({ returning: mockReturning });
+
+// Mock DrizzleClient
+mock.module("@shared/db/DrizzleClient", () => {
+    const createMockTx = () => ({
+        query: {
+            users: { findFirst: mockFindFirst },
+            userTimers: { findFirst: mockFindFirst },
+        },
+        insert: mockInsert,
+        update: mockUpdate,
+    });
+
+    return {
+        DrizzleClient: {
+            query: {
+                users: { findFirst: mockFindFirst },
+                userTimers: { findFirst: mockFindFirst },
+            },
+            insert: mockInsert,
+            update: mockUpdate,
+            transaction: async (cb: any) => {
+                return cb(createMockTx());
+            }
+        },
+    };
+});
+
+// Mock withTransaction
+mock.module("@/lib/db", () => ({
+    withTransaction: async (cb: any, tx?: any) => {
+        if (tx) return cb(tx);
+        return cb({
+            query: {
+                users: { findFirst: mockFindFirst },
+                userTimers: { findFirst: mockFindFirst },
+            },
+            insert: mockInsert,
+            update: mockUpdate,
+        });
+    }
+}));
+
+// Mock Config
+mock.module("@shared/lib/config", () => ({
+    config: {
+        economy: {
+            exam: {
+                multMin: 1.0,
+                multMax: 2.0,
+            }
+        }
+    }
+}));
+
+// Mock User Service
+mock.module("@shared/modules/user/user.service", () => ({
+    userService: {
+        getOrCreateUser: mock()
+    }
+}));
+
+// Mock Dashboard Service
+mock.module("@shared/modules/dashboard/dashboard.service", () => ({
+    dashboardService: {
+        recordEvent: mock()
+    }
+}));
+
+describe("ExamService", () => {
+    beforeEach(() => {
+        mockFindFirst.mockReset();
+        mockInsert.mockClear();
+        mockUpdate.mockClear();
+        mockValues.mockClear();
+        mockReturning.mockClear();
+        mockSet.mockClear();
+        mockWhere.mockClear();
+    });
+
+    describe("getExamStatus", () => {
+        it("should return NOT_REGISTERED if no timer exists", async () => {
+            mockFindFirst.mockResolvedValue(undefined);
+            const status = await examService.getExamStatus("1");
+            expect(status.status).toBe(ExamStatus.NOT_REGISTERED);
+        });
+
+        it("should return COOLDOWN if now < expiresAt", async () => {
+            const now = new Date("2024-01-10T12:00:00Z");
+            setSystemTime(now);
+            const future = new Date("2024-01-11T00:00:00Z");
+            
+            mockFindFirst.mockResolvedValue({ 
+                expiresAt: future,
+                metadata: { examDay: 3, lastXp: "100" }
+            });
+
+            const status = await examService.getExamStatus("1");
+            expect(status.status).toBe(ExamStatus.COOLDOWN);
+            expect(status.nextExamAt?.getTime()).toBe(future.setHours(0,0,0,0));
+        });
+
+        it("should return MISSED if it is the wrong day", async () => {
+            const now = new Date("2024-01-15T12:00:00Z"); // Monday (1)
+            setSystemTime(now);
+            const past = new Date("2024-01-10T00:00:00Z"); // Wednesday (3) last week
+            
+            mockFindFirst.mockResolvedValue({ 
+                expiresAt: past,
+                metadata: { examDay: 3, lastXp: "100" } // Registered for Wednesday
+            });
+
+            const status = await examService.getExamStatus("1");
+            expect(status.status).toBe(ExamStatus.MISSED);
+            expect(status.examDay).toBe(3);
+        });
+
+        it("should return AVAILABLE if it is the correct day", async () => {
+            const now = new Date("2024-01-17T12:00:00Z"); // Wednesday (3)
+            setSystemTime(now);
+            const past = new Date("2024-01-10T00:00:00Z");
+            
+            mockFindFirst.mockResolvedValue({ 
+                expiresAt: past,
+                metadata: { examDay: 3, lastXp: "100" }
+            });
+
+            const status = await examService.getExamStatus("1");
+            expect(status.status).toBe(ExamStatus.AVAILABLE);
+            expect(status.examDay).toBe(3);
+            expect(status.lastXp).toBe(100n);
+        });
+    });
+
+    describe("registerForExam", () => {
+        it("should create user and timer correctly", async () => {
+            const now = new Date("2024-01-15T12:00:00Z"); // Monday (1)
+            setSystemTime(now);
+
+            const { userService } = await import("@shared/modules/user/user.service");
+            (userService.getOrCreateUser as any).mockResolvedValue({ id: 1n, xp: 500n });
+
+            const result = await examService.registerForExam("1", "testuser");
+
+            expect(result.status).toBe(ExamStatus.NOT_REGISTERED);
+            expect(result.examDay).toBe(1);
+            
+            expect(mockInsert).toHaveBeenCalledWith(userTimers);
+            expect(mockInsert).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    describe("takeExam", () => {
+        it("should return NOT_REGISTERED if not registered", async () => {
+            mockFindFirst.mockResolvedValueOnce({ id: 1n }) // user check
+                         .mockResolvedValueOnce(undefined); // timer check
+
+            const result = await examService.takeExam("1");
+            expect(result.status).toBe(ExamStatus.NOT_REGISTERED);
+        });
+
+        it("should handle missed exam and schedule for next exam day", async () => {
+            const now = new Date("2024-01-15T12:00:00Z"); // Monday (1)
+            setSystemTime(now);
+            const past = new Date("2024-01-10T00:00:00Z");
+            
+            mockFindFirst.mockResolvedValueOnce({ id: 1n, xp: 600n }) // user
+                         .mockResolvedValueOnce({ 
+                             expiresAt: past,
+                             metadata: { examDay: 3, lastXp: "500" } // Registered for Wednesday
+                         }); // timer
+
+            const result = await examService.takeExam("1");
+
+            expect(result.status).toBe(ExamStatus.MISSED);
+            expect(result.examDay).toBe(3);
+            
+            // Should set next exam to next Wednesday
+            // Monday (1) + 2 days = Wednesday (3)
+            const expected = new Date("2024-01-17T00:00:00Z");
+            expect(result.nextExamAt!.getTime()).toBe(expected.getTime());
+            
+            expect(mockUpdate).toHaveBeenCalledWith(userTimers);
+        });
+
+        it("should calculate rewards and update state when passed", async () => {
+            const now = new Date("2024-01-17T12:00:00Z"); // Wednesday (3)
+            setSystemTime(now);
+            const past = new Date("2024-01-10T00:00:00Z");
+            
+            mockFindFirst.mockResolvedValueOnce({ id: 1n, username: "testuser", xp: 1000n, balance: 0n }) // user
+                         .mockResolvedValueOnce({ 
+                             expiresAt: past,
+                             metadata: { examDay: 3, lastXp: "500" }
+                         }); // timer
+
+            const result = await examService.takeExam("1");
+
+            expect(result.status).toBe(ExamStatus.AVAILABLE);
+            expect(result.xpDiff).toBe(500n);
+            // Multiplier is between 1.0 and 2.0 based on mock config
+            expect(result.multiplier).toBeGreaterThanOrEqual(1.0);
+            expect(result.multiplier).toBeLessThanOrEqual(2.0);
+            expect(result.reward).toBeGreaterThanOrEqual(500n);
+            expect(result.reward).toBeLessThanOrEqual(1000n);
+
+            expect(mockUpdate).toHaveBeenCalledWith(userTimers);
+            expect(mockUpdate).toHaveBeenCalledWith(users);
+            
+            // Verify transaction
+            expect(mockInsert).toHaveBeenCalledWith(transactions);
+            expect(mockValues).toHaveBeenCalledWith(expect.objectContaining({
+                amount: result.reward,
+                userId: 1n,
+                type: expect.anything()
+            }));
+        });
+    });
+});
diff --git a/shared/modules/economy/exam.service.ts b/shared/modules/economy/exam.service.ts
new file mode 100644
index 0000000..5f01fe1
--- /dev/null
+++ b/shared/modules/economy/exam.service.ts
@@ -0,0 +1,262 @@
+import { users, userTimers, transactions } from "@db/schema";
+import { eq, and, sql } from "drizzle-orm";
+import { TimerType, TransactionType } from "@shared/lib/constants";
+import { config } from "@shared/lib/config";
+import { withTransaction } from "@/lib/db";
+import type { Transaction } from "@shared/lib/types";
+import { UserError } from "@shared/lib/errors";
+
+const EXAM_TIMER_TYPE = TimerType.EXAM_SYSTEM;
+const EXAM_TIMER_KEY = 'default';
+
+export interface ExamMetadata {
+    examDay: number;
+    lastXp: string;
+}
+
+export enum ExamStatus {
+    NOT_REGISTERED = 'NOT_REGISTERED',
+    COOLDOWN = 'COOLDOWN',
+    MISSED = 'MISSED',
+    AVAILABLE = 'AVAILABLE',
+}
+
+export interface ExamActionResult {
+    status: ExamStatus;
+    nextExamAt?: Date;
+    reward?: bigint;
+    xpDiff?: bigint;
+    multiplier?: number;
+    examDay?: number;
+}
+
+export const examService = {
+    /**
+     * Get the current exam status for a user.
+     */
+    async getExamStatus(userId: string, tx?: Transaction) {
+        return await withTransaction(async (txFn) => {
+            const timer = await txFn.query.userTimers.findFirst({
+                where: and(
+                    eq(userTimers.userId, BigInt(userId)),
+                    eq(userTimers.type, EXAM_TIMER_TYPE),
+                    eq(userTimers.key, EXAM_TIMER_KEY)
+                )
+            });
+
+            if (!timer) {
+                return { status: ExamStatus.NOT_REGISTERED };
+            }
+
+            const now = new Date();
+            const expiresAt = new Date(timer.expiresAt);
+            expiresAt.setHours(0, 0, 0, 0);
+
+            if (now < expiresAt) {
+                return { 
+                    status: ExamStatus.COOLDOWN, 
+                    nextExamAt: expiresAt 
+                };
+            }
+
+            const metadata = timer.metadata as unknown as ExamMetadata;
+            const currentDay = now.getDay();
+
+            if (currentDay !== metadata.examDay) {
+                return { 
+                    status: ExamStatus.MISSED, 
+                    nextExamAt: expiresAt,
+                    examDay: metadata.examDay
+                };
+            }
+
+            return { 
+                status: ExamStatus.AVAILABLE,
+                examDay: metadata.examDay,
+                lastXp: BigInt(metadata.lastXp || "0")
+            };
+        }, tx);
+    },
+
+    /**
+     * Register a user for the first time.
+     */
+    async registerForExam(userId: string, username: string, tx?: Transaction): Promise<ExamActionResult> {
+        return await withTransaction(async (txFn) => {
+            // Ensure user exists
+            const { userService } = await import("@shared/modules/user/user.service");
+            const user = await userService.getOrCreateUser(userId, username, txFn);
+            if (!user) throw new Error("Failed to get or create user.");
+
+            const now = new Date();
+            const currentDay = now.getDay();
+
+            // Set next exam to next week
+            const nextExamDate = new Date(now);
+            nextExamDate.setDate(now.getDate() + 7);
+            nextExamDate.setHours(0, 0, 0, 0);
+
+            const metadata: ExamMetadata = {
+                examDay: currentDay,
+                lastXp: (user.xp ?? 0n).toString()
+            };
+
+            await txFn.insert(userTimers).values({
+                userId: BigInt(userId),
+                type: EXAM_TIMER_TYPE,
+                key: EXAM_TIMER_KEY,
+                expiresAt: nextExamDate,
+                metadata: metadata
+            });
+
+            return {
+                status: ExamStatus.NOT_REGISTERED,
+                nextExamAt: nextExamDate,
+                examDay: currentDay
+            };
+        }, tx);
+    },
+
+    /**
+     * Take the exam. Handles missed exams and reward calculations.
+     */
+    async takeExam(userId: string, tx?: Transaction): Promise<ExamActionResult> {
+        return await withTransaction(async (txFn) => {
+            const user = await txFn.query.users.findFirst({
+                where: eq(users.id, BigInt(userId))
+            });
+
+            if (!user) throw new Error("User not found");
+
+            const timer = await txFn.query.userTimers.findFirst({
+                where: and(
+                    eq(userTimers.userId, BigInt(userId)),
+                    eq(userTimers.type, EXAM_TIMER_TYPE),
+                    eq(userTimers.key, EXAM_TIMER_KEY)
+                )
+            });
+
+            if (!timer) {
+                return { status: ExamStatus.NOT_REGISTERED };
+            }
+
+            const now = new Date();
+            const expiresAt = new Date(timer.expiresAt);
+            expiresAt.setHours(0, 0, 0, 0);
+
+            if (now < expiresAt) {
+                 return { 
+                    status: ExamStatus.COOLDOWN, 
+                    nextExamAt: expiresAt 
+                };
+            }
+
+            const metadata = timer.metadata as unknown as ExamMetadata;
+            const examDay = metadata.examDay;
+            const currentDay = now.getDay();
+
+            if (currentDay !== examDay) {
+                // Missed exam logic
+                let daysUntil = (examDay - currentDay + 7) % 7;
+                if (daysUntil === 0) daysUntil = 7;
+
+                const nextExamDate = new Date(now);
+                nextExamDate.setDate(now.getDate() + daysUntil);
+                nextExamDate.setHours(0, 0, 0, 0);
+
+                const newMetadata: ExamMetadata = {
+                    examDay: examDay,
+                    lastXp: (user.xp ?? 0n).toString()
+                };
+
+                await txFn.update(userTimers)
+                    .set({
+                        expiresAt: nextExamDate,
+                        metadata: newMetadata
+                    })
+                    .where(and(
+                        eq(userTimers.userId, BigInt(userId)),
+                        eq(userTimers.type, EXAM_TIMER_TYPE),
+                        eq(userTimers.key, EXAM_TIMER_KEY)
+                    ));
+
+                return {
+                    status: ExamStatus.MISSED,
+                    nextExamAt: nextExamDate,
+                    examDay: examDay
+                };
+            }
+
+            // Reward Calculation
+            const lastXp = BigInt(metadata.lastXp || "0");
+            const currentXp = user.xp ?? 0n;
+            const diff = currentXp - lastXp;
+
+            const multMin = config.economy.exam.multMin;
+            const multMax = config.economy.exam.multMax;
+            const multiplier = Math.random() * (multMax - multMin) + multMin;
+
+            let reward = 0n;
+            if (diff > 0n) {
+                // Use scaled BigInt arithmetic to avoid precision loss with large XP values
+                const scaledMultiplier = BigInt(Math.round(multiplier * 10000));
+                reward = (diff * scaledMultiplier) / 10000n;
+            }
+
+            const nextExamDate = new Date(now);
+            nextExamDate.setDate(now.getDate() + 7);
+            nextExamDate.setHours(0, 0, 0, 0);
+
+            const newMetadata: ExamMetadata = {
+                examDay: examDay,
+                lastXp: currentXp.toString()
+            };
+
+            // Update Timer
+            await txFn.update(userTimers)
+                .set({
+                    expiresAt: nextExamDate,
+                    metadata: newMetadata
+                })
+                .where(and(
+                    eq(userTimers.userId, BigInt(userId)),
+                    eq(userTimers.type, EXAM_TIMER_TYPE),
+                    eq(userTimers.key, EXAM_TIMER_KEY)
+                ));
+
+            // Add Currency
+            if (reward > 0n) {
+                await txFn.update(users)
+                    .set({
+                        balance: sql`${users.balance} + ${reward}`
+                    })
+                    .where(eq(users.id, BigInt(userId)));
+
+                // Add Transaction Record
+                await txFn.insert(transactions).values({
+                    userId: BigInt(userId),
+                    amount: reward,
+                    type: TransactionType.EXAM_REWARD,
+                    description: `Weekly exam reward (XP Diff: ${diff})`,
+                });
+            }
+
+            // Record dashboard event
+            const { dashboardService } = await import("@shared/modules/dashboard/dashboard.service");
+            await dashboardService.recordEvent({
+                type: 'success',
+                message: `${user.username} passed their exam: ${reward.toLocaleString()} AU`,
+                icon: '🎓'
+            });
+
+            return {
+                status: ExamStatus.AVAILABLE,
+                nextExamAt: nextExamDate,
+                reward,
+                xpDiff: diff,
+                multiplier,
+                examDay
+            };
+        }, tx);
+    }
+};

From 194a032c7f8fbb7e7f9f3a3b736547d4a450eb35 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 14 Jan 2026 18:10:31 +0100
Subject: [PATCH 09/32] chore(cleanup): remove completed tickets

---
 .../tickets/002-centralized-error-logging.md  | 31 -------------------
 .../tickets/004-branded-discord-embeds.md     | 28 -----------------
 2 files changed, 59 deletions(-)
 delete mode 100644 .agent/work/tickets/002-centralized-error-logging.md
 delete mode 100644 .agent/work/tickets/004-branded-discord-embeds.md

diff --git a/.agent/work/tickets/002-centralized-error-logging.md b/.agent/work/tickets/002-centralized-error-logging.md
deleted file mode 100644
index 607c759..0000000
--- a/.agent/work/tickets/002-centralized-error-logging.md
+++ /dev/null
@@ -1,31 +0,0 @@
-### Context & Goal
-
-The bot currently relies on `console.error` which is hard to track and lacks context. A centralized error logging service will allow for better debugging, persistent error logs, and future integration with services like Sentry or Discord webhooks for alerts.
-
-### Dependencies
-
-- None
-
-### Affected Files
-
-- `shared/lib/logger.ts`: New file for the unified logger service.
-- `bot/lib/handlers/CommandHandler.ts`: Update to use the new logger for command errors.
-- `web/src/server.ts`: Update to use the new logger for API and WebSocket errors.
-
-### Technical Constraints & Strategy
-
-- Implementation: Create a `Logger` class/object in `shared/lib`.
-- Support log levels: `info`, `warn`, `error`, `debug`.
-- Errors should capture: timestamp, source (bot/web), error message, and stack trace if available.
-- For now, logging to console and a local log file (e.g., `logs/error.log`) is sufficient.
-
-### Definition of Done (Binary)
-
-- [ ] `Logger` service implemented in `shared/lib/logger.ts`.
-- [ ] Command errors are logged via the new service.
-- [ ] Web server errors are logged via the new service.
-- [ ] Log output is formatted consistently.
-
-### New Test Files
-
-- `shared/lib/logger.test.ts`: Verify logger output and file writing.
diff --git a/.agent/work/tickets/004-branded-discord-embeds.md b/.agent/work/tickets/004-branded-discord-embeds.md
deleted file mode 100644
index 951163c..0000000
--- a/.agent/work/tickets/004-branded-discord-embeds.md
+++ /dev/null
@@ -1,28 +0,0 @@
-### Context & Goal
-
-Enhance the user experience by standardizing the look and feel of Discord embeds. Adding consistent branding like a custom footer (with version info) and using the bot's accent color will make the bot feel more professional.
-
-### Dependencies
-
-- None
-
-### Affected Files
-
-- `bot/lib/embeds.ts`: Update standard embed creators.
-- `shared/lib/constants.ts`: Add branding-related constants (colors, footer text).
-
-### Technical Constraints & Strategy
-
-- Implementation: Update `createBaseEmbed` and other helpers to automatically include footers and standard colors.
-- Use info from `package.json` for versioning in the footer.
-- Ensure the changes don't break existing layouts where custom colors might be needed.
-
-### Definition of Done (Binary)
-
-- [x] All standard embeds now include a consistent footer.
-- [x] Embeds use a predefined brand color by default.
-- [x] Version number is automatically pulled for the footer.
-
-### New Test Files
-
-- None.

From f8436e9755be78acf303e646e955220036c05072 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Thu, 15 Jan 2026 11:13:37 +0100
Subject: [PATCH 10/32] chore: (agent) remove tickets and skills

---
 .agent/skills/create-ticket/SKILL.md          | 51 ------------------
 .agent/skills/review/SKILL.md                 | 54 -------------------
 .../001-refactor-command-validation.md        | 30 -----------
 .../work/tickets/003-modularize-web-server.md | 32 -----------
 .../work/tickets/005-refactor-exam-logic.md   | 29 ----------
 5 files changed, 196 deletions(-)
 delete mode 100644 .agent/skills/create-ticket/SKILL.md
 delete mode 100644 .agent/skills/review/SKILL.md
 delete mode 100644 .agent/work/tickets/001-refactor-command-validation.md
 delete mode 100644 .agent/work/tickets/003-modularize-web-server.md
 delete mode 100644 .agent/work/tickets/005-refactor-exam-logic.md

diff --git a/.agent/skills/create-ticket/SKILL.md b/.agent/skills/create-ticket/SKILL.md
deleted file mode 100644
index f854aea..0000000
--- a/.agent/skills/create-ticket/SKILL.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-name: create-ticket
-description: Create a ticket for a task that needs to be worked on.
----
-
-# Skill: create-ticket
-
-## Purpose
-
-Decompose high-level objectives into "Atomic Tickets" to maximize development velocity and minimize cognitive overhead.
-
-## Execution Rules
-
-1. **Directory Check:** Scan `.agent/work/tickets/`. Determine sequence number `NNN`.
-2. **Naming:** `.agent/work/tickets/NNN-brief-description.md`.
-3. **The Atomic/Velocity Test:** - Max 3 files modified.
-   - Max 80 lines of logic.
-   - Must be verifiable via a single command or test suite.
-   - If it exceeds these, **split it.**
-4. **Context Injection:** Include relevant code snippets or interface definitions directly in the ticket to prevent "context hunting."
-5. **No Breaking Changes:** If a ticket changes a shared interface, it must include the refactor for consumers or be split into a "Transition" ticket.
-
-## Ticket Template
-
-### Context & Goal
-
-[Why this matters + the specific problem it solves.]
-
-### Dependencies
-
-- [e.g., Ticket #NNN]
-
-### Affected Files
-
-- `path/to/file_A.ext`: [Specific change description]
-- `path/to/file_B.ext`: [Specific change description]
-
-### Technical Constraints & Strategy
-
-- [e.g., Implementation: Use the existing X wrapper instead of a new fetch call.]
-- [e.g., Constraint: Maintain backward compatibility with Y.]
-
-### Definition of Done (Binary)
-
-- [ ] Criterion 1 (e.g., `npm test` passes for `X.test.ts`)
-- [ ] Criterion 2 (e.g., UI component renders without hydration errors)
-- [ ] Criterion 3 (e.g., API response matches the schema in `types.ts`)
-
-### New Test Files
-
-- `path/to/test_A.ext`: [What is being tested]
diff --git a/.agent/skills/review/SKILL.md b/.agent/skills/review/SKILL.md
deleted file mode 100644
index 8481d15..0000000
--- a/.agent/skills/review/SKILL.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-name: code-review
-description: A "Default-to-Fail" audit of codebase changes. Observation only; no file modifications.
----
-
-# Skill: code-review
-
-## Purpose
-
-Protect the codebase from "feature creep," technical debt, and weak validation. This skill assumes the latest changes are flawed until they pass a rigorous audit.
-
-## Execution Rules
-
-1. **Read-Only Protocol:** This is a diagnostic skill. **Under no circumstances should any files be modified.** Provide feedback only.
-2. **Default-to-Fail:** Assume the code is broken or insufficient. The burden of proof lies on the code and its tests.
-3. **The Atomic Veto:** - Check the diff. If it exceeds 3 files or 80 lines of logic, **Veto immediately.**
-   - Reason: "Change exceeds atomic threshold; high risk of cognitive load."
-4. **Strictness Audit (Tests):**
-   - **Veto** if assertions are fuzzy (e.g., `toBeTruthy()`).
-   - **Veto** if there is no "Red Path" (failure case) test.
-   - **Veto** if the test is "loose" (e.g., doesn't check specific property values).
-5. **Direct Feedback:** No sycophancy. Use "Blockers" for issues and "Verdict: APPROVE" only when the code is bulletproof.
-
-## Review Template
-
-### Verdict: [FAIL / APPROVE]
-
-**Primary Blocker:** [One sentence identifying the biggest reason for rejection.]
-
----
-
-### 1. Atomic Constraint Check
-
-- **Files Changed:** [Count] / 3
-- **Logic Lines:** [Count] / 80
-- **Status:** [PASS / FAIL (Veto if FAIL)]
-
-### 2. Test Strictness Audit
-
-- **Assertion Quality:** [List specific lines with fuzzy matchers. Demand strict equality.]
-- **Failure Coverage:** [Does a test exist for the 'Error/Empty' state? If no, FAIL.]
-- **Logic Sync:** [Does the test actually exercise the logic added, or just side effects?]
-
-### 3. Logic & Resilience
-
-- **Unchecked States:** [Identify unhandled nulls, undefineds, or missing error catches.]
-- **Efficiency:** [Is there a faster path or a redundant operation?]
-
-### 4. Direct Actionables
-
-_Note: The reviewer does not apply these. The user/agent must create a ticket or apply fixes manually._
-
-1. [Specific fix for Blocker 1]
-2. [Specific fix for Blocker 2]
diff --git a/.agent/work/tickets/001-refactor-command-validation.md b/.agent/work/tickets/001-refactor-command-validation.md
deleted file mode 100644
index 9c0c946..0000000
--- a/.agent/work/tickets/001-refactor-command-validation.md
+++ /dev/null
@@ -1,30 +0,0 @@
-### Context & Goal
-
-Currently, every command manually performs checks like user existence or maintenance mode, or these are hardcoded into the `CommandHandler`. Standardizing these requirements in the command definition itself makes the code cleaner and more declarative.
-
-### Dependencies
-
-- None
-
-### Affected Files
-
-- `shared/lib/types.ts`: Update `Command` interface to include a optional `requirements` object.
-- `bot/lib/handlers/CommandHandler.ts`: Update to read and enforce these requirements.
-- `bot/commands/economy/balance.ts`: Refactor to use the new requirements (example).
-
-### Technical Constraints & Strategy
-
-- Implementation: Use a standardized `requirements` object in the `Command` interface.
-- Requirements could include: `userExists: boolean`, `permissions: string[]`, `devOnly: boolean`.
-- Ensure `CommandHandler` provides clear error messages to the user when a requirement fails.
-
-### Definition of Done (Binary)
-
-- [ ] `Command` interface updated in `types.ts`.
-- [ ] `CommandHandler.ts` enforces requirements before executing command.
-- [ ] At least one command (e.g., `balance`) is refactored to use the new system.
-- [ ] Clear error embeds are shown to the user when requirements aren't met.
-
-### New Test Files
-
-- None (Verification via manual testing of command execution).
diff --git a/.agent/work/tickets/003-modularize-web-server.md b/.agent/work/tickets/003-modularize-web-server.md
deleted file mode 100644
index 45b7db2..0000000
--- a/.agent/work/tickets/003-modularize-web-server.md
+++ /dev/null
@@ -1,32 +0,0 @@
-### Context & Goal
-
-The current `web/src/server.ts` is a monolithic file with a very long `fetch` handler. This makes it difficult to read and maintain. Modularizing the logic into separate route handlers and middleware-like functions will improve code quality and scalability.
-
-### Dependencies
-
-- None
-
-### Affected Files
-
-- `web/src/server.ts`: Refactor to use modular handlers.
-- `web/src/routes/api.ts`: New file for API route definitions.
-- `web/src/routes/static.ts`: New file for static file serving logic.
-- `web/src/routes/websocket.ts`: New file for WebSocket event handling.
-
-### Technical Constraints & Strategy
-
-- Implementation: Move different responsibilities (API, Static, WS) into separate files.
-- The main `serve` configuration should just call these modules.
-- Ensure the SPA fallback logic remains intact.
-
-### Definition of Done (Binary)
-
-- [ ] `web/src/server.ts` length reduced by at least 50%.
-- [ ] API routes moved to dedicated module.
-- [ ] Static file serving moved to dedicated module.
-- [ ] WebSocket logic moved to dedicated module.
-- [ ] Dashboard still loads and functions correctly.
-
-### New Test Files
-
-- None (Verification via manual testing of the dashboard).
diff --git a/.agent/work/tickets/005-refactor-exam-logic.md b/.agent/work/tickets/005-refactor-exam-logic.md
deleted file mode 100644
index 3c65355..0000000
--- a/.agent/work/tickets/005-refactor-exam-logic.md
+++ /dev/null
@@ -1,29 +0,0 @@
-### Context & Goal
-
-The `exam` command currently contains a lot of business logic, including reward calculations, timer management, and complex database transactions. Moving this logic to a dedicated `ExamService` will improve testability, maintainability, and keep the command file focused on user interaction.
-
-### Dependencies
-
-- None
-
-### Affected Files
-
-- `shared/modules/economy/exam.service.ts`: New file for the exam logic.
-- `bot/commands/economy/exam.ts`: Refactor to use the new service.
-
-### Technical Constraints & Strategy
-
-- Implementation: Create an `ExamService` that handles `getExamStatus`, `takeExam`, and `registerForExam`.
-- The command should only handle user input and formatting the response embeds based on the service's result.
-- Ensure the Drizzle transactions are correctly handled within the service.
-
-### Definition of Done (Binary)
-
-- [ ] `ExamService` implemented with methods for all exam-related operations.
-- [ ] `bot/commands/economy/exam.ts` refactored to use the service.
-- [ ] Logic is covered by unit tests in a new test file.
-- [ ] Manual verification shows the exam command still works as expected.
-
-### New Test Files
-
-- `shared/modules/economy/exam.service.test.ts`: Unit tests for reward calculations and state transitions.

From 52f8ab11f08815783a1c59aa3715d0a8216e7d99 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Thu, 15 Jan 2026 15:04:50 +0100
Subject: [PATCH 11/32] feat: Implement quest event handling and integrate it
 into leveling, economy, and inventory services.

---
 shared/modules/economy/economy.service.ts     |  4 ++
 shared/modules/inventory/inventory.service.ts | 14 +++++
 shared/modules/leveling/leveling.service.ts   |  4 ++
 shared/modules/quest/quest.service.test.ts    | 56 +++++++++++++++++++
 shared/modules/quest/quest.service.ts         | 31 ++++++++++
 5 files changed, 109 insertions(+)

diff --git a/shared/modules/economy/economy.service.ts b/shared/modules/economy/economy.service.ts
index 6d026e4..f12eab0 100644
--- a/shared/modules/economy/economy.service.ts
+++ b/shared/modules/economy/economy.service.ts
@@ -196,6 +196,10 @@ export const economyService = {
                 description: description,
             });
 
+            // Trigger Quest Event
+            const { questService } = await import("@shared/modules/quest/quest.service");
+            await questService.handleEvent(id, type, 1, txFn);
+
             return user;
         }, tx);
     },
diff --git a/shared/modules/inventory/inventory.service.ts b/shared/modules/inventory/inventory.service.ts
index 7f702d4..7f7628b 100644
--- a/shared/modules/inventory/inventory.service.ts
+++ b/shared/modules/inventory/inventory.service.ts
@@ -37,6 +37,11 @@ export const inventoryService = {
                         eq(inventory.itemId, itemId)
                     ))
                     .returning();
+
+                // Trigger Quest Event
+                const { questService } = await import("@shared/modules/quest/quest.service");
+                await questService.handleEvent(userId, 'ITEM_COLLECT', Number(quantity), txFn);
+
                 return entry;
             } else {
                 // Check Slot Limit
@@ -60,6 +65,11 @@ export const inventoryService = {
                         quantity: quantity,
                     })
                     .returning();
+
+                // Trigger Quest Event
+                const { questService } = await import("@shared/modules/quest/quest.service");
+                await questService.handleEvent(userId, 'ITEM_COLLECT', Number(quantity), txFn);
+
                 return entry;
             }
         }, tx);
@@ -179,6 +189,10 @@ export const inventoryService = {
                 await inventoryService.removeItem(userId, itemId, 1n, txFn);
             }
 
+            // Trigger Quest Event
+            const { questService } = await import("@shared/modules/quest/quest.service");
+            await questService.handleEvent(userId, 'ITEM_USE', 1, txFn);
+
             return { success: true, results, usageData, item };
         }, tx);
     },
diff --git a/shared/modules/leveling/leveling.service.ts b/shared/modules/leveling/leveling.service.ts
index f6af7e5..a009c51 100644
--- a/shared/modules/leveling/leveling.service.ts
+++ b/shared/modules/leveling/leveling.service.ts
@@ -68,6 +68,10 @@ export const levelingService = {
                 .where(eq(users.id, BigInt(id)))
                 .returning();
 
+            // Trigger Quest Event
+            const { questService } = await import("@shared/modules/quest/quest.service");
+            await questService.handleEvent(id, 'XP_GAIN', Number(amount), txFn);
+
             return { user: updatedUser, levelUp, currentLevel: newLevel };
         }, tx);
     },
diff --git a/shared/modules/quest/quest.service.test.ts b/shared/modules/quest/quest.service.test.ts
index 1cd1b73..6ab616d 100644
--- a/shared/modules/quest/quest.service.test.ts
+++ b/shared/modules/quest/quest.service.test.ts
@@ -148,4 +148,60 @@ describe("questService", () => {
             expect(result).toEqual(mockData as any);
         });
     });
+
+    describe("handleEvent", () => {
+        it("should progress a quest", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 101,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "TEST_EVENT", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+            mockReturning.mockResolvedValue([{ userId: 1n, questId: 101, progress: 1 }]);
+
+            await questService.handleEvent("1", "TEST_EVENT", 1);
+
+            expect(mockUpdate).toHaveBeenCalled();
+            expect(mockSet).toHaveBeenCalledWith({ progress: 1 });
+        });
+
+        it("should complete a quest when target reached", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 101,
+                progress: 4,
+                completedAt: null,
+                quest: { 
+                    triggerEvent: "TEST_EVENT", 
+                    requirements: { target: 5 },
+                    rewards: { balance: 100 }
+                }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+            mockFindFirst.mockResolvedValue(mockUserQuest); // For completeQuest
+
+            await questService.handleEvent("1", "TEST_EVENT", 1);
+
+            // Verify completeQuest was called (it will update completedAt)
+            expect(mockUpdate).toHaveBeenCalled();
+            expect(mockSet).toHaveBeenCalledWith({ completedAt: expect.any(Date) });
+        });
+
+        it("should ignore irrelevant events", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 101,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "DIFFERENT_EVENT", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+
+            await questService.handleEvent("1", "TEST_EVENT", 1);
+
+            expect(mockUpdate).not.toHaveBeenCalled();
+        });
+    });
 });
diff --git a/shared/modules/quest/quest.service.ts b/shared/modules/quest/quest.service.ts
index db1199b..4705496 100644
--- a/shared/modules/quest/quest.service.ts
+++ b/shared/modules/quest/quest.service.ts
@@ -34,6 +34,37 @@ export const questService = {
         }, tx);
     },
 
+    handleEvent: async (userId: string, eventName: string, weight: number = 1, tx?: Transaction) => {
+        return await withTransaction(async (txFn) => {
+            // 1. Fetch active user quests for this event
+            const activeUserQuests = await txFn.query.userQuests.findMany({
+                where: and(
+                    eq(userQuests.userId, BigInt(userId)),
+                ),
+                with: {
+                    quest: true
+                }
+            });
+
+            const relevant = activeUserQuests.filter(uq =>
+                uq.quest.triggerEvent === eventName && !uq.completedAt
+            );
+
+            for (const uq of relevant) {
+                const requirements = uq.quest.requirements as { target?: number };
+                const target = requirements?.target || 1;
+
+                const newProgress = (uq.progress || 0) + weight;
+
+                if (newProgress >= target) {
+                    await questService.completeQuest(userId, uq.questId, txFn);
+                } else {
+                    await questService.updateProgress(userId, uq.questId, newProgress, txFn);
+                }
+            }
+        }, tx);
+    },
+
     completeQuest: async (userId: string, questId: number, tx?: Transaction) => {
         return await withTransaction(async (txFn) => {
             const userQuest = await txFn.query.userQuests.findFirst({

From 7d541825d8892334e1705209fffc8428742bbf06 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Thu, 15 Jan 2026 15:09:37 +0100
Subject: [PATCH 12/32] feat: Update quest event triggers to include item IDs
 for granular tracking.

---
 shared/modules/inventory/inventory.service.ts |  6 +++---
 shared/modules/quest/quest.service.test.ts    | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/shared/modules/inventory/inventory.service.ts b/shared/modules/inventory/inventory.service.ts
index 7f7628b..167b1e7 100644
--- a/shared/modules/inventory/inventory.service.ts
+++ b/shared/modules/inventory/inventory.service.ts
@@ -40,7 +40,7 @@ export const inventoryService = {
 
                 // Trigger Quest Event
                 const { questService } = await import("@shared/modules/quest/quest.service");
-                await questService.handleEvent(userId, 'ITEM_COLLECT', Number(quantity), txFn);
+                await questService.handleEvent(userId, `ITEM_COLLECT:${itemId}`, Number(quantity), txFn);
 
                 return entry;
             } else {
@@ -68,7 +68,7 @@ export const inventoryService = {
 
                 // Trigger Quest Event
                 const { questService } = await import("@shared/modules/quest/quest.service");
-                await questService.handleEvent(userId, 'ITEM_COLLECT', Number(quantity), txFn);
+                await questService.handleEvent(userId, `ITEM_COLLECT:${itemId}`, Number(quantity), txFn);
 
                 return entry;
             }
@@ -191,7 +191,7 @@ export const inventoryService = {
 
             // Trigger Quest Event
             const { questService } = await import("@shared/modules/quest/quest.service");
-            await questService.handleEvent(userId, 'ITEM_USE', 1, txFn);
+            await questService.handleEvent(userId, `ITEM_USE:${itemId}`, 1, txFn);
 
             return { success: true, results, usageData, item };
         }, tx);
diff --git a/shared/modules/quest/quest.service.test.ts b/shared/modules/quest/quest.service.test.ts
index 6ab616d..9f1917c 100644
--- a/shared/modules/quest/quest.service.test.ts
+++ b/shared/modules/quest/quest.service.test.ts
@@ -150,31 +150,31 @@ describe("questService", () => {
     });
 
     describe("handleEvent", () => {
-        it("should progress a quest", async () => {
+        it("should progress a quest with sub-events", async () => {
             const mockUserQuest = {
                 userId: 1n,
                 questId: 101,
                 progress: 0,
                 completedAt: null,
-                quest: { triggerEvent: "TEST_EVENT", requirements: { target: 5 } }
+                quest: { triggerEvent: "ITEM_USE:101", requirements: { target: 5 } }
             };
             mockFindMany.mockResolvedValue([mockUserQuest]);
             mockReturning.mockResolvedValue([{ userId: 1n, questId: 101, progress: 1 }]);
 
-            await questService.handleEvent("1", "TEST_EVENT", 1);
+            await questService.handleEvent("1", "ITEM_USE:101", 1);
 
             expect(mockUpdate).toHaveBeenCalled();
             expect(mockSet).toHaveBeenCalledWith({ progress: 1 });
         });
 
-        it("should complete a quest when target reached", async () => {
+        it("should complete a quest when target reached using sub-events", async () => {
             const mockUserQuest = {
                 userId: 1n,
                 questId: 101,
                 progress: 4,
                 completedAt: null,
                 quest: { 
-                    triggerEvent: "TEST_EVENT", 
+                    triggerEvent: "ITEM_COLLECT:505", 
                     requirements: { target: 5 },
                     rewards: { balance: 100 }
                 }
@@ -182,7 +182,7 @@ describe("questService", () => {
             mockFindMany.mockResolvedValue([mockUserQuest]);
             mockFindFirst.mockResolvedValue(mockUserQuest); // For completeQuest
 
-            await questService.handleEvent("1", "TEST_EVENT", 1);
+            await questService.handleEvent("1", "ITEM_COLLECT:505", 1);
 
             // Verify completeQuest was called (it will update completedAt)
             expect(mockUpdate).toHaveBeenCalled();

From eb108695d3a16b1757e56a9985967dbb23b46d8b Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Thu, 15 Jan 2026 15:22:20 +0100
Subject: [PATCH 13/32] feat: Implement flexible quest event matching to allow
 generic triggers to match specific event instances.

---
 shared/modules/quest/quest.service.test.ts | 62 ++++++++++++++++++++++
 shared/modules/quest/quest.service.ts      |  9 ++--
 2 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/shared/modules/quest/quest.service.test.ts b/shared/modules/quest/quest.service.test.ts
index 9f1917c..220523d 100644
--- a/shared/modules/quest/quest.service.test.ts
+++ b/shared/modules/quest/quest.service.test.ts
@@ -189,6 +189,68 @@ describe("questService", () => {
             expect(mockSet).toHaveBeenCalledWith({ completedAt: expect.any(Date) });
         });
 
+        it("should progress a quest with generic events", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 102,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "ITEM_COLLECT", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+            mockReturning.mockResolvedValue([{ userId: 1n, questId: 102, progress: 1 }]);
+
+            await questService.handleEvent("1", "ITEM_COLLECT:505", 1);
+
+            expect(mockUpdate).toHaveBeenCalled();
+            expect(mockSet).toHaveBeenCalledWith({ progress: 1 });
+        });
+
+        it("should ignore events that are not prefix matches", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 103,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "ITEM_COLLECT", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+
+            await questService.handleEvent("1", "ITEM_COLLECT_UNRELATED", 1);
+
+            expect(mockUpdate).not.toHaveBeenCalled();
+        });
+
+        it("should not progress a specific quest with a different specific event", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 104,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "ITEM_COLLECT:101", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+
+            await questService.handleEvent("1", "ITEM_COLLECT:202", 1);
+
+            expect(mockUpdate).not.toHaveBeenCalled();
+        });
+
+        it("should not progress a specific quest with a generic event", async () => {
+            const mockUserQuest = {
+                userId: 1n,
+                questId: 105,
+                progress: 0,
+                completedAt: null,
+                quest: { triggerEvent: "ITEM_COLLECT:101", requirements: { target: 5 } }
+            };
+            mockFindMany.mockResolvedValue([mockUserQuest]);
+
+            await questService.handleEvent("1", "ITEM_COLLECT", 1);
+
+            expect(mockUpdate).not.toHaveBeenCalled();
+        });
+
         it("should ignore irrelevant events", async () => {
             const mockUserQuest = {
                 userId: 1n,
diff --git a/shared/modules/quest/quest.service.ts b/shared/modules/quest/quest.service.ts
index 4705496..1bf8ed6 100644
--- a/shared/modules/quest/quest.service.ts
+++ b/shared/modules/quest/quest.service.ts
@@ -46,9 +46,12 @@ export const questService = {
                 }
             });
 
-            const relevant = activeUserQuests.filter(uq =>
-                uq.quest.triggerEvent === eventName && !uq.completedAt
-            );
+            const relevant = activeUserQuests.filter(uq => {
+                const trigger = uq.quest.triggerEvent;
+                // Exact match or prefix match (e.g. ITEM_COLLECT matches ITEM_COLLECT:101)
+                const isMatch = eventName === trigger || eventName.startsWith(trigger + ":");
+                return isMatch && !uq.completedAt;
+            });
 
             for (const uq of relevant) {
                 const requirements = uq.quest.requirements as { target?: number };

From 9e5c6b5ac3bddf5860a8e7c754db8787705d413c Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Thu, 15 Jan 2026 15:30:01 +0100
Subject: [PATCH 14/32] feat: Implement interactive quest command allowing
 users to view active/available quests and accept new ones.

---
 bot/commands/quest/quests.ts               |  73 +++++++++++---
 bot/modules/quest/quest.view.ts            | 112 ++++++++++++++++++++-
 shared/modules/quest/quest.service.test.ts |  26 +++++
 shared/modules/quest/quest.service.ts      |  15 +++
 4 files changed, 212 insertions(+), 14 deletions(-)

diff --git a/bot/commands/quest/quests.ts b/bot/commands/quest/quests.ts
index fab6621..32262e5 100644
--- a/bot/commands/quest/quests.ts
+++ b/bot/commands/quest/quests.ts
@@ -1,25 +1,74 @@
 import { createCommand } from "@shared/lib/utils";
-import { SlashCommandBuilder, MessageFlags } from "discord.js";
+import { SlashCommandBuilder, MessageFlags, ComponentType } from "discord.js";
 import { questService } from "@shared/modules/quest/quest.service";
-import { createWarningEmbed } from "@lib/embeds";
-import { getQuestListEmbed } from "@/modules/quest/quest.view";
+import { createSuccessEmbed, createWarningEmbed } from "@lib/embeds";
+import { getQuestListEmbed, getAvailableQuestsEmbed, getQuestActionRows } from "@/modules/quest/quest.view";
 
 export const quests = createCommand({
     data: new SlashCommandBuilder()
         .setName("quests")
-        .setDescription("View your active quests"),
+        .setDescription("View your active and available quests"),
     execute: async (interaction) => {
-        await interaction.deferReply({ flags: MessageFlags.Ephemeral });
+        const response = await interaction.deferReply({ flags: MessageFlags.Ephemeral });
 
-        const userQuests = await questService.getUserQuests(interaction.user.id);
+        const userId = interaction.user.id;
 
-        if (!userQuests || userQuests.length === 0) {
-            await interaction.editReply({ embeds: [createWarningEmbed("You have no active quests.", "Quest Log")] });
-            return;
-        }
+        const updateView = async (viewType: 'active' | 'available') => {
+            const userQuests = await questService.getUserQuests(userId);
+            const availableQuests = await questService.getAvailableQuests(userId);
 
-        const embed = getQuestListEmbed(userQuests);
+            const embed = viewType === 'active' 
+                ? getQuestListEmbed(userQuests) 
+                : getAvailableQuestsEmbed(availableQuests);
+            
+            const components = getQuestActionRows(viewType, availableQuests);
 
-        await interaction.editReply({ embeds: [embed] });
+            await interaction.editReply({
+                embeds: [embed],
+                components: components
+            });
+        };
+
+        // Initial view
+        await updateView('active');
+
+        const collector = response.createMessageComponentCollector({
+            time: 60000,
+            componentType: undefined // Allow both buttons and select menu
+        });
+
+        collector.on('collect', async (i) => {
+            if (i.user.id !== interaction.user.id) return;
+
+            try {
+                if (i.customId === "quest_view_active") {
+                    await i.deferUpdate();
+                    await updateView('active');
+                } else if (i.customId === "quest_view_available") {
+                    await i.deferUpdate();
+                    await updateView('available');
+                } else if (i.customId === "quest_accept_select") {
+                    const questId = parseInt((i as any).values[0]);
+                    await questService.assignQuest(userId, questId);
+                    
+                    await i.reply({ 
+                        embeds: [createSuccessEmbed(`You have accepted a new quest!`, "Quest Accepted")], 
+                        flags: MessageFlags.Ephemeral 
+                    });
+                    
+                    await updateView('active');
+                }
+            } catch (error) {
+                console.error("Quest interaction error:", error);
+                await i.followUp({ 
+                    content: "Something went wrong while processing your quest interaction.", 
+                    flags: MessageFlags.Ephemeral 
+                });
+            }
+        });
+
+        collector.on('end', () => {
+            interaction.editReply({ components: [] }).catch(() => {});
+        });
     }
 });
diff --git a/bot/modules/quest/quest.view.ts b/bot/modules/quest/quest.view.ts
index e090c8e..6343dc4 100644
--- a/bot/modules/quest/quest.view.ts
+++ b/bot/modules/quest/quest.view.ts
@@ -1,4 +1,4 @@
-import { EmbedBuilder } from "discord.js";
+import { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle, StringSelectMenuBuilder, StringSelectMenuOptionBuilder } from "discord.js";
 
 /**
  * Quest entry with quest details and progress
@@ -7,12 +7,26 @@ interface QuestEntry {
     progress: number | null;
     completedAt: Date | null;
     quest: {
+        id: number;
         name: string;
         description: string | null;
+        triggerEvent: string;
+        requirements: any;
         rewards: any;
     };
 }
 
+/**
+ * Available quest interface
+ */
+interface AvailableQuest {
+    id: number;
+    name: string;
+    description: string | null;
+    rewards: any;
+    requirements: any;
+}
+
 /**
  * Formats quest rewards object into a human-readable string
  */
@@ -30,25 +44,119 @@ function getQuestStatus(completedAt: Date | null): string {
     return completedAt ? "✅ Completed" : "📝 In Progress";
 }
 
+/**
+ * Renders a simple progress bar
+ */
+function renderProgressBar(current: number, total: number, size: number = 10): string {
+    const percentage = Math.min(current / total, 1);
+    const progress = Math.round(size * percentage);
+    const empty = size - progress;
+
+    const progressText = "▰".repeat(progress);
+    const emptyText = "▱".repeat(empty);
+
+    return `${progressText}${emptyText} ${Math.round(percentage * 100)}% (${current}/${total})`;
+}
+
 /**
  * Creates an embed displaying a user's quest log
  */
 export function getQuestListEmbed(userQuests: QuestEntry[]): EmbedBuilder {
     const embed = new EmbedBuilder()
         .setTitle("📜 Quest Log")
+        .setDescription("Your active and completed quests.")
         .setColor(0x3498db); // Blue
 
+    if (userQuests.length === 0) {
+        embed.setDescription("You have no active quests. Check available quests!");
+    }
+
     userQuests.forEach(entry => {
         const status = getQuestStatus(entry.completedAt);
         const rewards = entry.quest.rewards as { xp?: number, balance?: number };
         const rewardsText = formatQuestRewards(rewards);
+        
+        const requirements = entry.quest.requirements as { target?: number };
+        const target = requirements?.target || 1;
+        const progress = entry.progress || 0;
+
+        const progressBar = entry.completedAt ? "✅ Fully completed" : renderProgressBar(progress, target);
 
         embed.addFields({
             name: `${entry.quest.name} (${status})`,
-            value: `${entry.quest.description}\n**Rewards:** ${rewardsText}\n**Progress:** ${entry.progress}%`,
+            value: `${entry.quest.description}\n**Rewards:** ${rewardsText}\n**Progress:** ${progressBar}`,
             inline: false
         });
     });
 
     return embed;
 }
+
+/**
+ * Creates an embed for available quests
+ */
+export function getAvailableQuestsEmbed(availableQuests: AvailableQuest[]): EmbedBuilder {
+    const embed = new EmbedBuilder()
+        .setTitle("🗺️ Available Quests")
+        .setDescription("Quests you can accept right now.")
+        .setColor(0x2ecc71); // Green
+
+    if (availableQuests.length === 0) {
+        embed.setDescription("There are no new quests available for you at the moment.");
+    }
+
+    availableQuests.forEach(quest => {
+        const rewards = quest.rewards as { xp?: number, balance?: number };
+        const rewardsText = formatQuestRewards(rewards);
+        
+        const requirements = quest.requirements as { target?: number };
+        const target = requirements?.target || 1;
+
+        embed.addFields({
+            name: quest.name,
+            value: `${quest.description}\n**Goal:** Reach ${target} for this activity.\n**Rewards:** ${rewardsText}`,
+            inline: false
+        });
+    });
+
+    return embed;
+}
+
+/**
+ * Returns action rows for the quest view
+ */
+export function getQuestActionRows(viewType: 'active' | 'available', availableQuests: AvailableQuest[] = []): ActionRowBuilder<any>[] {
+    const rows: ActionRowBuilder<any>[] = [];
+
+    const navRow = new ActionRowBuilder<ButtonBuilder>().addComponents(
+        new ButtonBuilder()
+            .setCustomId("quest_view_active")
+            .setLabel("Active Quests")
+            .setStyle(viewType === 'active' ? ButtonStyle.Primary : ButtonStyle.Secondary)
+            .setDisabled(viewType === 'active'),
+        new ButtonBuilder()
+            .setCustomId("quest_view_available")
+            .setLabel("Available Quests")
+            .setStyle(viewType === 'available' ? ButtonStyle.Primary : ButtonStyle.Secondary)
+            .setDisabled(viewType === 'available')
+    );
+    rows.push(navRow);
+
+    if (viewType === 'available' && availableQuests.length > 0) {
+        const selectMenu = new StringSelectMenuBuilder()
+            .setCustomId("quest_accept_select")
+            .setPlaceholder("Select a quest to accept")
+            .addOptions(
+                availableQuests.slice(0, 25).map(q => 
+                    new StringSelectMenuOptionBuilder()
+                        .setLabel(q.name)
+                        .setDescription(q.description?.substring(0, 100) || "")
+                        .setValue(q.id.toString())
+                )
+            );
+        
+        rows.push(new ActionRowBuilder().addComponents(selectMenu));
+    }
+
+    return rows;
+}
diff --git a/shared/modules/quest/quest.service.test.ts b/shared/modules/quest/quest.service.test.ts
index 220523d..96cadc6 100644
--- a/shared/modules/quest/quest.service.test.ts
+++ b/shared/modules/quest/quest.service.test.ts
@@ -33,6 +33,7 @@ mock.module("@shared/db/DrizzleClient", () => {
     const createMockTx = () => ({
         query: {
             userQuests: { findFirst: mockFindFirst, findMany: mockFindMany },
+            quests: { findMany: mockFindMany },
         },
         insert: mockInsert,
         update: mockUpdate,
@@ -149,6 +150,31 @@ describe("questService", () => {
         });
     });
 
+    describe("getAvailableQuests", () => {
+        it("should return quests not yet accepted by user", async () => {
+            // First call to findMany (userQuests) returns accepted quest IDs
+            // Second call to findMany (quests) returns available quests
+            mockFindMany
+                .mockResolvedValueOnce([{ questId: 1 }]) // userQuests
+                .mockResolvedValueOnce([{ id: 2, name: "New Quest" }]); // quests
+
+            const result = await questService.getAvailableQuests("1");
+
+            expect(result).toEqual([{ id: 2, name: "New Quest" }] as any);
+            expect(mockFindMany).toHaveBeenCalledTimes(2);
+        });
+
+        it("should return all quests if user has no assigned quests", async () => {
+            mockFindMany
+                .mockResolvedValueOnce([]) // userQuests
+                .mockResolvedValueOnce([{ id: 1 }, { id: 2 }]); // quests
+
+            const result = await questService.getAvailableQuests("1");
+
+            expect(result).toEqual([{ id: 1 }, { id: 2 }] as any);
+        });
+    });
+
     describe("handleEvent", () => {
         it("should progress a quest with sub-events", async () => {
             const mockUserQuest = {
diff --git a/shared/modules/quest/quest.service.ts b/shared/modules/quest/quest.service.ts
index 1bf8ed6..4cc187f 100644
--- a/shared/modules/quest/quest.service.ts
+++ b/shared/modules/quest/quest.service.ts
@@ -118,5 +118,20 @@ export const questService = {
                 quest: true,
             }
         });
+    },
+
+    getAvailableQuests: async (userId: string) => {
+        const userQuestIds = (await DrizzleClient.query.userQuests.findMany({
+            where: eq(userQuests.userId, BigInt(userId)),
+            columns: {
+                questId: true
+            }
+        })).map(uq => uq.questId);
+
+        return await DrizzleClient.query.quests.findMany({
+            where: (quests, { notInArray }) => userQuestIds.length > 0
+                ? notInArray(quests.id, userQuestIds)
+                : undefined
+        });
     }
 };

From 2f73f38877f95b995ff1c877ee17cfa59cac9f0d Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Thu, 15 Jan 2026 17:21:49 +0100
Subject: [PATCH 15/32] feat: Add web admin page for quest management and
 refactor Discord bot's quest UI to use new components.

---
 bot/commands/quest/quests.ts          |  53 +++---
 bot/lib/BotClient.ts                  |  25 ++-
 bot/modules/quest/quest.view.ts       | 192 +++++++++++++--------
 shared/lib/events.ts                  |   3 +
 shared/modules/quest/quest.service.ts |  33 +++-
 web/src/App.tsx                       |   2 +
 web/src/components/quest-form.tsx     | 230 ++++++++++++++++++++++++++
 web/src/pages/AdminQuests.tsx         |  59 +++++++
 web/src/pages/Dashboard.tsx           |   3 +
 web/src/pages/DesignSystem.tsx        |  15 ++
 web/src/pages/Home.tsx                |   3 +
 web/src/server.ts                     |  28 ++++
 12 files changed, 552 insertions(+), 94 deletions(-)
 create mode 100644 web/src/components/quest-form.tsx
 create mode 100644 web/src/pages/AdminQuests.tsx

diff --git a/bot/commands/quest/quests.ts b/bot/commands/quest/quests.ts
index 32262e5..a3f053a 100644
--- a/bot/commands/quest/quests.ts
+++ b/bot/commands/quest/quests.ts
@@ -1,8 +1,12 @@
 import { createCommand } from "@shared/lib/utils";
-import { SlashCommandBuilder, MessageFlags, ComponentType } from "discord.js";
+import { SlashCommandBuilder, MessageFlags } from "discord.js";
 import { questService } from "@shared/modules/quest/quest.service";
-import { createSuccessEmbed, createWarningEmbed } from "@lib/embeds";
-import { getQuestListEmbed, getAvailableQuestsEmbed, getQuestActionRows } from "@/modules/quest/quest.view";
+import { createSuccessEmbed } from "@lib/embeds";
+import { 
+    getQuestListComponents, 
+    getAvailableQuestsComponents, 
+    getQuestActionRows 
+} from "@/modules/quest/quest.view";
 
 export const quests = createCommand({
     data: new SlashCommandBuilder()
@@ -17,15 +21,18 @@ export const quests = createCommand({
             const userQuests = await questService.getUserQuests(userId);
             const availableQuests = await questService.getAvailableQuests(userId);
 
-            const embed = viewType === 'active' 
-                ? getQuestListEmbed(userQuests) 
-                : getAvailableQuestsEmbed(availableQuests);
-            
-            const components = getQuestActionRows(viewType, availableQuests);
+            const containers = viewType === 'active'
+                ? getQuestListComponents(userQuests)
+                : getAvailableQuestsComponents(availableQuests);
+
+            const actionRows = getQuestActionRows(viewType);
 
             await interaction.editReply({
-                embeds: [embed],
-                components: components
+                content: null,
+                embeds: null as any,
+                components: [...containers, ...actionRows] as any,
+                flags: MessageFlags.IsComponentsV2,
+                allowedMentions: { parse: [] }
             });
         };
 
@@ -33,8 +40,8 @@ export const quests = createCommand({
         await updateView('active');
 
         const collector = response.createMessageComponentCollector({
-            time: 60000,
-            componentType: undefined // Allow both buttons and select menu
+            time: 120000, // 2 minutes
+            componentType: undefined // Allow buttons
         });
 
         collector.on('collect', async (i) => {
@@ -47,22 +54,24 @@ export const quests = createCommand({
                 } else if (i.customId === "quest_view_available") {
                     await i.deferUpdate();
                     await updateView('available');
-                } else if (i.customId === "quest_accept_select") {
-                    const questId = parseInt((i as any).values[0]);
+                } else if (i.customId.startsWith("quest_accept:")) {
+                    const questIdStr = i.customId.split(":")[1];
+                    if (!questIdStr) return;
+                    const questId = parseInt(questIdStr);
                     await questService.assignQuest(userId, questId);
-                    
-                    await i.reply({ 
-                        embeds: [createSuccessEmbed(`You have accepted a new quest!`, "Quest Accepted")], 
-                        flags: MessageFlags.Ephemeral 
+
+                    await i.reply({
+                        embeds: [createSuccessEmbed(`You have accepted a new quest!`, "Quest Accepted")],
+                        flags: MessageFlags.Ephemeral
                     });
-                    
+
                     await updateView('active');
                 }
             } catch (error) {
                 console.error("Quest interaction error:", error);
-                await i.followUp({ 
-                    content: "Something went wrong while processing your quest interaction.", 
-                    flags: MessageFlags.Ephemeral 
+                await i.followUp({
+                    content: "Something went wrong while processing your quest interaction.",
+                    flags: MessageFlags.Ephemeral
                 });
             }
         });
diff --git a/bot/lib/BotClient.ts b/bot/lib/BotClient.ts
index d347f08..de0fdb6 100644
--- a/bot/lib/BotClient.ts
+++ b/bot/lib/BotClient.ts
@@ -1,4 +1,4 @@
-import { Client as DiscordClient, Collection, GatewayIntentBits, REST, Routes } from "discord.js";
+import { Client as DiscordClient, Collection, GatewayIntentBits, REST, Routes, MessageFlags } from "discord.js";
 import { join } from "node:path";
 import type { Command } from "@shared/lib/types";
 import { env } from "@shared/lib/env";
@@ -74,6 +74,27 @@ export class Client extends DiscordClient {
             console.log(`🛠️ System Action: Maintenance mode ${enabled ? "ON" : "OFF"}${reason ? ` (${reason})` : ""}`);
             this.maintenanceMode = enabled;
         });
+
+        systemEvents.on(EVENTS.QUEST.COMPLETED, async (data: { userId: string, quest: any, rewards: any }) => {
+            const { userId, quest, rewards } = data;
+            try {
+                const user = await this.users.fetch(userId);
+                if (!user) return;
+
+                const { getQuestCompletionComponents } = await import("@/modules/quest/quest.view");
+                const components = getQuestCompletionComponents(quest, rewards);
+
+                // Try to send to the user's DM
+                await user.send({ 
+                    components: components as any,
+                    flags: [MessageFlags.IsComponentsV2]
+                }).catch(async () => {
+                    console.warn(`Could not DM user ${userId} quest completion message. User might have DMs disabled.`);
+                });
+            } catch (error) {
+                console.error("Failed to send quest completion notification:", error);
+            }
+        });
     }
 
     async loadCommands(reload: boolean = false) {
@@ -176,4 +197,4 @@ export class Client extends DiscordClient {
     }
 }
 
-export const AuroraClient = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.MessageContent, GatewayIntentBits.GuildMessages, GatewayIntentBits.GuildMembers] });
\ No newline at end of file
+export const AuroraClient = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.MessageContent, GatewayIntentBits.GuildMessages, GatewayIntentBits.GuildMembers, GatewayIntentBits.DirectMessages] });
\ No newline at end of file
diff --git a/bot/modules/quest/quest.view.ts b/bot/modules/quest/quest.view.ts
index 6343dc4..2e18283 100644
--- a/bot/modules/quest/quest.view.ts
+++ b/bot/modules/quest/quest.view.ts
@@ -1,4 +1,13 @@
-import { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle, StringSelectMenuBuilder, StringSelectMenuOptionBuilder } from "discord.js";
+import {
+    ActionRowBuilder,
+    ButtonBuilder,
+    ButtonStyle,
+    ContainerBuilder,
+    TextDisplayBuilder,
+    SeparatorBuilder,
+    SeparatorSpacingSize,
+    MessageFlags
+} from "discord.js";
 
 /**
  * Quest entry with quest details and progress
@@ -27,6 +36,13 @@ interface AvailableQuest {
     requirements: any;
 }
 
+// Color palette for containers
+const COLORS = {
+    ACTIVE: 0x3498db,    // Blue - in progress
+    AVAILABLE: 0x2ecc71, // Green - available
+    COMPLETED: 0xf1c40f  // Gold - completed
+};
+
 /**
  * Formats quest rewards object into a human-readable string
  */
@@ -34,14 +50,7 @@ function formatQuestRewards(rewards: { xp?: number, balance?: number }): string
     const rewardStr: string[] = [];
     if (rewards?.xp) rewardStr.push(`${rewards.xp} XP`);
     if (rewards?.balance) rewardStr.push(`${rewards.balance} 🪙`);
-    return rewardStr.join(", ");
-}
-
-/**
- * Returns the quest status display string
- */
-function getQuestStatus(completedAt: Date | null): string {
-    return completedAt ? "✅ Completed" : "📝 In Progress";
+    return rewardStr.join(" • ") || "None";
 }
 
 /**
@@ -55,108 +64,155 @@ function renderProgressBar(current: number, total: number, size: number = 10): s
     const progressText = "▰".repeat(progress);
     const emptyText = "▱".repeat(empty);
 
-    return `${progressText}${emptyText} ${Math.round(percentage * 100)}% (${current}/${total})`;
+    return `${progressText}${emptyText} ${Math.round(percentage * 100)}%`;
 }
 
 /**
- * Creates an embed displaying a user's quest log
+ * Creates Components v2 containers for the quest list (active quests only)
  */
-export function getQuestListEmbed(userQuests: QuestEntry[]): EmbedBuilder {
-    const embed = new EmbedBuilder()
-        .setTitle("📜 Quest Log")
-        .setDescription("Your active and completed quests.")
-        .setColor(0x3498db); // Blue
+export function getQuestListComponents(userQuests: QuestEntry[]): ContainerBuilder[] {
+    // Filter to only show in-progress quests (not completed)
+    const activeQuests = userQuests.filter(entry => entry.completedAt === null);
 
-    if (userQuests.length === 0) {
-        embed.setDescription("You have no active quests. Check available quests!");
+    const container = new ContainerBuilder()
+        .setAccentColor(COLORS.ACTIVE)
+        .addTextDisplayComponents(
+            new TextDisplayBuilder().setContent("# 📜 Quest Log"),
+            new TextDisplayBuilder().setContent("-# Your active quests")
+        );
+
+    if (activeQuests.length === 0) {
+        container.addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small));
+        container.addTextDisplayComponents(
+            new TextDisplayBuilder().setContent("*You have no active quests. Check available quests!*")
+        );
+        return [container];
     }
 
-    userQuests.forEach(entry => {
-        const status = getQuestStatus(entry.completedAt);
+    activeQuests.forEach((entry) => {
+        container.addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small));
+
         const rewards = entry.quest.rewards as { xp?: number, balance?: number };
         const rewardsText = formatQuestRewards(rewards);
-        
+
         const requirements = entry.quest.requirements as { target?: number };
         const target = requirements?.target || 1;
         const progress = entry.progress || 0;
+        const progressBar = renderProgressBar(progress, target);
 
-        const progressBar = entry.completedAt ? "✅ Fully completed" : renderProgressBar(progress, target);
-
-        embed.addFields({
-            name: `${entry.quest.name} (${status})`,
-            value: `${entry.quest.description}\n**Rewards:** ${rewardsText}\n**Progress:** ${progressBar}`,
-            inline: false
-        });
+        container.addTextDisplayComponents(
+            new TextDisplayBuilder().setContent(`**${entry.quest.name}**`),
+            new TextDisplayBuilder().setContent(entry.quest.description || "*No description*"),
+            new TextDisplayBuilder().setContent(`📊 ${progressBar} \`${progress}/${target}\`  •  🎁 ${rewardsText}`)
+        );
     });
 
-    return embed;
+    return [container];
 }
 
 /**
- * Creates an embed for available quests
+ * Creates Components v2 containers for available quests with inline accept buttons
  */
-export function getAvailableQuestsEmbed(availableQuests: AvailableQuest[]): EmbedBuilder {
-    const embed = new EmbedBuilder()
-        .setTitle("🗺️ Available Quests")
-        .setDescription("Quests you can accept right now.")
-        .setColor(0x2ecc71); // Green
+export function getAvailableQuestsComponents(availableQuests: AvailableQuest[]): ContainerBuilder[] {
+    const container = new ContainerBuilder()
+        .setAccentColor(COLORS.AVAILABLE)
+        .addTextDisplayComponents(
+            new TextDisplayBuilder().setContent("# 🗺️ Available Quests"),
+            new TextDisplayBuilder().setContent("-# Quests you can accept")
+        );
 
     if (availableQuests.length === 0) {
-        embed.setDescription("There are no new quests available for you at the moment.");
+        container.addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small));
+        container.addTextDisplayComponents(
+            new TextDisplayBuilder().setContent("*No new quests available at the moment.*")
+        );
+        return [container];
     }
 
-    availableQuests.forEach(quest => {
+    // Limit to 10 quests (5 action rows max with 2 added for navigation)
+    const questsToShow = availableQuests.slice(0, 10);
+
+    questsToShow.forEach((quest) => {
+        container.addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small));
+
         const rewards = quest.rewards as { xp?: number, balance?: number };
         const rewardsText = formatQuestRewards(rewards);
-        
+
         const requirements = quest.requirements as { target?: number };
         const target = requirements?.target || 1;
 
-        embed.addFields({
-            name: quest.name,
-            value: `${quest.description}\n**Goal:** Reach ${target} for this activity.\n**Rewards:** ${rewardsText}`,
-            inline: false
-        });
+        container.addTextDisplayComponents(
+            new TextDisplayBuilder().setContent(`**${quest.name}**`),
+            new TextDisplayBuilder().setContent(quest.description || "*No description*"),
+            new TextDisplayBuilder().setContent(`🎯 Goal: \`${target}\`  •  🎁 ${rewardsText}`)
+        );
+
+        // Add accept button inline within the container
+        container.addActionRowComponents(
+            new ActionRowBuilder<ButtonBuilder>().addComponents(
+                new ButtonBuilder()
+                    .setCustomId(`quest_accept:${quest.id}`)
+                    .setLabel("Accept Quest")
+                    .setStyle(ButtonStyle.Success)
+                    .setEmoji("✅")
+            )
+        );
     });
 
-    return embed;
+    return [container];
 }
 
 /**
- * Returns action rows for the quest view
+ * Returns action rows for navigation only
  */
-export function getQuestActionRows(viewType: 'active' | 'available', availableQuests: AvailableQuest[] = []): ActionRowBuilder<any>[] {
-    const rows: ActionRowBuilder<any>[] = [];
-
+export function getQuestActionRows(viewType: 'active' | 'available'): ActionRowBuilder<ButtonBuilder>[] {
+    // Navigation row
     const navRow = new ActionRowBuilder<ButtonBuilder>().addComponents(
         new ButtonBuilder()
             .setCustomId("quest_view_active")
-            .setLabel("Active Quests")
+            .setLabel("📜 Active")
             .setStyle(viewType === 'active' ? ButtonStyle.Primary : ButtonStyle.Secondary)
             .setDisabled(viewType === 'active'),
         new ButtonBuilder()
             .setCustomId("quest_view_available")
-            .setLabel("Available Quests")
+            .setLabel("🗺️ Available")
             .setStyle(viewType === 'available' ? ButtonStyle.Primary : ButtonStyle.Secondary)
             .setDisabled(viewType === 'available')
     );
-    rows.push(navRow);
 
-    if (viewType === 'available' && availableQuests.length > 0) {
-        const selectMenu = new StringSelectMenuBuilder()
-            .setCustomId("quest_accept_select")
-            .setPlaceholder("Select a quest to accept")
-            .addOptions(
-                availableQuests.slice(0, 25).map(q => 
-                    new StringSelectMenuOptionBuilder()
-                        .setLabel(q.name)
-                        .setDescription(q.description?.substring(0, 100) || "")
-                        .setValue(q.id.toString())
-                )
-            );
-        
-        rows.push(new ActionRowBuilder().addComponents(selectMenu));
-    }
-
-    return rows;
+    return [navRow];
+}
+
+/**
+ * Creates Components v2 celebratory message for quest completion
+ */
+export function getQuestCompletionComponents(quest: any, rewards: { xp: bigint, balance: bigint }): ContainerBuilder[] {
+    const rewardsText = formatQuestRewards({
+        xp: Number(rewards.xp),
+        balance: Number(rewards.balance)
+    });
+
+    const container = new ContainerBuilder()
+        .setAccentColor(COLORS.COMPLETED)
+        .addTextDisplayComponents(
+            new TextDisplayBuilder().setContent("# 🎉 Quest Completed!"),
+            new TextDisplayBuilder().setContent(`Congratulations! You've completed **${quest.name}**`)
+        )
+        .addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small))
+        .addTextDisplayComponents(
+            new TextDisplayBuilder().setContent(`📝 ${quest.description || "No description provided."}`),
+            new TextDisplayBuilder().setContent(`🎁 **Rewards Earned:** ${rewardsText}`)
+        );
+
+    return [container];
+}
+
+/**
+ * Gets MessageFlags and allowedMentions for Components v2 messages
+ */
+export function getComponentsV2MessageFlags() {
+    return {
+        flags: MessageFlags.IsComponentsV2,
+        allowedMentions: { parse: [] as const }
+    };
 }
diff --git a/shared/lib/events.ts b/shared/lib/events.ts
index aff8748..258c13a 100644
--- a/shared/lib/events.ts
+++ b/shared/lib/events.ts
@@ -17,5 +17,8 @@ export const EVENTS = {
         RELOAD_COMMANDS: "actions:reload_commands",
         CLEAR_CACHE: "actions:clear_cache",
         MAINTENANCE_MODE: "actions:maintenance_mode",
+    },
+    QUEST: {
+        COMPLETED: "quest:completed",
     }
 } as const;
diff --git a/shared/modules/quest/quest.service.ts b/shared/modules/quest/quest.service.ts
index 4cc187f..72ec622 100644
--- a/shared/modules/quest/quest.service.ts
+++ b/shared/modules/quest/quest.service.ts
@@ -1,4 +1,4 @@
-import { userQuests } from "@db/schema";
+import { userQuests, quests } from "@db/schema";
 import { eq, and } from "drizzle-orm";
 import { UserError } from "@shared/lib/errors";
 import { DrizzleClient } from "@shared/db/DrizzleClient";
@@ -7,6 +7,7 @@ import { levelingService } from "@shared/modules/leveling/leveling.service";
 import { withTransaction } from "@/lib/db";
 import type { Transaction } from "@shared/lib/types";
 import { TransactionType } from "@shared/lib/constants";
+import { systemEvents, EVENTS } from "@shared/lib/events";
 
 export const questService = {
     assignQuest: async (userId: string, questId: number, tx?: Transaction) => {
@@ -107,6 +108,14 @@ export const questService = {
                 results.xp = xp;
             }
 
+            // Emit completion event for the bot to handle notifications
+            systemEvents.emit(EVENTS.QUEST.COMPLETED, {
+                userId,
+                questId,
+                quest: userQuest.quest,
+                rewards: results
+            });
+
             return { success: true, rewards: results };
         }, tx);
     },
@@ -120,7 +129,7 @@ export const questService = {
         });
     },
 
-    getAvailableQuests: async (userId: string) => {
+    async getAvailableQuests(userId: string) {
         const userQuestIds = (await DrizzleClient.query.userQuests.findMany({
             where: eq(userQuests.userId, BigInt(userId)),
             columns: {
@@ -133,5 +142,25 @@ export const questService = {
                 ? notInArray(quests.id, userQuestIds)
                 : undefined
         });
+    },
+
+    async createQuest(data: {
+        name: string;
+        description: string;
+        triggerEvent: string;
+        requirements: { target: number };
+        rewards: { xp: number; balance: number };
+    }, tx?: Transaction) {
+        return await withTransaction(async (txFn) => {
+            return await txFn.insert(quests)
+                .values({
+                    name: data.name,
+                    description: data.description,
+                    triggerEvent: data.triggerEvent,
+                    requirements: data.requirements,
+                    rewards: data.rewards,
+                })
+                .returning();
+        }, tx);
     }
 };
diff --git a/web/src/App.tsx b/web/src/App.tsx
index f6362d3..3ffa537 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./index.css";
 import { Dashboard } from "./pages/Dashboard";
 import { DesignSystem } from "./pages/DesignSystem";
+import { AdminQuests } from "./pages/AdminQuests";
 import { Home } from "./pages/Home";
 import { Toaster } from "sonner";
 
@@ -12,6 +13,7 @@ export function App() {
       <Routes>
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/design-system" element={<DesignSystem />} />
+        <Route path="/admin/quests" element={<AdminQuests />} />
         <Route path="/" element={<Home />} />
       </Routes>
     </BrowserRouter>
diff --git a/web/src/components/quest-form.tsx b/web/src/components/quest-form.tsx
new file mode 100644
index 0000000..3cfbed1
--- /dev/null
+++ b/web/src/components/quest-form.tsx
@@ -0,0 +1,230 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./ui/card";
+import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "./ui/form";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import { Textarea } from "./ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { toast } from "sonner";
+import { ScrollArea } from "./ui/scroll-area";
+
+const questSchema = z.object({
+    name: z.string().min(3, "Name must be at least 3 characters"),
+    description: z.string().optional(),
+    triggerEvent: z.string().min(1, "Trigger event is required"),
+    target: z.number().min(1, "Target must be at least 1"),
+    xpReward: z.number().min(0).optional(),
+    balanceReward: z.number().min(0).optional(),
+});
+
+type QuestFormValues = z.infer<typeof questSchema>;
+
+const TRIGGER_EVENTS = [
+    { label: "XP Gain", value: "XP_GAIN" },
+    { label: "Item Collect", value: "ITEM_COLLECT" },
+    { label: "Item Use", value: "ITEM_USE" },
+    { label: "Daily Reward", value: "DAILY_REWARD" },
+    { label: "Lootbox Currency Reward", value: "LOOTBOX" },
+    { label: "Exam Reward", value: "EXAM_REWARD" },
+    { label: "Purchase", value: "PURCHASE" },
+    { label: "Transfer In", value: "TRANSFER_IN" },
+    { label: "Transfer Out", value: "TRANSFER_OUT" },
+    { label: "Trade In", value: "TRADE_IN" },
+    { label: "Trade Out", value: "TRADE_OUT" },
+    { label: "Quest Reward", value: "QUEST_REWARD" },
+    { label: "Trivia Entry", value: "TRIVIA_ENTRY" },
+    { label: "Trivia Win", value: "TRIVIA_WIN" },
+];
+
+export function QuestForm() {
+    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,
+        },
+    });
+
+    const onSubmit = async (data: QuestFormValues) => {
+        setIsSubmitting(true);
+        try {
+            const response = await fetch("/api/quests", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(data),
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || "Failed to create quest");
+            }
+
+            toast.success("Quest created successfully!", {
+                description: `${data.name} has been added to the database.`,
+            });
+            form.reset();
+        } catch (error) {
+            console.error("Submission error:", error);
+            toast.error("Failed to create quest", {
+                description: error instanceof Error ? error.message : "An unknown error occurred",
+            });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <Card className="glass-card max-w-2xl mx-auto overflow-hidden">
+            <div className="h-1.5 bg-primary w-full" />
+            <CardHeader>
+                <CardTitle className="text-2xl font-bold text-primary">Create New Quest</CardTitle>
+                <CardDescription>
+                    Configure a new quest for the Aurora RPG academy.
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <FormField
+                                control={form.control}
+                                name="name"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Quest Name</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="Collector's Journey" {...field} className="bg-background/50" />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="triggerEvent"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Trigger Event</FormLabel>
+                                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                            <FormControl>
+                                                <SelectTrigger className="bg-background/50">
+                                                    <SelectValue placeholder="Select an event" />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent className="glass-card border-border/50">
+                                                <ScrollArea className="h-48">
+                                                    {TRIGGER_EVENTS.map((event) => (
+                                                        <SelectItem key={event.value} value={event.value}>
+                                                            {event.label}
+                                                        </SelectItem>
+                                                    ))}
+                                                </ScrollArea>
+                                            </SelectContent>
+                                        </Select>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <FormField
+                            control={form.control}
+                            name="description"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Description</FormLabel>
+                                    <FormControl>
+                                        <Textarea 
+                                            placeholder="Assigns a task to the student..." 
+                                            {...field} 
+                                            className="min-h-[100px] bg-background/50"
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <FormField
+                                control={form.control}
+                                name="target"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Target Value</FormLabel>
+                                        <FormControl>
+                                            <Input 
+                                                type="number" 
+                                                {...field} 
+                                                onChange={e => field.onChange(parseInt(e.target.value))}
+                                                className="bg-background/50"
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="xpReward"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>XP Reward</FormLabel>
+                                        <FormControl>
+                                            <Input 
+                                                type="number" 
+                                                {...field} 
+                                                onChange={e => field.onChange(parseInt(e.target.value))}
+                                                className="bg-background/50"
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="balanceReward"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>AU Reward</FormLabel>
+                                        <FormControl>
+                                            <Input 
+                                                type="number" 
+                                                {...field} 
+                                                onChange={e => field.onChange(parseInt(e.target.value))}
+                                                className="bg-background/50"
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <Button 
+                            type="submit" 
+                            disabled={isSubmitting}
+                            className="w-full bg-primary text-primary-foreground hover:glow-primary active-press py-6 text-lg font-bold"
+                        >
+                            {isSubmitting ? "Creating..." : "Create Quest"}
+                        </Button>
+                    </form>
+                </Form>
+            </CardContent>
+        </Card>
+    );
+}
diff --git a/web/src/pages/AdminQuests.tsx b/web/src/pages/AdminQuests.tsx
new file mode 100644
index 0000000..018f473
--- /dev/null
+++ b/web/src/pages/AdminQuests.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { QuestForm } from "../components/quest-form";
+import { Badge } from "../components/ui/badge";
+import { SectionHeader } from "../components/section-header";
+import { SettingsDrawer } from "../components/settings-drawer";
+import { ChevronLeft } from "lucide-react";
+
+export function AdminQuests() {
+    return (
+        <div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
+            {/* Navigation */}
+            <nav className="sticky top-0 z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
+                <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full bg-aurora sun-flare shadow-sm" />
+                    <span className="text-xl font-bold tracking-tight text-primary">Aurora Admin</span>
+                </div>
+
+                <div className="flex items-center gap-6">
+                    <Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
+                        Home
+                    </Link>
+                    <Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
+                        Dashboard
+                    </Link>
+                    <Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
+                        Design System
+                    </Link>
+                    <div className="h-4 w-px bg-border/50" />
+                    <SettingsDrawer />
+                </div>
+            </nav>
+
+            <main className="pt-12 px-8 pb-12 max-w-7xl mx-auto space-y-12">
+                <div className="space-y-4">
+                    <Link 
+                        to="/dashboard" 
+                        className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors w-fit"
+                    >
+                        <ChevronLeft className="w-4 h-4" />
+                        <span className="text-sm font-medium">Back to Dashboard</span>
+                    </Link>
+                    
+                    <SectionHeader
+                        badge="Quest Management"
+                        title="Administrative Tools"
+                        description="Create and manage quests for the Aurora RPG students."
+                    />
+                </div>
+
+                <div className="animate-in fade-in slide-up duration-700">
+                    <QuestForm />
+                </div>
+            </main>
+        </div>
+    );
+}
+
+export default AdminQuests;
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index 07297fd..a814026 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -58,6 +58,9 @@ export function Dashboard() {
                     <Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
                         Design System
                     </Link>
+                    <Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
+                        Admin
+                    </Link>
                     <div className="h-4 w-px bg-border/50" />
                     <SettingsDrawer />
                 </div>
diff --git a/web/src/pages/DesignSystem.tsx b/web/src/pages/DesignSystem.tsx
index 5763ede..405c253 100644
--- a/web/src/pages/DesignSystem.tsx
+++ b/web/src/pages/DesignSystem.tsx
@@ -12,6 +12,7 @@ import { StatCard } from "../components/stat-card";
 import { LootdropCard } from "../components/lootdrop-card";
 import { Activity, Coins, Flame, Trophy } from "lucide-react";
 import { SettingsDrawer } from "../components/settings-drawer";
+import { QuestForm } from "../components/quest-form";
 
 import { RecentActivity } from "../components/recent-activity";
 import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
@@ -98,6 +99,9 @@ export function DesignSystem() {
                     <Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
                         Dashboard
                     </Link>
+                    <Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
+                        Admin
+                    </Link>
                 </div>
             </nav>
 
@@ -464,6 +468,17 @@ export function DesignSystem() {
                     </div>
                 </section>
 
+                {/* Administrative Tools Showcase */}
+                <section className="space-y-6 animate-in slide-up delay-700">
+                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
+                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
+                        Administrative Tools
+                    </h2>
+                    <div className="grid grid-cols-1 gap-6 text-left">
+                        <QuestForm />
+                    </div>
+                </section>
+
                 {/* Typography */}
                 <section className="space-y-8 pb-12">
                     <h2 className="text-step-3 font-bold text-center">Fluid Typography</h2>
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index fef426b..ccbadcb 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -31,6 +31,9 @@ export function Home() {
                     <Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
                         Design System
                     </Link>
+                    <Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
+                        Admin
+                    </Link>
 
                 </div>
             </nav>
diff --git a/web/src/server.ts b/web/src/server.ts
index 9b666a2..298346e 100644
--- a/web/src/server.ts
+++ b/web/src/server.ts
@@ -169,6 +169,34 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                 }
             }
 
+            // Quest Management
+            if (url.pathname === "/api/quests" && req.method === "POST") {
+                try {
+                    const { questService } = await import("@shared/modules/quest/quest.service");
+                    const data = await req.json();
+
+                    // Basic validation could be added here or rely on service/DB
+                    const result = await questService.createQuest({
+                        name: data.name,
+                        description: data.description || "",
+                        triggerEvent: data.triggerEvent,
+                        requirements: { target: Number(data.target) || 1 },
+                        rewards: {
+                            xp: Number(data.xpReward) || 0,
+                            balance: Number(data.balanceReward) || 0
+                        }
+                    });
+
+                    return Response.json({ success: true, quest: result[0] });
+                } catch (error) {
+                    logger.error("web", "Error creating quest", error);
+                    return Response.json(
+                        { error: "Failed to create quest", details: error instanceof Error ? error.message : String(error) },
+                        { status: 500 }
+                    );
+                }
+            }
+
             // Settings Management
             if (url.pathname === "/api/settings") {
                 try {

From 2a72beb0ef323ea289bc94522cba270b6baa81df Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 12:49:17 +0100
Subject: [PATCH 16/32] feat: Implement new settings pages and refactor
 application layout and navigation with new components and hooks.

---
 bot/lib/clientStats.ts                       |    1 +
 shared/modules/dashboard/dashboard.types.ts  |    2 +
 web/build.ts                                 |   83 +-
 web/bun.lock                                 |    8 +
 web/package.json                             |    2 +
 web/src/App.tsx                              |   45 +-
 web/src/components/layout/app-sidebar.tsx    |  216 ++++
 web/src/components/layout/main-layout.tsx    |   56 +
 web/src/components/navigation/mobile-nav.tsx |   41 +
 web/src/components/settings-drawer.tsx       | 1122 ------------------
 web/src/components/stat-card.tsx             |   12 +-
 web/src/components/ui/badge.tsx              |   12 +-
 web/src/components/ui/button.tsx             |   14 +-
 web/src/components/ui/card.tsx               |    2 +-
 web/src/components/ui/collapsible.tsx        |   34 +
 web/src/components/ui/dropdown-menu.tsx      |  255 ++++
 web/src/components/ui/input.tsx              |    4 +-
 web/src/components/ui/sidebar.tsx            |   10 +-
 web/src/contexts/navigation-context.tsx      |  146 +++
 web/src/hooks/use-mobile.ts                  |   19 +
 web/src/hooks/use-settings.ts                |  183 +++
 web/src/pages/AdminQuests.tsx                |   58 +-
 web/src/pages/Dashboard.tsx                  |  204 ----
 web/src/pages/DesignSystem.tsx               |  709 +++++------
 web/src/pages/Home.tsx                       |   26 +-
 web/src/pages/admin/Overview.tsx             |  164 +++
 web/src/pages/settings/Economy.tsx           |  290 +++++
 web/src/pages/settings/General.tsx           |  149 +++
 web/src/pages/settings/Roles.tsx             |  141 +++
 web/src/pages/settings/SettingsLayout.tsx    |   65 +
 web/src/pages/settings/Systems.tsx           |  338 ++++++
 web/src/server.ts                            |    2 +-
 web/styles/globals.css                       |   34 +
 33 files changed, 2584 insertions(+), 1863 deletions(-)
 create mode 100644 web/src/components/layout/app-sidebar.tsx
 create mode 100644 web/src/components/layout/main-layout.tsx
 create mode 100644 web/src/components/navigation/mobile-nav.tsx
 delete mode 100644 web/src/components/settings-drawer.tsx
 create mode 100644 web/src/components/ui/collapsible.tsx
 create mode 100644 web/src/components/ui/dropdown-menu.tsx
 create mode 100644 web/src/contexts/navigation-context.tsx
 create mode 100644 web/src/hooks/use-mobile.ts
 create mode 100644 web/src/hooks/use-settings.ts
 delete mode 100644 web/src/pages/Dashboard.tsx
 create mode 100644 web/src/pages/admin/Overview.tsx
 create mode 100644 web/src/pages/settings/Economy.tsx
 create mode 100644 web/src/pages/settings/General.tsx
 create mode 100644 web/src/pages/settings/Roles.tsx
 create mode 100644 web/src/pages/settings/SettingsLayout.tsx
 create mode 100644 web/src/pages/settings/Systems.tsx

diff --git a/bot/lib/clientStats.ts b/bot/lib/clientStats.ts
index 92cf657..3cbbb79 100644
--- a/bot/lib/clientStats.ts
+++ b/bot/lib/clientStats.ts
@@ -23,6 +23,7 @@ export function getClientStats(): ClientStats {
         bot: {
             name: AuroraClient.user?.username || "Aurora",
             avatarUrl: AuroraClient.user?.displayAvatarURL() || null,
+            status: AuroraClient.user?.presence.activities[0]?.state || AuroraClient.user?.presence.activities[0]?.name || null,
         },
         guilds: AuroraClient.guilds.cache.size,
         ping: AuroraClient.ws.ping,
diff --git a/shared/modules/dashboard/dashboard.types.ts b/shared/modules/dashboard/dashboard.types.ts
index 4dc3ce4..948e0c9 100644
--- a/shared/modules/dashboard/dashboard.types.ts
+++ b/shared/modules/dashboard/dashboard.types.ts
@@ -13,6 +13,7 @@ export const DashboardStatsSchema = z.object({
     bot: z.object({
         name: z.string(),
         avatarUrl: z.string().nullable(),
+        status: z.string().nullable(),
     }),
     guilds: z.object({
         count: z.number(),
@@ -84,6 +85,7 @@ export const ClientStatsSchema = z.object({
     bot: z.object({
         name: z.string(),
         avatarUrl: z.string().nullable(),
+        status: z.string().nullable(),
     }),
     guilds: z.number(),
     ping: z.number(),
diff --git a/web/build.ts b/web/build.ts
index 5c7850f..76aaf15 100644
--- a/web/build.ts
+++ b/web/build.ts
@@ -135,6 +135,7 @@ const build = async () => {
     minify: true,
     target: "browser",
     sourcemap: "linked",
+    publicPath: "/", // Use absolute paths for SPA routing compatibility
     define: {
       "process.env.NODE_ENV": JSON.stringify((cliConfig as any).watch ? "development" : "production"),
     },
@@ -159,14 +160,86 @@ console.log(`\n✅ Build completed in ${buildTime}ms\n`);
 
 if ((cliConfig as any).watch) {
   console.log("👀 Watching for changes...\n");
-  // Keep the process alive for watch mode
-  // Bun.build with watch:true handles the watching, 
-  // we just need to make sure the script doesn't exit.
-  process.stdin.resume();
 
-  // Also, handle manual exit
+  // Polling-based file watcher for Docker compatibility
+  // Docker volumes don't propagate filesystem events (inotify) reliably
+  const srcDir = path.join(process.cwd(), "src");
+  const POLL_INTERVAL_MS = 1000;
+  let lastMtimes = new Map<string, number>();
+  let isRebuilding = false;
+
+  // Collect all file mtimes in src directory
+  const collectMtimes = async (): Promise<Map<string, number>> => {
+    const mtimes = new Map<string, number>();
+    const glob = new Bun.Glob("**/*.{ts,tsx,js,jsx,css,html}");
+    
+    for await (const file of glob.scan({ cwd: srcDir, absolute: true })) {
+      try {
+        const stat = await Bun.file(file).stat();
+        if (stat) {
+          mtimes.set(file, stat.mtime.getTime());
+        }
+      } catch {
+        // File may have been deleted, skip
+      }
+    }
+    return mtimes;
+  };
+
+  // Initial collection
+  lastMtimes = await collectMtimes();
+
+  // Polling loop
+  const poll = async () => {
+    if (isRebuilding) return;
+
+    const currentMtimes = await collectMtimes();
+    const changedFiles: string[] = [];
+
+    // Check for new or modified files
+    for (const [file, mtime] of currentMtimes) {
+      const lastMtime = lastMtimes.get(file);
+      if (lastMtime === undefined || lastMtime < mtime) {
+        changedFiles.push(path.relative(srcDir, file));
+      }
+    }
+
+    // Check for deleted files
+    for (const file of lastMtimes.keys()) {
+      if (!currentMtimes.has(file)) {
+        changedFiles.push(path.relative(srcDir, file) + " (deleted)");
+      }
+    }
+
+    if (changedFiles.length > 0) {
+      isRebuilding = true;
+      console.log(`\n🔄 Changes detected:`);
+      changedFiles.forEach(f => console.log(`   • ${f}`));
+      console.log("");
+
+      try {
+        const rebuildStart = performance.now();
+        await build();
+        const rebuildEnd = performance.now();
+        console.log(`\n✅ Rebuild completed in ${(rebuildEnd - rebuildStart).toFixed(2)}ms\n`);
+      } catch (err) {
+        console.error("❌ Rebuild failed:", err);
+      }
+
+      lastMtimes = currentMtimes;
+      isRebuilding = false;
+    }
+  };
+
+  const interval = setInterval(poll, POLL_INTERVAL_MS);
+
+  // Handle manual exit
   process.on("SIGINT", () => {
+    clearInterval(interval);
     console.log("\n👋 Stopping build watcher...");
     process.exit(0);
   });
+
+  // Keep process alive
+  process.stdin.resume();
 }
diff --git a/web/bun.lock b/web/bun.lock
index 773abef..a77d98b 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -7,7 +7,9 @@
       "dependencies": {
         "@hookform/resolvers": "^5.2.2",
         "@radix-ui/react-accordion": "^1.2.12",
+        "@radix-ui/react-collapsible": "^1.1.12",
         "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-scroll-area": "^1.2.10",
         "@radix-ui/react-select": "^2.2.6",
@@ -93,6 +95,8 @@
 
     "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
 
+    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
+
     "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
@@ -101,6 +105,8 @@
 
     "@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
 
+    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
+
     "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
 
     "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
@@ -295,6 +301,8 @@
 
     "@radix-ui/react-label/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
 
+    "@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
diff --git a/web/package.json b/web/package.json
index 5a9e149..d90c6bb 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,7 +11,9 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 3ffa537..38816d7 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,23 +1,50 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import "./index.css";
-import { Dashboard } from "./pages/Dashboard";
+
 import { DesignSystem } from "./pages/DesignSystem";
 import { AdminQuests } from "./pages/AdminQuests";
+import { AdminOverview } from "./pages/admin/Overview";
+
 import { Home } from "./pages/Home";
 import { Toaster } from "sonner";
+import { NavigationProvider } from "./contexts/navigation-context";
+import { MainLayout } from "./components/layout/main-layout";
+
+import { SettingsLayout } from "./pages/settings/SettingsLayout";
+import { GeneralSettings } from "./pages/settings/General";
+import { EconomySettings } from "./pages/settings/Economy";
+import { SystemsSettings } from "./pages/settings/Systems";
+import { RolesSettings } from "./pages/settings/Roles";
 
 export function App() {
   return (
     <BrowserRouter>
-      <Toaster richColors position="top-right" theme="dark" />
-      <Routes>
-        <Route path="/dashboard" element={<Dashboard />} />
-        <Route path="/design-system" element={<DesignSystem />} />
-        <Route path="/admin/quests" element={<AdminQuests />} />
-        <Route path="/" element={<Home />} />
-      </Routes>
+      <NavigationProvider>
+        <Toaster richColors position="top-right" theme="dark" />
+        <MainLayout>
+          <Routes>
+
+            <Route path="/design-system" element={<DesignSystem />} />
+            <Route path="/admin" element={<Navigate to="/admin/overview" replace />} />
+            <Route path="/admin/overview" element={<AdminOverview />} />
+            <Route path="/admin/quests" element={<AdminQuests />} />
+
+            
+            <Route path="/settings" element={<SettingsLayout />}>
+              <Route index element={<Navigate to="/settings/general" replace />} />
+              <Route path="general" element={<GeneralSettings />} />
+              <Route path="economy" element={<EconomySettings />} />
+              <Route path="systems" element={<SystemsSettings />} />
+              <Route path="roles" element={<RolesSettings />} />
+            </Route>
+
+            <Route path="/" element={<Home />} />
+          </Routes>
+        </MainLayout>
+      </NavigationProvider>
     </BrowserRouter>
   );
 }
 
 export default App;
+
diff --git a/web/src/components/layout/app-sidebar.tsx b/web/src/components/layout/app-sidebar.tsx
new file mode 100644
index 0000000..c5ceecf
--- /dev/null
+++ b/web/src/components/layout/app-sidebar.tsx
@@ -0,0 +1,216 @@
+import { Link } from "react-router-dom"
+import { ChevronRight } from "lucide-react"
+import {
+  Sidebar,
+  SidebarContent,
+
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarRail,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import { useNavigation, type NavItem } from "@/contexts/navigation-context"
+
+import { cn } from "@/lib/utils"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useSocket } from "@/hooks/use-socket"
+
+function NavItemWithSubMenu({ item }: { item: NavItem }) {
+  const { state } = useSidebar()
+  const isCollapsed = state === "collapsed"
+
+  // When collapsed, show a dropdown menu on hover/click
+  if (isCollapsed) {
+    return (
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              tooltip={item.title}
+              className={cn(
+                "transition-all duration-200 ease-in-out font-medium",
+                item.isActive 
+                  ? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary" 
+                  : "text-muted-foreground hover:text-foreground hover:bg-white/5"
+              )}
+            >
+              <item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            side="right"
+            align="start"
+            sideOffset={8}
+            className="min-w-[180px] bg-background/95 backdrop-blur-xl border-border/50"
+          >
+            <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              {item.title}
+            </div>
+            {item.subItems?.map((subItem) => (
+              <DropdownMenuItem key={subItem.title} asChild>
+                <Link 
+                  to={subItem.url}
+                  className={cn(
+                    "cursor-pointer",
+                    subItem.isActive && "text-primary bg-primary/10"
+                  )}
+                >
+                  {subItem.title}
+                </Link>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    )
+  }
+
+  // When expanded, show collapsible sub-menu
+  return (
+    <Collapsible defaultOpen={item.isActive} className="group/collapsible">
+      <SidebarMenuItem className="flex flex-col">
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton
+            tooltip={item.title}
+            className={cn(
+              "transition-all duration-200 ease-in-out font-medium",
+              item.isActive 
+                ? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary" 
+                : "text-muted-foreground hover:text-foreground hover:bg-white/5"
+            )}
+          >
+            <item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
+            <span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>
+              {item.title}
+            </span>
+            <ChevronRight className="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+          <SidebarMenuSub>
+            {item.subItems?.map((subItem) => (
+              <SidebarMenuSubItem key={subItem.title}>
+                <SidebarMenuSubButton
+                  asChild
+                  isActive={subItem.isActive}
+                  className={cn(
+                    "transition-all duration-200",
+                    subItem.isActive 
+                      ? "text-primary bg-primary/10" 
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  <Link to={subItem.url}>
+                    <span>{subItem.title}</span>
+                  </Link>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  )
+}
+
+function NavItemLink({ item }: { item: NavItem }) {
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        asChild
+        isActive={item.isActive}
+        tooltip={item.title}
+        className={cn(
+          "transition-all duration-200 ease-in-out font-medium",
+          item.isActive 
+            ? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary" 
+            : "text-muted-foreground hover:text-foreground hover:bg-white/5"
+        )}
+      >
+        <Link to={item.url} className="flex items-center gap-3 py-4 min-h-10 group-data-[collapsible=icon]:justify-center">
+          <item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
+          <span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>{item.title}</span>
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  )
+}
+
+export function AppSidebar() {
+  const { navItems } = useNavigation()
+  const { stats } = useSocket()
+  
+  return (
+    <Sidebar collapsible="icon" className="border-r border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60">
+      <SidebarHeader className="pb-4 pt-4">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild className="hover:bg-primary/10 transition-colors">
+              <Link to="/">
+                {stats?.bot?.avatarUrl ? (
+                  <img 
+                    src={stats.bot.avatarUrl} 
+                    alt={stats.bot.name}
+                    className="size-10 rounded-full group-data-[collapsible=icon]:size-8 object-cover shadow-lg" 
+                  />
+                ) : (
+                  <div className="flex aspect-square size-10 items-center justify-center rounded-full bg-aurora sun-flare shadow-lg group-data-[collapsible=icon]:size-8">
+                    <span className="sr-only">Aurora</span>
+                  </div>
+                )}
+                <div className="grid flex-1 text-left text-sm leading-tight ml-2 group-data-[collapsible=icon]:hidden">
+                  <span className="truncate font-bold text-primary text-base">Aurora</span>
+                  <span className="truncate text-xs text-muted-foreground font-medium">
+                    {stats?.bot?.status || "Online"}
+                  </span>
+                </div>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent className="px-2 group-data-[collapsible=icon]:px-0">
+        <SidebarGroup>
+          <SidebarGroupLabel className="text-muted-foreground/70 uppercase tracking-wider text-xs font-bold mb-2 px-2 group-data-[collapsible=icon]:hidden">
+            Menu
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu className="gap-2 group-data-[collapsible=icon]:items-center">
+              {navItems.map((item) => (
+                item.subItems ? (
+                  <NavItemWithSubMenu key={item.title} item={item} />
+                ) : (
+                  <NavItemLink key={item.title} item={item} />
+                )
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+
+
+      <SidebarRail />
+    </Sidebar>
+  )
+}
+
diff --git a/web/src/components/layout/main-layout.tsx b/web/src/components/layout/main-layout.tsx
new file mode 100644
index 0000000..9383977
--- /dev/null
+++ b/web/src/components/layout/main-layout.tsx
@@ -0,0 +1,56 @@
+import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "./app-sidebar"
+import { MobileNav } from "@/components/navigation/mobile-nav"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Separator } from "@/components/ui/separator"
+import { useNavigation } from "@/contexts/navigation-context"
+
+interface MainLayoutProps {
+  children: React.ReactNode
+}
+
+export function MainLayout({ children }: MainLayoutProps) {
+  const isMobile = useIsMobile()
+  const { breadcrumbs, currentTitle } = useNavigation()
+
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        {/* Header with breadcrumbs */}
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 transition-all duration-300 ease-in-out">
+          <div className="flex items-center gap-2 px-4 w-full">
+            <SidebarTrigger className="-ml-1 text-muted-foreground hover:text-primary transition-colors" />
+            <Separator orientation="vertical" className="mr-2 h-4 bg-border/50" />
+            <nav aria-label="Breadcrumb" className="flex items-center gap-1 text-sm bg-muted/30 px-3 py-1.5 rounded-full border border-border/30">
+              {breadcrumbs.length === 0 ? (
+                <span className="text-sm font-medium text-primary px-1">{currentTitle}</span>
+              ) : (
+                breadcrumbs.map((crumb, index) => (
+                  <span key={crumb.url} className="flex items-center gap-1">
+                    {index > 0 && (
+                      <span className="text-muted-foreground/50">/</span>
+                    )}
+                    {index === breadcrumbs.length - 1 ? (
+                      <span className="text-sm font-medium text-primary px-1">{crumb.title}</span>
+                    ) : (
+                      <span className="text-sm text-muted-foreground hover:text-foreground transition-colors px-1">{crumb.title}</span>
+                    )}
+                  </span>
+                ))
+              )}
+            </nav>
+          </div>
+        </header>
+
+        {/* Main content */}
+        <div className="flex-1 overflow-auto">
+          {children}
+        </div>
+
+        {/* Mobile bottom navigation */}
+        {isMobile && <MobileNav />}
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
diff --git a/web/src/components/navigation/mobile-nav.tsx b/web/src/components/navigation/mobile-nav.tsx
new file mode 100644
index 0000000..c9f8d47
--- /dev/null
+++ b/web/src/components/navigation/mobile-nav.tsx
@@ -0,0 +1,41 @@
+import { Link } from "react-router-dom"
+import { useNavigation } from "@/contexts/navigation-context"
+import { cn } from "@/lib/utils"
+
+export function MobileNav() {
+  const { navItems } = useNavigation()
+
+  return (
+    <nav className="fixed bottom-4 left-4 right-4 z-50 rounded-2xl border border-border/40 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 md:hidden shadow-lg shadow-black/5">
+      <div className="flex h-16 items-center justify-around px-2">
+        {navItems.map((item) => (
+          <Link
+            key={item.title}
+            to={item.url}
+            className={cn(
+              "flex flex-col items-center justify-center gap-1 rounded-xl px-4 py-2 text-xs font-medium transition-all duration-200",
+              "min-w-[48px] min-h-[48px]",
+              item.isActive
+                ? "text-primary bg-primary/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]"
+                : "text-muted-foreground/80 hover:text-foreground hover:bg-white/5"
+            )}
+          >
+            <item.icon className={cn(
+              "size-5 transition-transform duration-200",
+              item.isActive && "scale-110 fill-primary/20"
+            )} />
+            <span className={cn(
+              "truncate max-w-[60px] text-[10px]",
+              item.isActive && "font-bold"
+            )}>
+              {item.title}
+            </span>
+            {item.isActive && (
+              <span className="absolute bottom-1 h-0.5 w-4 rounded-full bg-primary/50 blur-[1px]" />
+            )}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  )
+}
diff --git a/web/src/components/settings-drawer.tsx b/web/src/components/settings-drawer.tsx
deleted file mode 100644
index 2ca0cbd..0000000
--- a/web/src/components/settings-drawer.tsx
+++ /dev/null
@@ -1,1122 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetDescription, SheetFooter } from "./ui/sheet";
-import { Button } from "./ui/button";
-import { Settings, Save, Loader2, CreditCard, Terminal, MessageSquare, Shield, Users, Palette, Sparkles, AlertTriangle, Backpack } from "lucide-react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
-import { ScrollArea } from "./ui/scroll-area";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel } from "./ui/form";
-import { Input } from "./ui/input";
-import { Switch } from "./ui/switch";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion";
-import { toast } from "sonner";
-import { Textarea } from "./ui/textarea";
-import { Badge } from "./ui/badge";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-
-// Sentinel value for "none" selection
-const NONE_VALUE = "__none__";
-
-// Schema definition matching backend config
-const bigIntStringSchema = z.coerce.string()
-    .refine((val) => /^\d+$/.test(val), { message: "Must be a valid integer" });
-
-const formSchema = z.object({
-    leveling: z.object({
-        base: z.number(),
-        exponent: z.number(),
-        chat: z.object({
-            cooldownMs: z.number(),
-            minXp: z.number(),
-            maxXp: z.number(),
-        })
-    }),
-    economy: z.object({
-        daily: z.object({
-            amount: bigIntStringSchema,
-            streakBonus: bigIntStringSchema,
-            weeklyBonus: bigIntStringSchema,
-            cooldownMs: z.number(),
-        }),
-        transfers: z.object({
-            allowSelfTransfer: z.boolean(),
-            minAmount: bigIntStringSchema,
-        }),
-        exam: z.object({
-            multMin: z.number(),
-            multMax: z.number(),
-        })
-    }),
-    inventory: z.object({
-        maxStackSize: bigIntStringSchema,
-        maxSlots: z.number(),
-    }),
-    commands: z.record(z.string(), z.boolean()).optional(),
-    lootdrop: z.object({
-        activityWindowMs: z.number(),
-        minMessages: z.number(),
-        spawnChance: z.number(),
-        cooldownMs: z.number(),
-        reward: z.object({
-            min: z.number(),
-            max: z.number(),
-            currency: z.string(),
-        })
-    }),
-    studentRole: z.string().optional(),
-    visitorRole: z.string().optional(),
-    colorRoles: z.array(z.string()).default([]),
-    welcomeChannelId: z.string().optional(),
-    welcomeMessage: z.string().optional(),
-    feedbackChannelId: z.string().optional(),
-    terminal: z.object({
-        channelId: z.string(),
-        messageId: z.string()
-    }).optional(),
-    moderation: z.object({
-        prune: z.object({
-            maxAmount: z.number(),
-            confirmThreshold: z.number(),
-            batchSize: z.number(),
-            batchDelayMs: z.number(),
-        }),
-        cases: z.object({
-            dmOnWarn: z.boolean(),
-            logChannelId: z.string().optional(),
-            autoTimeoutThreshold: z.number().optional()
-        })
-    }),
-    trivia: z.object({
-        entryFee: bigIntStringSchema,
-        rewardMultiplier: z.number(),
-        timeoutSeconds: z.number(),
-        cooldownMs: z.number(),
-        categories: z.array(z.number()).default([]),
-        difficulty: z.enum(['easy', 'medium', 'hard', 'random']),
-    }).optional(),
-    system: z.record(z.string(), z.any()).optional(),
-});
-
-type FormValues = z.infer<typeof formSchema>;
-
-interface ConfigMeta {
-    roles: { id: string, name: string, color: string }[];
-    channels: { id: string, name: string, type: number }[];
-    commands: { name: string, category: string }[];
-}
-
-const toSelectValue = (v: string | undefined | null) => v || NONE_VALUE;
-const fromSelectValue = (v: string) => v === NONE_VALUE ? "" : v;
-
-export function SettingsDrawer() {
-    const [open, setOpen] = useState(false);
-    const [meta, setMeta] = useState<ConfigMeta | null>(null);
-    const [loading, setLoading] = useState(false);
-
-    const form = useForm<FormValues>({
-        resolver: zodResolver(formSchema) as any,
-        defaultValues: {
-            economy: {
-                daily: { amount: "0", streakBonus: "0", weeklyBonus: "0", cooldownMs: 0 },
-                transfers: { minAmount: "0", allowSelfTransfer: false },
-                exam: { multMin: 1, multMax: 1 }
-            },
-            leveling: { base: 100, exponent: 1.5, chat: { minXp: 10, maxXp: 20, cooldownMs: 60000 } },
-            inventory: { maxStackSize: "1", maxSlots: 10 },
-            moderation: {
-                prune: { maxAmount: 100, confirmThreshold: 50, batchSize: 100, batchDelayMs: 1000 },
-                cases: { dmOnWarn: true }
-            },
-            lootdrop: {
-                spawnChance: 0.05,
-                minMessages: 10,
-                cooldownMs: 300000,
-                activityWindowMs: 600000,
-                reward: { min: 100, max: 500, currency: "AU" }
-            }
-        }
-    });
-
-    useEffect(() => {
-        if (open) {
-            setLoading(true);
-            Promise.all([
-                fetch("/api/settings").then(res => res.json()),
-                fetch("/api/settings/meta").then(res => res.json())
-            ]).then(([config, metaData]) => {
-                form.reset(config as any);
-                setMeta(metaData);
-            }).catch(err => {
-                toast.error("Failed to load settings");
-                console.error(err);
-            }).finally(() => {
-                setLoading(false);
-            });
-        }
-    }, [open, form]);
-
-    const onSubmit = async (data: FormValues) => {
-        try {
-            const response = await fetch("/api/settings", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(data)
-            });
-
-            if (!response.ok) throw new Error("Failed to save");
-
-            toast.success("Settings saved successfully", {
-                description: "Bot configuration has been updated and reloaded."
-            });
-            setOpen(false);
-        } catch (error) {
-            toast.error("Failed to save settings");
-            console.error(error);
-        }
-    };
-
-    return (
-        <Sheet open={open} onOpenChange={setOpen}>
-            <SheetTrigger asChild>
-                <Button variant="ghost" className="text-muted-foreground hover:text-primary gap-2 transition-colors">
-                    <Settings className="w-4 h-4" />
-                    Settings
-                </Button>
-            </SheetTrigger>
-            <SheetContent side="right" className="w-[800px] sm:max-w-[800px] p-0 flex flex-col gap-0 border-l border-primary/20 glass-card bg-background/95 text-foreground shadow-2xl">
-                <SheetHeader className="px-6 py-6 border-b border-border/50 bg-background/20 backdrop-blur-md">
-                    <SheetTitle className="flex items-center gap-3 text-step-2 font-bold text-primary">
-                        <div className="p-2 rounded-full bg-primary/10 border border-primary/20">
-                            <Settings className="w-5 h-5" />
-                        </div>
-                        System Configuration
-                    </SheetTitle>
-                    <SheetDescription className="text-step--1 text-muted-foreground ml-1">
-                        Manage bot behavior, economy, and game systems. Changes apply immediately.
-                    </SheetDescription>
-                </SheetHeader>
-
-                {loading ? (
-                    <div className="flex-1 flex items-center justify-center flex-col gap-4">
-                        <Loader2 className="w-10 h-10 animate-spin text-primary" />
-                        <p className="text-muted-foreground animate-pulse">Loading configuration...</p>
-                    </div>
-                ) : (
-                    <Form {...form}>
-                        <form onSubmit={form.handleSubmit(onSubmit)} className="flex-1 flex flex-col overflow-hidden">
-                            <Tabs defaultValue="general" className="flex-1 flex flex-col">
-                                <div className="px-6 py-4 border-b border-border/50 bg-muted/20">
-                                    <TabsList className="bg-background/50 border border-border/50 w-full justify-start h-auto p-1 grid grid-cols-4 gap-1">
-                                        <TabsTrigger value="general" className="data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all">
-                                            <Terminal className="w-4 h-4 mr-2" />
-                                            General
-                                        </TabsTrigger>
-                                        <TabsTrigger value="economy" className="data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all">
-                                            <CreditCard className="w-4 h-4 mr-2" />
-                                            Economy
-                                        </TabsTrigger>
-                                        <TabsTrigger value="systems" className="data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all">
-                                            <Sparkles className="w-4 h-4 mr-2" />
-                                            Systems
-                                        </TabsTrigger>
-                                        <TabsTrigger value="roles" className="data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all">
-                                            <Users className="w-4 h-4 mr-2" />
-                                            Roles
-                                        </TabsTrigger>
-                                    </TabsList>
-                                </div>
-
-                                <ScrollArea className="flex-1 p-6 relative">
-                                    <div className="space-y-8 pb-20">
-
-                                        {/* GENERAL TAB */}
-                                        <TabsContent value="general" className="mt-0 space-y-6 focus-visible:outline-none">
-                                            <div className="space-y-4">
-                                                <div className="flex items-center gap-2 mb-4">
-                                                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
-                                                        <MessageSquare className="w-3 h-3 mr-1" /> Onboarding
-                                                    </Badge>
-                                                </div>
-
-                                                <div className="glass-card p-5 rounded-xl border border-border/50 space-y-4 hover:border-primary/20 transition-colors">
-                                                    <FormField
-                                                        control={form.control}
-                                                        name="welcomeChannelId"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormLabel className="text-foreground/80">Welcome Channel</FormLabel>
-                                                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
-                                                                    <FormControl>
-                                                                        <SelectTrigger className="bg-background/50 border-border/50 focus:ring-primary/20 focus:border-primary/50 transition-all">
-                                                                            <SelectValue placeholder="Select a channel" />
-                                                                        </SelectTrigger>
-                                                                    </FormControl>
-                                                                    <SelectContent>
-                                                                        <SelectItem value={NONE_VALUE}>None</SelectItem>
-                                                                        {meta?.channels
-                                                                            .filter(c => c.type === 0)
-                                                                            .map(c => (
-                                                                                <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
-                                                                            ))}
-                                                                    </SelectContent>
-                                                                </Select>
-                                                                <FormDescription>Where to send welcome messages.</FormDescription>
-                                                            </FormItem>
-                                                        )}
-                                                    />
-
-                                                    <FormField
-                                                        control={form.control}
-                                                        name="welcomeMessage"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormLabel className="text-foreground/80">Welcome Message Template</FormLabel>
-                                                                <FormControl>
-                                                                    <Textarea
-                                                                        {...field}
-                                                                        value={field.value || ""}
-                                                                        placeholder="Welcome {user}!"
-                                                                        className="min-h-[100px] font-mono text-xs bg-background/50 border-border/50 focus:border-primary/50 focus:ring-primary/20 resize-none"
-                                                                    />
-                                                                </FormControl>
-                                                                <FormDescription>Available variables: {"{user}"}, {"{count}"}.</FormDescription>
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                </div>
-                                            </div>
-
-                                            <div className="space-y-4">
-                                                <div className="flex items-center gap-2 mb-4">
-                                                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
-                                                        Channels & Features
-                                                    </Badge>
-                                                </div>
-
-                                                <div className="glass-card p-5 rounded-xl border border-border/50 space-y-4 hover:border-primary/20 transition-colors">
-                                                    <FormField
-                                                        control={form.control}
-                                                        name="feedbackChannelId"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormLabel className="text-foreground/80">Feedback Channel</FormLabel>
-                                                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
-                                                                    <FormControl>
-                                                                        <SelectTrigger className="bg-background/50 border-border/50 focus:ring-primary/20 focus:border-primary/50 transition-all">
-                                                                            <SelectValue placeholder="Select a channel" />
-                                                                        </SelectTrigger>
-                                                                    </FormControl>
-                                                                    <SelectContent>
-                                                                        <SelectItem value={NONE_VALUE}>None</SelectItem>
-                                                                        {meta?.channels.filter(c => c.type === 0).map(c => (
-                                                                            <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
-                                                                        ))}
-                                                                    </SelectContent>
-                                                                </Select>
-                                                                <FormDescription>Where user feedback is sent.</FormDescription>
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                </div>
-
-                                                <div className="glass-card p-5 rounded-xl border border-border/50 space-y-4 hover:border-primary/20 transition-colors">
-                                                    <div className="flex items-center gap-2 mb-2">
-                                                        <Terminal className="w-4 h-4 text-muted-foreground" />
-                                                        <h4 className="font-medium text-sm">Terminal Embed</h4>
-                                                    </div>
-                                                    <div className="grid grid-cols-2 gap-4">
-                                                        <FormField
-                                                            control={form.control}
-                                                            name="terminal.channelId"
-                                                            render={({ field }) => (
-                                                                <FormItem>
-                                                                    <FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Channel</FormLabel>
-                                                                    <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
-                                                                        <FormControl>
-                                                                            <SelectTrigger className="bg-background/50 border-border/50 h-9 text-xs">
-                                                                                <SelectValue placeholder="Select channel" />
-                                                                            </SelectTrigger>
-                                                                        </FormControl>
-                                                                        <SelectContent>
-                                                                            <SelectItem value={NONE_VALUE}>None</SelectItem>
-                                                                            {meta?.channels.filter(c => c.type === 0).map(c => (
-                                                                                <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
-                                                                            ))}
-                                                                        </SelectContent>
-                                                                    </Select>
-                                                                </FormItem>
-                                                            )}
-                                                        />
-                                                        <FormField
-                                                            control={form.control}
-                                                            name="terminal.messageId"
-                                                            render={({ field }) => (
-                                                                <FormItem>
-                                                                    <FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Message ID</FormLabel>
-                                                                    <FormControl>
-                                                                        <Input {...field} value={field.value || ""} placeholder="Message ID" className="font-mono text-xs bg-background/50 border-border/50 h-9" />
-                                                                    </FormControl>
-                                                                </FormItem>
-                                                            )}
-                                                        />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </TabsContent>
-
-                                        {/* ECONOMY TAB */}
-                                        <TabsContent value="economy" className="mt-0 space-y-6 focus-visible:outline-none">
-                                            <Accordion type="multiple" className="w-full space-y-4" defaultValue={["daily", "inventory"]}>
-                                                <AccordionItem value="daily" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
-                                                    <AccordionTrigger className="hover:no-underline py-4">
-                                                        <div className="flex items-center gap-2">
-                                                            <div className="w-8 h-8 rounded-full bg-yellow-500/10 flex items-center justify-center text-yellow-500">
-                                                                <Users className="w-4 h-4" />
-                                                            </div>
-                                                            <span className="font-medium">Daily Rewards</span>
-                                                        </div>
-                                                    </AccordionTrigger>
-                                                    <AccordionContent className="space-y-4 pb-4">
-                                                        <div className="grid grid-cols-2 gap-4">
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="economy.daily.amount"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Base Amount</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="text" className="bg-background/50" placeholder="100" />
-                                                                        </FormControl>
-                                                                        <FormDescription className="text-xs">Reward (AU)</FormDescription>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="economy.daily.streakBonus"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Streak Bonus</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="text" className="bg-background/50" placeholder="10" />
-                                                                        </FormControl>
-                                                                        <FormDescription className="text-xs">Bonus/day</FormDescription>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                        </div>
-                                                        <div className="grid grid-cols-2 gap-4">
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="economy.daily.weeklyBonus"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Weekly Bonus</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="text" className="bg-background/50" placeholder="50" />
-                                                                        </FormControl>
-                                                                        <FormDescription className="text-xs">7-day bonus</FormDescription>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="economy.daily.cooldownMs"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Cooldown (ms)</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                        </div>
-                                                    </AccordionContent>
-                                                </AccordionItem>
-
-                                                <AccordionItem value="inventory" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
-                                                    <AccordionTrigger className="hover:no-underline py-4">
-                                                        <div className="flex items-center gap-2">
-                                                            <div className="w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center text-orange-500">
-                                                                <Backpack className="w-4 h-4" />
-                                                            </div>
-                                                            <span className="font-medium">Inventory</span>
-                                                        </div>
-                                                    </AccordionTrigger>
-                                                    <AccordionContent className="space-y-4 pb-4">
-                                                        <div className="grid grid-cols-2 gap-4">
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="inventory.maxStackSize"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Max Stack Size</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="text" className="bg-background/50" />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="inventory.maxSlots"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Max Slots</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                        </div>
-                                                    </AccordionContent>
-                                                </AccordionItem>
-
-                                                <AccordionItem value="leveling" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
-                                                    <AccordionTrigger className="hover:no-underline py-4">
-                                                        <div className="flex items-center gap-2">
-                                                            <div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
-                                                                <Sparkles className="w-4 h-4" />
-                                                            </div>
-                                                            <span className="font-medium">Leveling & XP</span>
-                                                        </div>
-                                                    </AccordionTrigger>
-                                                    <AccordionContent className="space-y-4 pb-4">
-                                                        <div className="grid grid-cols-2 gap-4">
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="leveling.base"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Base XP</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="leveling.exponent"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Exponent</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                        </div>
-                                                        <div className="bg-muted/30 p-3 rounded-lg space-y-3">
-                                                            <h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
-                                                                <MessageSquare className="w-3 h-3" /> Chat XP
-                                                            </h4>
-                                                            <div className="grid grid-cols-3 gap-3">
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="leveling.chat.minXp"
-                                                                    render={({ field }) => (
-                                                                        <FormItem className="space-y-1">
-                                                                            <FormLabel className="text-xs">Min</FormLabel>
-                                                                            <FormControl>
-                                                                                <Input {...field} type="number" className="h-8 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                            </FormControl>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="leveling.chat.maxXp"
-                                                                    render={({ field }) => (
-                                                                        <FormItem className="space-y-1">
-                                                                            <FormLabel className="text-xs">Max</FormLabel>
-                                                                            <FormControl>
-                                                                                <Input {...field} type="number" className="h-8 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                            </FormControl>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="leveling.chat.cooldownMs"
-                                                                    render={({ field }) => (
-                                                                        <FormItem className="space-y-1">
-                                                                            <FormLabel className="text-xs">Cooldown</FormLabel>
-                                                                            <FormControl>
-                                                                                <Input {...field} type="number" className="h-8 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                            </FormControl>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                            </div>
-                                                        </div>
-                                                    </AccordionContent>
-                                                </AccordionItem>
-
-                                                <AccordionItem value="transfers" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
-                                                    <AccordionTrigger className="hover:no-underline py-4">
-                                                        <div className="flex items-center gap-2">
-                                                            <div className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center text-green-500">
-                                                                <CreditCard className="w-4 h-4" />
-                                                            </div>
-                                                            <span className="font-medium">Transfers</span>
-                                                        </div>
-                                                    </AccordionTrigger>
-                                                    <AccordionContent className="space-y-4 pb-4">
-                                                        <FormField
-                                                            control={form.control}
-                                                            name="economy.transfers.allowSelfTransfer"
-                                                            render={({ field }) => (
-                                                                <FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-3">
-                                                                    <div className="space-y-0.5">
-                                                                        <FormLabel className="text-sm">Allow Self-Transfer</FormLabel>
-                                                                        <FormDescription className="text-xs">
-                                                                            Transfer to self.
-                                                                        </FormDescription>
-                                                                    </div>
-                                                                    <FormControl>
-                                                                        <Switch
-                                                                            checked={field.value}
-                                                                            onCheckedChange={field.onChange}
-                                                                        />
-                                                                    </FormControl>
-                                                                </FormItem>
-                                                            )}
-                                                        />
-                                                        <FormField
-                                                            control={form.control}
-                                                            name="economy.transfers.minAmount"
-                                                            render={({ field }) => (
-                                                                <FormItem>
-                                                                    <FormLabel>Minimum Transfer</FormLabel>
-                                                                    <FormControl>
-                                                                        <Input {...field} type="text" placeholder="1" className="bg-background/50" />
-                                                                    </FormControl>
-                                                                </FormItem>
-                                                            )}
-                                                        />
-                                                    </AccordionContent>
-                                                </AccordionItem>
-
-                                                <AccordionItem value="exam" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
-                                                    <AccordionTrigger className="hover:no-underline py-4">
-                                                        <div className="flex items-center gap-2">
-                                                            <div className="w-8 h-8 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-500">
-                                                                <Sparkles className="w-4 h-4" />
-                                                            </div>
-                                                            <span className="font-medium">Exams</span>
-                                                        </div>
-                                                    </AccordionTrigger>
-                                                    <AccordionContent className="space-y-4 pb-4">
-                                                        <div className="grid grid-cols-2 gap-4">
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="economy.exam.multMin"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Min Multiplier</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="economy.exam.multMax"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Max Multiplier</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                        </div>
-                                                    </AccordionContent>
-                                                </AccordionItem>
-                                            </Accordion>
-                                        </TabsContent>
-
-                                        {/* SYSTEMS TAB */}
-                                        <TabsContent value="systems" className="mt-0 space-y-6 focus-visible:outline-none">
-                                            <Accordion type="single" collapsible className="w-full space-y-4" defaultValue="lootdrop">
-                                                <AccordionItem value="lootdrop" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
-                                                    <AccordionTrigger className="hover:no-underline py-4">
-                                                        <div className="flex items-center gap-2">
-                                                            <div className="w-8 h-8 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-500">
-                                                                <CreditCard className="w-4 h-4" />
-                                                            </div>
-                                                            <span className="font-medium">Loot Drops</span>
-                                                        </div>
-                                                    </AccordionTrigger>
-                                                    <AccordionContent className="space-y-4 pb-4">
-                                                        <div className="grid grid-cols-2 gap-4">
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="lootdrop.spawnChance"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Spawn Chance (0-1)</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" step="0.01" min="0" max="1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="lootdrop.minMessages"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Min Messages</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                        </div>
-
-                                                        <div className="bg-muted/30 p-3 rounded-lg space-y-3">
-                                                            <h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Rewards</h4>
-                                                            <div className="grid grid-cols-3 gap-3">
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="lootdrop.reward.min"
-                                                                    render={({ field }) => (
-                                                                        <FormItem className="space-y-1">
-                                                                            <FormLabel className="text-xs">Min</FormLabel>
-                                                                            <FormControl>
-                                                                                <Input {...field} type="number" className="h-8 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                            </FormControl>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="lootdrop.reward.max"
-                                                                    render={({ field }) => (
-                                                                        <FormItem className="space-y-1">
-                                                                            <FormLabel className="text-xs">Max</FormLabel>
-                                                                            <FormControl>
-                                                                                <Input {...field} type="number" className="h-8 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                            </FormControl>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="lootdrop.reward.currency"
-                                                                    render={({ field }) => (
-                                                                        <FormItem className="space-y-1">
-                                                                            <FormLabel className="text-xs">Currency</FormLabel>
-                                                                            <FormControl>
-                                                                                <Input {...field} placeholder="AU" className="h-8 text-sm" />
-                                                                            </FormControl>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                            </div>
-                                                        </div>
-
-                                                        <div className="grid grid-cols-2 gap-4">
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="lootdrop.cooldownMs"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Cooldown (ms)</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="lootdrop.activityWindowMs"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Window (ms)</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                        </div>
-                                                    </AccordionContent>
-                                                </AccordionItem>
-
-                                                <AccordionItem value="trivia" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
-                                                    <AccordionTrigger className="hover:no-underline py-4">
-                                                        <div className="flex items-center gap-2">
-                                                            <div className="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500">
-                                                                🎯
-                                                            </div>
-                                                            <span className="font-medium">Trivia</span>
-                                                        </div>
-                                                    </AccordionTrigger>
-                                                    <AccordionContent className="space-y-4 pb-4">
-                                                        <div className="grid grid-cols-2 gap-4">
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="trivia.entryFee"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Entry Fee (AU)</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="text" className="bg-background/50" placeholder="50" />
-                                                                        </FormControl>
-                                                                        <FormDescription className="text-xs">Cost to play (currency sink)</FormDescription>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="trivia.rewardMultiplier"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Reward Multiplier</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                        <FormDescription className="text-xs">Prize = Entry × Multiplier</FormDescription>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                        </div>
-
-                                                        <div className="grid grid-cols-2 gap-4">
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="trivia.timeoutSeconds"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Answer Time Limit (seconds)</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="trivia.cooldownMs"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Cooldown (ms)</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                        </FormControl>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                        </div>
-
-                                                        <FormField
-                                                            control={form.control}
-                                                            name="trivia.difficulty"
-                                                            render={({ field }) => (
-                                                                <FormItem>
-                                                                    <FormLabel>Difficulty</FormLabel>
-                                                                    <Select onValueChange={field.onChange} value={field.value}>
-                                                                        <FormControl>
-                                                                            <SelectTrigger className="bg-background/50">
-                                                                                <SelectValue placeholder="Select difficulty" />
-                                                                            </SelectTrigger>
-                                                                        </FormControl>
-                                                                        <SelectContent>
-                                                                            <SelectItem value="easy">Easy</SelectItem>
-                                                                            <SelectItem value="medium">Medium</SelectItem>
-                                                                            <SelectItem value="hard">Hard</SelectItem>
-                                                                            <SelectItem value="random">Random</SelectItem>
-                                                                        </SelectContent>
-                                                                    </Select>
-                                                                    <FormDescription className="text-xs">Question difficulty level</FormDescription>
-                                                                </FormItem>
-                                                            )}
-                                                        />
-                                                    </AccordionContent>
-                                                </AccordionItem>
-
-                                                <AccordionItem value="moderation" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
-                                                    <AccordionTrigger className="hover:no-underline py-4">
-                                                        <div className="flex items-center gap-2">
-                                                            <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center text-red-500">
-                                                                <Shield className="w-4 h-4" />
-                                                            </div>
-                                                            <span className="font-medium">Moderation</span>
-                                                        </div>
-                                                    </AccordionTrigger>
-                                                    <AccordionContent className="space-y-4 pb-4">
-                                                        <div className="space-y-4 border-b border-border/30 pb-4 mb-4">
-                                                            <div className="flex items-center gap-2 mb-2">
-                                                                <h4 className="font-medium text-sm text-foreground/80">Case Management</h4>
-                                                            </div>
-                                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="moderation.cases.dmOnWarn"
-                                                                    render={({ field }) => (
-                                                                        <FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-3">
-                                                                            <div className="space-y-0.5">
-                                                                                <FormLabel className="text-sm">DM on Warn</FormLabel>
-                                                                                <FormDescription className="text-xs">
-                                                                                    Notify users via DM.
-                                                                                </FormDescription>
-                                                                            </div>
-                                                                            <FormControl>
-                                                                                <Switch
-                                                                                    checked={field.value}
-                                                                                    onCheckedChange={field.onChange}
-                                                                                />
-                                                                            </FormControl>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="moderation.cases.logChannelId"
-                                                                    render={({ field }) => (
-                                                                        <FormItem>
-                                                                            <FormLabel>Log Channel</FormLabel>
-                                                                            <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
-                                                                                <FormControl>
-                                                                                    <SelectTrigger className="bg-background/50">
-                                                                                        <SelectValue placeholder="Select a channel" />
-                                                                                    </SelectTrigger>
-                                                                                </FormControl>
-                                                                                <SelectContent>
-                                                                                    <SelectItem value={NONE_VALUE}>None</SelectItem>
-                                                                                    {meta?.channels.filter(c => c.type === 0).map(c => (
-                                                                                        <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
-                                                                                    ))}
-                                                                                </SelectContent>
-                                                                            </Select>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                            </div>
-                                                            <FormField
-                                                                control={form.control}
-                                                                name="moderation.cases.autoTimeoutThreshold"
-                                                                render={({ field }) => (
-                                                                    <FormItem>
-                                                                        <FormLabel>Auto Timeout Threshold</FormLabel>
-                                                                        <FormControl>
-                                                                            <Input {...field} type="number" min="0" className="bg-background/50" onChange={e => field.onChange(e.target.value ? Number(e.target.value) : undefined)} />
-                                                                        </FormControl>
-                                                                        <FormDescription>Warnings before auto-timeout.</FormDescription>
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                        </div>
-
-                                                        <div className="space-y-4">
-                                                            <div className="flex items-center gap-2 mb-2">
-                                                                <h4 className="font-medium text-sm text-foreground/80">Message Pruning</h4>
-                                                            </div>
-                                                            <div className="grid grid-cols-2 gap-4">
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="moderation.prune.maxAmount"
-                                                                    render={({ field }) => (
-                                                                        <FormItem>
-                                                                            <FormLabel>Max Amount</FormLabel>
-                                                                            <FormControl>
-                                                                                <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                            </FormControl>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="moderation.prune.confirmThreshold"
-                                                                    render={({ field }) => (
-                                                                        <FormItem>
-                                                                            <FormLabel>Confirm Threshold</FormLabel>
-                                                                            <FormControl>
-                                                                                <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                            </FormControl>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="moderation.prune.batchSize"
-                                                                    render={({ field }) => (
-                                                                        <FormItem>
-                                                                            <FormLabel>Batch Size</FormLabel>
-                                                                            <FormControl>
-                                                                                <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                            </FormControl>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                                <FormField
-                                                                    control={form.control}
-                                                                    name="moderation.prune.batchDelayMs"
-                                                                    render={({ field }) => (
-                                                                        <FormItem>
-                                                                            <FormLabel>Batch Delay (ms)</FormLabel>
-                                                                            <FormControl>
-                                                                                <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
-                                                                            </FormControl>
-                                                                        </FormItem>
-                                                                    )}
-                                                                />
-                                                            </div>
-                                                        </div>
-                                                    </AccordionContent>
-                                                </AccordionItem>
-                                            </Accordion>
-                                        </TabsContent>
-
-                                        {/* ROLES TAB */}
-                                        <TabsContent value="roles" className="mt-0 space-y-6 focus-visible:outline-none">
-                                            <div className="space-y-4">
-                                                <div className="flex items-center gap-2 mb-4">
-                                                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
-                                                        System Roles
-                                                    </Badge>
-                                                </div>
-
-                                                <div className="glass-card p-5 rounded-xl border border-border/50 space-y-4">
-                                                    <FormField
-                                                        control={form.control}
-                                                        name="studentRole"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormLabel>Student Role</FormLabel>
-                                                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
-                                                                    <FormControl>
-                                                                        <SelectTrigger className="bg-background/50">
-                                                                            <SelectValue placeholder="Select role" />
-                                                                        </SelectTrigger>
-                                                                    </FormControl>
-                                                                    <SelectContent>
-                                                                        {meta?.roles.map(r => (
-                                                                            <SelectItem key={r.id} value={r.id}>
-                                                                                <span className="flex items-center gap-2">
-                                                                                    <span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
-                                                                                    {r.name}
-                                                                                </span>
-                                                                            </SelectItem>
-                                                                        ))}
-                                                                    </SelectContent>
-                                                                </Select>
-                                                                <FormDescription>Default role for new members/students.</FormDescription>
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                    <FormField
-                                                        control={form.control}
-                                                        name="visitorRole"
-                                                        render={({ field }) => (
-                                                            <FormItem>
-                                                                <FormLabel>Visitor Role</FormLabel>
-                                                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
-                                                                    <FormControl>
-                                                                        <SelectTrigger className="bg-background/50">
-                                                                            <SelectValue placeholder="Select role" />
-                                                                        </SelectTrigger>
-                                                                    </FormControl>
-                                                                    <SelectContent>
-                                                                        {meta?.roles.map(r => (
-                                                                            <SelectItem key={r.id} value={r.id}>
-                                                                                <span className="flex items-center gap-2">
-                                                                                    <span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
-                                                                                    {r.name}
-                                                                                </span>
-                                                                            </SelectItem>
-                                                                        ))}
-                                                                    </SelectContent>
-                                                                </Select>
-                                                                <FormDescription>Role for visitors/guests.</FormDescription>
-                                                            </FormItem>
-                                                        )}
-                                                    />
-                                                </div>
-                                            </div>
-
-                                            <div className="space-y-4">
-                                                <div className="flex items-center gap-2 mb-4">
-                                                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
-                                                        <Palette className="w-3 h-3 mr-1" /> Color Roles
-                                                    </Badge>
-                                                </div>
-
-                                                <div className="glass-card p-5 rounded-xl border border-border/50">
-                                                    <div className="mb-4">
-                                                        <FormDescription>
-                                                            Select roles that users can choose from to set their name color.
-                                                        </FormDescription>
-                                                    </div>
-                                                    <ScrollArea className="h-[250px] pr-4">
-                                                        <div className="space-y-2">
-                                                            {meta?.roles.map((role) => (
-                                                                <FormField
-                                                                    key={role.id}
-                                                                    control={form.control}
-                                                                    name="colorRoles"
-                                                                    render={({ field }) => {
-                                                                        return (
-                                                                            <FormItem
-                                                                                key={role.id}
-                                                                                className="flex flex-row items-center space-x-3 space-y-0 p-2 rounded-lg hover:bg-muted/50 transition-colors"
-                                                                            >
-                                                                                <FormControl>
-                                                                                    <Switch
-                                                                                        checked={field.value?.includes(role.id)}
-                                                                                        onCheckedChange={(checked) => {
-                                                                                            return checked
-                                                                                                ? field.onChange([...(field.value || []), role.id])
-                                                                                                : field.onChange(
-                                                                                                    field.value?.filter(
-                                                                                                        (value: string) => value !== role.id
-                                                                                                    )
-                                                                                                )
-                                                                                        }}
-                                                                                    />
-                                                                                </FormControl>
-                                                                                <FormLabel className="font-normal flex items-center gap-2 cursor-pointer w-full text-foreground">
-                                                                                    <span className="w-3 h-3 rounded-full ring-1 ring-border" style={{ background: role.color }} />
-                                                                                    {role.name}
-                                                                                </FormLabel>
-                                                                            </FormItem>
-                                                                        )
-                                                                    }}
-                                                                />
-                                                            ))}
-                                                        </div>
-                                                    </ScrollArea>
-                                                </div>
-                                            </div>
-                                        </TabsContent>
-
-                                    </div>
-                                </ScrollArea>
-
-                                <SheetFooter className="p-6 border-t border-border/50 bg-background/50 backdrop-blur-sm z-10 sm:justify-between">
-                                    <Button variant="ghost" onClick={() => setOpen(false)} type="button">Cancel</Button>
-                                    <Button type="submit" disabled={!form.formState.isValid || loading} className="min-w-[120px] shadow-lg hover:shadow-primary/20 transition-all font-bold">
-                                        {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
-                                        Save Changes
-                                    </Button>
-                                </SheetFooter>
-                            </Tabs>
-                        </form>
-                    </Form>
-                )}
-            </SheetContent>
-        </Sheet>
-    );
-}
diff --git a/web/src/components/stat-card.tsx b/web/src/components/stat-card.tsx
index d7d4c57..a2242d1 100644
--- a/web/src/components/stat-card.tsx
+++ b/web/src/components/stat-card.tsx
@@ -46,11 +46,13 @@ export function StatCard({
                             Manage <ChevronRight className="w-3 h-3" />
                         </span>
                     )}
-                    <Icon className={cn(
-                        "h-4 w-4 transition-all duration-300",
-                        onClick && "group-hover:text-primary group-hover:scale-110",
-                        iconClassName || "text-muted-foreground"
-                    )} />
+                    <div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center ring-1 ring-primary/20">
+                        <Icon className={cn(
+                            "h-4 w-4 transition-all duration-300 text-primary",
+                            onClick && "group-hover:scale-110",
+                            iconClassName
+                        )} />
+                    </div>
                 </div>
             </CardHeader>
             <CardContent>
diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
index 6db0169..acefe1b 100644
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@@ -8,14 +8,14 @@ const badgeVariants = cva(
         variants: {
             variant: {
                 default:
-                    "border-transparent bg-primary text-primary-foreground hover:opacity-90",
+                    "border-transparent bg-primary text-primary-foreground hover:opacity-90 hover-scale shadow-sm",
                 secondary:
-                    "border-transparent bg-secondary text-secondary-foreground hover:opacity-80",
+                    "border-transparent bg-secondary text-secondary-foreground hover:opacity-80 hover-scale",
                 destructive:
-                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-                outline: "text-foreground border-border hover:bg-accent hover:text-accent-foreground",
-                aurora: "border-transparent bg-aurora text-primary-foreground shadow-sm",
-                glass: "glass-card border-border/50 text-foreground",
+                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 hover-scale",
+                outline: "text-foreground border-border hover:bg-accent hover:text-accent-foreground transition-colors",
+                aurora: "border-transparent bg-aurora text-primary-foreground shadow-sm hover-scale",
+                glass: "glass-card border-border/50 text-foreground hover:bg-accent/50 backdrop-blur-md",
             },
         },
         defaultVariants: {
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index f6f2085..d5144a2 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -9,18 +9,18 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 hover-glow active-press shadow-md",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active-press shadow-sm",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active-press",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 active-press shadow-sm",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active-press",
         link: "text-primary underline-offset-4 hover:underline",
-        aurora: "bg-aurora text-primary-foreground shadow-sm hover:opacity-90",
-        glass: "glass-card border-border/50 text-foreground hover:bg-accent/50",
+        aurora: "bg-aurora text-primary-foreground shadow-sm hover:opacity-90 hover-glow active-press",
+        glass: "glass-card border-border/50 text-foreground hover:bg-accent/50 hover-lift active-press",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
index e322855..1c71b00 100644
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-lg border py-6 shadow-sm",
+        "glass-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-all",
         className
       )}
       {...props}
diff --git a/web/src/components/ui/collapsible.tsx b/web/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..69c4d25
--- /dev/null
+++ b/web/src/components/ui/collapsible.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/web/src/components/ui/dropdown-menu.tsx b/web/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..eaed9ba
--- /dev/null
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
index 13a133c..5d8586f 100644
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -8,8 +8,8 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/20 border-input/50 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base text-foreground shadow-xs transition-all outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm backdrop-blur-sm",
+        "focus-visible:border-primary/50 focus-visible:bg-input/40 focus-visible:ring-2 focus-visible:ring-primary/20",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx
index 30638ac..0ee3201 100644
--- a/web/src/components/ui/sidebar.tsx
+++ b/web/src/components/ui/sidebar.tsx
@@ -29,7 +29,7 @@ const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_WIDTH_ICON = "64px"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 type SidebarContextProps = {
@@ -309,7 +309,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
+        "bg-aurora-page text-foreground font-outfit overflow-x-hidden relative flex w-full flex-1 flex-col",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
@@ -387,7 +387,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      className={cn("relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center", className)}
       {...props}
     />
   )
@@ -467,14 +467,14 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
+      className={cn("group/menu-item relative flex group-data-[collapsible=icon]:justify-center", className)}
       {...props}
     />
   )
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/web/src/contexts/navigation-context.tsx b/web/src/contexts/navigation-context.tsx
new file mode 100644
index 0000000..757bd60
--- /dev/null
+++ b/web/src/contexts/navigation-context.tsx
@@ -0,0 +1,146 @@
+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"
+
+export interface NavSubItem {
+  title: string
+  url: string
+  isActive?: boolean
+}
+
+export interface NavItem {
+  title: string
+  url: string
+  icon: LucideIcon
+  isActive?: boolean
+  subItems?: NavSubItem[]
+}
+
+export interface Breadcrumb {
+  title: string
+  url: string
+}
+
+interface NavigationContextProps {
+  navItems: NavItem[]
+  breadcrumbs: Breadcrumb[]
+  currentPath: string
+  currentTitle: string
+}
+
+const NavigationContext = React.createContext<NavigationContextProps | null>(null)
+
+interface NavConfigItem extends Omit<NavItem, "isActive" | "subItems"> {
+  subItems?: Omit<NavSubItem, "isActive">[]
+}
+
+const NAV_CONFIG: NavConfigItem[] = [
+  { title: "Home", url: "/", icon: Home },
+
+  { title: "Design System", url: "/design-system", icon: Palette },
+  { 
+    title: "Admin", 
+    url: "/admin", 
+    icon: ShieldCheck,
+    subItems: [
+      { title: "Overview", url: "/admin/overview" },
+      { title: "Quests", url: "/admin/quests" },
+
+    ]
+  },
+  {
+    title: "Settings",
+    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" },
+    ]
+  },
+]
+
+function generateBreadcrumbs(location: Location): Breadcrumb[] {
+  const pathParts = location.pathname.split("/").filter(Boolean)
+  const breadcrumbs: Breadcrumb[] = []
+
+  let currentPath = ""
+  for (const part of pathParts) {
+    currentPath += `/${part}`
+    // Capitalize and clean up the part for display
+    const title = part
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ")
+    breadcrumbs.push({ title, url: currentPath })
+  }
+
+  return breadcrumbs
+}
+
+function getPageTitle(pathname: string): string {
+  // Check top-level items first
+  for (const item of NAV_CONFIG) {
+    if (item.url === pathname) return item.title
+    // Check sub-items
+    if (item.subItems) {
+      const subItem = item.subItems.find((sub) => sub.url === pathname)
+      if (subItem) return subItem.title
+    }
+  }
+
+  // Handle nested routes
+  const parts = pathname.split("/").filter(Boolean)
+  const lastPart = parts[parts.length - 1]
+  if (lastPart) {
+    return lastPart
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ")
+  }
+
+  return "Aurora"
+}
+
+export function NavigationProvider({ children }: { children: React.ReactNode }) {
+  const location = useLocation()
+
+  const value = React.useMemo<NavigationContextProps>(() => {
+    const navItems = NAV_CONFIG.map((item) => {
+      const isParentActive = item.subItems 
+        ? location.pathname.startsWith(item.url)
+        : location.pathname === item.url
+      
+      return {
+        ...item,
+        isActive: isParentActive,
+        subItems: item.subItems?.map((subItem) => ({
+          ...subItem,
+          isActive: location.pathname === subItem.url,
+        })),
+      }
+    })
+
+    return {
+      navItems,
+      breadcrumbs: generateBreadcrumbs(location),
+      currentPath: location.pathname,
+      currentTitle: getPageTitle(location.pathname),
+    }
+  }, [location.pathname])
+
+  return (
+    <NavigationContext.Provider value={value}>
+      {children}
+    </NavigationContext.Provider>
+  )
+}
+
+export function useNavigation() {
+  const context = React.useContext(NavigationContext)
+  if (!context) {
+    throw new Error("useNavigation must be used within a NavigationProvider")
+  }
+  return context
+}
diff --git a/web/src/hooks/use-mobile.ts b/web/src/hooks/use-mobile.ts
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/web/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/web/src/hooks/use-settings.ts b/web/src/hooks/use-settings.ts
new file mode 100644
index 0000000..48f19f3
--- /dev/null
+++ b/web/src/hooks/use-settings.ts
@@ -0,0 +1,183 @@
+import { useEffect, useState, useCallback } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { toast } from "sonner";
+
+// Sentinel value for "none" selection
+export const NONE_VALUE = "__none__";
+
+// Schema definition matching backend config
+const bigIntStringSchema = z.coerce.string()
+    .refine((val) => /^\d+$/.test(val), { message: "Must be a valid integer" });
+
+export const formSchema = z.object({
+    leveling: z.object({
+        base: z.number(),
+        exponent: z.number(),
+        chat: z.object({
+            cooldownMs: z.number(),
+            minXp: z.number(),
+            maxXp: z.number(),
+        })
+    }),
+    economy: z.object({
+        daily: z.object({
+            amount: bigIntStringSchema,
+            streakBonus: bigIntStringSchema,
+            weeklyBonus: bigIntStringSchema,
+            cooldownMs: z.number(),
+        }),
+        transfers: z.object({
+            allowSelfTransfer: z.boolean(),
+            minAmount: bigIntStringSchema,
+        }),
+        exam: z.object({
+            multMin: z.number(),
+            multMax: z.number(),
+        })
+    }),
+    inventory: z.object({
+        maxStackSize: bigIntStringSchema,
+        maxSlots: z.number(),
+    }),
+    commands: z.record(z.string(), z.boolean()).optional(),
+    lootdrop: z.object({
+        activityWindowMs: z.number(),
+        minMessages: z.number(),
+        spawnChance: z.number(),
+        cooldownMs: z.number(),
+        reward: z.object({
+            min: z.number(),
+            max: z.number(),
+            currency: z.string(),
+        })
+    }),
+    studentRole: z.string().optional(),
+    visitorRole: z.string().optional(),
+    colorRoles: z.array(z.string()).default([]),
+    welcomeChannelId: z.string().optional(),
+    welcomeMessage: z.string().optional(),
+    feedbackChannelId: z.string().optional(),
+    terminal: z.object({
+        channelId: z.string(),
+        messageId: z.string()
+    }).optional(),
+    moderation: z.object({
+        prune: z.object({
+            maxAmount: z.number(),
+            confirmThreshold: z.number(),
+            batchSize: z.number(),
+            batchDelayMs: z.number(),
+        }),
+        cases: z.object({
+            dmOnWarn: z.boolean(),
+            logChannelId: z.string().optional(),
+            autoTimeoutThreshold: z.number().optional()
+        })
+    }),
+    trivia: z.object({
+        entryFee: bigIntStringSchema,
+        rewardMultiplier: z.number(),
+        timeoutSeconds: z.number(),
+        cooldownMs: z.number(),
+        categories: z.array(z.number()).default([]),
+        difficulty: z.enum(['easy', 'medium', 'hard', 'random']),
+    }).optional(),
+    system: z.record(z.string(), z.any()).optional(),
+});
+
+export type FormValues = z.infer<typeof formSchema>;
+
+export interface ConfigMeta {
+    roles: { id: string, name: string, color: string }[];
+    channels: { id: string, name: string, type: number }[];
+    commands: { name: string, category: string }[];
+}
+
+export const toSelectValue = (v: string | undefined | null) => v || NONE_VALUE;
+export const fromSelectValue = (v: string) => v === NONE_VALUE ? "" : v;
+
+export function useSettings() {
+    const [meta, setMeta] = useState<ConfigMeta | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema) as any,
+        defaultValues: {
+            economy: {
+                daily: { amount: "0", streakBonus: "0", weeklyBonus: "0", cooldownMs: 0 },
+                transfers: { minAmount: "0", allowSelfTransfer: false },
+                exam: { multMin: 1, multMax: 1 }
+            },
+            leveling: { base: 100, exponent: 1.5, chat: { minXp: 10, maxXp: 20, cooldownMs: 60000 } },
+            inventory: { maxStackSize: "1", maxSlots: 10 },
+            moderation: {
+                prune: { maxAmount: 100, confirmThreshold: 50, batchSize: 100, batchDelayMs: 1000 },
+                cases: { dmOnWarn: true }
+            },
+            lootdrop: {
+                spawnChance: 0.05,
+                minMessages: 10,
+                cooldownMs: 300000,
+                activityWindowMs: 600000,
+                reward: { min: 100, max: 500, currency: "AU" }
+            }
+        }
+    });
+
+    const loadSettings = useCallback(async () => {
+        setLoading(true);
+        try {
+            const [config, metaData] = await Promise.all([
+                fetch("/api/settings").then(res => res.json()),
+                fetch("/api/settings/meta").then(res => res.json())
+            ]);
+            form.reset(config as any);
+            setMeta(metaData);
+        } catch (err) {
+            toast.error("Failed to load settings");
+            console.error(err);
+        } finally {
+            setLoading(false);
+        }
+    }, [form]);
+
+    useEffect(() => {
+        loadSettings();
+    }, [loadSettings]);
+
+    const saveSettings = async (data: FormValues) => {
+        setIsSaving(true);
+        try {
+            const response = await fetch("/api/settings", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(data)
+            });
+
+            if (!response.ok) throw new Error("Failed to save");
+
+            toast.success("Settings saved successfully", {
+                description: "Bot configuration has been updated and reloaded."
+            });
+            // Reload settings to ensure we have the latest state
+            await loadSettings();
+        } catch (error) {
+            toast.error("Failed to save settings");
+            console.error(error);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return {
+        form,
+        meta,
+        loading,
+        isSaving,
+        saveSettings,
+        loadSettings
+    };
+}
diff --git a/web/src/pages/AdminQuests.tsx b/web/src/pages/AdminQuests.tsx
index 018f473..a5330c2 100644
--- a/web/src/pages/AdminQuests.tsx
+++ b/web/src/pages/AdminQuests.tsx
@@ -1,58 +1,20 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { QuestForm } from "../components/quest-form";
-import { Badge } from "../components/ui/badge";
 import { SectionHeader } from "../components/section-header";
-import { SettingsDrawer } from "../components/settings-drawer";
-import { ChevronLeft } from "lucide-react";
 
 export function AdminQuests() {
     return (
-        <div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
-            {/* Navigation */}
-            <nav className="sticky top-0 z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
-                <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 rounded-full bg-aurora sun-flare shadow-sm" />
-                    <span className="text-xl font-bold tracking-tight text-primary">Aurora Admin</span>
-                </div>
+        <main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-12">
+            <SectionHeader
+                badge="Quest Management"
+                title="Quests"
+                description="Create and manage quests for the Aurora RPG students."
+            />
 
-                <div className="flex items-center gap-6">
-                    <Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Home
-                    </Link>
-                    <Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Dashboard
-                    </Link>
-                    <Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Design System
-                    </Link>
-                    <div className="h-4 w-px bg-border/50" />
-                    <SettingsDrawer />
-                </div>
-            </nav>
-
-            <main className="pt-12 px-8 pb-12 max-w-7xl mx-auto space-y-12">
-                <div className="space-y-4">
-                    <Link 
-                        to="/dashboard" 
-                        className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors w-fit"
-                    >
-                        <ChevronLeft className="w-4 h-4" />
-                        <span className="text-sm font-medium">Back to Dashboard</span>
-                    </Link>
-                    
-                    <SectionHeader
-                        badge="Quest Management"
-                        title="Administrative Tools"
-                        description="Create and manage quests for the Aurora RPG students."
-                    />
-                </div>
-
-                <div className="animate-in fade-in slide-up duration-700">
-                    <QuestForm />
-                </div>
-            </main>
-        </div>
+            <div className="animate-in fade-in slide-up duration-700">
+                <QuestForm />
+            </div>
+        </main>
     );
 }
 
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
deleted file mode 100644
index a814026..0000000
--- a/web/src/pages/Dashboard.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { useSocket } from "../hooks/use-socket";
-import { Badge } from "../components/ui/badge";
-import { StatCard } from "../components/stat-card";
-import { RecentActivity } from "../components/recent-activity";
-import { ActivityChart } from "../components/activity-chart";
-import { LootdropCard } from "../components/lootdrop-card";
-import { LeaderboardCard } from "../components/leaderboard-card";
-import { CommandsDrawer } from "../components/commands-drawer";
-import { Server, Users, Terminal, Activity, Coins, TrendingUp, Flame, Package } from "lucide-react";
-import { cn } from "../lib/utils";
-import { SettingsDrawer } from "../components/settings-drawer";
-
-export function Dashboard() {
-    const { isConnected, stats } = useSocket();
-    const [commandsDrawerOpen, setCommandsDrawerOpen] = useState(false);
-
-    return (
-        <div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
-            {/* Navigation */}
-            <nav className="sticky top-0 z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
-                <div className="flex items-center gap-3">
-                    {/* Bot Avatar */}
-                    {stats?.bot?.avatarUrl ? (
-                        <img
-                            src={stats.bot.avatarUrl}
-                            alt="Aurora Avatar"
-                            className="w-8 h-8 rounded-full border border-primary/20 shadow-sm object-cover"
-                        />
-                    ) : (
-                        <div className="w-8 h-8 rounded-full bg-aurora sun-flare shadow-sm" />
-                    )}
-
-                    <span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
-
-                    {/* Live Status Badge */}
-                    <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full border transition-colors duration-500 ${isConnected
-                        ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500"
-                        : "bg-red-500/10 border-red-500/20 text-red-500"
-                        }`}>
-                        <div className="relative flex h-2 w-2">
-                            {isConnected && (
-                                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75"></span>
-                            )}
-                            <span className={`relative inline-flex rounded-full h-2 w-2 ${isConnected ? "bg-emerald-500" : "bg-red-500"}`}></span>
-                        </div>
-                        <span className="text-[10px] font-bold tracking-wider uppercase">
-                            {isConnected ? "Live" : "Offline"}
-                        </span>
-                    </div>
-                </div>
-
-                <div className="flex items-center gap-6">
-                    <Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Home
-                    </Link>
-                    <Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Design System
-                    </Link>
-                    <Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Admin
-                    </Link>
-                    <div className="h-4 w-px bg-border/50" />
-                    <SettingsDrawer />
-                </div>
-            </nav>
-
-            {/* Dashboard Content */}
-            <main className="pt-8 px-8 pb-8 max-w-7xl mx-auto space-y-8">
-
-                {/* Stats Grid */}
-                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 animate-in fade-in slide-up">
-                    <StatCard
-                        title="Total Servers"
-                        icon={Server}
-                        isLoading={!stats}
-                        value={stats?.guilds.count.toLocaleString()}
-                        subtitle={stats?.guilds.changeFromLastMonth
-                            ? `${stats.guilds.changeFromLastMonth > 0 ? '+' : ''}${stats.guilds.changeFromLastMonth} from last month`
-                            : "Active Guilds"
-                        }
-                    />
-
-                    <StatCard
-                        title="Total Users"
-                        icon={Users}
-                        isLoading={!stats}
-                        value={stats?.users.total.toLocaleString()}
-                        subtitle={stats ? `${stats.users.active.toLocaleString()} active now` : undefined}
-                        className="delay-100"
-                    />
-
-                    <StatCard
-                        title="Commands"
-                        icon={Terminal}
-                        isLoading={!stats}
-                        value={stats?.commands.total.toLocaleString()}
-                        subtitle={stats ? `${stats.commands.active} active · ${stats.commands.disabled} disabled` : undefined}
-                        className="delay-200"
-                        onClick={() => setCommandsDrawerOpen(true)}
-                    />
-
-                    <StatCard
-                        title="System Ping"
-                        icon={Activity}
-                        isLoading={!stats}
-                        value={stats ? `${Math.round(stats.ping.avg)}ms` : undefined}
-                        subtitle="Average latency"
-                        className="delay-300"
-                        valueClassName={stats ? cn(
-                            "transition-colors duration-300",
-                            stats.ping.avg < 100 ? "text-emerald-500" :
-                                stats.ping.avg < 200 ? "text-yellow-500" : "text-red-500"
-                        ) : undefined}
-                    />
-                </div>
-
-                {/* Activity Chart */}
-                <div className="animate-in fade-in slide-up delay-400">
-                    <ActivityChart />
-                </div>
-
-                <div className="grid gap-8 lg:grid-cols-3 animate-in fade-in slide-up delay-500">
-                    {/* Economy Stats */}
-                    <div className="lg:col-span-2 space-y-4">
-                        <h2 className="text-xl font-semibold tracking-tight">Economy Overview</h2>
-                        <div className="grid gap-4 md:grid-cols-2">
-                            <StatCard
-                                title="Total Wealth"
-                                icon={Coins}
-                                isLoading={!stats}
-                                value={stats ? `${Number(stats.economy.totalWealth).toLocaleString()} AU` : undefined}
-                                subtitle="Astral Units in circulation"
-                                valueClassName="text-primary"
-                                iconClassName="text-primary"
-                            />
-
-                            <StatCard
-                                title="Items Circulating"
-                                icon={Package}
-                                isLoading={!stats}
-                                value={stats?.economy.totalItems?.toLocaleString()}
-                                subtitle="Total items owned by users"
-                                className="delay-75"
-                                valueClassName="text-blue-500"
-                                iconClassName="text-blue-500"
-                            />
-
-                            <StatCard
-                                title="Average Level"
-                                icon={TrendingUp}
-                                isLoading={!stats}
-                                value={stats ? `Lvl ${stats.economy.avgLevel}` : undefined}
-                                subtitle="Global player average"
-                                className="delay-100"
-                                valueClassName="text-secondary"
-                                iconClassName="text-secondary"
-                            />
-
-                            <StatCard
-                                title="Top /daily Streak"
-                                icon={Flame}
-                                isLoading={!stats}
-                                value={stats?.economy.topStreak}
-                                subtitle="Days daily streak"
-                                className="delay-200"
-                                valueClassName="text-destructive"
-                                iconClassName="text-destructive"
-                            />
-                        </div>
-
-                        <LeaderboardCard
-                            data={stats?.leaderboards}
-                            isLoading={!stats}
-                            className="w-full"
-                        />
-                    </div>
-
-                    {/* Recent Activity & Lootdrops */}
-                    <div className="space-y-4">
-                        <LootdropCard
-                            drop={stats?.activeLootdrops?.[0]}
-                            state={stats?.lootdropState}
-                            isLoading={!stats}
-                        />
-                        <h2 className="text-xl font-semibold tracking-tight">Live Feed</h2>
-                        <RecentActivity
-                            events={stats?.recentEvents || []}
-                            isLoading={!stats}
-                            className="h-[calc(100%-2rem)]"
-                        />
-                    </div>
-                </div>
-            </main >
-
-            {/* Commands Drawer */}
-            <CommandsDrawer
-                open={commandsDrawerOpen}
-                onOpenChange={setCommandsDrawerOpen}
-            />
-        </div >
-    );
-}
diff --git a/web/src/pages/DesignSystem.tsx b/web/src/pages/DesignSystem.tsx
index 405c253..c72bb66 100644
--- a/web/src/pages/DesignSystem.tsx
+++ b/web/src/pages/DesignSystem.tsx
@@ -1,25 +1,28 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { Badge } from "../components/ui/badge";
-import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
+import { Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter } from "../components/ui/card";
 import { Button } from "../components/ui/button";
 import { Switch } from "../components/ui/switch";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Textarea } from "../components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip";
 import { FeatureCard } from "../components/feature-card";
 import { InfoCard } from "../components/info-card";
 import { SectionHeader } from "../components/section-header";
 import { TestimonialCard } from "../components/testimonial-card";
 import { StatCard } from "../components/stat-card";
 import { LootdropCard } from "../components/lootdrop-card";
-import { Activity, Coins, Flame, Trophy } from "lucide-react";
-import { SettingsDrawer } from "../components/settings-drawer";
-import { QuestForm } from "../components/quest-form";
-
-import { RecentActivity } from "../components/recent-activity";
-import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
 import { LeaderboardCard, type LeaderboardData } from "../components/leaderboard-card";
 import { ActivityChart } from "../components/activity-chart";
-import { type ActivityData } from "@shared/modules/dashboard/dashboard.types";
+import { RecentActivity } from "../components/recent-activity";
+import { QuestForm } from "../components/quest-form";
+import { Activity, Coins, Flame, Trophy, Check, User, Mail, Shield, Bell } from "lucide-react";
+import { type RecentEvent, type ActivityData } from "@shared/modules/dashboard/dashboard.types";
 
+// Mock Data
 const mockEvents: RecentEvent[] = [
     { type: 'success', message: 'User leveled up to 5', timestamp: new Date(Date.now() - 1000 * 60 * 5), icon: '⬆️' },
     { type: 'info', message: 'New user joined', timestamp: new Date(Date.now() - 1000 * 60 * 15), icon: '👋' },
@@ -37,474 +40,326 @@ const mockActivityData: ActivityData[] = Array.from({ length: 24 }).map((_, i) =
     };
 });
 
-const mockManyEvents: RecentEvent[] = Array.from({ length: 15 }).map((_, i) => ({
-    type: i % 3 === 0 ? 'success' : i % 3 === 1 ? 'info' : 'error', // Use string literals matching the type definition
-    message: `Event #${i + 1} generated for testing scroll behavior`,
-    timestamp: new Date(Date.now() - 1000 * 60 * i * 10),
-    icon: i % 3 === 0 ? '✨' : i % 3 === 1 ? 'ℹ️' : '🚨',
-}));
-
 const mockLeaderboardData: LeaderboardData = {
     topLevels: [
         { username: "StellarMage", level: 99 },
         { username: "MoonWalker", level: 85 },
         { username: "SunChaser", level: 72 },
-        { username: "NebulaKnight", level: 68 },
-        { username: "CometRider", level: 65 },
-        { username: "VoidWalker", level: 60 },
-        { username: "AstroBard", level: 55 },
-        { username: "StarGazer", level: 50 },
-        { username: "CosmicDruid", level: 45 },
-        { username: "GalaxyGuard", level: 42 }
     ],
     topWealth: [
         { username: "GoldHoarder", balance: "1000000" },
         { username: "MerchantKing", balance: "750000" },
         { username: "LuckyLooter", balance: "500000" },
-        { username: "CryptoMiner", balance: "450000" },
-        { username: "MarketMaker", balance: "300000" },
-        { username: "TradeWind", balance: "250000" },
-        { username: "CoinKeeper", balance: "150000" },
-        { username: "GemHunter", balance: "100000" },
-        { username: "DustCollector", balance: "50000" },
-        { username: "BrokeBeginner", balance: "100" }
     ],
     topNetWorth: [
         { username: "MerchantKing", netWorth: "1500000" },
         { username: "GoldHoarder", netWorth: "1250000" },
         { username: "LuckyLooter", netWorth: "850000" },
-        { username: "MarketMaker", netWorth: "700000" },
-        { username: "GemHunter", netWorth: "650000" },
-        { username: "CryptoMiner", netWorth: "550000" },
-        { username: "TradeWind", netWorth: "400000" },
-        { username: "CoinKeeper", netWorth: "250000" },
-        { username: "DustCollector", netWorth: "150000" },
-        { username: "BrokeBeginner", netWorth: "5000" }
     ]
 };
 
 export function DesignSystem() {
     return (
-        <div className="min-h-screen bg-aurora-page text-foreground font-outfit">
-            {/* Navigation */}
-            <nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
-                <div className="flex items-center gap-2">
-                    <div className="w-8 h-8 rounded-full bg-aurora sun-flare" />
-                    <span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
+        <div className="pt-8 px-8 max-w-7xl mx-auto space-y-8 text-center md:text-left pb-24">
+            {/* Header Section */}
+            <header className="space-y-4 animate-in fade-in">
+                <div className="flex flex-col md:flex-row items-center md:items-start justify-between gap-4">
+                    <div className="space-y-2">
+                        <Badge variant="aurora" className="mb-2">v2.0.0-solaris</Badge>
+                        <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-primary glow-text">
+                            Aurora Design System
+                        </h1>
+                        <p className="text-xl text-muted-foreground max-w-2xl">
+                            The Solaris design language. A cohesive collection of celestial components, 
+                            glassmorphic surfaces, and radiant interactions.
+                        </p>
+                    </div>
+                    <div className="hidden md:block">
+                        <div className="size-32 rounded-full bg-aurora opacity-20 blur-3xl animate-pulse" />
+                    </div>
                 </div>
-                <div className="flex items-center gap-6">
-                    <Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Home
-                    </Link>
-                    <Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Dashboard
-                    </Link>
-                    <Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Admin
-                    </Link>
+            </header>
+
+            <Tabs defaultValue="foundations" className="space-y-8 animate-in slide-up delay-100">
+                <div className="flex items-center justify-center md:justify-start">
+                    <TabsList className="grid w-full max-w-md grid-cols-3">
+                        <TabsTrigger value="foundations">Foundations</TabsTrigger>
+                        <TabsTrigger value="components">Components</TabsTrigger>
+                        <TabsTrigger value="patterns">Patterns</TabsTrigger>
+                    </TabsList>
                 </div>
-            </nav>
 
-            <div className="pt-32 px-8 max-w-6xl mx-auto space-y-12 text-center md:text-left">
-                {/* Header Section */}
-                <header className="space-y-4 animate-in fade-in">
-                    <Badge variant="aurora" className="mb-2">v1.2.0-solar</Badge>
-                    <h1 className="text-6xl font-extrabold tracking-tight text-primary">
-                        Aurora Design System
-                    </h1>
-                    <p className="text-xl text-muted-foreground max-w-2xl mx-auto md:mx-0">
-                        Welcome to the Solaris Dark theme. A warm, celestial-inspired aesthetic designed for the Aurora astrology RPG.
-                    </p>
-                </header>
-
-                {/* Color Palette */}
-                <section className="space-y-6 animate-in slide-up delay-100">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Color Palette
-                    </h2>
-                    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                        <ColorSwatch label="Primary" color="bg-primary" text="text-primary-foreground" />
-                        <ColorSwatch label="Secondary" color="bg-secondary" text="text-secondary-foreground" />
-                        <ColorSwatch label="Background" color="bg-background" border />
-                        <ColorSwatch label="Card" color="bg-card" border />
-                        <ColorSwatch label="Accent" color="bg-accent" />
-                        <ColorSwatch label="Muted" color="bg-muted" />
-                        <ColorSwatch label="Destructive" color="bg-destructive" text="text-white" />
-                    </div>
-                </section>
-
-                {/* Badges & Pills */}
-                <section className="space-y-6 animate-in slide-up delay-200">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Badges & Tags
-                    </h2>
-                    <div className="flex flex-wrap gap-4 items-center justify-center md:justify-start">
-                        <Badge className="hover-scale cursor-default">Primary</Badge>
-                        <Badge variant="secondary" className="hover-scale cursor-default">Secondary</Badge>
-                        <Badge variant="aurora" className="hover-scale cursor-default">Solaris</Badge>
-                        <Badge variant="glass" className="hover-scale cursor-default">Celestial Glass</Badge>
-                        <Badge variant="outline" className="hover-scale cursor-default">Outline</Badge>
-                        <Badge variant="destructive" className="hover-scale cursor-default">Destructive</Badge>
-                    </div>
-                </section>
-
-                {/* Animations & Interactions */}
-                <section className="space-y-6 animate-in slide-up delay-300">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Animations & Interactions
-                    </h2>
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                        <div className="glass-card p-6 rounded-xl hover-lift cursor-pointer space-y-2">
-                            <h3 className="font-bold text-primary">Hover Lift</h3>
-                            <p className="text-sm text-muted-foreground">Smooth upward translation with enhanced depth.</p>
+                {/* FOUNDATIONS TAB */}
+                <TabsContent value="foundations" className="space-y-12">
+                     {/* Color Palette */}
+                     <section className="space-y-6">
+                        <div className="flex items-center gap-4">
+                             <div className="h-px bg-border flex-1" />
+                             <h2 className="text-2xl font-bold text-foreground">Color Palette</h2>
+                             <div className="h-px bg-border flex-1" />
                         </div>
-                        <div className="glass-card p-6 rounded-xl hover-glow cursor-pointer space-y-2">
-                            <h3 className="font-bold text-primary">Hover Glow</h3>
-                            <p className="text-sm text-muted-foreground">Subtle border and shadow illumination on hover.</p>
+                        
+                        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                            <ColorSwatch label="Primary" color="bg-primary" text="text-primary-foreground" />
+                            <ColorSwatch label="Secondary" color="bg-secondary" text="text-secondary-foreground" />
+                            <ColorSwatch label="Background" color="bg-background" border />
+                            <ColorSwatch label="Card" color="bg-card" border />
+                            <ColorSwatch label="Accent" color="bg-accent" />
+                            <ColorSwatch label="Muted" color="bg-muted" />
+                            <ColorSwatch label="Destructive" color="bg-destructive" text="text-white" />
                         </div>
-                        <div className="flex items-center justify-center p-6">
-                            <Button className="bg-primary text-primary-foreground active-press font-bold px-8 py-6 rounded-xl shadow-lg">
-                                Press Interaction
-                            </Button>
-                        </div>
-                    </div>
-                </section>
+                    </section>
 
-                {/* Gradients & Special Effects */}
-                <section className="space-y-6 animate-in slide-up delay-400">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Gradients & Effects
-                    </h2>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-center">
-                        <div className="space-y-4">
-                            <h3 className="text-xl font-medium text-muted-foreground">The Solaris Gradient (Background)</h3>
-                            <div className="h-32 w-full rounded-xl bg-aurora-page sun-flare flex items-center justify-center border border-border hover-glow transition-all">
-                                <span className="text-primary font-bold text-2xl">Celestial Void</span>
+                    {/* Gradients & Special Effects */}
+                    <section className="space-y-6">
+                         <div className="flex items-center gap-4">
+                             <div className="h-px bg-border flex-1" />
+                             <h2 className="text-2xl font-bold text-foreground">Gradients & Effects</h2>
+                             <div className="h-px bg-border flex-1" />
+                        </div>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-center">
+                            <div className="space-y-4">
+                                <h3 className="text-xl font-medium text-muted-foreground">The Solaris Gradient</h3>
+                                <div className="h-32 w-full rounded-xl bg-aurora-page sun-flare flex items-center justify-center border border-border hover-glow transition-all">
+                                    <span className="text-primary font-bold text-2xl">Celestial Void</span>
+                                </div>
                             </div>
-                        </div>
-                        <div className="space-y-4">
-                            <h3 className="text-xl font-medium text-muted-foreground">Glassmorphism</h3>
-                            <div className="h-32 w-full rounded-xl glass-card flex items-center justify-center p-6 bg-[url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?auto=format&fit=crop&q=80&w=2342')] bg-cover bg-center overflow-hidden">
-                                <div className="glass-card p-4 rounded-lg text-center w-full hover-lift transition-all backdrop-blur-md">
-                                    <span className="font-bold">Frosted Celestial Glass</span>
+                            <div className="space-y-4">
+                                <h3 className="text-xl font-medium text-muted-foreground">Glassmorphism</h3>
+                                <div className="h-32 w-full rounded-xl glass-card flex items-center justify-center p-6 bg-[url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?auto=format&fit=crop&q=80&w=2342')] bg-cover bg-center overflow-hidden">
+                                    <div className="glass-card p-4 rounded-lg text-center w-full hover-lift transition-all backdrop-blur-md">
+                                        <span className="font-bold">Frosted Celestial Glass</span>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </section>
+                    </section>
 
-                {/* Components Showcase */}
-                <section className="space-y-6 animate-in slide-up delay-500">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Component Showcase
-                    </h2>
-                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                        {/* Action Card with Tags */}
-                        <Card className="glass-card sun-flare overflow-hidden border-none text-left hover-lift transition-all">
-                            <div className="h-2 bg-primary w-full" />
-                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                                <CardTitle className="text-primary">Celestial Action</CardTitle>
-                                <Badge variant="aurora" className="h-5">New</Badge>
-                            </CardHeader>
-                            <CardContent className="space-y-4">
-                                <div className="flex gap-2">
-                                    <Badge variant="glass" className="text-[10px] uppercase">Quest</Badge>
-                                    <Badge variant="glass" className="text-[10px] uppercase">Level 15</Badge>
-                                </div>
-                                <p className="text-muted-foreground text-sm">
-                                    Experience the warmth of the sun in every interaction and claim your rewards.
-                                </p>
-                                <div className="flex gap-2 pt-2">
-                                    <Button className="bg-primary text-primary-foreground active-press font-bold px-6">
-                                        Ascend
-                                    </Button>
-                                </div>
-                            </CardContent>
-                        </Card>
-
-                        {/* Profile/Entity Card with Tags */}
-                        <Card className="glass-card text-left hover-lift transition-all">
-                            <CardHeader className="pb-2">
-                                <div className="flex justify-between items-start">
-                                    <div className="w-12 h-12 rounded-full bg-aurora border-2 border-primary/20 hover-scale transition-transform cursor-pointer" />
-                                    <Badge variant="secondary" className="bg-green-500/10 text-green-500 border-green-500/20">Online</Badge>
-                                </div>
-                                <CardTitle className="mt-4">Stellar Navigator</CardTitle>
-                                <p className="text-xs text-muted-foreground uppercase tracking-wider">Level 42 Mage</p>
-                            </CardHeader>
-                            <CardContent className="space-y-4">
-                                <div className="flex flex-wrap gap-2">
-                                    <Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Astronomy</Badge>
-                                    <Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Pyromancy</Badge>
-                                    <Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Leadership</Badge>
-                                </div>
-                                <div className="h-1.5 w-full bg-secondary/20 rounded-full overflow-hidden">
-                                    <div className="h-full bg-aurora w-[75%] animate-in slide-up delay-500" />
-                                </div>
-                            </CardContent>
-                        </Card>
-
-                        {/* Interactive Card with Tags */}
-                        <Card className="glass-card text-left hover-glow transition-all">
-                            <CardHeader>
-                                <div className="flex items-center gap-2 mb-2">
-                                    <Badge variant="glass" className="bg-primary/10 text-primary border-primary/20">Beta</Badge>
-                                </div>
-                                <div className="flex justify-between items-center">
-                                    <CardTitle>System Settings</CardTitle>
-                                    <SettingsDrawer />
-                                </div>
-                            </CardHeader>
-                            <CardContent className="space-y-6">
-                                <div className="flex items-center justify-between">
-                                    <div className="space-y-0.5">
-                                        <div className="font-medium">Starry Background</div>
-                                        <div className="text-sm text-muted-foreground">Enable animated SVG stars</div>
-                                    </div>
-                                    <Switch defaultChecked />
-                                </div>
-                                <div className="flex items-center justify-between">
-                                    <div className="space-y-0.5">
-                                        <div className="font-medium flex items-center gap-2">
-                                            Solar Flare Glow
-                                            <Badge className="bg-amber-500/10 text-amber-500 border-amber-500/20 text-[9px] h-4">Pro</Badge>
-                                        </div>
-                                        <div className="text-sm text-muted-foreground">Add bloom to primary elements</div>
-                                    </div>
-                                    <Switch defaultChecked />
-                                </div>
-                            </CardContent>
-                        </Card>
-                    </div>
-                </section>
-
-                {/* Refactored Application Components */}
-                <section className="space-y-6 animate-in slide-up delay-600">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Application Components
-                    </h2>
-
-                    <div className="space-y-12">
-                        {/* Section Header Demo */}
-                        <div className="border border-border/50 rounded-xl p-8 bg-background/50">
-                            <SectionHeader
-                                badge="Components"
-                                title="Section Headers"
-                                description="Standardized header component for defining page sections with badge, title, and description."
-                            />
+                    {/* Typography */}
+                    <section className="space-y-8">
+                         <div className="flex items-center gap-4">
+                             <div className="h-px bg-border flex-1" />
+                             <h2 className="text-2xl font-bold text-foreground">Typography</h2>
+                             <div className="h-px bg-border flex-1" />
                         </div>
+                        <div className="space-y-2 border border-border/50 rounded-xl p-8 bg-card/50">
+                            <TypographyRow step="-2" className="text-step--2" label="Step -2 (Small Print)" />
+                            <TypographyRow step="-1" className="text-step--1" label="Step -1 (Small)" />
+                            <TypographyRow step="0" className="text-step-0" label="Step 0 (Base / Body)" />
+                            <TypographyRow step="1" className="text-step-1" label="Step 1 (H4 / Subhead)" />
+                            <TypographyRow step="2" className="text-step-2" label="Step 2 (H3 / Section)" />
+                            <TypographyRow step="3" className="text-step-3 text-primary" label="Step 3 (H2 / Header)" />
+                            <TypographyRow step="4" className="text-step-4 text-primary" label="Step 4 (H1 / Title)" />
+                            <TypographyRow step="5" className="text-step-5 text-primary font-black" label="Step 5 (Display)" />
+                        </div>
+                    </section>
+                </TabsContent>
 
-                        {/* Feature Cards Demo */}
+                {/* COMPONENTS TAB */}
+                <TabsContent value="components" className="space-y-12">
+                    {/* Buttons & Badges */}
+                    <section className="space-y-6">
+                        <SectionTitle title="Buttons & Badges" />
+                        <Card className="p-8">
+                            <div className="space-y-8">
+                                <div className="space-y-4">
+                                    <Label>Buttons</Label>
+                                    <div className="flex flex-wrap gap-4">
+                                        <Button variant="default">Default</Button>
+                                        <Button variant="secondary">Secondary</Button>
+                                        <Button variant="outline">Outline</Button>
+                                        <Button variant="ghost">Ghost</Button>
+                                        <Button variant="destructive">Destructive</Button>
+                                        <Button variant="link">Link</Button>
+                                        <Button variant="aurora">Aurora</Button>
+                                        <Button variant="glass">Glass</Button>
+                                    </div>
+                                </div>
+                                <div className="space-y-4">
+                                    <Label>Badges</Label>
+                                    <div className="flex flex-wrap gap-4">
+                                        <Badge>Primary</Badge>
+                                        <Badge variant="secondary">Secondary</Badge>
+                                        <Badge variant="outline">Outline</Badge>
+                                        <Badge variant="destructive">Destructive</Badge>
+                                        <Badge variant="aurora">Aurora</Badge>
+                                        <Badge variant="glass">Glass</Badge>
+                                    </div>
+                                </div>
+                            </div>
+                        </Card>
+                    </section>
+                    
+                    {/* Form Controls */}
+                    <section className="space-y-6">
+                        <SectionTitle title="Form Controls" />
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            <FeatureCard
-                                title="Feature Card"
-                                category="UI Element"
-                                description="A versatile card component for the bento grid layout."
-                                icon={<div className="w-20 h-20 bg-primary/20 rounded-full animate-pulse" />}
-                            />
-                            <FeatureCard
-                                title="Interactive Feature"
-                                category="Interactive"
-                                description="Supports custom children nodes for complex content."
-                            >
-                                <div className="mt-2 p-3 bg-secondary/10 border border-secondary/20 rounded text-center text-secondary text-sm font-bold">
-                                    Custom Child Content
+                            <Card className="p-6 space-y-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="email">Email Address</Label>
+                                    <Input id="email" placeholder="enter@email.com" type="email" />
                                 </div>
-                            </FeatureCard>
+                                <div className="space-y-2">
+                                    <Label htmlFor="bio">Bio</Label>
+                                    <Textarea id="bio" placeholder="Tell us about yourself..." />
+                                </div>
+                                <div className="flex items-center justify-between">
+                                    <Label htmlFor="notifications">Enable Notifications</Label>
+                                    <Switch id="notifications" />
+                                </div>
+                            </Card>
+                            <Card className="p-6 space-y-6">
+                                <div className="space-y-2">
+                                    <Label>Role Selection</Label>
+                                     <Select>
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select a role" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="admin">Administrator</SelectItem>
+                                            <SelectItem value="mod">Moderator</SelectItem>
+                                            <SelectItem value="user">User</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div className="space-y-2">
+                                    <Label>Tooltip Demo</Label>
+                                    <div className="p-4 border border-dashed rounded-lg flex items-center justify-center">
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <Button variant="outline">Hover Me</Button>
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p>This is a glowing tooltip!</p>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                    </div>
+                                </div>
+                            </Card>
                         </div>
+                    </section>
 
-                        {/* Info Cards Demo */}
+                     {/* Cards & Containers */}
+                     <section className="space-y-6">
+                        <SectionTitle title="Cards & Containers" />
                         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                            <InfoCard
-                                icon={<div className="w-6 h-6 rounded-full bg-primary animate-ping" />}
-                                title="Info Card"
-                                description="Compact card for highlighting features or perks with an icon."
-                                iconWrapperClassName="bg-primary/20 text-primary"
-                            />
-                        </div>
+                            <Card className="hover-lift">
+                                <CardHeader>
+                                    <CardTitle>Standard Card</CardTitle>
+                                    <CardDescription>Default glassmorphic style</CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                    <p className="text-sm text-muted-foreground">The default card component comes with built-in separation and padding.</p>
+                                </CardContent>
+                                <CardFooter>
+                                    <Button size="sm" variant="secondary" className="w-full">Action</Button>
+                                </CardFooter>
+                            </Card>
 
-                        {/* Stat Cards Demo */}
+                            <Card className="bg-aurora/10 border-primary/20 hover-glow">
+                                <CardHeader>
+                                    <CardTitle className="text-primary">Highlighted Card</CardTitle>
+                                    <CardDescription>Active or featured state</CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                     <p className="text-sm text-muted-foreground">Use this variation to draw attention to specific content blocks.</p>
+                                </CardContent>
+                            </Card>
+
+                            <Card className="border-dashed shadow-none bg-transparent">
+                                <CardHeader>
+                                    <CardTitle>Ghost/Dashed Card</CardTitle>
+                                    <CardDescription>Placeholder or empty state</CardDescription>
+                                </CardHeader>
+                                <CardContent className="flex items-center justify-center py-8">
+                                    <div className="bg-muted p-4 rounded-full">
+                                        <Activity className="size-6 text-muted-foreground" />
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        </div>
+                    </section>
+                </TabsContent>
+
+                {/* PATTERNS TAB */}
+                <TabsContent value="patterns" className="space-y-12">
+                     {/* Dashboard Widgets */}
+                     <section className="space-y-6">
+                        <SectionTitle title="Dashboard Widgets" />
                         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                             <StatCard
-                                title="Standard Stat"
-                                value="1,234"
-                                subtitle="Active users"
+                                title="Total XP"
+                                value="1,240,500"
+                                subtitle="+12% from last week"
+                                icon={Trophy}
+                                isLoading={false}
+                                iconClassName="text-yellow-500"
+                            />
+                            <StatCard
+                                title="Active Users"
+                                value="3,405"
+                                subtitle="Currently online"
+                                icon={User}
+                                isLoading={false}
+                                iconClassName="text-blue-500"
+                            />
+                            <StatCard
+                                title="System Load"
+                                value="42%"
+                                subtitle="Optimal performance"
                                 icon={Activity}
                                 isLoading={false}
+                                iconClassName="text-green-500"
                             />
-                            <StatCard
-                                title="Colored Stat"
-                                value="9,999 AU"
-                                subtitle="Total Wealth"
-                                icon={Coins}
+                        </div>
+                    </section>
+
+                    {/* Complex Lists */}
+                    <section className="space-y-6">
+                         <SectionTitle title="Complex Lists & Charts" />
+                         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                            <RecentActivity
+                                events={mockEvents}
                                 isLoading={false}
-                                valueClassName="text-primary"
-                                iconClassName="text-primary"
+                                className="h-[400px]"
                             />
-                            <StatCard
-                                title="Loading State"
-                                value={null}
-                                icon={Flame}
-                                isLoading={true}
+                            <LeaderboardCard
+                                data={mockLeaderboardData}
+                                isLoading={false}
+                                className="h-[400px]"
                             />
-                        </div>
+                         </div>
+                    </section>
 
-                        {/* Data Visualization Demo */}
-                        <div className="space-y-4">
-                            <h3 className="text-xl font-semibold text-muted-foreground">Data Visualization</h3>
-                            <div className="grid grid-cols-1 gap-6">
-                                <ActivityChart
-                                    data={mockActivityData}
-                                />
-                                <ActivityChart
-                                // Empty charts (loading state)
-                                />
-                            </div>
-                        </div>
+                     {/* Application Patterns */}
+                     <section className="space-y-6">
+                         <SectionTitle title="Application Forms" />
+                         <div className="max-w-xl mx-auto">
+                            <QuestForm />
+                         </div>
+                    </section>
+                </TabsContent>
+            </Tabs>
+        </div>
+    );
+}
 
-                        {/* Game Event Cards Demo */}
-                        <div className="space-y-4">
-                            <h3 className="text-xl font-semibold text-muted-foreground">Game Event Cards</h3>
-                            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                                <LootdropCard
-                                    isLoading={true}
-                                />
-                                <LootdropCard
-                                    drop={null}
-                                    state={{
-                                        monitoredChannels: 3,
-                                        hottestChannel: {
-                                            id: "123",
-                                            messages: 42,
-                                            progress: 42,
-                                            cooldown: false
-                                        },
-                                        config: { requiredMessages: 100, dropChance: 0.1 }
-                                    }}
-                                    isLoading={false}
-                                />
-                                <LootdropCard
-                                    drop={null}
-                                    state={{
-                                        monitoredChannels: 3,
-                                        hottestChannel: {
-                                            id: "123",
-                                            messages: 100,
-                                            progress: 100,
-                                            cooldown: true
-                                        },
-                                        config: { requiredMessages: 100, dropChance: 0.1 }
-                                    }}
-                                    isLoading={false}
-                                />
-                                <LootdropCard
-                                    drop={{
-                                        rewardAmount: 500,
-                                        currency: "AU",
-                                        createdAt: new Date().toISOString(),
-                                        expiresAt: new Date(Date.now() + 60000).toISOString()
-                                    }}
-                                    isLoading={false}
-                                />
-                            </div>
-                        </div>
-
-                        {/* Leaderboard Demo */}
-                        <div className="space-y-4">
-                            <h3 className="text-xl font-semibold text-muted-foreground">Leaderboard Cards</h3>
-                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                                <LeaderboardCard
-                                    isLoading={true}
-                                />
-                                <LeaderboardCard
-                                    data={mockLeaderboardData}
-                                    isLoading={false}
-                                />
-                            </div>
-                        </div>
-
-                        {/* Testimonial Cards Demo */}
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            <TestimonialCard
-                                quote="The testimonial card is perfect for social proof sections."
-                                author="Jane Doe"
-                                role="Beta Tester"
-                                avatarGradient="bg-gradient-to-br from-pink-500 to-rose-500"
-                            />
-                        </div>
-
-                        {/* Recent Activity Demo */}
-                        <div className="space-y-4">
-                            <h3 className="text-xl font-semibold text-muted-foreground">Recent Activity Feed</h3>
-                            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 h-[500px]">
-                                <RecentActivity
-                                    events={[]}
-                                    isLoading={true}
-                                    className="h-full"
-                                />
-                                <RecentActivity
-                                    events={[]}
-                                    isLoading={false}
-                                    className="h-full"
-                                />
-                                <RecentActivity
-                                    events={mockEvents}
-                                    isLoading={false}
-                                    className="h-full"
-                                />
-                                <RecentActivity
-                                    events={mockManyEvents}
-                                    isLoading={false}
-                                    className="h-full"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </section>
-
-                {/* Administrative Tools Showcase */}
-                <section className="space-y-6 animate-in slide-up delay-700">
-                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
-                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
-                        Administrative Tools
-                    </h2>
-                    <div className="grid grid-cols-1 gap-6 text-left">
-                        <QuestForm />
-                    </div>
-                </section>
-
-                {/* Typography */}
-                <section className="space-y-8 pb-12">
-                    <h2 className="text-step-3 font-bold text-center">Fluid Typography</h2>
-                    <div className="space-y-6">
-                        <TypographyRow step="-2" className="text-step--2" label="Step -2 (Small Print)" />
-                        <TypographyRow step="-1" className="text-step--1" label="Step -1 (Small)" />
-                        <TypographyRow step="0" className="text-step-0" label="Step 0 (Base / Body)" />
-                        <TypographyRow step="1" className="text-step-1" label="Step 1 (H4 / Subhead)" />
-                        <TypographyRow step="2" className="text-step-2" label="Step 2 (H3 / Section)" />
-                        <TypographyRow step="3" className="text-step-3 text-primary" label="Step 3 (H2 / Header)" />
-                        <TypographyRow step="4" className="text-step-4 text-primary" label="Step 4 (H1 / Title)" />
-                        <TypographyRow step="5" className="text-step-5 text-primary font-black" label="Step 5 (Display)" />
-                    </div>
-                    <p className="text-step--1 text-muted-foreground text-center italic">
-                        Try resizing your browser window to see the text scale smoothly.
-                    </p>
-                </section>
-            </div>
+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" />
+             <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>
     );
 }
 
 function TypographyRow({ step, className, label }: { step: string, className: string, label: string }) {
     return (
-        <div className="flex flex-col md:flex-row md:items-baseline gap-4 border-b border-border/50 pb-4">
-            <span className="text-step--2 font-mono text-muted-foreground w-20">Step {step}</span>
+        <div className="flex flex-col md:flex-row md:items-baseline gap-4 border-b border-border/50 pb-4 last:border-0 last:pb-0">
+            <span className="text-xs font-mono text-muted-foreground w-24 shrink-0">var(--step-{step})</span>
             <p className={`${className} font-medium truncate`}>{label}</p>
         </div>
     );
@@ -512,9 +367,13 @@ function TypographyRow({ step, className, label }: { step: string, className: st
 
 function ColorSwatch({ label, color, text = "text-foreground", border = false }: { label: string, color: string, text?: string, border?: boolean }) {
     return (
-        <div className="space-y-2">
-            <div className={`h-20 w-full rounded-lg ${color} ${border ? 'border border-border' : ''} flex items-end p-2 shadow-lg`}>
-                <span className={`text-xs font-bold uppercase tracking-widest ${text}`}>{label}</span>
+        <div className="group space-y-2 cursor-pointer">
+            <div className={`h-24 w-full rounded-xl ${color} ${border ? 'border border-border' : ''} flex items-end p-3 shadow-lg group-hover:scale-105 transition-transform duration-300 relative overflow-hidden`}>
+                <div className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+                <span className={`text-xs font-bold uppercase tracking-widest ${text} relative z-10`}>{label}</span>
+            </div>
+            <div className="flex justify-between text-xs text-muted-foreground px-1">
+                 <span>{color.replace('bg-', '')}</span>
             </div>
         </div>
     );
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index ccbadcb..6320554 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { FeatureCard } from "../components/feature-card";
@@ -17,28 +16,9 @@ import {
 
 export function Home() {
     return (
-        <div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
-            {/* Navigation (Simple) */}
-            <nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
-                <div className="flex items-center gap-2">
-                    <div className="w-8 h-8 rounded-full bg-aurora sun-flare" />
-                    <span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
-                </div>
-                <div className="flex items-center gap-6">
-                    <Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Dashboard
-                    </Link>
-                    <Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Design System
-                    </Link>
-                    <Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
-                        Admin
-                    </Link>
-
-                </div>
-            </nav>
+        <>
             {/* Hero Section */}
-            <header className="relative pt-32 pb-20 px-8 text-center max-w-5xl mx-auto space-y-10">
+            <header className="relative pt-16 pb-20 px-8 text-center max-w-5xl mx-auto space-y-10">
                 <Badge variant="glass" className="mb-4 py-1.5 px-4 text-step--1 animate-in zoom-in spin-in-12 duration-700 delay-100">
                     The Ultimate Academic Strategy RPG
                 </Badge>
@@ -232,7 +212,7 @@ export function Home() {
                     </div>
                 </div>
             </footer>
-        </div>
+        </>
     );
 }
 
diff --git a/web/src/pages/admin/Overview.tsx b/web/src/pages/admin/Overview.tsx
new file mode 100644
index 0000000..36cb038
--- /dev/null
+++ b/web/src/pages/admin/Overview.tsx
@@ -0,0 +1,164 @@
+import React, { useState } from "react";
+import { SectionHeader } from "../../components/section-header";
+import { useSocket } from "../../hooks/use-socket";
+import { StatCard } from "../../components/stat-card";
+import { ActivityChart } from "../../components/activity-chart";
+import { LootdropCard } from "../../components/lootdrop-card";
+import { LeaderboardCard } from "../../components/leaderboard-card";
+import { RecentActivity } from "../../components/recent-activity";
+import { CommandsDrawer } from "../../components/commands-drawer";
+import { Server, Users, Terminal, Activity, Coins, TrendingUp, Flame, Package } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+export function AdminOverview() {
+    const { isConnected, stats } = useSocket();
+    const [commandsDrawerOpen, setCommandsDrawerOpen] = useState(false);
+
+    return (
+        <>
+        <main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
+            <SectionHeader
+                badge="Admin Dashboard"
+                title="Overview"
+                description="Monitor your Aurora RPG server statistics and activity."
+            />
+
+            {/* Stats Grid */}
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 animate-in fade-in slide-up duration-700">
+                <StatCard
+                    title="Total Servers"
+                    icon={Server}
+                    isLoading={!stats}
+                    value={stats?.guilds.count.toLocaleString()}
+                    subtitle={stats?.guilds.changeFromLastMonth
+                        ? `${stats.guilds.changeFromLastMonth > 0 ? '+' : ''}${stats.guilds.changeFromLastMonth} from last month`
+                        : "Active Guilds"
+                    }
+                />
+
+                <StatCard
+                    title="Total Users"
+                    icon={Users}
+                    isLoading={!stats}
+                    value={stats?.users.total.toLocaleString()}
+                    subtitle={stats ? `${stats.users.active.toLocaleString()} active now` : undefined}
+                    className="delay-100"
+                />
+
+                <StatCard
+                    title="Commands"
+                    icon={Terminal}
+                    isLoading={!stats}
+                    value={stats?.commands.total.toLocaleString()}
+                    subtitle={stats ? `${stats.commands.active} active · ${stats.commands.disabled} disabled` : undefined}
+                    className="delay-200"
+                    onClick={() => setCommandsDrawerOpen(true)}
+                />
+
+                <StatCard
+                    title="System Ping"
+                    icon={Activity}
+                    isLoading={!stats}
+                    value={stats ? `${Math.round(stats.ping.avg)}ms` : undefined}
+                    subtitle="Average latency"
+                    className="delay-300"
+                    valueClassName={stats ? cn(
+                        "transition-colors duration-300",
+                        stats.ping.avg < 100 ? "text-emerald-500" :
+                            stats.ping.avg < 200 ? "text-yellow-500" : "text-red-500"
+                    ) : undefined}
+                />
+            </div>
+
+            {/* Activity Chart */}
+            <div className="animate-in fade-in slide-up delay-400">
+                <ActivityChart />
+            </div>
+
+            <div className="grid gap-8 lg:grid-cols-3 animate-in fade-in slide-up delay-500">
+                {/* Economy Stats */}
+                <div className="lg:col-span-2 space-y-6">
+                    <div>
+                        <h2 className="text-xl font-semibold tracking-tight mb-4">Economy Overview</h2>
+                        <div className="grid gap-4 md:grid-cols-2">
+                            <StatCard
+                                title="Total Wealth"
+                                icon={Coins}
+                                isLoading={!stats}
+                                value={stats ? `${Number(stats.economy.totalWealth).toLocaleString()} AU` : undefined}
+                                subtitle="Astral Units in circulation"
+                                valueClassName="text-primary"
+                                iconClassName="text-primary"
+                            />
+
+                            <StatCard
+                                title="Items Circulating"
+                                icon={Package}
+                                isLoading={!stats}
+                                value={stats?.economy.totalItems?.toLocaleString()}
+                                subtitle="Total items owned by users"
+                                className="delay-75"
+                                valueClassName="text-blue-500"
+                                iconClassName="text-blue-500"
+                            />
+
+                            <StatCard
+                                title="Average Level"
+                                icon={TrendingUp}
+                                isLoading={!stats}
+                                value={stats ? `Lvl ${stats.economy.avgLevel}` : undefined}
+                                subtitle="Global player average"
+                                className="delay-100"
+                                valueClassName="text-secondary"
+                                iconClassName="text-secondary"
+                            />
+
+                            <StatCard
+                                title="Top /daily Streak"
+                                icon={Flame}
+                                isLoading={!stats}
+                                value={stats?.economy.topStreak}
+                                subtitle="Days daily streak"
+                                className="delay-200"
+                                valueClassName="text-destructive"
+                                iconClassName="text-destructive"
+                            />
+                        </div>
+                    </div>
+
+                    <LeaderboardCard
+                        data={stats?.leaderboards}
+                        isLoading={!stats}
+                        className="w-full"
+                    />
+                </div>
+
+                {/* Recent Activity & Lootdrops */}
+                <div className="space-y-6">
+                    <LootdropCard
+                        drop={stats?.activeLootdrops?.[0]}
+                        state={stats?.lootdropState}
+                        isLoading={!stats}
+                    />
+                    <div className="h-[calc(100%-12rem)] min-h-[400px]">
+                        <h2 className="text-xl font-semibold tracking-tight mb-4">Live Feed</h2>
+                        <RecentActivity
+                            events={stats?.recentEvents || []}
+                            isLoading={!stats}
+                            className="h-full"
+                        />
+                    </div>
+                </div>
+            </div>
+        </main>
+        
+        {/* Commands Drawer */}
+        <CommandsDrawer 
+            open={commandsDrawerOpen} 
+            onOpenChange={setCommandsDrawerOpen}
+        />
+        </>
+    );
+}
+
+export default AdminOverview;
diff --git a/web/src/pages/settings/Economy.tsx b/web/src/pages/settings/Economy.tsx
new file mode 100644
index 0000000..db7dda6
--- /dev/null
+++ b/web/src/pages/settings/Economy.tsx
@@ -0,0 +1,290 @@
+import React from "react";
+import { useSettingsForm } from "./SettingsLayout";
+import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Users, Backpack, Sparkles, CreditCard, MessageSquare } from "lucide-react";
+
+export function EconomySettings() {
+    const { form } = useSettingsForm();
+
+    return (
+        <div className="space-y-6 animate-in fade-in slide-up duration-500">
+            <Accordion type="multiple" className="w-full space-y-4" defaultValue={["daily", "inventory"]}>
+                <AccordionItem value="daily" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-yellow-500/10 flex items-center justify-center text-yellow-500">
+                                <Users className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Daily Rewards</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="economy.daily.amount"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Base Amount</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="text" className="bg-background/50" placeholder="100" />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">Reward (AU)</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="economy.daily.streakBonus"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Streak Bonus</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="text" className="bg-background/50" placeholder="10" />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">Bonus/day</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="economy.daily.weeklyBonus"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Weekly Bonus</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="text" className="bg-background/50" placeholder="50" />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">7-day bonus</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="economy.daily.cooldownMs"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Cooldown (ms)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="inventory" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center text-orange-500">
+                                <Backpack className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Inventory</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="inventory.maxStackSize"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Max Stack Size</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="text" className="bg-background/50" />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="inventory.maxSlots"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Max Slots</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="leveling" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
+                                <Sparkles className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Leveling & XP</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="leveling.base"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Base XP</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="leveling.exponent"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Exponent</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <div className="bg-muted/30 p-4 rounded-lg space-y-3">
+                            <h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
+                                <MessageSquare className="w-3 h-3" /> Chat XP
+                            </h4>
+                            <div className="grid grid-cols-3 gap-4">
+                                <FormField
+                                    control={form.control}
+                                    name="leveling.chat.minXp"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Min</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="leveling.chat.maxXp"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Max</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="leveling.chat.cooldownMs"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Cooldown</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="transfers" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center text-green-500">
+                                <CreditCard className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Transfers</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <FormField
+                            control={form.control}
+                            name="economy.transfers.allowSelfTransfer"
+                            render={({ field }) => (
+                                <FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
+                                    <div className="space-y-0.5">
+                                        <FormLabel className="text-sm font-medium">Allow Self-Transfer</FormLabel>
+                                        <FormDescription className="text-xs">
+                                            Permit users to transfer currency to themselves.
+                                        </FormDescription>
+                                    </div>
+                                    <FormControl>
+                                        <Switch
+                                            checked={field.value}
+                                            onCheckedChange={field.onChange}
+                                        />
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="economy.transfers.minAmount"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Minimum Transfer Amount</FormLabel>
+                                    <FormControl>
+                                        <Input {...field} type="text" placeholder="1" className="bg-background/50" />
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="exam" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-500">
+                                <Sparkles className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Exams</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="economy.exam.multMin"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Min Multiplier</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="economy.exam.multMax"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Max Multiplier</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
+        </div>
+    );
+}
diff --git a/web/src/pages/settings/General.tsx b/web/src/pages/settings/General.tsx
new file mode 100644
index 0000000..a5905d6
--- /dev/null
+++ b/web/src/pages/settings/General.tsx
@@ -0,0 +1,149 @@
+import React from "react";
+import { useSettingsForm } from "./SettingsLayout";
+import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { MessageSquare, Terminal } from "lucide-react";
+import { fromSelectValue, toSelectValue, NONE_VALUE } from "@/hooks/use-settings";
+
+export function GeneralSettings() {
+    const { form, meta } = useSettingsForm();
+
+    return (
+        <div className="space-y-8 animate-in fade-in slide-up duration-500">
+            <div className="space-y-4">
+                <div className="flex items-center gap-2 mb-4">
+                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
+                        <MessageSquare className="w-3 h-3 mr-1" /> Onboarding
+                    </Badge>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <FormField
+                        control={form.control}
+                        name="welcomeChannelId"
+                        render={({ field }) => (
+                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
+                                <FormLabel className="text-foreground/80">Welcome Channel</FormLabel>
+                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                    <FormControl>
+                                        <SelectTrigger className="bg-background/50 border-border/50">
+                                            <SelectValue placeholder="Select a channel" />
+                                        </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                        <SelectItem value={NONE_VALUE}>None</SelectItem>
+                                        {meta?.channels
+                                            .filter(c => c.type === 0)
+                                            .map(c => (
+                                                <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
+                                            ))}
+                                    </SelectContent>
+                                </Select>
+                                <FormDescription>Where to send welcome messages.</FormDescription>
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="welcomeMessage"
+                        render={({ field }) => (
+                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
+                                <FormLabel className="text-foreground/80">Welcome Message Template</FormLabel>
+                                <FormControl>
+                                    <Textarea
+                                        {...field}
+                                        value={field.value || ""}
+                                        placeholder="Welcome {user}!"
+                                        className="min-h-[100px] font-mono text-xs bg-background/50 border-border/50 focus:border-primary/50 focus:ring-primary/20 resize-none"
+                                    />
+                                </FormControl>
+                                <FormDescription>Available variables: {"{user}"}, {"{count}"}.</FormDescription>
+                            </FormItem>
+                        )}
+                    />
+                </div>
+            </div>
+
+            <div className="space-y-4">
+                <div className="flex items-center gap-2 mb-4">
+                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
+                        Channels & Features
+                    </Badge>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <FormField
+                        control={form.control}
+                        name="feedbackChannelId"
+                        render={({ field }) => (
+                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
+                                <FormLabel className="text-foreground/80">Feedback Channel</FormLabel>
+                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                    <FormControl>
+                                        <SelectTrigger className="bg-background/50 border-border/50">
+                                            <SelectValue placeholder="Select a channel" />
+                                        </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                        <SelectItem value={NONE_VALUE}>None</SelectItem>
+                                        {meta?.channels.filter(c => c.type === 0).map(c => (
+                                            <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <FormDescription>Where user feedback is sent.</FormDescription>
+                            </FormItem>
+                        )}
+                    />
+
+                    <div className="glass-card p-5 rounded-xl border border-border/50 space-y-4">
+                        <div className="flex items-center gap-2 mb-2">
+                            <Terminal className="w-4 h-4 text-muted-foreground" />
+                            <h4 className="font-medium text-sm">Terminal Embed</h4>
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="terminal.channelId"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Channel</FormLabel>
+                                        <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                            <FormControl>
+                                                <SelectTrigger className="bg-background/50 border-border/50 h-9 text-xs">
+                                                    <SelectValue placeholder="Select channel" />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent>
+                                                <SelectItem value={NONE_VALUE}>None</SelectItem>
+                                                {meta?.channels.filter(c => c.type === 0).map(c => (
+                                                    <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="terminal.messageId"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Message ID</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} value={field.value || ""} placeholder="Message ID" className="font-mono text-xs bg-background/50 border-border/50 h-9" />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/web/src/pages/settings/Roles.tsx b/web/src/pages/settings/Roles.tsx
new file mode 100644
index 0000000..d00fade
--- /dev/null
+++ b/web/src/pages/settings/Roles.tsx
@@ -0,0 +1,141 @@
+import React from "react";
+import { useSettingsForm } from "./SettingsLayout";
+import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { Palette, Users } from "lucide-react";
+import { fromSelectValue, toSelectValue } from "@/hooks/use-settings";
+
+export function RolesSettings() {
+    const { form, meta } = useSettingsForm();
+
+    return (
+        <div className="space-y-8 animate-in fade-in slide-up duration-500">
+            <div className="space-y-4">
+                <div className="flex items-center gap-2 mb-4">
+                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
+                        <Users className="w-3 h-3 mr-1" /> System Roles
+                    </Badge>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <FormField
+                        control={form.control}
+                        name="studentRole"
+                        render={({ field }) => (
+                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
+                                <FormLabel className="font-bold">Student Role</FormLabel>
+                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                    <FormControl>
+                                        <SelectTrigger className="bg-background/50">
+                                            <SelectValue placeholder="Select role" />
+                                        </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                        {meta?.roles.map(r => (
+                                            <SelectItem key={r.id} value={r.id}>
+                                                <span className="flex items-center gap-2">
+                                                    <span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
+                                                    {r.name}
+                                                </span>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <FormDescription className="text-xs">Default role for new members/students.</FormDescription>
+                            </FormItem>
+                        )}
+                    />
+                    <FormField
+                        control={form.control}
+                        name="visitorRole"
+                        render={({ field }) => (
+                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
+                                <FormLabel className="font-bold">Visitor Role</FormLabel>
+                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                    <FormControl>
+                                        <SelectTrigger className="bg-background/50">
+                                            <SelectValue placeholder="Select role" />
+                                        </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                        {meta?.roles.map(r => (
+                                            <SelectItem key={r.id} value={r.id}>
+                                                <span className="flex items-center gap-2">
+                                                    <span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
+                                                    {r.name}
+                                                </span>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <FormDescription className="text-xs">Role for visitors/guests.</FormDescription>
+                            </FormItem>
+                        )}
+                    />
+                </div>
+            </div>
+
+            <div className="space-y-4">
+                <div className="flex items-center gap-2 mb-4">
+                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
+                        <Palette className="w-3 h-3 mr-1" /> Color Roles
+                    </Badge>
+                </div>
+
+                <div className="glass-card p-6 rounded-xl border border-border/50 bg-card/30">
+                    <div className="mb-4">
+                        <FormDescription className="text-sm">
+                            Select roles that users can choose from to set their name color in the bot.
+                        </FormDescription>
+                    </div>
+                    <ScrollArea className="h-[400px] pr-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+                            {meta?.roles.map((role) => (
+                                <FormField
+                                    key={role.id}
+                                    control={form.control}
+                                    name="colorRoles"
+                                    render={({ field }) => {
+                                        const isSelected = field.value?.includes(role.id);
+                                        return (
+                                            <FormItem
+                                                key={role.id}
+                                                className={`flex flex-row items-center space-x-3 space-y-0 p-3 rounded-lg border transition-all cursor-pointer ${
+                                                    isSelected 
+                                                        ? 'bg-primary/10 border-primary/30 ring-1 ring-primary/20' 
+                                                        : 'hover:bg-muted/50 border-transparent'
+                                                }`}
+                                            >
+                                                <FormControl>
+                                                    <Switch
+                                                        checked={isSelected}
+                                                        onCheckedChange={(checked) => {
+                                                            return checked
+                                                                ? field.onChange([...(field.value || []), role.id])
+                                                                : field.onChange(
+                                                                    field.value?.filter(
+                                                                        (value: string) => value !== role.id
+                                                                    )
+                                                                )
+                                                        }}
+                                                    />
+                                                </FormControl>
+                                                <FormLabel className="font-medium flex items-center gap-2 cursor-pointer w-full text-foreground text-sm">
+                                                    <span className="w-3 h-3 rounded-full shadow-sm" style={{ background: role.color }} />
+                                                    {role.name}
+                                                </FormLabel>
+                                            </FormItem>
+                                        )
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    </ScrollArea>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/web/src/pages/settings/SettingsLayout.tsx b/web/src/pages/settings/SettingsLayout.tsx
new file mode 100644
index 0000000..9b3eb7a
--- /dev/null
+++ b/web/src/pages/settings/SettingsLayout.tsx
@@ -0,0 +1,65 @@
+import React, { createContext, useContext } from "react";
+import { Outlet } from "react-router-dom";
+import { useSettings, type FormValues, type ConfigMeta } from "@/hooks/use-settings";
+import { Form } from "@/components/ui/form";
+import { SectionHeader } from "@/components/section-header";
+import { Button } from "@/components/ui/button";
+import { Save, Loader2 } from "lucide-react";
+
+interface SettingsContextType {
+    form: ReturnType<typeof useSettings>["form"];
+    meta: ConfigMeta | null;
+}
+
+const SettingsContext = createContext<SettingsContextType | null>(null);
+
+export const useSettingsForm = () => {
+    const context = useContext(SettingsContext);
+    if (!context) throw new Error("useSettingsForm must be used within SettingsLayout");
+    return context;
+};
+
+export function SettingsLayout() {
+    const { form, meta, loading, isSaving, saveSettings } = useSettings();
+
+    if (loading) {
+        return (
+            <div className="flex-1 flex items-center justify-center flex-col gap-4 min-h-[400px]">
+                <Loader2 className="w-10 h-10 animate-spin text-primary" />
+                <p className="text-muted-foreground animate-pulse">Loading configuration...</p>
+            </div>
+        );
+    }
+
+    return (
+        <SettingsContext.Provider value={{ form, meta }}>
+            <main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
+            <div className="flex justify-between items-end">
+                <SectionHeader
+                    badge="System"
+                    title="Configuration"
+                    description="Manage bot behavior, economy, and game systems."
+                />
+                <Button 
+                    onClick={form.handleSubmit(saveSettings)} 
+                    disabled={isSaving || !form.formState.isDirty}
+                    className="shadow-lg hover:shadow-primary/20 transition-all font-bold min-w-[140px]"
+                >
+                    {isSaving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
+                    Save Changes
+                </Button>
+            </div>
+
+            <div className="glass-card rounded-2xl border border-border/50 overflow-hidden">
+                <Form {...form}>
+                    <form className="flex flex-col h-full">
+                        <div className="p-8">
+                            <Outlet />
+                        </div>
+                    </form>
+                </Form>
+            </div>
+            </main>
+        </SettingsContext.Provider>
+    );
+}
diff --git a/web/src/pages/settings/Systems.tsx b/web/src/pages/settings/Systems.tsx
new file mode 100644
index 0000000..9faeed5
--- /dev/null
+++ b/web/src/pages/settings/Systems.tsx
@@ -0,0 +1,338 @@
+import React from "react";
+import { useSettingsForm } from "./SettingsLayout";
+import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { CreditCard, Shield } from "lucide-react";
+import { fromSelectValue, toSelectValue, NONE_VALUE } from "@/hooks/use-settings";
+
+export function SystemsSettings() {
+    const { form, meta } = useSettingsForm();
+
+    return (
+        <div className="space-y-6 animate-in fade-in slide-up duration-500">
+            <Accordion type="multiple" className="w-full space-y-4" defaultValue={["lootdrop", "moderation"]}>
+                <AccordionItem value="lootdrop" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-500">
+                                <CreditCard className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Loot Drops</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="lootdrop.spawnChance"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Spawn Chance (0-1)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" step="0.01" min="0" max="1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="lootdrop.minMessages"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Min Messages</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <div className="bg-muted/30 p-4 rounded-lg space-y-3">
+                            <h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Rewards</h4>
+                            <div className="grid grid-cols-3 gap-4">
+                                <FormField
+                                    control={form.control}
+                                    name="lootdrop.reward.min"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Min</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="lootdrop.reward.max"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Max</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="lootdrop.reward.currency"
+                                    render={({ field }) => (
+                                        <FormItem className="space-y-1">
+                                            <FormLabel className="text-xs">Currency</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} placeholder="AU" className="h-9 text-sm" />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="lootdrop.cooldownMs"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Cooldown (ms)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="lootdrop.activityWindowMs"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Activity Window (ms)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="trivia" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500 text-sm">
+                                🎯
+                            </div>
+                            <span className="font-bold">Trivia</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-4 pb-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="trivia.entryFee"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Entry Fee (AU)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="text" className="bg-background/50" placeholder="50" />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">Cost to play</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="trivia.rewardMultiplier"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Reward Multiplier</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">multiplier</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="trivia.timeoutSeconds"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Timeout (seconds)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                            <FormField
+                                control={form.control}
+                                name="trivia.cooldownMs"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Cooldown (ms)</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                        <FormField
+                            control={form.control}
+                            name="trivia.difficulty"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Difficulty</FormLabel>
+                                    <Select onValueChange={field.onChange} value={field.value}>
+                                        <FormControl>
+                                            <SelectTrigger className="bg-background/50">
+                                                <SelectValue placeholder="Select difficulty" />
+                                            </SelectTrigger>
+                                        </FormControl>
+                                        <SelectContent>
+                                            <SelectItem value="easy">Easy</SelectItem>
+                                            <SelectItem value="medium">Medium</SelectItem>
+                                            <SelectItem value="hard">Hard</SelectItem>
+                                            <SelectItem value="random">Random</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </FormItem>
+                            )}
+                        />
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="moderation" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
+                    <AccordionTrigger className="hover:no-underline py-4">
+                        <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center text-red-500">
+                                <Shield className="w-4 h-4" />
+                            </div>
+                            <span className="font-bold">Moderation</span>
+                        </div>
+                    </AccordionTrigger>
+                    <AccordionContent className="space-y-6 pb-4">
+                        <div className="space-y-4">
+                            <h4 className="font-bold text-sm text-foreground/80 uppercase tracking-wider">Case Management</h4>
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.cases.dmOnWarn"
+                                    render={({ field }) => (
+                                        <FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
+                                            <div className="space-y-0.5">
+                                                <FormLabel className="text-sm font-medium">DM on Warm</FormLabel>
+                                                <FormDescription className="text-xs">Notify via DM</FormDescription>
+                                            </div>
+                                            <FormControl>
+                                                <Switch checked={field.value} onCheckedChange={field.onChange} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.cases.logChannelId"
+                                    render={({ field }) => (
+                                        <FormItem className="glass-card p-4 rounded-xl border border-border/50">
+                                            <FormLabel className="text-sm">Log Channel</FormLabel>
+                                            <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
+                                                <FormControl>
+                                                    <SelectTrigger className="bg-background/50 h-9">
+                                                        <SelectValue placeholder="Select a channel" />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    <SelectItem value={NONE_VALUE}>None</SelectItem>
+                                                    {meta?.channels.filter(c => c.type === 0).map(c => (
+                                                        <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                            <FormField
+                                control={form.control}
+                                name="moderation.cases.autoTimeoutThreshold"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Auto Timeout Threshold</FormLabel>
+                                        <FormControl>
+                                            <Input {...field} type="number" min="0" className="bg-background/50" onChange={e => field.onChange(e.target.value ? Number(e.target.value) : undefined)} />
+                                        </FormControl>
+                                        <FormDescription className="text-xs">Warnings before auto-timeout.</FormDescription>
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <div className="space-y-4">
+                            <h4 className="font-bold text-sm text-foreground/80 uppercase tracking-wider">Message Pruning</h4>
+                            <div className="grid grid-cols-2 gap-4">
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.prune.maxAmount"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel className="text-xs">Max Amount</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.prune.confirmThreshold"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel className="text-xs">Confirm Threshold</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.prune.batchSize"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel className="text-xs">Batch Size</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="moderation.prune.batchDelayMs"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel className="text-xs">Batch Delay (ms)</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
+        </div>
+    );
+}
diff --git a/web/src/server.ts b/web/src/server.ts
index 298346e..70741a6 100644
--- a/web/src/server.ts
+++ b/web/src/server.ts
@@ -416,7 +416,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
         };
 
         const clientStats = unwrap(results[0], {
-            bot: { name: 'Aurora', avatarUrl: null },
+            bot: { name: 'Aurora', avatarUrl: null, status: null },
             guilds: 0,
             commandsRegistered: 0,
             commandsKnown: 0,
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 4ebab3d..f398d18 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -277,4 +277,38 @@
   .delay-500 {
     animation-delay: 500ms;
   }
+
+  /* Sidebar collapsed state - center icons */
+  [data-state="collapsed"] [data-sidebar="header"],
+  [data-state="collapsed"] [data-sidebar="footer"] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  [data-state="collapsed"] [data-sidebar="content"] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  [data-state="collapsed"] [data-sidebar="group"] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    align-items: center !important;
+  }
+
+  [data-state="collapsed"] [data-sidebar="menu"] {
+    align-items: center !important;
+    width: 100% !important;
+  }
+
+  [data-state="collapsed"] [data-sidebar="menu-item"] {
+    display: flex !important;
+    justify-content: center !important;
+    width: 100% !important;
+  }
+
+  [data-state="collapsed"] [data-sidebar="menu-button"] {
+    justify-content: center !important;
+    gap: 0 !important;
+  }
 }
\ No newline at end of file

From f2caa1a3ee1a3d3007326ad3441b613bbccd9cea Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 12:59:32 +0100
Subject: [PATCH 17/32] chore: replace tw-gradient classes with canonical
 shortened -linear classnames

---
 web/src/pages/DesignSystem.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/DesignSystem.tsx b/web/src/pages/DesignSystem.tsx
index c72bb66..dc082b4 100644
--- a/web/src/pages/DesignSystem.tsx
+++ b/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">

From 47ce0f12e601716b9614a1d77c33f421da9c0a71 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 13:18:54 +0100
Subject: [PATCH 18/32] chore: remove old documentation.

---
 shared/docs/COMMANDS.md         |  63 -------------
 shared/docs/CONFIGURATION.md    | 160 --------------------------------
 shared/docs/DATABASE.md         | 149 -----------------------------
 shared/docs/LOOTBOX_GUIDE.md    | 127 -------------------------
 shared/docs/MODULE_STRUCTURE.md |  72 --------------
 5 files changed, 571 deletions(-)
 delete mode 100644 shared/docs/COMMANDS.md
 delete mode 100644 shared/docs/CONFIGURATION.md
 delete mode 100644 shared/docs/DATABASE.md
 delete mode 100644 shared/docs/LOOTBOX_GUIDE.md
 delete mode 100644 shared/docs/MODULE_STRUCTURE.md

diff --git a/shared/docs/COMMANDS.md b/shared/docs/COMMANDS.md
deleted file mode 100644
index 11eaae9..0000000
--- a/shared/docs/COMMANDS.md
+++ /dev/null
@@ -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'. |
diff --git a/shared/docs/CONFIGURATION.md b/shared/docs/CONFIGURATION.md
deleted file mode 100644
index 418a3bc..0000000
--- a/shared/docs/CONFIGURATION.md
+++ /dev/null
@@ -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.
diff --git a/shared/docs/DATABASE.md b/shared/docs/DATABASE.md
deleted file mode 100644
index f3ed4b6..0000000
--- a/shared/docs/DATABASE.md
+++ /dev/null
@@ -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. |
diff --git a/shared/docs/LOOTBOX_GUIDE.md b/shared/docs/LOOTBOX_GUIDE.md
deleted file mode 100644
index fd986c4..0000000
--- a/shared/docs/LOOTBOX_GUIDE.md
+++ /dev/null
@@ -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..."
-        }
-      ]
-    }
-  ]
-}
-```
diff --git a/shared/docs/MODULE_STRUCTURE.md b/shared/docs/MODULE_STRUCTURE.md
deleted file mode 100644
index 6ed32ea..0000000
--- a/shared/docs/MODULE_STRUCTURE.md
+++ /dev/null
@@ -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`.

From d243a11bd3a0b3ab6a5c6e3c15c003cdec6718b8 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 13:34:35 +0100
Subject: [PATCH 19/32] feat: (docs) add main.md

---
 docs/main.md | 168 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 168 insertions(+)
 create mode 100644 docs/main.md

diff --git a/docs/main.md b/docs/main.md
new file mode 100644
index 0000000..d702d54
--- /dev/null
+++ b/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`.

From 3ef977399099a45c4b4799ca181f53816d6dd3ad Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 15:12:41 +0100
Subject: [PATCH 20/32] feat: (web) add quest table component for admin quests
 page

- Add getAllQuests() method to quest.service.ts
- Add GET /api/quests endpoint to server.ts
- Create QuestTable component with data display, formatting, and states
- Update AdminQuests.tsx to fetch and display quests above the form
- Add onSuccess callback to QuestForm for refresh handling
---
 shared/modules/quest/quest.service.ts |   6 +
 web/src/components/quest-form.tsx     |   3 +-
 web/src/components/quest-table.tsx    | 273 ++++++++++++++++++++++++++
 web/src/pages/AdminQuests.tsx         |  72 ++++++-
 web/src/server.ts                     |  25 +++
 5 files changed, 377 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/quest-table.tsx

diff --git a/shared/modules/quest/quest.service.ts b/shared/modules/quest/quest.service.ts
index 72ec622..bcc8048 100644
--- a/shared/modules/quest/quest.service.ts
+++ b/shared/modules/quest/quest.service.ts
@@ -162,5 +162,11 @@ export const questService = {
                 })
                 .returning();
         }, tx);
+    },
+
+    async getAllQuests() {
+        return await DrizzleClient.query.quests.findMany({
+            orderBy: (quests, { asc }) => [asc(quests.id)],
+        });
     }
 };
diff --git a/web/src/components/quest-form.tsx b/web/src/components/quest-form.tsx
index 3cfbed1..9799a59 100644
--- a/web/src/components/quest-form.tsx
+++ b/web/src/components/quest-form.tsx
@@ -39,7 +39,7 @@ const TRIGGER_EVENTS = [
     { label: "Trivia Win", value: "TRIVIA_WIN" },
 ];
 
-export function QuestForm() {
+export function QuestForm({ onSuccess }: { onSuccess?: () => void }) {
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const form = useForm<QuestFormValues>({
         resolver: zodResolver(questSchema),
@@ -73,6 +73,7 @@ export function QuestForm() {
                 description: `${data.name} has been added to the database.`,
             });
             form.reset();
+            onSuccess?.();
         } catch (error) {
             console.error("Submission error:", error);
             toast.error("Failed to create quest", {
diff --git a/web/src/components/quest-table.tsx b/web/src/components/quest-table.tsx
new file mode 100644
index 0000000..42dced3
--- /dev/null
+++ b/web/src/components/quest-table.tsx
@@ -0,0 +1,273 @@
+import React from "react";
+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";
+
+interface QuestListItem {
+    id: number;
+    name: string;
+    description: string | null;
+    triggerEvent: string;
+    requirements: { target?: number };
+    rewards: { xp?: number; balance?: number };
+}
+
+interface QuestTableProps {
+    quests: QuestListItem[];
+    isLoading: boolean;
+    onRefresh?: () => 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 formatQuestRewards(rewards: { xp?: number; balance?: number }): string {
+    const parts: string[] = [];
+    if (rewards?.xp) parts.push(`${rewards.xp} ⭐`);
+    if (rewards?.balance) parts.push(`${rewards.balance} 🪙`);
+    return parts.join(" • ") || "None";
+}
+
+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">
+            <div className="grid grid-cols-7 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-7 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" />
+                </div>
+            ))}
+        </div>
+    );
+}
+
+function EmptyQuestState() {
+    return (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+            <div className="rounded-full bg-muted/50 p-4 mb-4">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="32"
+                    height="32"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="text-muted-foreground"
+                >
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                    <polyline points="14 2 14 8 20 8" />
+                    <line x1="16" y1="13" x2="8" y2="13" />
+                    <line x1="16" y1="17" x2="8" y2="17" />
+                    <polyline points="10 9 9 9 8 9" />
+                </svg>
+            </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>
+    );
+}
+
+export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
+    if (isLoading) {
+        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>
+                        <Badge variant="secondary" className="animate-pulse">
+                            Loading...
+                        </Badge>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <QuestTableSkeleton />
+                </CardContent>
+            </Card>
+        );
+    }
+
+    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">
+                        <Badge variant="outline" className="border-border/50">
+                            {quests.length} quest{quests.length !== 1 ? "s" : ""}
+                        </Badge>
+                        <button
+                            onClick={onRefresh}
+                            className="p-2 rounded-md hover:bg-muted/50 transition-colors"
+                            title="Refresh quests"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="18"
+                                height="18"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className={cn("text-muted-foreground", isLoading && "animate-spin")}
+                            >
+                                <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                                <path d="M3 3v5h5" />
+                                <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+                                <path d="M16 21h5v-5" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </CardHeader>
+            <CardContent>
+                {quests.length === 0 ? (
+                    <EmptyQuestState />
+                ) : (
+                    <div className="overflow-x-auto">
+                        <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>
+                                </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}
+                                            className="border-b border-border/30 hover:bg-muted/20 transition-colors"
+                                        >
+                                            <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">
+                                                        <span>⭐</span>
+                                                        <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">
+                                                        <span>🪙</span>
+                                                        <span className="font-mono">{rewards.balance}</span>
+                                                    </span>
+                                                ) : (
+                                                    <span className="text-muted-foreground">-</span>
+                                                )}
+                                            </td>
+                                        </tr>
+                                    );
+                                })}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+    );
+}
diff --git a/web/src/pages/AdminQuests.tsx b/web/src/pages/AdminQuests.tsx
index a5330c2..ca93bbe 100644
--- a/web/src/pages/AdminQuests.tsx
+++ b/web/src/pages/AdminQuests.tsx
@@ -1,8 +1,70 @@
 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 [isLoading, setIsLoading] = React.useState(true);
+    const [refreshKey, setRefreshKey] = React.useState(0);
+    const [lastCreatedQuestId, setLastCreatedQuestId] = React.useState<number | null>(null);
+
+    const fetchQuests = React.useCallback(async () => {
+        setIsLoading(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 {
+            setIsLoading(false);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        fetchQuests();
+    }, [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();
+        toast.success("Quest list updated", {
+            description: "The quest inventory has been refreshed.",
+        });
+    };
+
     return (
         <main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-12">
             <SectionHeader
@@ -11,8 +73,16 @@ export function AdminQuests() {
                 description="Create and manage quests for the Aurora RPG students."
             />
 
+            <div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
+                <QuestTable
+                    quests={quests}
+                    isLoading={isLoading}
+                    onRefresh={fetchQuests}
+                />
+            </div>
+
             <div className="animate-in fade-in slide-up duration-700">
-                <QuestForm />
+                <QuestForm onSuccess={handleQuestCreated} />
             </div>
         </main>
     );
diff --git a/web/src/server.ts b/web/src/server.ts
index 70741a6..9da3982 100644
--- a/web/src/server.ts
+++ b/web/src/server.ts
@@ -197,6 +197,31 @@ 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 }
+                    );
+                }
+            }
+
             // Settings Management
             if (url.pathname === "/api/settings") {
                 try {

From 94e332ba57d30f453f4891e9c653997a898b319d Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 15:16:48 +0100
Subject: [PATCH 21/32] fix: (web) improve quest table refresh UX

- Keep card visible during refresh to prevent flicker
- Add smooth animations when content loads
- Spin refresh icon independently from skeleton
- Show skeleton in place without replacing entire card
---
 web/src/components/quest-table.tsx | 251 ++++++++++++++++-------------
 1 file changed, 136 insertions(+), 115 deletions(-)

diff --git a/web/src/components/quest-table.tsx b/web/src/components/quest-table.tsx
index 42dced3..9964a33 100644
--- a/web/src/components/quest-table.tsx
+++ b/web/src/components/quest-table.tsx
@@ -37,13 +37,6 @@ const TRIGGER_EVENT_LABELS: Record<string, string> = {
     TRIVIA_WIN: "Trivia Win",
 };
 
-function formatQuestRewards(rewards: { xp?: number; balance?: number }): string {
-    const parts: string[] = [];
-    if (rewards?.xp) parts.push(`${rewards.xp} ⭐`);
-    if (rewards?.balance) parts.push(`${rewards.balance} 🪙`);
-    return parts.join(" • ") || "None";
-}
-
 function getTriggerEventLabel(triggerEvent: string): string {
     return TRIGGER_EVENT_LABELS[triggerEvent] || triggerEvent;
 }
@@ -71,7 +64,7 @@ function TruncatedText({ text, maxLength = 100 }: { text: string; maxLength?: nu
 
 function QuestTableSkeleton() {
     return (
-        <div className="space-y-3">
+        <div className="space-y-3 animate-pulse">
             <div className="grid grid-cols-7 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" />
@@ -98,7 +91,7 @@ function QuestTableSkeleton() {
 
 function EmptyQuestState() {
     return (
-        <div className="flex flex-col items-center justify-center py-12 text-center">
+        <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">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -127,37 +120,142 @@ function EmptyQuestState() {
     );
 }
 
-export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
-    if (isLoading) {
-        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>
-                        <Badge variant="secondary" className="animate-pulse">
-                            Loading...
-                        </Badge>
-                    </div>
-                </CardHeader>
-                <CardContent>
-                    <QuestTableSkeleton />
-                </CardContent>
-            </Card>
-        );
+function QuestTableContent({ quests }: { quests: QuestListItem[] }) {
+    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>
+                    </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">
+                                            <span>⭐</span>
+                                            <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">
+                                            <span>🪙</span>
+                                            <span className="font-mono">{rewards.balance}</span>
+                                        </span>
+                                    ) : (
+                                        <span className="text-muted-foreground">-</span>
+                                    )}
+                                </td>
+                            </tr>
+                        );
+                    })}
+                </tbody>
+            </table>
+        </div>
+    );
+}
+
+export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
+    const [isRefreshing, setIsRefreshing] = React.useState(false);
+    const previousQuestsRef = React.useRef<QuestListItem[]>(quests);
+    const [displayQuests, setDisplayQuests] = React.useState<QuestListItem[]>(quests);
+
+    React.useEffect(() => {
+        if (isLoading) {
+            setIsRefreshing(true);
+        } else {
+            setIsRefreshing(false);
+            previousQuestsRef.current = quests;
+            if (quests.length !== previousQuestsRef.current.length || 
+                JSON.stringify(quests) !== JSON.stringify(previousQuestsRef.current)) {
+                setDisplayQuests(quests);
+            }
+        }
+    }, [isLoading, quests]);
+
+    const handleRefresh = async () => {
+        setIsRefreshing(true);
+        onRefresh?.();
+    };
+
     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">
-                        <Badge variant="outline" className="border-border/50">
-                            {quests.length} quest{quests.length !== 1 ? "s" : ""}
-                        </Badge>
+                        {isLoading ? (
+                            <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}
-                            className="p-2 rounded-md hover:bg-muted/50 transition-colors"
+                            onClick={handleRefresh}
+                            disabled={isRefreshing}
+                            className={cn(
+                                "p-2 rounded-md hover:bg-muted/50 transition-colors",
+                                isRefreshing && "cursor-wait"
+                            )}
                             title="Refresh quests"
                         >
                             <svg
@@ -170,7 +268,10 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
                                 strokeWidth="2"
                                 strokeLinecap="round"
                                 strokeLinejoin="round"
-                                className={cn("text-muted-foreground", isLoading && "animate-spin")}
+                                className={cn(
+                                    "text-muted-foreground transition-transform",
+                                    isRefreshing && "animate-spin"
+                                )}
                             >
                                 <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
                                 <path d="M3 3v5h5" />
@@ -182,90 +283,10 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
                 </div>
             </CardHeader>
             <CardContent>
-                {quests.length === 0 ? (
-                    <EmptyQuestState />
+                {isLoading ? (
+                    <QuestTableSkeleton />
                 ) : (
-                    <div className="overflow-x-auto">
-                        <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>
-                                </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}
-                                            className="border-b border-border/30 hover:bg-muted/20 transition-colors"
-                                        >
-                                            <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">
-                                                        <span>⭐</span>
-                                                        <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">
-                                                        <span>🪙</span>
-                                                        <span className="font-mono">{rewards.balance}</span>
-                                                    </span>
-                                                ) : (
-                                                    <span className="text-muted-foreground">-</span>
-                                                )}
-                                            </td>
-                                        </tr>
-                                    );
-                                })}
-                            </tbody>
-                        </table>
-                    </div>
+                    <QuestTableContent quests={displayQuests} />
                 )}
             </CardContent>
         </Card>

From d117bcb6979723a2bc994ab72be0b7ce4620a3da Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 15:18:51 +0100
Subject: [PATCH 22/32] fix: (web) restore quest table loading logic

- Simplify component by removing complex state management
- Show skeleton only during initial load, content otherwise
- Keep refresh icon spin during manual refresh
---
 web/src/components/quest-table.tsx | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/web/src/components/quest-table.tsx b/web/src/components/quest-table.tsx
index 9964a33..0915bec 100644
--- a/web/src/components/quest-table.tsx
+++ b/web/src/components/quest-table.tsx
@@ -213,21 +213,6 @@ function QuestTableContent({ quests }: { quests: QuestListItem[] }) {
 
 export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
     const [isRefreshing, setIsRefreshing] = React.useState(false);
-    const previousQuestsRef = React.useRef<QuestListItem[]>(quests);
-    const [displayQuests, setDisplayQuests] = React.useState<QuestListItem[]>(quests);
-
-    React.useEffect(() => {
-        if (isLoading) {
-            setIsRefreshing(true);
-        } else {
-            setIsRefreshing(false);
-            previousQuestsRef.current = quests;
-            if (quests.length !== previousQuestsRef.current.length || 
-                JSON.stringify(quests) !== JSON.stringify(previousQuestsRef.current)) {
-                setDisplayQuests(quests);
-            }
-        }
-    }, [isLoading, quests]);
 
     const handleRefresh = async () => {
         setIsRefreshing(true);
@@ -286,7 +271,7 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
                 {isLoading ? (
                     <QuestTableSkeleton />
                 ) : (
-                    <QuestTableContent quests={displayQuests} />
+                    <QuestTableContent quests={quests} />
                 )}
             </CardContent>
         </Card>

From 7d658bbef9cb09064606eec0a2bb11cfaf14f08f Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 15:20:36 +0100
Subject: [PATCH 23/32] fix: (web) fix refresh icon spinning indefinitely

- Remove redundant isRefreshing state
- Icon spin is controlled by isLoading prop from parent
- Parent correctly manages loading state during fetch
---
 web/src/components/quest-table.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/web/src/components/quest-table.tsx b/web/src/components/quest-table.tsx
index 0915bec..e5db64f 100644
--- a/web/src/components/quest-table.tsx
+++ b/web/src/components/quest-table.tsx
@@ -212,13 +212,6 @@ function QuestTableContent({ quests }: { quests: QuestListItem[] }) {
 }
 
 export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
-    const [isRefreshing, setIsRefreshing] = React.useState(false);
-
-    const handleRefresh = async () => {
-        setIsRefreshing(true);
-        onRefresh?.();
-    };
-
     return (
         <Card className="glass-card overflow-hidden">
             <CardHeader className="pb-3">
@@ -235,11 +228,11 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
                             </Badge>
                         )}
                         <button
-                            onClick={handleRefresh}
-                            disabled={isRefreshing}
+                            onClick={onRefresh}
+                            disabled={isLoading}
                             className={cn(
                                 "p-2 rounded-md hover:bg-muted/50 transition-colors",
-                                isRefreshing && "cursor-wait"
+                                isLoading && "cursor-wait"
                             )}
                             title="Refresh quests"
                         >
@@ -255,7 +248,7 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
                                 strokeLinejoin="round"
                                 className={cn(
                                     "text-muted-foreground transition-transform",
-                                    isRefreshing && "animate-spin"
+                                    isLoading && "animate-spin"
                                 )}
                             >
                                 <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />

From 5491551544f5c34bf3513978ee149fdb71a4a545 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 15:22:28 +0100
Subject: [PATCH 24/32] fix: (web) prevent flickering during refresh

- Track isInitialLoading separately from isRefreshing
- Only show skeleton on initial page load (when quests is empty)
- During refresh, keep existing content visible
- Spinning refresh icon indicates refresh in progress without clearing table
---
 web/src/components/quest-table.tsx | 17 ++++++++++-------
 web/src/pages/AdminQuests.tsx      | 24 +++++++++++++++---------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/web/src/components/quest-table.tsx b/web/src/components/quest-table.tsx
index e5db64f..8fdc7a0 100644
--- a/web/src/components/quest-table.tsx
+++ b/web/src/components/quest-table.tsx
@@ -16,7 +16,8 @@ interface QuestListItem {
 
 interface QuestTableProps {
     quests: QuestListItem[];
-    isLoading: boolean;
+    isInitialLoading: boolean;
+    isRefreshing: boolean;
     onRefresh?: () => void;
 }
 
@@ -211,14 +212,16 @@ function QuestTableContent({ quests }: { quests: QuestListItem[] }) {
     );
 }
 
-export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
+export function QuestTable({ quests, isInitialLoading, isRefreshing, onRefresh }: 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">
-                        {isLoading ? (
+                        {showSkeleton ? (
                             <Badge variant="secondary" className="animate-pulse">
                                 Loading...
                             </Badge>
@@ -229,10 +232,10 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
                         )}
                         <button
                             onClick={onRefresh}
-                            disabled={isLoading}
+                            disabled={isRefreshing}
                             className={cn(
                                 "p-2 rounded-md hover:bg-muted/50 transition-colors",
-                                isLoading && "cursor-wait"
+                                isRefreshing && "cursor-wait"
                             )}
                             title="Refresh quests"
                         >
@@ -248,7 +251,7 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
                                 strokeLinejoin="round"
                                 className={cn(
                                     "text-muted-foreground transition-transform",
-                                    isLoading && "animate-spin"
+                                    isRefreshing && "animate-spin"
                                 )}
                             >
                                 <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
@@ -261,7 +264,7 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
                 </div>
             </CardHeader>
             <CardContent>
-                {isLoading ? (
+                {showSkeleton ? (
                     <QuestTableSkeleton />
                 ) : (
                     <QuestTableContent quests={quests} />
diff --git a/web/src/pages/AdminQuests.tsx b/web/src/pages/AdminQuests.tsx
index ca93bbe..880bbd8 100644
--- a/web/src/pages/AdminQuests.tsx
+++ b/web/src/pages/AdminQuests.tsx
@@ -15,12 +15,16 @@ interface QuestListItem {
 
 export function AdminQuests() {
     const [quests, setQuests] = React.useState<QuestListItem[]>([]);
-    const [isLoading, setIsLoading] = React.useState(true);
-    const [refreshKey, setRefreshKey] = React.useState(0);
+    const [isInitialLoading, setIsInitialLoading] = React.useState(true);
+    const [isRefreshing, setIsRefreshing] = React.useState(false);
     const [lastCreatedQuestId, setLastCreatedQuestId] = React.useState<number | null>(null);
 
-    const fetchQuests = React.useCallback(async () => {
-        setIsLoading(true);
+    const fetchQuests = React.useCallback(async (isRefresh = false) => {
+        if (isRefresh) {
+            setIsRefreshing(true);
+        } else {
+            setIsInitialLoading(true);
+        }
         try {
             const response = await fetch("/api/quests");
             if (!response.ok) {
@@ -36,12 +40,13 @@ export function AdminQuests() {
                 description: error instanceof Error ? error.message : "Unknown error",
             });
         } finally {
-            setIsLoading(false);
+            setIsInitialLoading(false);
+            setIsRefreshing(false);
         }
     }, []);
 
     React.useEffect(() => {
-        fetchQuests();
+        fetchQuests(false);
     }, [fetchQuests]);
 
     React.useEffect(() => {
@@ -59,7 +64,7 @@ export function AdminQuests() {
     }, [lastCreatedQuestId, quests]);
 
     const handleQuestCreated = () => {
-        fetchQuests();
+        fetchQuests(true);
         toast.success("Quest list updated", {
             description: "The quest inventory has been refreshed.",
         });
@@ -76,8 +81,9 @@ export function AdminQuests() {
             <div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
                 <QuestTable
                     quests={quests}
-                    isLoading={isLoading}
-                    onRefresh={fetchQuests}
+                    isInitialLoading={isInitialLoading}
+                    isRefreshing={isRefreshing}
+                    onRefresh={() => fetchQuests(true)}
                 />
             </div>
 

From 4ecbffd61733dfb0e39166de9a8a9f597bbf6645 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 15:27:15 +0100
Subject: [PATCH 25/32] refactor: replace hardcoded SVGs with lucide-react
 icons in quest-table

---
 web/src/components/quest-table.tsx | 44 ++++--------------------------
 1 file changed, 6 insertions(+), 38 deletions(-)

diff --git a/web/src/components/quest-table.tsx b/web/src/components/quest-table.tsx
index 8fdc7a0..b592147 100644
--- a/web/src/components/quest-table.tsx
+++ b/web/src/components/quest-table.tsx
@@ -4,6 +4,7 @@ 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 } from "lucide-react";
 
 interface QuestListItem {
     id: number;
@@ -94,24 +95,7 @@ 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">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="32"
-                    height="32"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="text-muted-foreground"
-                >
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                    <polyline points="14 2 14 8 20 8" />
-                    <line x1="16" y1="13" x2="8" y2="13" />
-                    <line x1="16" y1="17" x2="8" y2="17" />
-                    <polyline points="10 9 9 9 8 9" />
-                </svg>
+                <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">
@@ -239,26 +223,10 @@ export function QuestTable({ quests, isInitialLoading, isRefreshing, onRefresh }
                             )}
                             title="Refresh quests"
                         >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="18"
-                                height="18"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                strokeWidth="2"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                className={cn(
-                                    "text-muted-foreground transition-transform",
-                                    isRefreshing && "animate-spin"
-                                )}
-                            >
-                                <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
-                                <path d="M3 3v5h5" />
-                                <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
-                                <path d="M16 21h5v-5" />
-                            </svg>
+                            <RefreshCw className={cn(
+                                "w-[18px] h-[18px] text-muted-foreground transition-transform",
+                                isRefreshing && "animate-spin"
+                            )} />
                         </button>
                     </div>
                 </div>

From 58f261562a8255021a156774d3ff94286ac711d2 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 15:58:48 +0100
Subject: [PATCH 26/32] feat: Implement an admin quest management table,
 enhance toast notifications with descriptions, and add new agent
 documentation.

---
 AGENTS.md                                 | 238 ++++++++++++++++++++++
 shared/modules/quest/quest.service.ts     |  29 +++
 web/bun.lock                              |   3 +
 web/package.json                          |   1 +
 web/src/components/commands-drawer.tsx    |  11 +-
 web/src/components/layout/app-sidebar.tsx |   4 +-
 web/src/components/quest-form.tsx         | 120 ++++++++---
 web/src/components/quest-table.tsx        |  61 +++++-
 web/src/components/ui/sonner.tsx          |  38 ++++
 web/src/hooks/use-settings.ts             |   8 +-
 web/src/pages/AdminQuests.tsx             |  59 +++++-
 web/src/server.ts                         |  61 ++++++
 12 files changed, 589 insertions(+), 44 deletions(-)
 create mode 100644 AGENTS.md
 create mode 100644 web/src/components/ui/sonner.tsx

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..ca802c9
--- /dev/null
+++ b/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` |
diff --git a/shared/modules/quest/quest.service.ts b/shared/modules/quest/quest.service.ts
index bcc8048..c9efe65 100644
--- a/shared/modules/quest/quest.service.ts
+++ b/shared/modules/quest/quest.service.ts
@@ -168,5 +168,34 @@ export const questService = {
         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);
     }
 };
diff --git a/web/bun.lock b/web/bun.lock
index a77d98b..4845368 100644
--- a/web/bun.lock
+++ b/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=="],
diff --git a/web/package.json b/web/package.json
index d90c6bb..5d0e10e 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/src/components/commands-drawer.tsx b/web/src/components/commands-drawer.tsx
index ff4cc2e..9b4f3f0 100644
--- a/web/src/components/commands-drawer.tsx
+++ b/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);
diff --git a/web/src/components/layout/app-sidebar.tsx b/web/src/components/layout/app-sidebar.tsx
index c5ceecf..59a9d14 100644
--- a/web/src/components/layout/app-sidebar.tsx
+++ b/web/src/components/layout/app-sidebar.tsx
@@ -64,12 +64,12 @@ 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) => (
+              {item.subItems?.map((subItem) => (
               <DropdownMenuItem key={subItem.title} asChild>
                 <Link 
                   to={subItem.url}
                   className={cn(
-                    "cursor-pointer",
+                    "cursor-pointer py-4 min-h-10",
                     subItem.isActive && "text-primary bg-primary/10"
                   )}
                 >
diff --git a/web/src/components/quest-form.tsx b/web/src/components/quest-form.tsx
index 9799a59..3ea362b 100644
--- a/web/src/components/quest-form.tsx
+++ b/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({ onSuccess }: { onSuccess?: () => void }) {
+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,17 +99,24 @@ export function QuestForm({ onSuccess }: { onSuccess?: () => void }) {
 
             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();
-            onSuccess?.();
+            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 {
@@ -85,12 +125,12 @@ export function QuestForm({ onSuccess }: { onSuccess?: () => void }) {
     };
 
     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>
@@ -182,7 +222,10 @@ export function QuestForm({ onSuccess }: { onSuccess?: () => void }) {
                                 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" 
@@ -201,7 +244,10 @@ export function QuestForm({ onSuccess }: { onSuccess?: () => void }) {
                                 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" 
@@ -216,13 +262,33 @@ export function QuestForm({ onSuccess }: { onSuccess?: () => void }) {
                             />
                         </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>
diff --git a/web/src/components/quest-table.tsx b/web/src/components/quest-table.tsx
index b592147..2cb9ac6 100644
--- a/web/src/components/quest-table.tsx
+++ b/web/src/components/quest-table.tsx
@@ -1,10 +1,11 @@
 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 } from "lucide-react";
+import { FileText, RefreshCw, Trash2, Pencil, Star, Coins } from "lucide-react";
 
 interface QuestListItem {
     id: number;
@@ -20,6 +21,8 @@ interface QuestTableProps {
     isInitialLoading: boolean;
     isRefreshing: boolean;
     onRefresh?: () => void;
+    onDelete?: (id: number) => void;
+    onEdit?: (id: number) => void;
 }
 
 const TRIGGER_EVENT_LABELS: Record<string, string> = {
@@ -67,7 +70,7 @@ function TruncatedText({ text, maxLength = 100 }: { text: string; maxLength?: nu
 function QuestTableSkeleton() {
     return (
         <div className="space-y-3 animate-pulse">
-            <div className="grid grid-cols-7 gap-4 px-4 py-2 text-sm font-medium text-muted-foreground">
+            <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" />
@@ -77,7 +80,7 @@ function QuestTableSkeleton() {
                 <Skeleton className="h-4 w-24" />
             </div>
             {Array.from({ length: 5 }).map((_, i) => (
-                <div key={i} className="grid grid-cols-7 gap-4 px-4 py-3 border-t border-border/50">
+                <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" />
@@ -85,6 +88,7 @@ function QuestTableSkeleton() {
                     <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>
@@ -105,7 +109,7 @@ function EmptyQuestState() {
     );
 }
 
-function QuestTableContent({ quests }: { quests: QuestListItem[] }) {
+function QuestTableContent({ quests, onDelete, onEdit }: { quests: QuestListItem[]; onDelete?: (id: number) => void; onEdit?: (id: number) => void }) {
     if (quests.length === 0) {
         return <EmptyQuestState />;
     }
@@ -136,6 +140,9 @@ function QuestTableContent({ quests }: { quests: QuestListItem[] }) {
                         <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>
@@ -170,7 +177,7 @@ function QuestTableContent({ quests }: { quests: QuestListItem[] }) {
                                 <td className="py-3 px-4 text-sm text-foreground">
                                     {rewards?.xp ? (
                                         <span className="flex items-center gap-1">
-                                            <span>⭐</span>
+                                            <Star className="w-4 h-4 text-amber-400" />
                                             <span className="font-mono">{rewards.xp}</span>
                                         </span>
                                     ) : (
@@ -180,13 +187,51 @@ function QuestTableContent({ quests }: { quests: QuestListItem[] }) {
                                 <td className="py-3 px-4 text-sm text-foreground">
                                     {rewards?.balance ? (
                                         <span className="flex items-center gap-1">
-                                            <span>🪙</span>
+                                            <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>
                         );
                     })}
@@ -196,7 +241,7 @@ function QuestTableContent({ quests }: { quests: QuestListItem[] }) {
     );
 }
 
-export function QuestTable({ quests, isInitialLoading, isRefreshing, onRefresh }: QuestTableProps) {
+export function QuestTable({ quests, isInitialLoading, isRefreshing, onRefresh, onDelete, onEdit }: QuestTableProps) {
     const showSkeleton = isInitialLoading && quests.length === 0;
 
     return (
@@ -235,7 +280,7 @@ export function QuestTable({ quests, isInitialLoading, isRefreshing, onRefresh }
                 {showSkeleton ? (
                     <QuestTableSkeleton />
                 ) : (
-                    <QuestTableContent quests={quests} />
+                    <QuestTableContent quests={quests} onDelete={onDelete} onEdit={onEdit} />
                 )}
             </CardContent>
         </Card>
diff --git a/web/src/components/ui/sonner.tsx b/web/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..9f46e06
--- /dev/null
+++ b/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 }
diff --git a/web/src/hooks/use-settings.ts b/web/src/hooks/use-settings.ts
index 48f19f3..4c72417 100644
--- a/web/src/hooks/use-settings.ts
+++ b/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);
diff --git a/web/src/pages/AdminQuests.tsx b/web/src/pages/AdminQuests.tsx
index 880bbd8..3b2d414 100644
--- a/web/src/pages/AdminQuests.tsx
+++ b/web/src/pages/AdminQuests.tsx
@@ -18,6 +18,9 @@ export function AdminQuests() {
     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) {
@@ -70,6 +73,52 @@ export function AdminQuests() {
         });
     };
 
+    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
@@ -84,11 +133,17 @@ export function AdminQuests() {
                     isInitialLoading={isInitialLoading}
                     isRefreshing={isRefreshing}
                     onRefresh={() => fetchQuests(true)}
+                    onDelete={handleDeleteQuest}
+                    onEdit={handleEditQuest}
                 />
             </div>
 
-            <div className="animate-in fade-in slide-up duration-700">
-                <QuestForm onSuccess={handleQuestCreated} />
+            <div className="animate-in fade-in slide-up duration-700" ref={formRef}>
+                <QuestForm
+                    initialData={editingQuest || undefined}
+                    onUpdate={handleQuestUpdated}
+                    onCancel={handleFormCancel}
+                />
             </div>
         </main>
     );
diff --git a/web/src/server.ts b/web/src/server.ts
index 9da3982..7b1c33d 100644
--- a/web/src/server.ts
+++ b/web/src/server.ts
@@ -222,6 +222,67 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
                 }
             }
 
+            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 {

From 3c1334b30ef46544406ed3d69fe5481b3b4aff2e Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 16:27:23 +0100
Subject: [PATCH 27/32] fix: update sub-navigation item colors for active,
 hover, and default states

---
 web/src/components/layout/app-sidebar.tsx | 44 ++++++++++++-----------
 web/src/components/ui/sidebar.tsx         |  3 +-
 web/src/contexts/navigation-context.tsx   | 16 ++++-----
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/web/src/components/layout/app-sidebar.tsx b/web/src/components/layout/app-sidebar.tsx
index 59a9d14..613e935 100644
--- a/web/src/components/layout/app-sidebar.tsx
+++ b/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"
@@ -65,14 +65,17 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
               {item.title}
             </div>
               {item.subItems?.map((subItem) => (
-              <DropdownMenuItem key={subItem.title} asChild>
+              <DropdownMenuItem key={subItem.title} asChild className="group/dropitem">
                 <Link 
                   to={subItem.url}
                   className={cn(
-                    "cursor-pointer py-4 min-h-10",
-                    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>
diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx
index 0ee3201..19ba605 100644
--- a/web/src/components/ui/sidebar.tsx
+++ b/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",
diff --git a/web/src/contexts/navigation-context.tsx b/web/src/contexts/navigation-context.tsx
index 757bd60..c26c207 100644
--- a/web/src/contexts/navigation-context.tsx
+++ b/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 },
     ]
   },
 ]

From afe82c449b719b05a30866646b2c685931684301 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 16 Jan 2026 16:37:11 +0100
Subject: [PATCH 28/32] 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
---
 bot/commands/admin/update.ts           |  1 +
 bot/modules/admin/update.types.ts      |  2 +
 bot/modules/admin/update.view.ts       | 86 +++++++++++++++++++++++++-
 shared/modules/admin/update.service.ts | 75 ++++++++++++++++++++--
 4 files changed, 158 insertions(+), 6 deletions(-)

diff --git a/bot/commands/admin/update.ts b/bot/commands/admin/update.ts
index 90a5340..f0598e5 100644
--- a/bot/commands/admin/update.ts
+++ b/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
                 });
diff --git a/bot/modules/admin/update.types.ts b/bot/modules/admin/update.types.ts
index 633a6ad..8098d38 100644
--- a/bot/modules/admin/update.types.ts
+++ b/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;
diff --git a/bot/modules/admin/update.view.ts b/bot/modules/admin/update.view.ts
index 734d37b..bb74e53 100644
--- a/bot/modules/admin/update.view.ts
+++ b/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.`,
diff --git a/shared/modules/admin/update.service.ts b/shared/modules/admin/update.service.ts
index 2b4f1c2..11e4dcd 100644
--- a/shared/modules/admin/update.service.ts
+++ b/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;
     }
 

From d7543d9f485947d6c2425c16fbb74d0f27232dca Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Sat, 17 Jan 2026 13:11:50 +0100
Subject: [PATCH 29/32] feat: (web) add item route

---
 .gitignore                              |  3 ++-
 web/src/App.tsx                         |  2 ++
 web/src/contexts/navigation-context.tsx |  3 ++-
 web/src/pages/admin/Items.tsx           | 20 ++++++++++++++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 web/src/pages/admin/Items.tsx

diff --git a/.gitignore b/.gitignore
index cab42e4..0ac8ac8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,4 +45,5 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 
 src/db/data
 src/db/log
-scratchpad/
\ No newline at end of file
+scratchpad/
+tickets/
\ No newline at end of file
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 38816d7..cd98cc2 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -4,6 +4,7 @@ import "./index.css";
 import { DesignSystem } from "./pages/DesignSystem";
 import { AdminQuests } from "./pages/AdminQuests";
 import { AdminOverview } from "./pages/admin/Overview";
+import { AdminItems } from "./pages/admin/Items";
 
 import { Home } from "./pages/Home";
 import { Toaster } from "sonner";
@@ -28,6 +29,7 @@ export function App() {
             <Route path="/admin" element={<Navigate to="/admin/overview" replace />} />
             <Route path="/admin/overview" element={<AdminOverview />} />
             <Route path="/admin/quests" element={<AdminQuests />} />
+            <Route path="/admin/items" element={<AdminItems />} />
 
             
             <Route path="/settings" element={<SettingsLayout />}>
diff --git a/web/src/contexts/navigation-context.tsx b/web/src/contexts/navigation-context.tsx
index c26c207..bd290ad 100644
--- a/web/src/contexts/navigation-context.tsx
+++ b/web/src/contexts/navigation-context.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 import { useLocation, type Location } from "react-router-dom"
-import { Home, Palette, ShieldCheck, Settings, LayoutDashboard, Trophy, SlidersHorizontal, Coins, Cog, UserCog, type LucideIcon } from "lucide-react"
+import { Home, Palette, ShieldCheck, Settings, LayoutDashboard, Trophy, SlidersHorizontal, Coins, Cog, UserCog, Package, type LucideIcon } from "lucide-react"
 
 export interface NavSubItem {
   title: string
@@ -46,6 +46,7 @@ const NAV_CONFIG: NavConfigItem[] = [
     subItems: [
       { title: "Overview", url: "/admin/overview", icon: LayoutDashboard },
       { title: "Quests", url: "/admin/quests", icon: Trophy },
+      { title: "Items", url: "/admin/items", icon: Package },
     ]
   },
   {
diff --git a/web/src/pages/admin/Items.tsx b/web/src/pages/admin/Items.tsx
new file mode 100644
index 0000000..71cef14
--- /dev/null
+++ b/web/src/pages/admin/Items.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { SectionHeader } from "../../components/section-header";
+
+export function AdminItems() {
+    return (
+        <main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-12">
+            <SectionHeader
+                badge="Item Management"
+                title="Items"
+                description="Create and manage items for the Aurora RPG."
+            />
+
+            <div className="animate-in fade-in slide-up duration-700">
+                <p className="text-muted-foreground">Items management coming soon...</p>
+            </div>
+        </main>
+    );
+}
+
+export default AdminItems;

From 17e636c4e52e458894b821df631217f8c25e41ad Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Sat, 17 Jan 2026 16:20:33 +0100
Subject: [PATCH 30/32] feat: Overhaul Docker infrastructure with multi-stage
 builds, add a cleanup script, and refactor the update service to combine
 update and requirement checks.

---
 .dockerignore                               |  39 ++++
 AGENTS.md                                   | 132 +++++++------
 Dockerfile                                  |  54 +++++-
 bot/commands/admin/update.ts                |   6 +-
 docker-compose.yml                          |  51 +++--
 package.json                                |   3 +-
 shared/modules/admin/update.service.test.ts | 179 ++++++++++++-----
 shared/modules/admin/update.service.ts      | 205 ++++++++++++++------
 shared/scripts/docker-cleanup.sh            |  41 ++++
 9 files changed, 496 insertions(+), 214 deletions(-)
 create mode 100644 .dockerignore
 create mode 100755 shared/scripts/docker-cleanup.sh

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..0c0b95e
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,39 @@
+# Dependencies - handled inside container
+node_modules
+web/node_modules
+
+# Git
+.git
+.gitignore
+
+# Logs and data
+logs
+*.log
+shared/db/data
+shared/db/log
+
+# Development tools
+.env
+.env.example
+.opencode
+.agent
+
+# Documentation
+docs
+*.md
+!README.md
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Build artifacts
+dist
+.cache
+*.tsbuildinfo
diff --git a/AGENTS.md b/AGENTS.md
index ca802c9..627ccf0 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -12,7 +12,7 @@ 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                         # Run all tests ( expect some tests to fail when running all at once like this due to the nature of the tests )
 bun test path/to/file.test.ts    # Run single test file
 bun test --watch                 # Watch mode
 bun test shared/modules/economy  # Run tests in directory
@@ -71,6 +71,7 @@ import { localHelper } from "./helper";
 ```
 
 **Available Aliases:**
+
 - `@/*` - bot/
 - `@shared/*` - shared/
 - `@db/*` - shared/db/
@@ -80,17 +81,17 @@ import { localHelper } from "./helper";
 
 ## 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_` |
+| 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
 
@@ -98,13 +99,13 @@ import { localHelper } from "./helper";
 
 ```typescript
 export const commandName = createCommand({
-    data: new SlashCommandBuilder()
-        .setName("commandname")
-        .setDescription("Description"),
-    execute: async (interaction) => {
-        await interaction.deferReply();
-        // Implementation
-    }
+  data: new SlashCommandBuilder()
+    .setName("commandname")
+    .setDescription("Description"),
+  execute: async (interaction) => {
+    await interaction.deferReply();
+    // Implementation
+  },
 });
 ```
 
@@ -112,11 +113,11 @@ export const commandName = createCommand({
 
 ```typescript
 export const serviceName = {
-    methodName: async (params: ParamType): Promise<ReturnType> => {
-        return await withTransaction(async (tx) => {
-            // Database operations
-        });
-    },
+  methodName: async (params: ParamType): Promise<ReturnType> => {
+    return await withTransaction(async (tx) => {
+      // Database operations
+    });
+  },
 };
 ```
 
@@ -146,15 +147,17 @@ throw new SystemError("Database connection failed");
 
 ```typescript
 try {
-    const result = await service.method();
-    await interaction.editReply({ embeds: [createSuccessEmbed(result)] });
+  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.")] });
-    }
+  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.")],
+    });
+  }
 }
 ```
 
@@ -166,15 +169,18 @@ try {
 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
+  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
@@ -192,25 +198,25 @@ import { describe, it, expect, mock, beforeEach } from "bun:test";
 
 // Mock modules BEFORE imports
 mock.module("@shared/db/DrizzleClient", () => ({
-    DrizzleClient: { query: mockQuery }
+  DrizzleClient: { query: mockQuery },
 }));
 
 describe("serviceName", () => {
-    beforeEach(() => {
-        mockFn.mockClear();
-    });
+  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);
-    });
+  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);
+  });
 });
 ```
 
@@ -227,12 +233,12 @@ describe("serviceName", () => {
 
 ## Key Files Reference
 
-| Purpose | File |
-|---------|------|
-| Bot entry | `bot/index.ts` |
-| DB schema | `shared/db/schema.ts` |
+| 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` |
+| Environment   | `shared/lib/env.ts`    |
+| Embed helpers | `bot/lib/embeds.ts`    |
+| Command utils | `shared/lib/utils.ts`  |
diff --git a/Dockerfile b/Dockerfile
index a35eadf..b38e0e4 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,21 +1,55 @@
+# ============================================
+# Base stage - shared configuration
+# ============================================
 FROM oven/bun:latest AS base
 WORKDIR /app
 
-# Install system dependencies
-RUN apt-get update && apt-get install -y git && rm -rf /var/lib/apt/lists/*
+# Install system dependencies with cleanup in same layer
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends git && \
+    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
-# Install root project dependencies
+# ============================================
+# Dependencies stage - installs all deps
+# ============================================
+FROM base AS deps
+
+# Copy only package files first (better layer caching)
 COPY package.json bun.lock ./
-RUN bun install --frozen-lockfile
-
-# Install web project dependencies
 COPY web/package.json web/bun.lock ./web/
-RUN cd web && bun install --frozen-lockfile
 
-# Copy source code
-COPY . .
+# Install all dependencies in one layer
+RUN bun install --frozen-lockfile && \
+    cd web && bun install --frozen-lockfile
 
-# Expose ports (3000 for web dashboard)
+# ============================================
+# Development stage - for local dev with volume mounts
+# ============================================
+FROM base AS development
+
+# Copy dependencies from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=deps /app/web/node_modules ./web/node_modules
+
+# Expose ports
+EXPOSE 3000
+
+# Default command
+CMD ["bun", "run", "dev"]
+
+# ============================================
+# Production stage - full app with source code
+# ============================================
+FROM base AS production
+
+# Copy dependencies from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=deps /app/web/node_modules ./web/node_modules
+
+# Copy source code
+COPY . .
+
+# Expose ports
 EXPOSE 3000
 
 # Default command
diff --git a/bot/commands/admin/update.ts b/bot/commands/admin/update.ts
index f0598e5..ab7d05f 100644
--- a/bot/commands/admin/update.ts
+++ b/bot/commands/admin/update.ts
@@ -49,7 +49,7 @@ async function handleUpdate(interaction: any) {
     const force = interaction.options.getBoolean("force") || false;
 
     try {
-        // 1. Check for updates
+        // 1. Check for updates (now includes requirements in one call)
         await interaction.editReply({ embeds: [getCheckingEmbed()] });
         const updateInfo = await UpdateService.checkForUpdates();
 
@@ -60,8 +60,8 @@ async function handleUpdate(interaction: any) {
             return;
         }
 
-        // 2. Analyze requirements
-        const requirements = await UpdateService.checkUpdateRequirements(updateInfo.branch);
+        // 2. Extract requirements from the combined response
+        const { requirements } = updateInfo;
         const categories = UpdateService.categorizeChanges(requirements.changedFiles);
 
         // 3. Show confirmation with details
diff --git a/docker-compose.yml b/docker-compose.yml
index ef88aeb..985c069 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -10,8 +10,8 @@ services:
     # ports:
     #   - "127.0.0.1:${DB_PORT}:5432"
     volumes:
+      # Host-mounted to preserve existing VPS data
       - ./shared/db/data:/var/lib/postgresql/data
-      - ./shared/db/log:/var/log/postgresql
     networks:
       - internal
     healthcheck:
@@ -23,17 +23,19 @@ services:
   app:
     container_name: aurora_app
     restart: unless-stopped
-    image: aurora-app
     build:
       context: .
       dockerfile: Dockerfile
+      target: development  # Use development stage
     working_dir: /app
     ports:
       - "127.0.0.1:3000:3000"
     volumes:
+      # Mount source code for hot reloading
       - .:/app
-      - /app/node_modules
-      - /app/web/node_modules
+      # Use named volumes for node_modules (prevents host overwrite + caches deps)
+      - app_node_modules:/app/node_modules
+      - web_node_modules:/app/web/node_modules
     environment:
       - HOST=0.0.0.0
       - DB_USER=${DB_USER}
@@ -61,30 +63,20 @@ services:
 
   studio:
     container_name: aurora_studio
-    image: aurora-app
-    build:
-      context: .
-      dockerfile: Dockerfile
-    working_dir: /app
+    # Reuse the same built image as app (no duplicate builds!)
+    extends:
+      service: app
     ports:
       - "127.0.0.1:4983:4983"
-    volumes:
-      - .:/app
-      - /app/node_modules
-      - /app/web/node_modules
-    environment:
-      - DB_USER=${DB_USER}
-      - DB_PASSWORD=${DB_PASSWORD}
-      - DB_NAME=${DB_NAME}
-      - DB_PORT=5432
-      - DB_HOST=db
-      - DATABASE_URL=postgresql://${DB_USER}:${DB_PASSWORD}@db:5432/${DB_NAME}
-    depends_on:
-      db:
-        condition: service_healthy
-    networks:
-      - internal
-      - web
+    # Override healthcheck since studio doesn't serve on port 3000
+    healthcheck:
+      test: [ "CMD", "bun", "-e", "fetch('http://localhost:4983').then(r => process.exit(0)).catch(() => process.exit(1))" ]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
+    # Disable restart for studio (it's an on-demand tool)
+    restart: "no"
     command: [ "bun", "x", "drizzle-kit", "studio", "--port", "4983", "--host", "0.0.0.0" ]
 
 networks:
@@ -93,3 +85,10 @@ networks:
     internal: true # No external access
   web:
     driver: bridge # Can be accessed from host
+
+volumes:
+  # Named volumes for node_modules caching
+  app_node_modules:
+    name: aurora_app_node_modules  
+  web_node_modules:
+    name: aurora_web_node_modules
diff --git a/package.json b/package.json
index f4225b0..6b53462 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "studio:remote": "bash shared/scripts/remote-studio.sh",
     "dashboard:remote": "bash shared/scripts/remote-dashboard.sh",
     "remote": "bash shared/scripts/remote.sh",
-    "test": "bun test"
+    "test": "bun test",
+    "docker:cleanup": "bash shared/scripts/docker-cleanup.sh"
   },
   "dependencies": {
     "@napi-rs/canvas": "^0.1.84",
diff --git a/shared/modules/admin/update.service.test.ts b/shared/modules/admin/update.service.test.ts
index 7eb0d17..4373c52 100644
--- a/shared/modules/admin/update.service.test.ts
+++ b/shared/modules/admin/update.service.test.ts
@@ -1,5 +1,4 @@
-import { describe, expect, test, mock, beforeEach, afterAll, spyOn } from "bun:test";
-import * as fs from "fs/promises";
+import { describe, expect, test, mock, beforeEach, afterAll } from "bun:test";
 
 // Mock child_process BEFORE importing the service
 const mockExec = mock((cmd: string, callback?: any) => {
@@ -8,23 +7,32 @@ const mockExec = mock((cmd: string, callback?: any) => {
         return { unref: () => { } };
     }
 
-    if (cmd.includes("git rev-parse")) {
-        callback(null, { stdout: "main\n" });
+    // Simulate successful command execution
+    let stdout = "";
+    
+    if (cmd.includes("git rev-parse --abbrev-ref")) {
+        stdout = "main\n";
+    } else if (cmd.includes("git rev-parse --short")) {
+        stdout = "abc1234\n";
+    } else if (cmd.includes("git rev-parse HEAD")) {
+        stdout = "abc1234567890\n";
     } else if (cmd.includes("git fetch")) {
-        callback(null, { stdout: "" });
+        stdout = "";
     } else if (cmd.includes("git log")) {
-        callback(null, { stdout: "abcdef Update 1\n123456 Update 2" });
+        stdout = "abcdef|Update 1|Author1\n123456|Update 2|Author2";
     } else if (cmd.includes("git diff")) {
-        callback(null, { stdout: "package.json\nsrc/index.ts" });
+        stdout = "package.json\nsrc/index.ts\nshared/lib/schema.ts";
     } else if (cmd.includes("git reset")) {
-        callback(null, { stdout: "HEAD is now at abcdef Update 1" });
+        stdout = "HEAD is now at abcdef Update 1";
     } else if (cmd.includes("bun install")) {
-        callback(null, { stdout: "Installed dependencies" });
+        stdout = "Installed dependencies";
     } else if (cmd.includes("drizzle-kit migrate")) {
-        callback(null, { stdout: "Migrations applied" });
-    } else {
-        callback(null, { stdout: "" });
+        stdout = "Migrations applied";
+    } else if (cmd.includes("bun run build")) {
+        stdout = "Build completed";
     }
+
+    callback(null, stdout, "");
 });
 
 mock.module("child_process", () => ({
@@ -32,9 +40,9 @@ mock.module("child_process", () => ({
 }));
 
 // Mock fs/promises
-const mockWriteFile = mock((path: string, content: string) => Promise.resolve());
-const mockReadFile = mock((path: string, encoding: string) => Promise.resolve("{}"));
-const mockUnlink = mock((path: string) => Promise.resolve());
+const mockWriteFile = mock((_path: string, _content: string) => Promise.resolve());
+const mockReadFile = mock((_path: string, _encoding: string) => Promise.resolve("{}"));
+const mockUnlink = mock((_path: string) => Promise.resolve());
 
 mock.module("fs/promises", () => ({
     writeFile: mockWriteFile,
@@ -43,9 +51,9 @@ mock.module("fs/promises", () => ({
 }));
 
 // Mock view module to avoid import issues
-mock.module("./update.view", () => ({
-    getPostRestartEmbed: () => ({ title: "Update Complete" }),
-    getInstallingDependenciesEmbed: () => ({ title: "Installing..." }),
+mock.module("@/modules/admin/update.view", () => ({
+    getPostRestartEmbed: () => ({ embeds: [{ title: "Update Complete" }], components: [] }),
+    getPostRestartProgressEmbed: () => ({ title: "Progress..." }),
 }));
 
 describe("UpdateService", () => {
@@ -72,7 +80,8 @@ describe("UpdateService", () => {
 
             expect(result.hasUpdates).toBe(true);
             expect(result.branch).toBe("main");
-            expect(result.log).toContain("Update 1");
+            expect(result.commits.length).toBeGreaterThan(0);
+            expect(result.commits[0].message).toContain("Update 1");
         });
 
         test("should call git rev-parse, fetch, and log commands", async () => {
@@ -83,43 +92,82 @@ describe("UpdateService", () => {
             expect(calls.some((cmd: string) => cmd.includes("git fetch"))).toBe(true);
             expect(calls.some((cmd: string) => cmd.includes("git log"))).toBe(true);
         });
+
+        test("should include requirements in the response", async () => {
+            const result = await UpdateService.checkForUpdates();
+
+            expect(result.requirements).toBeDefined();
+            expect(result.requirements.needsRootInstall).toBe(true); // package.json is in mock
+            expect(result.requirements.needsMigrations).toBe(true); // schema.ts is in mock
+            expect(result.requirements.changedFiles).toContain("package.json");
+        });
     });
 
     describe("performUpdate", () => {
         test("should run git reset --hard with correct branch", async () => {
             await UpdateService.performUpdate("main");
 
-            const lastCall = mockExec.mock.lastCall;
-            expect(lastCall).toBeDefined();
-            expect(lastCall![0]).toContain("git reset --hard origin/main");
+            const calls = mockExec.mock.calls.map((c: any) => c[0]);
+            expect(calls.some((cmd: string) => cmd.includes("git reset --hard origin/main"))).toBe(true);
         });
     });
 
-    describe("checkUpdateRequirements", () => {
+    describe("checkUpdateRequirements (deprecated)", () => {
         test("should detect package.json and schema.ts changes", async () => {
             const result = await UpdateService.checkUpdateRequirements("main");
 
-            expect(result.needsInstall).toBe(true);
-            expect(result.needsMigrations).toBe(false); // mock doesn't include schema.ts
+            expect(result.needsRootInstall).toBe(true);
+            expect(result.needsMigrations).toBe(true);
             expect(result.error).toBeUndefined();
         });
 
         test("should call git diff with correct branch", async () => {
             await UpdateService.checkUpdateRequirements("develop");
 
-            const lastCall = mockExec.mock.lastCall;
-            expect(lastCall).toBeDefined();
-            expect(lastCall![0]).toContain("git diff HEAD..origin/develop");
+            const calls = mockExec.mock.calls.map((c: any) => c[0]);
+            expect(calls.some((cmd: string) => cmd.includes("git diff HEAD..origin/develop"))).toBe(true);
         });
     });
 
     describe("installDependencies", () => {
-        test("should run bun install and return output", async () => {
-            const output = await UpdateService.installDependencies();
+        test("should run bun install for root only", async () => {
+            const output = await UpdateService.installDependencies({ root: true, web: false });
 
-            expect(output).toBe("Installed dependencies");
-            const lastCall = mockExec.mock.lastCall;
-            expect(lastCall![0]).toBe("bun install");
+            expect(output).toContain("Root");
+            const calls = mockExec.mock.calls.map((c: any) => c[0]);
+            expect(calls.some((cmd: string) => cmd === "bun install")).toBe(true);
+        });
+
+        test("should run bun install for both root and web in parallel", async () => {
+            const output = await UpdateService.installDependencies({ root: true, web: true });
+
+            expect(output).toContain("Root");
+            expect(output).toContain("Web");
+            const calls = mockExec.mock.calls.map((c: any) => c[0]);
+            expect(calls.some((cmd: string) => cmd === "bun install")).toBe(true);
+            expect(calls.some((cmd: string) => cmd.includes("cd web && bun install"))).toBe(true);
+        });
+    });
+
+    describe("categorizeChanges", () => {
+        test("should categorize files correctly", () => {
+            const files = [
+                "bot/commands/admin/update.ts",
+                "bot/modules/admin/update.view.ts",
+                "web/src/components/Button.tsx",
+                "shared/lib/utils.ts",
+                "package.json",
+                "drizzle/0001_migration.sql"
+            ];
+
+            const categories = UpdateService.categorizeChanges(files);
+
+            expect(categories["Commands"]).toBe(1);
+            expect(categories["Modules"]).toBe(1);
+            expect(categories["Web Dashboard"]).toBe(1);
+            expect(categories["Library"]).toBe(1);
+            expect(categories["Dependencies"]).toBe(1);
+            expect(categories["Database"]).toBe(1);
         });
     });
 
@@ -130,7 +178,10 @@ describe("UpdateService", () => {
                 userId: "456",
                 timestamp: Date.now(),
                 runMigrations: true,
-                installDependencies: false
+                installDependencies: false,
+                buildWebAssets: false,
+                previousCommit: "abc1234",
+                newCommit: "def5678"
             };
 
             await UpdateService.prepareRestartContext(context);
@@ -143,6 +194,39 @@ describe("UpdateService", () => {
         });
     });
 
+    describe("saveRollbackPoint", () => {
+        test("should save current commit hash to file", async () => {
+            const commit = await UpdateService.saveRollbackPoint();
+
+            expect(commit).toBeTruthy();
+            expect(mockWriteFile).toHaveBeenCalled();
+            const lastCall = mockWriteFile.mock.lastCall as [string, string] | undefined;
+            expect(lastCall![0]).toContain("rollback_commit");
+        });
+    });
+
+    describe("hasRollbackPoint", () => {
+        test("should return true when rollback file exists", async () => {
+            mockReadFile.mockImplementationOnce(() => Promise.resolve("abc123"));
+            
+            // Clear cache first
+            (UpdateService as any).rollbackPointExists = null;
+            
+            const result = await UpdateService.hasRollbackPoint();
+            expect(result).toBe(true);
+        });
+
+        test("should return false when rollback file does not exist", async () => {
+            mockReadFile.mockImplementationOnce(() => Promise.reject(new Error("ENOENT")));
+            
+            // Clear cache first
+            (UpdateService as any).rollbackPointExists = null;
+            
+            const result = await UpdateService.hasRollbackPoint();
+            expect(result).toBe(false);
+        });
+    });
+
     describe("triggerRestart", () => {
         test("should use RESTART_COMMAND env var when set", async () => {
             const originalEnv = process.env.RESTART_COMMAND;
@@ -150,24 +234,19 @@ describe("UpdateService", () => {
 
             await UpdateService.triggerRestart();
 
-            const lastCall = mockExec.mock.lastCall;
-            expect(lastCall).toBeDefined();
-            expect(lastCall![0]).toBe("pm2 restart bot");
+            const calls = mockExec.mock.calls.map((c: any) => c[0]);
+            expect(calls.some((cmd: string) => cmd === "pm2 restart bot")).toBe(true);
 
             process.env.RESTART_COMMAND = originalEnv;
         });
 
-        test("should write to trigger file when no env var", async () => {
+        test("should call process.exit when no env var is set", async () => {
             const originalEnv = process.env.RESTART_COMMAND;
             delete process.env.RESTART_COMMAND;
 
+            // Just verify it doesn't throw - actual process.exit is mocked by setTimeout
             await UpdateService.triggerRestart();
 
-            expect(mockWriteFile).toHaveBeenCalled();
-            const lastCall = mockWriteFile.mock.lastCall as [string, string] | undefined;
-            expect(lastCall).toBeDefined();
-            expect(lastCall![0]).toContain("restart_trigger");
-
             process.env.RESTART_COMMAND = originalEnv;
         });
     });
@@ -181,7 +260,7 @@ describe("UpdateService", () => {
 
         const createMockChannel = () => ({
             isSendable: () => true,
-            send: mock(() => Promise.resolve())
+            send: mock(() => Promise.resolve({ edit: mock(() => Promise.resolve()), delete: mock(() => Promise.resolve()) }))
         });
 
         test("should ignore stale context (>10 mins old)", async () => {
@@ -190,7 +269,10 @@ describe("UpdateService", () => {
                 userId: "456",
                 timestamp: Date.now() - (15 * 60 * 1000), // 15 mins ago
                 runMigrations: true,
-                installDependencies: true
+                installDependencies: true,
+                buildWebAssets: false,
+                previousCommit: "abc",
+                newCommit: "def"
             };
 
             mockReadFile.mockImplementationOnce(() => Promise.resolve(JSON.stringify(staleContext)));
@@ -227,7 +309,10 @@ describe("UpdateService", () => {
                 userId: "456",
                 timestamp: Date.now(),
                 runMigrations: false,
-                installDependencies: false
+                installDependencies: false,
+                buildWebAssets: false,
+                previousCommit: "abc",
+                newCommit: "def"
             };
 
             mockReadFile.mockImplementationOnce(() => Promise.resolve(JSON.stringify(validContext)));
@@ -236,7 +321,7 @@ describe("UpdateService", () => {
             const { TextChannel } = await import("discord.js");
             const mockChannel = Object.create(TextChannel.prototype);
             mockChannel.isSendable = () => true;
-            mockChannel.send = mock(() => Promise.resolve());
+            mockChannel.send = mock(() => Promise.resolve({ edit: mock(() => Promise.resolve()), delete: mock(() => Promise.resolve()) }));
 
             const mockClient = createMockClient(mockChannel);
 
diff --git a/shared/modules/admin/update.service.ts b/shared/modules/admin/update.service.ts
index 11e4dcd..4de2175 100644
--- a/shared/modules/admin/update.service.ts
+++ b/shared/modules/admin/update.service.ts
@@ -1,4 +1,4 @@
-import { exec } from "child_process";
+import { exec, type ExecException } from "child_process";
 import { promisify } from "util";
 import { writeFile, readFile, unlink } from "fs/promises";
 import { Client, TextChannel } from "discord.js";
@@ -10,32 +10,69 @@ const execAsync = promisify(exec);
 
 // Constants
 const STALE_CONTEXT_MS = 10 * 60 * 1000; // 10 minutes
+const DEFAULT_TIMEOUT_MS = 30_000; // 30 seconds for git commands
+const INSTALL_TIMEOUT_MS = 120_000; // 2 minutes for dependency installation
+const BUILD_TIMEOUT_MS = 180_000; // 3 minutes for web build
 
+/**
+ * Execute a command with timeout protection
+ */
+async function execWithTimeout(
+    cmd: string,
+    timeoutMs: number = DEFAULT_TIMEOUT_MS
+): Promise<{ stdout: string; stderr: string }> {
+    return new Promise((resolve, reject) => {
+        const process = exec(cmd, (error: ExecException | null, stdout: string, stderr: string) => {
+            if (error) {
+                reject(error);
+            } else {
+                resolve({ stdout, stderr });
+            }
+        });
 
+        const timer = setTimeout(() => {
+            process.kill("SIGTERM");
+            reject(new Error(`Command timed out after ${timeoutMs}ms: ${cmd}`));
+        }, timeoutMs);
+
+        process.on("exit", () => clearTimeout(timer));
+    });
+}
 
 export class UpdateService {
     private static readonly CONTEXT_FILE = ".restart_context.json";
     private static readonly ROLLBACK_FILE = ".rollback_commit.txt";
 
+    // Cache for rollback state (set when we save, cleared on cleanup)
+    private static rollbackPointExists: boolean | null = null;
+
     /**
      * Check for available updates with detailed commit information
+     * Optimized: Parallel git commands and combined requirements check
      */
-    static async checkForUpdates(): Promise<UpdateInfo> {
-        const { stdout: branchName } = await execAsync("git rev-parse --abbrev-ref HEAD");
+    static async checkForUpdates(): Promise<UpdateInfo & { requirements: UpdateCheckResult }> {
+        // Get branch first (needed for subsequent commands)
+        const { stdout: branchName } = await execWithTimeout("git rev-parse --abbrev-ref HEAD");
         const branch = branchName.trim();
 
-        const { stdout: currentCommit } = await execAsync("git rev-parse --short HEAD");
+        // Parallel execution: get current commit while fetching
+        const [currentResult] = await Promise.all([
+            execWithTimeout("git rev-parse --short HEAD"),
+            execWithTimeout(`git fetch origin ${branch} --prune`) // Only fetch current branch
+        ]);
+        const currentCommit = currentResult.stdout.trim();
 
-        await execAsync("git fetch --all");
+        // After fetch completes, get remote info in parallel
+        const [latestResult, logResult, diffResult] = await Promise.all([
+            execWithTimeout(`git rev-parse --short origin/${branch}`),
+            execWithTimeout(`git log HEAD..origin/${branch} --format="%h|%s|%an" --no-merges`),
+            execWithTimeout(`git diff HEAD..origin/${branch} --name-only`)
+        ]);
 
-        const { stdout: latestCommit } = await execAsync(`git rev-parse --short origin/${branch}`);
+        const latestCommit = latestResult.stdout.trim();
 
-        // Get commit log with author info
-        const { stdout: logOutput } = await execAsync(
-            `git log HEAD..origin/${branch} --format="%h|%s|%an" --no-merges`
-        );
-
-        const commits: CommitInfo[] = logOutput
+        // Parse commit log
+        const commits: CommitInfo[] = logResult.stdout
             .trim()
             .split("\n")
             .filter(line => line.length > 0)
@@ -44,51 +81,64 @@ export class UpdateService {
                 return { hash: hash || "", message: message || "", author: author || "" };
             });
 
+        // Parse changed files and analyze requirements in one pass
+        const changedFiles = diffResult.stdout.trim().split("\n").filter(f => f.length > 0);
+        const requirements = this.analyzeChangedFiles(changedFiles);
+
         return {
             hasUpdates: commits.length > 0,
             branch,
-            currentCommit: currentCommit.trim(),
-            latestCommit: latestCommit.trim(),
+            currentCommit,
+            latestCommit,
             commitCount: commits.length,
-            commits
+            commits,
+            requirements
         };
     }
 
     /**
-     * Analyze what the update requires
+     * Analyze changed files to determine update requirements
+     * Extracted for reuse and clarity
+     */
+    private static analyzeChangedFiles(changedFiles: string[]): UpdateCheckResult {
+        const needsRootInstall = changedFiles.some(file =>
+            file === "package.json" || file === "bun.lock"
+        );
+
+        const needsWebInstall = changedFiles.some(file =>
+            file === "web/package.json" || file === "web/bun.lock"
+        );
+
+        // Only rebuild web if essential source files changed
+        const needsWebBuild = changedFiles.some(file =>
+            file.match(/^web\/src\/(components|pages|lib|index)/) ||
+            file === "web/build.ts" ||
+            file === "web/tailwind.config.ts" ||
+            file === "web/tsconfig.json"
+        );
+
+        const needsMigrations = changedFiles.some(file =>
+            file.includes("schema.ts") || file.startsWith("drizzle/")
+        );
+
+        return {
+            needsRootInstall,
+            needsWebInstall,
+            needsWebBuild,
+            needsMigrations,
+            changedFiles
+        };
+    }
+
+    /**
+     * @deprecated Use checkForUpdates() which now includes requirements
+     * Kept for backwards compatibility
      */
     static async checkUpdateRequirements(branch: string): Promise<UpdateCheckResult> {
         try {
-            const { stdout } = await execAsync(`git diff HEAD..origin/${branch} --name-only`);
+            const { stdout } = await execWithTimeout(`git diff HEAD..origin/${branch} --name-only`);
             const changedFiles = stdout.trim().split("\n").filter(f => f.length > 0);
-
-            const needsRootInstall = changedFiles.some(file =>
-                file === "package.json" || file === "bun.lock"
-            );
-
-            const needsWebInstall = changedFiles.some(file =>
-                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/")
-            );
-
-            return {
-                needsRootInstall,
-                needsWebInstall,
-                needsWebBuild,
-                needsMigrations,
-                changedFiles
-            };
+            return this.analyzeChangedFiles(changedFiles);
         } catch (e) {
             console.error("Failed to check update requirements:", e);
             return {
@@ -129,9 +179,10 @@ export class UpdateService {
      * Save the current commit for potential rollback
      */
     static async saveRollbackPoint(): Promise<string> {
-        const { stdout } = await execAsync("git rev-parse HEAD");
+        const { stdout } = await execWithTimeout("git rev-parse HEAD");
         const commit = stdout.trim();
         await writeFile(this.ROLLBACK_FILE, commit);
+        this.rollbackPointExists = true; // Cache the state
         return commit;
     }
 
@@ -141,8 +192,9 @@ export class UpdateService {
     static async rollback(): Promise<{ success: boolean; message: string }> {
         try {
             const rollbackCommit = await readFile(this.ROLLBACK_FILE, "utf-8");
-            await execAsync(`git reset --hard ${rollbackCommit.trim()}`);
+            await execWithTimeout(`git reset --hard ${rollbackCommit.trim()}`);
             await unlink(this.ROLLBACK_FILE);
+            this.rollbackPointExists = false;
             return { success: true, message: `Rolled back to ${rollbackCommit.trim().substring(0, 7)}` };
         } catch (e) {
             return {
@@ -154,12 +206,18 @@ export class UpdateService {
 
     /**
      * Check if a rollback point exists
+     * Uses cache when available to avoid file system access
      */
     static async hasRollbackPoint(): Promise<boolean> {
+        if (this.rollbackPointExists !== null) {
+            return this.rollbackPointExists;
+        }
         try {
             await readFile(this.ROLLBACK_FILE, "utf-8");
+            this.rollbackPointExists = true;
             return true;
         } catch {
+            this.rollbackPointExists = false;
             return false;
         }
     }
@@ -168,26 +226,32 @@ export class UpdateService {
      * Perform the git update
      */
     static async performUpdate(branch: string): Promise<void> {
-        await execAsync(`git reset --hard origin/${branch}`);
+        await execWithTimeout(`git reset --hard origin/${branch}`);
     }
 
     /**
      * Install dependencies for specified projects
+     * Optimized: Parallel installation
      */
     static async installDependencies(options: { root: boolean; web: boolean }): Promise<string> {
-        const outputs: string[] = [];
+        const tasks: Promise<{ label: string; output: string }>[] = [];
 
         if (options.root) {
-            const { stdout } = await execAsync("bun install");
-            outputs.push(`📦 Root: ${stdout.trim() || "Done"}`);
+            tasks.push(
+                execWithTimeout("bun install", INSTALL_TIMEOUT_MS)
+                    .then(({ stdout }) => ({ label: "📦 Root", output: stdout.trim() || "Done" }))
+            );
         }
 
         if (options.web) {
-            const { stdout } = await execAsync("cd web && bun install");
-            outputs.push(`🌐 Web: ${stdout.trim() || "Done"}`);
+            tasks.push(
+                execWithTimeout("cd web && bun install", INSTALL_TIMEOUT_MS)
+                    .then(({ stdout }) => ({ label: "🌐 Web", output: stdout.trim() || "Done" }))
+            );
         }
 
-        return outputs.join("\n");
+        const results = await Promise.all(tasks);
+        return results.map(r => `${r.label}: ${r.output}`).join("\n");
     }
 
     /**
@@ -228,7 +292,7 @@ export class UpdateService {
             }
 
             const result = await this.executePostRestartTasks(context, channel);
-            await this.notifyPostRestartResult(channel, result, context);
+            await this.notifyPostRestartResult(channel, result);
             await this.cleanupContext();
         } catch (e) {
             console.error("Failed to handle post-restart context:", e);
@@ -301,21 +365,33 @@ export class UpdateService {
             }
         };
 
-        // 1. Install Dependencies if needed
+        // 1. Install Dependencies if needed (PARALLELIZED)
         if (context.installDependencies) {
             try {
                 progress.currentStep = "install";
                 await updateProgress();
 
-                const { stdout: rootOutput } = await execAsync("bun install");
-                const { stdout: webOutput } = await execAsync("cd web && bun install");
+                // Parallel installation of root and web dependencies
+                const [rootResult, webResult] = await Promise.all([
+                    execWithTimeout("bun install", INSTALL_TIMEOUT_MS)
+                        .then(({ stdout }) => ({ success: true, output: stdout.trim() || "Done" }))
+                        .catch(err => ({ success: false, output: err instanceof Error ? err.message : String(err) })),
+                    execWithTimeout("cd web && bun install", INSTALL_TIMEOUT_MS)
+                        .then(({ stdout }) => ({ success: true, output: stdout.trim() || "Done" }))
+                        .catch(err => ({ success: false, output: err instanceof Error ? err.message : String(err) }))
+                ]);
 
-                result.installOutput = `📦 Root: ${rootOutput.trim() || "Done"}\n🌐 Web: ${webOutput.trim() || "Done"}`;
+                result.installSuccess = rootResult.success && webResult.success;
+                result.installOutput = `📦 Root: ${rootResult.output}\n🌐 Web: ${webResult.output}`;
                 progress.installDone = true;
+
+                if (!result.installSuccess) {
+                    console.error("Dependency Install Failed:", result.installOutput);
+                }
             } catch (err: unknown) {
                 result.installSuccess = false;
                 result.installOutput = err instanceof Error ? err.message : String(err);
-                progress.installDone = true; // Mark as done even on failure
+                progress.installDone = true;
                 console.error("Dependency Install Failed:", err);
             }
         }
@@ -326,7 +402,7 @@ export class UpdateService {
                 progress.currentStep = "build";
                 await updateProgress();
 
-                const { stdout } = await execAsync("cd web && bun run build");
+                const { stdout } = await execWithTimeout("cd web && bun run build", BUILD_TIMEOUT_MS);
                 result.webBuildOutput = stdout.trim() || "Build completed successfully";
                 progress.buildDone = true;
             } catch (err: unknown) {
@@ -343,7 +419,7 @@ export class UpdateService {
                 progress.currentStep = "migrate";
                 await updateProgress();
 
-                const { stdout } = await execAsync("bun x drizzle-kit migrate");
+                const { stdout } = await execWithTimeout("bun x drizzle-kit migrate", DEFAULT_TIMEOUT_MS);
                 result.migrationOutput = stdout;
                 progress.migrateDone = true;
             } catch (err: unknown) {
@@ -368,9 +444,9 @@ export class UpdateService {
 
     private static async notifyPostRestartResult(
         channel: TextChannel,
-        result: PostRestartResult,
-        context: RestartContext
+        result: PostRestartResult
     ): Promise<void> {
+        // Use cached rollback state - we just saved it before restart
         const hasRollback = await this.hasRollbackPoint();
         await channel.send(getPostRestartEmbed(result, hasRollback));
     }
@@ -381,5 +457,6 @@ export class UpdateService {
         } catch {
             // File may not exist, ignore
         }
+        // Don't clear rollback cache here - rollback file persists
     }
 }
diff --git a/shared/scripts/docker-cleanup.sh b/shared/scripts/docker-cleanup.sh
new file mode 100755
index 0000000..a5a2e53
--- /dev/null
+++ b/shared/scripts/docker-cleanup.sh
@@ -0,0 +1,41 @@
+#!/bin/bash
+# Cleanup script for Docker resources
+# Use: ./shared/scripts/docker-cleanup.sh
+
+set -e
+
+echo "🧹 Aurora Docker Cleanup"
+echo "========================"
+
+# Stop running containers for this project
+echo ""
+echo "📦 Stopping Aurora containers..."
+docker compose down 2>/dev/null || true
+
+# Remove dangling images (untagged images from failed builds)
+echo ""
+echo "🗑️  Removing dangling images..."
+docker image prune -f
+
+# Optional: Remove unused build cache
+echo ""
+read -p "🔧 Remove Docker build cache? (y/N): " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]; then
+    docker builder prune -f
+    echo "✓ Build cache cleared"
+fi
+
+# Optional: Remove node_modules volumes (forces fresh install)
+echo ""
+read -p "📁 Remove node_modules volumes? (forces fresh install) (y/N): " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]; then
+    docker volume rm aurora_app_node_modules aurora_web_node_modules 2>/dev/null || true
+    echo "✓ Node modules volumes removed"
+fi
+
+echo ""
+echo "✅ Cleanup complete!"
+echo ""
+echo "Run 'docker compose up --build' to rebuild"

From c1da71227d76868cd3ea4ecf9d6e776e330eb514 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 23 Jan 2026 13:47:48 +0100
Subject: [PATCH 31/32] chore: update cleanup scripts

---
 shared/scripts/docker-cleanup.sh | 91 ++++++++++++++++++++++++++------
 1 file changed, 74 insertions(+), 17 deletions(-)

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

From 2ead35789d49b9109da05eaccd8602d7eb3fd186 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 23 Jan 2026 13:58:37 +0100
Subject: [PATCH 32/32] fix: prevent studio service from inheriting port 3000
 from app

---
 docker-compose.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docker-compose.yml b/docker-compose.yml
index 985c069..e29b8c0 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -66,7 +66,9 @@ services:
     # Reuse the same built image as app (no duplicate builds!)
     extends:
       service: app
+    # Clear inherited ports from app and only expose studio port
     ports:
+      !override
       - "127.0.0.1:4983:4983"
     # Override healthcheck since studio doesn't serve on port 3000
     healthcheck: