better display

src/lib/components/Piclets/AbilityDisplay.svelte

@@ -124,88 +124,54 @@
       </div>
     </div>
     
-    {#if (ability.effects?.length || 0) + (ability.triggers?.length || 0) > 0}
+    {#if ability.triggers?.length}
       <div class="ability-counts">
-        {#if ability.effects?.length}
-          <span class="count-badge effects">
-            {ability.effects.length} effect{ability.effects.length !== 1 ? 's' : ''}
-          </span>
-        {/if}
-        {#if ability.triggers?.length}
-          <span class="count-badge triggers">
-            {ability.triggers.length} trigger{ability.triggers.length !== 1 ? 's' : ''}
-          </span>
-        {/if}
+        <span class="count-badge triggers">
+          {ability.triggers.length} trigger{ability.triggers.length !== 1 ? 's' : ''}
+        </span>
       </div>
     {/if}
   </div>
   
-  {#if expanded && (ability.effects?.length || ability.triggers?.length)}
+  {#if expanded && ability.triggers?.length}
     <div class="ability-details">
-      {#if ability.effects?.length}
-        <div class="effects-section">
-          <h4 class="section-title">
-            <span class="section-icon">🎯</span>
-            Passive Effects
-          </h4>
-          <div class="effects-list">
-            {#each ability.effects as effect}
-              <div class="effect-item">
-                <span 
-                  class="effect-icon" 
-                  style="color: {getEffectColor(effect.type)}"
-                >
-                  {getEffectIcon(effect.type)}
-                </span>
-                <div class="effect-details">
-                  <span class="effect-type">{effect.type}</span>
-                  <span class="effect-description">{formatEffectDescription(effect)}</span>
+      <div class="triggers-section">
+        <h4 class="section-title">
+          <span class="section-icon">⚡</span>
+          Triggered Effects
+        </h4>
+        <div class="triggers-list">
+          {#each ability.triggers as trigger}
+            <div class="trigger-item">
+              <div class="trigger-header">
+                <span class="trigger-icon">{getTriggerIcon(trigger.event)}</span>
+                <div class="trigger-info">
+                  <span class="trigger-event">{trigger.event}</span>
+                  {#if trigger.condition}
+                    <span class="trigger-condition">when {trigger.condition}</span>
+                  {/if}
                 </div>
               </div>
-            {/each}
-          </div>
-        </div>
-      {/if}
-      
-      {#if ability.triggers?.length}
-        <div class="triggers-section">
-          <h4 class="section-title">
-            <span class="section-icon">⚡</span>
-            Triggered Effects
-          </h4>
-          <div class="triggers-list">
-            {#each ability.triggers as trigger}
-              <div class="trigger-item">
-                <div class="trigger-header">
-                  <span class="trigger-icon">{getTriggerIcon(trigger.event)}</span>
-                  <div class="trigger-info">
-                    <span class="trigger-event">{trigger.event}</span>
-                    {#if trigger.condition}
-                      <span class="trigger-condition">when {trigger.condition}</span>
-                    {/if}
-                  </div>
+              
+              {#if trigger.effects?.length}
+                <div class="trigger-effects">
+                  {#each trigger.effects as effect}
+                    <div class="trigger-effect">
+                      <span 
+                        class="effect-icon small" 
+                        style="color: {getEffectColor(effect.type)}"
+                      >
+                        {getEffectIcon(effect.type)}
+                      </span>
+                      <span class="effect-summary">{formatEffectDescription(effect)}</span>
+                    </div>
+                  {/each}
                 </div>
-                
-                {#if trigger.effects?.length}
-                  <div class="trigger-effects">
-                    {#each trigger.effects as effect}
-                      <div class="trigger-effect">
-                        <span 
-                          class="effect-icon small" 
-                          style="color: {getEffectColor(effect.type)}"
-                        >
-                          {getEffectIcon(effect.type)}
-                        </span>
-                        <span class="effect-summary">{formatEffectDescription(effect)}</span>
-                      </div>
-                    {/each}
-                  </div>
-                {/if}
-              </div>
-            {/each}
-          </div>
+              {/if}
+            </div>
+          {/each}
         </div>
-      {/if}
+      </div>
     </div>
   {/if}
 </div>

src/lib/components/Piclets/PicletDetail.svelte

@@ -157,7 +157,7 @@
       <div class="tab-content">
         {#if selectedTab === 'about'}
           <div class="content-card">
-            <p class="description">{instance.concept}</p>
+            <p class="description">{battleDefinition.description || instance.concept}</p>
           </div>
         {:else if selectedTab === 'stats'}
           <div class="content-card">

src/lib/db/piclets.ts

@@ -31,6 +31,36 @@ export async function monsterToPicletInstance(monster: Monster, level: number =
     console.warn(`Invalid primaryType "${stats.primaryType}" from stats, falling back to concept detection`);
   }
   
+  // Helper function to create meaningful move descriptions
+  function createMoveDescription(move: any): string {
+    if (!move.effects || move.effects.length === 0) {
+      return "No special effects";
+    }
+    
+    const effectDescriptions = move.effects.map((effect: any) => {
+      switch (effect.type) {
+        case 'damage':
+          return `Deals ${effect.amount || 'normal'} damage`;
+        case 'modifyStats':
+          const statChanges = Object.entries(effect.stats || {}).map(([stat, change]) => 
+            `${change} ${stat}`
+          ).join(', ');
+          return `Modifies stats: ${statChanges}`;
+        case 'applyStatus':
+          const chance = effect.chance && effect.chance < 100 ? ` (${effect.chance}%)` : '';
+          return `Inflicts ${effect.status}${chance}`;
+        case 'heal':
+          return `Heals ${effect.amount || 'moderate'} HP`;
+        case 'mechanicOverride':
+          return `Special: ${effect.mechanic}`;
+        default:
+          return effect.type;
+      }
+    });
+    
+    return effectDescriptions.slice(0, 2).join(', ') + (effectDescriptions.length > 2 ? '...' : '');
+  }
+
   // Create moves from battle-ready format
   const moves: BattleMove[] = stats.movepool.map(move => ({
     name: move.name,
@@ -39,7 +69,7 @@ export async function monsterToPicletInstance(monster: Monster, level: number =
     accuracy: move.accuracy,
     pp: move.pp,
     currentPp: move.pp,
-    description: `${move.effects?.length || 0} effects` // Show number of effects
+    description: createMoveDescription(move)
   }));
   
   // Field stats are variations of regular stats