Update app.py

app.py

@@ -293,36 +293,53 @@ class HoverList(anywidget.AnyWidget):
     clicked_id  = t.Int(allow_none=True).tag(sync=True)
 
 
+# ---------- Predictions list ----------
 @solara.component
 def PredictionsList():
-    token_probs = token_probs_rx.value or []
-    selected_token_id = selected_token_id_rx.value
+    df = preds_rx.value  # your DataFrame with columns: probs, id, tok
+    with solara.Column(gap="6px", style={"maxWidth": "720px"}):
+        solara.Markdown("### Prediction")
+        solara.Text(
+            " #  probs    token  predicted next token",
+            style={
+                "color": "var(--muted)",
+                "fontFamily": 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+            },
+        )
 
-    with solara.Column():
-        for tid, prob in token_probs[:10]:
-            row_label = f"{id_to_token.get(tid, tid)} ({prob:.2f})"
-            is_selected = tid == selected_token_id
+        for i, row in df.iterrows():
+            tid = int(row["id"])
+            prob = row["probs"]            # already formatted like "3.21%"
+            tok_disp = display_token_from_id(tid)
+            row_label = fmt_row(i, prob, tid, tok_disp)
 
+            # Wrapper DIV handles hover reliably
             with solara.Div(
-                style={
-                    "background": "#333" if is_selected else "transparent",
-                    "padding": "2px",
-                    "borderRadius": "4px",
-                },
-                on_mouse_enter=lambda tid=tid: preview_token(tid),
-                on_mouse_leave=lambda tid=tid: preview_token(None),
+                classes=["rowbtn"],  # styling on wrapper
+                style={"justifyContent": "flex-start", "width": "100%"},
+                attributes={"tabindex": "0", "role": "button"},
+                # --- HOVER = preview neighborhood ---
+                on_mouse_enter=lambda *args, tid=tid: preview_token(tid),
+                on_mouse_over=lambda *args, tid=tid: preview_token(tid),
+                on_mouse_move=lambda *args, tid=tid: preview_token(tid),
+                on_pointer_enter=lambda *args, tid=tid: preview_token(tid),
+                on_pointer_move=lambda *args, tid=tid: preview_token(tid),
+                on_focus=lambda *args, tid=tid: preview_token(tid),   # keyboard
             ):
+                # Inner BUTTON handles click-to-append (and also binds hover for extra safety)
                 solara.Button(
                     row_label,
+                    classes=[],  # keep wrapper styled; button unstyled
+                    style={"justifyContent": "flex-start", "width": "100%"},
+                    # --- CLICK = append token to text ---
                     on_click=lambda *args, tid=tid: append_token(tid),
-                    style={
-                        "justifyContent": "flex-start",
-                        "width": "100%",
-                        "textAlign": "left",
-                        "color": "#38bdf8" if is_selected else "white",
-                    },
-                    on_mouse_enter=lambda tid=tid: preview_token(tid),
-                    on_mouse_leave=lambda tid=tid: preview_token(None),
+                    # redundant hover hooks (helps on some builds)
+                    on_mouse_enter=lambda *args, tid=tid: preview_token(tid),
+                    on_mouse_over=lambda *args, tid=tid: preview_token(tid),
+                    on_mouse_move=lambda *args, tid=tid: preview_token(tid),
+                    on_pointer_enter=lambda *args, tid=tid: preview_token(tid),
+                    on_pointer_move=lambda *args, tid=tid: preview_token(tid),
+                    on_focus=lambda *args, tid=tid: preview_token(tid),
                 )
 
 # ---------- Page ----------