llm_cost_tracker 0.10.0 → 0.12.0

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

@@ -0,0 +1,93 @@
+<nav class="lct-tabs" aria-label="Price sources">
+  <% LlmCostTracker::Dashboard::PricingOverview::SOURCES.each do |source| %>
+    <% data = @overview.fetch(:sources)[source] %>
+    <% next unless data %>
+    <% active = source == @active_source %>
+    <%= link_to pricing_path(source: source), class: "lct-tab#{' lct-active' if active}", aria: (active ? { current: "page" } : {}) do %>
+      <%= data.fetch(:label) %><span class="lct-tab-count"><%= number_with_delimiter(data.fetch(:rows).size) %></span>
+    <% end %>
+  <% end %>
+</nav>
+
+<% if @active_source != @overview.fetch(:effective_source) %>
+  <% if @active_source == :bundled %>
+    <div class="lct-alert lct-alert-info">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
+      <span><strong>Fallback source</strong> shipped with the gem. For production, pin a <code>prices_file</code> you control.</span>
+    </div>
+  <% else %>
+    <div class="lct-alert lct-alert-info">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
+      <span>A higher-priority source is active — entries here only take effect when not overridden.</span>
+    </div>
+  <% end %>
+<% end %>
+
+<div class="lct-filter-row">
+  <details class="lct-filter-pop" name="lct-filter">
+    <summary class="lct-filter-pill <%= 'lct-active' if @provider_filter %>">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+      <span class="lct-filter-pill-key">Provider</span>
+      <span class="lct-filter-pill-value"><%= @provider_filter || "All" %></span>
+      <svg class="lct-chev" width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l4 4 4-4"/></svg>
+    </summary>
+    <%= form_with url: pricing_path, method: :get, local: true, html: { class: "lct-filter-pop-body" } do %>
+      <%= hidden_field_tag :source, @active_source %>
+      <div class="lct-filter-pop-field">
+        <label for="lct-filter-provider">Provider</label>
+        <%= select_tag :provider, options_for_select(@providers, @provider_filter), include_blank: "All providers", id: "lct-filter-provider" %>
+      </div>
+      <button type="submit" class="lct-button lct-button-primary">Apply</button>
+    <% end %>
+  </details>
+
+  <% if @provider_filter %>
+    <%= link_to "× Clear filters", pricing_path(source: @active_source), class: "lct-filter-clear" %>
+  <% end %>
+
+  <span class="lct-filter-row-meta">
+    <%= number_with_delimiter(@rows.size) %> entr<%= @rows.size == 1 ? "y" : "ies" %><% if @source_data.fetch(:currency) %> · <%= @source_data.fetch(:currency) %><% end %><% if @source_data.fetch(:updated_at) %> · Updated <%= @source_data.fetch(:updated_at) %><% end %>
+  </span>
+</div>
+
+<% if @rows.empty? %>
+  <section class="lct-panel lct-empty">
+    <h2 class="lct-state-title">No prices for this provider</h2>
+    <p class="lct-state-copy">Try a different provider filter or clear filters to see the full price table.</p>
+  </section>
+<% else %>
+  <section class="lct-panel">
+    <table class="lct-tbl">
+      <thead>
+        <tr>
+          <th>Provider</th>
+          <th>Model</th>
+          <th class="lct-num">Input</th>
+          <th class="lct-num">Output</th>
+          <th class="lct-num">Cache read</th>
+          <th class="lct-num">Cache write</th>
+          <th class="lct-num">Batch input</th>
+          <th class="lct-num">Batch output</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @rows.each do |row| %>
+          <tr>
+            <td>
+              <% if row.provider %>
+                <span class="lct-model-cell"><span class="lct-provider-dot lct-provider-dot-<%= row.provider %>"></span><%= row.provider %></span>
+              <% else %>
+                <span class="lct-num-muted">—</span>
+              <% end %>
+            </td>
+            <td><code class="lct-code-id"><%= row.model %></code></td>
+            <% LlmCostTracker::Dashboard::PricingOverview::RATE_COLUMNS.each do |key| %>
+              <% value = row.rates[key] %>
+              <td class="lct-num<%= ' lct-num-muted' if value.nil? %>"><%= value ? money(value) : "—" %></td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </section>
+<% end %>

data/app/views/llm_cost_tracker/shared/_filter_pill_date.html.erb

@@ -0,0 +1,19 @@
+<% extra_hidden = local_assigns.fetch(:extra_hidden, {}) %>
+<% extra_except = local_assigns.fetch(:extra_except, []) %>
+<details class="lct-filter-pop" name="lct-filter">
+  <summary class="lct-filter-pill">
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
+    <span class="lct-filter-pill-key">Date</span>
+    <span class="lct-filter-pill-value"><%= @from_date.strftime("%b %-d") %> – <%= @to_date.strftime("%b %-d") %></span>
+    <svg class="lct-chev" width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l4 4 4-4"/></svg>
+  </summary>
+  <%= form_with url: path, method: :get, local: true, html: { class: "lct-filter-pop-body" } do %>
+    <% extra_hidden.each do |k, v| %><%= hidden_field_tag k, v %><% end %>
+    <% current_query.except(:from, :to, :page, :per, *extra_except).each do |key, value| %>
+      <% Array(value).each do |v| %><%= hidden_field_tag(value.is_a?(Array) ? "#{key}[]" : key.to_s, v) %><% end %>
+    <% end %>
+    <div class="lct-filter-pop-field"><label for="lct-filter-from">From</label><input type="date" name="from" id="lct-filter-from" value="<%= @from_date.iso8601 %>"></div>
+    <div class="lct-filter-pop-field"><label for="lct-filter-to">To</label><input type="date" name="to" id="lct-filter-to" value="<%= @to_date.iso8601 %>"></div>
+    <button type="submit" class="lct-button lct-button-primary">Apply</button>
+  <% end %>
+</details>

data/app/views/llm_cost_tracker/shared/_filter_pill_model.html.erb

@@ -0,0 +1,22 @@
+<% extra_hidden = local_assigns.fetch(:extra_hidden, {}) %>
+<% extra_except = local_assigns.fetch(:extra_except, []) %>
+<% active = params[:model].presence %>
+<details class="lct-filter-pop" name="lct-filter">
+  <summary class="lct-filter-pill <%= 'lct-active' if active %>">
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>
+    <span class="lct-filter-pill-key">Model</span>
+    <span class="lct-filter-pill-value"><%= active || "All" %></span>
+    <svg class="lct-chev" width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l4 4 4-4"/></svg>
+  </summary>
+  <%= form_with url: path, method: :get, local: true, html: { class: "lct-filter-pop-body" } do %>
+    <% extra_hidden.each do |k, v| %><%= hidden_field_tag k, v %><% end %>
+    <% current_query.except(:model, :page, :per, *extra_except).each do |key, value| %>
+      <% Array(value).each do |v| %><%= hidden_field_tag(value.is_a?(Array) ? "#{key}[]" : key.to_s, v) %><% end %>
+    <% end %>
+    <div class="lct-filter-pop-field">
+      <label for="lct-filter-model">Model</label>
+      <%= select_tag :model, options_for_select(filter_options_for(:model), active), include_blank: "All models", id: "lct-filter-model" %>
+    </div>
+    <button type="submit" class="lct-button lct-button-primary">Apply</button>
+  <% end %>
+</details>

data/app/views/llm_cost_tracker/shared/_filter_pill_provider.html.erb

@@ -0,0 +1,22 @@
+<% extra_hidden = local_assigns.fetch(:extra_hidden, {}) %>
+<% extra_except = local_assigns.fetch(:extra_except, []) %>
+<% active = params[:provider].presence %>
+<details class="lct-filter-pop" name="lct-filter">
+  <summary class="lct-filter-pill <%= 'lct-active' if active %>">
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+    <span class="lct-filter-pill-key">Provider</span>
+    <span class="lct-filter-pill-value"><%= active || "All" %></span>
+    <svg class="lct-chev" width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l4 4 4-4"/></svg>
+  </summary>
+  <%= form_with url: path, method: :get, local: true, html: { class: "lct-filter-pop-body" } do %>
+    <% extra_hidden.each do |k, v| %><%= hidden_field_tag k, v %><% end %>
+    <% current_query.except(:provider, :page, :per, *extra_except).each do |key, value| %>
+      <% Array(value).each do |v| %><%= hidden_field_tag(value.is_a?(Array) ? "#{key}[]" : key.to_s, v) %><% end %>
+    <% end %>
+    <div class="lct-filter-pop-field">
+      <label for="lct-filter-provider">Provider</label>
+      <%= select_tag :provider, options_for_select(filter_options_for(:provider), active), include_blank: "All providers", id: "lct-filter-provider" %>
+    </div>
+    <button type="submit" class="lct-button lct-button-primary">Apply</button>
+  <% end %>
+</details>

data/app/views/llm_cost_tracker/shared/_filter_pill_stream.html.erb

@@ -0,0 +1,23 @@
+<% extra_hidden = local_assigns.fetch(:extra_hidden, {}) %>
+<% extra_except = local_assigns.fetch(:extra_except, []) %>
+<% active = params[:stream].presence %>
+<% display_value = case active when "yes" then "Streaming" when "no" then "Non-streaming" else "All" end %>
+<details class="lct-filter-pop" name="lct-filter">
+  <summary class="lct-filter-pill <%= 'lct-active' if active %>">
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+    <span class="lct-filter-pill-key">Stream</span>
+    <span class="lct-filter-pill-value"><%= display_value %></span>
+    <svg class="lct-chev" width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l4 4 4-4"/></svg>
+  </summary>
+  <%= form_with url: path, method: :get, local: true, html: { class: "lct-filter-pop-body" } do %>
+    <% extra_hidden.each do |k, v| %><%= hidden_field_tag k, v %><% end %>
+    <% current_query.except(:stream, :page, :per, *extra_except).each do |key, value| %>
+      <% Array(value).each do |v| %><%= hidden_field_tag(value.is_a?(Array) ? "#{key}[]" : key.to_s, v) %><% end %>
+    <% end %>
+    <div class="lct-filter-pop-field">
+      <label for="lct-filter-stream">Stream</label>
+      <%= select_tag :stream, options_for_select(LlmCostTracker::Dashboard::Filter::STREAM_FILTER_OPTIONS, active), include_blank: "All calls", id: "lct-filter-stream" %>
+    </div>
+    <button type="submit" class="lct-button lct-button-primary">Apply</button>
+  <% end %>
+</details>

data/app/views/llm_cost_tracker/shared/_spend_chart.html.erb

@@ -1,17 +1,7 @@
 <% if series.blank? %>
-  <div class="lct-chart-empty">No spend in this range.</div>
+  <div class="lct-panel-body lct-muted">No spend in this range.</div>
 <% else %>
-  <%= spend_chart_svg(series, comparison_points: local_assigns[:comparison_series]) %>
-  <div class="lct-chart-legend">
-    <span><%= series.first[:label] %></span>
-    <% if local_assigns[:comparison_series].present? %>
-      <span class="lct-chart-legend-compare">
-        <span class="lct-chart-key"><span class="lct-chart-key-line"></span> Current</span>
-        <span class="lct-chart-key"><span class="lct-chart-key-line lct-chart-key-line-secondary"></span> Previous</span>
-      </span>
-    <% else %>
-      <span>Peak <%= money(series.map { |p| p[:cost] }.max) %></span>
-    <% end %>
-    <span><%= series.last[:label] %></span>
+  <div class="lct-panel-body">
+    <%= spend_chart_svg(series, comparison_points: local_assigns[:comparison_series]) %>
   </div>
 <% end %>

data/app/views/llm_cost_tracker/shared/_tag_chips.html.erb

@@ -7,7 +7,7 @@
       <% if entry[:more] %>
         <span class="lct-tag-chip lct-tag-chip-more">+<%= entry[:more] %></span>
       <% else %>
-        <span class="lct-tag-chip"><%= entry[:key] %>=<%= entry[:value] %></span>
+        <span class="lct-tag-chip"><span class="lct-tag-chip-key"><%= entry[:key] %></span>=<%= entry[:value] %></span>
       <% end %>
     <% end %>
   </span>

data/app/views/llm_cost_tracker/shared/setup_required.html.erb

@@ -1,18 +1,19 @@
-<section class="lct-panel lct-empty">
-  <h2 class="lct-state-title">Setup required</h2>
-  <p class="lct-state-copy">
-    <%= @setup_message || "The llm_cost_tracker_calls table is not available yet." %>
-    <% if @setup_details.present? %>
-      Run <span class="lct-code">bin/rails llm_cost_tracker:doctor</span>, apply the listed migrations, and migrate your database.
-    <% else %>
-      Run <span class="lct-code">rails generate llm_cost_tracker:install</span> and migrate your database.
-    <% end %>
-  </p>
-  <% if @setup_details.present? %>
-    <ul class="lct-state-copy">
-      <% @setup_details.each do |detail| %>
-        <li><code class="lct-code"><%= detail %></code></li>
+<section class="lct-panel lct-setup-card">
+  <div class="lct-panel-head">
+    <h2 class="lct-panel-title">Setup required</h2>
+  </div>
+  <div class="lct-panel-body lct-setup-body">
+    <p><%= @setup_message || "The llm_cost_tracker_calls table is not available yet." %></p>
+    <p>
+      <% if @setup_details.present? %>
+        Run <code class="lct-code-id">bin/rails llm_cost_tracker:doctor</code>, apply the listed migrations, and migrate your database.
+      <% else %>
+        Run <code class="lct-code-id">rails generate llm_cost_tracker:install</code> and migrate your database.
       <% end %>
-    </ul>
+    </p>
+    <p>See <code class="lct-code-id">docs/upgrading.md</code> for the migration path.</p>
+  </div>
+  <% if @setup_details.present? %>
+    <pre class="lct-pre"><%= @setup_details.join("\n") %></pre>
   <% end %>
 </section>

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

@@ -1,46 +1,41 @@
-<section class="lct-panel lct-toolbar">
-  <div class="lct-toolbar-head">
-    <h2 class="lct-section-title">Tag keys</h2>
-  </div>
+<div class="lct-filter-row">
+  <%= render "llm_cost_tracker/shared/filter_pill_date", path: tags_path %>
+  <%= render "llm_cost_tracker/shared/filter_pill_provider", path: tags_path %>
+  <%= render "llm_cost_tracker/shared/filter_pill_model", path: tags_path %>
 
-  <%= render "llm_cost_tracker/shared/filters",
-             path: tags_path,
-             fields: %i[from to provider model] %>
+  <% if params[:provider].present? || params[:model].present? %>
+    <%= link_to "× Clear filters", tags_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: tags_path %>
-</section>
+  <span class="lct-filter-row-meta"><%= number_with_delimiter(@rows.size) %> tag key<%= "s" unless @rows.size == 1 %></span>
+</div>
 
 <% if @rows.empty? %>
   <section class="lct-panel lct-empty">
     <h2 class="lct-state-title">No tag keys found</h2>
     <p class="lct-state-copy">Tag keys will appear here once tagged calls exist in the current slice.</p>
-    <div class="lct-state-actions">
-      <%= link_to "Clear filters", tags_path, class: "lct-button lct-button-secondary" %>
-    </div>
   </section>
 <% else %>
   <section class="lct-panel">
-    <div class="lct-table-wrap">
-      <table class="lct-table lct-table-compact">
-        <thead>
+    <table class="lct-tbl">
+      <thead>
+        <tr>
+          <th>Tag key</th>
+          <th class="lct-num">Calls with this key</th>
+          <th class="lct-num">Distinct values</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @rows.each do |row| %>
           <tr>
-            <th>Tag key</th>
-            <th class="lct-num">Calls with this key</th>
-            <th class="lct-num">Distinct values</th>
-            <th></th>
+            <td><code class="lct-code-id"><%= row.key %></code></td>
+            <td class="lct-num"><%= number_with_delimiter(row.calls_count) %></td>
+            <td class="lct-num"><%= number_with_delimiter(row.distinct_values) %></td>
+            <td class="lct-num"><%= link_to "Breakdown", tag_path(row.key, current_query), class: "lct-page-link" %></td>
           </tr>
-        </thead>
-        <tbody>
-          <% @rows.each do |row| %>
-            <tr>
-              <td><code class="lct-code"><%= row.key %></code></td>
-              <td class="lct-num"><%= number(row.calls_count) %></td>
-              <td class="lct-num"><%= number(row.distinct_values) %></td>
-              <td><%= link_to "Breakdown", tag_path(row.key, current_query), class: "lct-button lct-button-secondary lct-button-compact" %></td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
+        <% end %>
+      </tbody>
+    </table>
   </section>
 <% end %>

data/app/views/llm_cost_tracker/tags/show.html.erb

@@ -1,150 +1,131 @@
+<% form_url = tag_path(params[:key]) %>
+
 <% if @value.present? %>
-  <section class="lct-panel lct-toolbar">
-    <div class="lct-toolbar-head">
-      <div>
-        <p class="lct-muted"><%= link_to "← All values for #{params[:key]}", tag_path(params[:key], current_query.except(:tag_value)) %></p>
-        <h2 class="lct-section-title">Tag: <code class="lct-code"><%= params[:key] %></code> = <code class="lct-code"><%= @value %></code></h2>
-      </div>
-    </div>
+  <p class="lct-breadcrumb-back"><%= link_to "← All values for #{params[:key]}", tag_path(params[:key], current_query.except(:tag_value)) %></p>
+  <h2 class="lct-page-title">Tag: <code class="lct-code-id"><%= params[:key] %></code> = <code class="lct-code-id"><%= @value %></code></h2>
 
-    <%= render "llm_cost_tracker/shared/filters",
-               path: tag_path(params[:key]),
-               fields: %i[from to provider model],
-               hidden_fields: { tag_value: @value },
-               reset_path: tag_path(params[:key], tag_value: @value) %>
-  </section>
+  <div class="lct-filter-row">
+    <%= render "llm_cost_tracker/shared/filter_pill_date", path: form_url, extra_hidden: { tag_value: @value }, extra_except: [:tag_value] %>
+    <%= render "llm_cost_tracker/shared/filter_pill_provider", path: form_url, extra_hidden: { tag_value: @value }, extra_except: [:tag_value] %>
+    <%= render "llm_cost_tracker/shared/filter_pill_model", path: form_url, extra_hidden: { tag_value: @value }, extra_except: [:tag_value] %>
+
+    <% if params[:provider].present? || params[:model].present? %>
+      <%= link_to "× Clear filters", tag_path(params[:key], current_query(provider: nil, model: nil, page: nil)), class: "lct-filter-clear" %>
+    <% end %>
+
+    <span class="lct-filter-row-meta"><%= number_with_delimiter(@value_calls) %> call<%= "s" unless @value_calls == 1 %> · <%= money(@value_total_cost) %></span>
+  </div>
 
   <% if @value_calls.zero? %>
     <section class="lct-panel lct-empty">
       <h2 class="lct-state-title">No calls tagged with <%= params[:key] %>=<%= @value %></h2>
       <p class="lct-state-copy">No matching calls in the current slice.</p>
-      <div class="lct-state-actions">
-        <%= link_to "Back to values", tag_path(params[:key]), 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">Total cost</p>
+    <div class="lct-stat-grid">
+      <div class="lct-stat">
+        <div class="lct-stat-head"><p class="lct-stat-label">Total cost</p></div>
         <p class="lct-stat-value"><%= money(@value_total_cost) %></p>
-        <p class="lct-stat-copy">Across <%= number(@value_calls) %> calls</p>
-      </article>
-
-      <article class="lct-stat">
-        <p class="lct-stat-label">Calls</p>
-        <p class="lct-stat-value"><%= number(@value_calls) %></p>
-        <p class="lct-stat-copy">Tagged with <code class="lct-code"><%= @value %></code></p>
-      </article>
-
-      <article class="lct-stat">
-        <p class="lct-stat-label">Avg cost / call</p>
+        <p class="lct-stat-foot">Across <%= number_with_delimiter(@value_calls) %> calls</p>
+      </div>
+      <div class="lct-stat">
+        <div class="lct-stat-head"><p class="lct-stat-label">Calls</p></div>
+        <p class="lct-stat-value"><%= number_with_delimiter(@value_calls) %></p>
+        <p class="lct-stat-foot">Tagged with <code class="lct-code-id"><%= @value %></code></p>
+      </div>
+      <div class="lct-stat">
+        <div class="lct-stat-head"><p class="lct-stat-label">Avg cost / call</p></div>
         <p class="lct-stat-value"><%= money(@value_calls.positive? ? @value_total_cost / @value_calls : 0) %></p>
-        <p class="lct-stat-copy">Mean over the slice</p>
-      </article>
-    </section>
+      </div>
+    </div>
 
     <section class="lct-panel">
-      <div class="lct-section-head">
-        <div>
-          <h2 class="lct-section-title">Spend over time</h2>
-          <p class="lct-section-copy">Daily total cost for calls tagged <code class="lct-code"><%= params[:key] %>=<%= @value %></code>.</p>
-        </div>
-        <%= link_to "Calls", calls_path(calls_query_for_tag(key: @key, value: @value)), class: "lct-button lct-button-secondary lct-button-compact" %>
+      <div class="lct-panel-head">
+        <h2 class="lct-panel-title">Spend over time</h2>
+        <span class="lct-panel-meta"><%= link_to "View calls →", calls_path(calls_query_for_tag(key: @key, value: @value)) %></span>
       </div>
-
-      <%= render "llm_cost_tracker/shared/spend_chart", series: @value_points %>
+      <%= render "llm_cost_tracker/shared/spend_chart", series: @value_points, comparison_series: [] %>
     </section>
   <% end %>
+
 <% else %>
-<section class="lct-panel lct-toolbar">
-  <div class="lct-toolbar-head">
-    <div>
-      <p class="lct-muted"><%= link_to "← All tag keys", tags_path(current_query) %></p>
-      <h2 class="lct-section-title">Tag: <code class="lct-code"><%= params[:key] %></code></h2>
-    </div>
-  </div>
 
-  <%= render "llm_cost_tracker/shared/filters",
-             path: tag_path(params[:key]),
-             fields: %i[from to provider model],
-             reset_path: tag_path(params[:key]) %>
+  <p class="lct-breadcrumb-back"><%= link_to "← All tag keys", tags_path(current_query) %></p>
+  <h2 class="lct-page-title">Tag: <code class="lct-code-id"><%= params[:key] %></code></h2>
 
-  <%= render "llm_cost_tracker/shared/active_filters", chips: active_tag_filters, clear_path: tag_path(params[:key]) %>
+  <div class="lct-filter-row">
+    <%= render "llm_cost_tracker/shared/filter_pill_date", path: form_url %>
+    <%= render "llm_cost_tracker/shared/filter_pill_provider", path: form_url %>
+    <%= render "llm_cost_tracker/shared/filter_pill_model", path: form_url %>
 
-  <p class="lct-summary-row">
-    <span><strong><%= number(@breakdown.tagged_calls) %></strong> tagged calls</span>
-    <span><strong><%= percent(coverage_percent(@breakdown.tagged_calls, @breakdown.total_calls)) %></strong> coverage</span>
-    <span><strong><%= number(@breakdown.distinct_values) %></strong> distinct values</span>
-  </p>
+    <% if params[:provider].present? || params[:model].present? %>
+      <%= link_to "× Clear filters", tag_path(params[:key], current_query(provider: nil, model: nil, page: nil)), class: "lct-filter-clear" %>
+    <% end %>
 
-  <% if @breakdown.distinct_values > @breakdown.rows.size %>
-    <p class="lct-toolbar-note">Showing top <%= number(@breakdown.limit) %> values by spend.</p>
-  <% end %>
-</section>
+    <span class="lct-filter-row-meta"><%= number_with_delimiter(@breakdown.tagged_calls) %> tagged call<%= "s" unless @breakdown.tagged_calls == 1 %> · <%= percent(coverage_percent(@breakdown.tagged_calls, @breakdown.total_calls)) %> coverage · <%= number_with_delimiter(@breakdown.distinct_values) %> distinct value<%= "s" unless @breakdown.distinct_values == 1 %></span>
+  </div>
 
-<% if @breakdown.rows.empty? %>
-  <section class="lct-panel lct-empty">
-    <h2 class="lct-state-title">No calls tagged with <%= params[:key] %></h2>
-    <p class="lct-state-copy">Values for this key will appear here once matching calls carry the tag in the current slice.</p>
-    <div class="lct-state-actions">
-      <%= link_to "Clear filters", tag_path(params[:key]), class: "lct-button lct-button-secondary" %>
+  <% if @breakdown.rows.empty? %>
+    <section class="lct-panel lct-empty">
+      <h2 class="lct-state-title">No calls tagged with <%= params[:key] %></h2>
+      <p class="lct-state-copy">Values for this key will appear here once matching calls carry the tag in the current slice.</p>
+    </section>
+  <% else %>
+    <div class="lct-stat-grid">
+      <div class="lct-stat">
+        <div class="lct-stat-head"><p class="lct-stat-label">Tagged calls</p></div>
+        <p class="lct-stat-value"><%= number_with_delimiter(@breakdown.tagged_calls) %></p>
+        <p class="lct-stat-foot">Rows that include <code class="lct-code-id"><%= params[:key] %></code></p>
+      </div>
+      <div class="lct-stat">
+        <div class="lct-stat-head"><p class="lct-stat-label">Coverage</p></div>
+        <p class="lct-stat-value"><%= percent(coverage_percent(@breakdown.tagged_calls, @breakdown.total_calls)) %></p>
+        <p class="lct-stat-foot"><%= number_with_delimiter(@breakdown.total_calls) %> total calls in this slice</p>
+      </div>
+      <div class="lct-stat">
+        <div class="lct-stat-head"><p class="lct-stat-label">Distinct values</p></div>
+        <p class="lct-stat-value"><%= number_with_delimiter(@breakdown.distinct_values) %></p>
+      </div>
     </div>
-  </section>
-<% else %>
-  <section class="lct-stat-grid lct-stat-grid-spaced">
-    <article class="lct-stat">
-      <p class="lct-stat-label">Tagged calls</p>
-      <p class="lct-stat-value"><%= number(@breakdown.tagged_calls) %></p>
-      <p class="lct-stat-copy">Rows that include <code class="lct-code"><%= params[:key] %></code></p>
-    </article>
-
-    <article class="lct-stat">
-      <p class="lct-stat-label">Coverage</p>
-      <p class="lct-stat-value"><%= percent(coverage_percent(@breakdown.tagged_calls, @breakdown.total_calls)) %></p>
-      <p class="lct-stat-copy"><%= number(@breakdown.total_calls) %> total calls in this slice</p>
-    </article>
 
-    <article class="lct-stat">
-      <p class="lct-stat-label">Distinct values</p>
-      <p class="lct-stat-value"><%= number(@breakdown.distinct_values) %></p>
-      <p class="lct-stat-copy">Unique values currently visible</p>
-    </article>
-  </section>
+    <% if @breakdown.distinct_values > @breakdown.rows.size %>
+      <div class="lct-alert lct-alert-info">
+        <span>Showing top <%= number_with_delimiter(@breakdown.limit) %> values by spend.</span>
+      </div>
+    <% end %>
 
-  <section class="lct-panel">
-    <div class="lct-table-wrap">
-      <table class="lct-table lct-table-compact">
+    <section class="lct-panel">
+      <table class="lct-tbl">
         <thead>
           <tr>
-            <th>Value</th>
-            <th class="lct-num">Calls</th>
+            <%= sortable_header("Value", "value") %>
+            <%= sortable_header("Calls", "calls", num: true) %>
             <th class="lct-num">Share</th>
-            <th class="lct-num">Total cost</th>
-            <th class="lct-num">Avg cost / call</th>
+            <%= sortable_header("Total cost", "cost", num: true, default: true) %>
+            <%= sortable_header("Avg cost / call", "avg_cost", num: true) %>
             <th></th>
           </tr>
         </thead>
         <tbody>
           <% @breakdown.rows.each do |row| %>
             <tr>
-              <td><code class="lct-code"><%= row.value %></code></td>
-              <td class="lct-num"><%= number(row.calls) %></td>
+              <td><code class="lct-code-id"><%= row.value %></code></td>
+              <td class="lct-num"><%= number_with_delimiter(row.calls) %></td>
               <td class="lct-num"><%= percent(row.share_percent) %></td>
               <td class="lct-num"><%= money(row.total_cost) %></td>
               <td class="lct-num"><%= money(row.average_cost_per_call) %></td>
-              <td>
+              <td class="lct-num">
                 <% if row.value == "(untagged)" %>
-                  <span class="lct-muted">n/a</span>
+                  <span class="lct-num-muted">n/a</span>
                 <% else %>
-                  <%= link_to "Trend", tag_path(params[:key], current_query.merge(tag_value: row.value)), class: "lct-button lct-button-secondary lct-button-compact" %>
-                  <%= link_to "Calls", calls_path(calls_query_for_tag(key: params[:key], value: row.value)), class: "lct-button lct-button-secondary lct-button-compact" %>
+                  <%= link_to "Trend", tag_path(params[:key], current_query.merge(tag_value: row.value)), class: "lct-page-link" %>
+                  <%= link_to "Calls", calls_path(calls_query_for_tag(key: params[:key], value: row.value)), class: "lct-page-link" %>
                 <% end %>
               </td>
             </tr>
           <% end %>
         </tbody>
       </table>
-    </div>
-  </section>
-<% end %>
+    </section>
+  <% end %>
 <% end %>

data/config/routes.rb

@@ -6,9 +6,9 @@ LlmCostTracker::Engine.routes.draw do
   resources :models, only: :index
   resources :tags, only: %i[index show], param: :key, format: false
   get "data_quality", to: "data_quality#index", as: :data_quality
-  get "reconciliation", to: "reconciliation#index", as: :reconciliation
-  post "reconciliation/import", to: "reconciliation#trigger_import", as: :reconciliation_import
+  get "pricing", to: "pricing#index", as: :pricing
 
   get "assets/#{LlmCostTracker::Assets::STYLESHEET_FILENAME}",
-      to: "assets#stylesheet", as: :stylesheet
+      to: "assets#stylesheet",
+as: :stylesheet
 end