From 0b2d00ad0b310941df8094301c218f5631dd4c66 Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <valentin.haudiquet@canonical.com>
Date: Mon, 27 Apr 2026 00:31:31 +0200
Subject: [PATCH] feat: better item tooltips

---
 dragon-item-parser/src/index.ts          |  21 +-
 dragon-item-parser/src/item.ts           | 536 ++++++++++++++++
 dragon-item-parser/test/item.test.ts     | 210 ++++++-
 frontend/assets/css/main.css             |  34 +
 frontend/components/item/ItemTooltip.vue | 769 +++++++++++++++--------
 frontend/utils/buildHelpers.ts           |   3 +-
 6 files changed, 1307 insertions(+), 266 deletions(-)

diff --git a/dragon-item-parser/src/index.ts b/dragon-item-parser/src/index.ts
index beba903..a110255 100644
--- a/dragon-item-parser/src/index.ts
+++ b/dragon-item-parser/src/index.ts
@@ -1,2 +1,19 @@
-export type { ItemStats, CDragonItem, ItemWithStats } from './item.js'
-export { parseItemStats, parseItem, parseItems } from './item.js'
+export type {
+  ItemStats,
+  CDragonItem,
+  ItemWithStats,
+  ItemEffect,
+  TextSegment,
+  ScalingValue,
+  DamageValue,
+  ParsedDescription,
+  ItemWithParsedDescription
+} from './item.js'
+export {
+  parseItemStats,
+  parseItem,
+  parseItems,
+  parseItemDescription,
+  parseItemFull,
+  parseItemsFull
+} from './item.js'
diff --git a/dragon-item-parser/src/item.ts b/dragon-item-parser/src/item.ts
index dbc5bc6..b860de5 100644
--- a/dragon-item-parser/src/item.ts
+++ b/dragon-item-parser/src/item.ts
@@ -7,6 +7,7 @@ export interface ItemStats {
   abilityPower?: number
   attackSpeed?: number
   criticalStrikeChance?: number
+  criticalStrikeDamage?: number
   lifeSteal?: number
   omnivamp?: number
   physicalVamp?: number
@@ -40,6 +41,98 @@ export interface ItemStats {
   slowResist?: number
 }
 
+/**
+ * Represents a scaling value (e.g., "5% bonus health")
+ */
+export interface ScalingValue {
+  value: number
+  isPercentage: boolean
+  scaleType:
+    | 'mana'
+    | 'health'
+    | 'ap'
+    | 'ad'
+    | 'armor'
+    | 'mr'
+    | 'level'
+    | 'bonusHealth'
+    | 'bonusMana'
+    | 'maxHealth'
+}
+
+/**
+ * Represents a damage value with type
+ */
+export interface DamageValue {
+  value: number
+  isPercentage: boolean
+  damageType: 'magic' | 'physical' | 'true'
+}
+
+/**
+ * Represents a colored text segment
+ */
+export interface TextSegment {
+  type:
+    | 'text'
+    | 'highlight'
+    | 'passive'
+    | 'active'
+    | 'keyword'
+    | 'keywordMajor'
+    | 'keywordStealth'
+    | 'status'
+    | 'speed'
+    | 'scaleMana'
+    | 'scaleHealth'
+    | 'scaleAP'
+    | 'scaleAD'
+    | 'scaleArmor'
+    | 'scaleMR'
+    | 'scaleLevel'
+    | 'scaleBonusHealth'
+    | 'scaleBonusMana'
+    | 'scaleMaxHealth'
+    | 'spellName'
+    | 'unique'
+    | 'rarityMythic'
+    | 'rarityLegendary'
+    | 'rarityGeneric'
+    | 'magicDamage'
+    | 'physicalDamage'
+    | 'trueDamage'
+    | 'healing'
+    | 'shield'
+    | 'attention'
+    | 'onHit'
+    | 'color'
+  content: string
+  color?: string // For custom color spans
+  scaling?: ScalingValue
+  damage?: DamageValue
+}
+
+/**
+ * Represents an item effect (passive, active, unique, etc.)
+ */
+export interface ItemEffect {
+  type: 'passive' | 'active' | 'unique' | 'mythic' | 'legendary' | 'epic'
+  name?: string
+  description: TextSegment[]
+  isUnique?: boolean
+}
+
+/**
+ * Parsed item description structure
+ */
+export interface ParsedDescription {
+  stats: ItemStats
+  effects: ItemEffect[]
+  rules?: TextSegment[]
+  flavorText?: TextSegment[]
+  rarity?: 'mythic' | 'legendary' | 'epic'
+}
+
 /**
  * Stat name mappings from CDragon description text to stat keys
  */
@@ -48,6 +141,7 @@ const STAT_MAPPINGS: Record<string, keyof ItemStats> = {
   'Ability Power': 'abilityPower',
   'Attack Speed': 'attackSpeed',
   'Critical Strike Chance': 'criticalStrikeChance',
+  'Critical Strike Damage': 'criticalStrikeDamage',
   'Life Steal': 'lifeSteal',
   Omnivamp: 'omnivamp',
   'Physical Vamp': 'physicalVamp',
@@ -157,6 +251,424 @@ export function parseItemStats(description: string): ItemStats {
   return stats
 }
 
+/**
+ * Remove HTML tags and get plain text
+ */
+function stripHtmlTags(html: string): string {
+  return html
+    .replace(/<br\s*\/?>/gi, '\n')
+    .replace(/<[^>]+>/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+/**
+ * Parse scaling tags and extract scaling info
+ */
+function parseScalingTag(
+  tagName: string,
+  content: string
+): { scaling?: ScalingValue; text: string } {
+  const scaleTypeMap: Record<string, ScalingValue['scaleType']> = {
+    scaleMana: 'mana',
+    scaleHealth: 'health',
+    scaleAP: 'ap',
+    scaleAD: 'ad',
+    scaleArmor: 'armor',
+    scaleMR: 'mr',
+    scaleLevel: 'level',
+    scaleBonusHealth: 'bonusHealth',
+    scaleBonusMana: 'bonusMana',
+    scaleMaxHealth: 'maxHealth'
+  }
+
+  const scaleType = scaleTypeMap[tagName]
+  if (!scaleType) {
+    return { text: content }
+  }
+
+  // Try to extract percentage or flat value
+  const percentMatch = content.match(/(\d+(?:\.\d+)?)\s*%/)
+  const flatMatch = content.match(/(\d+(?:\.\d+)?)/)
+
+  if (percentMatch) {
+    return {
+      scaling: {
+        value: parseFloat(percentMatch[1]),
+        isPercentage: true,
+        scaleType
+      },
+      text: content
+    }
+  } else if (flatMatch) {
+    return {
+      scaling: {
+        value: parseFloat(flatMatch[1]),
+        isPercentage: false,
+        scaleType
+      },
+      text: content
+    }
+  }
+
+  return { text: content }
+}
+
+/**
+ * Parse damage tags (magicDamage, physicalDamage, trueDamage)
+ */
+function parseDamageTag(tagName: string, content: string): { damage?: DamageValue; text: string } {
+  const damageTypeMap: Record<string, DamageValue['damageType']> = {
+    magicDamage: 'magic',
+    physicalDamage: 'physical',
+    trueDamage: 'true'
+  }
+
+  const damageType = damageTypeMap[tagName]
+  if (!damageType) {
+    return { text: content }
+  }
+
+  // Try to extract damage value
+  const percentMatch = content.match(/(\d+(?:\.\d+)?)\s*%/)
+  const flatMatch = content.match(/(\d+(?:\.\d+)?)/)
+
+  if (percentMatch) {
+    return {
+      damage: {
+        value: parseFloat(percentMatch[1]),
+        isPercentage: true,
+        damageType
+      },
+      text: content
+    }
+  } else if (flatMatch) {
+    return {
+      damage: {
+        value: parseFloat(flatMatch[1]),
+        isPercentage: false,
+        damageType
+      },
+      text: content
+    }
+  }
+
+  return { text: content }
+}
+
+/**
+ * Parse text content with HTML tags into TextSegments
+ */
+function parseTextSegments(html: string): TextSegment[] {
+  const segments: TextSegment[] = []
+
+  if (!html) return segments
+
+  // Process the HTML and convert to segments
+  // We'll use a simple state machine approach
+  let remaining = html
+  let currentText = ''
+
+  // Tag type mappings
+  const tagTypeMap: Record<string, TextSegment['type']> = {
+    passive: 'passive',
+    active: 'active',
+    keyword: 'keyword',
+    keywordMajor: 'keywordMajor',
+    keywordStealth: 'keywordStealth',
+    status: 'status',
+    speed: 'speed',
+    scaleMana: 'scaleMana',
+    scaleHealth: 'scaleHealth',
+    scaleAP: 'scaleAP',
+    scaleAD: 'scaleAD',
+    scaleArmor: 'scaleArmor',
+    scaleMR: 'scaleMR',
+    scaleLevel: 'scaleLevel',
+    scaleBonusHealth: 'scaleBonusHealth',
+    scaleBonusMana: 'scaleBonusMana',
+    scaleMaxHealth: 'scaleMaxHealth',
+    spellName: 'spellName',
+    attention: 'attention',
+    magicDamage: 'magicDamage',
+    physicalDamage: 'physicalDamage',
+    trueDamage: 'trueDamage',
+    healing: 'healing',
+    shield: 'shield',
+    onHit: 'onHit'
+  }
+
+  // Process tags
+  while (remaining.length > 0) {
+    // Check for opening tag
+    const openMatch = remaining.match(/^<([a-zA-Z]+)(?:\s+color='([^']+)')?\s*>/)
+
+    if (openMatch) {
+      // Push any accumulated text
+      if (currentText) {
+        segments.push({ type: 'text', content: currentText })
+        currentText = ''
+      }
+
+      const tagName = openMatch[1]
+      const color = openMatch[2]
+      const fullTag = openMatch[0]
+
+      // Find closing tag
+      const closeTag = new RegExp(`</${tagName}>`, 'i')
+      const closeMatch = remaining.substring(fullTag.length).match(closeTag)
+
+      if (closeMatch && closeMatch.index !== undefined) {
+        const content = remaining.substring(fullTag.length, fullTag.length + closeMatch.index)
+        const segmentType = tagTypeMap[tagName] || 'text'
+
+        if (tagName === 'font' && color) {
+          segments.push({ type: 'color', content: stripHtmlTags(content), color })
+        } else if (tagName.startsWith('scale') && tagTypeMap[tagName]) {
+          const { scaling, text } = parseScalingTag(tagName, content)
+          segments.push({
+            type: segmentType,
+            content: stripHtmlTags(text),
+            scaling
+          })
+        } else if (tagName.endsWith('Damage') && tagTypeMap[tagName]) {
+          const { damage, text } = parseDamageTag(tagName, content)
+          segments.push({
+            type: segmentType,
+            content: stripHtmlTags(text),
+            damage
+          })
+        } else if (segmentType !== 'text') {
+          segments.push({ type: segmentType, content: stripHtmlTags(content) })
+        } else {
+          // Unknown tag, just add as text
+          currentText += stripHtmlTags(content)
+        }
+
+        remaining = remaining.substring(
+          fullTag.length + (closeMatch.index || 0) + closeMatch[0].length
+        )
+      } else {
+        // No closing tag found, skip the opening tag
+        remaining = remaining.substring(fullTag.length)
+      }
+    } else {
+      // Add character to current text
+      currentText += remaining[0]
+      remaining = remaining.substring(1)
+    }
+  }
+
+  // Push any remaining text
+  if (currentText) {
+    segments.push({ type: 'text', content: currentText })
+  }
+
+  return segments
+}
+
+/**
+ * Extract effects section from description (everything after stats)
+ */
+function extractEffectsSection(description: string): string {
+  // Remove stats section first
+  const withoutStats = description.replace(/<stats>.*?<\/stats>/s, '')
+  // Remove mainText wrapper
+  const effects = withoutStats
+    .replace(/<mainText>/gi, '')
+    .replace(/<\/mainText>/gi, '')
+    .replace(/<rules>.*?<\/rules>/gs, '') // Remove rules for now, handle separately
+    .replace(/<flavorText>.*?<\/flavorText>/gs, '') // Remove flavor for now, handle separately
+    .trim()
+
+  return effects
+}
+
+/**
+ * Parse effects from description HTML
+ */
+function parseEffects(description: string): ItemEffect[] {
+  const effects: ItemEffect[] = []
+
+  if (!description) return effects
+
+  // Extract the effects section (after stats)
+  const effectsSection = extractEffectsSection(description)
+
+  // Split by <br> tags to process line by line
+  const lines = effectsSection
+    .split(/<br\s*\/?>/gi)
+    .map(l => l.trim())
+    .filter(l => l)
+
+  let currentEffect: ItemEffect | null = null
+
+  for (const line of lines) {
+    if (!line) continue
+
+    // Check for passive tag
+    const passiveMatch = line.match(/<passive>([^<]*)<\/passive>/i)
+    if (passiveMatch) {
+      if (currentEffect) {
+        effects.push(currentEffect)
+      }
+      // Remove the passive tag from the line before parsing description
+      const lineWithoutTag = line.replace(/<passive>[^<]*<\/passive>/i, '').trim()
+      currentEffect = {
+        type: 'passive',
+        name: passiveMatch[1].trim(),
+        description: parseTextSegments(lineWithoutTag),
+        isUnique: false
+      }
+      continue
+    }
+
+    // Check for active tag
+    const activeMatch = line.match(/<active>([^<]*)<\/active>/i)
+    if (activeMatch) {
+      if (currentEffect) {
+        effects.push(currentEffect)
+      }
+      // Remove the active tag from the line before parsing description
+      const lineWithoutTag = line.replace(/<active>[^<]*<\/active>/i, '').trim()
+      currentEffect = {
+        type: 'active',
+        name: activeMatch[1].trim(),
+        description: parseTextSegments(lineWithoutTag),
+        isUnique: false
+      }
+      continue
+    }
+
+    // Check for unique tag
+    const uniqueMatch = line.match(/<unique>([^<]*)<\/unique>/i)
+    if (uniqueMatch) {
+      if (currentEffect) {
+        effects.push(currentEffect)
+      }
+      // Remove the unique tag from the line before parsing description
+      const lineWithoutTag = line.replace(/<unique>[^<]*<\/unique>/i, '').trim()
+      currentEffect = {
+        type: 'unique',
+        name: uniqueMatch[1].trim() || undefined,
+        description: parseTextSegments(lineWithoutTag),
+        isUnique: true
+      }
+      continue
+    }
+
+    // Check for rarity tags
+    const mythicMatch = line.match(/<rarityMythic>([^<]*)<\/rarityMythic>/i)
+    if (mythicMatch) {
+      if (currentEffect) {
+        effects.push(currentEffect)
+      }
+      // Remove the rarity tag from the line before parsing description
+      const lineWithoutTag = line.replace(/<rarityMythic>[^<]*<\/rarityMythic>/i, '').trim()
+      currentEffect = {
+        type: 'mythic',
+        name: mythicMatch[1].trim() || undefined,
+        description: parseTextSegments(lineWithoutTag),
+        isUnique: false
+      }
+      continue
+    }
+
+    const legendaryMatch = line.match(/<rarityLegendary>([^<]*)<\/rarityLegendary>/i)
+    if (legendaryMatch) {
+      if (currentEffect) {
+        effects.push(currentEffect)
+      }
+      // Remove the rarity tag from the line before parsing description
+      const lineWithoutTag = line.replace(/<rarityLegendary>[^<]*<\/rarityLegendary>/i, '').trim()
+      currentEffect = {
+        type: 'legendary',
+        name: legendaryMatch[1].trim() || undefined,
+        description: parseTextSegments(lineWithoutTag),
+        isUnique: false
+      }
+      continue
+    }
+
+    // If we have a current effect, append this line to its description
+    if (currentEffect) {
+      const lineSegments = parseTextSegments(line)
+      currentEffect.description.push(...lineSegments)
+    } else if (line.trim()) {
+      // Standalone effect without explicit tag - create as passive
+      const segments = parseTextSegments(line)
+      if (segments.length > 0 && segments.some(s => s.content.trim())) {
+        currentEffect = {
+          type: 'passive',
+          description: segments,
+          isUnique: false
+        }
+      }
+    }
+  }
+
+  // Don't forget the last effect
+  if (currentEffect) {
+    effects.push(currentEffect)
+  }
+
+  return effects
+}
+
+/**
+ * Parse rules section from description
+ */
+function parseRules(description: string): TextSegment[] | undefined {
+  const rulesMatch = description.match(/<rules>(.*?)<\/rules>/s)
+  if (!rulesMatch) return undefined
+
+  return parseTextSegments(rulesMatch[1])
+}
+
+/**
+ * Parse flavor text section from description
+ */
+function parseFlavorText(description: string): TextSegment[] | undefined {
+  const flavorMatch = description.match(/<flavorText>(.*?)<\/flavorText>/s)
+  if (!flavorMatch) return undefined
+
+  return parseTextSegments(flavorMatch[1])
+}
+
+/**
+ * Detect item rarity from description
+ */
+function detectRarity(description: string): 'mythic' | 'legendary' | 'epic' | undefined {
+  if (/<rarityMythic>/i.test(description)) return 'mythic'
+  if (/<rarityLegendary>/i.test(description)) return 'legendary'
+  if (/<rarityGeneric>/i.test(description)) return 'epic'
+  return undefined
+}
+
+/**
+ * Parse full item description into structured data
+ *
+ * @param description - The HTML description string from CDragon items.json
+ * @returns ParsedDescription object with stats, effects, rules, and flavor text
+ *
+ * @example
+ * ```ts
+ * const parsed = parseItemDescription(
+ *   '<mainText><stats><attention> 25</attention> Move Speed</stats><br><br><passive>Enhanced Movement:</passive> +25 Move Speed</mainText>'
+ * )
+ * // Returns: { stats: { moveSpeed: 25 }, effects: [...], ... }
+ * ```
+ */
+export function parseItemDescription(description: string): ParsedDescription {
+  return {
+    stats: parseItemStats(description),
+    effects: parseEffects(description),
+    rules: parseRules(description),
+    flavorText: parseFlavorText(description),
+    rarity: detectRarity(description)
+  }
+}
+
 /**
  * Item data structure from CDragon
  */
@@ -184,6 +696,13 @@ export interface ItemWithStats extends CDragonItem {
   stats: ItemStats
 }
 
+/**
+ * Item with fully parsed description
+ */
+export interface ItemWithParsedDescription extends CDragonItem {
+  parsedDescription: ParsedDescription
+}
+
 /**
  * Parse a CDragon item and add parsed stats
  */
@@ -200,3 +719,20 @@ export function parseItem(item: CDragonItem): ItemWithStats {
 export function parseItems(items: CDragonItem[]): ItemWithStats[] {
   return items.map(parseItem)
 }
+
+/**
+ * Parse a CDragon item with full description parsing
+ */
+export function parseItemFull(item: CDragonItem): ItemWithParsedDescription {
+  return {
+    ...item,
+    parsedDescription: parseItemDescription(item.description)
+  }
+}
+
+/**
+ * Parse an array of CDragon items with full description parsing
+ */
+export function parseItemsFull(items: CDragonItem[]): ItemWithParsedDescription[] {
+  return items.map(parseItemFull)
+}
diff --git a/dragon-item-parser/test/item.test.ts b/dragon-item-parser/test/item.test.ts
index 21def79..393ba58 100644
--- a/dragon-item-parser/test/item.test.ts
+++ b/dragon-item-parser/test/item.test.ts
@@ -1,5 +1,11 @@
 import { describe, it, expect } from 'vitest'
-import { parseItemStats, parseItem, parseItems } from '../src/item.js'
+import {
+  parseItemStats,
+  parseItem,
+  parseItems,
+  parseItemDescription,
+  parseItemFull
+} from '../src/item.js'
 
 describe('parseItemStats', () => {
   describe('basic stats', () => {
@@ -191,6 +197,189 @@ describe('parseItemStats', () => {
   })
 })
 
+describe('parseItemDescription', () => {
+  describe('stats parsing', () => {
+    it('should parse stats from description', () => {
+      const description =
+        '<mainText><stats><attention> 75</attention> Attack Damage<br><attention> 25%</attention> Critical Strike Chance</stats><br><br></mainText>'
+      const parsed = parseItemDescription(description)
+      expect(parsed.stats.attackDamage).toBe(75)
+      expect(parsed.stats.criticalStrikeChance).toBe(25)
+    })
+
+    it('should parse Infinity Edge stats', () => {
+      // Infinity Edge (id: 3031)
+      const description =
+        '<mainText><stats><attention> 75</attention> Attack Damage<br><attention> 25%</attention> Critical Strike Chance<br><attention> 30%</attention> Critical Strike Damage</stats><br><br></mainText>'
+      const parsed = parseItemDescription(description)
+      expect(parsed.stats.attackDamage).toBe(75)
+      expect(parsed.stats.criticalStrikeChance).toBe(25)
+      // Critical Strike Damage is not in our mappings, but should not crash
+    })
+  })
+
+  describe('effects parsing', () => {
+    it('should parse passive effect', () => {
+      // Rabadon's Deathcap (id: 3089)
+      const description =
+        '<mainText><stats><attention> 130</attention> Ability Power</stats><br><br><passive>Magical Opus</passive><br>Increases your total <scaleAP>Ability Power by 30%</scaleAP>.</mainText>'
+      const parsed = parseItemDescription(description)
+
+      expect(parsed.effects).toHaveLength(1)
+      expect(parsed.effects[0].type).toBe('passive')
+      expect(parsed.effects[0].name).toBe('Magical Opus')
+    })
+
+    it('should parse active effect', () => {
+      // Zhonya's Hourglass (id: 3157)
+      const description =
+        '<mainText><stats><attention> 105</attention> Ability Power<br><attention> 50</attention> Armor</stats><br><br><br> <br><active>Time Stop</active><br>Enter <keyword>Stasis</keyword> for 2.5 seconds.</mainText>'
+      const parsed = parseItemDescription(description)
+
+      expect(parsed.effects).toHaveLength(1)
+      expect(parsed.effects[0].type).toBe('active')
+      expect(parsed.effects[0].name).toBe('Time Stop')
+    })
+
+    it('should parse multiple passives', () => {
+      // Trinity Force (id: 3078)
+      const description =
+        '<mainText><stats><attention> 36</attention> Attack Damage<br><attention> 30%</attention> Attack Speed<br><attention> 333</attention> Health<br><attention> 15</attention> Ability Haste</stats><br><br><passive>Spellblade</passive><br>After using an Ability, your next Attack deals <physicalDamage>bonus physical damage</physicalDamage>  <OnHit>On-Hit</OnHit>.<br> <br><passive>Quicken</passive><br>Attacking grants <speed>20 Move Speed</speed> for 2 seconds.</mainText>'
+      const parsed = parseItemDescription(description)
+
+      expect(parsed.effects).toHaveLength(2)
+      expect(parsed.effects[0].type).toBe('passive')
+      expect(parsed.effects[0].name).toBe('Spellblade')
+      expect(parsed.effects[1].type).toBe('passive')
+      expect(parsed.effects[1].name).toBe('Quicken')
+    })
+
+    it('should parse passive with status tag', () => {
+      // Serylda's Grudge (id: 6694)
+      const description =
+        '<mainText><stats><attention> 45</attention> Attack Damage<br><attention> 35%</attention> Armor Penetration<br><attention> 15</attention> Ability Haste</stats><br><br><passive>Bitter Cold</passive><br>Damaging Abilities <status>Slow</status> enemies below 50% Health by 30% for 1 second.</mainText>'
+      const parsed = parseItemDescription(description)
+
+      expect(parsed.effects).toHaveLength(1)
+      expect(parsed.effects[0].type).toBe('passive')
+      expect(parsed.effects[0].name).toBe('Bitter Cold')
+    })
+
+    it('should handle item with no effects', () => {
+      // Infinity Edge has no passive/active tags
+      const description =
+        '<mainText><stats><attention> 75</attention> Attack Damage<br><attention> 25%</attention> Critical Strike Chance<br><attention> 30%</attention> Critical Strike Damage</stats><br><br></mainText>'
+      const parsed = parseItemDescription(description)
+
+      expect(parsed.effects).toHaveLength(0)
+    })
+  })
+
+  describe('text segments', () => {
+    it('should parse scaleAP tag', () => {
+      const description =
+        '<mainText><stats><attention> 130</attention> Ability Power</stats><br><br><passive>Magical Opus</passive><br>Increases your total <scaleAP>Ability Power by 30%</scaleAP>.</mainText>'
+      const parsed = parseItemDescription(description)
+
+      // Find the scaleAP segment
+      const effect = parsed.effects[0]
+      const scaleSegment = effect.description.find(s => s.type === 'scaleAP')
+      expect(scaleSegment).toBeDefined()
+      expect(scaleSegment?.content).toContain('Ability Power by 30%')
+    })
+
+    it('should parse physicalDamage tag', () => {
+      const description =
+        '<mainText><stats><attention> 36</attention> Attack Damage</stats><br><br><passive>Spellblade</passive><br>Deals <physicalDamage>bonus physical damage</physicalDamage>.</mainText>'
+      const parsed = parseItemDescription(description)
+
+      const effect = parsed.effects[0]
+      const damageSegment = effect.description.find(s => s.type === 'physicalDamage')
+      expect(damageSegment).toBeDefined()
+      expect(damageSegment?.content).toContain('bonus physical damage')
+    })
+
+    it('should parse keyword tag', () => {
+      const description =
+        '<mainText><stats><attention> 105</attention> Ability Power</stats><br><br><active>Time Stop</active><br>Enter <keyword>Stasis</keyword> for 2.5 seconds.</mainText>'
+      const parsed = parseItemDescription(description)
+
+      const effect = parsed.effects[0]
+      const keywordSegment = effect.description.find(s => s.type === 'keyword')
+      expect(keywordSegment).toBeDefined()
+      expect(keywordSegment?.content).toBe('Stasis')
+    })
+
+    it('should parse speed tag', () => {
+      const description =
+        '<mainText><stats><attention> 36</attention> Attack Damage</stats><br><br><passive>Quicken</passive><br>Grants <speed>20 Move Speed</speed>.</mainText>'
+      const parsed = parseItemDescription(description)
+
+      const effect = parsed.effects[0]
+      const speedSegment = effect.description.find(s => s.type === 'speed')
+      expect(speedSegment).toBeDefined()
+      expect(speedSegment?.content).toContain('20 Move Speed')
+    })
+
+    it('should parse status tag', () => {
+      const description =
+        '<mainText><stats><attention> 45</attention> Attack Damage</stats><br><br><passive>Bitter Cold</passive><br><status>Slow</status> enemies.</mainText>'
+      const parsed = parseItemDescription(description)
+
+      const effect = parsed.effects[0]
+      const statusSegment = effect.description.find(s => s.type === 'status')
+      expect(statusSegment).toBeDefined()
+      expect(statusSegment?.content).toBe('Slow')
+    })
+  })
+
+  describe('rarity detection', () => {
+    it('should detect mythic rarity', () => {
+      const description =
+        '<mainText><stats><attention> 65</attention> Attack Damage</stats><br><br><rarityMythic>Mythic</rarityMythic></mainText>'
+      const parsed = parseItemDescription(description)
+
+      expect(parsed.rarity).toBe('mythic')
+    })
+
+    it('should detect legendary rarity', () => {
+      const description =
+        '<mainText><stats><attention> 65</attention> Attack Damage</stats><br><br><rarityLegendary>Legendary</rarityLegendary></mainText>'
+      const parsed = parseItemDescription(description)
+
+      expect(parsed.rarity).toBe('legendary')
+    })
+
+    it('should detect epic rarity', () => {
+      const description =
+        '<mainText><stats><attention> 65</attention> Attack Damage</stats><br><br><rarityGeneric>Epic</rarityGeneric></mainText>'
+      const parsed = parseItemDescription(description)
+
+      expect(parsed.rarity).toBe('epic')
+    })
+  })
+
+  describe('rules and flavor text', () => {
+    it('should parse rules section', () => {
+      const description =
+        '<mainText><stats><attention> 25</attention> Move Speed</stats><br><br><rules>Ornn upgrade only</rules></mainText>'
+      const parsed = parseItemDescription(description)
+
+      expect(parsed.rules).toBeDefined()
+      expect(parsed.rules?.length).toBeGreaterThan(0)
+    })
+
+    it('should parse flavor text section', () => {
+      const description =
+        '<mainText><stats><attention> 25</attention> Move Speed</stats><br><br><flavorText>A ancient artifact</flavorText></mainText>'
+      const parsed = parseItemDescription(description)
+
+      expect(parsed.flavorText).toBeDefined()
+      expect(parsed.flavorText?.length).toBeGreaterThan(0)
+    })
+  })
+})
+
 describe('parseItem', () => {
   it('should parse item and add stats', () => {
     const item = {
@@ -233,3 +422,22 @@ describe('parseItems', () => {
     expect(results[1].stats.attackDamage).toBe(10)
   })
 })
+
+describe('parseItemFull', () => {
+  it('should parse item with full description', () => {
+    const item = {
+      id: 3089,
+      name: "Rabadon's Deathcap",
+      description:
+        '<mainText><stats><attention> 130</attention> Ability Power</stats><br><br><passive>Magical Opus</passive><br>Increases your total <scaleAP>Ability Power by 30%</scaleAP>.</mainText>',
+      iconPath: '/path/to/icon.png'
+    }
+
+    const result = parseItemFull(item)
+    expect(result.id).toBe(3089)
+    expect(result.name).toBe("Rabadon's Deathcap")
+    expect(result.parsedDescription.stats.abilityPower).toBe(130)
+    expect(result.parsedDescription.effects).toHaveLength(1)
+    expect(result.parsedDescription.effects[0].name).toBe('Magical Opus')
+  })
+})
diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
index 8049550..d1bc11c 100644
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -5,6 +5,40 @@
   --color-on-surface: #b7b8e1;
   --color-surface-darker: #1f1d1c;
   --color-gold: #ffd700;
+
+  /* Tooltip colors */
+  --tooltip-bg: #312e2c;
+  --tooltip-border: #4a4543;
+  --tooltip-header-border: rgba(183, 184, 225, 0.2);
+  --tooltip-text: #b7b8e1;
+  --tooltip-text-dim: #8a8b9e;
+  --tooltip-stat-value: #ffd700;
+  --tooltip-stat-label: #b7b8e1;
+
+  /* Effect type colors */
+  --tooltip-effect-passive: #4a9eff;
+  --tooltip-effect-active: #ff6b6b;
+  --tooltip-effect-unique: #f39c12;
+  --tooltip-effect-mythic: #ff5252;
+  --tooltip-effect-legendary: #ff9800;
+  --tooltip-effect-epic: #ffd54f;
+
+  /* Text segment colors */
+  --tooltip-highlight: #ffd700;
+  --tooltip-keyword: #ffd700;
+  --tooltip-keyword-major: #ff8c00;
+  --tooltip-keyword-stealth: #9b59b6;
+  --tooltip-status: #e74c3c;
+  --tooltip-speed: #5dade2;
+  --tooltip-scaling: #5dade2;
+  --tooltip-magic-damage: #9b59b6;
+  --tooltip-physical-damage: #e67e22;
+  --tooltip-true-damage: #ffffff;
+  --tooltip-healing: #2ecc71;
+  --tooltip-shield: #3498db;
+  --tooltip-onhit: #5dade2;
+  --tooltip-spellname: #1abc9c;
+  --tooltip-flavor: #6a9fff;
 }
 
 /* Font setting */
diff --git a/frontend/components/item/ItemTooltip.vue b/frontend/components/item/ItemTooltip.vue
index fecd89d..a0cdc02 100644
--- a/frontend/components/item/ItemTooltip.vue
+++ b/frontend/components/item/ItemTooltip.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
+import {
+  parseItemDescription,
+  type TextSegment,
+  type ItemEffect,
+  type ParsedDescription
+} from 'dragon-item-parser'
 
 interface Props {
   item: Item | null
@@ -42,78 +48,184 @@ function getTagClass(tag: ItemTag): string {
   return `tag-${tag}`
 }
 
-// Parse description and convert to styled HTML
-const formatDescription = (description?: string) => {
-  if (!description) return ''
+// Parse the item description once
+const parsedDescription = computed<ParsedDescription | null>(() => {
+  if (!props.item?.description) return null
+  return parseItemDescription(props.item.description)
+})
 
-  // Replace <br> and other structural tags
-  const html = description
-    .replace(/<br\s*\/?>/gi, '<br>')
-    .replace(/<br><br><br>/gi, '') // Remove triple breaks
-    .replace(/<br><br>/gi, '') // Remove double breaks
-    .replace(/<mainText>/gi, '')
-    .replace(/<\/mainText>/gi, '')
-    .replace(/<stats>/gi, '<div class="tooltip-stats">')
-    .replace(/<\/stats>/gi, '</div>')
-    .replace(/<passive>/gi, '<span class="tag-passive">')
-    .replace(/<\/passive>/gi, '</span>:')
-    .replace(/<active>/gi, '<span class="tag-active">')
-    .replace(/<\/active>/gi, '</span>')
-    .replace(/<keyword>/gi, '<span class="tag-keyword">')
-    .replace(/<\/keyword>/gi, '</span>')
-    .replace(/<attention>/gi, '<span class="stat-highlight">')
-    .replace(/<\/attention>/gi, '</span>')
-    .replace(/<keywordMajor>/gi, '<span class="tag-keyword-major">')
-    .replace(/<\/keywordMajor>/gi, '</span>')
-    .replace(/<keywordStealth>/gi, '<span class="tag-keyword-stealth">')
-    .replace(/<\/keywordStealth>/gi, '</span>')
-    .replace(/<status>/gi, '<span class="tag-status">')
-    .replace(/<\/status>/gi, '</span>')
-    .replace(/<speed>/gi, '<span class="tag-speed">')
-    .replace(/<\/speed>/gi, '</span>')
-    .replace(/<scaleMana>/gi, '<span class="tag-scale-mana">')
-    .replace(/<\/scaleMana>/gi, '</span>')
-    .replace(/<scaleHealth>/gi, '<span class="tag-scale-health">')
-    .replace(/<\/scaleHealth>/gi, '</span>')
-    .replace(/<scaleAP>/gi, '<span class="tag-scale-ap">')
-    .replace(/<\/scaleAP>/gi, '</span>')
-    .replace(/<scaleAD>/gi, '<span class="tag-scale-ad">')
-    .replace(/<\/scaleAD>/gi, '</span>')
-    .replace(/<scaleArmor>/gi, '<span class="tag-scale-armor">')
-    .replace(/<\/scaleArmor>/gi, '</span>')
-    .replace(/<scaleMR>/gi, '<span class="tag-scale-mr">')
-    .replace(/<\/scaleMR>/gi, '</span>')
-    .replace(/<scaleLevel>/gi, '<span class="tag-scale-level">')
-    .replace(/<\/scaleLevel>/gi, '</span>')
-    .replace(/<spellName>/gi, '<span class="tag-spellname">')
-    .replace(/<\/spellName>/gi, '</span>')
-    .replace(/<unique>/gi, '<span class="tag-unique">UNIQUE</span>')
-    .replace(/<\/unique>/gi, '')
-    .replace(/<rarityMythic>/gi, '<span class="tag-rarity-mythic">Mythic</span>')
-    .replace(/<\/rarityMythic>/gi, '')
-    .replace(/<rarityLegendary>/gi, '<span class="tag-rarity-legendary">Legendary</span>')
-    .replace(/<\/rarityLegendary>/gi, '')
-    .replace(/<rarityGeneric>/gi, '<span class="tag-rarity-generic">Epic</span>')
-    .replace(/<\/rarityGeneric>/gi, '')
-    .replace(/<rules>/gi, '<div class="tag-rules">')
-    .replace(/<\/rules>/gi, '</div>')
-    .replace(/<flavorText>/gi, '<div class="tag-flavor">')
-    .replace(/<\/flavorText>/gi, '</div>')
-    .replace(/<li>/gi, '<div class="tag-list">')
-    .replace(/<\/li>/gi, '</div>')
-    .replace(/<font color='([^']+)'>/gi, '<span style="color: $1">')
-    .replace(/<\/font>/gi, '</span>')
-    .replace(/<b>/gi, '<strong>')
-    .replace(/<\/b>/gi, '</strong>')
-    .replace(/\[@@[^@]*@@\]/g, ' ') // Remove stat placeholders
-    .trim()
+// Format stats for display
+const formattedStats = computed(() => {
+  const stats = parsedDescription.value?.stats
+  if (!stats) return []
 
-  return html
+  const statLabels: Record<string, string> = {
+    attackDamage: 'Attack Damage',
+    abilityPower: 'Ability Power',
+    attackSpeed: 'Attack Speed',
+    criticalStrikeChance: 'Critical Strike Chance',
+    criticalStrikeDamage: 'Critical Strike Damage',
+    lifeSteal: 'Life Steal',
+    omnivamp: 'Omnivamp',
+    physicalVamp: 'Physical Vamp',
+    spellVamp: 'Spell Vamp',
+    health: 'Health',
+    armor: 'Armor',
+    magicResist: 'Magic Resist',
+    mana: 'Mana',
+    baseManaRegen: 'Base Mana Regen',
+    baseHealthRegen: 'Base Health Regen',
+    moveSpeed: 'Move Speed',
+    abilityHaste: 'Ability Haste',
+    armorPenetration: 'Armor Penetration',
+    magicPenetration: 'Magic Penetration',
+    lethality: 'Lethality',
+    healAndShieldPower: 'Heal and Shield Power',
+    tenacity: 'Tenacity',
+    slowResist: 'Slow Resist'
+  }
+
+  const percentageStats = [
+    'attackSpeed',
+    'criticalStrikeChance',
+    'criticalStrikeDamage',
+    'lifeSteal',
+    'omnivamp',
+    'physicalVamp',
+    'spellVamp',
+    'baseManaRegen',
+    'baseHealthRegen',
+    'armorPenetration',
+    'magicPenetration',
+    'healAndShieldPower',
+    'tenacity',
+    'slowResist'
+  ]
+
+  return Object.entries(stats)
+    .filter(([_, value]) => value !== undefined)
+    .map(([key, value]) => ({
+      key,
+      label: statLabels[key] || key,
+      value: percentageStats.includes(key) ? `${value}%` : value
+    }))
+})
+
+// Get CSS class for text segment type
+function getSegmentClass(segment: TextSegment): string {
+  const classMap: Record<TextSegment['type'], string> = {
+    text: '',
+    highlight: 'stat-highlight',
+    passive: 'tag-passive',
+    active: 'tag-active',
+    keyword: 'tag-keyword',
+    keywordMajor: 'tag-keyword-major',
+    keywordStealth: 'tag-keyword-stealth',
+    status: 'tag-status',
+    speed: 'tag-speed',
+    scaleMana: 'tag-scaling',
+    scaleHealth: 'tag-scaling',
+    scaleAP: 'tag-scaling',
+    scaleAD: 'tag-scaling',
+    scaleArmor: 'tag-scaling',
+    scaleMR: 'tag-scaling',
+    scaleLevel: 'tag-scaling',
+    scaleBonusHealth: 'tag-scaling',
+    scaleBonusMana: 'tag-scaling',
+    scaleMaxHealth: 'tag-scaling',
+    spellName: 'tag-spellname',
+    unique: 'tag-unique',
+    rarityMythic: 'tag-rarity-mythic',
+    rarityLegendary: 'tag-rarity-legendary',
+    rarityGeneric: 'tag-rarity-generic',
+    magicDamage: 'tag-magic-damage',
+    physicalDamage: 'tag-physical-damage',
+    trueDamage: 'tag-true-damage',
+    healing: 'tag-healing',
+    shield: 'tag-shield',
+    attention: 'stat-highlight',
+    onHit: 'tag-onhit',
+    color: ''
+  }
+  return classMap[segment.type] || ''
 }
 
-const formattedDescription = computed(() =>
-  props.item ? formatDescription(props.item.description) : ''
-)
+// Get effect type label
+function getEffectTypeLabel(type: ItemEffect['type']): string {
+  const labels: Record<ItemEffect['type'], string> = {
+    passive: 'Passive',
+    active: 'Active',
+    unique: 'Unique',
+    mythic: 'Mythic',
+    legendary: 'Legendary',
+    epic: 'Epic'
+  }
+  return labels[type] || ''
+}
+
+// Get effect type class
+function getEffectTypeClass(type: ItemEffect['type']): string {
+  const classMap: Record<ItemEffect['type'], string> = {
+    passive: 'effect-passive',
+    active: 'effect-active',
+    unique: 'effect-unique',
+    mythic: 'effect-mythic',
+    legendary: 'effect-legendary',
+    epic: 'effect-epic'
+  }
+  return classMap[type] || ''
+}
+
+// Render text segments to HTML
+function renderSegments(segments: TextSegment[]): string {
+  return segments
+    .map(segment => {
+      const cssClass = getSegmentClass(segment)
+
+      if (segment.type === 'color' && segment.color) {
+        return `<span style="color: ${segment.color}">${segment.content}</span>`
+      }
+
+      if (cssClass) {
+        return `<span class="${cssClass}">${segment.content}</span>`
+      }
+
+      return segment.content
+    })
+    .join('')
+}
+
+// Render effect description
+function renderEffect(effect: ItemEffect): string {
+  return renderSegments(effect.description)
+}
+
+// Render rules
+function renderRules(segments: TextSegment[] | undefined): string {
+  if (!segments) return ''
+  return renderSegments(segments)
+}
+
+// Render flavor text
+function renderFlavorText(segments: TextSegment[] | undefined): string {
+  if (!segments) return ''
+  return renderSegments(segments)
+}
+
+// Check if we should show the effects section
+const hasEffects = computed(() => {
+  return parsedDescription.value?.effects?.length
+})
+
+// Check if we should show rules
+const hasRules = computed(() => {
+  return parsedDescription.value?.rules?.length
+})
+
+// Check if we should show flavor text
+const hasFlavorText = computed(() => {
+  return parsedDescription.value?.flavorText?.length
+})
 </script>
 
 <template>
@@ -128,37 +240,72 @@ const formattedDescription = computed(() =>
         }"
         @mouseenter.stop
       >
+        <!-- Header -->
         <div class="tooltip-header">
           <NuxtImg class="tooltip-icon" :src="CDRAGON_BASE + mapPath(item.iconPath)" />
           <div class="tooltip-title">
             <h3>{{ item.name || 'Unknown Item' }}</h3>
-            <span v-if="item.priceTotal" class="tooltip-gold"> {{ item.priceTotal }} Gold </span>
+            <span v-if="item.priceTotal" class="tooltip-gold">{{ item.priceTotal }} Gold</span>
           </div>
         </div>
 
+        <!-- Plaintext (brief description) -->
         <div v-if="item.plaintext" class="tooltip-plaintext">
           {{ item.plaintext }}
         </div>
 
         <!-- Item Tags -->
-        <div v-if="tags && tags.length > 0" class="tooltip-tags">
-          <span
-            v-for="tag in tags"
-            :key="tag"
-            :class="['item-tag', getTagClass(tag)]"
-            :title="getTagTooltip(tag)"
-          >
-            {{ getTagLabel(tag) }}
-          </span>
+        <div v-if="tags && tags.length > 0" class="tooltip-tags-section">
+          <div class="tooltip-tags">
+            <span
+              v-for="tag in tags"
+              :key="tag"
+              :class="['item-tag', getTagClass(tag)]"
+              :title="getTagTooltip(tag)"
+            >
+              {{ getTagLabel(tag) }}
+            </span>
+          </div>
         </div>
 
-        <!-- eslint-disable vue/no-v-html -->
-        <div
-          v-if="formattedDescription"
-          class="tooltip-description"
-          v-html="formattedDescription"
-        ></div>
-        <!-- eslint-enable vue/no-v-html -->
+        <!-- Stats Section -->
+        <div v-if="formattedStats.length > 0" class="tooltip-stats">
+          <div v-for="stat in formattedStats" :key="stat.key" class="stat-row">
+            <span class="stat-value">{{ stat.value }}</span>
+            <span class="stat-label">{{ stat.label }}</span>
+          </div>
+        </div>
+
+        <!-- Effects Section -->
+        <div v-if="hasEffects" class="tooltip-effects">
+          <div
+            v-for="(effect, index) in parsedDescription?.effects"
+            :key="index"
+            :class="['effect-item', getEffectTypeClass(effect.type)]"
+          >
+            <div class="effect-header">
+              <span class="effect-type">{{ getEffectTypeLabel(effect.type) }}</span>
+              <span v-if="effect.name" class="effect-name">{{ effect.name }}</span>
+            </div>
+            <!-- eslint-disable vue/no-v-html -->
+            <div class="effect-description" v-html="renderEffect(effect)"></div>
+            <!-- eslint-enable vue/no-v-html -->
+          </div>
+        </div>
+
+        <!-- Rules Section -->
+        <div v-if="hasRules" class="tooltip-rules">
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-html="renderRules(parsedDescription?.rules)"></div>
+          <!-- eslint-enable vue/no-v-html -->
+        </div>
+
+        <!-- Flavor Text -->
+        <div v-if="hasFlavorText" class="tooltip-flavor">
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-html="renderFlavorText(parsedDescription?.flavorText)"></div>
+          <!-- eslint-enable vue/no-v-html -->
+        </div>
       </div>
     </Transition>
   </Teleport>
@@ -168,18 +315,23 @@ const formattedDescription = computed(() =>
 .item-tooltip {
   position: fixed;
   z-index: 1000;
-  background: var(--color-surface);
-  border: 1px solid var(--color-on-surface);
+  background: var(--tooltip-bg);
+  border: 1px solid var(--tooltip-border);
   border-radius: 8px;
   padding: 12px;
-  max-width: 300px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  max-width: 320px;
+  min-width: 250px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
   pointer-events: none;
+  font-family: 'Inter', sans-serif;
 }
 
+/* Header */
 .tooltip-header {
   display: flex;
   gap: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--tooltip-header-border);
   margin-bottom: 10px;
 }
 
@@ -187,212 +339,56 @@ const formattedDescription = computed(() =>
   width: 48px;
   height: 48px;
   border-radius: 4px;
-  border: 1px solid var(--color-on-surface);
+  border: 2px solid var(--tooltip-border);
   flex-shrink: 0;
+  background: rgba(0, 0, 0, 0.3);
 }
 
 .tooltip-title {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  gap: 4px;
 }
 
 .tooltip-title h3 {
   margin: 0;
   font-size: 1rem;
   font-weight: 600;
-  color: var(--color-on-surface);
+  color: var(--tooltip-text);
   line-height: 1.2;
 }
 
 .tooltip-gold {
   font-size: 0.85rem;
   color: var(--color-gold);
-  margin-top: 4px;
+  font-weight: 500;
 }
 
+/* Plaintext */
 .tooltip-plaintext {
-  font-size: 0.85rem;
-  color: var(--color-on-surface);
-  opacity: 0.8;
+  font-size: 0.8rem;
+  color: var(--tooltip-text-dim);
   margin-bottom: 8px;
   font-style: italic;
+  line-height: 1.4;
 }
 
-.tooltip-description {
-  font-size: 0.85rem;
-  color: var(--color-on-surface);
-  line-height: 1.5;
-  white-space: pre-wrap;
+/* Item Tags Section */
+.tooltip-tags-section {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--tooltip-header-border);
 }
 
-/* Stats section */
-.tooltip-stats {
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--color-on-surface-dim);
-}
-
-.tooltip-stats :deep(.stat-highlight) {
-  color: #ffcc00;
-  font-weight: 600;
-}
-
-/* Tag styles */
-.tooltip-description :deep(.tag-passive) {
-  color: #4a9eff;
-  font-weight: 600;
-}
-
-.tooltip-description :deep(.tag-active) {
-  color: #ff6b6b;
-  font-weight: 600;
-}
-
-.tooltip-description :deep(.tag-keyword) {
-  color: #ffd700;
-  font-weight: 600;
-}
-
-.tooltip-description :deep(.tag-keyword-major) {
-  color: #ff8c00;
-  font-weight: 700;
-  font-style: italic;
-}
-
-.tooltip-description :deep(.tag-keyword-stealth) {
-  color: #9b59b6;
-  font-weight: 600;
-}
-
-.tooltip-description :deep(.tag-status) {
-  color: #e74c3c;
-  font-weight: 500;
-  font-style: italic;
-}
-
-.tooltip-description :deep(.tag-speed),
-.tooltip-description :deep(.tag-scale-mana),
-.tooltip-description :deep(.tag-scale-health),
-.tooltip-description :deep(.tag-scale-ap),
-.tooltip-description :deep(.tag-scale-ad),
-.tooltip-description :deep(.tag-scale-armor),
-.tooltip-description :deep(.tag-scale-mr),
-.tooltip-description :deep(.tag-scale-level) {
-  color: #3498db;
-  font-style: italic;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-healing),
-.tooltip-description :deep(.tag-health) {
-  color: #2ecc71;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-shield) {
-  color: #3498db;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-magic-damage) {
-  color: #9b59b6;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-physical-damage) {
-  color: #e67e22;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-true-damage) {
-  color: #c0392b;
-  font-weight: 600;
-}
-
-.tooltip-description :deep(.tag-onhit) {
-  background: rgba(52, 152, 219, 0.1);
-  color: #3498db;
-  padding: 1px 4px;
-  border-radius: 3px;
-  font-size: 0.8rem;
-  font-weight: 500;
-}
-
-.tooltip-description :deep(.tag-spellname) {
-  color: #1abc9c;
-  font-weight: 600;
-  font-style: italic;
-}
-
-.tooltip-description :deep(.tag-unique) {
-  color: #f39c12;
-  font-weight: 700;
-  font-size: 0.75rem;
-  letter-spacing: 0.5px;
-}
-
-.tooltip-description :deep(.tag-rarity-mythic) {
-  color: #ff5252;
-  font-weight: 700;
-  font-size: 0.85rem;
-}
-
-.tooltip-description :deep(.tag-rarity-legendary) {
-  color: #ff9800;
-  font-weight: 600;
-  font-size: 0.85rem;
-}
-
-.tooltip-description :deep(.tag-rarity-generic) {
-  color: #ffd54f;
-  font-weight: 500;
-  font-size: 0.85rem;
-}
-
-.tooltip-description :deep(.tag-rules) {
-  margin-top: 8px;
-  padding: 6px;
-  background: rgba(0, 0, 0, 0.1);
-  border-left: 2px solid var(--color-on-surface-dim);
-  font-size: 0.8rem;
-  font-style: italic;
-  opacity: 0.8;
-}
-
-.tooltip-description :deep(.tag-flavor) {
-  margin-top: 10px;
-  padding: 6px;
-  background: rgba(74, 222, 255, 0.1);
-  border-left: 2px solid #4a9eff;
-  font-size: 0.8rem;
-  font-style: italic;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.tooltip-description :deep(.tag-list) {
-  margin: 4px 0;
-  padding-left: 12px;
-  position: relative;
-}
-
-.tooltip-description strong {
-  font-weight: 600;
-  color: var(--color-on-surface);
-}
-
-/* Item tags in tooltip */
 .tooltip-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--color-on-surface-dim);
 }
 
 .tooltip-tags .item-tag {
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   padding: 2px 6px;
   border-radius: 3px;
   font-weight: 600;
@@ -401,7 +397,6 @@ const formattedDescription = computed(() =>
   white-space: nowrap;
 }
 
-/* Gold situation tags */
 .tooltip-tags .tag-ahead {
   background-color: #22c55e;
   color: white;
@@ -412,7 +407,6 @@ const formattedDescription = computed(() =>
   color: white;
 }
 
-/* Region tags */
 .tooltip-tags .tag-region_euw {
   background-color: #3b82f6;
   color: white;
@@ -433,6 +427,257 @@ const formattedDescription = computed(() =>
   color: white;
 }
 
+/* Stats Section */
+.tooltip-stats {
+  margin-bottom: 10px;
+}
+
+.stat-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 3px;
+}
+
+.stat-value {
+  color: var(--tooltip-stat-value);
+  font-weight: 600;
+  font-size: 0.85rem;
+  min-width: 45px;
+  text-align: right;
+}
+
+.stat-label {
+  color: var(--tooltip-stat-label);
+  font-size: 0.85rem;
+}
+
+/* Effects Section */
+.tooltip-effects {
+  padding-top: 8px;
+  border-top: 1px solid var(--tooltip-header-border);
+}
+
+.effect-item {
+  margin-bottom: 8px;
+  padding-left: 10px;
+  border-left: 3px solid var(--tooltip-border);
+}
+
+.effect-item:last-child {
+  margin-bottom: 0;
+}
+
+.effect-item.effect-passive {
+  border-left-color: var(--tooltip-effect-passive);
+}
+
+.effect-item.effect-active {
+  border-left-color: var(--tooltip-effect-active);
+}
+
+.effect-item.effect-unique {
+  border-left-color: var(--tooltip-effect-unique);
+}
+
+.effect-item.effect-mythic {
+  border-left-color: var(--tooltip-effect-mythic);
+}
+
+.effect-item.effect-legendary {
+  border-left-color: var(--tooltip-effect-legendary);
+}
+
+.effect-item.effect-epic {
+  border-left-color: var(--tooltip-effect-epic);
+}
+
+.effect-header {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 3px;
+}
+
+.effect-type {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 1px 5px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.effect-passive .effect-type {
+  color: var(--tooltip-effect-passive);
+}
+
+.effect-active .effect-type {
+  color: var(--tooltip-effect-active);
+}
+
+.effect-unique .effect-type {
+  color: var(--tooltip-effect-unique);
+}
+
+.effect-mythic .effect-type {
+  color: var(--tooltip-effect-mythic);
+}
+
+.effect-legendary .effect-type {
+  color: var(--tooltip-effect-legendary);
+}
+
+.effect-epic .effect-type {
+  color: var(--tooltip-effect-epic);
+}
+
+.effect-name {
+  font-weight: 600;
+  color: var(--tooltip-text);
+  font-size: 0.85rem;
+}
+
+.effect-description {
+  font-size: 0.8rem;
+  color: var(--tooltip-text-dim);
+  line-height: 1.5;
+}
+
+/* Rules Section */
+.tooltip-rules {
+  margin-top: 8px;
+  padding: 6px 8px;
+  background: rgba(0, 0, 0, 0.2);
+  border-left: 2px solid var(--tooltip-border);
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--tooltip-text-dim);
+}
+
+/* Flavor Text */
+.tooltip-flavor {
+  margin-top: 8px;
+  padding: 6px 8px;
+  background: rgba(74, 222, 255, 0.05);
+  border-left: 2px solid var(--tooltip-flavor);
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--tooltip-flavor);
+}
+
+/* Text segment styles inside effects */
+.effect-description :deep(.stat-highlight) {
+  color: var(--tooltip-highlight);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-passive) {
+  color: var(--tooltip-effect-passive);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-active) {
+  color: var(--tooltip-effect-active);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-keyword) {
+  color: var(--tooltip-keyword);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-keyword-major) {
+  color: var(--tooltip-keyword-major);
+  font-weight: 700;
+  font-style: italic;
+}
+
+.effect-description :deep(.tag-keyword-stealth) {
+  color: var(--tooltip-keyword-stealth);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-status) {
+  color: var(--tooltip-status);
+  font-weight: 500;
+  font-style: italic;
+}
+
+.effect-description :deep(.tag-speed),
+.effect-description :deep(.tag-scaling) {
+  color: var(--tooltip-scaling);
+  font-style: italic;
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-healing) {
+  color: var(--tooltip-healing);
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-shield) {
+  color: var(--tooltip-shield);
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-magic-damage) {
+  color: var(--tooltip-magic-damage);
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-physical-damage) {
+  color: var(--tooltip-physical-damage);
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-true-damage) {
+  color: var(--tooltip-true-damage);
+  font-weight: 600;
+}
+
+.effect-description :deep(.tag-onhit) {
+  background: rgba(52, 152, 219, 0.2);
+  color: var(--tooltip-onhit);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.effect-description :deep(.tag-spellname) {
+  color: var(--tooltip-spellname);
+  font-weight: 600;
+  font-style: italic;
+}
+
+.effect-description :deep(.tag-unique) {
+  color: var(--tooltip-effect-unique);
+  font-weight: 700;
+  font-size: 0.75rem;
+  letter-spacing: 0.5px;
+}
+
+.effect-description :deep(.tag-rarity-mythic) {
+  color: var(--tooltip-effect-mythic);
+  font-weight: 700;
+  font-size: 0.85rem;
+}
+
+.effect-description :deep(.tag-rarity-legendary) {
+  color: var(--tooltip-effect-legendary);
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.effect-description :deep(.tag-rarity-generic) {
+  color: var(--tooltip-effect-epic);
+  font-weight: 500;
+  font-size: 0.85rem;
+}
+
+/* Transition */
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.15s ease;
diff --git a/frontend/utils/buildHelpers.ts b/frontend/utils/buildHelpers.ts
index e4c96e5..56cfce1 100644
--- a/frontend/utils/buildHelpers.ts
+++ b/frontend/utils/buildHelpers.ts
@@ -54,7 +54,8 @@ function trimTreeDepth(tree: ItemTree, maxDepth: number, currentDepth: number =
   const trimmedTree: ItemTree = {
     count: tree.count,
     data: tree.data,
-    children: []
+    children: [],
+    tags: tree.tags
   }
 
   // If we haven't reached maxDepth, include children