@caius_kong/ccusage-dashboard 0.2.2 → 0.2.3

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(){
@@ -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/package.json

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