Upload folder using huggingface_hub

app.py

@@ -829,9 +829,54 @@ body.wg-light-mode footer { display: none !important; }
 .wg-persona-label {
   font-style: italic; font-family: 'EB Garamond', serif;
   font-size: 0.78rem; color: var(--wg-yellow); letter-spacing: 0;
-  font-weight: 400;
+  font-weight: 400; background: transparent; border: none;
+  padding: 0; cursor: pointer;
 }
 #wg-practice .wg-persona-label { color: #b45309 !important; }
+.wg-insight-strip {
+  margin-top: 0.85rem;
+  padding: 0.8rem 0.95rem;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255,250,241,0.98), rgba(245,240,232,0.98));
+  border: 1px solid rgba(180,83,9,0.16);
+}
+.wg-insight-title {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 0.9rem;
+  letter-spacing: 0.12em;
+  color: #92400e !important;
+}
+.wg-insight-sub {
+  margin-top: 0.2rem;
+  font-size: 0.88rem;
+  color: #6b6258 !important;
+}
+.wg-insight-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-top: 0.65rem;
+}
+.wg-insight-btn {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  background: #fffaf1 !important;
+  border: 1px solid rgba(180,83,9,0.22) !important;
+  color: #9a3412 !important;
+  border-radius: 999px !important;
+  padding: 0.42rem 0.72rem !important;
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 0.8rem;
+  letter-spacing: 0.09em;
+  cursor: pointer;
+  line-height: 1;
+  box-shadow: none !important;
+}
+.wg-insight-btn:hover {
+  background: #ffffff !important;
+  border-color: rgba(180,83,9,0.42) !important;
+  transform: translateY(-1px);
+}
 
 .wg-another-take {
   float: right; cursor: pointer; font-family: 'EB Garamond', serif;
@@ -960,6 +1005,13 @@ body.wg-light-mode footer { display: none !important; }
   background: #f5f0e6; border-left: 3px solid #2d6a4f;
   padding: 0.75rem 1rem; border-radius: 0 10px 10px 0;
 }
+.wg-pop-minihead {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 0.8rem;
+  letter-spacing: 0.12em;
+  color: #2563eb !important;
+  margin: 0.9rem 0 0.35rem;
+}
 
 /* ── Arcade Character Selector ─────────────────────────────────────────────── */
 .wg-arcade {
@@ -1442,17 +1494,38 @@ window.wgOpenLatestTrace = function() {
   }
   try {
     var payload = JSON.parse(raw);
+    var meta = payload.metadata || {};
     var logs = Array.isArray(payload.logs) ? payload.logs : [];
     var summary = [
       ['route', payload.route || 'quick_wit'],
       ['winner', payload.winning_persona || 'n/a'],
-      ['twist', payload.metadata && payload.metadata.twist_potential != null ? String(payload.metadata.twist_potential) : 'n/a'],
+      ['twist', meta.twist_potential != null ? String(meta.twist_potential) : 'n/a'],
       ['scenes', String((payload.retrieved_scenes || []).length)],
       ['candidates', String((payload.candidates || []).length)]
     ];
+    function fmt(value) {
+      return String(value || '').replace(/_/g, ' ');
+    }
+    function title(value) {
+      return fmt(value).toUpperCase();
+    }
     var summaryHtml = summary.map(function(item) {
       return '<span class="wg-trace-pill"><strong>' + item[0] + '</strong> ' + item[1] + '</span>';
     }).join('');
+    var conceptHtml = '<div class="wg-pop-show">HOW WITGYM READ THIS MOMENT</div>'
+      + '<div class="wg-pop-bio" style="font-style:normal">'
+      + 'This is the teaching layer behind the joke: what kind of situation this is, what pressure drives it, which precedent scenes matched it, and which comic lens shaped the line.'
+      + '</div>'
+      + '<div class="wg-pop-minihead">SITUATION PATTERN</div>'
+      + '<div class="wg-pop-bio" style="font-style:normal">' + title(meta.archetype || 'unknown') + '</div>'
+      + '<div class="wg-pop-minihead">SOCIAL PRESSURE</div>'
+      + '<div class="wg-pop-bio" style="font-style:normal">' + title(meta.tension_type || 'unknown') + '</div>'
+      + '<div class="wg-pop-minihead">COMEDY COMPLEXITY</div>'
+      + '<div class="wg-pop-bio" style="font-style:normal">' + (meta.twist_potential != null ? String(meta.twist_potential) + '/10' : 'n/a') + ' · Higher means more moving parts to play with.</div>'
+      + '<div class="wg-pop-minihead">PERSONA LENS</div>'
+      + '<div class="wg-pop-bio" style="font-style:normal">' + title(payload.winning_persona || 'n/a') + ' · The comic angle used for the final line.</div>'
+      + '<div class="wg-pop-minihead">RETRIEVED CONTEXT</div>'
+      + '<div class="wg-pop-bio" style="font-style:normal">' + String((payload.retrieved_scenes || []).length) + ' Office scene(s) matched this pattern. They are reference cases, not lines being copied.</div>';
     var logHtml = logs.length ? logs.map(function(line) {
       return '<div class="wg-trace-logline">' +
         '<span class="wg-trace-step">' + (line.step || '') + '</span>' +
@@ -1466,9 +1539,10 @@ window.wgOpenLatestTrace = function() {
       .replace(/>/g, '&gt;');
     b.innerHTML =
       '<div class="wg-trace-modal-head">' +
-        '<div><div class="wg-trace-modal-title">POST-MORTEM TRACE</div><div class="wg-trace-modal-sub">Pretty JSON + execution log for the latest turn.</div></div>' +
+        '<div><div class="wg-trace-modal-title">HOW WITGYM BUILT THIS</div><div class="wg-trace-modal-sub">Student-friendly notes first, raw trace second.</div></div>' +
       '</div>' +
       '<div class="wg-trace-summary">' + summaryHtml + '</div>' +
+      conceptHtml +
       '<div class="wg-trace-logbox"><div class="wg-trace-logtitle">EXECUTION LOG</div>' + logHtml + '</div>' +
       '<div class="wg-trace-jsonbox"><div class="wg-trace-jsonhead">TRACE JSON</div><pre class="wg-trace-jsonpre">' + jsonPretty + '</pre></div>';
     o.style.display = 'flex';
@@ -1520,6 +1594,10 @@ window.wgOpenScene = function(character, show, setup, response, why, avatarUrl,
     + '<div class="wg-pop-bubble">' + response + '</div>'
     + '</div></div>'
     + '<div class="wg-pop-why">'
+    + '<div class="wg-pop-why-title">WHY THIS SCENE WAS RETRIEVED</div>'
+    + '<div class="wg-pop-why-body">This is a reference case with a similar comedy pattern, so the coach can borrow the mechanism without copying the line.</div>'
+    + '</div>'
+    + '<div class="wg-pop-why">'
     + '<div class="wg-pop-why-title">WHY IT WORKS</div>'
     + '<div class="wg-pop-why-body">' + why + '</div>'
     + '</div>';
@@ -2417,7 +2495,7 @@ def build_ui():
                                 '<path d="M16.5 8.5l1.4-1.4 2.5 2.5-1.4 1.4M15.7 9.3l2.5 2.5M15.2 14.8l3.6-3.6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>'
                                 '</svg>'
                                 '</span>'
-                                '<span class="wg-trace-launch-text">Open Trace</span>'
+                                '<span class="wg-trace-launch-text">Comedy Notes</span>'
                                 '</button>'
                                 '</div>'
                             )

notes/agent-memory/cases/2026-06-15-ui-browser-testing-normal-branch.md

@@ -0,0 +1,39 @@
+# UI browser testing in this repo should move from worktree to normal branch
+
+## Problem
+- UI closed-loop testing with the in-app browser became unreliable while working from a Codex git worktree.
+- The agent needed browser automation on localhost or browser-visible artifacts, but branch/worktree metadata and local runtime setup kept creating friction.
+
+## Why It Persisted
+- The code changes themselves were frontend-only and small, but verification depended on multiple layers: git worktree state, local runtime availability, and browser URL-policy constraints.
+- Detached HEAD / worktree-specific git metadata created extra branch-management friction right before UI verification.
+- The browser surface blocked direct file:// navigation, which made static preview verification harder unless served over localhost.
+
+## Paths Tried
+- Tried to continue from detached HEAD in the worktree, then corrected to a feature branch off origin/main.
+- Tried to launch the full app with uv; hit cache permission issues and then a uv runtime panic unrelated to product code.
+- Tried to open a static preview via file:// in the browser; browser security policy blocked that path.
+- Switched to the safer localhost-preview approach.
+
+## Root Cause
+- In this repo, UI verification from a Codex worktree can fail for operational reasons that are orthogonal to the UI change itself: shared git worktree metadata permissions, missing local dependency installation in the worktree, and browser policy restrictions on file:// URLs.
+
+## Pareto-Optimal Solution
+- If UI testing starts fighting the agent while on a worktree, switch to a normal branch checkout for browser-based validation rather than burning time debugging worktree-specific friction.
+- For static UI proof, prefer serving a preview over localhost instead of using file://, because the browser surface allows localhost but may block direct local-file navigation.
+
+## Evidence
+- `git checkout -b ...` from the worktree required elevated access to shared worktree git metadata outside the sandbox.
+- `uv run python app.py` failed first on cache permissions, then with a uv/system-configuration panic.
+- `python3 app.py` failed because the worktree runtime lacked installed dependencies like `python-dotenv`.
+- Browser automation rejected `file:///private/tmp/...` with an explicit URL-policy block.
+- `python3 -m http.server ...` on localhost succeeded once started with elevated permission.
+
+## Future-Agent Rules
+- If you are on a Codex worktree and UI testing starts failing for operational reasons, switch to a normal branch before spending more time on the worktree setup.
+- For browser automation in this repo, prefer localhost-served previews over file:// artifacts.
+- Distinguish environment/runtime failures from product regressions; do not misdiagnose launcher or policy problems as UI code bugs.
+
+## Follow-Ups
+- A normal-branch verification path is preferred for future high-pressure UI iterations.
+- If full app runtime is required, ensure the branch environment has the expected dependencies installed before starting the browser loop.

notes/agent-memory/durable_memory.md

@@ -0,0 +1,5 @@
+## 2026-06-15 - UI Browser Testing On Worktrees
+- Problem: browser-based UI validation in this repo became fragile from a Codex git worktree even when the UI change itself was small.
+- Root cause: worktree git metadata, missing runtime dependencies in the worktree, and browser blocking of `file://` previews created verification friction unrelated to the code.
+- Keep doing: if browser testing gets sticky, switch to a normal branch checkout and serve previews over localhost.
+- Avoid: spending hackathon time debugging worktree-specific UI testing failures or relying on `file://` preview URLs.

witgym/debug_render.py

@@ -52,22 +52,29 @@ def _fmt_chip(value: str) -> str:
 # Succinct definitions for each comedy structural property — shown on chip click
 _CHIP_DEFS: dict[str, tuple[str, str]] = {
     # Archetypes
-    "status_assertion":   ("STATUS ASSERTION",     "Who's in charge here? Comedy exploits the gap between perceived and actual authority."),
-    "self_delusion":      ("SELF-DELUSION",         "The speaker's internal narrative and external reality are on different planets. Exposure is inevitable."),
-    "power_inversion":    ("POWER INVERSION",       "Expected hierarchy flips. The person who should win, loses — and the reversal is the joke."),
-    "anxiety_escalation": ("ANXIETY ESCALATION",    "A small worry snowballs into catastrophe in real time. Comedy lives in watching the spiral."),
-    "social_fail":        ("SOCIAL PERFORMANCE FAIL", "The attempt to appear normal backfires. The harder the try, the bigger the collapse."),
-    "misplaced_conf":     ("MISPLACED CONFIDENCE",  "Maximum certainty, zero basis for it. The most dangerous form of comedy."),
+    "status_assertion":   ("ARCHETYPE · STATUS ASSERTION", "What it is: someone is trying to claim authority, status, or competence. Why it matters: the joke works by exposing the gap between the claim and the reality."),
+    "self_delusion":      ("ARCHETYPE · SELF-DELUSION", "What it is: someone believes a flattering story about themselves that reality cannot support. Why it matters: comedy lands when the fantasy finally runs into the facts."),
+    "power_inversion":    ("ARCHETYPE · POWER INVERSION", "What it is: the expected pecking order flips. Why it matters: surprise grows when the person who should control the room suddenly loses it."),
+    "anxiety_escalation": ("ARCHETYPE · ANXIETY ESCALATION", "What it is: a small worry spirals into a full disaster movie. Why it matters: the joke gets sharper as the reaction becomes bigger than the actual problem."),
+    "social_fail":        ("ARCHETYPE · SOCIAL PERFORMANCE FAIL", "What it is: someone tries to look normal, smooth, or impressive and fumbles it. Why it matters: comedy comes from watching the performance collapse in public."),
+    "misplaced_conf":     ("ARCHETYPE · MISPLACED CONFIDENCE", "What it is: someone sounds certain without having the facts. Why it matters: the joke exposes confidence that has outrun competence."),
     # Tensions
-    "social_embarrass":   ("SOCIAL EMBARRASSMENT",  "The gap between how you want to appear and how you actually appear. Everyone sees it except you."),
-    "existential":        ("EXISTENTIAL ANXIETY",   "The joke touches something deeper — identity, mortality, meaning. The laugh is a release valve."),
-    "status_threat":      ("STATUS THREAT",         "Someone's rank or belonging is under attack. Comedy exploits the gap between deserved and claimed status."),
-    "identity_expose":    ("IDENTITY EXPOSURE",     "A mask slips. What someone really is gets revealed against their will. Truth was always funnier."),
-    "logic_collapse":     ("LOGIC COLLAPSE",        "A belief or argument implodes under its own internal contradictions. Comedy as structural failure."),
+    "social_embarrass":   ("TENSION · SOCIAL EMBARRASSMENT", "What it is: the fear of looking foolish in front of other people. Why it matters: embarrassment raises the emotional stakes, so even a short line can hit hard."),
+    "existential":        ("TENSION · EXISTENTIAL ANXIETY", "What it is: the moment quietly touches identity, meaning, or dread. Why it matters: deeper fear gives the joke weight instead of making it feel throwaway."),
+    "status_threat":      ("TENSION · STATUS THREAT", "What it is: someone's rank, credibility, or belonging feels under pressure. Why it matters: status danger creates friction, and friction gives the line bite."),
+    "identity_expose":    ("TENSION · IDENTITY EXPOSURE", "What it is: the person's mask is slipping. Why it matters: jokes get stronger when they reveal the truth the speaker was trying to hide."),
+    "logic_collapse":     ("TENSION · LOGIC COLLAPSE", "What it is: the person's explanation breaks under its own rules. Why it matters: once the logic collapses, the line can simply point at the wreckage."),
     # Distances
-    "mild":               ("MILD VIOLATION",        "Gentle subversion. Safe for a work meeting. The laugh is a small, polite exhale."),
-    "moderate":           ("MODERATE VIOLATION",    "Has an edge. Makes the room slightly uncomfortable in a productive way. The sweet spot."),
-    "sharp":              ("SHARP VIOLATION",       "Cuts deep. The kind of line that makes people go quiet, then laugh harder than expected."),
+    "mild":               ("SHARPNESS · MILD VIOLATION", "What it is: a safe, lightly subversive joke. Why it matters: this keeps the line playful instead of confrontational."),
+    "moderate":           ("SHARPNESS · MODERATE VIOLATION", "What it is: a joke with some edge, but still recoverable. Why it matters: this is often the sweet spot for sounding bold without losing the room."),
+    "sharp":              ("SHARPNESS · SHARP VIOLATION", "What it is: a line that cuts close to the bone. Why it matters: sharper jokes can win bigger laughs, but they also raise the risk of silence."),
+}
+
+_PERSONA_DEFS: dict[str, tuple[str, str]] = {
+    "cynic": ("PERSONA · CYNIC", "This lens says the quiet part out loud. It spots the real motive, the hidden cost, or the ugly truth underneath the situation."),
+    "conviction": ("PERSONA · CONVICTION", "This lens commits completely to a wrong belief. It is funny because the certainty exposes something true about the speaker."),
+    "absurdist": ("PERSONA · ABSURDIST", "This lens follows the situation's logic farther than a normal person would. It makes the joke by treating the spiral as perfectly reasonable."),
+    "bisociate": ("PERSONA · BISOCIATE", "This lens jumps to a different but structurally matching world. It works when the same comic pattern suddenly shows up somewhere unexpected."),
 }
 
 
@@ -260,6 +267,46 @@ def _chip_onclick(value: str) -> str:
     return f"wgOpenChip({_jstr(title)},{_jstr(defn)})"
 
 
+def _persona_onclick(value: str) -> str:
+    title, defn = _PERSONA_DEFS.get(value, (f"PERSONA · {_fmt_chip(value)}", "This is the comic lens the coach used to write the line."))
+    return f"wgOpenChip({_jstr(title)},{_jstr(defn)})"
+
+
+def _insight_button(label: str, onclick: str) -> str:
+    return (
+        f'<button class="wg-insight-btn" type="button" onclick="{_esc(onclick)}">'
+        f'{_esc(label)}'
+        '</button>'
+    )
+
+
+def _coach_notes_html(result: WitGymResponse) -> str:
+    meta = result.metadata
+    buttons = [
+        _insight_button("situation pattern", _chip_onclick(meta.archetype.value)),
+        _insight_button("social pressure", _chip_onclick(meta.tension_type.value)),
+        _insight_button(
+            f"complexity {meta.twist_potential}/10",
+            f"wgOpenChip({_jstr('COMEDY COMPLEXITY')},{_jstr('What it is: how many moving parts this moment has. Why it matters: lower scores usually want one clean observation, while higher scores can support a twistier line.')})",
+        ),
+        _insight_button(
+            f"retrieved context · {len(result.retrieved_scenes)}",
+            f"wgOpenChip({_jstr('RETRIEVED CONTEXT')},{_jstr('These are Office scenes with a similar comedy pattern. They are reference cases for how the joke works, not lines the coach is copying.')})",
+        ),
+    ]
+    if result.winning_persona:
+        buttons.append(_insight_button("persona lens", _persona_onclick(result.winning_persona)))
+    return (
+        '<div class="wg-insight-strip">'
+        '<div class="wg-insight-title">How WitGym built this line</div>'
+        '<div class="wg-insight-sub">Tap any note for a quick explanation.</div>'
+        '<div class="wg-insight-buttons">'
+        + "".join(buttons) +
+        '</div>'
+        '</div>'
+    )
+
+
 def _meta_pass1_html(meta) -> str:
     arc_click = _chip_onclick(meta.archetype.value)
     ten_click  = _chip_onclick(meta.tension_type.value)
@@ -534,7 +581,10 @@ def format_trace_html(result: WitGymResponse, user_input: str, show_debug: bool
 
     # Winning persona label — use pre-compression value stored in response
     winning_persona = result.winning_persona
-    persona_label = f' · <em class="wg-persona-label">{_esc(winning_persona)}</em>' if winning_persona else ""
+    persona_label = (
+        f' · <button class="wg-persona-label" type="button" onclick="{_esc(_persona_onclick(winning_persona))}">{_esc(winning_persona)}</button>'
+        if winning_persona else ""
+    )
 
     # Another take button (only if alternatives exist)
     another_take_btn = (
@@ -571,6 +621,7 @@ def format_trace_html(result: WitGymResponse, user_input: str, show_debug: bool
     ]
     if result.explanation:
         parts.append(_explanation_panel_html(result.explanation))
+    parts.append(_coach_notes_html(result))
 
     # ── Drill chips (coaching follow-ups) ──────────────────────────────────
     if is_last: