@caius_kong/ccusage-dashboard 0.2.6 → 0.2.8

package/README.md

@@ -56,13 +56,14 @@ CCUSAGE_UI_NO_OPEN=1 npx @caius_kong/ccusage-dashboard   # don't auto-open brows
 
 | | |
 |---|---|
-| **Today / This Week / This Month / Custom Range** | totals + tokens + cache breakdown |
+| **Today / This Week / This Month / Custom Range** | totals + tokens + cache breakdown + **cache hit rate** |
 | **By model** | per-model cost, % of total, in/out/cache-read/cache-write tokens |
 | **30-day trend** | daily cost bar chart (hover for values, weekends marked) |
-| **Sessions** | per-session rows grouped by workdir name + short session id, filterable 7d/30d/90d/all, sorted by cost |
+| **Sessions** | per-session rows grouped by workdir name + short session id, sorted by cost — shares the top time-filter tabs (today/week/month/custom) |
 | **Budget alert** | monthly cap (default $300) — green <80%, yellow <100%, red ≥100% |
 
-All costs in USD. Auto-refresh every 15s.
+All costs in USD. **Cache hit rate** is the standard input-side metric:
+`cacheReadTokens / (cacheReadTokens + non-cached inputTokens)`. Auto-refresh every 15s.
 
 ## How it works
 

package/lib/index.html

@@ -77,7 +77,6 @@
   <div class="tab" role="tab" tabindex="0" aria-selected="false" data-tab="week">This Week</div>
   <div class="tab" role="tab" tabindex="0" aria-selected="false" data-tab="month">This Month</div>
   <div class="tab" role="tab" tabindex="0" aria-selected="false" data-tab="range">Custom Range</div>
-  <div class="tab" role="tab" tabindex="0" aria-selected="false" data-tab="sessions">Sessions</div>
   <div class="tab-budget">
     <span class="budget-pill" id="budgetPill">budget …</span>
   </div>
@@ -93,6 +92,7 @@
   <div class="card"><div class="label">Tokens</div><div class="value" id="c2">–</div></div>
   <div class="card"><div class="label">Cache Read</div><div class="value" id="c3">–</div></div>
   <div class="card"><div class="label">Cache Write</div><div class="value" id="c4">–</div></div>
+  <div class="card"><div class="label">Cache Hit Rate</div><div class="value" id="c5">–</div><div class="period" id="c5p"></div></div>
 </div>
 
 <div id="rangeRow" class="panel" style="display:none">
@@ -108,18 +108,11 @@
 
 <div class="panel"><h2>Models <span class="tot" id="modelSum"></span></h2><div id="modelList"><div class="empty">loading…</div></div></div>
 
-<div class="panel" id="sessionsPanel" style="display:none">
-  <h2>Sessions <span class="tot" id="sessSum"></span>
+<div class="panel" id="sessionsPanel">
+  <h2>Sessions
     <span class="pill" id="sessRange"></span>
+    <span class="tot" id="sessSum" style="margin-left:8px"></span>
   </h2>
-  <div class="range" style="margin-bottom:12px">
-    <span class="pill">last</span>
-    <button data-sdays="7" class="sday">7d</button>
-    <button data-sdays="30" class="sday active">30d</button>
-    <button data-sdays="90" class="sday">90d</button>
-    <button data-sdays="365" class="sday">all</button>
-    <span class="pill" style="margin-left:auto" id="sessHint"></span>
-  </div>
   <div id="sessionsList"><div class="empty">loading…</div></div>
 </div>
 
@@ -127,8 +120,8 @@
 
 <script>
 const $=(id)=>document.getElementById(id);
-const tabs={today:{label:"Today",len:0},week:{label:"This Week",len:0},month:{label:"This Month",len:0},range:{label:"Custom Range",len:1},sessions:{label:"Sessions",len:0}};
-let active="today", modelCtx=[], sessDays=30;
+const tabs={today:{label:"Today",len:0},week:{label:"This Week",len:0},month:{label:"This Month",len:0},range:{label:"Custom Range",len:1}};
+let active="today", modelCtx=[];
 
 function fmtUsd(n){return "$"+(n==null?"–":Number(n).toFixed(2));}
 function fmtTok(n){
@@ -138,6 +131,7 @@ function fmtTok(n){
   if(n>=1e3)return (n/1e3).toFixed(1)+"k";
   return String(n);
 }
+function fmtPct(n){return n==null?"–":n.toFixed(1)+"%";}
 function esc(s){const d=document.createElement("div");d.textContent=s;return d.innerHTML;}
 
 function renderModels(data){
@@ -173,8 +167,17 @@ function applyBudget(month){
 }
 
 async function loadSessions(){
-  $("sessionsList").innerHTML='<div class="empty">loading sessions…</div>';
-  const data=await(await fetch(`/api/sessions?days=${sessDays}`)).json();
+  // follow the top-level time filter (today/week/month/custom range)
+  let q="";
+  if(active==="today")q="period=today";
+  else if(active==="week")q="period=week";
+  else if(active==="month")q="period=month";
+  else if(active==="range"){
+    const f=$("fromDate").value,t=$("toDate").value;
+    if(!f||!t){return;}
+    q=`from=${f}&to=${t}`;
+  }else{return;}
+  const data=await(await fetch(`/api/sessions?${q}`)).json();
   if(data.error)throw new Error(data.error);
   renderSessions(data);
 }
@@ -182,9 +185,9 @@ async function loadSessions(){
 function renderSessions(data){
   const list=data.sessions||[];
   const total=data.total||0;
-  const sum=list.reduce((a,s)=>a+(s.cost||0),0);
+  const sum=data.totalCost!=null?data.totalCost:list.reduce((a,s)=>a+(s.cost||0),0);
   $("sessSum").textContent=fmtUsd(sum);
-  $("sessRange").textContent=`${total} sessions · last ${sessDays===365?"year":sessDays+"d"}`;
+  $("sessRange").textContent=`${total} sessions`;
   if(!list.length){$("sessionsList").innerHTML='<div class="empty">no sessions in range</div>';return;}
   $("sessionsList").innerHTML=list.map(s=>{
     const label = s.hasCwd
@@ -206,6 +209,11 @@ function applyCards(data){
   $("c2").textContent=fmtTok(tt);
   $("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;
+  $("c5").innerHTML=fmtPct(hitRate)+(hitRate!=null?"<small> cache</small>":"");
+  $("c5p").textContent=hitRate!=null?`${fmtTok(plainIn)} miss · ${fmtTok(hitIn)} hit`:"";
   $("c1label").textContent=tabs[active].label;
   $("modelSum").textContent=fmtUsd(total);
 }
@@ -298,6 +306,7 @@ async function tick(){
     applyBudget(month);
     await loadModels();
     await loadTrend();
+    await loadSessions();
     dot.className="dot ok";st.textContent="live";
     $("lastUpd").textContent="last updated "+new Date().toLocaleTimeString();
   }catch(e){dot.className="dot err";st.textContent="error: "+e.message;}
@@ -310,28 +319,18 @@ document.querySelectorAll(".tab").forEach(t=>{
     t.setAttribute("aria-selected","true");
     active=t.dataset.tab;
     $("rangeRow").style.display = active==="range"?"block":"none";
-    $("sessionsPanel").style.display = active==="sessions"?"block":"none";
     if(active==="range"){
       if(!$("fromDate").value){const e=new Date();$("toDate").value=e.toISOString().slice(0,10);const s=new Date();s.setDate(s.getDate()-6);$("fromDate").value=s.toISOString().slice(0,10);}
       rangeApply();
-    }else if(active==="sessions"){
-      loadSessions();
     }else{
       loadModels();
     }
+    loadSessions();
   };
   t.addEventListener("click",activate);
   t.addEventListener("keydown",(e)=>{if(e.key==="Enter"||e.key===" "||e.key==="Spacebar"){e.preventDefault();activate();}});
 });
 $("rangeGo").addEventListener("click",rangeApply);
-document.querySelectorAll(".sday").forEach(b=>{
-  b.addEventListener("click",()=>{
-    document.querySelectorAll(".sday").forEach(x=>x.classList.remove("active"));
-    b.classList.add("active");
-    sessDays=parseInt(b.dataset.sdays,10);
-    loadSessions();
-  });
-});
 
 tick();
 setInterval(tick,15000);

package/lib/server.py

@@ -194,10 +194,14 @@ def trend(days: int = 30) -> dict:
     return {"start": start.isoformat(), "end": end.isoformat(), "days": out}
 
 
-def sessions(since_days: int = 30) -> dict:
+def sessions(since_days: int = 30, period: str = "", from_date: str = "", to_date: str = "") -> dict:
     """Return ccusage's session report, each with its real workdir (dirName) when
     the agent's local session store records one. Every numeric cost/token field
     comes 100% from ccusage; the workdir is only a display label.
+
+    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"],
@@ -205,26 +209,44 @@ def sessions(since_days: int = 30) -> dict:
     )
     rows = data.get("session") or []
 
-    cutoff = date.today() - timedelta(days=since_days)
+    # ---- choose the cutoff window ----------------
+    today = date.today()
+    lo = hi = None
+    if from_date and to_date:
+        try:
+            lo = date.fromisoformat(from_date)
+            hi = date.fromisoformat(to_date)
+        except ValueError:
+            lo = hi = None
+    elif period == "today":
+        lo = hi = today
+    elif period == "week":
+        lo = today - timedelta(days=6)
+        hi = today
+    elif period == "month":
+        lo = today.replace(day=1)
+        hi = today
+    elif period == "custom":
+        pass  # fall through to since_days below (legacy)
+    if lo is None:
+        lo = today - timedelta(days=since_days)
+        hi = today
+
     out = []
     for r in rows:
         meta = r.get("metadata") or {}
-        sid = r.get("period")  # session id in ccusage's session report
+        sid = r.get("period")
         last_activity = meta.get("lastActivity") or ""
-        # date filter by last activity
+        # 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 and act_date < cutoff:
-                continue
+            if act_date is not None:
+                if act_date < lo or act_date > hi:
+                    continue
         project_raw = meta.get("projectPath") or ""
-        # Resolve the authoritative workdir (dir name) for every agent that stores one
-        # locally. ccusage's projectPath only covers pi and is lossy for hyphenated names
-        # ("fund-tracker" -> "tracker"). Each agent keeps its own session store whose
-        # files carry the real cwd, so we read those. This ONLY affects the display label
-        # (dirName/cwd) — every numeric cost/token field still comes 100% from ccusage.
         agent_name = r.get("agent", "?")
         cwd = ""
         dir_name = ""
@@ -236,7 +258,6 @@ def sessions(since_days: int = 30) -> dict:
                 if cwd_base:
                     dir_name = cwd_base
         if not cwd:
-            # fall back to a best-effort decode of ccusage's projectPath (pi only)
             cwd = _decode_cwd(project_raw)
             dir_name = _basename(project_raw)
         out.append(
@@ -249,14 +270,15 @@ def sessions(since_days: int = 30) -> dict:
                 "cacheReadTokens": r.get("cacheReadTokens", 0),
                 "cacheCreationTokens": r.get("cacheCreationTokens", 0),
                 "lastActivity": last_activity,
-                "cwd": cwd,            # real workdir when resolved, else best-effort decode
-                "dirName": dir_name,  # real dir name when resolved, else last path segment
-                "projectKey": project_raw,  # raw ccusage projectPath
+                "cwd": cwd,
+                "dirName": dir_name,
+                "projectKey": project_raw,
                 "hasCwd": bool(cwd),
             }
         )
     out.sort(key=lambda s: s["cost"], reverse=True)
-    return {"total": len(out), "sessions": out}
+    total_cost = round(sum(s["cost"] for s in out), 4)
+    return {"total": len(out), "totalCost": total_cost, "sessions": out}
 
 
 def _pi_cwd_from_disk(project_key: str):
@@ -498,8 +520,10 @@ class Handler(BaseHTTPRequestHandler):
             self._json(trend(days))
             return
         elif path == "/api/sessions":
+            period = params.get("period", "")
+            frm, to = params.get("from", ""), params.get("to", "")
             days = max(1, min(366, int(params.get("days", "30"))))
-            self._json(sessions(days))
+            self._json(sessions(days, period, frm, to))
             return
         else:
             self._send(404, b"not found", "text/plain")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caius_kong/ccusage-dashboard",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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",