ccc-notifier 0.8.0 → 0.9.0

package/README.md

@@ -19,7 +19,7 @@ in 1.2k(cache 40%) / out 480 · 📁 my-app · 今日: $1.85
 
 - Claude Codeの応答完了ごとに、USD・JPYの概算をOS通知またはSlackへ送ります
 - プロンプトと概算をローカルへ保存し、あとから検索・集計できます
-- 日・週・月の推移やモデル別・プロジェクト別の内訳をHTMLダッシュボードで確認できます
+- 日・週・月の推移やモデル別・プロジェクト別の内訳をHTMLダッシュボードで確認できます。金額とあわせて**トークン使用量**も表示し、推移チャートは金額/トークンの軸切替つきです
 - 月予算を設定し、今月の使用率を確認できます
 - 通知を一時停止しても、履歴の記録は続けられます
 - Codex CLIも任意で追加し、Claude Codeと同じダッシュボードで確認できます

package/dist/{budget-U37CCG4Y.js → budget-KLRUKU6V.js}

@@ -2,7 +2,7 @@
 import {
   formatJPY,
   formatUSD
-} from "./chunk-XOGYLFX3.js";
+} from "./chunk-OHTPBABH.js";
 import {
   currentMonthTotals,
   paths,

package/dist/{chunk-TTD3BGOL.js → chunk-2XOKH54N.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-DGXUSPS4.js";
 import {
   formatSummary
-} from "./chunk-XOGYLFX3.js";
+} from "./chunk-OHTPBABH.js";
 
 // src/notify/os.ts
 import { spawn } from "child_process";

package/dist/{chunk-DSTGXYSY.js → chunk-6GWPAYJQ.js}

@@ -18,7 +18,7 @@ import {
   formatTokens,
   formatUSD,
   modelDisplayName
-} from "./chunk-XOGYLFX3.js";
+} from "./chunk-OHTPBABH.js";
 import {
   paths,
   readConfig,
@@ -217,7 +217,20 @@ function turnBySlot(rec, map) {
   return bs;
 }
 function emptyTotals() {
-  return { usd: 0, jpy: 0, turns: 0 };
+  return { usd: 0, jpy: 0, turns: 0, tin: 0, tout: 0, tcache: 0 };
+}
+function turnTokenTotals(rec) {
+  let tin = 0;
+  let tout = 0;
+  let tcache = 0;
+  for (const b of [rec.tokens, rec.sidechainTokens, rec.subagents?.tokens]) {
+    if (!b) continue;
+    const cache = b.cacheRead + b.cacheWrite5m + b.cacheWrite1h;
+    tin += b.input + cache;
+    tcache += cache;
+    tout += b.output;
+  }
+  return { tin, tout, tcache };
 }
 function buildTurnEmbed(rec, map) {
   const raw = String(rec.prompt ?? "");
@@ -258,7 +271,11 @@ function buildTurnEmbed(rec, map) {
     bs: turnBySlot(rec, map),
     pr: text,
     tr: truncated,
-    sa
+    sa,
+    tk: (() => {
+      const t = turnTokenTotals(rec);
+      return [t.tin, t.tout, t.tcache];
+    })()
   };
   if (rec.source === "codex") out.sc = "codex";
   if (rec.source === "codex" && rec.subagentActivity) {
@@ -281,28 +298,29 @@ function computeKpis(turns) {
   const week = emptyTotals();
   const month = emptyTotals();
   const all = emptyTotals();
+  const add = (t, usd, jpy, tk) => {
+    t.usd += usd;
+    t.jpy += jpy;
+    t.turns += 1;
+    t.tin += tk.tin;
+    t.tout += tk.tout;
+    t.tcache += tk.tcache;
+  };
   for (const rec of turns) {
     const usd = turnTotalUSD(rec);
     const jpy = turnTotalJPY(rec);
-    all.usd += usd;
-    all.jpy += jpy;
-    all.turns += 1;
+    const tk = turnTokenTotals(rec);
+    add(all, usd, jpy, tk);
     const dt = new Date(rec.ts);
     if (Number.isNaN(dt.getTime())) continue;
     if (dt.getFullYear() === y && dt.getMonth() === mo && dt.getDate() === d) {
-      today.usd += usd;
-      today.jpy += jpy;
-      today.turns += 1;
+      add(today, usd, jpy, tk);
     }
     if (dt.getTime() >= weekCutoff) {
-      week.usd += usd;
-      week.jpy += jpy;
-      week.turns += 1;
+      add(week, usd, jpy, tk);
     }
     if (dt.getFullYear() === y && dt.getMonth() === mo) {
-      month.usd += usd;
-      month.jpy += jpy;
-      month.turns += 1;
+      add(month, usd, jpy, tk);
     }
   }
   return { today, week, month, all };
@@ -360,9 +378,11 @@ section.card > .note{color:var(--muted); font-size:12px; margin:0 0 14px;}
 .sel-label b{color:var(--ink); font-weight:640;}
 
 .legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin:2px 0 14px;}
+.legend[hidden]{display:none;}
 .legend-item{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink2);}
 .swatch{display:inline-block; width:11px; height:11px; border-radius:3px; flex:0 0 auto;}
 .k1{background:var(--s1);} .k2{background:var(--s2);} .k3{background:var(--s3);} .k4{background:var(--s4);}
+.ktin{background:var(--s1);} .ktcache{background:var(--sother);} .ktout{background:var(--s3);}
 .k5{background:var(--s5);} .k6{background:var(--s6);} .k7{background:var(--s7);} .k8{background:var(--s8);} .kother{background:var(--sother);}
 
 .budget-bar{height:12px; background:var(--plane); border:1px solid var(--border); border-radius:7px; overflow:hidden; margin:12px 0;}
@@ -380,6 +400,7 @@ section.card > .note{color:var(--muted); font-size:12px; margin:0 0 14px;}
 .chart-scroll{overflow-x:auto;}
 .seg.s1{fill:var(--s1);} .seg.s2{fill:var(--s2);} .seg.s3{fill:var(--s3);} .seg.s4{fill:var(--s4);}
 .seg.s5{fill:var(--s5);} .seg.s6{fill:var(--s6);} .seg.s7{fill:var(--s7);} .seg.s8{fill:var(--s8);} .seg.sother{fill:var(--sother);}
+.seg.tin{fill:var(--s1);} .seg.tcache{fill:var(--sother);} .seg.tout{fill:var(--s3);}
 .seg.dim{opacity:0.28;}
 .grid-line{stroke:var(--grid); stroke-width:1;}
 .axis-line{stroke:var(--axis); stroke-width:1;}
@@ -469,6 +490,13 @@ var APP_JS = `<script>
     if(v >= 1) return '\xA5' + Math.round(v).toLocaleString('en-US');
     return '\xA5' + (Math.round(v * 10) / 10);
   }
+  function formatTok(n){
+    var v = n || 0;
+    if(v < 1000) return String(v);
+    if(v < 1e6) return (v / 1000).toFixed(1) + 'k';
+    if(v < 1e9) return (v / 1e6).toFixed(1) + 'M';
+    return (v / 1e9).toFixed(1) + 'B';
+  }
 
   // ---- \u65E5\u4ED8/\u30D0\u30B1\u30C3\u30C8(\u30ED\u30FC\u30AB\u30EBTZ)----
   function pad(n){ return (n < 10 ? '0' : '') + n; }
@@ -506,6 +534,9 @@ var APP_JS = `<script>
   // \u65E2\u5B9A 'all'\u3002sessionStorage \u306B\u4FDD\u5B58\u3057\u81EA\u52D5\u30EA\u30ED\u30FC\u30C9(meta refresh)\u3092\u8DE8\u3044\u3067\u7DAD\u6301\u3059\u308B(cccn-gran \u3068\u540C\u3058\u4ED5\u7D44\u307F)\u3002
   var HAS_CODEX = document.querySelectorAll('[data-src]').length > 0;
   var SRC = ssGet('cccn-src'); if(['all','claude','codex'].indexOf(SRC) < 0) SRC = 'all';
+  // \u30C1\u30E3\u30FC\u30C8\u306E\u7E26\u8EF8\u30E1\u30C8\u30EA\u30AF\u30B9(\u91D1\u984D / \u30C8\u30FC\u30AF\u30F3)\u3002\u4ED6\u306E\u8868\u793A(KPI\u30FB\u5185\u8A33\u30FB\u5C65\u6B74)\u306F\u5E38\u306B\u91D1\u984D\u304C\u4E3B\u5F79\u306E\u307E\u307E\u3002
+  var MET = ssGet('cccn-metric'); if(['usd','tok'].indexOf(MET) < 0) MET = 'usd';
+  function setMet(m){ MET = m; ssSet('cccn-metric', m); }
   // \u8FF0\u8A9E: claude \u2192 sc \u306A\u3057 / codex \u2192 sc==='codex' / all \u2192 \u5168\u4EF6\u3002Codex \u7121\u3057(\u30C1\u30C3\u30D7\u7121\u3057)\u306A\u3089\u5E38\u306B\u5168\u4EF6\u3002
   function activeTurns(){
     if(!HAS_CODEX || SRC === 'all') return turns;
@@ -542,10 +573,13 @@ var APP_JS = `<script>
       var k = bucketKey(tn.t, gran);
       if(k === null) continue;
       var b = map[k];
-      if(!b){ b = map[k] = { key:k, total:0, turns:0, bs:{} }; keys.push(k); }
+      if(!b){ b = map[k] = { key:k, total:0, turns:0, bs:{}, tin:0, tout:0, tcache:0, tokTotal:0 }; keys.push(k); }
       b.turns++;
       var bs = tn.bs || {};
       for(var s in bs){ if(bs.hasOwnProperty(s)){ b.bs[s] = (b.bs[s]||0) + bs[s]; b.total += bs[s]; } }
+      var tk = tn.tk || [0,0,0];
+      b.tin += tk[0]; b.tout += tk[1]; b.tcache += tk[2];
+      b.tokTotal += tk[0] + tk[1];
     }
     keys.sort();
     return keys.map(function(k){ return map[k]; });
@@ -614,8 +648,9 @@ var APP_JS = `<script>
     var plotW = band * n;
     var W = ml + plotW + mr;
 
+    var tokMode = MET === 'tok';
     var maxTotal = 0;
-    buckets.forEach(function(b){ if(b.total > maxTotal) maxTotal = b.total; });
+    buckets.forEach(function(b){ var v = tokMode ? b.tokTotal : b.total; if(v > maxTotal) maxTotal = v; });
     var niceMax = niceCeil(maxTotal);
     var yscale = plotH / niceMax;
     // \u9078\u629E\u4E2D\u30D0\u30B1\u30C3\u30C8\u304C\u73FE\u5728\u306E\u7C92\u5EA6\u306B\u5B58\u5728\u3059\u308B\u3068\u304D\u3060\u3051\u4ED6\u3092\u6DE1\u8272\u5316\u3059\u308B(\u30C7\u30FC\u30BF\u7121\u3057\u306E\u65E5\u3092\u9078\u3076\u3068
@@ -624,7 +659,7 @@ var APP_JS = `<script>
     for(var sp=0; sp<buckets.length; sp++){ if(buckets[sp].key === SEL){ selPresent = true; break; } }
 
     var svg = svgEl('svg', { 'class':'chart', viewBox:'0 0 ' + W + ' ' + H, role:'img',
-      'aria-label':'\u30B3\u30B9\u30C8\u7A4D\u307F\u4E0A\u3052\u68D2\u30B0\u30E9\u30D5', preserveAspectRatio:'xMidYMid meet' });
+      'aria-label':(tokMode ? '\u30C8\u30FC\u30AF\u30F3\u7A4D\u307F\u4E0A\u3052\u68D2\u30B0\u30E9\u30D5' : '\u30B3\u30B9\u30C8\u7A4D\u307F\u4E0A\u3052\u68D2\u30B0\u30E9\u30D5'), preserveAspectRatio:'xMidYMid meet' });
     svg.setAttribute('width', String(W));
     svg.setAttribute('height', String(H));
 
@@ -634,7 +669,7 @@ var APP_JS = `<script>
       var yy = f2(baseY - val * yscale);
       svg.appendChild(svgEl('line', { 'class':'grid-line', x1:ml, y1:yy, x2:W-mr, y2:yy }));
       var lbl = svgEl('text', { 'class':'tick-label', x:ml-8, y:yy+4, 'text-anchor':'end' });
-      lbl.textContent = formatUSD(val);
+      lbl.textContent = tokMode ? formatTok(val) : formatUSD(val);
       svg.appendChild(lbl);
     }
 
@@ -647,9 +682,16 @@ var APP_JS = `<script>
       var x = cx - barW/2;
       var dim = (SEL !== null && selPresent && b.key !== SEL);
       var cumV = 0;
-      for(var j=0;j<slotOrder.length;j++){
-        var slot = slotOrder[j];
-        var v = b.bs[slot] || 0;
+      var segList;
+      if(tokMode){
+        segList = [ ['tcache', b.tcache], ['tin', b.tin - b.tcache], ['tout', b.tout] ];
+      } else {
+        segList = [];
+        for(var j0=0;j0<slotOrder.length;j0++){ segList.push(['s'+slotOrder[j0], b.bs[slotOrder[j0]] || 0]); }
+      }
+      for(var j=0;j<segList.length;j++){
+        var segCls = segList[j][0];
+        var v = segList[j][1];
         if(v <= 0) continue;
         var vTop = cumV + v;
         var yTop = baseY - vTop * yscale;
@@ -658,10 +700,11 @@ var APP_JS = `<script>
         cumV = vTop;
         var h = yBot - yTop;
         if(h <= 0.4) continue;
-        var rect = svgEl('rect', { 'class':'seg s'+slot+(dim?' dim':''), x:f2(x), y:f2(yTop), width:f2(barW), height:f2(h) });
+        var rect = svgEl('rect', { 'class':'seg '+segCls+(dim?' dim':''), x:f2(x), y:f2(yTop), width:f2(barW), height:f2(h) });
         svg.appendChild(rect);
       }
-      if(i % xStep === 0 || i === n-1){
+      // \u6700\u7D42\u30E9\u30D9\u30EB\u306F\u5E38\u306B\u51FA\u3059\u3002\u9593\u5F15\u304D\u30E9\u30D9\u30EB\u306F\u6700\u7D42\u30E9\u30D9\u30EB\u3068\u96A3\u63A5\u3057\u3066\u91CD\u306A\u3089\u306A\u3044\u4F4D\u7F6E\u3060\u3051\u306B\u51FA\u3059\u3002
+      if(i === n-1 || (i % xStep === 0 && (n-1) - i >= xStep)){
         var xl = svgEl('text', { 'class':'tick-label', x:f2(cx), y:baseY+16, 'text-anchor':'middle' });
         xl.textContent = bucketLabel(b.key, GRAN);
         svg.appendChild(xl);
@@ -698,6 +741,15 @@ var APP_JS = `<script>
     lastRenderedGran = GRAN;
   }
 
+  function tipRow(keyCls, nameText, valText){
+    var row = document.createElement('div'); row.className = 'tip-row';
+    var key = document.createElement('span'); key.className = 'tip-key ' + keyCls;
+    var name = document.createElement('span'); name.className = 'tip-name'; name.textContent = nameText;
+    var val = document.createElement('span'); val.className = 'tip-val'; val.textContent = valText;
+    row.appendChild(key); row.appendChild(name); row.appendChild(val);
+    return row;
+  }
+
   // hover\u5185\u8A33\u306F\u3001\u9078\u629E\u4E2D\u306E\u65E5/\u9031/\u6708\u306B\u304A\u3051\u308B\u91D1\u984D\u306E\u5927\u304D\u3044\u9806\u306B\u8AAD\u3080\u3002\u7A4D\u307F\u4E0A\u3052\u9806\u30FB\u8272\u306F
   // slotOrder\u306E\u307E\u307E\u56FA\u5B9A\u3057\u3001\u540C\u984D\u3082slotOrder\u3067\u6C7A\u5B9A\u7684\u306B\u4E26\u3079\u308B\u3002
   function tooltipSlotOrder(bucket){
@@ -714,19 +766,24 @@ var APP_JS = `<script>
     if(!tip) return;
     clearNode(tip);
     var h = document.createElement('div'); h.className = 'tip-title';
-    h.textContent = periodText(bucket.key, GRAN) + '  \u5408\u8A08 ' + formatUSD(bucket.total) + '  \xB7  ' + bucket.turns + ' \u30BF\u30FC\u30F3';
-    tip.appendChild(h);
-    var tipOrder = tooltipSlotOrder(bucket);
-    for(var j=0;j<tipOrder.length;j++){
-      var slot = tipOrder[j];
-      var v = bucket.bs[slot] || 0;
-      if(v <= 0) continue;
-      var row = document.createElement('div'); row.className = 'tip-row';
-      var key = document.createElement('span'); key.className = 'tip-key k'+slot;
-      var name = document.createElement('span'); name.className = 'tip-name'; name.textContent = slotName[slot] || slot;
-      var val = document.createElement('span'); val.className = 'tip-val'; val.textContent = formatUSD(v);
-      row.appendChild(key); row.appendChild(name); row.appendChild(val);
-      tip.appendChild(row);
+    if(MET === 'tok'){
+      h.textContent = periodText(bucket.key, GRAN) + '  \u5408\u8A08 ' + formatTok(bucket.tokTotal) + ' tokens  \xB7  ' + bucket.turns + ' \u30BF\u30FC\u30F3';
+      tip.appendChild(h);
+      var segs = [ ['ktout', '\u51FA\u529B', bucket.tout], ['ktin', '\u5165\u529B(\u30AD\u30E3\u30C3\u30B7\u30E5\u4EE5\u5916)', bucket.tin - bucket.tcache], ['ktcache', '\u30AD\u30E3\u30C3\u30B7\u30E5(read+write)', bucket.tcache] ];
+      for(var j2=0;j2<segs.length;j2++){
+        if(segs[j2][2] <= 0) continue;
+        tip.appendChild(tipRow(segs[j2][0], segs[j2][1], formatTok(segs[j2][2])));
+      }
+    } else {
+      h.textContent = periodText(bucket.key, GRAN) + '  \u5408\u8A08 ' + formatUSD(bucket.total) + '  \xB7  ' + bucket.turns + ' \u30BF\u30FC\u30F3';
+      tip.appendChild(h);
+      var tipOrder = tooltipSlotOrder(bucket);
+      for(var j=0;j<tipOrder.length;j++){
+        var slot = tipOrder[j];
+        var v = bucket.bs[slot] || 0;
+        if(v <= 0) continue;
+        tip.appendChild(tipRow('k'+slot, slotName[slot] || slot, formatUSD(v)));
+      }
     }
     tip.hidden = false;
     positionTip(evt);
@@ -746,23 +803,29 @@ var APP_JS = `<script>
   function renderByModel(sub){
     if(!modelEl) return;
     clearNode(modelEl);
-    var usd = {}, jpy = {}, tcount = {}, total = 0;
+    var usd = {}, jpy = {}, tcount = {}, ttok = {}, total = 0;
     sub.forEach(function(tn){
       var bs = tn.bs || {}, fx = tn.fx || 0;
-      for(var s in bs){ if(bs.hasOwnProperty(s) && bs[s] > 0){
+      var tk = tn.tk || [0,0,0];
+      // \u5358\u4FA1\u4E0D\u660E\u30E2\u30C7\u30EB\u30FB\u6599\u91D10\u306Echild\u306F bs \u306E\u5024\u304C 0 \u306E\u307E\u307E\u767B\u5834\u3059\u308B\u3002\u91D1\u984D 0 \u3067\u3082\u53C2\u52A0\u3068\u3057\u3066\u96C6\u8A08\u3057\u3001
+      // \u30C8\u30FC\u30AF\u30F3\u3060\u3051\u306E\u5229\u7528\u304C\u30E2\u30C7\u30EB\u5225\u8868\u304B\u3089\u6D88\u3048\u306A\u3044\u3088\u3046\u306B\u3059\u308B(\u8868\u793A\u6761\u4EF6\u5074\u3067 usd \u3082 tok \u3082 0 \u306E\u884C\u3092\u843D\u3068\u3059)\u3002
+      for(var s in bs){ if(bs.hasOwnProperty(s)){
         usd[s] = (usd[s]||0) + bs[s]; jpy[s] = (jpy[s]||0) + bs[s]*fx; total += bs[s];
         tcount[s] = (tcount[s]||0) + 1;
+        // \u30BF\u30FC\u30F3\u5217\u3068\u540C\u3058\u53C2\u52A0\u30AB\u30A6\u30F3\u30C8\u65B9\u5F0F: \u305D\u306E\u30E2\u30C7\u30EB\u304C\u767B\u5834\u3057\u305F\u30BF\u30FC\u30F3\u306E\u5168\u91CF\u3092\u5404\u30E2\u30C7\u30EB\u3078\u8A08\u4E0A(\u91CD\u8907\u3042\u308A)\u3002
+        // \u30EC\u30B3\u30FC\u30C9\u306B\u30E2\u30C7\u30EB\u5225\u30C8\u30FC\u30AF\u30F3\u306F\u7121\u3044\u305F\u3081\u3001\u30BF\u30FC\u30F3\u5185\u306E\u30E2\u30C7\u30EB\u9593\u5206\u5272\u306F\u3057\u306A\u3044\u3002
+        ttok[s] = (ttok[s]||0) + tk[0] + tk[1];
       } }
     });
     var table = document.createElement('table'); table.className = 'data-table';
     var thead = document.createElement('thead');
-    thead.innerHTML = '<tr><th>\u30E2\u30C7\u30EB / Model</th><th class="c-num">\u30BF\u30FC\u30F3</th><th class="c-num">$</th><th class="c-num">\xA5</th><th class="c-num">\u69CB\u6210\u6BD4</th></tr>';
+    thead.innerHTML = '<tr><th>\u30E2\u30C7\u30EB / Model</th><th class="c-num">\u30BF\u30FC\u30F3</th><th class="c-num">$</th><th class="c-num">\xA5</th><th class="c-num">tokens</th><th class="c-num">\u69CB\u6210\u6BD4</th></tr>';
     table.appendChild(thead);
     var tbody = document.createElement('tbody');
     var any = false;
     for(var j=0;j<slotOrder.length;j++){
       var slot = slotOrder[j];
-      if(!(usd[slot] > 0)) continue;
+      if(!(usd[slot] > 0 || (ttok[slot]||0) > 0)) continue;
       any = true;
       var share = total > 0 ? (usd[slot]/total*100) : 0;
       var tr = document.createElement('tr');
@@ -772,8 +835,9 @@ var APP_JS = `<script>
       var c2 = document.createElement('td'); c2.className = 'c-num'; c2.textContent = String(tcount[slot]||0);
       var c3 = document.createElement('td'); c3.className = 'c-num'; c3.textContent = formatUSD(usd[slot]);
       var c4 = document.createElement('td'); c4.className = 'c-num'; c4.textContent = formatJPY(jpy[slot]);
+      var c4t = document.createElement('td'); c4t.className = 'c-num'; c4t.textContent = formatTok(ttok[slot]||0);
       var c5 = document.createElement('td'); c5.className = 'c-num'; c5.textContent = share.toFixed(1) + '%';
-      tr.appendChild(c1); tr.appendChild(c2); tr.appendChild(c3); tr.appendChild(c4); tr.appendChild(c5);
+      tr.appendChild(c1); tr.appendChild(c2); tr.appendChild(c3); tr.appendChild(c4); tr.appendChild(c4t); tr.appendChild(c5);
       tbody.appendChild(tr);
     }
     table.appendChild(tbody);
@@ -791,15 +855,16 @@ var APP_JS = `<script>
       var bs = tn.bs || {}, fx = tn.fx || 0, total = 0;
       for(var s in bs){ if(bs.hasOwnProperty(s)) total += bs[s]; }
       var name = tn.p || '(unknown)';
-      var a = agg[name] || (agg[name] = { usd:0, jpy:0, turns:0 });
-      a.usd += total; a.jpy += total*fx; a.turns++;
+      var tk = tn.tk || [0,0,0];
+      var a = agg[name] || (agg[name] = { usd:0, jpy:0, turns:0, tok:0 });
+      a.usd += total; a.jpy += total*fx; a.turns++; a.tok += tk[0] + tk[1];
     });
-    var rows = Object.keys(agg).map(function(name){ var a = agg[name]; return { name:name, usd:a.usd, jpy:a.jpy, turns:a.turns }; });
+    var rows = Object.keys(agg).map(function(name){ var a = agg[name]; return { name:name, usd:a.usd, jpy:a.jpy, turns:a.turns, tok:a.tok }; });
     rows.sort(function(a,b){ return b.usd - a.usd || a.name.localeCompare(b.name); });
     if(rows.length === 0){ var p = document.createElement('p'); p.className='empty-hint'; p.textContent='\u3053\u306E\u671F\u9593\u306E\u30C7\u30FC\u30BF\u306F\u3042\u308A\u307E\u305B\u3093'; projEl.appendChild(p); return; }
     var table = document.createElement('table'); table.className = 'data-table';
     var thead = document.createElement('thead');
-    thead.innerHTML = '<tr><th>\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8 / Project</th><th class="c-num">\u30BF\u30FC\u30F3</th><th class="c-num">$</th><th class="c-num">\xA5</th></tr>';
+    thead.innerHTML = '<tr><th>\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8 / Project</th><th class="c-num">\u30BF\u30FC\u30F3</th><th class="c-num">$</th><th class="c-num">\xA5</th><th class="c-num">tokens</th></tr>';
     table.appendChild(thead);
     var tbody = document.createElement('tbody');
     rows.forEach(function(r){
@@ -808,7 +873,8 @@ var APP_JS = `<script>
       var c2 = document.createElement('td'); c2.className='c-num'; c2.textContent = String(r.turns);
       var c3 = document.createElement('td'); c3.className='c-num'; c3.textContent = formatUSD(r.usd);
       var c4 = document.createElement('td'); c4.className='c-num'; c4.textContent = formatJPY(r.jpy);
-      tr.appendChild(c1); tr.appendChild(c2); tr.appendChild(c3); tr.appendChild(c4);
+      var c5 = document.createElement('td'); c5.className='c-num'; c5.textContent = formatTok(r.tok);
+      tr.appendChild(c1); tr.appendChild(c2); tr.appendChild(c3); tr.appendChild(c4); tr.appendChild(c5);
       tbody.appendChild(tr);
     });
     table.appendChild(tbody);
@@ -894,14 +960,21 @@ var APP_JS = `<script>
   var kpiCards = document.querySelectorAll('.kpi .stat');
   var heroValueEl = document.querySelector('.hero .hero-value');
   var heroMetaEls = document.querySelectorAll('.hero .hero-meta');
-  var heroSaEl = heroMetaEls.length > 1 ? heroMetaEls[1] : null; // SA \u884C(SA \u3042\u308A\u306E\u3068\u304D\u3060\u3051\u30B5\u30FC\u30D0\u304C\u63CF\u753B)
+  var heroTokEl = document.querySelector('.hero .hero-tok');
+  var heroSaEl = document.querySelector('.hero .hero-sa'); // SA \u884C(SA \u3042\u308A\u306E\u3068\u304D\u3060\u3051\u30B5\u30FC\u30D0\u304C\u63CF\u753B)
   var heroSaPrefix = heroSaEl ? ((heroSaEl.textContent || '').split('$')[0]) : '';
+  function tokLine(tot){
+    var pct = tot.ti > 0 ? Math.round(tot.tc / tot.ti * 100) : 0;
+    return 'in ' + formatTok(tot.ti) + '(cache ' + pct + '%)/ out ' + formatTok(tot.to) + ' tokens';
+  }
   function setKpiCard(card, tot){
     if(!card) return;
     var v = card.querySelector('.stat-value');
     var m = card.querySelector('.stat-meta');
+    var tk = card.querySelector('.stat-tok');
     if(v) v.textContent = formatUSD(tot.usd);
     if(m) m.textContent = formatJPY(tot.jpy) + ' \xB7 ' + tot.turns + ' \u30BF\u30FC\u30F3';
+    if(tk) tk.textContent = 'in ' + formatTok(tot.ti) + ' / out ' + formatTok(tot.to);
   }
   function renderKpis(){
     if(!HAS_CODEX) return;
@@ -909,25 +982,29 @@ var APP_JS = `<script>
     var now = new Date();
     var y = now.getFullYear(), mo = now.getMonth(), d = now.getDate();
     var weekCutoff = Date.now() - 7*86400000;
-    var today = {usd:0,jpy:0,turns:0}, week = {usd:0,jpy:0,turns:0}, month = {usd:0,jpy:0,turns:0}, all = {usd:0,jpy:0,turns:0};
+    function zero(){ return {usd:0,jpy:0,turns:0,ti:0,to:0,tc:0}; }
+    var today = zero(), week = zero(), month = zero(), all = zero();
     var saUsd = 0, saJpy = 0;
+    function acc(t, u, j, tk){ t.usd+=u; t.jpy+=j; t.turns++; t.ti+=tk[0]; t.to+=tk[1]; t.tc+=tk[2]; }
     for(var i=0;i<src.length;i++){
       var tn = src[i], bs = tn.bs || {}, fx = tn.fx || 0, u = 0;
       for(var s in bs){ if(bs.hasOwnProperty(s)) u += bs[s]; }
       var j = u * fx;
+      var tk = tn.tk || [0,0,0];
       if(tn.sa){ var sau = u - (tn.um || 0); saUsd += sau; saJpy += sau * fx; } // SA \u5206 = \u7DCF\u984D \u2212 \u30E1\u30A4\u30F3
-      all.usd += u; all.jpy += j; all.turns++;
+      acc(all, u, j, tk);
       var dt = new Date(tn.t);
       if(isNaN(dt.getTime())) continue;
-      if(dt.getFullYear()===y && dt.getMonth()===mo && dt.getDate()===d){ today.usd+=u; today.jpy+=j; today.turns++; }
-      if(tn.t >= weekCutoff){ week.usd+=u; week.jpy+=j; week.turns++; }
-      if(dt.getFullYear()===y && dt.getMonth()===mo){ month.usd+=u; month.jpy+=j; month.turns++; }
+      if(dt.getFullYear()===y && dt.getMonth()===mo && dt.getDate()===d){ acc(today, u, j, tk); }
+      if(tn.t >= weekCutoff){ acc(week, u, j, tk); }
+      if(dt.getFullYear()===y && dt.getMonth()===mo){ acc(month, u, j, tk); }
     }
     if(kpiCards.length >= 4){
       setKpiCard(kpiCards[0], today); setKpiCard(kpiCards[1], week); setKpiCard(kpiCards[2], month); setKpiCard(kpiCards[3], all);
     }
     if(heroValueEl) heroValueEl.textContent = formatUSD(all.usd);
     if(heroMetaEls.length > 0) heroMetaEls[0].textContent = formatJPY(all.jpy) + ' \xB7 ' + all.turns + ' \u30BF\u30FC\u30F3';
+    if(heroTokEl) heroTokEl.textContent = tokLine(all);
     if(heroSaEl){
       heroSaEl.hidden = !(saUsd > 0);
       if(saUsd > 0) heroSaEl.textContent = heroSaPrefix + formatUSD(saUsd) + '(' + formatJPY(saJpy) + ')';
@@ -1035,6 +1112,15 @@ var APP_JS = `<script>
     if(allBtn) allBtn.classList.toggle('active', SEL === null);
     var sbtns = document.querySelectorAll('[data-src]');
     for(var k=0;k<sbtns.length;k++){ sbtns[k].classList.toggle('active', sbtns[k].getAttribute('data-src') === SRC); }
+    var mbtns = document.querySelectorAll('[data-metric]');
+    for(var mi=0;mi<mbtns.length;mi++){ mbtns[mi].classList.toggle('active', mbtns[mi].getAttribute('data-metric') === MET); }
+    var tokMode = MET === 'tok';
+    var modelLegend = document.getElementById('cccn-model-legend');
+    var tokLegend = document.getElementById('cccn-tok-legend');
+    if(modelLegend) modelLegend.hidden = tokMode;
+    if(tokLegend) tokLegend.hidden = !tokMode;
+    var chartTitle = document.getElementById('cccn-chart-title');
+    if(chartTitle) chartTitle.textContent = tokMode ? '\u30C8\u30FC\u30AF\u30F3\u63A8\u79FB / Tokens over time' : '\u30B3\u30B9\u30C8\u63A8\u79FB / Cost over time';
   }
 
   // ---- \u5168\u4F53\u30EC\u30F3\u30C0\u30EA\u30F3\u30B0 ----
@@ -1057,6 +1143,10 @@ var APP_JS = `<script>
   }
   var allBtn = document.getElementById('cccn-all');
   if(allBtn) allBtn.addEventListener('click', function(){ setSel(null); render(); });
+  var metBtns = document.querySelectorAll('[data-metric]');
+  for(var mbi=0;mbi<metBtns.length;mbi++){
+    (function(btn){ btn.addEventListener('click', function(){ setMet(btn.getAttribute('data-metric')); render(); }); })(metBtns[mbi]);
+  }
   var srcBtns = document.querySelectorAll('[data-src]');
   for(var sbi=0;sbi<srcBtns.length;sbi++){
     (function(btn){ btn.addEventListener('click', function(){ setSrc(btn.getAttribute('data-src')); render(); }); })(srcBtns[sbi]);
@@ -1080,16 +1170,18 @@ var APP_JS = `<script>
 })();
 </script>`;
 function statCard(label, sub, totals) {
-  return `<div class="stat"><div class="stat-label">${esc(label)}<span class="stat-sub">${esc(sub)}</span></div><div class="stat-value">${esc(formatUSD(totals.usd))}</div><div class="stat-meta">${esc(formatJPY(totals.jpy))} \xB7 ${totals.turns} \u30BF\u30FC\u30F3</div></div>`;
+  return `<div class="stat"><div class="stat-label">${esc(label)}<span class="stat-sub">${esc(sub)}</span></div><div class="stat-value">${esc(formatUSD(totals.usd))}</div><div class="stat-meta">${esc(formatJPY(totals.jpy))} \xB7 ${totals.turns} \u30BF\u30FC\u30F3</div><div class="stat-meta stat-tok">in ${esc(formatTokens(totals.tin))} / out ${esc(formatTokens(totals.tout))}</div></div>`;
 }
 function computeSurfaceBreakdown(turns) {
   const map = /* @__PURE__ */ new Map();
   for (const rec of turns) {
     const surface = effectiveSurface(rec);
-    const agg = map.get(surface) ?? { surface, turns: 0, usd: 0, jpy: 0 };
+    const agg = map.get(surface) ?? { surface, turns: 0, usd: 0, jpy: 0, tokens: 0 };
+    const tk = turnTokenTotals(rec);
     agg.turns += 1;
     agg.usd += turnTotalUSD(rec);
     agg.jpy += turnTotalJPY(rec);
+    agg.tokens += tk.tin + tk.tout;
     map.set(surface, agg);
   }
   return [...map.values()].sort((a, b) => b.usd - a.usd);
@@ -1099,9 +1191,9 @@ function surfaceSection(turns) {
   if (rows.length === 0) return "";
   if (rows.length === 1 && rows[0].surface === "cli") return "";
   const trs = rows.map(
-    (r) => `<tr><td>${esc(surfaceLabel(r.surface))}</td><td class="c-num">${r.turns}</td><td class="c-num">${esc(formatUSD(r.usd))}</td><td class="c-num">${esc(formatJPY(r.jpy))}</td></tr>`
+    (r) => `<tr><td>${esc(surfaceLabel(r.surface))}</td><td class="c-num">${r.turns}</td><td class="c-num">${esc(formatUSD(r.usd))}</td><td class="c-num">${esc(formatJPY(r.jpy))}</td><td class="c-num">${esc(formatTokens(r.tokens))}</td></tr>`
   ).join("");
-  return `<section class="card"><h2>\u30B5\u30FC\u30D5\u30A7\u30B9\u5225\u5185\u8A33 / By surface</h2><p class="note">CLI \u4EE5\u5916(\u30C7\u30B9\u30AF\u30C8\u30C3\u30D7\u30A2\u30D7\u30EA\u7B49)\u304B\u3089\u306E\u5229\u7528\u5206\u306E\u5185\u8A33(\u57CB\u3081\u8FBC\u307F\u5BFE\u8C61\u671F\u9593\u30FBSA \u8FBC\u307F\u7DCF\u984D)\u3002</p><div class="table-wrap"><table class="turns"><thead><tr><th>\u30B5\u30FC\u30D5\u30A7\u30B9</th><th class="c-num">\u30BF\u30FC\u30F3</th><th class="c-num">$</th><th class="c-num">\xA5</th></tr></thead><tbody>${trs}</tbody></table></div></section>`;
+  return `<section class="card"><h2>\u30B5\u30FC\u30D5\u30A7\u30B9\u5225\u5185\u8A33 / By surface</h2><p class="note">CLI \u4EE5\u5916(\u30C7\u30B9\u30AF\u30C8\u30C3\u30D7\u30A2\u30D7\u30EA\u7B49)\u304B\u3089\u306E\u5229\u7528\u5206\u306E\u5185\u8A33(\u57CB\u3081\u8FBC\u307F\u5BFE\u8C61\u671F\u9593\u30FBSA \u8FBC\u307F\u7DCF\u984D\u30FB\u7DCF\u30C8\u30FC\u30AF\u30F3)\u3002\u30E2\u30C7\u30EB\u4E0D\u660E\u3067\u91D1\u984D $0 \u306E\u5229\u7528\u5206\u3082 tokens \u5217\u3067\u898F\u6A21\u304C\u5206\u304B\u308A\u307E\u3059\u3002</p><div class="table-wrap"><table class="turns"><thead><tr><th>\u30B5\u30FC\u30D5\u30A7\u30B9</th><th class="c-num">\u30BF\u30FC\u30F3</th><th class="c-num">$</th><th class="c-num">\xA5</th><th class="c-num">tokens</th></tr></thead><tbody>${trs}</tbody></table></div></section>`;
 }
 function renderLegend(slots) {
   if (slots.length < 2) return "";
@@ -1186,11 +1278,11 @@ function renderDashboard(turns, opts, fullHistory) {
     const empty = `<div class="empty">` + (outsideEmbeddedPeriod ? `<h2>\u5BFE\u8C61\u671F\u9593\u306B\u5C65\u6B74\u304C\u3042\u308A\u307E\u305B\u3093</h2><p>\u5C65\u6B74\u306F\u3042\u308A\u307E\u3059\u304C\u3001\u76F4\u8FD1 ${opts.days} \u65E5\u9593\u306B\u306F\u8A18\u9332\u304C\u3042\u308A\u307E\u305B\u3093\u3002</p><p class="empty-hint">No history in the embedded period.</p>` : `<h2>\u307E\u3060\u5C65\u6B74\u304C\u3042\u308A\u307E\u305B\u3093</h2><p>Claude Code \u3067\u30D7\u30ED\u30F3\u30D7\u30C8\u3092\u5B9F\u884C\u3059\u308B\u3068\u3001\u3053\u3053\u306B\u30B3\u30B9\u30C8\u5C65\u6B74\u304C\u8868\u793A\u3055\u308C\u307E\u3059\u3002</p><p class="empty-hint">No history yet \u2014 run a prompt in Claude Code and it will appear here.</p>`) + `</div>`;
     return head + header2 + budgetSection + empty + foot;
   }
-  const header = `<div class="head"><div><h1>ccc-notifier \u30C0\u30C3\u30B7\u30E5\u30DC\u30FC\u30C9</h1>` + variantNav + `<div class="sub">${esc(period)}<span class="muted"> \xB7 ${esc(rangeText)}</span></div><div class="sub muted">\u751F\u6210 ${esc(generatedAt)} / generated</div></div><div class="hero"><div class="hero-label">${esc(totalLabel)} / ${esc(totalLabelEn)}</div><div class="hero-value">${esc(formatUSD(kpi.all.usd))}</div><div class="hero-meta">${esc(formatJPY(kpi.all.jpy))} \xB7 ${kpi.all.turns} \u30BF\u30FC\u30F3</div>` + (anySub ? `<div class="hero-meta">\u3046\u3061\u30B5\u30D6\u30A8\u30FC\u30B8\u30A7\u30F3\u30C8 ${esc(formatUSD(subUsd))}(${esc(formatJPY(subJpy))})</div>` : "") + `</div></div>`;
+  const header = `<div class="head"><div><h1>ccc-notifier \u30C0\u30C3\u30B7\u30E5\u30DC\u30FC\u30C9</h1>` + variantNav + `<div class="sub">${esc(period)}<span class="muted"> \xB7 ${esc(rangeText)}</span></div><div class="sub muted">\u751F\u6210 ${esc(generatedAt)} / generated</div></div><div class="hero"><div class="hero-label">${esc(totalLabel)} / ${esc(totalLabelEn)}</div><div class="hero-value">${esc(formatUSD(kpi.all.usd))}</div><div class="hero-meta">${esc(formatJPY(kpi.all.jpy))} \xB7 ${kpi.all.turns} \u30BF\u30FC\u30F3</div><div class="hero-meta hero-tok">in ${esc(formatTokens(kpi.all.tin))}(cache ${kpi.all.tin > 0 ? Math.round(kpi.all.tcache / kpi.all.tin * 100) : 0}%)/ out ${esc(formatTokens(kpi.all.tout))} tokens</div>` + (anySub ? `<div class="hero-meta hero-sa">\u3046\u3061\u30B5\u30D6\u30A8\u30FC\u30B8\u30A7\u30F3\u30C8 ${esc(formatUSD(subUsd))}(${esc(formatJPY(subJpy))})</div>` : "") + `</div></div>`;
   const kpiSection = `<div class="kpi">` + statCard("\u4ECA\u65E5", "Today", kpi.today) + statCard("\u4ECA\u9031", "\u76F4\u8FD17\u65E5", kpi.week) + statCard("\u4ECA\u6708", "\u66A6\u6708", kpi.month) + statCard(totalLabel, totalSub, kpi.all) + `</div>`;
   const srcToggle = anyCodex ? `<div class="seg-toggle" id="cccn-src-toggle"><button type="button" data-src="all">\u5168\u4F53</button><button type="button" data-src="claude">Claude</button><button type="button" data-src="codex">Codex</button></div>` : "";
-  const chartSection = `<section class="card"><h2>\u30B3\u30B9\u30C8\u63A8\u79FB / Cost over time</h2><p class="note">\u7C92\u5EA6\u3092 \u65E5 / \u9031 / \u6708 \u3067\u5207\u308A\u66FF\u3048\u3089\u308C\u307E\u3059(\u6A2A\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u904E\u53BB\u307E\u3067)\u3002\u68D2\u3092\u30AF\u30EA\u30C3\u30AF\u3059\u308B\u3068\u305D\u306E\u671F\u9593\u304C\u9078\u629E\u3055\u308C\u3001\u4E0B\u306E\u30E2\u30C7\u30EB\u5225\u30FB\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u5225\u30FB\u5C65\u6B74\u304C\u9023\u52D5\u3057\u307E\u3059\u3002\u300C${esc(totalLabel)}\u300D\u3067${esc(totalSub)}\u306B\u623B\u308A\u307E\u3059\u3002\u30E2\u30C7\u30EB\u5225\u306B\u8272\u5206\u3051\u3002</p><div class="toolbar-row"><div class="seg-toggle"><button type="button" data-gran="day">\u65E5</button><button type="button" data-gran="week">\u9031</button><button type="button" data-gran="month">\u6708</button></div><button type="button" id="cccn-all" class="btn">${esc(totalLabel)}</button>` + srcToggle + `<span id="cccn-sel-label" class="sel-label"></span></div>` + renderLegend(map.slots) + `<div class="chart-scroll"><div id="cccn-chart"></div></div></section>`;
-  const breakdownSection = `<div class="grid2"><section class="card"><h2>\u30E2\u30C7\u30EB\u5225\u5185\u8A33 / By model</h2><p class="note">\u9078\u629E\u4E2D\u306E\u671F\u9593(\u65E2\u5B9A\u306F${esc(totalLabel)})\u306E\u30B3\u30B9\u30C8\u964D\u9806\u3002\u8907\u6570\u30E2\u30C7\u30EB\u306E\u30BF\u30FC\u30F3\u306F\u5404\u30E2\u30C7\u30EB\u306B1\u305A\u3064\u8A08\u4E0A\u3002</p><div class="table-wrap" id="cccn-bymodel"></div></section><section class="card"><h2>\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u5225 / By project</h2><p class="note">\u9078\u629E\u4E2D\u306E\u671F\u9593\u306E\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8(\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA basename)\u5358\u4F4D\u30FB\u30B3\u30B9\u30C8\u964D\u9806\u3002</p><div class="table-wrap" id="cccn-byproject"></div></section></div>`;
+  const chartSection = `<section class="card"><h2 id="cccn-chart-title">\u30B3\u30B9\u30C8\u63A8\u79FB / Cost over time</h2><p class="note">\u7C92\u5EA6\u3092 \u65E5 / \u9031 / \u6708 \u3067\u5207\u308A\u66FF\u3048\u3089\u308C\u307E\u3059(\u6A2A\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u904E\u53BB\u307E\u3067)\u3002\u68D2\u3092\u30AF\u30EA\u30C3\u30AF\u3059\u308B\u3068\u305D\u306E\u671F\u9593\u304C\u9078\u629E\u3055\u308C\u3001\u4E0B\u306E\u30E2\u30C7\u30EB\u5225\u30FB\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u5225\u30FB\u5C65\u6B74\u304C\u9023\u52D5\u3057\u307E\u3059\u3002\u300C${esc(totalLabel)}\u300D\u3067${esc(totalSub)}\u306B\u623B\u308A\u307E\u3059\u3002\u7E26\u8EF8\u306F\u91D1\u984D\u3068\u30C8\u30FC\u30AF\u30F3\u3092\u5207\u308A\u66FF\u3048\u3089\u308C\u307E\u3059(\u91D1\u984D\u8EF8\u306F\u30E2\u30C7\u30EB\u5225\u306B\u8272\u5206\u3051\u3001\u30C8\u30FC\u30AF\u30F3\u8EF8\u306F\u30AD\u30E3\u30C3\u30B7\u30E5/\u5165\u529B/\u51FA\u529B\u306E3\u533A\u5206)\u3002</p><div class="toolbar-row"><div class="seg-toggle"><button type="button" data-gran="day">\u65E5</button><button type="button" data-gran="week">\u9031</button><button type="button" data-gran="month">\u6708</button></div><div class="seg-toggle" id="cccn-metric-toggle"><button type="button" data-metric="usd">\u91D1\u984D</button><button type="button" data-metric="tok">\u30C8\u30FC\u30AF\u30F3</button></div><button type="button" id="cccn-all" class="btn">${esc(totalLabel)}</button>` + srcToggle + `<span id="cccn-sel-label" class="sel-label"></span></div><div id="cccn-model-legend">` + renderLegend(map.slots) + `</div><div class="legend" id="cccn-tok-legend" hidden><span class="legend-item"><span class="swatch ktcache"></span>\u30AD\u30E3\u30C3\u30B7\u30E5(read+write)</span><span class="legend-item"><span class="swatch ktin"></span>\u5165\u529B(\u30AD\u30E3\u30C3\u30B7\u30E5\u4EE5\u5916)</span><span class="legend-item"><span class="swatch ktout"></span>\u51FA\u529B</span></div><div class="chart-scroll"><div id="cccn-chart"></div></div></section>`;
+  const breakdownSection = `<div class="grid2"><section class="card"><h2>\u30E2\u30C7\u30EB\u5225\u5185\u8A33 / By model</h2><p class="note">\u9078\u629E\u4E2D\u306E\u671F\u9593(\u65E2\u5B9A\u306F${esc(totalLabel)})\u306E\u30B3\u30B9\u30C8\u964D\u9806\u3002\u8907\u6570\u30E2\u30C7\u30EB\u306E\u30BF\u30FC\u30F3\u306F\u3001\u30BF\u30FC\u30F3\u6570\u30FBtokens \u5217\u3068\u3082\u5404\u30E2\u30C7\u30EB\u306B\u5168\u91CF\u8A08\u4E0A(\u91CD\u8907\u3042\u308A\u3002\u30EC\u30B3\u30FC\u30C9\u306B\u30E2\u30C7\u30EB\u5225\u30C8\u30FC\u30AF\u30F3\u304C\u7121\u3044\u305F\u3081\u30BF\u30FC\u30F3\u5185\u3067\u306F\u5206\u5272\u3057\u306A\u3044)\u3002</p><div class="table-wrap" id="cccn-bymodel"></div></section><section class="card"><h2>\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u5225 / By project</h2><p class="note">\u9078\u629E\u4E2D\u306E\u671F\u9593\u306E\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8(\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA basename)\u5358\u4F4D\u30FB\u30B3\u30B9\u30C8\u964D\u9806\u3002</p><div class="table-wrap" id="cccn-byproject"></div></section></div>`;
   const capNote = "\u4EF6\u6570\u304C\u591A\u3044\u5834\u5408\u306F\u65B0\u3057\u3044\u9806\u306B\u5148\u982D200\u4EF6\u306E\u307F\u63CF\u753B\u3057\u307E\u3059(\u691C\u7D22\u3084\u3001\u4E0A\u306E\u30B0\u30E9\u30D5\u3067\u671F\u9593\u3092\u9078\u3076\u3068\u7D5E\u308A\u8FBC\u3081\u307E\u3059)\u3002";
   const truncNote = anyTruncated ? `<p class="note">\u9078\u629E\u4E2D\u306E\u671F\u9593\u306E\u30BF\u30FC\u30F3\u3092\u65B0\u3057\u3044\u9806\u306B\u8868\u793A\u3057\u307E\u3059\u3002${capNote}\u30D7\u30ED\u30F3\u30D7\u30C8\u306F1\u4EF6\u3042\u305F\u308A\u6700\u5927 ${PROMPT_MAX.toLocaleString("en-US")} \u5B57\u307E\u3067(\u8D85\u904E\u5206\u306F\u300C${esc(PROMPT_TRUNC_MARK)}\u300D)\u3002\u884C\u30AF\u30EA\u30C3\u30AF\u3067\u5168\u6587\u5C55\u958B\u3002</p>` : `<p class="note">\u9078\u629E\u4E2D\u306E\u671F\u9593\u306E\u30BF\u30FC\u30F3\u3092\u65B0\u3057\u3044\u9806\u306B\u8868\u793A\u3057\u307E\u3059\u3002${capNote}\u884C\u30AF\u30EA\u30C3\u30AF\u3067\u30D7\u30ED\u30F3\u30D7\u30C8\u5168\u6587\u3092\u5C55\u958B\u3057\u307E\u3059\u3002</p>`;
   const historySection = `<section class="card"><h2>\u30BF\u30FC\u30F3\u5C65\u6B74 / History</h2>` + truncNote + `<div class="toolbar"><input id="turn-search" class="search" type="search" placeholder="\u30D7\u30ED\u30F3\u30D7\u30C8\u30FB\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u30FB\u30E2\u30C7\u30EB\u3067\u691C\u7D22 / search\u2026" autocomplete="off"><span class="count"><span id="turn-count">0</span></span></div><div class="table-wrap"><table class="turns"><thead><tr><th>\u6642\u523B</th><th>\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8</th><th>\u30E2\u30C7\u30EB</th><th class="c-num">in</th><th class="c-num">out</th><th class="c-num">$</th><th class="c-num">\xA5</th><th>\u30D7\u30ED\u30F3\u30D7\u30C8</th></tr></thead><tbody id="turn-body"></tbody></table></div></section>`;

package/dist/{chunk-XOGYLFX3.js → chunk-OHTPBABH.js}

@@ -15,7 +15,8 @@ function formatJPY(n) {
 function formatTokens(n) {
   if (n < 1e3) return `${n}`;
   if (n < 1e6) return `${(n / 1e3).toFixed(1)}k`;
-  return `${(n / 1e6).toFixed(1)}M`;
+  if (n < 1e9) return `${(n / 1e6).toFixed(1)}M`;
+  return `${(n / 1e9).toFixed(1)}B`;
 }
 function groupThousands(n) {
   const sign = n < 0 ? "-" : "";

package/dist/{chunk-C7QOYVGT.js → chunk-SKX5EMST.js}

@@ -20,7 +20,7 @@ import {
 } from "./chunk-Q45AAPJY.js";
 import {
   writeDashboardHtml
-} from "./chunk-DSTGXYSY.js";
+} from "./chunk-6GWPAYJQ.js";
 import {
   invalidateCanonicalDashboards,
   makeFullDashboardState,
@@ -33,7 +33,7 @@ import {
   formatJPY,
   formatUSD,
   modelDisplayName
-} from "./chunk-XOGYLFX3.js";
+} from "./chunk-OHTPBABH.js";
 import {
   appendTurn,
   loadCursor,

package/dist/{chunk-RE72XBXB.js → chunk-XT3KWNWI.js}

@@ -2,7 +2,7 @@
 import {
   notifyOS,
   notifySlack
-} from "./chunk-TTD3BGOL.js";
+} from "./chunk-2XOKH54N.js";
 import {
   codexHome,
   detectCodex,

package/dist/{chunk-YH45W7TA.js → chunk-XXXGWLTS.js}

@@ -2,14 +2,14 @@
 import {
   notifyOS,
   notifySlack
-} from "./chunk-TTD3BGOL.js";
+} from "./chunk-2XOKH54N.js";
 import {
   attachSubagentGroups,
   codexChildDraftToRecord,
   collectSubagentUsage,
   normalizeCodexOriginator,
   splitIntoTurnDrafts
-} from "./chunk-C7QOYVGT.js";
+} from "./chunk-SKX5EMST.js";
 import {
   anyOf,
   callFingerprints,
@@ -32,7 +32,7 @@ import {
 } from "./chunk-PXMXEFM7.js";
 import {
   formatIngestSummary
-} from "./chunk-XOGYLFX3.js";
+} from "./chunk-OHTPBABH.js";
 import {
   appendTurn,
   floorKey,

package/dist/cli.js

@@ -7,12 +7,12 @@ import {
   CODEX_HOOK_TIMEOUT_SECONDS,
   matchesMarker,
   parseConfiguredOwnedCodexHookCommand
-} from "./chunk-RE72XBXB.js";
+} from "./chunk-XT3KWNWI.js";
 import {
   notifyOS,
   notifySlack,
   selectNotifyBackend
-} from "./chunk-TTD3BGOL.js";
+} from "./chunk-2XOKH54N.js";
 import {
   aggregateNewTurn,
   claudeTranscriptRoots,
@@ -39,7 +39,7 @@ import {
   formatJPY,
   formatTokens,
   formatUSD
-} from "./chunk-XOGYLFX3.js";
+} from "./chunk-OHTPBABH.js";
 import {
   cursorPaths,
   hasUnresolvedPendingMarker,
@@ -1157,7 +1157,7 @@ function isCodexPassiveEvent(value) {
 async function runCodexPassiveHook(event, text) {
   try {
     if (event === "Stop") {
-      const trackMod = await import("./track-TIINM4ZR.js");
+      const trackMod = await import("./track-GTQOULBP.js");
       await trackMod.runTrack(text, { codex: true });
     } else if (event === "UserPromptSubmit") {
       const activity = await import("./subagent-store-USG3WJEB.js");
@@ -1242,18 +1242,18 @@ async function main(argv) {
         const text = await readStdin();
         const codex = rest.includes("--codex");
         try {
-          const trackMod = await import("./track-TIINM4ZR.js");
+          const trackMod = await import("./track-GTQOULBP.js");
           await trackMod.runTrack(text, { codex });
         } catch {
         }
         return 0;
       }
       case "init": {
-        const { runInit } = await import("./setup-2QDA3OWE.js");
+        const { runInit } = await import("./setup-H52OFFBQ.js");
         return await runInit(rest);
       }
       case "uninstall": {
-        const { runUninstall } = await import("./setup-2QDA3OWE.js");
+        const { runUninstall } = await import("./setup-H52OFFBQ.js");
         return await runUninstall(rest);
       }
       case "doctor":
@@ -1261,15 +1261,15 @@ async function main(argv) {
       case "report":
         return await runReport(rest);
       case "dashboard": {
-        const { runDashboard } = await import("./dashboard-YG4H3GLA.js");
+        const { runDashboard } = await import("./dashboard-GR3OMZW5.js");
         return await runDashboard(rest);
       }
       case "sweep": {
-        const { runSweep } = await import("./sweep-OLI2LIXJ.js");
+        const { runSweep } = await import("./sweep-2GHO4U5C.js");
         return await runSweep(rest);
       }
       case "scan": {
-        const { runScan } = await import("./scan-QB2N2O4Q.js");
+        const { runScan } = await import("./scan-YIU6CG3E.js");
         return await runScan(rest);
       }
       case "reset-cursors": {
@@ -1281,7 +1281,7 @@ async function main(argv) {
         return await runHistory(rest);
       }
       case "budget": {
-        const { runBudget } = await import("./budget-U37CCG4Y.js");
+        const { runBudget } = await import("./budget-KLRUKU6V.js");
         return runBudget(rest);
       }
       case "mute": {

package/dist/{dashboard-YG4H3GLA.js → dashboard-GR3OMZW5.js}

@@ -3,12 +3,12 @@ import {
   browserOpenPlan,
   runDashboard,
   writeDashboardHtml
-} from "./chunk-DSTGXYSY.js";
+} from "./chunk-6GWPAYJQ.js";
 import "./chunk-3M5UQK76.js";
 import "./chunk-PXMXEFM7.js";
 import "./chunk-6IVSZ3S4.js";
 import "./chunk-DGXUSPS4.js";
-import "./chunk-XOGYLFX3.js";
+import "./chunk-OHTPBABH.js";
 import "./chunk-WONMZ466.js";
 export {
   browserOpenPlan,

package/dist/{scan-QB2N2O4Q.js → scan-YIU6CG3E.js}

@@ -2,12 +2,12 @@
 import {
   notifyIngestSummary,
   runIngest
-} from "./chunk-YH45W7TA.js";
-import "./chunk-TTD3BGOL.js";
-import "./chunk-C7QOYVGT.js";
+} from "./chunk-XXXGWLTS.js";
+import "./chunk-2XOKH54N.js";
+import "./chunk-SKX5EMST.js";
 import "./chunk-GAOGTALW.js";
 import "./chunk-Q45AAPJY.js";
-import "./chunk-DSTGXYSY.js";
+import "./chunk-6GWPAYJQ.js";
 import "./chunk-3M5UQK76.js";
 import "./chunk-PXMXEFM7.js";
 import "./chunk-6IVSZ3S4.js";
@@ -16,7 +16,7 @@ import {
   formatJPY,
   formatTokens,
   formatUSD
-} from "./chunk-XOGYLFX3.js";
+} from "./chunk-OHTPBABH.js";
 import {
   readConfig
 } from "./chunk-WONMZ466.js";

package/dist/{setup-2QDA3OWE.js → setup-H52OFFBQ.js}

@@ -4,11 +4,11 @@ import {
   matchesMarker,
   runInit,
   runUninstall
-} from "./chunk-RE72XBXB.js";
-import "./chunk-TTD3BGOL.js";
+} from "./chunk-XT3KWNWI.js";
+import "./chunk-2XOKH54N.js";
 import "./chunk-Q45AAPJY.js";
 import "./chunk-DGXUSPS4.js";
-import "./chunk-XOGYLFX3.js";
+import "./chunk-OHTPBABH.js";
 import "./chunk-WONMZ466.js";
 export {
   maskWebhookUrl,

package/dist/{sweep-OLI2LIXJ.js → sweep-2GHO4U5C.js}

@@ -4,15 +4,15 @@ import {
   codexChildDraftToRecord,
   runSweep,
   splitIntoTurnDrafts
-} from "./chunk-C7QOYVGT.js";
+} from "./chunk-SKX5EMST.js";
 import "./chunk-GAOGTALW.js";
 import "./chunk-Q45AAPJY.js";
-import "./chunk-DSTGXYSY.js";
+import "./chunk-6GWPAYJQ.js";
 import "./chunk-3M5UQK76.js";
 import "./chunk-PXMXEFM7.js";
 import "./chunk-6IVSZ3S4.js";
 import "./chunk-DGXUSPS4.js";
-import "./chunk-XOGYLFX3.js";
+import "./chunk-OHTPBABH.js";
 import "./chunk-WONMZ466.js";
 export {
   attachSubagentGroups,

package/dist/{track-TIINM4ZR.js → track-GTQOULBP.js}

@@ -2,15 +2,15 @@
 import {
   notifyIngestSummary,
   runIngest
-} from "./chunk-YH45W7TA.js";
+} from "./chunk-XXXGWLTS.js";
 import {
   notifyOS,
   notifySlack
-} from "./chunk-TTD3BGOL.js";
+} from "./chunk-2XOKH54N.js";
 import {
   collectSubagentUsage,
   normalizeCodexOriginator
-} from "./chunk-C7QOYVGT.js";
+} from "./chunk-SKX5EMST.js";
 import {
   aggregateCodexTurn,
   aggregateNewTurn,
@@ -29,7 +29,7 @@ import {
 } from "./chunk-Q45AAPJY.js";
 import {
   writeDashboardHtml
-} from "./chunk-DSTGXYSY.js";
+} from "./chunk-6GWPAYJQ.js";
 import {
   isFullDashboardDue,
   makeFullDashboardState,
@@ -40,7 +40,7 @@ import {
 } from "./chunk-PXMXEFM7.js";
 import "./chunk-6IVSZ3S4.js";
 import "./chunk-DGXUSPS4.js";
-import "./chunk-XOGYLFX3.js";
+import "./chunk-OHTPBABH.js";
 import {
   appendTurn,
   clearPendingAppend,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccc-notifier",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Claude Code Cost notifier (now also covers Codex CLI): per-prompt cost notifications (USD/JPY) with local history and HTML dashboard",
   "keywords": [
     "claude",