feat: add companion system with quest-time reduction server validation

Introduces 10 unlockable companions (Lyra, Finn, Wren, Aldric, Sera, Kael,
Zuri, Mira, Vex, Pria), each providing a unique bonus: passive gold, click
gold, boss damage, essence income, or quest-time reduction.

Quest-time reduction is validated server-side: computeQuestRewards applies
the active companion's reduction to the effective duration check, and the
income validation budget accounts for passive gold and essence bonuses.
Server recomputes unlockedCompanionIds on every save using DB-authoritative
lifetime stats and validates the active companion ID.

Companion bonuses are also applied in the client tick engine and
boss.ts calculatePartyStats.

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

@@ -87,6 +87,10 @@ const HOW_TO_PLAY = [
     title: "🤖 Auto-Quest & Auto-Boss",
     body: "Toggle automation in the Quests and Boss Encounters panels! Auto-Quest automatically sends your party on the highest-zone available quest as soon as one completes, skipping quests whose combat power requirement isn't met. Auto-Boss automatically challenges the highest available boss as soon as one is ready. Both can be toggled on or off at any time using the 🤖 Auto button in each panel header.",
   },
+  {
+    title: "👥 Companions",
+    body: "Unlock companions by reaching certain milestones across all your runs. Each companion provides a powerful permanent bonus: increased passive gold, click gold, boss damage, essence income, or reduced quest time. You can only have one companion active at a time — choose wisely based on your current strategy! Companions are unlocked permanently once their condition is met and will never be lost.",
+  },
   {
     title: "☁️ Cloud Saves",
     body: "Your progress is automatically saved to the cloud every 30 seconds whilst you play. You can also force a manual save at any time using the sync button in the resource bar. Your save is protected by HMAC validation to ensure data integrity.",

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

@@ -0,0 +1,117 @@
+import { COMPANIONS } from "@elysium/types";
+import type { Companion } from "@elysium/types";
+import { useGame } from "../../context/GameContext.js";
+
+const BONUS_LABELS: Record<string, string> = {
+  passiveGold: "Passive Gold",
+  clickGold: "Click Gold",
+  bossDamage: "Boss Damage",
+  essenceIncome: "Essence Income",
+  questTime: "Quest Time",
+};
+
+const UNLOCK_LABELS: Record<string, string> = {
+  lifetimeBosses: "lifetime bosses defeated",
+  lifetimeQuests: "lifetime quests completed",
+  lifetimeGold: "lifetime gold earned",
+  prestige: "prestige(s)",
+  transcendence: "transcendence(s)",
+  apotheosis: "apotheosis",
+};
+
+const formatThreshold = (type: string, threshold: number): string => {
+  if (type === "lifetimeGold") {
+    if (threshold >= 1e12) return `${(threshold / 1e12).toFixed(0)}T`;
+    if (threshold >= 1e9) return `${(threshold / 1e9).toFixed(0)}B`;
+    if (threshold >= 1e6) return `${(threshold / 1e6).toFixed(0)}M`;
+    if (threshold >= 1e3) return `${(threshold / 1e3).toFixed(0)}K`;
+    return threshold.toString();
+  }
+  return threshold.toString();
+};
+
+const CompanionCard = ({
+  companion,
+  isUnlocked,
+  isActive,
+  onSelect,
+}: {
+  companion: Companion;
+  isUnlocked: boolean;
+  isActive: boolean;
+  onSelect: () => void;
+}): React.JSX.Element => {
+  const bonusSign = companion.bonus.type === "questTime" ? "-" : "+";
+  const bonusPercent = Math.round(companion.bonus.value * 100);
+  const bonusLabel = BONUS_LABELS[companion.bonus.type] ?? companion.bonus.type;
+
+  return (
+    <div className={`companion-card ${isUnlocked ? "companion-unlocked" : "companion-locked"} ${isActive ? "companion-active" : ""}`}>
+      <div className="companion-header">
+        <div className="companion-name-block">
+          <span className="companion-name">{companion.name}</span>
+          <span className="companion-title">{companion.title}</span>
+        </div>
+        {isActive && <span className="companion-active-badge">Active</span>}
+      </div>
+
+      <p className="companion-description">{companion.description}</p>
+
+      <div className="companion-bonus">
+        <span className="companion-bonus-label">{bonusLabel}</span>
+        <span className="companion-bonus-value">{bonusSign}{bonusPercent}%</span>
+      </div>
+
+      {isUnlocked ? (
+        <button
+          className={`companion-select-btn ${isActive ? "companion-select-active" : ""}`}
+          onClick={onSelect}
+          type="button"
+        >
+          {isActive ? "Deactivate" : "Activate"}
+        </button>
+      ) : (
+        <div className="companion-unlock-requirement">
+          🔒 Unlock: {formatThreshold(companion.unlock.type, companion.unlock.threshold)} {UNLOCK_LABELS[companion.unlock.type] ?? companion.unlock.type}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const CompanionPanel = (): React.JSX.Element => {
+  const { state, setActiveCompanion } = useGame();
+
+  if (!state) return <></>;
+
+  const unlockedIds = state.companions?.unlockedCompanionIds ?? [];
+  const activeId = state.companions?.activeCompanionId ?? null;
+
+  const handleSelect = (companionId: string): void => {
+    setActiveCompanion(activeId === companionId ? null : companionId);
+  };
+
+  return (
+    <div className="companion-panel">
+      <h2>👥 Companions</h2>
+      <p className="companion-intro">
+        Companions provide powerful bonuses while active. You can only have one companion active at a time.
+        {activeId && (
+          <> Currently active: <strong>{COMPANIONS.find((c) => c.id === activeId)?.name ?? activeId}</strong>.</>
+        )}
+      </p>
+
+      <div className="companion-grid">
+        {COMPANIONS.map((companion) => (
+          <CompanionCard
+            key={companion.id}
+            companion={companion}
+            isUnlocked={unlockedIds.includes(companion.id)}
+            isActive={activeId === companion.id}
+            onSelect={() => { handleSelect(companion.id); }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

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

@@ -22,10 +22,11 @@ import { UpgradePanel } from "./UpgradePanel.js";
 import { DailyChallengePanel } from "./DailyChallengePanel.js";
 import { ExplorationPanel } from "./ExplorationPanel.js";
 import { CharacterSheetPanel } from "./CharacterSheetPanel.js";
+import { CompanionPanel } from "./CompanionPanel.js";
 import { CraftingPanel } from "./CraftingPanel.js";
 import { LoginBonusModal } from "./LoginBonusModal.js";
 
-type Tab = "adventurers" | "upgrades" | "quests" | "bosses" | "equipment" | "achievements" | "prestige" | "transcendence" | "apotheosis" | "statistics" | "daily" | "codex" | "about" | "exploration" | "crafting" | "character";
+type Tab = "adventurers" | "upgrades" | "quests" | "bosses" | "equipment" | "achievements" | "prestige" | "transcendence" | "apotheosis" | "statistics" | "daily" | "codex" | "about" | "exploration" | "crafting" | "character" | "companions";
 
 const BASE_TABS: { id: Tab; label: string }[] = [
   { id: "adventurers", label: "⚔️ Adventurers" },
@@ -40,6 +41,7 @@ const BASE_TABS: { id: Tab; label: string }[] = [
   { id: "transcendence", label: "🌌 Transcendence" },
   { id: "apotheosis", label: "✨ Apotheosis" },
   { id: "statistics", label: "📊 Statistics" },
+  { id: "companions", label: "👥 Companions" },
   { id: "character", label: "📋 Character" },
   { id: "achievements", label: "🏆 Achievements" },
   { id: "codex", label: "📖 Codex" },
@@ -135,6 +137,7 @@ export const GameLayout = (): React.JSX.Element => {
             {activeTab === "crafting" && <CraftingPanel />}
             {activeTab === "statistics" && <StatisticsPanel />}
             {activeTab === "daily" && <DailyChallengePanel />}
+            {activeTab === "companions" && <CompanionPanel />}
             {activeTab === "character" && <CharacterSheetPanel />}
             {activeTab === "codex" && <CodexPanel />}
             {activeTab === "about" && <AboutPanel />}