llm_cost_tracker 0.14.1 → 0.15.0

data/app/controllers/llm_cost_tracker/models_controller.rb

@@ -5,13 +5,11 @@ module LlmCostTracker
     MAX_ROWS = 200
 
     def index
-      @sort = params[:sort].to_s
-      @dir = params[:dir].to_s
       @rows = Dashboard::TopModels.call(
         scope: Dashboard::Filter.call(params: params),
         limit: MAX_ROWS,
-        sort: @sort,
-        direction: @dir
+        sort: params[:sort].to_s,
+        direction: params[:dir].to_s
       )
     end
   end

data/app/controllers/llm_cost_tracker/pricing_controller.rb

@@ -4,13 +4,24 @@ module LlmCostTracker
   class PricingController < ApplicationController
     def index
       @overview = Dashboard::PricingOverview.call
-      requested = params[:source].to_s.to_sym
-      @active_source = @overview.fetch(:sources).key?(requested) ? requested : @overview.fetch(:effective_source)
+      @active_source = requested_source || @overview.fetch(:effective_source)
       @source_data = @overview.fetch(:sources).fetch(@active_source)
       @provider_filter = Dashboard::Params.scalar(params[:provider], :provider).presence
-      @rows = @source_data.fetch(:rows)
-      @rows = @rows.select { |row| row.provider == @provider_filter } if @provider_filter
       @providers = @source_data.fetch(:rows).map(&:provider).compact.uniq.sort
+      @rows = provider_rows(@source_data.fetch(:rows))
+    end
+
+    private
+
+    def requested_source
+      source = params[:source].to_s.to_sym
+      source if @overview.fetch(:sources).key?(source)
+    end
+
+    def provider_rows(rows)
+      return rows unless @provider_filter
+
+      rows.select { |row| row.provider == @provider_filter }
     end
   end
 end

data/app/controllers/llm_cost_tracker/tags_controller.rb

@@ -10,21 +10,29 @@ module LlmCostTracker
       @value = Dashboard::Params.scalar(params[:tag_value], :tag_value)
 
       if @value.empty?
-        @sort = params[:sort].to_s
-        @dir = params[:dir].to_s
-        @breakdown = Dashboard::TagBreakdown.call(
-          scope: Dashboard::Filter.call(params: params), key: params[:key], sort: @sort, direction: @dir
-        )
+        assign_breakdown
       else
-        @key = LlmCostTracker::Tags::Key.validate!(
-          params[:key],
-          error_class: LlmCostTracker::InvalidFilterError
-        )
-        value_scope = Dashboard::Filter.call(params: params, tags: { @key => @value })
-        @value_total_cost = value_scope.sum(:total_cost).to_f
-        @value_calls = value_scope.count
-        @value_points = Dashboard::TimeSeries.call(scope: value_scope)
+        assign_value_trend
       end
     end
+
+    private
+
+    def assign_breakdown
+      @breakdown = Dashboard::TagBreakdown.call(
+        scope: Dashboard::Filter.call(params: params),
+        key: params[:key],
+        sort: params[:sort].to_s,
+        direction: params[:dir].to_s
+      )
+    end
+
+    def assign_value_trend
+      @key = LlmCostTracker::Tags::Key.validate!(params[:key], error_class: LlmCostTracker::InvalidFilterError)
+      value_scope = Dashboard::Filter.call(params: params, tags: { @key => @value })
+      @value_total_cost = value_scope.sum(:total_cost).to_f
+      @value_calls = value_scope.count
+      @value_points = Dashboard::TimeSeries.call(scope: value_scope, from: @from_date, to: @to_date)
+    end
   end
 end

data/app/helpers/llm_cost_tracker/application_helper.rb

@@ -6,6 +6,12 @@ module LlmCostTracker
   module ApplicationHelper
     TAG_VALUE_SUMMARY_BYTES = 80
     TAG_TOOLTIP_BYTES = 512
+    PRICING_STATUS_LABELS = {
+      LlmCostTracker::Charges::CostStatus::COMPLETE => "Estimated",
+      LlmCostTracker::Charges::CostStatus::FREE => "Free",
+      LlmCostTracker::Charges::CostStatus::PARTIAL => "Partial"
+    }.freeze
+    NEUTRAL_DELTA_CLASS = "lct-delta-badge lct-delta-neutral"
 
     include DashboardFilterOptionsHelper
     include DashboardQueryHelper
@@ -13,6 +19,7 @@ module LlmCostTracker
     include PaginationHelper
     include TokenUsageHelper
     include InlineStyleHelper
+    include SortableTableHelper
 
     def dashboard_section
       path = request.path.to_s
@@ -25,11 +32,13 @@ module LlmCostTracker
       :overview
     end
 
-    def coverage_percent(numerator, denominator)
-      denominator = denominator.to_f
-      return 0.0 unless denominator.positive?
+    def sidebar_link_options(section)
+      active = dashboard_section == section
+      { class: active ? "lct-sidebar-link lct-active" : "lct-sidebar-link", aria: active ? { current: "page" } : {} }
+    end
 
-      (numerator.to_f / denominator) * 100.0
+    def coverage_percent(numerator, denominator)
+      Dashboard::Percent.of(numerator, denominator)
     end
 
     def money(value, currency: LlmCostTracker::DEFAULT_CURRENCY)
@@ -54,11 +63,7 @@ module LlmCostTracker
     def pricing_status(call)
       return "Unknown" if call.total_cost.nil?
 
-      {
-        LlmCostTracker::Charges::CostStatus::COMPLETE => "Estimated",
-        LlmCostTracker::Charges::CostStatus::FREE => "Free",
-        LlmCostTracker::Charges::CostStatus::PARTIAL => "Partial"
-      }.fetch(call.cost_status, "Unknown")
+      PRICING_STATUS_LABELS.fetch(call.cost_status, "Unknown")
     end
 
     def percent(value)
@@ -66,22 +71,11 @@ module LlmCostTracker
     end
 
     def delta_badge(delta_percent, mode: :cost)
-      return { text: "n/a vs. prior", css_class: "lct-delta-badge lct-delta-neutral" } if delta_percent.nil?
-
-      rounded = delta_percent.round(1)
-      return { text: "0.0% vs. prior", css_class: "lct-delta-badge lct-delta-neutral" } if rounded.zero?
+      rounded = delta_percent&.round(1)
+      return { text: "n/a vs. prior", css_class: NEUTRAL_DELTA_CLASS } if rounded.nil?
+      return { text: "0.0% vs. prior", css_class: NEUTRAL_DELTA_CLASS } if rounded.zero?
 
-      sign = rounded.positive? ? "+" : ""
-      text = "#{sign}#{format('%.1f', rounded)}% vs. prior"
-      css_class = if mode == :neutral
-                    "lct-delta-badge lct-delta-neutral"
-                  elsif rounded.positive?
-                    "lct-delta-badge lct-delta-up"
-                  else
-                    "lct-delta-badge lct-delta-down"
-                  end
-
-      { text: text, css_class: css_class }
+      { text: "#{format('%+.1f', rounded)}% vs. prior", css_class: delta_badge_class(rounded, mode) }
     end
 
     def bar_width(value, max)
@@ -120,13 +114,10 @@ module LlmCostTracker
     end
 
     def tag_chip_entries(tags, limit: 3)
-      normalized = normalized_tags(tags)
-      return [] if normalized.empty?
-
-      visible = normalized.first(limit).map do |key, value|
-        { key: key.to_s, value: tag_value_summary(value) }
+      visible = tags.first(limit).map do |key, value|
+        { key: key.to_s, value: truncate_text(value.to_s, TAG_VALUE_SUMMARY_BYTES) }
       end
-      visible << { more: normalized.size - limit } if normalized.size > limit
+      visible << { more: tags.size - limit } if tags.size > limit
       visible
     end
 
@@ -134,33 +125,12 @@ module LlmCostTracker
       truncate_text(safe_json(tags), TAG_TOOLTIP_BYTES)
     end
 
-    def current_query(overrides = {})
-      request.query_parameters.symbolize_keys.slice(*LlmCostTracker::Dashboard::Params::QUERY_KEYS).merge(overrides)
-    end
-
-    def calls_query_for_model(provider:, model:)
-      current_query(provider: provider, model: model, page: nil, per: nil, format: nil)
-    end
-
     private
 
-    def normalized_tags(tags)
-      return tags.transform_keys(&:to_s) if tags.is_a?(Hash)
-
-      JSON.parse(tags || "{}")
-    rescue JSON::ParserError, TypeError
-      {}
-    end
-
-    def tag_value_summary(value)
-      string = case value
-               when Hash, Array
-                 JSON.generate(value)
-               else
-                 value.to_s
-               end
+    def delta_badge_class(rounded, mode)
+      return NEUTRAL_DELTA_CLASS if mode == :neutral
 
-      truncate_text(string, TAG_VALUE_SUMMARY_BYTES)
+      rounded.positive? ? "lct-delta-badge lct-delta-up" : "lct-delta-badge lct-delta-down"
     end
 
     def truncate_text(string, limit)

data/app/helpers/llm_cost_tracker/chart_helper.rb

@@ -2,17 +2,27 @@
 
 module LlmCostTracker
   module ChartHelper
+    CHART_OPEN_TAG = "<svg class=\"lct-chart\" viewBox=\"0 0 %<width>s %<height>s\" " \
+                     "preserveAspectRatio=\"xMidYMid meet\" role=\"img\" aria-label=\"Daily spend trend\">"
+    CHART_GRADIENT = "<defs><linearGradient id=\"lct-chart-grad\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">" \
+                     "<stop offset=\"0%\" stop-color=\"var(--lct-accent)\" stop-opacity=\"0.28\"/>" \
+                     "<stop offset=\"100%\" stop-color=\"var(--lct-accent)\" stop-opacity=\"0.02\"/>" \
+                     "</linearGradient></defs>"
+
     def spend_chart_svg(points, comparison_points: nil, height: 180, y_ticks: 3)
       return nil if points.blank?
 
-      cfg = chart_config(points, comparison_points, height, y_ticks)
-      parts = [chart_svg_open(cfg), "<title>Daily spend trend</title>", chart_area_gradient_def]
-      parts.concat(chart_grid_and_axis(cfg))
-      parts << chart_paths(cfg)
-      parts.concat(chart_dots(cfg))
-      parts.concat(chart_x_labels(cfg))
-      parts << "</svg>"
-      parts.join.html_safe
+      chart = Dashboard::SpendChart.new(points, comparison_points: comparison_points, height: height, y_ticks: y_ticks)
+      [
+        format(CHART_OPEN_TAG, width: Dashboard::SpendChart::WIDTH, height: chart.height),
+        "<title>Daily spend trend</title>",
+        CHART_GRADIENT,
+        *(0..chart.y_ticks).map { |index| chart_tick(chart, index) },
+        chart_paths(chart),
+        *chart.coords.each_index.map { |index| chart_dot(chart, index) },
+        *chart.label_indexes.map { |index| chart_x_label(chart, index) },
+        "</svg>"
+      ].join.html_safe
     end
 
     private
@@ -21,129 +31,64 @@ module LlmCostTracker
       format("%.2f", value)
     end
 
-    def chart_config(points, comparison_points, height, y_ticks)
-      width = 1180
-      pad = { top: 16, right: 16, bottom: 28, left: 56 }
-      plot_w = width - pad[:left] - pad[:right]
-      plot_h = height - pad[:top] - pad[:bottom]
-      all_costs = points.map { |p| p[:cost].to_f } + Array(comparison_points).map { |p| p[:cost].to_f }
-      max_cost = [all_costs.max.to_f, 0.0001].max
-      coords = chart_coords(points, pad, plot_w, plot_h, max_cost)
-      comparison_coords = chart_coords(comparison_points, pad, plot_w, plot_h, max_cost) if comparison_points.present?
-
-      peak_index = points.each_with_index.max_by { |point, _| point[:cost].to_f }&.last
-      { width: width, height: height, pad: pad, plot_w: plot_w, plot_h: plot_h,
-        max_cost: max_cost, n: points.size, y_ticks: y_ticks, points: points, coords: coords,
-        comparison_points: comparison_points, comparison_coords: comparison_coords,
-        peak_index: peak_index }
-    end
-
-    def chart_coords(points, pad, plot_w, plot_h, max_cost)
-      n = points.size
-      step = n > 1 ? plot_w.to_f / (n - 1) : 0.0
-
-      points.each_with_index.map do |point, idx|
-        x = pad[:left] + (idx * step)
-        y = pad[:top] + plot_h - ((point[:cost].to_f / max_cost) * plot_h)
-        [x, y]
-      end
-    end
-
-    def chart_svg_open(cfg)
-      attrs = [
-        %(class="lct-chart"),
-        %(viewBox="0 0 #{cfg[:width]} #{cfg[:height]}"),
-        %(preserveAspectRatio="xMidYMid meet"),
-        %(role="img"),
-        %(aria-label="Daily spend trend")
-      ].join(" ")
-      "<svg #{attrs}>"
-    end
-
-    def chart_grid_and_axis(cfg)
-      (0..cfg[:y_ticks]).map { |i| chart_tick_line(cfg, i) }
+    def chart_element(name, attributes, content = nil)
+      attrs = attributes.map { |key, value| %( #{key}="#{value}") }.join
+      content.nil? ? "<#{name}#{attrs}/>" : "<#{name}#{attrs}>#{content}</#{name}>"
     end
 
-    def chart_tick_line(cfg, idx)
-      pad = cfg[:pad]
-      right_x = chart_fmt(pad[:left] + cfg[:plot_w])
-      left_x = chart_fmt(pad[:left])
-      text_x = chart_fmt(pad[:left] - 8)
-      value = cfg[:max_cost] * (cfg[:y_ticks] - idx).to_f / cfg[:y_ticks]
-      y = chart_fmt(pad[:top] + (cfg[:plot_h] * idx.to_f / cfg[:y_ticks]))
-      label_y = chart_fmt(pad[:top] + (cfg[:plot_h] * idx.to_f / cfg[:y_ticks]) + 3)
-      grid = %(<line class="lct-chart-grid" x1="#{left_x}" x2="#{right_x}" y1="#{y}" y2="#{y}"/>)
-      label = format("%.2f", value)
-      text = %(<text class="lct-chart-axis" x="#{text_x}" y="#{label_y}" text-anchor="end">$#{label}</text>)
-      "#{grid}#{text}"
+    def chart_tick(chart, index)
+      tick_y = chart.tick_y(index)
+      y = chart_fmt(tick_y)
+      grid = { class: "lct-chart-grid", x1: chart_fmt(chart.left), x2: chart_fmt(chart.right), y1: y, y2: y }
+      label = { class: "lct-chart-axis", x: chart_fmt(chart.left - 8), y: chart_fmt(tick_y + 3), "text-anchor": "end" }
+      chart_element(:line, grid) + chart_element(:text, label, "$#{chart_fmt(chart.tick_value(index))}")
     end
 
-    def chart_paths(cfg)
-      line = build_line_path(cfg[:coords])
-      base_y = cfg[:pad][:top] + cfg[:plot_h]
-      area = build_area_path(cfg[:coords], cfg, base_y, line)
-      secondary = if cfg[:comparison_coords].present?
-                    %(<path class="lct-chart-line-secondary" d="#{build_line_path(cfg[:comparison_coords])}"/>)
-                  else
-                    ""
-                  end
-      %(<path class="lct-chart-area" d="#{area}"/>#{secondary}<path class="lct-chart-line" d="#{line}"/>)
+    def chart_paths(chart)
+      line = chart_line_path(chart.coords)
+      paths = [chart_element(:path, class: "lct-chart-area", d: chart_area_path(chart, line))]
+      if chart.comparison_coords
+        paths << chart_element(:path, class: "lct-chart-line-secondary", d: chart_line_path(chart.comparison_coords))
+      end
+      paths << chart_element(:path, class: "lct-chart-line", d: line)
+      paths.join
     end
 
-    def build_line_path(coords)
-      coords.each_with_index.map do |(x, y), idx|
-        "#{idx.zero? ? 'M' : 'L'}#{chart_fmt(x)},#{chart_fmt(y)}"
+    def chart_line_path(coords)
+      coords.each_with_index.map do |(x, y), index|
+        "#{index.zero? ? 'M' : 'L'}#{chart_fmt(x)},#{chart_fmt(y)}"
       end.join(" ")
     end
 
-    def build_area_path(coords, cfg, base_y, line)
-      if coords.size == 1
-        x, y = coords.first
-        left = chart_fmt(cfg[:pad][:left])
-        right = chart_fmt(cfg[:pad][:left] + cfg[:plot_w])
-        "M#{left},#{chart_fmt(base_y)} L#{chart_fmt(x)},#{chart_fmt(y)} L#{right},#{chart_fmt(base_y)} Z"
-      else
-        first_x = chart_fmt(coords.first[0])
-        last_x = chart_fmt(coords.last[0])
-        "#{line} L#{last_x},#{chart_fmt(base_y)} L#{first_x},#{chart_fmt(base_y)} Z"
-      end
-    end
+    def chart_area_path(chart, line)
+      coords = chart.coords
+      base = chart_fmt(chart.baseline)
+      return "#{line} L#{chart_fmt(coords.last[0])},#{base} L#{chart_fmt(coords.first[0])},#{base} Z" if coords.size > 1
 
-    def chart_dots(cfg)
-      cfg[:coords].each_with_index.map { |(pt_x, pt_y), idx| chart_dot(cfg, pt_x, pt_y, idx) }
+      x, y = coords.first
+      "M#{chart_fmt(chart.left)},#{base} L#{chart_fmt(x)},#{chart_fmt(y)} L#{chart_fmt(chart.right)},#{base} Z"
     end
 
-    def chart_dot(cfg, pt_x, pt_y, idx)
-      point = cfg[:points][idx]
+    def chart_dot(chart, index)
+      point = chart.points[index]
+      x, y = chart.coords[index]
+      peak = index == chart.peak_index
+      circle = { class: peak ? "lct-chart-peak" : "lct-chart-dot", cx: chart_fmt(x), cy: chart_fmt(y), r: peak ? 4 : 3 }
       title = ERB::Util.html_escape("#{point[:label]}: #{money(point[:cost])}")
-      peak = idx == cfg[:peak_index]
-      klass = peak ? "lct-chart-peak" : "lct-chart-dot"
-      radius = peak ? 4 : 3
-      circle = %(<circle class="#{klass}" cx="#{chart_fmt(pt_x)}" cy="#{chart_fmt(pt_y)}" r="#{radius}"/>)
-      "<g>#{circle}<title>#{title}</title></g>"
+      "<g>#{chart_element(:circle, circle)}<title>#{title}</title></g>"
     end
 
-    def chart_area_gradient_def
-      "<defs><linearGradient id=\"lct-chart-grad\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">" \
-        "<stop offset=\"0%\" stop-color=\"var(--lct-accent)\" stop-opacity=\"0.28\"/>" \
-        "<stop offset=\"100%\" stop-color=\"var(--lct-accent)\" stop-opacity=\"0.02\"/>" \
-        "</linearGradient></defs>"
+    def chart_x_label(chart, index)
+      x, = chart.coords[index]
+      anchor = chart_label_anchor(chart, index)
+      attributes = { class: "lct-chart-axis", x: chart_fmt(x), y: chart_fmt(chart.height - 8), "text-anchor": anchor }
+      chart_element(:text, attributes, ERB::Util.html_escape(chart.points[index][:label]))
     end
 
-    def chart_x_labels(cfg)
-      indexes = cfg[:n] <= 2 ? (0...cfg[:n]).to_a : [0, cfg[:n] / 2, cfg[:n] - 1].uniq
-      label_y = chart_fmt(cfg[:height] - 8)
-      indexes.map { |idx| chart_x_label(cfg, idx, label_y) }
-    end
+    def chart_label_anchor(chart, index)
+      return "start" if index.zero?
 
-    def chart_x_label(cfg, idx, label_y)
-      pt_x, = cfg[:coords][idx]
-      label = ERB::Util.html_escape(cfg[:points][idx][:label])
-      anchor = if idx.zero? then "start"
-               elsif idx == cfg[:n] - 1 then "end"
-               else "middle"
-               end
-      %(<text class="lct-chart-axis" x="#{chart_fmt(pt_x)}" y="#{label_y}" text-anchor="#{anchor}">#{label}</text>)
+      index == chart.points.size - 1 ? "end" : "middle"
     end
   end
 end

data/app/helpers/llm_cost_tracker/dashboard_query_helper.rb

@@ -2,23 +2,33 @@
 
 module LlmCostTracker
   module DashboardQueryHelper
-    def dashboard_filter_path(query)
-      cleaned = clean_dashboard_query(query)
-      return request.path if cleaned.blank?
+    EMPTY_QUERY_VALUES = [nil, {}, []].freeze
 
-      "#{request.path}?#{cleaned.to_query}"
+    def current_query(overrides = {})
+      request.query_parameters.symbolize_keys.slice(*Dashboard::Params::QUERY_KEYS).merge(overrides)
+    end
+
+    def calls_query_for_model(provider:, model:)
+      current_query(provider: provider, model: model, page: nil, per: nil, format: nil)
     end
 
     def calls_query_for_tag(key:, value:)
       query = current_query(page: nil, per: nil, format: nil)
-      tags = LlmCostTracker::Dashboard::Params.tag_query(query[:tag])
+      tags = Dashboard::Params.tag_query(query[:tag])
       query[:tag] = tags.merge(key.to_s => value.to_s)
       query
     end
 
     def tag_drilldown_allowed?(key)
-      tags = LlmCostTracker::Dashboard::Params.tag_query(current_query[:tag])
-      tags.except(key.to_s).size < LlmCostTracker::Dashboard::Filter::MAX_TAG_FILTERS
+      tags = Dashboard::Params.tag_query(current_query[:tag])
+      tags.except(key.to_s).size < Dashboard::Filter::MAX_TAG_FILTERS
+    end
+
+    def dashboard_filter_path(query)
+      cleaned = clean_dashboard_query(query)
+      return request.path if cleaned.blank?
+
+      "#{request.path}?#{cleaned.to_query}"
     end
 
     def hidden_query_fields(query, prefix: nil)
@@ -35,19 +45,22 @@ module LlmCostTracker
     private
 
     def clean_dashboard_query(value)
-      if value.is_a?(Hash) || value.try(:to_unsafe_h).is_a?(Hash)
-        return LlmCostTracker::Dashboard::Params.to_hash(value).each_with_object({}) do |(key, nested), cleaned|
-          nested = clean_dashboard_query(nested)
-          next if nested.nil? || nested == {} || nested == []
-
-          cleaned[key] = nested
-        end
+      case value
+      when Array then value.filter_map { |item| clean_dashboard_query(item) }.presence
+      when String then value.strip.presence
+      else query_hash?(value) ? clean_query_hash(value) : value
       end
+    end
 
-      return value.filter_map { |item| clean_dashboard_query(item) }.presence if value.is_a?(Array)
-      return value.strip.presence if value.is_a?(String)
+    def clean_query_hash(hash)
+      Dashboard::Params.to_hash(hash).each_with_object({}) do |(key, value), cleaned|
+        value = clean_dashboard_query(value)
+        cleaned[key] = value unless EMPTY_QUERY_VALUES.include?(value)
+      end
+    end
 
-      value
+    def query_hash?(value)
+      value.is_a?(Hash) || value.try(:to_unsafe_h).is_a?(Hash)
     end
   end
 end

data/app/helpers/llm_cost_tracker/sortable_table_helper.rb

@@ -2,40 +2,33 @@
 
 module LlmCostTracker
   module SortableTableHelper
+    SORT_ARROWS = { "asc" => "▲", "desc" => "▼" }.freeze
+    ARIA_SORT = { "asc" => "ascending", "desc" => "descending" }.freeze
+
     def sortable_header(label, column, num: false, default: false)
-      state = sortable_state(column, num: num, default: default)
-      classes = ["lct-sortable"]
-      classes << "lct-num" if num
-      classes << "lct-sorted" if state[:active]
-
-      href = dashboard_filter_path(current_query(sort: column, dir: state[:next_dir], page: nil))
-      tag.th(class: classes.join(" "), "aria-sort": state[:aria_sort]) do
-        link_to(href) { safe_join([label, " ", tag.span(state[:arrow], class: "lct-sort-ind")]) }
+      natural = num ? "desc" : "asc"
+      direction = sorted_direction(column, natural, default)
+      classes = ["lct-sortable", ("lct-num" if num), ("lct-sorted" if direction)].compact
+
+      href = dashboard_filter_path(current_query(sort: column, dir: next_sort_direction(direction, natural), page: nil))
+      tag.th(class: classes.join(" "), "aria-sort": ARIA_SORT.fetch(direction, "none")) do
+        link_to(href) { safe_join([label, " ", tag.span(SORT_ARROWS.fetch(direction, "▼"), class: "lct-sort-ind")]) }
       end
     end
 
     private
 
-    def sortable_state(column, num:, default: false)
-      current_sort = params[:sort].presence || (default ? column : nil)
-      current_dir = Dashboard::Sort::DIRECTIONS.include?(params[:dir].to_s) ? params[:dir].to_s : nil
-      natural_dir = num ? "desc" : "asc"
-      active = current_sort == column
-      effective_dir = active ? (current_dir || natural_dir) : natural_dir
-      flipped = effective_dir == "asc" ? "desc" : "asc"
-
-      {
-        active: active,
-        next_dir: active ? flipped : natural_dir,
-        arrow: active && effective_dir == "asc" ? "▲" : "▼",
-        aria_sort: sortable_aria(active, effective_dir)
-      }
+    def sorted_direction(column, natural, default)
+      return unless (params[:sort].presence || (column if default)) == column
+
+      requested = params[:dir].to_s
+      Dashboard::Sort::DIRECTIONS.include?(requested) ? requested : natural
     end
 
-    def sortable_aria(active, effective_dir)
-      return "none" unless active
+    def next_sort_direction(direction, natural)
+      return natural unless direction
 
-      effective_dir == "asc" ? "ascending" : "descending"
+      direction == "asc" ? "desc" : "asc"
     end
   end
 end

data/app/helpers/llm_cost_tracker/token_usage_helper.rb

@@ -33,41 +33,51 @@ module LlmCostTracker
     }.freeze
 
     def token_usage_stack_components
-      token_usage_display_components(labels: COMPONENT_LABELS).select do |component|
-        component.fetch(:cost_key)
+      LlmCostTracker::Usage::Catalog.token_priced.map do |component|
+        token_key = component.token_key
+        {
+          token_key: token_key,
+          price_key: component.key,
+          label: COMPONENT_LABELS.fetch(token_key),
+          css_class: STACK_CLASSES[token_key]
+        }
       end
     end
 
     def call_line_item_costs_by_component(call)
-      call.line_items.each_with_object({}) do |line_item, accumulator|
-        component = LlmCostTracker::Usage::Catalog.token_priced_for(
-          kind: line_item.kind, direction: line_item.direction, cache_state: line_item.cache_state
-        )
-        accumulator[component.key] = line_item.cost if component && line_item.cost
+      LlmCostTracker::Usage::Catalog.costs_by_component(
+        call.line_items.map { |item| [item.kind, item.direction, item.cache_state, item.cost] }
+      )
+    end
+
+    def call_token_segments(call)
+      token_usage_stack_components.map do |component|
+        value = call[component.fetch(:token_key)]
+        token_stack_segment(component, value, number_with_delimiter(value))
+      end
+    end
+
+    def call_cost_segments(call)
+      costs = call_line_item_costs_by_component(call)
+      token_usage_stack_components.map do |component|
+        value = costs[component.fetch(:price_key)]
+        token_stack_segment(component, value, optional_money(value))
       end
     end
 
+    def call_service_line_items(call)
+      call.line_items.reject { |item| item.unit == "token" }.sort_by(&:position)
+    end
+
     private
 
-    def token_usage_display_components(labels:)
-      LlmCostTracker::Usage::Catalog.token_priced.map do |component|
-        token_key = component.token_key
-        {
-          token_key: token_key,
-          cost_key: component.cost_key,
-          price_key: component.key,
-          label: labels.fetch(token_key),
-          css_class: STACK_CLASSES[token_key]
-        }
-      end + [
-        {
-          token_key: :hidden_output_tokens,
-          cost_key: nil,
-          price_key: nil,
-          label: labels.fetch(:hidden_output_tokens),
-          css_class: nil
-        }
-      ]
+    def token_stack_segment(component, value, formatted_value)
+      {
+        label: component.fetch(:label),
+        value: value,
+        formatted_value: formatted_value,
+        css_class: component.fetch(:css_class)
+      }
     end
   end
 end