@caius_kong/ccusage-dashboard 0.2.2 → 0.2.4

package/lib/index.html

@@ -23,6 +23,7 @@
   .tab{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:7px 16px;cursor:pointer;color:var(--muted);font-size:13px}
   .tab.active{background:var(--panel-2);border-color:var(--accent);color:var(--text);font-weight:600}
   .tab:hover{color:var(--text)}
+  .tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
   .tab-budget{margin-left:auto;display:flex;align-items:center;gap:10px}
   .budget-pill{border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;border:1px solid var(--border)}
   .budget-ok{color:var(--green);border-color:var(--border)}
@@ -49,7 +50,7 @@
   .err{color:var(--red)}
   .pill{background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:1px 8px;font-size:11px;color:var(--muted);margin-left:6px}
   .hint{color:var(--muted);font-size:12px;margin-top:14px;text-align:center}
-  .range{display:flex;gap:8px;align-items:center;margin-left:6px}
+  .range{display:flex;gap:8px;align-items:center;margin-left:6px;flex-wrap:wrap}
   .range input{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 8px;font-size:12px;font-family:inherit}
   .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)}
@@ -71,12 +72,12 @@
   <span class="status"><span class="dot" id="dot"></span><span id="status">connecting…</span></span>
 </header>
 
-<div class="tabs">
-  <div class="tab active" data-tab="today">Today</div>
-  <div class="tab" data-tab="week">This Week</div>
-  <div class="tab" data-tab="month">This Month</div>
-  <div class="tab" data-tab="range">Custom Range</div>
-  <div class="tab" data-tab="sessions">Sessions</div>
+<div class="tabs" role="tablist" aria-label="Time period">
+  <div class="tab active" role="tab" tabindex="0" aria-selected="true" data-tab="today">Today</div>
+  <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>
@@ -122,7 +123,7 @@
   <div id="sessionsList"><div class="empty">loading…</div></div>
 </div>
 
-<div class="hint">auto-refresh: today 15s · others 60s · costs in USD · <span id="lastUpd"></span></div>
+<div class="hint">auto-refresh 15s · costs in USD · <span id="lastUpd"></span></div>
 
 <script>
 const $=(id)=>document.getElementById(id);
@@ -132,6 +133,7 @@ let active="today", modelCtx=[], sessDays=30;
 function fmtUsd(n){return "$"+(n==null?"–":Number(n).toFixed(2));}
 function fmtTok(n){
   if(n==null)return "–";
+  if(n>=1e9)return (n/1e9).toFixed(2)+"B";
   if(n>=1e6)return (n/1e6).toFixed(2)+"M";
   if(n>=1e3)return (n/1e3).toFixed(1)+"k";
   return String(n);
@@ -164,10 +166,10 @@ function applyBudget(month){
   fill.style.width=Math.min(pct,100)+"%";
   fill.className = pct>=100?"bg-danger":(pct>=80?"bg-warn":"bg-ok");
   $("budgetBand").style.display="flex";
-  let cls="budget-ok",txt=`budget ${fmtUsd(cap)} · ${pct.toFixed(0)}%`;
-  if(pct>=100){cls="budget-danger";txt=`⚠ ${fmtUsd(spent)} ≥ budget`;}
-  else if(pct>=80){cls="budget-warn";txt=`${fmtUsd(spent)} / ${fmtUsd(cap)} (${pct.toFixed(0)}%)`;}
-  const p=$("budgetPill");p.className="budget-pill "+cls;p.textContent=txt;
+  let cls="budget-ok",txt=`budget ${fmtUsd(cap)} · ${pct.toFixed(0)}%`,tip=`${fmtUsd(spent)} of ${fmtUsd(cap)} (${pct.toFixed(1)}%)`;
+  if(pct>=100){cls="budget-danger";txt=`⚠ ${fmtUsd(spent)} ≥ budget`;tip=`${fmtUsd(spent)} spent · ${pct.toFixed(1)}% of ${fmtUsd(cap)} budget`;}
+  else if(pct>=80){cls="budget-warn";txt=`${fmtUsd(spent)} / ${fmtUsd(cap)} (${pct.toFixed(0)}%)`;tip=`${fmtUsd(spent)} of ${fmtUsd(cap)} (${pct.toFixed(1)}%)`;}
+  const p=$("budgetPill");p.className="budget-pill "+cls;p.textContent=txt;p.title=tip;
 }
 
 async function loadSessions(){
@@ -186,8 +188,8 @@ function renderSessions(data){
   if(!list.length){$("sessionsList").innerHTML='<div class="empty">no sessions in range</div>';return;}
   $("sessionsList").innerHTML=list.map(s=>{
     const label = s.hasCwd
-      ? `<span class="name">${esc(s.dirName||s.cwd)} <span class="pill sessid">${esc(s.id.slice(0,8))}</span></span>`
-      : `<span class="name muted">${esc(s.id.slice(0,8))}</span>`;
+      ? `<span class="name" title="workdir from ccusage: ${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="workdir not provided by ccusage for ${esc(s.agent)}">${esc(s.id.slice(0,8))}</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>
@@ -302,9 +304,10 @@ async function tick(){
 }
 
 document.querySelectorAll(".tab").forEach(t=>{
-  t.addEventListener("click",()=>{
-    document.querySelectorAll(".tab").forEach(x=>x.classList.remove("active"));
+  const activate=()=>{
+    document.querySelectorAll(".tab").forEach(x=>{x.classList.remove("active");x.setAttribute("aria-selected","false");});
     t.classList.add("active");
+    t.setAttribute("aria-selected","true");
     active=t.dataset.tab;
     $("rangeRow").style.display = active==="range"?"block":"none";
     $("sessionsPanel").style.display = active==="sessions"?"block":"none";
@@ -316,7 +319,9 @@ document.querySelectorAll(".tab").forEach(t=>{
     }else{
       loadModels();
     }
-  });
+  };
+  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=>{

package/lib/server.py

@@ -230,8 +230,9 @@ def sessions(since_days: int = 30) -> dict:
                 "cacheReadTokens": r.get("cacheReadTokens", 0),
                 "cacheCreationTokens": r.get("cacheCreationTokens", 0),
                 "lastActivity": last_activity,
-                "cwd": cwd,          # absolute-ish path, empty if ccusage didn't provide it
+                "cwd": cwd,            # best-effort decoded path, empty if ccusage didn't provide it
                 "dirName": dir_name,  # last path segment; empty if ccusage didn't provide
+                "projectKey": project_raw,  # raw ccusage projectPath (authoritative, may be encoded)
                 "hasCwd": bool(project_raw),
             }
         )
@@ -242,12 +243,18 @@ def sessions(since_days: int = 30) -> dict:
 def _decode_cwd(raw: str) -> str:
     """Best-effort decode of ccusage's projectPath into a readable path.
 
-    pi's projectPath is a Claude-Code-style encoded dir name where '/' became '-'.
+    pi's projectPath is a Claude-Code-style encoded dir name where '/' became '-',
+    and literal '-' inside a dir name is NOT distinguishable from the separator
+    (encoding is lossy). So this is approximate: 'fund-tracker' may come back as
+    'fund/tracker'. The authoritative string is the raw projectPath itself.
     Example: '--Users-caius-kong-Documents-...-AutoTrans--' -> /Users/caius_kong/.../AutoTrans
     """
     if not raw:
         return ""
-    return raw.replace("-", "/")
+    parts = [p for p in raw.replace("-", "/").split("/") if p]
+    if not parts:
+        return ""
+    return "/" + "/".join(parts)
 
 
 def _basename(raw: str) -> str:

package/package.json

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