rails_pulse 0.3.3 → 0.4.0.pre.2

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

@@ -0,0 +1,238 @@
+.backtrace {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.backtrace__frame {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.backtrace__frame:last-child {
+  border-bottom: none;
+}
+
+.backtrace__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 12px 7px 0;
+}
+
+/* App frames: highlighted with a coloured left accent */
+.backtrace__frame--app {
+  background-color: rgba(59, 130, 246, 0.08);
+  border-left: 3px solid var(--blue-400, #3b82f6);
+}
+
+/* Gem/stdlib frames: muted */
+.backtrace__frame--gem {
+  background-color: var(--color-surface);
+  border-left: 3px solid transparent;
+  opacity: 0.75;
+}
+
+.backtrace__frame--gem:hover {
+  opacity: 1;
+}
+
+.backtrace__location {
+  display: flex;
+  align-items: baseline;
+  gap: 0;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.backtrace__path {
+  color: var(--color-text-subtle);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.backtrace__file {
+  color: var(--color-text);
+  font-weight: 700;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.backtrace__method {
+  flex-shrink: 0;
+  color: var(--color-text-subtle);
+  white-space: nowrap;
+  font-size: 11px;
+}
+
+.backtrace__method span {
+  color: var(--color-text);
+  font-weight: 500;
+}
+
+/* Source expand toggle — only the chevron is interactive */
+
+.backtrace__source-details {
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.backtrace__toggle-spacer {
+  flex-shrink: 0;
+  width: 40px;
+}
+
+.backtrace__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  list-style: none;
+  color: var(--color-text-subtle);
+  font-size: 32px;
+  border-radius: 3px;
+  transition: background-color 0.1s ease, color 0.1s ease;
+  user-select: none;
+}
+
+.backtrace__toggle::-webkit-details-marker {
+  display: none;
+}
+
+.backtrace__toggle::after {
+  content: "›";
+  display: block;
+  transition: transform 0.15s ease;
+}
+
+.backtrace__toggle:hover {
+  background-color: var(--color-bg-hover, rgba(0,0,0,0.06));
+  color: var(--color-text);
+}
+
+.backtrace__source-details[open] .backtrace__toggle::after {
+  transform: rotate(90deg);
+}
+
+/* Source code panel */
+
+.backtrace__source {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  background-color: var(--color-bg-subtle, #f9fafb);
+  border-top: 1px solid var(--color-border-light);
+  overflow-x: auto;
+}
+
+.backtrace__source--hidden {
+  display: none;
+}
+
+.backtrace__frame:has(.backtrace__source-details[open]) .backtrace__source {
+  display: block;
+}
+
+.backtrace__source-line {
+  display: flex;
+  gap: 0;
+  line-height: 1.6;
+  white-space: pre;
+}
+
+.backtrace__source-line--current {
+  background-color: rgba(234, 179, 8, 0.15);
+}
+
+.backtrace__source-lineno {
+  flex-shrink: 0;
+  width: 44px;
+  padding: 0 12px 0 8px;
+  text-align: right;
+  color: var(--color-text-subtle);
+  border-right: 1px solid var(--color-border-light);
+  user-select: none;
+}
+
+.backtrace__source-line--current .backtrace__source-lineno {
+  color: rgba(161, 98, 7, 0.9);
+  background-color: rgba(234, 179, 8, 0.2);
+  font-weight: 700;
+}
+
+.backtrace__source-code {
+  padding: 0 12px;
+  color: var(--color-text);
+  flex: 1;
+}
+
+/* Request params */
+
+.exception-params {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--color-border-light);
+}
+
+.exception-params__row {
+  display: flex;
+  gap: 16px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--color-border-light);
+  align-items: baseline;
+}
+
+.exception-params__row:last-child {
+  border-bottom: none;
+}
+
+
+.exception-params__key {
+  flex-shrink: 0;
+  width: 200px;
+  color: var(--color-text-subtle);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.exception-params__value {
+  color: var(--color-text);
+  word-break: break-all;
+}
+
+/* Dark mode */
+html[data-color-scheme="dark"] .backtrace__frame--app {
+  background-color: rgba(59, 130, 246, 0.15);
+  border-left-color: var(--blue-400, #3b82f6);
+}
+
+html[data-color-scheme="dark"] .backtrace__frame--gem {
+  background-color: transparent;
+}
+
+html[data-color-scheme="dark"] .backtrace__source {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+html[data-color-scheme="dark"] .backtrace__source-line--current {
+  background-color: rgba(234, 179, 8, 0.1);
+}
+
+html[data-color-scheme="dark"] .backtrace__source-line--current .backtrace__source-lineno {
+  color: rgba(253, 224, 71, 0.8);
+  background-color: rgba(234, 179, 8, 0.12);
+}

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);