llm_cost_tracker 0.7.3 → 0.8.0

data/app/assets/llm_cost_tracker/application.css

@@ -16,10 +16,31 @@
     --lct-danger: #dc2626;
     --lct-danger-soft: #fee2e2;
     --lct-danger-border: #fca5a5;
+    --lct-warning-copy: #9a3412;
+    --lct-warning-strong: #7c2d12;
+    --lct-danger-copy: #b91c1c;
+    --lct-danger-strong: #991b1b;
     --lct-row-hover: #f8fafc;
+    --lct-th-bg: #fbfcfe;
+    --lct-toolbar-bg: rgba(255, 255, 255, 0.72);
+    --lct-toolbar-border: #e7ecf3;
+    --lct-border-strong: #d4dae2;
+    --lct-chart-secondary: rgba(10, 37, 64, 0.42);
+    --lct-chart-marker: rgba(10, 37, 64, 0.45);
+    --lct-chip-remove: rgba(10, 37, 64, 0.58);
     --lct-shadow: 0 1px 2px rgba(10, 37, 64, 0.05), 0 1px 1px rgba(10, 37, 64, 0.03);
+    --lct-shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
+    --lct-shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08), 0 1px 2px rgba(10, 37, 64, 0.04);
+    --lct-shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.12), 0 2px 6px rgba(10, 37, 64, 0.05);
     --lct-focus-ring: 0 0 0 3px rgba(99, 91, 255, 0.25);
 
+    --sp-1:  4px;
+    --sp-2:  8px;
+    --sp-3: 12px;
+    --sp-4: 16px;
+    --sp-5: 24px;
+    --sp-6: 32px;
+
     --fs-2xs:    10px;
     --fs-xs:     11px;
     --fs-sm:     13px;
@@ -34,6 +55,53 @@
     --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   }
 
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --lct-bg: #0b1220;
+      --lct-panel: #111a2e;
+      --lct-surface: #1a253c;
+      --lct-border: #233149;
+      --lct-text: #e6ecf5;
+      --lct-muted: #8a98b3;
+      --lct-accent: #8a82ff;
+      --lct-accent-hover: #a39cff;
+      --lct-accent-soft: rgba(138, 130, 255, 0.16);
+      --lct-success: #34d399;
+      --lct-success-soft: rgba(52, 211, 153, 0.16);
+      --lct-warning: #fbbf24;
+      --lct-warning-soft: rgba(251, 191, 36, 0.16);
+      --lct-warning-border: rgba(251, 191, 36, 0.4);
+      --lct-danger: #f87171;
+      --lct-danger-soft: rgba(248, 113, 113, 0.16);
+      --lct-danger-border: rgba(248, 113, 113, 0.4);
+      --lct-row-hover: #182238;
+      --lct-th-bg: #142036;
+      --lct-toolbar-bg: rgba(17, 26, 46, 0.78);
+      --lct-toolbar-border: #233149;
+      --lct-border-strong: #2f3f5c;
+      --lct-warning-copy: #fcd34d;
+      --lct-warning-strong: #fde68a;
+      --lct-danger-copy: #fca5a5;
+      --lct-danger-strong: #fecaca;
+      --lct-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.25);
+      --lct-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+      --lct-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.25);
+      --lct-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
+      --lct-focus-ring: 0 0 0 3px rgba(138, 130, 255, 0.35);
+      --lct-chart-secondary: rgba(230, 236, 245, 0.32);
+      --lct-chart-marker: rgba(230, 236, 245, 0.45);
+      --lct-chip-remove: rgba(230, 236, 245, 0.58);
+    }
+
+    .lct-field select {
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238a98b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 4.5l3.5 3.5 3.5-3.5'/></svg>");
+    }
+
+    .lct-field input[type="date"]::-webkit-calendar-picker-indicator {
+      filter: invert(70%) sepia(8%) saturate(437%) hue-rotate(176deg) brightness(95%) contrast(86%);
+    }
+  }
+
   .lct-body { margin: 0; }
 
   .lct-app {
@@ -93,6 +161,9 @@
 
   .lct-panel-tight { padding: 16px 18px; }
 
+  .lct-panel + .lct-panel,
+  .lct-stat-grid + .lct-panel { margin-top: 16px; }
+
   .lct-banner {
     align-items: center;
     border-radius: 8px;
@@ -108,13 +179,13 @@
   .lct-banner-title { font-size: var(--fs-md); font-weight: 600; margin: 0; }
   .lct-banner-muted { color: var(--lct-muted); font-weight: 400; }
 
-  .lct-banner-warning { background: var(--lct-warning-soft); border-color: var(--lct-warning-border); color: #7c2d12; }
+  .lct-banner-warning { background: var(--lct-warning-soft); border-color: var(--lct-warning-border); color: var(--lct-warning-strong); }
   .lct-banner-warning .lct-banner-muted,
-  .lct-banner-warning .lct-banner-copy { color: #9a3412; }
+  .lct-banner-warning .lct-banner-copy { color: var(--lct-warning-copy); }
 
-  .lct-banner-danger { background: var(--lct-danger-soft); border-color: var(--lct-danger-border); color: #991b1b; }
+  .lct-banner-danger { background: var(--lct-danger-soft); border-color: var(--lct-danger-border); color: var(--lct-danger-strong); }
   .lct-banner-danger .lct-banner-muted,
-  .lct-banner-danger .lct-banner-copy { color: #b91c1c; }
+  .lct-banner-danger .lct-banner-copy { color: var(--lct-danger-copy); }
 
   .lct-muted { color: var(--lct-muted); }
 
@@ -268,16 +339,26 @@
   .lct-table tbody tr:last-child td { border-bottom: 0; }
 
   .lct-table th {
-    background: #fbfcfe;
+    background: var(--lct-th-bg);
     color: var(--lct-muted);
     font-weight: 600;
     font-size: var(--fs-xs);
     letter-spacing: 0;
     text-transform: none;
+    position: sticky;
+    top: 0;
+    z-index: 1;
   }
 
+  .lct-table tbody tr {
+    transition: background-color 0.1s ease;
+  }
   .lct-table tbody tr:hover { background: var(--lct-row-hover); }
 
+  @media (prefers-reduced-motion: reduce) {
+    .lct-table tbody tr { transition: none; }
+  }
+
   .lct-table td:last-child,
   .lct-table th:last-child,
   .lct-calls-table td:last-child,
@@ -304,8 +385,10 @@
   .lct-stack-fill-input  { background: var(--lct-accent); }
   .lct-stack-fill-cache-read { background: #22c55e; }
   .lct-stack-fill-cache-write { background: #f59e0b; }
-  .lct-stack-fill-cache-write-1h { background: #a855f7; }
+  .lct-stack-fill-cache-write-extended { background: #a855f7; }
+  .lct-stack-fill-audio-input { background: #ec4899; }
   .lct-stack-fill-output { background: #0ea5e9; }
+  .lct-stack-fill-audio-output { background: #14b8a6; }
 
   .lct-budget { display: grid; gap: 10px; }
   .lct-budget-head { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; }
@@ -318,7 +401,7 @@
   .lct-budget-of { color: var(--lct-muted); font-size: var(--fs-sm); font-weight: 500; }
   .lct-budget-percent { font-size: var(--fs-md); font-variant-numeric: tabular-nums; font-weight: 700; }
   .lct-budget-marker {
-    border-left: 2px dashed rgba(10, 37, 64, 0.45);
+    border-left: 2px dashed var(--lct-chart-marker);
     bottom: 0;
     position: absolute;
     top: 0;
@@ -335,7 +418,7 @@
   }
   .lct-budget-projection strong { color: var(--lct-text); }
   .lct-budget-projection-status { font-weight: 600; }
-  .lct-budget-projection-status--over { color: #9a3412; }
+  .lct-budget-projection-status--over { color: var(--lct-warning-copy); }
   .lct-budget-projection-status--under { color: var(--lct-muted); }
   .lct-budget-meta { color: var(--lct-muted); font-size: var(--fs-xs); }
 
@@ -344,7 +427,7 @@
   .lct-chart-line-secondary {
     fill: none;
     opacity: 0.75;
-    stroke: rgba(10, 37, 64, 0.42);
+    stroke: var(--lct-chart-secondary);
     stroke-dasharray: 5 4;
     stroke-linejoin: round;
     stroke-linecap: round;
@@ -365,7 +448,7 @@
   .lct-chart-legend-compare { align-items: center; display: inline-flex; gap: 12px; }
   .lct-chart-key { align-items: center; display: inline-flex; gap: 6px; }
   .lct-chart-key-line { background: var(--lct-accent); border-radius: 999px; display: inline-block; height: 2px; width: 16px; }
-  .lct-chart-key-line-secondary { background: rgba(10, 37, 64, 0.42); position: relative; }
+  .lct-chart-key-line-secondary { background: var(--lct-chart-secondary); position: relative; }
   .lct-chart-key-line-secondary::after {
     background: linear-gradient(90deg, transparent 40%, var(--lct-bg) 40%, var(--lct-bg) 60%, transparent 60%);
     content: "";
@@ -399,15 +482,21 @@
   .lct-tag-chip-more { background: transparent; border: 1px dashed var(--lct-border); color: var(--lct-muted); }
   .lct-tag-empty { color: var(--lct-muted); font-size: var(--fs-sm); font-style: italic; }
 
-  .lct-empty { padding: 28px; text-align: center; }
-  .lct-state-title { font-size: var(--fs-xl); font-weight: 600; margin: 0 0 8px; }
-  .lct-state-copy { color: var(--lct-muted); margin: 0 auto; max-width: 640px; }
-  .lct-state-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
+  .lct-empty {
+    padding: 56px 28px;
+    text-align: center;
+    background:
+      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(99, 91, 255, 0.04), transparent 70%),
+      var(--lct-panel);
+  }
+  .lct-state-title { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 6px; letter-spacing: -0.005em; }
+  .lct-state-copy { color: var(--lct-muted); margin: 0 auto; max-width: 480px; font-size: var(--fs-sm); line-height: 1.55; }
+  .lct-state-actions { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
 
   .lct-toolbar {
-    background: rgba(255, 255, 255, 0.72);
+    background: var(--lct-toolbar-bg);
     backdrop-filter: blur(10px);
-    border-color: #e7ecf3;
+    border-color: var(--lct-toolbar-border);
     box-shadow: none;
     padding: 16px;
     margin-bottom: 16px;
@@ -429,52 +518,124 @@
   .lct-toolbar-actions .lct-button,
   .lct-banner .lct-button { font-size: var(--fs-sm); height: 32px; padding: 0 12px; }
 
-  .lct-filters { display: grid; gap: 8px; }
+  .lct-filters { display: block; }
 
-  .lct-filter-row { align-items: end; display: grid; gap: 12px; grid-template-columns: 1fr; }
-  .lct-filter-row-basic { grid-template-columns: 144px 144px 180px minmax(260px, 1fr) auto; }
-  .lct-filter-row-with-sort { grid-template-columns: 144px 144px 180px minmax(240px, 1fr) 160px auto; }
+  .lct-filter-row {
+    align-items: flex-end;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
 
   .lct-filter-actions {
-    align-items: end;
+    align-items: flex-end;
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    justify-content: flex-start;
+    margin-left: auto;
   }
 
-  .lct-field { display: inline-block; }
+  .lct-field {
+    display: flex;
+    flex: 1 1 160px;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 140px;
+  }
 
   .lct-field input,
   .lct-field select {
-    border: 0;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background: var(--lct-panel);
+    border: 1px solid var(--lct-border);
     border-radius: 8px;
+    box-sizing: border-box;
     color: var(--lct-text);
     font-family: inherit;
     font-size: var(--fs-md);
-    background: var(--lct-panel);
-    box-shadow: inset 0 0 0 1px var(--lct-border);
-    box-sizing: border-box;
     height: var(--lct-control-height);
     line-height: 1.2;
     padding: 0 12px;
     width: 100%;
   }
 
-  .lct-field input::placeholder { color: #8792a2; }
+  .lct-field select {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23697386' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 4.5l3.5 3.5 3.5-3.5'/></svg>");
+    background-position: right 10px center;
+    background-repeat: no-repeat;
+    background-size: 12px 12px;
+    padding-right: 32px;
+  }
+
+  .lct-field input[type="date"] {
+    font-variant-numeric: tabular-nums;
+    padding-right: 8px;
+  }
+
+  .lct-field input[type="date"]::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    filter: invert(45%) sepia(8%) saturate(437%) hue-rotate(176deg) brightness(95%) contrast(86%);
+    opacity: 0.85;
+  }
+
+  .lct-field input::placeholder { color: var(--lct-muted); }
+
+  .lct-field input:hover,
+  .lct-field select:hover { border-color: var(--lct-border-strong); }
 
   .lct-field input:focus,
   .lct-field select:focus {
-    box-shadow: inset 0 0 0 2px var(--lct-accent);
+    border-color: var(--lct-accent);
+    box-shadow: var(--lct-focus-ring);
     outline: none;
   }
 
+  .lct-results-toolbar {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin: -4px 0 8px;
+  }
+
+  .lct-results-toolbar .lct-pagination-per { order: 0; margin-right: auto; }
+  .lct-results-toolbar .lct-sort { order: 1; margin-left: auto; }
+
+  .lct-sort {
+    align-items: center;
+    background: var(--lct-surface);
+    border-radius: 6px;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+  }
+
+  .lct-sort-option {
+    border-radius: 4px;
+    color: var(--lct-muted);
+    display: inline-block;
+    font-size: var(--fs-xs);
+    font-weight: 500;
+    padding: 4px 8px;
+    text-decoration: none;
+  }
+
+  .lct-sort-option:hover { background: var(--lct-panel); color: var(--lct-text); }
+  .lct-sort-option.is-active {
+    background: var(--lct-panel);
+    box-shadow: var(--lct-shadow);
+    color: var(--lct-text);
+  }
+
   .lct-button {
     align-items: center;
     background: var(--lct-accent);
     border: 1px solid var(--lct-accent);
     border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.08);
+    box-shadow: var(--lct-shadow-sm);
     color: #ffffff;
     cursor: pointer;
     display: inline-flex;
@@ -486,17 +647,26 @@
     height: var(--lct-control-height);
     padding: 0 14px;
     text-decoration: none;
-    transition: background-color 0.12s ease, border-color 0.12s ease;
+    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
     white-space: nowrap;
   }
 
-  .lct-button:hover { background: var(--lct-accent-hover); border-color: var(--lct-accent-hover); }
+  .lct-button:hover {
+    background: var(--lct-accent-hover);
+    border-color: var(--lct-accent-hover);
+    box-shadow: var(--lct-shadow-md);
+    transform: translateY(-1px);
+  }
+
+  .lct-button:active {
+    transform: translateY(0);
+    box-shadow: var(--lct-shadow-sm);
+  }
 
   .lct-button:focus-visible,
   .lct-chip-remove:focus-visible,
   .lct-clear-link:focus-visible,
   .lct-nav a:focus-visible {
-    border-radius: 6px;
     box-shadow: var(--lct-focus-ring);
     outline: none;
   }
@@ -508,7 +678,15 @@
   }
   .lct-button-secondary:hover {
     background: var(--lct-row-hover);
-    border-color: var(--lct-border);
+    border-color: var(--lct-border-strong);
+  }
+  .lct-button-secondary:active {
+    background: var(--lct-surface);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .lct-button { transition: none; }
+    .lct-button:hover { transform: none; }
   }
 
   .lct-button-compact {
@@ -536,7 +714,7 @@
   }
 
   .lct-chip-remove {
-    color: rgba(10, 37, 64, 0.58);
+    color: var(--lct-chip-remove);
     font-size: var(--fs-lg);
     line-height: 1;
     text-decoration: none;
@@ -586,14 +764,15 @@
 
   .lct-pagination-info strong { color: var(--lct-text); font-weight: 600; }
 
-  .lct-pagination-per { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
-  .lct-pagination-per-label { color: var(--lct-muted); font-size: var(--fs-sm); font-weight: 500; }
+  .lct-pagination-per { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
+  .lct-pagination-per-label { color: var(--lct-muted); font-size: var(--fs-xs); font-weight: 500; }
 
   .lct-pagination-per-option {
     color: var(--lct-muted);
     text-decoration: none;
     padding: 2px 8px;
     border-radius: 999px;
+    font-size: var(--fs-xs);
     font-variant-numeric: tabular-nums;
   }
 
@@ -651,7 +830,6 @@
 
   .lct-pagination-nav > *:last-child { border-right: 0; }
 
-  .lct-tags { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .lct-nowrap { white-space: nowrap; }
 
   .lct-detail-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@@ -663,7 +841,7 @@
     margin: 0;
   }
 
-  .lct-dl dd { margin: 0; }
+  .lct-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
 
   .lct-pre {
     background: #0f172a;
@@ -740,8 +918,7 @@
     .lct-filters { gap: 12px; }
 
     .lct-filter-row,
-    .lct-filter-row-basic,
-    .lct-filter-row-with-sort { align-items: stretch; grid-template-columns: 1fr; }
+    .lct-filter-row-basic { align-items: stretch; grid-template-columns: 1fr; }
 
     .lct-filter-actions { justify-content: flex-start; width: 100%; }
 

data/app/controllers/llm_cost_tracker/application_controller.rb

@@ -11,30 +11,43 @@ module LlmCostTracker
     rescue_from ActiveRecord::StatementInvalid, with: :render_database_error
     rescue_from LlmCostTracker::InvalidFilterError, with: :render_invalid_filter
 
+    SCHEMA_CHECKS = [
+      [
+        LlmCostTracker::Ledger::Schema::Calls,
+        "The llm_cost_tracker_calls table does not match the current LLM Cost Tracker schema."
+      ],
+      [
+        LlmCostTracker::Ledger::Schema::CallRollups,
+        "The llm_cost_tracker_call_rollups table does not match the current LLM Cost Tracker schema."
+      ],
+      [
+        LlmCostTracker::Ledger::Schema::CallLineItems,
+        "The llm_cost_tracker_call_line_items table does not match the current LLM Cost Tracker schema."
+      ],
+      [
+        LlmCostTracker::Ledger::Schema::CallTags,
+        "The llm_cost_tracker_call_tags table does not match the current LLM Cost Tracker schema."
+      ]
+    ].freeze
+
+    private_constant :SCHEMA_CHECKS
+
     private
 
     def ensure_current_schema
-      unless LlmCostTracker::Ledger::Call.table_exists?
-        @setup_message = "The llm_api_calls table is not available yet."
+      unless LlmCostTracker::Call.table_exists?
+        @setup_message = "The llm_cost_tracker_calls table is not available yet."
         return render template: "llm_cost_tracker/shared/setup_required"
       end
 
-      schema_errors = LlmCostTracker::Ledger::Schema::Calls.current_schema_errors
-      if schema_errors.any?
-        @setup_message = "The llm_api_calls table does not match the current LLM Cost Tracker schema."
-        @setup_details = schema_errors
-        render template: "llm_cost_tracker/shared/setup_required"
-        return
-      end
-
-      period_total_errors = LlmCostTracker::Ledger::Schema::PeriodTotals.current_schema_errors
-      return if period_total_errors.empty?
+      SCHEMA_CHECKS.each do |schema, message|
+        errors = schema.current_schema_errors
+        next if errors.empty?
 
-      @setup_message = "The llm_cost_tracker_period_totals table does not match the current LLM Cost Tracker schema."
-      @setup_details = period_total_errors + [
-        "run bin/rails generate llm_cost_tracker:add_period_totals && bin/rails db:migrate"
-      ]
-      render template: "llm_cost_tracker/shared/setup_required"
+        @setup_message = message
+        @setup_details = errors + ["See docs/upgrading.md for the migration path."]
+        return render template: "llm_cost_tracker/shared/setup_required"
+      end
     end
 
     def render_database_error(error)

data/app/controllers/llm_cost_tracker/assets_controller.rb

@@ -3,8 +3,18 @@
 module LlmCostTracker
   class AssetsController < ActionController::Base
     def stylesheet
-      response.set_header("Cache-Control", "public, max-age=31536000, immutable")
+      response.set_header("Cache-Control", cache_control_header)
       send_file LlmCostTracker::Assets::STYLESHEET_PATH, type: "text/css", disposition: "inline"
     end
+
+    private
+
+    def cache_control_header
+      if Rails.env.development?
+        "no-store"
+      else
+        "public, max-age=31536000, immutable"
+      end
+    end
   end
 end

data/app/controllers/llm_cost_tracker/calls_controller.rb

@@ -19,7 +19,7 @@ module LlmCostTracker
         format.html do
           @page = Dashboard::Pagination.call(params)
           @calls_count = scope.count
-          @calls = ordered_scope.limit(@page.limit).offset(@page.offset).to_a
+          @calls = ordered_scope.includes(:tag_records).limit(@page.limit).offset(@page.offset).to_a
         end
         format.csv do
           send_data render_csv(ordered_scope.limit(CSV_EXPORT_LIMIT)),
@@ -30,7 +30,7 @@ module LlmCostTracker
     end
 
     def show
-      @call = Ledger::Call.find(params[:id])
+      @call = LlmCostTracker::Call.find(params[:id])
     end
 
     private
@@ -55,33 +55,38 @@ module LlmCostTracker
       CSV.generate do |csv|
         csv << fields.map(&:to_s)
 
-        relation.pluck(*fields).each do |values|
-          csv << fields.zip(values).map { |field, value| csv_value(field, value) }
+        relation.includes(:tag_records).each do |call|
+          csv << fields.map { |field| csv_value(field, call) }
         end
       end
     end
 
     def csv_fields
       %i[tracked_at provider model] +
-        TokenUsage::STORED_KEYS +
-        Pricing::COST_KEYS +
-        %i[latency_ms provider_response_id tags]
+        TokenUsage.members +
+        %i[
+          total_cost cost_status pricing_snapshot latency_ms provider_response_id provider_project_id
+          provider_api_key_id provider_workspace_id batch tags
+        ]
     end
 
-    def csv_value(field, value)
+    def csv_value(field, call)
       case field
       when :tracked_at
-        value&.utc&.iso8601
-      when :provider, :model, :provider_response_id
-        csv_safe(value)
+        call.tracked_at&.utc&.iso8601
+      when :provider, :model, :provider_response_id, :provider_project_id, :provider_api_key_id,
+           :provider_workspace_id, :cost_status
+        csv_safe(call[field])
+      when :pricing_snapshot
+        csv_safe(csv_json(call.pricing_snapshot))
       when :tags
-        csv_safe(csv_tags(value))
+        csv_safe(call.parsed_tags.to_json)
       else
-        value
+        call[field]
       end
     end
 
-    def csv_tags(value)
+    def csv_json(value)
       return value.transform_keys(&:to_s).to_json if value.is_a?(Hash)
 
       JSON.parse(value || "{}").to_json

data/app/controllers/llm_cost_tracker/data_quality_controller.rb

@@ -5,9 +5,17 @@ module LlmCostTracker
     def index
       scope = Dashboard::Filter.call(params: params)
       @stats = Dashboard::DataQuality.call(scope: scope)
-      @usage_rows = Dashboard::DataQuality.usage_rows(@stats)
+      @summary = Dashboard::DataQuality.summary(@stats)
+      @usage_rows = Dashboard::DataQuality.usage_rows(
+        @stats,
+        component_costs: Dashboard::DataQuality.component_costs(scope)
+      )
       @hidden_output_summary = Dashboard::DataQuality.hidden_output_summary(@stats)
-      @unknown_pricing_by_model = Dashboard::DataQuality.unknown_pricing_by_model(scope)
+      @unknown_pricing_by_model = Dashboard::DataQuality.unknown_pricing_by_model(
+        scope,
+        total_calls: @summary.total
+      )
+      @service_charge_rows = Dashboard::DataQuality.service_charge_rows(scope).to_a
     end
   end
 end