llm_cost_tracker 0.2.0.alpha2 → 0.2.0

data/app/services/llm_cost_tracker/dashboard/tag_key_explorer.rb

@@ -1,14 +1,10 @@
 # frozen_string_literal: true
 
-require "json"
-
 module LlmCostTracker
   module Dashboard
     TagKeyRow = Data.define(:key, :calls_count, :distinct_values)
 
     class TagKeyExplorer
-      RUBY_FALLBACK_LIMIT = 50_000
-
       class << self
         def call(scope: LlmCostTracker::LlmApiCall.all)
           new(scope: scope).rows
@@ -21,10 +17,7 @@ module LlmCostTracker
       end
 
       def rows
-        sql = build_sql
-        return ruby_fallback_rows if sql.nil?
-
-        results = @connection.select_all(sql).to_a
+        results = @connection.select_all(build_sql).to_a
         results.map do |row|
           TagKeyRow.new(
             key: row["key"].to_s,
@@ -48,48 +41,28 @@ module LlmCostTracker
       def build_sql
         case connection.adapter_name
         when /postgres/i then postgresql_sql
-        when /mysql/i    then nil
+        when /mysql/i    then mysql_sql
         else                  sqlite_sql
         end
       end
 
-      def ruby_fallback_rows
-        calls_counter = Hash.new(0)
-        values_per_key = Hash.new { |h, k| h[k] = Set.new }
-
-        scope.limit(RUBY_FALLBACK_LIMIT).pluck(:tags).each do |raw|
-          tags = parse_tags(raw)
-          next if tags.empty?
-
-          tags.each do |key, value|
-            calls_counter[key] += 1
-            values_per_key[key] << value.to_s
-          end
-        end
-
-        calls_counter
-          .sort_by { |_, count| -count }
-          .map do |key, count|
-            TagKeyRow.new(key: key.to_s, calls_count: count, distinct_values: values_per_key[key].size)
-          end
-      rescue StandardError => e
-        LlmCostTracker::Logging.warn("Tag key Ruby fallback failed: #{e.class}: #{e.message}")
-        []
-      end
-
-      def parse_tags(raw)
-        case raw
-        when Hash then raw
-        when String
-          return {} if raw.strip.empty?
-
-          parsed = JSON.parse(raw)
-          parsed.is_a?(Hash) ? parsed : {}
-        else
-          {}
-        end
-      rescue JSON::ParserError
-        {}
+      def mysql_sql
+        <<~SQL.squish
+          SELECT jt.key AS key,
+                 COUNT(*) AS calls_count,
+                 COUNT(DISTINCT JSON_UNQUOTE(JSON_EXTRACT(sub.tags, CONCAT('$.', JSON_QUOTE(jt.key))))) AS distinct_values
+          FROM (#{subquery}) AS sub
+          JOIN JSON_TABLE(
+            COALESCE(JSON_KEYS(sub.tags), JSON_ARRAY()),
+            '$[*]' COLUMNS(
+              key VARCHAR(255) PATH '$'
+            )
+          ) AS jt
+          WHERE sub.tags IS NOT NULL
+            AND sub.tags != ''
+          GROUP BY jt.key
+          ORDER BY calls_count DESC
+        SQL
       end
 
       def postgresql_sql

data/app/services/llm_cost_tracker/dashboard/top_models.rb

@@ -15,12 +15,7 @@ module LlmCostTracker
 
     class TopModels
       DEFAULT_LIMIT = 5
-      SORT_OPTIONS = {
-        "cost"     => "total_cost_sum DESC",
-        "calls"    => "calls_count DESC",
-        "avg_cost" => "total_cost_sum / calls_count DESC",
-        "latency"  => "average_latency DESC NULLS LAST"
-      }.freeze
+      SORT_OPTIONS = %w[cost calls avg_cost latency].freeze
       DEFAULT_SORT = "cost"
 
       class << self
@@ -32,7 +27,7 @@ module LlmCostTracker
       def initialize(scope:, limit:, sort: DEFAULT_SORT)
         @scope = scope
         @limit = limit
-        @sort = SORT_OPTIONS.key?(sort.to_s) ? sort.to_s : DEFAULT_SORT
+        @sort = SORT_OPTIONS.include?(sort.to_s) ? sort.to_s : DEFAULT_SORT
       end
 
       def rows
@@ -58,7 +53,6 @@ module LlmCostTracker
       attr_reader :scope, :limit, :sort
 
       def grouped_rows
-        order_sql = sort == "latency" && !scope.klass.latency_column? ? "total_cost_sum DESC" : SORT_OPTIONS[sort]
         scope
           .group(:provider, :model)
           .select(selects)
@@ -66,6 +60,21 @@ module LlmCostTracker
           .then { |r| limit ? r.limit(limit) : r }
       end
 
+      def order_sql
+        case sort
+        when "calls"
+          "COUNT(*) DESC"
+        when "avg_cost"
+          "COALESCE(SUM(total_cost), 0) / NULLIF(COUNT(*), 0) DESC"
+        when "latency"
+          return "COALESCE(SUM(total_cost), 0) DESC" unless scope.klass.latency_column?
+
+          "CASE WHEN AVG(latency_ms) IS NULL THEN 1 ELSE 0 END ASC, AVG(latency_ms) DESC"
+        else
+          "COALESCE(SUM(total_cost), 0) DESC"
+        end
+      end
+
       def selects
         columns = [
           "provider",

data/app/services/llm_cost_tracker/pagination.rb

@@ -55,5 +55,11 @@ module LlmCostTracker
     def next_page?(total_count)
       offset + per < total_count.to_i
     end
+
+    def total_pages(total_count)
+      return MIN_PAGE if total_count.to_i <= 0
+
+      [(total_count.to_f / per).ceil, MIN_PAGE].max
+    end
   end
 end

data/app/views/layouts/llm_cost_tracker/application.html.erb

@@ -3,340 +3,42 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>LLM Costs</title>
-    <style>
-      :root {
-        --lct-bg: #f7f8fa;
-        --lct-panel: #ffffff;
-        --lct-border: #d9dee7;
-        --lct-text: #1f2937;
-        --lct-muted: #64748b;
-        --lct-accent: #0f766e;
-        --lct-accent-soft: #ccfbf1;
-        --lct-danger: #b91c1c;
-      }
-
-      body {
-        margin: 0;
-        background: var(--lct-bg);
-        color: var(--lct-text);
-        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      }
-
-      .lct-shell {
-        max-width: 1120px;
-        margin: 0 auto;
-        padding: 24px;
-      }
-
-      .lct-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 24px;
-        margin-bottom: 24px;
-      }
-
-      .lct-title {
-        margin: 0;
-        font-size: 24px;
-        line-height: 1.2;
-      }
-
-      .lct-nav {
-        display: flex;
-        gap: 12px;
-        flex-wrap: wrap;
-      }
-
-      .lct-nav a {
-        color: var(--lct-muted);
-        text-decoration: none;
-        font-size: 14px;
-      }
-
-      .lct-nav a:hover {
-        color: var(--lct-accent);
-      }
-
-      .lct-nav .lct-active {
-        color: var(--lct-accent);
-        font-weight: 700;
-      }
-
-      .lct-panel {
-        background: var(--lct-panel);
-        border: 1px solid var(--lct-border);
-        border-radius: 8px;
-        padding: 24px;
-        margin-bottom: 20px;
-      }
-
-      .lct-muted {
-        color: var(--lct-muted);
-      }
-
-      .lct-code {
-        background: #eef2f7;
-        border-radius: 6px;
-        padding: 2px 6px;
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-        font-size: 0.95em;
-      }
-
-      .lct-grid {
-        display: grid;
-        gap: 16px;
-      }
-
-      .lct-stats {
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      }
-
-      .lct-two-col {
-        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      }
-
-      .lct-stat {
-        background: var(--lct-panel);
-        border: 1px solid var(--lct-border);
-        border-radius: 8px;
-        padding: 18px;
-      }
-
-      .lct-stat-label {
-        color: var(--lct-muted);
-        font-size: 13px;
-        margin: 0 0 8px;
-      }
-
-      .lct-stat-value {
-        font-size: 24px;
-        font-weight: 700;
-        margin: 0;
-      }
-
-      .lct-section-title {
-        margin: 0 0 16px;
-        font-size: 18px;
-      }
-
-      .lct-table {
-        border-collapse: collapse;
-        width: 100%;
-        font-size: 14px;
-      }
-
-      .lct-stat-sub {
-        color: var(--lct-muted);
-        font-size: 12px;
-        margin: 4px 0 0;
-      }
-
-      .lct-delta {
-        font-size: 12px;
-        margin: 4px 0 0;
-      }
-
-      .lct-delta-neutral { color: var(--lct-muted); }
-      .lct-delta-up      { color: #b91c1c; }
-      .lct-delta-down    { color: #047857; }
-
-      .lct-table-wrap {
-        overflow-x: auto;
-      }
-
-      .lct-table th,
-      .lct-table td {
-        border-bottom: 1px solid var(--lct-border);
-        padding: 10px 8px;
-        text-align: left;
-        vertical-align: middle;
-      }
-
-      .lct-table th {
-        color: var(--lct-muted);
-        font-weight: 600;
-        font-size: 12px;
-        text-transform: uppercase;
-      }
-
-      .lct-table td:last-child,
-      .lct-table th:last-child {
-        text-align: right;
-      }
-
-      .lct-calls-table td:last-child,
-      .lct-calls-table th:last-child {
-        text-align: left;
-      }
-
-      .lct-bar-track {
-        background: #e5e7eb;
-        border-radius: 999px;
-        height: 8px;
-        overflow: hidden;
-        min-width: 96px;
-      }
-
-      .lct-bar-fill {
-        background: var(--lct-accent);
-        height: 100%;
-      }
-
-      .lct-budget-fill {
-        background: var(--lct-danger);
-      }
-
-      .lct-empty {
-        padding: 32px;
-        text-align: center;
-      }
-
-      .lct-filters {
-        display: grid;
-        gap: 12px;
-        grid-template-columns: repeat(6, minmax(0, 1fr));
-      }
-
-      .lct-field {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-      }
-
-      .lct-field label {
-        color: var(--lct-muted);
-        font-size: 12px;
-        font-weight: 600;
-        text-transform: uppercase;
-      }
-
-      .lct-field input,
-      .lct-field select {
-        border: 1px solid var(--lct-border);
-        border-radius: 6px;
-        color: var(--lct-text);
-        font: inherit;
-        padding: 8px 10px;
-        background: var(--lct-panel);
-      }
-
-      .lct-button-row {
-        align-items: end;
-        display: flex;
-        gap: 8px;
-      }
-
-      .lct-button {
-        background: var(--lct-accent);
-        border: 1px solid var(--lct-accent);
-        border-radius: 6px;
-        color: #ffffff;
-        display: inline-block;
-        font: inherit;
-        padding: 8px 12px;
-        text-decoration: none;
-      }
-
-      .lct-button-secondary {
-        background: var(--lct-panel);
-        color: var(--lct-accent);
-      }
-
-      .lct-pagination {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
-        gap: 12px;
-        margin-top: 16px;
-      }
-
-      .lct-tags {
-        display: inline-block;
-        max-width: 280px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .lct-nowrap {
-        white-space: nowrap;
-      }
-
-      .lct-detail-grid {
-        display: grid;
-        gap: 16px;
-        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      }
-
-      .lct-dl {
-        display: grid;
-        gap: 12px;
-        grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr);
-        margin: 0;
-      }
-
-      .lct-dl dt {
-        color: var(--lct-muted);
-        font-size: 12px;
-        font-weight: 600;
-        text-transform: uppercase;
-      }
-
-      .lct-dl dd {
-        margin: 0;
-      }
-
-      .lct-pre {
-        background: #0f172a;
-        border-radius: 8px;
-        color: #e5e7eb;
-        margin: 0;
-        overflow: auto;
-        padding: 16px;
-      }
-
-      @media (max-width: 800px) {
-        .lct-header {
-          align-items: flex-start;
-          flex-direction: column;
-        }
-
-        .lct-stats,
-        .lct-two-col {
-          grid-template-columns: 1fr;
-        }
-
-        .lct-filters {
-          grid-template-columns: 1fr;
-        }
-
-        .lct-pagination {
-          align-items: flex-start;
-          flex-direction: column;
-        }
-
-        .lct-detail-grid {
-          grid-template-columns: 1fr;
-        }
-      }
-    </style>
+    <title>LLM Cost Tracker</title>
+    <%= stylesheet_link_tag stylesheet_path %>
   </head>
   <body>
-    <main class="lct-shell">
-      <header class="lct-header">
-        <h1 class="lct-title">LLM Costs</h1>
-        <nav class="lct-nav" aria-label="Dashboard">
-          <%= link_to "Overview", root_path, class: ("lct-active" if request.path.delete_suffix("/") == root_path.delete_suffix("/")) %>
-          <%= link_to "Models", models_path, class: ("lct-active" if request.path.start_with?(models_path)) %>
-          <%= link_to "Calls", calls_path, class: ("lct-active" if request.path.start_with?(calls_path)) %>
-          <%= link_to "Tags", tags_path, class: ("lct-active" if request.path.start_with?(tags_path)) %>
-          <%= link_to "Data Quality", data_quality_path, class: ("lct-active" if request.path.start_with?(data_quality_path)) %>
-        </nav>
-      </header>
-
-      <%= yield %>
-    </main>
+    <div class="lct-app">
+      <main class="lct-shell">
+        <header class="lct-header">
+          <div class="lct-header-copy">
+            <h1 class="lct-title">LLM Cost Tracker</h1>
+          </div>
+          <nav class="lct-nav" aria-label="Dashboard">
+            <%= link_to "Overview", root_path, class: ("lct-active" if request.path.delete_suffix("/") == root_path.delete_suffix("/")) %>
+            <%= link_to "Models", models_path, class: ("lct-active" if request.path.start_with?(models_path)) %>
+            <%= link_to "Calls", calls_path, class: ("lct-active" if request.path.start_with?(calls_path)) %>
+            <%= link_to "Tags", tags_path, class: ("lct-active" if request.path.start_with?(tags_path)) %>
+            <%= link_to "Data Quality", data_quality_path, class: ("lct-active" if request.path.start_with?(data_quality_path)) %>
+          </nav>
+        </header>
+
+        <%= yield %>
+      </main>
+    </div>
+    <script>
+      document.addEventListener("keydown", function(event) {
+        if (event.key !== "/" || event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+
+        var target = event.target;
+        if (target && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName))) return;
+
+        var input = document.querySelector("[data-lct-filter-input]");
+        if (!input) return;
+
+        event.preventDefault();
+        input.focus();
+        if (typeof input.select === "function") input.select();
+      });
+    </script>
   </body>
 </html>