sponsored_logs 0.1.0 → 0.3.0

data/lib/sponsored_logs/color.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module SponsoredLogs
+  # The gilding layer: wraps the [AD] prefix in 256-color gold so premium
+  # inventory reads as premium in a live terminal. Zero-width escapes only --
+  # the visible column count is unchanged, so nothing that measures the plain
+  # text (border fill, alignment) has to know color happened.
+  #
+  module Color
+    # SGR 256-color gold (xterm 214) open, plus the universal reset. Matches the
+    # gold accent in docs/banner.svg -- the AD tag is always the money color.
+    #
+    GOLD = "\e[38;5;214m"
+    RESET = "\e[0m"
+
+    require "logger"
+
+    # Gild text in gold when enabled, otherwise hand it back untouched so the
+    # non-TTY path stays byte-identical to the classic plain line.
+    #
+    def self.colorize(text, enabled:)
+      return text unless enabled
+
+      "#{GOLD}#{text}#{RESET}"
+    end
+
+    # Decide whether an emission to target should be gilded. :never never
+    # gilds; :always always gilds (overriding NO_COLOR); :auto gilds only when
+    # NO_COLOR is unset AND the target is a real TTY. A Logger's sink is treated
+    # as non-TTY (log files/streams must never get ANSI), so it gilds only under
+    # :always.
+    #
+    def self.gild?(target, mode:, env: ENV)
+      case mode
+      when :never then false
+      when :always then true
+      else no_color_unset?(env) && tty?(target)
+      end
+    end
+
+    # NO_COLOR convention (https://no-color.org): any non-empty value disables
+    # color. Unset or empty leaves auto-gilding available.
+    #
+    def self.no_color_unset?(env)
+      value = env["NO_COLOR"]
+      value.nil? || value.empty?
+    end
+
+    # A target is a TTY only when it is an IO that reports tty?. Loggers report
+    # false here on purpose -- we never unwrap the buried logdev.
+    #
+    def self.tty?(target)
+      return false if target.is_a?(Logger)
+
+      target.respond_to?(:tty?) && target.tty?
+    end
+  end
+end

data/lib/sponsored_logs/configuration.rb

@@ -2,12 +2,20 @@
 
 module SponsoredLogs
   class Configuration
-    attr_accessor :probability, :periodic, :interval, :output, :ad_prefix, :ads, :selection, :store, :report_page
+    attr_accessor :probability, :periodic, :interval, :output, :ad_prefix, :ads, :selection, :store, :report_page,
+                  :ascii_only, :house_ads
+    attr_reader :color
+
+    # Gilding modes for the [AD] prefix. :auto gilds only on a NO_COLOR-clear
+    # TTY; :always forces gold (overriding NO_COLOR); :never stays plain.
+    #
+    COLOR_MODES = %i[auto always never].freeze
 
     # Settings that map 1:1 onto an accessor. ads/ads_file are handled
     # separately because they interact (ads wins; ads_file loads into ads).
     #
-    DIRECT_KEYS = %i[probability periodic interval output ad_prefix selection store report_page].freeze
+    DIRECT_KEYS = %i[probability periodic interval output ad_prefix selection store report_page ascii_only
+                     house_ads color].freeze
     KNOWN_KEYS = (DIRECT_KEYS + %i[ads ads_file]).freeze
 
     def initialize
@@ -20,6 +28,17 @@ module SponsoredLogs
       @selection = :weight
       @store = Ledger::Store::Memory.new
       @report_page = false
+      @ascii_only = false
+      @house_ads = true
+      @color = :auto
+    end
+
+    # Coerce any unrecognized gilding mode back to :auto so a stray value never
+    # forces or suppresses color unexpectedly.
+    #
+    def color=(value)
+      symbol = value.to_s.strip.downcase.to_sym
+      @color = COLOR_MODES.include?(symbol) ? symbol : :auto
     end
 
     # Apply a hash of settings. Symbol or string keys are accepted; unknown

data/lib/sponsored_logs/env.rb

@@ -8,15 +8,34 @@ module SponsoredLogs
       truthy?(env["SPONSORED_LOGS"])
     end
 
+    # Maps each SPONSORED_LOGS_* variable to its option key and a coercer. Only
+    # variables actually present are applied, so the manual sponsor! path is
+    # untouched. Add a new override by extending this table.
+    #
+    OPTION_MAP = {
+      "SPONSORED_LOGS_PROBABILITY" => [:probability, ->(v) { Float(v) }],
+      "SPONSORED_LOGS_INTERVAL" => [:interval, ->(v) { Float(v) }],
+      "SPONSORED_LOGS_PERIODIC" => [:periodic, ->(v) { truthy?(v) }],
+      "SPONSORED_LOGS_PREFIX" => [:ad_prefix, ->(v) { v }],
+      "SPONSORED_LOGS_ADS_FILE" => [:ads_file, ->(v) { v }],
+      "SPONSORED_LOGS_SELECTION" => [:selection, :to_sym.to_proc],
+      "SPONSORED_LOGS_ASCII_ONLY" => [:ascii_only, ->(v) { truthy?(v) }],
+      "SPONSORED_LOGS_HOUSE_ADS" => [:house_ads, ->(v) { truthy?(v) }],
+      "SPONSORED_LOGS_COLOR" => [:color, ->(v) { color_mode(v) }]
+    }.freeze
+
+    # Map a raw SPONSORED_LOGS_COLOR value to a gilding mode symbol, falling
+    # back to :auto for anything unrecognized (invalid never forces color).
+    #
+    def self.color_mode(value)
+      symbol = value.to_s.strip.downcase.to_sym
+      Configuration::COLOR_MODES.include?(symbol) ? symbol : :auto
+    end
+
     def self.options(env = ENV)
-      opts = {}
-      opts[:probability] = Float(env["SPONSORED_LOGS_PROBABILITY"]) if env["SPONSORED_LOGS_PROBABILITY"]
-      opts[:interval]    = Float(env["SPONSORED_LOGS_INTERVAL"])    if env["SPONSORED_LOGS_INTERVAL"]
-      opts[:periodic]    = truthy?(env["SPONSORED_LOGS_PERIODIC"])  if env["SPONSORED_LOGS_PERIODIC"]
-      opts[:ad_prefix]   = env["SPONSORED_LOGS_PREFIX"]             if env["SPONSORED_LOGS_PREFIX"]
-      opts[:ads_file]    = env["SPONSORED_LOGS_ADS_FILE"]           if env["SPONSORED_LOGS_ADS_FILE"]
-      opts[:selection]   = env["SPONSORED_LOGS_SELECTION"].to_sym   if env["SPONSORED_LOGS_SELECTION"]
-      opts
+      OPTION_MAP.each_with_object({}) do |(var, (key, coerce)), opts|
+        opts[key] = coerce.call(env[var]) if env[var]
+      end
     end
 
     def self.truthy?(value)

data/lib/sponsored_logs/report/app/helpers/sponsored_logs/reports_helper.rb

@@ -2,49 +2,83 @@
 
 module SponsoredLogs
   module ReportsHelper
+    # Bright, saturated fills chosen for contrast against the badge's dark text,
+    # drawn from the banner palette (gold/cyan/green).
+    #
     STATUS_COLORS = {
-      active: "#16a34a",
-      scheduled: "#2563eb",
+      active: "#10b981",
+      scheduled: "#38bdf8",
       ended: "#6b7280",
-      evergreen: "#7c3aed"
+      evergreen: "#fbbf24",
+      exhausted: "#f59e0b"
     }.freeze
 
-    BAR_HEIGHT = 22
-    BAR_GAP = 10
-    LABEL_WIDTH = 320
-    TRACK_WIDTH = 360
-    VALUE_PAD = 8
-    BAR_COLOR = "#4f46e5"
+    # Segment palette for the donut charts, drawn from the banner
+    # (gold, cyan, greens, violets) and cycled for larger pools.
+    #
+    DONUT_COLORS = %w[
+      #fbbf24 #38bdf8 #10b981 #f59e0b #a78bfa
+      #34d399 #60a5fa #f472b6 #fb923c #22d3ee
+    ].freeze
+
+    DONUT_TOP_N = 7
 
-    # Render a horizontal bar chart as inline SVG from report ad rows.
-    # `value` picks the numeric field per row; `format` renders the label.
+    # Donut chart as inline SVG. Each row becomes an arc sized by its fraction
+    # of the total, with a legend beside it. Zero/negative values are omitted;
+    # only the top DONUT_TOP_N slices are shown individually and the remainder
+    # is rolled into a single "Other" slice so the ring still totals 100%.
     #
-    def bar_chart(ads, value:, format:)
-      rows = ads.map { |ad| [ad[:text], value.call(ad).to_f] }
-                .sort_by { |(_text, v)| -v }
-      return content_tag(:p, "No data yet.", class: "empty") if rows.empty?
+    # `label` picks the slice name, `value` the number to slice on (default
+    # spend), `format` renders the legend value (default dollars), and `empty`
+    # is the message when there's nothing to show.
+    #
+    def donut_chart(rows_in, label: ->(row) { row[:text] },
+                    value: ->(row) { row[:spend] },
+                    format: ->(v) { "$#{Kernel.format("%.2f", v)}" },
+                    empty: "No data yet.")
+      rows = rows_in.map { |row| [label.call(row), value.call(row).to_f] }
+                    .select { |(_t, v)| v.positive? }
+                    .sort_by { |(_t, v)| -v }
+      return content_tag(:p, empty, class: "empty") if rows.empty?
+
+      rows = collapse_to_top(rows, DONUT_TOP_N)
+      total = rows.sum { |(_t, v)| v }
+      radius = 60
+      donut_svg(donut_segments(rows, total, radius), donut_legend(rows, total, format), radius)
+    end
 
-      max = rows.map { |(_t, v)| v }.max
-      max = 1.0 if max <= 0
+    # Delivery-to-goal bars for capped ads across all groups: a filled track
+    # showing impressions against the cap, so pacing is visible at a glance.
+    # Returns nil when no ad has a cap.
+    #
+    def cap_progress(report)
+      capped = %i[ads upcoming finished]
+               .flat_map { |group| report[group] || [] }
+               .select { |ad| ad[:cap] }
+               .uniq { |ad| ad[:text] }
+               .sort_by { |ad| -(ad[:impressions].to_f / ad[:cap]) }
+      return if capped.empty?
+
+      rows = capped.map { |ad| cap_progress_row(ad) }.join
+      content_tag(:div, raw(rows), class: "cap-list")
+    end
 
-      height = rows.size * (BAR_HEIGHT + BAR_GAP)
-      width = LABEL_WIDTH + TRACK_WIDTH + 90
+    # Per-advertiser rollup table (advertiser accounts), sorted by spend.
+    # Returns nil for an empty set so the caller can skip the section.
+    #
+    def advertiser_table(rows)
+      return if rows.nil? || rows.empty?
 
-      bars = rows.each_with_index.map do |(text, v), i|
-        y = i * (BAR_HEIGHT + BAR_GAP)
-        bar_w = ((v / max) * TRACK_WIDTH).round(2)
-        svg_bar(text, format.call(v), y, bar_w)
-      end.join
+      header = content_tag(:thead, content_tag(:tr,
+                                               safe_join([
+                                                           content_tag(:th, "Advertiser"),
+                                                           content_tag(:th, "Ads", class: "num"),
+                                                           content_tag(:th, "Impressions", class: "num"),
+                                                           content_tag(:th, "Spend", class: "num")
+                                                         ])))
 
-      content_tag(
-        :svg,
-        raw(bars),
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 #{width} #{height}",
-        role: "img",
-        class: "chart",
-        style: "width:100%;max-width:#{width}px;height:auto;"
-      )
+      body = content_tag(:tbody, safe_join(rows.map { |a| advertiser_row(a) }))
+      content_tag(:table, safe_join([header, body]))
     end
 
     # Colored pill for an ad's flight status (:active/:scheduled/:ended/:evergreen).
@@ -74,6 +108,7 @@ module SponsoredLogs
 
       header = content_tag(:thead, content_tag(:tr,
                                                safe_join([
+                                                           content_tag(:th, "Advertiser"),
                                                            content_tag(:th, "Creative"),
                                                            content_tag(:th, "Status"),
                                                            content_tag(:th, "Flight"),
@@ -93,6 +128,7 @@ module SponsoredLogs
 
     def campaign_row(ad)
       content_tag(:tr, safe_join([
+                                   content_tag(:td, ad[:advertiser], class: "advertiser"),
                                    content_tag(:td, ad[:text]),
                                    content_tag(:td, status_badge(ad[:status])),
                                    content_tag(:td, flight_window(ad[:starts_at], ad[:ends_at]), class: "flight"),
@@ -102,17 +138,98 @@ module SponsoredLogs
                                  ]))
     end
 
-    def svg_bar(label, value_label, y, bar_w)
-      text_y = y + (BAR_HEIGHT / 2) + 4
-      label_text = esc(truncate_label(label))
-      value_text = esc(value_label)
+    def advertiser_row(account)
+      content_tag(:tr, safe_join([
+                                   content_tag(:td, account[:advertiser], class: "advertiser"),
+                                   content_tag(:td, account[:ads], class: "num"),
+                                   content_tag(:td, account[:impressions], class: "num"),
+                                   content_tag(:td, "$#{format("%.2f", account[:spend])}", class: "num")
+                                 ]))
+    end
+
+    def donut_segments(rows, total, radius)
+      circumference = 2 * Math::PI * radius
+      offset = 0.0
+
+      rows.each_with_index.map do |(_text, v), i|
+        frac = v / total
+        seg = donut_segment(frac, offset, radius, circumference, DONUT_COLORS[i % DONUT_COLORS.size])
+        offset += frac
+        seg
+      end.join
+    end
+
+    # Keep the top n rows; fold the rest into a single "Other" slice so the
+    # donut still represents the whole.
+    #
+    def collapse_to_top(rows, count)
+      return rows if rows.size <= count
+
+      top = rows.first(count)
+      other = rows.drop(count).sum { |(_t, v)| v }
+      top + [["Other", other]]
+    end
+
+    def donut_legend(rows, total, format)
+      rows.each_with_index.map do |(text, v), i|
+        donut_legend_row(text, v, v / total, DONUT_COLORS[i % DONUT_COLORS.size], format)
+      end.join
+    end
+
+    def donut_segment(frac, offset, radius, circumference, color)
+      dash = (frac * circumference).round(3)
+      gap = (circumference - dash).round(3)
+      # -offset rotates each segment to start where the previous ended;
+      # the whole ring is rotated -90deg (via the group) to begin at 12 o'clock.
+      #
+      dash_offset = (-offset * circumference).round(3)
+
+      %(<circle cx="80" cy="80" r="#{radius}" fill="none" stroke="#{color}"
+          stroke-width="26" stroke-dasharray="#{dash} #{gap}"
+          stroke-dashoffset="#{dash_offset}"/>)
+    end
+
+    def donut_legend_row(text, value, frac, color, format)
+      pct = (frac * 100).round(1)
+      %(<div class="legend-row">
+          <span class="legend-swatch" style="background:#{color};"></span>
+          <span class="legend-label">#{esc(truncate_label(text))}</span>
+          <span class="legend-value">#{esc(format.call(value))} &middot; #{pct}%</span>
+        </div>)
+    end
 
-      %(
-        <text x="0" y="#{text_y}" class="bar-label">#{label_text}</text>
-        <rect x="#{LABEL_WIDTH}" y="#{y}" width="#{TRACK_WIDTH}" height="#{BAR_HEIGHT}" class="bar-track"/>
-        <rect x="#{LABEL_WIDTH}" y="#{y}" width="#{bar_w}" height="#{BAR_HEIGHT}" class="bar-fill"/>
-        <text x="#{LABEL_WIDTH + bar_w + VALUE_PAD}" y="#{text_y}" class="bar-value">#{value_text}</text>
+    def donut_svg(segments, legend, radius)
+      hole = %(<circle cx="80" cy="80" r="#{radius - 20}" fill="#0f1727"/>)
+      ring = %(<g transform="rotate(-90 80 80)">#{segments}</g>)
+      svg = content_tag(
+        :svg,
+        raw(ring + hole),
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 160 160",
+        role: "img",
+        class: "donut",
+        style: "flex:0 0 160px;width:160px;height:160px;"
       )
+
+      content_tag(:div, safe_join([svg, content_tag(:div, raw(legend), class: "legend")]),
+                  class: "donut-wrap")
+    end
+
+    def cap_progress_row(ad)
+      cap = ad[:cap].to_i
+      imp = ad[:impressions].to_i
+      pct = cap.positive? ? [(imp.to_f / cap * 100), 100].min.round(1) : 0.0
+      full = pct >= 100
+
+      %(<div class="cap-row">
+          <div class="cap-head">
+            <span class="cap-label">#{esc(truncate_label(ad[:text]))}</span>
+            <span class="cap-count">#{imp} / #{cap}#{" &check;" if full}</span>
+          </div>
+          <div class="cap-track">
+            <div class="cap-fill#{" full" if full}" style="width:#{pct}%;"></div>
+          </div>
+        </div>)
     end
 
     # Truncate the raw text first, then escape, so we never slice through an

data/lib/sponsored_logs/report/app/views/sponsored_logs/reports/show.html.erb

@@ -4,61 +4,170 @@
   <meta charset="utf-8">
   <title>Campaign Performance</title>
   <style>
-    body { font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
-           margin: 2rem auto; max-width: 60rem; color: #1a1a1a; }
-    h1 { font-size: 1.4rem; margin-bottom: 0.25rem; }
-    .subtitle { color: #666; margin-top: 0; font-size: 0.9rem; }
-    .totals { display: flex; gap: 2rem; margin: 1.5rem 0; }
-    .totals div { background: #f4f4f6; border-radius: 8px; padding: 1rem 1.25rem; }
-    .totals .label { display: block; font-size: 0.75rem; text-transform: uppercase;
-                     letter-spacing: 0.05em; color: #888; }
-    .totals .value { font-size: 1.6rem; font-weight: 600; }
-    table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
-    th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid #eee; }
-    th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #888; }
-    td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
-    .empty { color: #888; font-style: italic; margin-top: 1.5rem; }
-    h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em;
-         color: #888; margin: 2rem 0 0.5rem; }
-    .chart { display: block; }
-    .chart .bar-label { font-size: 12px; fill: #333; }
-    .chart .bar-value { font-size: 12px; fill: #555; font-variant-numeric: tabular-nums; }
-    .chart .bar-track { fill: #f0f0f3; rx: 4; }
-    .chart .bar-fill { fill: #4f46e5; rx: 4; }
-    .badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
-             color: #fff; font-size: 0.7rem; text-transform: uppercase;
-             letter-spacing: 0.03em; }
-    td.flight { font-variant-numeric: tabular-nums; color: #555; white-space: nowrap; }
+    :root {
+      --bg-0: #0b0f19;
+      --bg-1: #161e2e;
+      --panel: #111827;
+      --panel-2: #1f2937;
+      --border: #374151;
+      --border-soft: #243044;
+      --text: #e5e7eb;
+      --muted: #9ca3af;
+      --faint: #6b7280;
+      --gold-0: #f59e0b;
+      --gold-1: #fbbf24;
+      --cyan: #38bdf8;
+      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+      --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    }
+    * { box-sizing: border-box; }
+    body {
+      font-family: var(--sans);
+      margin: 0;
+      padding: 2.5rem 1.5rem;
+      color: var(--text);
+      background: linear-gradient(135deg, var(--bg-0), var(--bg-1));
+      background-attachment: fixed;
+      min-height: 100vh;
+    }
+    .wrap { max-width: 64rem; margin: 0 auto; }
+
+    .masthead {
+      display: flex; align-items: center; gap: 0.75rem;
+      border: 1px solid var(--border); border-radius: 14px;
+      background: linear-gradient(180deg, var(--panel-2), var(--panel));
+      padding: 1.1rem 1.4rem; margin-bottom: 1.75rem;
+    }
+    .masthead .dots { display: flex; gap: 6px; margin-right: 0.4rem; }
+    .masthead .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
+    .masthead .dots .r { background: #ef4444; }
+    .masthead .dots .y { background: var(--gold-0); }
+    .masthead .dots .g { background: #10b981; }
+    .masthead h1 { font-size: 1.25rem; margin: 0; font-weight: 800; letter-spacing: -0.02em; }
+    .masthead h1 .gold { color: var(--gold-1); }
+    .masthead .subtitle { color: var(--cyan); margin: 0.15rem 0 0; font-size: 0.72rem;
+                          font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
+    .masthead .promoted { margin-left: auto; font-family: var(--mono); font-size: 0.62rem;
+                          font-weight: 700; letter-spacing: 0.1em; color: var(--gold-0);
+                          border: 1px solid var(--border); border-radius: 5px; padding: 0.3rem 0.55rem;
+                          background: #0f1625; }
+
+    .totals { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 2rem; }
+    .totals .card {
+      flex: 1 1 12rem;
+      background: linear-gradient(180deg, var(--panel-2), var(--panel));
+      border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.3rem;
+    }
+    .totals .label { display: block; font-size: 0.66rem; text-transform: uppercase;
+                     letter-spacing: 0.09em; color: var(--muted); font-family: var(--mono); }
+    .totals .value { font-size: 1.9rem; font-weight: 800; font-family: var(--mono);
+                     margin-top: 0.35rem;
+                     background: linear-gradient(90deg, var(--gold-0), var(--gold-1));
+                     -webkit-background-clip: text; background-clip: text;
+                     -webkit-text-fill-color: transparent; color: var(--gold-1); }
+
+    h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
+         color: var(--cyan); font-family: var(--mono); margin: 2.25rem 0 0.75rem; }
+
+    table { width: 100%; border-collapse: collapse; margin-top: 0.5rem;
+            border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
+            background: var(--panel); }
+    th, td { text-align: left; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border-soft); }
+    tr:last-child td { border-bottom: none; }
+    th { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em;
+         color: var(--muted); font-family: var(--mono); background: var(--panel-2); }
+    td { font-size: 0.85rem; }
+    td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
+    tbody tr:hover { background: #0f1727; }
+
+    .empty { color: var(--faint); font-style: italic; margin-top: 1.5rem;
+             font-family: var(--mono); }
+
+    .badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
+             color: #0b0f19; font-size: 0.62rem; text-transform: uppercase;
+             letter-spacing: 0.04em; font-weight: 800; font-family: var(--mono); }
+    td.flight { font-variant-numeric: tabular-nums; color: var(--muted);
+                white-space: nowrap; font-family: var(--mono); font-size: 0.8rem; }
+    td.advertiser { font-weight: 700; color: var(--gold-1); white-space: nowrap; }
+
+    /* Share-of-spend donut */
+    .donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
+                  border: 1px solid var(--border); border-radius: 12px;
+                  background: var(--panel); padding: 1.2rem 1.4rem; }
+    .legend { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 0.5rem; }
+    .legend-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; }
+    .legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; }
+    .legend-label { color: var(--text); overflow: hidden; text-overflow: ellipsis;
+                    white-space: nowrap; }
+    .legend-value { margin-left: auto; color: var(--muted); font-family: var(--mono);
+                    font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+    /* Delivery-to-goal (cap) progress */
+    .cap-list { display: flex; flex-direction: column; gap: 0.9rem;
+                border: 1px solid var(--border); border-radius: 12px;
+                background: var(--panel); padding: 1.2rem 1.4rem; }
+    .cap-head { display: flex; justify-content: space-between; align-items: baseline;
+                margin-bottom: 0.35rem; font-size: 0.82rem; }
+    .cap-label { color: var(--text); overflow: hidden; text-overflow: ellipsis;
+                 white-space: nowrap; margin-right: 1rem; }
+    .cap-count { color: var(--muted); font-family: var(--mono);
+                 font-variant-numeric: tabular-nums; white-space: nowrap; }
+    .cap-track { height: 10px; border-radius: 999px; background: #0f1727; overflow: hidden; }
+    .cap-fill { height: 100%; border-radius: 999px;
+                background: linear-gradient(90deg, var(--gold-0), var(--gold-1)); }
+    .cap-fill.full { background: linear-gradient(90deg, #10b981, #34d399); }
   </style>
 </head>
 <body>
-  <h1>Campaign Performance</h1>
-  <p class="subtitle">Sponsored message delivery report</p>
+  <div class="wrap">
+    <header class="masthead">
+      <span class="dots"><i class="r"></i><i class="y"></i><i class="g"></i></span>
+      <div>
+        <h1>Sponsored<span class="gold">Logs</span> <span style="color:var(--muted);font-weight:600;">Command Center</span></h1>
+        <p class="subtitle">Campaign performance &middot; live delivery report</p>
+      </div>
+      <span class="promoted">SPONSORED</span>
+    </header>
 
   <div class="totals">
-    <div>
+    <div class="card">
       <span class="label">Impressions</span>
       <span class="value"><%= @report[:impressions] %></span>
     </div>
-    <div>
+    <div class="card">
       <span class="label">Total spend</span>
       <span class="value">$<%= format("%.2f", @report[:spend]) %></span>
     </div>
   </div>
 
+  <% if @report[:advertisers].any? %>
+    <h2>Advertiser accounts</h2>
+    <%= advertiser_table(@report[:advertisers]) %>
+  <% end %>
+
   <% if @report[:ads].empty? %>
     <p class="empty">No impressions delivered yet.</p>
   <% else %>
-    <h2>Spend by advertiser</h2>
-    <%= bar_chart(@report[:ads], value: ->(ad) { ad[:spend] }, format: ->(v) { "$#{format('%.2f', v)}" }) %>
+    <h2>Share of spend</h2>
+    <%= donut_chart(@report[:advertisers], label: ->(a) { a[:advertiser] },
+                                           empty: "No spend yet.") %>
 
-    <h2>Impressions by advertiser</h2>
-    <%= bar_chart(@report[:ads], value: ->(ad) { ad[:impressions] }, format: ->(v) { v.to_i.to_s }) %>
+    <h2>Share of impressions</h2>
+    <%= donut_chart(@report[:advertisers], label: ->(a) { a[:advertiser] },
+                                           value: ->(a) { a[:impressions] },
+                                           format: ->(v) { v.to_i.to_s },
+                                           empty: "No impressions yet.") %>
 
     <h2>Running campaigns</h2>
     <%= campaign_table(@report[:ads]) %>
   <% end %>
 
+  <% cap = cap_progress(@report) %>
+  <% if cap %>
+    <h2>Delivery to goal</h2>
+    <%= cap %>
+  <% end %>
+
   <% if @report[:upcoming].any? %>
     <h2>Upcoming campaigns</h2>
     <%= campaign_table(@report[:upcoming]) %>
@@ -68,5 +177,6 @@
     <h2>Finished campaigns</h2>
     <%= campaign_table(@report[:finished]) %>
   <% end %>
+  </div>
 </body>
 </html>

data/lib/sponsored_logs/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SponsoredLogs
-  VERSION = "0.1.0"
+  VERSION = "0.3.0"
 end