Agent Scorecard as a Beautiful Image — Not Broken Telegram Markdown

The Problem

Every Friday, our agent fleet produces a performance scorecard. 31 agents. Success rates, token usage, cost per task, error counts.

We tried sending it as a Telegram message. Here's what happens when you send a markdown table with 6 columns to Telegram:

| Agent | Success | Tokens | Cost | Errors | Status |
|-------|---------|--------|------|--------|--------|
| Alfrawd | 97.2% | 1.2M | $18.40 | 3 | ✅ |
| Peiy | 94.1% | 890K | $12.30 | 7 | ✅ |
| Thom | 91.8% | 2.1M | $31.20 | 12 | ⚠️ |

What Telegram actually renders: a wall of pipes and dashes that wraps on mobile, breaks alignment, and makes the data completely useless. You'd need to squint, scroll sideways, and mentally reconstruct the columns.

This isn't a Telegram bug. It's a limitation. Telegram's markdown renderer isn't designed for data tables. Neither is Discord's, WhatsApp's, or any chat platform's.

But I live in Telegram. My team lives in Telegram. The data needs to be there. It just needs to look good.

The Solution

Mr.Chief's Table-to-Image skill. Takes structured data, renders it as a styled HTML table, screenshots it to PNG, and sends the image to Telegram.

Dark theme. Color-coded cells. Green for pass, yellow for warning, red for fail. Auto-generated every Friday at the end of the scorecard cron job.

The Process (with code/config snippets)

The scorecard data comes from our agent monitoring system as JSON:

{
  "period": "2024-12-09 to 2024-12-15",
  "agents": [
    {
      "name": "Alfrawd",
      "team": "Core",
      "success_rate": 97.2,
      "total_tasks": 142,
      "tokens_used": "1.2M",
      "cost": 18.40,
      "errors": 3,
      "status": "pass"
    },
    {
      "name": "Thom",
      "team": "Engineering",
      "success_rate": 91.8,
      "total_tasks": 89,
      "tokens_used": "2.1M",
      "cost": 31.20,
      "errors": 12,
      "status": "warn"
    }
  ]
}

The Table-to-Image skill renders this with styling rules:

table_image:
  theme: dark
  background: "#0d0d0d"
  header_bg: "#1a1a2e"
  font: "JetBrains Mono"
  cell_padding: "12px 16px"

  conditional_formatting:
    success_rate:
      - range: [95, 100]
        color: "#22c55e"  # green
      - range: [85, 95]
        color: "#eab308"  # yellow
      - range: [0, 85]
        color: "#ef4444"  # red
    status:
      pass: { bg: "#14532d", text: "#22c55e" }
      warn: { bg: "#713f12", text: "#eab308" }
      fail: { bg: "#7f1d1d", text: "#ef4444" }

  footer: "Generated {timestamp} | PyratzLabs Agent Fleet"

The generation pipeline:

# Triggered by weekly scorecard cron
1. Collect agent metrics → JSON
2. Apply formatting rules → styled HTML table
3. Render HTML → PNG (headless browser screenshot)
4. Send PNG to Telegram as photo with caption

The before/after in Telegram is night and day. The text version requires effort to parse. The image version communicates status at a glance — green rows are fine, yellow rows need attention, red rows need action. Your eye goes straight to what matters.

The Results

The unexpected benefit: people actually engage with the scorecard now. When it was a text blob, maybe 2 people on the team read it. As an image, it gets reactions and comments. The data didn't change. The presentation did.

Try It Yourself

1. Identify any recurring data you share in chat that has more than 3 columns
2. Structure the data as JSON
3. Define conditional formatting rules (what's good, warning, bad)
4. Use Table-to-Image to render as PNG
5. Automate: trigger image generation at the end of your data pipeline, send to chat

Data nobody reads is data that doesn't exist. Make it visual or don't bother collecting it.