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: [04b81f91] Fix vote compare highlighting Co-authored-by: Cursor Side A — 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, 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, 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 &'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(); Side B — contributor: tommy-mor Side B — commit message: [6b6eb0c3] Auth form: poem JS morphs form innerHTML on response; no redirect - post_choose_username returns HTML fragments instead of redirects: success → auth_signed_in_fragment ("you're signed in — return to your agent") error → choose_username_error_fragment (form re-rendered with error inline) - Poem JS now reads response body; if non-empty, morphs form innerHTML with it (existing ingest forms return empty body, so they're unaffected) - auth.rs: keep full layout() with poem JS — revert to single layout - auth-success CSS class added to both themes Co-Authored-By: Claude Sonnet 4.6 (1M context) Side B — unified diff (full patch): diff --git a/server/src/api/auth.rs b/server/src/api/auth.rs index c1194f79fd89fb47fe6b425b494a0ffa667abb2d..cb0faa29b834931e2c2b2f5c174c875e2e2e9346 100644 --- a/server/src/api/auth.rs +++ b/server/src/api/auth.rs @@ -16,7 +16,7 @@ use crate::{ canonicalize_username, validate_agent_format, validate_username, Event, TokenIssued, UserRegistered, }, - html::{auth_complete_page, choose_username_page}, + html::{auth_complete_page, auth_signed_in_fragment, choose_username_error_fragment, choose_username_page}, state::{AppState, PendingSession}, }; @@ -274,8 +274,6 @@ pub async fn post_choose_username( return api_error(StatusCode::BAD_REQUEST, "invalid agent format", Some(msg)).into_response(); } - let public_url = std::env::var("SLUG_PUBLIC_URL").unwrap_or_else(|_| "http://127.0.0.1:8080".to_string()); - let reduced_arc = state.reduced.clone(); let reduced = reduced_arc.read().await; let provider_key = (provider.to_lowercase(), provider_id.clone()); @@ -284,11 +282,7 @@ pub async fn post_choose_username( } if reduced.users_by_provider.values().any(|u| u == &canonicalize_username(&form.username)) { drop(reduced); - return Redirect::to(&format!( - "{public_url}/auth/choose-username?session={}&error={}", - urlencoding::encode(&form.session), - urlencoding::encode("that username is taken — try another"), - )).into_response(); + return choose_username_error_fragment(&form.session, "that username is taken — try another").into_response(); } drop(reduced); @@ -324,7 +318,7 @@ pub async fn post_choose_username( s.complete = Some((canon_user.clone(), bearer.clone())); } - Redirect::to(&format!("{public_url}/auth/complete")).into_response() + auth_signed_in_fragment().into_response() } pub async fn post_pending_session( diff --git a/server/src/html/auth.rs b/server/src/html/auth.rs index 40b1ef30a6c1d4063aa2d8e9c93df8972df4b27c..0a14bdbfb66c65d1bd09993ffd4a7bb6f2fe041e 100644 --- a/server/src/html/auth.rs +++ b/server/src/html/auth.rs @@ -1,20 +1,25 @@ -use maud::{html, Markup, DOCTYPE}; +use maud::{html, Markup}; -/// Minimal layout for auth pages — no JS interceptor, real form navigation works. -fn auth_layout(title: &str, body: Markup) -> Markup { +fn form_inner(session: &str, error: Option<&str>) -> Markup { html! { - (DOCTYPE) - html { - head { - meta charset="utf-8"; - meta name="viewport" content="width=device-width, initial-scale=1"; - title { (title) } - link rel="stylesheet" href="/static/theme_default.css"; - } - body class="view-auth" { - (body) - } + input type="hidden" name="session" value=(session); + label for="username" { "username" } + input + type="text" + id="username" + name="username" + placeholder="e.g. alice" + pattern="[a-z0-9_\\-]{1,32}" + maxlength="32" + autocomplete="off" + autofocus; + p.auth-hint { + "lowercase · alphanumeric · hyphens · underscores · max 32" } + @if let Some(msg) = error { + p.auth-error { (msg) } + } + button type="submit" { "continue" } } } @@ -28,27 +33,23 @@ pub fn choose_username_page(session: &str, error: Option<&str>) -> Markup { h1 { "choose a username" } p { "pick a handle for slug.social." } form.auth-form method="POST" action="/auth/choose-username" { - input type="hidden" name="session" value=(session); - label for="username" { "username" } - input - type="text" - id="username" - name="username" - placeholder="e.g. alice" - pattern="[a-z0-9_\\-]{1,32}" - maxlength="32" - autocomplete="off" - autofocus; - p.auth-hint { - "lowercase · alphanumeric · hyphens · underscores · max 32" - } - @if let Some(msg) = error { - p.auth-error { (msg) } - } - button type="submit" { "continue" } + (form_inner(session, error)) } }; - auth_layout("join — slug.social", body) + super::layout("join — slug.social", "view-auth", body, None) +} + +/// Fragment returned to the poem JS on error — replaces the form's innerHTML. +pub fn choose_username_error_fragment(session: &str, error: &str) -> Markup { + form_inner(session, Some(error)) +} + +/// Fragment returned to the poem JS on success — replaces the form's innerHTML. +pub fn auth_signed_in_fragment() -> Markup { + html! { + p.auth-success { "you're signed in — return to your agent." } + p.auth-hint { "you can close this tab." } + } } pub fn auth_complete_page() -> Markup { @@ -62,5 +63,5 @@ pub fn auth_complete_page() -> Markup { p { "Return to your terminal — your agent is polling and will collect your token automatically." } p.auth-hint { "You can close this tab." } }; - auth_layout("signed in — slug.social", body) + super::layout("signed in — slug.social", "view-auth", body, None) } diff --git a/server/src/html/mod.rs b/server/src/html/mod.rs index 2f16d701962d703db0c859bb586dfc08ec385690..8b48a25cce79f0eefc7e29849e1a667cae4c7986 100644 --- a/server/src/html/mod.rs +++ b/server/src/html/mod.rs @@ -15,7 +15,7 @@ mod search; mod tree; use breadcrumb_path::OntologyPath; -pub use auth::{auth_complete_page, choose_username_page}; +pub use auth::{auth_complete_page, auth_signed_in_fragment, choose_username_error_fragment, choose_username_page}; pub use editor::{editor_check, editor_page}; pub use forum::{index, thread_feed_html, thread_post_expand, thread_post_view, thread_view}; pub use garden::{garden_index, ontology_path}; @@ -114,6 +114,8 @@ script { (maud::PreEscaped(r#" }); // Poem: intercept POST forms, send via fetch, await SSE for DOM update. + // If the response body is non-empty HTML, morph the form's innerHTML with it + // (used for inline feedback without a page reload, e.g. auth forms). document.addEventListener('submit', async (e) => { const f = e.target; if (!f || f.tagName !== 'FORM') return; @@ -121,14 +123,19 @@ script { (maud::PreEscaped(r#" e.preventDefault(); const btn = f.querySelector('button[type="submit"], input[type="submit"]'); if (btn) { btn.disabled = true; btn.textContent = '…'; } - await fetch(f.action, { + const resp = await fetch(f.action, { method: 'POST', body: new URLSearchParams(new FormData(f)), headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, credentials: 'same-origin', }); - if (btn) { btn.disabled = false; btn.textContent = 'submit'; } - f.reset(); + const html = await resp.text(); + if (html && html.trim()) { + Idiomorph.morph(f, html, {morphStyle: 'innerHTML'}); + } else { + if (btn) { btn.disabled = false; btn.textContent = 'submit'; } + f.reset(); + } }); // Search: debounced fetch + idiomorph. diff --git a/server/static/theme_default.css b/server/static/theme_default.css index 9e71574da4bed3a0116c347610636780678bd1af..a1d8d1765a7812191edc579125facf1694554c2c 100644 --- a/server/static/theme_default.css +++ b/server/static/theme_default.css @@ -250,6 +250,11 @@ p.auth-error { font-size: 12px; margin: 4px 0 0; } +p.auth-success { + color: var(--signal); + font-size: 13px; + margin: 4px 0 0; +} /* ---------------------------------------------------------------- BUTTONS — raised, press on :active diff --git a/server/static/theme_retro.css b/server/static/theme_retro.css index dc9fa4654f529eb1843557fb580cf3982da46901..8ed8fd88efab32b36bd66cf200aa182219b0a8b5 100644 --- a/server/static/theme_retro.css +++ b/server/static/theme_retro.css @@ -32,6 +32,7 @@ input[type="text"] { input[type="text"]:focus { border-color: #00ff41; } p.auth-hint { color: #555; font-family: monospace; font-size: 0.75rem; margin: 0; } p.auth-error { color: #ff4444; font-family: monospace; font-size: 0.8rem; margin: 0; } +p.auth-success { color: #00ff41; font-family: monospace; font-size: 0.8rem; margin: 0; } /* Ingest form (poem pattern) */ .ingest-form-wrap { margin-top: 1.5rem; }