github-actions-usage-report/index.html at main · austenstone/github-actions-usage-report · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Primary Meta Tags -->
    <title>GitHub Usage Report Viewer</title>
    <meta name="title" content="GitHub Usage Report Viewer" />
    <meta name="description" content="Visualize your GitHub Usage Report. All processing is done client side and your usage report never leaves your computer." />
    <meta name="keywords" content="GitHub, usage report, billing dashboard, Copilot, Actions, token usage, premium requests, CSV viewer, Copilot spend, AI coding costs, developer tools" />
    <meta name="author" content="Austen Stone" />
    <meta name="robots" content="index, follow" />
    <link rel="canonical" href="https://austenstone.github.io/github-actions-usage-report/" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://austenstone.github.io/github-actions-usage-report/" />
    <meta property="og:title" content="GitHub Usage Report Viewer" />
    <meta property="og:description" content="Visualize your GitHub Usage Report. All processing is done client side and your usage report never leaves your computer." />
    <meta property="og:image" content="https://austenstone.github.io/github-actions-usage-report/og-image.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="GitHub Usage Report Viewer" />
    <meta property="og:locale" content="en_US" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://austenstone.github.io/github-actions-usage-report/" />
    <meta name="twitter:title" content="GitHub Usage Report Viewer" />
    <meta name="twitter:description" content="Visualize your GitHub Usage Report. All processing is done client side and your usage report never leaves your computer." />
    <meta name="twitter:image" content="https://austenstone.github.io/github-actions-usage-report/og-image.png" />

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />

    <!-- Web App Manifest -->
    <link rel="manifest" href="site.webmanifest" />
    <meta name="theme-color" content="#0d1117" media="(prefers-color-scheme: dark)" />
    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />

    <!-- Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "GitHub Usage Report Viewer",
        "alternateName": "GitHub Billing Dashboard",
        "url": "https://austenstone.github.io/github-actions-usage-report/",
        "description": "Visualize your GitHub Usage Report. All processing is done client side and your usage report never leaves your computer.",
        "applicationCategory": "DeveloperApplication",
        "operatingSystem": "Any",
        "browserRequirements": "Requires a modern browser with JavaScript enabled",
        "author": {
          "@type": "Person",
          "name": "Austen Stone",
          "url": "https://github.com/austenstone"
        },
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        },
        "featureList": [
          "Interactive charts for spend over time and model breakdowns",
          "Grouped data table with sorting and pagination",
          "GitHub-style autocomplete filtering",
          "Period selector for monthly or all-time views",
          "AI model branding with color-coded icons",
          "Light and dark mode with system-aware toggle",
          "100% client-side — zero data leaves your browser",
          "Multi-file support with tab switching",
          "Duplicate file detection via FNV-1a hashing"
        ],
        "screenshot": "https://austenstone.github.io/github-actions-usage-report/og-image.png",
        "softwareVersion": "1.0.0"
      }
    </script>

    <!-- Fonts (self-hosted for performance: eliminates 3-hop Google Fonts waterfall) -->
    <style>
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url('fonts/inter-latin-ext.woff2') format('woff2');
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1D7F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
      }
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url('fonts/inter-latin.woff2') format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
    </style>

    <style>
      *, *::before, *::after { box-sizing: border-box; margin: 0; }
      html, body { height: 100%; }
      #root { min-height: 100vh; display: flex; flex-direction: column; }
      #root > div, #root > div > div { display: flex; flex-direction: column; flex: 1; min-height: 0; }
      /* Primer PageLayout root needs to stretch to fill the viewport */
      .prc-PageLayout-PageLayoutRoot--KH-d { display: flex; flex-direction: column; flex: 1; min-height: 0; }
      .prc-PageLayout-PageLayoutWrapper-2BhU2 { flex: 1; }
      body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    </style>

    <!-- SPA redirect restore: GitHub Pages 404.html saves the original path -->
    <script>
      (function() {
        var redirect = sessionStorage.getItem('spa-redirect');
        if (redirect) {
          sessionStorage.removeItem('spa-redirect');
          history.replaceState(null, '', redirect);
        }
      })();
    </script>
  </head>
  <body>
    <noscript>
      <div style="padding: 2rem; text-align: center; font-family: system-ui, sans-serif;">
        <h1>GitHub Usage Report Viewer</h1>
        <p>This application requires JavaScript to run. Please enable JavaScript in your browser settings.</p>
        <p>Drag-and-drop GitHub billing CSVs to visualize Copilot spend, premium request usage, token consumption, and model breakdowns, all client-side with zero data leaving your browser.</p>
      </div>
    </noscript>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>