ccusage-ui - npm Package Compare versions

Comparing version 0.1.17 to 0.1.18

CLAUDE.md

+# CLAUDE.md
+
+Context information for Claude when working on this project.
+
+## Project Overview
+
+A UI project for visualizing Claude Code usage with a LoL-style tier system.
+
+## Tier Card System
+
+### Card Generation Script
+
+```bash
+# Generate all tier card HTML files
+node scripts/generate-cards.js
+```
+
+Modify the `TIERS` array in [scripts/generate-cards.js](scripts/generate-cards.js) to regenerate all cards at once.
+
+### Icon Extraction Script
+
+```bash
+# Extract individual icons from tier icon image (with transparent background)
+node scripts/extract-tier-icons.js
+```
+
+- Input: Source image in `public/share/images/` folder (5x2 grid)
+- Output: Individual PNG files in `public/share/icons/`
+- Magenta (#FF00FF) background is removed (chroma key)
+- Erosion algorithm removes masking artifacts
+
+### Tier Order (Highest to Lowest)
+
+1. **Challenger** - Top 0.001%, 1.5B+ tokens/month
+2. **Grandmaster** - Top 0.01%, 1B+ tokens/month
+3. **Master** - Top 0.1%, 500M+ tokens/month
+4. **Diamond** - Top 1%, 300M+ tokens/month
+5. **Emerald** - Top 5%, 100M+ tokens/month
+6. **Platinum** - Top 10%, 50M+ tokens/month
+7. **Gold** - Top 20%, 30M+ tokens/month
+8. **Silver** - Top 40%, 10M+ tokens/month
+9. **Bronze** - Top 60%, 5M+ tokens/month
+10. **Iron** - Starter, <5M tokens/month
+
+### Card Structure
+
+- Size: 1200x630px (OG image standard)
+- Right side: 280px big-icon with glow effect
+- Left side: Tier name, description, token usage, ranking
+
+### How to Replace Icons
+
+Single 5x2 grid image with mixed chroma key backgrounds:
+- **Green (#00FF00)**: Challenger, Grandmaster, Master, Gold, Silver, Bronze, Iron
+- **Magenta (#FF00FF)**: Diamond, Emerald, Platinum (cyan/green-colored icons)
+
+#### Gemini Prompt
+
+```
+Create a 5x2 grid of League of Legends style tier icons.
+Image aspect ratio: 5:2 (e.g., 2500x1000px or similar)
+Each cell should be square and contain one icon, clearly separated with no effects bleeding between cells.
+
+IMPORTANT - Background colors per cell (for chroma key extraction):
+- Green (#00FF00): Challenger, Grandmaster, Master, Gold, Silver, Bronze, Iron
+- Magenta (#FF00FF): Diamond, Emerald, Platinum (these have cyan/green colors, so use magenta background)
+
+CRITICAL - DO NOT use these colors in the icons themselves:
+- Icons with green background: DO NOT use pure green (#00FF00) or similar bright greens in the icon
+- Icons with magenta background: DO NOT use pure magenta (#FF00FF) or similar magentas in the icon
+- These colors are reserved for background removal (chroma key)
+
+Grid layout (left to right):
+- Row 1: Challenger(green bg), Grandmaster(green bg), Master(green bg), Diamond(magenta bg), Emerald(magenta bg)
+- Row 2: Platinum(magenta bg), Gold(green bg), Silver(green bg), Bronze(green bg), Iron(green bg)
+
+Icon descriptions (G=green bg, M=magenta bg):
+1. Challenger (G) - Golden winged crown emblem with red gems, most ornate
+2. Grandmaster (G) - Red/orange flaming emblem with golden wings
+3. Master (G) - Crimson red shield emblem with flame accents
+4. Diamond (M) - Cyan/light blue crystalline shield emblem
+5. Emerald (M) - Green gemstone shield emblem with facets
+6. Platinum (M) - Silver-white metallic shield emblem with teal accents
+7. Gold (G) - Golden shield emblem with warm yellow glow
+8. Silver (G) - Silver metallic shield emblem with cool gray tones
+9. Bronze (G) - Bronze/copper shield emblem with warm brown tones
+10. Iron (G) - Dark gray iron shield emblem, simplest design
+
+Icon style: metallic shields with gemstones, fantasy game aesthetic, detailed 3D rendering.
+All icons should be shield/emblem shaped for visual consistency (like League of Legends rank badges).
+```
+
+#### Steps
+
+1. Generate image using the prompt above
+2. Save to `public/share/images/`
+3. Update `inputPath` in `scripts/extract-tier-icons.js`
+4. Run `node scripts/extract-tier-icons.js`
+5. Run `node scripts/generate-cards.js` to regenerate cards
+6. Run `node scripts/capture-card.js` to generate card images
+
+## File Structure
+
+```
+public/share/
+├── icons/           # Extracted tier icons (PNG, transparent background)
+├── images/          # Source icon images
+└── card-*.html      # OG card HTML for each tier
+
+scripts/
+├── extract-tier-icons.js  # Icon extraction script
+└── generate-cards.js      # Card generation script
+```

scripts/capture-card.js

+const puppeteer = require('puppeteer');
+const path = require('path');
+
+const TIERS = [
+    'challenger', 'grandmaster', 'master', 'diamond', 'emerald',
+    'platinum', 'gold', 'silver', 'bronze', 'iron'
+];
+
+(async () => {
+    const browser = await puppeteer.launch();
+    const page = await browser.newPage();
+    await page.setViewport({ width: 1200, height: 630 });
+
+    for (const tier of TIERS) {
+        const filePath = path.resolve(__dirname, `../public/share/card-${tier}.html`);
+        const outputPath = path.resolve(__dirname, `../public/share/images/card-${tier}.png`);
+
+        await page.goto('file://' + filePath);
+        await page.screenshot({ path: outputPath });
+        console.log(`✓ card-${tier}.png`);
+    }
+
+    await browser.close();
+    console.log('\n✅ Done!');
+})();

scripts/extract-tier-icons.js

+const sharp = require('sharp');
+const path = require('path');
+const fs = require('fs');
+
+// Grid layout: 5x2
+// Row 1: Challenger, Grandmaster, Master, Diamond, Emerald
+// Row 2: Platinum, Gold, Silver, Bronze, Iron
+const TIERS = [
+    { name: 'challenger', row: 0, col: 0, chromaKey: 'green' },
+    { name: 'grandmaster', row: 0, col: 1, chromaKey: 'green' },
+    { name: 'master', row: 0, col: 2, chromaKey: 'green' },
+    { name: 'diamond', row: 0, col: 3, chromaKey: 'magenta' },
+    { name: 'emerald', row: 0, col: 4, chromaKey: 'magenta' },
+    { name: 'platinum', row: 1, col: 0, chromaKey: 'magenta' },
+    { name: 'gold', row: 1, col: 1, chromaKey: 'green' },
+    { name: 'silver', row: 1, col: 2, chromaKey: 'green' },
+    { name: 'bronze', row: 1, col: 3, chromaKey: 'green' },
+    { name: 'iron', row: 1, col: 4, chromaKey: 'green' },
+];
+
+// Chroma key detection functions
+function isGreen(r, g, b) {
+    // Convert RGB to HSL
+    const rNorm = r / 255;
+    const gNorm = g / 255;
+    const bNorm = b / 255;
+    const max = Math.max(rNorm, gNorm, bNorm);
+    const min = Math.min(rNorm, gNorm, bNorm);
+    const l = (max + min) / 2;
+
+    let h = 0, s = 0;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        if (max === rNorm) {
+            h = ((gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0)) / 6;
+        } else if (max === gNorm) {
+            h = ((bNorm - rNorm) / d + 2) / 6;
+        } else {
+            h = ((rNorm - gNorm) / d + 4) / 6;
+        }
+    }
+
+    const hDeg = h * 360;
+
+    // Green hue ~120°, high saturation
+    const isHslGreen = (hDeg > 80 && hDeg < 160) && s > 0.4 && l > 0.2 && l < 0.8;
+    // RGB-based green detection
+    const isRgbGreen = g > 150 && r < 150 && b < 150;
+
+    return isHslGreen || isRgbGreen;
+}
+
+function isMagenta(r, g, b) {
+    // Convert RGB to HSL
+    const rNorm = r / 255;
+    const gNorm = g / 255;
+    const bNorm = b / 255;
+    const max = Math.max(rNorm, gNorm, bNorm);
+    const min = Math.min(rNorm, gNorm, bNorm);
+    const l = (max + min) / 2;
+
+    let h = 0, s = 0;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        if (max === rNorm) {
+            h = ((gNorm - bNorm) / d + (gNorm < bNorm ? 6 : 0)) / 6;
+        } else if (max === gNorm) {
+            h = ((bNorm - rNorm) / d + 2) / 6;
+        } else {
+            h = ((rNorm - gNorm) / d + 4) / 6;
+        }
+    }
+
+    const hDeg = h * 360;
+
+    // Magenta hue ~300°, high saturation
+    const isHslMagenta = (hDeg > 280 && hDeg < 320) && s > 0.5 && l > 0.3 && l < 0.7;
+    // RGB-based magenta detection
+    const isRgbMagenta = r > 180 && g < 100 && b > 180;
+
+    return isHslMagenta || isRgbMagenta;
+}
+
+async function extractIcons() {
+    const inputPath = path.join(__dirname, '../public/share/images/Gemini_Generated_Image_fj59jyfj59jyfj59.jpeg');
+    const iconsDir = path.join(__dirname, '../public/share/icons');
+
+    if (!fs.existsSync(iconsDir)) {
+        fs.mkdirSync(iconsDir, { recursive: true });
+    }
+
+    const metadata = await sharp(inputPath).metadata();
+    console.log('Image size:', metadata.width, 'x', metadata.height);
+
+    const cellWidth = Math.floor(metadata.width / 5);
+    const cellHeight = Math.floor(metadata.height / 2);
+    console.log('Cell size:', cellWidth, 'x', cellHeight);
+
+    for (const tier of TIERS) {
+        const left = tier.col * cellWidth;
+        const top = tier.row * cellHeight;
+        const outputPath = path.join(iconsDir, `${tier.name}.png`);
+
+        const { data, info } = await sharp(inputPath)
+            .extract({ left, top, width: cellWidth, height: cellHeight })
+            .ensureAlpha()
+            .raw()
+            .toBuffer({ resolveWithObject: true });
+
+        // Force transparent border (10 pixels from edges)
+        const BORDER = 10;
+        for (let y = 0; y < info.height; y++) {
+            for (let x = 0; x < info.width; x++) {
+                if (x < BORDER || x >= info.width - BORDER || y < BORDER || y >= info.height - BORDER) {
+                    const idx = (y * info.width + x) * 4;
+                    data[idx + 3] = 0;
+                }
+            }
+        }
+
+        // Chroma key removal based on tier's background color
+        const chromaKeyFn = tier.chromaKey === 'magenta' ? isMagenta : isGreen;
+        console.log(`Processing ${tier.name} with ${tier.chromaKey} chroma key...`);
+
+        for (let i = 0; i < data.length; i += 4) {
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+
+            if (chromaKeyFn(r, g, b)) {
+                data[i + 3] = 0;
+            }
+        }
+
+        // Erosion: make pixels transparent if they're near transparent pixels
+        const width = info.width;
+        const height = info.height;
+        const EROSION_PASSES = 3;
+
+        for (let pass = 0; pass < EROSION_PASSES; pass++) {
+            const alphaBuffer = Buffer.from(data);
+
+            for (let y = 0; y < height; y++) {
+                for (let x = 0; x < width; x++) {
+                    const idx = (y * width + x) * 4;
+
+                    let hasTransparentNeighbor = false;
+                    for (let dy = -1; dy <= 1; dy++) {
+                        for (let dx = -1; dx <= 1; dx++) {
+                            if (dx === 0 && dy === 0) continue;
+                            const nx = x + dx;
+                            const ny = y + dy;
+                            if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
+                                const nIdx = (ny * width + nx) * 4;
+                                if (alphaBuffer[nIdx + 3] === 0) {
+                                    hasTransparentNeighbor = true;
+                                    break;
+                                }
+                            }
+                        }
+                        if (hasTransparentNeighbor) break;
+                    }
+
+                    if (hasTransparentNeighbor) {
+                        data[idx + 3] = 0;
+                    }
+                }
+            }
+        }
+
+        await sharp(data, {
+            raw: { width: info.width, height: info.height, channels: 4 }
+        })
+        .png()
+        .toFile(outputPath);
+
+        console.log(`✓ ${tier.name}.png`);
+    }
+
+    console.log('\n✅ Done!');
+}
+
+extractIcons().catch(console.error);

scripts/generate-cards.js

+const fs = require('fs');
+const path = require('path');
+
+const TIERS = [
+    {
+        name: 'challenger',
+        title: 'CHALLENGER',
+        subtitle: 'World #1 Level AI User',
+        tokens: '1.5B+',
+        ranking: 'Top 0.001%',
+        rankingLabel: 'Global Ranking',
+        color: { r: 155, g: 89, b: 182 },
+        glowColor: { r: 255, g: 215, b: 0 },
+        bgGradient: ['#1a1a2e', '#16213e', '#0f3460'],
+        titleGradient: ['#9b59b6', '#e056fd', '#f8b500'],
+    },
+    {
+        name: 'grandmaster',
+        title: 'GRANDMASTER',
+        subtitle: 'Top 0.01% AI User',
+        tokens: '1B+',
+        ranking: 'Top 0.01%',
+        rankingLabel: 'Global Ranking',
+        color: { r: 255, g: 152, b: 0 },
+        glowColor: { r: 255, g: 152, b: 0 },
+        bgGradient: ['#1a1a2e', '#2d1b00', '#4a2c00'],
+        titleGradient: ['#ff9800', '#ffb74d', '#fff176'],
+    },
+    {
+        name: 'master',
+        title: 'MASTER',
+        subtitle: 'Top 0.1% AI User',
+        tokens: '500M+',
+        ranking: 'Top 0.1%',
+        rankingLabel: 'Global Ranking',
+        color: { r: 231, g: 76, b: 60 },
+        glowColor: { r: 231, g: 76, b: 60 },
+        bgGradient: ['#1a1a2e', '#2d0a0a', '#4a1010'],
+        titleGradient: ['#e74c3c', '#ff6b6b', '#ffa502'],
+    },
+    {
+        name: 'diamond',
+        title: 'DIAMOND',
+        subtitle: 'Top 1% AI User',
+        tokens: '300M+',
+        ranking: 'Top 1%',
+        rankingLabel: 'Global Ranking',
+        color: { r: 0, g: 188, b: 212 },
+        glowColor: { r: 0, g: 188, b: 212 },
+        bgGradient: ['#1a1a2e', '#0a2d3d', '#0d4a5a'],
+        titleGradient: ['#00bcd4', '#4dd0e1', '#b2ebf2'],
+    },
+    {
+        name: 'emerald',
+        title: 'EMERALD',
+        subtitle: 'Heavy AI User',
+        tokens: '100M+',
+        ranking: 'Top 5%',
+        rankingLabel: 'Global Ranking',
+        color: { r: 0, g: 229, b: 160 },
+        glowColor: { r: 0, g: 229, b: 160 },
+        bgGradient: ['#1a1a2e', '#0a2d1a', '#0d4a2a'],
+        titleGradient: ['#00e5a0', '#50c878', '#98fb98'],
+    },
+    {
+        name: 'platinum',
+        title: 'PLATINUM',
+        subtitle: 'Active AI User',
+        tokens: '50M+',
+        ranking: 'Top 10%',
+        rankingLabel: 'Global Ranking',
+        color: { r: 52, g: 199, b: 89 },
+        glowColor: { r: 52, g: 199, b: 89 },
+        bgGradient: ['#1a1a2e', '#1a2d1a', '#2a4a2a'],
+        titleGradient: ['#34c759', '#7bed9f', '#a8e6cf'],
+    },
+    {
+        name: 'gold',
+        title: 'GOLD',
+        subtitle: 'Regular AI User',
+        tokens: '30M+',
+        ranking: 'Top 20%',
+        rankingLabel: 'Global Ranking',
+        color: { r: 255, g: 215, b: 0 },
+        glowColor: { r: 255, g: 215, b: 0 },
+        bgGradient: ['#1a1a2e', '#2d2a0a', '#4a4510'],
+        titleGradient: ['#ffd700', '#ffec8b', '#fff8dc'],
+    },
+    {
+        name: 'silver',
+        title: 'SILVER',
+        subtitle: 'Growing AI User',
+        tokens: '10M+',
+        ranking: 'Top 40%',
+        rankingLabel: 'Global Ranking',
+        color: { r: 192, g: 192, b: 192 },
+        glowColor: { r: 192, g: 192, b: 192 },
+        bgGradient: ['#1a1a2e', '#2a2a3a', '#3a3a4a'],
+        titleGradient: ['#c0c0c0', '#e8e8e8', '#ffffff'],
+    },
+    {
+        name: 'bronze',
+        title: 'BRONZE',
+        subtitle: 'Casual AI User',
+        tokens: '5M+',
+        ranking: 'Top 60%',
+        rankingLabel: 'Global Ranking',
+        color: { r: 205, g: 127, b: 50 },
+        glowColor: { r: 205, g: 127, b: 50 },
+        bgGradient: ['#1a1a2e', '#2d1a0a', '#4a2a10'],
+        titleGradient: ['#cd7f32', '#daa06d', '#f5deb3'],
+    },
+    {
+        name: 'iron',
+        title: 'IRON',
+        subtitle: 'New AI User',
+        tokens: '<5M',
+        ranking: 'Starter',
+        rankingLabel: 'Just Getting Started',
+        color: { r: 100, g: 100, b: 100 },
+        glowColor: { r: 100, g: 100, b: 100 },
+        bgGradient: ['#1a1a2e', '#1a1a1a', '#2a2a2a'],
+        titleGradient: ['#646464', '#909090', '#c0c0c0'],
+    },
+];
+
+function rgba(color, alpha) {
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+}
+
+function generateCard(tier) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=1200, height=630">
+    <title>${tier.title} Card</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            width: 1200px;
+            height: 630px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, ${tier.bgGradient[0]} 0%, ${tier.bgGradient[1]} 50%, ${tier.bgGradient[2]} 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+        .card {
+            width: 1100px;
+            height: 530px;
+            background: rgba(255, 255, 255, 0.03);
+            border: 2px solid ${rgba(tier.color, 0.5)};
+            border-radius: 32px;
+            padding: 60px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            position: relative;
+            overflow: hidden;
+        }
+        .card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -20%;
+            width: 600px;
+            height: 600px;
+            background: radial-gradient(circle, ${rgba(tier.color, 0.15)} 0%, transparent 70%);
+            pointer-events: none;
+        }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px ${rgba(tier.glowColor, 0.8)}) drop-shadow(0 0 40px ${rgba(tier.glowColor, 0.5)}) drop-shadow(0 0 60px ${rgba(tier.glowColor, 0.3)});
+            opacity: 0.95;
+        }
+        .header { display: flex; align-items: center; gap: 24px; }
+        .tier-info h1 {
+            font-size: 64px;
+            font-weight: 800;
+            background: linear-gradient(135deg, ${tier.titleGradient[0]} 0%, ${tier.titleGradient[1]} 50%, ${tier.titleGradient[2]} 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            letter-spacing: -2px;
+        }
+        .tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
+        .stats { display: flex; gap: 60px; }
+        .stat { display: flex; flex-direction: column; gap: 8px; }
+        .stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
+        .stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
+        .footer { display: flex; justify-content: space-between; align-items: flex-end; }
+        .command { background: rgba(255, 255, 255, 0.1); padding: 16px 32px; border-radius: 12px; font-family: 'SF Mono', Monaco, monospace; font-size: 24px; color: #34c759; border: 1px solid rgba(52, 199, 89, 0.3); }
+        .branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
+        .branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
+    </style>
+</head>
+<body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
+    <div class="card">
+        <img class="big-icon" src="./icons/${tier.name}.png" alt="">
+        <div class="header">
+            <div class="tier-info">
+                <h1>${tier.title}</h1>
+                <div class="subtitle">${tier.subtitle}</div>
+            </div>
+        </div>
+        <div class="stats">
+            <div class="stat">
+                <div class="stat-value">${tier.tokens}</div>
+                <div class="stat-label">Tokens / Month</div>
+            </div>
+            <div class="stat">
+                <div class="stat-value">${tier.ranking}</div>
+                <div class="stat-label">${tier.rankingLabel}</div>
+            </div>
+        </div>
+        <div class="footer">
+            <div class="command">npx ccusage-ui</div>
+            <div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
+        </div>
+    </div>
+</body>
+</html>
+`;
+}
+
+function main() {
+    const outputDir = path.join(__dirname, '../public/share');
+
+    for (const tier of TIERS) {
+        const html = generateCard(tier);
+        const outputPath = path.join(outputDir, `card-${tier.name}.html`);
+        fs.writeFileSync(outputPath, html);
+        console.log(`Generated: card-${tier.name}.html`);
+    }
+
+    console.log('\nDone!');
+}
+
+main();

scripts/process-emerald.js

+const sharp = require('sharp');
+const path = require('path');
+
+async function processEmerald() {
+    const inputPath = path.join(__dirname, '../public/share/images/Gemini_Generated_Image_bqrx4pbqrx4pbqrx.png');
+    const outputPath = path.join(__dirname, '../public/share/icons/emerald.png');
+
+    // Ensure icons directory exists
+    const fs = require('fs');
+    const iconsDir = path.join(__dirname, '../public/share/icons');
+    if (!fs.existsSync(iconsDir)) {
+        fs.mkdirSync(iconsDir, { recursive: true });
+    }
+
+    const image = sharp(inputPath);
+    const metadata = await image.metadata();
+
+    console.log('Original size:', metadata.width, 'x', metadata.height);
+
+    // Process: trim whitespace, make white transparent, resize
+    await image
+        .trim() // Auto-crop whitespace
+        .ensureAlpha() // Ensure alpha channel exists
+        .raw()
+        .toBuffer({ resolveWithObject: true })
+        .then(async ({ data, info }) => {
+            // Make white/near-white pixels transparent
+            const threshold = 240; // Pixels with R,G,B all > threshold become transparent
+            for (let i = 0; i < data.length; i += 4) {
+                const r = data[i];
+                const g = data[i + 1];
+                const b = data[i + 2];
+                // If pixel is white-ish, make it transparent
+                if (r > threshold && g > threshold && b > threshold) {
+                    data[i + 3] = 0; // Set alpha to 0
+                }
+            }
+
+            // Save with transparency
+            await sharp(data, {
+                raw: {
+                    width: info.width,
+                    height: info.height,
+                    channels: 4
+                }
+            })
+            .resize(120, 120, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } })
+            .png()
+            .toFile(outputPath);
+
+            console.log('Processed emerald icon saved to:', outputPath);
+        });
+}
+
+processEmerald().catch(console.error);

package.json

 {
   "name": "ccusage-ui",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "main": "server.js",
@@ -38,4 +38,5 @@ "bin": {
     "gh-pages": "^6.3.0",
-    "puppeteer": "^24.34.0"
+    "puppeteer": "^24.34.0",
+    "sharp": "^0.34.5"
   }
 }

public/share/bronze.html

@@ -12,3 +12,3 @@ <!DOCTYPE html>
     <meta property="og:description" content="My AI usage pace is over 5M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/bronze.png">
+    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-bronze.png">
 
@@ -20,3 +20,3 @@ <!-- Twitter -->
     <meta property="twitter:description" content="My AI usage pace is over 5M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/bronze.png">
+    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-bronze.png">
 
@@ -23,0 +23,0 @@ <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>

public/share/card-bronze.html

@@ -6,3 +6,3 @@ <!DOCTYPE html>
     <meta name="viewport" content="width=1200, height=630">
-    <title>Bronze Card</title>
+    <title>BRONZE Card</title>
     <style>
@@ -43,4 +43,13 @@ * { margin: 0; padding: 0; box-sizing: border-box; }
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(205, 127, 50, 0.8)) drop-shadow(0 0 40px rgba(205, 127, 50, 0.5)) drop-shadow(0 0 60px rgba(205, 127, 50, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(205, 127, 50, 0.8)); }
         .tier-info h1 {
@@ -67,5 +76,19 @@ font-size: 64px;
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/bronze.png" alt="">
         <div class="header">
-            <span class="tier-icon">🟫</span>
             <div class="tier-info">
@@ -72,0 +95,0 @@ <h1>BRONZE</h1>

public/share/card-challenger.html

@@ -6,6 +6,5 @@ <!DOCTYPE html>
     <meta name="viewport" content="width=1200, height=630">
-    <title>Challenger Card</title>
+    <title>CHALLENGER Card</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-
         body {
@@ -21,3 +20,2 @@ width: 1200px;
         }
-
         .card {
@@ -36,3 +34,2 @@ width: 1100px;
         }
-
         .card::before {
@@ -48,14 +45,13 @@ content: '';
         }
-
-        .header {
-            display: flex;
-            align-items: center;
-            gap: 24px;
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 60px rgba(255, 215, 0, 0.3));
+            opacity: 0.95;
         }
-
-        .tier-icon {
-            font-size: 80px;
-            filter: drop-shadow(0 0 30px rgba(155, 89, 182, 0.8));
-        }
-
+        .header { display: flex; align-items: center; gap: 24px; }
         .tier-info h1 {
@@ -70,67 +66,31 @@ font-size: 64px;
         }
-
-        .tier-info .subtitle {
-            font-size: 28px;
-            color: rgba(255, 255, 255, 0.6);
-            margin-top: 8px;
-            font-weight: 500;
-        }
-
-        .stats {
-            display: flex;
-            gap: 60px;
-        }
-
-        .stat {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .stat-value {
-            font-size: 56px;
-            font-weight: 700;
-            color: #fff;
-            letter-spacing: -1px;
-        }
-
-        .stat-label {
-            font-size: 20px;
-            color: rgba(255, 255, 255, 0.5);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-        }
-
-        .footer {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-end;
-        }
-
-        .command {
-            background: rgba(255, 255, 255, 0.1);
-            padding: 16px 32px;
-            border-radius: 12px;
-            font-family: 'SF Mono', Monaco, monospace;
-            font-size: 24px;
-            color: #34c759;
-            border: 1px solid rgba(52, 199, 89, 0.3);
-        }
-
-        .branding {
-            text-align: right;
-            color: rgba(255, 255, 255, 0.4);
-            font-size: 20px;
-        }
-
-        .branding strong {
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 24px;
-        }
+        .tier-info .subtitle { font-size: 28px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; font-weight: 500; }
+        .stats { display: flex; gap: 60px; }
+        .stat { display: flex; flex-direction: column; gap: 8px; }
+        .stat-value { font-size: 56px; font-weight: 700; color: #fff; letter-spacing: -1px; }
+        .stat-label { font-size: 20px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 2px; }
+        .footer { display: flex; justify-content: space-between; align-items: flex-end; }
+        .command { background: rgba(255, 255, 255, 0.1); padding: 16px 32px; border-radius: 12px; font-family: 'SF Mono', Monaco, monospace; font-size: 24px; color: #34c759; border: 1px solid rgba(52, 199, 89, 0.3); }
+        .branding { text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 20px; }
+        .branding strong { color: rgba(255, 255, 255, 0.7); font-size: 24px; }
     </style>
 </head>
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/challenger.png" alt="">
         <div class="header">
-            <span class="tier-icon">🏆</span>
             <div class="tier-info">
@@ -141,3 +101,2 @@ <h1>CHALLENGER</h1>
         </div>
-
         <div class="stats">
@@ -153,9 +112,5 @@ <div class="stat">
         </div>
-
         <div class="footer">
             <div class="command">npx ccusage-ui</div>
-            <div class="branding">
-                <strong>Claude Code Usage</strong><br>
-                sowonlabs.com
-            </div>
+            <div class="branding"><strong>Claude Code Usage</strong><br>sowonlabs.com</div>
         </div>
@@ -162,0 +117,0 @@ </div>

public/share/card-diamond.html

@@ -6,3 +6,3 @@ <!DOCTYPE html>
     <meta name="viewport" content="width=1200, height=630">
-    <title>Diamond Card</title>
+    <title>DIAMOND Card</title>
     <style>
@@ -43,4 +43,13 @@ * { margin: 0; padding: 0; box-sizing: border-box; }
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(0, 188, 212, 0.8)) drop-shadow(0 0 40px rgba(0, 188, 212, 0.5)) drop-shadow(0 0 60px rgba(0, 188, 212, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(0, 188, 212, 0.8)); }
         .tier-info h1 {
@@ -67,5 +76,19 @@ font-size: 64px;
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/diamond.png" alt="">
         <div class="header">
-            <span class="tier-icon">💠</span>
             <div class="tier-info">
@@ -72,0 +95,0 @@ <h1>DIAMOND</h1>

public/share/card-emerald.html

@@ -6,3 +6,3 @@ <!DOCTYPE html>
     <meta name="viewport" content="width=1200, height=630">
-    <title>Emerald Card</title>
+    <title>EMERALD Card</title>
     <style>
@@ -43,4 +43,13 @@ * { margin: 0; padding: 0; box-sizing: border-box; }
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(0, 229, 160, 0.8)) drop-shadow(0 0 40px rgba(0, 229, 160, 0.5)) drop-shadow(0 0 60px rgba(0, 229, 160, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(0, 229, 160, 0.8)); }
         .tier-info h1 {
@@ -67,5 +76,19 @@ font-size: 64px;
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/emerald.png" alt="">
         <div class="header">
-            <span class="tier-icon">💎</span>
             <div class="tier-info">
@@ -72,0 +95,0 @@ <h1>EMERALD</h1>

public/share/card-gold.html

@@ -6,3 +6,3 @@ <!DOCTYPE html>
     <meta name="viewport" content="width=1200, height=630">
-    <title>Gold Card</title>
+    <title>GOLD Card</title>
     <style>
@@ -43,4 +43,13 @@ * { margin: 0; padding: 0; box-sizing: border-box; }
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 60px rgba(255, 215, 0, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)); }
         .tier-info h1 {
@@ -67,5 +76,19 @@ font-size: 64px;
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/gold.png" alt="">
         <div class="header">
-            <span class="tier-icon">🟡</span>
             <div class="tier-info">
@@ -72,0 +95,0 @@ <h1>GOLD</h1>

public/share/card-grandmaster.html

@@ -6,3 +6,3 @@ <!DOCTYPE html>
     <meta name="viewport" content="width=1200, height=630">
-    <title>Grandmaster Card</title>
+    <title>GRANDMASTER Card</title>
     <style>
@@ -43,4 +43,13 @@ * { margin: 0; padding: 0; box-sizing: border-box; }
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(255, 152, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 152, 0, 0.5)) drop-shadow(0 0 60px rgba(255, 152, 0, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(255, 152, 0, 0.8)); }
         .tier-info h1 {
@@ -67,5 +76,19 @@ font-size: 64px;
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/grandmaster.png" alt="">
         <div class="header">
-            <span class="tier-icon">🟠</span>
             <div class="tier-info">
@@ -72,0 +95,0 @@ <h1>GRANDMASTER</h1>

public/share/card-iron.html

@@ -6,3 +6,3 @@ <!DOCTYPE html>
     <meta name="viewport" content="width=1200, height=630">
-    <title>Iron Card</title>
+    <title>IRON Card</title>
     <style>
@@ -43,4 +43,13 @@ * { margin: 0; padding: 0; box-sizing: border-box; }
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(100, 100, 100, 0.8)) drop-shadow(0 0 40px rgba(100, 100, 100, 0.5)) drop-shadow(0 0 60px rgba(100, 100, 100, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(100, 100, 100, 0.8)); }
         .tier-info h1 {
@@ -67,5 +76,19 @@ font-size: 64px;
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/iron.png" alt="">
         <div class="header">
-            <span class="tier-icon">⬛</span>
             <div class="tier-info">
@@ -78,3 +101,3 @@ <h1>IRON</h1>
             <div class="stat">
-                <div class="stat-value">&lt;5M</div>
+                <div class="stat-value"><5M</div>
                 <div class="stat-label">Tokens / Month</div>
@@ -81,0 +104,0 @@ </div>

public/share/card-master.html

@@ -6,3 +6,3 @@ <!DOCTYPE html>
     <meta name="viewport" content="width=1200, height=630">
-    <title>Master Card</title>
+    <title>MASTER Card</title>
     <style>
@@ -43,4 +43,13 @@ * { margin: 0; padding: 0; box-sizing: border-box; }
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(231, 76, 60, 0.8)) drop-shadow(0 0 40px rgba(231, 76, 60, 0.5)) drop-shadow(0 0 60px rgba(231, 76, 60, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(231, 76, 60, 0.8)); }
         .tier-info h1 {
@@ -67,5 +76,19 @@ font-size: 64px;
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/master.png" alt="">
         <div class="header">
-            <span class="tier-icon">🔴</span>
             <div class="tier-info">
@@ -72,0 +95,0 @@ <h1>MASTER</h1>

public/share/card-platinum.html

@@ -6,3 +6,3 @@ <!DOCTYPE html>
     <meta name="viewport" content="width=1200, height=630">
-    <title>Platinum Card</title>
+    <title>PLATINUM Card</title>
     <style>
@@ -43,4 +43,13 @@ * { margin: 0; padding: 0; box-sizing: border-box; }
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(52, 199, 89, 0.8)) drop-shadow(0 0 40px rgba(52, 199, 89, 0.5)) drop-shadow(0 0 60px rgba(52, 199, 89, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(52, 199, 89, 0.8)); }
         .tier-info h1 {
@@ -67,5 +76,19 @@ font-size: 64px;
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/platinum.png" alt="">
         <div class="header">
-            <span class="tier-icon">💚</span>
             <div class="tier-info">
@@ -72,0 +95,0 @@ <h1>PLATINUM</h1>

public/share/card-silver.html

@@ -6,3 +6,3 @@ <!DOCTYPE html>
     <meta name="viewport" content="width=1200, height=630">
-    <title>Silver Card</title>
+    <title>SILVER Card</title>
     <style>
@@ -43,4 +43,13 @@ * { margin: 0; padding: 0; box-sizing: border-box; }
         }
+        .big-icon {
+            position: absolute;
+            right: 60px;
+            top: 45%;
+            transform: translateY(-50%);
+            width: 280px;
+            height: 280px;
+            filter: drop-shadow(0 0 20px rgba(192, 192, 192, 0.8)) drop-shadow(0 0 40px rgba(192, 192, 192, 0.5)) drop-shadow(0 0 60px rgba(192, 192, 192, 0.3));
+            opacity: 0.95;
+        }
         .header { display: flex; align-items: center; gap: 24px; }
-        .tier-icon { font-size: 80px; filter: drop-shadow(0 0 30px rgba(192, 192, 192, 0.8)); }
         .tier-info h1 {
@@ -67,5 +76,19 @@ font-size: 64px;
 <body>
+    <!-- SVG filter to remove magenta fringing -->
+    <svg style="position: absolute; width: 0; height: 0;">
+        <defs>
+            <filter id="remove-magenta" color-interpolation-filters="sRGB">
+                <!-- Convert to separate channels and reduce magenta -->
+                <feColorMatrix type="matrix" values="
+                    1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    -0.5 1 -0.5 1 0
+                "/>
+            </filter>
+        </defs>
+    </svg>
     <div class="card">
+        <img class="big-icon" src="./icons/silver.png" alt="">
         <div class="header">
-            <span class="tier-icon">⬜</span>
             <div class="tier-info">
@@ -72,0 +95,0 @@ <h1>SILVER</h1>

public/share/challenger.html

@@ -12,3 +12,3 @@ <!DOCTYPE html>
     <meta property="og:description" content="My AI usage pace is over 1.5B tokens/month (World #1 Level). Check your stats: npx ccusage-ui">
-    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/challenger.png">
+    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-challenger.png">
 
@@ -20,3 +20,3 @@ <!-- Twitter -->
     <meta property="twitter:description" content="My AI usage pace is over 1.5B tokens/month (World #1 Level). Check your stats: npx ccusage-ui">
-    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/challenger.png">
+    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-challenger.png">
 
@@ -23,0 +23,0 @@ <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>

public/share/diamond.html

@@ -12,3 +12,3 @@ <!DOCTYPE html>
     <meta property="og:description" content="My AI usage pace is over 300M tokens/month (Top 1%). Check your stats: npx ccusage-ui">
-    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/diamond.png">
+    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-diamond.png">
 
@@ -20,3 +20,3 @@ <!-- Twitter -->
     <meta property="twitter:description" content="My AI usage pace is over 300M tokens/month (Top 1%). Check your stats: npx ccusage-ui">
-    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/diamond.png">
+    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-diamond.png">
 
@@ -23,0 +23,0 @@ <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>

public/share/emerald.html

@@ -12,3 +12,3 @@ <!DOCTYPE html>
     <meta property="og:description" content="My AI usage pace is over 100M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/emerald.png">
+    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-emerald.png">
 
@@ -20,3 +20,3 @@ <!-- Twitter -->
     <meta property="twitter:description" content="My AI usage pace is over 100M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/emerald.png">
+    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-emerald.png">
 
@@ -23,0 +23,0 @@ <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>

public/share/gold.html

@@ -12,3 +12,3 @@ <!DOCTYPE html>
     <meta property="og:description" content="My AI usage pace is over 30M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/gold.png">
+    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-gold.png">
 
@@ -20,3 +20,3 @@ <!-- Twitter -->
     <meta property="twitter:description" content="My AI usage pace is over 30M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/gold.png">
+    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-gold.png">
 
@@ -23,0 +23,0 @@ <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>

public/share/grandmaster.html

@@ -12,3 +12,3 @@ <!DOCTYPE html>
     <meta property="og:description" content="My AI usage pace is over 1B tokens/month (Top 0.01%). Check your stats: npx ccusage-ui">
-    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/grandmaster.png">
+    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-grandmaster.png">
 
@@ -20,3 +20,3 @@ <!-- Twitter -->
     <meta property="twitter:description" content="My AI usage pace is over 1B tokens/month (Top 0.01%). Check your stats: npx ccusage-ui">
-    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/grandmaster.png">
+    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-grandmaster.png">
 
@@ -23,0 +23,0 @@ <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>

public/share/iron.html

@@ -12,3 +12,3 @@ <!DOCTYPE html>
     <meta property="og:description" content="Just getting started with Claude Code! Check your stats: npx ccusage-ui">
-    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/iron.png">
+    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-iron.png">
 
@@ -20,3 +20,3 @@ <!-- Twitter -->
     <meta property="twitter:description" content="Just getting started with Claude Code! Check your stats: npx ccusage-ui">
-    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/iron.png">
+    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-iron.png">
 
@@ -23,0 +23,0 @@ <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>

public/share/master.html

@@ -12,3 +12,3 @@ <!DOCTYPE html>
     <meta property="og:description" content="My AI usage pace is over 500M tokens/month (Top 0.1%). Check your stats: npx ccusage-ui">
-    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/master.png">
+    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-master.png">
 
@@ -20,3 +20,3 @@ <!-- Twitter -->
     <meta property="twitter:description" content="My AI usage pace is over 500M tokens/month (Top 0.1%). Check your stats: npx ccusage-ui">
-    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/master.png">
+    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-master.png">
 
@@ -23,0 +23,0 @@ <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>

public/share/platinum.html

@@ -12,3 +12,3 @@ <!DOCTYPE html>
     <meta property="og:description" content="My AI usage pace is over 50M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/platinum.png">
+    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-platinum.png">
 
@@ -20,3 +20,3 @@ <!-- Twitter -->
     <meta property="twitter:description" content="My AI usage pace is over 50M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/platinum.png">
+    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-platinum.png">
 
@@ -23,0 +23,0 @@ <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>

public/share/silver.html

@@ -12,3 +12,3 @@ <!DOCTYPE html>
     <meta property="og:description" content="My AI usage pace is over 10M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/silver.png">
+    <meta property="og:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-silver.png">
 
@@ -20,3 +20,3 @@ <!-- Twitter -->
     <meta property="twitter:description" content="My AI usage pace is over 10M tokens/month. Check your stats: npx ccusage-ui">
-    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/silver.png">
+    <meta property="twitter:image" content="https://sowonlabs.github.io/ccusage-ui/share/images/card-silver.png">
 
@@ -23,0 +23,0 @@ <script>window.location.href = "https://github.com/sowonlabs/ccusage-ui";</script>

README.md

@@ -52,4 +52,47 @@ # ccusage-ui
 
+## Tier Icons
+
+Tier icons were generated using **Gemini (via 나노바나나 프로)** and extracted with chroma key processing.
+
+<details>
+<summary>Image Generation Prompt</summary>
+
+```
+Create a 5x2 grid of League of Legends style tier icons.
+Image aspect ratio: 5:2 (e.g., 2500x1000px or similar)
+Each cell should be square and contain one icon, clearly separated with no effects bleeding between cells.
+
+IMPORTANT - Background colors per cell (for chroma key extraction):
+- Green (#00FF00): Challenger, Grandmaster, Master, Gold, Silver, Bronze, Iron
+- Magenta (#FF00FF): Diamond, Emerald, Platinum (these have cyan/green colors, so use magenta background)
+
+CRITICAL - DO NOT use these colors in the icons themselves:
+- Icons with green background: DO NOT use pure green (#00FF00) or similar bright greens in the icon
+- Icons with magenta background: DO NOT use pure magenta (#FF00FF) or similar magentas in the icon
+- These colors are reserved for background removal (chroma key)
+
+Grid layout (left to right):
+- Row 1: Challenger(green bg), Grandmaster(green bg), Master(green bg), Diamond(magenta bg), Emerald(magenta bg)
+- Row 2: Platinum(magenta bg), Gold(green bg), Silver(green bg), Bronze(green bg), Iron(green bg)
+
+Icon descriptions (G=green bg, M=magenta bg):
+1. Challenger (G) - Golden winged crown emblem with red gems
+2. Grandmaster (G) - Red/orange flaming emblem with golden wings
+3. Master (G) - Crimson red shield emblem with flame accents
+4. Diamond (M) - Cyan/light blue crystalline shield emblem
+5. Emerald (M) - Green gemstone shield emblem with facets
+6. Platinum (M) - Silver-white metallic shield emblem with teal accents
+7. Gold (G) - Golden shield emblem with warm yellow glow
+8. Silver (G) - Silver metallic shield emblem with cool gray tones
+9. Bronze (G) - Bronze/copper shield emblem with warm brown tones
+10. Iron (G) - Dark gray iron shield emblem, simplest design
+
+Icon style: metallic shields with gemstones, fantasy game aesthetic, detailed 3D rendering.
+All icons should be shield/emblem shaped for visual consistency (like League of Legends rank badges).
+```
+
+</details>
+
 ## License
 
 MIT

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15075062

392.32%

Number of package files

54

42.11%

Lines of code

634

298.74%

Number of lines in readme file

98

78.18%

Worsened metrics

Dev dependency count

3

50%

Number of low supply chain risk alerts

6

200%

Number of medium supply chain risk alerts

3

50%

No dependency changes