You are a constitutional council ranking individual git commits for ownership allocation.

Compare these two commits. Decide which contributed more lasting value to the project.

Judge substance, not spectacle:
- Prefer correct, lasting design and real bugfixes over churn, formatting, renames, or generated noise.
- Prefer clarity and necessity over sheer line count. A small precise change can beat a large diffuse one.
- Do not favor a side merely because its patch is longer or noisier.
- Weight what the change does for the project, not the contributor's name.

Return ONLY a JSON object: {"winner": "A" or "B", "ratio": "N:M", "explanation": "..."}
The explanation must cite concrete differences in the patches (1-3 sentences).

Side A — contributor: tommy-mor
Side A — commit message:
[30a67104] fixes

Side A — unified diff (full patch):
diff --git a/agents.md b/agents.md
index a6a283716e09fcaba1fd690f4e877e0bbecda2c0..d9a924d2f77c444d9b112bbf37a480b963ace4f0 100644
--- a/agents.md
+++ b/agents.md
@@ -39,7 +39,7 @@ Strict **CSP** that blocks `eval` would break the current app. Other projects ma
 
 - **`VoteComparePost`:** On success returns **`text/javascript`** that **morphs** **`#vote-compare-preview`** (new ingest card) and **`#vote-edge-history-region`** (recomputed edge list). Uses **`RpcResult::PostOk`**’s **`post_id`** / **`post_index`** for the card. **`__rpc__`** carries **`form_action: "/ui"`**; **`thread_tag`** and ratio fields come from the same form as **`$form`** holes.
 
-- **Garden pin / compare voting:** Cookie **`slug_garden_pin`** via **`set_garden_pin`**. Pairwise UI: **`GET /vote/compare?…`** / **`GET /r/:room_key/vote/compare?…`**. HUD: **`#slug-pin-hud`** when **`layout`** passes garden metadata on **`body`**.
+- **Garden pin / compare voting:** Cookie **`slug_garden_pin`** via **`set_garden_pin`**. Pairwise UI: **`GET /vote/compare?…`** / **`GET /r/:room_key/vote/compare?…`**. HUD: **`#slug-pin-hud`** when **`layout`** passes garden metadata on **`body`**; the label is **`POST /ui`** **`set_garden_pin`** **`clear:true`** (**`slug_ui.js`**), not a permalink to the item.
 
 **Rule of thumb:** New **CLI or API** verbs → `RpcCommand`. New **in-page morph or form-driven** behavior that only makes sense in the browser → `HtmlUiAction`. If both need the same operation, implement the real work once (e.g. call shared RPC helpers from `post_ui_html`) and keep the wire shapes separate.
 
diff --git a/server/src/html/garden.rs b/server/src/html/garden.rs
index 8a46b1e92d38f2c390f88d48750d95d11388cd73..121d9498e8cb93d4d001dc1bbce23d74fbb958f5 100644
--- a/server/src/html/garden.rs
+++ b/server/src/html/garden.rs
@@ -16,7 +16,6 @@ use crate::{
     canonical_path::{canonicalize_item, canonicalize_tag},
     form_template::template_json_compact,
     html::{
-        forum::ingest_entry_markup,
         ui_action::UI_RPC_FIELD,
         user_can_post_room,
         JsBuilder,
@@ -111,6 +110,23 @@ fn votes_for_edge(content: &ContentState, a: &ItemId, b: &ItemId) -> Vec<crate::
     out
 }
 
+/// Number of vote ingests recorded for this unordered pair in `content` (same scope as ranking).
+fn edge_vote_count_for_pair(content: &ContentState, a: &ItemId, b: &ItemId) -> usize {
+    let (lo, hi) = canonical_edge_items(a, b);
+    let lo_s = lo.as_str();
+    let hi_s = hi.as_str();
+    content
+        .item_votes
+        .get(&lo)
+        .into_iter()
+        .flat_map(|q| q.iter())
+        .filter(|v| {
+            (v.a.as_str() == lo_s && v.b.as_str() == hi_s)
+                || (v.a.as_str() == hi_s && v.b.as_str() == lo_s)
+        })
+        .count()
+}
+
 fn vote_thread_tags_for_pair(content: &ContentState, a: &ItemId, b: &ItemId) -> Vec<String> {
     let set: HashSet<String> = content
         .item_threads
@@ -288,6 +304,7 @@ fn child_row_pin_or_vote(
     nav: &ThreadNav,
     row_item: &ItemId,
     pinned_room_and_item: Option<&(String, ItemId)>,
+    scope_content: &ContentState,
     next_path: &str,
 ) -> maud::Markup {
     let pin_matches_scope = pinned_room_and_item
@@ -315,7 +332,16 @@ fn child_row_pin_or_vote(
                 @if pi == row_item {
                     span class="ont-garden-pinned-here" title="Pinned" aria-label="Pinned" { "📌" }
                 } @else {
-                    a class="ont-garden-vote-ico" href=(vote_compare_href(nav, pi, row_item, None)) title="Vote vs pinned" aria-label="Vote" { "⚖" }
+                    @let nv = edge_vote_count_for_pair(scope_content, pi, row_item);
+                    @let tip = format!(
+                        "Compare and vote — {nv} pairwise vote{} in this scope for pinned vs this row",
+                        if nv == 1 { "" } else { "s" },
+                    );
+                    @let aria = format!("Vote; {} pairwise {}", nv, if nv == 1 { "vote" } else { "votes" });
+                    a class="ont-garden-vote-ico" href=(vote_compare_href(nav, pi, row_item, None)) title=(tip) aria-label=(aria) {
+                        span class="ont-garden-vote-glyph" aria-hidden="true" { "⚖" }
+                        span class="ont-garden-vote-count" { (format!("{}", nv)) }
+                    }
                 }
             } @else {
                 form method="POST" action="/ui" data-navigate="full" class="ont-pin-form ont-garden-pin-form" {
@@ -978,10 +1004,9 @@ async fn render_scope_view(
 ) -> axum::response::Response {
     let scope = nav.scope();
     let pin_ref = pinned_item_from_jar(&jar);
-    let model = {
-        let reduced = state.reduced.read().await;
-        build_item_page_view_model(&reduced, &scope, browse.item())
-    };
+    let reduced = state.reduced.read().await;
+    let model = build_item_page_view_model(&reduced, &scope, browse.item());
+    let scope_content = content_for_garden_view(&reduced, &scope);
     let thread_href = |tag: &str| nav.thread_url(tag);
     let external_empty_body = browse.is_external() && model.body.is_none();
     let cli_path_arg = item_display_path(&model.item);
@@ -1108,7 +1133,7 @@ async fn render_scope_view(
                                     @let item_url = item_href(r.item.as_str(), &nav);
                                     @let score_str = format!("{:.3}", r.score);
                                     li data-garden-item=(r.item.as_str()) {
-                                        (child_row_pin_or_vote(&nav, &r.item, pin_ref.as_ref(), &next_for_pin))
+                                        (child_row_pin_or_vote(&nav, &r.item, pin_ref.as_ref(), scope_content, &next_for_pin))
                                         a class="item-link" href=(item_url) { code { (item_display_path(r.item.as_str())) } }
                                         span class="ont-rank-score" { (score_str) }
                                     }
@@ -1124,7 +1149,7 @@ async fn render_scope_view(
                         ul class="ont-group-list" {
                             @for name in &model.child_rankings.unranked_items {
                                 li data-garden-item=(name.as_str()) {
-                                    (child_row_pin_or_vote(&nav, name, pin_ref.as_ref(), &next_for_pin))
+                                    (child_row_pin_or_vote(&nav, name, pin_ref.as_ref(), scope_content, &next_for_pin))
                                     @let href = item_href(name.as_str(), &nav);
                                     a class="item-link" href=(href) { code { (item_display_path(name.as_str())) } }
                                 }
@@ -1363,6 +1388,33 @@ mod tests {
         }));
     }
 
+    #[test]
+    fn edge_vote_count_for_pair_matches_votes_for_edge_len() {
+        use super::{
+            content_for_garden_view, edge_vote_count_for_pair, votes_for_edge,
+        };
+        use crate::path_types::ItemId;
+        let mut reduced = ReducerState::default();
+        apply_ingest(
+            &mut reduced,
+            1,
+            "@00000000-0000-0000-0000-000000000000:test:local/test\n\
+             ~/topic {root}\n\
+             ~/topic/a {alpha}\n\
+             ~/topic/b {beta}\n\
+             ~/topic/a 3:2 ~/topic/b {first vote}\n\
+             ~/topic/b 2:3 ~/topic/a {second vote}\n",
+        );
+        let content = content_for_garden_view(&reduced, &ScopeId::Public);
+        let a = ItemId::parse("~/topic/a").unwrap().normalized_storage();
+        let b = ItemId::parse("~/topic/b").unwrap().normalized_storage();
+        assert_eq!(
+            edge_vote_count_for_pair(content, &a, &b),
+            votes_for_edge(content, &a, &b).len()
+        );
+        assert_eq!(votes_for_edge(content, &a, &b).len(), 2);
+    }
+
     #[test]
     fn item_page_model_includes_body_and_unranked_without_votes() {
         let mut reduced = ReducerState::default();
diff --git a/server/static/slug_ui.js b/server/static/slug_ui.js
index c0de1cddbba78227dfb80bfd41e7b855b3a42bc3..86f935f8dd998f3d6df016f33b1e47f9780782ea 100644
--- a/server/static/slug_ui.js
+++ b/server/static/slug_ui.js
@@ -170,15 +170,6 @@
       return { room: raw.slice(0, i), item: raw.slice(i + 1) };
     }
 
-    function gardenItemHref(prefix, storageUrl) {
-      var marker = 'https://slug.social/~/';
-      if (storageUrl.indexOf(marker) === 0) {
-        var tail = storageUrl.slice(marker.length);
-        return prefix.replace(/\/$/, '') + (tail ? '/' + tail : '');
-      }
-      return storageUrl;
-    }
-
     function refreshPinHud() {
       var hud = document.getElementById('slug-pin-hud');
       if (!hud) return;
@@ -187,19 +178,37 @@
       var pin = decodePinCookie();
       hud.innerHTML = '';
       if (!pin || !prefix || pin.room !== bodyRoom) return;
-      var a = document.createElement('a');
-      a.className = 'slug-pin-hud-link';
-      a.href = gardenItemHref(prefix, pin.item);
-      a.title = 'Pinned item';
+      var form = document.createElement('form');
+      form.method = 'POST';
+      form.action = '/ui';
+      form.setAttribute('data-navigate', 'full');
+      form.className = 'slug-pin-hud-form';
+      var rpc = document.createElement('input');
+      rpc.type = 'hidden';
+      rpc.name = '__rpc__';
+      rpc.value = JSON.stringify({
+        action: 'set_garden_pin',
+        clear: true,
+        room_wire: '',
+        next: window.location.pathname + window.location.search,
+        form_action: '/ui',
+      });
+      form.appendChild(rpc);
+      var btn = document.createElement('button');
+      btn.type = 'submit';
+      btn.className = 'slug-pin-hud-link slug-pin-hud-unpin-btn';
+      btn.title = 'Unpin — removes this item from the corner HUD';
+      btn.setAttribute('aria-label', 'Unpin pinned item');
       var span = document.createElement('span');
       span.className = 'slug-pin-hud-glyph';
       span.setAttribute('aria-hidden', 'true');
       span.textContent = '📌';
-      a.appendChild(span);
+      btn.appendChild(span);
       var label = pin.item.replace(/^https:\/\/slug\.social\/~\/?/, '~/');
       if (label.length > 36) label = label.slice(0, 34) + '…';
-      a.appendChild(document.createTextNode(' ' + label));
-      hud.appendChild(a);
+      btn.appendChild(document.createTextNode(' ' + label));
+      form.appendChild(btn);
+      hud.appendChild(form);
     }
     refreshPinHud();
 
diff --git a/server/static/theme_default.css b/server/static/theme_default.css
index ec0fbe7acee0aa2802f978f14a9b0fc86e78c5b8..9178f0629cfb868348740e6dea1626dc6afb8345 100644
--- a/server/static/theme_default.css
+++ b/server/static/theme_default.css
@@ -799,6 +799,12 @@ details > summary::-webkit-details-marker { display: none; }
 }
 
 /* Pinned item HUD — bottom bar, same plane as spread */
+.slug-pin-hud-form {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
 #slug-pin-hud.slug-pin-hud {
   margin-left: auto;
   max-width: min(42vw, 280px);
@@ -808,6 +814,13 @@ details > summary::-webkit-details-marker { display: none; }
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.slug-pin-hud-link.slug-pin-hud-unpin-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+}
 .slug-pin-hud-link {
   color: var(--ui);
   text-decoration: none;
@@ -815,7 +828,10 @@ details > summary::-webkit-details-marker { display: none; }
   align-items: center;
   gap: 4px;
 }
-.slug-pin-hud-link:hover { color: var(--signal); }
+.slug-pin-hud-link:hover,
+.slug-pin-hud-unpin-btn:hover {
+  color: var(--signal);
+}
 .slug-pin-hud-glyph { font-size: 13px; line-height: 1; }
 
 /* Garden pin / vote controls */
@@ -890,10 +906,21 @@ span.ont-garden-pinned-here {
   align-items: center;
   justify-content: center;
 }
+a.ont-garden-vote-ico {
+  gap: 4px;
+}
 a.ont-garden-vote-ico:hover {
   color: var(--signal);
   background: var(--g4);
 }
+.ont-garden-vote-count {
+  font-size: 10px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+span.ont-garden-vote-glyph {
+  line-height: 1;
+}
 span.ont-garden-pinned-here {
   border-color: var(--link);
   color: var(--signal);
diff --git a/server/static/theme_retro_craft.css b/server/static/theme_retro_craft.css
index 092d4b3540b052cc86870179e4c264541c4446cc..efaeed06d01fd835df0621f4c621c8f034c8b536 100644
--- a/server/static/theme_retro_craft.css
+++ b/server/static/theme_retro_craft.css
@@ -593,6 +593,12 @@ body.view-ontology #controls {
    (Global craft `code` + `button[type=submit]` are tuned for dark
    thread pages; these overrides match the cream ontology shell.)
    ---------------------------------------------------------------- */
+body.view-ontology .slug-pin-hud-form {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
 body.view-ontology #slug-pin-hud.slug-pin-hud {
   margin-left: auto;
   max-width: min(42vw, 280px);
@@ -603,6 +609,14 @@ body.view-ontology #slug-pin-hud.slug-pin-hud {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+body.view-ontology .slug-pin-hud-link.slug-pin-hud-unpin-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  padding: 0;
+}
 body.view-ontology .slug-pin-hud-link {
   color: #1a4a8c;
   text-decoration: none;
@@ -610,7 +624,8 @@ body.view-ontology .slug-pin-hud-link {
   align-items: center;
   gap: 0.25rem;
 }
-body.view-ontology .slug-pin-hud-link:hover {
+body.view-ontology .slug-pin-hud-link:hover,
+body.view-ontology .slug-pin-hud-unpin-btn:hover {
   color: #0d3d82;
   text-decoration: underline;
 }
@@ -676,6 +691,20 @@ body.view-ontology .ont-garden-child-actions {
   gap: 0.1rem;
 }
 body.view-ontology button.ont-garden-pin-ico,
+body.view-ontology a.ont-garden-vote-ico {
+  gap: 0.2rem;
+}
+body.view-ontology .ont-garden-vote-count {
+  font-size: 0.65rem;
+  font-family: var(--font-ui);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.92;
+}
+body.view-ontology span.ont-garden-vote-glyph {
+  line-height: 1;
+}
+body.view-ontology button.ont-garden-pin-ico,
 body.view-ontology a.ont-garden-vote-ico,
 body.view-ontology span.ont-garden-pinned-here {
   font-size: 0.95rem;
diff --git a/test/browser_garden_pin.clj b/test/browser_garden_pin.clj
index 169ff9b6913049094611fb0e5b6683b30220b285..98c086d5647207f3ac72dbb9cbc13488c030eef1 100644
--- a/test/browser_garden_pin.clj
+++ b/test/browser_garden_pin.clj
@@ -21,6 +21,17 @@
             (do (Thread/sleep 200) (recur))
             false))))))
 
+(defn- wait-for-absence-substr [pg selector substr timeout-ms]
+  "True once selector text does not contain substr (or is empty), or timeout."
+  (let [deadline (+ (System/currentTimeMillis) timeout-ms)]
+    (loop []
+      (let [text (locator/text-content (page/locator pg selector))]
+        (if (not (and (string? text) (str/includes? text substr)))
+          true
+          (if (< (System/currentTimeMillis) deadline)
+            (do (Thread/sleep 200) (recur))
+            false))))))
+
 (defn garden-pin-flow! []
   (println "\n━━━ browser garden pin (POST /ui set_garden_pin + HUD + vote link) ━━━\n")
 
@@ -75,8 +86,14 @@
                (is (wait-for-text pg ".ont-item-shell" "~/gp-pin-b" 15000) "on item b page")
                (is (wait-for-text pg "a.ont-vote-compare-btn" "vote" 10000)
                    "vote link visible vs pinned item")
+               ;; HUD clears pin (POST set_garden_pin clear), not navigate to item
+               (locator/click (page/locator pg "#slug-pin-hud button.slug-pin-hud-unpin-btn"))
+               (is (wait-for-absence-substr pg "#slug-pin-hud" "gp-pin-a" 15000)
+                   "HUD clears after unpin from HUD button")
+               (is (wait-for-absence-substr pg "body" "ont-vote-compare-btn" 15000)
+                   "compare vote CTA removed after HUD unpin on same reload")
                (is (str/includes? (or (page/url pg) "") "/~/gp-pin-b")
-                   "still on item b after vote link check"))))))
+                   "still on item b after HUD unpin"))))))
 
      (finally
        (when-some [s @!server] (common/kill-server s))


Side B — contributor: tommy-mor
Side B — commit message:
[04b81f91] Fix vote compare highlighting

Co-authored-by: Cursor <cursoragent@cursor.com>

Side B — unified diff (full patch):
diff --git a/server/src/html/mod.rs b/server/src/html/mod.rs
index 588cf62bcea608ed4ede363810f022a67b43b960..e180a0ca542a33e2300c0a4809e6b9cfee07ecfe 100644
--- a/server/src/html/mod.rs
+++ b/server/src/html/mod.rs
@@ -291,18 +291,17 @@ fn rank_list(
     label: &str,
     items: &[RankedItem],
     start_rank: usize,
-    total_ranked: usize,
-    ordinal_offset: usize,
     highlighted: &HashSet<ItemId>,
     tree: &GlobalTree,
 ) -> Markup {
+    let group_len = items.len();
     html! {
         @if !items.is_empty() {
             h3 class="rank-heading muted small" { (label) }
             ol class="rank-list" {
                 @for (i, r) in items.iter().enumerate() {
                     @let href = item_href(&r.item);
-                    @let style = rank_row_style(parent, ordinal_offset + i, total_ranked);
+                    @let style = rank_row_style(parent, i, group_len);
                     @let class = rank_row_class(&r.item, highlighted);
                     li class=(class)
                         data-rank-item=(r.item.as_str())
@@ -420,8 +419,6 @@ pub fn ranking_panel_with_highlights(
 
     let has_ranked = !ranked_groups.is_empty();
     let multi = ranked_groups.len() > 1;
-    let total_ranked: usize = ranked_groups.iter().map(|g| g.len()).sum();
-    let mut ordinal_offset = 0usize;
 
     html! {
         section id="ranking-panel" class="demo-panel" {
@@ -436,8 +433,7 @@ pub fn ranking_panel_with_highlights(
             } @else {
                 @for (gi, ranked) in ranked_groups.iter().enumerate() {
                     @let label = if multi { format!("Ranking group {}", gi + 1) } else { "Ranking".to_string() };
-                    (rank_list(item, &label, ranked, 1, total_ranked, ordinal_offset, highlighted, tree))
-                    @let _ = { ordinal_offset += ranked.len(); };
+                    (rank_list(item, &label, ranked, 1, highlighted, tree))
                 }
                 (unranked_list("Unranked", &unranked, highlighted, tree))
             }
@@ -520,7 +516,20 @@ pub async fn browse(State(state): State<AppState>, uri: Uri) -> impl IntoRespons
 
 #[cfg(test)]
 mod tests {
-    use super::SORTER_UI_JS;
+    use super::{rank_row_style, SORTER_UI_JS};
+    use crate::path_types::ItemId;
+
+    #[test]
+    fn rank_row_style_gradients_per_group_not_globally() {
+        let parent = ItemId::opaque("test-scope");
+        let first_in_four = rank_row_style(&parent, 0, 4);
+        let last_in_four = rank_row_style(&parent, 3, 4);
+        let first_in_two = rank_row_style(&parent, 0, 2);
+        let last_in_two = rank_row_style(&parent, 1, 2);
+        assert_eq!(first_in_four, first_in_two);
+        assert_eq!(last_in_four, last_in_two);
+        assert_ne!(first_in_four, last_in_four);
+    }
 
     #[test]
     fn vote_slider_left_position_favors_left_item() {
diff --git a/server/src/html/vote.rs b/server/src/html/vote.rs
index 483c7ff8cd35266744957cf0087f2b5f76f1a237..30dab303b9d1e763a5b9261dffff13a778e3e4e3 100644
--- a/server/src/html/vote.rs
+++ b/server/src/html/vote.rs
@@ -19,7 +19,7 @@ use crate::{
     ui_action::UI_RPC_FIELD,
 };
 
-use super::{breadcrumb_path, item_href, layout};
+use super::{breadcrumb_path, layout};
 
 #[derive(Debug, Deserialize)]
 pub struct VoteQuery {
@@ -59,17 +59,6 @@ fn child_title(tree: &GlobalTree, id: &ItemId) -> String {
         .unwrap_or_else(|| display_label(id))
 }
 
-fn ratio_pct(ratio_left: i32, ratio_right: i32) -> f64 {
-    let l = ratio_left.max(0) as f64;
-    let r = ratio_right.max(0) as f64;
-    let sum = l + r;
-    if sum <= 0.0 {
-        50.0
-    } else {
-        (l / sum) * 100.0
-    }
-}
-
 fn ratios_for_page(v: &VoteData, page_left: &ItemId, page_right: &ItemId) -> (i32, i32) {
     match (v.a.as_str(), v.b.as_str()) {
         (a, b) if a == page_left.as_str() && b == page_right.as_str() => {
@@ -94,6 +83,37 @@ fn edge_votes(group: &GroupState, left: &ItemId, right: &ItemId) -> Vec<VoteData
         .collect()
 }
 
+/// HUD `data-winner` value: which side the ratio favours on this page.
+fn winner_side(r_left: i32, r_right: i32) -> &'static str {
+    if r_left > r_right {
+        "left"
+    } else if r_right > r_left {
+        "right"
+    } else {
+        "even"
+    }
+}
+
+fn winner_text(r_left: i32, r_right: i32) -> &'static str {
+    match winner_side(r_left, r_right) {
+        "left" => "left wins",
+        "right" => "right wins",
+        _ => "tie",
+    }
+}
+
+/// Map stored ratios to the live slider position (0 = full left, 100 = full right).
+/// Matches `sorter_ui.js`: `left = 100 - v`, `right = v`.
+fn slider_value_from_ratios(r_left: i32, r_right: i32) -> i32 {
+    let l = r_left.max(0) as f64;
+    let r = r_right.max(0) as f64;
+    let sum = l + r;
+    if sum <= 0.0 {
+        return 50;
+    }
+    ((r / sum) * 100.0).round().clamp(0.0, 100.0) as i32
+}
+
 fn vote_edge_history(tree: &GlobalTree, group: &GroupState, left: &ItemId, right: &ItemId) -> Markup {
     let mut votes = edge_votes(group, left, right);
     votes.sort_by(|a, b| b.ts.cmp(&a.ts));
@@ -106,17 +126,26 @@ fn vote_edge_history(tree: &GlobalTree, group: &GroupState, left: &ItemId, right
             h3 class="vote-edge-history-title" {
                 "votes on this pair"
             }
+            p class="muted small vote-edge-legend" {
+                (format!("left: {legend_left} — right: {legend_right}"))
+            }
             ul class="vote-edge-history" {
                 @for v in &votes {
                     @let (r_left, r_right) = ratios_for_page(v, left, right);
-                    @let pct = ratio_pct(r_left, r_right);
+                    @let slider_val = slider_value_from_ratios(r_left, r_right);
+                    @let side = winner_side(r_left, r_right);
+                    @let label = winner_text(r_left, r_right);
                     li class="vote-edge-history-row" {
                         div class="vote-edge-meta" {
                             span class="vote-edge-ratio" { (format!("{}:{}", r_left, r_right)) }
+                            span class="vote-edge-winner muted small" { " · " (label) }
                         }
-                        div class="ratio-bar vote-edge-bar" aria-hidden="true" {
-                            div class="ratio-left" style={(format!("width: {:.3}%;", pct))} {}
-                            div class="ratio-right" style={(format!("width: {:.3}%;", 100.0 - pct))} {}
+                        label class="vote-hud-slider vote-edge-slider" aria-hidden="true" {
+                            input type="range" class="vote-edge-range" min="0" max="100" value=(slider_val)
+                                data-winner=(side)
+                                style={(format!("--vote-slider-pct: {}%;", slider_val))}
+                                disabled
+                                tabindex="-1";
                         }
                     }
                 }
@@ -283,7 +312,6 @@ pub async fn vote_page(
                         span class="vote-compare-vs" { "vs" }
                         (vote_compare_item_card(&tree, &right, "vote-compare-right"))
                     }
-                    (vote_back_nav(&parent))
                     div id="vote-edge-history-region" {
                         (edge_history)
                     }
@@ -308,3 +336,66 @@ pub async fn vote_page(
     )
     .into_response()
 }
+
+#[cfg(test)]
+mod polarity_tests {
+    use super::*;
+    use crate::ranking::ranked_items;
+    use crate::reducer::GlobalTree;
+
+    fn id(s: &str) -> ItemId {
+        ItemId::parse(s).unwrap()
+    }
+
+    /// The page's left number must always equal the vote's weight for the
+    /// item shown on the left, regardless of which order the vote stored a/b.
+    #[test]
+    fn ratios_for_page_orients_to_page_left() {
+        let left = id("left_item");
+        let right = id("right_item");
+
+        // Stored a == page left: keep order.
+        let v1 = VoteData::from_recorded(1, left.as_str(), right.as_str(), 9, 1).unwrap();
+        assert_eq!(ratios_for_page(&v1, &left, &right), (9, 1));
+
+        // Stored a == page right: swap so left stays left.
+        let v2 = VoteData::from_recorded(2, right.as_str(), left.as_str(), 9, 1).unwrap();
+        assert_eq!(ratios_for_page(&v2, &left, &right), (1, 9));
+    }
+
+    #[test]
+    fn winner_side_follows_larger_ratio() {
+        assert_eq!(winner_side(9, 1), "left");
+        assert_eq!(winner_side(1, 9), "right");
+        assert_eq!(winner_side(1, 1), "even");
+    }
+
+    #[test]
+    fn slider_value_matches_hud_mapping() {
+        assert_eq!(slider_value_from_ratios(9, 1), 10);
+        assert_eq!(slider_value_from_ratios(1, 4), 80);
+        assert_eq!(slider_value_from_ratios(1, 1), 50);
+    }
+
+    /// End-to-end polarity invariant: a vote that favours the LEFT item (higher
+    /// `ratio_left`, recorded as the RPC's `a`) must make that item rank #1.
+    /// This is the property the UI must preserve: sliding left => left wins.
+    #[test]
+    fn sliding_left_makes_left_item_win_ranking() {
+        let parent = id("scope");
+        let left = id("left_item");
+        let right = id("right_item");
+
+        // Slider dragged left yields e.g. 9:1 with a = left item.
+        let vote = VoteData::from_recorded(1, left.as_str(), right.as_str(), 9, 1).unwrap();
+        let mut tree = GlobalTree::new();
+        tree.apply_vote(&parent, vote);
+
+        let group = &tree.get(&parent).unwrap().local_ranking;
+        let ranked = ranked_items(group);
+        assert_eq!(
+            ranked[0].item, left,
+            "left item should rank first when ratio favours the left"
+        );
+    }
+}
diff --git a/server/static/sorter.css b/server/static/sorter.css
index 5da967e8bfddc2bc34662fced841860f63f1ef36..bdd3d931365703705be08537a07f3ccaf975d3ea 100644
--- a/server/static/sorter.css
+++ b/server/static/sorter.css
@@ -124,7 +124,7 @@ code {
   z-index: 1;
   box-shadow:
     inset 0 0 0 3px var(--accent),
-    inset 0 0 0 5px color-mix(in oklch, var(--rank-fg) 70%, transparent);
+    inset 0 0 0 5px color-mix(in oklch, var(--rank-fg, var(--fg)) 70%, transparent);
   filter: saturate(1.15) brightness(1.04);
 }
 
@@ -320,7 +320,7 @@ h1 {
   grid-template-columns: var(--vote-ratio-col) minmax(0, 1fr) var(--vote-actions-col);
   gap: 0.5rem 0.65rem;
   align-items: center;
-  --vote-ratio-col: 3.25rem;
+  --vote-ratio-col: 12.5rem;
   --vote-actions-col: 11.5rem;
 }
 
@@ -332,7 +332,7 @@ h1 {
   margin: 0;
   width: var(--vote-ratio-col);
   min-width: var(--vote-ratio-col);
-  text-align: center;
+  text-align: right;
   white-space: nowrap;
 }
 
@@ -474,6 +474,16 @@ h1 {
   --vote-track-muted: color-mix(in oklch, var(--muted) 55%, var(--bg));
 }
 
+/* Center-anchored fill: the accent grows from the midpoint toward the thumb,
+   so the highlighted mass always sits on the *winning* side (the side the
+   thumb was dragged toward). Left winning => accent on the left half. */
+.vote-hud-slider input[type="range"][data-winner="even"]::-webkit-slider-runnable-track {
+  height: 0.65rem;
+  border-radius: 0;
+  border: 2px solid var(--border);
+  background: var(--vote-track-muted);
+}
+
 .vote-hud-slider input[type="range"][data-winner="left"]::-webkit-slider-runnable-track {
   height: 0.65rem;
   border-radius: 0;
@@ -483,7 +493,9 @@ h1 {
     var(--vote-track-muted) 0%,
     var(--vote-track-muted) var(--vote-slider-pct, 50%),
     var(--accent) var(--vote-slider-pct, 50%),
-    var(--accent) 100%
+    var(--accent) 50%,
+    var(--vote-track-muted) 50%,
+    var(--vote-track-muted) 100%
   );
 }
 
@@ -493,7 +505,9 @@ h1 {
   border: 2px solid var(--border);
   background: linear-gradient(
     to right,
-    var(--accent) 0%,
+    var(--vote-track-muted) 0%,
+    var(--vote-track-muted) 50%,
+    var(--accent) 50%,
     var(--accent) var(--vote-slider-pct, 50%),
     var(--vote-track-muted) var(--vote-slider-pct, 50%),
     var(--vote-track-muted) 100%
@@ -513,26 +527,35 @@ h1 {
 }
 
 .vote-hud-slider input[type="range"][data-winner="left"]::-moz-range-track,
-.vote-hud-slider input[type="range"][data-winner="right"]::-moz-range-track {
+.vote-hud-slider input[type="range"][data-winner="right"]::-moz-range-track,
+.vote-hud-slider input[type="range"][data-winner="even"]::-moz-range-track {
   height: 0.65rem;
   border-radius: 0;
   border: 2px solid var(--border);
 }
 
+.vote-hud-slider input[type="range"][data-winner="even"]::-moz-range-track {
+  background: var(--vote-track-muted);
+}
+
 .vote-hud-slider input[type="range"][data-winner="left"]::-moz-range-track {
   background: linear-gradient(
     to right,
     var(--vote-track-muted) 0%,
     var(--vote-track-muted) var(--vote-slider-pct, 50%),
     var(--accent) var(--vote-slider-pct, 50%),
-    var(--accent) 100%
+    var(--accent) 50%,
+    var(--vote-track-muted) 50%,
+    var(--vote-track-muted) 100%
   );
 }
 
 .vote-hud-slider input[type="range"][data-winner="right"]::-moz-range-track {
   background: linear-gradient(
     to right,
-    var(--accent) 0%,
+    var(--vote-track-muted) 0%,
+    var(--vote-track-muted) 50%,
+    var(--accent) 50%,
     var(--accent) var(--vote-slider-pct, 50%),
     var(--vote-track-muted) var(--vote-slider-pct, 50%),
     var(--vote-track-muted) 100%
@@ -573,20 +596,23 @@ h1 {
   margin-bottom: 0.25rem;
 }
 
-.ratio-bar {
-  display: flex;
-  height: 8px;
-  border-radius: 0;
-  overflow: hidden;
-  background: var(--border);
+/* Read-only sliders in vote history — same track/thumb styling as the HUD. */
+.vote-edge-slider {
+  display: block;
+  margin-top: 0.15rem;
 }
 
-.ratio-left {
-  background: var(--accent);
+.vote-edge-slider input[type="range"] {
+  pointer-events: none;
+  cursor: default;
+}
+
+.vote-edge-slider input[type="range"]:disabled {
+  opacity: 1;
 }
 
-.ratio-right {
-  background: var(--muted);
+.vote-edge-legend {
+  margin: 0 0 0.5rem;
 }
 
 @media (max-width: 900px) {
diff --git a/server/static/sorter_ui.js b/server/static/sorter_ui.js
index f665b45f4fd4771427dc4c37e563e4976873beee..5d6d765f69f301722e59248c76e919043559fb78 100644
--- a/server/static/sorter_ui.js
+++ b/server/static/sorter_ui.js
@@ -138,6 +138,10 @@
     function update() {
       var v = parseInt(slider.value, 10);
       if (!Number.isFinite(v)) v = 50;
+      // Slider position drives the colored fill (a center-anchored bar that
+      // grows toward whichever side is winning — see sorter.css). Sliding the
+      // thumb left raises the left number; left winning keeps the accent mass
+      // on the left, matching the "votes on this pair" history bars.
       slider.style.setProperty('--vote-slider-pct', v + '%');
       slider.setAttribute('aria-valuenow', String(v));
       var left = Math.max(1, 100 - v);
@@ -147,8 +151,12 @@
       right = right / divisor;
       if (leftInput) leftInput.value = String(left);
       if (rightInput) rightInput.value = String(right);
-      if (ratioDisplay) ratioDisplay.textContent = left + ':' + right;
-      slider.dataset.winner = left >= right ? 'left' : 'right';
+      var winner = left > right ? 'left' : (right > left ? 'right' : 'even');
+      slider.dataset.winner = winner;
+      if (ratioDisplay) {
+        var label = winner === 'even' ? 'tie' : (winner + ' wins');
+        ratioDisplay.textContent = left + ':' + right + ' \u00b7 ' + label;
+      }
     }
     slider.addEventListener('input', update);
     update();