fix: render Observe sort arrows correctly

CHANGELOG.md

@@ -70,6 +70,9 @@ This format follows [Keep a Changelog](https://keepachangelog.com/) and adheres
   WAF checklist row are gone.
 
 ### Fixed
+- **Observe table headers render proper sorting arrows.** CSS Unicode escapes
+  are preserved through Python rendering, replacing the broken control
+  character and trailing `95`, `91`, or `93` text in sortable columns.
 - **Observe tool rows inherit explicit runtime evidence from their agent invocation.**
   Tool spans that omit provider metadata are now correlated to the matching
   `invoke_agent` span within the same project, agent, and trace, so Hosted

src/agentops/agent/observe/ui.py

@@ -2799,17 +2799,17 @@ def render_trace_detail_shell(
 }
 .observe-sort-button::after {
   color: var(--observe-muted);
-  content: "\2195";
+  content: "\\2195";
   font-size: 12px;
   line-height: 1;
 }
 th[aria-sort="ascending"] .observe-sort-button::after {
   color: var(--observe-accent);
-  content: "\2191";
+  content: "\\2191";
 }
 th[aria-sort="descending"] .observe-sort-button::after {
   color: var(--observe-accent);
-  content: "\2193";
+  content: "\\2193";
 }
 .observe-sort-button:focus-visible {
   border-radius: 3px;

tests/unit/__snapshots__/observe_overview.html

@@ -448,17 +448,17 @@
 }
 .observe-sort-button::after {
   color: var(--observe-muted);
-  content: "95";
+  content: "\2195";
   font-size: 12px;
   line-height: 1;
 }
 th[aria-sort="ascending"] .observe-sort-button::after {
   color: var(--observe-accent);
-  content: "91";
+  content: "\2191";
 }
 th[aria-sort="descending"] .observe-sort-button::after {
   color: var(--observe-accent);
-  content: "93";
+  content: "\2193";
 }
 .observe-sort-button:focus-visible {
   border-radius: 3px;

tests/unit/__snapshots__/observe_styles.css

@@ -442,17 +442,17 @@ thead th {
 }
 .observe-sort-button::after {
   color: var(--observe-muted);
-  content: "95";
+  content: "\2195";
   font-size: 12px;
   line-height: 1;
 }
 th[aria-sort="ascending"] .observe-sort-button::after {
   color: var(--observe-accent);
-  content: "91";
+  content: "\2191";
 }
 th[aria-sort="descending"] .observe-sort-button::after {
   color: var(--observe-accent);
-  content: "93";
+  content: "\2193";
 }
 .observe-sort-button:focus-visible {
   border-radius: 3px;

tests/unit/test_observe_ui.py

@@ -758,6 +758,10 @@ def test_all_observe_table_columns_are_upgraded_to_sortable_headers() -> None:
     assert 'var headers = table.querySelectorAll("thead th")' in script
     assert 'makeEl("button", "observe-sort-button", label)' in script
     assert 'other.setAttribute("aria-sort", other === header ? direction : "none")' in script
+    assert 'content: "\\2195"' in ui._OBSERVE_STYLES
+    assert 'content: "\\2191"' in ui._OBSERVE_STYLES
+    assert 'content: "\\2193"' in ui._OBSERVE_STYLES
+    assert not any(ord(character) < 32 and character not in "\n\r\t" for character in ui._OBSERVE_STYLES)
 
 
 # ---------------------------------------------------------------------------