code-meter 0.4.0__tar.gz → 0.5.0__tar.gz

{code_meter-0.4.0 → code_meter-0.5.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: code-meter
-Version: 0.4.0
+Version: 0.5.0
 Summary: Local AI coding token usage tracker and cost estimator for Claude Code and future agents.
 Author-email: Dhanush Nayak <dhanushnayak.ram@mail.com>
 License: MIT

{code_meter-0.4.0 → code_meter-0.5.0}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "code-meter"
-version = "0.4.0"
+version = "0.5.0"
 description = "Local AI coding token usage tracker and cost estimator for Claude Code and future agents."
 readme = "README.md"
 authors = [{ name = "Dhanush Nayak", email = "dhanushnayak.ram@mail.com" }]

{code_meter-0.4.0 → code_meter-0.5.0}/src/code_meter/storage/repository.py

@@ -511,3 +511,85 @@ class UsageRepository:
             conn.commit()
         finally:
             conn.close()
+
+    def query_prompt_details(self, limit: int = 50, pricing_engine: Optional[Any] = None) -> List[Dict[str, Any]]:
+        """Query user prompts enriched with consumed tokens, internal request count, cost, and output code edits."""
+        prompts = self.query_prompts(limit=limit)
+        details: List[Dict[str, Any]] = []
+
+        conn = self.db.get_connection()
+        try:
+            cursor = conn.cursor()
+            for p in prompts:
+                session_id = p.session_id
+
+                cursor.execute(
+                    """
+                    SELECT provider, model, input_tokens, output_tokens, cache_read_tokens, cache_write_tokens, timestamp
+                    FROM usage_events
+                    WHERE session_id = ?;
+                    """,
+                    (session_id,),
+                )
+                events = cursor.fetchall()
+                total_requests = len(events)
+                total_tokens = sum(
+                    (e["input_tokens"] + e["output_tokens"] + e["cache_read_tokens"] + e["cache_write_tokens"])
+                    for e in events
+                )
+
+                total_cost = 0.0
+                if pricing_engine and events:
+                    for e in events:
+                        try:
+                            ts = datetime.fromisoformat(e["timestamp"])
+                        except Exception:
+                            ts = None
+                        c = pricing_engine.calculate_cost(
+                            provider=e["provider"],
+                            model=e["model"],
+                            input_tokens=e["input_tokens"],
+                            output_tokens=e["output_tokens"],
+                            cache_read_tokens=e["cache_read_tokens"],
+                            cache_write_tokens=e["cache_write_tokens"],
+                            timestamp=ts,
+                        )
+                        if c:
+                            total_cost += c
+
+                cursor.execute(
+                    """
+                    SELECT change_type, file_path, diff_summary
+                    FROM session_code_changes
+                    WHERE session_id = ?
+                    ORDER BY timestamp DESC;
+                    """,
+                    (session_id,),
+                )
+                changes = [
+                    {
+                        "change_type": r["change_type"],
+                        "file_path": r["file_path"],
+                        "diff_summary": r["diff_summary"],
+                    }
+                    for r in cursor.fetchall()
+                ]
+
+                details.append(
+                    {
+                        "prompt_id": p.prompt_id,
+                        "session_id": p.session_id,
+                        "provider": p.provider,
+                        "timestamp": p.timestamp.isoformat(),
+                        "prompt_text": p.prompt_text,
+                        "project_id": p.project_id or "",
+                        "internal_requests": max(total_requests, 1),
+                        "total_tokens": total_tokens,
+                        "cost_usd": round(total_cost, 4),
+                        "outputs": changes,
+                    }
+                )
+        finally:
+            conn.close()
+
+        return details

{code_meter-0.4.0 → code_meter-0.5.0}/src/code_meter/ui/web/server.py

@@ -65,6 +65,7 @@ def create_web_handler(repo: UsageRepository, pricing_engine: PricingEngine, rep
             summary = report_gen.generate_summary(records, filter_date_str=datetime.now(timezone.utc).strftime("%Y-%m-%d"))
             by_model = report_gen.aggregate_by_model(records, costs)
             by_project = report_gen.aggregate_by_project(records, costs)
+            prompt_details = repo.query_prompt_details(limit=25, pricing_engine=pricing_engine)
 
             payload = {
                 "summary": {
@@ -94,6 +95,7 @@ def create_web_handler(repo: UsageRepository, pricing_engine: PricingEngine, rep
                     }
                     for p in by_project
                 ],
+                "prompt_details": prompt_details,
                 "prompts": [
                     {
                         "timestamp": p.timestamp,

{code_meter-0.4.0 → code_meter-0.5.0}/src/code_meter/ui/web/static.py

@@ -1,4 +1,4 @@
-"""Embedded Single-Page Web Dashboard HTML/CSS/JS template for code-meter on http://localhost:5005."""
+"""Embedded Single-Page Modern Web Dashboard HTML/CSS/JS template for code-meter on http://localhost:5005."""
 
 HTML_DASHBOARD = """<!DOCTYPE html>
 <html lang="en">
@@ -6,25 +6,30 @@ HTML_DASHBOARD = """<!DOCTYPE html>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>code-meter | AI Token & Cost Dashboard</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <style>
     :root {
-      --bg-dark: #0f172a;
-      --card-bg: rgba(30, 41, 59, 0.7);
-      --border-color: rgba(255, 255, 255, 0.1);
+      --bg-dark: #090d16;
+      --card-bg: rgba(15, 23, 42, 0.75);
+      --border-color: rgba(255, 255, 255, 0.08);
+      --border-hover: rgba(56, 189, 248, 0.3);
       --text-main: #f8fafc;
       --text-muted: #94a3b8;
       --accent-blue: #38bdf8;
       --accent-emerald: #34d399;
       --accent-purple: #c084fc;
       --accent-amber: #fbbf24;
-      --shadow-glow: 0 10px 25px -5px rgba(56, 189, 248, 0.15);
+      --accent-orange: #fb923c;
+      --shadow-glow: 0 10px 30px -5px rgba(56, 189, 248, 0.2);
     }
     
     * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     }
     
     body {
@@ -33,12 +38,13 @@ HTML_DASHBOARD = """<!DOCTYPE html>
       padding: 24px;
       min-height: 100vh;
       background-image: 
-        radial-gradient(at 0% 0%, rgba(56, 189, 248, 0.08) 0px, transparent 50%),
-        radial-gradient(at 100% 100%, rgba(192, 132, 252, 0.08) 0px, transparent 50%);
+        radial-gradient(at 0% 0%, rgba(56, 189, 248, 0.12) 0px, transparent 50%),
+        radial-gradient(at 100% 100%, rgba(192, 132, 252, 0.12) 0px, transparent 50%),
+        radial-gradient(at 50% 50%, rgba(52, 211, 153, 0.05) 0px, transparent 60%);
     }
 
     .container {
-      max-width: 1300px;
+      max-width: 1400px;
       margin: 0 auto;
     }
 
@@ -47,33 +53,36 @@ HTML_DASHBOARD = """<!DOCTYPE html>
       justify-content: space-between;
       align-items: center;
       margin-bottom: 28px;
-      padding-bottom: 16px;
+      padding-bottom: 18px;
       border-bottom: 1px solid var(--border-color);
     }
 
     .brand {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 14px;
     }
 
     .logo-badge {
-      background: linear-gradient(135deg, #0284c7, #7e22ce);
-      width: 42px;
-      height: 42px;
-      border-radius: 10px;
+      background: linear-gradient(135deg, #0284c7, #9333ea);
+      width: 46px;
+      height: 46px;
+      border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 800;
-      font-size: 20px;
-      box-shadow: 0 4px 12px rgba(126, 34, 206, 0.3);
+      font-size: 22px;
+      box-shadow: 0 4px 16px rgba(147, 51, 234, 0.4);
     }
 
     h1 {
-      font-size: 24px;
-      font-weight: 700;
+      font-size: 26px;
+      font-weight: 800;
       letter-spacing: -0.5px;
+      background: linear-gradient(to right, #ffffff, #94a3b8);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
 
     .subtitle {
@@ -84,18 +93,20 @@ HTML_DASHBOARD = """<!DOCTYPE html>
     .live-status {
       display: flex;
       align-items: center;
-      gap: 8px;
-      background: rgba(52, 211, 153, 0.1);
-      border: 1px solid rgba(52, 211, 153, 0.2);
-      padding: 6px 14px;
-      border-radius: 20px;
+      gap: 10px;
+      background: rgba(52, 211, 153, 0.08);
+      border: 1px solid rgba(52, 211, 153, 0.25);
+      padding: 8px 16px;
+      border-radius: 24px;
       font-size: 13px;
+      font-weight: 600;
       color: var(--accent-emerald);
+      backdrop-filter: blur(8px);
     }
 
     .pulse {
-      width: 8px;
-      height: 8px;
+      width: 9px;
+      height: 9px;
       background-color: var(--accent-emerald);
       border-radius: 50%;
       box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
@@ -111,41 +122,44 @@ HTML_DASHBOARD = """<!DOCTYPE html>
     /* Metrics Grid */
     .metrics-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 16px;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 18px;
       margin-bottom: 28px;
     }
 
     .metric-card {
       background: var(--card-bg);
-      backdrop-filter: blur(12px);
+      backdrop-filter: blur(16px);
       border: 1px solid var(--border-color);
-      border-radius: 14px;
-      padding: 20px;
-      transition: transform 0.2s, box-shadow 0.2s;
+      border-radius: 16px;
+      padding: 22px;
+      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
     }
 
     .metric-card:hover {
-      transform: translateY(-2px);
+      transform: translateY(-3px);
+      border-color: var(--border-hover);
       box-shadow: var(--shadow-glow);
     }
 
     .metric-label {
       font-size: 12px;
+      font-weight: 600;
       text-transform: uppercase;
-      letter-spacing: 0.5px;
+      letter-spacing: 0.8px;
       color: var(--text-muted);
-      margin-bottom: 8px;
+      margin-bottom: 10px;
     }
 
     .metric-value {
-      font-size: 26px;
-      font-weight: 700;
+      font-size: 28px;
+      font-weight: 800;
       letter-spacing: -0.5px;
     }
 
     .metric-value.highlight {
       color: var(--accent-emerald);
+      text-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
     }
 
     /* Dashboard Layout */
@@ -156,6 +170,10 @@ HTML_DASHBOARD = """<!DOCTYPE html>
       margin-bottom: 28px;
     }
 
+    .dashboard-row.full {
+      grid-template-columns: 1fr;
+    }
+
     @media (max-width: 900px) {
       .dashboard-row {
         grid-template-columns: 1fr;
@@ -164,25 +182,26 @@ HTML_DASHBOARD = """<!DOCTYPE html>
 
     .panel {
       background: var(--card-bg);
-      backdrop-filter: blur(12px);
+      backdrop-filter: blur(16px);
       border: 1px solid var(--border-color);
-      border-radius: 16px;
+      border-radius: 18px;
       padding: 24px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
     }
 
     .panel-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 18px;
+      margin-bottom: 20px;
     }
 
     .panel-title {
       font-size: 16px;
-      font-weight: 600;
+      font-weight: 700;
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 10px;
     }
 
     /* Tables */
@@ -194,17 +213,19 @@ HTML_DASHBOARD = """<!DOCTYPE html>
 
     th {
       text-align: left;
-      padding: 10px 12px;
+      padding: 12px 14px;
       color: var(--text-muted);
-      font-weight: 500;
+      font-weight: 600;
       border-bottom: 1px solid var(--border-color);
       font-size: 12px;
       text-transform: uppercase;
+      letter-spacing: 0.5px;
     }
 
     td {
-      padding: 12px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      padding: 14px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      vertical-align: middle;
     }
 
     tr:last-child td {
@@ -212,42 +233,55 @@ HTML_DASHBOARD = """<!DOCTYPE html>
     }
 
     .badge {
-      display: inline-block;
-      padding: 3px 8px;
-      border-radius: 6px;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border-radius: 8px;
       font-size: 11px;
-      font-weight: 600;
+      font-weight: 700;
       text-transform: uppercase;
+      letter-spacing: 0.5px;
     }
 
-    .badge-claude { background: rgba(249, 115, 22, 0.15); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.3); }
-    .badge-codex { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); }
-    .badge-antigravity { background: rgba(192, 132, 252, 0.15); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.3); }
+    .badge-claude { background: rgba(249, 115, 22, 0.12); color: var(--accent-orange); border: 1px solid rgba(249, 115, 22, 0.3); }
+    .badge-codex { background: rgba(56, 189, 248, 0.12); color: var(--accent-blue); border: 1px solid rgba(56, 189, 248, 0.3); }
+    .badge-antigravity { background: rgba(192, 132, 252, 0.12); color: var(--accent-purple); border: 1px solid rgba(192, 132, 252, 0.3); }
+    .badge-emerald { background: rgba(52, 211, 153, 0.12); color: var(--accent-emerald); border: 1px solid rgba(52, 211, 153, 0.3); }
 
     .prompt-text {
-      font-family: monospace;
+      font-family: 'JetBrains Mono', monospace;
       font-size: 13px;
-      color: #e2e8f0;
+      color: #f1f5f9;
+      line-height: 1.5;
       word-break: break-word;
     }
 
     .file-path {
-      font-family: monospace;
+      font-family: 'JetBrains Mono', monospace;
       font-size: 12px;
       color: var(--accent-blue);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 4px;
     }
 
     .diff-summary {
-      font-family: monospace;
+      font-family: 'JetBrains Mono', monospace;
       font-size: 12px;
-      color: var(--accent-emerald);
+      color: #a7f3d0;
+      background: rgba(16, 185, 129, 0.08);
+      border: 1px solid rgba(16, 185, 129, 0.2);
+      padding: 6px 10px;
+      border-radius: 6px;
       white-space: pre-wrap;
     }
 
     footer {
       text-align: center;
       margin-top: 40px;
-      padding-top: 20px;
+      padding-top: 24px;
       border-top: 1px solid var(--border-color);
       font-size: 13px;
       color: var(--text-muted);
@@ -256,6 +290,7 @@ HTML_DASHBOARD = """<!DOCTYPE html>
     footer a {
       color: var(--accent-blue);
       text-decoration: none;
+      font-weight: 600;
     }
   </style>
 </head>
@@ -266,12 +301,12 @@ HTML_DASHBOARD = """<!DOCTYPE html>
         <div class="logo-badge">⚡</div>
         <div>
           <h1>code-meter</h1>
-          <div class="subtitle">Local AI Coding Token & Cost Dashboard</div>
+          <div class="subtitle">Real-Time AI Token, Prompt Trace & Cost Dashboard</div>
         </div>
       </div>
       <div class="live-status">
         <div class="pulse"></div>
-        <span>Live Dashboard (localhost:5005)</span>
+        <span>Live Web Dashboard (localhost:5005)</span>
       </div>
     </header>
 
@@ -294,57 +329,82 @@ HTML_DASHBOARD = """<!DOCTYPE html>
         <div class="metric-value" id="val-cache">0</div>
       </div>
       <div class="metric-card">
-        <div class="metric-label">Total Cost</div>
+        <div class="metric-label">Total Estimated Cost</div>
         <div class="metric-value highlight" id="val-cost">$0.00</div>
       </div>
     </div>
 
-    <!-- Row 1: Model & Project Breakdown -->
+    <!-- Row 1: Detailed User Prompt Trace (Queries, Consumed Tokens, Internal Requests & Output Edits) -->
+    <div class="dashboard-row full">
+      <div class="panel">
+        <div class="panel-header">
+          <div class="panel-title">💡 User Prompt Traces (Queries, Consumed Tokens, Internal Requests & Output Edits)</div>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 8%;">Time</th>
+              <th style="width: 10%;">Provider</th>
+              <th style="width: 32%;">User Prompt / Query</th>
+              <th style="width: 12%;">Internal Requests</th>
+              <th style="width: 12%;">Tokens Consumed</th>
+              <th style="width: 10%;">Cost ($)</th>
+              <th style="width: 16%;">Output Code Edits</th>
+            </tr>
+          </thead>
+          <tbody id="tbl-prompt-details">
+            <tr><td colspan="7" style="text-align:center; color: var(--text-muted);">Loading user prompt trace details...</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Row 2: Model & Project Breakdown -->
     <div class="dashboard-row">
       <div class="panel">
         <div class="panel-header">
-          <div class="panel-title">🤖 Model Breakdown & Costs</div>
+          <div class="panel-title">🤖 Model Usage & Costs</div>
         </div>
         <table>
           <thead>
             <tr>
-              <th>Model</th>
-              <th>Provider</th>
-              <th>Tokens</th>
+              <th>Model Name</th>
+              <th>Requests</th>
+              <th>Total Tokens</th>
               <th>Est. Cost</th>
             </tr>
           </thead>
           <tbody id="tbl-models">
-            <tr><td colspan="4" style="text-align:center; color: var(--text-muted);">Loading data...</td></tr>
+            <tr><td colspan="4" style="text-align:center; color: var(--text-muted);">Loading model stats...</td></tr>
           </tbody>
         </table>
       </div>
 
       <div class="panel">
         <div class="panel-header">
-          <div class="panel-title">📁 Project Usage Breakdown</div>
+          <div class="panel-title">📁 Project Directory Breakdown</div>
         </div>
         <table>
           <thead>
             <tr>
-              <th>Project</th>
+              <th>Project Directory</th>
               <th>Requests</th>
-              <th>Tokens</th>
+              <th>Total Tokens</th>
               <th>Est. Cost</th>
             </tr>
           </thead>
           <tbody id="tbl-projects">
-            <tr><td colspan="4" style="text-align:center; color: var(--text-muted);">Loading data...</td></tr>
+            <tr><td colspan="4" style="text-align:center; color: var(--text-muted);">Loading project stats...</td></tr>
           </tbody>
         </table>
       </div>
     </div>
 
-    <!-- Row 2: User Prompts & Code Edits -->
+    <!-- Row 3: Recent User Prompts & Output Code Edits -->
     <div class="dashboard-row">
       <div class="panel">
         <div class="panel-header">
-          <div class="panel-title">💬 Recent User Queries & Prompts</div>
+          <div class="panel-title">💬 Recent User Prompt Log</div>
         </div>
         <table>
           <thead>
@@ -355,14 +415,14 @@ HTML_DASHBOARD = """<!DOCTYPE html>
             </tr>
           </thead>
           <tbody id="tbl-prompts">
-            <tr><td colspan="3" style="text-align:center; color: var(--text-muted);">Loading prompts...</td></tr>
+            <tr><td colspan="3" style="text-align:center; color: var(--text-muted);">Loading prompt log...</td></tr>
           </tbody>
         </table>
       </div>
 
       <div class="panel">
         <div class="panel-header">
-          <div class="panel-title">🛠️ Output Code Edits & Actions</div>
+          <div class="panel-title">🛠️ Recent Code Edits & Diff Actions</div>
         </div>
         <table>
           <thead>
@@ -380,12 +440,13 @@ HTML_DASHBOARD = """<!DOCTYPE html>
     </div>
 
     <footer>
-      code-meter v0.3.0 | Running on <strong>http://localhost:5005</strong> | <a href="https://github.com/dhanushnayak/code-meter" target="_blank">GitHub Repository</a>
+      code-meter v0.4.0 | Running on <strong>http://localhost:5005</strong> | <a href="https://github.com/dhanushnayak/code-meter" target="_blank">GitHub Repository</a>
     </footer>
   </div>
 
   <script>
     function formatNumber(num) {
+      if (!num) return '0';
       if (num >= 1000000) return (num / 1000000).toFixed(2) + 'M';
       if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
       return num.toLocaleString();
@@ -397,7 +458,7 @@ HTML_DASHBOARD = """<!DOCTYPE html>
         const d = new Date(isoStr);
         return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
       } catch (e) {
-        return isoStr.substring(11, 16);
+        return (isoStr || '').substring(11, 16);
       }
     }
 
@@ -422,15 +483,38 @@ HTML_DASHBOARD = """<!DOCTYPE html>
         document.getElementById('val-cache').textContent = formatNumber((s.total_cache_read_tokens || 0) + (s.total_cache_write_tokens || 0));
         document.getElementById('val-cost').textContent = '$' + (s.total_cost || 0).toFixed(4);
 
+        // Prompt Trace Details Table (Query, Consumed Tokens, Internal Requests & Outputs)
+        const tblDetails = document.getElementById('tbl-prompt-details');
+        if (data.prompt_details && data.prompt_details.length > 0) {
+          tblDetails.innerHTML = data.prompt_details.map(pd => {
+            const outputsHtml = (pd.outputs && pd.outputs.length > 0)
+              ? pd.outputs.map(o => `<div class="file-path">📄 ${o.file_path} <span class="badge badge-emerald">${o.change_type}</span></div>`).join('')
+              : '<span style="color:var(--text-muted); font-size:12px;">No code edits</span>';
+            return `
+              <tr>
+                <td style="white-space:nowrap; color:var(--text-muted);">${formatTime(pd.timestamp)}</td>
+                <td><span class="badge ${getBadgeClass(pd.provider)}">${pd.provider}</span></td>
+                <td><div class="prompt-text">${pd.prompt_text}</div></td>
+                <td><span class="badge badge-codex">${pd.internal_requests} turn${pd.internal_requests > 1 ? 's' : ''}</span></td>
+                <td><strong>${formatNumber(pd.total_tokens)}</strong></td>
+                <td><strong style="color:var(--accent-emerald);">$${(pd.cost_usd || 0).toFixed(4)}</strong></td>
+                <td>${outputsHtml}</td>
+              </tr>
+            `;
+          }).join('');
+        } else {
+          tblDetails.innerHTML = '<tr><td colspan="7" style="text-align:center; color: var(--text-muted);">No prompt trace details recorded yet</td></tr>';
+        }
+
         // Models Table
         const tblModels = document.getElementById('tbl-models');
         if (data.by_model && data.by_model.length > 0) {
           tblModels.innerHTML = data.by_model.map(m => `
             <tr>
               <td><strong>${m.model}</strong></td>
-              <td><span class="badge ${getBadgeClass(m.provider)}">${m.provider}</span></td>
+              <td>${formatNumber(m.requests)}</td>
               <td>${formatNumber(m.total_tokens)}</td>
-              <td><strong>$${(m.total_cost || 0).toFixed(4)}</strong></td>
+              <td><strong style="color:var(--accent-emerald);">$${(m.total_cost || 0).toFixed(4)}</strong></td>
             </tr>
           `).join('');
         } else {
@@ -442,10 +526,10 @@ HTML_DASHBOARD = """<!DOCTYPE html>
         if (data.by_project && data.by_project.length > 0) {
           tblProjects.innerHTML = data.by_project.map(p => `
             <tr>
-              <td><span class="file-path">${p.project_id || 'default'}</span></td>
+              <td><span class="file-path">${p.project_name || 'default'}</span></td>
               <td>${formatNumber(p.requests)}</td>
               <td>${formatNumber(p.total_tokens)}</td>
-              <td><strong>$${(p.total_cost || 0).toFixed(4)}</strong></td>
+              <td><strong style="color:var(--accent-emerald);">$${(p.total_cost || 0).toFixed(4)}</strong></td>
             </tr>
           `).join('');
         } else {
@@ -474,7 +558,7 @@ HTML_DASHBOARD = """<!DOCTYPE html>
               <td style="white-space:nowrap; color:var(--text-muted);">${formatTime(c.timestamp)}</td>
               <td><span class="badge badge-emerald">${c.change_type}</span></td>
               <td>
-                <div class="file-path">${c.file_path}</div>
+                <div class="file-path">📄 ${c.file_path}</div>
                 <div class="diff-summary">${c.diff_summary}</div>
               </td>
             </tr>

{code_meter-0.4.0 → code_meter-0.5.0}/src/code_meter.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: code-meter
-Version: 0.4.0
+Version: 0.5.0
 Summary: Local AI coding token usage tracker and cost estimator for Claude Code and future agents.
 Author-email: Dhanush Nayak <dhanushnayak.ram@mail.com>
 License: MIT