divergence only.

app.py

@@ -1,36 +1,30 @@
 
-# sjt_answers_viewer.py
-# Gradio viewer for case_study_answers.json
-# - Shows one question at a time
-# - Dropdown 1: filter by **Name**
-# - Dropdown 2: filter by **Selected Trait** (HEXACO slice)
-# - Underlines & highlights the actually selected option + trait name
-# - Always orders options consistently (HEXACO)
-# - Top "Summary" bar shows proportion of selections by trait (under current Name filter)
+# sjt_compare_eleanor_hung.py
+# Minimal Gradio app: show ONLY questions where Eleanor and Hung chose different options.
+# - Loads case_study_answers.json
+# - Compares two personas (default: "Eleanor" vs "Hung")
+# - Displays the question and highlights Eleanor's choice in green, Hung's in red
+# - Navigation: Previous / Next / Random
 
 import json
 from pathlib import Path
 from typing import List, Dict, Any, Optional, Tuple
 import random
-
 import gradio as gr
-import matplotlib.pyplot as plt
-
-# ---------- Constants ----------
 
 DATA_PATH = Path("case_study_answers.json")
 
-HEXACO_ORDER = [
-    "hh",
+# Canonical HEXACO order & labels
+CANONICAL_ORDER = [
+    "honesty_humility",
     "emotionality",
     "extraversion",
     "agreeableness",
     "conscientiousness",
     "openness",
 ]
-
 TRAIT_LABELS = {
-    "hh": "Honesty–Humility",
+    "honesty_humility": "Honesty–Humility",
     "emotionality": "Emotionality",
     "extraversion": "Extraversion",
     "agreeableness": "Agreeableness",
@@ -38,19 +32,35 @@ TRAIT_LABELS = {
     "openness": "Openness",
 }
 
-# ---------- Icons ----------
-
-ICONS = {
-    "header": "📝",
-    "question": "❓",
-    "options": "✅",
-    "summary": "📊",
-    "progress": "⏭️",
-    "metadata": "🔖",
-    "filters": "🎛️",
+ALIAS_TO_CANON = {
+    "hh": "honesty_humility",
+    "honesty_humility": "honesty_humility",
+    "honesty-humility": "honesty_humility",
+    "honestyhumility": "honesty_humility",
+    "honesty": "honesty_humility",
+    "emotionality": "emotionality",
+    "extraversion": "extraversion",
+    "agreeableness": "agreeableness",
+    "conscientiousness": "conscientiousness",
+    "openness": "openness",
 }
 
-# ---------- Data Loading & Normalization ----------
+def canonical_trait(x: Optional[str]) -> Optional[str]:
+    if x is None:
+        return None
+    s = str(x).strip().lower()
+    if s.endswith("_option"):
+        s = s[:-7]
+    s = s.replace("-", "_").replace(" ", "_")
+    return ALIAS_TO_CANON.get(s, s if s in CANONICAL_ORDER else None)
+
+def get_option_text_from_blocks(block: Dict[str, Any], q: Dict[str, Any], canon: str) -> Optional[str]:
+    for key in (f"{canon}_option", f"hh_option" if canon == "honesty_humility" else None):
+        if key and isinstance(block, dict) and key in block:
+            return str(block[key]).strip()
+        if key and isinstance(q, dict) and key in q:
+            return str(q[key]).strip()
+    return None
 
 def load_json(path: Path) -> Any:
     if not path.exists():
@@ -59,65 +69,40 @@ def load_json(path: Path) -> Any:
         return json.load(f)
 
 def _safe_get_question_block(item: Dict[str, Any]) -> Tuple[str, Dict[str, str], Optional[str]]:
-    """
-    Extract (question_text, options_map, selected_trait) from a raw item.
-    Heuristics:
-      - Selected trait is at top-level key 'option'.
-      - Question text/options may be under item['question'] with nested 'corrected_sjt' or 'original_sjt'.
-      - Options are expected as keys like '<trait>_option' where trait ∈ HEXACO_ORDER.
-    """
-    selected = item.get("option")
-
+    selected = canonical_trait(item.get("option"))
     q = item.get("question", {}) or {}
     block = q.get("corrected_sjt") or q.get("original_sjt") or {}
 
     question_text = ""
     options: Dict[str, str] = {}
-
     if isinstance(block, dict):
         question_text = block.get("question") or q.get("question") or ""
-        for trait in HEXACO_ORDER:
-            k = f"{trait}_option"
-            if k in block:
-                options[trait] = str(block[k]).strip()
-            elif k in q:
-                options[trait] = str(q[k]).strip()
+        for c in CANONICAL_ORDER:
+            val = get_option_text_from_blocks(block, q, c)
+            if val:
+                options[c] = val
     else:
-        # sometimes block is a plain string
         question_text = str(block) if block else str(q.get("question", ""))
 
-    # Fallback: look for options directly on item if missing
     if not options and isinstance(q, dict):
-        for trait in HEXACO_ORDER:
-            k = f"{trait}_option"
-            if k in q:
-                options[trait] = str(q[k]).strip()
-
+        for c in CANONICAL_ORDER:
+            val = get_option_text_from_blocks({}, q, c)
+            if val:
+                options[c] = val
     return question_text.strip(), options, selected
 
 def flatten_entries(raw: Any) -> List[Dict[str, Any]]:
-    """
-    Returns a list of entries with keys:
-      - name (str)
-      - question (str)
-      - options (dict[trait->text])
-      - selected (trait str)
-    """
     out: List[Dict[str, Any]] = []
-
     def handle_item(obj: Dict[str, Any], default_name: str):
         q_text, opts, sel = _safe_get_question_block(obj)
-        # Prefer name from object if present; else inherit from container
         nm = (obj.get("name") or default_name or "Unknown").strip() or "Unknown"
         if q_text and opts and sel:
             out.append({"name": nm, "question": q_text, "options": opts, "selected": sel})
-
     if isinstance(raw, list):
         for x in raw:
             if isinstance(x, dict):
                 handle_item(x, "Unknown")
     elif isinstance(raw, dict):
-        # Could be {persona_name: [items]} or {persona_name: {...}} etc.
         for k, v in raw.items():
             default_name = str(k)
             if isinstance(v, list):
@@ -128,140 +113,70 @@ def flatten_entries(raw: Any) -> List[Dict[str, Any]]:
                 handle_item(v, default_name)
     return out
 
-DATA_RAW = load_json(DATA_PATH)
-DATA: List[Dict[str, Any]] = flatten_entries(DATA_RAW)
-
-# Unique names for dropdown
-def all_names(entries: List[Dict[str, Any]]) -> List[str]:
-    seen = []
-    for e in entries:
-        nm = e.get("name", "Unknown") or "Unknown"
-        if nm not in seen:
-            seen.append(nm)
-    return sorted(seen)
-
-NAME_FILTERS = ["All"] + all_names(DATA)
-TRAIT_FILTERS = ["All"] + HEXACO_ORDER
-
-# ---------- Filtering & Navigation ----------
-
-def get_filtered_indices(entries: List[Dict[str, Any]], name_filt: str, trait_filt: str) -> List[int]:
-    idxs = list(range(len(entries)))
-    if name_filt != "All":
-        idxs = [i for i in idxs if entries[i].get("name") == name_filt]
-    if trait_filt != "All":
-        idxs = [i for i in idxs if entries[i].get("selected") == trait_filt]
-    return idxs
-
-def clamp_index(i: int, n: int) -> int:
-    return 0 if n == 0 else (i % n)
-
-# ---------- Summary ----------
+def normalize_name(s: str) -> str:
+    return " ".join((s or "").strip().lower().split())
 
-def compute_summary(entries: List[Dict[str, Any]]):
-    total = len(entries)
-    counts = {t: 0 for t in HEXACO_ORDER}
+def build_mismatch_list(entries: List[Dict[str, Any]], name_a: str, name_b: str):
+    A = normalize_name(name_a)
+    B = normalize_name(name_b)
+    # index by normalized question text
+    qmap: Dict[str, Dict[str, Dict[str, Any]]] = {}
     for e in entries:
-        sel = e.get("selected")
-        if sel in counts:
-            counts[sel] += 1
-    labels = [TRAIT_LABELS[t] for t in HEXACO_ORDER]
-    props = [counts[t] / total if total else 0.0 for t in HEXACO_ORDER]
-    return labels, props, counts, total
+        q = " ".join(e["question"].split())
+        n = normalize_name(e["name"])
+        qmap.setdefault(q, {})[n] = e
+
+    mismatches = []
+    for q, per_name in qmap.items():
+        if A in per_name and B in per_name:
+            sel_a = per_name[A]["selected"]
+            sel_b = per_name[B]["selected"]
+            if sel_a != sel_b:
+                # prefer Eleanor's options, else Hung's
+                opts = per_name[A]["options"] or per_name[B]["options"]
+                mismatches.append({
+                    "question": q,
+                    "eleanor": per_name[A],
+                    "hung": per_name[B],
+                    "options": opts,
+                })
+    return mismatches
+
+def make_display(item: Dict[str, Any], name_a_disp: str, name_b_disp: str) -> str:
+    q = item["question"]
+    sel_a = item["eleanor"]["selected"]
+    sel_b = item["hung"]["selected"]
+    opts = item["options"]
+
+    a_label = TRAIT_LABELS.get(sel_a, sel_a)
+    b_label = TRAIT_LABELS.get(sel_b, sel_b)
+
+    a_text = opts.get(sel_a, "")
+    b_text = opts.get(sel_b, "")
+
+    # styled spans
+    a_span = f"<span style='background:#e8ffe8;color:#0a6410;font-weight:700;'>{a_label}: {a_text}</span>"
+    b_span = f"<span style='background:#ffe8e8;color:#a00606;font-weight:700;'>{b_label}: {b_text}</span>"
+
+    body = [
+        f"### ❓ Question",
+        q,
+        "",
+        f"**{name_a_disp} chose:** {a_span}",
+        f"**{name_b_disp} chose:** {b_span}",
+    ]
+    return "\n\n".join(body)
 
-def summary_plot(entries: List[Dict[str, Any]]):
-    # Returns Markdown with proportions per trait under the current Name filter
-    labels, props, counts, total = compute_summary(entries)
-    lines = ["## 📊 Summary (Name filter)", f"**Total:** {total}"]
-    for label, p in zip(labels, props):
-        lines.append(f"- {label}: {p:.2f}")
-    return "\n".join(lines)
-
-# ---------- Rendering ----------
-
-def md_question(entry: Dict[str, Any]) -> str:
-    q = entry.get("question", "")
-    name = entry.get("name", "—")
-    return f"## {ICONS['question']} Question\n**Name:** {name}\n\n{q if q else '—'}"
-
-def md_options(entry: Dict[str, Any]) -> str:
-    opts: Dict[str, str] = entry.get("options", {})
-    selected = entry.get("selected")
-    lines = []
-    for i, trait in enumerate(HEXACO_ORDER, start=1):
-        if trait not in opts:
-            continue
-        label = TRAIT_LABELS[trait]
-        text = opts[trait]
-        if trait == selected:
-            # underline + highlight both the label and the text
-            line = (
-                f"{i}. <u><mark><strong>{label}</strong>:</mark></u> "
-                f"<u><mark>{text}</mark></u>"
-            )
-        else:
-            line = f"{i}. **{label}:** {text}"
-        lines.append(line)
-    body = "\n\n".join(lines) if lines else "—"
-    return f"## {ICONS['options']} Options (HEXACO order)\n{body}"
-
-def md_metadata(entry: Dict[str, Any], idx: int, total_in_filter: int) -> str:
-    sel = entry.get("selected", "—")
-    sel_disp = TRAIT_LABELS.get(sel, sel)
-    nm = entry.get("name", "—")
-    return (
-        f"## {ICONS['metadata']} Metadata\n"
-        f"**Name:** {nm}  \n"
-        f"**Selected Option (Trait):** {sel_disp}  \n"
-        f"**Position in Filter:** {idx + 1} / {total_in_filter}"
-    )
-
-def md_progress(idx: int, total: int) -> str:
-    return f"## {ICONS['progress']} Progress\n**{idx + 1} / {total}**"
-
-def render(entries: List[Dict[str, Any]], name_filt: str, trait_filt: str, pos: int):
-    # For summary, use "name-only" filter to show that persona's distribution
-    name_only_indices = [i for i, e in enumerate(entries) if (name_filt == "All" or e.get("name") == name_filt)]
-    name_only_slice = [entries[i] for i in name_only_indices]
-
-    # For the main view selection, apply both filters
-    indices = get_filtered_indices(entries, name_filt, trait_filt)
-    n = len(indices)
-
-    if n == 0:
-        return (
-            summary_plot(name_only_slice),
-            f"## {ICONS['question']} Question\n_No questions for filters **Name={name_filt}**, **Trait={trait_filt}**._",
-            f"## {ICONS['options']} Options\n—",
-            f"## {ICONS['metadata']} Metadata\n—",
-            f"## {ICONS['progress']} Progress\n0 / 0",
-            0,  # expose pos back
-        )
-
-    pos = clamp_index(pos, n)
-    entry = entries[indices[pos]]
-    return (
-        summary_plot(name_only_slice),
-        md_question(entry),
-        md_options(entry),
-        md_metadata(entry, pos, n),
-        md_progress(pos, n),
-        pos,  # expose pos back
-    )
-
-# ---------- Gradio App ----------
+DATA_RAW = load_json(DATA_PATH)
+DATA = flatten_entries(DATA_RAW)
 
-with gr.Blocks(title="SJT Answers Viewer") as demo:
-    gr.Markdown("# SJT Answers Viewer")
-    gr.Markdown(
-        f"{ICONS['filters']} **Filters:** Choose a Name and a HEXACO Selected-Trait slice.\n\n"
-        f"{ICONS['summary']} **Summary:** Bar shows the trait-selection proportions under the current **Name** filter.\n\n"
-        "Options are consistently ordered by HEXACO. The actual selected option is underlined and highlighted."
-    )
+with gr.Blocks(title="Eleanor vs Hung — Differences Only") as demo:
+    gr.Markdown("# Eleanor vs Hung — Different Answers Only")
+    gr.Markdown("Shows only the questions where the two personas chose different options.")
 
     with gr.Row():
-        name_dd = gr.Dropdown(choices=NAME_FILTERS, value="All", label="Filter by Name", interactive=True)
-        trait_dd = gr.Dropdown(choices=TRAIT_FILTERS, value="All", label="Filter by Selected Trait", interactive=True)
+        name_a_in = gr.Textbox(value="Eleanor", label="Name A (green)", interactive=True)
+        name_b_in = gr.Textbox(value="Hung", label="Name B (red)", interactive=True)
         st_pos = gr.State(0)
 
     with gr.Row():
@@ -269,71 +184,40 @@ with gr.Blocks(title="SJT Answers Viewer") as demo:
         next_btn = gr.Button("Next")
         rand_btn = gr.Button("Random")
 
-    # Outputs
-    summary_out = gr.Markdown(label="Selections Summary (Name filter)")
-    question_out = gr.Markdown()
-    options_out = gr.Markdown()
-    metadata_out = gr.Markdown()
-    progress_out = gr.Markdown()
-
-    # ----- Callbacks -----
-    def on_filters_change(name_filt: str, trait_filt: str):
-        return [*render(DATA, name_filt, trait_filt, 0), 0]
-
-    def on_prev(name_filt: str, trait_filt: str, pos: int):
-        indices = get_filtered_indices(DATA, name_filt, trait_filt)
-        if not indices:
-            return [*render(DATA, name_filt, trait_filt, pos), pos]
-        pos = clamp_index(pos - 1, len(indices))
-        return [*render(DATA, name_filt, trait_filt, pos), pos]
-
-    def on_next(name_filt: str, trait_filt: str, pos: int):
-        indices = get_filtered_indices(DATA, name_filt, trait_filt)
-        if not indices:
-            return [*render(DATA, name_filt, trait_filt, pos), pos]
-        pos = clamp_index(pos + 1, len(indices))
-        return [*render(DATA, name_filt, trait_filt, pos), pos]
-
-    def on_rand(name_filt: str, trait_filt: str, pos: int):
-        indices = get_filtered_indices(DATA, name_filt, trait_filt)
-        if not indices:
-            return [*render(DATA, name_filt, trait_filt, pos), pos]
-        pos = random.randrange(len(indices))
-        return [*render(DATA, name_filt, trait_filt, pos), pos]
+    status_md = gr.Markdown()
+    diff_md = gr.Markdown()
+
+    def recompute(name_a: str, name_b: str):
+        mismatches = build_mismatch_list(DATA, name_a, name_b)
+        total = len(mismatches)
+        if total == 0:
+            return 0, f"**0 differences** found for *{name_a}* vs *{name_b}*.", "_No differences to show._"
+        # show first
+        md = make_display(mismatches[0], name_a, name_b)
+        return 0, f"**{total} differences** found for *{name_a}* vs *{name_b}*.", md
+
+    def nav(name_a: str, name_b: str, pos: int, step: int = 0, rand: bool = False):
+        mismatches = build_mismatch_list(DATA, name_a, name_b)
+        total = len(mismatches)
+        if total == 0:
+            return pos, f"**0 differences** found for *{name_a}* vs *{name_b}*.", "_No differences to show._"
+        if rand:
+            pos = random.randrange(total)
+        else:
+            pos = (pos + step) % total
+        md = make_display(mismatches[pos], name_a, name_b)
+        return pos, f"**{total} differences** found • Showing {pos+1} / {total}", md
 
-    name_dd.change(
-        on_filters_change,
-        inputs=[name_dd, trait_dd],
-        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
-    )
-    trait_dd.change(
-        on_filters_change,
-        inputs=[name_dd, trait_dd],
-        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
-    )
+    # Trigger recompute when names change
+    name_a_in.change(lambda a, b: recompute(a, b), inputs=[name_a_in, name_b_in], outputs=[st_pos, status_md, diff_md])
+    name_b_in.change(lambda a, b: recompute(a, b), inputs=[name_a_in, name_b_in], outputs=[st_pos, status_md, diff_md])
 
-    prev_btn.click(
-        on_prev,
-        inputs=[name_dd, trait_dd, st_pos],
-        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
-    )
-    next_btn.click(
-        on_next,
-        inputs=[name_dd, trait_dd, st_pos],
-        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
-    )
-    rand_btn.click(
-        on_rand,
-        inputs=[name_dd, trait_dd, st_pos],
-        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
-    )
+    prev_btn.click(lambda a, b, p: nav(a, b, p, step=-1), inputs=[name_a_in, name_b_in, st_pos], outputs=[st_pos, status_md, diff_md])
+    next_btn.click(lambda a, b, p: nav(a, b, p, step=+1), inputs=[name_a_in, name_b_in, st_pos], outputs=[st_pos, status_md, diff_md])
+    rand_btn.click(lambda a, b, p: nav(a, b, p, rand=True), inputs=[name_a_in, name_b_in, st_pos], outputs=[st_pos, status_md, diff_md])
 
     # initial load
-    demo.load(
-        lambda: [*render(DATA, "All", "All", 0), 0],
-        inputs=None,
-        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
-    )
+    demo.load(lambda: recompute("Eleanor", "Hung"), inputs=None, outputs=[st_pos, status_md, diff_md])
 
 if __name__ == "__main__":
     demo.launch()

backup_app.py

@@ -0,0 +1,339 @@
+
+# sjt_answers_viewer.py
+# Gradio viewer for case_study_answers.json
+# - Shows one question at a time
+# - Dropdown 1: filter by **Name**
+# - Dropdown 2: filter by **Selected Trait** (HEXACO slice)
+# - Underlines & highlights the actually selected option + trait name
+# - Always orders options consistently (HEXACO)
+# - Top "Summary" bar shows proportion of selections by trait (under current Name filter)
+
+import json
+from pathlib import Path
+from typing import List, Dict, Any, Optional, Tuple
+import random
+
+import gradio as gr
+import matplotlib.pyplot as plt
+
+# ---------- Constants ----------
+
+DATA_PATH = Path("case_study_answers.json")
+
+HEXACO_ORDER = [
+    "hh",
+    "emotionality",
+    "extraversion",
+    "agreeableness",
+    "conscientiousness",
+    "openness",
+]
+
+TRAIT_LABELS = {
+    "hh": "Honesty–Humility",
+    "emotionality": "Emotionality",
+    "extraversion": "Extraversion",
+    "agreeableness": "Agreeableness",
+    "conscientiousness": "Conscientiousness",
+    "openness": "Openness",
+}
+
+# ---------- Icons ----------
+
+ICONS = {
+    "header": "📝",
+    "question": "❓",
+    "options": "✅",
+    "summary": "📊",
+    "progress": "⏭️",
+    "metadata": "🔖",
+    "filters": "🎛️",
+}
+
+# ---------- Data Loading & Normalization ----------
+
+def load_json(path: Path) -> Any:
+    if not path.exists():
+        return []
+    with path.open("r", encoding="utf-8") as f:
+        return json.load(f)
+
+def _safe_get_question_block(item: Dict[str, Any]) -> Tuple[str, Dict[str, str], Optional[str]]:
+    """
+    Extract (question_text, options_map, selected_trait) from a raw item.
+    Heuristics:
+      - Selected trait is at top-level key 'option'.
+      - Question text/options may be under item['question'] with nested 'corrected_sjt' or 'original_sjt'.
+      - Options are expected as keys like '<trait>_option' where trait ∈ HEXACO_ORDER.
+    """
+    selected = item.get("option")
+
+    q = item.get("question", {}) or {}
+    block = q.get("corrected_sjt") or q.get("original_sjt") or {}
+
+    question_text = ""
+    options: Dict[str, str] = {}
+
+    if isinstance(block, dict):
+        question_text = block.get("question") or q.get("question") or ""
+        for trait in HEXACO_ORDER:
+            k = f"{trait}_option"
+            if k in block:
+                options[trait] = str(block[k]).strip()
+            elif k in q:
+                options[trait] = str(q[k]).strip()
+    else:
+        # sometimes block is a plain string
+        question_text = str(block) if block else str(q.get("question", ""))
+
+    # Fallback: look for options directly on item if missing
+    if not options and isinstance(q, dict):
+        for trait in HEXACO_ORDER:
+            k = f"{trait}_option"
+            if k in q:
+                options[trait] = str(q[k]).strip()
+
+    return question_text.strip(), options, selected
+
+def flatten_entries(raw: Any) -> List[Dict[str, Any]]:
+    """
+    Returns a list of entries with keys:
+      - name (str)
+      - question (str)
+      - options (dict[trait->text])
+      - selected (trait str)
+    """
+    out: List[Dict[str, Any]] = []
+
+    def handle_item(obj: Dict[str, Any], default_name: str):
+        q_text, opts, sel = _safe_get_question_block(obj)
+        # Prefer name from object if present; else inherit from container
+        nm = (obj.get("name") or default_name or "Unknown").strip() or "Unknown"
+        if q_text and opts and sel:
+            out.append({"name": nm, "question": q_text, "options": opts, "selected": sel})
+
+    if isinstance(raw, list):
+        for x in raw:
+            if isinstance(x, dict):
+                handle_item(x, "Unknown")
+    elif isinstance(raw, dict):
+        # Could be {persona_name: [items]} or {persona_name: {...}} etc.
+        for k, v in raw.items():
+            default_name = str(k)
+            if isinstance(v, list):
+                for x in v:
+                    if isinstance(x, dict):
+                        handle_item(x, default_name)
+            elif isinstance(v, dict):
+                handle_item(v, default_name)
+    return out
+
+DATA_RAW = load_json(DATA_PATH)
+DATA: List[Dict[str, Any]] = flatten_entries(DATA_RAW)
+
+# Unique names for dropdown
+def all_names(entries: List[Dict[str, Any]]) -> List[str]:
+    seen = []
+    for e in entries:
+        nm = e.get("name", "Unknown") or "Unknown"
+        if nm not in seen:
+            seen.append(nm)
+    return sorted(seen)
+
+NAME_FILTERS = ["All"] + all_names(DATA)
+TRAIT_FILTERS = ["All"] + HEXACO_ORDER
+
+# ---------- Filtering & Navigation ----------
+
+def get_filtered_indices(entries: List[Dict[str, Any]], name_filt: str, trait_filt: str) -> List[int]:
+    idxs = list(range(len(entries)))
+    if name_filt != "All":
+        idxs = [i for i in idxs if entries[i].get("name") == name_filt]
+    if trait_filt != "All":
+        idxs = [i for i in idxs if entries[i].get("selected") == trait_filt]
+    return idxs
+
+def clamp_index(i: int, n: int) -> int:
+    return 0 if n == 0 else (i % n)
+
+# ---------- Summary ----------
+
+def compute_summary(entries: List[Dict[str, Any]]):
+    total = len(entries)
+    counts = {t: 0 for t in HEXACO_ORDER}
+    for e in entries:
+        sel = e.get("selected")
+        if sel in counts:
+            counts[sel] += 1
+    labels = [TRAIT_LABELS[t] for t in HEXACO_ORDER]
+    props = [counts[t] / total if total else 0.0 for t in HEXACO_ORDER]
+    return labels, props, counts, total
+
+def summary_plot(entries: List[Dict[str, Any]]):
+    # Returns Markdown with proportions per trait under the current Name filter
+    labels, props, counts, total = compute_summary(entries)
+    lines = ["## 📊 Summary (Name filter)", f"**Total:** {total}"]
+    for label, p in zip(labels, props):
+        lines.append(f"- {label}: {p:.2f}")
+    return "\n".join(lines)
+
+# ---------- Rendering ----------
+
+def md_question(entry: Dict[str, Any]) -> str:
+    q = entry.get("question", "")
+    name = entry.get("name", "—")
+    return f"## {ICONS['question']} Question\n**Name:** {name}\n\n{q if q else '—'}"
+
+def md_options(entry: Dict[str, Any]) -> str:
+    opts: Dict[str, str] = entry.get("options", {})
+    selected = entry.get("selected")
+    lines = []
+    for i, trait in enumerate(HEXACO_ORDER, start=1):
+        if trait not in opts:
+            continue
+        label = TRAIT_LABELS[trait]
+        text = opts[trait]
+        if trait == selected:
+            # underline + highlight both the label and the text
+            line = (
+                f"{i}. <u><mark><strong>{label}</strong>:</mark></u> "
+                f"<u><mark>{text}</mark></u>"
+            )
+        else:
+            line = f"{i}. **{label}:** {text}"
+        lines.append(line)
+    body = "\n\n".join(lines) if lines else "—"
+    return f"## {ICONS['options']} Options (HEXACO order)\n{body}"
+
+def md_metadata(entry: Dict[str, Any], idx: int, total_in_filter: int) -> str:
+    sel = entry.get("selected", "—")
+    sel_disp = TRAIT_LABELS.get(sel, sel)
+    nm = entry.get("name", "—")
+    return (
+        f"## {ICONS['metadata']} Metadata\n"
+        f"**Name:** {nm}  \n"
+        f"**Selected Option (Trait):** {sel_disp}  \n"
+        f"**Position in Filter:** {idx + 1} / {total_in_filter}"
+    )
+
+def md_progress(idx: int, total: int) -> str:
+    return f"## {ICONS['progress']} Progress\n**{idx + 1} / {total}**"
+
+def render(entries: List[Dict[str, Any]], name_filt: str, trait_filt: str, pos: int):
+    # For summary, use "name-only" filter to show that persona's distribution
+    name_only_indices = [i for i, e in enumerate(entries) if (name_filt == "All" or e.get("name") == name_filt)]
+    name_only_slice = [entries[i] for i in name_only_indices]
+
+    # For the main view selection, apply both filters
+    indices = get_filtered_indices(entries, name_filt, trait_filt)
+    n = len(indices)
+
+    if n == 0:
+        return (
+            summary_plot(name_only_slice),
+            f"## {ICONS['question']} Question\n_No questions for filters **Name={name_filt}**, **Trait={trait_filt}**._",
+            f"## {ICONS['options']} Options\n—",
+            f"## {ICONS['metadata']} Metadata\n—",
+            f"## {ICONS['progress']} Progress\n0 / 0",
+            0,  # expose pos back
+        )
+
+    pos = clamp_index(pos, n)
+    entry = entries[indices[pos]]
+    return (
+        summary_plot(name_only_slice),
+        md_question(entry),
+        md_options(entry),
+        md_metadata(entry, pos, n),
+        md_progress(pos, n),
+        pos,  # expose pos back
+    )
+
+# ---------- Gradio App ----------
+
+with gr.Blocks(title="SJT Answers Viewer") as demo:
+    gr.Markdown("# SJT Answers Viewer")
+    gr.Markdown(
+        f"{ICONS['filters']} **Filters:** Choose a Name and a HEXACO Selected-Trait slice.\n\n"
+        f"{ICONS['summary']} **Summary:** Bar shows the trait-selection proportions under the current **Name** filter.\n\n"
+        "Options are consistently ordered by HEXACO. The actual selected option is underlined and highlighted."
+    )
+
+    with gr.Row():
+        name_dd = gr.Dropdown(choices=NAME_FILTERS, value="All", label="Filter by Name", interactive=True)
+        trait_dd = gr.Dropdown(choices=TRAIT_FILTERS, value="All", label="Filter by Selected Trait", interactive=True)
+        st_pos = gr.State(0)
+
+    with gr.Row():
+        prev_btn = gr.Button("Previous")
+        next_btn = gr.Button("Next")
+        rand_btn = gr.Button("Random")
+
+    # Outputs
+    summary_out = gr.Markdown(label="Selections Summary (Name filter)")
+    question_out = gr.Markdown()
+    options_out = gr.Markdown()
+    metadata_out = gr.Markdown()
+    progress_out = gr.Markdown()
+
+    # ----- Callbacks -----
+    def on_filters_change(name_filt: str, trait_filt: str):
+        return [*render(DATA, name_filt, trait_filt, 0), 0]
+
+    def on_prev(name_filt: str, trait_filt: str, pos: int):
+        indices = get_filtered_indices(DATA, name_filt, trait_filt)
+        if not indices:
+            return [*render(DATA, name_filt, trait_filt, pos), pos]
+        pos = clamp_index(pos - 1, len(indices))
+        return [*render(DATA, name_filt, trait_filt, pos), pos]
+
+    def on_next(name_filt: str, trait_filt: str, pos: int):
+        indices = get_filtered_indices(DATA, name_filt, trait_filt)
+        if not indices:
+            return [*render(DATA, name_filt, trait_filt, pos), pos]
+        pos = clamp_index(pos + 1, len(indices))
+        return [*render(DATA, name_filt, trait_filt, pos), pos]
+
+    def on_rand(name_filt: str, trait_filt: str, pos: int):
+        indices = get_filtered_indices(DATA, name_filt, trait_filt)
+        if not indices:
+            return [*render(DATA, name_filt, trait_filt, pos), pos]
+        pos = random.randrange(len(indices))
+        return [*render(DATA, name_filt, trait_filt, pos), pos]
+
+    name_dd.change(
+        on_filters_change,
+        inputs=[name_dd, trait_dd],
+        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
+    )
+    trait_dd.change(
+        on_filters_change,
+        inputs=[name_dd, trait_dd],
+        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
+    )
+
+    prev_btn.click(
+        on_prev,
+        inputs=[name_dd, trait_dd, st_pos],
+        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
+    )
+    next_btn.click(
+        on_next,
+        inputs=[name_dd, trait_dd, st_pos],
+        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
+    )
+    rand_btn.click(
+        on_rand,
+        inputs=[name_dd, trait_dd, st_pos],
+        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
+    )
+
+    # initial load
+    demo.load(
+        lambda: [*render(DATA, "All", "All", 0), 0],
+        inputs=None,
+        outputs=[summary_out, question_out, options_out, metadata_out, progress_out, st_pos, st_pos],
+    )
+
+if __name__ == "__main__":
+    demo.launch()