ccusage-ui 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,49 @@
+# ccusage-ui
+
+Web UI dashboard for [Claude Code](https://claude.ai/code) usage statistics.
+
+[![screenshot](screenshot.png)](screenshot.png)
+
+![port](https://img.shields.io/badge/port-8150-blue)
+![npm](https://img.shields.io/npm/v/ccusage-ui)
+
+## Quick Start
+
+```bash
+npx ccusage-ui
+```
+
+Or install globally:
+
+```bash
+npm install -g ccusage-ui
+ccusage-ui
+```
+
+## Features
+
+- Daily/Monthly usage trend charts
+- Model breakdown visualization
+- Token usage and cost tracking
+- User level tier display
+
+## Requirements
+
+- Node.js >= 20
+- [Claude Code](https://claude.ai/code) usage data
+
+## Related
+
+- [ccusage](https://github.com/ryoppippi/ccusage) - CLI tool for Claude Code usage
+
+## Author
+
+**Doha Park** - [sowonlabs.com](https://www.sowonlabs.com)
+
+[![X](https://img.shields.io/badge/X-@dohapark81-000000?style=flat&logo=x)](https://x.com/dohapark81)
+[![Threads](https://img.shields.io/badge/Threads-@dohapark81-000000?style=flat&logo=threads)](https://www.threads.com/@dohapark81)
+[![LinkedIn](https://img.shields.io/badge/LinkedIn-dohapark81-0077B5?style=flat&logo=linkedin)](https://www.linkedin.com/in/dohapark81/)
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccusage-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "server.js",
   "bin": {
     "ccusage-ui": "server.js"
@@ -10,9 +10,17 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
-  "author": "",
+  "author": "Doha Park",
   "license": "MIT",
   "description": "Web UI for Claude Code usage statistics",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sowonlabs/ccusage-ui.git"
+  },
+  "homepage": "https://github.com/sowonlabs/ccusage-ui",
+  "bugs": {
+    "url": "https://github.com/sowonlabs/ccusage-ui/issues"
+  },
   "dependencies": {
     "ccusage": "^18.0.0"
   }

package/public/index.html

@@ -226,7 +226,7 @@
     <div id="loading">
         <div class="spinner"></div>
         <div class="loading-text">Analyzing Usage Data...</div>
-        <div class="loading-sub">Running ccusage CLI</div>
+        <div class="loading-sub">This may take a few minutes on first load</div>
     </div>
 
     <div class="container" id="dashboard" style="display: none; opacity: 0; transition: opacity 0.5s;">
@@ -344,8 +344,8 @@
             dashboard.style.opacity = '0'; // Fade out dashboard while reloading
             
             try {
-                statusText.textContent = force ? "Refreshing Data..." : "Loading Cached Data...";
-                subText.textContent = force ? "Ignoring cache, fetching latest logs..." : "Checking for recent updates...";
+                statusText.textContent = force ? "Refreshing Data..." : "Analyzing Usage Data...";
+                subText.textContent = force ? "This may take a few minutes..." : "This may take a few minutes on first load";
                 
                 const query = force ? '?force=true' : '';
                 
@@ -429,7 +429,9 @@
             const ctx = document.getElementById('trendChart').getContext('2d');
             if (trendChart) trendChart.destroy();
 
-            const dataSrc = currentView === 'daily' ? dailyData.slice(-30) : monthlyData;
+            const dataSrc = currentView === 'daily'
+                ? [...dailyData].sort((a, b) => a.date.localeCompare(b.date)).slice(-30)
+                : [...monthlyData].sort((a, b) => a.month.localeCompare(b.month));
             const labels = dataSrc.map(d => currentView === 'daily' ? d.date : d.month);
             
             let datasetData;
@@ -480,7 +482,7 @@
                                         Current: <b style="color:#0071e3">${getLevelName(lastVal)}</b> <span style="color:#86868b; margin-left: 5px;">(${lastVal.toFixed(0)}M)</span>
                                     </div>
                                     <div style="font-size: 14px; color: #1d1d1f;">
-                                        🚀 Pace: <b style="color:#5856d6">${getLevelName(projection)}</b> <span style="color:#86868b">(${projection.toFixed(0)}M projected)</span>
+                                        Pace: <b style="color:#5856d6">${getLevelName(projection)}</b> <span style="color:#86868b">(${projection.toFixed(0)}M)</span>
                                     </div>
                                 </div>
                             `;
@@ -583,7 +585,7 @@
                                 stack: 'stack1'
                             },
                             {
-                                label: 'Projected',
+                                label: 'Pace',
                                 data: projectionData,
                                 backgroundColor: 'rgba(52, 199, 89, 0.1)', // Very light green
                                 borderColor: '#34c759',