LimaCharlie Reporting Skill

Overview

This skill lets you create rich, interactive HTML reports that open in a browser instead of displaying in the terminal. You generate whatever HTML you want - tables, charts, dashboards, visualizations - and this skill serves it on localhost.

When to Use This Skill

Use this when users want:

• Visual reports, dashboards, or charts
• Billing analysis with graphs
• Interactive tables with sorting/filtering
• MITRE ATT&CK coverage heatmaps
• Any data visualization that's better in a browser than text

How It Works

Three simple steps:

1. You generate HTML (with any charts, tables, styling you want)
2. Call create_and_serve_report(html) - This spawns Python's http.server as a background subprocess
3. User opens the localhost URL in their browser

The implementation uses Python's built-in http.server module running as a subprocess, serving files directly from /tmp. This approach is simple, reliable, and requires no complex threading or process management. You have complete freedom to generate whatever HTML makes sense.

Basic Usage

import sys
sys.path.insert(0, '/full/path/to/skills/limacharlie-reporting')

from lib import create_and_serve_report

# Generate your HTML however you want
html = """
<h1>My Report</h1>
<p>Some analysis here...</p>
<table>
  <tr><th>Metric</th><th>Value</th></tr>
  <tr><td>Sensors</td><td>45</td></tr>
  <tr><td>Cost</td><td>$1,234</td></tr>
</table>
"""

# Serve it
url = create_and_serve_report(html, title="My Report")
print(f"\nReport ready: {url}")

The URL will be something like http://localhost:8080/report-abc123.html.

Adding Charts with Chart.js

Chart.js is a simple, popular charting library. Here's how to use it:

html = """
<h1>Billing Trend</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{
      label: 'Monthly Cost ($)',
      data: [800, 950, 1100, 1234],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Cost Trend'
      }
    }
  }
});
</script>
"""

url = create_and_serve_report(html, title="Billing Dashboard")

Chart.js Quick Reference:

• Line charts: type: 'line'
• Bar charts: type: 'bar'
• Pie/Donut: type: 'pie' or type: 'doughnut'
• Docs: https://www.chartjs.org/docs/latest/

Creating Interactive Tables

For sortable, filterable tables, you can generate simple HTML tables or use libraries like DataTables:

# Simple HTML table (users can still sort/filter in browser with Ctrl+F)
html = """
<h1>Sensor Inventory</h1>
<table border="1" style="width:100%; border-collapse: collapse;">
  <thead>
    <tr style="background: #f0f0f0;">
      <th>Hostname</th>
      <th>Platform</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>web-01</td><td>linux</td><td>online</td></tr>
    <tr><td>db-01</td><td>linux</td><td>online</td></tr>
    <tr><td>win-dc01</td><td>windows</td><td>offline</td></tr>
  </tbody>
</table>
"""

url = create_and_serve_report(html, title="Sensors")

Styling Your Reports

You can include CSS inline or link to frameworks:

html = """
<style>
  .metric-card {
    display: inline-block;
    padding: 20px;
    margin: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    text-align: center;
  }
  .metric-value {
    font-size: 2em;
    font-weight: bold;
  }
</style>

<h1>Overview</h1>
<div class="metric-card">
  <div class="metric-value">$1,234</div>
  <div>Total Cost</div>
</div>
<div class="metric-card">
  <div class="metric-value">45</div>
  <div>Active Sensors</div>
</div>
"""

url = create_and_serve_report(html, title="Dashboard")

Using Other Visualization Libraries

You can use any JavaScript library from a CDN:

• ApexCharts: Modern, interactive charts - https://apexcharts.com/
• Plotly: Scientific/statistical visualizations - https://plotly.com/javascript/
• ECharts: Rich enterprise charts - https://echarts.apache.org/
• D3.js: Custom data visualizations - https://d3js.org/

Just include the CDN script tag and use the library's API in your HTML.

API Reference

create_and_serve_report(html_content, title="Report", filename=None, wrap=True, include_chart_js=False)

Parameters:

• html_content (str): Your HTML content
• title (str): Page title (used if wrap=True)
• filename (str, optional): Custom filename (e.g., "billing" → "billing.html")
• wrap (bool): If True, wraps content in minimal HTML template. If False, uses content as complete HTML document.
• include_chart_js (bool): If True (and wrap=True), automatically includes Chart.js CDN script

Returns:

• (str): URL where report can be accessed (e.g., http://localhost:8080/report-abc123.html)

Helper: wrap_html(content, title, include_chart_js=False)

Wraps your content in a minimal HTML document with basic styling. Called automatically if wrap=True in create_and_serve_report.

Complete Example: Billing Report

import sys
sys.path.insert(0, '/full/path/to/skills/limacharlie-reporting')

from lib import create_and_serve_report

# Assume we fetched billing data from LimaCharlie MCP
total_cost = 1234.56
services = [
    {'name': 'Detection & Response', 'cost': 500.00},
    {'name': 'Artifact Collection', 'cost': 300.00},
    {'name': 'Outputs', 'cost': 434.56}
]

# Generate HTML with inline Chart.js
html = f"""
<h1>Billing Dashboard</h1>
<p>Current billing cycle: <strong>${total_cost:,.2f}</strong></p>

<h2>Cost by Service</h2>
<canvas id="costChart" width="400" height="200"></canvas>

<h2>Service Breakdown</h2>
<table border="1" style="width:100%; border-collapse: collapse;">
  <thead>
    <tr style="background: #f0f0f0;">
      <th>Service</th>
      <th>Cost</th>
    </tr>
  </thead>
  <tbody>
    {''.join(f'<tr><td>{s["name"]}</td><td>${s["cost"]:,.2f}</td></tr>' for s in services)}
  </tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('costChart'), {{
  type: 'doughnut',
  data: {{
    labels: {[s['name'] for s in services]},
    datasets: [{{
      data: {[s['cost'] for s in services]},
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }}]
  }},
  options: {{
    responsive: true,
    plugins: {{
      title: {{ display: true, text: 'Cost Distribution' }}
    }}
  }}
}});
</script>
"""

url = create_and_serve_report(html, title="Billing Report")
print(f"\n✅ Billing report ready: {url}")

Best Practices

1. Keep it simple: Generate clean HTML, don't over-engineer
2. Use CDNs: Link to Chart.js, Plotly, etc. from CDN (no local dependencies)
3. Inline styles: Put CSS in <style> tags for self-contained reports
4. Test in browser: Open the URL to verify charts render correctly
5. Progressive enhancement: Start with basic HTML tables, add charts if needed

Troubleshooting

Port already in use:

• The server tries ports 8080-8090
• If all are busy, you'll get an error
• Solution: Close other local servers or check lsof -i :8080-8090

Charts not rendering:

• Check browser console for JavaScript errors
• Verify CDN scripts are loading (requires internet connection)
• Ensure Chart.js script loads before your chart code

Report URL doesn't open:

• Server prints "Report server started at http://localhost:PORT"
• If you don't see this, check for errors in Python execution
• Try the URL manually in a browser

See Also

• EXAMPLES.md: Real-world report examples
• REFERENCE.md: Advanced techniques and tips