llm_cost_tracker 0.2.0.alpha2 → 0.3.0

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

@@ -1,110 +1,256 @@
 <% total = @stats.total_calls %>
+<% known_pricing_calls = total - @stats.unknown_pricing_count %>
+<% tagged_calls = total - @stats.untagged_calls_count %>
+<% latency_calls = @stats.latency_column_present ? total - @stats.missing_latency_count : nil %>
+<% streaming_count = @stats.streaming_count %>
+<% streaming_missing_usage = @stats.streaming_missing_usage_count %>
+<% streams_with_usage = streaming_count && streaming_missing_usage ? streaming_count - streaming_missing_usage : nil %>
+
+<section class="lct-panel lct-toolbar">
+  <div class="lct-toolbar-head">
+    <h2 class="lct-section-title">Data Quality</h2>
+  </div>
+
+  <form class="lct-filters" action="<%= data_quality_path %>" method="get">
+    <div class="lct-filter-row lct-filter-row-basic">
+      <div class="lct-field">
+        <label for="lct-quality-from">From</label>
+        <input id="lct-quality-from" data-lct-filter-input type="date" name="from" value="<%= params[:from] %>">
+      </div>
+
+      <div class="lct-field">
+        <label for="lct-quality-to">To</label>
+        <input id="lct-quality-to" type="date" name="to" value="<%= params[:to] %>">
+      </div>
+
+      <div class="lct-field">
+        <label for="lct-quality-provider">Provider</label>
+        <%= select_tag :provider,
+                       options_for_select(provider_filter_options, params[:provider]),
+                       include_blank: "All providers",
+                       id: "lct-quality-provider" %>
+      </div>
+
+      <div class="lct-field">
+        <label for="lct-quality-model">Model</label>
+        <%= select_tag :model,
+                       options_for_select(model_filter_options, params[:model]),
+                       include_blank: "All models",
+                       id: "lct-quality-model" %>
+      </div>
+
+      <% if LlmCostTracker::LlmApiCall.stream_column? %>
+        <div class="lct-field">
+          <label for="lct-quality-stream">Stream</label>
+          <%= select_tag :stream,
+                         options_for_select(LlmCostTracker::DashboardFilterHelper::STREAM_FILTER_OPTIONS, params[:stream]),
+                         include_blank: "All calls",
+                         id: "lct-quality-stream" %>
+        </div>
+      <% end %>
+
+      <div class="lct-filter-actions">
+        <button class="lct-button" type="submit">Apply</button>
+        <%= link_to("Reset", data_quality_path, class: "lct-button lct-button-secondary") if any_filter_applied? %>
+      </div>
+    </div>
+  </form>
+
+  <%= render "llm_cost_tracker/shared/active_filters", chips: active_tag_filters, clear_path: data_quality_path %>
+</section>
 
 <% if total.zero? %>
   <section class="lct-panel lct-empty">
-    <h2 class="lct-section-title">No data yet</h2>
-    <p class="lct-muted">Data quality metrics will appear here once calls are recorded.</p>
+    <h2 class="lct-state-title">No data yet</h2>
+    <p class="lct-state-copy">Quality metrics will appear here once calls are recorded in the current slice.</p>
+    <div class="lct-state-actions">
+      <%= link_to "Clear filters", data_quality_path, class: "lct-button lct-button-secondary" %>
+    </div>
   </section>
 <% else %>
-  <section class="lct-grid lct-stats">
-    <article class="lct-stat">
-      <p class="lct-stat-label">Total calls</p>
-      <p class="lct-stat-value"><%= number(total) %></p>
+  <section class="lct-hero">
+    <article class="lct-panel lct-hero-primary">
+      <div>
+        <p class="lct-stat-label">Calls inspected</p>
+        <p class="lct-hero-value"><%= number(total) %></p>
+      </div>
     </article>
 
-    <article class="lct-stat">
-      <p class="lct-stat-label">Unknown pricing</p>
-      <p class="lct-stat-value"><%= number(@stats.unknown_pricing_count) %></p>
-      <p class="lct-stat-sub"><%= percent(coverage_percent(@stats.unknown_pricing_count, total)) %> of calls</p>
-    </article>
+    <div class="lct-hero-side">
+      <div class="lct-stat-grid">
+        <article class="lct-stat">
+          <p class="lct-stat-label">Unknown pricing</p>
+          <p class="lct-stat-value"><%= number(@stats.unknown_pricing_count) %></p>
+          <p class="lct-stat-sub"><%= percent(coverage_percent(@stats.unknown_pricing_count, total)) %> of calls</p>
+        </article>
 
-    <article class="lct-stat">
-      <p class="lct-stat-label">Calls without tags</p>
-      <p class="lct-stat-value"><%= number(@stats.untagged_calls_count) %></p>
-      <p class="lct-stat-sub"><%= percent(coverage_percent(@stats.untagged_calls_count, total)) %> of calls</p>
-    </article>
+        <article class="lct-stat">
+          <p class="lct-stat-label">Calls without tags</p>
+          <p class="lct-stat-value"><%= number(@stats.untagged_calls_count) %></p>
+          <p class="lct-stat-sub"><%= percent(coverage_percent(@stats.untagged_calls_count, total)) %> of calls</p>
+        </article>
+
+        <% if @stats.latency_column_present %>
+          <article class="lct-stat">
+            <p class="lct-stat-label">Missing latency</p>
+            <p class="lct-stat-value"><%= number(@stats.missing_latency_count) %></p>
+            <p class="lct-stat-sub"><%= percent(coverage_percent(@stats.missing_latency_count, total)) %> of calls</p>
+          </article>
+        <% end %>
+
+        <% if @stats.stream_column_present %>
+          <article class="lct-stat">
+            <p class="lct-stat-label">Streaming calls</p>
+            <p class="lct-stat-value"><%= number(streaming_count) %></p>
+            <p class="lct-stat-sub"><%= percent(coverage_percent(streaming_count, total)) %> of calls</p>
+          </article>
+
+          <% if streaming_missing_usage && streaming_count.positive? %>
+            <article class="lct-stat">
+              <p class="lct-stat-label">Streams without usage</p>
+              <p class="lct-stat-value"><%= number(streaming_missing_usage) %></p>
+              <p class="lct-stat-sub"><%= percent(coverage_percent(streaming_missing_usage, streaming_count)) %> of streams</p>
+            </article>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </section>
+
+  <section class="lct-grid lct-two-col">
+    <section class="lct-panel">
+      <div class="lct-section-head">
+        <div>
+          <h2 class="lct-section-title">Coverage summary</h2>
+          <p class="lct-section-copy">Good dashboards start with clean pricing, tags, and latency coverage.</p>
+        </div>
+      </div>
+
+      <table class="lct-table lct-table-compact">
+        <thead>
+          <tr>
+            <th>Dimension</th>
+            <th class="lct-num">Coverage</th>
+            <th class="lct-num">Calls with data</th>
+            <th>Visual</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% cost_coverage = coverage_percent(known_pricing_calls, total) %>
+          <tr>
+            <td>Cost (pricing known)</td>
+            <td class="lct-num"><%= percent(cost_coverage) %></td>
+            <td class="lct-num"><%= number(known_pricing_calls) %></td>
+            <td><%= render "llm_cost_tracker/shared/bar", value: cost_coverage, max: 100.0 %></td>
+          </tr>
+
+          <% tag_coverage = coverage_percent(tagged_calls, total) %>
+          <tr>
+            <td>Tags (at least one tag)</td>
+            <td class="lct-num"><%= percent(tag_coverage) %></td>
+            <td class="lct-num"><%= number(tagged_calls) %></td>
+            <td><%= render "llm_cost_tracker/shared/bar", value: tag_coverage, max: 100.0 %></td>
+          </tr>
+
+          <% if @stats.latency_column_present %>
+            <% latency_coverage = coverage_percent(latency_calls, total) %>
+            <tr>
+              <td>Latency</td>
+              <td class="lct-num"><%= percent(latency_coverage) %></td>
+              <td class="lct-num"><%= number(latency_calls) %></td>
+              <td><%= render "llm_cost_tracker/shared/bar", value: latency_coverage, max: 100.0 %></td>
+            </tr>
+          <% end %>
+
+          <% if @stats.stream_column_present && streams_with_usage && streaming_count.to_i.positive? %>
+            <% stream_coverage = coverage_percent(streams_with_usage, streaming_count) %>
+            <tr>
+              <td>Streaming usage captured</td>
+              <td class="lct-num"><%= percent(stream_coverage) %></td>
+              <td class="lct-num"><%= number(streams_with_usage) %> / <%= number(streaming_count) %></td>
+              <td><%= render "llm_cost_tracker/shared/bar", value: stream_coverage, max: 100.0 %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </section>
 
-    <% if @stats.latency_column_present %>
-      <article class="lct-stat">
-        <p class="lct-stat-label">Missing latency</p>
-        <p class="lct-stat-value"><%= number(@stats.missing_latency_count) %></p>
-        <p class="lct-stat-sub"><%= percent(coverage_percent(@stats.missing_latency_count, total)) %> of calls</p>
-      </article>
-    <% end %>
+    <section class="lct-panel">
+      <div class="lct-section-head">
+        <div>
+          <h2 class="lct-section-title">Next actions</h2>
+          <p class="lct-section-copy">Use these fixes to improve the trustworthiness of downstream cost reports.</p>
+        </div>
+      </div>
+
+      <table class="lct-table lct-table-compact">
+        <thead>
+          <tr>
+            <th>Issue</th>
+            <th>Why it matters</th>
+            <th>Suggested action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Unknown pricing</td>
+            <td>Cost stays <code class="lct-code">nil</code>, so totals undercount.</td>
+            <td>Update <code class="lct-code">pricing_overrides</code> or <code class="lct-code">prices_file</code>.</td>
+          </tr>
+          <tr>
+            <td>Missing tags</td>
+            <td>Attribution by tenant, user, or feature becomes less useful.</td>
+            <td>Pass <code class="lct-code">tags:</code> from middleware using request context.</td>
+          </tr>
+          <% if @stats.latency_column_present %>
+            <tr>
+              <td>Missing latency</td>
+              <td>Slow requests become harder to isolate on the calls page.</td>
+              <td>Make sure latency capture is enabled on every tracked request.</td>
+            </tr>
+          <% end %>
+          <% if @stats.stream_column_present && streaming_missing_usage.to_i.positive? %>
+            <tr>
+              <td>Streams without usage</td>
+              <td>Token totals undercount when streaming responses drop the final usage event.</td>
+              <td>Send OpenAI requests with <code class="lct-code">stream_options: { include_usage: true }</code>, or wrap custom clients with <code class="lct-code">LlmCostTracker.track_stream</code>.</td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </section>
   </section>
 
   <% unless @stats.unknown_pricing_by_model.empty? %>
     <section class="lct-panel">
-      <h2 class="lct-section-title">Unknown Pricing by Model</h2>
-      <p class="lct-muted">
-        These models have no pricing configured. Token counts are recorded but cost is <code class="lct-code">nil</code>.
-        Add entries to <code class="lct-code">pricing_overrides</code> or <code class="lct-code">prices_file</code> to fix.
-      </p>
+      <div class="lct-section-head">
+        <div>
+          <h2 class="lct-section-title">Unknown pricing by model</h2>
+          <p class="lct-section-copy">These models have token counts but no configured rates, so cost stays unknown.</p>
+        </div>
+        <%= link_to "Review calls", calls_path(current_query(sort: "unknown_pricing")), class: "lct-button lct-button-secondary" %>
+      </div>
+
       <div class="lct-table-wrap">
-        <table class="lct-table">
+        <table class="lct-table lct-table-compact">
           <thead>
             <tr>
               <th>Model</th>
-              <th>Calls without cost</th>
-              <th>Share of total</th>
+              <th class="lct-num">Calls without cost</th>
+              <th class="lct-num">Share of total</th>
             </tr>
           </thead>
           <tbody>
             <% @stats.unknown_pricing_by_model.each do |model, count| %>
               <tr>
                 <td><code class="lct-code"><%= model %></code></td>
-                <td><%= number(count) %></td>
-                <td><%= percent(total.positive? ? (count.to_f / total) * 100 : 0) %></td>
+                <td class="lct-num"><%= number(count) %></td>
+                <td class="lct-num"><%= percent(total.positive? ? (count.to_f / total) * 100.0 : 0.0) %></td>
               </tr>
             <% end %>
           </tbody>
         </table>
       </div>
-      <p class="lct-muted" style="margin-top:12px">
-        <%= link_to "View all unknown pricing calls →", calls_path(sort: "unknown_pricing") %>
-      </p>
     </section>
   <% end %>
-
-  <section class="lct-panel">
-    <h2 class="lct-section-title">Coverage Summary</h2>
-    <table class="lct-table">
-      <thead>
-        <tr>
-          <th>Dimension</th>
-          <th>Coverage</th>
-          <th>Calls with data</th>
-          <th>Visual</th>
-        </tr>
-      </thead>
-      <tbody>
-        <% cost_coverage = coverage_percent(total - @stats.unknown_pricing_count, total) %>
-        <tr>
-          <td>Cost (pricing known)</td>
-          <td><%= percent(cost_coverage) %></td>
-          <td><%= number(total - @stats.unknown_pricing_count) %></td>
-          <td><%= render "llm_cost_tracker/shared/bar", value: cost_coverage, max: 100.0 %></td>
-        </tr>
-
-        <% tag_coverage = coverage_percent(total - @stats.untagged_calls_count, total) %>
-        <tr>
-          <td>Tags (at least one tag)</td>
-          <td><%= percent(tag_coverage) %></td>
-          <td><%= number(total - @stats.untagged_calls_count) %></td>
-          <td><%= render "llm_cost_tracker/shared/bar", value: tag_coverage, max: 100.0 %></td>
-        </tr>
-
-        <% if @stats.latency_column_present %>
-          <% latency_coverage = coverage_percent(total - @stats.missing_latency_count, total) %>
-          <tr>
-            <td>Latency</td>
-            <td><%= percent(latency_coverage) %></td>
-            <td><%= number(total - @stats.missing_latency_count) %></td>
-            <td><%= render "llm_cost_tracker/shared/bar", value: latency_coverage, max: 100.0 %></td>
-          </tr>
-        <% end %>
-      </tbody>
-    </table>
-  </section>
 <% end %>
-

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

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

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

@@ -1,4 +1,4 @@
-<section class="lct-panel">
-  <h2>Invalid filter</h2>
-  <p class="lct-muted"><%= @error_message %></p>
+<section class="lct-panel lct-empty">
+  <h2 class="lct-state-title">Invalid filter</h2>
+  <p class="lct-state-copy"><%= @error_message %></p>
 </section>

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

@@ -1,5 +1,5 @@
-<section class="lct-panel">
-  <h2>Call not found</h2>
-  <p class="lct-muted">The requested LLM API call could not be found.</p>
+<section class="lct-panel lct-empty">
+  <h2 class="lct-state-title">Call not found</h2>
+  <p class="lct-state-copy">The requested LLM API call could not be found.</p>
   <p><%= link_to "Back to calls", calls_path, class: "lct-button lct-button-secondary" %></p>
 </section>

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

@@ -1,91 +1,99 @@
-<section class="lct-panel">
-  <h2 class="lct-section-title">Models</h2>
+<section class="lct-panel lct-toolbar">
+  <div class="lct-toolbar-head">
+    <h2 class="lct-section-title">Models</h2>
+  </div>
+
   <form class="lct-filters" action="<%= models_path %>" method="get">
-    <div class="lct-field">
-      <label for="lct-from">From</label>
-      <input id="lct-from" type="date" name="from" value="<%= params[:from] %>">
-    </div>
+    <div class="lct-filter-row lct-filter-row-with-sort">
+      <div class="lct-field">
+        <label for="lct-models-from">From</label>
+        <input id="lct-models-from" data-lct-filter-input type="date" name="from" value="<%= params[:from] %>">
+      </div>
 
-    <div class="lct-field">
-      <label for="lct-to">To</label>
-      <input id="lct-to" type="date" name="to" value="<%= params[:to] %>">
-    </div>
+      <div class="lct-field">
+        <label for="lct-models-to">To</label>
+        <input id="lct-models-to" type="date" name="to" value="<%= params[:to] %>">
+      </div>
 
-    <div class="lct-field">
-      <label for="lct-provider">Provider</label>
-      <input id="lct-provider" type="text" name="provider" value="<%= params[:provider] %>">
-    </div>
+      <div class="lct-field">
+        <label for="lct-models-provider">Provider</label>
+        <%= select_tag :provider,
+                       options_for_select(provider_filter_options, params[:provider]),
+                       include_blank: "All providers",
+                       id: "lct-models-provider" %>
+      </div>
 
-    <div class="lct-field">
-      <label for="lct-model">Model</label>
-      <input id="lct-model" type="text" name="model" value="<%= params[:model] %>">
-    </div>
-
-    <div class="lct-field">
-      <label for="lct-tag-key">Tag key</label>
-      <input id="lct-tag-key" type="text" name="tag_key" value="<%= params[:tag_key] %>">
-    </div>
+      <div class="lct-field">
+        <label for="lct-models-model">Model</label>
+        <%= select_tag :model,
+                       options_for_select(model_filter_options, params[:model]),
+                       include_blank: "All models",
+                       id: "lct-models-model" %>
+      </div>
 
-    <div class="lct-field">
-      <label for="lct-tag-value">Tag value</label>
-      <input id="lct-tag-value" type="text" name="tag_value" value="<%= params[:tag_value] %>">
-    </div>
-
-    <div class="lct-field">
-      <label for="lct-sort">Sort by</label>
-      <select id="lct-sort" name="sort">
-        <option value="cost"     <%= "selected" if @sort.blank? || @sort == "cost" %>>Total spend</option>
-        <option value="calls"    <%= "selected" if @sort == "calls" %>>Call volume</option>
-        <option value="avg_cost" <%= "selected" if @sort == "avg_cost" %>>Avg cost / call</option>
-        <% if @latency_available %>
-          <option value="latency" <%= "selected" if @sort == "latency" %>>Avg latency</option>
-        <% end %>
-      </select>
-    </div>
+      <div class="lct-field">
+        <label for="lct-models-sort">Sort</label>
+        <select id="lct-models-sort" name="sort">
+          <option value="cost" <%= "selected" if @sort.blank? || @sort == "cost" %>>Total spend</option>
+          <option value="calls" <%= "selected" if @sort == "calls" %>>Call volume</option>
+          <option value="avg_cost" <%= "selected" if @sort == "avg_cost" %>>Avg cost / call</option>
+          <% if @latency_available %>
+            <option value="latency" <%= "selected" if @sort == "latency" %>>Avg latency</option>
+          <% end %>
+        </select>
+      </div>
 
-    <div class="lct-button-row">
-      <button class="lct-button" type="submit">Apply</button>
-      <%= link_to "Reset", models_path, class: "lct-button lct-button-secondary" %>
+      <div class="lct-filter-actions">
+        <button class="lct-button" type="submit">Apply</button>
+        <%= link_to("Reset", models_path, class: "lct-button lct-button-secondary") if any_filter_applied? %>
+      </div>
     </div>
   </form>
+
+  <%= render "llm_cost_tracker/shared/active_filters", chips: active_tag_filters, clear_path: models_path %>
 </section>
 
 <% if @rows.empty? %>
   <section class="lct-panel lct-empty">
-    <h2 class="lct-section-title">No models</h2>
-    <p class="lct-muted">Tracked models will appear here when they match the current filters.</p>
+    <h2 class="lct-state-title">No models in this slice</h2>
+    <p class="lct-state-copy">Tracked models will appear here once calls match the current provider, model, and date filters.</p>
+    <div class="lct-state-actions">
+      <%= link_to "Clear filters", models_path, class: "lct-button lct-button-secondary" %>
+    </div>
   </section>
 <% else %>
   <section class="lct-panel">
     <div class="lct-table-wrap">
-      <table class="lct-table">
+      <table class="lct-table lct-table-compact">
         <thead>
           <tr>
             <th>Provider</th>
             <th>Model</th>
-            <th>Calls</th>
-            <th>Input</th>
-            <th>Output</th>
-            <th>Total cost</th>
-            <th>Avg cost / call</th>
+            <th class="lct-num">Calls</th>
+            <th class="lct-num">Input</th>
+            <th class="lct-num">Output</th>
+            <th class="lct-num">Total cost</th>
+            <th class="lct-num">Avg cost / call</th>
             <% if @latency_available %>
-              <th>Avg latency</th>
+              <th class="lct-num">Avg latency</th>
             <% end %>
+            <th></th>
           </tr>
         </thead>
         <tbody>
           <% @rows.each do |row| %>
             <tr>
               <td><%= row.provider %></td>
-              <td><%= row.model %></td>
-              <td><%= number(row.calls) %></td>
-              <td><%= format_tokens(row.input_tokens) %></td>
-              <td><%= format_tokens(row.output_tokens) %></td>
-              <td><%= money(row.total_cost) %></td>
-              <td><%= money(row.average_cost_per_call) %></td>
+              <td><code class="lct-code"><%= row.model %></code></td>
+              <td class="lct-num"><%= number(row.calls) %></td>
+              <td class="lct-num"><%= format_tokens(row.input_tokens) %></td>
+              <td class="lct-num"><%= format_tokens(row.output_tokens) %></td>
+              <td class="lct-num"><%= money(row.total_cost) %></td>
+              <td class="lct-num"><%= money(row.average_cost_per_call) %></td>
               <% if @latency_available %>
-                <td><%= row.average_latency_ms ? "#{number(row.average_latency_ms.round)}ms" : "n/a" %></td>
+                <td class="lct-num<%= ' lct-num-muted' if row.average_latency_ms.nil? %>"><%= row.average_latency_ms ? "#{number(row.average_latency_ms.round)}ms" : "n/a" %></td>
               <% end %>
+              <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>

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

@@ -0,0 +1,16 @@
+<% if chips.any? %>
+  <div class="lct-chip-row" aria-label="Active filters">
+    <% chips.each do |chip| %>
+      <span class="lct-chip">
+        <span class="lct-chip-label"><%= chip[:label] %></span>
+        <span><%= chip[:value] %></span>
+        <% if chip[:path] %>
+          <%= link_to "×", chip[:path], class: "lct-chip-remove", aria: { label: "Remove #{chip[:label]} #{chip[:value]}" } %>
+        <% end %>
+      </span>
+    <% end %>
+    <% if local_assigns[:clear_path] %>
+      <%= link_to "Clear all", clear_path, class: "lct-clear-link" %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,23 @@
+<% visible_segments = stack_segments(segments) %>
+
+<% if visible_segments.empty? %>
+  <p class="lct-call-breakdown-empty"><%= empty_message %></p>
+<% else %>
+  <div class="lct-stack-track" aria-hidden="true">
+    <% visible_segments.each do |segment| %>
+      <span class="lct-stack-fill <%= segment[:css_class] %>" style="width: <%= segment[:percent].round(2) %>%"></span>
+    <% end %>
+  </div>
+
+  <div class="lct-stack-legend">
+    <% visible_segments.each do |segment| %>
+      <div class="lct-stack-legend-item">
+        <span class="lct-stack-key">
+          <span class="lct-stack-swatch <%= segment[:css_class] %>"></span>
+          <span><%= segment[:label] %></span>
+        </span>
+        <span class="lct-stack-meta"><%= segment[:formatted_value] %> · <%= percent(segment[:percent]) %></span>
+      </div>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,18 @@
+<%# locals: series: Array[{ label:, cost: }], comparison_series: nil %>
+<% if series.blank? %>
+  <div class="lct-chart-empty">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>
+<% end %>

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

@@ -0,0 +1,15 @@
+<%# locals: tags: Hash, limit: Integer (optional) %>
+<% entries = tag_chip_entries(tags, limit: local_assigns.fetch(:limit, 3)) %>
+<% if entries.empty? %>
+  <span class="lct-tag-empty">(untagged)</span>
+<% else %>
+  <span class="lct-tag-chips" title="<%= safe_json(tags) %>">
+    <% entries.each do |entry| %>
+      <% 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>
+      <% end %>
+    <% end %>
+  </span>
+<% end %>

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

@@ -1,5 +1,6 @@
-<section class="lct-panel">
-  <p class="lct-muted">
+<section class="lct-panel lct-empty">
+  <h2 class="lct-state-title">Setup required</h2>
+  <p class="lct-state-copy">
     The <span class="lct-code">llm_api_calls</span> table is not available yet.
     Run <span class="lct-code">rails generate llm_cost_tracker:install</span> and migrate your database.
   </p>