ai-usage-analyzer 0.4.0 → 0.5.1

package/web/dates.js

@@ -0,0 +1,35 @@
+export function dayNumber(ts) {
+  const date = new Date(ts);
+  return Math.floor(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / 86400000);
+}
+
+export function periodBounds(period, now = Date.now()) {
+  const { key, from, to } = period;
+  const today = dayNumber(now);
+  const date = new Date(now);
+  if (key === 'all') return null;
+  if (key === 'custom') return [from, to];
+  if (key === 'today') return [today, today];
+  if (key === 'week') return [today - (date.getDay() + 6) % 7, today];
+  if (key === 'year') return [dayNumber(new Date(date.getFullYear(), 0, 1).getTime()), today];
+  return [today - Number(key) + 1, today];
+}
+
+export function dateValue(day) {
+  return day == null ? '' : new Date(day * 86400000).toISOString().slice(0, 10);
+}
+
+export function parseDate(value) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return null;
+  const ts = Date.parse(`${value}T00:00:00Z`);
+  if (!Number.isFinite(ts)) return null;
+  const day = ts / 86400000;
+  return dateValue(day) === value ? day : null;
+}
+
+export function calendarDays(month) {
+  const date = new Date(month * 86400000);
+  date.setUTCDate(1);
+  const first = date.getTime() / 86400000 - (date.getUTCDay() + 6) % 7;
+  return Array.from({ length: 42 }, (_, index) => first + index);
+}

package/web/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#e5401a"/><path d="M7 24V16h4v8zm7 0V8h4v16zm7 0V12h4v12z" fill="#f1ede4"/></svg>

package/web/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2018 The Manrope Project Authors (https://github.com/googlefonts/manrope)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/web/icons/claude.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"></path></svg>

package/web/icons/openai.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"></path></svg>

package/web/icons/opencode.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>opencode</title><path d="M16 6H8v12h8V6zm4 16H4V2h16v20z"></path></svg>

package/web/index.html

@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light">
+  <title>Usage overview · AI Usage Analyzer</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="preload" href="/fonts/manrope.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="stylesheet" href="/style.css">
+  <script src="/gsap.js" defer></script>
+  <script type="module" src="/app.js"></script>
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to content</a>
+  <header class="masthead">
+    <a class="brand" href="#overview"><img src="/favicon.svg" width="28" height="28" alt=""><span>Usage<b>Analyzer</b></span></a>
+    <nav class="views" aria-label="Dashboard views">
+      <a href="#overview" aria-current="page">Overview</a>
+      <a href="#sessions">Sessions</a>
+      <a href="#sources">Sources <span id="source-count" class="count"></span></a>
+    </nav>
+    <div class="masthead-actions">
+      <button id="theme" class="button quiet" type="button" aria-pressed="false">
+        <svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="6.5"/><path class="fill" d="M10 3.5a6.5 6.5 0 0 0 0 13z"/></svg>
+        <span>Dark</span>
+      </button>
+      <button id="refresh" class="button solid" type="button">
+        <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16.5 8a6.7 6.7 0 1 0-.4 5M16.5 3.5V8H12"/></svg>
+        <span id="refresh-label">Refresh records</span>
+      </button>
+    </div>
+  </header>
+
+  <main id="main" tabindex="-1">
+    <div id="message" class="notice" role="status" aria-live="polite"></div>
+    <section id="loading" class="loading" aria-labelledby="loading-title">
+      <h1 id="loading-title">Reading your session files</h1>
+      <p>Scanning the local folders of each coding tool. Nothing leaves this device.</p>
+      <div class="progress" aria-hidden="true"><span></span></div>
+    </section>
+
+    <div id="dashboard" hidden>
+      <div id="filters" class="filters">
+        <button id="date-filter" class="button quiet date-trigger" type="button" aria-haspopup="dialog" aria-controls="date-dialog" aria-expanded="false">
+          <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="3" y="4.5" width="14" height="12" rx="1"/><path d="M6.5 3v3M13.5 3v3M3 8.5h14"/></svg>
+          <span id="date-filter-label">All time</span>
+          <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m6 8 4 4 4-4"/></svg>
+        </button>
+        <div id="tool-filter" class="filter-group tool-filter" role="group" aria-label="Tool"></div>
+        <p id="scope" class="scope"></p>
+      </div>
+
+      <div id="overview-view">
+        <section class="hero" aria-labelledby="view-title">
+          <div class="hero-main">
+            <h1 id="view-title"><span>Usage overview</span><span id="range-label" class="range-label"></span></h1>
+            <p class="hero-number" id="total" aria-hidden="true"><span id="total-value">0</span><span id="total-unit" class="unit"></span></p>
+            <p id="total-detail" class="hero-detail"></p>
+            <p id="insight" class="insight"></p>
+          </div>
+          <dl class="slip">
+            <div><dt>Sessions</dt><dd id="session-count"></dd></div>
+            <div><dt>Projects</dt><dd id="project-count"></dd></div>
+            <div><dt>Average session</dt><dd id="average"></dd></div>
+            <div title="Total tokens divided by calendar days in the selected range, including days without usage. All time uses the first through last recorded day."><dt>Average daily tokens</dt><dd id="daily-average"></dd></div>
+            <div><dt>Busiest day</dt><dd id="busiest-day"></dd></div>
+            <div class="slip-cost"><dt>API cost</dt><dd id="cost"></dd><p id="cost-detail"></p></div>
+          </dl>
+        </section>
+
+        <section class="composition" aria-labelledby="composition-title">
+          <div class="section-head">
+            <h2 id="composition-title">What the tokens are made of</h2>
+            <p>Categories follow each tool’s local records. Reasoning may also be counted in output.</p>
+          </div>
+          <div id="breakdown-bar" class="split" role="img" aria-labelledby="composition-title"></div>
+          <ul id="breakdown" class="parts"></ul>
+        </section>
+
+        <section class="band" aria-labelledby="tape-title">
+          <div class="band-label">
+            <p class="index" aria-hidden="true">01</p>
+            <h2 id="tape-title">Daily tape</h2>
+            <p>One tick per day, taller for heavier days. Drag across the tape to choose a range.</p>
+          </div>
+          <div class="band-body">
+            <div class="tape-top">
+              <p id="tape-readout" class="tape-readout"></p>
+              <button id="tape-reset" class="text-button" type="button" hidden>Show all time</button>
+            </div>
+            <div id="tape" class="tape"></div>
+            <p id="tape-live" class="sr-only" aria-live="polite"></p>
+            <details class="data-table">
+              <summary>Read the tape as monthly values</summary>
+              <div id="monthly-values"></div>
+            </details>
+          </div>
+        </section>
+
+        <section class="band" aria-labelledby="tools-title">
+          <div class="band-label">
+            <p class="index" aria-hidden="true">02</p>
+            <h2 id="tools-title">By tool</h2>
+            <p>Select a tool to filter the whole page. Only tools with token records are listed.</p>
+          </div>
+          <div class="band-body split-body">
+            <div id="tools" class="tools"></div>
+            <div class="weekday">
+              <h3>Weekday shape</h3>
+              <div id="weekday" class="weekday-bars"></div>
+              <p id="weekday-note" class="note"></p>
+            </div>
+          </div>
+        </section>
+
+        <section class="band" aria-labelledby="projects-title">
+          <div class="band-label">
+            <p class="index" aria-hidden="true">03</p>
+            <h2 id="projects-title">By project</h2>
+            <p>Bar length compares projects. Its texture shows which tools did the work. Select a project to inspect its sessions.</p>
+          </div>
+          <div class="band-body">
+            <div id="projects" class="projects"></div>
+            <ul id="projects-legend" class="legend" aria-label="Texture key"></ul>
+            <button id="projects-more" class="text-button" type="button" hidden></button>
+          </div>
+        </section>
+
+        <section class="band" aria-labelledby="heaviest-title">
+          <div class="band-label">
+            <p class="index" aria-hidden="true">04</p>
+            <h2 id="heaviest-title">Heaviest sessions</h2>
+            <p>The five single sessions that used the most tokens in this selection.</p>
+          </div>
+          <div class="band-body">
+            <ol id="heaviest" class="heaviest"></ol>
+            <a class="text-link" href="#sessions">Browse all sessions</a>
+          </div>
+        </section>
+      </div>
+
+      <div id="sessions-view" hidden>
+        <section class="page-head" aria-labelledby="sessions-title">
+          <h1 id="sessions-title">Sessions</h1>
+          <p>Every recorded session in the current selection. Open one to see its token categories.</p>
+        </section>
+        <div class="toolbar">
+          <label class="search"><span>Search sessions</span><input id="search" type="search" placeholder="Title, project, model or tool" autocomplete="off"></label>
+          <div class="filter-group" role="group" aria-label="Sort sessions">
+            <button type="button" data-sort="tokens" aria-pressed="true">Most tokens</button>
+            <button type="button" data-sort="newest" aria-pressed="false">Newest first</button>
+          </div>
+        </div>
+        <p id="project-filter" class="chip-row" hidden>Project <strong id="selected-project"></strong><button id="clear-project" class="text-button" type="button">Clear project filter</button></p>
+        <div id="session-list" class="session-list"></div>
+        <nav class="pager" aria-label="Session pages">
+          <p id="session-range"></p>
+          <div><button id="previous" class="button quiet" type="button">Previous page</button><button id="next" class="button quiet" type="button">Next page</button></div>
+        </nav>
+      </div>
+
+      <div id="sources-view" hidden>
+        <section class="page-head" aria-labelledby="sources-title">
+          <h1 id="sources-title">Sources</h1>
+          <p>The local folders this analyzer can read. A detected folder does not mean the tool stores token counts.</p>
+        </section>
+        <div id="sources" class="sources"></div>
+        <section id="read-errors" class="issues" hidden aria-labelledby="issues-title">
+          <h2 id="issues-title">Read issues</h2>
+          <p>Some records may be missing from the totals. Check the paths above, then refresh.</p>
+          <ul id="error-list"></ul>
+        </section>
+      </div>
+    </div>
+  </main>
+
+  <footer class="colophon">
+    <p>Local usage records. Costs are API-rate estimates, not subscription charges.</p>
+    <p id="updated"></p>
+  </footer>
+
+  <dialog id="date-dialog" class="date-dialog" aria-labelledby="date-title" aria-describedby="date-help">
+    <div class="date-heading">
+      <h2 id="date-title">Date range</h2>
+      <button id="close-date" class="button quiet" type="button" aria-label="Close date picker">Close</button>
+    </div>
+    <div class="date-body">
+      <div class="date-presets" role="group" aria-label="Date presets">
+        <button type="button" data-period="today" aria-pressed="false">Today</button>
+        <button type="button" data-period="week" aria-pressed="false">This week</button>
+        <button type="button" data-period="30" aria-pressed="false">Last 30 days</button>
+        <button type="button" data-period="90" aria-pressed="false">Last 90 days</button>
+        <button type="button" data-period="year" aria-pressed="false">This year</button>
+        <button type="button" data-period="all" aria-pressed="true">All time</button>
+        <button type="button" data-period="custom" aria-pressed="false">Custom range</button>
+      </div>
+      <div class="date-calendar">
+        <div class="calendar-heading">
+          <button id="calendar-previous" class="button quiet" type="button" aria-label="Previous month">‹</button>
+          <h3 id="calendar-month" aria-live="polite"></h3>
+          <button id="calendar-next" class="button quiet" type="button" aria-label="Next month">›</button>
+        </div>
+        <div class="calendar-weekdays" aria-hidden="true"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
+        <div id="calendar-days" class="calendar-days" role="group" aria-labelledby="calendar-month"></div>
+        <p id="date-help" class="date-help" aria-live="polite">Select a start date, then an end date.</p>
+        <div class="date-fields">
+          <label>Start date<input id="date-from" type="date" required></label>
+          <label>End date<input id="date-to" type="date" required></label>
+        </div>
+      </div>
+    </div>
+    <div class="date-footer">
+      <p id="date-preview" aria-live="polite"></p>
+      <button id="cancel-date" class="button quiet" type="button">Cancel</button>
+      <button id="apply-date" class="button solid" type="button">Apply</button>
+    </div>
+  </dialog>
+
+  <dialog id="session-dialog" class="drawer" aria-labelledby="session-title">
+    <div class="drawer-body">
+      <div class="drawer-top">
+        <p id="session-tool" class="drawer-tool"></p>
+        <button id="close-dialog" class="button quiet" type="button">Close</button>
+      </div>
+      <h2 id="session-title"></h2>
+      <p id="session-total" class="drawer-number"></p>
+      <div id="session-split" class="split" role="img" aria-label="Token categories for this session"></div>
+      <dl id="session-details" class="details"></dl>
+    </div>
+  </dialog>
+</body>
+</html>