ccc-notifier 0.1.0

package/dist/chunk-64N5SGTT.js

@@ -0,0 +1,1024 @@
+#!/usr/bin/env node
+import {
+  isWSL
+} from "./chunk-DGXUSPS4.js";
+import {
+  formatJPY,
+  formatTokens,
+  formatUSD,
+  modelDisplayName
+} from "./chunk-TBFKGFZX.js";
+import {
+  paths,
+  readConfig,
+  readTurns
+} from "./chunk-IIYMGLV4.js";
+
+// src/dashboard.ts
+import { spawn, spawnSync } from "child_process";
+import { createRequire } from "module";
+import { mkdirSync, writeFileSync } from "fs";
+import { basename, dirname, join } from "path";
+var PROMPT_MAX = 1e4;
+var PROMPT_TRUNC_MARK = "\u2026(\u4EE5\u4E0B\u7565)";
+function parseDays(value) {
+  if (value === void 0) return null;
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+function parseRefresh(value, fallback) {
+  if (value === void 0) return fallback;
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
+}
+function parseArgs(argv) {
+  let days = null;
+  let open = true;
+  let out = null;
+  const cfgReloadSec = readConfig().dashboard.autoReloadSec;
+  let autoReloadSec = cfgReloadSec;
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === "--no-open") {
+      open = false;
+    } else if (arg === "--days") {
+      days = parseDays(argv[i + 1]);
+      i++;
+    } else if (arg.startsWith("--days=")) {
+      days = parseDays(arg.slice("--days=".length));
+    } else if (arg === "--out") {
+      out = argv[i + 1] ?? null;
+      i++;
+    } else if (arg.startsWith("--out=")) {
+      out = arg.slice("--out=".length) || null;
+    } else if (arg === "--no-refresh") {
+      autoReloadSec = 0;
+    } else if (arg === "--refresh") {
+      autoReloadSec = parseRefresh(argv[i + 1], cfgReloadSec);
+      i++;
+    } else if (arg.startsWith("--refresh=")) {
+      autoReloadSec = parseRefresh(arg.slice("--refresh=".length), cfgReloadSec);
+    }
+  }
+  return { days, open, out, autoReloadSec };
+}
+function readVersion() {
+  try {
+    const require2 = createRequire(import.meta.url);
+    const pkg = require2("../package.json");
+    return typeof pkg.version === "string" && pkg.version.length > 0 ? pkg.version : "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function dateKeyOf(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function fmtLocalDateTime(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  return `${dateKeyOf(d)} ${hh}:${mm}`;
+}
+function effectiveInputTokens(t) {
+  if (!t) return 0;
+  return t.input + t.cacheRead + t.cacheWrite5m + t.cacheWrite1h;
+}
+function turnInputTokens(rec) {
+  return effectiveInputTokens(rec.tokens) + effectiveInputTokens(rec.sidechainTokens);
+}
+function turnOutputTokens(rec) {
+  return rec.tokens.output + (rec.sidechainTokens ? rec.sidechainTokens.output : 0);
+}
+function turnCostByModel(rec) {
+  if (rec.costByModel && Object.keys(rec.costByModel).length > 0) return rec.costByModel;
+  return { [rec.models[0] ?? "unknown"]: rec.costUSD };
+}
+function turnCostByModelWithSA(rec) {
+  const base = { ...turnCostByModel(rec) };
+  const sa = rec.subagents?.costByModel;
+  if (sa) {
+    for (const [model, usd] of Object.entries(sa)) {
+      base[model] = (base[model] ?? 0) + usd;
+    }
+  }
+  return base;
+}
+function turnTotalUSD(rec) {
+  return rec.costUSD + (rec.subagents?.costUSD ?? 0);
+}
+function turnTotalJPY(rec) {
+  const sa = rec.subagents?.costUSD ?? 0;
+  return rec.costJPY + sa * rec.fxRate;
+}
+function truncatePrompt(raw) {
+  if (raw.length <= PROMPT_MAX) return { text: raw, truncated: false };
+  return { text: raw.slice(0, PROMPT_MAX) + PROMPT_TRUNC_MARK, truncated: true };
+}
+function computeSlotMap(turns) {
+  const agg = /* @__PURE__ */ new Map();
+  for (const rec of turns) {
+    for (const [model, usd] of Object.entries(turnCostByModelWithSA(rec))) {
+      agg.set(model, (agg.get(model) ?? 0) + usd);
+    }
+  }
+  const entries = [...agg.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+  let named = entries;
+  let hasOther = false;
+  if (entries.length > 8) {
+    named = entries.slice(0, 7);
+    hasOther = true;
+  }
+  const slots = named.map(([key], i) => ({ slot: String(i + 1), name: modelDisplayName(key) }));
+  const slotByModel = /* @__PURE__ */ new Map();
+  named.forEach(([key], i) => slotByModel.set(key, String(i + 1)));
+  if (hasOther) slots.push({ slot: "other", name: "\u305D\u306E\u4ED6" });
+  return { slots, slotByModel, hasOther };
+}
+function turnBySlot(rec, map) {
+  const bs = {};
+  for (const [model, usd] of Object.entries(turnCostByModelWithSA(rec))) {
+    const slot = map.slotByModel.get(model) ?? "other";
+    bs[slot] = (bs[slot] ?? 0) + usd;
+  }
+  return bs;
+}
+function emptyTotals() {
+  return { usd: 0, jpy: 0, turns: 0 };
+}
+function buildTurnEmbed(rec, map) {
+  const raw = String(rec.prompt ?? "");
+  const { text, truncated } = truncatePrompt(raw);
+  const primary = rec.models[0] ?? "unknown";
+  const extra = rec.models.length > 1 ? ` +${rec.models.length - 1}` : "";
+  const saMark = rec.subagents ? " +SA" : "";
+  let sa = null;
+  if (rec.subagents) {
+    const saModels = Object.keys(rec.subagents.costByModel).map((m) => modelDisplayName(m));
+    sa = {
+      usd: formatUSD(rec.subagents.costUSD),
+      jpy: formatJPY(rec.subagents.costUSD * rec.fxRate),
+      models: saModels.join(", "),
+      apiCalls: rec.subagents.apiCalls
+    };
+  }
+  const ms = Date.parse(rec.ts);
+  return {
+    t: Number.isFinite(ms) ? ms : 0,
+    ts: fmtLocalDateTime(rec.ts),
+    p: basename(rec.project) || rec.project || "(unknown)",
+    pf: rec.project ?? "",
+    br: rec.gitBranch,
+    md: modelDisplayName(primary) + extra + saMark,
+    mr: rec.models,
+    ti: formatTokens(turnInputTokens(rec)),
+    to: formatTokens(turnOutputTokens(rec)),
+    um: rec.costUSD,
+    fx: rec.fxRate,
+    bs: turnBySlot(rec, map),
+    pr: text,
+    tr: truncated,
+    sa
+  };
+}
+function computeKpis(turns) {
+  const now = /* @__PURE__ */ new Date();
+  const y = now.getFullYear();
+  const mo = now.getMonth();
+  const d = now.getDate();
+  const weekCutoff = now.getTime() - 7 * 864e5;
+  const today = emptyTotals();
+  const week = emptyTotals();
+  const month = emptyTotals();
+  const all = emptyTotals();
+  for (const rec of turns) {
+    const usd = turnTotalUSD(rec);
+    const jpy = turnTotalJPY(rec);
+    all.usd += usd;
+    all.jpy += jpy;
+    all.turns += 1;
+    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;
+    }
+    if (dt.getTime() >= weekCutoff) {
+      week.usd += usd;
+      week.jpy += jpy;
+      week.turns += 1;
+    }
+    if (dt.getFullYear() === y && dt.getMonth() === mo) {
+      month.usd += usd;
+      month.jpy += jpy;
+      month.turns += 1;
+    }
+  }
+  return { today, week, month, all };
+}
+var STYLE = `<style>
+:root{
+  color-scheme: light dark;
+  --surface:#fcfcfb; --plane:#f9f9f7; --ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
+  --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,0.10); --good:#006300;
+  --s1:#2a78d6; --s2:#1baf7a; --s3:#eda100; --s4:#008300; --s5:#4a3aa7; --s6:#e34948; --s7:#e87ba4; --s8:#eb6834; --sother:#a7a69f;
+  --shadow: 0 1px 2px rgba(11,11,11,0.04), 0 1px 3px rgba(11,11,11,0.06);
+}
+@media (prefers-color-scheme: dark){
+  :root{
+    --surface:#1a1a19; --plane:#0d0d0d; --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
+    --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,0.10); --good:#0ca30c;
+    --s1:#3987e5; --s2:#199e70; --s3:#c98500; --s4:#008300; --s5:#9085e9; --s6:#e66767; --s7:#d55181; --s8:#d95926; --sother:#6d6c66;
+    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
+  }
+}
+*{box-sizing:border-box;}
+html,body{margin:0;padding:0;}
+body{background:var(--plane); color:var(--ink); font-family: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased;}
+.wrap{max-width:1120px; margin:0 auto; padding:24px 20px 72px;}
+a{color:inherit;}
+
+.head{display:flex; flex-wrap:wrap; gap:20px 32px; align-items:flex-end; justify-content:space-between; margin-bottom:24px;}
+.head h1{font-size:22px; font-weight:650; margin:0 0 6px;}
+.head .sub{color:var(--ink2); font-size:13px; margin:2px 0;}
+.head .muted{color:var(--muted);}
+.hero{text-align:right;}
+.hero-label{color:var(--ink2); font-size:12px; letter-spacing:.02em; text-transform:uppercase;}
+.hero-value{font-size:46px; font-weight:680; line-height:1.05; margin:2px 0;}
+.hero-meta{color:var(--ink2); font-size:13px;}
+
+.kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px;}
+.stat{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow);}
+.stat-label{color:var(--ink2); font-size:13px; font-weight:600; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;}
+.stat-sub{color:var(--muted); font-size:11px; font-weight:400;}
+.stat-value{font-size:27px; font-weight:660; margin:8px 0 4px;}
+.stat-meta{color:var(--muted); font-size:12px;}
+
+section.card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 22px; margin-bottom:22px; box-shadow:var(--shadow);}
+section.card > h2{font-size:15px; font-weight:640; margin:0 0 4px;}
+section.card > .note{color:var(--muted); font-size:12px; margin:0 0 14px;}
+
+.toolbar-row{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:2px 0 12px;}
+.seg-toggle{display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden;}
+.seg-toggle button{padding:6px 14px; background:var(--surface); color:var(--ink2); border:0; border-left:1px solid var(--border); cursor:pointer; font:inherit; font-size:13px;}
+.seg-toggle button:first-child{border-left:0;}
+.seg-toggle button.active{background:var(--s1); color:#fff;}
+.btn{padding:6px 14px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--ink2); cursor:pointer; font:inherit; font-size:13px;}
+.btn.active{background:var(--s1); color:#fff; border-color:var(--s1);}
+.sel-label{color:var(--ink2); font-size:13px; margin-left:auto; text-align:right; font-variant-numeric:tabular-nums;}
+.sel-label b{color:var(--ink); font-weight:640;}
+
+.legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin:2px 0 14px;}
+.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);}
+.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;}
+.budget-fill{height:100%; border-radius:6px; min-width:2px;}
+.budget-fill.lvl-ok{background:var(--s2);}
+.budget-fill.lvl-warn{background:var(--s3);}
+.budget-fill.lvl-over{background:var(--s6);}
+.budget-foot{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--ink2);}
+.budget-foot b{color:var(--ink); font-weight:660; font-variant-numeric:tabular-nums;}
+.budget-pct{font-variant-numeric:tabular-nums; font-weight:640;}
+.budget-pct.lvl-warn{color:var(--s3);}
+.budget-pct.lvl-over{color:var(--s6);}
+
+.chart{height:auto; display:block;}
+.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.dim{opacity:0.28;}
+.grid-line{stroke:var(--grid); stroke-width:1;}
+.axis-line{stroke:var(--axis); stroke-width:1;}
+.tick-label{fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums;}
+.bar-name{fill:var(--ink); font-size:13px; font-weight:550;}
+.bar-val{fill:var(--ink2); font-size:12px; font-variant-numeric:tabular-nums;}
+.cccn-band{fill:transparent; cursor:pointer;}
+.cccn-band:hover{fill:var(--ink); fill-opacity:0.05;}
+.cccn-band.sel{fill:var(--s1); fill-opacity:0.10;}
+
+.grid2{display:grid; grid-template-columns:1.15fr 1fr; gap:22px; align-items:start;}
+
+.data-table{width:100%; border-collapse:collapse; font-size:13px;}
+.data-table th{ text-align:left; color:var(--muted); font-weight:600; font-size:12px; padding:6px 10px; border-bottom:1px solid var(--border); }
+.data-table td{padding:7px 10px; border-bottom:1px solid var(--grid);}
+.data-table tr:last-child td{border-bottom:none;}
+.data-table .c-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
+.data-table .c-name{display:flex; align-items:center; gap:8px;}
+.table-twin{margin-top:14px;}
+.table-twin summary{cursor:pointer; color:var(--ink2); font-size:12px; user-select:none;}
+.table-twin[open] summary{margin-bottom:10px;}
+
+.toolbar{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-bottom:14px;}
+.search{flex:1 1 260px; min-width:200px; background:var(--plane); color:var(--ink); border:1px solid var(--border); border-radius:9px; padding:9px 12px; font-size:13px; font-family:inherit;}
+.search::placeholder{color:var(--muted);}
+.count{color:var(--muted); font-size:12px; white-space:nowrap;}
+
+.turns{width:100%; border-collapse:collapse; font-size:13px;}
+.turns th{ text-align:left; color:var(--muted); font-weight:600; font-size:12px; padding:8px 10px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); }
+.turns td{padding:8px 10px; border-bottom:1px solid var(--grid); vertical-align:top;}
+.turns .c-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
+.turns .c-time,.turns .c-model{white-space:nowrap;}
+.turns .c-proj{max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
+.turns .c-prompt{color:var(--ink2);}
+.turn-row{cursor:pointer;}
+.turn-row:hover{background:color-mix(in srgb, var(--ink) 4%, transparent);}
+.turn-row:focus-visible{outline:2px solid var(--s1); outline-offset:-2px;}
+.turn-row.open{background:color-mix(in srgb, var(--ink) 5%, transparent);}
+.turn-detail > td{background:var(--plane); color:var(--ink); border-bottom:1px solid var(--grid);}
+.detail-meta{color:var(--muted); font-size:12px; margin-bottom:8px; word-break:break-all;}
+.detail-prompt{white-space:pre-wrap; word-break:break-word; font-size:13px; line-height:1.55;}
+.table-wrap{overflow-x:auto;}
+.empty-hint{color:var(--muted); font-size:13px; padding:20px 0; text-align:center;}
+
+.empty{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:56px 24px; text-align:center; box-shadow:var(--shadow);}
+.empty h2{font-size:20px; margin:0 0 8px;}
+.empty p{color:var(--ink2); margin:4px 0;}
+
+.foot{color:var(--muted); font-size:12px; margin-top:32px; text-align:center;}
+
+.cccn-tip{position:fixed; z-index:50; pointer-events:none; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:9px 11px; font-size:12px; max-width:280px;}
+.cccn-tip .tip-title{font-weight:640; margin-bottom:6px; font-variant-numeric:tabular-nums;}
+.cccn-tip .tip-row{display:flex; align-items:center; gap:8px; margin:2px 0;}
+.cccn-tip .tip-key{display:inline-block; width:9px; height:9px; border-radius:2px; flex:0 0 auto;}
+.cccn-tip .tip-name{color:var(--ink2); flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
+.cccn-tip .tip-val{font-variant-numeric:tabular-nums; font-weight:560;}
+
+@media (max-width: 780px){
+  .kpi{grid-template-columns:repeat(2,1fr);}
+  .grid2{grid-template-columns:1fr;}
+  .hero{text-align:left;}
+  .head{align-items:flex-start;}
+  .sel-label{margin-left:0;}
+}
+</style>`;
+var APP_JS = `<script>
+(function(){
+  var el = document.getElementById('cccn-data');
+  if(!el){ return; }
+  var data;
+  try { data = JSON.parse(el.textContent || '{}'); } catch(e){ return; }
+  var turns = data.turns || [];
+  var slots = data.slots || [];
+  var slotOrder = slots.map(function(s){ return s.slot; });
+  var slotName = {}; slots.forEach(function(s){ slotName[s.slot] = s.name; });
+
+  // ---- \u6570\u5024\u6574\u5F62(\u30B5\u30FC\u30D0\u306E format.ts \u3068\u7B49\u4FA1\u306B\u79FB\u690D)----
+  function formatUSD(n){
+    var v = n || 0;
+    if(v >= 1) return '$' + v.toFixed(2);
+    if(v >= 0.01) return '$' + v.toFixed(3);
+    return '$' + v.toFixed(4);
+  }
+  function formatJPY(n){
+    var v = n || 0;
+    if(v >= 1) return '\xA5' + Math.round(v).toLocaleString('en-US');
+    return '\xA5' + (Math.round(v * 10) / 10);
+  }
+
+  // ---- \u65E5\u4ED8/\u30D0\u30B1\u30C3\u30C8(\u30ED\u30FC\u30AB\u30EBTZ)----
+  function pad(n){ return (n < 10 ? '0' : '') + n; }
+  function dkey(d){ return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate()); }
+  function mondayOf(d){
+    var x = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    var wd = (x.getDay() + 6) % 7; // \u6708=0 .. \u65E5=6
+    x.setDate(x.getDate() - wd);
+    return x;
+  }
+  function bucketKey(t, gran){
+    var d = new Date(t);
+    if(isNaN(d.getTime())) return null;
+    if(gran === 'month') return d.getFullYear() + '-' + pad(d.getMonth()+1);
+    if(gran === 'week') return dkey(mondayOf(d));
+    return dkey(d);
+  }
+  function bucketLabel(key, gran){
+    var p = key.split('-');
+    if(gran === 'month') return p[0] + '/' + p[1];
+    return p[1] + '/' + p[2] + (gran === 'week' ? '\u9031' : '');
+  }
+  function periodText(key, gran){
+    if(key === null) return '\u901A\u7B97 / All time';
+    if(gran === 'month') return key + ' (\u6708)';
+    if(gran === 'week') return key + ' \u306E\u9031';
+    return key;
+  }
+
+  // ---- \u72B6\u614B(sessionStorage \u306B\u4FDD\u5B58\u3057\u3001\u81EA\u52D5\u30EA\u30ED\u30FC\u30C9(meta refresh)\u3092\u8DE8\u3044\u3067\u3082\u7DAD\u6301)----
+  function ssGet(k){ try { return sessionStorage.getItem(k); } catch(e){ return null; } }
+  function ssSet(k, v){ try { sessionStorage.setItem(k, v); } catch(e){} }
+  var GRAN = ssGet('cccn-gran'); if(['day','week','month'].indexOf(GRAN) < 0) GRAN = 'day';
+  // \u65E2\u5B9A\u306F\u300C\u8D77\u52D5\u3057\u305F\u65E5\u300D\u3092\u521D\u671F\u9078\u629E\u3059\u308B(\u672A\u4FDD\u5B58\u6642)\u3002\u660E\u793A\u7684\u306A\u901A\u7B97\u306F '__all__'\u3001\u305D\u306E\u4ED6\u306F\u4FDD\u5B58\u30AD\u30FC\u3002
+  var storedSel = ssGet('cccn-sel');
+  var SEL = (storedSel === null) ? defaultSel(GRAN) : (storedSel === '__all__' ? null : storedSel);
+  function setGran(g){ GRAN = g; ssSet('cccn-gran', g); }
+  function setSel(v){ SEL = v; ssSet('cccn-sel', v === null ? '__all__' : v); }
+  var lastRenderedGran = null; // \u76F4\u524D\u306B\u63CF\u753B\u3057\u305F\u7C92\u5EA6\u3002\u5909\u308F\u3063\u305F\u3068\u304D(=\u30D0\u30B1\u30C3\u30C8\u6570\u304C\u5909\u308F\u308B\u3068\u304D)\u3060\u3051\u53F3\u7AEF\u3078\u5BC4\u305B\u308B\u3002
+
+  function buildBuckets(gran){
+    var map = {}; var keys = [];
+    for(var i=0;i<turns.length;i++){
+      var tn = turns[i];
+      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); }
+      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]; } }
+    }
+    keys.sort();
+    return keys.map(function(k){ return map[k]; });
+  }
+
+  // \u8D77\u52D5\u6642\u306E\u65E2\u5B9A\u9078\u629E: \u8D77\u52D5\u65E5(\u4ECA\u65E5)\u306B\u30C7\u30FC\u30BF\u304C\u3042\u308C\u3070\u305D\u306E\u65E5\u3001\u7121\u3051\u308C\u3070\u76F4\u8FD1\u306E\u30C7\u30FC\u30BF\u304C\u3042\u308B\u671F\u9593\u3002
+  // \u30C7\u30FC\u30BF\u304C\u5168\u304F\u7121\u3051\u308C\u3070 null(\u901A\u7B97)\u3002
+  function defaultSel(gran){
+    var buckets = buildBuckets(gran);
+    if(buckets.length === 0) return null;
+    var todayKey = bucketKey(Date.now(), gran);
+    for(var i=0;i<buckets.length;i++){ if(buckets[i].key === todayKey) return todayKey; }
+    return buckets[buckets.length - 1].key; // \u6700\u65B0\u306E\u30C7\u30FC\u30BF\u304C\u3042\u308B\u671F\u9593(\u30D0\u30B1\u30C3\u30C8\u306F\u6607\u9806\u30BD\u30FC\u30C8\u6E08\u307F)
+  }
+
+  function turnsInSelection(){
+    if(SEL === null) return turns;
+    return turns.filter(function(tn){ return bucketKey(tn.t, GRAN) === SEL; });
+  }
+
+  // ---- SVG \u30D8\u30EB\u30D1\u30FC ----
+  var SVGNS = 'http://www.w3.org/2000/svg';
+  function svgEl(tag, attrs){
+    var e = document.createElementNS(SVGNS, tag);
+    if(attrs){ for(var k in attrs){ if(attrs.hasOwnProperty(k)) e.setAttribute(k, attrs[k]); } }
+    return e;
+  }
+  function niceCeil(max){
+    if(!(max > 0)) return 1;
+    var pow = Math.pow(10, Math.floor(Math.log10(max)));
+    var n = max / pow;
+    var nice = n <= 1 ? 1 : n <= 2 ? 2 : n <= 5 ? 5 : 10;
+    return nice * pow;
+  }
+  function f2(n){ return Math.round(n * 100) / 100; }
+  function clearNode(node){ while(node.firstChild){ node.removeChild(node.firstChild); } }
+
+  // ---- \u65E5\u5225/\u9031\u5225/\u6708\u5225 \u30C1\u30E3\u30FC\u30C8 ----
+  var chartEl = document.getElementById('cccn-chart');
+  var tip = document.getElementById('cccn-tip');
+
+  function renderChart(){
+    if(!chartEl) return;
+    var scroller0 = chartEl.parentNode;
+    var prevScroll = scroller0 ? scroller0.scrollLeft : 0; // clearNode \u524D\u306B\u73FE\u5728\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u4F4D\u7F6E\u3092\u9000\u907F
+    clearNode(chartEl);
+    var buckets = buildBuckets(GRAN);
+    if(buckets.length === 0){
+      var p = document.createElement('p'); p.className = 'empty-hint';
+      p.textContent = '\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093';
+      chartEl.appendChild(p);
+      return;
+    }
+    var H = 320, ml = 58, mr = 16, mt = 18, mb = 40;
+    var plotH = H - mt - mb;
+    var baseY = mt + plotH;
+    var GAP = 2;
+    var n = buckets.length;
+    // \u5E2F\u5E45\u306F\u30B3\u30F3\u30C6\u30CA\u5E45\u304B\u3089\u6C7A\u3081\u308B: \u30D0\u30B1\u30C3\u30C8\u304C\u5C11\u306A\u3051\u308C\u3070\u6A2A\u5E45\u3044\u3063\u3071\u3044\u306B\u5E83\u3052\u3001\u591A\u3051\u308C\u3070\u6700\u5C0F\u5E45\u3067
+    // \u6A2A\u30B9\u30AF\u30ED\u30FC\u30EB\u3055\u305B\u308B(svg \u81EA\u8EAB\u306E px \u5E45\u3067\u63CF\u304F\u305F\u3081 .chart \u306F width:100% \u306B\u3057\u306A\u3044)\u3002
+    var scroller = chartEl.parentNode;
+    var avail = (scroller && scroller.clientWidth) ? scroller.clientWidth : 900;
+    var band = Math.max(28, Math.min(90, (avail - ml - mr) / n));
+    var barW = Math.min(26, band * 0.7);
+    var plotW = band * n;
+    var W = ml + plotW + mr;
+
+    var maxTotal = 0;
+    buckets.forEach(function(b){ if(b.total > maxTotal) maxTotal = b.total; });
+    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
+    // \u5168\u90E8\u6697\u304F\u306A\u308B\u306E\u3092\u907F\u3051\u308B)\u3002
+    var selPresent = false;
+    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' });
+    svg.setAttribute('width', String(W));
+    svg.setAttribute('height', String(H));
+
+    var ticks = 5;
+    for(var t=0;t<=ticks;t++){
+      var val = niceMax * t / ticks;
+      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);
+      svg.appendChild(lbl);
+    }
+
+    // \u30E9\u30D9\u30EB\u306F\u5E45\u3067\u9593\u5F15\u304F(\u5E2F\u5E45\u3088\u308A\u30E9\u30D9\u30EB\u304C\u5E83\u3044\u3068\u91CD\u306A\u308B\u305F\u3081)\u3002
+    var labelPx = bucketLabel(buckets[0].key, GRAN).length * 7.5 + 8;
+    var xStep = Math.max(1, Math.ceil(labelPx / band));
+    for(var i=0;i<n;i++){
+      var b = buckets[i];
+      var cx = ml + band * (i + 0.5);
+      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;
+        if(v <= 0) continue;
+        var vTop = cumV + v;
+        var yTop = baseY - vTop * yscale;
+        var yBot = baseY - cumV * yscale;
+        if(cumV > 0) yBot -= GAP;
+        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) });
+        svg.appendChild(rect);
+      }
+      if(i % xStep === 0 || i === n-1){
+        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);
+      }
+      var band2 = svgEl('rect', { 'class':'cccn-band'+(b.key===SEL?' sel':''), x:f2(ml+band*i), y:mt, width:f2(band), height:plotH });
+      band2.setAttribute('data-i', String(i));
+      (function(bucket){
+        band2.addEventListener('pointermove', function(e){ showTip(e, bucket); });
+        band2.addEventListener('pointerenter', function(e){ showTip(e, bucket); });
+        band2.addEventListener('pointerleave', function(){ if(tip) tip.hidden = true; });
+        band2.addEventListener('click', function(){
+          setSel(SEL === bucket.key ? null : bucket.key);
+          if(tip) tip.hidden = true;
+          render();
+        });
+      })(b);
+      svg.appendChild(band2);
+    }
+    svg.appendChild(svgEl('line', { 'class':'axis-line', x1:ml, y1:baseY, x2:W-mr, y2:baseY }));
+    chartEl.appendChild(svg);
+    // \u30B9\u30AF\u30ED\u30FC\u30EB\u4F4D\u7F6E: \u521D\u56DE\u306F\u30EA\u30ED\u30FC\u30C9\u8DE8\u304E\u3067\u5FA9\u5143(\u7121\u3051\u308C\u3070\u53F3\u7AEF=\u6700\u65B0)\u3001\u7C92\u5EA6\u304C\u5909\u308F\u3063\u305F\u3089\u53F3\u7AEF\u3001
+    // \u305D\u308C\u4EE5\u5916(\u9078\u629E\u306E\u5909\u66F4\u306A\u3069\u540C\u4E00\u7C92\u5EA6\u306E\u518D\u63CF\u753B)\u306F\u76F4\u524D\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u4F4D\u7F6E\u3092\u7DAD\u6301\u3059\u308B\u3002
+    var scroller = chartEl.parentNode;
+    if(scroller){
+      if(lastRenderedGran === null){
+        var saved = parseInt(ssGet('cccn-chart-scroll'), 10);
+        scroller.scrollLeft = isNaN(saved) ? scroller.scrollWidth : saved;
+      } else if(GRAN !== lastRenderedGran){
+        scroller.scrollLeft = scroller.scrollWidth;
+      } else {
+        scroller.scrollLeft = prevScroll;
+      }
+    }
+    lastRenderedGran = GRAN;
+  }
+
+  function showTip(evt, bucket){
+    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);
+    for(var j=0;j<slotOrder.length;j++){
+      var slot = slotOrder[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);
+    }
+    tip.hidden = false;
+    positionTip(evt);
+  }
+  function positionTip(evt){
+    if(!tip) return;
+    var pad = 14; var r = tip.getBoundingClientRect();
+    var x = evt.clientX + pad, y = evt.clientY + pad;
+    if(x + r.width > window.innerWidth - 8){ x = evt.clientX - r.width - pad; }
+    if(y + r.height > window.innerHeight - 8){ y = evt.clientY - r.height - pad; }
+    tip.style.left = (x < 8 ? 8 : x) + 'px';
+    tip.style.top = (y < 8 ? 8 : y) + 'px';
+  }
+
+  // ---- \u30E2\u30C7\u30EB\u5225\u5185\u8A33 ----
+  var modelEl = document.getElementById('cccn-bymodel');
+  function renderByModel(sub){
+    if(!modelEl) return;
+    clearNode(modelEl);
+    var usd = {}, jpy = {}, tcount = {}, 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){
+        usd[s] = (usd[s]||0) + bs[s]; jpy[s] = (jpy[s]||0) + bs[s]*fx; total += bs[s];
+        tcount[s] = (tcount[s]||0) + 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>';
+    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;
+      any = true;
+      var share = total > 0 ? (usd[slot]/total*100) : 0;
+      var tr = document.createElement('tr');
+      var c1 = document.createElement('td'); c1.className = 'c-name';
+      var sw = document.createElement('span'); sw.className = 'swatch k'+slot; c1.appendChild(sw);
+      c1.appendChild(document.createTextNode(slotName[slot] || slot));
+      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 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);
+      tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+    if(!any){ 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'; modelEl.appendChild(p); return; }
+    modelEl.appendChild(table);
+  }
+
+  // ---- \u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u5225 ----
+  var projEl = document.getElementById('cccn-byproject');
+  function renderByProject(sub){
+    if(!projEl) return;
+    clearNode(projEl);
+    var agg = {};
+    sub.forEach(function(tn){
+      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 rows = Object.keys(agg).map(function(name){ var a = agg[name]; return { name:name, usd:a.usd, jpy:a.jpy, turns:a.turns }; });
+    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>';
+    table.appendChild(thead);
+    var tbody = document.createElement('tbody');
+    rows.forEach(function(r){
+      var tr = document.createElement('tr');
+      var c1 = document.createElement('td'); c1.className='c-name'; c1.textContent = r.name;
+      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);
+      tbody.appendChild(tr);
+    });
+    table.appendChild(tbody);
+    projEl.appendChild(table);
+  }
+
+  // ---- \u6708\u4E88\u7B97(\u9078\u629E\u4E2D\u306E\u6708\u306B\u9023\u52D5)----
+  var budgetEl = document.getElementById('cccn-budget');
+  var BUDGET = +data.budget || 0;
+  var BUDGET_RATE = +data.budgetRate || 0;
+  function monthKeyOf(t){ var d = new Date(t); if(isNaN(d.getTime())) return null; return d.getFullYear() + '-' + pad(d.getMonth()+1); }
+  // \u4E88\u7B97\u306F\u300C\u6708\u300D\u5358\u4F4D\u3002\u9078\u629E\u4E2D\u30D0\u30B1\u30C3\u30C8\u304C\u5C5E\u3059\u308B\u66A6\u6708\u3092\u5BFE\u8C61\u306B\u3059\u308B(\u901A\u7B97\u306E\u3068\u304D\u306F\u4ECA\u6708)\u3002
+  function targetMonthKey(){
+    if(SEL === null) return monthKeyOf(Date.now());
+    if(GRAN === 'month') return SEL;      // \u65E2\u306B YYYY-MM
+    return SEL.slice(0, 7);               // YYYY-MM-DD -> YYYY-MM
+  }
+  function renderBudget(){
+    if(!budgetEl || !(BUDGET > 0)) return;
+    var mk = targetMonthKey();
+    var usd = 0, jpy = 0;
+    for(var i=0;i<turns.length;i++){
+      var tn = turns[i];
+      if(monthKeyOf(tn.t) !== mk) continue;
+      var bs = tn.bs || {}, fx = tn.fx || 0;
+      for(var s in bs){ if(bs.hasOwnProperty(s)){ usd += bs[s]; jpy += bs[s]*fx; } }
+    }
+    var pct = BUDGET > 0 ? (usd / BUDGET) * 100 : 0;
+    var width = Math.max(0, Math.min(100, pct));
+    var level = pct >= 100 ? 'over' : pct >= 70 ? 'warn' : 'ok';
+    var budgetJpy = BUDGET * BUDGET_RATE;
+    var curMonth = monthKeyOf(Date.now());
+    var monthShort = (mk === curMonth) ? '\u4ECA\u6708' : mk;
+
+    clearNode(budgetEl);
+    var h = document.createElement('h2');
+    h.textContent = '\u6708\u4E88\u7B97 / Monthly budget';
+    var sub = document.createElement('span'); sub.className = 'stat-sub';
+    sub.textContent = ' ' + mk + (mk === curMonth ? '(\u4ECA\u6708)' : '');
+    h.appendChild(sub);
+    budgetEl.appendChild(h);
+
+    var bar = document.createElement('div'); bar.className = 'budget-bar';
+    var fill = document.createElement('div'); fill.className = 'budget-fill lvl-' + level;
+    fill.style.width = width.toFixed(1) + '%';
+    bar.appendChild(fill); budgetEl.appendChild(bar);
+
+    var foot = document.createElement('div'); foot.className = 'budget-foot';
+    var left = document.createElement('span');
+    left.appendChild(document.createTextNode(monthShort + ' '));
+    var b = document.createElement('b'); b.textContent = formatUSD(usd); left.appendChild(b);
+    left.appendChild(document.createTextNode(' / ' + formatUSD(BUDGET) + ' '));
+    var mut = document.createElement('span'); mut.className = 'muted';
+    mut.textContent = '(' + formatJPY(jpy) + ' / ' + formatJPY(budgetJpy) + ')';
+    left.appendChild(mut);
+    var pctEl = document.createElement('span'); pctEl.className = 'budget-pct lvl-' + level;
+    pctEl.textContent = pct.toFixed(1) + '% used';
+    foot.appendChild(left); foot.appendChild(pctEl);
+    budgetEl.appendChild(foot);
+  }
+
+  // ---- \u30BF\u30FC\u30F3\u5C65\u6B74 ----
+  // \u5168\u671F\u9593\u3060\u3068\u6570\u5343\u884C\u306B\u306A\u308A\u30DA\u30FC\u30B8\u304C\u6975\u7AEF\u306B\u9577\u304F\u30FB\u91CD\u304F\u306A\u308B\u305F\u3081\u3001DOM \u63CF\u753B\u306F\u6700\u5927 HIST_CAP \u4EF6\u306B\u6291\u3048\u308B\u3002
+  // \u691C\u7D22\u306F\u9078\u629E\u4E2D\u306E\u5168\u30BF\u30FC\u30F3\u3092\u5BFE\u8C61\u306B\u3057\u3001\u4E00\u81F4\u4EF6\u6570\u3092\u4EF6\u6570\u8868\u793A\u306B\u51FA\u3059(\u5148\u982D HIST_CAP \u4EF6\u3060\u3051\u63CF\u753B)\u3002
+  var HIST_CAP = 200;
+  var tbody = document.getElementById('turn-body');
+  var search = document.getElementById('turn-search');
+  var count = document.getElementById('turn-count');
+  var histData = []; // \u9078\u629E\u4E2D\u306E\u671F\u9593\u306E\u30BF\u30FC\u30F3(\u65B0\u3057\u3044\u9806)
+
+  function matchStr(t){
+    return ((t.pr||'') + ' ' + (t.p||'') + ' ' + (t.pf||'') + ' ' + (t.md||'') + ' ' + ((t.mr||[]).join(' '))).toLowerCase();
+  }
+
+  function buildRow(t){
+    var tr = document.createElement('tr');
+    tr.className = 'turn-row'; tr.tabIndex = 0; tr.title = '\u30AF\u30EA\u30C3\u30AF\u3067\u5168\u6587\u8868\u793A / click to expand';
+    function cell(text, cls){ var td = document.createElement('td'); if(cls) td.className = cls; td.textContent = text; tr.appendChild(td); return td; }
+    cell(t.ts || '', 'c-time');
+    cell(t.p || '', 'c-proj');
+    cell(t.md || '', 'c-model');
+    cell(t.ti || '', 'c-num');
+    cell(t.to || '', 'c-num');
+    cell(formatUSD(t.um || 0), 'c-num');
+    cell(formatJPY((t.um || 0) * (t.fx || 0)), 'c-num');
+    var full = t.pr || '';
+    var head = full.length > 80 ? full.slice(0,80) + '\u2026' : full;
+    cell(head.length ? head : '(\u30D7\u30ED\u30F3\u30D7\u30C8\u306A\u3057)', 'c-prompt');
+
+    var dtr = document.createElement('tr'); dtr.className = 'turn-detail'; dtr.hidden = true;
+    var dtd = document.createElement('td'); dtd.colSpan = 8;
+    var meta = document.createElement('div'); meta.className = 'detail-meta';
+    var mp = [];
+    if(t.pf) mp.push(t.pf);
+    if(t.br) mp.push(t.br);
+    if(t.mr && t.mr.length) mp.push(t.mr.join(', '));
+    meta.textContent = mp.join('  \xB7  ');
+    dtd.appendChild(meta);
+    if(t.sa){
+      var saLine = document.createElement('div'); saLine.className = 'detail-meta';
+      saLine.textContent = '\u30B5\u30D6\u30A8\u30FC\u30B8\u30A7\u30F3\u30C8: ' + (t.sa.usd||'') + '(' + (t.sa.jpy||'') + ')\xB7 ' + (t.sa.models||'') + ' \xB7 API\u30B3\u30FC\u30EB ' + (t.sa.apiCalls||0);
+      dtd.appendChild(saLine);
+    }
+    var pre = document.createElement('div'); pre.className = 'detail-prompt';
+    pre.textContent = full.length ? full : '(\u30D7\u30ED\u30F3\u30D7\u30C8\u306A\u3057)';
+    dtd.appendChild(pre); dtr.appendChild(dtd);
+    function toggle(){ dtr.hidden = !dtr.hidden; if(dtr.hidden) tr.classList.remove('open'); else tr.classList.add('open'); }
+    tr.addEventListener('click', toggle);
+    tr.addEventListener('keydown', function(e){ if(e.key === 'Enter' || e.key === ' '){ e.preventDefault(); toggle(); } });
+    tbody.appendChild(tr); tbody.appendChild(dtr);
+  }
+
+  function renderHistory(sub){
+    if(!tbody) return;
+    histData = sub.slice().sort(function(a,b){ return b.t - a.t; });
+    applyFilter();
+  }
+  function applyFilter(){
+    if(!tbody) return;
+    clearNode(tbody);
+    var q = ((search && search.value) || '').trim().toLowerCase();
+    var matched = 0, shown = 0;
+    for(var i=0;i<histData.length;i++){
+      var t = histData[i];
+      if(q && matchStr(t).indexOf(q) < 0) continue;
+      matched++;
+      if(shown < HIST_CAP){ buildRow(t); shown++; }
+    }
+    if(count){ count.textContent = (matched > shown) ? (matched + ' \u4EF6\u4E2D ' + shown + ' \u4EF6\u3092\u8868\u793A') : (matched + ' \u4EF6'); }
+  }
+
+  // ---- \u9078\u629E\u30E9\u30D9\u30EB\u30FB\u30B3\u30F3\u30C8\u30ED\u30FC\u30EB ----
+  var selLabelEl = document.getElementById('cccn-sel-label');
+  function updateSelLabel(sub){
+    if(!selLabelEl) return;
+    var usd = 0, jpy = 0;
+    sub.forEach(function(tn){ var fx = tn.fx||0; var bs = tn.bs||{}; for(var s in bs){ if(bs.hasOwnProperty(s)){ usd += bs[s]; jpy += bs[s]*fx; } } });
+    clearNode(selLabelEl);
+    var b = document.createElement('b'); b.textContent = periodText(SEL, GRAN);
+    selLabelEl.appendChild(b);
+    selLabelEl.appendChild(document.createTextNode('  ' + formatUSD(usd) + ' \xB7 ' + formatJPY(jpy) + ' \xB7 ' + sub.length + ' \u30BF\u30FC\u30F3'));
+  }
+  function updateControls(){
+    var gbtns = document.querySelectorAll('[data-gran]');
+    for(var i=0;i<gbtns.length;i++){ gbtns[i].classList.toggle('active', gbtns[i].getAttribute('data-gran') === GRAN); }
+    var allBtn = document.getElementById('cccn-all');
+    if(allBtn) allBtn.classList.toggle('active', SEL === null);
+  }
+
+  // ---- \u5168\u4F53\u30EC\u30F3\u30C0\u30EA\u30F3\u30B0 ----
+  function render(){
+    var sub = turnsInSelection();
+    renderChart();
+    renderBudget();
+    renderByModel(sub);
+    renderByProject(sub);
+    renderHistory(sub);
+    updateSelLabel(sub);
+    updateControls();
+  }
+
+  // \u30A4\u30D9\u30F3\u30C8\u914D\u7DDA\u3002
+  var gbtns = document.querySelectorAll('[data-gran]');
+  for(var i=0;i<gbtns.length;i++){
+    (function(btn){ btn.addEventListener('click', function(){ setGran(btn.getAttribute('data-gran')); setSel(null); render(); }); })(gbtns[i]);
+  }
+  var allBtn = document.getElementById('cccn-all');
+  if(allBtn) allBtn.addEventListener('click', function(){ setSel(null); render(); });
+  if(search){
+    var saved = ssGet('cccn-search');
+    if(saved !== null) search.value = saved;
+    search.addEventListener('input', function(){ ssSet('cccn-search', search.value); applyFilter(); });
+  }
+
+  render();
+
+  // \u81EA\u52D5\u30EA\u30ED\u30FC\u30C9\u3092\u8DE8\u3044\u3067\u30B9\u30AF\u30ED\u30FC\u30EB\u4F4D\u7F6E\u3092\u7DAD\u6301\u3059\u308B(\u30ED\u30FC\u30C9\u6642\u306B\u5FA9\u5143 \u2192 \u4EE5\u5F8C\u306F\u4FDD\u5B58\u306E\u307F)\u3002
+  var savedScroll = ssGet('cccn-scroll');
+  if(savedScroll !== null){ var sy = parseInt(savedScroll, 10); if(!isNaN(sy)){ try { window.scrollTo(0, sy); } catch(e){} } }
+  window.addEventListener('scroll', function(){ ssSet('cccn-scroll', String(window.scrollY)); });
+
+  // \u30C1\u30E3\u30FC\u30C8\u306E\u6A2A\u30B9\u30AF\u30ED\u30FC\u30EB\u4F4D\u7F6E\u3082\u4FDD\u5B58\u3059\u308B(\u30EA\u30ED\u30FC\u30C9\u8DE8\u304E\u306E\u5FA9\u5143\u7528\u3002\u5FA9\u5143\u306F renderChart \u306E\u521D\u56DE\u3067\u884C\u3046)\u3002
+  var chartScroller = chartEl ? chartEl.parentNode : null;
+  if(chartScroller){ chartScroller.addEventListener('scroll', function(){ ssSet('cccn-chart-scroll', String(chartScroller.scrollLeft)); }); }
+})();
+</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>`;
+}
+function renderLegend(slots) {
+  if (slots.length < 2) return "";
+  const items = slots.map((m) => `<span class="legend-item"><span class="swatch k${m.slot}"></span>${esc(m.name)}</span>`).join("");
+  return `<div class="legend">${items}</div>`;
+}
+function budgetCard(budgetUSD, month, fallbackRate) {
+  if (!(budgetUSD > 0)) return "";
+  const pct = month.usd / budgetUSD * 100;
+  const width = Math.max(0, Math.min(100, pct));
+  const level = pct >= 100 ? "over" : pct >= 70 ? "warn" : "ok";
+  const budgetJpy = budgetUSD * fallbackRate;
+  return `<section class="card" id="cccn-budget"><h2>\u6708\u4E88\u7B97 / Monthly budget<span class="stat-sub"> \u4ECA\u6708(\u66A6\u6708)</span></h2><div class="budget-bar"><div class="budget-fill lvl-${level}" style="width:${width.toFixed(1)}%"></div></div><div class="budget-foot"><span>\u4ECA\u6708 <b>${esc(formatUSD(month.usd))}</b> / ${esc(formatUSD(budgetUSD))} <span class="muted">(${esc(formatJPY(month.jpy))} / ${esc(formatJPY(budgetJpy))})</span></span><span class="budget-pct lvl-${level}">${pct.toFixed(1)}% used</span></div></section>`;
+}
+function escapeJsonForScript(json) {
+  return json.replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+function renderDashboard(turns, opts) {
+  const version = readVersion();
+  const generatedAt = fmtLocalDateTime((/* @__PURE__ */ new Date()).toISOString());
+  const period = opts.days === null ? "\u5168\u671F\u9593" : `\u76F4\u8FD1 ${opts.days} \u65E5\u9593`;
+  const map = computeSlotMap(turns);
+  const kpi = computeKpis(turns);
+  const cfg = readConfig();
+  const budgetUSD = cfg.monthlyBudgetUSD;
+  const turnsEmbed = turns.map((rec) => buildTurnEmbed(rec, map));
+  const anyTruncated = turnsEmbed.some((t) => t.tr);
+  const anySub = turns.some((r) => r.subagents);
+  let subUsd = 0;
+  let subJpy = 0;
+  for (const r of turns) {
+    if (r.subagents) {
+      subUsd += r.subagents.costUSD;
+      subJpy += r.subagents.costUSD * r.fxRate;
+    }
+  }
+  let minMs = Infinity;
+  let maxMs = -Infinity;
+  for (const t of turnsEmbed) {
+    if (t.t > 0) {
+      if (t.t < minMs) minMs = t.t;
+      if (t.t > maxMs) maxMs = t.t;
+    }
+  }
+  const rangeText = Number.isFinite(minMs) && Number.isFinite(maxMs) ? `${dateKeyOf(new Date(minMs))} \u301C ${dateKeyOf(new Date(maxMs))}` : "\u2014";
+  const embed = {
+    version,
+    generatedAt,
+    slots: map.slots,
+    turns: turnsEmbed,
+    budget: budgetUSD,
+    budgetRate: cfg.fx.fallbackRate
+  };
+  const dataJson = escapeJsonForScript(JSON.stringify(embed));
+  const reloadSec = Number.isFinite(opts.autoReloadSec) && opts.autoReloadSec > 0 ? Math.floor(opts.autoReloadSec) : 0;
+  const refreshMeta = reloadSec > 0 ? `<meta http-equiv="refresh" content="${reloadSec}">` : "";
+  const autoUpdateFoot = reloadSec > 0 ? `<div class="foot">\u7D04 ${reloadSec} \u79D2\u3054\u3068\u306B\u81EA\u52D5\u66F4\u65B0(\u6700\u65B0\u5316\u306F Claude Code \u306E\u5FDC\u7B54\u5B8C\u4E86\u6642)</div>` : "";
+  const head = `<!doctype html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="color-scheme" content="light dark">` + refreshMeta + `<title>ccc-notifier \u30C0\u30C3\u30B7\u30E5\u30DC\u30FC\u30C9</title>` + STYLE + `</head><body><div class="wrap">`;
+  const foot = autoUpdateFoot + `<div class="foot">ccc-notifier v${esc(version)} \xB7 \u30C7\u30FC\u30BF\u306F\u30ED\u30FC\u30AB\u30EB\u306E\u307F / all data stays local</div></div><div id="cccn-tip" class="cccn-tip" hidden></div><script id="cccn-data" type="application/json">${dataJson}</script>` + APP_JS + `</body></html>`;
+  if (turns.length === 0) {
+    const header2 = `<div class="head"><div><h1>ccc-notifier \u30C0\u30C3\u30B7\u30E5\u30DC\u30FC\u30C9</h1><div class="sub">${esc(period)} \xB7 \u751F\u6210 ${esc(generatedAt)}</div></div></div>`;
+    const empty = `<div class="empty"><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 + empty + foot;
+  }
+  const header = `<div class="head"><div><h1>ccc-notifier \u30C0\u30C3\u30B7\u30E5\u30DC\u30FC\u30C9</h1><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">\u901A\u7B97 / Total</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 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("\u901A\u7B97", "\u5168\u671F\u9593", kpi.all) + `</div>`;
+  const budgetSection = budgetCard(budgetUSD, kpi.month, cfg.fx.fallbackRate);
+  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\u901A\u7B97\u300D\u3067\u5168\u671F\u9593\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">\u901A\u7B97</button><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\u901A\u7B97)\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 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>`;
+  return head + header + kpiSection + budgetSection + chartSection + breakdownSection + historySection + foot;
+}
+function toWindowsPath(path) {
+  try {
+    const r = spawnSync("wslpath", ["-w", path], { encoding: "utf8", timeout: 3e3 });
+    if (r.status === 0 && typeof r.stdout === "string") {
+      const win = r.stdout.trim();
+      return win.length > 0 ? win : null;
+    }
+  } catch {
+  }
+  return null;
+}
+function browserOpenPlan(platform, wsl, path, winPath) {
+  if (platform === "darwin") return { cmd: "open", args: [path] };
+  if (platform === "win32") return { cmd: "cmd", args: ["/c", "start", "", path] };
+  if (wsl && winPath) {
+    return {
+      cmd: "powershell.exe",
+      args: ["-NoProfile", "-NonInteractive", "-Command", `Start-Process -FilePath "${winPath}"`]
+    };
+  }
+  return { cmd: "xdg-open", args: [path] };
+}
+function openInBrowser(path) {
+  try {
+    const wsl = process.platform === "linux" && isWSL();
+    const winPath = wsl ? toWindowsPath(path) : null;
+    const { cmd, args } = browserOpenPlan(process.platform, wsl, path, winPath);
+    const child = spawn(cmd, args, { detached: true, stdio: "ignore" });
+    child.on("error", () => {
+    });
+    child.unref();
+  } catch {
+  }
+}
+function writeDashboardHtml(opts) {
+  const days = opts.days ?? null;
+  const turns = readTurns(days ?? void 0);
+  const html = renderDashboard(turns, {
+    days,
+    open: false,
+    out: opts.outPath,
+    autoReloadSec: opts.autoReloadSec
+  });
+  mkdirSync(dirname(opts.outPath), { recursive: true });
+  writeFileSync(opts.outPath, html, "utf8");
+}
+async function runDashboard(argv) {
+  const opts = parseArgs(argv);
+  let outPath;
+  try {
+    outPath = opts.out ?? join(paths().home, "report.html");
+    writeDashboardHtml({ days: opts.days, outPath, autoReloadSec: opts.autoReloadSec });
+  } catch (err) {
+    console.error(
+      `dashboard \u306E\u751F\u6210\u306B\u5931\u6557\u3057\u307E\u3057\u305F / failed to generate dashboard: ${err instanceof Error ? err.message : String(err)}`
+    );
+    return 1;
+  }
+  console.log(`\u30C0\u30C3\u30B7\u30E5\u30DC\u30FC\u30C9\u3092\u751F\u6210\u3057\u307E\u3057\u305F / dashboard written: ${outPath}`);
+  if (process.platform === "linux" && isWSL()) {
+    const winPath = toWindowsPath(outPath);
+    if (winPath) console.log(`Windows \u304B\u3089\u958B\u304F\u5834\u5408 / on Windows: ${winPath}`);
+  }
+  if (opts.open) {
+    openInBrowser(outPath);
+    console.log("\u30D6\u30E9\u30A6\u30B6\u3067\u958B\u3044\u3066\u3044\u307E\u3059\u2026 / opening in your browser\u2026");
+  }
+  return 0;
+}
+
+export {
+  browserOpenPlan,
+  writeDashboardHtml,
+  runDashboard
+};