Side A implements substantive functional changes: a full-bleed chromeless layout for the vote-compare view, correct ratio-oriented sorting of edge history votes with tests, and morphing of the new post preview card via richer server-side context (ingest, thread_tag, post_index), all backed by new unit tests and a browser test update. Side B is a moderate UI refactor (grouping cli_panel calls into a single bordered panel with click-to-copy and a JS-safety assertion) that is useful but narrower in scope and lower-risk/lower-impact than A's feature and correctness work.
constitution · epochs · watch · epoch 3
comparison
c_477013996fa5 (tommy-mor) vs c_ca72f0995396 (tommy-mor)
download prompt · raw event · cmp_0be1181367dc2f
council reasoning
A delivers substantive vote-compare product work: fullscreen chromeless layout, left/right-aligned ratio history with strength sorting, post-success card morph, tests, and multi-theme CSS. B is a solid but narrower cli_panel UX refactor (grouped rows, click-to-copy, JS-safety asserts) with mostly call-site and styling updates.
Side A delivers substantive functionality: it adds a dedicated fullscreen layout for the vote-compare page, updates the post-success flow to morph in the newly created vote preview, normalizes and sorts vote history by the displayed left/right ordering, and adds regression tests covering the new behavior. Side B is primarily a UI refactor of the CLI panel (grouping multiple commands, click-to-copy rows, and assertions for JS-safe strings) with corresponding CSS and call-site updates, which improves usability but has a narrower, less foundational impact.
sides
A — c_477013996fa5 (tommy-mor)
message
[893a2007] fullscreen?
diff preview
diff --git a/agents.md b/agents.md
index d9a924d2f77c444d9b112bbf37a480b963ace4f0..1f66ddbeddd1e40310947c7eb474c1ac4858bc42 100644
--- a/agents.md
+++ b/agents.md
@@ -37,9 +37,9 @@ Strict **CSP** that blocks `eval` would break the current app. Other projects ma
- **Non-morph `POST /ui` responses:** **`SetGardenPin`** returns **`303 See Other`** and **`Set-Cookie`** (same as **`POST /theme`**). Garden pin/unpin is a normal **`<form method="POST" action="/ui" data-navigate="full">`** — browser navigation applies cookies reliably (see **`test/browser_garden_pin.clj`**). Each **`__rpc__`** payload includes **`form_action: "/ui"`**; **`post_ui_html`** rejects mismatches to bind tokens to the UI endpoint.
-- **`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.
+- **`VoteComparePost`:** On success returns **`text/javascript`** that **morphs** **`#vote-compare-preview`** (new ingest card), **`#vote-edge-history-region`** (recomputed **`<ul>`** — ratios match **`left`/`right`** query order, bullets, sorted by strength toward **`left`** then newer). The compare **`GET`** page uses **`layout_full_bleed_chromeless`** (no breadcrumbs, no **`#controls`**, no **`slug-pin-hud`**; **`view-vote-compare-fullscreen`** full-width **`body`**). **`__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`**; the label is **`POST /ui`** **`set_garden_pin`** **`clear:true`** (**`slug_ui.js`**), not a permalink to the item.
+- **Garden pin / compare voting:** Cookie **`slug_garden_pin`** via **`set_garden_pin`**. Pairwise UI: **`GET /vote/compare?…`** / **`GET /r/:room_key/vote/compare?…`** (fullscreen **`GET`** page: no HUD; other garden pages). HUD (**`#slug-pin-hud`**): only 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/api/ui_html.rs b/server/src/api/ui_html.rs
index 5aa6a86326ba3545d261322c010e02fe86ee1c57..696e7b3605e2e68aee0351116c494c2958506add 100644
--- a/server/src/api/ui_html.rs
+++ b/server/src/api/ui_html.rs
@@ -254,7 +254,17 @@ async fn dispatch_ui_action(
};
n
};
- let js = vote_compare_post_success_js(state, &nav, &left_id, &right_id).await;
+ let js = vote_compare_post_success_js(
+ state,
+ &nav,
+ &room,
+ &thread_tag,
+ &left_id,
+ &right_id,
+ pid.as_str(),
+ post_index,
+ )
+ .await;
Response::builder()
.status(StatusCode::OK)
.header(header::CONTENT_TYPE, "text/javascript; charset=utf-8")
diff --git a/server/src/html/garden.rs b/server/src/html/garden.rs
index 121d9498e8cb93d4d001dc1bbce23d74fbb958f5..41f9e9c64a80a55a9d3ece2a6a1f592cf5e8d8dd 100644
--- a/server/src/html/garden.rs
+++ b/server/src/html/garden.rs
@@ -22,17 +22,17 @@ use crate::{
},
events::ThreadCapability,
path_types::ItemId,
- reducer::{ContentState, ReducerState, ScopeId},
+ reducer::{scope_from_room_wire, ContentState, ReducerState, ScopeId},
scope_rank::{build_children_rankings, ChildrenRankings},
state::AppState,
timeago,
};
use super::{
- bc_path, bc_path_external, bc_segment, cli_panel, layout, now_ms, ratio_pct,
- render_linkified_with_embeds_in_scope, theme_from_jar, theme_next_from_uri,
+ bc_path, bc_path_external, bc_segment, cli_panel, layout, layout_full_bleed_chromeless, now_ms,
+ ratio_pct, render_linkified_with_embeds_in_scope, theme_from_jar, theme_next_from_uri,
breadcrumb_path::{ExternalOntologyPath, OntologyPath},
- forum::{ThreadNav},
+ forum::{ingest_entry_markup, ThreadNav},
};
/// `GET /vote/compare` — pairs `left` / `right` query params with optional `thread`.
@@ -89,25 +89,62 @@ fn canonical_edge_items(a: &ItemId, b: &ItemId) -> (ItemId, ItemId) {
}
}
-/// Votes whose endpoints are exactly this unordered pair, oldest first.
-fn votes_for_edge(content: &ContentState, a: &ItemId, b: &ItemId) -> Vec<crate::reducer::VoteData> {
+/// All votes whose endpoints are exactly this unordered pair (unsorted).
+fn edge_vote_entries_for_pair(content: &ContentState, a: &ItemId, b: &ItemId) -> Vec<crate::reducer::VoteData> {
let (lo, hi) = canonical_edge_items(a, b);
let lo_s = lo.as_str();
let hi_s = hi.as_str();
- let mut out: Vec<crate::reducer::VoteData> = content
+ content
.item_votes
.get(&lo)
.into_iter()
.flat_map(|q| q.iter())
.filter(|v| {
- let touches = (v.a.as_str() == lo_s && v.b.as_str() == hi_s)
- || (v.a.as_str() == hi_s && v.b.as_str() == lo_s);
- touches
+ (v.a.as_str() == lo_s && v.b.as_str() == hi_s)
+ || (v.a.as_str() == hi_s && v.b.as_str() == lo_s)
})
.cloned()
- .collect();
- out.sort_by_key(|v| v.ts);
- out
+ .collect()
+}
+
+fn ratios_for_compare_page(v: &crate::reducer::VoteData, page_left: &ItemId, page_right: &ItemId) -> (i32, i32) {
+ let pl = page_left.as_str();
+ let pr = page_right.as_str();
+ match (v.a.as_str(), v.b.as_str()) {
+ (a, b) if a == pl && b == pr => (v.ratio_left, v.ratio_right),
+ (a, b) if a == pr && b == pl => (v.ratio_right, v.ratio_left),
+ _ => (v.ratio_left, v.ratio_right),
+ }
+}
+
+fn left_share_normalized(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 {
+ 0.5
+ } else {
+ l / sum
+ }
+}
+
+/// Stronger preference for **`page_left` first**; ties **newer first**.
+fn sort_votes_for_compare_display(
+ mut votes: Vec<crate::reducer::VoteData>,
+ page_left: &ItemId,
+ page_right: &ItemId,
+) -> Vec<crate::reducer::VoteData> {
+ votes.sort_by(|va, vb| {
+ let (ratio_left_a, ratio_right_a) = ratios_for_compare_page(va, page_left, page_right);
+ let (ratio_left_b, ratio_right_b) = ratios_for_compare_page(vb, page_left, page_right);
+ let sa = left_share_normalized(ratio_left_a, ratio_right_a);
+ let sb = left_share_normalized(ratio_left_b, ratio_right_b);
+ match sb.partial_cmp(&sa).unwrap_or(std::cmp::Ordering::Equal) {
+ std::cmp::Ordering::Equal => vb.ts.cmp(&va.ts),
+ o => o,
+ }
+ });
+ votes
}
/// Number of vote ingests recorded for this unordered pair in `content` (same scope as ranking).
@@ -144,39 +181,40 @@ fn vote_edge_history_markup(
content: &ContentState,
left: &ItemId,
right: &ItemId,
- nav: &ThreadNav,
) -> maud::Markup {
- let votes = votes_for_edge(content, left, right);
- let (lo, hi) = canonical_edge_items(left, right);
+ let votes = edge_vote_entries_for_pair(content, left, right);
+ let votes = sort_votes_for_compare_display(votes, left, right);
+ let legend_left = item_display_path(left.as_str());
+ let legend_right = item_display_path(right.as_str());
html! {
@if votes.is_empty() {
p class="muted vote-edge-empty" { "no votes on this pair in this scope yet" }
} @else {
- h3 class="vote-edge-history-title" { "votes on this edge" }
- ol class="vote-edge-history" {
+ h3 class="vote-edge-history-title" {
+ "votes on this edge"
+ span class="vote-edge-history-axis muted" { " · " (legend_left) " : " (legend_right) }
+ }
+ ul class="vote-edge-history" {
@for v in &votes {
- @let (ratio_lo, ratio_hi) = if v.a == lo && v.b == hi {
- (v.ratio_left, v.ratio_right)
- } else {
- (v.ratio_right, v.ratio_left)
- };
- @let pct = ratio_pct(ratio_lo, ratio_hi);
- @let left_class = if lo.as_str() == left.as_str() { "ratio-left current" } else { "ratio-left" };
- @let right_class = if hi.as_str() == left.as_str() { "ratio-right current" } else { "ratio-right" };
- li class="vote-edge-history-row" {
+ @let (r_left, r_right) = ratios_for_compare_page(v, left, right);
+ @let pct = ratio_pct(r_left, r_right);
+ @let row_tip = format!(
+ "{}:{} counts toward {} (left of bar) vs {} (right of bar); #{} · @{}",
+ r_left,
+ r_right,
+ legend_left,
+ legend_right,
+ v.thread_tag,
+ v.principal,
+ );
+ li class="vote-edge-history-row" title=(row_tip) {
div class="vote-edge-meta" {
- a href=(nav.garden_item_href(&lo)) {
- code { (item_display_path(lo.as_str())) }
- }
- span class="vote-edge-ratio" { (format!("{}:{}", ratio_lo, ratio_hi)) }
- a href=(nav.garden_item_href(&hi)) {
- code { (item_display_path(hi.as_str())) }
- }
+ span class="vote-edge-ratio" { (format!("{}:{}", r_left, r_right)) }
span class="muted" { " · #" (v.thread_tag) " · @" (v.principal) }
}
- div class="ratio-bar vote-edge-bar" {
- div class=(left_class) style={(format!("width: {:.3}%;", pct))} {}
- div class=(right_class) style={(format!("width: {:.3}%;", 100.0 - pct))} {}
+ 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))} {}
}
@if !v.body.trim().is_empty() {
div class="vote-edge-reason muted" { (v.body.trim()) }
@@ -192,14 +230,33 @@ fn vote_edge_history_markup(
pub(crate) async fn vote_compare_post_success_js(
state: &AppState,
nav: &ThreadNav,
+ room_wire: &str,
+ thread_tag: &str,
left: &ItemId,
right: &ItemId,
+ post_id: &str,
+ post_idx: Option<usize>,
) -> String {
let reduced = state.reduced.read().await;
+ let scope = scope_from_room_wire(room_wire);
+ let Some(ing) = reduced.ingests_by_id.get(post_id).cloned() else {
+ drop(reduced);
+ return "console.warn('vo
… preview truncated; 11,546 characters omittedB — c_ca72f0995396 (tommy-mor)
message
[798c764d] feat(html): grouped cli_panel with hover-to-copy and JS-safe asserts Single bordered panel for multiple commands; rows copy on click without a separate copy control. Assert CLI strings contain no chars that would break single-quoted onclick JS. Made-with: Cursor
diff preview
diff --git a/server/src/html/forum.rs b/server/src/html/forum.rs
index f6e45b05bb92126966e304619f80ef1d45be7a4b..075860914a6ce18bb0dfa73dc5651ef1a6318b67 100644
--- a/server/src/html/forum.rs
+++ b/server/src/html/forum.rs
@@ -718,7 +718,7 @@ pub async fn home(
}
div id="public-new-thread-ui-slot" {}
(render_thread_feed(Some(&nav), "thread-feed", &public_rows, now))
- (cli_panel("npx slugsocial public forum list"))
+ (cli_panel(&["npx slugsocial public forum list"]))
},
None,
theme_from_jar(&jar),
@@ -868,7 +868,7 @@ async fn thread_view_inner(
div id="thread-live-region" {
(compose_form(&nav, &tag, show_compose))
}
- (cli_panel(&cli))
+ (cli_panel(std::slice::from_ref(&cli)))
},
None,
theme_from_jar(&jar),
@@ -984,9 +984,7 @@ pub async fn room_page(
(new_thread_form_for_room(&nav, true, false))
}
}
- (cli_panel(&forum_cli))
- (cli_panel(&garden_cli))
- (cli_panel(&audit_cli))
+ (cli_panel(&[forum_cli, garden_cli, audit_cli]))
},
None,
theme_from_jar(&jar),
@@ -1409,7 +1407,7 @@ pub async fn user_profile_page(
}
}
}
- (cli_panel(&format!("npx slugsocial public forum list")))
+ (cli_panel(&[format!("npx slugsocial public forum list")]))
},
None,
theme_from_jar(&jar),
diff --git a/server/src/html/garden.rs b/server/src/html/garden.rs
index 9b4789a79c3e293cbfc5f033a0eac8650320d94d..c8ce7de450f7d14e04020511e7eb7323bd487deb 100644
--- a/server/src/html/garden.rs
+++ b/server/src/html/garden.rs
@@ -139,7 +139,7 @@ pub async fn garden_index(
}
}
}
- (cli_panel("npx slugsocial garden tree"))
+ (cli_panel(&["npx slugsocial garden tree"]))
},
None,
theme_from_jar(&jar),
@@ -542,7 +542,7 @@ async fn render_scope_view(
ScopeId::Public => format!("npx slugsocial public garden body {}", path.as_str().trim_start_matches("https://slug.social/~/")),
ScopeId::Room(room_id) => format!("npx slugsocial private {room_id} garden body {}", path.as_str().trim_start_matches("https://slug.social/~/")),
};
- (cli_panel(&cli))
+ (cli_panel(std::slice::from_ref(&cli)))
},
None,
theme_from_jar(&jar),
diff --git a/server/src/html/mod.rs b/server/src/html/mod.rs
index e7f5bfb7a4b2dee2adf96447224c58d641092124..6617781a2e8e86c2e2693788ea7cd0eb0e3659a2 100644
--- a/server/src/html/mod.rs
+++ b/server/src/html/mod.rs
@@ -599,18 +599,38 @@ pub(super) fn render_linkified_with_embeds_in_scope(raw: &str, garden_prefix: &s
}
}
-/// Small CLI hint panel showing how to look up this page from the terminal.
-pub(super) fn cli_panel(cmd: &str) -> Markup {
+/// CLI strings are embedded in a single-quoted JS literal; they must never need escaping.
+fn assert_cli_panel_cmd_js_single_quote_safe(s: &str) {
+ assert!(
+ !s.contains('\\')
+ && !s.contains('\'')
+ && !s.contains('\n')
+ && !s.contains('\r'),
+ "cli_panel cmd must not contain `\\`, `'`, or newlines (got {s:?})"
+ );
+}
+
+/// Small CLI hint panel: one border and title; each line is hover-highlighted and copies on click.
+pub(super) fn cli_panel<I: AsRef<str>>(cmds: &[I]) -> Markup {
+ if cmds.is_empty() {
+ return html! {};
+ }
+ for cmd in cmds {
+ assert_cli_panel_cmd_js_single_quote_safe(cmd.as_ref());
+ }
html! {
div class="cli-panel" {
span class="cli-panel-label muted" { "cli" }
- code class="cli-panel-cmd" { (cmd) }
- button
- class="cli-panel-copy"
- title="Copy to clipboard"
- onclick=(format!(r#"navigator.clipboard.writeText('{}'); this.textContent='✓'; setTimeout(() => this.textContent='copy', 2000);"#, cmd.replace("'", "\\'")))
- {
- "copy"
+ div class="cli-panel-cmds" {
+ @for cmd in cmds {
+ @let s = cmd.as_ref();
+ button type="button" class="cli-panel-row" title="Copy command" onclick=(format!(
+ r#"navigator.clipboard.writeText('{}');"#,
+ s
+ )) {
+ code class="cli-panel-cmd" { (s) }
+ }
+ }
}
}
}
diff --git a/server/src/html/search.rs b/server/src/html/search.rs
index 28ceaa53c3fcac6777311535e95fb771b19438f5..43e6ebf36cf0fe72c96f0f9d850bea51ac094c43 100644
--- a/server/src/html/search.rs
+++ b/server/src/html/search.rs
@@ -418,7 +418,7 @@ pub async fn search_page(
value=(query) autocomplete="off" autofocus;
}
(render_search_results(&results, &query))
- (cli_panel("npx slugsocial search <query>"))
+ (cli_panel(&["npx slugsocial search <query>"]))
},
None,
theme_from_jar(&jar),
diff --git a/server/static/theme_default.css b/server/static/theme_default.css
index e024a5c8b74139ae8be37b2a1bd17e4c3abe9324..764b66c8208e91e6138b83c534387cf43c85b8b5 100644
--- a/server/static/theme_default.css
+++ b/server/static/theme_default.css
@@ -610,7 +610,7 @@ code {
CLI PANEL — how to view this page from the terminal
---------------------------------------------------------------- */
div.cli-panel {
- align-items: baseline;
+ align-items: flex-start;
background: var(--g1);
border: var(--bv) solid;
border-color: var(--lo) var(--hi) var(--hi) var(--lo); /* inset */
@@ -621,11 +621,34 @@ div.cli-panel {
width: fit-content;
max-width: 100%;
}
+.cli-panel-cmds {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ flex: 1;
+ min-width: 0;
+}
+button.cli-panel-row {
+ background: transparent;
+ border: none;
+ color: inherit;
+ cursor: pointer;
+ display: block;
+ font: inherit;
+ margin: 0;
+ padding: 2px 4px;
+ text-align: left;
+ width: 100%;
+}
+button.cli-panel-row:hover {
+ background: var(--g3);
+}
.cli-panel-label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
flex-shrink: 0;
+ padding-top: 2px;
}
.cli-panel-cmd {
background: none;
diff --git a/server/static/theme_retro_craft.css b/server/static/theme_retro_craft.css
index 00714575bfa533d1d9c66653b9089642e2b0a6ca..f89ecbc3a18eb9b2b27d1f7764330f6bd6987552 100644
--- a/server/static/theme_retro_craft.css
+++ b/server/static/theme_retro_craft.css
@@ -306,19 +306,41 @@ a.post-nav-btn:hover {
}
div.cli-panel {
- align-items: baseline;
+ align-items: flex-start;
border: 1px dashed var(--line);
display: flex;
- flex-wrap: wrap;
gap: 0.5rem;
margin: 0.65rem 0;
padding: 0.45rem 0.65rem;
}
+.cli-panel-cmds {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ flex: 1;
+ min-width: 0;
+}
+button.cli-panel-row {
+ background: transparent;
+ border: none;
+ color: inherit;
+ cursor: pointer;
+ display: block;
+ font: inherit;
+ margin: 0;
+ padding: 0.1rem 0.2rem;
+ text-align: left;
+ width: 100%;
+}
+button.cli-panel-row:hover {
+ background: color-mix(in srgb, var(--accent) 14%, transparent);
+}
.cli-panel-label {
color: var(--ink-dim);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
+ padding-top: 0.12rem;
}
.cli-panel-cmd {
color: var(--accent);
Hardlinks — judgments / attempts / prompt
judgments
attempts
Prompt text is loaded only by the download route.