fix: add test coverage for crafting-utils, pact-utils, and activity-log

refactor: complete error handling standardization (issue #101 )
Prestige Store: - Convert doPrestige() to return Result<void> with specific error codes (INVALID_PRESTIGE_ID, PRESTIGE_MAX_LEVEL, INSUFFICIENT_INSIGHT) - Convert startPactRitual() to return Result<void> with specific error codes (GUARDIAN_NOT_DEFEATED, PACT_ALREADY_SIGNED, PACT_SLOTS_FULL, INSUFFICIENT_MANA, RITUAL_IN_PROGRESS) Combat Actions: - Add try/catch wrapper inside processCombatTick with safe fallback defaults - Add makeDefaultCombatTickResult helper for error recovery LocalStorage Error Handling: - Create safe-persist.ts utility wrapping localStorage with error handling (corrupted JSON, quota exceeded, unexpected failures) - Update all 8 Zustand stores to use createSafeStorage() in persist middleware UI Updates: - Update GuardianPactsTab to use Result pattern for ritual error messages Tests: - Update store-actions-combat-prestige.test.ts for Result return types - Update store-actions.test.ts ManaStore tests for Result pattern - Remove duplicate Prestige/Discipline sections from store-actions.test.ts - All files under 400 line limit 601 tests pass (3 pre-existing failures in spire-utils.test.ts)
2026-05-22 14:39:27 +02:00 · 2026-05-22 09:19:20 +02:00 · 2026-05-20 21:05:22 +02:00 · 2026-05-20 19:48:40 +02:00 · 2026-05-20 18:38:24 +02:00 · 2026-05-20 17:46:43 +02:00
365 changed files with 49713 additions and 19691 deletions
@@ -1,128 +0,0 @@
 {
 "Meta": {
  "Strict": true,
  "Retries": 10,
  "MaxDeletes": 10,
  "SkipDirNlink": 20,
  "CaseInsensi": false,
  "ReadOnly": false,
  "NoBGJob": true,
  "OpenCache": 0,
  "OpenCacheLimit": 10000,
  "Heartbeat": 12000000000,
  "MountPoint": "/tmp/storage/containers/rundjuicefs-31fe40a7-808b-4861-a3c6-5e1361ba66cd-my-project",
  "Subdir": "/0954660f-fdaf-430e-9c08-43d856f4b183/chat-97147419-5634-40fa-8c67-d722ea396734/my-project",
  "AtimeMode": "noatime",
  "DirStatFlushPeriod": 1000000000,
  "SkipDirMtime": 100000000,
  "Sid": 4039678,
  "SortDir": false,
  "FastStatfs": false,
  "TTLCleanupInterval": 1800000000000
 },
 "Format": {
  "Name": "pcs-ue6ju0nuiu0hz7tjc-0e3odv6t4dackr8s3",
  "UUID": "ad4b5b55-9406-4e74-b5e1-5422c94dd1fa",
  "Storage": "oss",
  "Bucket": "https://pcs-ue6ju0nuiu0hz7tjc-0e3odv6t4dackr8s3.oss-cn-hongkong-internal.aliyuncs.com",
  "AccessKey": "STS.NXg1AmEjJ1XZCYZMa5mH1q66p",
  "SecretKey": "removed",
  "SessionToken": "removed",
  "BlockSize": 4096,
  "Compression": "none",
  "HashPrefix": true,
  "EncryptAlgo": "aes256gcm-rsa",
  "TrashDays": 0,
  "MetaVersion": 1,
  "MinClientVersion": "1.1.0-A",
  "DirStats": true,
  "EnableACL": false,
  "Consul": "21.0.14.104:8500",
  "CustomLabels": "cluster:pfs-j6cm9t56111f4x38;uid:1936221977589032",
  "PushGateway": "http://cn-hongkong-intranet.arms.aliyuncs.com/prometheus/322760eec05a83d258d354fca51498ab/1047553595254976/tiwz7q7d94/cn-hongkong/api/v2"
 },
 "Chunk": {
  "CacheDir": "/var/jfsCache/ad4b5b55-9406-4e74-b5e1-5422c94dd1fa",
  "CacheMode": 384,
  "CacheSize": 107374182400,
  "CacheItems": 0,
  "CacheChecksum": "extend",
  "CacheEviction": "2-random",
  "CacheScanInterval": 3600000000000,
  "CacheExpire": 0,
  "OSCache": true,
  "FreeSpace": 0.1,
  "AutoCreate": true,
  "Compress": "none",
  "MaxUpload": 20,
  "MaxStageWrite": 1000,
  "MaxRetries": 10,
  "UploadLimit": 0,
  "DownloadLimit": 0,
  "Writeback": false,
  "UploadDelay": 0,
  "UploadHours": "",
  "HashPrefix": true,
  "BlockSize": 4194304,
  "GetTimeout": 60000000000,
  "PutTimeout": 60000000000,
  "CacheFullBlock": true,
  "CacheLargeWrite": false,
  "BufferSize": 314572800,
  "Readahead": 33554432,
  "Prefetch": 1
 },
 "Security": {
  "EnableCap": false,
  "EnableSELinux": false
 },
 "Port": {},
 "Version": "1.3.0+2025-11-13.7d12dfcb",
 "AttrTimeout": 1000000000,
 "DirEntryTimeout": 1000000000,
 "NegEntryTimeout": 0,
 "EntryTimeout": 1000000000,
 "ReaddirCache": false,
 "BackupMeta": 3600000000000,
 "BackupSkipTrash": false,
 "PrefixInternal": false,
 "HideInternal": false,
 "AllSquash": {
  "Uid": 1001,
  "Gid": 1001
 },
 "NonDefaultPermission": true,
 "UMask": 0,
 "Pid": 221,
 "PPid": 212,
 "CommPath": "/tmp/fuse_fd_comm.212",
 "StatePath": "/tmp/state212.json",
 "FuseOpts": {
  "AllowOther": true,
  "Options": [
   "nonempty",
   "default_permissions"
  ],
  "MaxBackground": 200,
  "MaxWrite": 0,
  "MaxReadAhead": 1048576,
  "IgnoreSecurityLabels": false,
  "RememberInodes": false,
  "FsName": "JuiceFS:pcs-ue6ju0nuiu0hz7tjc-0e3odv6t4dackr8s3",
  "Name": "juicefs",
  "SingleThreaded": false,
  "DisableXAttrs": true,
  "Debug": false,
  "EnableLocks": true,
  "EnableSymlinkCaching": true,
  "ExplicitDataCacheControl": false,
  "DirectMount": true,
  "DirectMountFlags": 0,
  "EnableAcl": false,
  "EnableWriteback": false,
  "DontUmask": true,
  "OtherCaps": 0,
  "NoAllocForRead": false,
  "Timeout": 900000000000
 }
 }
@@ -48,4 +48,4 @@ prompt
 server.log
 # Skills directory
-/skills/
+.desloppify/
@@ -0,0 +1,16 @@
 #!/bin/sh
 changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
 if echo "$changed_files" | grep --quiet -E "package.json|package-lock.json"; then
  echo "📦 Dependencies changed. Syncing..."
  # --no-progress stops the terminal spam
  # --loglevel error ensures we only see the bad stuff
  if npm install --no-progress --loglevel error; then
    echo "✅ Node modules are up to date."
  else
    echo "❌ npm install failed! Please check your connection or package.json."
    exit 1
  fi
 fi
@@ -0,0 +1,27 @@
 #!/bin/sh
 echo "🔍 Running pre-commit checks..."
 # Get staged files (added, copied, modified)
 STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM)
 if [ -n "$STAGED_FILES" ]; then
  echo "📏 Checking file sizes..."
  node .husky/scripts/check-file-size.js $STAGED_FILES
  if [ $? -ne 0 ]; then
    exit 1
  fi
 fi
 # Generate project structure
 echo "🗺️ Updating project structure..."
 node .husky/scripts/generate-project-tree.js
 node .husky/scripts/generate-dependency-graph.js
 if [ $? -ne 0 ]; then
  exit 1
 fi
 # Auto-add the generated project structure to the commit
 git add docs/project-structure.txt
 echo "✅ All pre-commit checks passed!"
@@ -0,0 +1,63 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 const fs = require('fs');
 const path = require('path');
 const MAX_LINES = 400;
 // List of file patterns to ignore (optional, can be customized)
 const IGNORE_PATTERNS = [
  /\.lock$/,  // Lock files
  /\.min\.js$/,  // Minified files
  /\.map$/,  // Source maps
  /package-lock\.json$/,
  /bun\.lock$/,
  /tsconfig\.tsbuildinfo$/,
  /\.md$/,  // Markdown documentation files
  /context\.md$/,  // Context files for sub-agents
  /project-structure\.txt$/,  // Generated project structure
  /dependency-graph\.json$/,
 ];
 function shouldIgnore(filePath) {
  return IGNORE_PATTERNS.some(pattern => pattern.test(filePath));
 }
 const files = process.argv.slice(2);
 if (files.length === 0) {
  console.log('ℹ️ No files to check');
  process.exit(0);
 }
 let hasError = false;
 files.forEach(file => {
  // Skip ignored patterns
  if (shouldIgnore(file)) {
    console.log(`⏭️ Skipping ${file} (ignored pattern)`);
    return;
  }
  // Check if file exists (it might have been deleted)
  if (!fs.existsSync(file)) {
    console.log(`⏭️ Skipping ${file} (file does not exist)`);
    return;
  }
  try {
    const content = fs.readFileSync(file, 'utf8');
    const lines = content.split('\n').length;
    if (lines > MAX_LINES) {
      console.error(`❌ ${file} is too large (${lines} lines, max ${MAX_LINES}). AI agents will struggle. Please refactor!`);
      hasError = true;
    } else {
      console.log(`✅ ${file} (${lines} lines) - OK`);
    }
  } catch (err) {
    console.error(`⚠️ Error reading ${file}: ${err.message}`);
    // Don't fail on read errors, just warn
  }
 });
 if (hasError) {
  process.exit(1);
 }
@@ -0,0 +1,119 @@
 #!/usr/bin/env node
 /**
 * generate-dependency-graph.js
 *
 * Generates two files in docs/ on every commit:
 *
 *   docs/dependency-graph.json   — full import graph for src/lib/game/
 *   docs/circular-deps.txt       — list of circular dependency chains (empty = clean)
 *
 * Run manually:  node .husky/scripts/generate-dependency-graph.js
 * Requires:      bun add -d madge
 */
 const path = require('path');
 const fs = require('fs');
 const { execSync } = require('child_process');
 const ROOT = path.resolve(__dirname, '../../');
 const DOCS_DIR = path.join(ROOT, 'docs');
 const GRAPH_OUT = path.join(DOCS_DIR, 'dependency-graph.json');
 const CIRCULAR_OUT = path.join(DOCS_DIR, 'circular-deps.txt');
 // Check madge is available
 function madgeAvailable() {
  try {
    execSync('bunx madge --version', { stdio: 'ignore', cwd: ROOT });
    return true;
  } catch {
    return false;
  }
 }
 function run(cmd) {
  return execSync(cmd, { cwd: ROOT, encoding: 'utf8' });
 }
 if (!madgeAvailable()) {
  console.error('madge not found. Install with: bun add -d madge');
  process.exit(1);
 }
 if (!fs.existsSync(DOCS_DIR)) {
  fs.mkdirSync(DOCS_DIR, { recursive: true });
 }
 // ── 1. Full dependency graph for the game library ─────────────────────────
 try {
  const graphJson = run(
    'bunx madge --json --extensions ts,tsx --exclude "\\.test\\.|__tests__" src/lib/game'
  );
  // Parse and re-serialize with readable formatting
  const graph = JSON.parse(graphJson);
  // Annotate with metadata for AI agents
  const output = {
    _meta: {
      generated: new Date().toISOString(),
      description:
        'Import dependency graph for src/lib/game. Keys are files, values are arrays of files they import.',
      usage:
        'To find what a file affects, search for its path in the VALUES. To find what a file depends on, look at its KEY entry.',
    },
    graph,
  };
  fs.writeFileSync(GRAPH_OUT, JSON.stringify(output, null, 2));
  const nodeCount = Object.keys(graph).length;
  console.log(`✅ Dependency graph: ${nodeCount} modules → docs/dependency-graph.json`);
 } catch (err) {
  console.error('Failed to generate dependency graph:', err.message);
  process.exit(1);
 }
 // ── 2. Circular dependency report ─────────────────────────────────────────
 try {
  let circularOutput = '';
  try {
    // madge exits with code 1 when circulars are found; capture stdout anyway
    circularOutput = run(
      'bunx madge --circular --extensions ts,tsx --exclude "\\.test\\.|__tests__" src/lib/game'
    );
  } catch (e) {
    // exitCode 1 = circulars found; stdout contains the list
    circularOutput = e.stdout || '';
  }
  const lines = circularOutput.trim().split('\n').filter(Boolean);
  // madge circular output starts with "Found N circular dependencies!"
  const circularLines = lines.filter(
    (l) => !l.startsWith('Found') && !l.startsWith('✔') && l.trim()
  );
  let content;
  if (circularLines.length === 0) {
    content = `# Circular Dependencies\nGenerated: ${new Date().toISOString()}\n\nNo circular dependencies found. ✅\n`;
    console.log('✅ No circular dependencies found');
  } else {
    content = [
      `# Circular Dependencies`,
      `Generated: ${new Date().toISOString()}`,
      `Found: ${circularLines.length} circular chain(s) — these MUST be fixed before modifying involved files.`,
      '',
      ...circularLines.map((l, i) => `${i + 1}. ${l.trim()}`),
      '',
      '## How to fix',
      '1. Identify which import in the chain can be extracted to a shared types/utils file.',
      '2. Move the shared type or function there.',
      '3. Both files import from the new shared module instead of each other.',
      '4. Run: bunx madge --circular src/lib/game  (should return clean)',
    ].join('\n');
    console.warn(`⚠️  Found ${circularLines.length} circular dependency chain(s) — see docs/circular-deps.txt`);
  }
  fs.writeFileSync(CIRCULAR_OUT, content);
 } catch (err) {
  console.error('Failed to check circular dependencies:', err.message);
  // Non-fatal: write a note to the file and continue
  fs.writeFileSync(CIRCULAR_OUT, `# Circular Dependencies\nError running check: ${err.message}\n`);
 }
@@ -0,0 +1,117 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 const fs = require('fs');
 const path = require('path');
 const { execSync } = require('node:child_process');
 // Directory to start from (project root)
 const ROOT_DIR = process.cwd();
 // Output file path
 const OUTPUT_FILE = path.join(ROOT_DIR, 'docs', 'project-structure.txt');
 // Function to check if a path is ignored by git
 function isGitIgnored(filePath) {
  try {
    // git check-ignore -q returns 0 if ignored, 1 if not
    execSync(`git check-ignore -q "${filePath}"`, {
      cwd: ROOT_DIR,
      stdio: 'ignore'
    });
    return true; // Ignored
  } catch (e) {
    return false; // Not ignored
  }
 }
 // Function to generate tree structure
 function generateTree(dir, prefix = '', isRoot = true) {
  let structure = '';
  // Add root directory name if it's the root
  if (isRoot) {
    structure += `${path.basename(dir)}/\n`;
  }
  let items;
  try {
    items = fs.readdirSync(dir);
  } catch (e) {
    console.error(`Error reading directory ${dir}: ${e.message}`);
    return structure;
  }
  // Sort items: directories first, then files
  const dirs = [];
  const files = [];
  items.forEach(item => {
    const itemPath = path.join(dir, item);
    // Explicitly skip .git directory and husky internal directory
    if (item === '.git' && dir === ROOT_DIR) {
      return;
    }
    if (item === '_' && path.basename(dir) === '.husky') {
      return;
    }
    // Skip if ignored by git
    if (isGitIgnored(itemPath)) {
      return;
    }
    try {
      const stat = fs.statSync(itemPath);
      if (stat.isDirectory()) {
        dirs.push(item);
      } else {
        files.push(item);
      }
    } catch (e) {
      // Skip items we can't stat
    }
  });
  // Sort directories and files alphabetically
  dirs.sort();
  files.sort();
  const allItems = [...dirs, ...files];
  allItems.forEach((item, index) => {
    const isLast = index === allItems.length - 1;
    const connector = isLast ? '└── ' : '├── ';
    const itemPath = path.join(dir, item);
    structure += `${prefix}${connector}${item}${dirs.includes(item) ? '/' : ''}\n`;
    // Recurse into directories
    if (dirs.includes(item)) {
      const newPrefix = prefix + (isLast ? '    ' : '│   ');
      structure += generateTree(itemPath, newPrefix, false);
    }
  });
  return structure;
 }
 try {
  console.log('🗺️ Generating project structure...');
  // Ensure docs directory exists
  const docsDir = path.join(ROOT_DIR, 'docs');
  if (!fs.existsSync(docsDir)) {
    fs.mkdirSync(docsDir, { recursive: true });
    console.log('📁 Created docs directory');
  }
  // Generate tree
  const tree = generateTree(ROOT_DIR, '', true);
  // Write to file
  fs.writeFileSync(OUTPUT_FILE, tree);
  console.log(`✅ Project structure updated: ${OUTPUT_FILE}`);
 } catch (err) {
  console.error(`❌ Error generating project structure: ${err.message}`);
  process.exit(1);
 }
@@ -1,117 +0,0 @@
 #!/bin/bash
 # 将 stderr 重定向到 stdout，避免 execute_command 因为 stderr 输出而报错
 exec 2>&1
 set -e
 # 获取脚本所在目录（.zscripts 目录，即 workspace-agent/.zscripts）
 # 使用 $0 获取脚本路径（兼容 sh 和 bash）
 SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 # Next.js 项目路径
 NEXTJS_PROJECT_DIR="/home/z/my-project"
 # 检查 Next.js 项目目录是否存在
 if [ ! -d "$NEXTJS_PROJECT_DIR" ]; then
    echo "❌ 错误: Next.js 项目目录不存在: $NEXTJS_PROJECT_DIR"
    exit 1
 fi
 echo "🚀 开始构建 Next.js 应用和 mini-services..."
 echo "📁 Next.js 项目路径: $NEXTJS_PROJECT_DIR"
 # 切换到 Next.js 项目目录
 cd "$NEXTJS_PROJECT_DIR" || exit 1
 # 设置环境变量
 export NEXT_TELEMETRY_DISABLED=1
 BUILD_DIR="/tmp/build_fullstack_$BUILD_ID"
 echo "📁 清理并创建构建目录: $BUILD_DIR"
 mkdir -p "$BUILD_DIR"
 # 安装依赖
 echo "📦 安装依赖..."
 bun install
 # 构建 Next.js 应用
 echo "🔨 构建 Next.js 应用..."
 bun run build
 # 构建 mini-services
 # 检查 Next.js 项目目录下是否有 mini-services 目录
 if [ -d "$NEXTJS_PROJECT_DIR/mini-services" ]; then
    echo "🔨 构建 mini-services..."
    # 使用 workspace-agent 目录下的 mini-services 脚本
    sh "$SCRIPT_DIR/mini-services-install.sh"
    sh "$SCRIPT_DIR/mini-services-build.sh"
    # 复制 mini-services-start.sh 到 mini-services-dist 目录
    echo "  - 复制 mini-services-start.sh 到 $BUILD_DIR"
    cp "$SCRIPT_DIR/mini-services-start.sh" "$BUILD_DIR/mini-services-start.sh"
    chmod +x "$BUILD_DIR/mini-services-start.sh"
 else
    echo "ℹ️  mini-services 目录不存在，跳过"
 fi
 # 将所有构建产物复制到临时构建目录
 echo "📦 收集构建产物到 $BUILD_DIR..."
 # 复制 Next.js standalone 构建输出
 if [ -d ".next/standalone" ]; then
    echo "  - 复制 .next/standalone"
    cp -r .next/standalone "$BUILD_DIR/next-service-dist/"
 fi
 # 复制 Next.js 静态文件
 if [ -d ".next/static" ]; then
    echo "  - 复制 .next/static"
    mkdir -p "$BUILD_DIR/next-service-dist/.next"
    cp -r .next/static "$BUILD_DIR/next-service-dist/.next/"
 fi
 # 复制 public 目录
 if [ -d "public" ]; then
    echo "  - 复制 public"
    cp -r public "$BUILD_DIR/next-service-dist/"
 fi
 # 最后再迁移数据库到 BUILD_DIR/db
 if [ "$(ls -A ./db 2>/dev/null)" ]; then
    echo "🗄️  检测到数据库文件，运行数据库迁移..."
    DATABASE_URL=file:$BUILD_DIR/db/custom.db bun run db:push
    echo "✅ 数据库迁移完成"
    ls -lah $BUILD_DIR/db
 else
    echo "ℹ️  db 目录为空，跳过数据库迁移"
 fi
 # 复制 Caddyfile（如果存在）
 if [ -f "Caddyfile" ]; then
    echo "  - 复制 Caddyfile"
    cp Caddyfile "$BUILD_DIR/"
 else
    echo "ℹ️  Caddyfile 不存在，跳过"
 fi
 # 复制 start.sh 脚本
 echo "  - 复制 start.sh 到 $BUILD_DIR"
 cp "$SCRIPT_DIR/start.sh" "$BUILD_DIR/start.sh"
 chmod +x "$BUILD_DIR/start.sh"
 # 打包到 $BUILD_DIR.tar.gz
 PACKAGE_FILE="${BUILD_DIR}.tar.gz"
 echo ""
 echo "📦 打包构建产物到 $PACKAGE_FILE..."
 cd "$BUILD_DIR" || exit 1
 tar -czf "$PACKAGE_FILE" .
 cd - > /dev/null || exit 1
 # # 清理临时目录
 # rm -rf "$BUILD_DIR"
 echo ""
 echo "✅ 构建完成！所有产物已打包到 $PACKAGE_FILE"
 echo "📊 打包文件大小:"
 ls -lh "$PACKAGE_FILE"
@@ -1 +0,0 @@
 488
@@ -1,154 +0,0 @@
 #!/bin/bash
 set -euo pipefail
 # 获取脚本所在目录（.zscripts）
 # 使用 $0 获取脚本路径（与 build.sh 保持一致）
 SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 PROJECT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
 log_step_start() {
 	local step_name="$1"
 	echo "=========================================="
 	echo "[$(date '+%Y-%m-%d %H:%M:%S')] Starting: $step_name"
 	echo "=========================================="
 	export STEP_START_TIME
 	STEP_START_TIME=$(date +%s)
 }
 log_step_end() {
 	local step_name="${1:-Unknown step}"
 	local end_time
 	end_time=$(date +%s)
 	local duration=$((end_time - STEP_START_TIME))
 	echo "=========================================="
 	echo "[$(date '+%Y-%m-%d %H:%M:%S')] Completed: $step_name"
 	echo "[LOG] Step: $step_name | Duration: ${duration}s"
 	echo "=========================================="
 	echo ""
 }
 start_mini_services() {
 	local mini_services_dir="$PROJECT_DIR/mini-services"
 	local started_count=0
 	log_step_start "Starting mini-services"
 	if [ ! -d "$mini_services_dir" ]; then
 		echo "Mini-services directory not found, skipping..."
 		log_step_end "Starting mini-services"
 		return 0
 	fi
 	echo "Found mini-services directory, scanning for sub-services..."
 	for service_dir in "$mini_services_dir"/*; do
 		if [ ! -d "$service_dir" ]; then
 			continue
 		fi
 		local service_name
 		service_name=$(basename "$service_dir")
 		echo "Checking service: $service_name"
 		if [ ! -f "$service_dir/package.json" ]; then
 			echo "[$service_name] No package.json found, skipping..."
 			continue
 		fi
 		if ! grep -q '"dev"' "$service_dir/package.json"; then
 			echo "[$service_name] No dev script found, skipping..."
 			continue
 		fi
 		echo "Starting $service_name in background..."
 		(
 			cd "$service_dir"
 			echo "[$service_name] Installing dependencies..."
 			bun install
 			echo "[$service_name] Running bun run dev..."
 			exec bun run dev
 		) >"$PROJECT_DIR/.zscripts/mini-service-${service_name}.log" 2>&1 &
 		local service_pid=$!
 		echo "[$service_name] Started in background (PID: $service_pid)"
 		echo "[$service_name] Log: $PROJECT_DIR/.zscripts/mini-service-${service_name}.log"
 		disown "$service_pid" 2>/dev/null || true
 		started_count=$((started_count + 1))
 	done
 	echo "Mini-services startup completed. Started $started_count service(s)."
 	log_step_end "Starting mini-services"
 }
 wait_for_service() {
 	local host="$1"
 	local port="$2"
 	local service_name="$3"
 	local max_attempts="${4:-60}"
 	local attempt=1
 	echo "Waiting for $service_name to be ready on $host:$port..."
 	while [ "$attempt" -le "$max_attempts" ]; do
 		if curl -s --connect-timeout 2 --max-time 5 "http://$host:$port" >/dev/null 2>&1; then
 			echo "$service_name is ready!"
 			return 0
 		fi
 		echo "Attempt $attempt/$max_attempts: $service_name not ready yet, waiting..."
 		sleep 1
 		attempt=$((attempt + 1))
 	done
 	echo "ERROR: $service_name failed to start within $max_attempts seconds"
 	return 1
 }
 cleanup() {
 	if [ -n "${DEV_PID:-}" ] && kill -0 "$DEV_PID" >/dev/null 2>&1; then
 		echo "Stopping Next.js dev server (PID: $DEV_PID)..."
 		kill "$DEV_PID" >/dev/null 2>&1 || true
 	fi
 }
 trap cleanup EXIT INT TERM
 cd "$PROJECT_DIR"
 if ! command -v bun >/dev/null 2>&1; then
 	echo "ERROR: bun is not installed or not in PATH"
 	exit 1
 fi
 log_step_start "bun install"
 echo "[BUN] Installing dependencies..."
 bun install
 log_step_end "bun install"
 log_step_start "bun run db:push"
 echo "[BUN] Setting up database..."
 bun run db:push
 log_step_end "bun run db:push"
 log_step_start "Starting Next.js dev server"
 echo "[BUN] Starting development server..."
 bun run dev &
 DEV_PID=$!
 log_step_end "Starting Next.js dev server"
 log_step_start "Waiting for Next.js dev server"
 wait_for_service "localhost" "3000" "Next.js dev server"
 log_step_end "Waiting for Next.js dev server"
 log_step_start "Health check"
 echo "[BUN] Performing health check..."
 curl -fsS localhost:3000 >/dev/null
 echo "[BUN] Health check passed"
 log_step_end "Health check"
 start_mini_services
 echo "Next.js dev server is running in background (PID: $DEV_PID)."
 echo "Use 'kill $DEV_PID' to stop it."
 disown "$DEV_PID" 2>/dev/null || true
 unset DEV_PID
@@ -1,78 +0,0 @@
 #!/bin/bash
 # 配置项
 ROOT_DIR="/home/z/my-project/mini-services"
 DIST_DIR="/tmp/build_fullstack_$BUILD_ID/mini-services-dist"
 main() {
    echo "🚀 开始批量构建..."
    # 检查 rootdir 是否存在
    if [ ! -d "$ROOT_DIR" ]; then
        echo "ℹ️  目录 $ROOT_DIR 不存在，跳过构建"
        return
    fi
    # 创建输出目录（如果不存在）
    mkdir -p "$DIST_DIR"
    # 统计变量
    success_count=0
    fail_count=0
    # 遍历 mini-services 目录下的所有文件夹
    for dir in "$ROOT_DIR"/*; do
        # 检查是否是目录且包含 package.json
        if [ -d "$dir" ] && [ -f "$dir/package.json" ]; then
            project_name=$(basename "$dir")
            # 智能查找入口文件 (按优先级查找)
            entry_path=""
            for entry in "src/index.ts" "index.ts" "src/index.js" "index.js"; do
                if [ -f "$dir/$entry" ]; then
                    entry_path="$dir/$entry"
                    break
                fi
            done
            if [ -z "$entry_path" ]; then
                echo "⚠️  跳过 $project_name: 未找到入口文件 (index.ts/js)"
                continue
            fi
            echo ""
            echo "📦 正在构建: $project_name..."
            # 使用 bun build CLI 构建
            output_file="$DIST_DIR/mini-service-$project_name.js"
            if bun build "$entry_path" \
                --outfile "$output_file" \
                --target bun \
                --minify; then
                echo "✅ $project_name 构建成功 -> $output_file"
                success_count=$((success_count + 1))
            else
                echo "❌ $project_name 构建失败"
                fail_count=$((fail_count + 1))
            fi
        fi
    done
    if [ -f ./.zscripts/mini-services-start.sh ]; then
        cp ./.zscripts/mini-services-start.sh "$DIST_DIR/mini-services-start.sh"
        chmod +x "$DIST_DIR/mini-services-start.sh"
    fi
    echo ""
    echo "🎉 所有任务完成！"
    if [ $success_count -gt 0 ] || [ $fail_count -gt 0 ]; then
        echo "✅ 成功: $success_count 个"
        if [ $fail_count -gt 0 ]; then
            echo "❌ 失败: $fail_count 个"
        fi
    fi
 }
 main
@@ -1,65 +0,0 @@
 #!/bin/bash
 # 配置项
 ROOT_DIR="/home/z/my-project/mini-services"
 main() {
    echo "🚀 开始批量安装依赖..."
    # 检查 rootdir 是否存在
    if [ ! -d "$ROOT_DIR" ]; then
        echo "ℹ️  目录 $ROOT_DIR 不存在，跳过安装"
        return
    fi
    # 统计变量
    success_count=0
    fail_count=0
    failed_projects=""
    # 遍历 mini-services 目录下的所有文件夹
    for dir in "$ROOT_DIR"/*; do
        # 检查是否是目录且包含 package.json
        if [ -d "$dir" ] && [ -f "$dir/package.json" ]; then
            project_name=$(basename "$dir")
            echo ""
            echo "📦 正在安装依赖: $project_name..."
            # 进入项目目录并执行 bun install
            if (cd "$dir" && bun install); then
                echo "✅ $project_name 依赖安装成功"
                success_count=$((success_count + 1))
            else
                echo "❌ $project_name 依赖安装失败"
                fail_count=$((fail_count + 1))
                if [ -z "$failed_projects" ]; then
                    failed_projects="$project_name"
                else
                    failed_projects="$failed_projects $project_name"
                fi
            fi
        fi
    done
    # 汇总结果
    echo ""
    echo "=================================================="
    if [ $success_count -gt 0 ] || [ $fail_count -gt 0 ]; then
        echo "🎉 安装完成！"
        echo "✅ 成功: $success_count 个"
        if [ $fail_count -gt 0 ]; then
            echo "❌ 失败: $fail_count 个"
            echo ""
            echo "失败的项目:"
            for project in $failed_projects; do
                echo "  - $project"
            done
        fi
    else
        echo "ℹ️  未找到任何包含 package.json 的项目"
    fi
    echo "=================================================="
 }
 main
@@ -1,123 +0,0 @@
 #!/bin/sh
 # 配置项
 DIST_DIR="./mini-services-dist"
 # 存储所有子进程的 PID
 pids=""
 # 清理函数：优雅关闭所有服务
 cleanup() {
    echo ""
    echo "🛑 正在关闭所有服务..."
    # 发送 SIGTERM 信号给所有子进程
    for pid in $pids; do
        if kill -0 "$pid" 2>/dev/null; then
            service_name=$(ps -p "$pid" -o comm= 2>/dev/null || echo "unknown")
            echo "   关闭进程 $pid ($service_name)..."
            kill -TERM "$pid" 2>/dev/null
        fi
    done
    # 等待所有进程退出（最多等待 5 秒）
    sleep 1
    for pid in $pids; do
        if kill -0 "$pid" 2>/dev/null; then
            # 如果还在运行，等待最多 4 秒
            timeout=4
            while [ $timeout -gt 0 ] && kill -0 "$pid" 2>/dev/null; do
                sleep 1
                timeout=$((timeout - 1))
            done
            # 如果仍然在运行，强制关闭
            if kill -0 "$pid" 2>/dev/null; then
                echo "   强制关闭进程 $pid..."
                kill -KILL "$pid" 2>/dev/null
            fi
        fi
    done
    echo "✅ 所有服务已关闭"
 }
 main() {
    echo "🚀 开始启动所有 mini services..."
    # 检查 dist 目录是否存在
    if [ ! -d "$DIST_DIR" ]; then
        echo "ℹ️  目录 $DIST_DIR 不存在"
        return
    fi
    # 查找所有 mini-service-*.js 文件
    service_files=""
    for file in "$DIST_DIR"/mini-service-*.js; do
        if [ -f "$file" ]; then
            if [ -z "$service_files" ]; then
                service_files="$file"
            else
                service_files="$service_files $file"
            fi
        fi
    done
    # 计算服务文件数量
    service_count=0
    for file in $service_files; do
        service_count=$((service_count + 1))
    done
    if [ $service_count -eq 0 ]; then
        echo "ℹ️  未找到任何 mini service 文件"
        return
    fi
    echo "📦 找到 $service_count 个服务，开始启动..."
    echo ""
    # 启动每个服务
    for file in $service_files; do
        service_name=$(basename "$file" .js | sed 's/mini-service-//')
        echo "▶️  启动服务: $service_name..."
        # 使用 bun 运行服务（后台运行）
        bun "$file" &
        pid=$!
        if [ -z "$pids" ]; then
            pids="$pid"
        else
            pids="$pids $pid"
        fi
        # 等待一小段时间检查进程是否成功启动
        sleep 0.5
        if ! kill -0 "$pid" 2>/dev/null; then
            echo "❌ $service_name 启动失败"
            # 从字符串中移除失败的 PID
            pids=$(echo "$pids" | sed "s/\b$pid\b//" | sed 's/  */ /g' | sed 's/^ *//' | sed 's/ *$//')
        else
            echo "✅ $service_name 已启动 (PID: $pid)"
        fi
    done
    # 计算运行中的服务数量
    running_count=0
    for pid in $pids; do
        if kill -0 "$pid" 2>/dev/null; then
            running_count=$((running_count + 1))
        fi
    done
    echo ""
    echo "🎉 所有服务已启动！共 $running_count 个服务正在运行"
    echo ""
    echo "💡 按 Ctrl+C 停止所有服务"
    echo ""
    # 等待所有后台进程
    wait
 }
 main
@@ -1,126 +0,0 @@
 #!/bin/sh
 set -e
 # 获取脚本所在目录
 SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 BUILD_DIR="$SCRIPT_DIR"
 # 存储所有子进程的 PID
 pids=""
 # 清理函数：优雅关闭所有服务
 cleanup() {
    echo ""
    echo "🛑 正在关闭所有服务..."
    # 发送 SIGTERM 信号给所有子进程
    for pid in $pids; do
        if kill -0 "$pid" 2>/dev/null; then
            service_name=$(ps -p "$pid" -o comm= 2>/dev/null || echo "unknown")
            echo "   关闭进程 $pid ($service_name)..."
            kill -TERM "$pid" 2>/dev/null
        fi
    done
    # 等待所有进程退出（最多等待 5 秒）
    sleep 1
    for pid in $pids; do
        if kill -0 "$pid" 2>/dev/null; then
            # 如果还在运行，等待最多 4 秒
            timeout=4
            while [ $timeout -gt 0 ] && kill -0 "$pid" 2>/dev/null; do
                sleep 1
                timeout=$((timeout - 1))
            done
            # 如果仍然在运行，强制关闭
            if kill -0 "$pid" 2>/dev/null; then
                echo "   强制关闭进程 $pid..."
                kill -KILL "$pid" 2>/dev/null
            fi
        fi
    done
    echo "✅ 所有服务已关闭"
    exit 0
 }
 echo "🚀 开始启动所有服务..."
 echo ""
 # 切换到构建目录
 cd "$BUILD_DIR" || exit 1
 ls -lah
 # 初始化数据库（如果存在）
 if [ -d "./next-service-dist/db" ] && [ "$(ls -A ./next-service-dist/db 2>/dev/null)" ] && [ -d "/db" ]; then
    echo "🗄️  初始化数据库从 ./next-service-dist/db 到 /db..."
    cp -r ./next-service-dist/db/* /db/ 2>/dev/null || echo "  ⚠️  无法复制到 /db，跳过数据库初始化"
    echo "✅ 数据库初始化完成"
 fi
 # 启动 Next.js 服务器
 if [ -f "./next-service-dist/server.js" ]; then
    echo "🚀 启动 Next.js 服务器..."
    cd next-service-dist/ || exit 1
    # 设置环境变量
    export NODE_ENV=production
    export PORT=${PORT:-3000}
    export HOSTNAME=${HOSTNAME:-0.0.0.0}
    # 后台启动 Next.js
    bun server.js &
    NEXT_PID=$!
    pids="$NEXT_PID"
    # 等待一小段时间检查进程是否成功启动
    sleep 1
    if ! kill -0 "$NEXT_PID" 2>/dev/null; then
        echo "❌ Next.js 服务器启动失败"
        exit 1
    else
        echo "✅ Next.js 服务器已启动 (PID: $NEXT_PID, Port: $PORT)"
    fi
    cd ../
 else
    echo "⚠️  未找到 Next.js 服务器文件: ./next-service-dist/server.js"
 fi
 # 启动 mini-services
 if [ -f "./mini-services-start.sh" ]; then
    echo "🚀 启动 mini-services..."
    # 运行启动脚本（从根目录运行，脚本内部会处理 mini-services-dist 目录）
    sh ./mini-services-start.sh &
    MINI_PID=$!
    pids="$pids $MINI_PID"
    # 等待一小段时间检查进程是否成功启动
    sleep 1
    if ! kill -0 "$MINI_PID" 2>/dev/null; then
        echo "⚠️  mini-services 可能启动失败，但继续运行..."
    else
        echo "✅ mini-services 已启动 (PID: $MINI_PID)"
    fi
 elif [ -d "./mini-services-dist" ]; then
    echo "⚠️  未找到 mini-services 启动脚本，但目录存在"
 else
    echo "ℹ️  mini-services 目录不存在，跳过"
 fi
 # 启动 Caddy（如果存在 Caddyfile）
 echo "🚀 启动 Caddy..."
 # Caddy 作为前台进程运行（主进程）
 echo "✅ Caddy 已启动（前台运行）"
 echo ""
 echo "🎉 所有服务已启动！"
 echo ""
 echo "💡 按 Ctrl+C 停止所有服务"
 echo ""
 # Caddy 作为主进程运行
 exec caddy run --config Caddyfile --adapter caddyfile
@@ -1,246 +1,96 @@
-# Mana Loop - Project Architecture Guide
+# Mana Loop — Agent Guide
-This document provides a comprehensive overview of the project architecture for AI agents working on this codebase.
+Browser incremental/idle game. Next.js 16 + Zustand, no backend.
---
+## 🔑 Git
 ## ⚠️ MANDATORY GIT WORKFLOW - MUST BE FOLLOWED
 **Before starting ANY work, you MUST:**
 1. **Pull the latest changes:**
   ```bash
   cd /home/z/my-project && git pull origin master
   ```
 2. **Do your task** - Make all necessary code changes
 3. **Before finishing, commit and push:**
   ```bash
   cd /home/z/my-project
   git add -A
   git commit -m "descriptive message about changes"
   git push origin master
   ```
 **This workflow is ENFORCED and NON-NEGOTIABLE.** Every agent session must:
 - Start with `git pull`
 - End with `git add`, `git commit`, `git push`
 **Git Remote:** `git@gitea.tailf367e3.ts.net:Anexim/Mana-Loop.git`
 ---
 ## Project Overview
 **Mana Loop** is an incremental/idle game built with:
 - **Framework**: Next.js 16 with App Router
 - **Language**: TypeScript 5
 - **Styling**: Tailwind CSS 4 with shadcn/ui components
 - **State Management**: Zustand with persist middleware
 - **Database**: Prisma ORM with SQLite (for persistence features)
 ## Core Game Loop
 1. **Mana Gathering**: Click or auto-generate mana over time
 2. **Studying**: Spend mana to learn skills and spells
 3. **Combat**: Climb the Spire, defeat guardians, sign pacts
 4. **Crafting**: Enchant equipment with spell effects
 5. **Prestige**: Reset progress for permanent bonuses (Insight)
 ## Directory Structure
 ```
-src/
+https://n8n-gitea:tkF9HFgxL2k4cmT@gitea.tailf367e3.ts.net/Anexim/Mana-Loop.git
-├── app/
+```
-│   ├── page.tsx          # Main game UI (single page application)
+```bash
-│   ├── layout.tsx        # Root layout with providers
+git config --global user.name "n8n-gitea"
-│   └── api/              # API routes (minimal use)
+git config --global user.email "n8n-gitea@anexim.local"
 ├── components/
 │   ├── ui/               # shadcn/ui components (auto-generated)
 │   └── game/
 │       ├── index.ts      # Barrel exports
 │       └── tabs/         # Tab-specific components
 │           ├── CraftingTab.tsx
 │           ├── LabTab.tsx
 │           ├── SpellsTab.tsx
 │           └── SpireTab.tsx
 └── lib/
    ├── game/
    │   ├── store.ts              # Zustand store (state + actions)
    │   ├── effects.ts            # Unified effect computation
    │   ├── upgrade-effects.ts    # Skill upgrade effect definitions
    │   ├── constants.ts          # Game definitions (spells, skills, etc.)
    │   ├── skill-evolution.ts    # Skill tier progression paths
    │   ├── crafting-slice.ts     # Equipment/enchantment logic
    │   ├── types.ts              # TypeScript interfaces
    │   ├── formatting.ts         # Display formatters
    │   ├── utils.ts              # Utility functions
    │   └── data/
    │       ├── equipment.ts      # Equipment type definitions
    │       └── enchantment-effects.ts  # Enchantment effect catalog
    └── utils.ts                  # General utilities (cn function)
 ```
-## Key Systems
+## Workflow
-### 1. State Management (`store.ts`)
+```bash
-
+cd /home/user/repos/Mana-Loop && git pull origin master
-The game uses a single Zustand store with the following key slices:
+# ... work ...
-
+git add -A && git commit -m "type: desc" && git push origin master
 ```typescript
 interface GameState {
  // Time
  day: number;
  hour: number;
  paused: boolean;
  // Mana
  rawMana: number;
  elements: Record<string, ElementState>;
  // Combat
  currentFloor: number;
  floorHP: number;
  activeSpell: string;
  castProgress: number;
  // Progression
  skills: Record<string, number>;
  spells: Record<string, SpellState>;
  skillUpgrades: Record<string, string[]>;
  skillTiers: Record<string, number>;
  // Equipment
  equipmentInstances: Record<string, EquipmentInstance>;
  equippedInstances: Record<string, string | null>;
  enchantmentDesigns: EnchantmentDesign[];
  // Prestige
  insight: number;
  prestigeUpgrades: Record<string, number>;
  signedPacts: number[];
 }
 ```
-### 2. Effect System (`effects.ts`)
+## Session Start
-**CRITICAL**: All stat modifications flow through the unified effect system.
+1. `docs/project-structure.txt`
 2. `docs/dependency-graph.json`
 3. `get_repo_summary` → resume in-progress or pick top todo
 4. `update_issue_status` → `ai:in-progress`
 5. Work, log with `add_comment`, then `update_issue_status` → `ai:done`
-```typescript
+## Labels
 // Effects come from two sources:
 // 1. Skill Upgrades (milestone bonuses)
 // 2. Equipment Enchantments (crafted bonuses)
-getUnifiedEffects(state) => UnifiedEffects {
+`ai:todo` | `ai:in-progress` | `ai:review` | `ai:blocked` | `ai:done`
-  maxManaBonus, maxManaMultiplier,
+
-  regenBonus, regenMultiplier,
+## Terminal Tool
-  clickManaBonus, clickManaMultiplier,
+
-  baseDamageBonus, baseDamageMultiplier,
+Always pair `run_command` → `get_process_status` in same turn. Use `wait: 120` for long tasks.
-  attackSpeedMultiplier,
+
-  critChanceBonus, critDamageMultiplier,
+## Sub-Agents
-  studySpeedMultiplier,
+
-  specials: Set<string>,  // Special effect IDs
+Use for 3+ sequential independent calls. Zero context from parent — paste everything needed.
-}
+
 ## Architecture
 - **Stack:** Next.js 16, TS 5, Tailwind 4 + shadcn/ui, Zustand+persist, Vitest/Playwright, Bun
 - **Active stores:** `src/lib/game/stores/{game,mana,combat,prestige,discipline,ui}Store.ts`
 - **Legacy (migrating):** `src/lib/game/store/` and `store-modules/`
 - **Crafting:** 3-step flow — Design → Prepare → Apply via `crafting-actions/`
 - **Disciplines:** `data/disciplines/` + `stores/discipline-slice.ts` + `utils/discipline-math.ts`
 - **Effects:** All stat mods through `getUnifiedEffects()` — discipline bonuses enter via `computeDisciplineEffects()`
 ### Adding Effects
 1. `data/enchantment-effects.ts`
 2. `effects.ts` → `computeEquipmentEffects()`
 3. Access via `getUnifiedEffects(state)`
 ### Adding Disciplines
 1. Choose the correct data file under `data/disciplines/`:
   - `base.ts` — available to all attunements
   - `enchanter.ts` — requires Enchanter attunement
   - `invoker.ts` — requires Invoker attunement
   - `fabricator.ts` — requires Fabricator attunement
 2. Define a `DisciplineDefinition` (see `types/disciplines.ts`):
   - `statBonus.stat` must match a key consumed by `computeDisciplineEffects()`
   - Set `difficultyFactor` and `scalingFactor` to control growth rate
   - Add perks (`once`, `capped`, or `infinite`)
 3. Re-export from `data/disciplines/index.ts` so it appears in `ALL_DISCIPLINES`
 4. Add any new `statBonus.stat` keys to `discipline-effects.ts` → `computeDisciplineEffects()`
 ### Discipline Math (quick reference)
 ```
-
+StatBonus     = baseValue  × (XP / scalingFactor)^0.65
-**When adding new stats**:
+ManaDrainPerTick = drainBase × (1 + (XP / difficultyFactor)^0.4)
 1. Add to `ComputedEffects` interface in `upgrade-effects.ts`
 2. Add mapping in `computeEquipmentEffects()` in `effects.ts`
 3. Apply in the relevant game logic (tick, damage calc, etc.)
 ### 3. Combat System
 Combat uses a **cast speed** system:
 - Each spell has `castSpeed` (casts per hour)
 - Cast progress accumulates: `progress += castSpeed * attackSpeedMultiplier * HOURS_PER_TICK`
 - When `progress >= 1`, spell is cast (cost deducted, damage dealt)
 - DPS = `damagePerCast * castsPerSecond`
 Damage calculation order:
 1. Base spell damage
 2. Skill bonuses (combatTrain, arcaneFury, etc.)
 3. Upgrade effects (multipliers, bonuses)
 4. Special effects (Overpower, Berserker, etc.)
 5. Elemental modifiers (same element +25%, super effective +50%)
 ### 4. Crafting/Enchantment System
 Three-stage process:
 1. **Design**: Select effects, takes time based on complexity
 2. **Prepare**: Pay mana to prepare equipment, takes time
 3. **Apply**: Apply design to equipment, costs mana per hour
 Equipment has **capacity** that limits total enchantment power.
 ### 5. Skill Evolution System
 Skills have 5 tiers of evolution:
 - At level 5: Choose 2 of 4 milestone upgrades
 - At level 10: Choose 2 more upgrades, then tier up
 - Each tier multiplies the skill's base effect by 10x
 ## Important Patterns
 ### Adding a New Effect
 1. **Define in `enchantment-effects.ts`**:
 ```typescript
 my_new_effect: {
  id: 'my_new_effect',
  name: 'Effect Name',
  description: '+10% something',
  category: 'combat',
  baseCapacityCost: 30,
  maxStacks: 3,
  allowedEquipmentCategories: ['caster', 'hands'],
  effect: { type: 'multiplier', stat: 'attackSpeed', value: 1.10 }
 }
 ```
 - XP accrues every tick the discipline is active and mana drain is met
 - `concurrentLimit` starts at 1 and expands by 1 per 500 total XP (max +3)
-2. **Add stat mapping in `effects.ts`** (if new stat):
+### Adding Spells
-```typescript
+1. `constants/spells.ts`
-// In computeEquipmentEffects()
+2. `data/enchantment-effects.ts`
-if (effect.stat === 'myNewStat') {
+3. `EFFECT_RESEARCH_MAPPING`
  bonuses.myNewStat = (bonuses.myNewStat || 0) + effect.value;
 }
 ```
-3. **Apply in game logic**:
+## Banned
 ```typescript
 const effects = getUnifiedEffects(state);
 damage *= effects.myNewStatMultiplier;
 ```
-### Adding a New Skill
+Lifesteal/healing, scroll crafting, ascension skills, LabTab, pause, mana types: `life`, `blood`, `wood`, `mental`, `force`
-1. **Define in `constants.ts` SKILLS_DEF**
+## File Limit
 2. **Add evolution path in `skill-evolution.ts`**
 3. **Add prerequisite checks in `store.ts`**
 4. **Update UI in `page.tsx`**
-### Adding a New Spell
+400 lines max (pre-commit hook enforces).
-1. **Define in `constants.ts` SPELLS_DEF**
+## Mana Types
 2. **Add spell enchantment in `enchantment-effects.ts`**
 3. **Add research skill in `constants.ts`**
 4. **Map research to effect in `EFFECT_RESEARCH_MAPPING`**
-## Common Pitfalls
+**Base (7):** Fire 🔥 Water 💧 Air 🌬️ Earth ⛰️ Light ☀️ Dark 🌑 Death 💀  
-
+**Utility (1):** Transference 🔗  
-1. **Forgetting to call `getUnifiedEffects()`**: Always use unified effects for stat calculations
+**Compound (3):** Fire+Earth=Metal, Earth+Water=Sand, Fire+Air=Lightning  
-2. **Direct stat modification**: Never modify stats directly; use effect system
+**Exotic (3):** Sand+Sand+Light=Crystal, Fire+Fire+Light=Stellar, Dark+Dark+Death=Void
 3. **Missing tier multiplier**: Use `getTierMultiplier(skillId)` for tiered skills
 4. **Ignoring special effects**: Check `hasSpecial(effects, SPECIAL_EFFECTS.X)` for special abilities
 ## Testing Guidelines
 - Run `bun run lint` after changes
 - Check dev server logs at `/home/z/my-project/dev.log`
 - Test with fresh game state (clear localStorage)
 ## File Size Guidelines
 - Keep `page.tsx` under 2000 lines by extracting to tab components
 - Keep store functions focused; extract to helper files when >50 lines
 - Use barrel exports (`index.ts`) for clean imports
@@ -1,76 +1,20 @@
-# Mana Loop - Next.js Game Docker Image
+FROM node:20-alpine AS base
 FROM node:20-alpine AS builder
 WORKDIR /app
 # Install dependencies
 RUN apk add --no-cache libc6-compat openssl
 # Install bun
 RUN npm install -g bun
 # Copy package files first for better caching
 COPY package.json bun.lockb* ./
 COPY prisma ./prisma/
 # Install dependencies
 COPY package.json bun.lock* bun.lockb* ./
 RUN bun install --frozen-lockfile
-
+# Copy source
 # Copy the rest of the application
 COPY . .
 # Set environment variables for build
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV NODE_ENV=production
 ENV DATABASE_URL="file:./dev.db"
 # Generate Prisma client
 RUN bunx prisma generate --schema=./prisma/schema.prisma
 # Build the application
 RUN bun run build
 # Production image
 FROM node:20-alpine AS runner
 WORKDIR /app
 # Install openssl for Prisma
 RUN apk add --no-cache openssl
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
-ENV DATABASE_URL="file:./data/dev.db"
+RUN bun run build
 # Create non-root user for security
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 # Create data directory for SQLite
 RUN mkdir -p /app/data && chown nextjs:nodejs /app/data
 # Copy necessary files from builder
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
 COPY --from=builder /app/prisma ./prisma
 COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma
 COPY --from=builder /app/node_modules/@prisma ./node_modules/@prisma
 # Set correct ownership
 RUN chown -R nextjs:nodejs /app
 # Switch to non-root user
 USER nextjs
 # Expose port
 EXPOSE 3000
 ENV PORT=3000
-ENV HOSTNAME="0.0.0.0"
+ENV HOSTNAME=0.0.0.0
-
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
 # Health check
 HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
  CMD wget --no-verbose --tries=1 --spider http://localhost:3000 || exit 1
-
+CMD ["bun", "run", "start"]
 # Start the server
 CMD ["node", "server.js"]
@@ -0,0 +1,396 @@
 # Mana Loop
 <p align="center">
  <img src="public/logo.svg" alt="Mana Loop Logo" width="200" />
  <br />
  <em>An incremental/idle game about climbing a magical spire, mastering skills, and uncovering ancient secrets.</em>
 </p>
 <p align="center">
  <a href="https://gitea.tailf367e3.ts.net/Anexim/Mana-Loop">Repository</a> ·
  <a href="#getting-started">Getting Started</a> ·
  <a href="#game-systems">Game Systems</a> ·
  <a href="#contributing">Contributing</a> ·
  <a href="#deployment">Deployment</a>
 </p>
 <p align="center">
  <img src="https://img.shields.io/badge/version-0.2.0-blue" alt="Version" />
  <img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
  <img src="https://img.shields.io/badge/Next.js-16.1.1-black" alt="Next.js" />
  <img src="https://img.shields.io/badge/TypeScript-5-blue" alt="TypeScript" />
  <img src="https://img.shields.io/badge/React-19-61DAFB" alt="React" />
 </p>
 ---
 ## Table of Contents
 - [Overview](#overview)
 - [Features](#features)
 - [Tech Stack](#tech-stack)
 - [Getting Started](#getting-started)
 - [Project Structure](#project-structure)
 - [Game Systems](#game-systems)
 - [Deployment](#deployment)
 - [Contributing](#contributing)
 - [Banned Content](#banned-content)
 - [License](#license)
 - [Acknowledgments](#acknowledgments)
 ---
 ## Overview
 **Mana Loop** is a browser-based incremental/idle game where players gather mana, master skills, climb a mysterious 100-floor spire, craft enchanted equipment, and summon magical golems. The game features a unique time-loop prestige system (Insight) that provides permanent progression bonuses across playthroughs.
 ### Core Game Loop
 1. **Gather Mana** - Click to collect mana or let it regenerate automatically (14 total mana types)
 2. **Study Skills & Spells** - 20+ skills with 5-tier evolution system and milestone upgrades
 3. **Climb the Spire** - Battle through 100 procedurally-generated floors, defeat guardians, sign pacts
 4. **Craft & Enchant** - 3-stage equipment enchantment system with capacity limits
 5. **Summon Golems** - Magical constructs that fight alongside you (4 base + 6 hybrid types)
 6. **Prestige (Loop)** - Reset progress for Insight currency, gain permanent bonuses
 ---
 ## Features
 ### 🔮 Mana System
 - **14 Mana Types**: 7 base elements + 1 utility + 3 compound + 3 exotic
 - Elemental conversion, regeneration mechanics, and meditation bonuses
 - Mana types: Fire, Water, Air, Earth, Light, Dark, Death (base), Transference (utility), Metal, Sand, Lightning (compound), Crystal, Stellar, Void (exotic)
 ### 📜 Skill & Spell System
 - 20+ skills across multiple categories (mana, study, enchanting, golemancy)
 - 5-tier evolution system for each skill
 - Milestone upgrades at levels 5 and 10 per tier
 - Unique special effects unlocked through skill upgrades
 ### ⚔️ Combat & Spire
 - Cast-speed based combat system
 - Multi-spell support from equipped weapons
 - 100-floor spire with elemental themes
 - Floor guardians with unique mechanics and pacts
 - Golem allies that deal automatic damage each tick
 ### 🛡️ Equipment & Enchanting
 - 3-stage enchantment process: Design → Prepare → Apply
 - Equipment capacity system limiting total enchantment power
 - Enchantment effects: stat bonuses, multipliers, spell grants
 - Disenchanting to recover mana (only in Prepare stage)
 - Weapon/armor slots with 2-handed weapon support
 ### 🤖 Golemancy System
 - Summon magical constructs (Earth, Steel, Crystal, Sand + 6 hybrid types)
 - Golem slots unlock every 2 Fabricator levels (max 5 slots at Level 10)
 - Hybrid golems require Enchanter 5 + Fabricator 5
 - Golem maintenance costs and stat upgrades via skills
 ### 🔄 Prestige (Insight)
 - Reset progress for permanent Insight currency
 - Insight upgrades across multiple categories
 - Signed pacts and attunements persist through prestige
 - Three attunement classes: Enchanter (Transference), Invoker (Spells), Fabricator (Golems/Equipment)
 ---
 ## Tech Stack
 | Technology | Version | Purpose |
 |------------|---------|---------|
 | **Next.js** | ^16.1.1 | Full-stack framework (App Router) |
 | **React** | ^19.0.0 | UI library |
 | **TypeScript** | ^5 | Type-safe development |
 | **Tailwind CSS** | ^4 | Utility-first styling |
 | **shadcn/ui** | Radix-based | Reusable UI components |
 | **Zustand** | ^5.0.6 | Client state management (with persist) |
 | **Prisma ORM** | ^6.11.1 | Database abstraction (SQLite) |
 | **Bun** | Latest | JavaScript runtime & package manager |
 | **Vitest** | ^4.1.2 | Unit testing framework |
 | **ESLint** | ^9 | Code linting |
 | **@tanstack/react-query** | ^5.82.0 | Data fetching/caching |
 | **Framer Motion** | ^12.23.2 | Animation library |
 ---
 ## Getting Started
 ### Prerequisites
 - **Bun** runtime (recommended) or Node.js 18+
 - **SQLite** (for local development, included with Prisma)
 - Git
 ### Installation
 ```bash
 # Clone the repository
 git clone git@gitea.tailf367e3.ts.net:Anexim/Mana-Loop.git
 cd Mana-Loop
 # Install dependencies (using Bun - recommended)
 bun install
 # Or using npm
 npm install
 # Set up the database
 bun run db:push
 # or
 npm run db:push
 ```
 ### Development
 ```bash
 # Start the development server (runs on port 3000)
 bun run dev
 # or
 npm run dev
 ```
 The game will be available at `http://localhost:3000`.
 ### Available Scripts
 | Script | Description |
 |--------|-------------|
 | `dev` | Start Next.js development server with logging |
 | `build` | Build for production (outputs to `.next/standalone`) |
 | `start` | Start production server (requires build first) |
 | `lint` | Run ESLint |
 | `test` | Run Vitest tests |
 | `test:coverage` | Run tests with coverage report |
 | `db:push` | Push Prisma schema to database |
 | `db:generate` | Generate Prisma client |
 | `db:migrate` | Run database migrations |
 | `db:reset` | Reset database |
 ---
 ## Project Structure
 ```
 Mana-Loop/
 ├── src/                        # Application source code
 │   ├── app/                    # Next.js App Router
 │   │   ├── layout.tsx          # Root layout (metadata, fonts, providers)
 │   │   ├── page.tsx            # Main game UI (~583 lines)
 │   │   ├── globals.css         # Global styles
 │   │   └── api/                # API routes (minimal)
 │   ├── components/             # React components
 │   │   ├── ui/                 # shadcn/ui components (20+ components)
 │   │   └── game/               # Game-specific components
 │   │       ├── tabs/           # Tab components (SpireTab, SkillsTab, etc.)
 │   │       ├── ManaDisplay.tsx, ActionButtons.tsx, TimeDisplay.tsx
 │   │       └── crafting/, debug/, shared/, stats/ subdirectories
 │   ├── hooks/                  # Custom React hooks (use-mobile, use-toast)
 │   ├── lib/                    # Utility libraries
 │   │   ├── game/               # Core game logic
 │   │   │   ├── store.ts        # Main Zustand store (~2862 lines)
 │   │   │   ├── crafting-slice.ts, study-slice.ts, navigation-slice.ts
 │   │   │   ├── effects.ts, upgrade-effects.ts
 │   │   │   ├── skill-evolution.ts (~3400 lines)
 │   │   │   ├── constants/      # Game definitions (elements, spells, skills)
 │   │   │   ├── data/           # Game data (equipment, golems, recipes)
 │   │   │   └── __tests__/      # Test files for game logic
 │   │   └── db.ts, utils.ts
 │   └── test/                   # Test setup
 ├── prisma/                     # Database schema and migrations
 │   └── schema.prisma           # SQLite schema
 ├── public/                     # Static assets (logo.svg, robots.txt)
 ├── docs/                       # Project documentation
 │   ├── AGENTS.md               # Comprehensive architecture guide
 │   ├── GAME_BRIEFING.md        # Game design document
 │   └── task/                   # Task tracking documentation
 ├── .next/                      # Next.js build output (generated)
 ├── node_modules/               # Dependencies (generated)
 ├── Configuration Files:
 │   ├── package.json            # Project metadata and scripts
 │   ├── tsconfig.json           # TypeScript configuration
 │   ├── next.config.ts          # Next.js config (standalone output)
 │   ├── vitest.config.ts        # Vitest test configuration
 │   ├── eslint.config.mjs       # ESLint configuration
 │   ├── Dockerfile              # Docker multi-stage build
 │   ├── docker-compose.yml      # Docker Compose setup
 │   ├── Caddyfile               # Reverse proxy configuration
 │   └── .gitea/workflows/       # Gitea Actions CI/CD pipeline
 └── README.md                   # This file
 ```
 For detailed architecture patterns and coding guidelines, see [AGENTS.md](./docs/AGENTS.md).
 ---
 ## Game Systems
 ### Mana System
 The core resource of the game with 14 distinct types organized in a hierarchy:
 - **Base Elements (7)**: Fire, Water, Air, Earth, Light, Dark, Death
 - **Utility (1)**: Transference (Enchanter attunement)
 - **Compound (3)**: Metal (Fire+Earth), Sand (Earth+Water), Lightning (Fire+Air)
 - **Exotic (3)**: Crystal (Sand+Sand+Light), Stellar (Fire+Fire+Light), Void (Dark+Dark+Death)
 **Key Files**: `src/lib/game/store.ts`, `src/lib/game/constants/elements.ts`
 ### Skill Evolution System
 Each skill progresses through 5 tiers with upgrades at levels 5 and 10 per tier:
 - **Tier 1**: Basic functionality
 - **Tier 2-5**: Unlock new mechanics and bonuses
 - **Evolution Paths**: Defined in `src/lib/game/skill-evolution.ts` (~3400 lines)
 ### Combat System
 - Cast-speed based spell casting with DPS calculations
 - Elemental damage bonuses and effectiveness
 - Multi-spell support from equipped weapons
 - Golem allies deal automatic damage each tick
 **Key Files**: `src/lib/game/store.ts` (combat tick logic), `src/lib/game/constants/spells.ts`
 ### Enchanting System
 3-stage equipment enchantment process:
 1. **Design**: Choose effects for your equipment type
 2. **Prepare**: Prepare equipment (ONLY way to disenchant existing enchantments)
 3. **Apply**: Apply designed enchantments (cannot re-enchant already enchanted gear)
 **Key Files**: `src/lib/game/crafting-slice.ts`, `src/lib/game/data/enchantment-effects.ts`
 ### Golemancy System
 - **Base Golems**: Earth (Fabricator 2), Steel (Metal), Crystal, Sand
 - **Hybrid Golems** (Enchanter 5 + Fabricator 5): Lava, Galvanic, Obsidian, Prism, Quicksilver, Voidstone
 - **Golem Slots**: 1 slot at Fabricator Level 2, +1 every 2 levels (max 5 at Level 10)
 **Key Files**: `src/lib/game/data/golems.ts`, `src/lib/game/store.ts`
 ### Prestige (Insight)
 Reset progress to gain Insight currency for permanent upgrades:
 - Signed pacts persist through prestige
 - Attunement choices affect gameplay (Enchanter/Invoker/Fabricator)
 - Insight upgrades provide bonuses across all loops
 ---
 ## Deployment
 ### Docker Deployment
 The project includes Docker configuration for containerized deployment:
 ```bash
 # Build and run with Docker Compose
 docker-compose up -d
 # Or build manually
 docker build -t mana-loop .
 docker run -p 3000:3000 mana-loop
 ```
 ### CI/CD Pipeline
 - **Gitea Actions**: `.gitea/workflows/docker-build.yaml` automatically builds and pushes Docker images to `gitea.tailf367e3.ts.net/anexim/mana-loop:latest` on push to `master`/`main` branches
 - **Multi-platform**: Builds for linux/amd64 architecture
 - **Image Tags**: Branch name, commit SHA, "latest"
 ### Reverse Proxy
 A `Caddyfile` is included for reverse proxy setup (forwards port 81 to 3000).
 ### Production Build
 ```bash
 bun run build
 NODE_ENV=production bun .next/standalone/server.js
 ```
 ---
 ## Contributing
 We welcome contributions! Please follow these guidelines:
 ### Development Workflow
 1. **Pull latest changes** before starting work: `git pull origin master`
 2. **Create a feature branch** for your changes: `git checkout -b feature/your-feature`
 3. **Follow existing patterns** in the codebase (see AGENTS.md)
 4. **Run linting** before committing: `bun run lint`
 5. **Test your changes** thoroughly: `bun run test`
 6. **Commit and push** to your branch, then create a pull request
 ### Code Style
 - TypeScript throughout with strict typing
 - Use existing shadcn/ui components over custom implementations
 - Follow the slice pattern for Zustand store actions
 - Keep components focused (extract to separate files when >50 lines)
 - Use path aliases: `@/*` maps to `./src/*`
 ### Adding New Features
 For detailed patterns on adding new effects, skills, spells, or systems, see the comprehensive [AGENTS.md](./docs/AGENTS.md) guide, which includes:
 - Architecture overview
 - Coding patterns
 - Git workflow (mandatory pull before work, commit & push after)
 - Credentials for automation (if applicable)
 ---
 ## Banned Content
 The following content has been removed from the game and should not be re-added:
 ### Banned Mechanics
 - **Lifesteal** - Player cannot heal from dealing damage
 - **Healing** - Player cannot heal themselves (floors take damage, not player)
 ### Banned Mana Types
 - **Life** - Removed (healing theme conflicts with core design)
 - **Blood** - Removed (life derivative)
 - **Wood** - Removed (life derivative)
 - **Mental** - Removed
 - **Force** - Removed
 ### Banned Systems
 - **Familiar System** - Removed in favor of Golemancy and Pact systems
 ---
 ## License
 This project is licensed under the MIT License - see the LICENSE section below for details.
 ```
 MIT License
 Copyright (c) 2024 Mana Loop
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ```
 **Note**: A `LICENSE` file is not currently present in the project root. It is recommended to create one with the above MIT License text.
 ---
 ## Acknowledgments
 - Built with modern web technologies (Next.js, React, TypeScript, Tailwind CSS)
 - UI components from [shadcn/ui](https://ui.shadcn.com/)
 - State management with [Zustand](https://github.com/pmndrs/zustand)
 - Game icons from [Lucide React](https://lucide.dev/)
 - Special thanks to the open-source community for the amazing tools that make this project possible.
 ---
 <p align="center">
  <em>Climb the spire. Master the mana. Uncover the loop.</em>
 </p>
@@ -0,0 +1,94 @@
 # StatsTab Loading Bug Investigation Report
 ## Critical Issue Found
 **Main Problem**: The `StatsTab.tsx` component has incorrect import paths that prevent it from loading. All section imports use the pattern `./StatsTab/...` instead of `./` which causes TypeScript compilation failures.
 ### Root Cause Analysis
 1. **Incorrect Import Paths**: In `StatsTab.tsx`, sections are imported with incorrect relative paths:
   ```typescript
   // BROKEN: All these imports are wrong
   import { ManaStatsSection } from './StatsTab/ManaStatsSection';
   import { CombatStatsSection } from './StatsTab/CombatStatsSection';
   import { PactStatusSection } from './StatsTab/PactStatusSection';
   import { StudyStatsSection } from './StatsTab/StudyStatsSection';
   import { ElementStatsSection } from './StatsTab/ElementStatsSection';
   import { LoopStatsSection } from './StatsTab/LoopStatsSection';
   // CORRECT (pattern used by other tabs):
   // import { ComponentName } from './ComponentName';
   ```
 2. **Missing Test Files**: No test files exist for StatsTab, unlike other tabs which have comprehensive test coverage.
 3. **TypeScript Compilation Status**: The codebase has significant other TypeScript errors, but StatsTab itself would fail to compile due to the import resolution errors.
 ### File Structure Analysis
 ```
 src/components/game/tabs/
 ├── StatsTab/                           ← Directory contains section files
 │   ├── CombatStatsSection.tsx
 │   ├── ElementStatsSection.tsx
 │   ├── LoopStatsSection.tsx
 │   ├── ManaStatsSection.tsx
 │   ├── PactStatusSection.tsx
 │   └── StudyStatsSection.tsx
 └── StatsTab.tsx                        ← Main component file expecting nested 'StatsTab/' paths
 ```
 ### Impact
 - StatsTab does not load due to import resolution errors
 - Application fails to compile for StatsTab modules
 - No way to access character stats information
 ### Comparison with Other Tabs
 All other tabs follow the correct pattern:
 **EquipmentTab.tsx** (lines 7-9):
 ```typescript
 import { EquipmentSlotGrid } from './EquipmentTab/EquipmentSlotGrid';
 import { InventoryList } from './EquipmentTab/InventoryList';
 import { EquipmentEffectsSummary } from './EquipmentTab/EquipmentEffectsSummary';
 ```
 Note: EquipmentTab uses `./EquipmentTab/...` pattern while StatsTab incorrectly uses `./StatsTab/...` pattern relative to StatsTab.tsx.
 ### Recommended Fix
 Change all import paths in `StatsTab.tsx` from:
 ```typescript
 import { SectionName } from './StatsTab/SectionName';
 ```
 To:
 ```typescript
 import { SectionName } from './SectionName';
 ```
 This will make all section files resolve correctly since they're located directly in the `StatsTab/` directory.
 ### Files Read
 - ✅ StatsTab.tsx (main component)
 - ✅ ManaStatsSection.tsx
 - ✅ CombatStatsSection.tsx
 - ✅ ElementStatsSection.tsx
 - ✅ LoopStatsSection.tsx
 - ✅ PactStatusSection.tsx
 - ✅ StudyStatsSection.tsx
 - ✅ index.ts (showing StatsTab export)
 ### Assessment
 **Clear Root Cause**: The incorrect import paths prevent the component from loading. Fixing these import paths will resolve the issue.
 **Likely Guiding Factors**:
 1. File was moved or renamed after being created, causing import paths to become stale
 2. Developer accidentally referenced the directory name in import paths
 3. Copy-paste error when creating StatsTab from another tab template
 The fix is straightforward: correct all six import statements to use the proper relative path.
@@ -0,0 +1,3 @@
 [test]
 dir = "./src/test"
 preload = ["./src/test/setup.ts"]
@@ -0,0 +1,847 @@
 # Mana-Loop: Comprehensive Game Briefing Document
 **Document Version:** 2.0  
 **Updated:** Disciplines Refactor (skills system removed; disciplines replace it entirely)
 ---
 ## Table of Contents
 1. [Executive Summary](#executive-summary)
 2. [Core Game Loop](#core-game-loop)
 3. [Mana System](#mana-system)
 4. [Time & Incursion System](#time--incursion-system)
 5. [Spire & Floor System](#spire--floor-system)
 6. [Combat System](#combat-system)
 7. [Guardian & Pact System](#guardian--pact-system)
 8. [Attunement System](#attunement-system)
 9. [Discipline System](#discipline-system)
 10. [Equipment & Enchantment System](#equipment--enchantment-system)
 11. [Golemancy System](#golemancy-system)
 12. [Prestige/Loop System](#prestigeloop-system)
 13. [Achievement System](#achievement-system)
 14. [Formulas & Calculations](#formulas--calculations)
 15. [System Interactions](#system-interactions)
 16. [Code Architecture](#code-architecture)
 ---
 ## Executive Summary
 **Mana-Loop** is a browser-based incremental/idle game with a 30-day time loop mechanic. Players gather mana, practice disciplines, climb a 100-floor spire, defeat guardians, sign pacts, enchant equipment, and prestige for permanent progression.
 **Key Differentiators:**
 - 3-class Attunement system (Enchanter, Invoker, Fabricator)
 - Equipment-based spell system (spells come from enchanted gear)
 - Practice-based Discipline system — no discrete skill levels, only continuous XP growth
 - Time pressure through the incursion mechanic
 - Guardian pacts provide permanent multipliers
 **Code Architecture:** Modular stores, crafting actions, discipline data, and constants. The old skill system (study, skill tiers, milestone upgrades) has been fully removed and replaced by the Discipline system.
 ---
 ## Core Game Loop
 ### Primary Loop (Within Each Run)
 ```
 ┌─────────────────────────────────────────────────────────────┐
 │                      TIME LOOP (30 Days)                     │
 ├─────────────────────────────────────────────────────────────┤
 │  ┌─────────┐    ┌────────────┐    ┌───────────┐    ┌──────┐ │
 │  │ GATHER  │───▶│  PRACTICE  │───▶│   CLIMB   │───▶│CRAFT │ │
 │  │  MANA   │    │ DISCIPLINES│    │   SPIRE   │    │ GEAR │ │
 │  └─────────┘    └────────────┘    └───────────┘    └──────┘ │
 │       │               │                │               │    │
 │       └───────────────┴────────────────┴───────────────┘    │
 │                            │                                 │
 │                            ▼                                 │
 │  ┌─────────────────────────────────────────────────────┐   │
 │  │           DEFEAT GUARDIANS → SIGN PACTS              │   │
 │  └─────────────────────────────────────────────────────┘   │
 │                            │                                 │
 │                            ▼                                 │
 │  ┌─────────────────────────────────────────────────────┐   │
 │  │           DAY 30: LOOP ENDS → GAIN INSIGHT           │   │
 │  └─────────────────────────────────────────────────────┘   │
 └─────────────────────────────────────────────────────────────┘
 ```
 ### Game Actions
 | Action | Effect | Time Cost |
 |--------|--------|-----------|
 | **Meditate** | Regen mana with meditation bonus multiplier | Passive (auto-selected after actions) |
 | **Climb** | Progress through spire floors, cast spells | Active combat |
 | **Practice** | Run active disciplines, consuming mana each tick | Continuous |
 | **Craft** | Create/enchant equipment | Hours per stage |
 | **Convert** | Auto-convert raw mana to elements | Per tick |
 | **Design** | Create enchantment designs (limited to owned gear types) | Hours |
 | **Prepare** | Ready equipment for enchanting | Hours + mana |
 | **Enchant** | Apply enchantment to equipment | Hours + mana |
 ### Action Transitions
 - After completing Design, Prepare, Enchant, or Craft the game automatically transitions to **Meditate**
 - Action buttons are hidden when in Spire Mode
 - `currentAction` state lives in `stores/gameStore.ts`
 ---
 ## Mana System
 ### Mana Types Hierarchy
 ```
 Raw Mana (Base Resource)
    │
    ├──▶ Base Elements (7) ─────────────────────────────────────┐
    │    Fire*, Water*, Air*, Earth*, Light, Dark, Death        │
    │    *Locked at start - must be unlocked                    │
    │                                                           │
    ├──▶ Utility Element (1) ───────────────────────────────────┤
    │    Transference (Enchanter attunement - UNLOCKED at start) │
    │                                                           │
    ├──▶ Compound Elements (3) ── Created from 2 base ──────────┤
    │    Metal = Fire + Earth                                   │
    │    Sand  = Earth + Water                                  │
    │    Lightning = Fire + Air                                 │
    │                                                           │
    └──▶ Exotic Elements (3) ── Created from advanced recipes ──┤
         Crystal = Sand + Sand + Light                          │
         Stellar = Fire + Fire + Light                          │
         Void    = Dark + Dark + Death                          │
 ```
 Fire, Water, Air, and Earth are **locked at start**. Only Transference is unlocked initially.
 ### Mana Formulas
 **Maximum Raw Mana:**
 ```
 maxMana = (100 + (manaWellLevel × 100) + (prestigeManaWell × 500) + equipmentBonuses) × maxManaMultiplier
 ```
 **Maximum Elemental Mana:**
 ```
 elementMax = (10 + (elemAttuneLevel × 50) + (prestigeElemAttune × 25)) × elementCapMultiplier
 ```
 **Base Regeneration (per hour):**
 ```
 baseRegen       = 2 + (manaFlowLevel × 1) + (manaSpringLevel × 2) + (prestigeManaFlow × 0.5)
 effectiveRegen  = baseRegen × (1 - incursionStrength) × meditationMultiplier
 ```
 **Meditation Bonus:**
 ```
 Base: 1 + min(hours/4, 0.5)  →  up to 1.5× after 4 hours
 ```
 **Attunement Mana Conversion:**
 - Enchanter: Raw → Transference at 0.2/hour base (scales with level)
 - Fabricator: Raw → Earth at 0.25/hour base (scales with level)
 ### Starting Elements
 | Element | Unlocked at Start |
 |---------|-------------------|
 | Transference | ✅ Yes |
 | Fire | ❌ No |
 | Water | ❌ No |
 | Air | ❌ No |
 | Earth | ❌ No |
 | Light | ❌ No |
 | Dark | ❌ No |
 | Death | ❌ No |
 ### Mana Conversion Cost
 - **100 Raw Mana = 1 Elemental Mana** (for base elements)
 - Compound/Exotic elements are crafted, not converted
 ---
 ## Time & Incursion System
 ### Time Constants
 | Constant | Value | Description |
 |----------|-------|-------------|
 | `TICK_MS` | 200ms | Real time per game tick |
 | `HOURS_PER_TICK` | 0.04 | Game hours per tick |
 | `MAX_DAY` | 30 | Days per loop |
 | `INCURSION_START_DAY` | 20 | When incursion begins |
 ### Time Progression
 - 1 real second = 5 game hours (at 5 ticks/second)
 - 1 game day = 24 game hours = 4.8 real seconds
 - Full 30-day loop ≈ 2.4 real minutes
 ### Incursion Mechanic
 ```
 if (day < 20): incursionStrength = 0
 else:          incursionStrength = min(0.95, (totalHours / maxHours) × 0.95)
 ```
 Reduces mana regeneration by `(1 - incursionStrength)`. Starts at 0% on Day 20, reaches 95% by Day 30.
 ---
 ## Spire & Floor System
 ### Floor Generation
 **Floor Element Cycle:**
 ```javascript
 FLOOR_ELEM_CYCLE = ["fire", "water", "air", "earth", "light", "dark", "death"]
 element = FLOOR_ELEM_CYCLE[(floor - 1) % 7]
 ```
 **Floor HP Formula:**
 ```
 normalFloorHP  = floor(100 + floor × 50 + floor^1.7)
 guardianFloorHP = GUARDIANS[floor].hp  // in constants/guardians.ts
 ```
 **Guardian Floors:** 10, 20, 30, 40, 50, 60, 80, 90, 100
 ### Room Types
 | Room Type | Chance | Description |
 |-----------|--------|-------------|
 | **Combat** | Default | Single enemy, normal combat |
 | **Guardian** | Fixed | Boss floor |
 | **Swarm** | 15% | 3–6 enemies with 40% HP each |
 | **Speed** | 10% | Enemy with dodge chance (25% base + 0.5%/floor) |
 | **Puzzle** | 20% on puzzle floors | Progress-based, faster with relevant attunement |
 ### Armor Scaling
 ```javascript
 FLOOR_ARMOR_CONFIG = {
  baseChance:     0,      // No armor before floor 10
  chancePerFloor: 0.01,   // +1% chance per floor after 10
  maxArmorChance: 0.5,    // Max 50% of floors have armor
  minArmor:       0.05,   // Min 5% damage reduction
  maxArmor:       0.25    // Max 25% on non-guardians
 }
 ```
 ---
 ## Combat System
 ### Spell Casting Mechanics
 ```
 progressPerTick = HOURS_PER_TICK × spellCastSpeed × totalAttackSpeed
 ```
 Lightning spells get +30% effective cast speed.
 ### Damage Calculation
 ```
 baseDamage     = spellDamage + disciplineBonus(combatStat)
 pctBonus       = 1 + disciplineMultiplier
 pactMultiplier = product of all signed pact multipliers
 elementalBonus = getElementalBonus(spellElement, floorElement)
 finalDamage = baseDamage × pctBonus × pactMultiplier × elementalBonus
 ```
 ### Elemental Effectiveness
 | Condition | Multiplier |
 |-----------|------------|
 | Spell same element as floor | 1.25× |
 | Spell is opposite of floor element | 1.50× (Super Effective) |
 | Spell's opposite matches floor | 0.75× (Not Very Effective) |
 | Raw mana spells | 1.00× |
 **Element Opposites:**
 ```
 Fire ↔ Water    Air ↔ Earth    Light ↔ Dark
 Lightning — no opposite (has armor pierce instead)
 ```
 ### Armor & Damage Reduction
 ```
 effectiveArmor = max(0, enemyArmor - armorPierce)
 damageDealt    = damage × (1 - effectiveArmor)
 ```
 ### Critical Hits
 Critical chance and multiplier come from discipline bonuses (no fixed skill levels).
 ### Special Combat Effects
 | Effect | Description |
 |--------|-------------|
 | **Burn** | Damage over time |
 | **Freeze** | Prevents dodge |
 | **Stun** | Temporary disable |
 | **Pierce** | Ignores % armor |
 | **Chain** | Hits multiple targets |
 | **AOE** | Area damage |
 | **Buff** | Damage multiplier |
 ---
 ## Guardian & Pact System
 ### Guardian Floors & Stats
 | Floor | Guardian | Element | HP | Pact Mult | Armor | Unique Perk |
 |-------|----------|---------|-----|-----------|-------|-------------|
 | 10 | Ignis Prime | Fire | 5,000 | 1.5× | 10% | Fire spells cast 10% faster |
 | 20 | Aqua Regia | Water | 15,000 | 1.75× | 15% | Water spells +15% damage |
 | 30 | Ventus Rex | Air | 30,000 | 2.0× | 18% | Air spells 15% crit chance |
 | 40 | Terra Firma | Earth | 50,000 | 2.25× | 25% | Earth spells +25% vs guardians |
 | 50 | Lux Aeterna | Light | 80,000 | 2.5× | 20% | Light spells reveal weaknesses |
 | 60 | Umbra Mortis | Dark | 120,000 | 2.75× | 22% | Dark spells +25% vs armored |
 | 80 | Mors Ultima | Death | 250,000 | 3.25× | 25% | Death spells execute <20% HP |
 | 90 | Primordialis | Void | 400,000 | 4.0× | 30% | Void spells ignore 30% resistance |
 | 100 | The Awakened One | Stellar | 1,000,000 | 5.0× | 35% | All spells +50% dmg, 25% faster |
 ### Guardian Boons (on pact)
 | Boon Type | Effect |
 |-----------|--------|
 | `maxMana` | +Max raw mana |
 | `manaRegen` | +Regen/hour |
 | `castingSpeed` | +% cast speed |
 | `elementalDamage` | +% element damage |
 | `rawDamage` | +% all damage |
 | `critChance` | +% crit chance |
 | `critDamage` | +% crit multiplier |
 | `insightGain` | +% insight |
 ### Victory Condition
 Defeat floor 100 guardian **and** sign the pact → 3× normal insight.
 ---
 ## Attunement System
 Attunements are class-like specializations that unlock discipline pools and grant unique capabilities.
 ### The Three Attunements
 #### 1. Enchanter (Right Hand) ✅
 | Property | Value |
 |----------|-------|
 | **Slot** | Right Hand |
 | **Primary Mana** | Transference |
 | **Raw Regen** | +0.5/hour base |
 | **Conversion** | 0.2 raw→transference/hour |
 | **Unlock** | Starting attunement |
 **Disciplines Unlocked:** Enchanter discipline pool (`data/disciplines/enchanter.ts`)  
 **Capabilities:** Enchanting & disenchanting equipment
 #### 2. Invoker (Chest) ✅
 | Property | Value |
 |----------|-------|
 | **Slot** | Chest |
 | **Primary Mana** | None (gains from pacts) |
 | **Raw Regen** | +0.3/hour base |
 | **Conversion** | None |
 | **Unlock** | Defeat first guardian |
 **Disciplines Unlocked:** Invoker discipline pool (`data/disciplines/invoker.ts`)  
 **Capabilities:** Form pacts with guardians, access guardian powers
 #### 3. Fabricator (Left Hand) ✅
 | Property | Value |
 |----------|-------|
 | **Slot** | Left Hand |
 | **Primary Mana** | Earth |
 | **Raw Regen** | +0.4/hour base |
 | **Conversion** | 0.25 raw→earth/hour |
 | **Unlock** | Prove crafting worth |
 **Disciplines Unlocked:** Fabricator discipline pool (`data/disciplines/fabricator.ts`)  
 **Capabilities:** Golem crafting, gear crafting, Earth shaping
 ### Attunement Leveling
 ```javascript
 Level 2: 1,000 XP
 Level 3: 2,500 XP
 Level 4: 5,000 XP
 Level 5: 10,000 XP
 // Each level ≈ 2× previous; Max Level: 10
 regenMultiplier  = 1.5^(level - 1)
 conversionRate   = baseRate × 1.5^(level - 1)
 ```
 ---
 ## Discipline System
 Disciplines replace the old skill system entirely. There are no discrete levels or study actions — disciplines grow **continuously** through practice. The player activates a discipline and it drains mana each tick in exchange for permanent stat growth.
 ### Core Concept
 > The more you practice a discipline, the stronger its effect — but the more mana it costs to maintain.
 - **XP** accumulates each tick the discipline is active and has enough mana to drain
 - **Stat bonus** grows as a power curve of XP (never resets within a run)
 - **Mana drain** also increases with XP — mastery has a cost
 - **Perks** unlock at XP thresholds, granting bonus effects
 ### Disciplines vs Old Skills
 | Old Skill System | Discipline System |
 |-----------------|-------------------|
 | Discrete levels (1–10 per tier) | Continuous XP accumulation |
 | Mana cost paid once on study | Mana drained every tick |
 | Required hours to level up | Grows passively while active |
 | Milestone upgrades at L5/L10 | Perks unlock at XP thresholds |
 | 5-tier evolution (T1–T5) | Single continuous curve per discipline |
 ### Formulas
 **Stat Bonus (continuous):**
 ```
 StatBonus = baseValue × (XP / scalingFactor)^0.65
 ```
 **Mana Drain Per Tick:**
 ```
 ManaDrainPerTick = drainBase × (1 + (XP / difficultyFactor)^0.4)
 ```
 - `scalingFactor` controls how quickly stats grow
 - `difficultyFactor` controls how quickly drain increases
 - Higher `scalingFactor` → slower stat gain; higher `difficultyFactor` → slower drain increase
 ### Concurrent Discipline Limit
 ```
 concurrentLimit = 1 + floor(totalXP / 500)   // capped at base + 3
 ```
 Players start with 1 active discipline slot. As total XP across all disciplines grows, additional slots unlock (max 4 total).
 ### Perk Types
 | Type | Behaviour |
 |------|-----------|
 | `once` | Unlocks permanently when XP reaches `threshold` |
 | `capped` | Grants stacking bonus tiers; each tier requires another `interval` XP beyond `threshold` |
 | `infinite` | Repeating bonus — a new stack every `interval` XP past `threshold` (no cap) |
 ### Attunement Pools
 | Pool | File | Requires |
 |------|------|---------|
 | Base | `data/disciplines/base.ts` | None (all attunements) |
 | Enchanter | `data/disciplines/enchanter.ts` | Enchanter attunement |
 | Invoker | `data/disciplines/invoker.ts` | Invoker attunement |
 | Fabricator | `data/disciplines/fabricator.ts` | Fabricator attunement |
 ### Example Disciplines
 | Discipline | Attunement | Mana Type | Stat Bonus | Description |
 |------------|------------|-----------|------------|-------------|
 | Raw Mana Mastery | Base | Raw | `maxManaBonus` | More raw mana from practice |
 | Elemental Attunement | Base | Fire | `elementCap_fire` | Expanded fire capacity |
 | Lightning Surge | Invoker | Lightning | `lightningDamage` | Boosts lightning spell damage |
 | Void Echo | Invoker | Void | `voidCastSpeed` | Increases void spell cast speed |
 | Metalworking | Fabricator | Metal | `craftSpeed_metal` | Faster metal equipment crafting |
 | Crystal Shaping | Fabricator | Crystal | `durability_crystal` | More durable crystal equipment |
 | Soulforge | Enchanter | Light | `enchantPower` | Stronger enchantment effects |
 | Mana Prism | Enchanter | Light | `manaReflect` | Prismatic mana focusing |
 ### Discipline Lifecycle
 ```
 1. Player opens Disciplines tab → sees available disciplines for their attunements
 2. Player activates discipline (costs nothing up-front; requires mana type unlocked)
 3. Each game tick:
   a. ManaDrain deducted from mana pool
   b. If insufficient mana → discipline auto-pauses
   c. If sufficient mana → disc.xp += 1; stat bonuses recomputed
 4. Player can manually pause/resume disciplines
 5. On loop end, XP resets (stat bonuses are per-run, not permanent)
   — Prestige upgrades may eventually preserve some XP
 ```
 ### Discipline UI
 `src/components/game/tabs/DisciplinesTab.tsx`  
 `src/lib/game/stores/discipline-slice.ts` — Zustand store (persisted)  
 `src/lib/game/effects/discipline-effects.ts` — integrates into `getUnifiedEffects()`
 ---
 ## Equipment & Enchantment System
 ### Equipment Slots
 ```
 mainHand   - Staves (2H), Wands, Swords
 offHand    - Shields, Catalysts (blocked by 2-handed weapons)
 head       - Hoods, Hats, Helms
 body       - Robes, Armor
 hands      - Gloves, Gauntlets
 feet       - Boots, Shoes
 accessory1 - Rings, Amulets
 accessory2 - Rings, Amulets
 ```
 ### Two-Handed Weapons
 2-handed weapons (Staves) occupy both `mainHand` and `offHand`. The offhand slot is **blocked** when a 2H weapon is equipped. The UI shows a "Blocked by 2-handed weapon" label on the offhand slot.
 ### Equipment Instance Structure
 ```typescript
 interface EquipmentInstance {
  instanceId:     string;
  typeId:         string;
  name:           string;
  enchantments:   AppliedEnchantment[];
  usedCapacity:   number;
  totalCapacity:  number;
  rarity:         'common' | 'uncommon' | 'rare' | 'epic' | 'legendary' | 'mythic';
  quality:        number;  // 0–100
 }
 ```
 ### Enchantment Process (3 Stages)
 #### Stage 1: Design
 - Select effects from unlocked pool (`data/enchantment-effects.ts`)
 - Limited to owned gear types
 - Time: 1h base + 0.5h per effect stack
 - Implemented in `crafting-actions/design-actions.ts`
 #### Stage 2: Prepare
 - Mana cost: `capacity × 10`
 - Time: `2h + 1h per 50 capacity`
 - Auto-transitions to Meditate on complete
 - Implemented in `crafting-actions/preparation-actions.ts`
 #### Stage 3: Apply
 - Mana per hour: `20 + 5 per effect stack`
 - Time: `2h + 1h per effect stack`
 - Grants Enchanter XP: 1 XP per 10 capacity
 - Auto-transitions to Meditate on complete
 - Implemented in `crafting-actions/application-actions.ts`
 ### Enchantment Effect Categories
 | Category | Description | Equipment Types |
 |----------|-------------|-----------------|
 | **Spell** | Grants spell ability | Casters only |
 | **Mana** | Max/regen/click bonuses | Casters, Catalysts, Head, Body, Accessories |
 | **Combat** | Damage, crit, speed | Casters, Hands |
 | **Utility** | Meditation, insight | Most equipment |
 | **Special** | Unique effects | Various |
 | **Elemental** | Weapon enchantments | Swords, Casters |
 ### Starting Equipment
 | Slot | Item | Enchantment | Capacity |
 |------|------|-------------|----------|
 | Main Hand | Basic Staff | Mana Bolt spell | 50/50 |
 | Body | Civilian Shirt | None | 0/30 |
 | Feet | Civilian Shoes | None | 0/15 |
 ---
 ## Golemancy System
 ### Golem Slots
 ```
 Fabricator Level 2: 1 slot
 Fabricator Level 4: 2 slots
 Fabricator Level 6: 3 slots
 Fabricator Level 8: 4 slots
 Fabricator Level 10: 5 slots
 slots = floor(fabricatorLevel / 2)
 ```
 ### Golem Types
 #### Base Golems
 | Golem | Element | Damage | Speed | Armor Pierce | Unlock |
 |-------|---------|--------|-------|--------------|--------|
 | Earth Golem | Earth | 8 | 1.5/h | 15% | Fabricator 2 |
 #### Elemental Variants
 | Golem | Element | Damage | Speed | Pierce | Unlock |
 |-------|---------|--------|-------|--------|--------|
 | Steel Golem | Metal | 12 | 1.2/h | 35% | Metal mana unlocked |
 | Crystal Golem | Crystal | 18 | 1.0/h | 25% | Crystal mana unlocked |
 | Sand Golem | Sand | 6 | 2.0/h | 10% | Sand mana unlocked |
 #### Advanced Hybrid Golems (Enchanter 5 + Fabricator 5)
 | Golem | Elements | Damage | Speed | Pierce | Special |
 |-------|----------|--------|-------|--------|---------|
 | Lava Golem | Earth + Fire | 15 | 1.0/h | 20% | AOE 2 |
 | Galvanic Golem | Metal + Lightning | 10 | 3.5/h | 45% | Fast |
 | Obsidian Golem | Earth + Dark | 25 | 0.8/h | 50% | High damage |
 | Prism Golem | Crystal + Light | 20 | 1.5/h | 35% | AOE 3 |
 | Quicksilver Golem | Metal + Water | 8 | 4.0/h | 30% | Very fast |
 | Voidstone Golem | Earth + Void | 40 | 0.6/h | 60% | Ultimate |
 ### Golem Combat
 ```
 progressPerTick = HOURS_PER_TICK × attackSpeed × efficiencyBonus
 damage          = baseDamage × (1 + golemMasteryBonus)   // bonus from discipline
 ```
 ---
 ## Prestige/Loop System
 ### Loop End Conditions
 | Condition | Result |
 |-----------|--------|
 | Day 30 reached | Loop ends, gain insight |
 | Floor 100 + Pact 100 signed | Victory! 3× insight |
 ### Insight Formula
 ```
 baseInsight  = floor(maxFloorReached × 15 + totalManaGathered / 500 + signedPacts.length × 150)
 finalInsight = floor(baseInsight × (1 + insightAmpLevel × 0.25) × disciplineBonus)
 ```
 ### Prestige Upgrades
 | Upgrade | Max | Cost | Effect |
 |---------|-----|------|--------|
 | Mana Well | 5 | 500 | +500 starting max mana |
 | Mana Flow | 10 | 750 | +0.5 permanent regen |
 | Deep Memory | 5 | 1000 | +1 memory slot |
 | Insight Amp | 4 | 1500 | +25% insight gain |
 | Spire Key | 5 | 4000 | Start at floor +2 |
 | Temporal Echo | 5 | 3000 | +10% mana generation |
 | Steady Hand | 5 | 1200 | -15% durability loss |
 | Ancient Knowledge | 5 | 2000 | Start with blueprint |
 | Elemental Attune | 10 | 600 | +25 element cap |
 | Spell Memory | 3 | 2500 | Start with random spell |
 | Guardian Pact | 5 | 3500 | +10% pact multiplier |
 | Quick Start | 3 | 400 | +100 starting mana |
 | Elem. Start | 3 | 800 | +5 each unlocked element |
 ### Memory System
 - **Base slots:** 3  
 - **Additional:** +1 per Deep Memory prestige level  
 - **Memories:** Spells preserved across loops
 ---
 ## Achievement System
 ### Categories
 | Category | Description |
 |----------|-------------|
 | `mana` | Mana gathering milestones |
 | `combat` | Combat achievements |
 | `progression` | Floor/guardian progression |
 | `crafting` | Equipment and enchanting |
 | `prestige` | Loop and insight milestones |
 ### Reward Types
 | Reward | Effect |
 |--------|--------|
 | `insight` | One-time insight bonus |
 | `manaBonus` | Permanent max mana |
 | `damageBonus` | Permanent damage increase |
 | `regenBonus` | Permanent regen increase |
 | `title` | Cosmetic title |
 | `unlockEffect` | Unlocks enchantment effect |
 ---
 ## Formulas & Calculations
 ### Damage Calculation (Complete)
 ```javascript
 function calcDamage(state, spellId, floorElement) {
  const spell = SPELLS_DEF[spellId];        // constants/spells.ts
  // Base damage + discipline bonuses
  let damage = spell.dmg + disciplineBonus('combatDamage');
  // Discipline multiplier bonus
  damage *= 1 + disciplineBonus('damagePct');
  // Guardian bane (vs guardians only)
  if (isGuardian) {
    damage *= 1 + disciplineBonus('guardianBane');
  }
  // Pact multiplier
  damage *= state.signedPacts.reduce((m, f) => m * GUARDIANS[f].pact, 1);
  // Elemental effectiveness
  damage *= getElementalBonus(spell.elem, floorElement);
  // Critical hit (from discipline crit bonus)
  const critChance = disciplineBonus('critChance');
  if (Math.random() < critChance) damage *= 1.5;
  // Equipment effects
  damage *= effects.baseDamageMultiplier;
  damage += effects.baseDamageBonus;
  // Armor reduction
  const effectiveArmor = Math.max(0, enemyArmor - armorPierce);
  damage *= (1 - effectiveArmor);
  return Math.floor(damage);
 }
 ```
 ### DPS Calculation
 ```javascript
 dps = (damage × castSpeed × attackSpeedMultiplier) / hour
 ```
 ---
 ## System Interactions
 ### Primary Interaction Map
 ```
 ┌─────────────────────────────────────────────────────────────────────────┐
 │                         CORE SYSTEM INTERACTIONS                         │
 ├─────────────────────────────────────────────────────────────────────────┤
 │                                                                          │
 │  ┌──────────┐        ┌────────────┐        ┌──────────┐                │
 │  │   MANA   │───────▶│ DISCIPLINES│───────▶│  COMBAT  │                │
 │  └──────────┘        └────────────┘        └──────────┘                │
 │       │                    │                    │                       │
 │       │                    │                    │                       │
 │       ▼                    ▼                    ▼                       │
 │  ┌──────────┐        ┌──────────┐         ┌──────────┐                │
 │  │ATTUNEMENT│───────▶│ENCHANTING│────────▶│  SPIRE   │                │
 │  └──────────┘        └──────────┘         └──────────┘                │
 │       │                    │                    │                       │
 │       │                    │                    │                       │
 │       ▼                    ▼                    ▼                       │
 │  ┌──────────┐        ┌──────────┐         ┌──────────┐                │
 │  │GOLEMANCY │        │EQUIPMENT │────────▶│ GUARDIAN │                │
 │  └──────────┘        └──────────┘         └──────────┘                │
 │                                                 │                       │
 │                                                 ▼                       │
 │                                          ┌──────────┐                  │
 │                                          │   PACT   │                  │
 │                                          └──────────┘                  │
 │                                                 │                       │
 │                                                 ▼                       │
 │                                          ┌──────────┐                  │
 │                                          │ PRESTIGE │                  │
 │                                          └──────────┘                  │
 └─────────────────────────────────────────────────────────────────────────┘
 ```
 ### Key System Dependencies
 | System | Depends On | Unlocks/Enables |
 |--------|------------|-----------------|
 | **Disciplines** | Mana (drain cost), Attunement (pool access) | All combat/crafting stat bonuses |
 | **Enchanting** | Enchanter attunement, Enchanter disciplines | Equipment spells, bonuses |
 | **Golemancy** | Fabricator attunement, Earth mana | Additional combat damage |
 | **Pacts** | Guardian defeat | Permanent multipliers, boons |
 | **Prestige** | Loop completion | Permanent upgrades, memories |
 | **Equipment** | Crafting/Blueprints | Spell access, stat bonuses |
 ### Progression Gates
 1. **Early Game (Floors 1–10):** Mana gathering and regen, base disciplines, starting equipment
 2. **Mid Game (Floors 10–40):** First guardian pacts, attunement unlocking, attunement discipline pools, equipment enchanting, Golemancy
 3. **Late Game (Floors 40–80):** Compound/exotic elements, hybrid golems, advanced discipline perks, advanced enchantments
 4. **End Game (Floors 80–100):** Void/Stellar/Crystal spells, ultimate golems, victory preparation
 ---
 ## Code Architecture
 ### Modular Structure Overview
 #### Store Architecture
 **Active Stores (`src/lib/game/stores/`):**
 - **gameStore.ts** — Core state, tick logic, main actions
 - **manaStore.ts** — Mana gathering, elements, conversion
 - **combatStore.ts** — Combat system, spells, floor progression
 - **prestigeStore.ts** — Prestige/loop system, insight, upgrades
 - **discipline-slice.ts** — Discipline activation, XP ticking, perk evaluation
 - **uiStore.ts** — UI state, modals, debug settings
 **Legacy Store (Migration in Progress):**
 - **store.ts** — Legacy monolithic store (reduced)
 - **store/** — Legacy store slices being migrated to `stores/`
 - **store-modules/** — Legacy store utilities
 #### Discipline System (`src/lib/game/`)
 - `data/disciplines/` — Per-attunement discipline definitions
 - `types/disciplines.ts` — `DisciplineDefinition`, `DisciplineState`, perk types
 - `utils/discipline-math.ts` — `calculateStatBonus`, `calculateManaDrain`, perk helpers
 - `effects/discipline-effects.ts` — `computeDisciplineEffects()` → feeds `getUnifiedEffects()`
 - `stores/discipline-slice.ts` — Zustand store for active discipline state
 #### Crafting System (`src/lib/game/crafting-actions/`)
 - Modular action files for each crafting stage
 - Design, preparation, application, equipment, disenchant actions
 #### Constants (`src/lib/game/constants/`)
 - Domain-specific constant files: elements, guardians, spells, rooms, prestige
 - Barrel exports via `constants/index.ts`
 #### Game Data (`src/lib/game/data/`)
 - Enchantment effects, equipment types, golems, disciplines, achievements, loot tables
 - Organized by domain for easy navigation
 ### File Size Guidelines
 All files kept under **400 lines** (enforced by pre-commit hook).
 ---
 ## Appendix: Removed Systems
 The following systems no longer exist and should not be re-introduced:
 | Removed | Replacement |
 |---------|-------------|
 | Skill System (study, tiers T1–T5, milestone upgrades) | Discipline System |
 | `skillStore.ts` | `discipline-slice.ts` |
 | `skill-evolution-modules/` | `data/disciplines/` + `discipline-math.ts` |
 | `docs/skills.md` | This document (Discipline System section) |
 | `docs/strategy/` | Fully implemented; folder removed |
 | Ascension skills | Deleted (no replacement) |
 | Scroll crafting | Deleted (violates no-instant-finishing pillar) |
 | Lifesteal/healing | Banned permanently |
 ---
 *Document Version: 2.0 — Disciplines Refactor*  
 *End of Game Briefing Document*
@@ -0,0 +1,14 @@
 # Circular Dependencies
 Generated: 2026-05-22T07:19:25.482Z
 Found: 4 circular chain(s) — these MUST be fixed before modifying involved files.
 1. Processed 128 files (1.6s) (3 warnings)
 2. 1) stores/gameStore.ts > stores/gameActions.ts
 3. 2) stores/gameStore.ts > stores/gameLoopActions.ts
 4. 3) stores/gameStore.ts > stores/tick-pipeline.ts
 ## How to fix
 1. Identify which import in the chain can be extracted to a shared types/utils file.
 2. Move the shared type or function there.
 3. Both files import from the new shared module instead of each other.
 4. Run: bunx madge --circular src/lib/game  (should return clean)
@@ -0,0 +1,642 @@
 {
  "_meta": {
    "generated": "2026-05-22T07:19:23.720Z",
    "description": "Import dependency graph for src/lib/game. Keys are files, values are arrays of files they import.",
    "usage": "To find what a file affects, search for its path in the VALUES. To find what a file depends on, look at its KEY entry."
  },
  "graph": {
    "constants.ts": [
      "constants/index.ts"
    ],
    "constants/core.ts": [],
    "constants/elements.ts": [
      "types.ts"
    ],
    "constants/guardians.ts": [
      "types.ts"
    ],
    "constants/index.ts": [
      "constants/core.ts",
      "constants/elements.ts",
      "constants/guardians.ts",
      "constants/prestige.ts",
      "constants/rooms.ts",
      "constants/spells.ts",
      "types/game.ts"
    ],
    "constants/prestige.ts": [
      "types.ts"
    ],
    "constants/rooms.ts": [
      "types/game.ts"
    ],
    "constants/spells-modules/advanced-spells.ts": [
      "constants/elements.ts",
      "types.ts"
    ],
    "constants/spells-modules/aoe-spells.ts": [
      "constants/elements.ts",
      "types.ts"
    ],
    "constants/spells-modules/basic-elemental-spells.ts": [
      "constants/elements.ts",
      "types.ts"
    ],
    "constants/spells-modules/compound-spells.ts": [
      "constants/elements.ts",
      "types.ts"
    ],
    "constants/spells-modules/enchantment-spells.ts": [
      "constants/elements.ts",
      "types.ts"
    ],
    "constants/spells-modules/legendary-spells.ts": [
      "constants/elements.ts",
      "types.ts"
    ],
    "constants/spells-modules/lightning-spells.ts": [
      "constants/elements.ts",
      "types.ts"
    ],
    "constants/spells-modules/master-spells.ts": [
      "constants/elements.ts",
      "types.ts"
    ],
    "constants/spells-modules/raw-spells.ts": [
      "constants/elements.ts",
      "types.ts"
    ],
    "constants/spells-modules/utility-spells.ts": [
      "constants/elements.ts",
      "types.ts"
    ],
    "constants/spells.ts": [
      "constants/spells-modules/advanced-spells.ts",
      "constants/spells-modules/aoe-spells.ts",
      "constants/spells-modules/basic-elemental-spells.ts",
      "constants/spells-modules/compound-spells.ts",
      "constants/spells-modules/enchantment-spells.ts",
      "constants/spells-modules/legendary-spells.ts",
      "constants/spells-modules/lightning-spells.ts",
      "constants/spells-modules/master-spells.ts",
      "constants/spells-modules/raw-spells.ts",
      "constants/spells-modules/utility-spells.ts",
      "types.ts"
    ],
    "crafting-actions/application-actions.ts": [
      "crafting-apply.ts",
      "stores/craftingStore.types.ts",
      "types.ts"
    ],
    "crafting-actions/computed-getters.ts": [
      "data/enchantment-effects.ts",
      "stores/craftingStore.types.ts"
    ],
    "crafting-actions/crafting-equipment-actions.ts": [
      "crafting-equipment.ts",
      "stores/craftingStore.types.ts",
      "types.ts"
    ],
    "crafting-actions/design-actions.ts": [
      "crafting-design.ts",
      "crafting-utils.ts",
      "effects/special-effects.ts",
      "effects/upgrade-effects.ts",
      "stores/craftingStore.types.ts",
      "types.ts"
    ],
    "crafting-actions/disenchant-actions.ts": [
      "stores/craftingStore.types.ts"
    ],
    "crafting-actions/equipment-actions.ts": [
      "crafting-utils.ts",
      "stores/craftingStore.types.ts",
      "types.ts"
    ],
    "crafting-actions/index.ts": [
      "crafting-actions/application-actions.ts",
      "crafting-actions/computed-getters.ts",
      "crafting-actions/crafting-equipment-actions.ts",
      "crafting-actions/design-actions.ts",
      "crafting-actions/disenchant-actions.ts",
      "crafting-actions/equipment-actions.ts",
      "crafting-actions/preparation-actions.ts"
    ],
    "crafting-actions/preparation-actions.ts": [
      "crafting-prep.ts",
      "stores/craftingStore.types.ts"
    ],
    "crafting-apply.ts": [
      "crafting-utils.ts",
      "data/attunements.ts",
      "data/enchantment-effects.ts",
      "effects/special-effects.ts",
      "effects/upgrade-effects.types.ts",
      "types.ts"
    ],
    "crafting-attunements.ts": [
      "data/attunements.ts",
      "types.ts"
    ],
    "crafting-design.ts": [
      "data/attunements.ts",
      "data/enchantment-effects.ts",
      "data/equipment/index.ts",
      "effects/special-effects.ts",
      "effects/upgrade-effects.types.ts",
      "types.ts"
    ],
    "crafting-equipment.ts": [
      "crafting-utils.ts",
      "data/crafting-recipes.ts",
      "data/equipment/index.ts",
      "types.ts",
      "utils/result.ts"
    ],
    "crafting-loot.ts": [
      "data/crafting-recipes.ts",
      "types.ts"
    ],
    "crafting-prep.ts": [
      "crafting-utils.ts",
      "types.ts"
    ],
    "crafting-utils.ts": [
      "data/crafting-recipes.ts",
      "data/equipment/index.ts",
      "types.ts"
    ],
    "data/achievements.ts": [
      "types.ts"
    ],
    "data/attunements.ts": [
      "types.ts"
    ],
    "data/crafting-recipes.ts": [
      "data/equipment/types.ts"
    ],
    "data/disciplines/base.ts": [
      "types/disciplines.ts"
    ],
    "data/disciplines/enchanter.ts": [
      "types/disciplines.ts"
    ],
    "data/disciplines/fabricator.ts": [
      "types/disciplines.ts"
    ],
    "data/disciplines/index.ts": [
      "data/disciplines/base.ts",
      "data/disciplines/enchanter.ts",
      "data/disciplines/fabricator.ts",
      "data/disciplines/invoker.ts",
      "types/disciplines.ts"
    ],
    "data/disciplines/invoker.ts": [
      "types/disciplines.ts"
    ],
    "data/enchantment-effects.ts": [
      "data/enchantments/index.ts"
    ],
    "data/enchantment-types.ts": [
      "data/equipment/index.ts"
    ],
    "data/enchantments/combat-effects.ts": [
      "data/enchantment-types.ts",
      "data/equipment/index.ts"
    ],
    "data/enchantments/defense-effects.ts": [
      "data/enchantment-types.ts",
      "data/equipment/index.ts"
    ],
    "data/enchantments/elemental-effects.ts": [
      "data/enchantment-types.ts",
      "data/equipment/index.ts"
    ],
    "data/enchantments/index.ts": [
      "data/enchantment-types.ts",
      "data/enchantments/combat-effects.ts",
      "data/enchantments/defense-effects.ts",
      "data/enchantments/elemental-effects.ts",
      "data/enchantments/mana-effects.ts",
      "data/enchantments/special-effects.ts",
      "data/enchantments/spell-effects/index.ts",
      "data/enchantments/utility-effects.ts",
      "data/equipment/index.ts"
    ],
    "data/enchantments/mana-effects.ts": [
      "constants.ts",
      "data/enchantment-types.ts",
      "data/equipment/index.ts"
    ],
    "data/enchantments/special-effects.ts": [
      "data/enchantment-types.ts",
      "data/equipment/index.ts"
    ],
    "data/enchantments/spell-effects/basic-spells.ts": [
      "data/enchantments/spell-effects/types.ts"
    ],
    "data/enchantments/spell-effects/index.ts": [
      "data/enchantment-types.ts",
      "data/enchantments/spell-effects/basic-spells.ts",
      "data/enchantments/spell-effects/legendary-spells.ts",
      "data/enchantments/spell-effects/lightning-spells.ts",
      "data/enchantments/spell-effects/metal-spells.ts",
      "data/enchantments/spell-effects/sand-spells.ts",
      "data/enchantments/spell-effects/tier2-spells.ts",
      "data/enchantments/spell-effects/tier3-spells.ts",
      "data/enchantments/spell-effects/types.ts"
    ],
    "data/enchantments/spell-effects/legendary-spells.ts": [
      "data/enchantments/spell-effects/types.ts"
    ],
    "data/enchantments/spell-effects/lightning-spells.ts": [
      "data/enchantments/spell-effects/types.ts"
    ],
    "data/enchantments/spell-effects/metal-spells.ts": [
      "data/enchantments/spell-effects/types.ts"
    ],
    "data/enchantments/spell-effects/sand-spells.ts": [
      "data/enchantments/spell-effects/types.ts"
    ],
    "data/enchantments/spell-effects/tier2-spells.ts": [
      "data/enchantments/spell-effects/types.ts"
    ],
    "data/enchantments/spell-effects/tier3-spells.ts": [
      "data/enchantments/spell-effects/types.ts"
    ],
    "data/enchantments/spell-effects/types.ts": [
      "data/enchantment-types.ts",
      "data/equipment/index.ts"
    ],
    "data/enchantments/utility-effects.ts": [
      "data/enchantment-types.ts",
      "data/equipment/index.ts"
    ],
    "data/equipment/accessories.ts": [
      "data/equipment/types.ts"
    ],
    "data/equipment/body.ts": [
      "data/equipment/types.ts"
    ],
    "data/equipment/casters.ts": [
      "data/equipment/types.ts"
    ],
    "data/equipment/catalysts.ts": [
      "data/equipment/types.ts"
    ],
    "data/equipment/equipment-types-data.ts": [
      "data/equipment/accessories.ts",
      "data/equipment/body.ts",
      "data/equipment/casters.ts",
      "data/equipment/catalysts.ts",
      "data/equipment/feet.ts",
      "data/equipment/hands.ts",
      "data/equipment/head.ts",
      "data/equipment/shields.ts",
      "data/equipment/swords.ts"
    ],
    "data/equipment/feet.ts": [
      "data/equipment/types.ts"
    ],
    "data/equipment/hands.ts": [
      "data/equipment/types.ts"
    ],
    "data/equipment/head.ts": [
      "data/equipment/types.ts"
    ],
    "data/equipment/index.ts": [
      "data/equipment/accessories.ts",
      "data/equipment/body.ts",
      "data/equipment/casters.ts",
      "data/equipment/catalysts.ts",
      "data/equipment/equipment-types-data.ts",
      "data/equipment/feet.ts",
      "data/equipment/hands.ts",
      "data/equipment/head.ts",
      "data/equipment/shields.ts",
      "data/equipment/swords.ts",
      "data/equipment/types.ts",
      "data/equipment/utils.ts"
    ],
    "data/equipment/shields.ts": [
      "data/equipment/types.ts"
    ],
    "data/equipment/swords.ts": [
      "data/equipment/types.ts"
    ],
    "data/equipment/types.ts": [
      "types/equipmentSlot.ts"
    ],
    "data/equipment/utils.ts": [
      "data/equipment/equipment-types-data.ts",
      "data/equipment/types.ts"
    ],
    "data/fabricator-recipes.ts": [
      "data/equipment/types.ts"
    ],
    "data/golems/base-golems.ts": [
      "data/golems/types.ts"
    ],
    "data/golems/elemental-golems.ts": [
      "data/golems/types.ts"
    ],
    "data/golems/golems-data.ts": [
      "data/golems/base-golems.ts",
      "data/golems/elemental-golems.ts",
      "data/golems/hybrid-golems.ts"
    ],
    "data/golems/hybrid-golems.ts": [
      "data/golems/types.ts"
    ],
    "data/golems/index.ts": [
      "data/golems/golems-data.ts",
      "data/golems/types.ts",
      "data/golems/utils.ts"
    ],
    "data/golems/types.ts": [],
    "data/golems/utils.ts": [
      "data/golems/golems-data.ts",
      "data/golems/types.ts"
    ],
    "data/guardian-encounters.ts": [
      "types.ts"
    ],
    "data/loot-drops.ts": [
      "types.ts"
    ],
    "effects.ts": [
      "data/enchantment-effects.ts",
      "effects/discipline-effects.ts",
      "effects/special-effects.ts",
      "effects/upgrade-effects.ts",
      "effects/upgrade-effects.types.ts",
      "types.ts"
    ],
    "effects/discipline-effects.ts": [
      "data/disciplines/index.ts",
      "stores/discipline-slice.ts",
      "types/disciplines.ts",
      "utils/discipline-math.ts"
    ],
    "effects/dynamic-compute.ts": [
      "effects/special-effects.ts",
      "effects/upgrade-effects.types.ts"
    ],
    "effects/special-effects.ts": [
      "effects/upgrade-effects.types.ts"
    ],
    "effects/upgrade-effects.ts": [
      "effects/upgrade-effects.types.ts"
    ],
    "effects/upgrade-effects.types.ts": [],
    "hooks/useGameDerived.ts": [
      "constants.ts",
      "effects/special-effects.ts",
      "effects/upgrade-effects.ts",
      "stores/combatStore.ts",
      "stores/gameStore.ts",
      "stores/manaStore.ts",
      "stores/prestigeStore.ts",
      "utils/index.ts",
      "utils/pact-utils.ts"
    ],
    "stores/attunementStore.ts": [
      "data/attunements.ts",
      "types.ts",
      "utils/safe-persist.ts"
    ],
    "stores/combat-actions.ts": [
      "constants.ts",
      "effects/discipline-effects.ts",
      "stores/combat-state.types.ts",
      "types.ts",
      "utils/index.ts",
      "utils/result.ts"
    ],
    "stores/combat-state.types.ts": [
      "types.ts"
    ],
    "stores/combatStore.ts": [
      "stores/combat-actions.ts",
      "stores/combat-state.types.ts",
      "stores/prestigeStore.ts",
      "types.ts",
      "utils/activity-log.ts",
      "utils/index.ts",
      "utils/room-utils.ts",
      "utils/safe-persist.ts"
    ],
    "stores/craftingStore.ts": [
      "crafting-actions/application-actions.ts",
      "crafting-actions/preparation-actions.ts",
      "crafting-design.ts",
      "crafting-equipment.ts",
      "crafting-utils.ts",
      "stores/combatStore.ts",
      "stores/craftingStore.types.ts",
      "stores/manaStore.ts",
      "stores/uiStore.ts",
      "types.ts",
      "types/equipmentSlot.ts",
      "utils/result.ts",
      "utils/safe-persist.ts"
    ],
    "stores/craftingStore.types.ts": [
      "types.ts"
    ],
    "stores/discipline-slice.ts": [
      "data/disciplines/base.ts",
      "data/disciplines/enchanter.ts",
      "data/disciplines/fabricator.ts",
      "data/disciplines/invoker.ts",
      "types/disciplines.ts",
      "utils/discipline-math.ts",
      "utils/safe-persist.ts"
    ],
    "stores/gameActions.ts": [
      "effects/discipline-effects.ts",
      "stores/combatStore.ts",
      "stores/discipline-slice.ts",
      "stores/gameStore.ts",
      "stores/manaStore.ts",
      "stores/prestigeStore.ts",
      "stores/uiStore.ts",
      "utils/index.ts"
    ],
    "stores/gameHooks.ts": [
      "constants.ts",
      "effects.ts",
      "effects/discipline-effects.ts",
      "stores/combatStore.ts",
      "stores/craftingStore.ts",
      "stores/discipline-slice.ts",
      "stores/gameStore.ts",
      "stores/manaStore.ts",
      "stores/prestigeStore.ts",
      "stores/uiStore.ts",
      "utils/index.ts"
    ],
    "stores/gameLoopActions.ts": [
      "constants.ts",
      "effects/discipline-effects.ts",
      "stores/combatStore.ts",
      "stores/discipline-slice.ts",
      "stores/gameStore.ts",
      "stores/manaStore.ts",
      "stores/prestigeStore.ts",
      "stores/uiStore.ts",
      "utils/index.ts"
    ],
    "stores/gameStore.ts": [
      "constants.ts",
      "data/attunements.ts",
      "effects.ts",
      "effects/discipline-effects.ts",
      "effects/special-effects.ts",
      "effects/upgrade-effects.types.ts",
      "stores/attunementStore.ts",
      "stores/combatStore.ts",
      "stores/craftingStore.ts",
      "stores/discipline-slice.ts",
      "stores/gameActions.ts",
      "stores/gameLoopActions.ts",
      "stores/manaStore.ts",
      "stores/prestigeStore.ts",
      "stores/tick-pipeline.ts",
      "stores/uiStore.ts",
      "utils/index.ts",
      "utils/safe-persist.ts"
    ],
    "stores/index.ts": [
      "constants.ts",
      "stores/attunementStore.ts",
      "stores/combat-state.types.ts",
      "stores/combatStore.ts",
      "stores/craftingStore.ts",
      "stores/craftingStore.types.ts",
      "stores/discipline-slice.ts",
      "stores/gameHooks.ts",
      "stores/gameStore.ts",
      "stores/manaStore.ts",
      "stores/prestigeStore.ts",
      "stores/uiStore.ts",
      "utils/index.ts"
    ],
    "stores/manaStore.ts": [
      "constants.ts",
      "types.ts",
      "utils/result.ts",
      "utils/safe-persist.ts"
    ],
    "stores/prestigeStore.ts": [
      "constants.ts",
      "types.ts",
      "utils/result.ts",
      "utils/safe-persist.ts"
    ],
    "stores/tick-pipeline.ts": [
      "stores/attunementStore.ts",
      "stores/combat-state.types.ts",
      "stores/craftingStore.types.ts",
      "stores/discipline-slice.ts",
      "stores/gameStore.ts",
      "stores/manaStore.ts",
      "stores/prestigeStore.ts",
      "stores/uiStore.ts"
    ],
    "stores/uiStore.ts": [
      "utils/safe-persist.ts"
    ],
    "types.ts": [
      "data/equipment/types.ts",
      "types/attunements.ts",
      "types/elements.ts",
      "types/equipment.ts",
      "types/equipmentSlot.ts",
      "types/game.ts",
      "types/spells.ts"
    ],
    "types/attunements.ts": [],
    "types/disciplines.ts": [
      "types/elements.ts"
    ],
    "types/elements.ts": [],
    "types/equipment.ts": [
      "types/equipmentSlot.ts"
    ],
    "types/equipmentSlot.ts": [],
    "types/game.ts": [
      "types/attunements.ts",
      "types/elements.ts",
      "types/equipment.ts",
      "types/spells.ts"
    ],
    "types/index.ts": [
      "types/attunements.ts",
      "types/elements.ts",
      "types/equipment.ts",
      "types/equipmentSlot.ts",
      "types/game.ts",
      "types/spells.ts"
    ],
    "types/spells.ts": [],
    "utils/activity-log.ts": [
      "types.ts"
    ],
    "utils/combat-utils.ts": [
      "constants.ts",
      "data/enchantment-effects.ts",
      "types.ts",
      "utils/mana-utils.ts"
    ],
    "utils/discipline-math.ts": [
      "types/disciplines.ts"
    ],
    "utils/enemy-generator.ts": [
      "types.ts",
      "utils/enemy-utils.ts",
      "utils/floor-utils.ts"
    ],
    "utils/enemy-utils.ts": [
      "constants.ts",
      "types.ts",
      "utils/floor-utils.ts"
    ],
    "utils/floor-utils.ts": [
      "constants.ts"
    ],
    "utils/formatting.ts": [],
    "utils/index.ts": [
      "utils/combat-utils.ts",
      "utils/floor-utils.ts",
      "utils/formatting.ts",
      "utils/mana-utils.ts",
      "utils/result.ts",
      "utils/safe-persist.ts"
    ],
    "utils/mana-utils.ts": [
      "constants.ts",
      "data/attunements.ts",
      "effects/upgrade-effects.types.ts",
      "types.ts"
    ],
    "utils/pact-utils.ts": [
      "constants.ts"
    ],
    "utils/result.ts": [],
    "utils/room-utils.ts": [
      "constants.ts",
      "types.ts",
      "utils/enemy-utils.ts",
      "utils/floor-utils.ts"
    ],
    "utils/safe-persist.ts": [],
    "utils/spire-utils.ts": [
      "constants.ts",
      "data/guardian-encounters.ts",
      "types.ts",
      "utils/enemy-utils.ts",
      "utils/floor-utils.ts"
    ]
  }
 }
@@ -0,0 +1,373 @@
 Mana-Loop/
 ├── .gitea/
 │   └── workflows/
 │       └── docker-build.yaml
 ├── .husky/
 │   ├── scripts/
 │   │   ├── check-file-size.js
 │   │   ├── generate-dependency-graph.js
 │   │   └── generate-project-tree.js
 │   ├── post-merge
 │   └── pre-commit
 ├── docs/
 │   ├── GAME_BRIEFING.md
 │   ├── circular-deps.txt
 │   ├── dependency-graph.json
 │   └── project-structure.txt
 ├── e2e/
 ├── playwright-report/
 │   ├── data/
 │   │   ├── 1513ea5b9ea5985996f67ca36f2bc4d34add51f1.webm
 │   │   ├── 23eb0c541b68af33d962c3ac20ba74eb9ba477b3.md
 │   │   ├── 25af666b2659e25b596f1eb58ca5629f38f0fa74.png
 │   │   ├── 294ed85dfd5fbd79486f5274129a1d8b83cfa676.png
 │   │   ├── 37c584c77b029af648d58a063f9724538662c6d0.webm
 │   │   ├── 4d1229974e5326e2351c32921095bff6e989005e.png
 │   │   ├── 4f22caa1a2b454f813b4c68c510a2ef0b340a248.md
 │   │   ├── 6408809a17a0a92b06e5cc75fcee95e9778138c4.md
 │   │   ├── 66a1f85e1e6a655dfb90f10bd1a60887cffa87da.md
 │   │   ├── 6b97a6c84cfda4c717249f240d0a80e1b195498a.png
 │   │   ├── 6c1c7d873c0c5262ffca286974649ec3bf1eb3f4.md
 │   │   ├── 72280c2048aa77a6b58afc7bba8f9db3dfd1c68b.webm
 │   │   ├── 8035d8abad1bfb2166374e25b55f52324fef1275.png
 │   │   ├── 8396039272c615989307eaf4113a77b0d77cfbdd.webm
 │   │   ├── a69b7491fd34ee0580bc0153a90dc146b509aac3.md
 │   │   ├── bb3c9d51cafcb654c796b093c72c5b702f52faed.webm
 │   │   ├── bee318a3f485bd3e98088a4735e02181585e431b.png
 │   │   ├── c0f44af041cac0f5d5efaec8a9a9e5d165c8d26a.png
 │   │   ├── cf49b56fde3bacf27d842ef4bfeed4887d97f01e.webm
 │   │   ├── dbea283cbcf6aaed195161609c68ab7de0c6adfa.png
 │   │   ├── dc2d9fe97c08dd61f42a27ead0829c2d74322ccc.webm
 │   │   ├── e3d1abb209771785e7247c38fd372d8fd61b7ea4.md
 │   │   ├── e59720b989841926cc856d6a00be0a6f8365cf49.webm
 │   │   └── f5ba77f8b20c452bd2c31718b44897276882a465.md
 │   └── index.html
 ├── public/
 │   ├── fonts/
 │   │   ├── GeistMonoVF.woff
 │   │   └── GeistVF.woff
 │   ├── logo.svg
 │   └── robots.txt
 ├── src/
 │   ├── app/
 │   │   ├── components/
 │   │   │   ├── GameOverScreen.tsx
 │   │   │   ├── GrimoireTab.tsx
 │   │   │   └── LeftPanel.tsx
 │   │   ├── globals.css
 │   │   ├── layout.tsx
 │   │   └── page.tsx
 │   ├── components/
 │   │   ├── game/
 │   │   │   ├── LootInventory/
 │   │   │   │   ├── BlueprintsSection.tsx
 │   │   │   │   ├── EquipmentItem.tsx
 │   │   │   │   ├── EssenceItem.tsx
 │   │   │   │   ├── MaterialItem.tsx
 │   │   │   │   ├── icons.ts
 │   │   │   │   └── types.ts
 │   │   │   ├── crafting/
 │   │   │   │   ├── EnchantmentDesigner/
 │   │   │   │   │   ├── DesignForm.tsx
 │   │   │   │   │   ├── EffectSelector.tsx
 │   │   │   │   │   ├── EquipmentTypeSelector.tsx
 │   │   │   │   │   ├── SavedDesigns.tsx
 │   │   │   │   │   ├── types.ts
 │   │   │   │   │   └── utils.ts
 │   │   │   │   ├── EnchantmentApplier.tsx
 │   │   │   │   ├── EnchantmentDesigner.tsx
 │   │   │   │   ├── EnchantmentPreparer.tsx
 │   │   │   │   ├── EquipmentCrafter.tsx
 │   │   │   │   └── index.tsx
 │   │   │   ├── debug/
 │   │   │   │   ├── AttunementDebug.tsx
 │   │   │   │   ├── ElementDebug.tsx
 │   │   │   │   ├── GameStateDebug.tsx
 │   │   │   │   ├── GolemDebug.tsx
 │   │   │   │   ├── PactDebug.tsx
 │   │   │   │   ├── debug-context.tsx
 │   │   │   │   └── index.tsx
 │   │   │   ├── shared/
 │   │   │   ├── tabs/
 │   │   │   │   ├── CraftingTab/
 │   │   │   │   │   ├── EnchanterSubTab.tsx
 │   │   │   │   │   └── FabricatorSubTab.tsx
 │   │   │   │   ├── DebugTab/
 │   │   │   │   │   ├── AchievementDebugSection.tsx
 │   │   │   │   │   ├── AttunementDebugSection.tsx
 │   │   │   │   │   ├── DisciplineDebugSection.tsx
 │   │   │   │   │   ├── ElementDebugSection.tsx
 │   │   │   │   │   ├── GameStateDebugSection.tsx
 │   │   │   │   │   ├── GolemDebugSection.tsx
 │   │   │   │   │   ├── PactDebugSection.tsx
 │   │   │   │   │   └── SpireDebugSection.tsx
 │   │   │   │   ├── EquipmentTab/
 │   │   │   │   │   ├── EquipmentEffectsSummary.tsx
 │   │   │   │   │   ├── EquipmentSlotGrid.tsx
 │   │   │   │   │   └── InventoryList.tsx
 │   │   │   │   ├── SpireCombatPage/
 │   │   │   │   │   ├── RoomDisplay.tsx
 │   │   │   │   │   ├── SpireActivityLog.tsx
 │   │   │   │   │   ├── SpireCombatControls.tsx
 │   │   │   │   │   ├── SpireCombatPage.tsx
 │   │   │   │   │   ├── SpireHeader.tsx
 │   │   │   │   │   ├── SpireManaDisplay.tsx
 │   │   │   │   │   └── index.ts
 │   │   │   │   ├── StatsTab/
 │   │   │   │   │   ├── CombatStatsSection.tsx
 │   │   │   │   │   ├── ElementStatsSection.tsx
 │   │   │   │   │   ├── LoopStatsSection.tsx
 │   │   │   │   │   ├── ManaStatsSection.tsx
 │   │   │   │   │   ├── PactStatusSection.tsx
 │   │   │   │   │   └── StudyStatsSection.tsx
 │   │   │   │   ├── AchievementsTab.tsx
 │   │   │   │   ├── ActivityLog.tsx
 │   │   │   │   ├── AttunementsTab.test.ts
 │   │   │   │   ├── AttunementsTab.tsx
 │   │   │   │   ├── CraftingTab.test.ts
 │   │   │   │   ├── CraftingTab.tsx
 │   │   │   │   ├── DebugTab.test.ts
 │   │   │   │   ├── DebugTab.tsx
 │   │   │   │   ├── DisciplinesTab.tsx
 │   │   │   │   ├── EquipmentTab.test.ts
 │   │   │   │   ├── EquipmentTab.tsx
 │   │   │   │   ├── GolemancyTab.test.ts
 │   │   │   │   ├── GolemancyTab.tsx
 │   │   │   │   ├── GuardianPactsTab.test.ts
 │   │   │   │   ├── GuardianPactsTab.tsx
 │   │   │   │   ├── PrestigeTab.test.ts
 │   │   │   │   ├── PrestigeTab.tsx
 │   │   │   │   ├── SpellsTab.tsx
 │   │   │   │   ├── SpireSummaryTab.test.ts
 │   │   │   │   ├── SpireSummaryTab.tsx
 │   │   │   │   ├── StatsTab.tsx
 │   │   │   │   ├── guardian-pacts-components.tsx
 │   │   │   │   └── index.ts
 │   │   │   ├── ActionButtons.tsx
 │   │   │   ├── ActivityLogPanel.tsx
 │   │   │   ├── AttunementStatus.tsx
 │   │   │   ├── GameToast.tsx
 │   │   │   ├── ManaDisplay.tsx
 │   │   │   ├── TimeDisplay.tsx
 │   │   │   ├── UpgradeDialog.tsx
 │   │   │   ├── index.ts
 │   │   │   └── types.ts
 │   │   ├── ui/
 │   │   │   ├── action-button.tsx
 │   │   │   ├── alert-dialog.tsx
 │   │   │   ├── badge.tsx
 │   │   │   ├── button.tsx
 │   │   │   ├── card.tsx
 │   │   │   ├── dialog.tsx
 │   │   │   ├── element-badge.tsx
 │   │   │   ├── game-card.tsx
 │   │   │   ├── index.ts
 │   │   │   ├── input.tsx
 │   │   │   ├── label.tsx
 │   │   │   ├── mana-bar.tsx
 │   │   │   ├── progress.tsx
 │   │   │   ├── scroll-area.tsx
 │   │   │   ├── section-header.tsx
 │   │   │   ├── select.tsx
 │   │   │   ├── separator.tsx
 │   │   │   ├── sheet.tsx
 │   │   │   ├── skeleton.tsx
 │   │   │   ├── stat-row.tsx
 │   │   │   ├── stepper.tsx
 │   │   │   ├── switch.tsx
 │   │   │   ├── tabs.tsx
 │   │   │   ├── toast.tsx
 │   │   │   ├── toaster.tsx
 │   │   │   ├── toggle.tsx
 │   │   │   ├── tooltip-info.tsx
 │   │   │   ├── tooltip.tsx
 │   │   │   └── value-display.tsx
 │   │   └── ErrorBoundary.tsx
 │   ├── hooks/
 │   │   ├── use-mobile.ts
 │   │   └── use-toast.ts
 │   └── lib/
 │       ├── game/
 │       │   ├── __tests__/
 │       │   │   ├── store-method-tests/
 │       │   │   ├── achievements.test.ts
 │       │   │   ├── bug-fixes.test.ts
 │       │   │   ├── combat-utils.test.ts
 │       │   │   ├── computed-stats.test.ts
 │       │   │   ├── discipline-math.test.ts
 │       │   │   ├── enemy-generator.test.ts
 │       │   │   ├── floor-utils.test.ts
 │       │   │   ├── formatting.test.ts
 │       │   │   ├── mana-utils.test.ts
 │       │   │   ├── regression-fixes.test.ts
 │       │   │   ├── spire-utils.test.ts
 │       │   │   ├── store-actions-combat-prestige.test.ts
 │       │   │   ├── store-actions-discipline.test.ts
 │       │   │   ├── store-actions-mana.test.ts
 │       │   │   ├── store-actions.test.ts
 │       │   │   └── tick-integration.test.ts
 │       │   ├── constants/
 │       │   │   ├── spells-modules/
 │       │   │   │   ├── advanced-spells.ts
 │       │   │   │   ├── aoe-spells.ts
 │       │   │   │   ├── basic-elemental-spells.ts
 │       │   │   │   ├── compound-spells.ts
 │       │   │   │   ├── enchantment-spells.ts
 │       │   │   │   ├── legendary-spells.ts
 │       │   │   │   ├── lightning-spells.ts
 │       │   │   │   ├── master-spells.ts
 │       │   │   │   ├── raw-spells.ts
 │       │   │   │   └── utility-spells.ts
 │       │   │   ├── core.ts
 │       │   │   ├── elements.ts
 │       │   │   ├── guardians.ts
 │       │   │   ├── index.ts
 │       │   │   ├── prestige.ts
 │       │   │   ├── rooms.ts
 │       │   │   └── spells.ts
 │       │   ├── crafting-actions/
 │       │   │   ├── application-actions.ts
 │       │   │   ├── computed-getters.ts
 │       │   │   ├── crafting-equipment-actions.ts
 │       │   │   ├── design-actions.ts
 │       │   │   ├── disenchant-actions.ts
 │       │   │   ├── equipment-actions.ts
 │       │   │   ├── index.ts
 │       │   │   └── preparation-actions.ts
 │       │   ├── data/
 │       │   │   ├── disciplines/
 │       │   │   │   ├── base.ts
 │       │   │   │   ├── enchanter.ts
 │       │   │   │   ├── fabricator.ts
 │       │   │   │   ├── index.ts
 │       │   │   │   └── invoker.ts
 │       │   │   ├── enchantments/
 │       │   │   │   ├── spell-effects/
 │       │   │   │   │   ├── basic-spells.ts
 │       │   │   │   │   ├── index.ts
 │       │   │   │   │   ├── legendary-spells.ts
 │       │   │   │   │   ├── lightning-spells.ts
 │       │   │   │   │   ├── metal-spells.ts
 │       │   │   │   │   ├── sand-spells.ts
 │       │   │   │   │   ├── tier2-spells.ts
 │       │   │   │   │   ├── tier3-spells.ts
 │       │   │   │   │   └── types.ts
 │       │   │   │   ├── combat-effects.ts
 │       │   │   │   ├── defense-effects.ts
 │       │   │   │   ├── elemental-effects.ts
 │       │   │   │   ├── index.ts
 │       │   │   │   ├── mana-effects.ts
 │       │   │   │   ├── special-effects.ts
 │       │   │   │   └── utility-effects.ts
 │       │   │   ├── equipment/
 │       │   │   │   ├── accessories.ts
 │       │   │   │   ├── body.ts
 │       │   │   │   ├── casters.ts
 │       │   │   │   ├── catalysts.ts
 │       │   │   │   ├── equipment-types-data.ts
 │       │   │   │   ├── feet.ts
 │       │   │   │   ├── hands.ts
 │       │   │   │   ├── head.ts
 │       │   │   │   ├── index.ts
 │       │   │   │   ├── shields.ts
 │       │   │   │   ├── swords.ts
 │       │   │   │   ├── types.ts
 │       │   │   │   └── utils.ts
 │       │   │   ├── golems/
 │       │   │   │   ├── base-golems.ts
 │       │   │   │   ├── elemental-golems.ts
 │       │   │   │   ├── golems-data.ts
 │       │   │   │   ├── hybrid-golems.ts
 │       │   │   │   ├── index.ts
 │       │   │   │   ├── types.ts
 │       │   │   │   └── utils.ts
 │       │   │   ├── achievements.ts
 │       │   │   ├── attunements.ts
 │       │   │   ├── crafting-recipes.ts
 │       │   │   ├── enchantment-effects.ts
 │       │   │   ├── enchantment-types.ts
 │       │   │   ├── fabricator-recipes.ts
 │       │   │   ├── guardian-encounters.ts
 │       │   │   └── loot-drops.ts
 │       │   ├── effects/
 │       │   │   ├── discipline-effects.ts
 │       │   │   ├── dynamic-compute.ts
 │       │   │   ├── special-effects.ts
 │       │   │   ├── upgrade-effects.ts
 │       │   │   └── upgrade-effects.types.ts
 │       │   ├── hooks/
 │       │   │   └── useGameDerived.ts
 │       │   ├── stores/
 │       │   │   ├── attunementStore.ts
 │       │   │   ├── combat-actions.ts
 │       │   │   ├── combat-state.types.ts
 │       │   │   ├── combatStore.ts
 │       │   │   ├── craftingStore.ts
 │       │   │   ├── craftingStore.types.ts
 │       │   │   ├── discipline-slice.ts
 │       │   │   ├── gameActions.ts
 │       │   │   ├── gameHooks.ts
 │       │   │   ├── gameLoopActions.ts
 │       │   │   ├── gameStore.ts
 │       │   │   ├── index.ts
 │       │   │   ├── manaStore.ts
 │       │   │   ├── prestigeStore.ts
 │       │   │   ├── tick-pipeline.ts
 │       │   │   └── uiStore.ts
 │       │   ├── types/
 │       │   │   ├── attunements.ts
 │       │   │   ├── disciplines.ts
 │       │   │   ├── elements.ts
 │       │   │   ├── equipment.ts
 │       │   │   ├── equipmentSlot.ts
 │       │   │   ├── game.ts
 │       │   │   ├── index.ts
 │       │   │   └── spells.ts
 │       │   ├── utils/
 │       │   │   ├── activity-log.ts
 │       │   │   ├── combat-utils.ts
 │       │   │   ├── discipline-math.ts
 │       │   │   ├── enemy-generator.ts
 │       │   │   ├── enemy-utils.ts
 │       │   │   ├── floor-utils.ts
 │       │   │   ├── formatting.ts
 │       │   │   ├── index.ts
 │       │   │   ├── mana-utils.ts
 │       │   │   ├── pact-utils.ts
 │       │   │   ├── result.ts
 │       │   │   ├── room-utils.ts
 │       │   │   ├── safe-persist.ts
 │       │   │   └── spire-utils.ts
 │       │   ├── constants.ts
 │       │   ├── crafting-apply.ts
 │       │   ├── crafting-attunements.ts
 │       │   ├── crafting-design.ts
 │       │   ├── crafting-equipment.ts
 │       │   ├── crafting-loot.ts
 │       │   ├── crafting-prep.ts
 │       │   ├── crafting-utils.ts
 │       │   ├── effects.ts
 │       │   └── types.ts
 │       └── utils.ts
 ├── test-results/
 │   └── .last-run.json
 ├── .dockerignore
 ├── .gitignore
 ├── AGENTS.md
 ├── Caddyfile
 ├── Dockerfile
 ├── README.md
 ├── bun.lock
 ├── bunfig.toml
 ├── components.json
 ├── docker-compose.yml
 ├── eslint.config.mjs
 ├── next.config.ts
 ├── package-lock.json
 ├── package.json
 ├── playwright.config.ts
 ├── postcss.config.mjs
 ├── scorecard.png
 ├── tailwind.config.ts
 ├── tsconfig.json
 └── vitest.config.ts
@@ -3,92 +3,95 @@
  "version": "0.2.0",
  "private": true,
  "scripts": {
-    "dev": "next dev -p 3000 2>&1 | tee dev.log",
+    "dev": "next dev -p 3000 --hostname 0.0.0.0 2>&1 | tee dev.log",
    "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/",
    "start": "NODE_ENV=production bun .next/standalone/server.js 2>&1 | tee server.log",
    "typecheck": "tsc --noEmit",
    "lint": "eslint .",
-    "db:push": "prisma db push",
+    "test": "vitest",
-    "db:generate": "prisma generate",
+    "test:e2e": "playwright test",
-    "db:migrate": "prisma migrate dev",
+    "test:coverage": "vitest --coverage",
-    "db:reset": "prisma migrate reset"
+    "prepare": "husky"
  },
  "dependencies": {
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
-    "@hookform/resolvers": "^5.1.1",
+    "@hookform/resolvers": "^5.2.2",
-    "@mdxeditor/editor": "^3.39.1",
+    "@radix-ui/react-accordion": "^1.2.12",
-    "@prisma/client": "^6.11.1",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@reactuses/core": "^6.3.1",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@tanstack/react-query": "^5.100.10",
    "@reactuses/core": "^6.0.5",
    "@tanstack/react-query": "^5.82.0",
    "@tanstack/react-table": "^8.21.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
    "date-fns": "^4.1.0",
    "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.23.2",
+    "framer-motion": "^12.38.0",
    "husky": "^9.1.7",
    "input-otp": "^1.4.2",
    "lucide-react": "^0.525.0",
-    "next": "^16.1.1",
+    "next": "^16.2.6",
    "next-auth": "^4.24.11",
    "next-intl": "^4.3.4",
    "next-themes": "^0.4.6",
-    "prisma": "^6.11.1",
+    "react": "^19.2.6",
-    "react": "^19.0.0",
+    "react-day-picker": "^9.14.0",
-    "react-day-picker": "^9.8.0",
+    "react-dom": "^19.2.6",
-    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.76.0",
    "react-hook-form": "^7.60.0",
    "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^3.0.3",
+    "react-resizable-panels": "^3.0.6",
-    "react-syntax-highlighter": "^15.6.1",
+    "react-syntax-highlighter": "^15.6.6",
    "recharts": "^2.15.4",
-    "sharp": "^0.34.3",
+    "sharp": "^0.34.5",
-    "sonner": "^2.0.6",
+    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.6.0",
    "tailwindcss-animate": "^1.0.7",
-    "uuid": "^11.1.0",
+    "uuid": "^11.1.1",
    "vaul": "^1.1.2",
-    "z-ai-web-dev-sdk": "^0.0.17",
+    "zod": "^4.4.3",
-    "zod": "^4.0.2",
+    "zustand": "^5.0.13"
    "zustand": "^5.0.6"
  },
  "devDependencies": {
-    "@tailwindcss/postcss": "^4",
+    "@playwright/test": "^1.60.0",
-    "@types/react": "^19",
+    "@tailwindcss/postcss": "^4.3.0",
-    "@types/react-dom": "^19",
+    "@testing-library/jest-dom": "^6.9.1",
-    "bun-types": "^1.3.4",
+    "@testing-library/react": "^16.3.2",
-    "eslint": "^9",
+    "@types/react": "^19.2.14",
-    "eslint-config-next": "^16.1.1",
+    "@types/react-dom": "^19.2.3",
-    "tailwindcss": "^4",
+    "bun-types": "^1.3.14",
-    "tw-animate-css": "^1.3.5",
+    "eslint": "^9.39.4",
-    "typescript": "^5"
+    "eslint-config-next": "^16.2.6",
    "jsdom": "^29.1.1",
    "lint-staged": "^17.0.5",
    "madge": "^8.0.0",
    "tailwindcss": "^4.3.0",
    "tw-animate-css": "^1.4.0",
    "typescript": "^5.9.3",
    "vitest": "^4.1.6"
  }
 }
@@ -0,0 +1,285 @@
 # Instructions
 - Following Playwright test failed.
 - Explain why, be concise, respect Playwright best practices.
 - Provide a snippet of code with the fix, if possible.
 # Test info
 - Name: combat.spec.ts >> Combat System >> shows floor information in spire mode
 - Location: e2e/combat.spec.ts:65:7
 # Error details
 ```
 Error: expect(locator).toBeVisible() failed
 Locator: locator('text="Floor"').first()
 Expected: visible
 Timeout: 5000ms
 Error: element(s) not found
 Call log:
  - Expect "toBeVisible" with timeout 5000ms
  - waiting for locator('text="Floor"').first()
 ```
 # Page snapshot
 ```yaml
 - generic [active] [ref=e1]:
  - generic [ref=e2]:
    - banner [ref=e3]:
      - generic [ref=e4]:
        - heading "MANA LOOP" [level=1] [ref=e5]
        - generic [ref=e7]:
          - generic [ref=e8]:
            - generic [ref=e9]: Day 1
            - generic [ref=e10]: 02:04
          - generic [ref=e11]:
            - generic [ref=e12]: "0"
            - generic [ref=e13]: Insight
    - main [ref=e14]:
      - generic [ref=e15]:
        - generic [ref=e17]:
          - generic [ref=e18]:
            - generic [ref=e19]:
              - generic [ref=e20]: "15"
              - generic [ref=e21]: / 100
            - generic [ref=e22]:
              - text: +3.0 mana/hr
              - generic [ref=e23]: (1.5x med)
          - progressbar [ref=e24]
          - button "Gather +1 Mana" [ref=e26]:
            - img
            - text: Gather +1 Mana
          - generic [ref=e27]:
            - button "Elemental Mana (1)" [ref=e28]:
              - generic [ref=e29]: Elemental Mana (1)
              - img [ref=e30]
            - generic [ref=e33]:
              - generic [ref=e34]:
                - generic [ref=e35]: 🔗
                - generic [ref=e36]: Transference
              - generic [ref=e39]: 0/10
        - generic [ref=e40]:
          - generic [ref=e41]: "1"
          - generic [ref=e42]: "2"
          - generic [ref=e43]: "3"
          - generic [ref=e44]: "4"
          - generic [ref=e45]: "5"
          - generic [ref=e46]: "6"
          - generic [ref=e47]: "7"
          - generic [ref=e48]: "8"
          - generic [ref=e49]: "9"
          - generic [ref=e50]: "10"
          - generic [ref=e51]: "11"
          - generic [ref=e52]: "12"
          - generic [ref=e53]: "13"
          - generic [ref=e54]: "14"
          - generic [ref=e55]: "15"
          - generic [ref=e56]: "16"
          - generic [ref=e57]: "17"
          - generic [ref=e58]: "18"
          - generic [ref=e59]: "19"
          - generic [ref=e60]: "20"
          - generic [ref=e61]: "21"
          - generic [ref=e62]: "22"
          - generic [ref=e63]: "23"
          - generic [ref=e64]: "24"
          - generic [ref=e65]: "25"
          - generic [ref=e66]: "26"
          - generic [ref=e67]: "27"
          - generic [ref=e68]: "28"
          - generic [ref=e69]: "29"
          - generic [ref=e70]: "30"
      - generic [ref=e72]:
        - tablist [ref=e73]:
          - tab "⚔️ Spire" [selected] [ref=e74]
          - tab "✨ Attune" [ref=e75]
          - tab "🗿 Golems" [ref=e76]
          - tab "📚 Skills" [ref=e77]
          - tab "🔮 Spells" [ref=e78]
          - tab "🛡️ Gear" [ref=e79]
          - tab "🔧 Craft" [ref=e80]
          - tab "💎 Loot" [ref=e81]
          - tab "🏆 Achieve" [ref=e82]
          - tab "📊 Stats" [ref=e83]
          - tab "🐛 Debug" [ref=e84]
          - tab "📖 Grimoire" [ref=e85]
        - tabpanel "⚔️ Spire" [ref=e86]:
          - generic [ref=e87]:
            - generic [ref=e89]:
              - button "Exit Spire Mode" [ref=e90]:
                - img
                - text: Exit Spire Mode
              - generic [ref=e91]: Climb down to floor 1 to return to the main game
            - generic [ref=e92]:
              - heading "Current Floor 🐝 Swarm" [level=3] [ref=e94]:
                - generic [ref=e95]: Current Floor
                - generic [ref=e96]: 🐝 Swarm
              - generic [ref=e97]:
                - generic [ref=e98]:
                  - generic [ref=e99]: "1"
                  - generic [ref=e100]: / 100
                  - generic [ref=e101]: 🔥 Fire
                - generic [ref=e102]:
                  - text: "Best: Floor"
                  - strong [ref=e103]: "1"
                  - text: "• Pacts:"
                  - strong [ref=e104]: "0"
            - generic [ref=e106]:
              - generic [ref=e108]: Active Spells (1)
              - generic [ref=e110]:
                - generic [ref=e111]:
                  - generic [ref=e112]: Mana BoltBasic
                  - generic [ref=e113]: ✓
                - generic [ref=e114]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
            - generic [ref=e115]:
              - generic [ref=e116]: Swarm Enemies (6)
              - generic [ref=e118]:
                - generic [ref=e119]:
                  - img [ref=e120]
                  - generic [ref=e125]: Emberling
                - generic [ref=e126]: 🔥 60/60 HP
              - generic [ref=e130]:
                - generic [ref=e131]:
                  - img [ref=e132]
                  - generic [ref=e137]: Fire Imp
                - generic [ref=e138]: 🔥 60/60 HP
              - generic [ref=e142]:
                - generic [ref=e143]:
                  - img [ref=e144]
                  - generic [ref=e149]: Scorchling
                - generic [ref=e150]: 🔥 60/60 HP
              - generic [ref=e154]:
                - generic [ref=e155]:
                  - img [ref=e156]
                  - generic [ref=e161]: Flame Sprite
                - generic [ref=e162]: 🔥 60/60 HP
              - generic [ref=e166]:
                - generic [ref=e167]:
                  - img [ref=e168]
                  - generic [ref=e173]: Emberling
                - generic [ref=e174]: 🔥 60/60 HP
              - generic [ref=e178]:
                - generic [ref=e179]:
                  - img [ref=e180]
                  - generic [ref=e185]: Inferno Whelp
                - generic [ref=e186]: 🔥 60/60 HP
            - generic [ref=e189]:
              - generic [ref=e191]: Floor Navigation
              - generic [ref=e192]:
                - generic [ref=e193]:
                  - button "Climb Up" [ref=e194]:
                    - img
                    - text: Climb Up
                  - button "Climb Down" [disabled]:
                    - img
                    - text: Climb Down
                - generic [ref=e195]: Click Climb Up/Down to begin climbing
            - generic [ref=e196]:
              - generic [ref=e198]: Combat Stats
              - generic [ref=e199]:
                - generic [ref=e200]: "Total DPS: —"
                - generic [ref=e201]:
                  - generic [ref=e202]: Active Spells
                  - generic [ref=e203]:
                    - generic [ref=e204]:
                      - generic [ref=e205]:
                        - text: Mana Bolt
                        - generic [ref=e206]: Basic
                      - generic [ref=e207]: ✓
                    - generic [ref=e208]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
                - generic [ref=e210]: "Study Speed: 100%"
            - generic [ref=e211]:
              - generic [ref=e213]: Activity Log
              - generic [ref=e219]: No activity yet...
  - region "Notifications (F8)":
    - list
  - region "Notifications (F8)":
    - list
  - button "Open Next.js Dev Tools" [ref=e225] [cursor=pointer]:
    - img [ref=e226]
  - alert [ref=e229]
 ```
 # Test source
 ```ts
  1  | import { test, expect } from '@playwright/test';
  2  | 
  3  | /**
  4  |  * E2E tests for combat system:
  5  |  * - Entering spire mode (climbing)
  6  |  * - Casting spells and seeing progress
  7  |  * - Enemy HP reduction
  8  |  * - Floor advancement
  9  |  */
  10 | 
  11 | test.describe('Combat System', () => {
  12 |   test.beforeEach(async ({ page }) => {
  13 |     await page.goto('/');
  14 |     // Clear game state to ensure a fresh start
  15 |     await page.evaluate(() => {
  16 |       Object.keys(localStorage)
  17 |         .filter((k) => k.startsWith('mana-loop-'))
  18 |         .forEach((k) => localStorage.removeItem(k));
  19 |     });
  20 |     await page.reload();
  21 |     await page.waitForLoadState('networkidle');
  22 |   });
  23 | 
  24 |   test('can see the Spire tab and "Climb the Spire" button', async ({ page }) => {
  25 |     // The Spire tab uses an icon + text, so match by the tab role
  26 |     const spireTab = page.getByRole('tab', { name: /⚔️ Spire/ });
  27 |     await expect(spireTab).toBeVisible();
  28 | 
  29 |     // Main page should show "Climb the Spire" button
  30 |     const climbBtn = page.getByRole('button', { name: 'Climb the Spire' });
  31 |     await expect(climbBtn).toBeVisible();
  32 |   });
  33 | 
  34 |   test('can enter Spire mode by clicking Climb button', async ({ page }) => {
  35 |     // Click "Climb the Spire" button on the main page (via left panel)
  36 |     await page.getByRole('button', { name: 'Climb the Spire' }).click();
  37 | 
  38 |     // Should now see Spire mode UI elements
  39 |     // The "Enter Spire Mode" button appears when on the Spire tab
  40 |     const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
  41 |     await expect(enterBtn).toBeVisible({ timeout: 5000 });
  42 |   });
  43 | 
  44 |   test('can navigate to Spire tab', async ({ page }) => {
  45 |     // Click the Spire tab specifically (using role=tab to disambiguate)
  46 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
  47 | 
  48 |     // Should see Spire-specific UI
  49 |     const enterSpireBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
  50 |     await expect(enterSpireBtn).toBeVisible({ timeout: 5000 });
  51 |   });
  52 | 
  53 |   test('can enter spire mode from the Spire tab', async ({ page }) => {
  54 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
  55 | 
  56 |     const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
  57 |     await expect(enterBtn).toBeEnabled();
  58 |     await enterBtn.click();
  59 | 
  60 |     // After entering, should see exit button
  61 |     const exitBtn = page.getByRole('button', { name: 'Exit Spire Mode' });
  62 |     await expect(exitBtn).toBeVisible({ timeout: 5000 });
  63 |   });
  64 | 
  65 |   test('shows floor information in spire mode', async ({ page }) => {
  66 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
  67 |     await page.getByRole('button', { name: 'Enter Spire Mode' }).click();
  68 | 
  69 |     // Should display floor number - look for "Floor" label or the floor counter
  70 |     const floorDisplay = page.locator('text="Floor"').first();
 > 71 |     await expect(floorDisplay).toBeVisible({ timeout: 5000 });
     |                                ^ Error: expect(locator).toBeVisible() failed
  72 |   });
  73 | });
 ```
@@ -0,0 +1,348 @@
 # Instructions
 - Following Playwright test failed.
 - Explain why, be concise, respect Playwright best practices.
 - Provide a snippet of code with the fix, if possible.
 # Test info
 - Name: equipment.spec.ts >> Equipment Management >> can unequip an item from a slot
 - Location: e2e/equipment.spec.ts:113:7
 # Error details
 ```
 Error: expect(locator).toBeVisible() failed
 Locator: locator('text=Hands').locator('..').locator('button').first()
 Expected: visible
 Timeout: 5000ms
 Error: element(s) not found
 Call log:
  - Expect "toBeVisible" with timeout 5000ms
  - waiting for locator('text=Hands').locator('..').locator('button').first()
 ```
 # Page snapshot
 ```yaml
 - generic [ref=e1]:
  - generic [ref=e2]:
    - banner [ref=e3]:
      - generic [ref=e4]:
        - heading "MANA LOOP" [level=1] [ref=e5]
        - generic [ref=e7]:
          - generic [ref=e8]:
            - generic [ref=e9]: Day 1
            - generic [ref=e10]: 01:55
          - generic [ref=e11]:
            - generic [ref=e12]: "0"
            - generic [ref=e13]: Insight
    - main [ref=e14]:
      - generic [ref=e15]:
        - generic [ref=e17]:
          - generic [ref=e18]:
            - generic [ref=e19]:
              - generic [ref=e20]: "14"
              - generic [ref=e21]: / 100
            - generic [ref=e22]:
              - text: +2.8 mana/hr
              - generic [ref=e23]: (1.4x med)
          - progressbar [ref=e24]
          - button "Gather +1 Mana" [ref=e26]:
            - img
            - text: Gather +1 Mana
          - generic [ref=e27]:
            - button "Elemental Mana (1)" [ref=e28]:
              - generic [ref=e29]: Elemental Mana (1)
              - img [ref=e30]
            - generic [ref=e33]:
              - generic [ref=e34]:
                - generic [ref=e35]: 🔗
                - generic [ref=e36]: Transference
              - generic [ref=e39]: 0/10
        - button "Climb the Spire" [ref=e40]:
          - img
          - text: Climb the Spire
        - generic [ref=e42]:
          - generic [ref=e43]:
            - img [ref=e44]
            - generic [ref=e46]: Current Activity
          - generic [ref=e47]: Meditating
        - generic [ref=e48]:
          - generic [ref=e49]: "1"
          - generic [ref=e50]: "2"
          - generic [ref=e51]: "3"
          - generic [ref=e52]: "4"
          - generic [ref=e53]: "5"
          - generic [ref=e54]: "6"
          - generic [ref=e55]: "7"
          - generic [ref=e56]: "8"
          - generic [ref=e57]: "9"
          - generic [ref=e58]: "10"
          - generic [ref=e59]: "11"
          - generic [ref=e60]: "12"
          - generic [ref=e61]: "13"
          - generic [ref=e62]: "14"
          - generic [ref=e63]: "15"
          - generic [ref=e64]: "16"
          - generic [ref=e65]: "17"
          - generic [ref=e66]: "18"
          - generic [ref=e67]: "19"
          - generic [ref=e68]: "20"
          - generic [ref=e69]: "21"
          - generic [ref=e70]: "22"
          - generic [ref=e71]: "23"
          - generic [ref=e72]: "24"
          - generic [ref=e73]: "25"
          - generic [ref=e74]: "26"
          - generic [ref=e75]: "27"
          - generic [ref=e76]: "28"
          - generic [ref=e77]: "29"
          - generic [ref=e78]: "30"
      - generic [ref=e80]:
        - tablist [ref=e81]:
          - tab "⚔️ Spire" [ref=e82]
          - tab "✨ Attune" [ref=e83]
          - tab "🗿 Golems" [ref=e84]
          - tab "📚 Skills" [ref=e85]
          - tab "🔮 Spells" [ref=e86]
          - tab "🛡️ Gear" [active] [selected] [ref=e87]
          - tab "🔧 Craft" [ref=e88]
          - tab "💎 Loot" [ref=e89]
          - tab "🏆 Achieve" [ref=e90]
          - tab "📊 Stats" [ref=e91]
          - tab "🐛 Debug" [ref=e92]
          - tab "📖 Grimoire" [ref=e93]
        - tabpanel "🛡️ Gear" [ref=e94]:
          - generic [ref=e95]:
            - generic [ref=e96]:
              - generic [ref=e97]:
                - heading "Equipped Gear" [level=3] [ref=e98]
                - generic [ref=e100]: 4 / 8 slots filled
              - generic [ref=e101]:
                - generic [ref=e102]:
                  - heading "Weapon & Shield" [level=4] [ref=e103]
                  - generic [ref=e104]:
                    - 'button "Main Hand slot: Basic Staff" [ref=e106]':
                      - generic [ref=e107]:
                        - generic [ref=e108]:
                          - img [ref=e109]
                          - generic [ref=e114]: Main Hand
                        - button "Unequip Basic Staff" [ref=e115]:
                          - img [ref=e116]
                      - generic [ref=e119]:
                        - generic [ref=e120]:
                          - text: Basic Staff
                          - generic [ref=e121]: 2-Handed
                        - generic [ref=e122]: "Enchantments: 1/50"
                        - generic [ref=e124]: Mana Bolt
                    - button "Off Hand slot (blocked by 2-handed weapon) (empty)" [ref=e125]:
                      - generic [ref=e127]:
                        - img [ref=e128]
                        - generic [ref=e130]: Off Hand
                        - generic [ref=e131]:
                          - img
                          - text: Occupied — 2H Weapon
                      - generic [ref=e132]:
                        - img [ref=e133]
                        - text: Blocked by 2-handed weapon
                - generic [ref=e135]:
                  - heading "Armor" [level=4] [ref=e136]
                  - generic [ref=e137]:
                    - button "Head slot (empty)" [ref=e139]:
                      - generic [ref=e141]:
                        - img [ref=e142]
                        - generic [ref=e147]: Head
                      - generic [ref=e148]: Head
                    - 'button "Body slot: Civilian Shirt" [ref=e150]':
                      - generic [ref=e151]:
                        - generic [ref=e152]:
                          - img [ref=e153]
                          - generic [ref=e155]: Body
                        - button "Unequip Civilian Shirt" [ref=e156]:
                          - img [ref=e157]
                      - generic [ref=e160]:
                        - generic [ref=e161]: Civilian Shirt
                        - generic [ref=e162]: "Enchantments: 0/30"
                    - 'button "Hands slot: Civilian Gloves" [ref=e164]':
                      - generic [ref=e165]:
                        - generic [ref=e166]:
                          - img [ref=e167]
                          - generic [ref=e172]: Hands
                        - button "Unequip Civilian Gloves" [ref=e173]:
                          - img [ref=e174]
                      - generic [ref=e177]:
                        - generic [ref=e178]: Civilian Gloves
                        - generic [ref=e179]: "Enchantments: 0/20"
                    - 'button "Feet slot: Civilian Shoes" [ref=e181]':
                      - generic [ref=e182]:
                        - generic [ref=e183]:
                          - img [ref=e184]
                          - generic [ref=e187]: Feet
                        - button "Unequip Civilian Shoes" [ref=e188]:
                          - img [ref=e189]
                      - generic [ref=e192]:
                        - generic [ref=e193]: Civilian Shoes
                        - generic [ref=e194]: "Enchantments: 0/15"
                - generic [ref=e195]:
                  - heading "Accessories" [level=4] [ref=e196]
                  - generic [ref=e197]:
                    - button "Accessory 1 slot (empty)" [ref=e199]:
                      - generic [ref=e201]:
                        - img [ref=e202]
                        - generic [ref=e205]: Accessory 1
                      - generic [ref=e206]: Accessory 1
                    - button "Accessory 2 slot (empty)" [ref=e208]:
                      - generic [ref=e210]:
                        - img [ref=e211]
                        - generic [ref=e214]: Accessory 2
                      - generic [ref=e215]: Accessory 2
            - generic [ref=e216]:
              - heading "Equipment Inventory (0 items)" [level=3] [ref=e218]
              - status [ref=e219]: No unequipped items. Craft new gear in the Crafting tab.
            - generic [ref=e220]:
              - heading "Equipment Stats Summary" [level=3] [ref=e222]
              - generic [ref=e223]:
                - generic [ref=e224]:
                  - generic [ref=e225]: "4"
                  - generic [ref=e226]: Total Items
                - generic [ref=e227]:
                  - generic [ref=e228]: "4"
                  - generic [ref=e229]: Equipped
                - generic [ref=e230]:
                  - generic [ref=e231]: "0"
                  - generic [ref=e232]: In Inventory
                - generic [ref=e233]:
                  - generic [ref=e234]: "1"
                  - generic [ref=e235]: Total Enchantments
              - generic [ref=e236]:
                - heading "✨ Enchantment Power" [level=3] [ref=e238]
                - generic [ref=e239]:
                  - generic [ref=e240]:
                    - generic [ref=e241]: "Enchantment Power:"
                    - generic [ref=e242]: 1.00×
                  - paragraph [ref=e243]: Increases the power of all enchantments by 0%. Multiplier applied to all enchantment effects.
              - generic [ref=e244]:
                - generic [ref=e245]: "Active Effects from Equipment:"
                - generic [ref=e247]: No active effects
  - region "Notifications (F8)":
    - list
  - region "Notifications (F8)":
    - list
  - button "Open Next.js Dev Tools" [ref=e253] [cursor=pointer]:
    - img [ref=e254]
  - alert [ref=e257]
 ```
 # Test source
 ```ts
  28  | 
  29  |     // Verify equipment UI elements
  30  |     const equippedGearHeading = page.locator('text="Equipped Gear"');
  31  |     await expect(equippedGearHeading).toBeVisible({ timeout: 5000 });
  32  |   });
  33  | 
  34  |   test('shows equipment slots with labels', async ({ page }) => {
  35  |     await page.goto('/');
  36  |     await page.evaluate(() => {
  37  |       Object.keys(localStorage)
  38  |         .filter((k) => k.startsWith('mana-loop-'))
  39  |         .forEach((k) => localStorage.removeItem(k));
  40  |     });
  41  |     await page.reload();
  42  |     await page.waitForLoadState('networkidle');
  43  | 
  44  |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
  45  | 
  46  |     // Check for expected slot labels - use role=heading or more specific selectors
  47  |     // Main Hand slot
  48  |     const mainHandSection = page.locator('text=Main Hand');
  49  |     await expect(mainHandSection.first()).toBeVisible();
  50  | 
  51  |     // Off Hand
  52  |     const offHandSection = page.locator('text=Off Hand');
  53  |     await expect(offHandSection.first()).toBeVisible();
  54  | 
  55  |     // Head
  56  |     const headSection = page.locator('text=Head');
  57  |     await expect(headSection.first()).toBeVisible();
  58  | 
  59  |     // Body
  60  |     const bodySection = page.locator('text=Body');
  61  |     await expect(bodySection.first()).toBeVisible();
  62  | 
  63  |     // Hands
  64  |     const handsSection = page.locator('text=Hands');
  65  |     await expect(handsSection.first()).toBeVisible();
  66  | 
  67  |     // Feet
  68  |     const feetSection = page.locator('text=Feet');
  69  |     await expect(feetSection.first()).toBeVisible();
  70  | 
  71  |     // Accessory 1 and 2
  72  |     const acc1Section = page.locator('text=Accessory 1');
  73  |     await expect(acc1Section.first()).toBeVisible();
  74  |     const acc2Section = page.locator('text=Accessory 2');
  75  |     await expect(acc2Section.first()).toBeVisible();
  76  |   });
  77  | 
  78  |   test('shows starting equipment already equipped', async ({ page }) => {
  79  |     await page.goto('/');
  80  |     await page.evaluate(() => {
  81  |       Object.keys(localStorage)
  82  |         .filter((k) => k.startsWith('mana-loop-'))
  83  |         .forEach((k) => localStorage.removeItem(k));
  84  |     });
  85  |     await page.reload();
  86  |     await page.waitForLoadState('networkidle');
  87  | 
  88  |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
  89  | 
  90  |     // The player starts with a Basic Staff in main hand (as an equipped item)
  91  |     const mainHandSlot = page.locator('text=Main Hand >> .. >> text=Basic Staff');
  92  |     await expect(mainHandSlot).toBeVisible({ timeout: 5000 });
  93  |   });
  94  | 
  95  |   test('2-handed weapon blocks offhand slot', async ({ page }) => {
  96  |     await page.goto('/');
  97  |     await page.evaluate(() => {
  98  |       Object.keys(localStorage)
  99  |         .filter((k) => k.startsWith('mana-loop-'))
  100 |         .forEach((k) => localStorage.removeItem(k));
  101 |     });
  102 |     await page.reload();
  103 |     await page.waitForLoadState('networkidle');
  104 | 
  105 |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
  106 | 
  107 |     // The starting basic staff is 2-handed
  108 |     // The offhand slot should show as blocked with "Occupied — 2H Weapon"
  109 |     const offHandBlocked = page.locator('text=Occupied').first();
  110 |     await expect(offHandBlocked).toBeVisible({ timeout: 5000 });
  111 |   });
  112 | 
  113 |   test('can unequip an item from a slot', async ({ page }) => {
  114 |     await page.goto('/');
  115 |     await page.evaluate(() => {
  116 |       Object.keys(localStorage)
  117 |         .filter((k) => k.startsWith('mana-loop-'))
  118 |         .forEach((k) => localStorage.removeItem(k));
  119 |     });
  120 |     await page.reload();
  121 |     await page.waitForLoadState('networkidle');
  122 | 
  123 |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
  124 | 
  125 |     // Find an equiped slot with an unequip button (the X button)
  126 |     // The hands slot has civilian gloves equipped
  127 |     const handsSlot = page.locator('text=Hands >> .. >> button').first();
 > 128 |     await expect(handsSlot).toBeVisible({ timeout: 5000 });
      |                             ^ Error: expect(locator).toBeVisible() failed
  129 |     // Note: exact behavior of unequip depends on implementation state
  130 |   });
  131 | });
 ```
@@ -0,0 +1,285 @@
 # Instructions
 - Following Playwright test failed.
 - Explain why, be concise, respect Playwright best practices.
 - Provide a snippet of code with the fix, if possible.
 # Test info
 - Name: enchanting.spec.ts >> Enchanting Flow >> can navigate to Crafting tab
 - Location: e2e/enchanting.spec.ts:28:7
 # Error details
 ```
 Error: expect(locator).toBeVisible() failed
 Locator: getByRole('button')
 Expected: visible
 Error: strict mode violation: getByRole('button') resolved to 6 elements:
    1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
    2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
    3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
    4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
    5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
    6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
 Call log:
  - Expect "toBeVisible" with timeout 5000ms
  - waiting for getByRole('button')
 ```
 # Page snapshot
 ```yaml
 - generic [ref=e1]:
  - generic [ref=e2]:
    - banner [ref=e3]:
      - generic [ref=e4]:
        - heading "MANA LOOP" [level=1] [ref=e5]
        - generic [ref=e7]:
          - generic [ref=e8]:
            - generic [ref=e9]: Day 1
            - generic [ref=e10]: 00:55
          - generic [ref=e11]:
            - generic [ref=e12]: "0"
            - generic [ref=e13]: Insight
    - main [ref=e14]:
      - generic [ref=e15]:
        - generic [ref=e17]:
          - generic [ref=e18]:
            - generic [ref=e19]:
              - generic [ref=e20]: "11"
              - generic [ref=e21]: / 100
            - generic [ref=e22]:
              - text: +2.4 mana/hr
              - generic [ref=e23]: (1.2x med)
          - progressbar [ref=e24]
          - button "Gather +1 Mana" [ref=e26]:
            - img
            - text: Gather +1 Mana
          - generic [ref=e27]:
            - button "Elemental Mana (1)" [ref=e28]:
              - generic [ref=e29]: Elemental Mana (1)
              - img [ref=e30]
            - generic [ref=e33]:
              - generic [ref=e34]:
                - generic [ref=e35]: 🔗
                - generic [ref=e36]: Transference
              - generic [ref=e39]: 0/10
        - button "Climb the Spire" [ref=e40]:
          - img
          - text: Climb the Spire
        - generic [ref=e42]:
          - generic [ref=e43]:
            - img [ref=e44]
            - generic [ref=e46]: Current Activity
          - generic [ref=e47]: Meditating
        - generic [ref=e48]:
          - generic [ref=e49]: "1"
          - generic [ref=e50]: "2"
          - generic [ref=e51]: "3"
          - generic [ref=e52]: "4"
          - generic [ref=e53]: "5"
          - generic [ref=e54]: "6"
          - generic [ref=e55]: "7"
          - generic [ref=e56]: "8"
          - generic [ref=e57]: "9"
          - generic [ref=e58]: "10"
          - generic [ref=e59]: "11"
          - generic [ref=e60]: "12"
          - generic [ref=e61]: "13"
          - generic [ref=e62]: "14"
          - generic [ref=e63]: "15"
          - generic [ref=e64]: "16"
          - generic [ref=e65]: "17"
          - generic [ref=e66]: "18"
          - generic [ref=e67]: "19"
          - generic [ref=e68]: "20"
          - generic [ref=e69]: "21"
          - generic [ref=e70]: "22"
          - generic [ref=e71]: "23"
          - generic [ref=e72]: "24"
          - generic [ref=e73]: "25"
          - generic [ref=e74]: "26"
          - generic [ref=e75]: "27"
          - generic [ref=e76]: "28"
          - generic [ref=e77]: "29"
          - generic [ref=e78]: "30"
      - generic [ref=e80]:
        - tablist [ref=e81]:
          - tab "⚔️ Spire" [ref=e82]
          - tab "✨ Attune" [ref=e83]
          - tab "🗿 Golems" [ref=e84]
          - tab "📚 Skills" [ref=e85]
          - tab "🔮 Spells" [ref=e86]
          - tab "🛡️ Gear" [ref=e87]
          - tab "🔧 Craft" [active] [selected] [ref=e88]
          - tab "💎 Loot" [ref=e89]
          - tab "🏆 Achieve" [ref=e90]
          - tab "📊 Stats" [ref=e91]
          - tab "🐛 Debug" [ref=e92]
          - tab "📖 Grimoire" [ref=e93]
        - tabpanel "🔧 Craft" [ref=e94]:
          - generic [ref=e95]:
            - generic [ref=e97]:
              - button "Fabricate" [ref=e98]:
                - img
                - text: Fabricate
              - button "Enchant" [ref=e99]:
                - img
                - text: Enchant
            - generic [ref=e100]:
              - generic [ref=e101]:
                - generic [ref=e103]:
                  - img [ref=e104]
                  - text: Available Blueprints
                - generic [ref=e113]:
                  - img [ref=e114]
                  - paragraph [ref=e118]: No blueprints discovered yet.
                  - paragraph [ref=e119]: Defeat guardians to find blueprints!
              - generic [ref=e120]:
                - generic [ref=e122]:
                  - img [ref=e123]
                  - text: Materials (0)
                - generic [ref=e131]:
                  - img [ref=e132]
                  - paragraph [ref=e134]: No materials collected yet.
                  - paragraph [ref=e135]: Defeat floors to gather materials!
  - region "Notifications (F8)":
    - list
  - region "Notifications (F8)":
    - list
  - button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
    - img [ref=e142]
  - alert [ref=e145]
 ```
 # Test source
 ```ts
  1   | import { test, expect } from '@playwright/test';
  2   | 
  3   | /**
  4   |  * E2E tests for the 3-step enchantment flow:
  5   |  * Design → Prepare → Apply
  6   |  *
  7   |  * These tests validate the core crafting loop works end-to-end.
  8   |  */
  9   | 
  10  | test.describe('Enchanting Flow', () => {
  11  |   /**
  12  |    * Before each test, ensure we start with a clean state.
  13  |    * The game persists state in localStorage, so we clear it.
  14  |    */
  15  |   test.beforeEach(async ({ page }) => {
  16  |     await page.goto('/');
  17  |     // Clear game state to ensure a fresh start
  18  |     await page.evaluate(() => {
  19  |       Object.keys(localStorage)
  20  |         .filter((k) => k.startsWith('mana-loop-'))
  21  |         .forEach((k) => localStorage.removeItem(k));
  22  |     });
  23  |     await page.reload();
  24  |     // Wait for the game to initialize
  25  |     await page.waitForLoadState('networkidle');
  26  |   });
  27  | 
  28  |   test('can navigate to Crafting tab', async ({ page }) => {
  29  |     // The tab bar contains a "Craft" tab
  30  |     const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
  31  |     await expect(craftTab).toBeVisible();
  32  |     await craftTab.click();
  33  | 
  34  |     // Verify we're on the crafting tab by checking for sub-tabs
  35  |     const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
  36  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
 > 37  |     await expect(fabricateBtn).toBeVisible();
      |                                ^ Error: expect(locator).toBeVisible() failed
  38  |     await expect(enchantBtn).toBeVisible();
  39  |   });
  40  | 
  41  |   test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
  42  |     await page.goto('/');
  43  |     await page.evaluate(() => {
  44  |       Object.keys(localStorage)
  45  |         .filter((k) => k.startsWith('mana-loop-'))
  46  |         .forEach((k) => localStorage.removeItem(k));
  47  |     });
  48  |     await page.reload();
  49  |     await page.waitForLoadState('networkidle');
  50  | 
  51  |     // Navigate to Crafting tab
  52  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
  53  | 
  54  |     // Click Enchant sub-tab
  55  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
  56  |     await enchantBtn.click();
  57  | 
  58  |     // Should see the design stage UI
  59  |     const designBtn = page.getByRole('button', { hasText: 'Design' });
  60  |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
  61  |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
  62  |     await expect(designBtn).toBeVisible();
  63  |     await expect(prepareBtn).toBeVisible();
  64  |     await expect(applyBtn).toBeVisible();
  65  |   });
  66  | 
  67  |   test('can select equipment type and effect in Design stage', async ({ page }) => {
  68  |     await page.goto('/');
  69  |     await page.evaluate(() => {
  70  |       Object.keys(localStorage)
  71  |         .filter((k) => k.startsWith('mana-loop-'))
  72  |         .forEach((k) => localStorage.removeItem(k));
  73  |     });
  74  |     await page.reload();
  75  |     await page.waitForLoadState('networkidle');
  76  | 
  77  |     // Navigate to Crafting > Enchant > Design
  78  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
  79  |     await page.getByRole('button', { hasText: 'Enchant' }).click();
  80  | 
  81  |     // The design section should show effect selectors once an equipment type is chosen
  82  |     // Look for any element matching equipment type buttons and effect-related content
  83  |     const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
  84  |     const count = await equipmentButtons.count();
  85  |     expect(count).toBeGreaterThan(0);
  86  |   });
  87  | 
  88  |   test('can navigate through all 3 enchant stages', async ({ page }) => {
  89  |     await page.goto('/');
  90  |     await page.evaluate(() => {
  91  |       Object.keys(localStorage)
  92  |         .filter((k) => k.startsWith('mana-loop-'))
  93  |         .forEach((k) => localStorage.removeItem(k));
  94  |     });
  95  |     await page.reload();
  96  |     await page.waitForLoadState('networkidle');
  97  | 
  98  |     // Navigate to Crafting > Enchant
  99  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
  100 |     await page.getByRole('button', { hasText: 'Enchant' }).click();
  101 | 
  102 |     // Verify Design stage is active
  103 |     const designBtn = page.getByRole('button', { hasText: 'Design' });
  104 |     await expect(designBtn).toBeVisible();
  105 | 
  106 |     // Switch to Prepare stage
  107 |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
  108 |     await prepareBtn.click();
  109 | 
  110 |     // Should see preparation UI
  111 |     const prepareHeading = page.locator('text=Select Equipment to Prepare');
  112 |     await expect(prepareHeading).toBeVisible({ timeout: 5000 });
  113 | 
  114 |     // Switch to Apply stage
  115 |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
  116 |     await applyBtn.click();
  117 | 
  118 |     // Should see application UI
  119 |     const applyHeading = page.locator('text=Select Equipment & Design');
  120 |     await expect(applyHeading).toBeVisible({ timeout: 5000 });
  121 |   });
  122 | });
 ```
@@ -0,0 +1,260 @@
 # Instructions
 - Following Playwright test failed.
 - Explain why, be concise, respect Playwright best practices.
 - Provide a snippet of code with the fix, if possible.
 # Test info
 - Name: combat.spec.ts >> Combat System >> can enter Spire mode by clicking Climb button
 - Location: e2e/combat.spec.ts:34:7
 # Error details
 ```
 Error: expect(locator).toBeVisible() failed
 Locator: getByRole('button', { name: 'Enter Spire Mode' })
 Expected: visible
 Timeout: 5000ms
 Error: element(s) not found
 Call log:
  - Expect "toBeVisible" with timeout 5000ms
  - waiting for getByRole('button', { name: 'Enter Spire Mode' })
 ```
 # Page snapshot
 ```yaml
 - generic [active] [ref=e1]:
  - generic [ref=e2]:
    - banner [ref=e3]:
      - generic [ref=e4]:
        - heading "MANA LOOP" [level=1] [ref=e5]
        - generic [ref=e7]:
          - generic [ref=e8]:
            - generic [ref=e9]: Day 1
            - generic [ref=e10]: 01:43
          - generic [ref=e11]:
            - generic [ref=e12]: "0"
            - generic [ref=e13]: Insight
    - main [ref=e14]:
      - generic [ref=e15]:
        - generic [ref=e17]:
          - generic [ref=e18]:
            - generic [ref=e19]:
              - generic [ref=e20]: "14"
              - generic [ref=e21]: / 100
            - generic [ref=e22]:
              - text: +2.9 mana/hr
              - generic [ref=e23]: (1.4x med)
          - progressbar [ref=e24]
          - button "Gather +1 Mana" [ref=e26]:
            - img
            - text: Gather +1 Mana
          - generic [ref=e27]:
            - button "Elemental Mana (1)" [ref=e28]:
              - generic [ref=e29]: Elemental Mana (1)
              - img [ref=e30]
            - generic [ref=e33]:
              - generic [ref=e34]:
                - generic [ref=e35]: 🔗
                - generic [ref=e36]: Transference
              - generic [ref=e39]: 0/10
        - generic [ref=e40]:
          - generic [ref=e41]: "1"
          - generic [ref=e42]: "2"
          - generic [ref=e43]: "3"
          - generic [ref=e44]: "4"
          - generic [ref=e45]: "5"
          - generic [ref=e46]: "6"
          - generic [ref=e47]: "7"
          - generic [ref=e48]: "8"
          - generic [ref=e49]: "9"
          - generic [ref=e50]: "10"
          - generic [ref=e51]: "11"
          - generic [ref=e52]: "12"
          - generic [ref=e53]: "13"
          - generic [ref=e54]: "14"
          - generic [ref=e55]: "15"
          - generic [ref=e56]: "16"
          - generic [ref=e57]: "17"
          - generic [ref=e58]: "18"
          - generic [ref=e59]: "19"
          - generic [ref=e60]: "20"
          - generic [ref=e61]: "21"
          - generic [ref=e62]: "22"
          - generic [ref=e63]: "23"
          - generic [ref=e64]: "24"
          - generic [ref=e65]: "25"
          - generic [ref=e66]: "26"
          - generic [ref=e67]: "27"
          - generic [ref=e68]: "28"
          - generic [ref=e69]: "29"
          - generic [ref=e70]: "30"
      - generic [ref=e72]:
        - tablist [ref=e73]:
          - tab "⚔️ Spire" [selected] [ref=e74]
          - tab "✨ Attune" [ref=e75]
          - tab "🗿 Golems" [ref=e76]
          - tab "📚 Skills" [ref=e77]
          - tab "🔮 Spells" [ref=e78]
          - tab "🛡️ Gear" [ref=e79]
          - tab "🔧 Craft" [ref=e80]
          - tab "💎 Loot" [ref=e81]
          - tab "🏆 Achieve" [ref=e82]
          - tab "📊 Stats" [ref=e83]
          - tab "🐛 Debug" [ref=e84]
          - tab "📖 Grimoire" [ref=e85]
        - tabpanel "⚔️ Spire" [ref=e86]:
          - generic [ref=e87]:
            - generic [ref=e89]:
              - button "Exit Spire Mode" [ref=e90]:
                - img
                - text: Exit Spire Mode
              - generic [ref=e91]: Climb down to floor 1 to return to the main game
            - generic [ref=e92]:
              - heading "Current Floor ⚔️ Combat" [level=3] [ref=e94]:
                - generic [ref=e95]: Current Floor
                - generic [ref=e96]: ⚔️ Combat
              - generic [ref=e97]:
                - generic [ref=e98]:
                  - generic [ref=e99]: "1"
                  - generic [ref=e100]: / 100
                  - generic [ref=e101]: 🔥 Fire
                - generic [ref=e102]:
                  - text: "Best: Floor"
                  - strong [ref=e103]: "1"
                  - text: "• Pacts:"
                  - strong [ref=e104]: "0"
            - generic [ref=e106]:
              - generic [ref=e108]: Active Spells (1)
              - generic [ref=e110]:
                - generic [ref=e111]:
                  - generic [ref=e112]: Mana BoltBasic
                  - generic [ref=e113]: ✓
                - generic [ref=e114]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
            - generic [ref=e115]:
              - generic [ref=e116]:
                - generic [ref=e117]:
                  - img [ref=e118]
                  - generic [ref=e123]: Inferno Whelp
                - generic [ref=e124]: 🔥 Fire
              - generic [ref=e129]: 151 / 151 HP
            - generic [ref=e130]:
              - generic [ref=e132]: Floor Navigation
              - generic [ref=e133]:
                - generic [ref=e134]:
                  - button "Climb Up" [ref=e135]:
                    - img
                    - text: Climb Up
                  - button "Climb Down" [disabled]:
                    - img
                    - text: Climb Down
                - generic [ref=e136]: Click Climb Up/Down to begin climbing
            - generic [ref=e137]:
              - generic [ref=e139]: Combat Stats
              - generic [ref=e140]:
                - generic [ref=e141]: "Total DPS: —"
                - generic [ref=e142]:
                  - generic [ref=e143]: Active Spells
                  - generic [ref=e144]:
                    - generic [ref=e145]:
                      - generic [ref=e146]:
                        - text: Mana Bolt
                        - generic [ref=e147]: Basic
                      - generic [ref=e148]: ✓
                    - generic [ref=e149]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
                - generic [ref=e151]: "Study Speed: 100%"
            - generic [ref=e152]:
              - generic [ref=e154]: Activity Log
              - generic [ref=e160]: No activity yet...
  - region "Notifications (F8)":
    - list
  - region "Notifications (F8)":
    - list
  - button "Open Next.js Dev Tools" [ref=e166] [cursor=pointer]:
    - img [ref=e167]
  - alert [ref=e170]
 ```
 # Test source
 ```ts
  1  | import { test, expect } from '@playwright/test';
  2  | 
  3  | /**
  4  |  * E2E tests for combat system:
  5  |  * - Entering spire mode (climbing)
  6  |  * - Casting spells and seeing progress
  7  |  * - Enemy HP reduction
  8  |  * - Floor advancement
  9  |  */
  10 | 
  11 | test.describe('Combat System', () => {
  12 |   test.beforeEach(async ({ page }) => {
  13 |     await page.goto('/');
  14 |     // Clear game state to ensure a fresh start
  15 |     await page.evaluate(() => {
  16 |       Object.keys(localStorage)
  17 |         .filter((k) => k.startsWith('mana-loop-'))
  18 |         .forEach((k) => localStorage.removeItem(k));
  19 |     });
  20 |     await page.reload();
  21 |     await page.waitForLoadState('networkidle');
  22 |   });
  23 | 
  24 |   test('can see the Spire tab and "Climb the Spire" button', async ({ page }) => {
  25 |     // The Spire tab uses an icon + text, so match by the tab role
  26 |     const spireTab = page.getByRole('tab', { name: /⚔️ Spire/ });
  27 |     await expect(spireTab).toBeVisible();
  28 | 
  29 |     // Main page should show "Climb the Spire" button
  30 |     const climbBtn = page.getByRole('button', { name: 'Climb the Spire' });
  31 |     await expect(climbBtn).toBeVisible();
  32 |   });
  33 | 
  34 |   test('can enter Spire mode by clicking Climb button', async ({ page }) => {
  35 |     // Click "Climb the Spire" button on the main page (via left panel)
  36 |     await page.getByRole('button', { name: 'Climb the Spire' }).click();
  37 | 
  38 |     // Should now see Spire mode UI elements
  39 |     // The "Enter Spire Mode" button appears when on the Spire tab
  40 |     const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
 > 41 |     await expect(enterBtn).toBeVisible({ timeout: 5000 });
     |                            ^ Error: expect(locator).toBeVisible() failed
  42 |   });
  43 | 
  44 |   test('can navigate to Spire tab', async ({ page }) => {
  45 |     // Click the Spire tab specifically (using role=tab to disambiguate)
  46 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
  47 | 
  48 |     // Should see Spire-specific UI
  49 |     const enterSpireBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
  50 |     await expect(enterSpireBtn).toBeVisible({ timeout: 5000 });
  51 |   });
  52 | 
  53 |   test('can enter spire mode from the Spire tab', async ({ page }) => {
  54 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
  55 | 
  56 |     const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
  57 |     await expect(enterBtn).toBeEnabled();
  58 |     await enterBtn.click();
  59 | 
  60 |     // After entering, should see exit button
  61 |     const exitBtn = page.getByRole('button', { name: 'Exit Spire Mode' });
  62 |     await expect(exitBtn).toBeVisible({ timeout: 5000 });
  63 |   });
  64 | 
  65 |   test('shows floor information in spire mode', async ({ page }) => {
  66 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
  67 |     await page.getByRole('button', { name: 'Enter Spire Mode' }).click();
  68 | 
  69 |     // Should display floor number - look for "Floor" label or the floor counter
  70 |     const floorDisplay = page.locator('text="Floor"').first();
  71 |     await expect(floorDisplay).toBeVisible({ timeout: 5000 });
  72 |   });
  73 | });
 ```
@@ -0,0 +1,280 @@
 # Instructions
 - Following Playwright test failed.
 - Explain why, be concise, respect Playwright best practices.
 - Provide a snippet of code with the fix, if possible.
 # Test info
 - Name: enchanting.spec.ts >> Enchanting Flow >> can switch to Enchant sub-tab and see design UI
 - Location: e2e/enchanting.spec.ts:41:7
 # Error details
 ```
 Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
    1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
    2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
    3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
    4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
    5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
    6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
 Call log:
  - waiting for getByRole('button')
 ```
 # Page snapshot
 ```yaml
 - generic [ref=e1]:
  - generic [ref=e2]:
    - banner [ref=e3]:
      - generic [ref=e4]:
        - heading "MANA LOOP" [level=1] [ref=e5]
        - generic [ref=e7]:
          - generic [ref=e8]:
            - generic [ref=e9]: Day 1
            - generic [ref=e10]: 01:04
          - generic [ref=e11]:
            - generic [ref=e12]: "0"
            - generic [ref=e13]: Insight
    - main [ref=e14]:
      - generic [ref=e15]:
        - generic [ref=e17]:
          - generic [ref=e18]:
            - generic [ref=e19]:
              - generic [ref=e20]: "12"
              - generic [ref=e21]: / 100
            - generic [ref=e22]:
              - text: +2.3 mana/hr
              - generic [ref=e23]: (1.1x med)
          - progressbar [ref=e24]
          - button "Gather +1 Mana" [ref=e26]:
            - img
            - text: Gather +1 Mana
          - generic [ref=e27]:
            - button "Elemental Mana (1)" [ref=e28]:
              - generic [ref=e29]: Elemental Mana (1)
              - img [ref=e30]
            - generic [ref=e33]:
              - generic [ref=e34]:
                - generic [ref=e35]: 🔗
                - generic [ref=e36]: Transference
              - generic [ref=e39]: 0/10
        - button "Climb the Spire" [ref=e40]:
          - img
          - text: Climb the Spire
        - generic [ref=e42]:
          - generic [ref=e43]:
            - img [ref=e44]
            - generic [ref=e46]: Current Activity
          - generic [ref=e47]: Meditating
        - generic [ref=e48]:
          - generic [ref=e49]: "1"
          - generic [ref=e50]: "2"
          - generic [ref=e51]: "3"
          - generic [ref=e52]: "4"
          - generic [ref=e53]: "5"
          - generic [ref=e54]: "6"
          - generic [ref=e55]: "7"
          - generic [ref=e56]: "8"
          - generic [ref=e57]: "9"
          - generic [ref=e58]: "10"
          - generic [ref=e59]: "11"
          - generic [ref=e60]: "12"
          - generic [ref=e61]: "13"
          - generic [ref=e62]: "14"
          - generic [ref=e63]: "15"
          - generic [ref=e64]: "16"
          - generic [ref=e65]: "17"
          - generic [ref=e66]: "18"
          - generic [ref=e67]: "19"
          - generic [ref=e68]: "20"
          - generic [ref=e69]: "21"
          - generic [ref=e70]: "22"
          - generic [ref=e71]: "23"
          - generic [ref=e72]: "24"
          - generic [ref=e73]: "25"
          - generic [ref=e74]: "26"
          - generic [ref=e75]: "27"
          - generic [ref=e76]: "28"
          - generic [ref=e77]: "29"
          - generic [ref=e78]: "30"
      - generic [ref=e80]:
        - tablist [ref=e81]:
          - tab "⚔️ Spire" [ref=e82]
          - tab "✨ Attune" [ref=e83]
          - tab "🗿 Golems" [ref=e84]
          - tab "📚 Skills" [ref=e85]
          - tab "🔮 Spells" [ref=e86]
          - tab "🛡️ Gear" [ref=e87]
          - tab "🔧 Craft" [active] [selected] [ref=e88]
          - tab "💎 Loot" [ref=e89]
          - tab "🏆 Achieve" [ref=e90]
          - tab "📊 Stats" [ref=e91]
          - tab "🐛 Debug" [ref=e92]
          - tab "📖 Grimoire" [ref=e93]
        - tabpanel "🔧 Craft" [ref=e94]:
          - generic [ref=e95]:
            - generic [ref=e97]:
              - button "Fabricate" [ref=e98]:
                - img
                - text: Fabricate
              - button "Enchant" [ref=e99]:
                - img
                - text: Enchant
            - generic [ref=e100]:
              - generic [ref=e101]:
                - generic [ref=e103]:
                  - img [ref=e104]
                  - text: Available Blueprints
                - generic [ref=e113]:
                  - img [ref=e114]
                  - paragraph [ref=e118]: No blueprints discovered yet.
                  - paragraph [ref=e119]: Defeat guardians to find blueprints!
              - generic [ref=e120]:
                - generic [ref=e122]:
                  - img [ref=e123]
                  - text: Materials (0)
                - generic [ref=e131]:
                  - img [ref=e132]
                  - paragraph [ref=e134]: No materials collected yet.
                  - paragraph [ref=e135]: Defeat floors to gather materials!
  - region "Notifications (F8)":
    - list
  - region "Notifications (F8)":
    - list
  - button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
    - img [ref=e142]
  - alert [ref=e145]
 ```
 # Test source
 ```ts
  1   | import { test, expect } from '@playwright/test';
  2   | 
  3   | /**
  4   |  * E2E tests for the 3-step enchantment flow:
  5   |  * Design → Prepare → Apply
  6   |  *
  7   |  * These tests validate the core crafting loop works end-to-end.
  8   |  */
  9   | 
  10  | test.describe('Enchanting Flow', () => {
  11  |   /**
  12  |    * Before each test, ensure we start with a clean state.
  13  |    * The game persists state in localStorage, so we clear it.
  14  |    */
  15  |   test.beforeEach(async ({ page }) => {
  16  |     await page.goto('/');
  17  |     // Clear game state to ensure a fresh start
  18  |     await page.evaluate(() => {
  19  |       Object.keys(localStorage)
  20  |         .filter((k) => k.startsWith('mana-loop-'))
  21  |         .forEach((k) => localStorage.removeItem(k));
  22  |     });
  23  |     await page.reload();
  24  |     // Wait for the game to initialize
  25  |     await page.waitForLoadState('networkidle');
  26  |   });
  27  | 
  28  |   test('can navigate to Crafting tab', async ({ page }) => {
  29  |     // The tab bar contains a "Craft" tab
  30  |     const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
  31  |     await expect(craftTab).toBeVisible();
  32  |     await craftTab.click();
  33  | 
  34  |     // Verify we're on the crafting tab by checking for sub-tabs
  35  |     const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
  36  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
  37  |     await expect(fabricateBtn).toBeVisible();
  38  |     await expect(enchantBtn).toBeVisible();
  39  |   });
  40  | 
  41  |   test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
  42  |     await page.goto('/');
  43  |     await page.evaluate(() => {
  44  |       Object.keys(localStorage)
  45  |         .filter((k) => k.startsWith('mana-loop-'))
  46  |         .forEach((k) => localStorage.removeItem(k));
  47  |     });
  48  |     await page.reload();
  49  |     await page.waitForLoadState('networkidle');
  50  | 
  51  |     // Navigate to Crafting tab
  52  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
  53  | 
  54  |     // Click Enchant sub-tab
  55  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
 > 56  |     await enchantBtn.click();
      |                      ^ Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
  57  | 
  58  |     // Should see the design stage UI
  59  |     const designBtn = page.getByRole('button', { hasText: 'Design' });
  60  |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
  61  |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
  62  |     await expect(designBtn).toBeVisible();
  63  |     await expect(prepareBtn).toBeVisible();
  64  |     await expect(applyBtn).toBeVisible();
  65  |   });
  66  | 
  67  |   test('can select equipment type and effect in Design stage', async ({ page }) => {
  68  |     await page.goto('/');
  69  |     await page.evaluate(() => {
  70  |       Object.keys(localStorage)
  71  |         .filter((k) => k.startsWith('mana-loop-'))
  72  |         .forEach((k) => localStorage.removeItem(k));
  73  |     });
  74  |     await page.reload();
  75  |     await page.waitForLoadState('networkidle');
  76  | 
  77  |     // Navigate to Crafting > Enchant > Design
  78  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
  79  |     await page.getByRole('button', { hasText: 'Enchant' }).click();
  80  | 
  81  |     // The design section should show effect selectors once an equipment type is chosen
  82  |     // Look for any element matching equipment type buttons and effect-related content
  83  |     const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
  84  |     const count = await equipmentButtons.count();
  85  |     expect(count).toBeGreaterThan(0);
  86  |   });
  87  | 
  88  |   test('can navigate through all 3 enchant stages', async ({ page }) => {
  89  |     await page.goto('/');
  90  |     await page.evaluate(() => {
  91  |       Object.keys(localStorage)
  92  |         .filter((k) => k.startsWith('mana-loop-'))
  93  |         .forEach((k) => localStorage.removeItem(k));
  94  |     });
  95  |     await page.reload();
  96  |     await page.waitForLoadState('networkidle');
  97  | 
  98  |     // Navigate to Crafting > Enchant
  99  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
  100 |     await page.getByRole('button', { hasText: 'Enchant' }).click();
  101 | 
  102 |     // Verify Design stage is active
  103 |     const designBtn = page.getByRole('button', { hasText: 'Design' });
  104 |     await expect(designBtn).toBeVisible();
  105 | 
  106 |     // Switch to Prepare stage
  107 |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
  108 |     await prepareBtn.click();
  109 | 
  110 |     // Should see preparation UI
  111 |     const prepareHeading = page.locator('text=Select Equipment to Prepare');
  112 |     await expect(prepareHeading).toBeVisible({ timeout: 5000 });
  113 | 
  114 |     // Switch to Apply stage
  115 |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
  116 |     await applyBtn.click();
  117 | 
  118 |     // Should see application UI
  119 |     const applyHeading = page.locator('text=Select Equipment & Design');
  120 |     await expect(applyHeading).toBeVisible({ timeout: 5000 });
  121 |   });
  122 | });
 ```
@@ -0,0 +1,375 @@
 # Instructions
 - Following Playwright test failed.
 - Explain why, be concise, respect Playwright best practices.
 - Provide a snippet of code with the fix, if possible.
 # Test info
 - Name: equipment.spec.ts >> Equipment Management >> shows starting equipment already equipped
 - Location: e2e/equipment.spec.ts:78:7
 # Error details
 ```
 Error: expect(locator).toBeVisible() failed
 Locator: locator('text=Main Hand').locator('..').locator('text=Basic Staff')
 Expected: visible
 Timeout: 5000ms
 Error: element(s) not found
 Call log:
  - Expect "toBeVisible" with timeout 5000ms
  - waiting for locator('text=Main Hand').locator('..').locator('text=Basic Staff')
 ```
 # Page snapshot
 ```yaml
 - generic [ref=e1]:
  - generic [ref=e2]:
    - banner [ref=e3]:
      - generic [ref=e4]:
        - heading "MANA LOOP" [level=1] [ref=e5]
        - generic [ref=e7]:
          - generic [ref=e8]:
            - generic [ref=e9]: Day 1
            - generic [ref=e10]: 01:52
          - generic [ref=e11]:
            - generic [ref=e12]: "0"
            - generic [ref=e13]: Insight
    - main [ref=e14]:
      - generic [ref=e15]:
        - generic [ref=e17]:
          - generic [ref=e18]:
            - generic [ref=e19]:
              - generic [ref=e20]: "14"
              - generic [ref=e21]: / 100
            - generic [ref=e22]:
              - text: +2.7 mana/hr
              - generic [ref=e23]: (1.4x med)
          - progressbar [ref=e24]
          - button "Gather +1 Mana" [ref=e26]:
            - img
            - text: Gather +1 Mana
          - generic [ref=e27]:
            - button "Elemental Mana (1)" [ref=e28]:
              - generic [ref=e29]: Elemental Mana (1)
              - img [ref=e30]
            - generic [ref=e33]:
              - generic [ref=e34]:
                - generic [ref=e35]: 🔗
                - generic [ref=e36]: Transference
              - generic [ref=e39]: 0/10
        - button "Climb the Spire" [ref=e40]:
          - img
          - text: Climb the Spire
        - generic [ref=e42]:
          - generic [ref=e43]:
            - img [ref=e44]
            - generic [ref=e46]: Current Activity
          - generic [ref=e47]: Meditating
        - generic [ref=e48]:
          - generic [ref=e49]: "1"
          - generic [ref=e50]: "2"
          - generic [ref=e51]: "3"
          - generic [ref=e52]: "4"
          - generic [ref=e53]: "5"
          - generic [ref=e54]: "6"
          - generic [ref=e55]: "7"
          - generic [ref=e56]: "8"
          - generic [ref=e57]: "9"
          - generic [ref=e58]: "10"
          - generic [ref=e59]: "11"
          - generic [ref=e60]: "12"
          - generic [ref=e61]: "13"
          - generic [ref=e62]: "14"
          - generic [ref=e63]: "15"
          - generic [ref=e64]: "16"
          - generic [ref=e65]: "17"
          - generic [ref=e66]: "18"
          - generic [ref=e67]: "19"
          - generic [ref=e68]: "20"
          - generic [ref=e69]: "21"
          - generic [ref=e70]: "22"
          - generic [ref=e71]: "23"
          - generic [ref=e72]: "24"
          - generic [ref=e73]: "25"
          - generic [ref=e74]: "26"
          - generic [ref=e75]: "27"
          - generic [ref=e76]: "28"
          - generic [ref=e77]: "29"
          - generic [ref=e78]: "30"
      - generic [ref=e80]:
        - tablist [ref=e81]:
          - tab "⚔️ Spire" [ref=e82]
          - tab "✨ Attune" [ref=e83]
          - tab "🗿 Golems" [ref=e84]
          - tab "📚 Skills" [ref=e85]
          - tab "🔮 Spells" [ref=e86]
          - tab "🛡️ Gear" [active] [selected] [ref=e87]
          - tab "🔧 Craft" [ref=e88]
          - tab "💎 Loot" [ref=e89]
          - tab "🏆 Achieve" [ref=e90]
          - tab "📊 Stats" [ref=e91]
          - tab "🐛 Debug" [ref=e92]
          - tab "📖 Grimoire" [ref=e93]
        - tabpanel "🛡️ Gear" [ref=e94]:
          - generic [ref=e95]:
            - generic [ref=e96]:
              - generic [ref=e97]:
                - heading "Equipped Gear" [level=3] [ref=e98]
                - generic [ref=e100]: 4 / 8 slots filled
              - generic [ref=e101]:
                - generic [ref=e102]:
                  - heading "Weapon & Shield" [level=4] [ref=e103]
                  - generic [ref=e104]:
                    - 'button "Main Hand slot: Basic Staff" [ref=e106]':
                      - generic [ref=e107]:
                        - generic [ref=e108]:
                          - img [ref=e109]
                          - generic [ref=e114]: Main Hand
                        - button "Unequip Basic Staff" [ref=e115]:
                          - img [ref=e116]
                      - generic [ref=e119]:
                        - generic [ref=e120]:
                          - text: Basic Staff
                          - generic [ref=e121]: 2-Handed
                        - generic [ref=e122]: "Enchantments: 1/50"
                        - generic [ref=e124]: Mana Bolt
                    - button "Off Hand slot (blocked by 2-handed weapon) (empty)" [ref=e125]:
                      - generic [ref=e127]:
                        - img [ref=e128]
                        - generic [ref=e130]: Off Hand
                        - generic [ref=e131]:
                          - img
                          - text: Occupied — 2H Weapon
                      - generic [ref=e132]:
                        - img [ref=e133]
                        - text: Blocked by 2-handed weapon
                - generic [ref=e135]:
                  - heading "Armor" [level=4] [ref=e136]
                  - generic [ref=e137]:
                    - button "Head slot (empty)" [ref=e139]:
                      - generic [ref=e141]:
                        - img [ref=e142]
                        - generic [ref=e147]: Head
                      - generic [ref=e148]: Head
                    - 'button "Body slot: Civilian Shirt" [ref=e150]':
                      - generic [ref=e151]:
                        - generic [ref=e152]:
                          - img [ref=e153]
                          - generic [ref=e155]: Body
                        - button "Unequip Civilian Shirt" [ref=e156]:
                          - img [ref=e157]
                      - generic [ref=e160]:
                        - generic [ref=e161]: Civilian Shirt
                        - generic [ref=e162]: "Enchantments: 0/30"
                    - 'button "Hands slot: Civilian Gloves" [ref=e164]':
                      - generic [ref=e165]:
                        - generic [ref=e166]:
                          - img [ref=e167]
                          - generic [ref=e172]: Hands
                        - button "Unequip Civilian Gloves" [ref=e173]:
                          - img [ref=e174]
                      - generic [ref=e177]:
                        - generic [ref=e178]: Civilian Gloves
                        - generic [ref=e179]: "Enchantments: 0/20"
                    - 'button "Feet slot: Civilian Shoes" [ref=e181]':
                      - generic [ref=e182]:
                        - generic [ref=e183]:
                          - img [ref=e184]
                          - generic [ref=e187]: Feet
                        - button "Unequip Civilian Shoes" [ref=e188]:
                          - img [ref=e189]
                      - generic [ref=e192]:
                        - generic [ref=e193]: Civilian Shoes
                        - generic [ref=e194]: "Enchantments: 0/15"
                - generic [ref=e195]:
                  - heading "Accessories" [level=4] [ref=e196]
                  - generic [ref=e197]:
                    - button "Accessory 1 slot (empty)" [ref=e199]:
                      - generic [ref=e201]:
                        - img [ref=e202]
                        - generic [ref=e205]: Accessory 1
                      - generic [ref=e206]: Accessory 1
                    - button "Accessory 2 slot (empty)" [ref=e208]:
                      - generic [ref=e210]:
                        - img [ref=e211]
                        - generic [ref=e214]: Accessory 2
                      - generic [ref=e215]: Accessory 2
            - generic [ref=e216]:
              - heading "Equipment Inventory (0 items)" [level=3] [ref=e218]
              - status [ref=e219]: No unequipped items. Craft new gear in the Crafting tab.
            - generic [ref=e220]:
              - heading "Equipment Stats Summary" [level=3] [ref=e222]
              - generic [ref=e223]:
                - generic [ref=e224]:
                  - generic [ref=e225]: "4"
                  - generic [ref=e226]: Total Items
                - generic [ref=e227]:
                  - generic [ref=e228]: "4"
                  - generic [ref=e229]: Equipped
                - generic [ref=e230]:
                  - generic [ref=e231]: "0"
                  - generic [ref=e232]: In Inventory
                - generic [ref=e233]:
                  - generic [ref=e234]: "1"
                  - generic [ref=e235]: Total Enchantments
              - generic [ref=e236]:
                - heading "✨ Enchantment Power" [level=3] [ref=e238]
                - generic [ref=e239]:
                  - generic [ref=e240]:
                    - generic [ref=e241]: "Enchantment Power:"
                    - generic [ref=e242]: 1.00×
                  - paragraph [ref=e243]: Increases the power of all enchantments by 0%. Multiplier applied to all enchantment effects.
              - generic [ref=e244]:
                - generic [ref=e245]: "Active Effects from Equipment:"
                - generic [ref=e247]: No active effects
  - region "Notifications (F8)":
    - list
  - region "Notifications (F8)":
    - list
  - button "Open Next.js Dev Tools" [ref=e253] [cursor=pointer]:
    - img [ref=e254]
  - alert [ref=e257]
 ```
 # Test source
 ```ts
  1   | import { test, expect } from '@playwright/test';
  2   | 
  3   | /**
  4   |  * E2E tests for equipment management:
  5   |  * - Equipping items to slots
  6   |  * - 2-handed weapon blocking offhand slot
  7   |  * - Unequipping items back to inventory
  8   |  */
  9   | 
  10  | test.describe('Equipment Management', () => {
  11  |   test.beforeEach(async ({ page }) => {
  12  |     await page.goto('/');
  13  |     // Clear game state for a fresh start
  14  |     await page.evaluate(() => {
  15  |       Object.keys(localStorage)
  16  |         .filter((k) => k.startsWith('mana-loop-'))
  17  |         .forEach((k) => localStorage.removeItem(k));
  18  |     });
  19  |     await page.reload();
  20  |     await page.waitForLoadState('networkidle');
  21  |   });
  22  | 
  23  |   test('can navigate to Equipment tab', async ({ page }) => {
  24  |     // Use the tab with the shield icon to disambiguate
  25  |     const gearTab = page.getByRole('tab', { name: /🛡️ Gear/ });
  26  |     await expect(gearTab).toBeVisible();
  27  |     await gearTab.click();
  28  | 
  29  |     // Verify equipment UI elements
  30  |     const equippedGearHeading = page.locator('text="Equipped Gear"');
  31  |     await expect(equippedGearHeading).toBeVisible({ timeout: 5000 });
  32  |   });
  33  | 
  34  |   test('shows equipment slots with labels', async ({ page }) => {
  35  |     await page.goto('/');
  36  |     await page.evaluate(() => {
  37  |       Object.keys(localStorage)
  38  |         .filter((k) => k.startsWith('mana-loop-'))
  39  |         .forEach((k) => localStorage.removeItem(k));
  40  |     });
  41  |     await page.reload();
  42  |     await page.waitForLoadState('networkidle');
  43  | 
  44  |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
  45  | 
  46  |     // Check for expected slot labels - use role=heading or more specific selectors
  47  |     // Main Hand slot
  48  |     const mainHandSection = page.locator('text=Main Hand');
  49  |     await expect(mainHandSection.first()).toBeVisible();
  50  | 
  51  |     // Off Hand
  52  |     const offHandSection = page.locator('text=Off Hand');
  53  |     await expect(offHandSection.first()).toBeVisible();
  54  | 
  55  |     // Head
  56  |     const headSection = page.locator('text=Head');
  57  |     await expect(headSection.first()).toBeVisible();
  58  | 
  59  |     // Body
  60  |     const bodySection = page.locator('text=Body');
  61  |     await expect(bodySection.first()).toBeVisible();
  62  | 
  63  |     // Hands
  64  |     const handsSection = page.locator('text=Hands');
  65  |     await expect(handsSection.first()).toBeVisible();
  66  | 
  67  |     // Feet
  68  |     const feetSection = page.locator('text=Feet');
  69  |     await expect(feetSection.first()).toBeVisible();
  70  | 
  71  |     // Accessory 1 and 2
  72  |     const acc1Section = page.locator('text=Accessory 1');
  73  |     await expect(acc1Section.first()).toBeVisible();
  74  |     const acc2Section = page.locator('text=Accessory 2');
  75  |     await expect(acc2Section.first()).toBeVisible();
  76  |   });
  77  | 
  78  |   test('shows starting equipment already equipped', async ({ page }) => {
  79  |     await page.goto('/');
  80  |     await page.evaluate(() => {
  81  |       Object.keys(localStorage)
  82  |         .filter((k) => k.startsWith('mana-loop-'))
  83  |         .forEach((k) => localStorage.removeItem(k));
  84  |     });
  85  |     await page.reload();
  86  |     await page.waitForLoadState('networkidle');
  87  | 
  88  |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
  89  | 
  90  |     // The player starts with a Basic Staff in main hand (as an equipped item)
  91  |     const mainHandSlot = page.locator('text=Main Hand >> .. >> text=Basic Staff');
 > 92  |     await expect(mainHandSlot).toBeVisible({ timeout: 5000 });
      |                                ^ Error: expect(locator).toBeVisible() failed
  93  |   });
  94  | 
  95  |   test('2-handed weapon blocks offhand slot', async ({ page }) => {
  96  |     await page.goto('/');
  97  |     await page.evaluate(() => {
  98  |       Object.keys(localStorage)
  99  |         .filter((k) => k.startsWith('mana-loop-'))
  100 |         .forEach((k) => localStorage.removeItem(k));
  101 |     });
  102 |     await page.reload();
  103 |     await page.waitForLoadState('networkidle');
  104 | 
  105 |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
  106 | 
  107 |     // The starting basic staff is 2-handed
  108 |     // The offhand slot should show as blocked with "Occupied — 2H Weapon"
  109 |     const offHandBlocked = page.locator('text=Occupied').first();
  110 |     await expect(offHandBlocked).toBeVisible({ timeout: 5000 });
  111 |   });
  112 | 
  113 |   test('can unequip an item from a slot', async ({ page }) => {
  114 |     await page.goto('/');
  115 |     await page.evaluate(() => {
  116 |       Object.keys(localStorage)
  117 |         .filter((k) => k.startsWith('mana-loop-'))
  118 |         .forEach((k) => localStorage.removeItem(k));
  119 |     });
  120 |     await page.reload();
  121 |     await page.waitForLoadState('networkidle');
  122 | 
  123 |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
  124 | 
  125 |     // Find an equiped slot with an unequip button (the X button)
  126 |     // The hands slot has civilian gloves equipped
  127 |     const handsSlot = page.locator('text=Hands >> .. >> button').first();
  128 |     await expect(handsSlot).toBeVisible({ timeout: 5000 });
  129 |     // Note: exact behavior of unequip depends on implementation state
  130 |   });
  131 | });
 ```
@@ -0,0 +1,280 @@
 # Instructions
 - Following Playwright test failed.
 - Explain why, be concise, respect Playwright best practices.
 - Provide a snippet of code with the fix, if possible.
 # Test info
 - Name: enchanting.spec.ts >> Enchanting Flow >> can select equipment type and effect in Design stage
 - Location: e2e/enchanting.spec.ts:67:7
 # Error details
 ```
 Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
    1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
    2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
    3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
    4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
    5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
    6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
 Call log:
  - waiting for getByRole('button')
 ```
 # Page snapshot
 ```yaml
 - generic [ref=e1]:
  - generic [ref=e2]:
    - banner [ref=e3]:
      - generic [ref=e4]:
        - heading "MANA LOOP" [level=1] [ref=e5]
        - generic [ref=e7]:
          - generic [ref=e8]:
            - generic [ref=e9]: Day 1
            - generic [ref=e10]: 01:02
          - generic [ref=e11]:
            - generic [ref=e12]: "0"
            - generic [ref=e13]: Insight
    - main [ref=e14]:
      - generic [ref=e15]:
        - generic [ref=e17]:
          - generic [ref=e18]:
            - generic [ref=e19]:
              - generic [ref=e20]: "12"
              - generic [ref=e21]: / 100
            - generic [ref=e22]:
              - text: +2.3 mana/hr
              - generic [ref=e23]: (1.1x med)
          - progressbar [ref=e24]
          - button "Gather +1 Mana" [ref=e26]:
            - img
            - text: Gather +1 Mana
          - generic [ref=e27]:
            - button "Elemental Mana (1)" [ref=e28]:
              - generic [ref=e29]: Elemental Mana (1)
              - img [ref=e30]
            - generic [ref=e33]:
              - generic [ref=e34]:
                - generic [ref=e35]: 🔗
                - generic [ref=e36]: Transference
              - generic [ref=e39]: 0/10
        - button "Climb the Spire" [ref=e40]:
          - img
          - text: Climb the Spire
        - generic [ref=e42]:
          - generic [ref=e43]:
            - img [ref=e44]
            - generic [ref=e46]: Current Activity
          - generic [ref=e47]: Meditating
        - generic [ref=e48]:
          - generic [ref=e49]: "1"
          - generic [ref=e50]: "2"
          - generic [ref=e51]: "3"
          - generic [ref=e52]: "4"
          - generic [ref=e53]: "5"
          - generic [ref=e54]: "6"
          - generic [ref=e55]: "7"
          - generic [ref=e56]: "8"
          - generic [ref=e57]: "9"
          - generic [ref=e58]: "10"
          - generic [ref=e59]: "11"
          - generic [ref=e60]: "12"
          - generic [ref=e61]: "13"
          - generic [ref=e62]: "14"
          - generic [ref=e63]: "15"
          - generic [ref=e64]: "16"
          - generic [ref=e65]: "17"
          - generic [ref=e66]: "18"
          - generic [ref=e67]: "19"
          - generic [ref=e68]: "20"
          - generic [ref=e69]: "21"
          - generic [ref=e70]: "22"
          - generic [ref=e71]: "23"
          - generic [ref=e72]: "24"
          - generic [ref=e73]: "25"
          - generic [ref=e74]: "26"
          - generic [ref=e75]: "27"
          - generic [ref=e76]: "28"
          - generic [ref=e77]: "29"
          - generic [ref=e78]: "30"
      - generic [ref=e80]:
        - tablist [ref=e81]:
          - tab "⚔️ Spire" [ref=e82]
          - tab "✨ Attune" [ref=e83]
          - tab "🗿 Golems" [ref=e84]
          - tab "📚 Skills" [ref=e85]
          - tab "🔮 Spells" [ref=e86]
          - tab "🛡️ Gear" [ref=e87]
          - tab "🔧 Craft" [active] [selected] [ref=e88]
          - tab "💎 Loot" [ref=e89]
          - tab "🏆 Achieve" [ref=e90]
          - tab "📊 Stats" [ref=e91]
          - tab "🐛 Debug" [ref=e92]
          - tab "📖 Grimoire" [ref=e93]
        - tabpanel "🔧 Craft" [ref=e94]:
          - generic [ref=e95]:
            - generic [ref=e97]:
              - button "Fabricate" [ref=e98]:
                - img
                - text: Fabricate
              - button "Enchant" [ref=e99]:
                - img
                - text: Enchant
            - generic [ref=e100]:
              - generic [ref=e101]:
                - generic [ref=e103]:
                  - img [ref=e104]
                  - text: Available Blueprints
                - generic [ref=e113]:
                  - img [ref=e114]
                  - paragraph [ref=e118]: No blueprints discovered yet.
                  - paragraph [ref=e119]: Defeat guardians to find blueprints!
              - generic [ref=e120]:
                - generic [ref=e122]:
                  - img [ref=e123]
                  - text: Materials (0)
                - generic [ref=e131]:
                  - img [ref=e132]
                  - paragraph [ref=e134]: No materials collected yet.
                  - paragraph [ref=e135]: Defeat floors to gather materials!
  - region "Notifications (F8)":
    - list
  - region "Notifications (F8)":
    - list
  - button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
    - img [ref=e142]
  - alert [ref=e145]
 ```
 # Test source
 ```ts
  1   | import { test, expect } from '@playwright/test';
  2   | 
  3   | /**
  4   |  * E2E tests for the 3-step enchantment flow:
  5   |  * Design → Prepare → Apply
  6   |  *
  7   |  * These tests validate the core crafting loop works end-to-end.
  8   |  */
  9   | 
  10  | test.describe('Enchanting Flow', () => {
  11  |   /**
  12  |    * Before each test, ensure we start with a clean state.
  13  |    * The game persists state in localStorage, so we clear it.
  14  |    */
  15  |   test.beforeEach(async ({ page }) => {
  16  |     await page.goto('/');
  17  |     // Clear game state to ensure a fresh start
  18  |     await page.evaluate(() => {
  19  |       Object.keys(localStorage)
  20  |         .filter((k) => k.startsWith('mana-loop-'))
  21  |         .forEach((k) => localStorage.removeItem(k));
  22  |     });
  23  |     await page.reload();
  24  |     // Wait for the game to initialize
  25  |     await page.waitForLoadState('networkidle');
  26  |   });
  27  | 
  28  |   test('can navigate to Crafting tab', async ({ page }) => {
  29  |     // The tab bar contains a "Craft" tab
  30  |     const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
  31  |     await expect(craftTab).toBeVisible();
  32  |     await craftTab.click();
  33  | 
  34  |     // Verify we're on the crafting tab by checking for sub-tabs
  35  |     const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
  36  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
  37  |     await expect(fabricateBtn).toBeVisible();
  38  |     await expect(enchantBtn).toBeVisible();
  39  |   });
  40  | 
  41  |   test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
  42  |     await page.goto('/');
  43  |     await page.evaluate(() => {
  44  |       Object.keys(localStorage)
  45  |         .filter((k) => k.startsWith('mana-loop-'))
  46  |         .forEach((k) => localStorage.removeItem(k));
  47  |     });
  48  |     await page.reload();
  49  |     await page.waitForLoadState('networkidle');
  50  | 
  51  |     // Navigate to Crafting tab
  52  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
  53  | 
  54  |     // Click Enchant sub-tab
  55  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
  56  |     await enchantBtn.click();
  57  | 
  58  |     // Should see the design stage UI
  59  |     const designBtn = page.getByRole('button', { hasText: 'Design' });
  60  |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
  61  |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
  62  |     await expect(designBtn).toBeVisible();
  63  |     await expect(prepareBtn).toBeVisible();
  64  |     await expect(applyBtn).toBeVisible();
  65  |   });
  66  | 
  67  |   test('can select equipment type and effect in Design stage', async ({ page }) => {
  68  |     await page.goto('/');
  69  |     await page.evaluate(() => {
  70  |       Object.keys(localStorage)
  71  |         .filter((k) => k.startsWith('mana-loop-'))
  72  |         .forEach((k) => localStorage.removeItem(k));
  73  |     });
  74  |     await page.reload();
  75  |     await page.waitForLoadState('networkidle');
  76  | 
  77  |     // Navigate to Crafting > Enchant > Design
  78  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
 > 79  |     await page.getByRole('button', { hasText: 'Enchant' }).click();
      |                                                            ^ Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
  80  | 
  81  |     // The design section should show effect selectors once an equipment type is chosen
  82  |     // Look for any element matching equipment type buttons and effect-related content
  83  |     const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
  84  |     const count = await equipmentButtons.count();
  85  |     expect(count).toBeGreaterThan(0);
  86  |   });
  87  | 
  88  |   test('can navigate through all 3 enchant stages', async ({ page }) => {
  89  |     await page.goto('/');
  90  |     await page.evaluate(() => {
  91  |       Object.keys(localStorage)
  92  |         .filter((k) => k.startsWith('mana-loop-'))
  93  |         .forEach((k) => localStorage.removeItem(k));
  94  |     });
  95  |     await page.reload();
  96  |     await page.waitForLoadState('networkidle');
  97  | 
  98  |     // Navigate to Crafting > Enchant
  99  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
  100 |     await page.getByRole('button', { hasText: 'Enchant' }).click();
  101 | 
  102 |     // Verify Design stage is active
  103 |     const designBtn = page.getByRole('button', { hasText: 'Design' });
  104 |     await expect(designBtn).toBeVisible();
  105 | 
  106 |     // Switch to Prepare stage
  107 |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
  108 |     await prepareBtn.click();
  109 | 
  110 |     // Should see preparation UI
  111 |     const prepareHeading = page.locator('text=Select Equipment to Prepare');
  112 |     await expect(prepareHeading).toBeVisible({ timeout: 5000 });
  113 | 
  114 |     // Switch to Apply stage
  115 |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
  116 |     await applyBtn.click();
  117 | 
  118 |     // Should see application UI
  119 |     const applyHeading = page.locator('text=Select Equipment & Design');
  120 |     await expect(applyHeading).toBeVisible({ timeout: 5000 });
  121 |   });
  122 | });
 ```
@@ -0,0 +1,280 @@
 # Instructions
 - Following Playwright test failed.
 - Explain why, be concise, respect Playwright best practices.
 - Provide a snippet of code with the fix, if possible.
 # Test info
 - Name: enchanting.spec.ts >> Enchanting Flow >> can navigate through all 3 enchant stages
 - Location: e2e/enchanting.spec.ts:88:7
 # Error details
 ```
 Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
    1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
    2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
    3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
    4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
    5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
    6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
 Call log:
  - waiting for getByRole('button')
 ```
 # Page snapshot
 ```yaml
 - generic [ref=e1]:
  - generic [ref=e2]:
    - banner [ref=e3]:
      - generic [ref=e4]:
        - heading "MANA LOOP" [level=1] [ref=e5]
        - generic [ref=e7]:
          - generic [ref=e8]:
            - generic [ref=e9]: Day 1
            - generic [ref=e10]: 00:55
          - generic [ref=e11]:
            - generic [ref=e12]: "0"
            - generic [ref=e13]: Insight
    - main [ref=e14]:
      - generic [ref=e15]:
        - generic [ref=e17]:
          - generic [ref=e18]:
            - generic [ref=e19]:
              - generic [ref=e20]: "11"
              - generic [ref=e21]: / 100
            - generic [ref=e22]:
              - text: +2.2 mana/hr
              - generic [ref=e23]: (1.1x med)
          - progressbar [ref=e24]
          - button "Gather +1 Mana" [ref=e26]:
            - img
            - text: Gather +1 Mana
          - generic [ref=e27]:
            - button "Elemental Mana (1)" [ref=e28]:
              - generic [ref=e29]: Elemental Mana (1)
              - img [ref=e30]
            - generic [ref=e33]:
              - generic [ref=e34]:
                - generic [ref=e35]: 🔗
                - generic [ref=e36]: Transference
              - generic [ref=e39]: 0/10
        - button "Climb the Spire" [ref=e40]:
          - img
          - text: Climb the Spire
        - generic [ref=e42]:
          - generic [ref=e43]:
            - img [ref=e44]
            - generic [ref=e46]: Current Activity
          - generic [ref=e47]: Meditating
        - generic [ref=e48]:
          - generic [ref=e49]: "1"
          - generic [ref=e50]: "2"
          - generic [ref=e51]: "3"
          - generic [ref=e52]: "4"
          - generic [ref=e53]: "5"
          - generic [ref=e54]: "6"
          - generic [ref=e55]: "7"
          - generic [ref=e56]: "8"
          - generic [ref=e57]: "9"
          - generic [ref=e58]: "10"
          - generic [ref=e59]: "11"
          - generic [ref=e60]: "12"
          - generic [ref=e61]: "13"
          - generic [ref=e62]: "14"
          - generic [ref=e63]: "15"
          - generic [ref=e64]: "16"
          - generic [ref=e65]: "17"
          - generic [ref=e66]: "18"
          - generic [ref=e67]: "19"
          - generic [ref=e68]: "20"
          - generic [ref=e69]: "21"
          - generic [ref=e70]: "22"
          - generic [ref=e71]: "23"
          - generic [ref=e72]: "24"
          - generic [ref=e73]: "25"
          - generic [ref=e74]: "26"
          - generic [ref=e75]: "27"
          - generic [ref=e76]: "28"
          - generic [ref=e77]: "29"
          - generic [ref=e78]: "30"
      - generic [ref=e80]:
        - tablist [ref=e81]:
          - tab "⚔️ Spire" [ref=e82]
          - tab "✨ Attune" [ref=e83]
          - tab "🗿 Golems" [ref=e84]
          - tab "📚 Skills" [ref=e85]
          - tab "🔮 Spells" [ref=e86]
          - tab "🛡️ Gear" [ref=e87]
          - tab "🔧 Craft" [active] [selected] [ref=e88]
          - tab "💎 Loot" [ref=e89]
          - tab "🏆 Achieve" [ref=e90]
          - tab "📊 Stats" [ref=e91]
          - tab "🐛 Debug" [ref=e92]
          - tab "📖 Grimoire" [ref=e93]
        - tabpanel "🔧 Craft" [ref=e94]:
          - generic [ref=e95]:
            - generic [ref=e97]:
              - button "Fabricate" [ref=e98]:
                - img
                - text: Fabricate
              - button "Enchant" [ref=e99]:
                - img
                - text: Enchant
            - generic [ref=e100]:
              - generic [ref=e101]:
                - generic [ref=e103]:
                  - img [ref=e104]
                  - text: Available Blueprints
                - generic [ref=e113]:
                  - img [ref=e114]
                  - paragraph [ref=e118]: No blueprints discovered yet.
                  - paragraph [ref=e119]: Defeat guardians to find blueprints!
              - generic [ref=e120]:
                - generic [ref=e122]:
                  - img [ref=e123]
                  - text: Materials (0)
                - generic [ref=e131]:
                  - img [ref=e132]
                  - paragraph [ref=e134]: No materials collected yet.
                  - paragraph [ref=e135]: Defeat floors to gather materials!
  - region "Notifications (F8)":
    - list
  - region "Notifications (F8)":
    - list
  - button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
    - img [ref=e142]
  - alert [ref=e145]
 ```
 # Test source
 ```ts
  1   | import { test, expect } from '@playwright/test';
  2   | 
  3   | /**
  4   |  * E2E tests for the 3-step enchantment flow:
  5   |  * Design → Prepare → Apply
  6   |  *
  7   |  * These tests validate the core crafting loop works end-to-end.
  8   |  */
  9   | 
  10  | test.describe('Enchanting Flow', () => {
  11  |   /**
  12  |    * Before each test, ensure we start with a clean state.
  13  |    * The game persists state in localStorage, so we clear it.
  14  |    */
  15  |   test.beforeEach(async ({ page }) => {
  16  |     await page.goto('/');
  17  |     // Clear game state to ensure a fresh start
  18  |     await page.evaluate(() => {
  19  |       Object.keys(localStorage)
  20  |         .filter((k) => k.startsWith('mana-loop-'))
  21  |         .forEach((k) => localStorage.removeItem(k));
  22  |     });
  23  |     await page.reload();
  24  |     // Wait for the game to initialize
  25  |     await page.waitForLoadState('networkidle');
  26  |   });
  27  | 
  28  |   test('can navigate to Crafting tab', async ({ page }) => {
  29  |     // The tab bar contains a "Craft" tab
  30  |     const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
  31  |     await expect(craftTab).toBeVisible();
  32  |     await craftTab.click();
  33  | 
  34  |     // Verify we're on the crafting tab by checking for sub-tabs
  35  |     const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
  36  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
  37  |     await expect(fabricateBtn).toBeVisible();
  38  |     await expect(enchantBtn).toBeVisible();
  39  |   });
  40  | 
  41  |   test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
  42  |     await page.goto('/');
  43  |     await page.evaluate(() => {
  44  |       Object.keys(localStorage)
  45  |         .filter((k) => k.startsWith('mana-loop-'))
  46  |         .forEach((k) => localStorage.removeItem(k));
  47  |     });
  48  |     await page.reload();
  49  |     await page.waitForLoadState('networkidle');
  50  | 
  51  |     // Navigate to Crafting tab
  52  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
  53  | 
  54  |     // Click Enchant sub-tab
  55  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
  56  |     await enchantBtn.click();
  57  | 
  58  |     // Should see the design stage UI
  59  |     const designBtn = page.getByRole('button', { hasText: 'Design' });
  60  |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
  61  |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
  62  |     await expect(designBtn).toBeVisible();
  63  |     await expect(prepareBtn).toBeVisible();
  64  |     await expect(applyBtn).toBeVisible();
  65  |   });
  66  | 
  67  |   test('can select equipment type and effect in Design stage', async ({ page }) => {
  68  |     await page.goto('/');
  69  |     await page.evaluate(() => {
  70  |       Object.keys(localStorage)
  71  |         .filter((k) => k.startsWith('mana-loop-'))
  72  |         .forEach((k) => localStorage.removeItem(k));
  73  |     });
  74  |     await page.reload();
  75  |     await page.waitForLoadState('networkidle');
  76  | 
  77  |     // Navigate to Crafting > Enchant > Design
  78  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
  79  |     await page.getByRole('button', { hasText: 'Enchant' }).click();
  80  | 
  81  |     // The design section should show effect selectors once an equipment type is chosen
  82  |     // Look for any element matching equipment type buttons and effect-related content
  83  |     const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
  84  |     const count = await equipmentButtons.count();
  85  |     expect(count).toBeGreaterThan(0);
  86  |   });
  87  | 
  88  |   test('can navigate through all 3 enchant stages', async ({ page }) => {
  89  |     await page.goto('/');
  90  |     await page.evaluate(() => {
  91  |       Object.keys(localStorage)
  92  |         .filter((k) => k.startsWith('mana-loop-'))
  93  |         .forEach((k) => localStorage.removeItem(k));
  94  |     });
  95  |     await page.reload();
  96  |     await page.waitForLoadState('networkidle');
  97  | 
  98  |     // Navigate to Crafting > Enchant
  99  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
 > 100 |     await page.getByRole('button', { hasText: 'Enchant' }).click();
      |                                                            ^ Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
  101 | 
  102 |     // Verify Design stage is active
  103 |     const designBtn = page.getByRole('button', { hasText: 'Design' });
  104 |     await expect(designBtn).toBeVisible();
  105 | 
  106 |     // Switch to Prepare stage
  107 |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
  108 |     await prepareBtn.click();
  109 | 
  110 |     // Should see preparation UI
  111 |     const prepareHeading = page.locator('text=Select Equipment to Prepare');
  112 |     await expect(prepareHeading).toBeVisible({ timeout: 5000 });
  113 | 
  114 |     // Switch to Apply stage
  115 |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
  116 |     await applyBtn.click();
  117 | 
  118 |     // Should see application UI
  119 |     const applyHeading = page.locator('text=Select Equipment & Design');
  120 |     await expect(applyHeading).toBeVisible({ timeout: 5000 });
  121 |   });
  122 | });
 ```
@@ -0,0 +1,22 @@
 import { defineConfig, devices } from '@playwright/test';
 export default defineConfig({
  testDir: 'e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
 });
@@ -1,32 +0,0 @@
 // This is your Prisma schema file,
 // learn more about it in the docs: https://pris.ly/d/prisma-schema
 // Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
 // Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
 generator client {
  provider = "prisma-client-js"
 }
 datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
 }
 model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
 }
 model Post {
  id        String   @id @default(cuid())
  title     String
  content   String?
  published Boolean  @default(false)
  authorId  String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
 }
@@ -1,5 +0,0 @@
 import { NextResponse } from "next/server";
 export async function GET() {
  return NextResponse.json({ message: "Hello, world!" });
 }
@@ -0,0 +1,63 @@
 'use client';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { fmt } from '@/lib/game/stores';
 import { useGameStore } from '@/lib/game/stores';
 interface GameOverScreenProps {
  day: number;
  hour: number;
  insightGained: number;
  totalInsight: number;
 }
 export function GameOverScreen({ day, hour, insightGained, totalInsight }: GameOverScreenProps) {
  const startNewLoop = () => {
    useGameStore.getState().startNewLoop();
  };
  return (
    <div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
      <Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
        <CardHeader>
          <CardTitle className="text-3xl text-center game-title text-amber-400">
            LOOP ENDS
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-center text-gray-400">
            The time loop resets... but you remember.
          </p>
          <div className="grid grid-cols-2 gap-3">
            <div className="p-3 bg-gray-800 rounded">
              <div className="text-xl font-bold text-amber-400 game-mono">{fmt(insightGained)}</div>
              <div className="text-xs text-gray-400">Insight Gained</div>
            </div>
            <div className="p-3 bg-gray-800 rounded">
              <div className="text-xl font-bold text-blue-400 game-mono">{day}</div>
              <div className="text-xs text-gray-400">Day Reached</div>
            </div>
            <div className="p-3 bg-gray-800 rounded">
              <div className="text-xl font-bold text-purple-400 game-mono">{hour}</div>
              <div className="text-xs text-gray-400">Hour</div>
            </div>
            <div className="p-3 bg-gray-800 rounded">
              <div className="text-xl font-bold text-green-400 game-mono">{fmt(totalInsight)}</div>
              <div className="text-xs text-gray-400">Total Insight</div>
            </div>
          </div>
          <Button
            className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
            size="lg"
            onClick={startNewLoop}
          >
            Begin New Loop
          </Button>
        </CardContent>
      </Card>
    </div>
  );
 }
@@ -0,0 +1,77 @@
 'use client';
 import { useState, useEffect } from 'react';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Badge } from '@/components/ui/badge';
 import { DebugName } from '@/components/game/debug/debug-context';
 import { SPELLS_DEF } from '@/lib/game/constants';
 import type { SpellDef } from '@/lib/game/types';
 export function GrimoireTab() {
  const [grimoireSpells, setGrimoireSpells] = useState<[string, SpellDef][]>([]);
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    if (typeof window !== 'undefined' && SPELLS_DEF) {
      setGrimoireSpells(
        Object.entries(SPELLS_DEF).filter((entry): entry is [string, SpellDef] => !!entry[1].grimoire)
      );
    }
    setLoaded(true);
  }, []);
  if (!loaded) {
    return <div className="p-4 text-center text-gray-400">Loading grimoire...</div>;
  }
  if (grimoireSpells.length === 0) {
    return (
      <div className="p-4 text-center text-gray-400">
        No grimoire spells available yet. Defeat guardians to unlock spells.
      </div>
    );
  }
  const availablePages = Math.ceil(grimoireSpells.length / 12);
  return (
    <DebugName name="GrimoireTab">
      <div className="space-y-4">
        <div className="text-sm text-gray-400">
          <p className="mb-2">A vast tome of arcane knowledge. Study carefully — each spell costs insight to transcribe into your repertoire.</p>
          <p>Available pages: {availablePages}. Spells in grimoire: {grimoireSpells.length}.</p>
        </div>
        <ScrollArea className="h-[600px] rounded border border-gray-700 p-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {grimoireSpells.map(([id, spell]) => (
              <div
                key={id}
                className="p-4 bg-gray-800/50 rounded border border-gray-600 hover:border-gray-500 transition-colors"
              >
                <div className="flex items-start justify-between mb-2">
                  <span className="font-bold text-gray-100">{spell.name}</span>
                  <Badge variant="outline" className="border-gray-600">
                    {spell.elem}
                  </Badge>
                </div>
                {spell.desc && <p className="text-sm text-gray-400 mb-3">{spell.desc}</p>}
                <div className="text-xs text-gray-500 space-y-1">
                  <div>Cost: {spell.cost.amount} {
                    spell.cost.type === 'element'
                      ? spell.cost.element
                      : 'raw mana'
                  }</div>
                  <div>Power: {spell.dmg}</div>
                  {spell.effects && spell.effects.length > 0 && (
                    <div>Effects: {spell.effects.map(e => e.type).join(', ')}</div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>
    </DebugName>
  );
 }
@@ -0,0 +1,126 @@
 'use client';
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Mountain } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { ManaDisplay } from '@/components/game';
 import { ActionButtons } from '@/components/game';
 import { AttunementStatus } from '@/components/game/AttunementStatus';
 import { ActivityLogPanel } from '@/components/game/ActivityLogPanel';
 import { DebugName } from '@/components/game/debug/debug-context';
 import { useGameStore, useManaStore, useCombatStore, useCraftingStore, usePrestigeStore } from '@/lib/game/stores';
 import { computeDisciplineEffects } from '@/lib/game/effects/discipline-effects';
 import { getUnifiedEffects } from '@/lib/game/effects';
 import { getMeditationBonus, getIncursionStrength } from '@/lib/game/stores';
 import { computeTotalMaxMana, computeTotalRegen, computeTotalClickMana } from '@/lib/game/effects';
 export function LeftPanel() {
  const [isGathering, setIsGathering] = useState(false);
  const rawMana = useManaStore((s) => s.rawMana);
  const elements = useManaStore((s) => s.elements);
  const meditateTicks = useManaStore((s) => s.meditateTicks);
  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
  const equippedInstances = useCraftingStore((s) => s.equippedInstances);
  const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
  const gatherMana = useGameStore((s) => s.gatherMana);
  const spireMode = useCombatStore((s) => s.spireMode);
  const enterSpireMode = useCombatStore((s) => s.enterSpireMode);
  const currentAction = useCombatStore((s) => s.currentAction);
  const designProgress = useCraftingStore((s) => s.designProgress);
  const designProgress2 = useCraftingStore((s) => s.designProgress2);
  const preparationProgress = useCraftingStore((s) => s.preparationProgress);
  const applicationProgress = useCraftingStore((s) => s.applicationProgress);
  const equipmentCraftingProgress = useCraftingStore((s) => s.equipmentCraftingProgress);
  const handleGatherStart = () => { setIsGathering(true); gatherMana(); };
  const handleGatherEnd = () => { setIsGathering(false); };
  useEffect(() => {
    if (!isGathering) return;
    let lastGatherTime = 0;
    const minGatherInterval = 100;
    let animationFrameId: number;
    const gatherLoop = (timestamp: number) => {
      if (timestamp - lastGatherTime >= minGatherInterval) {
        gatherMana();
        lastGatherTime = timestamp;
      }
      animationFrameId = requestAnimationFrame(gatherLoop);
    };
    animationFrameId = requestAnimationFrame(gatherLoop);
    return () => cancelAnimationFrame(animationFrameId);
  }, [isGathering, gatherMana]);
  const upgradeEffects = getUnifiedEffects({ skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances });
  const maxMana = computeTotalMaxMana({ skills: {}, prestigeUpgrades, skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances }, upgradeEffects);
  const baseRegen = computeTotalRegen({ skills: {}, prestigeUpgrades, skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances }, upgradeEffects);
  const clickMana = computeTotalClickMana({ skills: {}, skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances }, upgradeEffects);
  const meditationMultiplier = getMeditationBonus(meditateTicks, {}, upgradeEffects.meditationEfficiency);
  const incursionStrength = getIncursionStrength(useGameStore((s) => s.day), useGameStore((s) => s.hour));
  const effectiveRegen = baseRegen * (1 - incursionStrength) * meditationMultiplier;
  return (
    <div className="md:w-80 space-y-3 flex-shrink-0 p-1">
      {/* 1. Mana Display */}
      <DebugName name="ManaDisplay">
        <ManaDisplay
          rawMana={rawMana}
          maxMana={maxMana}
          effectiveRegen={effectiveRegen}
          meditationMultiplier={meditationMultiplier}
          clickMana={clickMana}
          isGathering={isGathering}
          onGatherStart={handleGatherStart}
          onGatherEnd={handleGatherEnd}
          elements={elements}
        />
      </DebugName>
      {/* 2. Spire Entry */}
      {!spireMode && (
        <DebugName name="ClimbSpireButton">
          <Button className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-600 text-white" size="lg" onClick={enterSpireMode}>
            <Mountain className="w-5 h-5 mr-2" />
            Climb the Spire
          </Button>
        </DebugName>
      )}
      {/* 3. Current Action */}
      {!spireMode && (
        <DebugName name="ActionButtons">
          <Card className="bg-[var(--bg-surface)] border-[var(--border-subtle)]">
            <CardContent className="pt-3">
              <ActionButtons
                currentAction={currentAction}
                designProgress={designProgress}
                designProgress2={designProgress2}
                preparationProgress={preparationProgress}
                applicationProgress={applicationProgress}
                equipmentCraftingProgress={equipmentCraftingProgress}
              />
            </CardContent>
          </Card>
        </DebugName>
      )}
      {/* 4. Attunement Status */}
      {!spireMode && (
        <DebugName name="AttunementStatus">
          <Card className="bg-[var(--bg-surface)] border-[var(--border-subtle)]">
            <CardContent className="pt-3">
              <AttunementStatus />
            </CardContent>
          </Card>
        </DebugName>
      )}
      {/* 5. Activity Log */}
      <DebugName name="ActivityLogPanel">
        <ActivityLogPanel />
      </DebugName>
    </div>
  );
 }
@@ -1,136 +1,163 @@
-@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-destructive: var(--destructive);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
 }
 :root {
-  --radius: 0.625rem;
+  --radius: 0.5rem;
  --background: #060811;
  --foreground: #c8d8f8;
  --card: #0C1020;
  --card-foreground: #c8d8f8;
  --popover: #111628;
  --popover-foreground: #c8d8f8;
  --primary: #3B6FE8;
  --primary-foreground: #ffffff;
  --secondary: #1e2a45;
  --secondary-foreground: #c8d8f8;
  --muted: #181f35;
  --muted-foreground: #7a92c0;
  --accent: #2a3a60;
  --accent-foreground: #c8d8f8;
  --destructive: #C0392B;
  --border: #1e2a45;
  --input: #1e2a45;
  --ring: #3B6FE8;
  --chart-1: #FF6B35;
  --chart-2: #4ECDC4;
  --chart-3: #9B59B6;
  --chart-4: #2ECC71;
  --chart-5: #FFD700;
  --sidebar: #0C1020;
  --sidebar-foreground: #c8d8f8;
  --sidebar-primary: #D4A843;
  --sidebar-primary-foreground: #0C1020;
  --sidebar-accent: #1e2a45;
  --sidebar-accent-foreground: #c8d8f8;
  --sidebar-border: #1e2a45;
  --sidebar-ring: #D4A843;
-  /* Game-specific colors */
+  /* === Background Colors (Depth Levels) === */
-  --game-bg: #060811;
+  --bg-base: #060811;
-  --game-bg1: #0C1020;
+  --bg-surface: #0C1020;
-  --game-bg2: #111628;
+  --bg-elevated: #111628;
-  --game-bg3: #181f35;
+  --bg-sunken: #181f35;
-  --game-border: #1e2a45;
+  
-  --game-border2: #2a3a60;
+  /* === Border Colors === */
-  --game-text: #c8d8f8;
+  --border-subtle: #1e2a45;
-  --game-text2: #7a92c0;
+  --border-default: #2a3a60;
-  --game-text3: #4a5f8a;
+  --border-focus: #5B8FFF;
-  --game-gold: #D4A843;
+  
  /* === Text Colors === */
  --text-primary: #c8d8f8;
  --text-secondary: #7a92c0;
  --text-muted: #4a5f8a;
  --text-disabled: #2a3a60;
  /* === Mana Element Colors === */
  --mana-fire: #E8734A;
  --mana-water: #3BAFDA;
  --mana-air: #C8D8F8;
  --mana-earth: #B8860B;
  --mana-light: #D4A843;
  --mana-dark: #4B0082;
  --mana-death: #8B7D8B;
  --mana-transfer: #00CED1;
  --mana-metal: #708090;
  --mana-sand: #C2B280;
  --mana-lightning: #FFD700;
  --mana-crystal: #B0E0E6;
  --mana-stellar: #FF8C00;
  --mana-void: #1A0A2E;
  /* === Semantic UI Colors === */
  --color-success: #27AE60;
  --color-warning: #F39C12;
  --color-danger: #C0392B;
  --color-info: #3B6FE8;
  /* === Rarity Colors === */
  --rarity-common: #9CA3AF;
  --rarity-common-glow: rgba(156, 163, 175, 0.25);
  --rarity-uncommon: #22C55E;
  --rarity-uncommon-glow: rgba(34, 197, 94, 0.25);
  --rarity-rare: #3B82F6;
  --rarity-rare-glow: rgba(59, 130, 246, 0.25);
  --rarity-epic: #A855F7;
  --rarity-epic-glow: rgba(168, 85, 247, 0.25);
  --rarity-legendary: #F59E0B;
  --rarity-legendary-glow: rgba(245, 158, 11, 0.375);
  --rarity-mythic: #E8734A;
  --rarity-mythic-glow: rgba(232, 115, 74, 0.25);
  /* === Interactive Colors === */
  --interactive-primary: #3B6FE8;
  --interactive-primary-hover: #5B8FFF;
  --interactive-secondary: #2a3a60;
  --interactive-secondary-hover: #3a4a70;
  --interactive-danger: #C0392B;
  --interactive-danger-hover: #E74C3C;
  --interactive-disabled: #1e2a45;
  /* === Typography === */
  --font-display: 'Cinzel', serif;
  --font-body: 'Source Serif 4', 'Crimson Text', Georgia, serif;
  --font-ui: 'JetBrains Mono', monospace;
  /* === Shadow System === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-glow-gold: 0 0 15px rgba(212, 168, 67, 0.4);
  --shadow-glow-purple: 0 0 15px rgba(124, 92, 191, 0.4);
  --shadow-glow-accent: 0 0 15px rgba(60, 111, 232, 0.4);
  /* === Mana Loop Design Tokens (Strategy Spec) === */
  --bg-void: #0d0d0f;
  --bg-panel: #141418;
  --bg-raised: #242430;
  --mana-raw: #8b7fd4;
  --mana-transference: #1abc9c;
  --border-accent: rgba(255, 255, 255, 0.22);
  /* === Legacy Shadcn Variables (mapped to new system) === */
  --background: var(--bg-base);
  --foreground: var(--text-primary);
  --card: var(--bg-surface);
  --card-foreground: var(--text-primary);
  --popover: var(--bg-elevated);
  --popover-foreground: var(--text-primary);
  --primary: var(--interactive-primary);
  --primary-foreground: #ffffff;
  --secondary: var(--bg-sunken);
  --secondary-foreground: var(--text-primary);
  --muted: var(--bg-sunken);
  --muted-foreground: var(--text-secondary);
  --accent: var(--interactive-secondary);
  --accent-foreground: var(--text-primary);
  --destructive: var(--color-danger);
  --border: var(--border-subtle);
  --input: var(--border-subtle);
  --ring: var(--border-focus);
  --chart-1: var(--mana-fire);
  --chart-2: var(--mana-water);
  --chart-3: var(--mana-light);
  --chart-4: var(--color-success);
  --chart-5: var(--mana-lightning);
  --sidebar: var(--bg-surface);
  --sidebar-foreground: var(--text-primary);
  --sidebar-primary: var(--mana-light);
  --sidebar-primary-foreground: #0C1020;
  --sidebar-accent: var(--interactive-secondary);
  --sidebar-accent-foreground: var(--text-primary);
  --sidebar-border: var(--border-subtle);
  --sidebar-ring: var(--mana-light);
  /* Legacy game colors (kept for compatibility) */
  --game-bg: var(--bg-base);
  --game-bg1: var(--bg-surface);
  --game-bg2: var(--bg-elevated);
  --game-bg3: var(--bg-sunken);
  --game-border: var(--border-subtle);
  --game-border2: var(--border-default);
  --game-text: var(--text-primary);
  --game-text2: var(--text-secondary);
  --game-text3: var(--text-muted);
  --game-gold: var(--mana-light);
  --game-gold2: #A87830;
  --game-purple: #7C5CBF;
  --game-purpleL: #A07EE0;
-  --game-accent: #3B6FE8;
+  --game-accent: var(--interactive-primary);
-  --game-accentL: #5B8FFF;
+  --game-accentL: var(--interactive-primary-hover);
-  --game-danger: #C0392B;
+  --game-danger: var(--color-danger);
-  --game-success: #27AE60;
+  --game-success: var(--color-success);
 }
 .dark {
  --background: #060811;
  --foreground: #c8d8f8;
  --card: #0C1020;
  --card-foreground: #c8d8f8;
  --popover: #111628;
  --popover-foreground: #c8d8f8;
  --primary: #5B8FFF;
  --primary-foreground: #ffffff;
  --secondary: #1e2a45;
  --secondary-foreground: #c8d8f8;
  --muted: #181f35;
  --muted-foreground: #7a92c0;
  --accent: #2a3a60;
  --accent-foreground: #c8d8f8;
  --destructive: #C0392B;
  --border: #1e2a45;
  --input: #1e2a45;
  --ring: #5B8FFF;
  --chart-1: #FF6B35;
  --chart-2: #4ECDC4;
  --chart-3: #9B59B6;
  --chart-4: #2ECC71;
  --chart-5: #FFD700;
  --sidebar: #0C1020;
  --sidebar-foreground: #c8d8f8;
  --sidebar-primary: #D4A843;
  --sidebar-primary-foreground: #0C1020;
  --sidebar-accent: #1e2a45;
  --sidebar-accent-foreground: #c8d8f8;
  --sidebar-border: #1e2a45;
  --sidebar-ring: #D4A843;
 }
@layer base {
@@ -139,13 +166,13 @@
  }
  body {
    @apply bg-background text-foreground;
-    font-family: 'Crimson Text', Georgia, serif;
+    font-family: var(--font-body);
  }
 }
 /* Game-specific styles */
 .game-root {
-  font-family: 'Crimson Text', Georgia, serif;
+  font-family: var(--font-body);
  background: var(--game-bg);
  color: var(--game-text);
  min-height: 100vh;
@@ -159,7 +186,7 @@
 }
 .game-title {
-  font-family: 'Cinzel', serif;
+  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--game-gold) 0%, var(--game-purpleL) 50%, var(--game-accentL) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
@@ -167,13 +194,13 @@
 }
 .game-panel-title {
-  font-family: 'Cinzel', serif;
+  font-family: var(--font-display);
  letter-spacing: 2px;
  text-transform: uppercase;
 }
 .game-mono {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-ui);
 }
 /* Scrollbar */
@@ -218,6 +245,25 @@
  box-shadow: 0 0 15px rgba(60, 111, 232, 0.4);
 }
 /* Gather button glow animation */
@keyframes gather-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(59, 111, 232, 0.3), 0 0 10px rgba(59, 111, 232, 0.2);
  }
  50% {
    box-shadow: 0 0 15px rgba(59, 111, 232, 0.5), 0 0 25px rgba(59, 111, 232, 0.3);
  }
 }
 .animate-gather-glow {
  animation: gather-glow 2s ease-in-out infinite;
 }
 /* Active scale effect for buttons - using CSS only */
 .active\:scale-95:active {
  transform: scale(0.95);
 }
 /* Button hover effects */
 .btn-game {
  transition: all 0.2s ease;
@@ -1,38 +1,25 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import localFont from "next/font/local";
 import "./globals.css";
 import { Toaster } from "@/components/ui/toaster";
 import { GameToaster } from "@/components/game/GameToast";
 import { DebugProvider } from "@/components/game/debug/debug-context";
-const geistSans = Geist({
+const geistSans = localFont({
-  variable: "--font-geist-sans",
+  src: '../../public/fonts/GeistVF.woff',
-  subsets: ["latin"],
+  variable: '--font-geist-sans',
 });
-const geistMono = Geist_Mono({
+const geistMono = localFont({
-  variable: "--font-geist-mono",
+  src: '../../public/fonts/GeistMonoVF.woff',
-  subsets: ["latin"],
+  variable: '--font-geist-mono',
 });
 export const metadata: Metadata = {
-  title: "Z.ai Code Scaffold - AI-Powered Development",
+  title: "Mana Loop",
-  description: "Modern Next.js scaffold optimized for AI-powered development with Z.ai. Built with TypeScript, Tailwind CSS, and shadcn/ui.",
+  description: "A time-loop incremental game where you climb the Spire and sign pacts with guardians.",
-  keywords: ["Z.ai", "Next.js", "TypeScript", "Tailwind CSS", "shadcn/ui", "AI development", "React"],
+  keywords: ["Mana Loop", "incremental game", "idle game", "time loop"],
-  authors: [{ name: "Z.ai Team" }],
+  authors: [{ name: "Mana Loop Team" }],
  icons: {
    icon: "https://z-cdn.chatglm.cn/z-ai/static/logo.svg",
  },
  openGraph: {
    title: "Z.ai Code Scaffold",
    description: "AI-powered development with modern React stack",
    url: "https://chat.z.ai",
    siteName: "Z.ai",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Z.ai Code Scaffold",
    description: "AI-powered development with modern React stack",
  },
 };
 export default function RootLayout({
@@ -45,8 +32,11 @@ export default function RootLayout({
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
      >
-        {children}
+        <DebugProvider>
-        <Toaster />
+          {children}
          <Toaster />
          <GameToaster />
        </DebugProvider>
      </body>
    </html>
  );
@@ -0,0 +1,48 @@
 'use client';
 import { Component, ReactNode } from 'react';
 interface ErrorBoundaryProps {
  children: ReactNode;
  fallback?: ReactNode;
  onReset?: () => void;
 }
 interface ErrorBoundaryState {
  hasError: boolean;
  error?: Error;
 }
 export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error };
  }
  render() {
    if (this.state.hasError) {
      if (this.props.fallback) return this.props.fallback;
      return (
        <div className="p-4 bg-red-900/20 border border-red-600/50 rounded">
          <h3 className="text-red-400 font-bold mb-2">Something went wrong:</h3>
          <pre className="text-xs text-red-300">{this.state.error?.message}</pre>
          <pre className="text-xs text-gray-500 mt-2">{this.state.error?.stack}</pre>
          {this.props.onReset && (
            <button
              onClick={this.props.onReset}
              className="mt-3 px-3 py-1 bg-red-700 hover:bg-red-600 text-white text-xs rounded"
            >
              Reset &amp; Recover
            </button>
          )}
        </div>
      );
    }
    return this.props.children;
  }
 }
@@ -1,175 +0,0 @@
 'use client';
 import { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Progress } from '@/components/ui/progress';
 import { Trophy, Lock, CheckCircle, ChevronDown, ChevronUp } from 'lucide-react';
 import type { AchievementState } from '@/lib/game/types';
 import { ACHIEVEMENTS, ACHIEVEMENT_CATEGORY_COLORS, getAchievementsByCategory, isAchievementRevealed } from '@/lib/game/data/achievements';
 import { GameState } from '@/lib/game/types';
 interface AchievementsProps {
  achievements: AchievementState;
  gameState: Pick<GameState, 'maxFloorReached' | 'totalManaGathered' | 'signedPacts' | 'totalSpellsCast' | 'totalDamageDealt' | 'totalCraftsCompleted' | 'combo'>;
 }
 export function AchievementsDisplay({ achievements, gameState }: AchievementsProps) {
  const [expandedCategory, setExpandedCategory] = useState<string | null>('combat');
  const categories = getAchievementsByCategory();
  const unlockedCount = achievements.unlocked.length;
  const totalCount = Object.keys(ACHIEVEMENTS).length;
  // Calculate progress for each achievement
  const getProgress = (achievementId: string): number => {
    const achievement = ACHIEVEMENTS[achievementId];
    if (!achievement) return 0;
    if (achievements.unlocked.includes(achievementId)) return achievement.requirement.value;
    const { type, subType } = achievement.requirement;
    switch (type) {
      case 'floor':
        if (subType === 'noPacts') {
          return gameState.maxFloorReached >= achievement.requirement.value && gameState.signedPacts.length === 0
            ? achievement.requirement.value
            : gameState.maxFloorReached;
        }
        return gameState.maxFloorReached;
      case 'combo':
        return gameState.combo?.maxCombo || 0;
      case 'spells':
        return gameState.totalSpellsCast || 0;
      case 'damage':
        return gameState.totalDamageDealt || 0;
      case 'mana':
        return gameState.totalManaGathered || 0;
      case 'pact':
        return gameState.signedPacts.length;
      case 'craft':
        return gameState.totalCraftsCompleted || 0;
      default:
        return achievements.progress[achievementId] || 0;
    }
  };
  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
        <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
          <Trophy className="w-4 h-4" />
          Achievements
          <Badge className="ml-auto bg-amber-900/50 text-amber-300">
            {unlockedCount} / {totalCount}
          </Badge>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-64">
          <div className="space-y-2">
            {Object.entries(categories).map(([category, categoryAchievements]) => (
              <div key={category} className="space-y-1">
                <Button
                  variant="ghost"
                  size="sm"
                  className="w-full justify-between text-xs"
                  onClick={() => setExpandedCategory(expandedCategory === category ? null : category)}
                >
                  <span style={{ color: ACHIEVEMENT_CATEGORY_COLORS[category] }}>
                    {category.charAt(0).toUpperCase() + category.slice(1)}
                  </span>
                  <span className="text-gray-500">
                    {categoryAchievements.filter(a => achievements.unlocked.includes(a.id)).length} / {categoryAchievements.length}
                  </span>
                  {expandedCategory === category ? (
                    <ChevronUp className="w-4 h-4" />
                  ) : (
                    <ChevronDown className="w-4 h-4" />
                  )}
                </Button>
                {expandedCategory === category && (
                  <div className="pl-2 space-y-2">
                    {categoryAchievements.map((achievement) => {
                      const isUnlocked = achievements.unlocked.includes(achievement.id);
                      const progress = getProgress(achievement.id);
                      const isRevealed = isAchievementRevealed(achievement, progress);
                      const progressPercent = Math.min(100, (progress / achievement.requirement.value) * 100);
                      if (!isRevealed && !isUnlocked) {
                        return (
                          <div key={achievement.id} className="p-2 rounded bg-gray-800/30 border border-gray-700">
                            <div className="flex items-center gap-2 text-gray-500">
                              <Lock className="w-4 h-4" />
                              <span className="text-sm">???</span>
                            </div>
                          </div>
                        );
                      }
                      return (
                        <div
                          key={achievement.id}
                          className={`p-2 rounded border ${
                            isUnlocked
                              ? 'bg-amber-900/20 border-amber-600/50'
                              : 'bg-gray-800/30 border-gray-700'
                          }`}
                        >
                          <div className="flex items-start justify-between mb-1">
                            <div className="flex items-center gap-2">
                              {isUnlocked ? (
                                <CheckCircle className="w-4 h-4 text-amber-400" />
                              ) : (
                                <Trophy className="w-4 h-4 text-gray-500" />
                              )}
                              <span className={`text-sm font-semibold ${isUnlocked ? 'text-amber-300' : 'text-gray-300'}`}>
                                {achievement.name}
                              </span>
                            </div>
                            {achievement.reward.title && isUnlocked && (
                              <Badge className="text-xs bg-purple-900/50 text-purple-300">
                                Title
                              </Badge>
                            )}
                          </div>
                          <div className="text-xs text-gray-400 mb-2">
                            {achievement.desc}
                          </div>
                          {!isUnlocked && (
                            <div className="space-y-1">
                              <Progress value={progressPercent} className="h-1 bg-gray-700" />
                              <div className="flex justify-between text-xs text-gray-500">
                                <span>{progress.toLocaleString()} / {achievement.requirement.value.toLocaleString()}</span>
                                <span>{progressPercent.toFixed(0)}%</span>
                              </div>
                            </div>
                          )}
                          {isUnlocked && achievement.reward && (
                            <div className="text-xs text-amber-400/70">
                              Reward: 
                              {achievement.reward.insight && ` +${achievement.reward.insight} Insight`}
                              {achievement.reward.manaBonus && ` +${achievement.reward.manaBonus} Max Mana`}
                              {achievement.reward.damageBonus && ` +${(achievement.reward.damageBonus * 100).toFixed(0)}% Damage`}
                              {achievement.reward.title && ` "${achievement.reward.title}"`}
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            ))}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
 }
@@ -0,0 +1,152 @@
 'use client';
 import { Sparkles, Swords, BookOpen, Target, FlaskConical, Cog, Hammer } from 'lucide-react';
 import type { GameAction } from '@/lib/game/types';
 interface ActionButtonsProps {
  currentAction: GameAction;
  currentStudyTarget: { type: 'skill' | 'spell'; id: string; progress: number; required: number } | null;
  designProgress: { progress: number; required: number } | null;
  designProgress2: { progress: number; required: number } | null;
  preparationProgress: { progress: number; required: number } | null;
  applicationProgress: { progress: number; required: number } | null;
  equipmentCraftingProgress: { progress: number; required: number } | null;
 }
 // Map action IDs to labels and icons
 const ACTION_CONFIG: Record<string, { label: string; icon: typeof Sparkles; color: string }> = {
  meditate: { label: 'Meditating', icon: Sparkles, color: 'text-blue-400' },
  climb: { label: 'Climbing', icon: Swords, color: 'text-green-400' },
  study: { label: 'Studying', icon: BookOpen, color: 'text-yellow-400' },
  design: { label: 'Designing Enchantment', icon: Target, color: 'text-purple-400' },
  prepare: { label: 'Preparing Equipment', icon: FlaskConical, color: 'text-purple-400' },
  enchant: { label: 'Enchanting', icon: Sparkles, color: 'text-purple-400' },
  craft: { label: 'Crafting Equipment', icon: Hammer, color: 'text-orange-400' },
  convert: { label: 'Converting Mana', icon: Cog, color: 'text-cyan-400' },
 };
 function ProgressBar({ progress, required, label }: { progress: number; required: number; label?: string }) {
  const percentage = Math.min(100, (progress / required) * 100);
  return (
    <div className="mt-1">
      {label && <div className="text-xs text-gray-400 mb-0.5">{label}</div>}
      <div className="w-full bg-gray-700 rounded-full h-1.5">
        <div 
          className="bg-blue-500 h-1.5 rounded-full transition-all duration-300" 
          style={{ width: `${percentage}%` }}
        />
      </div>
    </div>
  );
 }
 export function ActionButtons({
  currentAction,
  currentStudyTarget,
  designProgress,
  designProgress2,
  preparationProgress,
  applicationProgress,
  equipmentCraftingProgress,
 }: ActionButtonsProps) {
  const config = ACTION_CONFIG[currentAction] || { label: currentAction, icon: Sparkles, color: 'text-gray-400' };
  const Icon = config.icon;
  // Calculate additional info for specific actions
  const getActionDetails = () => {
    switch (currentAction) {
      case 'study':
        if (currentStudyTarget) {
          const progress = currentStudyTarget.progress;
          const required = currentStudyTarget.required;
          const percentage = Math.min(100, (progress / required) * 100);
          return (
            <ProgressBar 
              progress={progress} 
              required={required} 
              label={`${currentStudyTarget.type === 'skill' ? 'Skill' : 'Spell'}: ${percentage.toFixed(0)}%`}
            />
          );
        }
        break;
      case 'design':
        if (designProgress) {
          return (
            <ProgressBar 
              progress={designProgress.progress} 
              required={designProgress.required}
              label="Design progress"
            />
          );
        }
        break;
      case 'prepare':
        if (preparationProgress) {
          return (
            <ProgressBar 
              progress={preparationProgress.progress} 
              required={preparationProgress.required}
              label="Preparation progress"
            />
          );
        }
        break;
      case 'enchant':
        if (applicationProgress) {
          return (
            <ProgressBar 
              progress={applicationProgress.progress} 
              required={applicationProgress.required}
              label="Enchantment progress"
            />
          );
        }
        break;
      case 'craft':
        if (equipmentCraftingProgress) {
          return (
            <ProgressBar 
              progress={equipmentCraftingProgress.progress} 
              required={equipmentCraftingProgress.required}
              label="Crafting progress"
            />
          );
        }
        break;
    }
    return null;
  };
  return (
    <div className="space-y-2">
      <div className="bg-gray-800/50 rounded-lg p-3 border border-gray-700">
        <div className="flex items-center gap-2">
          <Icon className={`w-4 h-4 ${config.color}`} />
          <span className="text-sm font-medium text-gray-200">Current Activity</span>
        </div>
        <div className={`text-lg font-semibold mt-1 ${config.color}`}>
          {config.label}
        </div>
        {getActionDetails()}
        {/* Show second design slot if active */}
        {designProgress2 && (
          <div className="mt-2 pt-2 border-t border-gray-700">
            <div className="flex items-center gap-2">
              <Target className="w-3 h-3 text-purple-400" />
              <span className="text-xs text-gray-400">Second Design Slot</span>
            </div>
            <ProgressBar 
              progress={designProgress2.progress} 
              required={designProgress2.required}
              label="Design progress"
            />
          </div>
        )}
      </div>
    </div>
  );
 }
 ActionButtons.displayName = "ActionButtons";
 ProgressBar.displayName = "ProgressBar";
@@ -0,0 +1,19 @@
 'use client';
 import { useCombatStore } from '@/lib/game/stores';
 import { ActivityLog } from './tabs/ActivityLog';
 /**
 * Activity log panel for the left sidebar.
 * Wraps the existing ActivityLog tab component with store integration,
 * showing only the most recent 20 entries.
 */
 export function ActivityLogPanel() {
  const activityLog = useCombatStore((s) => s.activityLog);
  return (
    <ActivityLog activityLog={activityLog} maxEntries={20} />
  );
 }
 ActivityLogPanel.displayName = 'ActivityLogPanel';
@@ -0,0 +1,103 @@
 'use client';
 import { useAttunementStore } from '@/lib/game/stores';
 import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
 import { Separator } from '@/components/ui/separator';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 const SLOT_LABELS: Record<string, string> = {
  rightHand: 'R. Hand',
  leftHand: 'L. Hand',
  head: 'Head',
  back: 'Back',
  chest: 'Chest',
  leftLeg: 'L. Leg',
  rightLeg: 'R. Leg',
 };
 export function AttunementStatus() {
  const attunements = useAttunementStore((s) => s.attunements);
  const activeAttunements = Object.entries(attunements)
    .filter(([, state]) => state.active)
    .sort(([, a], [, b]) => {
      const orderA = Object.values(ATTUNEMENTS_DEF).findIndex(d => d.id === a.id);
      const orderB = Object.values(ATTUNEMENTS_DEF).findIndex(d => d.id === b.id);
      return orderA - orderB;
    });
  const xpForNext = (level: number) => {
    if (level <= 1) return 0;
    if (level === 2) return 1000;
    return Math.floor(1000 * Math.pow(2, level - 2) * (level >= 3 ? 1.25 : 1));
  };
  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between">
        <span className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-bold">Attunements</span>
        <span className="text-[10px] text-[var(--text-muted)]">{activeAttunements.length} active</span>
      </div>
      <Separator className="bg-[var(--border-subtle)]" />
      <div className="space-y-1.5">
        {activeAttunements.length === 0 ? (
          <div className="text-[10px] text-[var(--text-muted)] italic">No attunements active</div>
        ) : (
          activeAttunements.map(([id, state]) => {
            const def = ATTUNEMENTS_DEF[id];
            if (!def) return null;
            const nextXp = xpForNext(state.level);
            const xpProgress = nextXp > 0 ? (state.experience / nextXp) * 100 : 0;
            return (
              <TooltipProvider key={id}>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <div className="flex items-center gap-2 p-1.5 rounded bg-[var(--bg-sunken)]/50 border border-[var(--border-subtle)]">
                      <span className="text-sm">{def.icon}</span>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-1.5">
                          <span className="text-[11px] font-medium text-[var(--text-primary)] truncate">
                            {def.name}
                          </span>
                          <span className="text-[10px] text-[var(--text-secondary)] font-mono">
                            Lv.{state.level}
                          </span>
                        </div>
                        <div className="text-[10px] text-[var(--text-muted)]">
                          <span className="capitalize">{SLOT_LABELS[def.slot] || def.slot}</span>
                          {nextXp > 0 && (
                            <span className="ml-1.5 font-mono">
                              {Math.floor(state.experience).toLocaleString()}/{nextXp.toLocaleString()} XP
                            </span>
                          )}
                        </div>
                        {nextXp > 0 && (
                          <div className="w-full h-0.5 bg-[var(--border-subtle)] rounded-full mt-0.5 overflow-hidden">
                            <div
                              className="h-full transition-all duration-500"
                              style={{
                                width: `${Math.min(100, xpProgress)}%`,
                                backgroundColor: def.color,
                                opacity: 0.7,
                              }}
                            />
                          </div>
                        )}
                      </div>
                    </div>
                  </TooltipTrigger>
                  <TooltipContent side="right">
                    <p className="text-xs max-w-[220px]">{def.desc}</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            );
          })
        )}
      </div>
    </div>
  );
 }
 AttunementStatus.displayName = 'AttunementStatus';
@@ -1,143 +0,0 @@
 'use client';
 import { Progress } from '@/components/ui/progress';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Zap, Flame, Sparkles } from 'lucide-react';
 import type { ComboState } from '@/lib/game/types';
 import { ELEMENTS } from '@/lib/game/constants';
 interface ComboMeterProps {
  combo: ComboState;
  isClimbing: boolean;
 }
 export function ComboMeter({ combo, isClimbing }: ComboMeterProps) {
  const comboPercent = Math.min(100, combo.count);
  const multiplierPercent = Math.min(100, ((combo.multiplier - 1) / 2) * 100); // Max 300% = 200% bonus
  // Combo tier names
  const getComboTier = (count: number): { name: string; color: string } => {
    if (count >= 100) return { name: 'LEGENDARY', color: 'text-amber-400' };
    if (count >= 75) return { name: 'Master', color: 'text-purple-400' };
    if (count >= 50) return { name: 'Expert', color: 'text-blue-400' };
    if (count >= 25) return { name: 'Adept', color: 'text-green-400' };
    if (count >= 10) return { name: 'Novice', color: 'text-cyan-400' };
    return { name: 'Building...', color: 'text-gray-400' };
  };
  const tier = getComboTier(combo.count);
  const hasElementChain = combo.elementChain.length === 3 && new Set(combo.elementChain).size === 3;
  if (!isClimbing && combo.count === 0) {
    return null;
  }
  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
        <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
          <Zap className="w-4 h-4" />
          Combo Meter
          {combo.count >= 10 && (
            <Badge className={`ml-auto ${tier.color} bg-gray-800`}>
              {tier.name}
            </Badge>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        {/* Combo Count */}
        <div className="space-y-1">
          <div className="flex justify-between items-center text-sm">
            <span className="text-gray-400">Hits</span>
            <span className={`font-bold ${tier.color}`}>
              {combo.count}
              {combo.maxCombo > combo.count && (
                <span className="text-gray-500 text-xs ml-2">max: {combo.maxCombo}</span>
              )}
            </span>
          </div>
          <Progress 
            value={comboPercent} 
            className="h-2 bg-gray-800"
          />
        </div>
        {/* Multiplier */}
        <div className="space-y-1">
          <div className="flex justify-between items-center text-sm">
            <span className="text-gray-400">Multiplier</span>
            <span className="font-bold text-amber-400">
              {combo.multiplier.toFixed(2)}x
            </span>
          </div>
          <div className="h-2 bg-gray-800 rounded-full overflow-hidden">
            <div
              className="h-full rounded-full transition-all duration-300"
              style={{
                width: `${multiplierPercent}%`,
                background: `linear-gradient(90deg, #F59E0B, #EF4444)`,
              }}
            />
          </div>
        </div>
        {/* Element Chain */}
        {combo.elementChain.length > 0 && (
          <div className="space-y-1">
            <div className="flex justify-between items-center text-sm">
              <span className="text-gray-400">Element Chain</span>
              {hasElementChain && (
                <span className="text-green-400 text-xs">+25% bonus!</span>
              )}
            </div>
            <div className="flex gap-1">
              {combo.elementChain.map((elem, i) => {
                const elemDef = ELEMENTS[elem];
                return (
                  <div
                    key={i}
                    className="w-8 h-8 rounded border flex items-center justify-center text-xs"
                    style={{
                      borderColor: elemDef?.color || '#60A5FA',
                      backgroundColor: `${elemDef?.color}20`,
                      color: elemDef?.color || '#60A5FA',
                    }}
                  >
                    {elemDef?.sym || '?'}
                  </div>
                );
              })}
              {/* Empty slots */}
              {Array.from({ length: 3 - combo.elementChain.length }).map((_, i) => (
                <div
                  key={`empty-${i}`}
                  className="w-8 h-8 rounded border border-gray-700 bg-gray-800/50 flex items-center justify-center text-gray-600"
                >
                  ?
                </div>
              ))}
            </div>
          </div>
        )}
        {/* Decay Warning */}
        {isClimbing && combo.count > 0 && combo.decayTimer <= 3 && (
          <div className="text-xs text-red-400 flex items-center gap-1">
            <Flame className="w-3 h-3" />
            Combo decaying soon!
          </div>
        )}
        {/* Not climbing warning */}
        {!isClimbing && combo.count > 0 && (
          <div className="text-xs text-amber-400 flex items-center gap-1">
            <Sparkles className="w-3 h-3" />
            Resume climbing to maintain combo
          </div>
        )}
      </CardContent>
    </Card>
  );
 }
@@ -0,0 +1,141 @@
 'use client';
 import { useToast } from '@/hooks/use-toast';
 import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
 } from '@/components/ui/toast';
 import { cn } from '@/lib/utils';
 import {
  CheckCircle,
  AlertCircle,
  AlertTriangle,
  Info,
  X,
 } from 'lucide-react';
 import type { ReactNode } from 'react';
 // Toast type definitions
 type ToastType = 'success' | 'warning' | 'error' | 'info';
 interface ToastIconProps {
  type: ToastType;
 }
 // Icon mapping for toast types
 function ToastIcon({ type }: ToastIconProps) {
  const iconClass = 'h-4 w-4 shrink-0';
  switch (type) {
    case 'success':
      return <CheckCircle className={cn(iconClass, 'text-[var(--color-success)]')} />;
    case 'warning':
      return <AlertTriangle className={cn(iconClass, 'text-[var(--color-warning)]')} />;
    case 'error':
      return <AlertCircle className={cn(iconClass, 'text-[var(--color-danger)]')} />;
    case 'info':
      return <Info className={cn(iconClass, 'text-[var(--color-info)]')} />;
  }
 }
 // Color mapping for toast types using design system tokens
 const TOAST_TYPE_STYLES: Record<ToastType, string> = {
  success: 'border-[var(--color-success)]/50 bg-[var(--color-success)]/10',
  warning: 'border-[var(--color-warning)]/50 bg-[var(--color-warning)]/10',
  error: 'border-[var(--color-danger)]/50 bg-[var(--color-danger)]/10',
  info: 'border-[var(--color-info)]/50 bg-[var(--color-info)]/10',
 };
 const TOAST_TYPE_TEXT: Record<ToastType, string> = {
  success: 'text-[var(--color-success)]',
  warning: 'text-[var(--color-warning)]',
  error: 'text-[var(--color-danger)]',
  info: 'text-[var(--color-info)]',
 };
 export function GameToaster() {
  const { toasts } = useToast();
  return (
    <ToastProvider>
      {toasts.map((toast) => {
        // Determine toast type from className or default to info
        const toastType: ToastType = 
          toast.variant === 'destructive' ? 'error' :
          (toast as { toastType?: ToastType }).toastType || 'info';
        return (
          <Toast
            key={toast.id}
            className={cn(
              'group pointer-events-auto relative flex w-full items-center justify-between space-x-3 overflow-hidden rounded-md border p-4 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
              TOAST_TYPE_STYLES[toastType]
            )}
            {...toast}
          >
            <div className="flex items-start gap-3 flex-1">
              <ToastIcon type={toastType} />
              <div className="grid gap-1 flex-1">
                {toast.title && (
                  <ToastTitle className={cn('text-sm font-semibold', TOAST_TYPE_TEXT[toastType])}>
                    {toast.title}
                  </ToastTitle>
                )}
                {toast.description && (
                  <ToastDescription className="text-xs text-[var(--text-secondary)]">
                    {toast.description}
                  </ToastDescription>
                )}
              </div>
            </div>
            <ToastClose className="absolute right-1 top-1 rounded-md p-1 text-[var(--text-muted)] opacity-0 transition-opacity hover:text-[var(--text-primary)] focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-70">
              <X className="h-3 w-3" />
            </ToastClose>
          </Toast>
        );
      })}
      {/* 
        Viewport positioning:
        - Desktop: bottom-right
        - Mobile: bottom-center, full-width
      */}
      <ToastViewport
        className={cn(
          'fixed z-[100] flex max-h-screen w-full flex-col-reverse p-4',
          // Desktop: bottom-right, fixed width
          'sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col sm:max-w-[420px]',
          // Mobile: bottom-center, full-width
          'max-sm:bottom-0 max-sm:left-0 max-sm:flex-col max-sm:items-center'
        )}
      />
    </ToastProvider>
  );
 }
 // Custom hook to show typed toasts
 export function useGameToast() {
  const { toast } = useToast();
  return (type: ToastType, title: ReactNode, description?: ReactNode) => {
    const toastTypeClass = `toast-type-${type}`;
    return toast({
      title,
      description,
      className: toastTypeClass,
      // Store the type for styling
      ...{ toastType: type },
    } as {
      title: ReactNode;
      description?: ReactNode;
      className?: string;
      toastType?: ToastType;
    });
  };
 }
 export { type ToastType };
@@ -1,117 +0,0 @@
 'use client';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Gem, Sparkles, Scroll, Droplet } from 'lucide-react';
 import type { LootInventory as LootInventoryType } from '@/lib/game/types';
 import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
 interface LootInventoryProps {
  inventory: LootInventoryType;
 }
 export function LootInventoryDisplay({ inventory }: LootInventoryProps) {
  const materialCount = Object.values(inventory.materials).reduce((a, b) => a + b, 0);
  const blueprintCount = inventory.blueprints.length;
  if (materialCount === 0 && blueprintCount === 0) {
    return (
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
            <Gem className="w-4 h-4" />
            Loot Inventory
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-gray-500 text-sm text-center py-4">
            No loot collected yet. Defeat floors and guardians to find items!
          </div>
        </CardContent>
      </Card>
    );
  }
  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
        <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
          <Gem className="w-4 h-4" />
          Loot Inventory
          <Badge className="ml-auto bg-gray-800 text-gray-300">
            {materialCount + blueprintCount} items
          </Badge>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-48">
          <div className="space-y-3">
            {/* Materials */}
            {Object.entries(inventory.materials).length > 0 && (
              <div>
                <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
                  <Sparkles className="w-3 h-3" />
                  Materials
                </div>
                <div className="grid grid-cols-2 gap-2">
                  {Object.entries(inventory.materials).map(([id, count]) => {
                    const drop = LOOT_DROPS[id];
                    if (!drop || count <= 0) return null;
                    const rarityStyle = RARITY_COLORS[drop.rarity];
                    return (
                      <div
                        key={id}
                        className="p-2 rounded border bg-gray-800/50"
                        style={{
                          borderColor: rarityStyle?.color || '#9CA3AF',
                        }}
                      >
                        <div className="text-xs font-semibold" style={{ color: rarityStyle?.color }}>
                          {drop.name}
                        </div>
                        <div className="text-xs text-gray-400">
                          x{count}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
            {/* Blueprints */}
            {inventory.blueprints.length > 0 && (
              <div>
                <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
                  <Scroll className="w-3 h-3" />
                  Blueprints Discovered
                </div>
                <div className="flex flex-wrap gap-1">
                  {inventory.blueprints.map((id) => {
                    const drop = LOOT_DROPS[id];
                    if (!drop) return null;
                    const rarityStyle = RARITY_COLORS[drop.rarity];
                    return (
                      <Badge
                        key={id}
                        className="text-xs"
                        style={{
                          backgroundColor: `${rarityStyle?.color}20`,
                          color: rarityStyle?.color,
                          borderColor: rarityStyle?.color,
                        }}
                      >
                        {drop.name}
                      </Badge>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
 }
@@ -0,0 +1,46 @@
 'use client';
 import { Scroll } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { LOOT_DROPS } from '@/lib/game/data/loot-drops';
 import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from './types';
 interface BlueprintsSectionProps {
  blueprints: string[];
 }
 export function BlueprintsSection({ blueprints }: BlueprintsSectionProps) {
  if (blueprints.length === 0) return null;
  return (
    <div>
      <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
        <Scroll className="w-3 h-3" />
        Blueprints (permanent)
      </div>
      <div className="flex flex-wrap gap-1">
        {blueprints.map((id) => {
          const drop = LOOT_DROPS[id];
          if (!drop) return null;
          const rarityColor = RARITY_CSS_VAR[drop.rarity] || 'var(--rarity-common)';
          return (
            <Badge
              key={id}
              className="text-xs"
              style={{
                backgroundColor: `${RARITY_GLOW_CSS_VAR[drop.rarity] || 'var(--rarity-common-glow)'}`,
                color: rarityColor,
                borderColor: rarityColor,
              }}
            >
              {drop.name}
            </Badge>
          );
        })}
      </div>
      <div className="text-xs text-[var(--text-muted)] mt-1 italic">
        Blueprints are permanent unlocks - use them to craft equipment
      </div>
    </div>
  );
 }
@@ -0,0 +1,87 @@
 'use client';
 import { Package, Trash2 } from 'lucide-react';
 import type { EquipmentInstance } from '@/lib/game/types';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
 import { CATEGORY_ICONS } from './icons';
 import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from './types';
 import { ActionButton } from '@/components/ui/action-button';
 interface EquipmentItemProps {
  instanceId: string;
  instance: EquipmentInstance;
  onDelete?: (instanceId: string) => void;
 }
 export function EquipmentItem({ instanceId, instance, onDelete }: EquipmentItemProps) {
  const type = EQUIPMENT_TYPES[instance.typeId];
  const Icon = type ? CATEGORY_ICONS[type.category] || Package : Package;
  const rarityColor = RARITY_CSS_VAR[instance.rarity] || 'var(--rarity-common)';
  const rarityGlow = RARITY_GLOW_CSS_VAR[instance.rarity] || 'var(--rarity-common-glow)';
  return (
    <div
      className="p-2 rounded border bg-[var(--bg-sunken)] group"
      style={{
        borderColor: rarityColor,
        backgroundColor: rarityGlow,
      }}
    >
      <div className="flex items-start justify-between">
        <div className="flex items-start gap-2">
          <Icon className="w-4 h-4 mt-0.5" style={{ color: rarityColor }} />
          <div>
            <div className="text-xs font-semibold" style={{ color: rarityColor }}>
              {instance.name}
            </div>
            <div className="text-xs text-[var(--text-secondary)]">
              {type?.name} • {instance.usedCapacity}/{instance.totalCapacity} cap
            </div>
            <div className="text-xs text-[var(--text-muted)] capitalize">
              {instance.rarity} • {instance.enchantments.length} enchants
            </div>
          </div>
        </div>
        {onDelete && (
          <ActionButton
            variant="ghost"
            size="sm"
            className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
            onClick={() => onDelete(instanceId)}
            aria-label={`Delete ${instance.name}`}
          >
            <Trash2 className="w-3 h-3" />
          </ActionButton>
        )}
      </div>
    </div>
  );
 }
 interface EquipmentSectionProps {
  equipment: [string, EquipmentInstance][];
  onDeleteEquipment?: (instanceId: string) => void;
 }
 export function EquipmentSection({ equipment, onDeleteEquipment }: EquipmentSectionProps) {
  if (equipment.length === 0) return null;
  return (
    <div>
      <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
        <Package className="w-3 h-3" />
        Equipment
      </div>
      <div className="space-y-2">
        {equipment.map(([id, instance]) => (
          <EquipmentItem
            key={id}
            instanceId={id}
            instance={instance}
            onDelete={onDeleteEquipment}
          />
        ))}
      </div>
    </div>
  );
 }
@@ -0,0 +1,55 @@
 'use client';
 import { Droplet } from 'lucide-react';
 import { ElementBadge } from '@/components/ui/element-badge';
 import type { ElementState } from '@/lib/game/types';
 import { ELEMENTS } from '@/lib/game/constants';
 interface EssenceItemProps {
  elementId: string;
  state: ElementState;
 }
 export function EssenceItem({ elementId, state }: EssenceItemProps) {
  const elem = ELEMENTS[elementId];
  if (!elem) return null;
  return (
    <div
      className="p-2 rounded border bg-[var(--bg-sunken)]"
      style={{
        borderColor: `var(--mana-${elementId})`,
        backgroundColor: `var(--mana-${elementId})20`,
      }}
    >
      <div className="flex items-center gap-1">
        <ElementBadge element={elementId} showIcon={true} size="sm" />
      </div>
      <div className="text-xs text-[var(--text-secondary)] mt-1">
        {state.current} / {state.max}
      </div>
    </div>
  );
 }
 interface EssenceSectionProps {
  essence: [string, ElementState][];
 }
 export function EssenceSection({ essence }: EssenceSectionProps) {
  if (essence.length === 0) return null;
  return (
    <div>
      <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
        <Droplet className="w-3 h-3" />
        Elemental Essence
      </div>
      <div className="grid grid-cols-2 gap-2">
        {essence.map(([id, state]) => (
          <EssenceItem key={id} elementId={id} state={state} />
        ))}
      </div>
    </div>
  );
 }
@@ -0,0 +1,86 @@
 'use client';
 import type { LootInventory } from '@/lib/game/types';
 // For backward compatibility
 type LootInventoryType = LootInventory;
 import { LOOT_DROPS } from '@/lib/game/data/loot-drops';
 import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from './types';
 import { Sparkles, Trash2 } from 'lucide-react';
 import { ActionButton } from '@/components/ui/action-button';
 interface MaterialItemProps {
  materialId: string;
  count: number;
  onDelete?: (materialId: string) => void;
 }
 export function MaterialItem({ materialId, count, onDelete }: MaterialItemProps) {
  const drop = LOOT_DROPS[materialId];
  if (!drop) return null;
  const rarityColor = RARITY_CSS_VAR[drop.rarity] || 'var(--rarity-common)';
  const rarityGlow = RARITY_GLOW_CSS_VAR[drop.rarity] || 'var(--rarity-common-glow)';
  return (
    <div
      className="p-2 rounded border bg-[var(--bg-sunken)] group relative"
      style={{
        borderColor: rarityColor,
        backgroundColor: rarityGlow,
      }}
    >
      <div className="flex items-start justify-between">
        <div>
          <div className="text-xs font-semibold" style={{ color: rarityColor }}>
            {drop.name}
          </div>
          <div className="text-xs text-[var(--text-secondary)]">
            x{count}
          </div>
          <div className="text-xs text-[var(--text-muted)] capitalize">
            {drop.rarity}
          </div>
        </div>
        {onDelete && (
          <ActionButton
            variant="ghost"
            size="sm"
            className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
            onClick={() => onDelete(materialId)}
            aria-label={`Delete ${drop.name}`}
          >
            <Trash2 className="w-3 h-3" />
          </ActionButton>
        )}
      </div>
    </div>
  );
 }
 interface MaterialsSectionProps {
  materials: [string, number][];
  onDeleteMaterial?: (materialId: string) => void;
 }
 export function MaterialsSection({ materials, onDeleteMaterial }: MaterialsSectionProps) {
  if (materials.length === 0) return null;
  return (
    <div>
      <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
        <Sparkles className="w-3 h-3" />
        Materials
      </div>
      <div className="grid grid-cols-2 gap-2">
        {materials.map(([id, count]) => (
          <MaterialItem
            key={id}
            materialId={id}
            count={count}
            onDelete={onDeleteMaterial}
          />
        ))}
      </div>
    </div>
  );
 }
@@ -0,0 +1,15 @@
 import { Gem, Sparkles, Scroll, Droplet, Trash2, Search, 
  Package, Sword, Shield, Shirt, Crown, ArrowUpDown,
  Wrench, AlertTriangle } from 'lucide-react';
 import type { EquipmentCategory } from '@/lib/game/data/equipment';
 export const CATEGORY_ICONS: Record<string, typeof Sword> = {
  caster: Sword,
  shield: Shield,
  catalyst: Sparkles,
  head: Crown,
  body: Shirt,
  hands: Wrench,
  feet: Package,
  accessory: Gem,
 };
@@ -0,0 +1,39 @@
 'use client';
 import { useState } from 'react';
 import type { LootInventory as LootInventoryType, EquipmentInstance, ElementState } from '@/lib/game/types';
 import { LOOT_DROPS } from '@/lib/game/data/loot-drops';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
 import { ELEMENTS } from '@/lib/game/constants';
 export type SortMode = 'name' | 'rarity' | 'count';
 export type FilterMode = 'all' | 'materials' | 'essence' | 'blueprints' | 'equipment';
 export const RARITY_ORDER = {
  common: 0,
  uncommon: 1,
  rare: 2,
  epic: 3,
  legendary: 4,
  mythic: 5,
 };
 // Map rarity to CSS variable for colors
 export const RARITY_CSS_VAR: Record<string, string> = {
  common: 'var(--rarity-common)',
  uncommon: 'var(--rarity-uncommon)',
  rare: 'var(--rarity-rare)',
  epic: 'var(--rarity-epic)',
  legendary: 'var(--rarity-legendary)',
  mythic: 'var(--rarity-mythic)',
 };
 // Map rarity to CSS variable for glow/background
 export const RARITY_GLOW_CSS_VAR: Record<string, string> = {
  common: 'var(--rarity-common-glow)',
  uncommon: 'var(--rarity-uncommon-glow)',
  rare: 'var(--rarity-rare-glow)',
  epic: 'var(--rarity-epic-glow)',
  legendary: 'var(--rarity-legendary-glow)',
  mythic: 'var(--rarity-mythic-glow)',
 };
@@ -0,0 +1,141 @@
 'use client';
 import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
 import { Card, CardContent } from '@/components/ui/card';
 import { Zap, ChevronDown, ChevronUp } from 'lucide-react';
 import { fmt, fmtDec } from '@/lib/game/stores';
 import { ELEMENTS } from '@/lib/game/constants';
 import { useState } from 'react';
 interface ManaDisplayProps {
  rawMana: number;
  maxMana: number;
  effectiveRegen: number;
  meditationMultiplier: number;
  clickMana: number;
  isGathering: boolean;
  onGatherStart: () => void;
  onGatherEnd: () => void;
  elements: Record<string, { current: number; max: number; unlocked: boolean }>;
 }
 export function ManaDisplay({
  rawMana,
  maxMana,
  effectiveRegen,
  meditationMultiplier,
  clickMana,
  isGathering,
  onGatherStart,
  onGatherEnd,
  elements,
 }: ManaDisplayProps) {
  const [expanded, setExpanded] = useState(true);
  // Get unlocked elements with current > 0, sorted by current amount
  const unlockedElements = Object.entries(elements)
    .filter(([, state]) => state.unlocked && state.current > 0)
    .sort((a, b) => b[1].current - a[1].current);
  return (
    <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
      <CardContent className="pt-4 space-y-3">
        {/* Raw Mana - Main Display */}
        <div>
          <div className="flex items-baseline gap-1">
            <span className="text-3xl font-bold game-mono" style={{ color: 'var(--mana-raw)' }}>{fmt(rawMana)}</span>
            <span className="text-sm" style={{ color: 'var(--text-muted)' }}>/ {fmt(maxMana)}</span>
          </div>
          <div className="text-xs" style={{ color: 'var(--text-muted)' }}>
            +{fmtDec(effectiveRegen)} mana/hr {meditationMultiplier > 1.01 && <span style={{ color: 'var(--mana-light)' }}>({fmtDec(meditationMultiplier, 1)}x med)</span>}
          </div>
        </div>
        <Progress
          value={(rawMana / maxMana) * 100}
          className="h-2 bg-[var(--bg-sunken)]"
          style={{ '--progress-bg': 'var(--mana-raw)' } as React.CSSProperties}
        />
        <Button
          className={`w-full transition-all text-[var(--font-display)] tracking-wider 
            ${isGathering 
              ? 'animate-gather-glow' 
              : 'hover:scale-[1.02]'}
          `}
          style={{
            background: 'var(--mana-raw)',
            border: '1px solid var(--border-accent)',
            color: '#0C1020',
            fontWeight: 600,
          }}
          onMouseDown={onGatherStart}
          onMouseUp={onGatherEnd}
          onMouseLeave={onGatherEnd}
          onTouchStart={onGatherStart}
          onTouchEnd={onGatherEnd}
        >
          <Zap className="w-4 h-4 mr-2" />
          Gather +{clickMana} Mana
          {isGathering && <span className="ml-2 text-xs" style={{ opacity: 0.8 }}>(Holding...)</span>}
        </Button>
        {/* Elemental Mana Pools */}
        {unlockedElements.length > 0 && (
          <div className="border-t border-[var(--border-subtle)] pt-3 mt-3">
            <button
              onClick={() => setExpanded(!expanded)}
              className="flex items-center justify-between w-full text-xs transition-colors"
              style={{ color: 'var(--text-muted)' }}
            >
              <span style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.5px' }}>ELEMENTAL MANA ({unlockedElements.length})</span>
              {expanded ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
            </button>
            {expanded && (
              <div className="grid grid-cols-2 gap-2 mt-2">
                {unlockedElements.map(([id, state]) => {
                  const elem = ELEMENTS[id];
                  if (!elem) return null;
                  return (
                    <div 
                      key={id} 
                      className="p-2 transition-all border rounded-sm"
                      style={{ 
                        background: 'var(--bg-sunken)/30',
                        borderColor: `${elem.color}30`,
                      }}
                    >
                      <div className="flex items-center gap-1 mb-1">
                        <span style={{ color: elem.color }}>{elem.sym}</span>
                        <span className="text-xs font-medium" style={{ color: elem.color }}>
                          {elem.name}
                        </span>
                      </div>
                      <div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--bg-void)' }}>
                        <div 
                          className="h-full transition-all rounded-full"
                          style={{ 
                            width: `${Math.min(100, (state.current / state.max) * 100)}%`,
                            backgroundColor: elem.color 
                          }}
                        />
                      </div>
                      <div className="text-xs game-mono" style={{ color: 'var(--text-muted)' }}>
                        {fmt(state.current)}/{fmt(state.max)}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
 }
 ManaDisplay.displayName = "ManaDisplay";
@@ -0,0 +1,38 @@
 'use client';
 import { fmt } from '@/lib/game/stores';
 import { formatHour } from '@/lib/game/utils/formatting';
 interface TimeDisplayProps {
  day: number;
  hour: number;
  insight: number;
 }
 export function TimeDisplay({
  day,
  hour,
  insight,
 }: TimeDisplayProps) {
  return (
    <div className="flex items-center gap-4">
      <div className="text-center">
        <div className="text-lg font-bold game-mono text-amber-400">
          Day {day}
        </div>
        <div className="text-xs text-gray-400">
          {formatHour(hour)}
        </div>
      </div>
      <div className="text-center">
        <div className="text-lg font-bold game-mono text-purple-400">
          {fmt(insight)}
        </div>
        <div className="text-xs text-gray-400">Insight</div>
      </div>
    </div>
  );
 }
 TimeDisplay.displayName = "TimeDisplay";
@@ -0,0 +1,115 @@
 'use client';
 import type { SkillUpgradeChoice } from '@/lib/game/types';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 export interface UpgradeDialogProps {
  open: boolean;
  skillId: string | null;
  milestone: 5 | 10;
  pendingSelections: string[];
  available: SkillUpgradeChoice[];
  alreadySelected: string[];
  onToggle: (upgradeId: string) => void;
  onConfirm: () => void;
  onCancel: () => void;
  onOpenChange: (open: boolean) => void;
 }
 export function UpgradeDialog({
  open,
  skillId,
  milestone,
  pendingSelections,
  available,
  alreadySelected,
  onToggle,
  onConfirm,
  onCancel,
  onOpenChange,
 }: UpgradeDialogProps) {
  if (!skillId) return null;
  const currentSelections = pendingSelections.length > 0 ? pendingSelections : alreadySelected;
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="bg-gray-900 border-gray-700 max-w-lg">
        <DialogHeader>
          <DialogTitle className="text-amber-400">
            Choose Upgrade - {skillId}
          </DialogTitle>
          <DialogDescription className="text-gray-400">
            Level {milestone} Milestone - Select 2 upgrades ({currentSelections.length}/2 chosen)
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-2 mt-4">
          {available.map((upgrade) => {
            const isSelected = currentSelections.includes(upgrade.id);
            const canToggle = currentSelections.length < 2 || isSelected;
            return (
              <div
                key={upgrade.id}
                className={`p-3 rounded border cursor-pointer transition-all ${
                  isSelected
                    ? 'border-amber-500 bg-amber-900/30'
                    : canToggle
                      ? 'border-gray-600 bg-gray-800/50 hover:border-amber-500/50 hover:bg-gray-800'
                      : 'border-gray-700 bg-gray-800/30 opacity-50 cursor-not-allowed'
                }`}
                onClick={() => {
                  if (canToggle) {
                    onToggle(upgrade.id);
                  }
                }}
              >
                <div className="flex items-center justify-between">
                  <div className="font-semibold text-sm text-amber-300">{upgrade.name}</div>
                  {isSelected && <Badge className="bg-amber-600 text-amber-100">Selected</Badge>}
                </div>
                <div className="text-xs text-gray-400 mt-1">{upgrade.desc}</div>
                {upgrade.effect.type === 'multiplier' && (
                  <div className="text-xs text-green-400 mt-1">
                    +{Math.round((upgrade.effect.value! - 1) * 100)}% {upgrade.effect.stat}
                  </div>
                )}
                {upgrade.effect.type === 'bonus' && (
                  <div className="text-xs text-blue-400 mt-1">
                    +{upgrade.effect.value} {upgrade.effect.stat}
                  </div>
                )}
                {upgrade.effect.type === 'special' && (
                  <div className="text-xs text-cyan-400 mt-1">
                    ⚡ {upgrade.effect.specialDesc || 'Special effect'}
                  </div>
                )}
              </div>
            );
          })}
        </div>
        <div className="flex justify-end gap-2 mt-4">
          <Button
            variant="outline"
            onClick={onCancel}
          >
            Cancel
          </Button>
          <Button
            variant="default"
            onClick={onConfirm}
            disabled={currentSelections.length !== 2}
          >
            {currentSelections.length < 2 ? `Select ${2 - currentSelections.length} more` : 'Confirm'}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
 }
 UpgradeDialog.displayName = "UpgradeDialog";
@@ -0,0 +1,280 @@
 'use client';
 import { useState } from 'react';
 import { ActionButton } from '@/components/ui/action-button';
 import { GameCard } from '@/components/ui/game-card';
 import { SectionHeader } from '@/components/ui/section-header';
 import { StatRow } from '@/components/ui/stat-row';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
 import type { EquipmentInstance, EnchantmentDesign, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
 import type { EquipmentSlot } from '@/lib/game/data/equipment';
 import { fmt } from '@/lib/game/stores';
 import { CheckCircle, Sparkles } from 'lucide-react';
 import { useGameStore, useCraftingStore, useManaStore } from '@/lib/game/stores';
 export interface EnchantmentApplierProps {
  selectedEquipmentInstance: string | null;
  setSelectedEquipmentInstance: (id: string | null) => void;
  selectedDesign: string | null;
  setSelectedDesign: (id: string | null) => void;
  onEnchantmentApplied?: () => void;
  onCapacityExceeded?: (itemName: string, used: number, total: number) => void;
 }
 export function EnchantmentApplier({
  selectedEquipmentInstance,
  setSelectedEquipmentInstance,
  selectedDesign,
  setSelectedDesign,
  onEnchantmentApplied,
  onCapacityExceeded,
 }: EnchantmentApplierProps) {
  const equippedInstances = useCraftingStore((s) => s.equippedInstances);
  const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
  const enchantmentDesigns = useCraftingStore((s) => s.enchantmentDesigns);
  const applicationProgress = useCraftingStore((s) => s.applicationProgress);
  const rawMana = useManaStore((s) => s.rawMana);
  const startApplying = useCraftingStore((s) => s.startApplying);
  const pauseApplication = useCraftingStore((s) => s.pauseApplication);
  const resumeApplication = useCraftingStore((s) => s.resumeApplication);
  const cancelApplication = useCraftingStore((s) => s.cancelApplication);
  // Get equipped items as array - ONLY show items tagged 'Ready for Enchantment' (requirement cr5)
  const equippedItems = Object.entries(equippedInstances)
    .filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
    .map(([slot, instanceId]) => ({
      slot: slot as EquipmentSlot,
      instance: equipmentInstances[instanceId!],
    }))
    .filter(({ instance }) => instance.tags?.includes('Ready for Enchantment'));
  // Handle apply button click
  const handleApply = () => {
    if (!selectedEquipmentInstance || !selectedDesign) return;
    const instance = equipmentInstances[selectedEquipmentInstance];
    const design = enchantmentDesigns.find(d => d.id === selectedDesign);
    if (!instance || !design) return;
    // Check capacity
    const availableCap = instance.totalCapacity - instance.usedCapacity;
    if (availableCap < design.totalCapacityUsed) {
      onCapacityExceeded?.(instance.name, instance.usedCapacity, instance.totalCapacity);
      return;
    }
    startApplying(selectedEquipmentInstance, selectedDesign);
  };
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment & Design Selection */}
      <GameCard variant="default">
        <SectionHeader title="Select Equipment & Design" />
        {applicationProgress ? (
          <div className="space-y-3">
            <div className="text-sm text-[var(--text-secondary)]">
              Applying to: {equipmentInstances[applicationProgress.equipmentInstanceId]?.name}
            </div>
            <div className="h-3 bg-[var(--bg-sunken)] rounded-full overflow-hidden">
              <div
                className="h-full bg-[var(--mana-light)] transition-all duration-300"
                style={{ width: `${(applicationProgress.progress / applicationProgress.required) * 100}%` }}
              />
            </div>
            <div className="flex justify-between text-xs text-[var(--text-muted)]">
              <span>{applicationProgress.progress.toFixed(1)}h / {applicationProgress.required.toFixed(1)}h</span>
              <span>Mana spent: {fmt(applicationProgress.manaSpent)}</span>
            </div>
            <div className="flex gap-2">
              {applicationProgress.paused ? (
                <ActionButton size="sm" onClick={resumeApplication}>Resume</ActionButton>
              ) : (
                <>
                  <ActionButton variant="secondary" size="sm" onClick={pauseApplication}>Pause</ActionButton>
                  <ActionButton variant="ghost" size="sm" onClick={() => {
                    cancelApplication();
                    onEnchantmentApplied?.(); // This will trigger the cancel toast via parent
                  }}>Cancel</ActionButton>
                </>
              )}
            </div>
          </div>
        ) : (
          <div className="space-y-4">
            <div>
              <div className="text-sm text-[var(--text-muted)] mb-2">
                Equipment (Ready for Enchantment):
              </div>
              <ScrollArea className="h-32">
                <div className="space-y-1">
                  {equippedItems.map(({ slot, instance }) => (
                    <div
                      key={instance.instanceId}
                      className={`p-2 rounded border cursor-pointer text-sm transition-all
                        ${selectedEquipmentInstance === instance.instanceId
                          ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
                          : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
                        }
                      `}
                      onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
                      role="button"
                      tabIndex={0}
                      aria-label={`Select ${instance.name} (Ready for Enchantment)`}
                    >
                      <div className="flex items-center justify-between">
                        <span className="text-[var(--text-primary)]">{instance.name}</span>
                        <span className="text-xs text-[var(--text-muted)]">
                          ({instance.usedCapacity}/{instance.totalCapacity} cap)
                        </span>
                      </div>
                      <div className="text-xs text-[var(--color-success)] mt-1">
                        <CheckCircle size={10} className="inline mr-1" />
                        Ready
                      </div>
                    </div>
                  ))}
                  {equippedItems.length === 0 && (
                    <div className="text-center text-[var(--text-muted)] text-xs py-2">
                      No equipment ready for enchantment.
                      <br />
                      Prepare equipment first in the Prepare stage.
                    </div>
                  )}
                </div>
              </ScrollArea>
            </div>
            <div>
              <div className="text-sm text-[var(--text-muted)] mb-2">Design:</div>
              <ScrollArea className="h-32">
                <div className="space-y-1">
                  {enchantmentDesigns.map(design => (
                    <div
                      key={design.id}
                      className={`p-2 rounded border cursor-pointer text-sm transition-all
                        ${selectedDesign === design.id
                          ? 'border-[var(--mana-stellar)] bg-[var(--mana-stellar)]/10'
                          : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
                        }
                      `}
                      onClick={() => setSelectedDesign(design.id)}
                      role="button"
                      tabIndex={0}
                      aria-label={`Select design: ${design.name}`}
                    >
                      <span className="text-[var(--text-primary)]">{design.name}</span>
                      <span className="text-xs text-[var(--text-muted)] ml-2">
                        ({design.totalCapacityUsed} cap)
                      </span>
                    </div>
                  ))}
                  {enchantmentDesigns.length === 0 && (
                    <div className="text-center text-[var(--text-muted)] text-xs py-2">
                      No designs available. Create one in the Design stage.
                    </div>
                  )}
                </div>
              </ScrollArea>
            </div>
          </div>
        )}
      </GameCard>
      {/* Application Details */}
      <GameCard variant="default">
        <SectionHeader title="Apply Enchantment" />
        {!selectedEquipmentInstance || !selectedDesign ? (
          <div className="text-center text-[var(--text-muted)] py-8">
            Select equipment and a design
          </div>
        ) : applicationProgress ? (
          <div className="text-[var(--text-secondary)]">Application in progress...</div>
        ) : (
          (() => {
            const instance = equipmentInstances[selectedEquipmentInstance];
            if (!instance) return null;
            // Check if equipment is ready for enchantment
            const isReady = instance.tags?.includes('Ready for Enchantment');
            if (!isReady) {
              return (
                <div className="text-center text-[var(--color-danger)] py-8">
                  This equipment is not prepared for enchantment. Please prepare it in the Prepare stage first.
                </div>
              );
            }
            const design = enchantmentDesigns.find(d => d.id === selectedDesign);
            if (!design) return null;
            const availableCap = instance.totalCapacity - instance.usedCapacity;
            const canFit = availableCap >= design.totalCapacityUsed;
            const applicationTime = 2 + design.effects.reduce((t, e) => t + e.stacks, 0);
            const manaPerHour = 20 + design.effects.reduce((t, e) => t + e.stacks * 5, 0);
            return (
              <div className="space-y-4">
                <div className="text-lg font-semibold text-[var(--text-primary)]">{design.name}</div>
                <div className="text-sm text-[var(--text-secondary)]">→ {instance.name}</div>
                <div className="text-xs text-[var(--color-success)]">
                  <CheckCircle size={12} className="inline mr-1" />
                  Ready for Enchantment
                </div>
                <Separator className="bg-[var(--border-subtle)]" />
                <div className="space-y-2 text-sm">
                  <StatRow
                    label="Required Capacity:"
                    value={
                      <span className={canFit ? 'text-[var(--color-success)]' : 'text-[var(--color-danger)]'}>
                        {design.totalCapacityUsed} / {availableCap} available
                      </span>
                    }
                    highlight={canFit ? 'success' : 'danger'}
                  />
                  <StatRow
                    label="Application Time:"
                    value={`${applicationTime}h`}
                    highlight="default"
                  />
                  <StatRow
                    label="Mana per Hour:"
                    value={manaPerHour}
                    highlight="default"
                  />
                </div>
                <div className="text-sm text-[var(--text-muted)]">
                  Effects:
                  <ul className="list-disc list-inside mt-1">
                    {design.effects.map(eff => (
                      <li key={eff.effectId} className="text-[var(--text-secondary)]">
                        {ENCHANTMENT_EFFECTS[eff.effectId]?.name} x{eff.stacks}
                      </li>
                    ))}
                  </ul>
                </div>
                <ActionButton
                  className="w-full"
                  disabled={!canFit}
                  onClick={handleApply}
                >
                  <Sparkles size={16} className="mr-2" />
                  Apply Enchantment
                </ActionButton>
              </div>
            );
          })()
        )}
      </GameCard>
    </div>
  );
 }
 EnchantmentApplier.displayName = 'EnchantmentApplier';
@@ -0,0 +1,150 @@
 'use client';
 import { useState, useMemo } from 'react';
 import { GameCard } from '@/components/ui/game-card';
 import { Separator } from '@/components/ui/separator';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
 import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
 import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress, EquipmentCategory } from '@/lib/game/types';
 import type { EnchantmentDesignerProps } from './EnchantmentDesigner/types';
 import { EquipmentTypeSelector } from './EnchantmentDesigner/EquipmentTypeSelector';
 import { EffectSelector } from './EnchantmentDesigner/EffectSelector';
 import { SavedDesigns } from './EnchantmentDesigner/SavedDesigns';
 import { DesignForm } from './EnchantmentDesigner/DesignForm';
 import {
  getAvailableEffects,
  getIncompatibleEffects,
  getOwnedEquipmentTypes,
  getIncompatibilityReason,
  calculateDesignCapacityCost,
  getEquipmentCapacity,
  calculateDesignTime,
  addEffectToDesign,
  removeEffectFromDesign,
 } from './EnchantmentDesigner/utils';
 import { useCraftingStore } from '@/lib/game/stores';
 export function EnchantmentDesigner({
  selectedEquipmentType,
  setSelectedEquipmentType,
  selectedEffects,
  setSelectedEffects,
  designName,
  setDesignName,
  selectedDesign,
  setSelectedDesign,
 }: EnchantmentDesignerProps) {
  // Crafting store selectors
  const enchantmentDesigns = useCraftingStore((s) => s.enchantmentDesigns);
  const designProgress = useCraftingStore((s) => s.designProgress);
  const startDesigningEnchantment = useCraftingStore((s) => s.startDesigningEnchantment);
  const cancelDesign = useCraftingStore((s) => s.cancelDesign);
  const deleteDesign = useCraftingStore((s) => s.deleteDesign);
  const unlockedEffects = useCraftingStore((s) => s.unlockedEffects);
  const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
  // Calculate total capacity cost for current design
  const designCapacityCost = calculateDesignCapacityCost(selectedEffects, 0);
  // Get capacity limit for selected equipment type
  const selectedEquipmentCapacity = getEquipmentCapacity(selectedEquipmentType);
  // Calculate design time
  const designTime = calculateDesignTime(selectedEffects);
  // Add effect to design
  const addEffect = (effectId: string) => {
    addEffectToDesign(effectId, selectedEffects, 0, setSelectedEffects);
  };
  // Remove effect from design
  const removeEffect = (effectId: string) => {
    removeEffectFromDesign(effectId, selectedEffects, setSelectedEffects);
  };
  // Create design
  const handleCreateDesign = () => {
    if (!designName || !selectedEquipmentType || selectedEffects.length === 0) return;
    const success = startDesigningEnchantment(designName, selectedEquipmentType, selectedEffects);
    if (success) {
      // Reset form
      setDesignName('');
      setSelectedEquipmentType(null);
      setSelectedEffects([]);
    }
  };
  // Get available effects for selected equipment type (only unlocked ones)
  const availableEffects = getAvailableEffects(selectedEquipmentType, unlockedEffects);
  // Get incompatible effects (unlocked but not for this equipment type)
  const incompatibleEffects = getIncompatibleEffects(selectedEquipmentType, unlockedEffects);
  // Get equipment types that the player actually owns (has instances of)
  const ownedEquipmentTypes = getOwnedEquipmentTypes(equipmentInstances);
  // Get the reason why an effect is incompatible
  const getIncompatibilityReasonWrapper = (effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] }) => {
    return getIncompatibilityReason(effect, selectedEquipmentType);
  };
  // Render stage
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment Type Selection */}
      <EquipmentTypeSelector
        ownedEquipmentTypes={ownedEquipmentTypes}
        selectedEquipmentType={selectedEquipmentType}
        setSelectedEquipmentType={setSelectedEquipmentType}
        designProgress={designProgress}
        cancelDesign={cancelDesign}
      />
      {/* Effect Selection */}
      <GameCard variant="default">
        <EffectSelector
          selectedEquipmentType={selectedEquipmentType}
          selectedEffects={selectedEffects}
          setSelectedEffects={setSelectedEffects}
          availableEffects={availableEffects}
          incompatibleEffects={incompatibleEffects}
          enchantingLevel={0}
          efficiencyBonus={0}
          designProgress={designProgress}
          addEffect={addEffect}
          removeEffect={removeEffect}
          getIncompatibilityReason={getIncompatibilityReasonWrapper}
        />
        {/* Selected effects summary - only show when not in design progress and equipment type is selected */}
        {!designProgress && selectedEquipmentType && (
          <>
            <Separator className="bg-[var(--border-subtle)] my-2" />
            <DesignForm
              designName={designName}
              setDesignName={setDesignName}
              selectedEffects={selectedEffects}
              designCapacityCost={designCapacityCost}
              selectedEquipmentCapacity={selectedEquipmentCapacity}
              isOverCapacity={designCapacityCost > selectedEquipmentCapacity}
              designTime={designTime}
              selectedEquipmentType={selectedEquipmentType}
              handleCreateDesign={handleCreateDesign}
            />
          </>
        )}
      </GameCard>
      {/* Saved Designs */}
      <SavedDesigns
        enchantmentDesigns={enchantmentDesigns}
        selectedDesign={selectedDesign}
        setSelectedDesign={setSelectedDesign}
        deleteDesign={deleteDesign}
      />
    </div>
  );
 }
 EnchantmentDesigner.displayName = 'EnchantmentDesigner';
@@ -0,0 +1,52 @@
 'use client';
 import { ActionButton } from '@/components/ui/action-button';
 import { StatRow } from '@/components/ui/stat-row';
 import type { DesignFormProps } from './types';
 export function DesignForm({
  designName,
  setDesignName,
  selectedEffects,
  designCapacityCost,
  selectedEquipmentCapacity,
  isOverCapacity,
  designTime,
  selectedEquipmentType,
  handleCreateDesign,
 }: DesignFormProps) {
  return (
    <div className="space-y-2">
      <input
        type="text"
        placeholder="Design name..."
        value={designName}
        onChange={(e) => setDesignName(e.target.value)}
        className="w-full bg-[var(--bg-sunken)] border border-[var(--border-default)] rounded px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] focus:outline-none focus:border-[var(--border-focus)]"
        aria-label="Design name"
      />
      <StatRow
        label="Total Capacity:"
        value={
          <span className={isOverCapacity ? 'text-[var(--color-danger)]' : 'text-[var(--color-success)]'}>
            {designCapacityCost.toFixed(0)} / {selectedEquipmentCapacity}
          </span>
        }
      />
      <StatRow
        label="Design Time:"
        value={`${designTime.toFixed(1)}h`}
        highlight="default"
      />
      <ActionButton
        className="w-full"
        disabled={!designName || selectedEffects.length === 0 || isOverCapacity}
        onClick={handleCreateDesign}
      >
        {isOverCapacity ? 'Over Capacity!' : `Start Design (${designTime.toFixed(1)}h)`}
      </ActionButton>
    </div>
  );
 }
 DesignForm.displayName = 'DesignForm';
@@ -0,0 +1,152 @@
 'use client';
 import { GameCard } from '@/components/ui/game-card';
 import { SectionHeader } from '@/components/ui/section-header';
 import { ActionButton } from '@/components/ui/action-button';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { AlertCircle, Wand2, Plus, Minus } from 'lucide-react';
 import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
 import type { EffectSelectorProps } from './types';
 export function EffectSelector({
  selectedEquipmentType,
  selectedEffects,
  setSelectedEffects,
  availableEffects,
  incompatibleEffects,
  enchantingLevel,
  efficiencyBonus,
  designProgress,
  addEffect,
  removeEffect,
  getIncompatibilityReason,
 }: EffectSelectorProps) {
  return (
    <>
      {enchantingLevel < 1 ? (
        <div className="text-center text-[var(--text-muted)] py-8">
          <Wand2 className="w-12 h-12 mx-auto mb-2 opacity-50 text-[var(--text-disabled)]" />
          <p>Learn Enchanting skill to design enchantments</p>
        </div>
      ) : designProgress ? (
        <div className="space-y-2">
          <div className="text-sm text-[var(--text-secondary)]">Design in progress...</div>
          {designProgress.effects.map(eff => {
            const def = ENCHANTMENT_EFFECTS[eff.effectId];
            return (
              <div key={eff.effectId} className="flex justify-between text-sm text-[var(--text-primary)]">
                <span>{def?.name} x{eff.stacks}</span>
                <span className="text-[var(--text-muted)]">{eff.capacityCost} cap</span>
              </div>
            );
          })}
        </div>
      ) : !selectedEquipmentType ? (
        <div className="text-center text-[var(--text-muted)] py-8">
          Select an equipment type first
        </div>
      ) : (
        <>
          <ScrollArea className="h-48 mb-4">
            <div className="space-y-2">
              {/* Compatible Effects */}
              {availableEffects.map(effect => {
                const selected = selectedEffects.find(e => e.effectId === effect.id);
                const cost = calculateEffectCapacityCost(effect.id, (selected?.stacks || 0) + 1, efficiencyBonus);
                return (
                  <div
                    key={effect.id}
                    className={`p-2 rounded border transition-all
                      ${selected
                        ? 'border-[var(--mana-stellar)] bg-[var(--mana-stellar)]/10'
                        : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50'
                      }`}
                  >
                    <div className="flex justify-between items-start">
                      <div className="flex-1">
                        <div className="text-sm font-semibold text-[var(--text-primary)]">{effect.name}</div>
                        <div className="text-xs text-[var(--text-muted)]">{effect.description}</div>
                        <div className="text-xs text-[var(--text-disabled)] mt-1">
                          Cost: {effect.baseCapacityCost} cap | Max: {effect.maxStacks}
                        </div>
                      </div>
                      <div className="flex gap-1">
                        {selected && (
                          <ActionButton
                            size="sm"
                            variant="outline"
                            className="h-6 w-6 p-0"
                            onClick={() => removeEffect(effect.id)}
                          >
                            <Minus className="w-3 h-3" />
                          </ActionButton>
                        )}
                        <ActionButton
                          size="sm"
                          variant="outline"
                          className="h-6 w-6 p-0"
                          onClick={() => addEffect(effect.id)}
                          disabled={!selected && selectedEffects.length >= 5}
                        >
                          <Plus className="w-3 h-3" />
                        </ActionButton>
                      </div>
                    </div>
                    {selected && (
                      <Badge variant="outline" className="mt-1 text-xs border-[var(--mana-stellar)] text-[var(--mana-stellar)]">
                        {selected.stacks}/{effect.maxStacks}
                      </Badge>
                    )}
                  </div>
                );
              })}
              {/* Incompatible Effects - Requirement: greyed-out "Unavailable" section with tooltips */}
              {incompatibleEffects.length > 0 && (
                <>
                  <Separator className="bg-[var(--border-subtle)] my-2" />
                  <div className="text-xs font-semibold text-[var(--text-disabled)] uppercase tracking-wider mb-2">
                    Unavailable
                  </div>
                  {incompatibleEffects.map(effect => {
                    const reason = getIncompatibilityReason(effect);
                    return (
                      <TooltipProvider key={effect.id}>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <div
                              className="p-2 rounded border border-[var(--border-subtle)] bg-[var(--bg-sunken)]/30 opacity-50 cursor-not-allowed"
                            >
                              <div className="flex justify-between items-start">
                                <div className="flex-1">
                                  <div className="text-sm font-semibold text-[var(--text-disabled)]">{effect.name}</div>
                                  <div className="text-xs text-[var(--text-disabled)]">{effect.description}</div>
                                </div>
                                <AlertCircle size={14} className="text-[var(--text-disabled)]" />
                              </div>
                            </div>
                          </TooltipTrigger>
                          <TooltipContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
                            <p className="font-semibold">Incompatible Effect</p>
                            <p className="text-xs text-[var(--text-muted)] mt-1">{reason}</p>
                          </TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    );
                  })}
                </>
              )}
            </div>
          </ScrollArea>
        </>
      )}
    </>
  );
 }
 EffectSelector.displayName = 'EffectSelector';
@@ -0,0 +1,67 @@
 'use client';
 import { GameCard } from '@/components/ui/game-card';
 import { SectionHeader } from '@/components/ui/section-header';
 import { ActionButton } from '@/components/ui/action-button';
 import { Progress } from '@/components/ui/progress';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import type { EquipmentTypeSelectorProps } from './types';
 export function EquipmentTypeSelector({
  ownedEquipmentTypes,
  selectedEquipmentType,
  setSelectedEquipmentType,
  designProgress,
  cancelDesign,
 }: EquipmentTypeSelectorProps) {
  return (
    <GameCard variant="default">
      <SectionHeader title="1. Select Equipment Type" />
      {designProgress ? (
        <div className="space-y-3">
          <div className="text-sm text-[var(--text-secondary)]">
            Designing for: {designProgress.equipmentType}
          </div>
          <div className="text-sm font-semibold text-[var(--mana-light)]">{designProgress.name}</div>
          <Progress
            value={(designProgress.progress / designProgress.required) * 100}
            className="h-3 bg-[var(--bg-sunken)]"
          />
          <div className="flex justify-between text-xs text-[var(--text-muted)]">
            <span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
            <ActionButton size="sm" variant="outline" onClick={cancelDesign}>Cancel</ActionButton>
          </div>
        </div>
      ) : (
        <ScrollArea className="h-64">
          <div className="grid grid-cols-2 gap-2">
            {ownedEquipmentTypes.map(type => (
              <div
                key={type.id}
                className={`p-2 rounded border cursor-pointer transition-all
                  ${selectedEquipmentType === type.id
                    ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
                    : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
                  }`}
                onClick={() => setSelectedEquipmentType(type.id)}
                role="button"
                tabIndex={0}
                aria-label={`Select ${type.name}`}
              >
                <div className="text-sm font-semibold text-[var(--text-primary)]">{type.name}</div>
                <div className="text-xs text-[var(--text-muted)]">Cap: {type.baseCapacity}</div>
              </div>
            ))}
          </div>
          {ownedEquipmentTypes.length === 0 && (
            <div className="text-center text-[var(--text-muted)] py-4 text-sm">
              No equipment blueprints owned. Craft or find equipment blueprints first.
            </div>
          )}
        </ScrollArea>
      )}
    </GameCard>
  );
 }
 EquipmentTypeSelector.displayName = 'EquipmentTypeSelector';
@@ -0,0 +1,69 @@
 'use client';
 import { GameCard } from '@/components/ui/game-card';
 import { SectionHeader } from '@/components/ui/section-header';
 import { ActionButton } from '@/components/ui/action-button';
 import { Trash2 } from 'lucide-react';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
 import type { SavedDesignsProps } from './types';
 export function SavedDesigns({
  enchantmentDesigns,
  selectedDesign,
  setSelectedDesign,
  deleteDesign,
 }: SavedDesignsProps) {
  return (
    <GameCard variant="default" className="lg:col-span-2">
      <SectionHeader title={`Saved Designs (${enchantmentDesigns.length})`} />
      {enchantmentDesigns.length === 0 ? (
        <div className="text-center text-[var(--text-muted)] py-4">
          No saved designs yet
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          {enchantmentDesigns.map(design => (
            <div
              key={design.id}
              className={`p-3 rounded border cursor-pointer transition-all
                ${selectedDesign === design.id
                  ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
                  : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
                }`}
              onClick={() => setSelectedDesign(design.id)}
              role="button"
              tabIndex={0}
              aria-label={`Select design: ${design.name}`}
            >
              <div className="flex justify-between items-start">
                <div>
                  <div className="font-semibold text-[var(--text-primary)]">{design.name}</div>
                  <div className="text-xs text-[var(--text-muted)]">
                    {EQUIPMENT_TYPES[design.equipmentType]?.name}
                  </div>
                </div>
                <ActionButton
                  size="sm"
                  variant="ghost"
                  className="h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--color-danger)]"
                  onClick={(e) => {
                    e.stopPropagation();
                    deleteDesign(design.id);
                  }}
                  aria-label={`Delete design: ${design.name}`}
                >
                  <Trash2 className="w-4 h-4" />
                </ActionButton>
              </div>
              <div className="mt-2 text-xs text-[var(--text-muted)]">
                {design.effects.length} effects | {design.totalCapacityUsed} cap
              </div>
            </div>
          ))}
        </div>
      )}
    </GameCard>
  );
 }
 SavedDesigns.displayName = 'SavedDesigns';
@@ -0,0 +1,53 @@
 import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress, EquipmentCategory } from '@/lib/game/types';
 export interface EnchantmentDesignerProps {
  selectedEquipmentType: string | null;
  setSelectedEquipmentType: (type: string | null) => void;
  selectedEffects: DesignEffect[];
  setSelectedEffects: (effects: DesignEffect[]) => void;
  designName: string;
  setDesignName: (name: string) => void;
  selectedDesign: string | null;
  setSelectedDesign: (id: string | null) => void;
 }
 export interface EquipmentTypeSelectorProps {
  ownedEquipmentTypes: Array<{ id: string; name: string; baseCapacity: number }>;
  selectedEquipmentType: string | null;
  setSelectedEquipmentType: (type: string | null) => void;
  designProgress: EquipmentCraftingProgress | null;
  cancelDesign: () => void;
 }
 export interface EffectSelectorProps {
  selectedEquipmentType: string | null;
  selectedEffects: DesignEffect[];
  setSelectedEffects: (effects: DesignEffect[]) => void;
  availableEffects: Array<{ id: string; name: string; description: string; baseCapacityCost: number; maxStacks: number }>;
  incompatibleEffects: Array<{ id: string; name: string; description: string }>;
  enchantingLevel: number;
  efficiencyBonus: number;
  designProgress: EquipmentCraftingProgress | null;
  addEffect: (effectId: string) => void;
  removeEffect: (effectId: string) => void;
  getIncompatibilityReason: (effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] }) => string;
 }
 export interface SavedDesignsProps {
  enchantmentDesigns: EnchantmentDesign[];
  selectedDesign: string | null;
  setSelectedDesign: (id: string | null) => void;
  deleteDesign: (id: string) => void;
 }
 export interface DesignFormProps {
  designName: string;
  setDesignName: (name: string) => void;
  selectedEffects: DesignEffect[];
  designCapacityCost: number;
  selectedEquipmentCapacity: number;
  isOverCapacity: boolean;
  designTime: number;
  selectedEquipmentType: string | null;
  handleCreateDesign: () => void;
 }
@@ -0,0 +1,163 @@
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
 import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
 import type { DesignEffect, EquipmentInstance, EquipmentCategory } from '@/lib/game/types';
 import { calculateDesignCapacityCost as calcCapacityCost, calculateDesignTime as calcDesignTime } from '@/lib/game/crafting-design';
 /**
 * Get available effects for selected equipment type (only unlocked ones)
 * Requirement (task3 bug #7): Show incompatible enchantments in greyed-out "Unavailable" section
 */
 export function getAvailableEffects(
  selectedEquipmentType: string | null,
  unlockedEffects: string[]
 ) {
  if (!selectedEquipmentType) return [];
  const type = EQUIPMENT_TYPES[selectedEquipmentType];
  if (!type) return [];
  return Object.values(ENCHANTMENT_EFFECTS).filter(
    effect =>
      effect.allowedEquipmentCategories.includes(type.category) &&
      unlockedEffects.includes(effect.id)
  );
 }
 /**
 * Get incompatible effects (unlocked but not for this equipment type)
 */
 export function getIncompatibleEffects(
  selectedEquipmentType: string | null,
  unlockedEffects: string[]
 ) {
  if (!selectedEquipmentType) return [];
  const type = EQUIPMENT_TYPES[selectedEquipmentType];
  if (!type) return [];
  return Object.values(ENCHANTMENT_EFFECTS).filter(
    effect =>
      !effect.allowedEquipmentCategories.includes(type.category) &&
      unlockedEffects.includes(effect.id)
  );
 }
 /**
 * Get equipment types that the player actually owns (has instances of)
 * This ensures enchantment compatibility is based on owned items, not just blueprints
 */
 export function getOwnedEquipmentTypes(equipmentInstances: Record<string, EquipmentInstance>) {
  // Get all unique equipment type IDs from owned instances
  const ownedEquipmentTypeIds = new Set<string>();
  // Check all equipment instances the player owns
  for (const instance of Object.values(equipmentInstances || {})) {
    ownedEquipmentTypeIds.add(instance.typeId);
  }
  // Filter EQUIPMENT_TYPES to only include types the player owns
  return Object.values(EQUIPMENT_TYPES).filter(type => ownedEquipmentTypeIds.has(type.id));
 }
 /**
 * Get the reason why an effect is incompatible
 */
 export function getIncompatibilityReason(
  effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] },
  selectedEquipmentType: string | null
 ): string {
  if (!selectedEquipmentType) return 'No equipment selected';
  const type = EQUIPMENT_TYPES[selectedEquipmentType];
  if (!type) return 'Unknown equipment type';
  // Check what categories this effect is allowed for
  const allowedCategories = effect.allowedEquipmentCategories;
  const equipmentCategory = type.category;
  if (allowedCategories.includes(equipmentCategory)) {
    return 'Compatible';
  }
  // Provide specific reasons
  if (allowedCategories.includes('weapon' as EquipmentCategory) && equipmentCategory !== 'sword' && equipmentCategory !== 'caster' && equipmentCategory !== 'catalyst') {
    return `Requires a weapon (${allowedCategories.filter(c => ['sword', 'caster', 'catalyst'].includes(c)).join(', ')})`;
  }
  return `Requires ${allowedCategories.join(' or ')} equipment`;
 }
 /**
 * Calculate total capacity cost for current design
 * Delegates to canonical calculateDesignCapacityCost from crafting-design
 */
 export function calculateDesignCapacityCost(
  selectedEffects: DesignEffect[],
  efficiencyBonus: number
 ): number {
  return calcCapacityCost(selectedEffects, efficiencyBonus);
 }
 /**
 * Get capacity limit for selected equipment type
 */
 export function getEquipmentCapacity(selectedEquipmentType: string | null): number {
  return selectedEquipmentType ? EQUIPMENT_TYPES[selectedEquipmentType]?.baseCapacity || 0 : 0;
 }
 /**
 * Calculate design time
 * Delegates to canonical calculateDesignTime from crafting-design
 */
 export function calculateDesignTime(selectedEffects: DesignEffect[]): number {
  return calcDesignTime(selectedEffects);
 }
 /**
 * Add effect to design
 */
 export function addEffectToDesign(
  effectId: string,
  selectedEffects: DesignEffect[],
  efficiencyBonus: number,
  setSelectedEffects: (effects: DesignEffect[]) => void
 ) {
  const existing = selectedEffects.find(e => e.effectId === effectId);
  const effectDef = ENCHANTMENT_EFFECTS[effectId];
  if (!effectDef) return;
  if (existing) {
    if (existing.stacks < effectDef.maxStacks) {
      setSelectedEffects(selectedEffects.map(e =>
        e.effectId === effectId
          ? { ...e, stacks: e.stacks + 1 }
          : e
      ));
    }
  } else {
    setSelectedEffects([...selectedEffects, {
      effectId,
      stacks: 1,
      capacityCost: calculateEffectCapacityCost(effectId, 1, efficiencyBonus),
    }]);
  }
 }
 /**
 * Remove effect from design
 */
 export function removeEffectFromDesign(
  effectId: string,
  selectedEffects: DesignEffect[],
  setSelectedEffects: (effects: DesignEffect[]) => void
 ) {
  const existing = selectedEffects.find(e => e.effectId === effectId);
  if (!existing) return;
  if (existing.stacks > 1) {
    setSelectedEffects(selectedEffects.map(e =>
      e.effectId === effectId
        ? { ...e, stacks: e.stacks - 1 }
        : e
    ));
  } else {
    setSelectedEffects(selectedEffects.filter(e => e.effectId !== effectId));
  }
 }
@@ -0,0 +1,304 @@
 'use client';
 import { useState } from 'react';
 import { ActionButton } from '@/components/ui/action-button';
 import { GameCard } from '@/components/ui/game-card';
 import { SectionHeader } from '@/components/ui/section-header';
 import { StatRow } from '@/components/ui/stat-row';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
 import { Trash2, CheckCircle, AlertTriangle } from 'lucide-react';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
 import type { EquipmentInstance, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
 import type { EquipmentSlot } from '@/lib/game/types';
 import { fmt } from '@/lib/game/stores';
 import { useGameStore, useCraftingStore, useManaStore } from '@/lib/game/stores';
 import { useGameToast } from '@/components/game/GameToast';
 export interface EnchantmentPreparerProps {
  selectedEquipmentInstance: string | null;
  setSelectedEquipmentInstance: (id: string | null) => void;
 }
 export function EnchantmentPreparer({
  selectedEquipmentInstance,
  setSelectedEquipmentInstance,
 }: EnchantmentPreparerProps) {
  const showToast = useGameToast();
  const equippedInstances = useCraftingStore((s) => s.equippedInstances);
  const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
  const preparationProgress = useCraftingStore((s) => s.preparationProgress);
  const rawMana = useManaStore((s) => s.rawMana);
  const startPreparing = useCraftingStore((s) => s.startPreparing);
  const cancelPreparation = useCraftingStore((s) => s.cancelPreparation);
  // Get equipped items as array
  const equippedItems = Object.entries(equippedInstances)
    .filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
    .map(([slot, instanceId]) => ({
      slot: slot as EquipmentSlot,
      instance: equipmentInstances[instanceId!],
    }));
  // Confirm dialog state
  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
  const handleStartPreparation = () => {
    if (!selectedEquipmentInstance) return;
    const instance = equipmentInstances[selectedEquipmentInstance];
    if (!instance) return;
    // If item has existing enchantments, show confirm dialog (bug #8)
    if (instance.enchantments.length > 0) {
      setShowConfirmDialog(true);
    } else {
      startPreparingWithToast(selectedEquipmentInstance);
    }
  };
  const startPreparingWithToast = (instanceId: string) => {
    const instance = equipmentInstances[instanceId];
    startPreparing(instanceId);
    if (instance) {
      showToast('info', 'Preparation Started', `Preparing ${instance.name} for enchantment...`);
    }
  };
  const confirmPreparation = () => {
    if (selectedEquipmentInstance) {
      startPreparingWithToast(selectedEquipmentInstance);
      setShowConfirmDialog(false);
    }
  };
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment Selection */}
      <GameCard variant="default">
        <SectionHeader title="Select Equipment to Prepare" />
        {preparationProgress ? (
          <div className="space-y-3">
            <div className="text-sm text-[var(--text-secondary)]">
              Preparing: {equipmentInstances[preparationProgress.equipmentInstanceId]?.name}
            </div>
            <div className="h-3 bg-[var(--bg-sunken)] rounded-full overflow-hidden">
              <div
                className="h-full bg-[var(--color-warning)] transition-all duration-300"
                style={{ width: `${(preparationProgress.progress / preparationProgress.required) * 100}%` }}
              />
            </div>
            <div className="flex justify-between text-xs text-[var(--text-muted)]">
              <span>{preparationProgress.progress.toFixed(1)}h / {preparationProgress.required.toFixed(1)}h</span>
              <span>Mana paid: {fmt(preparationProgress.manaCostPaid)}</span>
            </div>
            <ActionButton size="sm" variant="outline" onClick={() => {
              cancelPreparation();
              showToast('warning', 'Preparation Cancelled', 'Equipment preparation was cancelled.');
            }}>Cancel</ActionButton>
          </div>
        ) : (
          <ScrollArea className="h-64">
            <div className="space-y-2">
              {equippedItems.map(({ slot, instance }) => {
                const hasEnchantments = instance.enchantments.length > 0;
                const isReady = instance.tags?.includes('Ready for Enchantment');
                return (
                  <div
                    key={instance.instanceId}
                    className={`p-3 rounded border cursor-pointer transition-all
                      ${selectedEquipmentInstance === instance.instanceId
                        ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
                        : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
                      }
                      ${hasEnchantments ? 'border-l-4 border-l-[var(--color-danger)]' : ''}
                      ${isReady ? 'border-l-4 border-l-[var(--color-success)]' : ''}
                    `}
                    onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
                    role="button"
                    tabIndex={0}
                    aria-label={`${instance.name}${hasEnchantments ? ' (has enchantments)' : ''}${isReady ? ' (ready for enchantment)' : ''}`}
                  >
                    <div className="flex justify-between">
                      <div>
                        <div className="font-semibold text-[var(--text-primary)]">{instance.name}</div>
                        <div className="text-xs text-[var(--text-muted)]">{slot}</div>
                        {hasEnchantments && (
                          <div className="text-xs text-[var(--color-danger)] mt-1">
                            <AlertTriangle size={12} className="inline mr-1" />
                            {instance.enchantments.length} enchantments - Preparation will remove them
                          </div>
                        )}
                        {isReady && (
                          <div className="text-xs text-[var(--color-success)] mt-1">
                            <CheckCircle size={12} className="inline mr-1" />
                            Ready for Enchantment
                          </div>
                        )}
                      </div>
                      <div className="text-right text-sm">
                        <div className="text-[var(--color-success)]">{instance.usedCapacity}/{instance.totalCapacity} cap</div>
                        <div className="text-xs text-[var(--text-muted)]">{instance.enchantments.length} enchants</div>
                        {/* Requirement: Visual badge for 'Ready for Enchantment' */}
                        {isReady && (
                          <Badge className="mt-1 bg-[var(--color-success)]/20 text-[var(--color-success)] border-[var(--color-success)]/40">
                            <CheckCircle size={10} className="mr-1" />
                            Ready
                          </Badge>
                        )}
                      </div>
                    </div>
                  </div>
                );
              })}
              {equippedItems.length === 0 && (
                <div className="text-center text-[var(--text-muted)] py-4">No equipped items</div>
              )}
            </div>
          </ScrollArea>
        )}
      </GameCard>
      {/* Preparation Details */}
      <GameCard variant="default">
        <SectionHeader title="Preparation Details" />
        {!selectedEquipmentInstance ? (
          <div className="text-center text-[var(--text-muted)] py-8">
            Select equipment to prepare
          </div>
        ) : preparationProgress ? (
          <div className="text-[var(--text-secondary)]">Preparation in progress...</div>
        ) : (
          (() => {
            const instance = equipmentInstances[selectedEquipmentInstance];
            if (!instance) return null;
            const hasEnchantments = instance.enchantments.length > 0;
            const isReady = instance.tags?.includes('Ready for Enchantment');
            const prepTime = 2 + Math.floor(instance.totalCapacity / 50);
            const manaCost = instance.totalCapacity * 10;
            // Calculate disenchant recovery
            const recoveryRate = 0.1; // Base recovery rate
            const totalRecoverable = instance.enchantments.reduce(
              (sum, e) => sum + Math.floor(e.actualCost * recoveryRate),
              0
            );
            return (
              <div className="space-y-4">
                <div className="text-lg font-semibold text-[var(--text-primary)]">{instance.name}</div>
                <Separator className="bg-[var(--border-subtle)]" />
                {/* Show warning if item has enchantments - Requirement: button reads "Prepare — removes existing enchantments" */}
                {hasEnchantments && !isReady && (
                  <div className="p-3 rounded border border-[var(--color-danger)]/50 bg-[var(--color-danger)]/10">
                    <div className="text-sm font-semibold text-[var(--color-danger)]">
                      <AlertTriangle size={14} className="inline mr-1" />
                      Equipment has enchantments
                    </div>
                    <div className="text-xs text-[var(--text-muted)] mt-1">
                      Preparation will remove all existing enchantments and recover some mana.
                    </div>
                    <div className="flex justify-between text-sm mt-2">
                      <span className="text-[var(--text-muted)]">Recoverable Mana:</span>
                      <span className="text-[var(--color-success)]">{fmt(totalRecoverable)}</span>
                    </div>
                  </div>
                )}
                {/* Show ready status */}
                {isReady && (
                  <div className="p-3 rounded border border-[var(--color-success)]/50 bg-[var(--color-success)]/10">
                    <div className="text-sm font-semibold text-[var(--color-success)]">
                      <CheckCircle size={14} className="inline mr-1" />
                      Ready for Enchantment
                    </div>
                    <div className="text-xs text-[var(--text-muted)] mt-1">
                      This item has been prepared and is ready for enchantment application.
                    </div>
                  </div>
                )}
                <div className="space-y-2 text-sm">
                  <StatRow
                    label="Capacity:"
                    value={`${instance.usedCapacity}/${instance.totalCapacity}`}
                    highlight="default"
                  />
                  <StatRow
                    label="Prep Time:"
                    value={`${prepTime}h`}
                    highlight="default"
                  />
                  <StatRow
                    label="Mana Cost:"
                    value={
                      <span className={rawMana < manaCost ? 'text-[var(--color-danger)]' : 'text-[var(--color-success)]'}>
                        {fmt(manaCost)}
                      </span>
                    }
                    highlight={rawMana < manaCost ? 'danger' : 'success'}
                  />
                </div>
                {/* Requirement (bug #8): Confirm dialog before proceeding if item has enchantments */}
                <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
                  <AlertDialogTrigger asChild>
                    <ActionButton
                      className="w-full"
                      disabled={rawMana < manaCost || isReady}
                      onClick={handleStartPreparation}
                    >
                      {hasEnchantments ? (
                        <>
                          <Trash2 size={16} className="mr-2" />
                          Prepare — removes existing enchantments ({prepTime}h, {fmt(manaCost)} mana)
                        </>
                      ) : (
                        <>Start Preparation ({prepTime}h, {fmt(manaCost)} mana)</>
                      )}
                    </ActionButton>
                  </AlertDialogTrigger>
                  <AlertDialogContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
                    <AlertDialogHeader>
                      <AlertDialogTitle className="text-[var(--color-danger)]">
                        <AlertTriangle className="inline mr-2" size={18} />
                        Confirm Preparation
                      </AlertDialogTitle>
                      <AlertDialogDescription className="text-[var(--text-secondary)]">
                        This equipment has {instance.enchantments.length} existing enchantment(s). Preparation will
                        <strong className="text-[var(--color-danger)]"> permanently remove</strong> all existing enchantments
                        and recover approximately <strong className="text-[var(--color-success)]">{fmt(totalRecoverable)} mana</strong>.
                        <div className="mt-2 p-2 bg-[var(--bg-sunken)]/50 rounded text-xs">
                          Equipment: {instance.name}<br />
                          Enchantments to remove: {instance.enchantments.length}
                        </div>
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel
                        className="bg-[var(--bg-sunken)] border-[var(--border-default)] text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
                        onClick={() => setShowConfirmDialog(false)}
                      >
                        Cancel
                      </AlertDialogCancel>
                      <AlertDialogAction
                        className="bg-[var(--color-danger)] hover:bg-[var(--interactive-danger-hover)] text-white"
                        onClick={confirmPreparation}
                      >
                        Yes, Remove Enchantments & Prepare
                      </AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </div>
            );
          })()
        )}
      </GameCard>
    </div>
  );
 }
 EnchantmentPreparer.displayName = 'EnchantmentPreparer';
@@ -0,0 +1,247 @@
 'use client';
 import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { Package, Sparkles, Trash2, Anvil } from 'lucide-react';
 import { CRAFTING_RECIPES, canCraftRecipe } from '@/lib/game/data/crafting-recipes';
 import { LOOT_DROPS, LOOT_RARITY_COLORS } from '@/lib/game/data/loot-drops';
 import type { LootInventory } from '@/lib/game/types';
 import { fmt } from '@/lib/game/stores';
 import { useCraftingStore, useCombatStore, useManaStore } from '@/lib/game/stores';
 // ─── Crafting Progress ───────────────────────────────────────────────────────
 function CraftingProgress({ progress }: { progress: { blueprintId: string; progress: number; required: number; manaSpent: number } }) {
  const recipe = CRAFTING_RECIPES[progress.blueprintId];
  const cancelEquipmentCrafting = useCraftingStore((s) => s.cancelEquipmentCrafting);
  return (
    <div className="space-y-3">
      <div className="text-sm text-gray-400">
        Crafting: {recipe?.name}
      </div>
      <Progress value={(progress.progress / progress.required) * 100} className="h-3" />
      <div className="flex justify-between text-xs text-gray-400">
        <span>{progress.progress.toFixed(1)}h / {progress.required.toFixed(1)}h</span>
        <span>Mana spent: {fmt(progress.manaSpent)}</span>
      </div>
      <Button size="sm" variant="outline" onClick={cancelEquipmentCrafting}>Cancel</Button>
    </div>
  );
 }
 // ─── Blueprint Card ───────────────────────────────────────────────────────────
 function BlueprintCard({ bpId, lootInventory, rawMana, isCrafting }: {
  bpId: string;
  lootInventory: LootInventory;
  rawMana: number;
  isCrafting: boolean;
 }) {
  const recipe = CRAFTING_RECIPES[bpId];
  if (!recipe) return null;
  const { canCraft, missingMaterials } = canCraftRecipe(recipe, lootInventory.materials, rawMana);
  const rarityStyle = LOOT_RARITY_COLORS[recipe.rarity];
  const startCraftingEquipment = useCraftingStore((s) => s.startCraftingEquipment);
  const currentAction = useCombatStore((s) => s.currentAction);
  return (
    <div
      className="p-3 rounded border bg-gray-800/50"
      style={{ borderColor: rarityStyle?.color }}
    >
      <div className="flex justify-between items-start mb-2">
        <div>
          <div className="font-semibold" style={{ color: rarityStyle?.color }}>
            {recipe.name}
          </div>
          <div className="text-xs text-gray-400 capitalize">{recipe.rarity}</div>
        </div>
        <Badge variant="outline" className="text-xs">
          {recipe.equipmentTypeId ? 'Equipment' : 'Other'}
        </Badge>
      </div>
      <div className="text-xs text-gray-400 mb-2">{recipe.description}</div>
      <Separator className="bg-gray-700 my-2" />
      <div className="text-xs space-y-1">
        <div className="text-gray-500">Materials:</div>
        {Object.entries(recipe.materials).map(([matId, amount]) => {
          const available = lootInventory.materials[matId] || 0;
          const matDrop = LOOT_DROPS[matId];
          const hasEnough = available >= amount;
          return (
            <div key={matId} className="flex justify-between">
              <span>{matDrop?.name || matId}</span>
              <span className={hasEnough ? 'text-green-400' : 'text-red-400'}>
                {available} / {amount}
              </span>
            </div>
          );
        })}
        <div className="flex justify-between mt-2">
          <span>Mana Cost:</span>
          <span className={rawMana >= recipe.manaCost ? 'text-green-400' : 'text-red-400'}>
            {fmt(recipe.manaCost)}
          </span>
        </div>
        <div className="flex justify-between">
          <span>Craft Time:</span>
          <span>{recipe.craftTime}h</span>
        </div>
      </div>
      <Button
        className="w-full mt-3"
        size="sm"
        disabled={!canCraft || isCrafting}
        onClick={() => startCraftingEquipment(bpId)}
      >
        {canCraft ? 'Craft Equipment' : 'Missing Resources'}
      </Button>
    </div>
  );
 }
 // ─── Blueprint List ───────────────────────────────────────────────────────────
 function BlueprintList({ lootInventory, rawMana }: { lootInventory: LootInventory; rawMana: number }) {
  const currentAction = useCombatStore((s) => s.currentAction);
  if (lootInventory.blueprints.length === 0) {
    return (
      <div className="text-center text-gray-400 py-4">
        <Package className="w-12 h-12 mx-auto mb-2 opacity-50" />
        <p>No blueprints discovered yet.</p>
        <p className="text-xs mt-1">Defeat guardians to find blueprints!</p>
      </div>
    );
  }
  return (
    <ScrollArea className="h-64">
      <div className="space-y-2">
        {lootInventory.blueprints.map(bpId => (
          <BlueprintCard
            key={bpId}
            bpId={bpId}
            lootInventory={lootInventory}
            rawMana={rawMana}
            isCrafting={currentAction === 'craft'}
          />
        ))}
      </div>
    </ScrollArea>
  );
 }
 // ─── Material Card ────────────────────────────────────────────────────────────
 function MaterialCard({ matId, count }: { matId: string; count: number }) {
  const drop = LOOT_DROPS[matId];
  if (!drop) return null;
  const rarityStyle = LOOT_RARITY_COLORS[drop.rarity];
  const deleteMaterial = useCraftingStore((s) => s.deleteMaterial);
  return (
    <div
      className="p-2 rounded border bg-gray-800/50 group relative"
      style={{ borderColor: rarityStyle?.color }}
    >
      <div className="flex items-start justify-between">
        <div>
          <div className="text-sm font-semibold" style={{ color: rarityStyle?.color }}>
            {drop.name}
          </div>
          <div className="text-xs text-gray-400">x{count}</div>
        </div>
        <Button
          variant="ghost"
          size="sm"
          className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 hover:bg-red-900/20"
          onClick={() => deleteMaterial(matId, count)}
        >
          <Trash2 className="w-3 h-3" />
        </Button>
      </div>
    </div>
  );
 }
 // ─── Materials Inventory ─────────────────────────────────────────────────────
 function MaterialsInventory({ materials }: { materials: Record<string, number> }) {
  const totalCount = Object.values(materials).reduce((a, b) => a + b, 0);
  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
        <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
          <Package className="w-4 h-4" />
          Materials ({totalCount})
        </CardTitle>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-64">
          {Object.keys(materials).length === 0 ? (
            <div className="text-center text-gray-400 py-4">
              <Sparkles className="w-12 h-12 mx-auto mb-2 opacity-50" />
              <p>No materials collected yet.</p>
              <p className="text-xs mt-1">Defeat floors to gather materials!</p>
            </div>
          ) : (
            <div className="grid grid-cols-2 gap-2">
              {Object.entries(materials).map(([matId, count]) => {
                if (count <= 0) return null;
                return <MaterialCard key={matId} matId={matId} count={count} />;
              })}
            </div>
          )}
        </ScrollArea>
      </CardContent>
    </Card>
  );
 }
 // ─── Main Component ───────────────────────────────────────────────────────────
 export function EquipmentCrafter() {
  const lootInventory = useCraftingStore((s) => s.lootInventory);
  const equipmentCraftingProgress = useCraftingStore((s) => s.equipmentCraftingProgress);
  const rawMana = useManaStore((s) => s.rawMana);
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
            <Anvil className="w-4 h-4" />
            Available Blueprints
          </CardTitle>
        </CardHeader>
        <CardContent>
          {equipmentCraftingProgress ? (
            <CraftingProgress progress={equipmentCraftingProgress} />
          ) : (
            <BlueprintList lootInventory={lootInventory} rawMana={rawMana} />
          )}
        </CardContent>
      </Card>
      <MaterialsInventory materials={lootInventory.materials} />
    </div>
  );
 }
 EquipmentCrafter.displayName = 'EquipmentCrafter';
@@ -0,0 +1,6 @@
 // Barrel file for crafting components
 export { EnchantmentDesigner } from './EnchantmentDesigner';
 export { EnchantmentPreparer } from './EnchantmentPreparer';
 export { EnchantmentApplier } from './EnchantmentApplier';
 export { EquipmentCrafter } from './EquipmentCrafter';
@@ -0,0 +1,80 @@
 'use client';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Sparkles, Unlock } from 'lucide-react';
 import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
 import { useAttunementStore } from '@/lib/game/stores';
 import { useManaStore } from '@/lib/game/stores';
 export function AttunementDebug() {
  const attunements = useAttunementStore((s) => s.attunements);
  const debugUnlockAttunement = useAttunementStore((s) => s.debugUnlockAttunement);
  const addAttunementXP = useAttunementStore((s) => s.addAttunementXP);
  const handleUnlockAttunement = (id: string) => {
    if (debugUnlockAttunement) {
      debugUnlockAttunement(id);
      // When unlocking Enchanter, also unlock the transference element
      if (id === 'enchanter') {
        useManaStore.getState().unlockElement('transference', 500);
      }
    }
  };
  const handleAddAttunementXP = (id: string, amount: number) => {
    if (addAttunementXP) {
      addAttunementXP(id, amount);
    }
  };
  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
        <CardTitle className="text-purple-400 text-sm flex items-center gap-2">
          <Sparkles className="w-4 h-4" />
          Attunements
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        {Object.entries(ATTUNEMENTS_DEF || {}).map(([id, def]) => {
          const isActive = attunements?.[id]?.active;
          const level = attunements?.[id]?.level || 1;
          const xp = attunements?.[id]?.experience || 0;
          return (
            <div key={id} className="flex items-center justify-between p-2 bg-gray-800/50 rounded">
              <div className="flex items-center gap-2">
                <span>{def.icon}</span>
                <div>
                  <div className="text-sm font-medium">{def.name}</div>
                  {isActive && (
                    <div className="text-xs text-gray-400">Lv.{level} • {xp} XP</div>
                  )}
                </div>
              </div>
              <div className="flex gap-2">
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => handleUnlockAttunement(id)}
                >
                  <Unlock className="w-3 h-3 mr-1" /> Unlock
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => handleAddAttunementXP(id, 100)}
                >
                  +100 XP
                </Button>
              </div>
            </div>
          );
        })}
      </CardContent>
    </Card>
  );
 }
 AttunementDebug.displayName = "AttunementDebug";
--- a/Show More
+++ b/Show More