feat: debug panel with force unlocks and hard reset (#65)

## Summary
- Adds a new **Debug** tab to the game UI with two self-service tools for players with broken save state
- **Force Unlocks**: scans the player's save and grants any zones, quests, bosses, and exploration areas they've earned but that are still locked — shows a breakdown of what was unlocked (or reports nothing needed fixing)
- **Hard Reset**: wipes progress back to a fresh save (preserving lifetime stats), guarded behind a confirmation modal to prevent accidental clicks

## Files added
- `apps/api/src/routes/debug.ts` — two POST endpoints (`/force-unlocks`, `/hard-reset`)
- `apps/web/src/components/game/debugPanel.tsx` — the Debug tab UI
- `apps/web/src/components/ui/confirmationModal.tsx` — reusable confirmation modal

## Files modified
- `apps/api/src/index.ts` — registers the debug router
- `packages/types/src/interfaces/api.ts` — adds `ForceUnlocksResponse` type
- `packages/types/src/index.ts` — exports the new type
- `apps/web/src/api/client.ts` — adds `forceUnlocks()` and `debugHardReset()` API calls
- `apps/web/src/context/gameContext.tsx` — wires both functions into game context
- `apps/web/src/components/game/gameLayout.tsx` — adds the Debug tab
- `apps/web/src/styles.css` — styles for action buttons, cards, result messages, and confirmation modal

✨ This PR was created with help from Hikari~ 🌸

Reviewed-on: #65
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>

apps/web/src/api/client.ts

@@ -21,6 +21,7 @@ import type {
   ExploreCollectResponse,
   ExploreStartRequest,
   ExploreStartResponse,
+  ForceUnlocksResponse,
   LoadResponse,
   PrestigeRequest,
   PrestigeResponse,
@@ -256,6 +257,24 @@ const craftRecipe = async(
   });
 };
 
+/**
+ * Sends a request to fix any missing unlocks in the player's game state.
+ * @returns The corrected game state and counts of what was unlocked.
+ */
+const forceUnlocks = async(): Promise<ForceUnlocksResponse> => {
+  return await fetchJson<ForceUnlocksResponse>("/debug/force-unlocks", {
+    method: "POST",
+  });
+};
+
+/**
+ * Performs a complete hard reset of the player's game state via the debug endpoint.
+ * @returns The fresh game state as a LoadResponse.
+ */
+const debugHardReset = async(): Promise<LoadResponse> => {
+  return await fetchJson<LoadResponse>("/debug/hard-reset", { method: "POST" });
+};
+
 /**
  * Fetches a public player profile by Discord ID.
  * @param discordId - The Discord ID of the player to look up.
@@ -288,6 +307,8 @@ export {
   challengeBoss,
   collectExploration,
   craftRecipe,
+  debugHardReset,
+  forceUnlocks,
   getAbout,
   getAuthUrl,
   getPublicProfile,

apps/web/src/components/game/debugPanel.tsx

@@ -0,0 +1,145 @@
+/**
+ * @file Debug panel component with administrative tools for correcting player state.
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+/* eslint-disable max-lines-per-function -- Panel has multiple async handlers and conditional renders */
+/* eslint-disable stylistic/max-len -- Debug descriptions require full explanatory text */
+import { type JSX, useState } from "react";
+import { useGame } from "../../context/gameContext.js";
+import { ConfirmationModal } from "../ui/confirmationModal.js";
+
+type ActiveModal = "force-unlocks" | "hard-reset" | null;
+
+/**
+ * Renders the debug panel with tools for fixing stuck game state.
+ * @returns The JSX element.
+ */
+const DebugPanel = (): JSX.Element => {
+  const { forceUnlocks, debugHardReset, isLoading } = useGame();
+  const [ activeModal, setActiveModal ] = useState<ActiveModal>(null);
+  const [ forceUnlocksResult, setForceUnlocksResult ] = useState<string | null>(null);
+
+  function handleOpenForceUnlocks(): void {
+    setForceUnlocksResult(null);
+    setActiveModal("force-unlocks");
+  }
+
+  function handleOpenHardReset(): void {
+    setActiveModal("hard-reset");
+  }
+
+  function handleCancel(): void {
+    setActiveModal(null);
+  }
+
+  function handleConfirmForceUnlocks(): void {
+    setActiveModal(null);
+    void (async(): Promise<void> => {
+      const result = await forceUnlocks();
+      const parts: Array<string> = [];
+      if (result.zonesUnlocked > 0) {
+        parts.push(`${String(result.zonesUnlocked)} zone(s)`);
+      }
+      if (result.questsUnlocked > 0) {
+        parts.push(`${String(result.questsUnlocked)} quest(s)`);
+      }
+      if (result.bossesUnlocked > 0) {
+        parts.push(`${String(result.bossesUnlocked)} boss(es)`);
+      }
+      if (result.explorationUnlocked > 0) {
+        parts.push(`${String(result.explorationUnlocked)} exploration area(s)`);
+      }
+      const total
+        = result.zonesUnlocked
+        + result.questsUnlocked
+        + result.bossesUnlocked
+        + result.explorationUnlocked;
+      const message
+        = parts.length === 0
+          ? "Everything looks correct — no missing unlocks were found."
+          : `Fixed ${String(total)} unlock(s): ${parts.join(", ")}.`;
+      setForceUnlocksResult(message);
+    })();
+  }
+
+  function handleConfirmHardReset(): void {
+    setActiveModal(null);
+    void debugHardReset();
+  }
+
+  return (
+    <div className="panel">
+      <h2>{"🔧 Debug Tools"}</h2>
+      <p className="panel-description">
+        {
+          "These tools are intended to fix broken game state. Use them with care — some operations are irreversible."
+        }
+      </p>
+
+      <div className="debug-actions">
+        <div className="debug-action-card">
+          <h3>{"🔓 Force Unlocks"}</h3>
+          <p>
+            {
+              "Scans your game state and unlocks any zones, quests, and bosses that you have earned but that are still incorrectly locked."
+            }
+          </p>
+          <button
+            className="action-button"
+            disabled={isLoading}
+            onClick={handleOpenForceUnlocks}
+            type="button"
+          >
+            {"Force Unlocks"}
+          </button>
+          {forceUnlocksResult !== null
+            && <p className="debug-result-message">{forceUnlocksResult}</p>
+          }
+        </div>
+
+        <div className="debug-action-card">
+          <h3>{"💀 Hard Reset"}</h3>
+          <p>
+            {
+              "Completely wipes all progress and resets your account to a brand-new state. This cannot be undone."
+            }
+          </p>
+          <button
+            className="action-button action-button-danger"
+            disabled={isLoading}
+            onClick={handleOpenHardReset}
+            type="button"
+          >
+            {"Hard Reset"}
+          </button>
+        </div>
+      </div>
+
+      {activeModal === "force-unlocks"
+        && <ConfirmationModal
+          confirmLabel="Yes, Force Unlocks"
+          description="This will scan your save data and grant access to any zones, quests, and bosses that you have already earned but are incorrectly locked. This operation is safe and non-destructive."
+          isLoading={isLoading}
+          onCancel={handleCancel}
+          onConfirm={handleConfirmForceUnlocks}
+          title="Force Unlocks"
+        />
+      }
+
+      {activeModal === "hard-reset"
+        && <ConfirmationModal
+          confirmLabel="Yes, Wipe Everything"
+          description="This will permanently delete all of your current progress — gold, adventurers, upgrades, bosses, quests, and zones — and reset your account to a brand-new state. Lifetime stats are preserved, but everything else will be gone forever."
+          isLoading={isLoading}
+          onCancel={handleCancel}
+          onConfirm={handleConfirmHardReset}
+          title="⚠️ Hard Reset — This Cannot Be Undone"
+        />
+      }
+    </div>
+  );
+};
+
+export { DebugPanel };

apps/web/src/components/game/gameLayout.tsx

@@ -23,6 +23,7 @@ import { CodexToast } from "./codexToast.js";
 import { CompanionPanel } from "./companionPanel.js";
 import { CraftingPanel } from "./craftingPanel.js";
 import { DailyChallengePanel } from "./dailyChallengePanel.js";
+import { DebugPanel } from "./debugPanel.js";
 import { EditProfileModal } from "./editProfileModal.js";
 import { EquipmentPanel } from "./equipmentPanel.js";
 import { ExplorationPanel } from "./explorationPanel.js";
@@ -57,7 +58,8 @@ type Tab =
   | "crafting"
   | "character"
   | "companions"
-  | "story";
+  | "story"
+  | "debug";
 
 const baseTabs: Array<{ id: Tab; label: string }> = [
   { id: "adventurers", label: "⚔️ Adventurers" },
@@ -78,6 +80,7 @@ const baseTabs: Array<{ id: Tab; label: string }> = [
   { id: "story", label: "📖 Story" },
   { id: "codex", label: "🗺️ Codex" },
   { id: "about", label: "ℹ️ About" },
+  { id: "debug", label: "🔧 Debug" },
 ];
 
 /**
@@ -242,6 +245,7 @@ const GameLayout = (): JSX.Element => {
             {activeTab === "story" && <StoryPanel />}
             {activeTab === "codex" && <CodexPanel />}
             {activeTab === "about" && <AboutPanel />}
+            {activeTab === "debug" && <DebugPanel />}
           </div>
         </main>
       </div>

apps/web/src/components/ui/confirmationModal.tsx

@@ -0,0 +1,68 @@
+/**
+ * @file Reusable confirmation modal component for destructive operations.
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+import type { JSX } from "react";
+
+interface ConfirmationModalProperties {
+  readonly title:        string;
+  readonly description:  string;
+  readonly confirmLabel: string;
+  readonly onConfirm:    ()=> void;
+  readonly onCancel:     ()=> void;
+  readonly isLoading:    boolean;
+}
+
+/**
+ * Renders a confirmation modal for destructive operations.
+ * @param props - The modal properties.
+ * @param props.title - The modal heading.
+ * @param props.description - Warning text explaining what the operation does.
+ * @param props.confirmLabel - Label for the confirm button.
+ * @param props.onConfirm - Callback fired when the player confirms.
+ * @param props.onCancel - Callback fired when the player cancels.
+ * @param props.isLoading - Whether the operation is currently in progress.
+ * @returns The JSX element.
+ */
+const ConfirmationModal = ({
+  title,
+  description,
+  confirmLabel,
+  onConfirm,
+  onCancel,
+  isLoading,
+}: ConfirmationModalProperties): JSX.Element => {
+  return (
+    <div className="modal-overlay">
+      <div className="modal">
+        <h2>{title}</h2>
+        <p>{description}</p>
+        <p className="modal-note">{"Are you sure you want to do this?"}</p>
+        <div className="modal-actions">
+          <button
+            className="modal-close-button modal-button-danger"
+            disabled={isLoading}
+            onClick={onConfirm}
+            type="button"
+          >
+            {isLoading
+              ? "Working..."
+              : confirmLabel}
+          </button>
+          <button
+            className="modal-close-button"
+            disabled={isLoading}
+            onClick={onCancel}
+            type="button"
+          >
+            {"Cancel"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { ConfirmationModal };

apps/web/src/context/gameContext.tsx

@@ -42,6 +42,8 @@ import {
   challengeBoss as challengeBossApi,
   collectExploration as collectExplorationApi,
   craftRecipe as craftRecipeApi,
+  debugHardReset as debugHardResetApi,
+  forceUnlocks as forceUnlocksApi,
   loadGame,
   prestige as prestigeApi,
   resetProgress as resetProgressApi,
@@ -546,6 +548,24 @@ interface GameContextValue {
    */
   resetProgress: ()=> Promise<void>;
 
+  /**
+   * Force-unlock any zones, quests, and bosses the player has earned but that
+   * are still incorrectly locked due to a state bug.
+   * @returns Counts of what was corrected.
+   */
+  forceUnlocks: ()=> Promise<{
+    bossesUnlocked:      number;
+    explorationUnlocked: number;
+    questsUnlocked:      number;
+    zonesUnlocked:       number;
+  }>;
+
+  /**
+   * Completely wipe the player's progress back to a brand-new save via the
+   * debug endpoint.
+   */
+  debugHardReset: ()=> Promise<void>;
+
   /**
    * Last auto-boss fight result — null until the first auto fight completes or
    * when auto-boss is toggled off.
@@ -2025,6 +2045,61 @@ export const GameProvider = ({
     }
   }, []);
 
+  const forceUnlocks = useCallback(async() => {
+    try {
+      const data = await forceUnlocksApi();
+      setState(data.state);
+      if (data.signature !== undefined) {
+        signatureReference.current = data.signature;
+        localStorage.setItem("elysium_save_signature", data.signature);
+      }
+      return {
+        bossesUnlocked:      data.bossesUnlocked,
+        explorationUnlocked: data.explorationUnlocked,
+        questsUnlocked:      data.questsUnlocked,
+        zonesUnlocked:       data.zonesUnlocked,
+      };
+    } catch (error_: unknown) {
+      setError(
+        error_ instanceof Error
+          ? error_.message
+          : "Failed to force unlocks",
+      );
+      return {
+        bossesUnlocked:      0,
+        explorationUnlocked: 0,
+        questsUnlocked:      0,
+        zonesUnlocked:       0,
+      };
+    }
+  }, []);
+
+  const debugHardReset = useCallback(async() => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await debugHardResetApi();
+      setState(data.state);
+      setLastSavedAt(data.state.player.lastSavedAt);
+      setSchemaOutdated(false);
+      setOfflineGold(0);
+      setOfflineEssence(0);
+      setLoginBonus(null);
+      if (data.signature !== undefined) {
+        signatureReference.current = data.signature;
+        localStorage.setItem("elysium_save_signature", data.signature);
+      }
+    } catch (error_: unknown) {
+      setError(
+        error_ instanceof Error
+          ? error_.message
+          : "Failed to reset progress",
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
   const dismissLoginBonus = useCallback(() => {
     setLoginBonus(null);
   }, []);
@@ -2054,6 +2129,7 @@ export const GameProvider = ({
       completedQuestToasts,
       craftRecipe,
       currentSchemaVersion,
+      debugHardReset,
       dismissAchievement,
       dismissApotheosisToast,
       dismissBattle,
@@ -2072,6 +2148,7 @@ export const GameProvider = ({
       failedQuestToasts,
       flushBossLoreToasts,
       forceSync,
+      forceUnlocks,
       formatNumber,
       handleClick,
       isLoading,
@@ -2125,6 +2202,7 @@ export const GameProvider = ({
     completeChapter,
     craftRecipe,
     currentSchemaVersion,
+    debugHardReset,
     dismissAchievement,
     dismissApotheosisToast,
     dismissBattle,
@@ -2142,6 +2220,7 @@ export const GameProvider = ({
     error,
     flushBossLoreToasts,
     forceSync,
+    forceUnlocks,
     handleClick,
     isLoading,
     isSyncing,

apps/web/src/styles.css

@@ -4515,3 +4515,84 @@ body::before {
   object-fit: cover;
   width: 80px;
 }
+
+/* ===================== ACTION BUTTONS ===================== */
+.action-button {
+  background: var(--colour-accent);
+  border: none;
+  border-radius: var(--radius);
+  color: #fff;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 700;
+  margin-top: 0.5rem;
+  padding: 0.55rem 1.25rem;
+  transition: background 0.15s;
+  width: 100%;
+}
+
+.action-button:hover:not(:disabled) {
+  background: var(--colour-accent-light);
+}
+
+.action-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.action-button-danger {
+  background: var(--colour-error);
+}
+
+.action-button-danger:hover:not(:disabled) {
+  background: #f87171;
+}
+
+/* ===================== MODAL VARIANTS ===================== */
+.modal-button-danger {
+  background: var(--colour-error);
+}
+
+.modal-button-danger:hover:not(:disabled) {
+  background: #f87171;
+}
+
+/* ===================== DEBUG PANEL ===================== */
+.debug-actions {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  margin-top: 1rem;
+}
+
+.debug-action-card {
+  background: var(--colour-surface);
+  border: 1px solid var(--colour-border);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem;
+}
+
+.debug-action-card h3 {
+  color: var(--colour-accent-light);
+  font-size: 1rem;
+  margin: 0 0 0.5rem;
+}
+
+.debug-action-card > p {
+  color: var(--colour-text-muted);
+  flex: 1;
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+.debug-result-message {
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid var(--colour-success);
+  border-radius: var(--radius);
+  color: var(--colour-success);
+  font-size: 0.8rem;
+  margin-top: 0.75rem;
+  padding: 0.5rem 0.75rem;
+}