rails-profiler 0.19.2 → 0.21.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8c4382b8c5ad1cd162614ae7eaf1ca940f979c86c8daf511a72a697d9336817e
-  data.tar.gz: 88e34726b5a3944a12656aab0259f71534b5b085bb6afd7e1dd06857bd8b081b
+  metadata.gz: 80a34504e3cb67a077d5f46265cbc265cbf7704f89ad06f90e5ab5df22651a70
+  data.tar.gz: d23a6d0d9f107611d66dfe34987447efde5f74f2562efd146d43d910fe431c6a
 SHA512:
-  metadata.gz: '0378c6853fd21cbf6ca6c7f999c6cff53b2896e03422f326350fac13b8c83f66e4e72bdbf9602b3c84b50ec93f8cec5b2bcbbe9491257c1d4619095a98a17dbd'
-  data.tar.gz: a3f70d63f227306d3f01138bbbd3131fc2862f9545b73221f366d580e6c0bd0c809a0258372474fc92dd1b0e2e5e880b1ecd9e765332cff89f09a5aa60a118e8
+  metadata.gz: 668d228ede43471fc71a5d65d6498bfd00606865f7cad69dd23e03f79a4e84a2ba5f34dbc2d9e07809df4319946055464b7b8e615ee29e14c8cfafdef10ffc4a
+  data.tar.gz: 16926d1a141c64cc72110698cd21e4d5c26d6e9022cd17ad6ba5ba3112aa98ce1917db9d005c112fac62190790433c06b24f1d9a85648edabf679664eb89b30d

data/app/assets/builds/profiler-toolbar.js

@@ -68,8 +68,8 @@
     }
   }
   function P(n2, l3, u4, t3, i3, r3, o3, e3, f4, c3, s3) {
-    var a3, h3, y3, d3, w3, g2, _2, m3 = t3 && t3.__k || v, b = l3.length;
-    for (f4 = A(u4, l3, m3, f4, b), a3 = 0; a3 < b; a3++) null != (y3 = u4.__k[a3]) && (h3 = -1 != y3.__i && m3[y3.__i] || p, y3.__i = a3, g2 = z(n2, y3, h3, i3, r3, o3, e3, f4, c3, s3), d3 = y3.__e, y3.ref && h3.ref != y3.ref && (h3.ref && D(h3.ref, null, y3), s3.push(y3.ref, y3.__c || d3, y3)), null == w3 && null != d3 && (w3 = d3), (_2 = !!(4 & y3.__u)) || h3.__k === y3.__k ? f4 = H(y3, f4, n2, _2) : "function" == typeof y3.type && void 0 !== g2 ? f4 = g2 : d3 && (f4 = d3.nextSibling), y3.__u &= -7);
+    var a3, h3, y3, d3, w3, g2, _3, m3 = t3 && t3.__k || v, b = l3.length;
+    for (f4 = A(u4, l3, m3, f4, b), a3 = 0; a3 < b; a3++) null != (y3 = u4.__k[a3]) && (h3 = -1 != y3.__i && m3[y3.__i] || p, y3.__i = a3, g2 = z(n2, y3, h3, i3, r3, o3, e3, f4, c3, s3), d3 = y3.__e, y3.ref && h3.ref != y3.ref && (h3.ref && D(h3.ref, null, y3), s3.push(y3.ref, y3.__c || d3, y3)), null == w3 && null != d3 && (w3 = d3), (_3 = !!(4 & y3.__u)) || h3.__k === y3.__k ? f4 = H(y3, f4, n2, _3) : "function" == typeof y3.type && void 0 !== g2 ? f4 = g2 : d3 && (f4 = d3.nextSibling), y3.__u &= -7);
     return u4.__e = w3, f4;
   }
   function A(n2, l3, u4, t3, i3) {
@@ -130,11 +130,11 @@
     };
   }
   function z(n2, u4, t3, i3, r3, o3, e3, f4, c3, s3) {
-    var a3, h3, p3, y3, _2, m3, b, S2, C3, M2, $2, I2, A3, H2, L, T3 = u4.type;
+    var a3, h3, p3, y3, _3, m3, b, S2, C3, M2, $2, I2, A3, H2, L, T3 = u4.type;
     if (void 0 !== u4.constructor) return null;
     128 & t3.__u && (c3 = !!(32 & t3.__u), o3 = [f4 = u4.__e = t3.__e]), (a3 = l.__b) && a3(u4);
     n: if ("function" == typeof T3) try {
-      if (S2 = u4.props, C3 = T3.prototype && T3.prototype.render, M2 = (a3 = T3.contextType) && i3[a3.__c], $2 = a3 ? M2 ? M2.props.value : a3.__ : i3, t3.__c ? b = (h3 = u4.__c = t3.__c).__ = h3.__E : (C3 ? u4.__c = h3 = new T3(S2, $2) : (u4.__c = h3 = new x(S2, $2), h3.constructor = T3, h3.render = G), M2 && M2.sub(h3), h3.state || (h3.state = {}), h3.__n = i3, p3 = h3.__d = true, h3.__h = [], h3._sb = []), C3 && null == h3.__s && (h3.__s = h3.state), C3 && null != T3.getDerivedStateFromProps && (h3.__s == h3.state && (h3.__s = w({}, h3.__s)), w(h3.__s, T3.getDerivedStateFromProps(S2, h3.__s))), y3 = h3.props, _2 = h3.state, h3.__v = u4, p3) C3 && null == T3.getDerivedStateFromProps && null != h3.componentWillMount && h3.componentWillMount(), C3 && null != h3.componentDidMount && h3.__h.push(h3.componentDidMount);
+      if (S2 = u4.props, C3 = T3.prototype && T3.prototype.render, M2 = (a3 = T3.contextType) && i3[a3.__c], $2 = a3 ? M2 ? M2.props.value : a3.__ : i3, t3.__c ? b = (h3 = u4.__c = t3.__c).__ = h3.__E : (C3 ? u4.__c = h3 = new T3(S2, $2) : (u4.__c = h3 = new x(S2, $2), h3.constructor = T3, h3.render = G), M2 && M2.sub(h3), h3.state || (h3.state = {}), h3.__n = i3, p3 = h3.__d = true, h3.__h = [], h3._sb = []), C3 && null == h3.__s && (h3.__s = h3.state), C3 && null != T3.getDerivedStateFromProps && (h3.__s == h3.state && (h3.__s = w({}, h3.__s)), w(h3.__s, T3.getDerivedStateFromProps(S2, h3.__s))), y3 = h3.props, _3 = h3.state, h3.__v = u4, p3) C3 && null == T3.getDerivedStateFromProps && null != h3.componentWillMount && h3.componentWillMount(), C3 && null != h3.componentDidMount && h3.__h.push(h3.componentDidMount);
       else {
         if (C3 && null == T3.getDerivedStateFromProps && S2 !== y3 && null != h3.componentWillReceiveProps && h3.componentWillReceiveProps(S2, $2), u4.__v == t3.__v || !h3.__e && null != h3.shouldComponentUpdate && false === h3.shouldComponentUpdate(S2, h3.__s, $2)) {
           u4.__v != t3.__v && (h3.props = S2, h3.state = h3.__s, h3.__d = false), u4.__e = t3.__e, u4.__k = t3.__k, u4.__k.some(function(n3) {
@@ -143,14 +143,14 @@
           break n;
         }
         null != h3.componentWillUpdate && h3.componentWillUpdate(S2, h3.__s, $2), C3 && null != h3.componentDidUpdate && h3.__h.push(function() {
-          h3.componentDidUpdate(y3, _2, m3);
+          h3.componentDidUpdate(y3, _3, m3);
         });
       }
       if (h3.context = $2, h3.props = S2, h3.__P = n2, h3.__e = false, I2 = l.__r, A3 = 0, C3) h3.state = h3.__s, h3.__d = false, I2 && I2(u4), a3 = h3.render(h3.props, h3.state, h3.context), v.push.apply(h3.__h, h3._sb), h3._sb = [];
       else do {
         h3.__d = false, I2 && I2(u4), a3 = h3.render(h3.props, h3.state, h3.context), h3.state = h3.__s;
       } while (h3.__d && ++A3 < 25);
-      h3.state = h3.__s, null != h3.getChildContext && (i3 = w(w({}, i3), h3.getChildContext())), C3 && !p3 && null != h3.getSnapshotBeforeUpdate && (m3 = h3.getSnapshotBeforeUpdate(y3, _2)), H2 = null != a3 && a3.type === k && null == a3.key ? q(a3.props.children) : a3, f4 = P(n2, d(H2) ? H2 : [H2], u4, t3, i3, r3, o3, e3, f4, c3, s3), h3.base = u4.__e, u4.__u &= -161, h3.__h.length && e3.push(h3), b && (h3.__E = h3.__ = null);
+      h3.state = h3.__s, null != h3.getChildContext && (i3 = w(w({}, i3), h3.getChildContext())), C3 && !p3 && null != h3.getSnapshotBeforeUpdate && (m3 = h3.getSnapshotBeforeUpdate(y3, _3)), H2 = null != a3 && a3.type === k && null == a3.key ? q(a3.props.children) : a3, f4 = P(n2, d(H2) ? H2 : [H2], u4, t3, i3, r3, o3, e3, f4, c3, s3), h3.base = u4.__e, u4.__u &= -161, h3.__h.length && e3.push(h3), b && (h3.__E = h3.__ = null);
     } catch (n3) {
       if (u4.__v = null, c3 || null != o3) if (n3.then) {
         for (u4.__u |= c3 ? 160 : 128; f4 && 8 == f4.nodeType && f4.nextSibling; ) f4 = f4.nextSibling;
@@ -184,7 +184,7 @@
     return "object" != typeof n2 || null == n2 || n2.__b > 0 ? n2 : d(n2) ? n2.map(q) : w({}, n2);
   }
   function B(u4, t3, i3, r3, o3, e3, f4, c3, s3) {
-    var a3, h3, v3, y3, w3, _2, m3, b = i3.props || p, k3 = t3.props, x2 = t3.type;
+    var a3, h3, v3, y3, w3, _3, m3, b = i3.props || p, k3 = t3.props, x2 = t3.type;
     if ("svg" == x2 ? o3 = "http://www.w3.org/2000/svg" : "math" == x2 ? o3 = "http://www.w3.org/1998/Math/MathML" : o3 || (o3 = "http://www.w3.org/1999/xhtml"), null != e3) {
       for (a3 = 0; a3 < e3.length; a3++) if ((w3 = e3[a3]) && "setAttribute" in w3 == !!x2 && (x2 ? w3.localName == x2 : 3 == w3.nodeType)) {
         u4 = w3, e3[a3] = null;
@@ -199,10 +199,10 @@
     else {
       if (e3 = e3 && n.call(u4.childNodes), !c3 && null != e3) for (b = {}, a3 = 0; a3 < u4.attributes.length; a3++) b[(w3 = u4.attributes[a3]).name] = w3.value;
       for (a3 in b) w3 = b[a3], "dangerouslySetInnerHTML" == a3 ? v3 = w3 : "children" == a3 || a3 in k3 || "value" == a3 && "defaultValue" in k3 || "checked" == a3 && "defaultChecked" in k3 || F(u4, a3, null, w3, o3);
-      for (a3 in k3) w3 = k3[a3], "children" == a3 ? y3 = w3 : "dangerouslySetInnerHTML" == a3 ? h3 = w3 : "value" == a3 ? _2 = w3 : "checked" == a3 ? m3 = w3 : c3 && "function" != typeof w3 || b[a3] === w3 || F(u4, a3, w3, b[a3], o3);
+      for (a3 in k3) w3 = k3[a3], "children" == a3 ? y3 = w3 : "dangerouslySetInnerHTML" == a3 ? h3 = w3 : "value" == a3 ? _3 = w3 : "checked" == a3 ? m3 = w3 : c3 && "function" != typeof w3 || b[a3] === w3 || F(u4, a3, w3, b[a3], o3);
       if (h3) c3 || v3 && (h3.__html == v3.__html || h3.__html == u4.innerHTML) || (u4.innerHTML = h3.__html), t3.__k = [];
       else if (v3 && (u4.innerHTML = ""), P("template" == t3.type ? u4.content : u4, d(y3) ? y3 : [y3], t3, i3, r3, "foreignObject" == x2 ? "http://www.w3.org/1999/xhtml" : o3, e3, f4, e3 ? e3[0] : i3.__k && S(i3, 0), c3, s3), null != e3) for (a3 = e3.length; a3--; ) g(e3[a3]);
-      c3 || (a3 = "value", "progress" == x2 && null == _2 ? u4.removeAttribute("value") : null != _2 && (_2 !== u4[a3] || "progress" == x2 && !_2 || "option" == x2 && _2 != b[a3]) && F(u4, a3, _2, b[a3], o3), a3 = "checked", null != m3 && m3 != u4[a3] && F(u4, a3, m3, b[a3], o3));
+      c3 || (a3 = "value", "progress" == x2 && null == _3 ? u4.removeAttribute("value") : null != _3 && (_3 !== u4[a3] || "progress" == x2 && !_3 || "option" == x2 && _3 != b[a3]) && F(u4, a3, _3, b[a3], o3), a3 = "checked", null != m3 && m3 != u4[a3] && F(u4, a3, m3, b[a3], o3));
     }
     return u4;
   }
@@ -314,6 +314,10 @@
     var i3 = p2(t2++, 3);
     !c2.__s && C2(i3.__H, u4) && (i3.__ = n2, i3.u = u4, r2.__H.__h.push(i3));
   }
+  function _2(n2, u4) {
+    var i3 = p2(t2++, 4);
+    !c2.__s && C2(i3.__H, u4) && (i3.__ = n2, i3.u = u4, r2.__h.push(i3));
+  }
   function A2(n2) {
     return o2 = 5, T2(function() {
       return { current: n2 };
@@ -427,7 +431,7 @@
       }
       hideTimer.current = setTimeout(() => setVisible(false), 150);
     };
-    y2(() => {
+    _2(() => {
       if (visible && panelRef.current) {
         const el = panelRef.current;
         el.style.left = "50%";
@@ -453,8 +457,7 @@
       "div",
       {
         ref: panelRef,
-        class: `profiler-toolbar-panel${panelLarge ? " profiler-toolbar-panel-large" : ""}`,
-        style: { display: visible ? "block" : "none" },
+        class: `profiler-toolbar-panel${panelLarge ? " profiler-toolbar-panel-large" : ""}${visible ? " is-visible" : ""}`,
         onMouseEnter: show,
         onMouseLeave: hide,
         children: panel
@@ -1048,7 +1051,7 @@
     const dbClass = (dbData?.slow_queries ?? 0) > 0 ? "profiler-text--error" : "profiler-text--success";
     const ajaxClass = (ajaxData?.total_requests ?? 0) > 20 ? "profiler-text--error" : "profiler-text--success";
     const cacheClass = (cacheData?.hit_rate ?? 0) > 80 ? "profiler-text--success" : "profiler-text--warning";
-    return /* @__PURE__ */ u3("div", { class: "profiler-toolbar-container", children: [
+    return /* @__PURE__ */ u3(k, { children: /* @__PURE__ */ u3("div", { class: "profiler-toolbar-container", children: [
       requestData && /* @__PURE__ */ u3(k, { children: [
         /* @__PURE__ */ u3(
           ToolbarItem,
@@ -1291,67 +1294,84 @@
           ]
         }
       ),
-      /* @__PURE__ */ u3("a", { href: "/_profiler", class: "profiler-toolbar-item", children: "\u2B21 Profiler" })
-    ] });
+      /* @__PURE__ */ u3("a", { href: "/_profiler", class: "profiler-toolbar-item profiler-toolbar-logo", children: "\u2B21 Profiler" })
+    ] }) });
   }
 
   // app/assets/typescript/profiler/toolbar-bundle.tsx
-  function applyTheme(el) {
+  var ANIM_MS = 280;
+  function applyTheme(elements) {
     const stored = localStorage.getItem("profiler-theme");
     const theme = stored === "light" ? "light" : stored === "dark" ? "dark" : window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
-    el.setAttribute("data-theme", theme);
+    elements.forEach((el) => el.setAttribute("data-theme", theme));
+  }
+  function ToolbarMount({ token }) {
+    const [profile, setProfile] = d2(null);
+    y2(() => {
+      const load = () => {
+        fetch(`/_profiler/api/toolbar/${token}`).then((res) => res.json()).then((data) => {
+          if (data.profile) setProfile(data.profile);
+        }).catch((err) => console.debug("Profiler toolbar load failed:", err));
+      };
+      window.__PROFILER_REFRESH_TOOLBAR__ = load;
+      load();
+    }, [token]);
+    if (!profile) return null;
+    return /* @__PURE__ */ u3(ToolbarApp, { profile, token });
   }
   function mountToolbar() {
     const el = document.getElementById("profiler-toolbar");
-    if (!el) return;
+    const toggleEl = document.getElementById("profiler-toolbar-toggle");
+    if (!el || !toggleEl) return;
     const token = el.dataset.token;
     if (!token) return;
-    applyTheme(el);
+    const themeEls = [el, toggleEl];
+    applyTheme(themeEls);
     window.addEventListener("storage", (e3) => {
-      if (e3.key === "profiler-theme") applyTheme(el);
+      if (e3.key === "profiler-theme") applyTheme(themeEls);
     });
     window.addEventListener("profiler:theme-change", ((e3) => {
-      if (e3.detail?.theme) el.setAttribute("data-theme", e3.detail.theme);
+      if (e3.detail?.theme) themeEls.forEach((elem) => elem.setAttribute("data-theme", e3.detail.theme));
     }));
-    const renderToolbar = (profile) => {
-      J(/* @__PURE__ */ u3(ToolbarApp, { profile, token }), el);
-      applyTheme(el);
-    };
-    const loadAndRender = () => {
-      fetch(`/_profiler/api/toolbar/${token}`).then((res) => res.json()).then((data) => {
-        if (data.profile) renderToolbar(data.profile);
-      }).catch((err) => console.debug("Profiler toolbar load failed:", err));
-    };
-    window.__PROFILER_REFRESH_TOOLBAR__ = loadAndRender;
-    loadAndRender();
+    let isCollapsed = localStorage.getItem("profiler-toolbar-collapsed") === "true";
+    toggleEl.dataset.collapsed = String(isCollapsed);
+    if (isCollapsed && !el.style.transform) {
+      el.style.animation = "none";
+      el.style.transform = "translateX(calc(100% + 44px))";
+    }
+    if (!isCollapsed) {
+      setTimeout(() => {
+        el.style.animation = "none";
+      }, 400);
+    }
+    function toggleCollapse() {
+      const next = !isCollapsed;
+      isCollapsed = next;
+      localStorage.setItem("profiler-toolbar-collapsed", String(next));
+      toggleEl.dataset.collapsed = String(next);
+      if (next) {
+        el.style.transition = `transform ${ANIM_MS}ms cubic-bezier(0.4,0,0.2,1)`;
+        el.style.transform = "translateX(calc(100% + 44px))";
+      } else {
+        el.style.transition = "none";
+        el.style.transform = "translateX(calc(100% + 44px))";
+        void el.offsetWidth;
+        el.style.transition = `transform ${ANIM_MS}ms cubic-bezier(0.4,0,0.2,1)`;
+        el.style.transform = "translateX(0)";
+        setTimeout(() => {
+          el.style.transform = "";
+          el.style.transition = "";
+        }, ANIM_MS + 50);
+      }
+    }
+    toggleEl.addEventListener("click", toggleCollapse);
     document.addEventListener("keydown", (e3) => {
       if (e3.altKey && e3.key === "p") {
         e3.preventDefault();
-        const hidden2 = el.dataset.hidden === "true";
-        if (hidden2) {
-          el.dataset.hidden = "false";
-          el.style.transform = "translateY(0)";
-          el.style.opacity = "1";
-          localStorage.setItem("profiler-toolbar-hidden", "false");
-        } else {
-          el.dataset.hidden = "true";
-          el.style.transform = "translateY(100%)";
-          el.style.opacity = "0";
-          localStorage.setItem("profiler-toolbar-hidden", "true");
-        }
-      }
-      if (e3.key === "Escape") {
-        el.dataset.hidden = "true";
-        el.style.transform = "translateY(100%)";
-        el.style.opacity = "0";
+        toggleCollapse();
       }
     });
-    const hidden = localStorage.getItem("profiler-toolbar-hidden") === "true";
-    if (hidden) {
-      el.dataset.hidden = "true";
-      el.style.transform = "translateY(100%)";
-      el.style.opacity = "0";
-    }
+    J(/* @__PURE__ */ u3(ToolbarMount, { token }), el);
   }
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", mountToolbar);

data/app/assets/builds/profiler.css

@@ -521,6 +521,34 @@ tr:hover .btn-row-delete {
   border: 1px solid var(--profiler-border);
 }
 
+.profiler-version-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: var(--profiler-radius-sm);
+  font-family: var(--profiler-font-mono);
+  font-size: var(--profiler-text-xs);
+  color: var(--profiler-text-muted);
+  background: var(--profiler-bg-lighter);
+  border: 1px solid var(--profiler-border);
+}
+
+.profiler-version-warn {
+  margin-left: 6px;
+  cursor: help;
+  font-size: var(--profiler-text-xs);
+}
+
+.profiler-version-mismatch {
+  margin-top: var(--profiler-space-2);
+  padding: var(--profiler-space-2) var(--profiler-space-3);
+  border-radius: var(--profiler-radius-sm);
+  font-size: var(--profiler-text-sm);
+  background: var(--profiler-warning-bg);
+  color: var(--profiler-warning);
+  border: 1px solid rgba(251, 146, 60, 0.3);
+}
+
 @keyframes fadeInDown {
   from {
     opacity: 0;
@@ -1367,6 +1395,26 @@ tr:hover .btn-row-delete {
   color: var(--profiler-text-muted);
 }
 
+@keyframes pfPop {
+  0% {
+    transform: scaleX(1);
+  }
+  15% {
+    transform: scaleX(1.18);
+  }
+  40% {
+    transform: scaleX(0.87);
+  }
+  65% {
+    transform: scaleX(1.08);
+  }
+  85% {
+    transform: scaleX(0.97);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
 #profiler-toolbar {
   position: fixed;
   bottom: 0;
@@ -1381,6 +1429,7 @@ tr:hover .btn-row-delete {
   font-family: var(--profiler-font-mono);
   font-size: 11px;
   animation: toolbarIn 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
+  transition: left 280ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 #profiler-toolbar::before {
   content: "";
@@ -1436,12 +1485,10 @@ tr:hover .btn-row-delete {
   background: var(--profiler-accent);
   transform: scaleX(0);
   transform-origin: left;
-  transition: transform var(--profiler-transition-base);
+  transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
 }
 .profiler-toolbar-item:last-child {
   border-right: none;
-  margin-left: auto;
-  padding-left: 20px;
 }
 .profiler-toolbar-item:hover {
   color: var(--profiler-text);
@@ -1451,12 +1498,30 @@ tr:hover .btn-row-delete {
   transform: scaleX(1);
 }
 
+.profiler-toolbar-collapse-btn {
+  margin-left: auto;
+  padding: 0 14px;
+  border-left: 1px solid var(--profiler-border);
+  font-size: 10px;
+  color: var(--profiler-text-muted);
+  cursor: pointer;
+}
+.profiler-toolbar-collapse-btn:hover {
+  color: var(--profiler-text);
+  background: var(--profiler-accent-bg);
+  animation: pfPop 380ms ease-out both;
+}
+
 a.profiler-toolbar-item {
   cursor: pointer;
   font-family: var(--profiler-font-mono);
   font-size: 11px;
 }
 
+.profiler-toolbar-logo {
+  border-right: 1px solid var(--profiler-border) !important;
+}
+
 .profiler-text--success {
   color: var(--profiler-success) !important;
 }
@@ -1477,19 +1542,22 @@ a.profiler-toolbar-item {
   color: var(--profiler-accent) !important;
 }
 
-a.profiler-toolbar-item.profiler-text--error::after {
+.profiler-toolbar-item.profiler-text--error::after {
   background: var(--profiler-error);
 }
 
-a.profiler-toolbar-item.profiler-text--warning::after {
+.profiler-toolbar-item.profiler-text--warning::after {
   background: var(--profiler-warning);
 }
 
+.profiler-toolbar-item.profiler-text--success::after {
+  background: var(--profiler-success);
+}
+
 .profiler-toolbar-hoverable {
   position: relative;
 }
 .profiler-toolbar-hoverable .profiler-toolbar-panel {
-  display: none;
   position: absolute;
   bottom: calc(100% + 12px);
   left: 50%;
@@ -1502,6 +1570,16 @@ a.profiler-toolbar-item.profiler-text--warning::after {
   box-shadow: var(--profiler-shadow-xl), 0 0 0 1px var(--profiler-border-accent);
   z-index: var(--profiler-z-panel);
   overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 160ms;
+}
+.profiler-toolbar-hoverable .profiler-toolbar-panel.is-visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
 }
 .profiler-toolbar-hoverable .profiler-toolbar-panel::before {
   content: "";
@@ -1646,6 +1724,16 @@ a.profiler-toolbar-item.profiler-text--warning::after {
   margin-top: 6px;
 }
 
+#profiler-toolbar[data-collapsed=true] .profiler-toolbar-item:not(.profiler-toolbar-collapse-btn) {
+  display: none;
+}
+#profiler-toolbar[data-collapsed=true] .profiler-toolbar-collapse-btn {
+  margin-left: 0;
+}
+#profiler-toolbar[data-collapsed=true]::before {
+  opacity: 0;
+}
+
 .container > table {
   width: 100%;
   border-collapse: collapse;

data/app/assets/builds/profiler.js

@@ -396,6 +396,11 @@
     return "function" == typeof t3 ? t3(n2) : t3;
   }
 
+  // app/assets/typescript/profiler/dashboard/utils.ts
+  function getGemVersion() {
+    return document.querySelector('meta[name="profiler-version"]')?.content ?? "";
+  }
+
   // app/assets/typescript/profiler/components/dashboard/tabs/shared/utils.ts
   function methodBadge(method) {
     const map = { GET: "info", POST: "success", PUT: "warning", PATCH: "warning", DELETE: "error" };
@@ -1635,6 +1640,7 @@
     { key: "has_exception", label: "Has exception" }
   ];
   function ProfileList() {
+    const currentVersion = getGemVersion();
     const params = new URLSearchParams(window.location.search);
     const initialSection = () => {
       const s3 = params.get("section");
@@ -1982,7 +1988,11 @@
           /* @__PURE__ */ u3("span", { class: "h1-emoji", children: "\u{1F50D}" }),
           " Rails Profiler"
         ] }),
-        /* @__PURE__ */ u3("p", { children: "Recent profiled requests and jobs" })
+        /* @__PURE__ */ u3("p", { children: "Recent profiled requests and jobs" }),
+        currentVersion && /* @__PURE__ */ u3("span", { class: "profiler-version-badge", children: [
+          "v",
+          currentVersion
+        ] })
       ] }),
       /* @__PURE__ */ u3("div", { class: "profiler-panel profiler-mb-6", children: [
         /* @__PURE__ */ u3("div", { class: "tabs", children: [
@@ -2092,7 +2102,10 @@
               /* @__PURE__ */ u3("tbody", { children: sortedProfiles.map((p3) => /* @__PURE__ */ u3("tr", { children: [
                 /* @__PURE__ */ u3("td", { children: formatTime(p3.started_at) }),
                 /* @__PURE__ */ u3("td", { children: /* @__PURE__ */ u3("span", { class: methodClass(p3.method), children: p3.method }) }),
-                /* @__PURE__ */ u3("td", { children: /* @__PURE__ */ u3("a", { href: `${BASE}/profiles/${p3.token}`, children: p3.path }) }),
+                /* @__PURE__ */ u3("td", { children: [
+                  /* @__PURE__ */ u3("a", { href: `${BASE}/profiles/${p3.token}`, children: p3.path }),
+                  p3.gem_version && p3.gem_version !== currentVersion && /* @__PURE__ */ u3("span", { class: "profiler-version-warn", title: `Captur\xE9 avec v${p3.gem_version} (actuel : v${currentVersion})`, children: "\u26A0\uFE0F" })
+                ] }),
                 /* @__PURE__ */ u3("td", { children: /* @__PURE__ */ u3("span", { class: durationClass(p3.duration), children: [
                   p3.duration.toFixed(2),
                   " ms"
@@ -2169,7 +2182,10 @@
                 const isFailed = p3.status === 500;
                 return /* @__PURE__ */ u3("tr", { children: [
                   /* @__PURE__ */ u3("td", { children: formatTime(p3.started_at) }),
-                  /* @__PURE__ */ u3("td", { children: /* @__PURE__ */ u3("a", { href: `${BASE}/profiles/${p3.token}`, children: p3.path }) }),
+                  /* @__PURE__ */ u3("td", { children: [
+                    /* @__PURE__ */ u3("a", { href: `${BASE}/profiles/${p3.token}`, children: p3.path }),
+                    p3.gem_version && p3.gem_version !== currentVersion && /* @__PURE__ */ u3("span", { class: "profiler-version-warn", title: `Captur\xE9 avec v${p3.gem_version} (actuel : v${currentVersion})`, children: "\u26A0\uFE0F" })
+                  ] }),
                   /* @__PURE__ */ u3("td", { children: /* @__PURE__ */ u3("span", { class: "profiler-text--xs profiler-text--mono", children: jobData?.queue || "-" }) }),
                   /* @__PURE__ */ u3("td", { children: /* @__PURE__ */ u3("span", { class: durationClass(p3.duration), children: [
                     p3.duration.toFixed(2),
@@ -4482,7 +4498,17 @@
               " MB"
             ] })
           ] }),
-          /* @__PURE__ */ u3("span", { style: "color:var(--profiler-text-muted)", children: new Date(profile.started_at).toLocaleString("en", { hour12: false, month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" }) })
+          /* @__PURE__ */ u3("span", { style: "color:var(--profiler-text-muted)", children: new Date(profile.started_at).toLocaleString("en", { hour12: false, month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" }) }),
+          profile.gem_version && /* @__PURE__ */ u3("span", { class: "profiler-version-badge", children: [
+            "v",
+            profile.gem_version
+          ] })
+        ] }),
+        profile.gem_version && profile.gem_version !== getGemVersion() && /* @__PURE__ */ u3("div", { class: "profiler-version-mismatch", children: [
+          "\u26A0\uFE0F Profil captur\xE9 avec la version ",
+          /* @__PURE__ */ u3("strong", { children: profile.gem_version }),
+          " \u2014 version actuelle : ",
+          /* @__PURE__ */ u3("strong", { children: getGemVersion() })
         ] })
       ] }),
       /* @__PURE__ */ u3("div", { class: "profiler-panel profiler-mb-6", children: [
@@ -4628,8 +4654,18 @@
               (profile.memory / 1024 / 1024).toFixed(2),
               " MB"
             ] })
+          ] }),
+          profile.gem_version && /* @__PURE__ */ u3("span", { class: "profiler-version-badge", children: [
+            "v",
+            profile.gem_version
           ] })
         ] }),
+        profile.gem_version && profile.gem_version !== getGemVersion() && /* @__PURE__ */ u3("div", { class: "profiler-version-mismatch", children: [
+          "\u26A0\uFE0F Profil captur\xE9 avec la version ",
+          /* @__PURE__ */ u3("strong", { children: profile.gem_version }),
+          " \u2014 version actuelle : ",
+          /* @__PURE__ */ u3("strong", { children: getGemVersion() })
+        ] }),
         parent && /* @__PURE__ */ u3("div", { class: "profiler-flex profiler-flex--gap-2 profiler-mt-2 profiler-text--sm", children: [
           /* @__PURE__ */ u3("span", { style: "color:var(--profiler-text-muted)", children: "Triggered by:" }),
           parent.profile_type === "http" ? /* @__PURE__ */ u3("span", { children: [

data/app/views/layouts/profiler/application.html.erb

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
+    <meta name="profiler-version" content="<%= Profiler::VERSION %>">
 
     <link rel="stylesheet" href="/_profiler/assets/profiler.css">
     <script src="/_profiler/assets/profiler.js" defer></script>

data/app/views/layouts/profiler/embedded.html.erb

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
+  <meta name="profiler-version" content="<%= Profiler::VERSION %>">
 
   <link rel="stylesheet" href="/_profiler/assets/profiler.css">
   <script src="/_profiler/assets/profiler.js" defer></script>

data/lib/profiler/job_profiler.rb

@@ -50,6 +50,7 @@ module Profiler
     def run(&block)
       profile = Models::Profile.new
       profile.profile_type = "job"
+      profile.gem_version = Profiler::VERSION
       profile.path = @job_class
       profile.method = "JOB"
       profile.parent_token = @parent_token if @parent_token

data/lib/profiler/mcp/tools/get_profile_detail.rb

@@ -76,6 +76,13 @@ module Profiler
           lines << "**Duration:** #{profile.duration.round(2)} ms"
           lines << "**Memory:** #{(profile.memory / 1024.0 / 1024.0).round(2)} MB" if profile.memory
           lines << "**Time:** #{profile.started_at}"
+          if profile.gem_version
+            if profile.gem_version != Profiler::VERSION
+              lines << "**Gem Version:** #{profile.gem_version} ⚠️ (current: #{Profiler::VERSION})"
+            else
+              lines << "**Gem Version:** #{profile.gem_version}"
+            end
+          end
           lines << "**Parent Token:** #{profile.parent_token}" if profile.parent_token
           lines << ""
           lines

data/lib/profiler/mcp/tools/query_jobs.rb

@@ -4,7 +4,7 @@ module Profiler
   module MCP
     module Tools
       class QueryJobs
-        ALL_FIELDS = %w[time job_class queue status duration token parent_token].freeze
+        ALL_FIELDS = %w[time job_class queue status duration gem_version token parent_token].freeze
 
         def self.call(params)
           limit = params["limit"]&.to_i || 20
@@ -64,6 +64,9 @@ module Profiler
               when "queue"        then job_data["queue"] || "-"
               when "status"       then job_data["status"] || "-"
               when "duration"     then "#{profile.duration.round(2)}ms"
+              when "gem_version"
+                v = profile.gem_version || "-"
+                v != Profiler::VERSION ? "#{v} ⚠️" : v
               when "token"        then profile.token.to_s
               when "parent_token" then profile.parent_token || "-"
               end

data/lib/profiler/middleware/profiler_middleware.rb

@@ -20,6 +20,7 @@ module Profiler
         collectors = nil
 
         profile = Models::Profile.new(build_request(env))
+        profile.gem_version = Profiler::VERSION
         Profiler::CurrentContext.token = profile.token
 
         # Capture request body before app processes it

data/lib/profiler/middleware/toolbar_injector.rb

@@ -62,9 +62,11 @@ module Profiler
       def toolbar_html
         <<~HTML
           #{ajax_interceptor_script}
-          <div id="profiler-toolbar" data-token="#{@token}"></div>
-          <script src="/_profiler/assets/profiler-toolbar.js" defer#{nonce_attr}></script>
           <style>#{toolbar_styles}</style>
+          <div id="profiler-toolbar" class="profiler-root" data-token="#{@token}"></div>
+          <button id="profiler-toolbar-toggle" class="profiler-root" title="Toggle profiler (Alt+P)"><span class="profiler-toggle-icon">&#9654;</span></button>
+          <script#{nonce_attr}>(function(){var c=localStorage.getItem('profiler-toolbar-collapsed')==='true',t=localStorage.getItem('profiler-theme'),theme=t==='light'?'light':t==='dark'?'dark':(window.matchMedia('(prefers-color-scheme:light)').matches?'light':'dark'),el=document.getElementById('profiler-toolbar'),tog=document.getElementById('profiler-toolbar-toggle');if(c){el.style.cssText='animation:none!important;transform:translateX(calc(100% + 44px))';tog.dataset.collapsed='true';}el.setAttribute('data-theme',theme);tog.setAttribute('data-theme',theme);})();</script>
+          <script src="/_profiler/assets/profiler-toolbar.js" defer#{nonce_attr}></script>
         HTML
       end
 
@@ -76,39 +78,28 @@ module Profiler
       # Variables are defined on #profiler-toolbar to avoid polluting the host app.
       def toolbar_styles
         <<~'CSS'
-          #profiler-toolbar {
+          .profiler-root {
             --pf-bg:         #080b10;
             --pf-surface:    #0d1117;
             --pf-raised:     #131920;
             --pf-text:       #eef2f7;
-            --pf-muted:      #5e7080;
+            --pf-muted:      #4d6170;
             --pf-amber:      #f59e0b;
             --pf-amber-h:    #fbbf24;
-            --pf-amber-bg:   rgba(245,158,11,.1);
-            --pf-amber-glow: rgba(245,158,11,.25);
+            --pf-amber-bg:   rgba(245,158,11,.08);
+            --pf-amber-glow: rgba(245,158,11,.2);
             --pf-success:    #22c55e;
             --pf-warning:    #fb923c;
             --pf-error:      #f87171;
             --pf-info:       #60a5fa;
-            --pf-border:     rgba(255,255,255,.07);
-            --pf-border-s:   rgba(255,255,255,.13);
+            --pf-border:     rgba(255,255,255,.06);
+            --pf-border-s:   rgba(255,255,255,.11);
             --pf-mono:       'JetBrains Mono','SF Mono','Fira Code',monospace;
-            --pf-tf:         120ms cubic-bezier(.4,0,.2,1);
-            --pf-tb:         220ms cubic-bezier(.4,0,.2,1);
-
-            position: fixed;
-            bottom: 0; left: 0; right: 0;
-            height: 44px;
-            background: var(--pf-bg);
-            border-top: 1px solid var(--pf-border-s);
-            z-index: 999999;
-            font-family: var(--pf-mono);
-            font-size: 11px;
-            color: var(--pf-muted);
-            animation: pfIn 300ms cubic-bezier(.4,0,.2,1) both;
+            --pf-tf:         140ms cubic-bezier(.4,0,.2,1);
+            --pf-tb:         240ms cubic-bezier(.4,0,.2,1);
           }
-          /* ── Light theme overrides ───────────────────────────────────────── */
-          #profiler-toolbar[data-theme="light"] {
+          /* ── Light theme ─────────────────────────────────────────────────── */
+          .profiler-root[data-theme="light"] {
             --pf-bg:         #f5f3ef;
             --pf-surface:    #edeae3;
             --pf-raised:     #e3ded5;
@@ -116,39 +107,63 @@ module Profiler
             --pf-muted:      #8a7a6e;
             --pf-amber:      #b45309;
             --pf-amber-h:    #92400e;
-            --pf-amber-bg:   rgba(180,83,9,.08);
-            --pf-amber-glow: rgba(180,83,9,.2);
+            --pf-amber-bg:   rgba(180,83,9,.07);
+            --pf-amber-glow: rgba(180,83,9,.18);
             --pf-success:    #15803d;
             --pf-warning:    #c2410c;
             --pf-error:      #dc2626;
             --pf-info:       #1d4ed8;
-            --pf-border:     rgba(28,20,16,.1);
-            --pf-border-s:   rgba(28,20,16,.2);
+            --pf-border:     rgba(28,20,16,.08);
+            --pf-border-s:   rgba(28,20,16,.18);
           }
-
+          #profiler-toolbar {
+            position: fixed;
+            bottom: 0; left: 0; right: 44px;
+            height: 44px;
+            background: linear-gradient(180deg, var(--pf-surface) 0%, var(--pf-bg) 100%);
+            border-top: 1px solid var(--pf-border-s);
+            z-index: 999999;
+            font-family: var(--pf-mono);
+            font-size: 11px;
+            color: var(--pf-muted);
+            animation: pfIn 320ms cubic-bezier(.4,0,.2,1) both;
+          }
+          /* ── Slide-in animation ──────────────────────────────────────────── */
           @keyframes pfIn {
             from { transform: translateY(100%); opacity: 0; }
-            to   { transform: translateY(0); opacity: 1; }
+            to   { transform: translateY(0);    opacity: 1; }
+          }
+          @keyframes pfPop {
+            0%   { transform: scaleX(1);    }
+            15%  { transform: scaleX(1.18); }
+            40%  { transform: scaleX(0.87); }
+            65%  { transform: scaleX(1.08); }
+            85%  { transform: scaleX(0.97); }
+            100% { transform: scaleX(1);    }
           }
+          /* ── Amber accent line ───────────────────────────────────────────── */
           #profiler-toolbar::before {
             content: '';
             position: absolute;
             top: -1px; left: 0; right: 0;
             height: 1px;
-            background: linear-gradient(90deg,transparent 0%,#f59e0b 20%,#fbbf24 50%,#f59e0b 80%,transparent 100%);
-            opacity: .6;
+            background: linear-gradient(90deg, transparent 0%, #f59e0b 25%, #fbbf24 50%, #f59e0b 75%, transparent 100%);
+            opacity: .55;
+            transition: opacity 280ms;
           }
+          /* ── Container ───────────────────────────────────────────────────── */
           #profiler-toolbar .profiler-toolbar-container {
             display: flex;
             align-items: stretch;
             height: 100%;
           }
+          /* ── Items ───────────────────────────────────────────────────────── */
           #profiler-toolbar .profiler-toolbar-item {
             position: relative;
             display: inline-flex;
             align-items: center;
             gap: 5px;
-            padding: 0 14px;
+            padding: 0 13px;
             color: var(--pf-muted);
             text-decoration: none;
             white-space: nowrap;
@@ -159,7 +174,9 @@ module Profiler
             font-family: var(--pf-mono);
             font-size: 11px;
             transition: color var(--pf-tf), background var(--pf-tf);
+            cursor: default;
           }
+          /* Amber bottom indicator — springy easing */
           #profiler-toolbar .profiler-toolbar-item::after {
             content: '';
             position: absolute;
@@ -168,52 +185,114 @@ module Profiler
             background: var(--pf-amber);
             transform: scaleX(0);
             transform-origin: left;
-            transition: transform var(--pf-tb);
+            transition: transform 280ms cubic-bezier(.34,1.4,.64,1);
           }
-          #profiler-toolbar a.profiler-toolbar-item { cursor: pointer; }
-          #profiler-toolbar a.profiler-toolbar-item:hover {
+          /* Hover: all interactive items */
+          #profiler-toolbar a.profiler-toolbar-item,
+          #profiler-toolbar .profiler-toolbar-hoverable { cursor: pointer; }
+
+          #profiler-toolbar a.profiler-toolbar-item:hover,
+          #profiler-toolbar .profiler-toolbar-hoverable:hover {
             color: var(--pf-text);
             background: var(--pf-amber-bg);
           }
-          #profiler-toolbar a.profiler-toolbar-item:hover::after { transform: scaleX(1); }
+          #profiler-toolbar a.profiler-toolbar-item:hover::after,
+          #profiler-toolbar .profiler-toolbar-hoverable:hover::after { transform: scaleX(1); }
+
+          /* Severity underline colors */
+          #profiler-toolbar .profiler-text--error::after   { background: var(--pf-error); }
+          #profiler-toolbar .profiler-text--warning::after { background: var(--pf-warning); }
+          #profiler-toolbar .profiler-text--success::after { background: var(--pf-success); }
+
+          /* Semantic colors */
           #profiler-toolbar .profiler-text--success { color: var(--pf-success) !important; }
           #profiler-toolbar .profiler-text--warning { color: var(--pf-warning) !important; }
           #profiler-toolbar .profiler-text--error   { color: var(--pf-error)   !important; }
           #profiler-toolbar .profiler-text--accent  { color: var(--pf-amber)   !important; }
           #profiler-toolbar .profiler-text--muted   { color: var(--pf-muted)   !important; }
-          #profiler-toolbar a.profiler-toolbar-item.profiler-text--error::after   { background: var(--pf-error); }
-          #profiler-toolbar a.profiler-toolbar-item.profiler-text--warning::after { background: var(--pf-warning); }
-          #profiler-toolbar .profiler-toolbar-item:last-child {
-            border-right: none;
-            margin-left: auto;
+
+          /* Logo link */
+          #profiler-toolbar .profiler-toolbar-logo {
+            border-right: 1px solid var(--pf-border) !important;
             color: var(--pf-amber);
-            padding-left: 20px;
             font-weight: 600;
+            letter-spacing: .02em;
+          }
+          #profiler-toolbar .profiler-toolbar-logo:hover { color: var(--pf-amber-h); }
+
+          /* ── Toggle button (fixed, always visible) ───────────────────────── */
+          #profiler-toolbar-toggle {
+            position: fixed;
+            bottom: 0; right: 0;
+            width: 44px; height: 44px;
+            display: flex; align-items: center; justify-content: center;
+            cursor: pointer;
+            background: linear-gradient(180deg, var(--pf-surface) 0%, var(--pf-bg) 100%);
+            border: none;
+            border-top: 1px solid var(--pf-border-s);
+            border-left: 1px solid var(--pf-border);
+            color: var(--pf-muted);
+            font-family: var(--pf-mono);
+            font-size: 13px;
+            z-index: 1000000;
+            border-radius: 0;
+            transition: color var(--pf-tf), background var(--pf-tf);
+          }
+          #profiler-toolbar-toggle:hover {
+            color: var(--pf-amber);
+            animation: pfPop 380ms ease-out both;
+            transform: none;
           }
-          #profiler-toolbar a.profiler-toolbar-item:last-child:hover { color: var(--pf-amber-h); }
+          .profiler-toggle-icon {
+            display: inline-block;
+            transition: transform 280ms cubic-bezier(.4,0,.2,1);
+          }
+          #profiler-toolbar-toggle[data-collapsed="true"] .profiler-toggle-icon {
+            transform: scaleX(-1);
+          }
+
+          /* ── Hoverable wrapper ───────────────────────────────────────────── */
           #profiler-toolbar .profiler-toolbar-hoverable { position: relative; }
+
+          /* ── Panel (CSS-driven visibility) ───────────────────────────────── */
           #profiler-toolbar .profiler-toolbar-panel {
-            display: none;
             position: absolute;
-            bottom: calc(100% + 10px);
+            bottom: calc(100% + 12px);
             left: 50%;
             transform: translateX(-50%);
             min-width: 300px;
             max-width: 420px;
             background: var(--pf-surface);
             border: 1px solid var(--pf-border-s);
-            border-radius: 8px;
-            box-shadow: 0 8px 32px rgba(0,0,0,.65), 0 0 0 1px var(--pf-amber-glow);
+            border-radius: 10px;
+            box-shadow: 0 12px 40px rgba(0,0,0,.7), 0 0 0 1px var(--pf-amber-glow);
             z-index: 1000000;
             overflow: hidden;
+            /* Hidden state */
+            opacity: 0;
+            visibility: hidden;
+            pointer-events: none;
+            transition:
+              opacity    160ms cubic-bezier(.4,0,.2,1),
+              visibility 0s   linear 160ms;
           }
+          #profiler-toolbar .profiler-toolbar-panel.is-visible {
+            opacity: 1;
+            visibility: visible;
+            pointer-events: auto;
+            transition:
+              opacity    160ms cubic-bezier(.4,0,.2,1),
+              visibility 0s;
+          }
+          /* Amber top bar on panel */
           #profiler-toolbar .profiler-toolbar-panel::before {
             content: '';
             position: absolute;
             top: 0; left: 0; right: 0;
             height: 2px;
-            background: linear-gradient(90deg,#f59e0b,#fbbf24);
+            background: linear-gradient(90deg, #f59e0b, #fbbf24);
           }
+          /* Arrow */
           #profiler-toolbar .profiler-toolbar-panel::after {
             content: '';
             position: absolute;
@@ -223,11 +302,13 @@ module Profiler
             border-top-color: var(--pf-border-s);
           }
           #profiler-toolbar .profiler-toolbar-panel-large { min-width: 420px; max-width: 560px; }
+
+          /* ── Panel header ────────────────────────────────────────────────── */
           #profiler-toolbar .profiler-toolbar-panel-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 10px 14px 8px;
+            padding: 10px 14px 9px;
             font-size: 10px;
             font-weight: 700;
             letter-spacing: .12em;
@@ -244,6 +325,8 @@ module Profiler
             letter-spacing: 0;
             font-size: 10px;
           }
+
+          /* ── Panel content ───────────────────────────────────────────────── */
           #profiler-toolbar .profiler-toolbar-panel-content {
             padding: 8px 14px 12px;
             max-height: 380px;
@@ -258,16 +341,22 @@ module Profiler
             background: var(--pf-border-s);
             border-radius: 99px;
           }
+
+          /* ── Panel rows ──────────────────────────────────────────────────── */
           #profiler-toolbar .profiler-toolbar-panel-row {
             display: flex;
             justify-content: space-between;
             align-items: baseline;
-            padding: 5px 0;
+            padding: 6px 0;
             border-bottom: 1px solid var(--pf-border);
             gap: 12px;
           }
           #profiler-toolbar .profiler-toolbar-panel-row:last-child { border-bottom: none; }
-          #profiler-toolbar .profiler-toolbar-panel-row span { color: var(--pf-muted); font-size: 10px; flex-shrink: 0; }
+          #profiler-toolbar .profiler-toolbar-panel-row span {
+            color: var(--pf-muted);
+            font-size: 10px;
+            flex-shrink: 0;
+          }
           #profiler-toolbar .profiler-toolbar-panel-row strong {
             color: var(--pf-text);
             font-weight: 600;
@@ -275,6 +364,8 @@ module Profiler
             font-variant-numeric: tabular-nums;
             word-break: break-all;
           }
+
+          /* ── Section header ──────────────────────────────────────────────── */
           #profiler-toolbar .profiler-section__header {
             font-size: 9px;
             font-weight: 700;
@@ -282,22 +373,26 @@ module Profiler
             text-transform: uppercase;
             color: var(--pf-amber);
             padding: 10px 0 4px;
-            border-bottom: 1px solid rgba(245,158,11,.2);
+            border-bottom: 1px solid rgba(245,158,11,.18);
             margin-bottom: 6px;
             font-family: var(--pf-mono);
           }
           #profiler-toolbar .profiler-section__header:first-child { padding-top: 4px; }
+
+          /* ── Query cards ─────────────────────────────────────────────────── */
           #profiler-toolbar .profiler-toolbar-panel-query {
             padding: 7px 10px;
             background: var(--pf-raised);
             border: 1px solid var(--pf-border);
-            border-radius: 4px;
+            border-radius: 5px;
             margin-bottom: 5px;
+            transition: border-color var(--pf-tf);
           }
           #profiler-toolbar .profiler-toolbar-panel-query:last-child { margin-bottom: 0; }
+          #profiler-toolbar .profiler-toolbar-panel-query:hover { border-color: var(--pf-border-s); }
           #profiler-toolbar .profiler-toolbar-panel-query-slow {
             border-left: 2px solid var(--pf-error);
-            background: rgba(248,113,113,.06);
+            background: rgba(248,113,113,.05);
           }
           #profiler-toolbar .profiler-toolbar-panel-query code {
             display: block;
@@ -313,6 +408,8 @@ module Profiler
             padding: 0;
             border: none;
           }
+
+          /* ── More hint ───────────────────────────────────────────────────── */
           #profiler-toolbar .profiler-more {
             text-align: center;
             padding: 7px;
@@ -322,13 +419,17 @@ module Profiler
             border-top: 1px dashed var(--pf-border);
             margin-top: 6px;
           }
+
+          /* ── Ajax cards ──────────────────────────────────────────────────── */
           #profiler-toolbar .profiler-ajax-card {
             background: var(--pf-raised);
             border: 1px solid var(--pf-border);
-            border-radius: 4px;
+            border-radius: 5px;
             padding: 6px 8px;
             margin-bottom: 4px;
+            transition: border-color var(--pf-tf);
           }
+          #profiler-toolbar .profiler-ajax-card:hover { border-color: var(--pf-border-s); }
           #profiler-toolbar .profiler-ajax-card--success { border-left: 2px solid var(--pf-success); }
           #profiler-toolbar .profiler-ajax-card--error   { border-left: 2px solid var(--pf-error); }
           #profiler-toolbar .profiler-ajax-card__row {
@@ -337,10 +438,12 @@ module Profiler
             align-items: center;
             gap: 8px;
           }
+
+          /* ── Dump cards ──────────────────────────────────────────────────── */
           #profiler-toolbar .profiler-dump-card {
             background: var(--pf-raised);
             border: 1px solid var(--pf-border);
-            border-radius: 4px;
+            border-radius: 5px;
             padding: 6px 8px;
             margin-bottom: 4px;
           }
@@ -349,11 +452,13 @@ module Profiler
             justify-content: space-between;
             margin-bottom: 4px;
           }
+
+          /* ── Badges ──────────────────────────────────────────────────────── */
           #profiler-toolbar .badge {
             display: inline-flex;
             align-items: center;
-            padding: 1px 5px;
-            border-radius: 3px;
+            padding: 1px 6px;
+            border-radius: 4px;
             font-size: 9px;
             font-weight: 700;
             letter-spacing: .05em;
@@ -361,10 +466,12 @@ module Profiler
             background: var(--pf-raised);
             color: var(--pf-muted);
           }
-          #profiler-toolbar .badge-info    { background: rgba(96,165,250,.12);  color: var(--pf-info); }
-          #profiler-toolbar .badge-success { background: rgba(34,197,94,.12);   color: var(--pf-success); }
-          #profiler-toolbar .badge-warning { background: rgba(251,146,60,.12);  color: var(--pf-warning); }
-          #profiler-toolbar .badge-error   { background: rgba(248,113,113,.12); color: var(--pf-error); }
+          #profiler-toolbar .badge-info    { background: rgba(96,165,250,.1);   color: var(--pf-info); }
+          #profiler-toolbar .badge-success { background: rgba(34,197,94,.1);    color: var(--pf-success); }
+          #profiler-toolbar .badge-warning { background: rgba(251,146,60,.1);   color: var(--pf-warning); }
+          #profiler-toolbar .badge-error   { background: rgba(248,113,113,.1);  color: var(--pf-error); }
+
+          /* ── Utilities ───────────────────────────────────────────────────── */
           #profiler-toolbar .profiler-flex           { display: flex; }
           #profiler-toolbar .profiler-flex--between  { justify-content: space-between; }
           #profiler-toolbar .profiler-flex--gap-2    { gap: 8px; }

data/lib/profiler/models/profile.rb

@@ -13,7 +13,8 @@ module Profiler
                     :response_headers, :collectors_data, :collectors_metadata,
                     :parent_token, :is_ajax, :profile_type,
                     :request_body, :request_body_encoding,
-                    :response_body, :response_body_encoding
+                    :response_body, :response_body_encoding,
+                    :gem_version
 
       def initialize(request = nil)
         @token = SecureRandom.hex(16)
@@ -76,6 +77,7 @@ module Profiler
 
         {
           profile_type: @profile_type,
+          gem_version: @gem_version,
           token: @token,
           path: @path,
           method: @method,
@@ -127,6 +129,7 @@ module Profiler
         profile.parent_token = data[:parent_token]
         profile.is_ajax = data[:is_ajax] || false
         profile.profile_type = data[:profile_type] || "http"
+        profile.gem_version = data[:gem_version]
 
         # Convert collectors_data keys to strings recursively for consistency
         profile.collectors_data = (data[:collectors_data] || {}).transform_keys(&:to_s).transform_values do |value|

data/lib/profiler/storage/sqlite_store.rb

@@ -51,17 +51,18 @@ module Profiler
         @db.execute(
           <<~SQL,
             INSERT OR REPLACE INTO profiler_profiles (
-              token, profile_type, path, method, status, duration, memory,
+              token, profile_type, gem_version, path, method, status, duration, memory,
               started_at, finished_at, parent_token, is_ajax,
               tabs, params, headers, response_headers, collectors_meta
             ) VALUES (
-              :token, :profile_type, :path, :method, :status, :duration, :memory,
+              :token, :profile_type, :gem_version, :path, :method, :status, :duration, :memory,
               :started_at, :finished_at, :parent_token, :is_ajax,
               :tabs, :params, :headers, :response_headers, :collectors_meta
             )
           SQL
           token:            token,
           profile_type:     data[:profile_type] || "http",
+          gem_version:      data[:gem_version],
           path:             data[:path],
           method:           data[:method],
           status:           data[:status],
@@ -176,6 +177,7 @@ module Profiler
           CREATE TABLE IF NOT EXISTS profiler_profiles (
             token              TEXT PRIMARY KEY,
             profile_type       TEXT NOT NULL DEFAULT 'http',
+            gem_version        TEXT,
             path               TEXT,
             method             TEXT,
             status             INTEGER,
@@ -202,6 +204,12 @@ module Profiler
           CREATE INDEX IF NOT EXISTS idx_profiler_profile_type
             ON profiler_profiles(profile_type);
         SQL
+
+        begin
+          @db.execute("ALTER TABLE profiler_profiles ADD COLUMN gem_version TEXT")
+        rescue SQLite3::Exception
+          # column already exists
+        end
       end
 
       def row_to_profile(row, load_blobs: true)
@@ -223,6 +231,7 @@ module Profiler
         Models::Profile.from_hash(
           token:                  row["token"],
           profile_type:           row["profile_type"],
+          gem_version:            row["gem_version"],
           path:                   row["path"],
           method:                 row["method"],
           status:                 row["status"],

data/lib/profiler/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Profiler
-  VERSION = "0.19.2"
+  VERSION = "0.21.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails-profiler
 version: !ruby/object:Gem::Version
-  version: 0.19.2
+  version: 0.21.0
 platform: ruby
 authors:
 - Sébastien Duplessy
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-04-24 00:00:00.000000000 Z
+date: 2026-05-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails