ai-usage-analyzer 0.3.2 → 0.5.0

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,199 @@
+<!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">
+        <div class="filter-group" role="group" aria-label="Period">
+          <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">30 days</button>
+          <button type="button" data-period="90" aria-pressed="false">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" hidden>Custom range</button>
+        </div>
+        <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><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="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>

package/web/style.css

@@ -0,0 +1,324 @@
+@font-face {
+  font-family: Manrope;
+  src: url('/fonts/manrope.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+}
+:root {
+  color-scheme: light;
+  --paper: #f1ede4;
+  --paper-2: #e8e3d7;
+  --raised: #f8f5ee;
+  --ink: #16140f;
+  --ink-2: #4f4a3f;
+  --ink-3: #8a8473;
+  --rule: #cfc8b8;
+  --accent: #e5401a;
+  --accent-ink: #b0300d;
+  --veil: rgb(241 237 228 / .8);
+  --scrim: rgb(22 20 15 / .5);
+  --gutter: clamp(16px, 4vw, 56px);
+  --edge: max(var(--gutter), calc((100vw - 1360px) / 2));
+}
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --paper: #12110e;
+  --paper-2: #1d1b17;
+  --raised: #1a1814;
+  --ink: #f1ede4;
+  --ink-2: #b3ad9e;
+  --ink-3: #6f695c;
+  --rule: #35312a;
+  --accent: #ff6b3d;
+  --accent-ink: #ff8a63;
+  --veil: rgb(18 17 14 / .78);
+  --scrim: rgb(0 0 0 / .6);
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html { scroll-padding-top: 88px; }
+body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 15px/1.55 Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
+button, input { font: inherit; color: inherit; }
+button, a, input, summary { -webkit-tap-highlight-color: transparent; }
+a { color: inherit; }
+button { cursor: pointer; }
+button:disabled { cursor: default; opacity: .4; }
+button, a, summary { touch-action: manipulation; }
+:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
+::selection { background: var(--accent); color: var(--paper); }
+h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
+ol, ul { list-style: none; }
+h2 { font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.035em; }
+h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
+.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.skip-link { position: fixed; top: 8px; left: 8px; z-index: 50; padding: 12px 16px; background: var(--ink); color: var(--paper); font-weight: 700; }
+.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .86em; }
+.num, .hero-number, td.numeric, .scope, .parts strong, .slip dd { font-variant-numeric: tabular-nums; }
+
+.masthead, main, .colophon { padding-inline: var(--edge); }
+.masthead { display: flex; align-items: center; gap: 12px 40px; flex-wrap: wrap; min-height: 76px; padding-block: 12px; border-bottom: 2px solid var(--ink); }
+.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 19px; font-weight: 800; letter-spacing: -.045em; text-decoration: none; }
+.brand b { font-weight: 400; color: var(--ink-2); }
+.brand img { display: block; border-radius: 3px; }
+.views { display: flex; gap: 28px; }
+.views a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 3px solid transparent; font-weight: 600; text-decoration: none; color: var(--ink-2); }
+.views a:hover { color: var(--ink); }
+.views a[aria-current='page'] { color: var(--ink); font-weight: 800; border-bottom-color: var(--accent); }
+.views .count { padding: 0 6px; border: 1px solid var(--ink-3); border-radius: 2px; font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
+.views .count:empty { display: none; }
+.masthead-actions { display: flex; gap: 8px; margin-left: auto; }
+
+.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 3px; background: transparent; font-weight: 700; letter-spacing: -.01em; transition: background-color .15s, color .15s; }
+.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.button svg .fill { fill: currentColor; stroke: none; }
+.button.solid { background: var(--ink); color: var(--paper); }
+.button.solid:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--paper); }
+:root[data-theme='dark'] .button.solid:hover:not(:disabled) { color: #12110e; }
+.button.quiet:hover:not(:disabled) { background: var(--paper-2); }
+.button.quiet[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
+.text-button, .text-link { padding: 0; border: 0; background: none; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--ink-3); }
+.text-button:hover, .text-link:hover { text-decoration-color: var(--accent); }
+.text-button { min-height: 24px; text-align: left; }
+.text-link { display: inline-block; margin-top: 20px; }
+
+.notice { margin-top: 20px; padding: 12px 16px; border: 1.5px solid var(--ink); background: var(--raised); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-weight: 600; }
+.notice:empty { display: none; }
+.notice.error { border-color: var(--accent-ink); color: var(--accent-ink); }
+.notice a { font-weight: 800; }
+
+.loading { max-width: 40rem; padding-block: clamp(72px, 18vh, 180px) 80px; }
+.loading h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -.055em; }
+.loading p { margin-top: 14px; color: var(--ink-2); }
+.progress { height: 4px; margin-top: 28px; background: var(--rule); overflow: hidden; }
+.progress span { display: block; width: 32%; height: 100%; background: var(--accent); animation: scan 1.3s cubic-bezier(.6, 0, .4, 1) infinite; }
+@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
+
+.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-block: 12px; border-bottom: 1px solid var(--rule); background: var(--paper); }
+@media (min-width: 900px) { .filters { position: sticky; top: 0; z-index: 10; margin-inline: calc(var(--edge) * -1); padding-inline: var(--edge); } }
+.filter-group { display: flex; flex-wrap: wrap; }
+.filter-group button { min-height: 44px; margin: 0 -1.5px -1.5px 0; padding: 0 14px; border: 1.5px solid var(--ink); background: transparent; font-weight: 600; transition: background-color .15s, color .15s; }
+.filter-group button:first-child { border-radius: 3px 0 0 3px; }
+.filter-group button:last-child { border-radius: 0 3px 3px 0; margin-right: 0; }
+.filter-group button:hover { background: var(--paper-2); }
+.filter-group button[aria-pressed='true'] { background: var(--ink); color: var(--paper); font-weight: 800; }
+.filter-group button:focus-visible { position: relative; z-index: 1; }
+.tool-filter button { display: inline-flex; align-items: center; gap: 8px; }
+.scope { margin-left: auto; color: var(--ink-2); font-weight: 600; }
+
+.ic { display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
+.ic-claude { --icon: url('/icons/claude.svg'); }
+.ic-codex { --icon: url('/icons/openai.svg'); }
+.ic-opencode { --icon: url('/icons/opencode.svg'); }
+.tx { display: inline-block; flex: none; width: 14px; height: 14px; box-shadow: inset 0 0 0 1.5px var(--ink); }
+.tx-0 { background: var(--ink); }
+.tx-1 { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px); }
+.tx-2 { background: radial-gradient(var(--ink) 1.3px, transparent 1.7px) 0 0 / 5px 5px; }
+.tx-3 { background: repeating-linear-gradient(0deg, var(--ink) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px); }
+.tx-4 { background: color-mix(in srgb, var(--ink) 40%, transparent); }
+.tx-5 { background: transparent; }
+.filter-group button[aria-pressed='true'] .tx { background-color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); }
+.filter-group button[aria-pressed='true'] .tx-0 { background: var(--paper); }
+.filter-group button[aria-pressed='true'] .tx-1 { background: repeating-linear-gradient(135deg, var(--paper) 0 2px, transparent 2px 5px); }
+.filter-group button[aria-pressed='true'] .tx-2 { background: radial-gradient(var(--paper) 1.3px, transparent 1.7px) 0 0 / 5px 5px; }
+.filter-group button[aria-pressed='true'] .tx-3 { background: repeating-linear-gradient(0deg, var(--paper) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, var(--paper) 0 2px, transparent 2px 5px); }
+.filter-group button[aria-pressed='true'] .tx-4 { background: color-mix(in srgb, var(--paper) 45%, transparent); }
+.filter-group button[aria-pressed='true'] .tx-5 { background: transparent; }
+
+.hero { display: grid; gap: 40px 64px; padding-block: clamp(40px, 7vw, 88px) clamp(40px, 6vw, 72px); }
+@media (min-width: 1100px) { .hero { grid-template-columns: minmax(0, 1fr) 22rem; align-items: end; } }
+#view-title { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
+.range-label { font-weight: 500; color: var(--ink-2); }
+.hero-number { margin-top: 12px; font-size: clamp(72px, 15vw, 224px); line-height: .86; font-weight: 800; letter-spacing: -.065em; }
+.hero-number .unit { margin-left: .04em; color: var(--accent); }
+.hero-detail { margin-top: 20px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
+.insight { margin-top: 6px; max-width: 46ch; color: var(--ink-2); font-size: 16px; }
+.insight:empty { display: none; }
+.slip { border-top: 2px solid var(--ink); }
+.slip > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
+.slip dt { flex: 1; display: flex; align-items: baseline; gap: 10px; color: var(--ink-2); font-weight: 600; }
+.slip dt::after { content: ''; flex: 1; border-bottom: 2px dotted var(--ink-3); transform: translateY(-.28em); }
+.slip dd { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
+.slip-cost p { flex-basis: 100%; margin-top: 2px; color: var(--ink-2); font-size: 13px; }
+
+.composition { padding-bottom: clamp(48px, 6vw, 72px); }
+.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 32px; margin-bottom: 18px; }
+.section-head p { max-width: 52ch; color: var(--ink-2); font-size: 13px; }
+.split { display: flex; gap: 2px; height: 48px; }
+.split:empty { background: var(--paper-2); }
+.seg { min-width: 2px; height: 100%; background: var(--ink); transform-origin: left; }
+.t0 { background: color-mix(in srgb, var(--ink) 100%, transparent); }
+.t1 { background: color-mix(in srgb, var(--ink) 72%, transparent); }
+.t2 { background: color-mix(in srgb, var(--ink) 48%, transparent); }
+.t3 { background: color-mix(in srgb, var(--ink) 28%, transparent); }
+.t4 { background: color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: inset 0 0 0 1px var(--ink-3); }
+.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; margin-top: 16px; }
+.parts li { display: grid; grid-template-columns: 14px 1fr; gap: 0 8px; align-items: center; }
+.parts .chip { width: 14px; height: 14px; }
+.parts span { color: var(--ink-2); font-weight: 600; }
+.parts strong { grid-column: 2; font-size: 22px; letter-spacing: -.03em; }
+.parts em { grid-column: 2; font-style: normal; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
+
+.band { display: grid; gap: 24px 56px; padding-block: clamp(36px, 5vw, 64px); border-top: 2px solid var(--ink); }
+@media (min-width: 1000px) { .band { grid-template-columns: 14rem minmax(0, 1fr); } .band-label { position: sticky; top: 92px; align-self: start; } }
+.band-label p:last-child { margin-top: 10px; max-width: 28ch; color: var(--ink-2); font-size: 13px; }
+.band-label .index { margin: 0 0 8px; color: var(--ink-2); font-size: 13px; font-weight: 800; letter-spacing: 0; }
+.split-body { display: grid; gap: 40px 56px; }
+@media (min-width: 1200px) { .split-body { grid-template-columns: minmax(0, 1fr) 17rem; } }
+.note { margin-top: 12px; color: var(--ink-2); font-size: 13px; }
+.empty { padding: 20px 0; max-width: 54ch; color: var(--ink-2); }
+.empty .text-button { display: block; margin-top: 8px; }
+
+.tape-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; min-height: 28px; margin-bottom: 36px; }
+.tape-readout { font-size: 17px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
+.tape-readout span { color: var(--ink-2); font-weight: 500; }
+.tape { position: relative; }
+.tape-plot { position: relative; display: flex; align-items: flex-end; gap: 1px; height: clamp(150px, 22vw, 240px); border-bottom: 2px solid var(--ink); cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
+.tape-plot:focus-visible { outline-offset: 8px; }
+.tick { flex: 1 1 0; min-width: 1px; height: var(--h); background: var(--ink); transform-origin: bottom; }
+.tick.zero { height: 2px; background: var(--ink-3); }
+.tick.peak { background: var(--accent); }
+.veil { position: absolute; top: 0; bottom: 0; background: var(--veil); pointer-events: none; }
+.pick { position: absolute; top: -10px; bottom: -2px; border-inline: 3px solid var(--accent); pointer-events: none; }
+.pick::before, .pick::after { content: ''; position: absolute; top: 50%; width: 9px; height: 34px; margin-top: -17px; background: var(--accent); }
+.pick::before { left: -3px; }
+.pick::after { right: -3px; }
+.cursor { position: absolute; top: -10px; bottom: 0; width: 1px; background: var(--ink); pointer-events: none; }
+.peak-flag { position: absolute; top: -30px; white-space: nowrap; color: var(--accent-ink); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; pointer-events: none; }
+.tape-axis { position: relative; height: 30px; margin-top: 8px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
+.tape-axis span { position: absolute; top: 0; padding-left: 5px; border-left: 1px solid var(--ink-3); white-space: nowrap; }
+.data-table { margin-top: 18px; }
+.data-table summary { display: inline-block; min-height: 32px; font-weight: 700; cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--ink-3); }
+.data-table[open] summary { margin-bottom: 12px; }
+
+.tools { border-bottom: 1px solid var(--rule); }
+.tool-row { display: block; width: 100%; padding: 18px 12px 20px; border: 0; border-top: 1px solid var(--rule); background: transparent; text-align: left; transition: background-color .15s; }
+.tool-row:hover { background: var(--paper-2); }
+.tool-row[aria-pressed='true'] { background: var(--raised); box-shadow: inset 0 0 0 2px var(--ink); }
+.tool-row:focus-visible { position: relative; z-index: 1; }
+.tool-head { display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap; }
+.tool-head .name { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.035em; }
+.tool-head .state { padding: 0 6px; border: 1px solid var(--ink); font-size: 12px; font-weight: 700; }
+.tool-head strong { margin-left: auto; font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
+.tool-row .bar, .tool-row .fill, .tool-meta { display: block; }
+.bar { height: 18px; margin-top: 12px; background: var(--paper-2); }
+.bar .fill { height: 100%; transform-origin: left; box-shadow: inset 0 0 0 1.5px var(--ink); }
+.tool-meta { margin-top: 8px; color: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.weekday h3 { margin-bottom: 14px; }
+.weekday-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 170px; }
+.wd { display: grid; grid-template-rows: 1fr auto; gap: 8px; min-width: 0; }
+.wd-track { display: flex; align-items: flex-end; border-bottom: 2px solid var(--ink); }
+.wd-bar { width: 100%; min-height: 2px; background: var(--ink); transform-origin: bottom; }
+.wd.top .wd-bar { background: var(--accent); }
+.wd-label { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2); }
+.wd.top .wd-label { color: var(--accent-ink); }
+
+.projects { border-top: 1px solid var(--rule); }
+.proj-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 5.5rem 3.5rem; grid-template-areas: 'rank name tokens share' '. bar bar bar'; gap: 8px 16px; align-items: baseline; padding: 14px 0 16px; border-bottom: 1px solid var(--rule); }
+@media (min-width: 760px) { .proj-row { grid-template-columns: 2rem minmax(0, 15rem) minmax(0, 1fr) 5.5rem 3.5rem; grid-template-areas: 'rank name bar tokens share'; align-items: center; } }
+.proj-rank { grid-area: rank; color: var(--ink-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.proj-name { grid-area: name; min-width: 0; display: flex; flex-direction: column; }
+.proj-name .text-button { font-size: 16px; }
+.proj-name .path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 12px; }
+.stack { grid-area: bar; display: flex; height: 20px; gap: 1px; }
+.stack .part { height: 100%; min-width: 2px; transform-origin: left; box-shadow: inset 0 0 0 1.5px var(--ink); }
+.proj-tokens { grid-area: tokens; text-align: right; font-size: 17px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
+.proj-share { grid-area: share; text-align: right; color: var(--ink-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
+.legend li { display: inline-flex; align-items: center; gap: 8px; }
+.legend:empty { display: none; }
+#projects-more { margin-top: 18px; }
+
+.heaviest { border-top: 1px solid var(--rule); }
+.heavy-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 4px 12px; width: 100%; padding: 18px 8px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; text-align: left; align-items: baseline; transition: background-color .15s; }
+@media (min-width: 760px) { .heavy-row { grid-template-columns: 2rem 12rem minmax(0, 1fr); gap: 20px; } }
+.heavy-row:hover { background: var(--paper-2); }
+.heavy-rank { color: var(--ink-2); font-size: 13px; font-weight: 700; }
+.heavy-tokens { font-size: clamp(32px, 4.4vw, 48px); line-height: 1; font-weight: 800; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
+.heavy-title { grid-column: 2; font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
+@media (min-width: 760px) { .heavy-title { grid-column: 3; } }
+.heavy-meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; color: var(--ink-2); font-size: 13px; }
+@media (min-width: 760px) { .heavy-meta { grid-column: 3; } .heavy-title { grid-row: 1; } .heavy-meta { grid-row: 2; } .heavy-tokens { grid-row: 1 / span 2; align-self: center; } .heavy-rank { grid-row: 1 / span 2; align-self: center; } }
+.heavy-meta .tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
+
+.page-head { padding-block: clamp(36px, 6vw, 72px) 28px; }
+.page-head h1 { font-size: clamp(48px, 9vw, 112px); line-height: .9; font-weight: 800; letter-spacing: -.065em; }
+.page-head p { margin-top: 16px; max-width: 54ch; color: var(--ink-2); font-size: 16px; }
+.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; padding-block: 16px; border-top: 2px solid var(--ink); }
+.search { display: grid; gap: 4px; flex: 1 1 18rem; max-width: 34rem; font-size: 12px; font-weight: 700; color: var(--ink-2); }
+.search input { width: 100%; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--raised); color: var(--ink); font-size: 15px; font-weight: 500; }
+.search input::placeholder { color: var(--ink-2); opacity: 1; }
+.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 0 14px; color: var(--ink-2); font-weight: 600; }
+.chip-row strong { color: var(--ink); }
+
+table { width: 100%; border-collapse: collapse; }
+th { padding: 10px 12px 10px 0; border-bottom: 2px solid var(--ink); text-align: left; font-size: 12px; font-weight: 800; color: var(--ink-2); }
+td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
+th.numeric, td.numeric { text-align: right; padding-right: 0; padding-left: 12px; }
+tbody tr:hover { background: var(--paper-2); }
+.session-title-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.session-title-cell .text-button { font-size: 15px; }
+.cell-detail { color: var(--ink-2); font-size: 12px; }
+.mobile-session-meta { display: none; color: var(--ink-2); font-size: 12px; font-weight: 600; }
+.tool-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
+.token-cell { display: grid; justify-items: end; gap: 6px; min-width: 6.5rem; }
+.token-cell strong { font-size: 16px; letter-spacing: -.02em; }
+.mini { width: 100%; height: 5px; background: var(--paper-2); }
+.mini span { display: block; height: 100%; background: var(--ink); }
+.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; }
+.pager p { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
+.pager div { display: flex; gap: 8px; }
+
+.sources { border-top: 2px solid var(--ink); }
+.sources td { padding-block: 16px; }
+.source-path { display: block; max-width: 56ch; color: var(--ink-2); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
+.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
+.status::before { content: ''; width: 12px; height: 12px; border: 2px solid var(--ink); }
+.status.detected::before { background: var(--ink); }
+.issues { margin-top: 40px; padding: 20px; border: 1.5px solid var(--accent-ink); }
+.issues h2 { color: var(--accent-ink); font-size: 18px; }
+.issues p { margin-top: 4px; color: var(--ink-2); }
+.issues ul { margin-top: 12px; display: grid; gap: 6px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; }
+
+.colophon { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 28px 32px; border-top: 2px solid var(--ink); color: var(--ink-2); font-size: 13px; font-weight: 600; }
+main { padding-bottom: 56px; }
+
+dialog.drawer { width: min(560px, 100%); max-width: 100%; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 2px solid var(--ink); background: var(--raised); color: var(--ink); overflow-y: auto; }
+dialog.drawer::backdrop { background: var(--scrim); }
+.drawer-body { padding: 20px clamp(20px, 4vw, 36px) 40px; }
+.drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 36px; }
+.drawer-tool { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
+.drawer h2 { font-size: clamp(22px, 4vw, 28px); letter-spacing: -.04em; line-height: 1.12; }
+.drawer-number { margin: 24px 0 16px; font-size: clamp(56px, 12vw, 88px); line-height: .9; font-weight: 800; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
+.drawer-number small { margin-left: 8px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
+.drawer .split { height: 28px; }
+.details { margin-top: 28px; border-top: 2px solid var(--ink); }
+.details > div { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
+.details dt { color: var(--ink-2); font-weight: 600; }
+.details dd { font-weight: 700; font-variant-numeric: tabular-nums; }
+.details .swatch { display: inline-block; vertical-align: -1px; width: 11px; height: 11px; margin-right: 8px; }
+
+@media (max-width: 899px) {
+  .masthead { gap: 4px 16px; }
+  .views { order: 3; flex-basis: 100%; gap: 22px; }
+  .scope { margin-left: 0; flex-basis: 100%; }
+  .session-table thead, .session-table th:nth-child(2), .session-table td:nth-child(2), .session-table th:nth-child(3), .session-table td:nth-child(3), .session-table th:nth-child(5), .session-table td:nth-child(5) { display: none; }
+  .mobile-session-meta { display: block; }
+  .sources-table th:nth-child(4), .sources-table td:nth-child(4) { display: none; }
+}
+@media (max-width: 540px) {
+  .masthead-actions { flex-basis: 100%; margin-left: 0; }
+  .masthead-actions .button { flex: 1; }
+  .tool-head strong { flex-basis: 100%; margin-left: 0; }
+  .details > div { grid-template-columns: 1fr; gap: 0; }
+  .sources-table thead { display: none; }
+  .sources-table, .sources-table tbody, .sources-table tr, .sources-table td { display: block; }
+  .sources-table td { padding: 0; border: 0; }
+  .sources-table tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
+  .sources-table td + td { margin-top: 4px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
+  .progress span { width: 100%; animation: none; opacity: .5; }
+}