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

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: code-meter
-Version: 0.3.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
@@ -106,7 +106,8 @@ This launches the interactive Rich terminal dashboard displaying key metrics, mo
 | Command | Description |
 | :--- | :--- |
 | `code-meter` | Open main interactive Rich terminal dashboard UI |
-| `code-meter ui` | Launch live interactive Rich terminal UI watching all AI log directories |
+| `code-meter ui` | Launch live Web Dashboard on **http://localhost:5005** (auto-opens browser) |
+| `code-meter ui --terminal` | Launch live interactive Rich terminal UI |
 | `code-meter watch` | Live watch mode (auto-refreshes UI as AI agents write logs) |
 | `code-meter update-pricing` | Fetch latest real-time token pricing for 2,800+ models |
 | `code-meter scan` | Force an incremental scan of local usage directories |

{code_meter-0.3.0 → code_meter-0.5.0}/README.md

@@ -84,7 +84,8 @@ This launches the interactive Rich terminal dashboard displaying key metrics, mo
 | Command | Description |
 | :--- | :--- |
 | `code-meter` | Open main interactive Rich terminal dashboard UI |
-| `code-meter ui` | Launch live interactive Rich terminal UI watching all AI log directories |
+| `code-meter ui` | Launch live Web Dashboard on **http://localhost:5005** (auto-opens browser) |
+| `code-meter ui --terminal` | Launch live interactive Rich terminal UI |
 | `code-meter watch` | Live watch mode (auto-refreshes UI as AI agents write logs) |
 | `code-meter update-pricing` | Fetch latest real-time token pricing for 2,800+ models |
 | `code-meter scan` | Force an incremental scan of local usage directories |

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

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "code-meter"
-version = "0.3.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.3.0 → code_meter-0.5.0}/src/code_meter/cli.py

@@ -423,9 +423,29 @@ def update_pricing_cmd():
 
 
 @app.command("ui")
-def ui_cmd():
-    """Launch the live interactive Rich terminal UI with auto-refresh watch mode."""
-    _launch_live_ui()
+@app.command("dashboard")
+@app.command("web")
+def ui_cmd(
+    port: int = typer.Option(5005, "--port", "-p", help="Port number for local dashboard server"),
+    host: str = typer.Option("127.0.0.1", "--host", "-h", help="Host address for dashboard server"),
+    terminal: bool = typer.Option(False, "--terminal", "-t", help="Launch Rich terminal UI instead of Web UI"),
+    no_browser: bool = typer.Option(False, "--no-browser", help="Do not open web browser automatically"),
+):
+    """Launch local web dashboard UI on http://localhost:5005 (or terminal UI with --terminal)."""
+    if terminal:
+        _launch_live_ui()
+    else:
+        from code_meter.ui.web.server import start_web_server
+        config, repo, pricing_engine, _, report_gen = _get_services()
+        start_web_server(
+            host=host,
+            port=port,
+            open_browser=not no_browser,
+            config=config,
+            repo=repo,
+            pricing_engine=pricing_engine,
+            report_gen=report_gen,
+        )
 
 
 @app.command("watch")

{code_meter-0.3.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.5.0/src/code_meter/ui/web/__init__.py

@@ -0,0 +1,5 @@
+"""Web UI package for code-meter dashboard."""
+
+from code_meter.ui.web.server import start_web_server
+
+__all__ = ["start_web_server"]

code_meter-0.5.0/src/code_meter/ui/web/server.py

@@ -0,0 +1,196 @@
+"""Lightweight Web Dashboard HTTP Server running on http://localhost:5005 for code-meter."""
+
+import json
+import logging
+import threading
+import time
+import webbrowser
+from datetime import datetime, timezone
+from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
+from typing import Any, Dict, Optional
+
+from code_meter.analytics.reports import ReportGenerator
+from code_meter.pricing.engine import PricingEngine
+from code_meter.providers.antigravity import AntigravityProvider
+from code_meter.providers.claude_code import ClaudeCodeProvider
+from code_meter.providers.codex import CodexProvider
+from code_meter.storage.repository import UsageRepository
+from code_meter.ui.web.static import HTML_DASHBOARD
+from code_meter.watcher import run_watch_loop
+
+logger = logging.getLogger(__name__)
+
+
+def create_web_handler(repo: UsageRepository, pricing_engine: PricingEngine, report_gen: ReportGenerator):
+    """Factory creating HTTPRequestHandler with injected service dependencies."""
+
+    class CodeMeterWebHandler(BaseHTTPRequestHandler):
+        def log_message(self, format: str, *args: Any) -> None:
+            # Suppress default noisy HTTP request logs
+            pass
+
+        def do_GET(self) -> None:
+            path = self.path.split("?")[0]
+
+            if path in ("/", "/index.html"):
+                self.send_response(200)
+                self.send_header("Content-Type", "text/html; charset=utf-8")
+                self.end_headers()
+                self.wfile.write(HTML_DASHBOARD.encode("utf-8"))
+
+            elif path == "/api/summary":
+                self.handle_api_summary()
+
+            elif path == "/api/prompts":
+                self.handle_api_prompts()
+
+            elif path == "/api/changes":
+                self.handle_api_changes()
+
+            else:
+                self.send_error(404, "Not Found")
+
+        def handle_api_summary(self) -> None:
+            records = repo.query_usage_events()
+            prompts = repo.query_prompts(limit=15)
+            code_changes = repo.query_code_changes(limit=15)
+
+            costs = [
+                pricing_engine.calculate_cost(
+                    r.provider, r.model, r.input_tokens, r.output_tokens, r.cache_read_tokens, r.cache_write_tokens, r.timestamp
+                )
+                for r in records
+            ]
+
+            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": {
+                    "total_requests": summary.total_requests,
+                    "total_input_tokens": summary.input_tokens,
+                    "total_output_tokens": summary.output_tokens,
+                    "total_cache_read_tokens": summary.cache_read_tokens,
+                    "total_cache_write_tokens": summary.cache_write_tokens,
+                    "total_tokens": summary.total_tokens,
+                    "total_cost": summary.estimated_cost_usd or 0.0,
+                },
+                "by_model": [
+                    {
+                        "model": m.model,
+                        "requests": m.request_count,
+                        "total_tokens": m.total_tokens,
+                        "total_cost": m.estimated_cost_usd or 0.0,
+                    }
+                    for m in by_model
+                ],
+                "by_project": [
+                    {
+                        "project_name": p.project_name,
+                        "requests": p.request_count,
+                        "total_tokens": p.total_tokens,
+                        "total_cost": p.estimated_cost_usd or 0.0,
+                    }
+                    for p in by_project
+                ],
+                "prompt_details": prompt_details,
+                "prompts": [
+                    {
+                        "timestamp": p.timestamp,
+                        "provider": p.provider,
+                        "prompt_text": p.prompt_text,
+                        "project_id": p.project_id or "",
+                    }
+                    for p in prompts
+                ],
+                "code_changes": [
+                    {
+                        "timestamp": c.timestamp,
+                        "provider": c.provider,
+                        "file_path": c.file_path,
+                        "change_type": c.change_type,
+                        "diff_summary": c.diff_summary,
+                    }
+                    for c in code_changes
+                ],
+            }
+
+            self.send_json_response(payload)
+
+        def handle_api_prompts(self) -> None:
+            prompts = repo.query_prompts(limit=50)
+            self.send_json_response({"prompts": [p.model_dump() for p in prompts]})
+
+        def handle_api_changes(self) -> None:
+            changes = repo.query_code_changes(limit=50)
+            self.send_json_response({"code_changes": [c.model_dump() for c in changes]})
+
+        def send_json_response(self, data: Dict[str, Any]) -> None:
+            body = json.dumps(data, indent=2, default=str).encode("utf-8")
+            self.send_response(200)
+            self.send_header("Content-Type", "application/json")
+            self.send_header("Access-Control-Allow-Origin", "*")
+            self.end_headers()
+            self.wfile.write(body)
+
+    return CodeMeterWebHandler
+
+
+def start_web_server(
+    host: str = "127.0.0.1",
+    port: int = 5005,
+    open_browser: bool = True,
+    config: Optional[Any] = None,
+    repo: Optional[UsageRepository] = None,
+    pricing_engine: Optional[PricingEngine] = None,
+    report_gen: Optional[ReportGenerator] = None,
+) -> None:
+    """Launch HTTP server on specified host/port serving localhost web dashboard."""
+    if not (repo and pricing_engine and report_gen and config):
+        from code_meter.cli import _get_services
+        config, repo, pricing_engine, providers, report_gen = _get_services()
+    else:
+        providers = [
+            ClaudeCodeProvider(config.get_claude_dir()),
+            CodexProvider(config.get_codex_dir()),
+            AntigravityProvider(config.get_antigravity_dir()),
+        ]
+
+    # Background scanner loop
+    def background_scan_and_watch():
+        def do_scan():
+            states = repo.get_scan_states()
+            for p in providers:
+                res = p.scan(states)
+                repo.save_records(res.records)
+                repo.save_prompts(res.prompts)
+                repo.save_code_changes(res.code_changes)
+                repo.update_scan_states(res.updated_states)
+
+        target_dirs = [config.get_claude_dir(), config.get_codex_dir(), config.get_antigravity_dir()]
+        run_watch_loop(target_dir=target_dirs, on_change_callback=do_scan, refresh_seconds=config.get_refresh_seconds())
+
+    watch_thread = threading.Thread(target=background_scan_and_watch, daemon=True)
+    watch_thread.start()
+
+    handler_cls = create_web_handler(repo, pricing_engine, report_gen)
+    server = ThreadingHTTPServer((host, port), handler_cls)
+
+    url = f"http://localhost:{port}"
+    print(f"\n[code-meter] Web Dashboard running at: {url}")
+    print("Press Ctrl+C to stop the web server.\n")
+
+    if open_browser:
+        def open_browser_later():
+            time.sleep(0.5)
+            webbrowser.open(url)
+        threading.Thread(target=open_browser_later, daemon=True).start()
+
+    try:
+        server.serve_forever()
+    except KeyboardInterrupt:
+        print("\nShutting down web dashboard server...")
+        server.shutdown()
+        server.server_close()

code_meter-0.5.0/src/code_meter/ui/web/static.py

@@ -0,0 +1,581 @@
+"""Embedded Single-Page Modern Web Dashboard HTML/CSS/JS template for code-meter on http://localhost:5005."""
+
+HTML_DASHBOARD = """<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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: #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;
+      --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: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    }
+    
+    body {
+      background-color: var(--bg-dark);
+      color: var(--text-main);
+      padding: 24px;
+      min-height: 100vh;
+      background-image: 
+        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: 1400px;
+      margin: 0 auto;
+    }
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 28px;
+      padding-bottom: 18px;
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+    }
+
+    .logo-badge {
+      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: 22px;
+      box-shadow: 0 4px 16px rgba(147, 51, 234, 0.4);
+    }
+
+    h1 {
+      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 {
+      font-size: 13px;
+      color: var(--text-muted);
+    }
+
+    .live-status {
+      display: flex;
+      align-items: center;
+      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: 9px;
+      height: 9px;
+      background-color: var(--accent-emerald);
+      border-radius: 50%;
+      box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
+      animation: pulse-ring 2s infinite;
+    }
+
+    @keyframes pulse-ring {
+      0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
+      70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
+    }
+
+    /* Metrics Grid */
+    .metrics-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 18px;
+      margin-bottom: 28px;
+    }
+
+    .metric-card {
+      background: var(--card-bg);
+      backdrop-filter: blur(16px);
+      border: 1px solid var(--border-color);
+      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(-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.8px;
+      color: var(--text-muted);
+      margin-bottom: 10px;
+    }
+
+    .metric-value {
+      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 */
+    .dashboard-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+      margin-bottom: 28px;
+    }
+
+    .dashboard-row.full {
+      grid-template-columns: 1fr;
+    }
+
+    @media (max-width: 900px) {
+      .dashboard-row {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .panel {
+      background: var(--card-bg);
+      backdrop-filter: blur(16px);
+      border: 1px solid var(--border-color);
+      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: 20px;
+    }
+
+    .panel-title {
+      font-size: 16px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    /* Tables */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 14px;
+    }
+
+    th {
+      text-align: left;
+      padding: 12px 14px;
+      color: var(--text-muted);
+      font-weight: 600;
+      border-bottom: 1px solid var(--border-color);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    td {
+      padding: 14px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      vertical-align: middle;
+    }
+
+    tr:last-child td {
+      border-bottom: none;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border-radius: 8px;
+      font-size: 11px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .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: 'JetBrains Mono', monospace;
+      font-size: 13px;
+      color: #f1f5f9;
+      line-height: 1.5;
+      word-break: break-word;
+    }
+
+    .file-path {
+      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: 'JetBrains Mono', monospace;
+      font-size: 12px;
+      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: 24px;
+      border-top: 1px solid var(--border-color);
+      font-size: 13px;
+      color: var(--text-muted);
+    }
+
+    footer a {
+      color: var(--accent-blue);
+      text-decoration: none;
+      font-weight: 600;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <div class="brand">
+        <div class="logo-badge">⚡</div>
+        <div>
+          <h1>code-meter</h1>
+          <div class="subtitle">Real-Time AI Token, Prompt Trace & Cost Dashboard</div>
+        </div>
+      </div>
+      <div class="live-status">
+        <div class="pulse"></div>
+        <span>Live Web Dashboard (localhost:5005)</span>
+      </div>
+    </header>
+
+    <!-- Metrics Cards -->
+    <div class="metrics-grid">
+      <div class="metric-card">
+        <div class="metric-label">Total Requests</div>
+        <div class="metric-value" id="val-requests">0</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-label">Input Tokens</div>
+        <div class="metric-value" id="val-input">0</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-label">Output Tokens</div>
+        <div class="metric-value" id="val-output">0</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-label">Cache Read / Write</div>
+        <div class="metric-value" id="val-cache">0</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-label">Total Estimated Cost</div>
+        <div class="metric-value highlight" id="val-cost">$0.00</div>
+      </div>
+    </div>
+
+    <!-- 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 Usage & Costs</div>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <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 model stats...</td></tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="panel">
+        <div class="panel-header">
+          <div class="panel-title">📁 Project Directory Breakdown</div>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Project Directory</th>
+              <th>Requests</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 project stats...</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- 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 Prompt Log</div>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>Provider</th>
+              <th>Prompt / Query</th>
+            </tr>
+          </thead>
+          <tbody id="tbl-prompts">
+            <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">🛠️ Recent Code Edits & Diff Actions</div>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>Action</th>
+              <th>File & Diff Summary</th>
+            </tr>
+          </thead>
+          <tbody id="tbl-changes">
+            <tr><td colspan="3" style="text-align:center; color: var(--text-muted);">Loading code edits...</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <footer>
+      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();
+    }
+
+    function formatTime(isoStr) {
+      if (!isoStr) return '';
+      try {
+        const d = new Date(isoStr);
+        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      } catch (e) {
+        return (isoStr || '').substring(11, 16);
+      }
+    }
+
+    function getBadgeClass(provider) {
+      const p = (provider || '').toLowerCase();
+      if (p.includes('claude')) return 'badge-claude';
+      if (p.includes('codex')) return 'badge-codex';
+      if (p.includes('antigravity')) return 'badge-antigravity';
+      return 'badge-codex';
+    }
+
+    async function updateDashboard() {
+      try {
+        const res = await fetch('/api/summary');
+        const data = await res.json();
+
+        // Metrics
+        const s = data.summary || {};
+        document.getElementById('val-requests').textContent = formatNumber(s.total_requests || 0);
+        document.getElementById('val-input').textContent = formatNumber(s.total_input_tokens || 0);
+        document.getElementById('val-output').textContent = formatNumber(s.total_output_tokens || 0);
+        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>${formatNumber(m.requests)}</td>
+              <td>${formatNumber(m.total_tokens)}</td>
+              <td><strong style="color:var(--accent-emerald);">$${(m.total_cost || 0).toFixed(4)}</strong></td>
+            </tr>
+          `).join('');
+        } else {
+          tblModels.innerHTML = '<tr><td colspan="4" style="text-align:center; color: var(--text-muted);">No model data recorded yet</td></tr>';
+        }
+
+        // Projects Table
+        const tblProjects = document.getElementById('tbl-projects');
+        if (data.by_project && data.by_project.length > 0) {
+          tblProjects.innerHTML = data.by_project.map(p => `
+            <tr>
+              <td><span class="file-path">${p.project_name || 'default'}</span></td>
+              <td>${formatNumber(p.requests)}</td>
+              <td>${formatNumber(p.total_tokens)}</td>
+              <td><strong style="color:var(--accent-emerald);">$${(p.total_cost || 0).toFixed(4)}</strong></td>
+            </tr>
+          `).join('');
+        } else {
+          tblProjects.innerHTML = '<tr><td colspan="4" style="text-align:center; color: var(--text-muted);">No project data recorded yet</td></tr>';
+        }
+
+        // Prompts Table
+        const tblPrompts = document.getElementById('tbl-prompts');
+        if (data.prompts && data.prompts.length > 0) {
+          tblPrompts.innerHTML = data.prompts.map(p => `
+            <tr>
+              <td style="white-space:nowrap; color:var(--text-muted);">${formatTime(p.timestamp)}</td>
+              <td><span class="badge ${getBadgeClass(p.provider)}">${p.provider}</span></td>
+              <td><div class="prompt-text">${p.prompt_text}</div></td>
+            </tr>
+          `).join('');
+        } else {
+          tblPrompts.innerHTML = '<tr><td colspan="3" style="text-align:center; color: var(--text-muted);">No prompt history recorded yet</td></tr>';
+        }
+
+        // Code Changes Table
+        const tblChanges = document.getElementById('tbl-changes');
+        if (data.code_changes && data.code_changes.length > 0) {
+          tblChanges.innerHTML = data.code_changes.map(c => `
+            <tr>
+              <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="diff-summary">${c.diff_summary}</div>
+              </td>
+            </tr>
+          `).join('');
+        } else {
+          tblChanges.innerHTML = '<tr><td colspan="3" style="text-align:center; color: var(--text-muted);">No code edits recorded yet</td></tr>';
+        }
+
+      } catch (err) {
+        console.error('Error fetching dashboard update:', err);
+      }
+    }
+
+    // Initial update and auto-poll every 2 seconds
+    updateDashboard();
+    setInterval(updateDashboard, 2000);
+  </script>
+</body>
+</html>
+"""

{code_meter-0.3.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.3.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
@@ -106,7 +106,8 @@ This launches the interactive Rich terminal dashboard displaying key metrics, mo
 | Command | Description |
 | :--- | :--- |
 | `code-meter` | Open main interactive Rich terminal dashboard UI |
-| `code-meter ui` | Launch live interactive Rich terminal UI watching all AI log directories |
+| `code-meter ui` | Launch live Web Dashboard on **http://localhost:5005** (auto-opens browser) |
+| `code-meter ui --terminal` | Launch live interactive Rich terminal UI |
 | `code-meter watch` | Live watch mode (auto-refreshes UI as AI agents write logs) |
 | `code-meter update-pricing` | Fetch latest real-time token pricing for 2,800+ models |
 | `code-meter scan` | Force an incremental scan of local usage directories |

{code_meter-0.3.0 → code_meter-0.5.0}/src/code_meter.egg-info/SOURCES.txt

@@ -35,6 +35,9 @@ src/code_meter/storage/repository.py
 src/code_meter/ui/__init__.py
 src/code_meter/ui/dashboard.py
 src/code_meter/ui/tables.py
+src/code_meter/ui/web/__init__.py
+src/code_meter/ui/web/server.py
+src/code_meter/ui/web/static.py
 tests/test_analytics.py
 tests/test_database.py
 tests/test_pricing.py