stage #4518: match per-response jump button to session jump pill (#2246) + v0.51.529 CHANGELOG

CHANGELOG.md

@@ -3,6 +3,12 @@
 
 ## [Unreleased]
 
+## [v0.51.529] — 2026-06-20 — Release SN (per-response jump button matches the session jump pill)
+
+### Fixed
+
+- **The per-response "jump to question" button now matches the session jump pill instead of rendering as a smaller, inconsistent control (#2246 follow-up).** The response jump button reuses the session jump button's class stack and dimensions (height, padding, border, background, hover lift), so the two jump affordances look like one consistent control; on mobile (≤600px) it collapses to the same 32px circular icon button as the session pill. Thanks @TomBanksAU.
+
 ## [v0.51.528] — 2026-06-20 — Release SM (isolated HERMES_HOME single-profile mode)
 
 ### Added

static/style.css

@@ -4898,26 +4898,42 @@ main.main > #mainPlugin{display:none;}
 }
 .msg-foot .msg-actions { opacity: 1; margin-left: 0; }
 .msg-foot .msg-time { font-size: 10.5px; opacity: .75; }
+.session-jump-btn--inline {
+  position: static;
+  right: auto;
+  top: auto;
+  bottom: auto;
+  z-index: auto;
+  min-width: 32px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
 .msg-question-jump-btn {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
+  gap: 5px;
+  height: 32px;
+  min-width: 32px;
   margin-left: auto;
-  padding: 3px 8px;
-  border: 1px solid var(--border-subtle);
+  padding: 0 11px;
+  border: 1px solid var(--border2);
   border-radius: 999px;
-  background: var(--surface-subtle);
+  background: var(--code-bg);
   color: var(--muted);
-  font-size: 11px;
-  line-height: 1.3;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
   cursor: pointer;
-  transition: color .12s, border-color .12s, background .12s;
+  box-shadow: 0 2px 8px rgba(0,0,0,.25);
+  transition: color .12s, border-color .12s, background .12s, transform .12s;
 }
 .msg-question-jump-btn:hover,
 .msg-question-jump-btn:focus-visible {
   color: var(--text);
   border-color: var(--border);
   background: var(--hover-bg);
+  transform: translateY(-1px);
   outline: none;
 }
 .msg-question-highlight .msg-body {
@@ -4929,7 +4945,15 @@ main.main > #mainPlugin{display:none;}
   100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
 }
 @media (max-width: 600px) {
-  .msg-question-jump-btn { padding: 3px 4px; }
+  .msg-question-jump-btn {
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    max-width: 32px;
+    padding: 0;
+    border-radius: 50%;
+    gap: 0;
+  }
   .msg-question-jump-btn span:last-child { display: none; }
 }
 .msg-foot-with-usage {

static/ui.js

@@ -959,7 +959,7 @@ function _questionJumpButtonHtml(questionRawIdx, assistantRawIdx){
   const label=t('jump_to_question')||'Response';
   const title=t('jump_to_question_label')||'Jump to the start of this response';
   const aIdx=(typeof assistantRawIdx==='number'&&assistantRawIdx>=0)?assistantRawIdx:-1;
-  return `<button class="msg-question-jump-btn" type="button" title="${esc(title)}" aria-label="${esc(title)}" onclick="jumpToTurnQuestion(${questionRawIdx},${aIdx})"><span aria-hidden="true">↑</span><span>${esc(label)}</span></button>`;
+  return `<button class="msg-question-jump-btn session-jump-btn session-jump-btn--inline" type="button" title="${esc(title)}" aria-label="${esc(title)}" onclick="jumpToTurnQuestion(${questionRawIdx},${aIdx})"><span aria-hidden="true">↑</span><span>${esc(label)}</span></button>`;
 }
 
 function _highlightQuestionRow(row){

tests/test_issue2246_question_jump.py

@@ -23,7 +23,7 @@ def test_assistant_footer_gets_completed_turn_question_jump_button():
     assert "const _qJumpTarget=(!isUser&&!m._live)?questionRawIdxByAssistantRawIdx.get(rawIdx):undefined;" in UI_JS
     assert "const questionJumpBtn = (_qJumpTarget!==undefined&&_qJumpTarget!==null)" in UI_JS
     assert "_questionJumpButtonHtml(_qJumpTarget, assistantRawIdxByQuestionRawIdx.get(_qJumpTarget)??rawIdx)" in UI_JS
-    assert "msg-question-jump-btn" in UI_JS
+    assert "msg-question-jump-btn session-jump-btn session-jump-btn--inline" in UI_JS
 
 
 def test_multi_segment_turn_jumps_to_first_assistant_segment():
@@ -48,13 +48,19 @@ def test_question_jump_expands_windowed_history_and_highlights_question():
     assert "msg-question-highlight" in UI_JS
 
 
-def test_question_jump_button_is_quiet_and_compact_on_mobile():
+def test_question_jump_button_matches_bottom_button_size_on_mobile():
     assert ".msg-question-jump-btn" in STYLE_CSS
+    assert ".session-jump-btn--inline" in STYLE_CSS
+    assert "height: 32px;" in STYLE_CSS
+    assert "min-width: 32px;" in STYLE_CSS
+    assert "padding: 0 11px;" in STYLE_CSS
     assert "margin-left: auto;" in STYLE_CSS
     assert ".msg-question-highlight .msg-body" in STYLE_CSS
     assert "@keyframes question-highlight-pulse" in STYLE_CSS
     assert "@media (max-width: 600px)" in STYLE_CSS
-    assert ".msg-question-jump-btn { padding: 3px 4px; }" in STYLE_CSS
+    assert "width: 32px;" in STYLE_CSS
+    assert "max-width: 32px;" in STYLE_CSS
+    assert ".msg-question-jump-btn span:last-child { display: none; }" in STYLE_CSS
 
 
 def test_question_jump_text_is_localized():