llm_cost_tracker 0.9.0 → 0.11.0

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

@@ -12,156 +12,155 @@ end %>
     { label: component.fetch(:label), value: value, formatted_value: optional_money(value), css_class: component.fetch(:css_class) }
   end %>
 <% end %>
-
-<section class="lct-panel">
-  <nav class="lct-breadcrumb" aria-label="Breadcrumb">
-    <%= link_to "Calls", calls_path, class: "lct-breadcrumb-link" %>
-    <span class="lct-breadcrumb-sep" aria-hidden="true">›</span>
-    <span class="lct-breadcrumb-current">#<%= @call.id %></span>
-  </nav>
-  <div class="lct-call-hero">
-    <div>
-      <h2 class="lct-section-title lct-call-title">
-        <code class="lct-code"><%= @call.model %></code>
-      </h2>
-      <p class="lct-call-subtitle">
-        <code class="lct-code"><%= @call.provider %></code>
-        <span>·</span>
-        <span><%= format_date(@call.tracked_at) %></span>
-      </p>
-    </div>
-
-    <div class="lct-call-summary">
-      <div class="lct-call-summary-item">
-        <span class="lct-call-summary-label">Pricing</span>
-        <strong><%= pricing_status(@call) %></strong>
-      </div>
-      <div class="lct-call-summary-item">
-        <span class="lct-call-summary-label">Total cost</span>
-        <strong><%= optional_money(@call.total_cost) %></strong>
-      </div>
-      <div class="lct-call-summary-item">
-        <span class="lct-call-summary-label">Total tokens</span>
-        <strong><%= number(@call.total_tokens) %></strong>
-      </div>
-      <div class="lct-call-summary-item">
-        <span class="lct-call-summary-label">Latency</span>
-        <strong><%= @call.latency_ms ? "#{optional_number(@call.latency_ms)}ms" : "n/a" %></strong>
-      </div>
-    </div>
+<% service_line_items = @call.line_items.reject { |li| li.unit == "token" }.sort_by(&:position) %>
+
+<p class="lct-breadcrumb-back"><%= link_to "← All calls", calls_path %></p>
+<h2 class="lct-page-title"><code class="lct-code-id"><%= @call.model %></code> <span class="lct-page-title-meta">#<%= @call.id %></span></h2>
+<p class="lct-page-subtitle">
+  <span class="lct-model-cell"><span class="lct-provider-dot lct-provider-dot-<%= @call.provider %>"></span><%= @call.provider %></span>
+  <span class="lct-page-subtitle-sep">·</span>
+  <span><%= format_date(@call.tracked_at) %></span>
+</p>
+
+<div class="lct-stat-grid">
+  <div class="lct-stat">
+    <div class="lct-stat-head"><p class="lct-stat-label">Pricing</p></div>
+    <p class="lct-stat-value-sm"><%= pricing_status(@call) %></p>
+  </div>
+  <div class="lct-stat">
+    <div class="lct-stat-head"><p class="lct-stat-label">Total cost</p></div>
+    <p class="lct-stat-value<%= ' lct-num-muted' if @call.total_cost.nil? %>"><%= optional_money(@call.total_cost) %></p>
+  </div>
+  <div class="lct-stat">
+    <div class="lct-stat-head"><p class="lct-stat-label">Total tokens</p></div>
+    <p class="lct-stat-value"><%= number(@call.total_tokens) %></p>
+  </div>
+  <div class="lct-stat">
+    <div class="lct-stat-head"><p class="lct-stat-label">Latency</p></div>
+    <p class="lct-stat-value<%= ' lct-num-muted' if @call.latency_ms.nil? %>"><%= @call.latency_ms ? number(@call.latency_ms) : "n/a" %><% if @call.latency_ms %><span class="lct-stat-unit">ms</span><% end %></p>
   </div>
+</div>
 
-  <div class="lct-call-breakdown-grid">
-    <section class="lct-call-breakdown">
-      <h3 class="lct-call-breakdown-title">Token Mix</h3>
+<div class="lct-grid-2">
+  <section class="lct-panel">
+    <div class="lct-panel-head"><h2 class="lct-panel-title">Token mix</h2></div>
+    <div class="lct-panel-body">
       <%= render "llm_cost_tracker/shared/metric_stack", segments: token_segments, empty_message: "No token data for this call." %>
-    </section>
+    </div>
+  </section>
 
-    <section class="lct-call-breakdown">
-      <h3 class="lct-call-breakdown-title">Cost Mix</h3>
+  <section class="lct-panel">
+    <div class="lct-panel-head"><h2 class="lct-panel-title">Cost mix</h2></div>
+    <div class="lct-panel-body">
       <% if @call.total_cost.nil? %>
-        <p class="lct-call-breakdown-empty">Pricing not available for this call.</p>
+        <p class="lct-stack-empty">Pricing not available for this call.</p>
       <% else %>
         <%= render "llm_cost_tracker/shared/metric_stack", segments: cost_segments, empty_message: "No cost breakdown for this call." %>
       <% end %>
-    </section>
-  </div>
-
-  <div class="lct-detail-grid">
-    <dl class="lct-dl">
-      <dt>Cost Status</dt>
-      <dd><%= @call.cost_status.presence || "n/a" %></dd>
-
-      <dt>Latency</dt>
-      <dd><%= @call.latency_ms ? "#{optional_number(@call.latency_ms)}ms" : "n/a" %></dd>
+    </div>
+  </section>
+</div>
 
+<section class="lct-panel">
+  <div class="lct-panel-head"><h2 class="lct-panel-title">Provider context</h2></div>
+  <dl class="lct-meta-strip">
+    <div class="lct-meta-strip-item">
       <dt>Batch</dt>
       <dd><%= @call.batch? ? "yes" : "no" %></dd>
-
+    </div>
+    <% if @call.has_attribute?(:stream) %>
+      <div class="lct-meta-strip-item">
+        <dt>Stream</dt>
+        <dd><%= @call.stream? ? "yes" : "no" %></dd>
+      </div>
+    <% end %>
+    <% if @call.has_attribute?(:usage_source) && @call.usage_source.present? %>
+      <div class="lct-meta-strip-item">
+        <dt>Usage source</dt>
+        <dd><code class="lct-code-id"><%= @call.usage_source %></code></dd>
+      </div>
+    <% end %>
+    <div class="lct-meta-strip-item">
       <dt>Response ID</dt>
-      <dd><%= @call.provider_response_id.presence || "n/a" %></dd>
-
+      <dd><%= @call.provider_response_id.present? ? content_tag(:code, @call.provider_response_id, class: "lct-code-id") : "n/a" %></dd>
+    </div>
+    <div class="lct-meta-strip-item">
       <dt>Project ID</dt>
-      <dd><%= @call.provider_project_id.present? ? LlmCostTracker::Masking.mask_value(:provider_project_id, @call.provider_project_id) : "n/a" %></dd>
-
+      <dd><%= @call.provider_project_id.present? ? content_tag(:code, LlmCostTracker::Masking.mask_value(:provider_project_id, @call.provider_project_id), class: "lct-code-id") : "n/a" %></dd>
+    </div>
+    <div class="lct-meta-strip-item">
       <dt>API Key ID</dt>
-      <dd><%= @call.provider_api_key_id.present? ? LlmCostTracker::Masking.mask_value(:provider_api_key_id, @call.provider_api_key_id) : "n/a" %></dd>
-
+      <dd><%= @call.provider_api_key_id.present? ? content_tag(:code, LlmCostTracker::Masking.mask_value(:provider_api_key_id, @call.provider_api_key_id), class: "lct-code-id") : "n/a" %></dd>
+    </div>
+    <div class="lct-meta-strip-item">
       <dt>Workspace ID</dt>
-      <dd><%= @call.provider_workspace_id.present? ? LlmCostTracker::Masking.mask_value(:provider_workspace_id, @call.provider_workspace_id) : "n/a" %></dd>
-    </dl>
-
-    <dl class="lct-dl">
-      <% priced_components.each do |component| %>
-        <dt><%= component.fetch(:label).titleize %> Tokens</dt>
-        <dd><%= number(@call[component.fetch(:token_key)]) %></dd>
-      <% end %>
-
-      <dt>Total Tokens</dt>
-      <dd><%= number(@call.total_tokens) %></dd>
-    </dl>
-
-    <dl class="lct-dl">
-      <% priced_components.each do |component| %>
-        <dt><%= component.fetch(:label).titleize %> Cost</dt>
-        <dd><%= optional_money(line_item_costs_by_component[component.fetch(:price_key)]) %></dd>
-      <% end %>
+      <dd><%= @call.provider_workspace_id.present? ? content_tag(:code, LlmCostTracker::Masking.mask_value(:provider_workspace_id, @call.provider_workspace_id), class: "lct-code-id") : "n/a" %></dd>
+    </div>
+  </dl>
+</section>
 
-      <dt>Total Cost</dt>
-      <dd><%= optional_money(@call.total_cost) %></dd>
-    </dl>
+<section class="lct-panel">
+  <div class="lct-panel-head"><h2 class="lct-panel-title">Tags</h2></div>
+  <div class="lct-panel-body">
+    <% if @call.parsed_tags.empty? %>
+      <p class="lct-stack-empty">(untagged)</p>
+    <% else %>
+      <span class="lct-tag-chips">
+        <% @call.parsed_tags.each do |k, v| %>
+          <span class="lct-tag-chip"><span class="lct-tag-chip-key"><%= k %></span>=<%= v %></span>
+        <% end %>
+      </span>
+    <% end %>
   </div>
 </section>
 
-<% service_line_items = @call.line_items.where.not(unit: "token").order(:position).to_a %>
 <% if service_line_items.any? %>
   <section class="lct-panel">
-    <h2 class="lct-section-title">Service Charges</h2>
-    <div class="lct-table-wrap">
-      <table class="lct-table lct-table-compact">
-        <thead>
+    <div class="lct-panel-head"><h2 class="lct-panel-title">Service charges</h2></div>
+    <table class="lct-tbl">
+      <thead>
+        <tr>
+          <th>Component</th>
+          <th>Unit</th>
+          <th class="lct-num">Quantity</th>
+          <th class="lct-num">Rate</th>
+          <th class="lct-num">Cost</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% service_line_items.each do |line_item| %>
           <tr>
-            <th>Component</th>
-            <th>Unit</th>
-            <th class="lct-num">Quantity</th>
-            <th class="lct-num">Rate</th>
-            <th class="lct-num">Cost</th>
-            <th>Status</th>
+            <td><code class="lct-code-id"><%= line_item.kind %></code></td>
+            <td><%= line_item.unit %></td>
+            <td class="lct-num"><%= line_item.quantity %></td>
+            <td class="lct-num"><%= line_item.rate_amount ? "#{optional_money(line_item.rate_amount)} / #{line_item.rate_quantity}" : "n/a" %></td>
+            <% unknown_cost = line_item.cost.nil? || line_item.cost_status.to_s == LlmCostTracker::Billing::CostStatus::UNKNOWN %>
+            <td class="lct-num<%= ' lct-num-muted' if unknown_cost %>"><%= unknown_cost ? "n/a" : money(line_item.cost) %></td>
+            <td><%= line_item.cost_status %></td>
           </tr>
-        </thead>
-        <tbody>
-          <% service_line_items.each do |line_item| %>
-            <tr>
-              <td><code class="lct-code"><%= line_item.kind %></code></td>
-              <td><%= line_item.unit %></td>
-              <td class="lct-num"><%= line_item.quantity %></td>
-              <td class="lct-num"><%= line_item.rate_amount ? "#{optional_money(line_item.rate_amount)} / #{line_item.rate_quantity}" : "n/a" %></td>
-              <% unknown_cost = line_item.cost.nil? || line_item.cost_status.to_s == LlmCostTracker::Billing::CostStatus::UNKNOWN %>
-              <td class="lct-num<%= ' lct-num-muted' if unknown_cost %>"><%= unknown_cost ? "n/a" : money(line_item.cost) %></td>
-              <td><%= line_item.cost_status %></td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
+        <% end %>
+      </tbody>
+    </table>
   </section>
 <% end %>
 
 <% if @call.pricing_snapshot.present? %>
-  <section class="lct-panel">
-    <h2 class="lct-section-title">Pricing Snapshot</h2>
+  <details class="lct-panel lct-disclose">
+    <summary class="lct-panel-head lct-disclose-summary">
+      <h2 class="lct-panel-title">Pricing snapshot</h2>
+      <span class="lct-disclose-hint">show JSON</span>
+    </summary>
     <pre class="lct-pre"><%= safe_json(@call.pricing_snapshot) %></pre>
-  </section>
+  </details>
 <% end %>
 
-<section class="lct-panel">
-  <h2 class="lct-section-title">Tags</h2>
-  <pre class="lct-pre"><%= safe_json(@call.parsed_tags) %></pre>
-</section>
-
 <% if @call.has_attribute?("metadata") %>
-  <section class="lct-panel">
-    <h2 class="lct-section-title">Metadata</h2>
+  <details class="lct-panel lct-disclose">
+    <summary class="lct-panel-head lct-disclose-summary">
+      <h2 class="lct-panel-title">Metadata</h2>
+      <span class="lct-disclose-hint">show JSON</span>
+    </summary>
     <pre class="lct-pre"><%= safe_json(LlmCostTracker::Masking.mask_hash(masked_metadata_hash(@call.read_attribute("metadata")))) %></pre>
-  </section>
+  </details>
 <% end %>

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

@@ -1,202 +1,163 @@
-<% overview_filter_scope = current_query(from: @from_date.iso8601, to: @to_date.iso8601) %>
+<div class="lct-filter-row">
+  <%= render "llm_cost_tracker/shared/filter_pill_date", path: root_path %>
+  <%= render "llm_cost_tracker/shared/filter_pill_provider", path: root_path %>
+  <%= render "llm_cost_tracker/shared/filter_pill_model", path: root_path %>
 
-<section class="lct-panel lct-toolbar">
-  <%= render "llm_cost_tracker/shared/filters",
-             path: root_path,
-             filter_scope: overview_filter_scope,
-             defaults: { from: @from_date.iso8601, to: @to_date.iso8601 } %>
+  <% if params[:provider].present? || params[:model].present? %>
+    <%= link_to "× Clear filters", root_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: root_path %>
-</section>
+  <span class="lct-filter-row-meta">
+    <%= number(@stats.total_calls) %> call<%= "s" unless @stats.total_calls.to_i == 1 %> · <%= money(@stats.total_cost) %>
+  </span>
+</div>
 
 <% if @stats.total_calls.to_i.zero? %>
   <section class="lct-panel lct-empty">
     <h2 class="lct-state-title">No LLM calls yet</h2>
     <p class="lct-state-copy">Tracked requests will appear here after your application records its first LLM API call.</p>
-    <div class="lct-state-actions">
-      <%= link_to "Calls", calls_path, class: "lct-button lct-button-secondary" %>
-    </div>
   </section>
 <% else %>
   <% if @stats.unknown_pricing_count.to_i.positive? %>
-    <aside class="lct-banner lct-banner-warning" role="status">
-      <div class="lct-banner-body">
-        <p class="lct-banner-title">
-          <%= number(@stats.unknown_pricing_count) %> call<%= "s" unless @stats.unknown_pricing_count.to_i == 1 %> missing pricing
-          <span class="lct-banner-muted">· <%= percent(coverage_percent(@stats.unknown_pricing_count, @stats.total_calls)) %> of the slice</span>
-        </p>
-        <p class="lct-banner-copy">Totals undercount until every model has a known price. Update <code class="lct-code">pricing_overrides</code> or <code class="lct-code">prices_file</code> to fix.</p>
-      </div>
-      <%= link_to "Fix now →", data_quality_path, class: "lct-button lct-button-secondary" %>
-    </aside>
+    <div class="lct-alert lct-alert-warn">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>
+      <span>
+        <strong><%= number(@stats.unknown_pricing_count) %> call<%= "s" unless @stats.unknown_pricing_count.to_i == 1 %> with incomplete pricing</strong>
+        · <%= percent(coverage_percent(@stats.unknown_pricing_count, @stats.total_calls)) %> of slice
+        — update <code>pricing_overrides</code> or <code>prices_file</code>.
+      </span>
+      <%= link_to "Fix now →", data_quality_path, class: "lct-alert-action" %>
+    </div>
   <% end %>
 
   <% if @spend_anomaly %>
-    <aside class="lct-banner lct-banner-danger" role="status">
-      <div class="lct-banner-body">
-        <p class="lct-banner-title">
-          Spend anomaly detected
-          <span class="lct-banner-muted">· <code class="lct-code"><%= @spend_anomaly.fetch(:model) %></code> on <%= @spend_anomaly.fetch(:day).strftime("%b %-d") %></span>
-        </p>
-        <p class="lct-banner-copy">
-          <% if @spend_anomaly.fetch(:ratio) %>
-            <%= number_with_precision(@spend_anomaly.fetch(:ratio), precision: 1) %>× its prior 7-day average in this slice
-          <% else %>
-            <%= money(@spend_anomaly.fetch(:latest_spend)) %> after seven quiet days in this slice
-          <% end %>
-        </p>
-      </div>
-      <%= link_to "Calls",
+    <div class="lct-alert lct-alert-danger">
+      <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>Spend anomaly detected</strong>
+        · <code><%= @spend_anomaly.fetch(:model) %></code> on <%= @spend_anomaly.fetch(:day).strftime("%b %-d") %>
+        <% if @spend_anomaly.fetch(:ratio) %>
+          — <%= number_with_precision(@spend_anomaly.fetch(:ratio), precision: 1) %>× its prior 7-day average.
+        <% else %>
+          — <%= money(@spend_anomaly.fetch(:latest_spend)) %> after seven quiet days.
+        <% end %>
+      </span>
+      <%= link_to "View calls →",
                   calls_path(current_query(provider: @spend_anomaly.fetch(:provider), model: @spend_anomaly.fetch(:model), from: @to_date.iso8601, to: @to_date.iso8601, page: nil, per: nil, format: nil)),
-                  class: "lct-button lct-button-secondary" %>
-    </aside>
+                  class: "lct-alert-action" %>
+    </div>
   <% end %>
 
-  <section class="lct-hero">
-    <article class="lct-panel lct-hero-primary">
-      <div>
+  <div class="lct-stat-grid">
+    <div class="lct-stat">
+      <div class="lct-stat-head">
         <p class="lct-stat-label">Total spend</p>
-        <p class="lct-hero-value"><%= money(@stats.total_cost) %></p>
         <% badge = delta_badge(@stats.cost_delta_percent) %>
-        <span class="<%= badge[:css_class] %>"><span class="lct-delta-dot" aria-hidden="true"></span><%= badge[:text] %></span>
+        <span class="<%= badge[:css_class] %>"><%= badge[:text] %></span>
       </div>
-    </article>
-
-    <div class="lct-hero-side">
-      <div class="lct-stat-grid">
-        <article class="lct-stat">
-          <p class="lct-stat-label">Avg cost / call</p>
-          <p class="lct-stat-value"><%= money(@stats.average_cost_per_call) %></p>
-        </article>
-
-        <article class="lct-stat">
-          <p class="lct-stat-label">Calls</p>
-          <p class="lct-stat-value"><%= number(@stats.total_calls) %></p>
-          <% badge = delta_badge(@stats.calls_delta_percent, mode: :neutral) %>
-          <span class="<%= badge[:css_class] %>"><span class="lct-delta-dot" aria-hidden="true"></span><%= badge[:text] %></span>
-        </article>
-
-        <% if @stats.average_latency_ms %>
-          <article class="lct-stat">
-            <p class="lct-stat-label">Avg latency</p>
-            <p class="lct-stat-value"><%= number(@stats.average_latency_ms.round) %>ms</p>
-          </article>
-        <% end %>
+      <p class="lct-stat-value"><%= money(@stats.total_cost) %></p>
+      <p class="lct-stat-foot">Avg <%= money(@stats.average_cost_per_call) %> / call</p>
+    </div>
+    <div class="lct-stat lct-stat-ok">
+      <div class="lct-stat-head">
+        <p class="lct-stat-label">Calls</p>
+        <% badge = delta_badge(@stats.calls_delta_percent, mode: :neutral) %>
+        <span class="<%= badge[:css_class] %>"><%= badge[:text] %></span>
+      </div>
+      <p class="lct-stat-value"><%= number(@stats.total_calls) %></p>
+    </div>
+    <% if @stats.average_latency_ms %>
+      <div class="lct-stat lct-stat-ok">
+        <div class="lct-stat-head"><p class="lct-stat-label">Avg latency</p></div>
+        <p class="lct-stat-value"><%= number(@stats.average_latency_ms.round) %><span class="lct-stat-unit">ms</span></p>
+      </div>
+    <% else %>
+      <div class="lct-stat">
+        <div class="lct-stat-head"><p class="lct-stat-label">Avg latency</p></div>
+        <p class="lct-stat-value lct-num-muted">n/a</p>
+      </div>
+    <% end %>
+    <div class="lct-stat <%= @stats.unknown_pricing_count.to_i.positive? ? 'lct-stat-warn' : 'lct-stat-ok' %>">
+      <div class="lct-stat-head"><p class="lct-stat-label">Incomplete pricing</p></div>
+      <p class="lct-stat-value"><%= number(@stats.unknown_pricing_count) %></p>
+      <p class="lct-stat-foot"><%= percent(coverage_percent(@stats.unknown_pricing_count, @stats.total_calls)) %> of slice</p>
+    </div>
+  </div>
 
+  <% if @monthly_budget_status %>
+    <% budget = @monthly_budget_status %>
+    <section class="lct-panel">
+      <div class="lct-panel-head">
+        <h2 class="lct-panel-title">Monthly budget</h2>
+        <span class="lct-panel-meta">
+          <span><%= money(budget[:spent]) %> of <%= money(budget[:budget]) %> · <%= percent(budget[:percent_used]) %></span>
+        </span>
+      </div>
+      <div class="lct-panel-body">
+        <div class="lct-budget-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="<%= budget[:progress_percent].round %>">
+          <div data-lct-style="<%= inline_style("width: #{budget[:progress_percent]}%") %>" class="lct-budget-fill <%= budget[:fill_modifier] %>"></div>
+          <% if budget[:projected_spent].positive? %>
+            <span data-lct-style="<%= inline_style("left: calc(#{budget[:projected_marker_percent]}% - 1px)") %>" class="lct-budget-marker" aria-hidden="true"></span>
+          <% end %>
+        </div>
+        <p class="lct-budget-projection">
+          <span>Projected <strong><%= money(budget[:projected_spent]) %></strong> by <%= budget[:projection_end_label] %></span>
+          <span class="lct-budget-projection-status <%= budget[:projected_delta_status_class] %>">
+            <%= money(budget[:projected_delta_amount]) %> <%= budget[:projected_delta_direction] %> budget
+          </span>
+        </p>
       </div>
+    </section>
+  <% end %>
 
-      <% if @monthly_budget_status %>
-        <% budget = @monthly_budget_status %>
-        <section class="lct-panel lct-panel-tight">
-          <div class="lct-section-head">
-            <div>
-              <h2 class="lct-section-title">Monthly Budget</h2>
-              <p class="lct-section-copy">Current-month spend across <strong>all</strong> calls.</p>
-            </div>
-          </div>
-          <div class="lct-budget">
-            <div class="lct-budget-head">
-              <span>
-                <span class="lct-budget-spent"><%= money(budget[:spent]) %></span>
-                <span class="lct-budget-of"> of <%= money(budget[:budget]) %></span>
-              </span>
-              <span class="lct-budget-percent"><%= percent(budget[:percent_used]) %></span>
-            </div>
-            <div class="lct-budget-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="<%= budget[:progress_percent].round %>">
-              <div data-lct-style="<%= inline_style("width: #{budget[:progress_percent]}%") %>" class="lct-budget-fill <%= budget[:fill_modifier] %>"></div>
-              <% if budget[:projected_spent].positive? %>
-                <span data-lct-style="<%= inline_style("left: calc(#{budget[:projected_marker_percent]}% - 1px)") %>" class="lct-budget-marker" aria-hidden="true"></span>
-              <% end %>
-            </div>
-            <p class="lct-budget-projection">
-              <span>Projected <strong><%= money(budget[:projected_spent]) %></strong> by <%= budget[:projection_end_label] %></span>
-              <span class="lct-budget-projection-status <%= budget[:projected_delta_status_class] %>">
-                <%= money(budget[:projected_delta_amount]) %> <%= budget[:projected_delta_direction] %> budget
-              </span>
-            </p>
-            <p class="lct-budget-meta">Soft limit: blocking is not atomic under concurrency.</p>
-          </div>
-        </section>
-      <% end %>
+  <section class="lct-panel">
+    <div class="lct-panel-head">
+      <h2 class="lct-panel-title">Daily spend</h2>
+      <span class="lct-panel-meta">
+        <span class="lct-legend"><span class="lct-legend-dot lct-legend-dot-current"></span>current</span>
+        <% if @comparison_series.any? %><span class="lct-legend"><span class="lct-legend-dot lct-legend-dot-prior"></span>prior <%= number(@comparison_series.size) %>d</span><% end %>
+      </span>
     </div>
+    <%= render "llm_cost_tracker/shared/spend_chart", series: @time_series, comparison_series: @comparison_series %>
   </section>
 
-  <section class="lct-grid lct-two-col">
+  <div class="lct-grid-2">
     <section class="lct-panel">
-      <div class="lct-section-head">
-        <div>
-          <h2 class="lct-section-title">Daily Spend</h2>
-          <p class="lct-section-copy">Current slice vs. previous <%= number(@comparison_series.size) %>-day slice.</p>
-        </div>
+      <div class="lct-panel-head">
+        <h2 class="lct-panel-title">Top models</h2>
+        <span class="lct-panel-meta"><%= link_to "View all →", models_path(current_query) %></span>
       </div>
-      <%= render "llm_cost_tracker/shared/spend_chart", series: @time_series, comparison_series: @comparison_series %>
+      <table class="lct-tbl">
+        <thead><tr><th>Model</th><th class="lct-num">Calls</th><th class="lct-num">Cost</th></tr></thead>
+        <tbody>
+          <% @top_models.first(5).each do |row| %>
+            <tr>
+              <td><span class="lct-model-cell"><span class="lct-provider-dot lct-provider-dot-<%= row.provider %>"></span><%= link_to calls_path(calls_query_for_model(provider: row.provider, model: row.model)), class: "lct-code-id" do %><%= row.model %><% end %></span></td>
+              <td class="lct-num"><%= number(row.calls) %></td>
+              <td class="lct-num"><%= money(row.total_cost) %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
     </section>
 
     <% if @providers.any? %>
       <section class="lct-panel">
-        <div class="lct-section-head">
-          <div>
-            <h2 class="lct-section-title">By Provider</h2>
-            <p class="lct-section-copy">Spend share across the selected slice.</p>
-          </div>
-        </div>
-        <table class="lct-table lct-table-compact">
-          <thead>
-            <tr>
-              <th>Provider</th>
-              <th class="lct-num">Calls</th>
-              <th class="lct-num">Spend</th>
-              <th class="lct-num">Share</th>
-              <th></th>
-            </tr>
-          </thead>
+        <div class="lct-panel-head"><h2 class="lct-panel-title">By provider</h2></div>
+        <table class="lct-tbl">
+          <thead><tr><th>Provider</th><th class="lct-num">Calls</th><th class="lct-num">Cost</th><th class="lct-num">Share</th></tr></thead>
           <tbody>
             <% @providers.each do |row| %>
               <tr>
-                <td><%= row.provider %></td>
+                <td><span class="lct-model-cell"><span class="lct-provider-dot lct-provider-dot-<%= row.provider %>"></span><%= row.provider %></span></td>
                 <td class="lct-num"><%= number(row.calls) %></td>
                 <td class="lct-num"><%= money(row.total_cost) %></td>
                 <td class="lct-num"><%= percent(row.share_percent) %></td>
-                <td><%= link_to "Calls", calls_path(current_query(provider: row.provider, page: nil, per: nil, format: nil)), class: "lct-button lct-button-secondary lct-button-compact" %></td>
               </tr>
             <% end %>
           </tbody>
         </table>
       </section>
     <% end %>
-  </section>
-
-  <section class="lct-panel">
-    <div class="lct-section-head">
-      <div>
-        <h2 class="lct-section-title">Top Models</h2>
-        <p class="lct-section-copy">The heaviest contributors in the current slice.</p>
-      </div>
-      <%= link_to "View all models", models_path(current_query), class: "lct-button lct-button-secondary lct-button-compact" %>
-    </div>
-    <table class="lct-table lct-table-compact">
-      <thead>
-        <tr>
-          <th>Provider</th>
-          <th>Model</th>
-          <th class="lct-num">Calls</th>
-          <th class="lct-num">Spend</th>
-          <th class="lct-num">Avg cost / call</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        <% @top_models.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"><%= money(row.total_cost) %></td>
-            <td class="lct-num"><%= money(row.average_cost_per_call) %></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>
-  </section>
+  </div>
 <% end %>