rails_pulse 0.3.3 → 0.4.0.pre.1

data/app/assets/stylesheets/rails_pulse/components/badge.css

@@ -57,6 +57,38 @@
   --badge-color: var(--color-negative);
 }
 
+.badge--get {
+  --badge-background: var(--blue-100);
+  --badge-border-color: transparent;
+  --badge-color: var(--blue-800);
+}
+
+.badge--post {
+  --badge-background: var(--green-100);
+  --badge-border-color: transparent;
+  --badge-color: var(--green-800);
+}
+
+.badge--put,
+.badge--patch {
+  --badge-background: var(--amber-100);
+  --badge-border-color: transparent;
+  --badge-color: var(--amber-800);
+}
+
+.badge--delete {
+  --badge-background: var(--red-100);
+  --badge-border-color: transparent;
+  --badge-color: var(--red-800);
+}
+
+.badge--head,
+.badge--options {
+  --badge-background: var(--color-secondary);
+  --badge-border-color: transparent;
+  --badge-color: var(--color-text);
+}
+
 /* Trend badge icon lightening (dark mode only) */
 .badge--trend rails-pulse-icon { color: var(--badge-color, currentColor); }
 html[data-color-scheme="dark"] .badge--trend rails-pulse-icon {

data/app/assets/stylesheets/rails_pulse/components/button.css

@@ -10,7 +10,7 @@
   box-shadow: var(--btn-box-shadow, var(--shadow-xs));
   color: var(--btn-color, var(--color-text));
   column-gap: var(--size-2);
-  cursor: default;
+  cursor: pointer;
   display: inline-flex;
   font-size: var(--btn-font-size, var(--text-sm));
   font-weight: var(--btn-font-weight, var(--font-medium));
@@ -43,11 +43,7 @@
   --btn-border-color: transparent;
   --btn-color: var(--color-text-reversed);
   --btn-icon-color: var(--color-filter-text-reversed);
-}
-
-.btn--secondary {
-  --btn-background: var(--color-secondary);
-  --btn-border-color: transparent;
+  --btn-hover-color: color-mix(in oklch, var(--color-primary) 85%, black);
 }
 
 .btn--borderless {
@@ -55,20 +51,6 @@
   --btn-box-shadow: none;
 }
 
-.btn--positive {
-  --btn-background: var(--color-positive);
-  --btn-border-color: transparent;
-  --btn-color: white;
-  --btn-icon-color: invert(1);
-}
-
-.btn--negative {
-  --btn-background: var(--color-negative);
-  --btn-border-color: transparent;
-  --btn-color: white;
-  --btn-icon-color: invert(1);
-}
-
 .btn--plain {
   --btn-background: transparent;
   --btn-border-color: transparent;
@@ -81,19 +63,3 @@
   --btn-padding: var(--size-2);
 }
 
-[aria-busy] .btn--loading:disabled {
-  > * {
-    visibility: hidden;
-  }
-
-  &::after {
-    animation: spin 1s linear infinite;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='12' x2='12' y1='2' y2='6'/%3e%3cline x1='12' x2='12' y1='18' y2='22'/%3e%3cline x1='4.93' x2='7.76' y1='4.93' y2='7.76'/%3e%3cline x1='16.24' x2='19.07' y1='16.24' y2='19.07'/%3e%3cline x1='2' x2='6' y1='12' y2='12'/%3e%3cline x1='18' x2='22' y1='12' y2='12'/%3e%3cline x1='4.93' x2='7.76' y1='19.07' y2='16.24'/%3e%3cline x1='16.24' x2='19.07' y1='7.76' y2='4.93'/%3e%3c/svg%3e");
-    background-size: cover;
-    block-size: var(--size-5);
-    content: "";
-    filter: var(--btn-icon-color, var(--color-filter-text));
-    inline-size: var(--size-5);
-    position: absolute;
-  }
-}

data/app/assets/stylesheets/rails_pulse/components/card.css

@@ -4,6 +4,7 @@
   border-width: var(--border);
   padding: var(--size-6);
   box-shadow: var(--shadow-sm);
+  position: relative;
 }
 
 /* Metric strip — single card with vertical dividers between metrics */
@@ -12,6 +13,11 @@
   display: flex;
   flex-direction: row;
   overflow: hidden; /* keeps border-radius intact at edges */
+  /* The page container is a flex column inside a fixed-height <main>, so a long
+     page shrinks its children. The strip must keep its natural height or the
+     trend row — whose overflow:hidden zeroes its automatic minimum size —
+     collapses to nothing. */
+  flex-shrink: 0;
 }
 
 .metric-strip__section {
@@ -57,6 +63,7 @@
   align-items: center;
   overflow: hidden;
   min-width: 0;
+  flex-shrink: 0;
 }
 
 .metric-strip__trend-badge {
@@ -69,6 +76,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
+  flex-shrink: 0;
 }
 
 /* 2-column grid on tablet */
@@ -114,14 +122,3 @@
   }
 }
 
-.card-selectable {
-  background-color: var(--color-surface, var(--color-bg));
-  border-radius: var(--rounded-xl);
-  border-width: var(--border);
-  padding: var(--size-3);
-
-  &:has(:checked) {
-    background-color: var(--color-secondary);
-    border-color: var(--color-primary);
-  }
-}

data/app/assets/stylesheets/rails_pulse/components/chart.css

@@ -1,3 +1,12 @@
+.panel-icon-bar {
+  position: absolute;
+  top: var(--size-6);
+  right: var(--size-6);
+  display: flex;
+  gap: var(--size-2);
+  align-items: center;
+}
+
 .panel-icon-bar > a,
 .panel-icon-bar > div,
 .panel-icon-bar > form {
@@ -10,7 +19,7 @@
   align-items: center;
 }
 
-.panel-icon-bar > form > button {
+.panel-icon-bar > form > button:not(.btn) {
   background: none;
   border: none;
   box-shadow: none;
@@ -68,8 +77,12 @@
   border-left: 1px solid var(--color-border);
 }
 
-.text-deploy {
-  color: var(--color-deploy);
+/* The toggles group normally follows a row of chart tabs, so it carries a
+   divider. Standing alone — a chart with no tabs — there is nothing to divide. */
+.panel-tabs__list > .panel-tabs__toggles:first-child {
+  padding-left: 0;
+  margin-left: 0;
+  border-left: none;
 }
 
 .panel-tab {

data/app/assets/stylesheets/rails_pulse/components/csp_safe_positioning.css

@@ -14,15 +14,13 @@
   --context-menu-y: 0px;
 }
 
-/* Popover positioning (used by popover_controller.js) */
+/* Positioning for popover_controller.js and context_menu_controller.js.
+   These were previously two separate [popover].positioned blocks of equal
+   specificity, so the second silently overrode the first and correct
+   behaviour depended on CSS file load order. Merged into one rule: the
+   context-menu coordinates win when set, otherwise the popover ones do. */
 [popover].positioned {
   position: fixed;
-  inset-inline-start: var(--popover-x, 0px) !important;
-  inset-block-start: var(--popover-y, 0px) !important;
-}
-
-/* Context menu positioning (used by context_menu_controller.js) */
-[popover].positioned {
   inset-inline-start: var(--context-menu-x, var(--popover-x, 0px)) !important;
   inset-block-start: var(--context-menu-y, var(--popover-y, 0px)) !important;
 }
@@ -33,19 +31,6 @@
   line-height: 0;
 }
 
-[data-controller*="rails-pulse--icon"].loading {
-  opacity: 0.6;
-}
-
-[data-controller*="rails-pulse--icon"].error {
-  opacity: 0.4;
-  filter: grayscale(1);
-}
-
-[data-controller*="rails-pulse--icon"].loaded {
-  opacity: 1;
-}
-
 /* CSP-safe icon rendering */
 [data-controller*="rails-pulse--icon"] svg {
   display: block;
@@ -65,22 +50,3 @@
   border-radius: 2px;
 }
 
-/* CSP Test Page Utilities */
-.csp-test-grid-single {
-  --columns: 1;
-}
-
-.csp-test-context-area {
-  padding: 2rem;
-  border: 2px dashed var(--color-border);
-  text-align: center;
-}
-
-.csp-test-nav-gap {
-  --column-gap: 1rem;
-}
-
-/* Sheet sizing for dialog */
-.csp-test-sheet {
-  --sheet-size: 288px;
-}

data/app/assets/stylesheets/rails_pulse/components/dashboard.css

@@ -23,48 +23,6 @@
   min-width: 0;
 }
 
-.dashboard-health-bar__controls {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: var(--size-4);
-  flex-shrink: 0;
-}
-
-/* Period Selector Button Group */
-.dashboard-health-bar__period-selector {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--rounded-md);
-  overflow: hidden;
-}
-
-.dashboard-health-bar__period-button {
-  padding: var(--size-0_5) var(--size-2_5);
-  font-size: var(--text-xs);
-  font-weight: var(--font-semibold);
-  text-decoration: none;
-  display: inline-block;
-  border: none;
-  cursor: pointer;
-}
-
-.dashboard-health-bar__period-button:not(:first-child) {
-  border-left: 1px solid var(--color-border);
-}
-
-.dashboard-health-bar__period-button[data-active="true"] {
-  background: var(--color-primary);
-  color: var(--color-text-reversed);
-}
-
-.dashboard-health-bar__period-button[data-active="false"] {
-  background: transparent;
-  color: var(--color-text-subtle);
-}
-
 /* Attention Section */
 .attention-section__divider {
   flex: 1;
@@ -167,20 +125,10 @@
   .dashboard-health-bar__content {
     gap: var(--size-3);
   }
-  .dashboard-health-bar__label {
-    width: 100%;
-    margin-bottom: var(--size-1);
-  }
   .dashboard-health-bar__badges {
     flex: 1;
     min-width: 0;
   }
-  .dashboard-health-bar__controls {
-    margin-left: 0;
-    width: 100%;
-    justify-content: space-between;
-    margin-top: var(--size-2);
-  }
 }
 
 @media (max-width: 640px) {

data/app/assets/stylesheets/rails_pulse/components/deployments.css

@@ -0,0 +1,39 @@
+/* Deployments dashboard panel */
+
+.deployments-panel-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--size-4);
+  margin-bottom: var(--size-4);
+  padding-bottom: var(--size-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.deployments-panel-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-3);
+}
+
+.deployments-panel-row {
+  display: grid;
+  grid-template-columns: 1fr auto 10.5rem;
+  gap: var(--size-3);
+  align-items: center;
+}
+
+.deployments-panel-row__time {
+  white-space: nowrap;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (max-width: 768px) {
+  .deployments-panel-row {
+    grid-template-columns: 1fr auto;
+  }
+
+  .deployments-panel-row__time {
+    grid-column: 1 / -1;
+  }
+}

data/app/assets/stylesheets/rails_pulse/components/dialog.css

@@ -49,8 +49,3 @@
   padding: var(--size-6);
 }
 
-.dialog__close {
-  inset-block-start: var(--size-3);
-  inset-inline-end:  var(--size-3);
-  position: absolute;
-}

data/app/assets/stylesheets/rails_pulse/components/input.css

@@ -43,20 +43,6 @@ html[data-color-scheme="dark"] .input:is(select):not([multiple], [size]) {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
 }
 
-.input--actor {
-  input {
-    border: 0; inline-size: 100%; outline: 0;
-  }
-
-  img:not([class]) {
-    filter: var(--input-icon-color, var(--color-filter-text));
-  }
-
-  &:focus-within {
-    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
-  }
-}
-
 .invalid-feedback {
   display: none;
 }

data/app/assets/stylesheets/rails_pulse/components/layouts.css

@@ -1,17 +1,3 @@
-.sidebar-layout {
-  display: grid;
-  grid-template-areas: "header header" "sidebar main";
-  grid-template-columns: var(--sidebar-width, 0) 1fr;
-  grid-template-rows: auto 1fr;
-  block-size: 100dvh;
-
-  @media (min-width: 48rem) {
-    --sidebar-border-width: var(--border);
-    --sidebar-padding: var(--size-2);
-    --sidebar-width: var(--max-i-3xs);
-  }
-}
-
 .header-layout {
   display: grid;
   grid-template-areas: "header" "main";
@@ -19,12 +5,6 @@
   block-size: 100dvh;
 }
 
-.centered-layout {
-  display: grid;
-  place-items: center;
-  block-size: 100dvh;
-}
-
 .container {
   inline-size: 100%;
   margin-inline: auto;

data/app/assets/stylesheets/rails_pulse/components/menu.css

@@ -5,22 +5,12 @@
   row-gap: var(--size-1);
 }
 
-.menu__header {
-  font-size: var(--text-sm);
-  font-weight: var(--font-semibold);
-  padding: var(--size-1_5) var(--size-2);
-}
-
 .menu__group {
   display: flex;
   flex-direction: column;
   row-gap: 1px;
 }
 
-.menu__separator {
-  margin-inline: -0.25rem;
-}
-
 .menu__item {
   --btn-border-color: transparent;
   --btn-box-shadow: none;
@@ -41,12 +31,6 @@
   }
 }
 
-.menu__item-key {
-  color: var(--color-text-subtle);
-  font-size: var(--text-xs);
-  margin-inline-start: auto;
-}
-
 .menu__item--active {
   --btn-background: var(--color-primary);
   --btn-color: var(--color-text-reversed);

data/app/assets/stylesheets/rails_pulse/components/sidebar_menu.css

@@ -56,28 +56,12 @@
   flex-direction: column;
 }
 
-.sidebar-menu__group-label {
-  color: var(--color-text-subtle);
-  font-size: var(--text-xs);
-  font-weight: var(--font-medium);
-  padding: var(--size-1_5) var(--size-2);
-}
-
 .sidebar-menu__items {
   display: flex;
   flex-direction: column;
   row-gap: var(--size-1);
 }
 
-.sidebar-menu__sub {
-  border-inline-start-width: var(--border);
-  display: flex;
-  flex-direction: column;
-  margin-inline-start: var(--size-4);
-  padding: var(--size-0_5) var(--size-2);
-  row-gap: var(--size-1);
-}
-
 /* Sheet component styles for mobile menu */
 .sheet {
   border: 0;

data/app/assets/stylesheets/rails_pulse/components/storage.css

@@ -0,0 +1,187 @@
+/* Storage status page */
+
+.health-badge-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.health-badge-link:hover {
+  text-decoration: none;
+}
+
+.health-badge-link:hover .badge {
+  background-color: var(--color-secondary);
+}
+
+.storage-overview-card {
+  min-height: 6.5rem;
+}
+
+.storage-panel-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--size-4);
+  margin-bottom: var(--size-4);
+  padding-bottom: var(--size-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.storage-panel-tables {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-3);
+}
+
+.storage-panel-row {
+  display: grid;
+  grid-template-columns: 7.5rem 1fr auto;
+  gap: var(--size-3);
+  align-items: center;
+}
+
+.storage-panel-row__label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.storage-panel-row__count {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.storage-fill--compact {
+  margin-block: 0;
+  height: 0.375rem;
+}
+
+@media (max-width: 768px) {
+  .storage-panel-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .storage-panel-row {
+    grid-template-columns: 1fr auto;
+  }
+
+  .storage-panel-row .storage-fill {
+    grid-column: 1 / -1;
+    order: 3;
+  }
+}
+
+.storage-health--healthy {
+  color: var(--color-positive);
+}
+
+.storage-health--warning {
+  color: var(--color-warning-text);
+}
+
+.storage-health--critical,
+.storage-health--disabled,
+.storage-health--error {
+  color: var(--color-negative);
+}
+
+.storage-tables {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-5);
+}
+
+.storage-table {
+  padding-bottom: var(--size-5);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.storage-table:last-child {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.storage-table__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--size-4);
+}
+
+.storage-table__counts {
+  display: flex;
+  align-items: center;
+  gap: var(--size-2);
+  flex-shrink: 0;
+}
+
+.storage-table__percent {
+  font-variant-numeric: tabular-nums;
+}
+
+.storage-table__percent--healthy {
+  color: var(--color-positive);
+  border-color: color-mix(in srgb, var(--color-positive) 30%, transparent);
+}
+
+.storage-table__percent--warning {
+  color: var(--color-warning-text);
+  border-color: color-mix(in srgb, #eab308 40%, transparent);
+}
+
+.storage-table__percent--critical,
+.storage-table__percent--error {
+  color: var(--color-negative);
+  border-color: color-mix(in srgb, var(--color-negative) 30%, transparent);
+}
+
+.storage-table__percent--uncapped {
+  color: var(--color-text-subtle);
+}
+
+.storage-fill {
+  height: 0.5rem;
+  margin-block: var(--size-2);
+  border-radius: var(--rounded-full, 999px);
+  background: var(--color-secondary);
+  overflow: hidden;
+}
+
+.storage-fill__bar {
+  height: 100%;
+  border-radius: inherit;
+  min-width: 0;
+}
+
+.storage-fill__bar--healthy {
+  background: var(--color-positive);
+}
+
+.storage-fill__bar--warning {
+  background: #eab308;
+}
+
+.storage-fill__bar--critical,
+.storage-fill__bar--error {
+  background: var(--color-negative);
+}
+
+.storage-fill__bar--uncapped {
+  background: transparent;
+}
+
+.storage-table__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--size-1) var(--size-4);
+}
+
+.storage-table__meta span + span::before {
+  content: none;
+}
+
+@media (max-width: 768px) {
+  .storage-table__header {
+    flex-direction: column;
+    gap: var(--size-2);
+  }
+}

data/app/assets/stylesheets/rails_pulse/components/tags.css

@@ -31,20 +31,6 @@
   padding-right: 3px !important;
 }
 
-/* Individual Tag */
-.tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  background-color: var(--color-background-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: 9999px;
-  font-size: 0.875rem;
-  line-height: 1.25;
-  white-space: nowrap;
-}
-
 /* Tag chips — pill shape with subtle translucent fill */
 .tag-list .badge {
   border-radius: 9999px;