@caius_kong/ccusage-dashboard 0.2.13 → 0.2.15

package/lib/index.html

@@ -55,7 +55,9 @@
   .range button{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:12px}
   .range button:hover{border-color:var(--accent)}
   .range button.active{background:var(--accent);border-color:var(--accent);color:#0d1117;font-weight:600}
-  .sessid{font-variant-numeric:tabular-nums;letter-spacing:.3px}
+  .sessid{font-variant-numeric:tabular-nums;letter-spacing:.3px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
+  .sessid:hover{background:var(--accent);border-color:var(--accent);color:#0d1117}
+  .sessid.copied{background:var(--green);border-color:var(--green);color:#0d1117}
   .budget-band{margin:2px 0 14px;background:var(--panel-2);border-radius:8px;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
   .budget-band .bl{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
   .budget-band .bl b{color:var(--text)}
@@ -132,7 +134,37 @@ function fmtTok(n){
   return String(n);
 }
 function fmtPct(n){return n==null?"–":n.toFixed(1)+"%";}
+// cache hit rate (input side): read / (read + non-cached input). Shared by the
+// c5 summary card and per-row hit spans.
+function cacheHitStats(o){
+  const readIn=(o&&o.cacheReadTokens)||0, missIn=(o&&o.inputTokens)||0;
+  const rate=(readIn+missIn)>0?(readIn/(readIn+missIn))*100:null;
+  return {readIn, missIn, rate};
+}
+function cacheHitSpan(o){
+  const {readIn, missIn, rate}=cacheHitStats(o);
+  const tip=rate!=null?`cache hit rate: ${fmtPct(rate)} (read ${fmtTok(readIn)} / in ${fmtTok(missIn)})`:"no cache read data";
+  return `<span title="${tip}">hit ${fmtPct(rate)}</span>`;
+}
 function esc(s){const d=document.createElement("div");d.textContent=s;return d.innerHTML;}
+async function copySessionId(id, ev){
+  ev.stopPropagation();
+  const el=ev.currentTarget; // capture before any await; currentTarget is nulled after dispatch
+  try{
+    await navigator.clipboard.writeText(id);
+  }catch(e){
+    // fallback for non-secure contexts / older browsers
+    const ta=document.createElement("textarea");
+    ta.value=id;ta.style.position="fixed";ta.style.opacity="0";
+    document.body.appendChild(ta);ta.select();
+    try{document.execCommand("copy");}catch(_){}
+    document.body.removeChild(ta);
+  }
+  el.classList.add("copied");
+  const old=el.textContent;
+  el.textContent="✓ copied";
+  setTimeout(()=>{el.textContent=old;el.classList.remove("copied");},1200);
+}
 
 function renderModels(data){
   const total=data.totalCost||0;
@@ -145,7 +177,7 @@ function renderModels(data){
     const badge=m2?`<span class="pill">${esc(m2[1])}</span>`:"";
     const mn=m2?esc(m2[2]||m2[1]):esc(m.name);
     return `<div class="row"><div class="row-top"><span class="name">${mn}${badge ? " " + badge : ""}</span><span class="cost">${fmtUsd(m.cost)} · ${pct.toFixed(1)}%</span></div>
-      <div class="toks"><span title="input">in ${fmtTok(m.inputTokens)}</span><span title="output">out ${fmtTok(m.outputTokens)}</span><span title="cache read">read ${fmtTok(m.cacheReadTokens)}</span><span title="cache write">write ${fmtTok(m.cacheCreationTokens)}</span></div>
+      <div class="toks"><span title="input">in ${fmtTok(m.inputTokens)}</span><span title="output">out ${fmtTok(m.outputTokens)}</span><span title="cache read">read ${fmtTok(m.cacheReadTokens)}</span>${cacheHitSpan(m)}<span title="cache write">write ${fmtTok(m.cacheCreationTokens)}</span></div>
       <div class="bar"><div style="width:${Math.max(pct,1.2)}%"></div></div></div>`;
   }).join("");
 }
@@ -190,13 +222,15 @@ function renderSessions(data){
   $("sessRange").textContent=`${total} sessions`;
   if(!list.length){$("sessionsList").innerHTML='<div class="empty">no sessions in range</div>';return;}
   $("sessionsList").innerHTML=list.map(s=>{
+    const shortId=s.id.slice(0,8);
+    const idPill=`<span class="pill sessid" title="click to copy full session id" onclick="copySessionId('${s.id.replace(/[\\']/g,"\\$&")}',event)">${esc(shortId)}</span>`;
     const label = s.hasCwd
-      ? `<span class="name" title="workdir: ${esc(s.cwd||s.projectKey)}">${esc(s.dirName||s.id.slice(0,8))} <span class="pill sessid">${esc(s.id.slice(0,8))}</span></span>`
-      : `<span class="name muted" title="no workdir found for this ${esc(s.agent)} session">${esc(s.id.slice(0,8))}</span>`;
+      ? `<span class="name" title="workdir: ${esc(s.cwd||s.projectKey)}">${esc(s.dirName||shortId)} ${idPill}</span>`
+      : `<span class="name muted" title="no workdir found for this ${esc(s.agent)} session">${idPill}</span>`;
     const last=(s.lastActivity||"").slice(0,10);
     return `<div class="row">
       <div class="row-top"><span>${label} <span class="pill">${esc(s.agent)}</span></span><span class="cost">${fmtUsd(s.cost)}</span></div>
-      <div class="toks">${last?`<span>${esc(last)}</span>`:""}<span title="input">in ${fmtTok(s.inputTokens)}</span><span title="output">out ${fmtTok(s.outputTokens)}</span><span title="cache read">read ${fmtTok(s.cacheReadTokens)}</span><span title="cache write">write ${fmtTok(s.cacheCreationTokens)}</span></div>
+      <div class="toks">${last?`<span>${esc(last)}</span>`:""}<span title="input">in ${fmtTok(s.inputTokens)}</span><span title="output">out ${fmtTok(s.outputTokens)}</span><span title="cache read">read ${fmtTok(s.cacheReadTokens)}</span>${cacheHitSpan(s)}<span title="cache write">write ${fmtTok(s.cacheCreationTokens)}</span></div>
     </div>`;
   }).join("");
 }
@@ -210,10 +244,9 @@ function applyCards(data){
   $("c3").textContent=fmtTok(data.cacheReadTokens);
   $("c4").textContent=fmtTok(data.cacheCreationTokens);
   // cache hit rate = cache-read input / (cache-read input + non-cached input)
-  const hitIn=data.cacheReadTokens||0, plainIn=data.inputTokens||0;
-  const hitRate = (hitIn+plainIn)>0 ? (hitIn/(hitIn+plainIn))*100 : null;
+  const {readIn, missIn, rate: hitRate}=cacheHitStats(data);
   $("c5").innerHTML=fmtPct(hitRate)+(hitRate!=null?"<small> cache</small>":"");
-  $("c5p").textContent=hitRate!=null?`${fmtTok(plainIn)} miss · ${fmtTok(hitIn)} hit`:"";
+  $("c5p").textContent=hitRate!=null?`${fmtTok(missIn)} miss · ${fmtTok(readIn)} hit`:"";
   $("c1label").textContent=tabs[active].label;
   $("modelSum").textContent=fmtUsd(total);
 }

package/lib/server.py

@@ -202,14 +202,13 @@ def sessions(since_days: int = 30, period: str = "", from_date: str = "", to_dat
     Filtering: pass `period` in ("today" | "week" | "month") OR an explicit
     date range via `from_date`/`to_date` (YYYY-MM-DD). `since_days` is kept for
     backward compatibility with the old 7d/30d/90d/all selector.
-    """
-    data = run_ccusage(
-        ["session", "--by-agent", "--json", "--offline"],
-        TTL["/api/sessions"],
-    )
-    rows = data.get("session") or []
 
-    # ---- choose the cutoff window ----------------
+    The window is passed to ccusage as --since/--until so it filters by usage
+    EVENT date (entry.date) before summarising, exactly like the CLI session
+    report. Filtering rows ourselves by lastActivity would keep a whole session's
+    lifetime cost even when only a few events fall in the window, inflating the
+    total (observed: today $229 vs ccusage's true $0.09).
+    """
     today = date.today()
     lo = hi = None
     if from_date and to_date:
@@ -232,20 +231,17 @@ def sessions(since_days: int = 30, period: str = "", from_date: str = "", to_dat
         lo = today - timedelta(days=since_days)
         hi = today
 
+    ccusage_args = ["session", "--json", "--offline"]
+    if lo and hi:
+        ccusage_args += ["--since", lo.isoformat(), "--until", hi.isoformat()]
+    data = run_ccusage(ccusage_args, TTL["/api/sessions"])
+    rows = data.get("session") or []
+
     out = []
     for r in rows:
         meta = r.get("metadata") or {}
         sid = r.get("period")
         last_activity = meta.get("lastActivity") or ""
-        # date filter by last activity against [lo, hi]
-        if last_activity:
-            try:
-                act_date = date.fromisoformat(last_activity[:10])
-            except ValueError:
-                act_date = None
-            if act_date is not None:
-                if act_date < lo or act_date > hi:
-                    continue
         project_raw = meta.get("projectPath") or ""
         agent_name = r.get("agent", "?")
         cwd = ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caius_kong/ccusage-dashboard",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "One-command local dashboard for ccusage: today/week/month/custom cost by model, 30-day trend, monthly budget alert. Numbers straight from ccusage.",
   "license": "MIT",
   "type": "commonjs",