clowk-phlex 0.1.0

data/lib/clowk/phlex/charts/display_settings.rb

@@ -0,0 +1,121 @@
+# frozen_string_literal: true
+
+# Views::Metrics::DisplaySettings — the "Settings" drawer body for the chart
+# grid. A flat, domain-agnostic tile per card (portable → gem): click a tile to
+# toggle its visibility, drag the grip to reorder, pick the column count. The
+# "Update" button commits { hidden, order, cols } to the shared display store
+# and fires `metrics-display:changed`; the grid re-applies live.
+#
+# `items` — [{ metric:, label:, color:, unit:, default_visible: }] for every
+# manageable card on the page (those carrying a metric key).
+class Clowk::Phlex::Charts::DisplaySettings < Clowk::Phlex::Component
+  def initialize(kind:, items:)
+    @kind = kind
+    @items = items
+  end
+
+  def view_template
+    return if @items.empty?
+
+    div(
+      class: "p-4 flex flex-col gap-4 @container",
+      data: {
+        controller: "metrics-display-settings",
+        metrics_display_settings_kind_value: @kind
+      }
+    ) do
+      header_row
+      hint_row
+      columns_picker
+      cards_grid
+    end
+  end
+
+  private
+
+  def header_row
+    div(class: "flex items-center gap-2.5") do
+      span(class: "text-[10.5px] font-semibold uppercase tracking-[0.08em] font-clowk-mono text-clowk-muted shrink-0") { "Charts" }
+      span(class: "flex-1 h-px bg-clowk-border")
+      button(
+        type: "button",
+        data: {action: "click->metrics-display-settings#save", role: "update-btn"},
+        class: "inline-flex items-center gap-1.5 px-3 h-7 border border-clowk-border bg-clowk-surface " \
+               "text-clowk-text-2 text-[11.5px] font-medium hover:bg-clowk-surface-2 hover:text-clowk-text transition-colors shrink-0"
+      ) { "Update" }
+    end
+  end
+
+  def hint_row
+    p(class: "text-[11px] text-clowk-muted-2 leading-relaxed") do
+      plain "Click to toggle visibility. Drag "
+      span(class: "inline-flex align-middle text-clowk-muted-2 mx-0.5") { icon(:bars_3, class: "w-3 h-3 inline") }
+      plain " to reorder. Press "
+      span(class: "font-semibold text-clowk-text-2") { "Update" }
+      plain " to apply."
+    end
+  end
+
+  def columns_picker
+    div(class: "flex flex-wrap items-center gap-x-2.5 gap-y-1.5") do
+      span(class: "text-[10.5px] font-semibold uppercase tracking-[0.08em] font-clowk-mono text-clowk-muted shrink-0") { "Columns" }
+      span(class: "text-[10px] text-clowk-muted-2") { "(applies when 3+ visible)" }
+      div(class: "ml-auto inline-flex items-center gap-1") do
+        [1, 2, 3, 4].each { |n| cols_pill(n) }
+      end
+    end
+  end
+
+  def cols_pill(n)
+    button(
+      type: "button",
+      data: {action: "click->metrics-display-settings#selectCols", cols: n.to_s, metrics_display_settings_target: "colsBtn"},
+      class: "inline-flex items-center justify-center w-8 h-7 border border-clowk-border bg-clowk-surface " \
+             "text-clowk-text-2 text-[11.5px] font-clowk-mono font-medium hover:bg-clowk-surface-2 hover:text-clowk-text transition-colors"
+    ) { n.to_s }
+  end
+
+  def cards_grid
+    div(
+      data: {metrics_display_settings_target: "grid"},
+      class: "grid grid-cols-2 @sm:grid-cols-3 gap-2"
+    ) do
+      @items.each { |item| card_tile(item) }
+    end
+  end
+
+  def card_tile(spec)
+    div(
+      data: {
+        metrics_display_settings_target: "card",
+        metric: spec[:metric],
+        default_visible: (spec[:default_visible] == false) ? "false" : "true",
+        action: "click->metrics-display-settings#toggle"
+      },
+      class: "relative flex flex-col gap-1.5 p-2.5 cursor-pointer select-none border border-clowk-border " \
+             "bg-clowk-surface-2 hover:bg-clowk-surface transition-colors"
+    ) do
+      div(class: "flex items-center gap-1.5") do
+        span(
+          data: {role: "drag-handle"},
+          class: "cursor-grab active:cursor-grabbing text-clowk-muted-2 hover:text-clowk-text shrink-0",
+          title: "Drag to reorder"
+        ) { icon(:bars_3, class: "w-3 h-3 pointer-events-none") }
+
+        span(class: "inline-block w-2 h-2 rounded-full shrink-0", style: "background: #{spec[:color]};")
+
+        span(data: {role: "check"}, class: "ml-auto text-clowk-accent-2") do
+          icon(:check, class: "w-3 h-3")
+        end
+      end
+
+      span(class: "text-[11px] font-semibold font-clowk-mono text-clowk-text truncate leading-tight") { spec[:label] }
+
+      if spec[:unit].present?
+        span(class: "text-[10px] font-clowk-mono text-clowk-muted-2 leading-tight") { spec[:unit] }
+      else
+        span(class: "text-[10px] leading-tight invisible") { "·" }
+      end
+    end
+  end
+end

data/lib/clowk/phlex/charts/format.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Clowk
+  module Phlex
+    module Charts
+      # Format — magnitude-adaptive decimal formatting for chart labels, headline
+      # values and tooltips (ex-MetricFormat). A flat "%.1f" floors sub-0.1 values
+      # to "0.0", which makes an idle series read as zero even when the curve
+      # clearly moves — the shape is right but every number lies. These tiers keep
+      # enough precision for the magnitude you're looking at.
+      #
+      #   >= 100  → 0 decimals    ("142")
+      #   >= 10   → 1 decimal     ("42.5")
+      #   >= 1    → 1 decimal     ("4.2")
+      #   >= 0.01 → 2 decimals    ("0.05")
+      #   > 0     → "<0.01"
+      #   = 0     → "0"
+      module Format
+        module_function
+
+        def number(v)
+          return "—" if v.nil?
+          return "0" if v.zero?
+
+          abs = v.abs
+          return v.round.to_s if abs >= 100
+          return v.round(1).to_s if abs >= 10
+          return v.round(1).to_s if abs >= 1
+          return v.round(2).to_s if abs >= 0.01
+
+          "<0.01"
+        end
+
+        def percent(v)
+          return "—" if v.nil?
+          return "0%" if v.zero?
+
+          abs = v.abs
+          return "#{v.round}%" if abs >= 100
+          return format("%.1f%%", v) if abs >= 1
+          return format("%.2f%%", v) if abs >= 0.01
+
+          "<0.01%"
+        end
+      end
+    end
+  end
+end

data/lib/clowk/phlex/charts/gauge_linear.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+# Components::UI::GaugeLinear — horizontal capacity bar for a capacity / percent
+# metric (ported from voodu Metrics::GaugeLinear): a big % up top, a filled
+# track, and used / total figures underneath. The fill tints AMBER past 70% and
+# RED past 90% (same thresholds as GaugeRadial).
+#
+#   percent: true  → headline reads the fill "%".
+#   percent: false → headline reads center_value (raw count) instead.
+#
+# MULTI mode — pass `bars: [{label:, pct:, value_label:, capacity_label:, color:}]`
+# to stack one labeled capacity bar per row (e.g. one per pod). Each row shows
+# label + value on top, a fill bar, and (when `capacity_label` is given) a
+# pct / total line underneath. Multi options:
+#
+#   dot:         true  → a colored square before each label (breakdown style)
+#   threshold:   false → keep each bar its own color (no amber>70 / red>90 tint)
+#   title:       "…"   → a section header row (uppercase label)
+#   total_label: "…"   → a "Total <x>" figure shown at the right of the header
+#
+# The defaults (dot: false, threshold: true) give the capacity-gauge look; a
+# simple cost/usage breakdown is `dot: true, threshold: false` with a title +
+# total and value_label-only rows (no capacity_label → no bottom line).
+class Clowk::Phlex::Charts::GaugeLinear < Clowk::Phlex::Component
+  def initialize(pct: nil, color: "#5B8DEF", value_label: nil, capacity_label: nil, percent: true, center_value: nil,
+    bars: nil, dot: false, threshold: true, title: nil, total_label: nil)
+    @pct = clamp(pct.to_f) if pct
+    @color = color
+    @value_label = value_label
+    @capacity_label = capacity_label
+    @percent = percent
+    @center_value = center_value
+    @bars = bars.is_a?(Array) ? bars : nil
+    @dot = dot
+    @threshold = threshold
+    @title = title
+    @total_label = total_label
+  end
+
+  def multi? = !@bars.nil? && @bars.any?
+
+  def view_template
+    return multi_template if multi?
+
+    div(class: "flex flex-col justify-center gap-3 py-4 min-h-[120px]") do
+      span(class: "font-clowk-mono text-[26px] font-semibold text-clowk-text leading-none") { headline }
+
+      div(class: "h-3.5 w-full bg-clowk-surface-3 overflow-hidden rounded-clowk-sm") do
+        div(style: "width: #{@pct.round(1)}%; height: 100%; background: #{fill_color};")
+      end
+
+      if @value_label.present? || @capacity_label.present?
+        div(class: "flex items-center justify-between font-clowk-mono text-[11px] text-clowk-muted") do
+          span { @value_label.to_s.presence || "—" }
+          span { @capacity_label.to_s.presence || "" }
+        end
+      end
+    end
+  end
+
+  private
+
+  # multi_template — an optional header (title + total) over N stacked bars.
+  def multi_template
+    div(class: "flex flex-col gap-3 #{"justify-center py-3 min-h-[120px]" unless @title}") do
+      multi_header if @title
+      @bars.each { |b| gauge_row(b) }
+    end
+  end
+
+  def multi_header
+    div(class: "flex items-center justify-between") do
+      span(class: "text-[11px] font-semibold uppercase tracking-[0.05em] text-clowk-muted") { @title }
+
+      if @total_label
+        span(class: "text-[12px] text-clowk-muted") do
+          plain "Total "
+          span(class: "font-clowk-mono text-clowk-amber") { @total_label }
+        end
+      end
+    end
+  end
+
+  def gauge_row(bar)
+    pct = clamp(bar[:pct].to_f)
+    base = bar[:color] || @color
+    fill = @threshold ? row_fill_color(pct, base) : base
+
+    div(class: "flex flex-col gap-1.5") do
+      div(class: "flex items-baseline justify-between gap-2") do
+        span(class: "flex items-center gap-2 min-w-0 font-clowk-mono text-[11.5px] text-clowk-text-2 truncate") do
+          span(class: "w-2 h-2 rounded-[2px] shrink-0", style: "background: #{base};") if @dot
+          span(class: "truncate") { bar[:label].to_s }
+        end
+        span(class: "font-clowk-mono text-[11.5px] font-semibold text-clowk-text shrink-0") { bar[:value_label].to_s.presence || pct_string(pct) }
+      end
+
+      div(class: "h-2.5 w-full bg-clowk-surface-3 overflow-hidden rounded-full") do
+        div(class: "h-full rounded-full", style: "width: #{pct.round(1)}%; background: #{fill};")
+      end
+
+      if bar[:capacity_label].present?
+        div(class: "flex items-center justify-between font-clowk-mono text-[10px] text-clowk-muted-2") do
+          span { pct_string(pct) }
+          span { bar[:capacity_label].to_s }
+        end
+      end
+    end
+  end
+
+  def row_fill_color(pct, color)
+    return "var(--clowk-red)" if pct >= 90
+    return "var(--clowk-amber)" if pct >= 70
+
+    color
+  end
+
+  def pct_string(pct)
+    (pct < 10) ? "#{"%.1f" % pct}%" : "#{pct.round}%"
+  end
+
+  def fill_color
+    return "var(--clowk-red)" if @pct >= 90
+    return "var(--clowk-amber)" if @pct >= 70
+
+    @color
+  end
+
+  def headline
+    (!@percent && @center_value.to_s.present?) ? @center_value.to_s : pct_label
+  end
+
+  def pct_label
+    (@pct < 10) ? "#{"%.1f" % @pct}%" : "#{@pct.round}%"
+  end
+
+  def clamp(v)
+    return 0.0 if v.negative?
+    return 100.0 if v > 100
+
+    v
+  end
+end

data/lib/clowk/phlex/charts/gauge_radial.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+# Components::UI::GaugeRadial — semicircle "fuel gauge" for a capacity / percent
+# metric (ported from voodu Metrics::GaugeRadial). The arc fills with the
+# current %, the number sits big in the center and an absolute value (e.g.
+# "13.2 / 42 GB") below it. The fill tints AMBER past 70% and RED past 90% so a
+# resource nearing its ceiling jumps out. Pure server SVG (no JS).
+#
+#   percent: true  → center reads the fill "%".
+#   percent: false → center reads value_label (raw count) instead.
+class Clowk::Phlex::Charts::GaugeRadial < Clowk::Phlex::Component
+  R = 76   # arc radius
+  CX = 100 # center x
+  CY = 96  # baseline y the arc springs up from
+  SW = 16  # arc stroke width
+
+  def initialize(pct:, color: "#5B8DEF", sub_label: nil, max_w: 220, percent: true, value_label: nil)
+    @pct = clamp(pct.to_f)
+    @color = color
+    @sub_label = sub_label
+    @max_w = max_w
+    @percent = percent
+    @value_label = value_label.to_s
+  end
+
+  def view_template
+    arc = Math::PI * R
+    fill = (@pct / 100.0) * arc
+
+    svg(
+      viewBox: "0 0 200 116",
+      class: "block mx-auto w-full h-auto", style: "max-width: #{@max_w}px;", fill: "none",
+      role: "img", "aria-label": "#{@pct.round}%"
+    ) do |s|
+      s.path(d: arc_path, stroke: "var(--clowk-surface-3)", "stroke-width": SW, "stroke-linecap": "round")
+      s.path(
+        d: arc_path, stroke: fill_color,
+        "stroke-width": SW, "stroke-linecap": "round",
+        "stroke-dasharray": "#{fill.round(2)} #{arc.round(2)}"
+      )
+      s.text(
+        x: CX, y: CY - 6, "text-anchor": "middle",
+        fill: "var(--clowk-text)", "font-size": "30", "font-weight": "600",
+        "font-family": "var(--clowk-font-sans, system-ui, sans-serif)"
+      ) { center_label }
+
+      if @sub_label.present?
+        s.text(
+          x: CX, y: CY + 13, "text-anchor": "middle",
+          fill: "var(--clowk-muted)", "font-size": "12",
+          "font-family": "var(--clowk-font-mono, ui-monospace, monospace)"
+        ) { @sub_label }
+      end
+    end
+  end
+
+  private
+
+  def arc_path = "M #{CX - R} #{CY} A #{R} #{R} 0 0 1 #{CX + R} #{CY}"
+
+  def fill_color
+    return "var(--clowk-red)" if @pct >= 90
+    return "var(--clowk-amber)" if @pct >= 70
+
+    @color
+  end
+
+  def center_label
+    (!@percent && @value_label.present?) ? @value_label : pct_label
+  end
+
+  def pct_label
+    (@pct < 10) ? "#{"%.1f" % @pct}%" : "#{@pct.round}%"
+  end
+
+  def clamp(v)
+    return 0.0 if v.negative?
+    return 100.0 if v > 100
+
+    v
+  end
+end

data/lib/clowk/phlex/charts/interval_picker.rb

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+# Components::Metrics::IntervalPicker — dropdown that controls the
+# chart's bucket size (the x-axis density) INDEPENDENTLY from the
+# range pills. Range answers "how far back?"; interval answers
+# "how granular?".
+#
+# Why a separate control instead of preset range/interval pairs:
+# operator flexibility. The same "last 1h" can be examined at 1m
+# (60 spikes) or 5m (12 smoothed points) depending on what they're
+# hunting — a burst hidden in the average vs the overall trend.
+#
+# Mirrors the DS dropdown pattern of Components::Metrics::MetricPicker
+# (same `data-controller="dropdown"`, same trigger/menu structure)
+# so the modal toolbar reads as a row of consistent pickers.
+#
+# Mounted on:
+#   - Views::Metrics::Index (page toolbar, next to the RangePicker)
+#   - Views::Metrics::ChartModalBody (modal toolbar, next to the
+#     range pills + metric picker + pod picker)
+#
+# URL contract: the active interval lives in the `interval` query
+# param. `auto` is the default and is OMITTED from the URL (clean
+# URLs by default — operator only sees the param when they've
+# explicitly picked one).
+class Clowk::Phlex::Charts::IntervalPicker < Clowk::Phlex::Component
+  # Drop OPTIONS in lockstep with MetricsPageData::INTERVALS and
+  # MetricsWarehouse::INTERVAL_ALIASES keys. Drift between any of
+  # the three = picker rows that silently roundtrip to "auto".
+  OPTIONS = %w[auto 1s 10s 15s 1m 5m 15m 30m 1h].freeze
+
+  # current:      currently active interval (e.g. "auto", "1m")
+  # base_path:    URL each row hits (metrics_path or metrics_chart_path)
+  # extra_params: merged into every URL EXCEPT `interval` (which the
+  #               picker overrides per row). Pass the request query
+  #               minus `interval`.
+  # turbo_stream: emit data-turbo-stream on row anchors so the swap
+  #               stays modal-local (used inside the modal toolbar).
+  #               Defaults to false for the page-level picker which
+  #               does a normal navigation.
+  def initialize(current:, base_path:, extra_params: {}, turbo_stream: false)
+    @current = current.to_s.presence || "auto"
+    @base_path = base_path
+    @extra_params = extra_params || {}
+    @turbo_stream = turbo_stream
+  end
+
+  def view_template
+    div(class: "relative", data: {controller: "dropdown"}) do
+      trigger
+      menu
+    end
+  end
+
+  private
+
+  def trigger
+    button(
+      type: "button",
+      data: {action: "click->dropdown#toggle"},
+      class: "inline-flex items-center gap-2 px-2.5 h-9 min-w-[140px] border border-clowk-border bg-clowk-surface text-clowk-text text-[12.5px] hover:bg-clowk-surface-2"
+    ) do
+      span(class: "min-w-0 truncate") do
+        span(class: "text-clowk-muted") { "every " }
+        span(class: "font-clowk-mono text-clowk-text") { @current }
+      end
+
+      div(class: "flex-1")
+      icon(:chevron_down, class: "w-2.5 h-2.5 text-clowk-muted")
+    end
+  end
+
+  def menu
+    div(
+      hidden: true,
+      data: {dropdown_target: "menu"},
+      class: "absolute left-0 top-[calc(100%+4px)] z-30 min-w-[160px] max-h-[360px] overflow-auto scrollbar-hidden border border-clowk-border-2 bg-clowk-surface shadow-2xl"
+    ) do
+      OPTIONS.each { |opt| option_row(opt) }
+    end
+  end
+
+  def option_row(opt)
+    active = opt == @current
+
+    a(
+      href: build_url(opt),
+      data: @turbo_stream ? {turbo_stream: "true"} : {turbo: false},
+      class: tokens(
+        "flex items-center gap-2.5 w-full px-3 py-2 min-h-[34px] text-left",
+        active ? "bg-clowk-accent-dim text-clowk-accent-2" : "text-clowk-text hover:bg-clowk-hover"
+      )
+    ) do
+      span(
+        class: tokens(
+          "font-clowk-mono text-[12.5px] truncate flex-1",
+          active ? "font-semibold text-clowk-accent-2" : "font-medium text-clowk-text"
+        )
+      ) { opt }
+
+      if active
+        icon(:check, class: "w-3 h-3 text-clowk-accent-2 shrink-0 ml-1")
+      end
+    end
+  end
+
+  # build_url — picker rows override `interval` and leave the rest
+  # of the query untouched. `auto` is OMITTED from the URL so the
+  # default state reads as `?range=1h` instead of `?range=1h&interval=auto`.
+  def build_url(opt)
+    params = @extra_params.dup
+    params[:interval] = opt unless opt == "auto"
+
+    qs = params.to_query
+    qs.empty? ? @base_path.to_s : "#{@base_path}?#{qs}"
+  end
+end