RESET TO MONSTER DISCOVERY SYSTEM

CLAUDE.md

@@ -4,14 +4,14 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-This is a Svelte 5 + TypeScript + Vite single-page application for a Pokémon-style creature collection game called "Pictuary". It uses the latest Svelte 5 with runes syntax (`$state()`, `$derived()`, etc.).
+This is a Svelte 5 + TypeScript + Vite single-page application for a discovery-based creature collection game called "Pictuary". It uses the latest Svelte 5 with runes syntax (`$state()`, `$derived()`, etc.).
 
 ### Main Features
-- **Monster Generation**: Upload images → AI generates unique creatures ("Piclets") with stats and abilities
-- **Battle System**: Turn-based combat between player and AI opponents  
-- **Collection Management**: Roster of captured Piclets with detailed stats and move sets
-- **Creature Cards**: Trading card-style interface with type-based designs
-- **Image Processing**: AI-powered image captioning and creature concept generation
+- **Monster Discovery**: Upload images → AI identifies objects and generates/retrieves canonical "Piclets"
+- **Canonical System**: Each real-world object has ONE canonical Piclet, with variations tracked
+- **Collection Management**: Track discovered Piclets with metadata (discoverer, rarity, variations)
+- **Activity Feed**: Leaderboard showing top discoverers and recent finds
+- **Server Integration**: Connects to `../piclets-server/` for canonical Piclet database
 
 ## Essential Commands
 
@@ -47,18 +47,19 @@ npm run test:ui
 - Uses Svelte 5 runes syntax (not Svelte 4 syntax)
 
 ### Key Components
-- **Pages**: `Scanner.svelte` (main), `Pictuary.svelte` (collection), `Battle.svelte` (combat)
-- **Monster Generation**: `MonsterGenerator.svelte`, `MonsterResult.svelte` (redesigned with PicletCard preview)
-- **Battle System**: `BattleField.svelte`, `ActionButtons.svelte`, turn-based combat logic
-- **Piclet Management**: `PicletCard.svelte`, `PicletDetail.svelte`, `AddToRosterDialog.svelte`
-- **Database**: IndexedDB with `schema.ts` defining PicletInstance, BattleMove, Monster types
+- **Pages**: `Scanner.svelte` (discovery), `Pictuary.svelte` (collection), `Activity.svelte` (leaderboard/feed)
+- **Monster Discovery**: `PicletGenerator.svelte`, `PicletResult.svelte` with canonical/variation detection
+- **Server Integration**: Services for canonical Piclet lookup and creation
+- **Piclet Management**: `PicletCard.svelte`, `PicletDetail.svelte` with discovery metadata
+- **Database**: IndexedDB with `schema.ts` for local caching + server sync for canonical data
 
 ### Key Patterns
 1. **State Management**: Use `$state()` rune for reactive state
-2. **TypeScript**: All components should use `<script lang="ts">` 
+2. **TypeScript**: All components should use `<script lang="ts">`
 3. **Imports**: Use ES module imports, components are default exports
 4. **Styling**: Component styles are scoped by default, global styles in `src/app.css`
-5. **Database**: IndexedDB operations in `src/lib/db/` with async functions for CRUD operations
+5. **Database**: Hybrid approach - IndexedDB for local state, server API for canonical Piclets
+6. **Discovery Flow**: Caption → Extract object → Server lookup → Return canonical/variation/new
 
 ### Build Configuration
 - Vite handles bundling with `vite.config.ts`
@@ -84,20 +85,37 @@ const client = await window.gradioClient.Client.connect("space-name");
 ```
 
 **Current Gradio Connections:**
-- **Flux Image Generation**: `Fraser/flux` 
-- **Joy Caption**: `fancyfeast/joy-caption-alpha-two`
-- **Zephyr-7B Text Generation**: `Fraser/zephyr-7b`
+- **Flux Image Generation**: `Fraser/flux`
+- **Joy Caption**: `fancyfeast/joy-caption-alpha-two` (configured for object identification)
+- **Qwen Text Generation**: For generating Piclet concepts from object captions
+
+### Server Integration
+- **Endpoint**: `../piclets-server/` (local development)
+- **Canonical Lookup**: POST `/api/piclets/search` with object keywords
+- **Create Canonical**: POST `/api/piclets/canonical` for new discoveries
+- **Create Variation**: POST `/api/piclets/variation` with canonicalId
+- **Activity Feed**: GET `/api/activity/recent` for global discoveries
 
 **Build Notes:**
 - DO NOT install Gradio Client via npm (`npm install @gradio/client`) - it causes build failures
 - The CDN approach ensures compatibility with Vite bundling
 - All Gradio connections should use the established pattern from App.svelte
 
-### Text Generation Architecture
-The project uses a simple, direct approach:
-1. **Zephyr-7B**: Direct connection to `Fraser/zephyr-7b` space for all text generation
-2. **Direct API calls**: Components use `zephyrClient.predict("/chat", [...])` directly
-3. **No fallback complexity**: Simple, reliable single-client architecture
+### Discovery Architecture
+
+#### Object Identification Flow
+1. **Image Caption**: Joy Caption extracts object type and visual attributes
+2. **Object Extraction**: Parse caption for primary object ("pillow", "pyramid", etc.)
+3. **Server Lookup**: Search for exact match or close variations
+4. **Response Types**:
+   - **Exact Match**: Return existing canonical Piclet + increment scan count
+   - **Close Match**: Create variation of canonical + link to parent
+   - **No Match**: Create new canonical Piclet + register discoverer
+
+#### Rarity Calculation
+- Track `scanCount` per canonical Piclet
+- Rarity score = 1 / scanCount (lower scan count = higher rarity)
+- Display rarity tiers: Common, Uncommon, Rare, Epic, Legendary
 
 ## Troubleshooting
 
@@ -106,18 +124,58 @@ The project uses a simple, direct approach:
 - **Type errors**: Run `npm run check` to identify TypeScript issues before building
 - **Missing dependencies**: Run `npm install` if packages are missing
 
-### Monster Generation Issues  
-- **Name extraction problems**: Check `MonsterGenerator.svelte` - regex should extract content after `# Monster Name`
-- **Zephyr-7B connection failures**: Verify `Fraser/zephyr-7b` space is accessible
-- **Image processing errors**: Verify Flux and Joy Caption clients are properly connected
+### Discovery System Issues
+- **Object extraction**: Ensure Joy Caption is set to "Descriptive" mode with focus on object type
+- **Server connection**: Verify `../piclets-server/` is running on expected port
+- **Variation detection**: Check keyword matching algorithm for false positives
+- **Rarity calculation**: Ensure scanCount is properly incremented on each discovery
 
 ### Performance
 - **Large image files**: Consider image compression before upload
-- **Slow generation**: Zephyr-7B may take 10-30 seconds for complex monster concepts
-- **Battle lag**: IndexedDB operations are async - ensure proper await usage
+- **Server latency**: Cache canonical Piclets locally after first fetch
+- **Search optimization**: Use keyword indexing for O(1) lookups
+- **Activity feed**: Paginate results, cache recent discoveries
+
+## Implementation Strategy
+
+### Caption Processing
+```typescript
+// Example caption processing for object extraction
+const caption = "A velvet blue pillow with golden tassels on a couch";
+const primaryObject = extractObject(caption); // "pillow"
+const attributes = extractAttributes(caption); // ["velvet", "blue"]
+```
+
+### Server Communication
+```typescript
+// Canonical lookup
+const result = await fetch('/api/piclets/search', {
+  method: 'POST',
+  body: JSON.stringify({
+    object: 'pillow',
+    attributes: ['velvet', 'blue']
+  })
+});
+
+// Response types
+interface CanonicalMatch {
+  type: 'exact' | 'variation' | 'new';
+  piclet: PicletInstance;
+  canonicalId?: string;
+  discoveredBy?: string;
+  scanCount: number;
+}
+```
+
+### Database Schema Updates
+- Remove: level, xp, hp, attack, defense, speed, moves, battleStats
+- Add: canonicalId, isCanonical, discoveredBy, discoveredAt, scanCount, variations[]
+- Keep: typeId, primaryType, tier, imageUrl, description, concept
 
 ## Important Notes
 - This is NOT SvelteKit - no routing, SSR, or API routes
 - HMR preserves component state (can be toggled in vite.config.ts)
 - All paths in imports should be relative or use `$lib` alias for src/lib
-- IndexedDB is used for local storage - data persists between sessions
+- Hybrid storage: IndexedDB for local cache, server for canonical truth
+- Object abstraction level is critical - "pillow" not "decorative cushion"
+- Variations limited to 2-3 meaningful attributes (material, style, color)

pokemon_emerald_docs/DEFINING_ATTACKS.md

@@ -1,277 +0,0 @@
-# Defining Attacks in pokeemerald
-
-This document analyzes how pokeemerald defines battle actions (moves/attacks) and their effects, providing a clear system architecture for implementing similar battle mechanics in Pokemon-style games.
-
-## Architecture Overview
-
-pokeemerald uses a **multi-layered, data-driven approach** to define attacks:
-
-1. **Move Constants** - Unique IDs for each move
-2. **Move Data Structure** - Statistical properties and effect assignments  
-3. **Effect Constants** - Categorization of move behaviors
-4. **Battle Scripts** - Implementation logic for each effect
-5. **Script Commands** - Low-level operations for battle mechanics
-
-## Layer 1: Move Constants (`include/constants/moves.h`)
-
-Each move gets a unique constant identifier:
-
-```c
-#define MOVE_NONE 0
-#define MOVE_POUND 1  
-#define MOVE_KARATE_CHOP 2
-#define MOVE_DOUBLE_SLAP 3
-// ... continues for all moves
-```
-
-**Key Benefits:**
-- Type-safe move references throughout codebase
-- Easy to add new moves without conflicts
-- Clear naming convention
-
-## Layer 2: Move Data Structure (`src/data/battle_moves.h`)
-
-Each move is defined using the `BattleMove` struct:
-
-```c
-[MOVE_POUND] = {
-    .effect = EFFECT_HIT,              // What the move does
-    .power = 40,                       // Base damage
-    .type = TYPE_NORMAL,               // Move type (Normal, Fire, etc.)
-    .accuracy = 100,                   // Hit chance (0-100)
-    .pp = 35,                          // Power Points (usage count)
-    .secondaryEffectChance = 0,        // Chance of secondary effect
-    .target = MOVE_TARGET_SELECTED,    // Who can be targeted
-    .priority = 0,                     // Move speed priority
-    .flags = FLAG_MAKES_CONTACT | FLAG_PROTECT_AFFECTED | FLAG_KINGS_ROCK_AFFECTED,
-},
-```
-
-**Key Features:**
-- **Separation of Concerns**: Stats vs. behavior logic
-- **Flag System**: Modular properties (contact, protection, etc.)
-- **Secondary Effects**: Built-in chance system for additional effects
-- **Targeting System**: Flexible target selection
-
-## Layer 3: Effect Constants (`include/constants/battle_move_effects.h`)
-
-Effects categorize move behaviors into reusable types:
-
-```c
-#define EFFECT_HIT 0                    // Basic damage
-#define EFFECT_SLEEP 1                  // Status effect
-#define EFFECT_POISON_HIT 2             // Damage + poison
-#define EFFECT_ABSORB 3                 // Drain HP
-#define EFFECT_BURN_HIT 4               // Damage + burn
-#define EFFECT_MULTI_HIT 29             // Multiple strikes
-#define EFFECT_HIGH_CRITICAL 43         // Increased crit chance
-// ... 200+ different effects
-```
-
-**Benefits:**
-- **Reusability**: Multiple moves can share the same effect
-- **Extensibility**: New effects can be added without changing existing moves
-- **Organization**: Related behaviors grouped together
-
-## Layer 4: Battle Scripts (`data/battle_scripts_1.s`)
-
-Each effect maps to a battle script that defines the actual implementation:
-
-```assembly
-gBattleScriptsForMoveEffects::
-    .4byte BattleScript_EffectHit                    @ EFFECT_HIT
-    .4byte BattleScript_EffectSleep                  @ EFFECT_SLEEP
-    .4byte BattleScript_EffectPoisonHit              @ EFFECT_POISON_HIT
-    // ... maps all effects to their scripts
-```
-
-### Example Battle Scripts:
-
-**Basic Hit:**
-```assembly
-BattleScript_EffectHit::
-    attackcanceler          # Check if attack can proceed
-    accuracycheck BattleScript_PrintMoveMissed, ACC_CURR_MOVE
-    attackstring            # Display move name
-    ppreduce               # Consume PP
-    critcalc               # Calculate critical hits
-    damagecalc             # Calculate damage
-    typecalc               # Apply type effectiveness
-    adjustnormaldamage     # Apply damage modifications
-    attackanimation        # Play visual effects
-    waitanimation          # Wait for animation
-    effectivenesssound     # Play sound effects
-    # ... continues with damage application
-```
-
-**Poison Hit (Damage + Status):**
-```assembly  
-BattleScript_EffectPoisonHit::
-    setmoveeffect MOVE_EFFECT_POISON    # Set secondary effect
-    goto BattleScript_EffectHit         # Use standard hit logic
-```
-
-**Multi-Hit:**
-```assembly
-BattleScript_EffectMultiHit::
-    attackcanceler
-    accuracycheck BattleScript_PrintMoveMissed, ACC_CURR_MOVE
-    attackstring
-    ppreduce
-    setmultihitcounter 0               # Initialize hit counter
-    initmultihitstring                 # Setup hit count display
-BattleScript_MultiHitLoop::
-    jumpifhasnohp BS_ATTACKER, BattleScript_MultiHitEnd
-    jumpifhasnohp BS_TARGET, BattleScript_MultiHitPrintStrings
-    # ... hit logic with loop control
-```
-
-## Layer 5: Script Commands (`src/battle_script_commands.c`)
-
-Low-level commands that scripts use:
-
-- **Flow Control**: `jumpif*`, `goto`, `call`, `return`
-- **Battle Mechanics**: `accuracycheck`, `critcalc`, `damagecalc`
-- **Status Effects**: `setmoveeffect`, `seteffectprimary`
-- **Animation**: `attackanimation`, `waitanimation`
-- **State Management**: `attackcanceler`, `movevaluescleanup`
-
-## Complex Effect Patterns
-
-### 1. **Composite Effects** (Hit + Status)
-```c
-// Move data specifies base effect
-.effect = EFFECT_BURN_HIT,
-
-// Script combines damage with status
-BattleScript_EffectBurnHit::
-    setmoveeffect MOVE_EFFECT_BURN    # Add burn chance
-    goto BattleScript_EffectHit       # Execute standard damage
-```
-
-### 2. **Multi-Stage Effects** (Charging moves)
-```c
-// Sky Attack: charge turn, then hit
-.effect = EFFECT_SKY_ATTACK,
-
-BattleScript_EffectSkyAttack::
-    jumpifstatus2 BS_ATTACKER, STATUS2_MULTIPLETURNS, BattleScript_TwoTurnMovesSecondTurn
-    jumpifword CMP_COMMON_BITS, gHitMarker, HITMARKER_NO_ATTACKSTRING, BattleScript_TwoTurnMovesSecondTurn
-    # First turn: charge up
-    # Second turn: attack
-```
-
-### 3. **Variable Effects** (Power/behavior changes)
-```c
-// Moves that change behavior based on conditions
-jumpifnotmove MOVE_SURF, BattleScript_HitFromAtkCanceler
-jumpifnostatus3 BS_TARGET, STATUS3_UNDERWATER, BattleScript_HitFromAtkCanceler
-orword gHitMarker, HITMARKER_IGNORE_UNDERWATER
-setbyte sDMG_MULTIPLIER, 2    # Double damage underwater
-```
-
-## Key Design Principles
-
-### 1. **Separation of Data and Logic**
-- Move stats (power, accuracy, PP) separate from behavior logic
-- Enables easy balancing without code changes
-- Clear data-driven approach
-
-### 2. **Effect Reusability**  
-- Many moves share the same effect type
-- New moves can reuse existing effects
-- Reduces code duplication
-
-### 3. **Modular Flag System**
-```c
-.flags = FLAG_MAKES_CONTACT | FLAG_PROTECT_AFFECTED | FLAG_MIRROR_MOVE_AFFECTED
-```
-- Each flag represents an independent property
-- Easy to combine properties
-- Consistent interaction rules
-
-### 4. **Script-Based Flexibility**
-- Complex logic implemented in battle scripts  
-- Scripts can call other scripts (`goto`, `call`)
-- Allows for sophisticated move interactions
-
-### 5. **Centralized Effect Handling**
-- All effect implementations in one location
-- Easy to debug and maintain
-- Consistent patterns across similar effects
-
-## Implementation Recommendations
-
-For a Pokemon-style battle system:
-
-### 1. **Start with Core Structure**
-```c
-struct Move {
-    u16 effect;              // Links to effect implementation
-    u8 power;               // Base damage
-    u8 type;                // Element type  
-    u8 accuracy;            // Hit chance
-    u8 pp;                  // Usage count
-    u8 secondaryChance;     // Secondary effect probability
-    u8 target;              // Targeting rules
-    s8 priority;            // Speed priority
-    u32 flags;              // Behavior flags
-};
-```
-
-### 2. **Define Effect Categories**
-- Start with basic effects (HIT, SLEEP, POISON_HIT, ABSORB)
-- Add complex effects as needed
-- Group related effects together
-
-### 3. **Implement Script System**
-- Use command-based scripts for flexibility
-- Implement basic commands first (damage, accuracy, animation)
-- Add advanced commands for complex interactions
-
-### 4. **Use Flag-Based Properties**
-```c
-#define FLAG_CONTACT        (1 << 0)
-#define FLAG_PROTECTABLE    (1 << 1) 
-#define FLAG_REFLECTABLE    (1 << 2)
-#define FLAG_KINGS_ROCK     (1 << 3)
-```
-
-### 5. **Design for Extensibility**
-- Keep effect constants sequential for easy addition
-- Use lookup tables for effect-to-script mapping
-- Design script commands to be composable
-
-## Special Effects Implementation
-
-### Status Effects
-```c
-// In move data:
-.effect = EFFECT_POISON_HIT,
-.secondaryEffectChance = 30,
-
-// In script:
-setmoveeffect MOVE_EFFECT_POISON    // What status to apply
-goto BattleScript_EffectHit         // How to apply it
-```
-
-### Multi-Hit Moves
-```c
-// Requires special counter management
-setmultihitcounter 0               // Initialize
-BattleScript_MultiHitLoop::        // Loop label
-    // Hit logic here
-    decrementmultihit              // Reduce counter
-    jumpifnotdone BattleScript_MultiHitLoop // Continue if more hits
-```
-
-### Priority System
-```c
-// In move data:
-.priority = 1,    // +1 priority (Quick Attack)
-.priority = -6,   // -6 priority (Counter)
-
-// Processed during move selection phase
-```
-
-This architecture allows for clean separation between move definitions, their statistical properties, and their complex behavioral implementations, making it easy to add new moves while maintaining code organization and reusability.

pokemon_emerald_docs/battle_system_architecture.md

@@ -1,363 +0,0 @@
-# Pokemon Battle System Architecture Analysis
-
-## Overview
-
-The Pokemon Emerald battle system is a complex, state-driven architecture that orchestrates combat between multiple Pokemon. Rather than being a single monolithic system, it's composed of several interconnected subsystems that handle different aspects of battle functionality.
-
-## High-Level Architecture
-
-### Core Components
-
-1. **Battle State Machine** (`battle_main.c`)
-2. **Battle Controllers** (`battle_controller_*.c` files)
-3. **Animation System** (`battle_anim*.c` files)
-4. **Script Engine** (`battle_script_commands.c`)
-5. **User Interface** (`battle_interface.c`)
-6. **Data Management** (Pokemon storage and battle state)
-
-## 1. Battle State Management
-
-### Main Battle Loop
-The battle system is built around a main function pointer (`gBattleMainFunc`) that controls the overall battle flow:
-
-```c
-// Central battle state function pointer
-void (*gBattleMainFunc)(void);
-```
-
-### Key State Variables
-- `gBattleStruct` - Central battle state container
-- `gBattleMons[MAX_BATTLERS_COUNT]` - Active Pokemon data
-- `gBattlerPositions[]` - Battler position tracking
-- `gBattleTypeFlags` - Battle mode flags (wild, trainer, double, etc.)
-
-gBattleStruct definition:
-```c
-struct BattleStruct
-{
-    u8 turnEffectsTracker;
-    u8 turnEffectsBattlerId;
-    u8 unused_0;
-    u8 turnCountersTracker;
-    u8 wrappedMove[MAX_BATTLERS_COUNT * 2]; // Leftover from Ruby's ewram access.
-    u8 moveTarget[MAX_BATTLERS_COUNT];
-    u8 expGetterMonId;
-    u8 unused_1;
-    u8 wildVictorySong;
-    u8 dynamicMoveType;
-    u8 wrappedBy[MAX_BATTLERS_COUNT];
-    u16 assistPossibleMoves[PARTY_SIZE * MAX_MON_MOVES]; // Each of mons can know max 4 moves.
-    u8 focusPunchBattlerId;
-    u8 battlerPreventingSwitchout;
-    u8 moneyMultiplier;
-    u8 savedTurnActionNumber;
-    u8 switchInAbilitiesCounter;
-    u8 faintedActionsState;
-    u8 faintedActionsBattlerId;
-    u16 expValue;
-    u8 scriptPartyIdx; // for printing the nickname
-    u8 sentInPokes;
-    bool8 selectionScriptFinished[MAX_BATTLERS_COUNT];
-    u8 battlerPartyIndexes[MAX_BATTLERS_COUNT];
-    u8 monToSwitchIntoId[MAX_BATTLERS_COUNT];
-    u8 battlerPartyOrders[MAX_BATTLERS_COUNT][PARTY_SIZE / 2];
-    u8 runTries;
-    u8 caughtMonNick[POKEMON_NAME_LENGTH + 1];
-    u8 unused_2;
-    u8 safariGoNearCounter;
-    u8 safariPkblThrowCounter;
-    u8 safariEscapeFactor;
-    u8 safariCatchFactor;
-    u8 linkBattleVsSpriteId_V; // The letter "V"
-    u8 linkBattleVsSpriteId_S; // The letter "S"
-    u8 formToChangeInto;
-    u8 chosenMovePositions[MAX_BATTLERS_COUNT];
-    u8 stateIdAfterSelScript[MAX_BATTLERS_COUNT];
-    u8 unused_3[3];
-    u8 prevSelectedPartySlot;
-    u8 unused_4[2];
-    u8 stringMoveType;
-    u8 expGetterBattlerId;
-    u8 unused_5;
-    u8 absentBattlerFlags;
-    u8 palaceFlags; // First 4 bits are "is <= 50% HP and not asleep" for each battler, last 4 bits are selected moves to pass to AI
-    u8 field_93; // related to choosing pokemon?
-    u8 wallyBattleState;
-    u8 wallyMovesState;
-    u8 wallyWaitFrames;
-    u8 wallyMoveFrames;
-    u8 lastTakenMove[MAX_BATTLERS_COUNT * 2 * 2]; // Last move that a battler was hit with. This field seems to erroneously take 16 bytes instead of 8.
-    u16 hpOnSwitchout[NUM_BATTLE_SIDES];
-    u32 savedBattleTypeFlags;
-    u8 abilityPreventingSwitchout;
-    u8 hpScale;
-    u8 synchronizeMoveEffect;
-    bool8 anyMonHasTransformed;
-    void (*savedCallback)(void);
-    u16 usedHeldItems[MAX_BATTLERS_COUNT];
-    u8 chosenItem[MAX_BATTLERS_COUNT]; // why is this an u8?
-    u8 AI_itemType[2];
-    u8 AI_itemFlags[2];
-    u16 choicedMove[MAX_BATTLERS_COUNT];
-    u16 changedItems[MAX_BATTLERS_COUNT];
-    u8 intimidateBattler;
-    u8 switchInItemsCounter;
-    u8 arenaTurnCounter;
-    u8 turnSideTracker;
-    u8 unused_6[3];
-    u8 givenExpMons; // Bits for enemy party's Pokémon that gave exp to player's party.
-    u8 lastTakenMoveFrom[MAX_BATTLERS_COUNT * MAX_BATTLERS_COUNT * 2]; // a 3-D array [target][attacker][byte]
-    u16 castformPalette[NUM_CASTFORM_FORMS][16];
-    union {
-        struct LinkBattlerHeader linkBattlerHeader;
-        u32 battleVideo[2];
-    } multiBuffer;
-    u8 wishPerishSongState;
-    u8 wishPerishSongBattlerId;
-    bool8 overworldWeatherDone;
-    u8 atkCancellerTracker;
-    struct BattleTvMovePoints tvMovePoints;
-    struct BattleTv tv;
-    u8 unused_7[0x28];
-    u8 AI_monToSwitchIntoId[MAX_BATTLERS_COUNT];
-    s8 arenaMindPoints[2];
-    s8 arenaSkillPoints[2];
-    u16 arenaStartHp[2];
-    u8 arenaLostPlayerMons; // Bits for party member, lost as in referee's decision, not by fainting.
-    u8 arenaLostOpponentMons;
-    u8 alreadyStatusedMoveAttempt; // As bits for battlers; For example when using Thunder Wave on an already paralyzed Pokémon.
-};
-```
-
-### Battle Flow States
-The battle progresses through distinct phases:
-1. **Initialization** - Setup battlers, load graphics
-2. **Turn Selection** - Player/AI choose actions
-3. **Action Resolution** - Execute moves in priority order
-4. **Turn Cleanup** - Apply end-of-turn effects
-5. **Battle End** - Victory/defeat/capture resolution
-
-## 2. Controller Architecture
-
-### Battler Controllers
-Each battler (player, opponent, partner, etc.) has its own controller that handles:
-- Input processing
-- Animation requests
-- Data updates
-- UI management
-
-```c
-// Controller function pointer array
-void (*gBattlerControllerFuncs[MAX_BATTLERS_COUNT])(void);
-```
-
-### Controller Types
-- **Player Controller** (`battle_controller_player.c`) - Human input
-- **Opponent Controller** (`battle_controller_opponent.c`) - AI decisions
-- **Link Controllers** - Network battlers
-- **Special Controllers** - Safari Zone, Wally, etc.
-
-### Command System
-Controllers communicate via command buffers:
-```c
-// Controller commands (simplified)
-CONTROLLER_GETMONDATA      // Request Pokemon data
-CONTROLLER_CHOOSEACTION    // Select battle action
-CONTROLLER_MOVEANIMATION   // Play move animation
-CONTROLLER_HEALTHBARUPDATE // Update HP display
-```
-
-## 3. Animation System
-
-### Animation Pipeline
-Animations are script-driven and hierarchical:
-
-1. **Move Animation Selection** - Choose appropriate animation
-2. **Script Execution** - Run animation script commands
-3. **Sprite Management** - Create/animate visual elements
-4. **Audio Synchronization** - Play sound effects
-5. **Cleanup** - Remove temporary sprites
-
-### Animation Scripts
-Each move has an associated animation script:
-```c
-const u8 *const gBattleAnims_Moves[];
-```
-
-### Animation Commands
-Scripts use specialized commands:
-- `loadspritegfx` - Load sprite graphics
-- `createsprite` - Create animated sprite
-- `playse` - Play sound effect
-- `delay` - Wait specified frames
-- `monbg` - Modify Pokemon background
-
-### Visual Task System
-Complex animations use visual tasks for frame-by-frame control:
-```c
-u8 gAnimVisualTaskCount;  // Active visual task counter
-```
-
-## 4. Pokemon Data Storage and Retrieval
-
-### Battle Pokemon Structure
-Active Pokemon are stored in `gBattleMons[]`:
-```c
-struct BattlePokemon {
-    u16 species;
-    u16 attack;
-    u16 defense;
-    u16 speed;
-    u16 spAttack;
-    u16 spDefense;
-    u16 moves[MAX_MON_MOVES];
-    u32 hp;
-    u8 level;
-    u8 pp[MAX_MON_MOVES];
-    // ... status, abilities, etc.
-};
-```
-
-### Data Synchronization
-The system maintains consistency between:
-- **Party Data** - Full Pokemon in party array
-- **Battle Data** - Reduced battle-specific data
-- **Display Data** - UI representation
-
-### Data Flow
-1. **Load Phase** - Copy party data to battle structure
-2. **Battle Phase** - Modify battle data only
-3. **Update Phase** - Sync changes back to party
-
-## 5. Menu Systems and Input Handling
-
-### Action Selection Menu
-The main battle menu uses a state-driven approach:
-
-```c
-static void PlayerHandleChooseAction(void) {
-    // Present: Fight, Pokemon, Bag, Run options
-    // Handle input and set action type
-}
-```
-
-### Move Selection Interface
-Move selection involves:
-1. **Display Moves** - Show available moves with PP
-2. **Input Handling** - Process directional input
-3. **Move Info** - Display type, power, accuracy
-4. **Target Selection** - Choose targets for multi-target moves
-
-### Menu State Management
-- Cursor position tracking
-- Input validation
-- Visual feedback (highlighting, animations)
-- Transition between menu levels
-
-## 6. Action Processing and Effect Application
-
-### Turn Order Resolution
-Actions are sorted by priority:
-1. **Switch Pokemon** (highest priority)
-2. **Use Items**
-3. **Use Moves** (sorted by speed/priority)
-4. **Flee**
-
-### Move Execution Pipeline
-When a move is used:
-
-1. **Validation** - Check if move can be used
-2. **Target Selection** - Determine valid targets
-3. **Script Execution** - Run move's battle script
-4. **Animation** - Play visual/audio effects
-5. **Damage Calculation** - Apply damage formulas
-6. **Effect Application** - Apply status effects, stat changes
-7. **Cleanup** - Update battle state
-
-### Battle Script System
-Moves use script commands for effects:
-```c
-static void Cmd_attackstring(void);    // Display attack message
-static void Cmd_attackanimation(void); // Play attack animation
-static void Cmd_damagecalc(void);      // Calculate damage
-static void Cmd_healthbarupdate(void); // Update HP bar
-```
-
-### Gradual Information Delivery
-The system delivers information to players progressively:
-
-1. **Action Announcement** - "Pokemon used Move!"
-2. **Animation Phase** - Visual move animation
-3. **Result Messages** - Effectiveness, critical hits
-4. **Damage Application** - Gradual HP bar drain
-5. **Status Updates** - Additional effects
-6. **Turn Cleanup** - End-of-turn effects
-
-## 7. Key Programming Patterns
-
-### State Machine Architecture
-The battle system extensively uses function pointers for state management:
-```c
-void (*gBattleMainFunc)(void);                    // Main battle state
-void (*gBattlerControllerFuncs[])(void);         // Controller states
-void (*gAnimScriptCallback)(void);               // Animation states
-```
-
-### Command-Driven Controllers
-Controllers process commands via lookup tables:
-```c
-static void (*const sPlayerBufferCommands[])(void) = {
-    [CONTROLLER_GETMONDATA] = PlayerHandleGetMonData,
-    [CONTROLLER_CHOOSEACTION] = PlayerHandleChooseAction,
-    // ...
-};
-```
-
-### Script-Based Effects
-Both animations and move effects use bytecode scripts for flexibility:
-- Animation scripts control visual presentation
-- Battle scripts control game logic and effects
-
-### Asynchronous Processing
-The system handles multiple concurrent operations:
-- Animations can run while processing user input
-- Multiple battlers can be in different states
-- Background tasks handle gradual effects (HP drain, etc.)
-
-## 8. Memory Management
-
-### Battle Resources Structure
-```c
-struct BattleResources {
-    struct SecretBase *secretBase;
-    struct ResourceFlags *flags;
-    struct BattleScriptsStack *battleScriptsStack;
-    struct AI_ThinkingStruct *ai;
-    struct BattleHistory *battleHistory;
-};
-```
-
-### Dynamic Allocation
-- Battle resources are allocated at battle start
-- Freed when battle ends
-- Sprites and animations use temporary allocation
-
-## 9. Extension Points
-
-The architecture provides several extension mechanisms:
-- **New Move Effects** - Add scripts to move effect table
-- **Custom Animations** - Create new animation scripts
-- **Battle Types** - Add flags and specialized controllers
-- **AI Behaviors** - Extend AI decision trees
-
-## Summary
-
-The Pokemon battle system demonstrates sophisticated game architecture through:
-
-1. **Separation of Concerns** - Controllers, animations, scripts, and UI are distinct
-2. **Data-Driven Design** - Moves, animations, and effects defined in data tables
-3. **State Management** - Clear state machines for battle flow and individual components
-4. **Asynchronous Processing** - Multiple concurrent operations with proper coordination
-5. **Extensibility** - Modular design allows for easy addition of new content
-
-This architecture allows complex battle interactions while maintaining code organization and enabling the rich, interactive experience that defines Pokemon battles.

pokemon_emerald_docs/battle_system_mechanics.md

@@ -1,475 +0,0 @@
-# Pokémon Emerald Battle System Mechanics
-
-This document provides an in-depth technical reference for the underlying mechanics of the Pokémon Emerald battle system, including status effects, abilities, move mechanics, and turn execution flow.
-
-## Table of Contents
-
-1. [Status Effects](#status-effects)
-2. [Type Effectiveness System](#type-effectiveness-system)
-3. [Special Abilities](#special-abilities)
-4. [Move Mechanics](#move-mechanics)
-5. [Turn Execution Flow](#turn-execution-flow)
-6. [Battle State Management](#battle-state-management)
-
-## Status Effects
-
-### Overview
-
-Status effects in Pokémon Emerald are divided into three categories, each stored in separate bit fields within the `BattlePokemon` structure:
-
-- **STATUS1**: Non-volatile status conditions that persist outside of battle
-- **STATUS2**: Volatile status conditions that are removed when switching
-- **STATUS3**: Additional volatile effects and special states
-
-### Non-Volatile Status (STATUS1)
-
-Defined in `include/constants/battle.h:114-125`
-
-```c
-#define STATUS1_SLEEP            (1 << 0 | 1 << 1 | 1 << 2)  // 3 bits for turn count
-#define STATUS1_POISON           (1 << 3)
-#define STATUS1_BURN             (1 << 4)
-#define STATUS1_FREEZE           (1 << 5)
-#define STATUS1_PARALYSIS        (1 << 6)
-#define STATUS1_TOXIC_POISON     (1 << 7)
-#define STATUS1_TOXIC_COUNTER    (1 << 8 | 1 << 9 | 1 << 10 | 1 << 11)  // 4 bits for toxic counter
-```
-
-#### Sleep
-- **Duration**: 2-5 turns (stored in first 3 bits)
-- **Effect**: Prevents most actions except Snore and Sleep Talk
-- **Wake-up**: Checked at the start of the turn before action
-
-#### Poison
-- **Damage**: 1/8 of max HP at end of turn
-- **Field Effect**: Takes damage every 4 steps in overworld
-
-#### Burn
-- **Damage**: 1/8 of max HP at end of turn
-- **Attack Reduction**: Physical attack reduced to 50%
-- **Immunity**: Fire-type Pokémon cannot be burned
-
-#### Freeze
-- **Thaw Chance**: 20% at the start of each turn
-- **Instant Thaw**: Fire-type moves, Scald, or being hit by a Fire move
-- **Immunity**: Ice-type Pokémon cannot be frozen
-
-#### Paralysis
-- **Speed Reduction**: Speed reduced to 25% of normal
-- **Full Paralysis**: 25% chance to be unable to move
-- **Immunity**: Electric-type Pokémon cannot be paralyzed
-
-#### Toxic Poison
-- **Progressive Damage**: 1/16 HP on turn 1, 2/16 on turn 2, etc.
-- **Counter Storage**: Uses bits 8-11 to track damage progression
-
-### Volatile Status (STATUS2)
-
-Defined in `include/constants/battle.h:129-155`
-
-```c
-#define STATUS2_CONFUSION        (1 << 0 | 1 << 1 | 1 << 2)  // 3 bits for turn count
-#define STATUS2_FLINCHED         (1 << 3)
-#define STATUS2_UPROAR           (1 << 4 | 1 << 5 | 1 << 6)  // 3 bits for turn count
-#define STATUS2_BIDE             (1 << 8 | 1 << 9)           // 2 bits for turn count
-#define STATUS2_LOCK_CONFUSE     (1 << 10 | 1 << 11)        // Thrash/Outrage confusion
-#define STATUS2_MULTIPLETURNS    (1 << 12)
-#define STATUS2_WRAPPED          (1 << 13 | 1 << 14 | 1 << 15)  // 3 bits for turn count
-#define STATUS2_INFATUATION      (1 << 16 | 1 << 17 | 1 << 18 | 1 << 19)  // 4 bits, one per battler
-#define STATUS2_FOCUS_ENERGY     (1 << 20)
-#define STATUS2_TRANSFORMED      (1 << 21)
-#define STATUS2_RECHARGE         (1 << 22)
-#define STATUS2_RAGE             (1 << 23)
-#define STATUS2_SUBSTITUTE       (1 << 24)
-#define STATUS2_DESTINY_BOND     (1 << 25)
-#define STATUS2_ESCAPE_PREVENTION (1 << 26)
-#define STATUS2_NIGHTMARE        (1 << 27)
-#define STATUS2_CURSED           (1 << 28)
-#define STATUS2_FORESIGHT        (1 << 29)
-#define STATUS2_DEFENSE_CURL     (1 << 30)
-#define STATUS2_TORMENT          (1 << 31)
-```
-
-#### Key Volatile Effects
-
-**Confusion**
-- **Duration**: 2-5 turns
-- **Effect**: 50% chance to hit self with 40 power typeless physical attack
-- **Self-damage Calculation**: Uses attack stat against defense stat
-
-**Substitute**
-- **HP Cost**: 25% of max HP to create
-- **Effect**: Blocks most status moves and damage
-- **Breaking**: Substitute breaks when its HP reaches 0
-
-**Infatuation**
-- **Effect**: 50% chance to be immobilized by love
-- **Requirement**: Opposite gender (or same gender with certain abilities)
-- **Storage**: Uses 4 bits to track which battler caused infatuation
-
-### Additional Status (STATUS3)
-
-Defined in `include/constants/battle.h:158-178`
-
-```c
-#define STATUS3_LEECHSEED        (1 << 2)
-#define STATUS3_ALWAYS_HITS      (1 << 3 | 1 << 4)  // Lock-On/Mind Reader
-#define STATUS3_PERISH_SONG      (1 << 5)
-#define STATUS3_ON_AIR           (1 << 6)            // Fly/Bounce
-#define STATUS3_UNDERGROUND      (1 << 7)            // Dig
-#define STATUS3_MINIMIZED        (1 << 8)
-#define STATUS3_CHARGED_UP       (1 << 9)            // Charge
-#define STATUS3_ROOTED           (1 << 10)           // Ingrain
-#define STATUS3_YAWN             (1 << 11 | 1 << 12) // Turn counter
-#define STATUS3_IMPRISONED_OTHERS (1 << 13)
-#define STATUS3_GRUDGE           (1 << 14)
-#define STATUS3_UNDERWATER       (1 << 18)           // Dive
-#define STATUS3_SEMI_INVULNERABLE (STATUS3_UNDERGROUND | STATUS3_ON_AIR | STATUS3_UNDERWATER)
-```
-
-## Type Effectiveness System
-
-### Type Chart Implementation
-
-Type effectiveness is stored in `gTypeEffectiveness[]` array in `src/battle_main.c`. The format is:
-
-```c
-[Attacking Type, Defending Type, Multiplier, ...]
-```
-
-Multiplier values:
-- `TYPE_MUL_NO_EFFECT` (0): No damage (0x multiplier)
-- `TYPE_MUL_NOT_EFFECTIVE` (5): Not very effective (0.5x multiplier)  
-- `TYPE_MUL_NORMAL` (10): Normal damage (1x multiplier)
-- `TYPE_MUL_SUPER_EFFECTIVE` (20): Super effective (2x multiplier)
-
-### Ground vs Flying Interaction
-
-The type chart includes:
-```c
-TYPE_GROUND, TYPE_FLYING, TYPE_MUL_NO_EFFECT
-```
-
-This is why Earthquake and other Ground-type moves don't affect Flying-type Pokémon - they receive a 0x damage multiplier.
-
-### Type Calculation Process
-
-1. **Base Calculation**: In `Cmd_typecalc()` function
-2. **Ability Checks**: Levitate grants immunity to Ground moves
-3. **Item Effects**: Type-enhancing items modify damage
-4. **STAB Calculation**: Same Type Attack Bonus (1.5x) if move type matches user type
-
-## Special Abilities
-
-### Ability System Overview
-
-Abilities are passive effects that can trigger at various points during battle. They are defined in `include/constants/abilities.h` and processed by `AbilityBattleEffects()` in `src/battle_util.c`.
-
-### Key Ability: Levitate
-
-```c
-#define ABILITY_LEVITATE 26
-```
-
-**Effect**: Grants immunity to Ground-type moves
-**Implementation**: Checked in multiple locations:
-- `Cmd_typecalc()` - During damage calculation
-- `CheckWonderGuardAndLevitate()` - For ability-specific immunity
-- Move target validation
-
-### Ability Processing Points
-
-Abilities can trigger at:
-1. **Switch-in**: Intimidate, Drizzle, Drought, Sand Stream
-2. **Before Move**: Truant preventing action
-3. **Damage Calculation**: Thick Fat, Filter, Solid Rock
-4. **After Damage**: Rough Skin, Iron Barbs, Aftermath
-5. **Status Application**: Immunity preventing poison
-6. **End of Turn**: Speed Boost, Poison Heal
-
-## Move Mechanics
-
-### Move Data Structure
-
-From `include/pokemon.h:327-338`:
-
-```c
-struct BattleMove
-{
-    u8 effect;          // Move effect ID
-    u8 power;           // Base power
-    u8 type;            // Move type
-    u8 accuracy;        // Accuracy (0-100)
-    u8 pp;              // Base PP
-    u8 secondaryEffectChance;  // % chance for secondary effect
-    u8 target;          // Target selection
-    s8 priority;        // Priority bracket (-7 to +5)
-    u8 flags;           // Move properties flags
-};
-```
-
-### Move Flags
-
-From `include/constants/pokemon.h:208-213`:
-
-```c
-#define FLAG_MAKES_CONTACT       (1 << 0)  // Triggers contact abilities
-#define FLAG_PROTECT_AFFECTED    (1 << 1)  // Blocked by Protect/Detect
-#define FLAG_MAGIC_COAT_AFFECTED (1 << 2)  // Reflected by Magic Coat
-#define FLAG_SNATCH_AFFECTED     (1 << 3)  // Stolen by Snatch
-#define FLAG_MIRROR_MOVE_AFFECTED (1 << 4) // Copyable by Mirror Move
-#define FLAG_KINGS_ROCK_AFFECTED (1 << 5)  // Can cause flinch with King's Rock
-```
-
-### Protect/Detect Mechanics
-
-**Implementation**: `Cmd_setprotectlike()` in `src/battle_script_commands.c`
-
-1. **Success Rate Calculation**:
-   - First use: 100% success
-   - Consecutive uses: Success rate halves each time
-   - Stored in `sProtectSuccessRates[]` array
-
-2. **Protection State**:
-   ```c
-   gProtectStructs[battler].protected = 1;  // For Protect/Detect
-   gProtectStructs[battler].endured = 1;    // For Endure
-   ```
-
-3. **Move Blocking**:
-   - Checked in `Cmd_attackcanceler()` via `DEFENDER_IS_PROTECTED` macro
-   - Only moves with `FLAG_PROTECT_AFFECTED` are blocked
-   - Some moves bypass Protect (Feint, Shadow Force, etc.)
-
-### Multi-Target Move Mechanics
-
-Target selection types:
-- `MOVE_TARGET_SELECTED`: Single target chosen by player
-- `MOVE_TARGET_BOTH`: Hits both opponents in double battles
-- `MOVE_TARGET_FOES_AND_ALLY`: Hits all Pokémon except user
-- `MOVE_TARGET_ALL_BATTLERS`: Hits all Pokémon including user
-
-Damage reduction in multi-battles:
-- Moves hitting multiple targets deal 75% damage to each
-
-## Turn Execution Flow
-
-### Complete Turn Sequence
-
-The battle system executes turns through a series of carefully ordered phases:
-
-#### 1. Action Selection Phase
-**Function**: `HandleTurnActionSelectionState()`
-
-- Players and AI select actions (Fight/Pokémon/Bag/Run)
-- Move and target selection for Fight actions
-- All selections stored in `gChosenActionByBattler[]`
-
-#### 2. Turn Order Determination
-**Function**: `SetActionsAndBattlersTurnOrder()`
-
-Order priority:
-1. **Pursuit** (if target is switching)
-2. **Switching Pokémon**
-3. **Using Items**
-4. **Quick Claw activation** (20% chance to go first)
-5. **Move Priority** (-7 to +5, higher goes first)
-6. **Speed Stat** (higher goes first, with Speed ties being random)
-
-Arrays populated:
-- `gActionsByTurnOrder[]` - What action each slot will perform
-- `gBattlerByTurnOrder[]` - Which battler occupies each slot
-
-#### 3. Pre-Turn Checks
-**Function**: `CheckFocusPunch_ClearVarsBeforeTurnStarts()`
-
-- Focus Punch charging message
-- Clear temporary battle variables
-- Initialize turn counters
-
-#### 4. Action Execution
-**Function**: `RunTurnActionsFunctions()`
-
-For each action in turn order:
-
-##### Move Execution Pipeline
-When `B_ACTION_USE_MOVE` is processed:
-
-1. **Attack Canceler** (`Cmd_attackcanceler`)
-   - Sleep check (can only use Snore/Sleep Talk)
-   - Freeze check (20% thaw chance)
-   - Paralysis check (25% full paralysis)
-   - Confusion check (50% self-hit)
-   - Flinch check
-   - Disable/Taunt/Imprison checks
-   - Protect check (for protected targets)
-   - Pressure PP deduction
-
-2. **Accuracy Check** (`Cmd_accuracycheck`)
-   - Base accuracy calculation
-   - Accuracy/Evasion stat stages
-   - Ability modifications (Compound Eyes, Sand Veil)
-   - Weather effects (Thunder in rain)
-
-3. **Attack String** (`Cmd_attackstring`)
-   - Display "[Pokémon] used [Move]!"
-
-4. **PP Reduction** (`Cmd_ppreduce`)
-   - Deduct PP from move (affected by Pressure)
-
-5. **Critical Hit Calculation** (`Cmd_critcalc`)
-   - Base 1/16 chance (6.25%)
-   - Increased by Focus Energy, high crit moves, items
-   - Cannot crit if target has Battle Armor/Shell Armor
-
-6. **Damage Calculation** (`Cmd_damagecalc`)
-   ```
-   Damage = ((2 × Level / 5 + 2) × Power × Attack / Defense / 50 + 2)
-            × STAB × Type × Random(85-100)/100
-   ```
-
-7. **Type Effectiveness** (`Cmd_typecalc`)
-   - Apply type chart multipliers
-   - Check abilities (Levitate, Wonder Guard)
-   - Display effectiveness messages
-
-8. **Attack Animation** (`Cmd_attackanimation`)
-   - Play move animation and sound effects
-
-9. **HP Update** (`Cmd_healthbarupdate`)
-   - Animate HP bar decrease
-   - Apply Substitute damage if applicable
-
-10. **Result Messages** (`Cmd_resultmessage`)
-    - "It's super effective!"
-    - "It's not very effective..."
-    - Critical hit notification
-
-11. **Secondary Effects** (`Cmd_moveend`)
-    - Status conditions
-    - Stat changes
-    - Additional effects
-
-##### Other Action Types
-
-**B_ACTION_SWITCH**:
-- Pursuit check and execution
-- Return Pokémon
-- Send out new Pokémon
-- Entry hazard damage
-- Switch-in abilities
-
-**B_ACTION_USE_ITEM**:
-- Item effect application
-- Item consumption
-- Bag pocket update
-
-**B_ACTION_RUN**:
-- Escape attempt calculation
-- Battle end if successful
-
-#### 5. End of Turn Phase
-**Function**: `HandleEndTurn_BattleTerrain()`
-
-Processes in order:
-1. **Future Sight/Doom Desire** damage
-2. **Wish** healing
-3. **Weather** damage (Sandstorm, Hail)
-4. **Status** damage (Burn, Poison, Toxic)
-5. **Leech Seed** HP drain
-6. **Nightmare** damage
-7. **Curse** damage
-8. **Wrap/Bind** damage
-9. **Uproar** wake-up and prevention
-10. **Perish Song** counter
-11. **Reflect/Light Screen** duration
-12. **Safeguard/Mist** duration
-13. **Trick Room** duration (Gen 4+ feature)
-14. **Gravity** duration (Gen 4+ feature)
-15. **Item effects** (Leftovers, Black Sludge)
-16. **Ability effects** (Speed Boost, Moody)
-
-#### 6. Faint Handling
-**Function**: `HandleFaintedMonActions()`
-
-- Check for fainted Pokémon
-- Experience gain calculation
-- EVs distribution
-- Display faint messages
-- Force switches if needed
-
-#### 7. Turn Wrap-up
-
-- Increment turn counter
-- Check win/loss conditions
-- Return to Action Selection or end battle
-
-### Battle State Machine
-
-The entire battle flow is controlled by function pointers:
-
-```c
-void (*gBattleMainFunc)(void);  // Main battle state
-```
-
-Key states:
-- `HandleNewBattleRamData` - Initialize battle
-- `TryDoEventsBeforeFirstTurn` - Entry hazards, weather
-- `HandleTurnActionSelectionState` - Action selection
-- `SetActionsAndBattlersTurnOrder` - Sort actions
-- `RunTurnActionsFunctions` - Execute turn
-- `HandleEndTurn_FinishBattle` - Battle cleanup
-
-## Battle State Management
-
-### Core Data Structures
-
-**BattlePokemon** - Active Pokémon data:
-```c
-struct BattlePokemon {
-    u16 species;
-    u16 attack, defense, speed, spAttack, spDefense;
-    u16 moves[MAX_MON_MOVES];
-    u32 hp, maxHP;
-    u32 status1;  // Non-volatile status
-    u32 status2;  // Volatile status
-    u32 status3;  // Additional effects
-    u8 ability;
-    u8 type1, type2;
-    // ... more fields
-};
-```
-
-**BattleStruct** - Global battle state:
-- Turn counters and trackers
-- Move history
-- Field effects
-- Battle mode flags
-- AI data
-
-### Memory Layout
-
-Battle data is organized into:
-- **EWRAM**: Fast access for frequently used data
-- **Battle Resources**: Dynamically allocated at battle start
-- **Sprite Data**: Separate allocation for graphics
-
-### Save State Integration
-
-During battle:
-- Party Pokémon are copied to battle structures
-- Changes applied to battle copies only
-- On battle end, sync back to party (HP, PP, status, etc.)
-
-This architecture ensures battle calculations don't corrupt party data and allows for move preview without committing changes.
-
-## Summary
-
-The Pokémon Emerald battle system is a sophisticated state machine that processes turns through clearly defined phases. Its modular architecture separates concerns between controllers (input), scripts (logic), animations (presentation), and data management. The extensive use of bit flags for status conditions and move properties allows for complex interactions while maintaining performance on GBA hardware.
-
-Key design principles:
-- **Deterministic**: Same inputs produce same results (except RNG)
-- **Modular**: Each phase has clear responsibilities
-- **Extensible**: New effects can be added via scripts
-- **Efficient**: Bit manipulation and careful memory management
-- **Faithful**: Accurately replicates original game mechanics

src/App.svelte

@@ -6,7 +6,7 @@
   import ProgressBar from './lib/components/Layout/ProgressBar.svelte';
   import TabBar, { type TabId } from './lib/components/Layout/TabBar.svelte';
   import Scanner from './lib/components/Pages/Scanner.svelte';
-  import Encounters from './lib/components/Pages/Encounters.svelte';
+  import Activity from './lib/components/Pages/Activity.svelte';
   import Pictuary from './lib/components/Pages/Pictuary.svelte';
   import type { HuggingFaceLibs, GradioLibs, GradioClient } from './lib/types';
   // import { setQwenClientResetter } from './lib/utils/qwenTimeout'; // Unused since qwen is disabled
@@ -32,7 +32,7 @@
   // Tab names mapping
   const tabNames: Record<TabId, string> = {
     scanner: 'Scanner',
-    encounters: 'Encounters',
+    activity: 'Activity',
     pictuary: 'Pictuary'
   };
   
@@ -175,8 +175,8 @@
         {joyCaptionClient}
         {qwenClient}
       />
-    {:else if activeTab === 'encounters'}
-      <Encounters />
+    {:else if activeTab === 'activity'}
+      <Activity />
     {:else if activeTab === 'pictuary'}
       <Pictuary />
     {/if}

src/lib/components/Battle/ActionButtons.svelte

@@ -1,113 +0,0 @@
-<script lang="ts">
-  import ActionViewSelector, { type ActionView } from './ActionViewSelector.svelte';
-  import type { PicletInstance, BattleMove } from '$lib/db/schema';
-  import type { BattleState } from '$lib/battle-engine/types';
-  import { getUnlockedMoves } from '$lib/services/unlockLevels';
-  
-  export let isWildBattle: boolean;
-  export let playerPiclet: PicletInstance;
-  export let enemyPiclet: PicletInstance | null = null;
-  export let availablePiclets: PicletInstance[] = [];
-  export let processingTurn: boolean = false;
-  export let battleState: BattleState | undefined = undefined;
-  export let capturePercentage: number = 0;
-  export let onAction: (action: string) => void;
-  export let onMoveSelect: (move: BattleMove) => void = () => {};
-  export let onPicletSelect: (piclet: PicletInstance) => void = () => {};
-  
-  let currentView: ActionView = 'main';
-  
-  // Only show unlocked moves in battle
-  $: unlockedMoves = getUnlockedMoves(playerPiclet.moves, playerPiclet.level);
-  
-  function handleViewChange(view: ActionView) {
-    currentView = view;
-  }
-  
-  function handleMoveSelected(move: BattleMove) {
-    currentView = 'main';
-    onMoveSelect(move);
-  }
-  
-  function handlePicletSelected(piclet: PicletInstance) {
-    currentView = 'main';
-    onPicletSelect(piclet);
-  }
-  
-  function handleCaptureAttempt() {
-    currentView = 'main';
-    onAction('catch');
-  }
-  
-  // Add Run button outside of the action selector
-  function handleRun() {
-    onAction('run');
-  }
-</script>
-
-<div class="battle-actions">
-  <ActionViewSelector 
-    {currentView}
-    onViewChange={handleViewChange}
-    moves={unlockedMoves}
-    {availablePiclets}
-    {enemyPiclet}
-    {isWildBattle}
-    {battleState}
-    {capturePercentage}
-    onMoveSelected={handleMoveSelected}
-    onPicletSelected={handlePicletSelected}
-    onCaptureAttempt={handleCaptureAttempt}
-    currentPicletId={playerPiclet.id}
-    {processingTurn}
-  />
-  
-  <!-- Run button (always visible) -->
-  <button 
-    class="run-button" 
-    on:click={handleRun}
-    disabled={processingTurn}
-  >
-    <span class="run-icon">🏃</span>
-    <span>Run</span>
-  </button>
-</div>
-
-<style>
-  .battle-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    height: 100%;
-  }
-  
-  .run-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 12px 24px;
-    background: #ff3b30;
-    color: white;
-    border: none;
-    border-radius: 12px;
-    font-size: 17px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-  
-  .run-button:active:not(:disabled) {
-    transform: scale(0.95);
-    background: #d70015;
-  }
-  
-  .run-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  
-  .run-icon {
-    font-size: 20px;
-  }
-</style>

src/lib/components/Battle/ActionViewSelector.svelte

@@ -1,508 +0,0 @@
-<script context="module" lang="ts">
-  export type ActionView = 'main' | 'moves' | 'piclets' | 'stats' | 'forcedSwap';
-</script>
-
-<script lang="ts">
-  import type { PicletInstance, BattleMove } from '$lib/db/schema';
-  import type { BattleState } from '$lib/battle-engine/types';
-  import { generateMoveDescription } from '$lib/utils/moveDescriptions';
-  import { getCaptureDescription } from '$lib/services/captureService';
-  
-  export let currentView: ActionView = 'main';
-  export let onViewChange: (view: ActionView) => void;
-  export let moves: BattleMove[] = [];
-  export let availablePiclets: PicletInstance[] = [];
-  export let enemyPiclet: PicletInstance | null = null;
-  export let isWildBattle: boolean = false;
-  export let battleState: BattleState | undefined = undefined;
-  export let capturePercentage: number = 0;
-  export let onMoveSelected: (move: BattleMove) => void = () => {};
-  export let onPicletSelected: (piclet: PicletInstance) => void = () => {};
-  export let onCaptureAttempt: () => void = () => {};
-  export let currentPicletId: number | null = null;
-  export let processingTurn: boolean = false;
-  
-  // Enhanced move information from battle state
-  $: enhancedMoves = battleState?.playerPiclet?.moves || [];
-  
-  // Helper function to get type logo path
-  function getTypeLogo(type: string): string {
-    return `/classes/${type}.png`;
-  }
-  
-  // Main action items
-  const actions = [
-    { title: 'Act', icon: '⚔️', view: 'moves' as ActionView },
-    { title: 'Piclets', icon: '🔄', view: 'piclets' as ActionView },
-    // { title: 'Stats', icon: '📊', view: 'stats' as ActionView }, // Debug only
-  ];
-  
-  function handleActionClick(targetView: ActionView) {
-    if (currentView === targetView) {
-      onViewChange('main');
-    } else {
-      onViewChange(targetView);
-    }
-  }
-</script>
-
-<div class="action-view-container">
-  <!-- Main action list -->
-  {#if currentView !== 'forcedSwap'}
-    <div class="action-list main-actions">
-      {#each actions as action}
-        <button 
-          class="action-item"
-          class:active={currentView === action.view}
-          on:click={() => handleActionClick(action.view)}
-          disabled={processingTurn}
-        >
-          <span class="action-icon" class:active={currentView === action.view}>
-            {action.icon}
-          </span>
-          <span class="action-title">{action.title}</span>
-          <span class="chevron">›</span>
-        </button>
-      {/each}
-    </div>
-  {/if}
-  
-  <!-- Overlay sub-views -->
-  {#if currentView !== 'main'}
-    <div class="sub-view-overlay" class:forced={currentView === 'forcedSwap'}>
-      <div class="sub-view-content">
-        {#if currentView === 'moves'}
-          <div class="sub-view-list">
-            {#each moves as move, index}
-              {@const isDisabled = move.currentPp <= 0}
-              {@const enhancedMove = enhancedMoves[index]}
-              {@const battleMove = enhancedMove?.move}
-              <button 
-                class="sub-item move-item"
-                on:click={() => !isDisabled && onMoveSelected(move)}
-                disabled={isDisabled || processingTurn}
-              >
-                <img 
-                  src={getTypeLogo(move.type)} 
-                  alt={move.type}
-                  class="type-logo" 
-                  class:disabled={isDisabled}
-                />
-                <div class="move-info">
-                  <div class="move-name" class:disabled={isDisabled}>
-                    {move.name}
-                    {#if battleMove?.power > 0}
-                      <span class="move-power">⚡{battleMove.power}</span>
-                    {/if}
-                  </div>
-                  <div class="move-desc" class:disabled={isDisabled}>
-                    {#if battleMove?.effects && battleMove.effects.length > 0}
-                      {battleMove.effects.length} effects • {generateMoveDescription(battleMove || move)}
-                    {:else}
-                      {generateMoveDescription(battleMove || move)}
-                    {/if}
-                  </div>
-                  {#if battleMove?.flags && battleMove.flags.length > 0}
-                    <div class="move-flags">
-                      {#each battleMove.flags as flag}
-                        <span class="flag-badge">{flag}</span>
-                      {/each}
-                    </div>
-                  {/if}
-                </div>
-                <div class="move-stats" class:disabled={isDisabled}>
-                  <div class="move-pp">PP: {move.currentPp}/{move.pp}</div>
-                  {#if battleMove}
-                    <div class="move-accuracy">Acc: {battleMove.accuracy}%</div>
-                  {/if}
-                </div>
-              </button>
-            {/each}
-          </div>
-        {:else if currentView === 'piclets'}
-          {@const availableHealthyPiclets = availablePiclets.filter(p => 
-            p.currentHp > 0 && p.id !== currentPicletId
-          )}
-          <div class="sub-view-list">
-            {#if availableHealthyPiclets.length === 0}
-              <div class="empty-message">
-                No other healthy piclets available
-              </div>
-            {:else}
-              {#each availableHealthyPiclets as piclet}
-                <button 
-                  class="sub-item piclet-item"
-                  on:click={() => onPicletSelected(piclet)}
-                  disabled={processingTurn}
-                >
-                  <img 
-                    src={piclet.imageData || piclet.imageUrl} 
-                    alt={piclet.nickname}
-                    class="piclet-thumb"
-                  />
-                  <div class="piclet-info">
-                    <div class="piclet-header">
-                      <span class="piclet-name">{piclet.nickname}</span>
-                      <img 
-                        src={getTypeLogo(piclet.primaryType)} 
-                        alt={piclet.primaryType}
-                        class="type-logo-small"
-                      />
-                      <span class="level-badge">Lv.{piclet.level}</span>
-                    </div>
-                    <div class="hp-row">
-                      <div class="hp-bar-small">
-                        <div 
-                          class="hp-fill-small" 
-                          style="width: {(piclet.currentHp / piclet.maxHp) * 100}%"
-                        ></div>
-                      </div>
-                      <span class="hp-text-small">{piclet.currentHp}/{piclet.maxHp}</span>
-                    </div>
-                  </div>
-                </button>
-              {/each}
-            {/if}
-          </div>
-        {/if}
-      </div>
-    </div>
-  {/if}
-  
-  <!-- Processing overlay -->
-  {#if processingTurn}
-    <div class="processing-overlay"></div>
-  {/if}
-</div>
-
-<style>
-  .action-view-container {
-    position: relative;
-    height: 100%;
-  }
-  
-  /* Main action list */
-  .action-list {
-    background: white;
-    border-radius: 12px;
-    border: 0.5px solid #c6c6c8;
-    overflow: hidden;
-  }
-  
-  .action-item {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 12px 16px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    text-align: left;
-    transition: background-color 0.2s;
-    position: relative;
-  }
-  
-  .action-item:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 16px;
-    right: 0;
-    height: 0.5px;
-    background: #c6c6c8;
-  }
-  
-  .action-item:active:not(:disabled) {
-    background: #f2f2f7;
-  }
-  
-  .action-item:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  
-  .action-icon {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    border-radius: 8px;
-    margin-right: 12px;
-  }
-  
-  .action-icon.active {
-    background: #e5f3ff;
-  }
-  
-  .action-title {
-    flex: 1;
-    font-size: 17px;
-    font-weight: 400;
-    color: #000;
-  }
-  
-  .chevron {
-    color: #8e8e93;
-    font-size: 16px;
-  }
-  
-  /* Sub-view overlay */
-  .sub-view-overlay {
-    position: absolute;
-    top: 0;
-    left: 64px; /* Icon width + padding */
-    right: 0;
-    bottom: 0;
-    background: white;
-    border-radius: 12px;
-    border: 0.5px solid #c6c6c8;
-    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
-    animation: slideIn 0.2s ease-out;
-  }
-  
-  .sub-view-overlay.forced {
-    left: 0;
-  }
-  
-  @keyframes slideIn {
-    from {
-      transform: translateX(20px);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-  
-  .sub-view-content {
-    height: 100%;
-    overflow-y: auto;
-  }
-  
-  .sub-view-list {
-    padding: 0;
-  }
-  
-  /* Sub-items */
-  .sub-item {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 12px 16px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    text-align: left;
-    transition: background-color 0.2s;
-    position: relative;
-  }
-  
-  .sub-item:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 16px;
-    right: 0;
-    height: 0.5px;
-    background: #c6c6c8;
-  }
-  
-  .sub-item:active:not(:disabled) {
-    background: #f2f2f7;
-  }
-  
-  .sub-item:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  
-  /* Move items */
-  .type-logo {
-    width: 24px;
-    height: 24px;
-    margin-right: 12px;
-    object-fit: contain;
-  }
-  
-  .type-logo.disabled {
-    opacity: 0.3;
-  }
-  
-  .type-logo-small {
-    width: 16px;
-    height: 16px;
-    object-fit: contain;
-  }
-  
-  .move-info {
-    flex: 1;
-  }
-  
-  .move-name {
-    font-size: 16px;
-    font-weight: 500;
-    color: #000;
-    margin-bottom: 2px;
-  }
-  
-  .move-name.disabled {
-    color: #8e8e93;
-  }
-  
-  .move-desc {
-    font-size: 13px;
-    color: #8e8e93;
-  }
-  
-  .move-desc.disabled {
-    color: #c7c7cc;
-  }
-  
-  .move-power {
-    font-size: 11px;
-    color: #ff6b35;
-    font-weight: bold;
-    margin-left: 6px;
-  }
-  
-  .move-flags {
-    display: flex;
-    gap: 4px;
-    margin-top: 4px;
-    flex-wrap: wrap;
-  }
-  
-  .flag-badge {
-    font-size: 10px;
-    padding: 2px 6px;
-    background: #e3f2fd;
-    color: #1976d2;
-    border-radius: 8px;
-    font-weight: 500;
-  }
-  
-  .move-stats {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    align-items: flex-end;
-  }
-  
-  .move-stats.disabled .move-pp,
-  .move-stats.disabled .move-accuracy {
-    background: #f2f2f7;
-    color: #8e8e93;
-  }
-  
-  .move-pp {
-    font-size: 12px;
-    padding: 4px 8px;
-    background: #f2f2f7;
-    border-radius: 12px;
-    color: #000;
-    white-space: nowrap;
-  }
-  
-  .move-accuracy {
-    font-size: 11px;
-    padding: 2px 6px;
-    background: #e8f5e8;
-    color: #2e7d32;
-    border-radius: 8px;
-    white-space: nowrap;
-  }
-  
-  /* Piclet items */
-  .piclet-thumb {
-    width: 48px;
-    height: 48px;
-    object-fit: contain;
-    border-radius: 8px;
-    margin-right: 12px;
-  }
-  
-  .piclet-info {
-    flex: 1;
-  }
-  
-  .piclet-header {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-bottom: 4px;
-  }
-  
-  .piclet-name {
-    font-size: 16px;
-    font-weight: 500;
-    color: #000;
-  }
-  
-  .level-badge {
-    font-size: 11px;
-    font-weight: 700;
-    padding: 2px 6px;
-    background: #e5e5ea;
-    border-radius: 12px;
-    margin-left: auto;
-  }
-  
-  .hp-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  
-  .hp-bar-small {
-    flex: 1;
-    height: 6px;
-    background: #e5e5ea;
-    border-radius: 3px;
-    overflow: hidden;
-  }
-  
-  .hp-fill-small {
-    height: 100%;
-    background: #4cd964;
-    transition: width 0.3s ease;
-  }
-  
-  .hp-text-small {
-    font-size: 11px;
-    color: #8e8e93;
-    white-space: nowrap;
-  }
-  
-  
-  /* Empty states */
-  .empty-message {
-    padding: 24px;
-    text-align: center;
-    color: #8e8e93;
-    font-size: 16px;
-  }
-  
-  .empty-icon {
-    font-size: 32px;
-    display: block;
-    margin-bottom: 8px;
-    opacity: 0.5;
-  }
-  
-  .empty-subtitle {
-    font-size: 14px;
-    color: #c7c7cc;
-    margin-top: 4px;
-  }
-  
-  /* Processing overlay */
-  .processing-overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 12px;
-  }
-</style>

src/lib/components/Battle/FieldEffectIndicator.svelte

@@ -1,117 +0,0 @@
-<script lang="ts">
-  export let fieldEffects: Array<{ effect: string; turnsRemaining?: number; side?: string }> = [];
-  
-  function getFieldEffectColor(effect: string): string {
-    // Defensive check: ensure effect is a string
-    if (typeof effect !== 'string') {
-      console.warn('FieldEffectIndicator: effect is not a string:', effect);
-      return '#868e96';
-    }
-    
-    if (effect.includes('weather')) return '#4dabf7';
-    if (effect.includes('terrain')) return '#51cf66';
-    if (effect.includes('hazard')) return '#ff6b6b';
-    return '#868e96';
-  }
-  
-  function getFieldEffectIcon(effect: string): string {
-    // Defensive check: ensure effect is a string
-    if (typeof effect !== 'string') {
-      console.warn('FieldEffectIndicator: effect is not a string:', effect);
-      return '🌀';
-    }
-    
-    if (effect.includes('storm')) return '⛈️';
-    if (effect.includes('rain')) return '🌧️';
-    if (effect.includes('sun')) return '☀️';
-    if (effect.includes('snow')) return '🌨️';
-    if (effect.includes('spikes')) return '⚡';
-    if (effect.includes('reflect')) return '🛡️';
-    return '🌀';
-  }
-</script>
-
-{#if fieldEffects.length > 0}
-  <div class="field-effects">
-    <div class="field-effects-header">Field Effects</div>
-    {#each fieldEffects as effect}
-      <div 
-        class="field-effect" 
-        style="background-color: {getFieldEffectColor(effect.effect)}"
-        title="{effect.effect}{effect.turnsRemaining ? ` (${effect.turnsRemaining} turns)` : ''}"
-      >
-        <span class="effect-icon">{getFieldEffectIcon(effect.effect)}</span>
-        <span class="effect-name">{effect.effect}</span>
-        {#if effect.turnsRemaining}
-          <span class="turns-remaining">{effect.turnsRemaining}</span>
-        {/if}
-        {#if effect.side}
-          <span class="effect-side">({effect.side})</span>
-        {/if}
-      </div>
-    {/each}
-  </div>
-{/if}
-
-<style>
-  .field-effects {
-    position: absolute;
-    top: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    z-index: 10;
-  }
-  
-  .field-effects-header {
-    background: rgba(0, 0, 0, 0.7);
-    color: white;
-    padding: 2px 8px;
-    border-radius: 12px;
-    font-size: 0.7rem;
-    font-weight: bold;
-  }
-  
-  .field-effect {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 8px;
-    border-radius: 12px;
-    color: white;
-    font-size: 0.7rem;
-    font-weight: bold;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
-    animation: shimmer 2s infinite;
-  }
-  
-  .effect-icon {
-    font-size: 0.8rem;
-  }
-  
-  .effect-name {
-    font-size: 0.6rem;
-    text-transform: capitalize;
-  }
-  
-  .turns-remaining {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 8px;
-    padding: 1px 4px;
-    font-size: 0.6rem;
-  }
-  
-  .effect-side {
-    font-size: 0.6rem;
-    opacity: 0.8;
-  }
-  
-  @keyframes shimmer {
-    0%, 100% { background-position: -100% 0; }
-    50% { background-position: 100% 0; }
-  }
-</style>

src/lib/components/Battle/LLMBattleEngine.svelte

@@ -1,453 +0,0 @@
-<script lang="ts">
-  import type { PicletInstance } from '$lib/db/schema';
-  import type { GradioClient } from '$lib/types';
-
-  interface BattleUpdate {
-    battle_updates: string[];
-    player_pokemon_status: string;
-    player_pokemon_hp: 'Empty' | 'Very Low' | 'Low' | 'Medium' | 'High' | 'Very High' | 'Full';
-    enemy_pokemon_status: string;
-    enemy_pokemon_hp: 'Empty' | 'Very Low' | 'Low' | 'Medium' | 'High' | 'Very High' | 'Full';
-    next_to_act: 'player' | 'enemy';
-    available_actions: string[];
-  }
-
-  interface Props {
-    playerPiclet: PicletInstance;
-    enemyPiclet: PicletInstance;
-    qwenClient: GradioClient;
-    onBattleEnd: (winner: 'player' | 'enemy') => void;
-    rosterPiclets?: PicletInstance[]; // Optional roster for switching
-  }
-
-  let { playerPiclet, enemyPiclet, qwenClient, onBattleEnd, rosterPiclets }: Props = $props();
-
-  // Battle state
-  let battleState: BattleUpdate = $state({
-    battle_updates: [],
-    player_pokemon_status: 'Ready for battle',
-    player_pokemon_hp: 'Full',
-    enemy_pokemon_status: 'Ready for battle', 
-    enemy_pokemon_hp: 'Full',
-    next_to_act: 'player',
-    available_actions: []
-  });
-
-  let battleHistory: string[] = $state([]);
-  let isProcessing: boolean = $state(false);
-  let currentPlayerPiclet: PicletInstance = $state(playerPiclet);
-  let showPicletSelector: boolean = $state(false);
-
-  // Dice rolling system
-  function rollDice(): number {
-    return Math.floor(Math.random() * 20) + 1; // D20 roll
-  }
-
-  function getActionEffectiveness(roll: number): { success: string; description: string } {
-    if (roll === 20) return { success: 'Critical Success', description: 'The action succeeds spectacularly!' };
-    if (roll >= 15) return { success: 'Success', description: 'The action succeeds well!' };
-    if (roll >= 10) return { success: 'Partial Success', description: 'The action has some effect.' };
-    if (roll >= 5) return { success: 'Failure', description: 'The action fails but something minor happens.' };
-    if (roll === 1) return { success: 'Critical Failure', description: 'The action backfires!' };
-    return { success: 'Failure', description: 'The action fails.' };
-  }
-
-  // Generate text using Qwen client
-  async function generateBattleUpdate(prompt: string): Promise<BattleUpdate> {
-    const result = await qwenClient.predict("/model_chat", [
-      prompt,        // user message
-      [],           // chat history (empty for new conversation)
-      "You are a Pokemon battle narrator. Create engaging battle descriptions and return valid JSON responses.", // system prompt
-      0.7,          // temperature
-      1000          // max_tokens
-    ]);
-
-    const responseText = result.data[1] || ''; // Qwen returns [history, response]
-    console.log('LLM Response:', responseText);
-
-    // Extract JSON from response
-    try {
-      const jsonMatch = responseText.match(/\{[\s\S]*\}/);
-      if (!jsonMatch) throw new Error('No JSON found in response');
-      
-      const battleUpdate: BattleUpdate = JSON.parse(jsonMatch[0]);
-      return battleUpdate;
-    } catch (error) {
-      console.error('Failed to parse battle response:', error);
-      // Fallback response
-      return {
-        battle_updates: ['The battle continues...'],
-        player_pokemon_status: battleState.player_pokemon_status,
-        player_pokemon_hp: battleState.player_pokemon_hp,
-        enemy_pokemon_status: battleState.enemy_pokemon_status,
-        enemy_pokemon_hp: battleState.enemy_pokemon_hp,
-        next_to_act: battleState.next_to_act === 'player' ? 'enemy' : 'player',
-        available_actions: ['Attack', 'Defend', 'Special Move']
-      };
-    }
-  }
-
-  // Initialize battle
-  async function startBattle() {
-    isProcessing = true;
-    
-    const initialPrompt = `Let's role play a Pokemon game using my custom Pokemon, the player will use ${currentPlayerPiclet.typeId} and the enemy will use ${enemyPiclet.typeId}.
-You will return a brief description on what happens because of the action.
-I will send you an update of the enemy or players move and the success of the action (in a DnD style). Be sure to be as creative and engaging as possible when defining battle updates and available actions.
-
-Player Pokemon: ${currentPlayerPiclet.typeId}
-${currentPlayerPiclet.description}
-
-Enemy Pokemon: ${enemyPiclet.typeId}
-${enemyPiclet.description}
-
-Each response should be a json object with fields:
-\`\`\`json
-{
-    "battle_updates": [list with 1 sentence per entry describing what just happened in battle],
-    "player_pokemon_status": "1 sentence description of how the Pokemon is doing",
-    "player_pokemon_hp": "enum Empty, Very Low, Low, Medium, High, Very High, Full",
-    "enemy_pokemon_status": "1 sentence description of how the Pokemon is doing",
-    "enemy_pokemon_hp": "enum Empty, Very Low, Low, Medium, High, Very High, Full",
-    "next_to_act": "enum player/enemy",
-    "available_actions": ["short list of 1 sentence actions of what to have the next_to_act Pokemon do next"]
-}
-\`\`\`
-Start with just some intro updates describing both monsters being on the battlefield.`;
-
-    try {
-      const update = await generateBattleUpdate(initialPrompt);
-      battleState = update;
-      battleHistory.push(initialPrompt);
-    } catch (error) {
-      console.error('Failed to start battle:', error);
-    }
-    
-    isProcessing = false;
-  }
-
-  // Execute player action
-  async function executeAction(actionDescription: string) {
-    if (isProcessing) return;
-    
-    isProcessing = true;
-    
-    const roll = rollDice();
-    const effectiveness = getActionEffectiveness(roll);
-    
-    const prompt = `Player chooses: "${actionDescription}"
-Dice roll: ${roll}/20 (${effectiveness.success})
-Effect: ${effectiveness.description}
-
-Update the battle state based on this action and its effectiveness. Then have the enemy take their turn if appropriate.`;
-
-    try {
-      const update = await generateBattleUpdate(prompt);
-      battleState = update;
-      battleHistory.push(prompt);
-      
-      // Check for battle end conditions
-      if (battleState.player_pokemon_hp === 'Empty') {
-        onBattleEnd('enemy');
-      } else if (battleState.enemy_pokemon_hp === 'Empty') {
-        onBattleEnd('player');
-      }
-    } catch (error) {
-      console.error('Failed to execute action:', error);
-    }
-    
-    isProcessing = false;
-  }
-  
-  // Switch Piclet function
-  async function switchPiclet(newPiclet: PicletInstance) {
-    if (isProcessing) return;
-    
-    isProcessing = true;
-    showPicletSelector = false;
-    
-    const switchPrompt = `Player switches from ${currentPlayerPiclet.typeId} to ${newPiclet.typeId}!
-    
-New Pokemon: ${newPiclet.typeId}
-${newPiclet.description}
-
-Update the battle to show the switch and have the enemy react accordingly.`;
-    
-    try {
-      currentPlayerPiclet = newPiclet;
-      const update = await generateBattleUpdate(switchPrompt);
-      battleState = update;
-      battleHistory.push(switchPrompt);
-    } catch (error) {
-      console.error('Failed to switch Piclet:', error);
-    }
-    
-    isProcessing = false;
-  }
-
-  // Auto-start battle when component mounts
-  $effect(() => {
-    startBattle();
-  });
-
-  // Export functions for parent component
-  export { executeAction, switchPiclet };
-</script>
-
-<div class="llm-battle-engine">
-  <!-- Battle Narrative Display -->
-  <div class="battle-narrative">
-    <h3>Battle Progress</h3>
-    {#each battleState.battle_updates as update}
-      <div class="battle-update">{update}</div>
-    {/each}
-  </div>
-  
-  <!-- Pokemon Status -->
-  <div class="pokemon-status">
-    <div class="player-status">
-      <h4>{currentPlayerPiclet.typeId}</h4>
-      <div class="hp-indicator hp-{battleState.player_pokemon_hp.toLowerCase().replace(' ', '-')}">{battleState.player_pokemon_hp}</div>
-      <p>{battleState.player_pokemon_status}</p>
-    </div>
-    
-    <div class="enemy-status">
-      <h4>{enemyPiclet.typeId}</h4>
-      <div class="hp-indicator hp-{battleState.enemy_pokemon_hp.toLowerCase().replace(' ', '-')}">{battleState.enemy_pokemon_hp}</div>
-      <p>{battleState.enemy_pokemon_status}</p>
-    </div>
-  </div>
-  
-  <!-- Available Actions (when it's player's turn) -->
-  {#if battleState.next_to_act === 'player' && !isProcessing}
-    <div class="available-actions">
-      <h4>Choose Your Action:</h4>
-      
-      <!-- Battle Actions -->
-      {#each battleState.available_actions as action}
-        <button 
-          class="action-button" 
-          onclick={() => executeAction(action)}
-        >
-          {action}
-        </button>
-      {/each}
-      
-      <!-- Piclet Switching -->
-      {#if rosterPiclets && rosterPiclets.length > 1}
-        <button 
-          class="switch-button" 
-          onclick={() => showPicletSelector = !showPicletSelector}
-        >
-          🔄 Switch Piclet
-        </button>
-      {/if}
-    </div>
-    
-    <!-- Piclet Selector -->
-    {#if showPicletSelector && rosterPiclets}
-      <div class="piclet-selector">
-        <h4>Choose Piclet:</h4>
-        <div class="piclet-grid">
-          {#each rosterPiclets as piclet}
-            {#if piclet.id !== currentPlayerPiclet.id}
-              <button 
-                class="piclet-option" 
-                onclick={() => switchPiclet(piclet)}
-              >
-                <img src={piclet.imageUrl} alt={piclet.typeId} />
-                <span>{piclet.typeId}</span>
-                <span class="tier tier-{piclet.tier}">{piclet.tier}</span>
-              </button>
-            {/if}
-          {/each}
-        </div>
-      </div>
-    {/if}
-  {:else if isProcessing}
-    <div class="processing">
-      <div class="spinner"></div>
-      <p>Processing battle turn...</p>
-    </div>
-  {:else}
-    <div class="enemy-turn">
-      <p>Enemy is deciding their move...</p>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .llm-battle-engine {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 1rem;
-  }
-  
-  .battle-narrative {
-    background: #f8f9fa;
-    border-radius: 8px;
-    padding: 1rem;
-    max-height: 200px;
-    overflow-y: auto;
-  }
-  
-  .battle-update {
-    margin-bottom: 0.5rem;
-    padding: 0.5rem;
-    background: white;
-    border-radius: 4px;
-    border-left: 3px solid #007bff;
-  }
-  
-  .pokemon-status {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-  }
-  
-  .player-status, .enemy-status {
-    padding: 1rem;
-    border-radius: 8px;
-    text-align: center;
-  }
-  
-  .player-status {
-    background: rgba(0, 123, 255, 0.1);
-    border: 2px solid #007bff;
-  }
-  
-  .enemy-status {
-    background: rgba(220, 53, 69, 0.1);
-    border: 2px solid #dc3545;
-  }
-  
-  .hp-indicator {
-    font-weight: bold;
-    padding: 0.25rem 0.5rem;
-    border-radius: 16px;
-    margin: 0.5rem 0;
-    display: inline-block;
-  }
-  
-  .hp-full { background: #28a745; color: white; }
-  .hp-very-high { background: #40c757; color: white; }
-  .hp-high { background: #6bc267; color: white; }
-  .hp-medium { background: #ffc107; color: black; }
-  .hp-low { background: #fd7e14; color: white; }
-  .hp-very-low { background: #dc3545; color: white; }
-  .hp-empty { background: #6c757d; color: white; }
-  
-  .available-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  
-  .action-button {
-    padding: 0.75rem 1rem;
-    background: #007bff;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.2s;
-  }
-  
-  .action-button:hover {
-    background: #0056b3;
-  }
-  
-  .switch-button {
-    padding: 0.75rem 1rem;
-    background: #28a745;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.2s;
-    margin-top: 0.5rem;
-  }
-  
-  .switch-button:hover {
-    background: #1e7e34;
-  }
-  
-  .piclet-selector {
-    background: #f8f9fa;
-    border-radius: 8px;
-    padding: 1rem;
-    margin-top: 1rem;
-  }
-  
-  .piclet-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-  }
-  
-  .piclet-option {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.5rem;
-    background: white;
-    border: 2px solid #dee2e6;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-  
-  .piclet-option:hover {
-    border-color: #007bff;
-    background: #f0f7ff;
-  }
-  
-  .piclet-option img {
-    width: 40px;
-    height: 40px;
-    object-fit: cover;
-    border-radius: 4px;
-  }
-  
-  .piclet-option span {
-    font-size: 0.8rem;
-    text-align: center;
-  }
-  
-  .tier {
-    padding: 0.1rem 0.3rem;
-    border-radius: 8px;
-    font-size: 0.7rem;
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-  
-  .tier-low { background: #6c757d; color: white; }
-  .tier-medium { background: #28a745; color: white; }
-  .tier-high { background: #fd7e14; color: white; }
-  .tier-legendary { background: #dc3545; color: white; }
-  
-  .processing, .enemy-turn {
-    text-align: center;
-    padding: 2rem;
-  }
-  
-  .spinner {
-    width: 40px;
-    height: 40px;
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #007bff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin: 0 auto 1rem;
-  }
-  
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-</style>

src/lib/components/Battle/PicletInfo.svelte

@@ -1,244 +0,0 @@
-<script lang="ts">
-  import type { PicletInstance } from '$lib/db/schema';
-  import { getXpProgress, getXpTowardsNextLevel } from '$lib/services/levelingService';
-  import { TYPE_DATA } from '$lib/types/picletTypes';
-  
-  export let piclet: PicletInstance;
-  export let hpPercentage: number;
-  export let isPlayer: boolean;
-  $: xpTowardsNext = isPlayer ? getXpTowardsNextLevel(piclet.xp, piclet.level, piclet.tier) : { current: 0, needed: 0, percentage: 0 };
-  
-  // Type-based styling
-  $: typeData = TYPE_DATA[piclet.primaryType];
-  $: typeColor = typeData.color;
-  $: typeLogoPath = `/classes/${piclet.primaryType}.png`;
-  
-  $: hpColor = hpPercentage > 0.5 ? '#34c759' : hpPercentage > 0.25 ? '#ffcc00' : '#ff3b30';
-</script>
-
-<div class="piclet-info-wrapper {isPlayer ? 'player-info-wrapper' : 'enemy-info-wrapper'}">
-  <div class="piclet-info">
-    <!-- Type Logo (Foreground) -->
-    <div class="type-logo-container">
-      <img 
-        src={typeLogoPath} 
-        alt={piclet.primaryType}
-        class="type-logo"
-      />
-    </div>
-    
-    <!-- Content Area -->
-    <div class="content-area">
-      <!-- Name and Level Row -->
-      <div class="header-row">
-        <div class="piclet-name">{piclet.nickname}</div>
-        <div class="level-text">Lv.{piclet.level}</div>
-      </div>
-      
-      <!-- HP Section -->
-      <div class="stat-row">
-        <div class="stat-label">HP</div>
-        <div class="hp-bar">
-          <div 
-            class="hp-fill" 
-            style="width: {hpPercentage * 100}%; background-color: {hpColor}"
-          ></div>
-        </div>
-      </div>
-      
-      <!-- XP Section (Player only) -->
-      {#if isPlayer}
-        <div class="stat-row">
-          <div class="stat-label">XP</div>
-          <div class="xp-bar">
-            <div 
-              class="xp-fill" 
-              style="width: {xpTowardsNext.percentage}%"
-            ></div>
-          </div>
-        </div>
-      {/if}
-    </div>
-  </div>
-  
-  <!-- Triangle Pointer -->
-  <div class="triangle-pointer {isPlayer ? 'player-pointer' : 'enemy-pointer'}"></div>
-</div>
-
-<style>
-  .piclet-info-wrapper {
-    position: absolute;
-    display: flex;
-    align-items: center;
-  }
-  
-  .player-info-wrapper {
-    right: 16px;
-    bottom: 20px;
-    flex-direction: row-reverse;
-  }
-  
-  .enemy-info-wrapper {
-    left: 16px;
-    top: 20px;
-    flex-direction: row;
-  }
-  
-  .piclet-info {
-    background: rgba(255, 255, 255, 0.9);
-    border-radius: 8px;
-    padding: 10px;
-    min-width: 160px;
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-  }
-  
-  /* Type Logo Container */
-  .type-logo-container {
-    flex-shrink: 0;
-    margin-top: 2px;
-  }
-  
-  .type-logo {
-    width: 35px;
-    height: 35px;
-    object-fit: contain;
-    border-radius: 6px;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(4px);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-  
-  /* Content Area */
-  .content-area {
-    flex: 1;
-    min-width: 0; /* Allows flex item to shrink below content size */
-  }
-  
-  /* Header Row */
-  .header-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    margin-bottom: 6px;
-    gap: 8px;
-  }
-  
-  .piclet-name {
-    font-weight: 600;
-    font-size: 14px;
-    color: #1a1a1a;
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  
-  .level-text {
-    font-size: 11px;
-    font-weight: 600;
-    color: #666;
-    flex-shrink: 0;
-  }
-  
-  /* Stat Rows */
-  .stat-row {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin-bottom: 3px;
-  }
-  
-  .stat-row:last-child {
-    margin-bottom: 0;
-  }
-  
-  .stat-label {
-    font-size: 9px;
-    font-weight: 600;
-    color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.3px;
-    width: 16px;
-    flex-shrink: 0;
-  }
-  
-  /* HP Bar */
-  .hp-bar {
-    height: 6px;
-    background: #e0e0e0;
-    border-radius: 3px;
-    overflow: hidden;
-    flex: 1;
-    min-width: 80px;
-  }
-  
-  .hp-fill {
-    height: 100%;
-    transition: width 0.5s ease, background-color 0.3s ease;
-  }
-  
-  /* XP Bar */
-  .xp-bar {
-    height: 5px;
-    background: #e0e0e0;
-    border-radius: 2.5px;
-    overflow: hidden;
-    flex: 1;
-    min-width: 80px;
-  }
-  
-  .xp-fill {
-    height: 100%;
-    background: #2196f3;
-    transition: width 1.2s ease-out;
-  }
-  
-  
-  /* Triangle Pointer */
-  .triangle-pointer {
-    width: 0;
-    height: 0;
-    border-style: solid;
-  }
-  
-  .player-pointer {
-    border-width: 8px 16px 8px 0;
-    border-color: transparent rgba(255, 255, 255, 0.9) transparent transparent;
-    margin-right: -1px;
-  }
-  
-  .enemy-pointer {
-    border-width: 8px 0 8px 16px;
-    border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
-    margin-left: -1px;
-  }
-  
-  @media (max-width: 768px) {
-    .piclet-info {
-      min-width: 140px;
-      padding: 8px;
-      gap: 8px;
-    }
-    
-    .type-logo {
-      width: 28px;
-      height: 28px;
-    }
-    
-    .piclet-name {
-      font-size: 12px;
-      max-width: 87px;
-    }
-    
-    .level-text {
-      font-size: 10px;
-    }
-    
-    .hp-bar, .xp-bar {
-      min-width: 60px;
-    }
-  }
-</style>

src/lib/components/Battle/StatusEffectIndicator.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-  import type { StatusEffect } from '$lib/battle-engine/types';
-  
-  export let statusEffects: { type: StatusEffect; turnsLeft?: number }[] = [];
-  
-  function getStatusColor(status: StatusEffect): string {
-    switch (status) {
-      case 'burn': return '#ff6b6b';
-      case 'freeze': return '#74c0fc';
-      case 'paralyze': return '#ffd43b';
-      case 'poison': return '#9775fa';
-      case 'sleep': return '#868e96';
-      case 'confuse': return '#ff8cc8';
-      default: return '#495057';
-    }
-  }
-  
-  function getStatusIcon(status: StatusEffect): string {
-    switch (status) {
-      case 'burn': return '🔥';
-      case 'freeze': return '❄️';
-      case 'paralyze': return '⚡';
-      case 'poison': return '☠️';
-      case 'sleep': return '💤';
-      case 'confuse': return '😵';
-      default: return '?';
-    }
-  }
-</script>
-
-{#if statusEffects.length > 0}
-  <div class="status-effects">
-    {#each statusEffects as effect}
-      <div 
-        class="status-effect" 
-        style="background-color: {getStatusColor(effect.type)}"
-        title="{effect.type}{effect.turnsLeft ? ` (${effect.turnsLeft} turns)` : ''}"
-      >
-        <span class="status-icon">{getStatusIcon(effect.type)}</span>
-        <span class="status-name">{effect.type.toUpperCase()}</span>
-        {#if effect.turnsLeft}
-          <span class="turns-left">{effect.turnsLeft}</span>
-        {/if}
-      </div>
-    {/each}
-  </div>
-{/if}
-
-<style>
-  .status-effects {
-    display: flex;
-    gap: 4px;
-    flex-wrap: wrap;
-    margin: 4px 0;
-  }
-  
-  .status-effect {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    padding: 2px 6px;
-    border-radius: 12px;
-    color: white;
-    font-size: 0.7rem;
-    font-weight: bold;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-  }
-  
-  .status-icon {
-    font-size: 0.8rem;
-  }
-  
-  .status-name {
-    font-size: 0.6rem;
-  }
-  
-  .turns-left {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 8px;
-    padding: 1px 4px;
-    font-size: 0.6rem;
-    margin-left: 2px;
-  }
-  
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.7; }
-  }
-</style>

src/lib/components/Battle/TypewriterText.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  
-  export let text: string = '';
-  export let speed: number = 30; // milliseconds per character
-  
-  let displayedText = '';
-  let currentIndex = 0;
-  let intervalId: number | null = null;
-  
-  function startTyping() {
-    // Reset when text changes
-    displayedText = '';
-    currentIndex = 0;
-    
-    // Clear any existing interval
-    if (intervalId) {
-      clearInterval(intervalId);
-    }
-    
-    // Start typing effect
-    intervalId = setInterval(() => {
-      if (currentIndex < text.length) {
-        displayedText += text[currentIndex];
-        currentIndex++;
-      } else {
-        if (intervalId) {
-          clearInterval(intervalId);
-          intervalId = null;
-        }
-      }
-    }, speed);
-  }
-  
-  // Watch for text changes
-  $: if (text) {
-    startTyping();
-  }
-  
-  onMount(() => {
-    return () => {
-      if (intervalId) {
-        clearInterval(intervalId);
-      }
-    };
-  });
-</script>
-
-<span>{displayedText}</span>

src/lib/components/Layout/ProgressBar.svelte

@@ -5,27 +5,30 @@
   
   let gameState: GameState | null = $state(null);
   
-  // Progress bar color based on progress
-  const progressColor = $derived(getProgressColor(gameState?.progressPoints || 0));
-  
-  function getProgressColor(points: number): string {
-    const progress = points / 1000;
-    if (progress < 0.2) return '#4caf50'; // green
-    if (progress < 0.4) return '#ffc107'; // yellow
-    if (progress < 0.6) return '#ff9800'; // orange
-    if (progress < 0.8) return '#f44336'; // red
-    return '#9c27b0'; // purple
+  // Progress bar color based on rarity score
+  const progressColor = $derived(getProgressColor(gameState?.rarityScore || 0));
+
+  function getProgressColor(score: number): string {
+    if (score < 100) return '#4caf50'; // green - beginner
+    if (score < 500) return '#ffc107'; // yellow - intermediate
+    if (score < 1000) return '#ff9800'; // orange - advanced
+    if (score < 2000) return '#f44336'; // red - expert
+    return '#9c27b0'; // purple - master
   }
   
-  onMount(async () => {
+  onMount(() => {
     // Load game state
-    gameState = await getOrCreateGameState();
-    
+    getOrCreateGameState().then(state => {
+      gameState = state;
+    });
+
     // Refresh game state periodically
-    const interval = setInterval(async () => {
-      gameState = await getOrCreateGameState();
+    const interval = setInterval(() => {
+      getOrCreateGameState().then(state => {
+        gameState = state;
+      });
     }, 5000); // Update every 5 seconds
-    
+
     return () => clearInterval(interval);
   });
 </script>
@@ -33,9 +36,9 @@
 {#if gameState}
   <div class="progress-container">
     <div class="progress-bar">
-      <div class="progress-fill" style="width: {(gameState.progressPoints / 1000) * 100}%; background-color: {progressColor}"></div>
+      <div class="progress-fill" style="width: {Math.min((gameState.rarityScore / 2000) * 100, 100)}%; background-color: {progressColor}"></div>
     </div>
-    <span class="progress-stats">👥 {gameState.trainersDefeated} 📷 {gameState.picletsCapured}</span>
+    <span class="progress-stats">🔍 {gameState.uniqueDiscoveries} ⭐ {gameState.rarityScore}</span>
   </div>
 {/if}
 

src/lib/components/Layout/TabBar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  export type TabId = 'scanner' | 'encounters' | 'pictuary';
+  export type TabId = 'scanner' | 'activity' | 'pictuary';
   
   interface Tab {
     id: TabId;
@@ -16,7 +16,7 @@
   
   const tabs: Tab[] = [
     { id: 'scanner', label: 'Scanner', icon: 'https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/snap_logo.png' },
-    { id: 'encounters', label: 'Encounters', icon: 'https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/encounters_logo.png' },
+    { id: 'activity', label: 'Activity', icon: 'https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/encounters_logo.png' },
     { id: 'pictuary', label: 'Pictuary', icon: 'https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/pictuary_logo.png' }
   ];
   

src/lib/components/Pages/Activity.svelte

@@ -0,0 +1,441 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { fade, fly } from 'svelte/transition';
+  import type { ActivityEntry, PicletInstance, LeaderboardEntry } from '$lib/db/schema';
+  import { db } from '$lib/db';
+  import PullToRefresh from '../UI/PullToRefresh.svelte';
+  import { CanonicalService } from '$lib/services/canonicalService';
+
+  let activities: ActivityEntry[] = $state([]);
+  let leaderboard: LeaderboardEntry[] = $state([]);
+  let isLoading = $state(true);
+  let isRefreshing = $state(false);
+  let activeView: 'recent' | 'leaderboard' = $state('recent');
+
+  // Mock data for development (will be replaced with server data)
+  const mockActivities: ActivityEntry[] = [
+    {
+      id: 1,
+      type: 'discovery',
+      title: 'New Discovery!',
+      description: 'Fraser discovered the first "Pillow" Piclet',
+      picletTypeId: 'pillow_001',
+      discovererName: 'Fraser',
+      rarity: 'legendary',
+      createdAt: new Date(Date.now() - 1000 * 60 * 5) // 5 minutes ago
+    },
+    {
+      id: 2,
+      type: 'variation',
+      title: 'Variation Found',
+      description: 'Alex found a "Velvet Pillow" variation',
+      picletTypeId: 'pillow_002',
+      discovererName: 'Alex',
+      rarity: 'rare',
+      createdAt: new Date(Date.now() - 1000 * 60 * 30) // 30 minutes ago
+    },
+    {
+      id: 3,
+      type: 'milestone',
+      title: 'Milestone Reached!',
+      description: 'Sam collected 100 unique Piclets!',
+      picletTypeId: 'trophy',
+      discovererName: 'Sam',
+      rarity: 'epic',
+      createdAt: new Date(Date.now() - 1000 * 60 * 60) // 1 hour ago
+    }
+  ];
+
+  const mockLeaderboard: LeaderboardEntry[] = [
+    { username: 'Fraser', totalDiscoveries: 156, uniqueDiscoveries: 45, rarityScore: 2340, rank: 1 },
+    { username: 'Alex', totalDiscoveries: 134, uniqueDiscoveries: 38, rarityScore: 1890, rank: 2 },
+    { username: 'Sam', totalDiscoveries: 98, uniqueDiscoveries: 31, rarityScore: 1560, rank: 3 },
+    { username: 'Jordan', totalDiscoveries: 87, uniqueDiscoveries: 28, rarityScore: 1230, rank: 4 },
+    { username: 'Casey', totalDiscoveries: 76, uniqueDiscoveries: 22, rarityScore: 980, rank: 5 }
+  ];
+
+  onMount(async () => {
+    await loadActivityData();
+  });
+
+  async function loadActivityData() {
+    isLoading = true;
+    try {
+      // Check if player has any discoveries
+      const playerPiclets = await db.picletInstances.toArray();
+
+      if (playerPiclets.length === 0) {
+        // No discoveries yet - show empty state
+        activities = [];
+        leaderboard = [];
+      } else {
+        // TODO: Fetch from server once backend is ready
+        // For now, use mock data
+        activities = mockActivities;
+        leaderboard = mockLeaderboard;
+
+        // Load recent local discoveries
+        const recentLocal = playerPiclets
+          .filter(p => p.collectedAt)
+          .sort((a, b) => (b.collectedAt?.getTime() || 0) - (a.collectedAt?.getTime() || 0))
+          .slice(0, 5)
+          .map((p, index) => ({
+            id: 1000 + index,
+            type: 'discovery' as const,
+            title: p.isCanonical ? 'New Discovery!' : 'Variation Found',
+            description: `You ${p.isCanonical ? 'discovered' : 'found a variation of'} "${p.objectName || p.typeId}"`,
+            picletTypeId: p.typeId,
+            discovererName: 'You',
+            rarity: CanonicalService.calculateRarity(p.scanCount) as any,
+            createdAt: p.collectedAt || new Date()
+          }));
+
+        // Merge with mock activities
+        activities = [...recentLocal, ...activities].slice(0, 10);
+      }
+    } catch (error) {
+      console.error('Error loading activity data:', error);
+    }
+    isLoading = false;
+  }
+
+  async function handleRefresh() {
+    isRefreshing = true;
+    try {
+      await loadActivityData();
+    } catch (error) {
+      console.error('Error refreshing activity:', error);
+    }
+    isRefreshing = false;
+  }
+
+  function formatTime(date: Date): string {
+    const now = Date.now();
+    const diff = now - date.getTime();
+
+    const minutes = Math.floor(diff / (1000 * 60));
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+    if (minutes < 1) return 'just now';
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    if (days < 7) return `${days}d ago`;
+
+    return date.toLocaleDateString();
+  }
+
+  function getRarityColor(rarity: string): string {
+    switch (rarity) {
+      case 'legendary': return '#FFD700';
+      case 'epic': return '#9B59B6';
+      case 'rare': return '#3498DB';
+      case 'uncommon': return '#2ECC71';
+      default: return '#95A5A6';
+    }
+  }
+
+  function getActivityIcon(type: string): string {
+    switch (type) {
+      case 'discovery': return '✨';
+      case 'variation': return '🔄';
+      case 'milestone': return '🏆';
+      default: return '📍';
+    }
+  }
+</script>
+
+<div class="activity-page">
+  <div class="view-selector">
+    <button
+      class="view-tab"
+      class:active={activeView === 'recent'}
+      onclick={() => activeView = 'recent'}
+    >
+      Recent Activity
+    </button>
+    <button
+      class="view-tab"
+      class:active={activeView === 'leaderboard'}
+      onclick={() => activeView = 'leaderboard'}
+    >
+      Leaderboard
+    </button>
+  </div>
+
+  <PullToRefresh onRefresh={handleRefresh}>
+    {#if isLoading}
+      <div class="loading">
+        <div class="spinner"></div>
+        <p>Loading activity...</p>
+      </div>
+    {:else if activeView === 'recent'}
+      {#if activities.length === 0}
+        <div class="empty-state">
+          <div class="empty-icon">🔍</div>
+          <h2>No Discoveries Yet</h2>
+          <p>Start scanning objects to discover Piclets!</p>
+          <p class="hint">Every object in the world has a unique Piclet waiting to be discovered.</p>
+        </div>
+      {:else}
+        <div class="activity-list">
+          {#each activities as activity, index (activity.id)}
+            <div
+              class="activity-card"
+              in:fly={{ y: 20, delay: index * 50 }}
+            >
+              <div class="activity-icon">
+                <span class="type-icon">{getActivityIcon(activity.type)}</span>
+              </div>
+
+              <div class="activity-info">
+                <h3>{activity.title}</h3>
+                <p>{activity.description}</p>
+                <div class="activity-meta">
+                  <span
+                    class="rarity-badge"
+                    style="background-color: {getRarityColor(activity.rarity)}"
+                  >
+                    {activity.rarity}
+                  </span>
+                  <span class="time">{formatTime(activity.createdAt)}</span>
+                </div>
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    {:else}
+      {#if leaderboard.length === 0}
+        <div class="empty-state">
+          <div class="empty-icon">🏆</div>
+          <h2>No Rankings Yet</h2>
+          <p>Be the first to discover Piclets!</p>
+        </div>
+      {:else}
+        <div class="leaderboard-list">
+          {#each leaderboard as entry, index (entry.username)}
+            <div
+              class="leaderboard-card"
+              in:fly={{ y: 20, delay: index * 50 }}
+            >
+              <div class="rank-badge" class:gold={entry.rank === 1} class:silver={entry.rank === 2} class:bronze={entry.rank === 3}>
+                #{entry.rank}
+              </div>
+
+              <div class="player-info">
+                <h3>{entry.username}</h3>
+                <div class="stats">
+                  <span>🔍 {entry.uniqueDiscoveries} unique</span>
+                  <span>📊 {entry.totalDiscoveries} total</span>
+                  <span>⭐ {entry.rarityScore} points</span>
+                </div>
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    {/if}
+  </PullToRefresh>
+</div>
+
+<style>
+  .activity-page {
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .view-selector {
+    display: flex;
+    gap: 0.5rem;
+    padding: 1rem;
+    background: #fff;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .view-tab {
+    flex: 1;
+    padding: 0.75rem;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    background: #f5f5f5;
+    color: #666;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .view-tab.active {
+    background: #007bff;
+    color: white;
+    border-color: #007bff;
+  }
+
+  .loading, .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 60vh;
+    text-align: center;
+    padding: 1rem;
+  }
+
+  .spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid #f0f0f0;
+    border-top-color: #007bff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 1rem;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .empty-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+  }
+
+  .empty-state h2 {
+    margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+    color: #333;
+  }
+
+  .empty-state p {
+    color: #666;
+    font-size: 0.9rem;
+    margin: 0.25rem 0;
+  }
+
+  .hint {
+    font-style: italic;
+    color: #999;
+    margin-top: 1rem;
+  }
+
+  .activity-list, .leaderboard-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+    padding-bottom: 5rem;
+  }
+
+  .activity-card, .leaderboard-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    padding: 1rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    transition: all 0.2s ease;
+  }
+
+  .activity-card:hover, .leaderboard-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  }
+
+  .activity-icon {
+    width: 48px;
+    height: 48px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f0f7ff;
+    border-radius: 50%;
+  }
+
+  .type-icon {
+    font-size: 1.5rem;
+  }
+
+  .activity-info, .player-info {
+    flex: 1;
+  }
+
+  .activity-info h3, .player-info h3 {
+    margin: 0 0 0.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #1a1a1a;
+  }
+
+  .activity-info p {
+    margin: 0 0 0.5rem;
+    font-size: 0.875rem;
+    color: #666;
+  }
+
+  .activity-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .rarity-badge {
+    padding: 0.125rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: white;
+    text-transform: uppercase;
+  }
+
+  .time {
+    font-size: 0.75rem;
+    color: #999;
+  }
+
+  .rank-badge {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: #f0f0f0;
+    font-weight: bold;
+    font-size: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  .rank-badge.gold {
+    background: linear-gradient(135deg, #FFD700, #FFA500);
+    color: white;
+  }
+
+  .rank-badge.silver {
+    background: linear-gradient(135deg, #C0C0C0, #808080);
+    color: white;
+  }
+
+  .rank-badge.bronze {
+    background: linear-gradient(135deg, #CD7F32, #8B4513);
+    color: white;
+  }
+
+  .stats {
+    display: flex;
+    gap: 1rem;
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    color: #666;
+  }
+
+  .stats span {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+</style>

src/lib/components/Pages/Battle.svelte

@@ -1,177 +0,0 @@
-<script lang="ts">
-  import { fade } from 'svelte/transition';
-  import type { PicletInstance } from '$lib/db/schema';
-  import LLMBattleEngine from '../Battle/LLMBattleEngine.svelte';
-  import type { GradioClient } from '$lib/types';
-  
-  interface Props {
-    playerPiclet: PicletInstance;
-    enemyPiclet: PicletInstance;
-    isWildBattle: boolean;
-    rosterPiclets?: PicletInstance[];
-    onBattleEnd: (result: { winner: 'player' | 'enemy'; capturedPiclet?: PicletInstance }) => void;
-    commandClient: GradioClient;
-  }
-
-  let { playerPiclet, enemyPiclet, isWildBattle, rosterPiclets, onBattleEnd, commandClient }: Props = $props();
-
-  // Simple battle state
-  let battleEnded = $state(false);
-  let battleResult: { winner: 'player' | 'enemy'; capturedPiclet?: PicletInstance } | null = $state(null);
-
-  // Handle battle end
-  function handleBattleEnd(winner: 'player' | 'enemy') {
-    battleEnded = true;
-    
-    // Simplified: no capture mechanics since Piclets are auto-captured when scanned
-    battleResult = { winner };
-    
-    // Give time for final battle messages, then call parent handler
-    setTimeout(() => {
-      onBattleEnd(battleResult!);
-    }, 2000);
-  }
-</script>
-
-<div class="battle-page" transition:fade>
-  <!-- Header -->
-  <div class="battle-header">
-    <h2>{isWildBattle ? 'Wild Battle' : 'Trainer Battle'}</h2>
-    <div class="battle-participants">
-      <div class="participant player">
-        <img src={playerPiclet.imageUrl} alt={playerPiclet.typeId} />
-        <h3>{playerPiclet.typeId}</h3>
-        <span class="tier tier-{playerPiclet.tier}">{playerPiclet.tier}</span>
-      </div>
-      
-      <div class="vs-indicator">
-        <span>VS</span>
-      </div>
-      
-      <div class="participant enemy">
-        <img src={enemyPiclet.imageUrl} alt={enemyPiclet.typeId} />
-        <h3>{enemyPiclet.typeId}</h3>
-        <span class="tier tier-{enemyPiclet.tier}">{enemyPiclet.tier}</span>
-      </div>
-    </div>
-  </div>
-
-  <!-- Main Battle Area -->
-  <div class="battle-main">
-    {#if !battleEnded}
-      <LLMBattleEngine
-        {playerPiclet}
-        {enemyPiclet}
-        {rosterPiclets}
-        {commandClient}
-        onBattleEnd={handleBattleEnd}
-      />
-    {:else}
-      <div class="battle-results">
-        <h2>{battleResult?.winner === 'player' ? '🎉 Victory!' : '💀 Defeat!'}</h2>
-        
-        {#if battleResult?.winner === 'player'}
-          <p>You defeated {enemyPiclet.typeId}!</p>
-        {:else}
-          <p>{playerPiclet.typeId} was defeated by {enemyPiclet.typeId}...</p>
-          <p>Better luck next time!</p>
-        {/if}
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .battle-page {
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-  }
-  
-  .battle-header {
-    padding: 1rem;
-    text-align: center;
-    background: rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(10px);
-  }
-  
-  .battle-participants {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 2rem;
-    margin-top: 1rem;
-  }
-  
-  .participant {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  
-  .participant img {
-    width: 80px;
-    height: 80px;
-    object-fit: cover;
-    border-radius: 50%;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-  }
-  
-  .participant.player img {
-    border-color: #007bff;
-  }
-  
-  .participant.enemy img {
-    border-color: #dc3545;
-  }
-  
-  .tier {
-    padding: 0.25rem 0.5rem;
-    border-radius: 12px;
-    font-size: 0.8rem;
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-  
-  .tier-low { background: #6c757d; }
-  .tier-medium { background: #28a745; }
-  .tier-high { background: #fd7e14; }
-  .tier-legendary { background: #dc3545; }
-  
-  .vs-indicator {
-    font-size: 2rem;
-    font-weight: bold;
-    color: #ffd700;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-  }
-  
-  .battle-main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    background: white;
-    color: #333;
-    border-radius: 20px 20px 0 0;
-    overflow: hidden;
-  }
-  
-  .battle-results {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 2rem;
-    gap: 1rem;
-  }
-  
-  .battle-results h2 {
-    font-size: 2.5rem;
-    margin: 0;
-  }
-  
-</style>

src/lib/components/Pages/Encounters.svelte

@@ -1,586 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { fade, fly } from 'svelte/transition';
-  import type { Encounter, GameState, PicletInstance } from '$lib/db/schema';
-  import { EncounterType } from '$lib/db/schema';
-  import { EncounterService } from '$lib/db/encounterService';
-  import { getOrCreateGameState, incrementCounter, addProgressPoints } from '$lib/db/gameState';
-    import { db } from '$lib/db';
-  import { uiStore } from '$lib/stores/ui';
-  import Battle from './Battle.svelte';
-  import PullToRefresh from '../UI/PullToRefresh.svelte';
-  import NewlyCaughtPicletDetail from '../Piclets/NewlyCaughtPicletDetail.svelte';
-  
-  let encounters: Encounter[] = [];
-  let isLoading = true;
-  let isRefreshing = false;
-  let monsterImages: Map<string, string> = new Map();
-  
-  // Battle state
-  let showBattle = false;
-  let battlePlayerPiclet: PicletInstance | null = null;
-  let battleEnemyPiclet: PicletInstance | null = null;
-  let battleIsWild = true;
-  let battleRosterPiclets: PicletInstance[] = [];
-  
-  // Newly caught Piclet state
-  let showNewlyCaught = false;
-  let newlyCaughtPiclet: PicletInstance | null = null;
-  
-  onMount(async () => {
-    await loadEncounters();
-  });
-  
-  async function loadEncounters() {
-    isLoading = true;
-    try {
-      // Check if we have any piclet instances
-      const playerPiclets = await db.picletInstances.toArray();
-      
-      if (playerPiclets.length === 0) {
-        // No piclets discovered/caught - show empty state
-        encounters = [];
-        isLoading = false;
-        return;
-      }
-      
-      // Player has piclets - always generate fresh encounters with wild piclets
-      console.log('Player has piclets - generating fresh encounters with wild piclets');
-      await EncounterService.forceEncounterRefresh();
-      encounters = await EncounterService.generateEncounters();
-      
-      console.log('Final encounters:', encounters.map(e => ({ type: e.type, title: e.title })));
-      
-      // Load piclet images for wild encounters
-      await loadPicletImages();
-    } catch (error) {
-      console.error('Error loading encounters:', error);
-    }
-    isLoading = false;
-  }
-  
-  async function loadPicletImages() {
-    const picletEncounters = encounters.filter(e => 
-      (e.type === EncounterType.WILD_PICLET || e.type === EncounterType.FIRST_PICLET) && e.picletTypeId
-    );
-    
-    for (const encounter of picletEncounters) {
-      if (!encounter.picletTypeId) continue;
-      
-      // Find a piclet instance with this typeId
-      const piclet = await db.picletInstances
-        .where('typeId')
-        .equals(encounter.picletTypeId)
-        .first();
-      
-      if (piclet && piclet.imageData) {
-        monsterImages.set(encounter.picletTypeId, piclet.imageData);
-      }
-    }
-    // Trigger reactive update
-    monsterImages = monsterImages;
-  }
-  
-  async function handleRefresh() {
-    isRefreshing = true;
-    try {
-      // Force refresh encounters
-      console.log('Force refreshing encounters...');
-      encounters = await EncounterService.generateEncounters();
-      
-      // Load piclet images for new encounters
-      await loadPicletImages();
-      
-      // Update game state with new refresh time
-      const gameState = await getOrCreateGameState();
-      await db.gameState.update(gameState.id!, {
-        lastEncounterRefresh: new Date()
-      });
-    } catch (error) {
-      console.error('Error refreshing encounters:', error);
-    }
-    isRefreshing = false;
-  }
-  
-  async function handleEncounterTap(encounter: Encounter) {
-    if (encounter.type === EncounterType.FIRST_PICLET) {
-      // First piclet encounter - direct catch
-      await handleFirstPicletEncounter(encounter);
-    } else if (encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId) {
-      // Regular wild encounter - start battle
-      await startBattle(encounter);
-    }
-  }
-  
-
-  async function handleFirstPicletEncounter(encounter: Encounter) {
-    try {
-      if (!encounter.picletInstanceId) {
-        throw new Error('No piclet instance specified for first piclet encounter');
-      }
-
-      // Get the specific piclet instance
-      const picletInstance = await db.picletInstances.get(encounter.picletInstanceId);
-      if (!picletInstance) {
-        throw new Error('Piclet instance not found');
-      }
-
-      // Mark the piclet as caught and set it as the first roster piclet
-      await db.picletInstances.update(encounter.picletInstanceId, {
-        caught: true,
-        caughtAt: new Date(),
-        isInRoster: true,
-        rosterPosition: 0,
-        level: 3
-      });
-
-      // Get the updated piclet instance
-      const caughtPiclet = await db.picletInstances.get(encounter.picletInstanceId);
-      
-      // Show the newly caught piclet detail page
-      newlyCaughtPiclet = caughtPiclet!;
-      showNewlyCaught = true;
-      
-      // Update counters and progress
-      incrementCounter('picletsCapured');
-      addProgressPoints(100);
-      
-      // Force refresh encounters to remove the first piclet encounter
-      await forceEncounterRefresh();
-    } catch (error) {
-      console.error('Error handling first piclet encounter:', error);
-      alert('Something went wrong. Please try again.');
-    }
-  }
-  
-  async function forceEncounterRefresh() {
-    isRefreshing = true;
-    try {
-      await EncounterService.forceEncounterRefresh();
-      encounters = await EncounterService.generateEncounters();
-      await loadPicletImages();
-    } catch (error) {
-      console.error('Error refreshing encounters:', error);
-    }
-    isRefreshing = false;
-  }
-  
-  function getEncounterIcon(encounter: Encounter): string {
-    switch (encounter.type) {
-      case EncounterType.FIRST_PICLET:
-        return '✨';
-      case EncounterType.WILD_PICLET:
-      default:
-        return '⚔️';
-    }
-  }
-  
-  function getEncounterColor(encounter: Encounter): string {
-    switch (encounter.type) {
-      case EncounterType.WILD_PICLET:
-        return '#4caf50';
-      case EncounterType.FIRST_PICLET:
-        return '#ffd700';
-      default:
-        return '#607d8b';
-    }
-  }
-  
-  async function startBattle(encounter: Encounter) {
-    try {
-      // Get all piclet instances
-      const allPiclets = await db.picletInstances.toArray();
-      
-      // Filter piclets that have a roster position (0-5)
-      const rosterPiclets = allPiclets.filter(p => 
-        p.rosterPosition !== undefined && 
-        p.rosterPosition !== null && 
-        p.rosterPosition >= 0 && 
-        p.rosterPosition <= 5
-      );
-      
-      // Sort by roster position
-      rosterPiclets.sort((a, b) => (a.rosterPosition ?? 0) - (b.rosterPosition ?? 0));
-      
-      if (rosterPiclets.length === 0) {
-        alert('You need at least one piclet in your roster to battle!');
-        return;
-      }
-      
-      // Check if there's at least one piclet in position 0
-      const hasPosition0 = rosterPiclets.some(p => p.rosterPosition === 0);
-      if (!hasPosition0) {
-        alert('You need a piclet in the first roster slot (position 0) to battle!');
-        return;
-      }
-      
-      // Generate enemy piclet for battle
-      const enemyPiclet = await generateEnemyPiclet(encounter);
-      if (!enemyPiclet) return;
-      
-      // Set up battle
-      battlePlayerPiclet = rosterPiclets[0];
-      battleEnemyPiclet = enemyPiclet;
-      battleIsWild = true;
-      battleRosterPiclets = rosterPiclets; // Pass all roster piclets
-      showBattle = true;
-      uiStore.enterBattle();
-    } catch (error) {
-      console.error('Error starting battle:', error);
-    }
-  }
-  
-  async function generateEnemyPiclet(encounter: Encounter): Promise<PicletInstance | null> {
-    if (!encounter.picletTypeId || !encounter.enemyLevel) return null;
-    
-    // Get a piclet instance with this typeId to use as a template
-    const templatePiclet = await db.picletInstances
-      .where('typeId')
-      .equals(encounter.picletTypeId)
-      .first();
-    
-    if (!templatePiclet) {
-      console.error('Piclet template not found for typeId:', encounter.picletTypeId);
-      return null;
-    }
-    
-    // Calculate stats based on template's base stats and encounter level
-    const level = encounter.enemyLevel;
-    
-    // Create enemy piclet instance based on template (simplified)
-    const enemyPiclet: PicletInstance = {
-      ...templatePiclet,
-      id: -1, // Temporary ID for enemy
-      
-      isInRoster: false,
-      caughtAt: new Date()
-    };
-    
-    return enemyPiclet;
-  }
-
-  async function addCapturedPicletToRoster(capturedPiclet: PicletInstance) {
-    try {
-      // Get all roster piclets to find the next available position
-      const allPiclets = await db.picletInstances.toArray();
-      const rosterPiclets = allPiclets.filter(p => 
-        p.rosterPosition !== undefined && 
-        p.rosterPosition !== null && 
-        p.rosterPosition >= 0 && 
-        p.rosterPosition <= 5
-      );
-      
-      // Find next available roster position (0-5)
-      let nextPosition = 0;
-      const occupiedPositions = new Set(rosterPiclets.map(p => p.rosterPosition));
-      while (occupiedPositions.has(nextPosition) && nextPosition <= 5) {
-        nextPosition++;
-      }
-      
-      if (nextPosition > 5) {
-        // Roster is full - for now just add to position 5 (could implement storage system later)
-        console.warn('Roster is full, overriding position 5');
-        nextPosition = 5;
-      }
-      
-      console.log('About to create captured Piclet in database:', {
-        id: capturedPiclet.id,
-        nickname: capturedPiclet.nickname,
-        typeId: capturedPiclet.typeId,
-        level: capturedPiclet.level
-      });
-      
-      // Create a new database record for the captured Piclet (enemy has temporary ID -1)
-      const newPicletData = {
-        ...capturedPiclet,
-        // Remove the temporary ID so database auto-generates a real one
-        id: undefined as any,
-        caught: true,
-        caughtAt: new Date(),
-        isInRoster: true,
-        rosterPosition: nextPosition
-      };
-      
-      // Add the captured piclet to the database
-      const newPicletId = await db.picletInstances.add(newPicletData);
-      console.log('Created new database record with ID:', newPicletId);
-      
-      // Get the newly created piclet instance and show detail page
-      const createdPiclet = await db.picletInstances.get(newPicletId);
-      console.log('Retrieved newly created piclet from database:', createdPiclet);
-      
-      if (createdPiclet) {
-        console.log('Setting newlyCaughtPiclet and showing detail page:', createdPiclet.nickname);
-        newlyCaughtPiclet = createdPiclet;
-        showNewlyCaught = true;
-        console.log('showNewlyCaught is now:', showNewlyCaught);
-        console.log(`Added captured Piclet ${createdPiclet.nickname} to roster position ${nextPosition}`);
-      } else {
-        console.error('Could not retrieve newly created piclet from database');
-        // Use fallback data
-        const fallbackPiclet = {
-          ...capturedPiclet,
-          id: newPicletId
-        };
-        newlyCaughtPiclet = fallbackPiclet;
-        showNewlyCaught = true;
-      }
-    } catch (error) {
-      console.error('Error adding captured Piclet to roster:', error);
-    }
-  }
-  
-  async function handleBattleEnd(result: any) {
-    showBattle = false;
-    uiStore.exitBattle();
-    
-    if (result === true) {
-      // Victory
-      console.log('Battle won!');
-      // Force refresh encounters after battle
-      forceEncounterRefresh();
-    } else if (result === false) {
-      // Defeat or ran away
-      console.log('Battle lost or fled');
-      // Force refresh encounters after battle
-      forceEncounterRefresh();
-    } else if (result && result.id) {
-      // Caught a piclet - add to roster
-      console.log('Piclet caught!', result);
-      await addCapturedPicletToRoster(result);
-      incrementCounter('picletsCapured');
-      addProgressPoints(100);
-      // Don't refresh encounters immediately - let user view the caught piclet first
-      // Refresh will happen when they close the detail dialog
-    }
-  }
-</script>
-
-{#if showBattle && battlePlayerPiclet && battleEnemyPiclet}
-  <Battle 
-    playerPiclet={battlePlayerPiclet}
-    enemyPiclet={battleEnemyPiclet}
-    isWildBattle={battleIsWild}
-    rosterPiclets={battleRosterPiclets}
-    onBattleEnd={handleBattleEnd}
-  />
-{:else}
-<div class="encounters-page">
-  <PullToRefresh onRefresh={handleRefresh}>
-    {#if isLoading}
-      <div class="loading">
-        <div class="spinner"></div>
-        <p>Loading encounters...</p>
-      </div>
-    {:else if encounters.length === 0}
-      <div class="empty-state">
-        <div class="empty-icon">📸</div>
-        <h2>No Piclets Discovered</h2>
-        <p>To start your adventure, select the Snap logo image:</p>
-        <div class="logo-instruction">
-          <img src="/assets/snap_logo.png" alt="Snap Logo" class="snap-logo-preview" />
-          <p class="instruction-text">↑ Select this image in the scanner</p>
-        </div>
-      </div>
-    {:else}
-      <div class="encounters-list">
-      {#each encounters as encounter, index (encounter.id)}
-        <button
-          class="encounter-card"
-          style="border-color: {getEncounterColor(encounter)}30"
-          on:click={() => handleEncounterTap(encounter)}
-          in:fly={{ y: 20, delay: index * 50 }}
-          disabled={isRefreshing}
-        >
-          <div class="encounter-icon">
-            {#if (encounter.type === EncounterType.WILD_PICLET || encounter.type === EncounterType.FIRST_PICLET) && encounter.picletTypeId}
-              {#if monsterImages.has(encounter.picletTypeId)}
-                <img 
-                  src={monsterImages.get(encounter.picletTypeId)}
-                  alt="Piclet"
-                />
-              {:else}
-                <div class="fallback-icon">{getEncounterIcon(encounter)}</div>
-              {/if}
-            {:else}
-              <span class="type-icon">{getEncounterIcon(encounter)}</span>
-            {/if}
-          </div>
-          
-          <div class="encounter-info">
-            <h3>{encounter.title}</h3>
-            <p>{encounter.description}</p>
-          </div>
-          
-          <div class="encounter-arrow">›</div>
-        </button>
-      {/each}
-    </div>
-  {/if}
-  </PullToRefresh>
-</div>
-{/if}
-
-<!-- Newly Caught Piclet Dialog -->
-{#if showNewlyCaught && newlyCaughtPiclet}
-  <NewlyCaughtPicletDetail 
-    instance={newlyCaughtPiclet}
-    onClose={() => {
-      showNewlyCaught = false;
-      newlyCaughtPiclet = null;
-      // Refresh encounters after user closes the detail dialog
-      forceEncounterRefresh();
-    }}
-  />
-{/if}
-
-<style>
-  .encounters-page {
-    height: 100%;
-    overflow: hidden; /* PullToRefresh handles scrolling */
-  }
-  
-  .loading, .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 60vh;
-    text-align: center;
-    padding: 1rem;
-  }
-  
-  .spinner {
-    width: 48px;
-    height: 48px;
-    border: 4px solid #f0f0f0;
-    border-top-color: #4caf50;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-bottom: 1rem;
-  }
-  
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-  
-  .empty-icon {
-    font-size: 4rem;
-    margin-bottom: 1rem;
-  }
-  
-  .empty-state h2 {
-    margin: 0 0 0.5rem;
-    font-size: 1.25rem;
-    color: #333;
-  }
-  
-  .empty-state p {
-    color: #666;
-    font-size: 0.9rem;
-  }
-  
-  .encounters-list {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 1rem;
-    padding-bottom: 5rem;
-  }
-  
-  .encounter-card {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    background: #fff;
-    border: 2px solid;
-    border-radius: 12px;
-    padding: 1rem;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    transition: all 0.2s ease;
-    cursor: pointer;
-    width: 100%;
-    text-align: left;
-  }
-  
-  .encounter-card:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
-  }
-  
-  .encounter-card:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  
-  .encounter-icon {
-    width: 60px;
-    height: 60px;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .encounter-icon img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 8px;
-  }
-  
-  
-  
-  
-  .type-icon, .fallback-icon {
-    font-size: 2rem;
-  }
-  
-  .encounter-info {
-    flex: 1;
-  }
-  
-  .encounter-info h3 {
-    margin: 0 0 0.25rem;
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: #1a1a1a;
-  }
-  
-  .encounter-info p {
-    margin: 0;
-    font-size: 0.875rem;
-    color: #666;
-  }
-  
-  .encounter-arrow {
-    font-size: 1.5rem;
-    color: #999;
-  }
-  
-  .logo-instruction {
-    margin-top: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  
-  .snap-logo-preview {
-    width: 120px;
-    height: 120px;
-    object-fit: contain;
-    border: 2px dashed #007bff;
-    border-radius: 12px;
-    padding: 1rem;
-    background: #f0f7ff;
-  }
-  
-  .instruction-text {
-    font-size: 0.875rem;
-    color: #007bff;
-    font-weight: 500;
-    margin: 0;
-  }
-
-</style>

src/lib/components/Pages/Pictuary.svelte

@@ -1,576 +1,374 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { getCaughtPiclets, getRosterPiclets, moveToRoster, swapRosterPositions, moveToStorage, getUncaughtPiclets } from '$lib/db/piclets';
+  import { getCollectedPiclets, getCanonicalPiclets } from '$lib/db/piclets';
   import type { PicletInstance } from '$lib/db/schema';
   import { db } from '$lib/db';
   import PicletCard from '../Piclets/PicletCard.svelte';
-  import EmptySlotCard from '../Piclets/EmptySlotCard.svelte';
-  import DraggablePicletCard from '../Piclets/DraggablePicletCard.svelte';
-  import RosterSlot from '../Piclets/RosterSlot.svelte';
   import PicletDetail from '../Piclets/PicletDetail.svelte';
-  import AddToRosterDialog from '../Piclets/AddToRosterDialog.svelte';
-  import ViewAll from './ViewAll.svelte';
-  import { PicletType } from '$lib/types/picletTypes';
-  
-  let rosterPiclets: PicletInstance[] = $state([]);
-  let storagePiclets: PicletInstance[] = $state([]);
-  let discoveredPiclets: PicletInstance[] = $state([]);
+  import { CanonicalService } from '$lib/services/canonicalService';
+
+  let collectedPiclets: PicletInstance[] = $state([]);
+  let canonicalPiclets: PicletInstance[] = $state([]);
   let isLoading = $state(true);
-  let currentlyDragging: PicletInstance | null = $state(null);
   let selectedPiclet: PicletInstance | null = $state(null);
-  let addToRosterPosition: number | null = $state(null);
-  let viewAllMode: 'storage' | 'discovered' | null = $state(null);
-  
-  // Map roster positions for easy access
-  let rosterMap = $derived(() => {
-    const map = new Map<number, PicletInstance>();
-    rosterPiclets.forEach(piclet => {
-      if (piclet.rosterPosition !== undefined) {
-        map.set(piclet.rosterPosition, piclet);
-      }
-    });
-    return map;
-  });
+  let viewMode: 'all' | 'canonical' | 'variations' = $state('all');
+  let searchQuery = $state('');
 
-  // Get the most common type in the roster for background theming
-  let dominantType = $derived(() => {
-    if (rosterPiclets.length === 0) {
-      return PicletType.BEAST; // Default fallback
+  // Filter piclets based on view mode and search
+  let filteredPiclets = $derived(() => {
+    let piclets = collectedPiclets;
+
+    // Filter by view mode
+    if (viewMode === 'canonical') {
+      piclets = piclets.filter(p => p.isCanonical);
+    } else if (viewMode === 'variations') {
+      piclets = piclets.filter(p => !p.isCanonical && p.canonicalId);
     }
 
-    // Count type occurrences
-    const typeCounts = new Map<PicletType, number>();
-    rosterPiclets.forEach(piclet => {
-      if (piclet.primaryType) {
-        const count = typeCounts.get(piclet.primaryType) || 0;
-        typeCounts.set(piclet.primaryType, count + 1);
-      }
-    });
+    // Filter by search query
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      piclets = piclets.filter(p =>
+        p.objectName?.toLowerCase().includes(query) ||
+        p.nickname?.toLowerCase().includes(query) ||
+        p.typeId.toLowerCase().includes(query)
+      );
+    }
+
+    return piclets;
+  });
 
-    // Find the most common type
-    let maxCount = 0;
-    let mostCommonType = PicletType.BEAST;
-    typeCounts.forEach((count, type) => {
-      if (count > maxCount) {
-        maxCount = count;
-        mostCommonType = type;
-      }
+  // Group piclets by object for display
+  let groupedPiclets = $derived(() => {
+    const groups = new Map<string, PicletInstance[]>();
+
+    filteredPiclets.forEach(piclet => {
+      const key = piclet.objectName || 'unknown';
+      const group = groups.get(key) || [];
+      group.push(piclet);
+      groups.set(key, group);
     });
 
-    return mostCommonType;
+    return Array.from(groups.entries()).sort((a, b) =>
+      a[0].localeCompare(b[0])
+    );
+  });
+
+  // Stats calculation
+  let stats = $derived(() => {
+    const totalDiscovered = collectedPiclets.length;
+    const uniqueObjects = new Set(collectedPiclets.map(p => p.objectName)).size;
+    const canonicalCount = collectedPiclets.filter(p => p.isCanonical).length;
+    const variationCount = collectedPiclets.filter(p => !p.isCanonical).length;
+
+    // Calculate total rarity score
+    const rarityScore = collectedPiclets.reduce((sum, p) => {
+      const points = CanonicalService.calculateRarity(p.scanCount);
+      const multiplier = points === 'legendary' ? 100 : points === 'epic' ? 50 :
+                        points === 'rare' ? 20 : points === 'uncommon' ? 10 : 5;
+      return sum + multiplier;
+    }, 0);
+
+    return {
+      totalDiscovered,
+      uniqueObjects,
+      canonicalCount,
+      variationCount,
+      rarityScore
+    };
+  });
+
+  onMount(async () => {
+    await loadPiclets();
   });
 
-  // Get background image path for the dominant type
-  let backgroundImagePath = $derived(`/classes/${dominantType}.png`);
-  
   async function loadPiclets() {
+    isLoading = true;
     try {
-      // Run type migration first time to fix any invalid types
-      
-      const allInstances = await getCaughtPiclets();
-      
-      // Filter based on rosterPosition instead of isInRoster
-      rosterPiclets = allInstances.filter(p => 
-        p.rosterPosition !== undefined && 
-        p.rosterPosition !== null && 
-        p.rosterPosition >= 0 && 
-        p.rosterPosition <= 5
-      );
-      storagePiclets = allInstances.filter(p => 
-        p.rosterPosition === undefined || 
-        p.rosterPosition === null ||
-        p.rosterPosition < 0 ||
-        p.rosterPosition > 5
+      collectedPiclets = await getCollectedPiclets();
+      canonicalPiclets = await getCanonicalPiclets();
+
+      // Sort by discovery date (most recent first)
+      collectedPiclets.sort((a, b) =>
+        (b.discoveredAt?.getTime() || 0) - (a.discoveredAt?.getTime() || 0)
       );
-      
-      // Get all uncaught piclets (discovered but not caught)
-      discoveredPiclets = await getUncaughtPiclets();
-    } catch (err) {
-      console.error('Failed to load piclets:', err);
+    } catch (error) {
+      console.error('Failed to load piclets:', error);
     } finally {
       isLoading = false;
     }
   }
-  
-  async function handleBulkDownload() {
-    try {
-      console.log('Starting bulk download of all Piclets...');
-      
-      // Get all piclets (roster + storage + discovered)
-      const allPiclets = [...rosterPiclets, ...storagePiclets, ...discoveredPiclets];
-      
-      if (allPiclets.length === 0) {
-        console.log('No Piclets to export');
-        return;
-      }
-      
-      // Get trainer scan data for all piclets
-      const trainerScanData = await db.trainerScanProgress
-        .where('status').equals('completed')
-        .toArray();
-      
-      // Create a map of piclet ID to trainer data
-      const trainerDataMap = new Map();
-      trainerScanData.forEach(scan => {
-        if (scan.picletInstanceId) {
-          trainerDataMap.set(scan.picletInstanceId, {
-            trainerName: scan.trainerName,
-            imagePath: scan.imagePath,
-            imageIndex: scan.imageIndex,
-            completedAt: scan.completedAt,
-            remoteUrl: scan.remoteUrl
-          });
-        }
-      });
-      
-      // Create export data for each piclet
-      const exportData = {
-        exportInfo: {
-          totalPiclets: allPiclets.length,
-          exportedAt: new Date().toISOString(),
-          exportSource: "Pictuary Game - Bulk Export",
-          version: "1.0"
-        },
-        piclets: allPiclets.map(piclet => {
-          const trainerInfo = trainerDataMap.get(piclet.id!);
-          
-          return {
-            // Core piclet data (complete dataset)
-            id: piclet.id,
-            typeId: piclet.typeId,
-            nickname: piclet.nickname,
-            primaryType: piclet.primaryType,
-            
-            // Current Stats
-            currentHp: piclet.currentHp,
-            maxHp: piclet.maxHp,
-            level: piclet.level,
-            xp: piclet.xp,
-            attack: piclet.attack,
-            defense: piclet.defense,
-            fieldAttack: piclet.fieldAttack,
-            fieldDefense: piclet.fieldDefense,
-            speed: piclet.speed,
-            
-            // Base Stats
-            baseHp: piclet.baseHp,
-            baseAttack: piclet.baseAttack,
-            baseDefense: piclet.baseDefense,
-            baseFieldAttack: piclet.baseFieldAttack,
-            baseFieldDefense: piclet.baseFieldDefense,
-            baseSpeed: piclet.baseSpeed,
-            
-            // Battle data
-            moves: piclet.moves,
-            nature: piclet.nature,
-            specialAbility: piclet.specialAbility,
-            specialAbilityUnlockLevel: piclet.specialAbilityUnlockLevel,
-            
-            // Roster info
-            isInRoster: piclet.isInRoster,
-            rosterPosition: piclet.rosterPosition,
-            
-            // Metadata
-            caught: piclet.caught,
-            caughtAt: piclet.caughtAt,
-            bst: piclet.bst,
-            tier: piclet.tier,
-            role: piclet.role,
-            variance: piclet.variance,
-            
-            // Original generation data
-            imageUrl: piclet.imageUrl,
-            imageData: piclet.imageData,
-            imageCaption: piclet.imageCaption,
-            concept: piclet.concept,
-            description: piclet.description,
-            imagePrompt: piclet.imagePrompt,
-            
-            // Trainer scanner data (if available)
-            trainerInfo: trainerInfo || null
-          };
-        })
-      };
-      
-      // Create and download JSON file
-      const jsonString = JSON.stringify(exportData, null, 2);
-      const blob = new Blob([jsonString], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-      
-      // Create temporary download link
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = `pictuary-collection-${Date.now()}.json`;
-      
-      // Trigger download
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      
-      // Clean up the blob URL
-      URL.revokeObjectURL(url);
-      
-      console.log(`Successfully exported ${allPiclets.length} Piclets with trainer data`);
-    } catch (error) {
-      console.error('Failed to export Piclet collection:', error);
-    }
-  }
-  
-  onMount(() => {
-    loadPiclets();
-  });
-  
-  function handleRosterClick(position: number) {
-    const piclet = rosterMap().get(position);
-    if (piclet) {
-      selectedPiclet = piclet;
-    } else {
-      addToRosterPosition = position;
-    }
-  }
-  
-  function handleStorageClick(piclet: PicletInstance) {
+
+  function handlePicletClick(piclet: PicletInstance) {
     selectedPiclet = piclet;
   }
-  
-  
-  function handleDragStart(instance: PicletInstance) {
-    currentlyDragging = instance;
-  }
-  
-  function handleDragEnd() {
-    currentlyDragging = null;
+
+  function handleDetailClose() {
+    selectedPiclet = null;
   }
-  
-  async function handleRosterDrop(position: number, dragData: any) {
-    if (!dragData.instanceId) return;
-    
-    try {
-      const draggedPiclet = [...rosterPiclets, ...storagePiclets].find(p => p.id === dragData.instanceId);
-      if (!draggedPiclet) return;
-      
-      const targetPiclet = rosterMap().get(position);
-      
-      if (dragData.fromRoster && targetPiclet) {
-        // Swap two roster positions
-        await swapRosterPositions(
-          dragData.instanceId,
-          dragData.fromPosition,
-          targetPiclet.id!,
-          position
-        );
-      } else {
-        // Move to roster (possibly replacing existing)
-        await moveToRoster(dragData.instanceId, position);
-      }
-      
-      await loadPiclets();
-    } catch (err) {
-      console.error('Failed to handle drop:', err);
-    }
+
+  async function handlePicletDeleted() {
+    await loadPiclets();
   }
 </script>
 
-{#if viewAllMode === 'storage'}
-  <ViewAll
-    title="Storage"
-    type="storage"
-    items={storagePiclets}
-    onBack={() => viewAllMode = null}
-    onItemsChanged={loadPiclets}
-    onDragStart={handleDragStart}
-    onDragEnd={handleDragEnd}
-  />
-{:else if viewAllMode === 'discovered'}
-  <ViewAll
-    title="Discovered"
-    type="discovered"
-    items={discoveredPiclets}
-    onBack={() => viewAllMode = null}
-  />
-{:else}
-  <div class="pictuary-page" style="--bg-image: url('{backgroundImagePath}')">
-  {#if isLoading}
-    <div class="loading-state">
-      <div class="spinner"></div>
-      <p>Loading collection...</p>
+<div class="pictuary-page">
+  <!-- Header with Stats -->
+  <div class="header">
+    <h1>Pictuary</h1>
+    <div class="stats">
+      <div class="stat-item">
+        <span class="stat-value">{stats.totalDiscovered}</span>
+        <span class="stat-label">Total</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-value">{stats.uniqueObjects}</span>
+        <span class="stat-label">Objects</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-value">{stats.canonicalCount}</span>
+        <span class="stat-label">Canonical</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-value">{stats.variationCount}</span>
+        <span class="stat-label">Variations</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-value">⭐{stats.rarityScore}</span>
+        <span class="stat-label">Score</span>
+      </div>
     </div>
-  {:else if rosterPiclets.length === 0 && storagePiclets.length === 0 && discoveredPiclets.length === 0}
-    <div class="empty-state">
-      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
-        <circle cx="12" cy="13" r="4"></circle>
-      </svg>
-      <h3>No Piclets Yet</h3>
-      <p>Take photos to discover new Piclets!</p>
+  </div>
+
+  <!-- Search and Filters -->
+  <div class="controls">
+    <input
+      type="text"
+      placeholder="Search piclets..."
+      bind:value={searchQuery}
+      class="search-input"
+    />
+    <div class="view-selector">
+      <button
+        class="view-btn"
+        class:active={viewMode === 'all'}
+        onclick={() => viewMode = 'all'}
+      >
+        All
+      </button>
+      <button
+        class="view-btn"
+        class:active={viewMode === 'canonical'}
+        onclick={() => viewMode = 'canonical'}
+      >
+        Canonical
+      </button>
+      <button
+        class="view-btn"
+        class:active={viewMode === 'variations'}
+        onclick={() => viewMode = 'variations'}
+      >
+        Variations
+      </button>
     </div>
-  {:else}
-    <div class="content">
-      <!-- Roster Section -->
-      <section class="roster-section">
-        <h2>Roster</h2>
-        <div class="roster-grid">
-          {#each Array(6) as _, position}
-            <RosterSlot
-              {position}
-              piclet={rosterMap().get(position)}
-              size={110}
-              onDrop={handleRosterDrop}
-              onPicletClick={(piclet) => handleRosterClick(position)}
-              onEmptyClick={handleRosterClick}
-              onDragStart={handleDragStart}
-              onDragEnd={handleDragEnd}
-            />
-          {/each}
-        </div>
-      </section>
-      
-      <!-- Storage Section -->
-      {#if storagePiclets.length > 0}
-        <section class="storage-section">
-          <div class="section-header">
-            <h2>Storage ({storagePiclets.length})</h2>
-            {#if storagePiclets.length > 10}
-              <button class="view-all-btn">View All</button>
+  </div>
+
+  <!-- Collection Grid -->
+  <div class="collection-container">
+    {#if isLoading}
+      <div class="loading">
+        <div class="spinner"></div>
+        <p>Loading collection...</p>
+      </div>
+    {:else if filteredPiclets.length === 0}
+      <div class="empty-state">
+        {#if collectedPiclets.length === 0}
+          <h2>No Piclets Discovered</h2>
+          <p>Start scanning objects to build your collection!</p>
+        {:else}
+          <h2>No Results</h2>
+          <p>Try adjusting your filters or search query</p>
+        {/if}
+      </div>
+    {:else}
+      <div class="piclet-grid">
+        {#each filteredPiclets as piclet (piclet.id)}
+          <div class="piclet-item" onclick={() => handlePicletClick(piclet)}>
+            <PicletCard instance={piclet} />
+            {#if piclet.isCanonical}
+              <div class="canonical-badge">✨</div>
+            {/if}
+            {#if piclet.scanCount > 1}
+              <div class="scan-badge">{piclet.scanCount}×</div>
             {/if}
           </div>
-          <div class="horizontal-scroll">
-            {#each storagePiclets.slice(0, 10) as piclet}
-              <DraggablePicletCard
-                instance={piclet}
-                size={110}
-                onClick={() => handleStorageClick(piclet)}
-                onDragStart={handleDragStart}
-                onDragEnd={handleDragEnd}
-              />
-            {/each}
-          </div>
-        </section>
-      {/if}
-      
-      <!-- Discovered Section -->
-      {#if discoveredPiclets.length > 0}
-        <section class="discovered-section">
-          <div class="section-header">
-            <h2>Discovered ({discoveredPiclets.length})</h2>
-            <button 
-              class="download-button" 
-              onclick={handleBulkDownload}
-              title="Download all Piclets with trainer data"
-            >
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                <polyline points="7,10 12,15 17,10"></polyline>
-                <line x1="12" y1="15" x2="12" y2="3"></line>
-              </svg>
-              Download
-            </button>
-          </div>
-          <div class="discovered-grid">
-            {#each discoveredPiclets as piclet}
-              <PicletCard 
-                piclet={piclet}
-                size={100}
-                onClick={() => selectedPiclet = piclet}
-              />
-            {/each}
-          </div>
-        </section>
-      {/if}
-    </div>
-  {/if}
-  
-  {#if selectedPiclet}
-    <PicletDetail 
-      instance={selectedPiclet}
-      onClose={() => selectedPiclet = null}
-      onDeleted={loadPiclets}
-    />
-  {/if}
-  
-  {#if addToRosterPosition !== null}
-    <AddToRosterDialog
-      position={addToRosterPosition}
-      availablePiclets={storagePiclets}
-      onClose={() => addToRosterPosition = null}
-      onAdded={loadPiclets}
-    />
-  {/if}
+        {/each}
+      </div>
+    {/if}
   </div>
+</div>
+
+<!-- Detail View -->
+{#if selectedPiclet}
+  <PicletDetail
+    instance={selectedPiclet}
+    onClose={handleDetailClose}
+    onDeleted={handlePicletDeleted}
+  />
 {/if}
 
 <style>
   .pictuary-page {
     height: 100%;
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    background: white;
-    position: relative;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   }
-  
-  .pictuary-page::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-image: var(--bg-image);
-    background-size: 300px 300px;
-    background-repeat: no-repeat;
-    background-position: center bottom;
-    opacity: 0.03;
-    pointer-events: none;
-    z-index: 0;
+
+  .header {
+    padding: 1.5rem;
+    background: rgba(255, 255, 255, 0.95);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
-  
-  
-  .loading-state,
-  .empty-state {
+
+  .header h1 {
+    margin: 0 0 1rem;
+    color: #333;
+  }
+
+  .stats {
+    display: flex;
+    justify-content: space-around;
+    gap: 1rem;
+  }
+
+  .stat-item {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    height: calc(100% - 100px);
-    padding: 2rem;
-    text-align: center;
-    position: relative;
-    z-index: 1;
-  }
-  
-  .spinner {
-    width: 40px;
-    height: 40px;
-    border: 3px solid #f3f3f3;
-    border-top: 3px solid #007bff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-bottom: 1rem;
   }
-  
-  .empty-state svg {
-    color: #8e8e93;
-    margin-bottom: 1rem;
-  }
-  
-  .empty-state h3 {
-    margin: 0 0 0.5rem;
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: #333;
+
+  .stat-value {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #667eea;
   }
-  
-  .empty-state p {
-    margin: 0;
+
+  .stat-label {
+    font-size: 0.75rem;
     color: #666;
+    text-transform: uppercase;
   }
-  
-  .content {
-    padding: 0 1rem 100px;
-    position: relative;
-    z-index: 1;
-  }
-  
-  section {
-    margin-bottom: 2rem;
+
+  .controls {
+    padding: 1rem;
+    background: rgba(255, 255, 255, 0.9);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   }
-  
-  section h2 {
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: #8e8e93;
-    margin: 0 0 0.75rem;
+
+  .search-input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 1rem;
   }
-  
-  .section-header {
+
+  .view-selector {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.75rem;
-  }
-  
-  .section-header h2 {
-    margin: 0;
+    gap: 0.5rem;
   }
-  
-  .view-all-btn {
-    background: none;
-    border: none;
-    color: #007bff;
-    font-size: 1rem;
+
+  .view-btn {
+    flex: 1;
+    padding: 0.5rem;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    background: white;
+    color: #666;
     cursor: pointer;
-    padding: 0;
+    transition: all 0.2s;
   }
-  
-  .roster-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(2, 1fr);
-    gap: 12px;
+
+  .view-btn.active {
+    background: #667eea;
+    color: white;
+    border-color: #667eea;
+  }
+
+  .collection-container {
+    padding: 1rem;
+    min-height: 400px;
   }
-  
-  .horizontal-scroll {
+
+  .loading {
     display: flex;
-    gap: 8px;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    padding-bottom: 8px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+    color: white;
   }
-  
-  .horizontal-scroll::-webkit-scrollbar {
-    height: 4px;
+
+  .spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
   }
-  
-  .horizontal-scroll::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 2px;
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
   }
-  
-  .horizontal-scroll::-webkit-scrollbar-thumb {
-    background: #888;
-    border-radius: 2px;
+
+  .empty-state {
+    text-align: center;
+    padding: 3rem;
+    color: white;
   }
-  
-  .discovered-grid {
+
+  .piclet-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    gap: 12px;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 1rem;
   }
-  
-  .download-button {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    background: linear-gradient(135deg, #007bff, #0056b3);
-    border: none;
-    color: white;
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    font-size: 0.9rem;
-    font-weight: 500;
+
+  .piclet-item {
+    position: relative;
     cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
+    transition: transform 0.2s;
   }
-  
-  .download-button:hover {
-    background: linear-gradient(135deg, #0056b3, #004085);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
-  }
-  
-  .download-button:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
+
+  .piclet-item:hover {
+    transform: scale(1.05);
   }
-  
-  .download-button svg {
-    width: 16px;
-    height: 16px;
-    stroke-width: 2.5;
+
+  .canonical-badge {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: gold;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
   }
-  
-  @keyframes spin {
-    to { transform: rotate(360deg); }
+
+  .scan-badge {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 0.125rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: bold;
   }
 </style>

src/lib/components/Pages/ViewAll.svelte

@@ -1,140 +0,0 @@
-<script lang="ts">
-  import type { PicletInstance } from '$lib/db/schema';
-  import PicletCard from '../Piclets/PicletCard.svelte';
-  import DraggablePicletCard from '../Piclets/DraggablePicletCard.svelte';
-  import PicletDetail from '../Piclets/PicletDetail.svelte';
-  
-  interface Props {
-    title: string;
-    type: 'storage' | 'discovered';
-    items: PicletInstance[];
-    onBack: () => void;
-    onItemsChanged?: () => void;
-    onDragStart?: (instance: PicletInstance) => void;
-    onDragEnd?: () => void;
-  }
-  
-  let { title, type, items, onBack, onItemsChanged, onDragStart, onDragEnd }: Props = $props();
-  let selectedPiclet: PicletInstance | null = $state(null);
-  
-  function handleItemClick(item: PicletInstance) {
-    selectedPiclet = item;
-  }
-</script>
-
-<div class="view-all-page">
-  <header class="page-header">
-    <button class="back-btn" onclick={onBack} aria-label="Back">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M19 12H5m0 0l7 7m-7-7l7-7"></path>
-      </svg>
-    </button>
-    <h1>{title}</h1>
-    <div class="header-spacer"></div>
-  </header>
-  
-  <div class="content">
-    {#if items.length === 0}
-      <div class="empty-state">
-        <p>No {type === 'storage' ? 'piclets in storage' : 'discovered piclets'} yet.</p>
-      </div>
-    {:else}
-      <div class="items-grid">
-        {#each items as item}
-          {#if type === 'storage'}
-            <DraggablePicletCard
-              instance={item}
-              size={100}
-              onClick={() => handleItemClick(item)}
-              onDragStart={onDragStart}
-              onDragEnd={onDragEnd}
-            />
-          {:else if type === 'discovered'}
-            <PicletCard
-              piclet={item}
-              size={100}
-              onClick={() => handleItemClick(item)}
-            />
-          {/if}
-        {/each}
-      </div>
-    {/if}
-  </div>
-  
-  {#if selectedPiclet}
-    <PicletDetail 
-      instance={selectedPiclet}
-      onClose={() => selectedPiclet = null}
-      onDeleted={() => {
-        selectedPiclet = null;
-        onItemsChanged?.();
-      }}
-    />
-  {/if}
-</div>
-
-<style>
-  .view-all-page {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background: white;
-  }
-  
-  .page-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 1rem;
-    background: white;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    border-bottom: 1px solid #e5e5ea;
-  }
-  
-  .page-header h1 {
-    margin: 0;
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: #333;
-  }
-  
-  .back-btn {
-    background: none;
-    border: none;
-    padding: 0.5rem;
-    cursor: pointer;
-    color: #007bff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .header-spacer {
-    width: 40px;
-  }
-  
-  .content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem;
-    padding-bottom: 100px;
-  }
-  
-  .empty-state {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 200px;
-    color: #666;
-    text-align: center;
-  }
-  
-  .items-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
-    gap: 1rem;
-    justify-items: center;
-  }
-</style>

src/lib/components/PicletGenerator/PicletGenerator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { PicletGeneratorProps, PicletWorkflowState, CaptionType, CaptionLength, PicletStats } from '$lib/types';
-  import type { PicletInstance } from '$lib/db/schema';
+  import type { PicletInstance, DiscoveryStatus } from '$lib/db/schema';
   import UploadStep from './UploadStep.svelte';
   import WorkflowProgress from './WorkflowProgress.svelte';
   import PicletResult from './PicletResult.svelte';
@@ -8,7 +8,8 @@
   import { extractPicletMetadata } from '$lib/services/picletMetadata';
   import { savePicletInstance, generatedDataToPicletInstance } from '$lib/db/piclets';
   import { PicletType, TYPE_DATA } from '$lib/types/picletTypes';
-  import { EncounterService } from '$lib/db/encounterService';
+  import { EnhancedCaptionService } from '$lib/services/enhancedCaption';
+  import { CanonicalService } from '$lib/services/canonicalService';
   // import { withQwenTimeout } from '$lib/utils/qwenTimeout'; // Unused since qwen is disabled
   
   interface Props extends PicletGeneratorProps {
@@ -70,7 +71,7 @@
     const result = await client.predict("/model_chat", [
       prompt,        // user message
       [],           // chat history (empty for new conversation)
-      "You are a helpful assistant that creates Pokemon-style monster concepts based on images.", // system prompt
+      "You are a helpful assistant that creates Pokemon-style monster concepts based on real-world objects.", // system prompt
       0.7,          // temperature
       2000          // max_tokens
     ]);
@@ -87,7 +88,13 @@
     imagePrompt: null,
     picletImage: null,
     error: null,
-    isProcessing: false
+    isProcessing: false,
+    // Discovery-specific state
+    objectName: null,
+    objectAttributes: [],
+    visualDetails: null,
+    discoveryStatus: null,
+    canonicalPiclet: null
   });
   
   // Queue state for multi-image processing
@@ -292,66 +299,107 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
   
   async function captionImage() {
     workflowState.currentStep = 'captioning';
-    
+
     if (!joyCaptionClient || !workflowState.userImage) {
       throw new Error('Caption service not available or no image provided');
     }
-    
+
     try {
-      const output = await joyCaptionClient.predict("/stream_chat", [
-        workflowState.userImage,  // input_image
-        "Descriptive",            // caption_type
-        "long",                   // caption_length
-        [],                       // extra_options
-        "",                       // name_input
-        ""                        // custom_prompt (empty for default descriptive captioning)
-      ]);
-      
-      const [, caption] = output.data;
-      
-      // Store the detailed object description  
-      workflowState.imageCaption = caption;
-      console.log('Detailed object description generated:', caption);
+      // Use enhanced captioning for object identification
+      const captionResult = await EnhancedCaptionService.generateEnhancedCaption(
+        joyCaptionClient,
+        workflowState.userImage
+      );
+
+      // Store caption results
+      workflowState.imageCaption = captionResult.fullCaption;
+      workflowState.objectName = captionResult.extractedObject || 'object';
+      workflowState.objectAttributes = captionResult.extractedAttributes || [];
+      workflowState.visualDetails = captionResult.visualDetails;
+
+      console.log('Object identified:', workflowState.objectName);
+      console.log('Attributes:', workflowState.objectAttributes);
+      console.log('Visual details:', workflowState.visualDetails);
+
+      // Check canonical database
+      await checkCanonical();
     } catch (error) {
       handleAPIError(error);
     }
   }
+
+  async function checkCanonical() {
+    workflowState.currentStep = 'checking';
+
+    try {
+      // Search for existing canonical or variations
+      const searchResult = await CanonicalService.searchCanonical(
+        workflowState.objectName!,
+        workflowState.objectAttributes || []
+      );
+
+      if (searchResult) {
+        workflowState.discoveryStatus = searchResult.status;
+        workflowState.canonicalPiclet = searchResult.piclet;
+
+        console.log('Discovery status:', searchResult.status);
+
+        if (searchResult.status === 'existing') {
+          // Existing exact match - increment scan count
+          await CanonicalService.incrementScanCount(searchResult.piclet.typeId);
+          console.log('Found existing Piclet, scan count incremented');
+        }
+      } else {
+        // No server response or new discovery
+        workflowState.discoveryStatus = 'new';
+        console.log('New discovery - will create canonical Piclet');
+      }
+    } catch (error) {
+      console.error('Canonical check failed, treating as new discovery:', error);
+      workflowState.discoveryStatus = 'new';
+    }
+  }
   
   async function generateConcept() {
     workflowState.currentStep = 'conceptualizing';
-    
+
+    // Skip if we have an existing canonical Piclet
+    if (workflowState.discoveryStatus === 'existing' && workflowState.canonicalPiclet) {
+      workflowState.picletConcept = workflowState.canonicalPiclet.concept;
+      console.log('Using existing canonical concept');
+      return;
+    }
+
     const activeClient = getActiveTextClient();
-    if (!activeClient || !workflowState.imageCaption) {
-      throw new Error(`${currentTextClient} service not available or no image caption provided`);
+    if (!activeClient || !workflowState.objectName) {
+      throw new Error(`${currentTextClient} service not available or no object identified`);
     }
-    
-    const conceptPrompt = `Based on this detailed object description, create a Pokémon-style monster that transforms the object into an imaginative creature. The monster should clearly be inspired by the object's appearance but reimagined as a living monster.
 
-Object description: "${workflowState.imageCaption}"
+    // Create monster prompt using object and visual details
+    const monsterPrompt = EnhancedCaptionService.createMonsterPrompt(
+      workflowState.objectName,
+      workflowState.visualDetails || '',
+      workflowState.objectAttributes || []
+    );
 
-Guidelines:
-- Take the object's key visual elements (colors, shapes, materials) incorporating all of them into a single creature design
-- Add eyes (can be glowing, mechanical, multiple, etc.) positioned where they make sense
-- Include limbs (legs, arms, wings, tentacles) that grow from or replace parts of the object
-- Add a mouth, beak, or feeding apparatus if appropriate
-- Add creature elements like tail, fins, claws, horns, etc where fitting
+    const conceptPrompt = `${monsterPrompt}
 
 Format your response exactly as follows:
 \`\`\`md
 # Object Rarity
-{Assess how rare the object is based on real-world availability and value. Rare objects give strong monsters while common objects give weak ones. Use: common, uncommon, rare, or legendary}
+{Assess rarity based on the ${workflowState.objectName}. Use: common, uncommon, rare, epic, or legendary}
 
 # Monster Name
-{Creative name that hints at the original object, 11 letters max}
+{Creative name related to ${workflowState.objectName}, 11 letters max}
 
 # Primary Type
-{Based on the object, choose the most fitting primary type: beast, bug, aquatic, flora, mineral, space, machina, structure, culture, or cuisine}
+{Choose the most fitting type based on ${workflowState.objectName}: beast, bug, aquatic, flora, mineral, space, machina, structure, culture, or cuisine}
 
 # Monster Description
-{Detailed physical description showing how the object becomes a creature. Ensure the creature uses all the unique attributes of the object. Include colors, shapes, materials, eyes, limbs, mouth, and distinctive features. This section will be used for battle narratives and lore.}
+{Detailed physical description of the ${workflowState.objectName}-based creature. Include how the object's features become creature features. Focus on eyes, limbs, mouth, and distinctive elements.}
 
 # Monster Image Prompt
-{Extensive visual description of the Pokémon style monster for image generation. Focus on key visual elements: body shape, colors, distinctive features, pose. Keep this optimized for AI image generation.}
+{Visual description of the ${workflowState.objectName} monster for image generation. Include body shape, colors, pose, and key features.}
 \`\`\``;
     
     try {

src/lib/components/PicletGenerator/PicletResult.svelte

@@ -33,8 +33,13 @@
           createdAt: new Date()
         };
         
-        // Create piclet instance asynchronously
-        generatedDataToPicletInstance(picletData).then(instance => {
+        // Create piclet instance asynchronously with discovery data
+        generatedDataToPicletInstance(
+          picletData,
+          workflowState.objectName || undefined,
+          workflowState.objectAttributes || undefined,
+          workflowState.visualDetails || undefined
+        ).then(instance => {
           picletInstance = { ...instance, id: 0 }; // Add temporary id for display
         }).catch(error => {
           console.error('Failed to create piclet instance:', error);
@@ -69,10 +74,12 @@
       <div class="success-icon">✨</div>
       <h2>Success!</h2>
       <p class="success-message">
-        {#if picletInstance?.caught}
-          <strong>{picletInstance?.nickname || 'This creature'}</strong> has been caught and added to your roster!
+        {#if picletInstance?.isCanonical}
+          You discovered the first <strong>{picletInstance?.objectName || 'creature'}</strong> Piclet!
+        {:else if picletInstance?.canonicalId}
+          You found a variation of <strong>{picletInstance?.objectName || 'creature'}</strong>!
         {:else}
-          You can now encounter <strong>{picletInstance?.nickname || 'this creature'}</strong>!
+          <strong>{picletInstance?.nickname || 'This creature'}</strong> has been discovered!
         {/if}
       </p>
     </div>

src/lib/components/Piclets/AddToRosterDialog.svelte

@@ -1,169 +0,0 @@
-<script lang="ts">
-  import type { PicletInstance } from '$lib/db/schema';
-  import PicletCard from './PicletCard.svelte';
-  import { moveToRoster } from '$lib/db/piclets';
-  
-  interface Props {
-    position: number;
-    availablePiclets: PicletInstance[];
-    onClose: () => void;
-    onAdded?: () => void;
-  }
-  
-  let { position, availablePiclets, onClose, onAdded }: Props = $props();
-  let isAdding = $state(false);
-  
-  async function handleAddToRoster(piclet: PicletInstance) {
-    if (!piclet.id || isAdding) return;
-    
-    isAdding = true;
-    try {
-      await moveToRoster(piclet.id, position);
-      onAdded?.();
-      onClose();
-    } catch (err) {
-      console.error('Failed to add to roster:', err);
-    } finally {
-      isAdding = false;
-    }
-  }
-</script>
-
-<div class="dialog-overlay" onclick={(e) => e.target === e.currentTarget && onClose()} onkeydown={(e) => e.key === 'Escape' && onClose()} role="button" tabindex="0" aria-label="Close dialog">
-  <div class="dialog-content">
-    <header class="dialog-header">
-      <h2>Add to Roster</h2>
-      <button class="close-btn" onclick={onClose} aria-label="Close">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M6 18L18 6M6 6l12 12"></path>
-        </svg>
-      </button>
-    </header>
-    
-    <div class="dialog-body">
-      {#if availablePiclets.length === 0}
-        <div class="empty-state">
-          <p>No piclets available in storage.</p>
-          <p class="hint">Scan objects to discover new piclets!</p>
-        </div>
-      {:else}
-        <p class="instruction">Select a piclet to add to position {position + 1}:</p>
-        <div class="piclets-grid">
-          {#each availablePiclets as piclet}
-            <button 
-              class="piclet-option"
-              onclick={() => handleAddToRoster(piclet)}
-              disabled={isAdding}
-            >
-              <PicletCard piclet={piclet} size={100} />
-            </button>
-          {/each}
-        </div>
-      {/if}
-    </div>
-  </div>
-</div>
-
-<style>
-  .dialog-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    padding: 1rem;
-  }
-  
-  .dialog-content {
-    background: white;
-    border-radius: 16px;
-    width: 100%;
-    max-width: 600px;
-    max-height: 80vh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .dialog-header {
-    padding: 1rem;
-    border-bottom: 1px solid #e5e5ea;
-    position: relative;
-  }
-  
-  .dialog-header h2 {
-    margin: 0;
-    text-align: center;
-    font-size: 1.25rem;
-  }
-  
-  .close-btn {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background: none;
-    border: none;
-    padding: 0;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    color: #8e8e93;
-  }
-  
-  .dialog-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem;
-  }
-  
-  .empty-state {
-    text-align: center;
-    padding: 3rem 1rem;
-    color: #666;
-  }
-  
-  .empty-state p {
-    margin: 0 0 0.5rem;
-  }
-  
-  .hint {
-    font-size: 0.875rem;
-    color: #8e8e93;
-  }
-  
-  .instruction {
-    margin: 0 0 1rem;
-    color: #666;
-    text-align: center;
-  }
-  
-  .piclets-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
-    gap: 1rem;
-    justify-items: center;
-  }
-  
-  .piclet-option {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    transition: transform 0.2s;
-  }
-  
-  .piclet-option:not(:disabled):hover {
-    transform: scale(1.05);
-  }
-  
-  .piclet-option:not(:disabled):active {
-    transform: scale(0.95);
-  }
-  
-  .piclet-option:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-</style>

src/lib/components/Piclets/DraggablePicletCard.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-  import type { PicletInstance } from '$lib/db/schema';
-  import PicletCard from './PicletCard.svelte';
-  
-  interface Props {
-    instance: PicletInstance;
-    size?: number;
-    onDragStart?: (instance: PicletInstance) => void;
-    onDragEnd?: () => void;
-    onClick?: () => void;
-  }
-  
-  let { instance, size = 100, onDragStart, onDragEnd, onClick }: Props = $props();
-  
-  let isDragging = $state(false);
-  
-  function handleDragStart(e: DragEvent) {
-    isDragging = true;
-    
-    // Set drag data
-    e.dataTransfer!.effectAllowed = 'move';
-    e.dataTransfer!.setData('application/json', JSON.stringify({
-      instanceId: instance.id,
-      fromRoster: instance.isInRoster,
-      fromPosition: instance.rosterPosition
-    }));
-    
-    // Create a custom drag image
-    const dragImage = e.currentTarget as HTMLElement;
-    const clone = dragImage.cloneNode(true) as HTMLElement;
-    clone.style.transform = 'scale(1.1)';
-    clone.style.opacity = '0.8';
-    document.body.appendChild(clone);
-    e.dataTransfer!.setDragImage(clone, size / 2, size / 2);
-    setTimeout(() => document.body.removeChild(clone), 0);
-    
-    onDragStart?.(instance);
-  }
-  
-  function handleDragEnd() {
-    isDragging = false;
-    onDragEnd?.();
-  }
-</script>
-
-<div
-  draggable="true"
-  ondragstart={handleDragStart}
-  ondragend={handleDragEnd}
-  class="draggable-wrapper"
-  class:dragging={isDragging}
-  role="button"
-  tabindex="0"
->
-  <PicletCard piclet={instance} {size} {onClick} />
-</div>
-
-<style>
-  .draggable-wrapper {
-    cursor: move;
-  }
-  
-  .draggable-wrapper.dragging {
-    opacity: 0.5;
-  }
-  
-  .draggable-wrapper.dragging :global(.piclet-card) {
-    transform: scale(0.9);
-  }
-</style>

src/lib/components/Piclets/EmptySlotCard.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  interface Props {
-    size?: number;
-    isHighlighted?: boolean;
-    onClick?: () => void;
-  }
-  
-  let { size = 100, isHighlighted = false, onClick }: Props = $props();
-</script>
-
-<button 
-  class="empty-slot"
-  class:highlighted={isHighlighted}
-  style="width: {size}px; height: {size + 30}px;"
-  onclick={onClick}
-  type="button"
->
-  <svg 
-    width="32" 
-    height="32" 
-    viewBox="0 0 24 24" 
-    fill="none" 
-    stroke="currentColor" 
-    stroke-width="2"
-  >
-    {#if isHighlighted}
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 8v8m-4-4h8" />
-    {:else}
-      <path d="M12 5v14m-7-7h14" />
-    {/if}
-  </svg>
-</button>
-
-<style>
-  .empty-slot {
-    background: #f5f5f5;
-    border: 2px dashed #d1d1d6;
-    border-radius: 12px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #8e8e93;
-    transition: all 0.2s;
-  }
-  
-  .empty-slot:hover {
-    background: #e5e5ea;
-  }
-  
-  .empty-slot:active {
-    transform: scale(0.95);
-  }
-  
-  .empty-slot.highlighted {
-    background: rgba(0, 123, 255, 0.1);
-    border-color: #007bff;
-    color: #007bff;
-  }
-</style>

src/lib/components/Piclets/NewlyCaughtPicletDetail.svelte

@@ -1,644 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import type { PicletInstance } from '$lib/db/schema';
-  import { TYPE_DATA } from '$lib/types/picletTypes';
-  
-  interface Props {
-    instance: PicletInstance;
-    onClose: () => void;
-  }
-  
-  let { instance, onClose }: Props = $props();
-  let selectedTab = $state<'about' | 'abilities'>('about');
-  let showCelebration = $state(true);
-  
-  // Ensure stats are up-to-date with current level and nature
-  const updatedInstance = $derived(recalculatePicletStats(instance));
-  
-  // Convert to battle definition to get enhanced ability data
-  const battleDefinition = $derived(picletInstanceToBattleDefinition(updatedInstance));
-  
-  // XP and level calculations
-  const xpProgress = $derived(getXpProgress(updatedInstance.level, updatedInstance.xp));
-  const xpToNext = $derived(getXpTowardsNextLevel(updatedInstance.level, updatedInstance.xp));
-  const isMaxLevel = $derived(updatedInstance.level >= 100);
-  
-  // Calculate BST and handle type data
-  const typeData = $derived(TYPE_DATA[updatedInstance.primaryType]);
-  const tier = $derived(() => {
-    const bst = updatedInstance.bst;
-    if (bst >= 600) return { name: 'Legendary', color: '#FFD700', bg: 'linear-gradient(135deg, #FFD700, #FFA500)' };
-    if (bst >= 530) return { name: 'Elite', color: '#9932CC', bg: 'linear-gradient(135deg, #9932CC, #8A2BE2)' };
-    if (bst >= 480) return { name: 'Advanced', color: '#1E90FF', bg: 'linear-gradient(135deg, #1E90FF, #0066CC)' };
-    if (bst >= 420) return { name: 'Standard', color: '#32CD32', bg: 'linear-gradient(135deg, #32CD32, #228B22)' };
-    return { name: 'Basic', color: '#808080', bg: 'linear-gradient(135deg, #808080, #696969)' };
-  });
-  
-  let celebrationTimeout: NodeJS.Timeout;
-  
-  onMount(() => {
-    // Auto-hide celebration after 3 seconds
-    celebrationTimeout = setTimeout(() => {
-      showCelebration = false;
-    }, 3000);
-    
-    return () => {
-      if (celebrationTimeout) clearTimeout(celebrationTimeout);
-    };
-  });
-  
-  function dismissCelebration() {
-    showCelebration = false;
-    if (celebrationTimeout) clearTimeout(celebrationTimeout);
-  }
-  
-  function handleContainerClick(event: MouseEvent) {
-    event.stopPropagation();
-  }
-</script>
-
-<div class="detail-overlay" role="dialog" aria-modal="true" tabindex="-1" onclick={onClose} onkeydown={(e) => e.key === 'Escape' ? onClose() : null}>
-  <div class="detail-container newly-caught" role="document" onclick={handleContainerClick}>
-    
-    <!-- Celebration overlay -->
-    {#if showCelebration}
-      <div class="celebration-overlay" role="button" tabindex="0" onclick={dismissCelebration} onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? dismissCelebration() : null}>
-        <div class="celebration-content">
-          <div class="celebration-sparkles">✨</div>
-          <h1 class="celebration-title">Welcome to your team!</h1>
-          <div class="celebration-piclet-name">{updatedInstance.nickname}</div>
-          <p class="celebration-subtitle">Your first Piclet has been caught!</p>
-          <div class="celebration-sparkles">🎉</div>
-          <div class="tap-to-continue">Tap to continue</div>
-        </div>
-      </div>
-    {/if}
-
-    <!-- Header with special "newly caught" styling -->
-    <div class="detail-header" style="background: {tier().bg}">
-      <button class="close-button" onclick={onClose}>×</button>
-      <div class="newly-caught-badge">
-        <span class="badge-text">✨ NEWLY CAUGHT ✨</span>
-      </div>
-      <div class="header-content">
-        <div class="piclet-image-container">
-          <img 
-            src={updatedInstance.imageUrl} 
-            alt={updatedInstance.nickname} 
-            class="piclet-image"
-          />
-          <div class="golden-glow"></div>
-        </div>
-        <div class="piclet-info">
-          <h1 class="piclet-name">{updatedInstance.nickname}</h1>
-          <div class="piclet-meta">
-            <div class="type-badge" style="background: {typeData.color}">
-              {typeData.icon} {updatedInstance.primaryType}
-            </div>
-            <div class="tier-badge" style="color: {tier().color}">
-              {tier().name}
-            </div>
-            <div class="level-badge">Lv. {updatedInstance.level}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Navigation tabs -->
-    <div class="tab-navigation">
-      <button 
-        class="tab-button" 
-        class:active={selectedTab === 'about'}
-        onclick={() => selectedTab = 'about'}
-      >
-        About
-      </button>
-      <button 
-        class="tab-button" 
-        class:active={selectedTab === 'abilities'}
-        onclick={() => selectedTab = 'abilities'}
-      >
-        Abilities
-      </button>
-    </div>
-
-    <!-- Tab content -->
-    <div class="detail-content">
-      {#if selectedTab === 'about'}
-        <div class="about-tab">
-          <div class="description-section">
-            <h3>Description</h3>
-            <p class="description-text">{updatedInstance.description}</p>
-          </div>
-
-          <div class="stats-section">
-            <h3>Combat Stats</h3>
-            <div class="stats-grid">
-              <div class="stat-item">
-                <span class="stat-label">HP</span>
-                <span class="stat-value">{updatedInstance.maxHp}</span>
-              </div>
-              <div class="stat-item">
-                <span class="stat-label">Attack</span>
-                <span class="stat-value">{updatedInstance.attack}</span>
-              </div>
-              <div class="stat-item">
-                <span class="stat-label">Defense</span>
-                <span class="stat-value">{updatedInstance.defense}</span>
-              </div>
-              <div class="stat-item">
-                <span class="stat-label">Speed</span>
-                <span class="stat-value">{updatedInstance.speed}</span>
-              </div>
-            </div>
-            <div class="bst-display">
-              <span class="bst-label">Base Stat Total:</span>
-              <span class="bst-value" style="color: {tier().color}">{updatedInstance.bst}</span>
-            </div>
-          </div>
-
-          <div class="xp-section">
-            <h3>Experience</h3>
-            <div class="level-xp-section">
-              <div class="xp-bar-container">
-                <div class="xp-bar">
-                  <div class="xp-fill" style="width: {xpProgress}%"></div>
-                </div>
-                <div class="xp-text">
-                  {#if isMaxLevel}
-                    <span>MAX LEVEL</span>
-                  {:else}
-                    <span>{xpToNext} XP to level {updatedInstance.level + 1}</span>
-                  {/if}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      {:else if selectedTab === 'abilities'}
-        <div class="abilities-tab">
-          <div class="special-ability-section">
-            <h3>Special Ability</h3>
-            {#if isSpecialAbilityUnlocked(updatedInstance)}
-              <AbilityDisplay ability={battleDefinition.specialAbility} />
-            {:else}
-              <div class="locked-ability">
-                <span class="lock-icon">🔒</span>
-                <span class="locked-text">Unlocks at level {updatedInstance.specialAbilityUnlockLevel}</span>
-              </div>
-            {/if}
-          </div>
-
-          <div class="moves-section">
-            <h3>Moves</h3>
-            <div class="moves-grid">
-              {#each updatedInstance.moves as move}
-                <MoveDisplay {move} picletLevel={updatedInstance.level} />
-              {/each}
-            </div>
-          </div>
-        </div>
-      {/if}
-    </div>
-  </div>
-</div>
-
-<style>
-  .detail-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(4px);
-    z-index: 2000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-    animation: fadeIn 0.3s ease-out;
-  }
-
-  .detail-container.newly-caught {
-    background: white;
-    border-radius: 24px;
-    max-width: 500px;
-    width: 100%;
-    max-height: 90vh;
-    overflow: hidden;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-    animation: slideInUp 0.4s ease-out;
-    position: relative;
-  }
-
-  /* Celebration overlay */
-  .celebration-overlay {
-    position: absolute;
-    inset: 0;
-    background: radial-gradient(circle, rgba(255, 215, 0, 0.95) 0%, rgba(255, 140, 0, 0.9) 100%);
-    z-index: 100;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    animation: celebrationPulse 2s ease-in-out infinite;
-  }
-
-  .celebration-content {
-    text-align: center;
-    color: white;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-  }
-
-  .celebration-sparkles {
-    font-size: 3rem;
-    animation: sparkle 1.5s ease-in-out infinite;
-    margin: 0.5rem 0;
-  }
-
-  .celebration-title {
-    font-size: 2.5rem;
-    font-weight: 800;
-    margin: 1rem 0 0.5rem;
-    animation: titleGlow 2s ease-in-out infinite;
-  }
-
-  .celebration-piclet-name {
-    font-size: 2rem;
-    font-weight: 700;
-    margin: 0.5rem 0;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-  }
-
-  .celebration-subtitle {
-    font-size: 1.2rem;
-    margin: 1rem 0;
-    opacity: 0.9;
-  }
-
-  .tap-to-continue {
-    font-size: 1rem;
-    margin-top: 2rem;
-    opacity: 0.8;
-    animation: pulse 1.5s ease-in-out infinite;
-  }
-
-  /* Header styling */
-  .detail-header {
-    position: relative;
-    padding: 2rem 1.5rem 1.5rem;
-    color: white;
-    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
-  }
-
-  .newly-caught-badge {
-    position: absolute;
-    top: 1rem;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    border: 2px solid rgba(255, 255, 255, 0.3);
-    border-radius: 20px;
-    padding: 0.5rem 1rem;
-    animation: badgeGlow 2s ease-in-out infinite;
-  }
-
-  .badge-text {
-    font-weight: 700;
-    font-size: 0.9rem;
-    letter-spacing: 1px;
-  }
-
-  .close-button {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background: rgba(255, 255, 255, 0.2);
-    border: none;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    color: white;
-    font-size: 1.5rem;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s ease;
-    z-index: 10;
-  }
-
-  .close-button:hover {
-    background: rgba(255, 255, 255, 0.3);
-    transform: scale(1.1);
-  }
-
-  .header-content {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-    margin-top: 2rem;
-  }
-
-  .piclet-image-container {
-    position: relative;
-    flex-shrink: 0;
-  }
-
-  .piclet-image {
-    width: 100px;
-    height: 100px;
-    border-radius: 16px;
-    object-fit: cover;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    position: relative;
-    z-index: 2;
-  }
-
-  .golden-glow {
-    position: absolute;
-    inset: -10px;
-    background: radial-gradient(circle, rgba(255, 215, 0, 0.6), transparent 70%);
-    border-radius: 50%;
-    animation: goldenGlow 2s ease-in-out infinite;
-    z-index: 1;
-  }
-
-  .piclet-info {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .piclet-name {
-    font-size: 1.8rem;
-    font-weight: 700;
-    margin: 0 0 0.5rem;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-  }
-
-  .piclet-meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-
-  .type-badge, .tier-badge, .level-badge {
-    padding: 0.25rem 0.75rem;
-    border-radius: 20px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  .type-badge {
-    color: white;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-  }
-
-  .tier-badge {
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-  }
-
-  .level-badge {
-    background: rgba(255, 255, 255, 0.3);
-    color: white;
-  }
-
-  /* Tab navigation */
-  .tab-navigation {
-    display: flex;
-    border-bottom: 1px solid #e0e0e0;
-    background: #f8f9fa;
-  }
-
-  .tab-button {
-    flex: 1;
-    padding: 1rem;
-    border: none;
-    background: none;
-    font-weight: 600;
-    color: #666;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    position: relative;
-  }
-
-  .tab-button.active {
-    color: #007bff;
-  }
-
-  .tab-button.active::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: #007bff;
-  }
-
-  /* Content styling */
-  .detail-content {
-    max-height: 60vh;
-    overflow-y: auto;
-    padding: 1.5rem;
-  }
-
-  .about-tab, .abilities-tab {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  .description-section h3,
-  .stats-section h3,
-  .xp-section h3,
-  .special-ability-section h3,
-  .moves-section h3 {
-    margin: 0 0 1rem;
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .description-text {
-    color: #666;
-    line-height: 1.6;
-    margin: 0;
-  }
-
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .stat-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem;
-    background: #f8f9fa;
-    border-radius: 8px;
-  }
-
-  .stat-label {
-    font-weight: 600;
-    color: #666;
-  }
-
-  .stat-value {
-    font-weight: 700;
-    color: #333;
-    font-size: 1.1rem;
-  }
-
-  .bst-display {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem;
-    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
-    border-radius: 12px;
-    border: 2px solid #dee2e6;
-  }
-
-  .bst-label {
-    font-weight: 600;
-    color: #666;
-  }
-
-  .bst-value {
-    font-weight: 700;
-    font-size: 1.3rem;
-  }
-
-  .level-xp-section {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .xp-bar-container {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .xp-bar {
-    height: 8px;
-    background: #e9ecef;
-    border-radius: 4px;
-    overflow: hidden;
-  }
-
-  .xp-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #28a745, #20c997);
-    transition: width 0.3s ease;
-  }
-
-  .xp-text {
-    text-align: center;
-    font-size: 0.9rem;
-    color: #666;
-  }
-
-  .locked-ability {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 1rem;
-    background: #f8f9fa;
-    border: 2px dashed #dee2e6;
-    border-radius: 12px;
-    color: #666;
-    font-style: italic;
-  }
-
-  .lock-icon {
-    font-size: 1.2rem;
-  }
-
-  .moves-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  /* Animations */
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  @keyframes slideInUp {
-    from { 
-      opacity: 0;
-      transform: translateY(100px) scale(0.9);
-    }
-    to { 
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  @keyframes celebrationPulse {
-    0%, 100% { transform: scale(1); }
-    50% { transform: scale(1.02); }
-  }
-
-  @keyframes sparkle {
-    0%, 100% { transform: rotate(0deg) scale(1); }
-    25% { transform: rotate(-5deg) scale(1.1); }
-    75% { transform: rotate(5deg) scale(1.1); }
-  }
-
-  @keyframes titleGlow {
-    0%, 100% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
-    50% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.8); }
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 0.8; }
-    50% { opacity: 1; }
-  }
-
-  @keyframes badgeGlow {
-    0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
-    50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4); }
-  }
-
-  @keyframes goldenGlow {
-    0%, 100% { opacity: 0.6; }
-    50% { opacity: 0.9; }
-  }
-
-  @media (max-width: 768px) {
-    .detail-container {
-      margin: 0.5rem;
-      max-height: 95vh;
-    }
-
-    .celebration-title {
-      font-size: 2rem;
-    }
-
-    .celebration-piclet-name {
-      font-size: 1.5rem;
-    }
-
-    .header-content {
-      flex-direction: column;
-      text-align: center;
-      gap: 1rem;
-    }
-
-    .stats-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-</style>

src/lib/components/Piclets/PicletDetail.svelte

@@ -64,21 +64,35 @@
         
         <div class="metadata">
           <div class="meta-item">
-            <strong>Caught:</strong> 
-            {instance.caught ? 'Yes' : 'No'}
+            <strong>Object:</strong>
+            {instance.objectName}
           </div>
-          {#if instance.caughtAt}
+          {#if instance.isCanonical}
             <div class="meta-item">
-              <strong>Caught on:</strong> 
-              {new Date(instance.caughtAt).toLocaleDateString()}
+              <strong>Status:</strong>
+              <span class="canonical-badge">Canonical</span>
             </div>
           {/if}
-          {#if instance.isInRoster}
+          {#if instance.variationAttributes && instance.variationAttributes.length > 0}
             <div class="meta-item">
-              <strong>Status:</strong> 
-              <span class="roster-badge">In Battle Roster</span>
+              <strong>Variation:</strong>
+              {instance.variationAttributes.join(', ')}
             </div>
           {/if}
+          {#if instance.discoveredAt}
+            <div class="meta-item">
+              <strong>Discovered:</strong>
+              {new Date(instance.discoveredAt).toLocaleDateString()}
+            </div>
+          {/if}
+          <div class="meta-item">
+            <strong>Scan Count:</strong>
+            {instance.scanCount || 1}
+          </div>
+          <div class="meta-item">
+            <strong>Rarity:</strong>
+            <span class="rarity-{instance.tier}">{instance.tier}</span>
+          </div>
         </div>
       </div>
     </div>

src/lib/components/Piclets/RosterSlot.svelte

@@ -1,109 +0,0 @@
-<script lang="ts">
-  import type { PicletInstance } from '$lib/db/schema';
-  import DraggablePicletCard from './DraggablePicletCard.svelte';
-  import EmptySlotCard from './EmptySlotCard.svelte';
-  
-  interface Props {
-    position: number;
-    piclet?: PicletInstance;
-    size?: number;
-    onDrop?: (position: number, dragData: any) => void;
-    onPicletClick?: (piclet: PicletInstance) => void;
-    onEmptyClick?: (position: number) => void;
-    onDragStart?: (instance: PicletInstance) => void;
-    onDragEnd?: () => void;
-  }
-  
-  let { 
-    position, 
-    piclet, 
-    size = 100, 
-    onDrop, 
-    onPicletClick, 
-    onEmptyClick,
-    onDragStart,
-    onDragEnd 
-  }: Props = $props();
-  
-  let isDragOver = $state(false);
-  let canAcceptDrop = $state(false);
-  
-  function handleDragOver(e: DragEvent) {
-    e.preventDefault();
-    
-    // Check if we can accept the drop
-    const data = e.dataTransfer?.getData('application/json');
-    if (data) {
-      isDragOver = true;
-      canAcceptDrop = true;
-      e.dataTransfer!.dropEffect = 'move';
-    }
-  }
-  
-  function handleDragLeave() {
-    isDragOver = false;
-    canAcceptDrop = false;
-  }
-  
-  function handleDrop(e: DragEvent) {
-    e.preventDefault();
-    isDragOver = false;
-    canAcceptDrop = false;
-    
-    const data = e.dataTransfer?.getData('application/json');
-    if (data) {
-      const dragData = JSON.parse(data);
-      onDrop?.(position, dragData);
-    }
-  }
-  
-  function handleClick() {
-    if (piclet) {
-      onPicletClick?.(piclet);
-    } else {
-      onEmptyClick?.(position);
-    }
-  }
-</script>
-
-<div
-  class="roster-slot"
-  ondragover={handleDragOver}
-  ondragleave={handleDragLeave}
-  ondrop={handleDrop}
-  class:drag-over={isDragOver}
-  role="region"
-  aria-label="Roster slot {position + 1}"
->
-  {#if piclet}
-    <DraggablePicletCard 
-      instance={piclet}
-      {size}
-      onClick={handleClick}
-      {onDragStart}
-      {onDragEnd}
-    />
-  {:else}
-    <EmptySlotCard 
-      {size}
-      isHighlighted={isDragOver && canAcceptDrop}
-      onClick={handleClick}
-    />
-  {/if}
-</div>
-
-<style>
-  .roster-slot {
-    position: relative;
-  }
-  
-  .roster-slot.drag-over::after {
-    content: '';
-    position: absolute;
-    inset: -4px;
-    border: 2px solid #007bff;
-    border-radius: 16px;
-    background: rgba(0, 123, 255, 0.1);
-    pointer-events: none;
-  }
-</style>

src/lib/db/encounterService.ts

@@ -1,115 +0,0 @@
-import { db } from './index';
-import type { Encounter, PicletInstance } from './schema';
-import { EncounterType } from './schema';
-import { getOrCreateGameState, markEncountersRefreshed } from './gameState';
-import { getCaughtPiclets } from './piclets';
-
-// Configuration
-const ENCOUNTER_REFRESH_HOURS = 2;
-const MIN_WILD_ENCOUNTERS = 2;
-const MAX_WILD_ENCOUNTERS = 4;
-
-export class EncounterService {
-  // Check if encounters should be refreshed
-  static async shouldRefreshEncounters(): Promise<boolean> {
-    const state = await getOrCreateGameState();
-    const hoursSinceRefresh = (Date.now() - state.lastEncounterRefresh.getTime()) / (1000 * 60 * 60);
-    return hoursSinceRefresh >= ENCOUNTER_REFRESH_HOURS;
-  }
-
-  // Force encounter refresh
-  static async forceEncounterRefresh(): Promise<void> {
-    await db.encounters.clear();
-    await markEncountersRefreshed();
-  }
-
-  // Get current encounters
-  static async getCurrentEncounters(): Promise<Encounter[]> {
-    return await db.encounters
-      .orderBy('createdAt')
-      .reverse()
-      .toArray();
-  }
-
-  // Clear all encounters
-  static async clearEncounters(): Promise<void> {
-    await db.encounters.clear();
-  }
-
-  // Generate new encounters - simplified to only wild battles
-  static async generateEncounters(): Promise<Encounter[]> {
-    const encounters: Omit<Encounter, 'id'>[] = [];
-    
-    // Check if player has any Piclets
-    const caughtPiclets = await getCaughtPiclets();
-    
-    if (caughtPiclets.length === 0) {
-      // No Piclets yet - show empty state, they need to scan first
-      console.log('Player has no caught piclets - returning empty encounters');
-      await db.encounters.clear();
-      await markEncountersRefreshed();
-      return [];
-    }
-    
-    // Player has Piclets - generate wild battle encounters
-    console.log('Generating wild battle encounters');
-    const wildEncounters = await this.generateWildBattleEncounters();
-    encounters.push(...wildEncounters);
-
-    // Clear existing encounters and add new ones
-    await db.encounters.clear();
-    for (const encounter of encounters) {
-      await db.encounters.add(encounter);
-    }
-
-    await markEncountersRefreshed();
-    return await this.getCurrentEncounters();
-  }
-
-  // Generate wild battle encounters using existing caught Piclets
-  private static async generateWildBattleEncounters(): Promise<Omit<Encounter, 'id'>[]> {
-    const encounters: Omit<Encounter, 'id'>[] = [];
-    
-    // Get all caught piclets to use as potential opponents
-    const caughtPiclets = await getCaughtPiclets();
-    
-    if (caughtPiclets.length === 0) {
-      return encounters;
-    }
-
-    // Generate 2-4 random wild encounters
-    const numEncounters = Math.floor(Math.random() * (MAX_WILD_ENCOUNTERS - MIN_WILD_ENCOUNTERS + 1)) + MIN_WILD_ENCOUNTERS;
-    
-    for (let i = 0; i < numEncounters; i++) {
-      // Pick a random Piclet from caught ones to use as opponent
-      const randomPiclet = caughtPiclets[Math.floor(Math.random() * caughtPiclets.length)];
-      
-      // Use the piclet's name for display
-      const displayName = randomPiclet.typeId.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-      
-      const encounter: Omit<Encounter, 'id'> = {
-        type: EncounterType.WILD_PICLET,
-        title: `Wild ${displayName}`,
-        description: `A wild ${displayName} appears! Ready for battle?`,
-        picletInstanceId: randomPiclet.id,
-        picletTypeId: randomPiclet.typeId,
-        enemyLevel: 5, // Simplified - no level variance needed
-        createdAt: new Date()
-      };
-      
-      encounters.push(encounter);
-    }
-
-    return encounters;
-  }
-
-  // Get a specific encounter by ID
-  static async getEncounter(id: number): Promise<Encounter | undefined> {
-    return await db.encounters.get(id);
-  }
-
-  // Delete an encounter (after it's been completed)
-  static async deleteEncounter(id: number): Promise<void> {
-    await db.encounters.delete(id);
-  }
-}

src/lib/db/gameState.ts

@@ -1,26 +1,27 @@
 import { db } from './index';
-import type { GameState, Encounter, EncounterType } from './schema';
+import type { GameState, ActivityEntry } from './schema';
 
 // Initialize or get game state
 export async function getOrCreateGameState(): Promise<GameState> {
   const states = await db.gameState.toArray();
-  
+
   if (states.length > 0) {
     // Update last played
     await db.gameState.update(states[0].id!, { lastPlayed: new Date() });
     return states[0];
   }
-  
+
   // Create initial game state
   const newState: Omit<GameState, 'id'> = {
-    lastEncounterRefresh: new Date(),
+    lastActivityRefresh: new Date(),
     lastPlayed: new Date(),
-    progressPoints: 0,
-    trainersDefeated: 0,
-    picletsCapured: 0,
-    battlesLost: 0
+    totalDiscoveries: 0,
+    uniqueDiscoveries: 0,
+    variationsFound: 0,
+    rarityScore: 0,
+    currentStreak: 0
   };
-  
+
   const id = await db.gameState.add(newState);
   return { ...newState, id };
 }
@@ -31,59 +32,67 @@ export async function updateProgress(updates: Partial<GameState>): Promise<void>
   await db.gameState.update(state.id!, updates);
 }
 
-// Increment specific counters
-export async function incrementCounter(counter: 'trainersDefeated' | 'picletsCapured' | 'battlesLost'): Promise<void> {
+// Increment discovery counters
+export async function incrementDiscoveryCounter(counter: 'totalDiscoveries' | 'uniqueDiscoveries' | 'variationsFound'): Promise<void> {
   const state = await getOrCreateGameState();
   await db.gameState.update(state.id!, {
-    [counter]: state[counter] + 1
+    [counter]: (state[counter] || 0) + 1
   });
 }
 
-// Add progress points
-export async function addProgressPoints(points: number): Promise<void> {
+// Add rarity score points
+export async function addRarityScore(points: number): Promise<void> {
   const state = await getOrCreateGameState();
-  const newPoints = Math.min(1000, state.progressPoints + points);
   await db.gameState.update(state.id!, {
-    progressPoints: newPoints
+    rarityScore: (state.rarityScore || 0) + points
   });
 }
 
-// Create a new encounter
-export async function createEncounter(encounter: Omit<Encounter, 'id' | 'createdAt'>): Promise<number> {
-  return await db.encounters.add({
-    ...encounter,
+// Create a new activity entry
+export async function createActivityEntry(entry: Omit<ActivityEntry, 'id' | 'createdAt'>): Promise<number> {
+  return await db.activityEntries.add({
+    ...entry,
     createdAt: new Date()
   });
 }
 
-// Get recent encounters
-export async function getRecentEncounters(limit: number = 10): Promise<Encounter[]> {
-  return await db.encounters
+// Get recent activity
+export async function getRecentActivity(limit: number = 10): Promise<ActivityEntry[]> {
+  return await db.activityEntries
     .orderBy('createdAt')
     .reverse()
     .limit(limit)
     .toArray();
 }
 
-// Get encounters by type
-export async function getEncountersByType(type: EncounterType): Promise<Encounter[]> {
-  return await db.encounters
-    .where('type')
-    .equals(type)
-    .toArray();
+// Check if should refresh activity (e.g., every 30 minutes)
+export async function shouldRefreshActivity(): Promise<boolean> {
+  const state = await getOrCreateGameState();
+  const minutesSinceRefresh = (Date.now() - state.lastActivityRefresh.getTime()) / (1000 * 60);
+  return minutesSinceRefresh >= 30;
 }
 
-// Check if should refresh encounters (e.g., every hour)
-export async function shouldRefreshEncounters(): Promise<boolean> {
+// Mark activity as refreshed
+export async function markActivityRefreshed(): Promise<void> {
   const state = await getOrCreateGameState();
-  const hoursSinceRefresh = (Date.now() - state.lastEncounterRefresh.getTime()) / (1000 * 60 * 60);
-  return hoursSinceRefresh >= 1;
+  await db.gameState.update(state.id!, {
+    lastActivityRefresh: new Date()
+  });
 }
 
-// Mark encounters as refreshed
-export async function markEncountersRefreshed(): Promise<void> {
+// Update current streak
+export async function updateStreak(daysActive: number): Promise<void> {
   const state = await getOrCreateGameState();
   await db.gameState.update(state.id!, {
-    lastEncounterRefresh: new Date()
+    currentStreak: daysActive
   });
+}
+
+// Calculate rarity points for a discovery
+export function calculateRarityPoints(scanCount: number): number {
+  if (scanCount <= 5) return 100;  // Legendary
+  if (scanCount <= 20) return 50;  // Epic
+  if (scanCount <= 50) return 20;  // Rare
+  if (scanCount <= 100) return 10; // Uncommon
+  return 5; // Common
 }

src/lib/db/index.ts

@@ -1,10 +1,10 @@
 import Dexie, { type Table } from 'dexie';
-import type { PicletInstance, Encounter, GameState, TrainerScanProgress } from './schema';
+import type { PicletInstance, ActivityEntry, GameState, TrainerScanProgress } from './schema';
 
 export class PicletDatabase extends Dexie {
   // Game tables
   picletInstances!: Table<PicletInstance>;
-  encounters!: Table<Encounter>;
+  activityEntries!: Table<ActivityEntry>;
   gameState!: Table<GameState>;
   trainerScanProgress!: Table<TrainerScanProgress>;
 
@@ -48,6 +48,30 @@ export class PicletDatabase extends Dexie {
       gameState: '++id, lastPlayed',
       trainerScanProgress: 'imagePath, trainerName, status, completedAt'
     });
+
+    // Version 8: Discovery system - replace encounters with activity, update piclet fields
+    this.version(8).stores({
+      picletInstances: '++id, typeId, objectName, isCanonical, canonicalId, isInCollection, collectedAt, tier',
+      activityEntries: '++id, type, createdAt, picletTypeId, discovererName, rarity',
+      gameState: '++id, lastPlayed, lastActivityRefresh',
+      trainerScanProgress: 'imagePath, trainerName, status, completedAt'
+    }).upgrade(tx => {
+      // Migrate existing data
+      return tx.table('picletInstances').toCollection().modify(piclet => {
+        // Map old fields to new
+        piclet.objectName = piclet.typeId || 'unknown';
+        piclet.isCanonical = false;
+        piclet.isInCollection = piclet.caught || false;
+        piclet.collectedAt = piclet.caughtAt || new Date();
+        piclet.scanCount = 1;
+        piclet.discoveredAt = piclet.caughtAt || new Date();
+        // Remove old fields
+        delete piclet.caught;
+        delete piclet.caughtAt;
+        delete piclet.isInRoster;
+        delete piclet.rosterPosition;
+      });
+    });
   }
 }
 

src/lib/db/piclets.ts

@@ -16,39 +16,49 @@ interface GeneratedPicletData {
 }
 
 // Convert generated piclet data to a PicletInstance
-export async function generatedDataToPicletInstance(data: GeneratedPicletData): Promise<Omit<PicletInstance, 'id'>> {
+export async function generatedDataToPicletInstance(
+  data: GeneratedPicletData,
+  objectName?: string,
+  attributes?: string[],
+  visualDetails?: string
+): Promise<Omit<PicletInstance, 'id'>> {
   if (!data.stats) {
     throw new Error('Generated data must have stats to create PicletInstance');
   }
 
   const stats = data.stats as PicletStats;
-  
-  // Map tier from stats
-  let tier: string = stats.tier || 'medium';
-  
-  // Check if this is the first piclet (no existing piclets in database)
-  const existingPiclets = await db.picletInstances.count();
-  const isFirstPiclet = existingPiclets === 0;
-  
+
+  // Map tier from stats to discovery rarity
+  let tier: string = stats.tier || 'common';
+
+  // Generate unique typeId
+  const typeId = `${objectName || stats.name}_${Date.now()}`;
+
   return {
     // Basic Info
-    typeId: stats.name || data.name,
+    typeId: typeId,
+    objectName: objectName || stats.name || data.name,
     nickname: stats.name || data.name,
     primaryType: stats.primaryType as PicletType,
     tier: tier,
-    
-    // Roster Management
-    isInRoster: isFirstPiclet,
-    rosterPosition: isFirstPiclet ? 0 : undefined,
-    
-    // Metadata
-    caught: isFirstPiclet, // First piclet is automatically caught
-    caughtAt: isFirstPiclet ? new Date() : undefined,
-    
-    // Original generation data
+
+    // Discovery Metadata
+    isCanonical: false, // Will be set by server
+    canonicalId: undefined,
+    variationAttributes: attributes || [],
+    discoveredBy: 'Player', // Will be set by server
+    discoveredAt: new Date(),
+    scanCount: 1,
+
+    // Collection Management
+    isInCollection: true, // Auto-collected when scanned
+    collectedAt: new Date(),
+
+    // Visual Data
     imageUrl: data.imageUrl,
     imageData: data.imageData,
     imageCaption: data.imageCaption,
+    visualDetails: visualDetails || '',
     concept: data.concept,
     description: stats.description,
     imagePrompt: data.imagePrompt
@@ -81,39 +91,32 @@ export async function getPicletInstance(id: number): Promise<PicletInstance | un
   return await db.picletInstances.get(id);
 }
 
-// Get roster piclets (those currently in battle roster)
-export async function getRosterPiclets(): Promise<PicletInstance[]> {
-  return await db.picletInstances.where('isInRoster').equals(1).toArray();
-}
-
-// Get caught piclets (those that have been captured)
-export async function getCaughtPiclets(): Promise<PicletInstance[]> {
-  return await db.picletInstances.where('caught').equals(1).toArray();
+// Get collected piclets (those that have been discovered)
+export async function getCollectedPiclets(): Promise<PicletInstance[]> {
+  return await db.picletInstances.where('isInCollection').equals(1).toArray();
 }
 
-// Move a piclet to roster (simplified version)
-export async function moveToRoster(picletId: number, position: number): Promise<void> {
-  await db.picletInstances.update(picletId, {
-    isInRoster: true,
-    rosterPosition: position
-  });
+// Get canonical piclets
+export async function getCanonicalPiclets(): Promise<PicletInstance[]> {
+  return await db.picletInstances.where('isCanonical').equals(1).toArray();
 }
 
-// Get uncaught piclets
-export async function getUncaughtPiclets(): Promise<PicletInstance[]> {
-  return await db.picletInstances.where('caught').equals(0).toArray();
+// Get piclets by object name
+export async function getPicletsByObjectName(objectName: string): Promise<PicletInstance[]> {
+  return await db.picletInstances.where('objectName').equals(objectName).toArray();
 }
 
-// Swap roster positions (simplified version)
-export async function swapRosterPositions(id1: number, position1: number, id2: number, position2: number): Promise<void> {
-  await db.picletInstances.update(id1, { rosterPosition: position2 });
-  await db.picletInstances.update(id2, { rosterPosition: position1 });
+// Get variations of a canonical piclet
+export async function getVariations(canonicalId: string): Promise<PicletInstance[]> {
+  return await db.picletInstances.where('canonicalId').equals(canonicalId).toArray();
 }
 
-// Move to storage (simplified version)
-export async function moveToStorage(picletId: number): Promise<void> {
-  await db.picletInstances.update(picletId, {
-    isInRoster: false,
-    rosterPosition: undefined
-  });
+// Update scan count
+export async function updateScanCount(picletId: number): Promise<void> {
+  const piclet = await db.picletInstances.get(picletId);
+  if (piclet) {
+    await db.picletInstances.update(picletId, {
+      scanCount: (piclet.scanCount || 0) + 1
+    });
+  }
 }

src/lib/db/schema.ts

@@ -1,70 +1,91 @@
 import type { PicletType } from '../types/picletTypes';
 
-// Enums
-export enum EncounterType {
-  WILD_PICLET = 'wildPiclet',
-  FIRST_PICLET = 'firstPiclet'
+// Discovery Status
+export enum DiscoveryStatus {
+  NEW = 'new',
+  VARIATION = 'variation',
+  EXISTING = 'existing'
 }
 
 
-// PicletInstance - Individual monster instances owned by the player
+// PicletInstance - Individual monster instances discovered by players
 export interface PicletInstance {
   id?: number;
-  
+
   // Basic Info
-  typeId: string;
+  typeId: string; // Unique identifier for this specific Piclet
+  objectName: string; // Canonical object name (e.g., "pillow", "pyramid")
   nickname?: string;
   primaryType: PicletType;
-  tier: string; // 'low' | 'medium' | 'high' | 'legendary'
-  
-  // Roster Management
-  isInRoster: boolean;
-  rosterPosition?: number; // 0-5 when in roster
-  
-  // Metadata
-  caught: boolean; // Whether this Piclet has been caught by the player
-  caughtAt?: Date; // When this Piclet was caught (undefined if not caught)
-  
-  // Original generation data
+  tier: string; // 'common' | 'uncommon' | 'rare' | 'epic' | 'legendary'
+
+  // Discovery Metadata
+  isCanonical: boolean; // True if this is the canonical version
+  canonicalId?: string; // Reference to canonical Piclet if this is a variation
+  variationAttributes?: string[]; // e.g., ["velvet", "blue"] for variations
+  discoveredBy?: string; // Username of first discoverer
+  discoveredAt: Date; // When first discovered
+  scanCount: number; // Total times this Piclet has been scanned
+
+  // Collection Management
+  isInCollection: boolean; // Whether player has discovered this
+  collectedAt?: Date; // When player discovered it
+
+  // Visual Data
   imageUrl: string;
   imageData?: string; // Base64 encoded image with transparency
-  imageCaption: string;
-  concept: string;
+  imageCaption: string; // Original caption from image
+  visualDetails?: string; // Extra visual details for monster generation
+  concept: string; // Generated monster concept
   description: string; // Generated monster description
-  imagePrompt: string;
+  imagePrompt: string; // Prompt used for image generation
 }
 
-// Encounter - Game encounters
-export interface Encounter {
+// ActivityEntry - Recent discoveries and leaderboard
+export interface ActivityEntry {
   id?: number;
-  
+
   // Type
-  type: EncounterType;
-  
+  type: 'discovery' | 'variation' | 'milestone';
+
   // Details
   title: string;
   description: string;
-  picletTypeId?: string; // For wild piclet encounters
-  picletInstanceId?: number; // For first piclet encounters - specific Piclet to catch
-  enemyLevel?: number;
-  
+  picletTypeId: string;
+  discovererName: string;
+  rarity: 'common' | 'uncommon' | 'rare' | 'epic' | 'legendary';
+
   // Timing
   createdAt: Date;
 }
 
-// GameState - Overall game progress
+// GameState - Discovery progress and stats
 export interface GameState {
   id?: number;
-  
+
   // Timing
-  lastEncounterRefresh: Date;
+  lastActivityRefresh: Date;
   lastPlayed: Date;
-  
-  // Progress (0-1000)
-  progressPoints: number;
-  trainersDefeated: number;
-  picletsCapured: number;
-  battlesLost: number;
+
+  // Discovery Stats
+  totalDiscoveries: number;
+  uniqueDiscoveries: number; // Canonical Piclets found
+  variationsFound: number;
+  rarityScore: number; // Sum of rarity points
+  currentStreak: number; // Days in a row with discoveries
+
+  // Cached server data
+  lastServerSync?: Date;
+  cachedLeaderboard?: LeaderboardEntry[];
+}
+
+// LeaderboardEntry - For activity feed
+export interface LeaderboardEntry {
+  username: string;
+  totalDiscoveries: number;
+  uniqueDiscoveries: number;
+  rarityScore: number;
+  rank: number;
 }
 
 

src/lib/services/canonicalService.ts

@@ -0,0 +1,214 @@
+import type { PicletInstance, DiscoveryStatus } from '$lib/db/schema';
+
+const SERVER_URL = import.meta.env.DEV
+  ? 'http://localhost:3000'
+  : 'https://piclets-server.herokuapp.com';
+
+export interface CanonicalSearchResult {
+  status: DiscoveryStatus;
+  piclet: PicletInstance;
+  canonicalId?: string;
+  matchedAttributes?: string[];
+  suggestedVariation?: string[];
+}
+
+export interface ObjectExtractionResult {
+  primaryObject: string;
+  attributes: string[];
+  visualDetails: string;
+}
+
+export class CanonicalService {
+  /**
+   * Extract object and attributes from image caption
+   * Focuses on identifying the primary object and its variations
+   */
+  static extractObjectFromCaption(caption: string): ObjectExtractionResult {
+    // Clean and normalize caption
+    const normalized = caption.toLowerCase().trim();
+
+    // Common patterns to identify the main object
+    // Priority: noun after article (a/an/the), first noun, or key noun phrases
+    const objectPatterns = [
+      /(?:a|an|the)\s+(\w+(?:\s+\w+)?)\s+(?:is|sits|stands|lies|rests)/i,
+      /(?:a|an|the)\s+([\w\s]+?)(?:\s+with|\s+that|\s+in|\s+on|,|\.|$)/i,
+      /^([\w\s]+?)(?:\s+with|\s+that|\s+in|\s+on|,|\.|$)/i,
+    ];
+
+    let primaryObject = '';
+    for (const pattern of objectPatterns) {
+      const match = caption.match(pattern);
+      if (match && match[1]) {
+        // Clean up the captured object
+        primaryObject = match[1]
+          .trim()
+          .replace(/\s+/g, ' ')
+          .split(' ')
+          .filter(word => !['very', 'quite', 'rather', 'extremely'].includes(word))
+          .pop() || ''; // Get the last word as the core object
+
+        if (primaryObject) break;
+      }
+    }
+
+    // Fallback: take first noun-like word
+    if (!primaryObject) {
+      const words = normalized.split(/\s+/);
+      primaryObject = words.find(w => w.length > 3 && !['with', 'that', 'this', 'from'].includes(w)) || 'object';
+    }
+
+    // Extract descriptive attributes (limit to 2-3 most relevant)
+    const attributeWords = [
+      // Materials
+      'wooden', 'metal', 'plastic', 'glass', 'leather', 'velvet', 'silk', 'cotton', 'stone', 'marble',
+      'gold', 'silver', 'bronze', 'copper', 'steel', 'iron', 'aluminum', 'ceramic', 'porcelain',
+      // Styles
+      'modern', 'vintage', 'antique', 'rustic', 'minimalist', 'ornate', 'gothic', 'art deco', 'retro',
+      // Colors (basic only)
+      'red', 'blue', 'green', 'yellow', 'purple', 'orange', 'black', 'white', 'gray', 'brown',
+      // Patterns
+      'striped', 'polka dot', 'floral', 'geometric', 'plaid', 'checkered',
+      // Conditions
+      'old', 'new', 'worn', 'shiny', 'matte', 'glossy', 'rough', 'smooth'
+    ];
+
+    const attributes: string[] = [];
+    const lowerCaption = caption.toLowerCase();
+
+    for (const attr of attributeWords) {
+      if (lowerCaption.includes(attr) && attributes.length < 3) {
+        attributes.push(attr);
+      }
+    }
+
+    // Extract visual details for monster generation (everything else interesting)
+    const visualDetails = caption
+      .replace(new RegExp(primaryObject, 'gi'), '')
+      .replace(new RegExp(attributes.join('|'), 'gi'), '')
+      .replace(/(?:a|an|the)\s+/gi, '')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    return {
+      primaryObject: primaryObject.toLowerCase(),
+      attributes,
+      visualDetails
+    };
+  }
+
+  /**
+   * Search for canonical Piclet or variations
+   */
+  static async searchCanonical(
+    objectName: string,
+    attributes: string[]
+  ): Promise<CanonicalSearchResult | null> {
+    try {
+      const response = await fetch(`${SERVER_URL}/api/piclets/search`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ object: objectName, attributes })
+      });
+
+      if (!response.ok) {
+        console.error('Server search failed:', response.status);
+        return null;
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error('Failed to search canonical:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Create a new canonical Piclet
+   */
+  static async createCanonical(
+    piclet: Partial<PicletInstance>,
+    discovererName: string
+  ): Promise<PicletInstance | null> {
+    try {
+      const response = await fetch(`${SERVER_URL}/api/piclets/canonical`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...piclet,
+          discoveredBy: discovererName,
+          discoveredAt: new Date(),
+          isCanonical: true,
+          scanCount: 1
+        })
+      });
+
+      if (!response.ok) {
+        console.error('Failed to create canonical:', response.status);
+        return null;
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error('Failed to create canonical:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Create a variation of existing canonical Piclet
+   */
+  static async createVariation(
+    canonicalId: string,
+    variation: Partial<PicletInstance>,
+    discovererName: string
+  ): Promise<PicletInstance | null> {
+    try {
+      const response = await fetch(`${SERVER_URL}/api/piclets/variation`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          canonicalId,
+          ...variation,
+          discoveredBy: discovererName,
+          discoveredAt: new Date(),
+          isCanonical: false,
+          scanCount: 1
+        })
+      });
+
+      if (!response.ok) {
+        console.error('Failed to create variation:', response.status);
+        return null;
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error('Failed to create variation:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Increment scan count for existing Piclet
+   */
+  static async incrementScanCount(picletId: string): Promise<void> {
+    try {
+      await fetch(`${SERVER_URL}/api/piclets/${picletId}/scan`, {
+        method: 'POST'
+      });
+    } catch (error) {
+      console.error('Failed to increment scan count:', error);
+    }
+  }
+
+  /**
+   * Calculate rarity based on scan count
+   */
+  static calculateRarity(scanCount: number): string {
+    if (scanCount <= 5) return 'legendary';
+    if (scanCount <= 20) return 'epic';
+    if (scanCount <= 50) return 'rare';
+    if (scanCount <= 100) return 'uncommon';
+    return 'common';
+  }
+}

src/lib/services/enhancedCaption.ts

@@ -0,0 +1,167 @@
+import type { GradioClient } from '$lib/types';
+
+export interface EnhancedCaptionResult {
+  objectCaption: string;      // Main object identification
+  visualDetails: string;       // Additional visual details for monster generation
+  fullCaption: string;        // Complete original caption
+  extractedObject?: string;   // Parsed primary object
+  extractedAttributes?: string[]; // Parsed attributes
+}
+
+export class EnhancedCaptionService {
+  /**
+   * Generate multiple captions to extract object and visual details
+   */
+  static async generateEnhancedCaption(
+    client: GradioClient,
+    image: Blob | File
+  ): Promise<EnhancedCaptionResult> {
+    try {
+      // First caption: Focus on object identification
+      const objectPrompt = "Identify the main object in this image. Start with 'This is a/an' followed by the object name and up to 2-3 key attributes (material, color, or style). Be concise and focus only on WHAT the object is, not where it is or what surrounds it.";
+
+      const objectResult = await client.predict("/stream_chat", [
+        image,
+        "Descriptive",     // caption type
+        "short",          // length - short for object identification
+        [],               // extra_options
+        "",              // name_input
+        objectPrompt     // custom_prompt for object focus
+      ]);
+
+      const objectCaption = objectResult.data[1] as string;
+
+      // Second caption: Get visual details for monster generation
+      const detailsPrompt = "Describe the unique visual characteristics, textures, patterns, and interesting details of this object that would make it distinctive as a creature. Focus on surface details, decorative elements, and any unusual features. Do not repeat the object name.";
+
+      const detailsResult = await client.predict("/stream_chat", [
+        image,
+        "Descriptive",
+        "medium-length",  // More details for visual generation
+        [],
+        "",
+        detailsPrompt
+      ]);
+
+      const visualDetails = detailsResult.data[1] as string;
+
+      // Third caption: Full descriptive caption as backup
+      const fullResult = await client.predict("/stream_chat", [
+        image,
+        "Descriptive",
+        "long",
+        [],
+        "",
+        ""  // No custom prompt for natural full description
+      ]);
+
+      const fullCaption = fullResult.data[1] as string;
+
+      // Extract structured data from object caption
+      const extraction = this.parseObjectCaption(objectCaption);
+
+      return {
+        objectCaption,
+        visualDetails,
+        fullCaption,
+        extractedObject: extraction.object,
+        extractedAttributes: extraction.attributes
+      };
+    } catch (error) {
+      console.error('Enhanced caption generation failed:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Parse the object-focused caption to extract structured data
+   */
+  private static parseObjectCaption(caption: string): {
+    object: string;
+    attributes: string[];
+  } {
+    // Remove "This is a/an" prefix
+    let cleaned = caption
+      .replace(/^(This is|It'?s|That'?s)\s+(a|an|the)?\s*/i, '')
+      .trim();
+
+    // Common attribute words to extract
+    const attributePatterns = [
+      // Materials
+      /\b(wooden|metal|plastic|glass|leather|velvet|silk|cotton|stone|marble|ceramic|porcelain)\b/gi,
+      // Colors
+      /\b(red|blue|green|yellow|purple|orange|black|white|gray|brown|pink|gold|silver)\b/gi,
+      // Styles
+      /\b(modern|vintage|antique|rustic|minimalist|ornate|gothic|retro|classic)\b/gi,
+      // Patterns
+      /\b(striped|checkered|floral|geometric|polka-dot|plaid)\b/gi
+    ];
+
+    const attributes: string[] = [];
+    let objectText = cleaned;
+
+    // Extract attributes from the caption
+    for (const pattern of attributePatterns) {
+      const matches = cleaned.match(pattern);
+      if (matches) {
+        attributes.push(...matches.map(m => m.toLowerCase()));
+        // Remove matched attributes from object text
+        objectText = objectText.replace(pattern, '').trim();
+      }
+    }
+
+    // Clean up object text - get the core noun
+    const words = objectText.split(/\s+/).filter(w => w.length > 0);
+
+    // Remove common descriptive words that aren't the object
+    const filterWords = ['with', 'that', 'which', 'having', 'featuring', 'very', 'quite', 'rather'];
+    const objectWords = words.filter(w => !filterWords.includes(w.toLowerCase()));
+
+    // The object is typically the first significant noun
+    let object = objectWords[0] || 'object';
+
+    // Handle compound objects (e.g., "coffee mug" -> "mug", "throw pillow" -> "pillow")
+    const compoundMappings: Record<string, string> = {
+      'coffee': 'mug',
+      'throw': 'pillow',
+      'picture': 'frame',
+      'water': 'bottle',
+      'wine': 'glass',
+      'flower': 'vase',
+      'table': 'lamp',
+      'desk': 'lamp',
+      'floor': 'lamp'
+    };
+
+    if (compoundMappings[object.toLowerCase()] && objectWords.length > 1) {
+      object = objectWords[1];
+    }
+
+    // Limit attributes to top 3 most relevant
+    const uniqueAttributes = [...new Set(attributes)].slice(0, 3);
+
+    return {
+      object: object.toLowerCase(),
+      attributes: uniqueAttributes
+    };
+  }
+
+  /**
+   * Generate a combined prompt for monster generation
+   */
+  static createMonsterPrompt(
+    objectName: string,
+    visualDetails: string,
+    attributes: string[]
+  ): string {
+    const attributeText = attributes.length > 0
+      ? ` with ${attributes.join(', ')} characteristics`
+      : '';
+
+    return `Create a Pokemon-style creature based on a ${objectName}${attributeText}.
+
+Visual inspiration: ${visualDetails}
+
+The creature should embody the essence of a ${objectName} while incorporating these visual elements into its design. Make it cute but distinctive, with clear ${objectName}-inspired features.`;
+  }
+}

src/lib/services/picletMetadata.ts

@@ -4,7 +4,7 @@ const METADATA_KEY = 'snaplings-piclet-v1';
 
 interface PicletMetadata {
   version: 1;
-  data: Omit<PicletInstance, 'id' | 'rosterPosition' | 'isInRoster' | 'caughtAt'>;
+  data: Omit<PicletInstance, 'id'>;
   checksum?: string;
 }
 
@@ -44,9 +44,8 @@ export async function extractPicletMetadata(file: File): Promise<PicletInstance
     // Create PicletInstance from metadata
     const piclet: PicletInstance = {
       ...metadata.data,
-      caughtAt: new Date(), // Use current date for import
-      isInRoster: false,
-      rosterPosition: undefined
+      collectedAt: new Date(), // Use current date for import
+      isInCollection: true
     };
     
     return piclet;
@@ -68,33 +67,24 @@ export async function embedPicletMetadata(imageBlob: Blob, piclet: PicletInstanc
     version: 1,
     data: {
       typeId: piclet.typeId,
+      objectName: piclet.objectName,
       nickname: piclet.nickname,
       primaryType: piclet.primaryType,
-      currentHp: piclet.maxHp, // Reset to full HP for sharing
-      maxHp: piclet.maxHp,
-      level: piclet.level,
-      xp: piclet.xp,
-      attack: piclet.attack,
-      defense: piclet.defense,
-      fieldAttack: piclet.fieldAttack,
-      fieldDefense: piclet.fieldDefense,
-      speed: piclet.speed,
-      baseHp: piclet.baseHp,
-      baseAttack: piclet.baseAttack,
-      baseDefense: piclet.baseDefense,
-      baseFieldAttack: piclet.baseFieldAttack,
-      baseFieldDefense: piclet.baseFieldDefense,
-      baseSpeed: piclet.baseSpeed,
-      moves: piclet.moves,
-      nature: piclet.nature,
-      bst: piclet.bst,
       tier: piclet.tier,
-      role: piclet.role,
-      variance: piclet.variance,
+      isCanonical: piclet.isCanonical,
+      canonicalId: piclet.canonicalId,
+      variationAttributes: piclet.variationAttributes,
+      discoveredBy: piclet.discoveredBy,
+      discoveredAt: piclet.discoveredAt,
+      scanCount: piclet.scanCount,
+      isInCollection: piclet.isInCollection,
+      collectedAt: piclet.collectedAt,
       imageUrl: piclet.imageUrl,
       imageData: piclet.imageData,
       imageCaption: piclet.imageCaption,
+      visualDetails: piclet.visualDetails,
       concept: piclet.concept,
+      description: piclet.description,
       imagePrompt: piclet.imagePrompt
     }
   };

src/lib/types/index.ts

@@ -75,13 +75,14 @@ export interface GradioLibs {
 }
 
 // Piclet Generator Types
-export type PicletWorkflowStep = 
-  | 'upload' 
-  | 'captioning' 
+export type PicletWorkflowStep =
+  | 'upload'
+  | 'captioning'
+  | 'checking'
   | 'conceptualizing'
-  | 'statsGenerating' 
-  | 'promptCrafting' 
-  | 'generating' 
+  | 'statsGenerating'
+  | 'promptCrafting'
+  | 'generating'
   | 'complete';
 
 export interface PicletWorkflowState {
@@ -94,6 +95,12 @@ export interface PicletWorkflowState {
   picletImage: FluxGenerationResult | null;
   error: string | null;
   isProcessing: boolean;
+  // Discovery-specific state
+  objectName: string | null;
+  objectAttributes: string[];
+  visualDetails: string | null;
+  discoveryStatus: 'new' | 'variation' | 'existing' | null;
+  canonicalPiclet: any | null; // Will be PicletInstance but avoiding circular dep
 }
 
 export interface PicletGeneratorProps {