llm_cost_tracker 0.9.0 → 0.11.0

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

@@ -4,21 +4,25 @@ module LlmCostTracker
   module Dashboard
     class TagBreakdown
       DEFAULT_LIMIT = 100
+      SORT_OPTIONS = %w[value calls cost avg_cost].freeze
+      DEFAULT_DIRECTIONS = { "value" => "asc", "calls" => "desc", "cost" => "desc", "avg_cost" => "desc" }.freeze
       Row = Data.define(:value, :calls, :total_cost, :average_cost_per_call, :share_percent)
 
       class << self
-        def call(key:, scope: LlmCostTracker::Call.all, limit: DEFAULT_LIMIT)
-          new(scope: scope, key: key, limit: limit)
+        def call(key:, scope: LlmCostTracker::Call.all, limit: DEFAULT_LIMIT, sort: "cost", direction: nil)
+          new(scope: scope, key: key, limit: limit, sort: sort, direction: direction)
         end
       end
 
       attr_reader :limit
 
-      def initialize(scope:, key:, limit:)
+      def initialize(scope:, key:, limit:, sort: "cost", direction: nil)
         @scope = scope
         @key = LlmCostTracker::Tags::Key.validate!(key, error_class: LlmCostTracker::InvalidFilterError)
         limit = limit.to_i
         @limit = limit.positive? ? [limit, DEFAULT_LIMIT].min : DEFAULT_LIMIT
+        @sort = SORT_OPTIONS.include?(sort.to_s) ? sort.to_s : "cost"
+        @direction = Sort::DIRECTIONS.include?(direction.to_s) ? direction.to_s : DEFAULT_DIRECTIONS[@sort]
       end
 
       def rows
@@ -51,7 +55,7 @@ module LlmCostTracker
 
       private
 
-      attr_reader :scope, :key
+      attr_reader :scope, :key, :sort, :direction
 
       def summary_counts
         @summary_counts ||= scope.klass.find_by_sql(summary_sql).first
@@ -67,11 +71,21 @@ module LlmCostTracker
           INNER JOIN #{call_tag_table} t ON t.llm_cost_tracker_call_id = sub.id AND t.#{quote_column('key')} = #{quoted_key}
           WHERE #{tag_present_predicate}
           GROUP BY #{tag_value_column}
-          ORDER BY total_cost DESC, calls DESC, value ASC
+          ORDER BY #{order_clause}
           LIMIT #{limit}
         SQL
       end
 
+      def order_clause
+        dir = direction.upcase
+        case sort
+        when "value"    then "#{tag_value_column} #{dir}"
+        when "calls"    then "COUNT(*) #{dir}, total_cost DESC"
+        when "avg_cost" then "average_cost_per_call #{dir}, total_cost DESC"
+        else "total_cost #{dir}, calls DESC, value ASC"
+        end
+      end
+
       def summary_sql
         <<~SQL.squish
           SELECT COUNT(*) AS total_calls,

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

@@ -4,45 +4,60 @@ module LlmCostTracker
   module Dashboard
     class TopModels
       DEFAULT_LIMIT = 5
-      SORT_OPTIONS = %w[cost calls avg_cost latency].freeze
+      SORT_OPTIONS = %w[cost calls avg_cost latency tokens provider name].freeze
       DEFAULT_SORT = "cost"
+      DEFAULT_DIRECTIONS = {
+        "provider" => "asc",
+        "name" => "asc",
+        "calls" => "desc",
+        "tokens" => "desc",
+        "latency" => "desc",
+        "avg_cost" => "desc",
+        "cost" => "desc"
+      }.freeze
+      ORDER_NODES = {
+        %w[provider asc]  => [{ provider: :asc, model: :asc }],
+        %w[provider desc] => [{ provider: :desc, model: :asc }],
+        %w[name asc]      => [{ model: :asc }],
+        %w[name desc]     => [{ model: :desc }],
+        %w[calls asc]     => [Arel.sql("COUNT(*) ASC")],
+        %w[calls desc]    => [Arel.sql("COUNT(*) DESC")],
+        %w[tokens asc]    => [Arel.sql("COALESCE(SUM(total_tokens), 0) ASC")],
+        %w[tokens desc]   => [Arel.sql("COALESCE(SUM(total_tokens), 0) DESC")],
+        %w[avg_cost asc]  => [Arel.sql("COALESCE(SUM(total_cost), 0) / NULLIF(COUNT(*), 0) ASC")],
+        %w[avg_cost desc] => [Arel.sql("COALESCE(SUM(total_cost), 0) / NULLIF(COUNT(*), 0) DESC")],
+        %w[latency asc]   => [Arel.sql("CASE WHEN AVG(latency_ms) IS NULL THEN 1 ELSE 0 END ASC, " \
+                                       "AVG(latency_ms) ASC")],
+        %w[latency desc]  => [Arel.sql("CASE WHEN AVG(latency_ms) IS NULL THEN 1 ELSE 0 END ASC, " \
+                                       "AVG(latency_ms) DESC")],
+        %w[cost asc]      => [Arel.sql("COALESCE(SUM(total_cost), 0) ASC")],
+        %w[cost desc]     => [Arel.sql("COALESCE(SUM(total_cost), 0) DESC")]
+      }.freeze
 
       class << self
-        def call(scope: LlmCostTracker::Call.all, limit: DEFAULT_LIMIT, sort: DEFAULT_SORT)
-          new(scope: scope, limit: limit, sort: sort).rows
+        def call(scope: LlmCostTracker::Call.all, limit: DEFAULT_LIMIT, sort: DEFAULT_SORT, direction: nil)
+          new(scope: scope, limit: limit, sort: sort, direction: direction).rows
         end
       end
 
-      def initialize(scope:, limit:, sort: DEFAULT_SORT)
+      def initialize(scope:, limit:, sort: DEFAULT_SORT, direction: nil)
         @scope = scope
         @limit = limit
         @sort = SORT_OPTIONS.include?(sort.to_s) ? sort.to_s : DEFAULT_SORT
+        @direction = Sort::DIRECTIONS.include?(direction.to_s) ? direction.to_s : DEFAULT_DIRECTIONS[@sort]
       end
 
       def rows
         scope
           .group(:provider, :model)
           .select(selects)
-          .order(Arel.sql(order_sql))
+          .order(*ORDER_NODES.fetch([sort, direction]))
           .then { |r| limit ? r.limit(limit) : r }
       end
 
       private
 
-      attr_reader :scope, :limit, :sort
-
-      def order_sql
-        case sort
-        when "calls"
-          "COUNT(*) DESC"
-        when "avg_cost"
-          "COALESCE(SUM(total_cost), 0) / NULLIF(COUNT(*), 0) DESC"
-        when "latency"
-          "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
+      attr_reader :scope, :limit, :sort, :direction
 
       def selects
         columns = [

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

@@ -7,28 +7,91 @@
     <title>LLM Cost Tracker</title>
     <%= stylesheet_link_tag stylesheet_path %>
     <%= inline_style_block %>
+    <script nonce="<%= dashboard_csp_nonce %>">
+      (function () {
+        try {
+          var v = localStorage.getItem("lct_theme");
+          if (v === "dark" || v === "light") document.documentElement.setAttribute("data-theme", v);
+        } catch (e) {}
+        document.addEventListener("DOMContentLoaded", function () {
+          var btn = document.querySelector("[data-lct-theme-toggle]");
+          if (btn) {
+            btn.addEventListener("click", function () {
+              var cur = document.documentElement.getAttribute("data-theme");
+              if (!cur) {
+                cur = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+              }
+              var next = cur === "dark" ? "light" : "dark";
+              document.documentElement.setAttribute("data-theme", next);
+              try { localStorage.setItem("lct_theme", next); } catch (e) {}
+            });
+          }
+          document.addEventListener("keydown", function (e) {
+            if (e.key !== "Escape") return;
+            var open = document.querySelector("details.lct-filter-pop[open]");
+            if (open) { open.removeAttribute("open"); e.preventDefault(); }
+          });
+        });
+      })();
+    </script>
   </head>
   <body class="lct-body">
     <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)) %>
-            <% if LlmCostTracker.reconciliation_enabled? %>
-              <%= link_to "Reconciliation", reconciliation_path, class: ("lct-active" if request.path.start_with?(reconciliation_path)) %>
+      <div class="lct-toolbar">
+        <%= link_to root_path, class: "lct-toolbar-brand" do %>
+          <span class="lct-brandmark"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 17l4-5 3 3 6-8 5 6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+          <span>LLM Cost Tracker</span>
+        <% end %>
+        <div class="lct-toolbar-right">
+          <button class="lct-theme-toggle" type="button" data-lct-theme-toggle aria-label="Toggle theme">
+            <svg class="lct-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+            <svg class="lct-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="lct-shell">
+        <aside class="lct-sidebar" aria-label="Dashboard">
+          <div class="lct-sidebar-inner">
+          <div class="lct-sidebar-section">Insights</div>
+          <%= link_to root_path, class: ("lct-sidebar-link lct-active" if dashboard_section == :overview) || "lct-sidebar-link", aria: (dashboard_section == :overview ? { current: "page" } : {}) do %>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
+            Overview
+          <% end %>
+          <%= link_to models_path, class: ("lct-sidebar-link lct-active" if dashboard_section == :models) || "lct-sidebar-link", aria: (dashboard_section == :models ? { current: "page" } : {}) do %>
+            <svg 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>
+            Models
+          <% end %>
+          <%= link_to calls_path, class: ("lct-sidebar-link lct-active" if dashboard_section == :calls) || "lct-sidebar-link", aria: (dashboard_section == :calls ? { current: "page" } : {}) do %>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            Calls
+          <% end %>
+          <%= link_to tags_path, class: ("lct-sidebar-link lct-active" if dashboard_section == :tags) || "lct-sidebar-link", aria: (dashboard_section == :tags ? { current: "page" } : {}) do %>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
+            Tags
+          <% end %>
+          <%= link_to data_quality_path, class: ("lct-sidebar-link lct-active" if dashboard_section == :data_quality) || "lct-sidebar-link", aria: (dashboard_section == :data_quality ? { current: "page" } : {}) do %>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+            Data Quality
+          <% end %>
+          <div class="lct-sidebar-section">Reference</div>
+          <%= link_to pricing_path, class: ("lct-sidebar-link lct-active" if dashboard_section == :pricing) || "lct-sidebar-link", aria: (dashboard_section == :pricing ? { current: "page" } : {}) do %>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
+            Pricing
+          <% end %>
+          <% if LlmCostTracker.reconciliation_enabled? %>
+            <%= link_to reconciliation_path, class: ("lct-sidebar-link lct-active" if dashboard_section == :reconciliation) || "lct-sidebar-link", aria: (dashboard_section == :reconciliation ? { current: "page" } : {}) do %>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+              Reconciliation
             <% end %>
-          </nav>
-        </header>
+          <% end %>
+          </div>
+        </aside>
 
-        <%= body %>
-      </main>
+        <main class="lct-content">
+          <%= body %>
+        </main>
+      </div>
     </div>
   </body>
 </html>

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

@@ -1,121 +1,100 @@
-<section class="lct-panel lct-toolbar">
-  <div class="lct-toolbar-head">
-    <h2 class="lct-section-title">Calls</h2>
-    <div class="lct-toolbar-actions">
-      <%= link_to "Export CSV",
-                  calls_path(current_query(format: :csv)),
-                  class: "lct-button lct-button-secondary",
-                  title: "Capped at #{number(LlmCostTracker::CallsController::CSV_EXPORT_LIMIT)} rows per request — narrow the date range to export larger slices." %>
-    </div>
-  </div>
+<% incomplete_only = params[:cost_status].to_s == "incomplete" %>
+
+<div class="lct-filter-row">
+  <%= render "llm_cost_tracker/shared/filter_pill_date", path: calls_path %>
+  <%= render "llm_cost_tracker/shared/filter_pill_provider", path: calls_path %>
+  <%= render "llm_cost_tracker/shared/filter_pill_model", path: calls_path %>
+  <%= render "llm_cost_tracker/shared/filter_pill_stream", path: calls_path %>
+
+  <% if incomplete_only %>
+    <%= link_to calls_path(current_query(cost_status: nil, page: nil)), class: "lct-filter-pill lct-active", "aria-label": "Remove incomplete-pricing filter" do %>
+      <svg width="12" height="12" 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 class="lct-filter-pill-key">Pricing</span>
+      <span class="lct-filter-pill-value">Incomplete ×</span>
+    <% end %>
+  <% end %>
 
-  <%= render "llm_cost_tracker/shared/filters", path: calls_path %>
+  <% if params[:provider].present? || params[:model].present? || params[:stream].present? || incomplete_only %>
+    <%= link_to "× Clear filters", calls_path(current_query(provider: nil, model: nil, stream: nil, cost_status: nil, page: nil)), class: "lct-filter-clear" %>
+  <% end %>
 
-  <%= render "llm_cost_tracker/shared/active_filters", chips: active_tag_filters, clear_path: calls_path %>
-</section>
+  <span class="lct-filter-row-meta"><%= number(@calls_count) %> call<%= "s" unless @calls_count == 1 %> · <%= money(@calls_total_cost) %></span>
+  <%= link_to "Export CSV", calls_path(current_query(format: :csv)), class: "lct-page-link", title: "Capped at #{number(LlmCostTracker::CallsController::CSV_EXPORT_LIMIT)} rows per request" %>
+</div>
 
 <% if @calls_count.zero? %>
   <section class="lct-panel lct-empty">
     <h2 class="lct-state-title">No matching calls</h2>
     <p class="lct-state-copy">Tracked requests will appear here when they match the current filters.</p>
-    <div class="lct-state-actions">
-      <%= link_to "Clear filters", calls_path, class: "lct-button lct-button-secondary" %>
-    </div>
   </section>
 <% else %>
   <section class="lct-panel">
-    <div class="lct-results-toolbar">
-      <span class="lct-pagination-per">
-        <span class="lct-pagination-per-label">Per page:</span>
+    <table class="lct-tbl">
+      <thead>
+        <tr>
+          <%= sortable_header("Tracked at", "tracked_at", num: true) %>
+          <%= sortable_header("Provider", "provider") %>
+          <%= sortable_header("Model", "model") %>
+          <%= sortable_header("Input", "input", num: true) %>
+          <%= sortable_header("Output", "output", num: true) %>
+          <%= sortable_header("Cost", "cost", num: true) %>
+          <%= sortable_header("Latency", "latency", num: true) %>
+          <th>Tags</th>
+          <th class="lct-num"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @calls.each do |call| %>
+          <tr>
+            <td><%= format_date(call.tracked_at) %></td>
+            <td><span class="lct-model-cell"><span class="lct-provider-dot lct-provider-dot-<%= call.provider %>"></span><%= call.provider %></span></td>
+            <td><code class="lct-code-id"><%= call.model %></code></td>
+            <td class="lct-num"><%= number(call.input_tokens) %></td>
+            <td class="lct-num"><%= number(call.output_tokens) %></td>
+            <td class="lct-num<%= ' lct-num-muted' if call.total_cost.nil? %>"><%= optional_money(call.total_cost) %></td>
+            <td class="lct-num<%= ' lct-num-muted' if call.latency_ms.nil? %>"><%= call.latency_ms ? "#{number(call.latency_ms)}ms" : "n/a" %></td>
+            <td><%= render "llm_cost_tracker/shared/tag_chips", tags: call.parsed_tags %></td>
+            <td class="lct-num"><%= link_to "Details", call_path(call), class: "lct-page-link" %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+
+    <% first_row = @page.offset + 1 %>
+    <% last_row = [@page.offset + @calls.length, @calls_count].min %>
+    <% total_pages = @page.total_pages(@calls_count) %>
+    <div class="lct-pagination">
+      <span class="lct-pagination-info">Showing <strong><%= number(first_row) %></strong>–<strong><%= number(last_row) %></strong> of <strong><%= number(@calls_count) %></strong></span>
+      <span class="lct-seg lct-pagination-perpage" title="Rows per page">
         <% LlmCostTracker::PaginationHelper::PER_PAGE_CHOICES.each do |choice| %>
           <% if choice == @page.per %>
-            <span class="lct-pagination-per-option is-active" aria-current="true"><%= choice %></span>
+            <a class="lct-active" aria-current="true"><%= choice %></a>
           <% else %>
-            <%= link_to choice, calls_path(current_query(per: choice, page: 1)), class: "lct-pagination-per-option" %>
+            <%= link_to choice, calls_path(current_query(per: choice, page: 1)) %>
           <% end %>
         <% end %>
       </span>
-
-      <%= render "llm_cost_tracker/shared/sort",
-                 current: @sort,
-                 options: [
-                   ["Recent", ""],
-                   ["Most expensive", "expensive"],
-                   ["Largest input", "input"],
-                   ["Largest output", "output"],
-                   ["Slowest", "slow"],
-                   ["Unknown pricing", "unknown_pricing"]
-                 ],
-                 path_for_sort: ->(value) { calls_path(current_query(sort: value.presence, page: nil)) } %>
-    </div>
-
-    <div class="lct-table-wrap">
-      <table class="lct-table lct-table-compact lct-calls-table">
-        <thead>
-          <tr>
-            <th>Tracked At</th>
-            <th>Provider</th>
-            <th>Model</th>
-            <th class="lct-num">Input</th>
-            <th class="lct-num">Output</th>
-            <th class="lct-num">Total</th>
-            <th class="lct-num">Cost</th>
-            <th class="lct-num">Latency</th>
-            <th>Tags</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <% @calls.each do |call| %>
-            <tr>
-              <td class="lct-nowrap"><%= format_date(call.tracked_at) %></td>
-              <td><%= call.provider %></td>
-              <td><code class="lct-code"><%= call.model %></code></td>
-              <td class="lct-num"><%= number(call.input_tokens) %></td>
-              <td class="lct-num"><%= number(call.output_tokens) %></td>
-              <td class="lct-num"><%= number(call.total_tokens) %></td>
-              <td class="lct-num<%= ' lct-num-muted' if call.total_cost.nil? %>"><%= optional_money(call.total_cost) %></td>
-              <td class="lct-num<%= ' lct-num-muted' if call.latency_ms.nil? %>"><%= call.latency_ms ? "#{number(call.latency_ms)}ms" : "n/a" %></td>
-              <td><%= render "llm_cost_tracker/shared/tag_chips", tags: call.parsed_tags %></td>
-              <td><%= link_to "Details", call_path(call), class: "lct-button lct-button-secondary lct-button-compact" %></td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
-
-    <nav class="lct-pagination" aria-label="Pagination">
-      <% first_row = @page.offset + 1 %>
-      <% last_row = [@page.offset + @calls.length, @calls_count].min %>
-      <% total_pages = @page.total_pages(@calls_count) %>
-
-      <div class="lct-pagination-info">
-        <span>Showing <strong><%= number(first_row) %></strong> to <strong><%= number(last_row) %></strong> of <strong><%= number(@calls_count) %></strong> results</span>
-      </div>
-
-      <div class="lct-pagination-nav" role="group" aria-label="Page navigation">
+      <span class="lct-pagination-nav">
         <% if @page.prev_page? %>
-          <%= link_to "‹", calls_path(current_query(page: @page.page - 1, per: @page.per)), class: "lct-page-link lct-page-arrow", rel: "prev", aria: { label: "Previous page" } %>
+          <%= link_to "‹", calls_path(current_query(page: @page.page - 1, per: @page.per)), class: "lct-page-link", rel: "prev", aria: { label: "Previous page" } %>
         <% else %>
-          <span class="lct-page-link lct-page-arrow is-disabled" aria-disabled="true" aria-label="Previous page">‹</span>
+          <span class="lct-page-link lct-disabled" aria-disabled="true" aria-label="Previous page">‹</span>
         <% end %>
-
         <% pagination_page_items(@page.page, total_pages).each do |item| %>
           <% if item == :gap %>
-            <span class="lct-page-gap" aria-hidden="true">…</span>
+            <span class="lct-page-link lct-disabled" aria-hidden="true">…</span>
           <% elsif item == @page.page %>
-            <span class="lct-page-link is-current" aria-current="page"><%= item %></span>
+            <span class="lct-page-link lct-current" aria-current="page"><%= item %></span>
           <% else %>
             <%= link_to item, calls_path(current_query(page: item, per: @page.per)), class: "lct-page-link", aria: { label: "Go to page #{item}" } %>
           <% end %>
         <% end %>
-
         <% if @page.next_page?(@calls_count) %>
-          <%= link_to "›", calls_path(current_query(page: @page.page + 1, per: @page.per)), class: "lct-page-link lct-page-arrow", rel: "next", aria: { label: "Next page" } %>
+          <%= link_to "›", calls_path(current_query(page: @page.page + 1, per: @page.per)), class: "lct-page-link", rel: "next", aria: { label: "Next page" } %>
         <% else %>
-          <span class="lct-page-link lct-page-arrow is-disabled" aria-disabled="true" aria-label="Next page">›</span>
+          <span class="lct-page-link lct-disabled" aria-disabled="true" aria-label="Next page">›</span>
         <% end %>
-      </div>
-    </nav>
+      </span>
+    </div>
   </section>
 <% end %>