llm_cost_tracker 0.10.0 → 0.12.0

data/app/views/llm_cost_tracker/data_quality/index.html.erb

@@ -1,195 +1,152 @@
-<section class="lct-panel lct-toolbar">
-  <div class="lct-toolbar-head">
-    <h2 class="lct-section-title">Data Quality</h2>
-  </div>
+<div class="lct-filter-row">
+  <%= render "llm_cost_tracker/shared/filter_pill_date", path: data_quality_path %>
+  <%= render "llm_cost_tracker/shared/filter_pill_provider", path: data_quality_path %>
+  <%= render "llm_cost_tracker/shared/filter_pill_model", path: data_quality_path %>
 
-  <%= render "llm_cost_tracker/shared/filters", path: data_quality_path %>
+  <% if params[:provider].present? || params[:model].present? %>
+    <%= link_to "× Clear filters", data_quality_path(current_query(provider: nil, model: nil, page: nil)), class: "lct-filter-clear" %>
+  <% end %>
 
-  <%= render "llm_cost_tracker/shared/active_filters", chips: active_tag_filters, clear_path: data_quality_path %>
-</section>
+  <span class="lct-filter-row-meta"><%= number_with_delimiter(@summary.total) %> call<%= "s" unless @summary.total == 1 %> inspected</span>
+</div>
 
 <% if @summary.total.zero? %>
   <section class="lct-panel lct-empty">
     <h2 class="lct-state-title">No data yet</h2>
     <p class="lct-state-copy">Quality metrics will appear here once calls are recorded in the current slice.</p>
-    <div class="lct-state-actions">
-      <%= link_to "Clear filters", data_quality_path, class: "lct-button lct-button-secondary" %>
-    </div>
   </section>
 <% else %>
-  <section class="lct-stat-grid lct-stat-grid-spaced">
-    <article class="lct-stat">
-      <p class="lct-stat-label">Calls inspected</p>
-      <p class="lct-stat-value"><%= number(@summary.total) %></p>
-      <p class="lct-stat-sub">in current slice</p>
-    </article>
-
-    <article class="lct-stat">
-      <p class="lct-stat-label">Unknown pricing</p>
-      <p class="lct-stat-value"><%= number(@summary.unknown_pricing_count) %></p>
-      <p class="lct-stat-sub"><%= percent(@summary.unknown_pricing_share) %> of calls</p>
-    </article>
-
-    <article class="lct-stat">
-      <p class="lct-stat-label">Calls without tags</p>
-      <p class="lct-stat-value"><%= number(@summary.untagged_calls_count) %></p>
-      <p class="lct-stat-sub"><%= percent(@summary.untagged_share) %> of calls</p>
-    </article>
+  <h3 class="lct-stat-section-label">Volume</h3>
+  <div class="lct-stat-grid">
+    <div class="lct-stat">
+      <div class="lct-stat-head"><p class="lct-stat-label">Calls inspected</p></div>
+      <p class="lct-stat-value"><%= number_with_delimiter(@summary.total) %></p>
+      <p class="lct-stat-foot">in current slice</p>
+    </div>
 
-    <article class="lct-stat">
-      <p class="lct-stat-label">Missing latency</p>
-      <p class="lct-stat-value"><%= number(@summary.missing_latency_count) %></p>
-      <p class="lct-stat-sub"><%= percent(@summary.missing_latency_share) %> of calls</p>
-    </article>
+    <div class="lct-stat">
+      <div class="lct-stat-head"><p class="lct-stat-label">Streaming calls</p></div>
+      <p class="lct-stat-value"><%= number_with_delimiter(@summary.streaming_count) %></p>
+      <p class="lct-stat-foot"><%= percent(@summary.streaming_share) %> of calls</p>
+    </div>
 
-    <article class="lct-stat">
-      <p class="lct-stat-label">Streaming calls</p>
-      <p class="lct-stat-value"><%= number(@summary.streaming_count) %></p>
-      <p class="lct-stat-sub"><%= percent(@summary.streaming_share) %> of calls</p>
-    </article>
+    <div class="lct-stat">
+      <div class="lct-stat-head"><p class="lct-stat-label">Calls with provider response ID</p></div>
+      <p class="lct-stat-value"><%= number_with_delimiter(@summary.calls_with_provider_response_id) %></p>
+      <p class="lct-stat-foot"><%= percent(@summary.provider_response_id_coverage) %> of calls</p>
+    </div>
+  </div>
 
-    <% if @summary.streaming_count.positive? %>
-      <article class="lct-stat">
-        <p class="lct-stat-label">Streams without usage</p>
-        <p class="lct-stat-value"><%= number(@summary.streaming_missing_usage) %></p>
-        <p class="lct-stat-sub"><%= percent(@summary.streaming_missing_usage_share) %> of streams</p>
-      </article>
-    <% end %>
+  <% incomplete_pricing = @summary.unknown_pricing_count.to_i %>
+  <% untagged = @summary.untagged_calls_count.to_i %>
+  <% missing_latency = @summary.missing_latency_count.to_i %>
+  <% streams_missing_usage = @summary.streaming_missing_usage.to_i %>
+  <% hidden_output_share = @hidden_output_summary&.fetch(:share_percent).to_f %>
+  <% has_issues = incomplete_pricing.positive? || untagged.positive? || missing_latency.positive? || streams_missing_usage.positive? || hidden_output_share.positive? %>
 
-    <article class="lct-stat">
-      <p class="lct-stat-label">Calls with provider response ID</p>
-      <p class="lct-stat-value"><%= number(@summary.calls_with_provider_response_id) %></p>
-      <p class="lct-stat-sub"><%= percent(@summary.provider_response_id_coverage) %> of calls</p>
-    </article>
+  <% if has_issues %>
+    <h3 class="lct-stat-section-label">Issues</h3>
+    <div class="lct-stat-grid">
+      <% if incomplete_pricing.positive? %>
+        <div class="lct-stat lct-stat-warn">
+          <div class="lct-stat-head"><p class="lct-stat-label">Incomplete pricing</p></div>
+          <p class="lct-stat-value"><%= number_with_delimiter(incomplete_pricing) %></p>
+          <p class="lct-stat-foot"><%= percent(@summary.unknown_pricing_share) %> of calls</p>
+        </div>
+      <% end %>
 
-    <% if @hidden_output_summary %>
-      <article class="lct-stat">
-        <p class="lct-stat-label">Hidden output share</p>
-        <p class="lct-stat-value"><%= percent(@hidden_output_summary.fetch(:share_percent)) %></p>
-        <p class="lct-stat-sub"><%= number(@hidden_output_summary.fetch(:hidden_output_tokens)) %> of <%= number(@hidden_output_summary.fetch(:output_tokens)) %> output tokens</p>
-      </article>
-    <% end %>
-  </section>
+      <% if untagged.positive? %>
+        <div class="lct-stat lct-stat-warn">
+          <div class="lct-stat-head"><p class="lct-stat-label">Calls without tags</p></div>
+          <p class="lct-stat-value"><%= number_with_delimiter(untagged) %></p>
+          <p class="lct-stat-foot"><%= percent(@summary.untagged_share) %> of calls</p>
+        </div>
+      <% end %>
 
-  <section class="lct-grid lct-two-col">
-    <section class="lct-panel">
-      <div class="lct-section-head">
-        <div>
-          <h2 class="lct-section-title">Next actions</h2>
-          <p class="lct-section-copy">Use these fixes to improve the trustworthiness of downstream cost reports.</p>
+      <% if missing_latency.positive? %>
+        <div class="lct-stat lct-stat-warn">
+          <div class="lct-stat-head"><p class="lct-stat-label">Missing latency</p></div>
+          <p class="lct-stat-value"><%= number_with_delimiter(missing_latency) %></p>
+          <p class="lct-stat-foot"><%= percent(@summary.missing_latency_share) %> of calls</p>
         </div>
-      </div>
+      <% end %>
 
-      <table class="lct-table lct-table-compact">
-        <thead>
-          <tr>
-            <th>Issue</th>
-            <th>Why it matters</th>
-            <th>Suggested action</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Unknown pricing</td>
-            <td>Cost stays <code class="lct-code">nil</code>, so totals undercount.</td>
-            <td>Update <code class="lct-code">pricing_overrides</code> or <code class="lct-code">prices_file</code>.</td>
-          </tr>
-          <tr>
-            <td>Missing tags</td>
-            <td>Attribution by tenant, user, or feature becomes less useful.</td>
-            <td>Pass <code class="lct-code">tags:</code> from middleware using request context.</td>
-          </tr>
-          <tr>
-            <td>Missing latency</td>
-            <td>Slow requests become harder to isolate on the calls page.</td>
-            <td>Make sure latency capture is enabled on every tracked request.</td>
-          </tr>
-          <% if @summary.streaming_missing_usage.positive? %>
-            <tr>
-              <td>Streams without usage</td>
-              <td>Token totals undercount when streaming responses drop the final usage event.</td>
-              <td>Send OpenAI requests with <code class="lct-code">stream_options: { include_usage: true }</code>, or wrap custom clients with <code class="lct-code">LlmCostTracker.track_stream</code>.</td>
-            </tr>
-          <% end %>
-          <% if @summary.missing_provider_response_id_count.positive? %>
-            <tr>
-              <td>Missing provider response IDs</td>
-              <td>Proof of provider-issued responses is weaker when calls cannot be tied back to provider objects.</td>
-              <td>Upgrade to the latest parser coverage and pass <code class="lct-code">provider_response_id:</code> for custom clients when the provider exposes one.</td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-    </section>
+      <% if streams_missing_usage.positive? %>
+        <div class="lct-stat lct-stat-warn">
+          <div class="lct-stat-head"><p class="lct-stat-label">Streams without usage</p></div>
+          <p class="lct-stat-value"><%= number_with_delimiter(streams_missing_usage) %></p>
+          <p class="lct-stat-foot"><%= percent(@summary.streaming_missing_usage_share) %> of streams</p>
+        </div>
+      <% end %>
 
-    <section class="lct-panel">
-      <div class="lct-section-head">
-        <div>
-          <h2 class="lct-section-title">Coverage summary</h2>
-          <p class="lct-section-copy">Good dashboards start with clean pricing, tags, and latency coverage.</p>
+      <% if hidden_output_share.positive? %>
+        <div class="lct-stat lct-stat-warn">
+          <div class="lct-stat-head"><p class="lct-stat-label">Hidden output share</p></div>
+          <p class="lct-stat-value"><%= percent(hidden_output_share) %></p>
+          <p class="lct-stat-foot"><%= number_with_delimiter(@hidden_output_summary.fetch(:hidden_output_tokens)) %> of <%= number_with_delimiter(@hidden_output_summary.fetch(:output_tokens)) %> output tokens</p>
         </div>
-      </div>
+      <% end %>
+    </div>
+  <% end %>
 
-      <table class="lct-table lct-table-compact">
-        <thead>
-          <tr>
-            <th>Dimension</th>
-            <th class="lct-num">Coverage</th>
-            <th class="lct-num">Calls with data</th>
-            <th>Visual</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Cost (pricing known)</td>
-            <td class="lct-num"><%= percent(@summary.cost_coverage) %></td>
-            <td class="lct-num"><%= number(@summary.calls_with_pricing) %></td>
-            <td><%= render "llm_cost_tracker/shared/bar", value: @summary.cost_coverage, max: 100.0 %></td>
-          </tr>
+  <section class="lct-panel">
+    <div class="lct-panel-head"><h2 class="lct-panel-title">Coverage summary</h2></div>
 
-          <tr>
-            <td>Tags (at least one tag)</td>
-            <td class="lct-num"><%= percent(@summary.tag_coverage) %></td>
-            <td class="lct-num"><%= number(@summary.tagged_calls) %></td>
-            <td><%= render "llm_cost_tracker/shared/bar", value: @summary.tag_coverage, max: 100.0 %></td>
-          </tr>
+    <table class="lct-tbl">
+      <thead>
+        <tr>
+          <th>Dimension</th>
+          <th class="lct-num">Coverage</th>
+          <th class="lct-num">Calls with data</th>
+          <th>Visual</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Cost (pricing known)</td>
+          <td class="lct-num"><%= percent(@summary.cost_coverage) %></td>
+          <td class="lct-num"><%= number_with_delimiter(@summary.calls_with_pricing) %></td>
+          <td><%= render "llm_cost_tracker/shared/bar", value: @summary.cost_coverage, max: 100.0 %></td>
+        </tr>
 
-          <tr>
-            <td>Latency</td>
-            <td class="lct-num"><%= percent(@summary.latency_coverage) %></td>
-            <td class="lct-num"><%= number(@summary.calls_with_latency) %></td>
-            <td><%= render "llm_cost_tracker/shared/bar", value: @summary.latency_coverage, max: 100.0 %></td>
-          </tr>
+        <tr>
+          <td>Tags (at least one tag)</td>
+          <td class="lct-num"><%= percent(@summary.tag_coverage) %></td>
+          <td class="lct-num"><%= number_with_delimiter(@summary.tagged_calls) %></td>
+          <td><%= render "llm_cost_tracker/shared/bar", value: @summary.tag_coverage, max: 100.0 %></td>
+        </tr>
 
-          <% if @summary.streaming_count.positive? %>
-            <tr>
-              <td>Streaming usage captured</td>
-              <td class="lct-num"><%= percent(@summary.stream_coverage) %></td>
-              <td class="lct-num"><%= number(@summary.streams_with_usage) %> / <%= number(@summary.streaming_count) %></td>
-              <td><%= render "llm_cost_tracker/shared/bar", value: @summary.stream_coverage, max: 100.0 %></td>
-            </tr>
-          <% end %>
+        <tr>
+          <td>Latency</td>
+          <td class="lct-num"><%= percent(@summary.latency_coverage) %></td>
+          <td class="lct-num"><%= number_with_delimiter(@summary.calls_with_latency) %></td>
+          <td><%= render "llm_cost_tracker/shared/bar", value: @summary.latency_coverage, max: 100.0 %></td>
+        </tr>
 
+        <% if @summary.streaming_count.positive? %>
           <tr>
-            <td>Provider response ID</td>
-            <td class="lct-num"><%= percent(@summary.provider_response_id_coverage) %></td>
-            <td class="lct-num"><%= number(@summary.calls_with_provider_response_id) %></td>
-            <td><%= render "llm_cost_tracker/shared/bar", value: @summary.provider_response_id_coverage, max: 100.0 %></td>
+            <td>Streaming usage captured</td>
+            <td class="lct-num"><%= percent(@summary.stream_coverage) %></td>
+            <td class="lct-num"><%= number_with_delimiter(@summary.streams_with_usage) %> / <%= number_with_delimiter(@summary.streaming_count) %></td>
+            <td><%= render "llm_cost_tracker/shared/bar", value: @summary.stream_coverage, max: 100.0 %></td>
           </tr>
-        </tbody>
-      </table>
-    </section>
+        <% end %>
+
+        <tr>
+          <td>Provider response ID</td>
+          <td class="lct-num"><%= percent(@summary.provider_response_id_coverage) %></td>
+          <td class="lct-num"><%= number_with_delimiter(@summary.calls_with_provider_response_id) %></td>
+          <td><%= render "llm_cost_tracker/shared/bar", value: @summary.provider_response_id_coverage, max: 100.0 %></td>
+        </tr>
+      </tbody>
+    </table>
   </section>
 
   <section class="lct-panel">
-    <div class="lct-section-head">
-      <div>
-        <h2 class="lct-section-title">Token usage</h2>
-      </div>
-    </div>
+    <div class="lct-panel-head"><h2 class="lct-panel-title">Token usage</h2></div>
 
     <div class="lct-table-wrap">
-      <table class="lct-table lct-table-compact">
+      <table class="lct-tbl">
         <thead>
           <tr>
             <th>Bucket</th>
@@ -205,7 +162,7 @@
             <% cost_value = row.fetch(:cost_value) %>
             <tr>
               <td><%= LlmCostTracker::TokenUsageHelper::QUALITY_LABELS.fetch(token_key) %></td>
-              <td class="lct-num"><%= number(row.fetch(:token_value)) %></td>
+              <td class="lct-num"><%= number_with_delimiter(row.fetch(:token_value)) %></td>
               <% if row.fetch(:share_basis) == :output %>
                 <td class="lct-num"><%= percent(row.fetch(:share_percent)) %> of output</td>
               <% else %>
@@ -223,14 +180,10 @@
 
   <% if @service_charge_rows.any? %>
     <section class="lct-panel">
-      <div class="lct-section-head">
-        <div>
-          <h2 class="lct-section-title">Service charges</h2>
-        </div>
-      </div>
+      <div class="lct-panel-head"><h2 class="lct-panel-title">Service charges</h2></div>
 
       <div class="lct-table-wrap">
-        <table class="lct-table lct-table-compact">
+        <table class="lct-tbl">
           <thead>
             <tr>
               <th>Provider</th>
@@ -243,13 +196,13 @@
           </thead>
           <tbody>
             <% @service_charge_rows.each do |row| %>
-              <% unknown_cost = row.cost_status.to_s == LlmCostTracker::Billing::CostStatus::UNKNOWN %>
+              <% unknown_cost = row.cost_status.to_s == LlmCostTracker::Charges::CostStatus::UNKNOWN %>
               <tr>
-                <td><code class="lct-code"><%= row.provider %></code></td>
-                <td><code class="lct-code"><%= row.component %></code></td>
+                <td><code class="lct-code-id"><%= row.provider %></code></td>
+                <td><code class="lct-code-id"><%= row.component %></code></td>
                 <td><%= row.cost_status %></td>
-                <td class="lct-num"><%= number(row.charges_count) %></td>
-                <td class="lct-num"><%= number(row.quantity) %></td>
+                <td class="lct-num"><%= number_with_delimiter(row.charges_count) %></td>
+                <td class="lct-num"><%= number_with_delimiter(row.quantity) %></td>
                 <td class="lct-num<%= ' lct-num-muted' if unknown_cost %>"><%= unknown_cost ? "n/a" : money(row.total_cost) %></td>
               </tr>
             <% end %>
@@ -261,15 +214,10 @@
 
   <% if @streaming_health_rows.any? %>
     <section class="lct-panel">
-      <div class="lct-section-head">
-        <div>
-          <h2 class="lct-section-title">Streaming health by provider</h2>
-          <p class="lct-section-copy">Streams without a final usage chunk land as <code class="lct-code">usage_source: unknown</code> and undercount tokens. A high unknown share for an OpenAI-compatible provider usually means <code class="lct-code">stream_options: { include_usage: true }</code> is not being injected for that host.</p>
-        </div>
-      </div>
+      <div class="lct-panel-head"><h2 class="lct-panel-title">Streaming health by provider</h2></div>
 
       <div class="lct-table-wrap">
-        <table class="lct-table lct-table-compact">
+        <table class="lct-tbl">
           <thead>
             <tr>
               <th>Provider</th>
@@ -282,10 +230,10 @@
           <tbody>
             <% @streaming_health_rows.each do |row| %>
               <tr>
-                <td><code class="lct-code"><%= row.provider %></code></td>
-                <td class="lct-num"><%= number(row.streams) %></td>
-                <td class="lct-num"><%= number(row.with_usage) %></td>
-                <td class="lct-num"><%= number(row.unknown) %></td>
+                <td><code class="lct-code-id"><%= row.provider %></code></td>
+                <td class="lct-num"><%= number_with_delimiter(row.streams) %></td>
+                <td class="lct-num"><%= number_with_delimiter(row.with_usage) %></td>
+                <td class="lct-num"><%= number_with_delimiter(row.unknown) %></td>
                 <td class="lct-num"><%= percent(row.unknown_share) %></td>
               </tr>
             <% end %>
@@ -297,16 +245,14 @@
 
   <% unless @unknown_pricing_by_model.empty? %>
     <section class="lct-panel">
-      <div class="lct-section-head">
-        <div>
-          <h2 class="lct-section-title">Unknown pricing by model</h2>
-          <p class="lct-section-copy">These models have token counts but no configured rates, so cost stays unknown. After the next price refresh or a <code class="lct-code">pricing_overrides</code> update, run <code class="lct-code">bin/rails llm_cost_tracker:backfill_unknown_pricing</code> to recompute these calls.</p>
-        </div>
-        <%= link_to "Calls", calls_path(current_query(sort: "unknown_pricing")), class: "lct-button lct-button-secondary" %>
+      <div class="lct-panel-head">
+        <h2 class="lct-panel-title">Incomplete pricing by model</h2>
+        <span class="lct-panel-meta"><%= link_to "View calls →", calls_path(current_query(cost_status: "incomplete", sort: nil)) %></span>
       </div>
+      <p class="lct-panel-intro">These models have line items without configured rates, so totals undercount (a full row is missing all rates; a partial row has some line items priced and others not). After the next price refresh or a <code>pricing_overrides</code> update, run <code>bin/rails llm_cost_tracker:backfill_unknown_pricing</code> to recompute these calls.</p>
 
       <div class="lct-table-wrap">
-        <table class="lct-table lct-table-compact">
+        <table class="lct-tbl">
           <thead>
             <tr>
               <th>Provider</th>
@@ -318,9 +264,9 @@
           <tbody>
             <% @unknown_pricing_by_model.each do |row| %>
               <tr>
-                <td><code class="lct-code"><%= row.provider %></code></td>
-                <td><code class="lct-code"><%= row.model %></code></td>
-                <td class="lct-num"><%= number(row.calls) %></td>
+                <td><code class="lct-code-id"><%= row.provider %></code></td>
+                <td><code class="lct-code-id"><%= row.model %></code></td>
+                <td class="lct-num"><%= number_with_delimiter(row.calls) %></td>
                 <td class="lct-num"><%= percent(row.share_percent) %></td>
               </tr>
             <% end %>

data/app/views/llm_cost_tracker/errors/database.html.erb

@@ -1,8 +1,8 @@
 <section class="lct-panel lct-empty">
   <h2 class="lct-state-title">Database unavailable</h2>
   <p class="lct-state-copy">
-    llm_cost_tracker could not read the <span class="lct-code">llm_cost_tracker_calls</span> table.
+    llm_cost_tracker could not read the <code class="lct-code-id">llm_cost_tracker_calls</code> table.
     Check that ActiveRecord is connected, then run
-    <span class="lct-code">rails generate llm_cost_tracker:install</span> and migrate your database.
+    <code class="lct-code-id">rails generate llm_cost_tracker:install</code> and migrate your database.
   </p>
 </section>

data/app/views/llm_cost_tracker/models/index.html.erb

@@ -1,71 +1,51 @@
-<section class="lct-panel lct-toolbar">
-  <div class="lct-toolbar-head">
-    <h2 class="lct-section-title">Models</h2>
-  </div>
+<% rows = @rows.to_a %>
+<div class="lct-filter-row">
+  <%= render "llm_cost_tracker/shared/filter_pill_date", path: models_path %>
+  <%= render "llm_cost_tracker/shared/filter_pill_provider", path: models_path %>
+  <%= render "llm_cost_tracker/shared/filter_pill_model", path: models_path %>
 
-  <%= render "llm_cost_tracker/shared/filters",
-             path: models_path,
-             fields: %i[from to provider model] %>
+  <% if params[:provider].present? || params[:model].present? %>
+    <%= link_to "× Clear filters", models_path(current_query(provider: nil, model: nil, page: nil)), class: "lct-filter-clear" %>
+  <% end %>
 
-  <%= render "llm_cost_tracker/shared/active_filters", chips: active_tag_filters, clear_path: models_path %>
-</section>
+  <span class="lct-filter-row-meta"><%= number_with_delimiter(rows.size) %> model<%= "s" unless rows.size == 1 %></span>
+</div>
 
-<% if @rows.empty? %>
+<% if rows.empty? %>
   <section class="lct-panel lct-empty">
     <h2 class="lct-state-title">No models in this slice</h2>
-    <p class="lct-state-copy">Tracked models will appear here once calls match the current provider, model, and date filters.</p>
-    <div class="lct-state-actions">
-      <%= link_to "Clear filters", models_path, class: "lct-button lct-button-secondary" %>
-    </div>
+    <p class="lct-state-copy">Tracked models will appear here once calls match the current filters.</p>
   </section>
 <% else %>
   <section class="lct-panel">
-    <div class="lct-results-toolbar">
-      <%= render "llm_cost_tracker/shared/sort",
-                 current: (@sort.presence || "cost"),
-                 options: [
-                   ["Total spend", "cost"],
-                   ["Call volume", "calls"],
-                   ["Avg cost / call", "avg_cost"],
-                   ["Avg latency", "latency"]
-                 ],
-                 path_for_sort: ->(value) { models_path(current_query(sort: value)) } %>
-    </div>
-
-    <div class="lct-table-wrap">
-      <table class="lct-table lct-table-compact">
-        <thead>
+    <table class="lct-tbl">
+      <thead>
+        <tr>
+          <%= sortable_header("Provider", "provider") %>
+          <%= sortable_header("Model", "name") %>
+          <%= sortable_header("Calls", "calls", num: true) %>
+          <%= sortable_header("Tokens", "tokens", num: true) %>
+          <%= sortable_header("Avg latency", "latency", num: true) %>
+          <%= sortable_header("Avg cost / call", "avg_cost", num: true) %>
+          <%= sortable_header("Total cost", "cost", num: true, default: true) %>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% rows.each do |row| %>
           <tr>
-            <th>Provider</th>
-            <th>Model</th>
-            <th class="lct-num">Calls</th>
-            <th class="lct-num">Total tokens</th>
-            <th class="lct-num">Regular input</th>
-            <th class="lct-num">Output</th>
-            <th class="lct-num">Total cost</th>
-            <th class="lct-num">Avg cost / call</th>
-            <th class="lct-num">Avg latency</th>
-            <th></th>
+            <td><span class="lct-model-cell"><span class="lct-provider-dot lct-provider-dot-<%= row.provider %>"></span><%= row.provider %></span></td>
+            <td><code class="lct-code-id"><%= row.model %></code></td>
+            <td class="lct-num"><%= number_with_delimiter(row.calls) %></td>
+            <td class="lct-num"><%= number_with_delimiter(row.total_tokens) %></td>
+            <% avg_latency = row.average_latency_ms %>
+            <td class="lct-num<%= ' lct-num-muted' if avg_latency.nil? %>"><%= avg_latency ? "#{number_with_delimiter(avg_latency.round)}ms" : "n/a" %></td>
+            <td class="lct-num"><%= money(row.average_cost_per_call) %></td>
+            <td class="lct-num"><%= money(row.total_cost) %></td>
+            <td class="lct-num"><%= link_to "Calls", calls_path(calls_query_for_model(provider: row.provider, model: row.model)), class: "lct-page-link" %></td>
           </tr>
-        </thead>
-        <tbody>
-          <% @rows.each do |row| %>
-            <tr>
-              <td><%= row.provider %></td>
-              <td><code class="lct-code"><%= row.model %></code></td>
-              <td class="lct-num"><%= number(row.calls) %></td>
-              <td class="lct-num"><%= number(row.total_tokens) %></td>
-              <td class="lct-num"><%= number(row.input_tokens) %></td>
-              <td class="lct-num"><%= number(row.output_tokens) %></td>
-              <td class="lct-num"><%= money(row.total_cost) %></td>
-              <td class="lct-num"><%= money(row.average_cost_per_call) %></td>
-              <% average_latency_ms = row.average_latency_ms %>
-              <td class="lct-num<%= ' lct-num-muted' if average_latency_ms.nil? %>"><%= average_latency_ms ? "#{number(average_latency_ms.round)}ms" : "n/a" %></td>
-              <td><%= link_to "Calls", calls_path(calls_query_for_model(provider: row.provider, model: row.model)), class: "lct-button lct-button-secondary lct-button-compact" %></td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
+        <% end %>
+      </tbody>
+    </table>
   </section>
 <% end %>