feat: UX pass — sharp at bond 90, fog thins, restart-proof flash, ghost echo, treasure scroll, native typing dots, autoscroll

- materialization completes at bond 90 (was never sharp at 100 behind fixed fog)
- fog/grain/vignette opacity now computed from affinity: the curtain lifts
- flash animation names alternate per turn (flash-0/flash-1) so one-shot
animations restart even when Gradio morphs the DOM in place; flash 1.8s
- subliminal full-screen terror echo (~5% opacity) on recall turns and finale
- faint dried-blood stains in the page background
- treasure: fixed 500px panel with inner scroll + edge fade masks, older
memories sink (opacity floor 0.45), claimed memories visibly dimmed
- removed manual ... bubble — Gradio native pending indicator only
- chatbot autoscroll=True

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app.py

@@ -58,10 +58,8 @@ def _init_state():
 def _start_turn(user_msg: str, state: dict, history: list):
     if not user_msg.strip() or state.get("ended"):
         return gr.update(), gr.update(interactive=not state.get("ended")), history
-    new_history = history + [
-        {"role": "user", "content": user_msg},
-        {"role": "assistant", "content": "..."},
-    ]
+    # only the user bubble — Gradio's native pending indicator does the rest
+    new_history = history + [{"role": "user", "content": user_msg}]
     return gr.update(interactive=False), gr.update(interactive=False), new_history
 
 
@@ -73,11 +71,12 @@ def _play_finale(state: dict, history: list):
     output tuple; time.sleep between yields sets the dramatic pace."""
     claimed = state["claimed"]
     struck: set[str] = set()
-    chat_hist = list(history[:-1])  # drop the "..." placeholder bubble
+    chat_hist = list(history)
     tier = get_tier(state["affinity"])
     bond = _render_bond(state["affinity"], tier)
-    treasure_html = render_treasure(state["treasure"], struck=struck)
-    entity = render_entity(state["affinity"])
+    treasure_html = render_treasure(state["treasure"], struck=struck,
+                                    claimed=set(claimed))
+    entity = render_entity(state["affinity"], seq=state["turn"])
     locked = gr.update(interactive=False)
     input_locked = gr.update(interactive=False)
     mutated = False
@@ -88,13 +87,14 @@ def _play_finale(state: dict, history: list):
 
         if step["strike"] is not None:
             struck.add(claimed[step["strike"]])
-            treasure_html = render_treasure(state["treasure"], struck=struck)
+            treasure_html = render_treasure(state["treasure"], struck=struck,
+                                            claimed=set(claimed))
 
         if step["stage"] == "turn" and not mutated:
             mutated = True
             bond = _render_bond(state["affinity"], tier, label="mine")
             treasure_html = render_treasure(state["treasure"], mine=True)
-            entity = render_entity(state["affinity"], "end")
+            entity = render_entity(state["affinity"], "end", seq=state["turn"])
             input_locked = gr.update(interactive=False, placeholder="stay.")
 
         yield (input_locked, locked, chat_hist, state, bond, treasure_html, entity)
@@ -116,8 +116,11 @@ def chat(user_msg: str, state: dict, history: list):
             history,
             state,
             _render_bond(state["affinity"], tier),
-            render_treasure(state["treasure"], mine=state.get("ended", False)),
-            render_entity(state["affinity"], "end" if state.get("ended") else "idle"),
+            render_treasure(state["treasure"], mine=state.get("ended", False),
+                            claimed=set(state["claimed"])),
+            render_entity(state["affinity"],
+                          "end" if state.get("ended") else "idle",
+                          seq=state["turn"]),
         )
         return
 
@@ -146,7 +149,7 @@ def chat(user_msg: str, state: dict, history: list):
     state["history"].append({"role": "assistant", "content": reply})
     state["turn"] += 1
 
-    new_history = history[:-1] + [{"role": "assistant", "content": reply}]
+    new_history = history + [{"role": "assistant", "content": reply}]
 
     mode = "flash_strong" if (do_recall and recall_memory) else ("flash" if captured else "idle")
     tier = get_tier(state["affinity"])
@@ -156,8 +159,8 @@ def chat(user_msg: str, state: dict, history: list):
         new_history,
         state,
         _render_bond(state["affinity"], tier),
-        render_treasure(state["treasure"]),
-        render_entity(state["affinity"], mode),
+        render_treasure(state["treasure"], claimed=set(state["claimed"])),
+        render_entity(state["affinity"], mode, seq=state["turn"]),
     )
 
 
@@ -177,6 +180,7 @@ with gr.Blocks(title="Hollow") as demo:
                 show_label=False,
                 height=500,
                 buttons=[],
+                autoscroll=True,
             )
 
             bond_panel = gr.HTML(value=_render_bond(20, "Hollow"))

render.py

@@ -6,7 +6,7 @@ _PLACEHOLDER = "...nothing yet. but i'm listening."
 
 _PANEL = (
     "background:#0c0a12;border:1px solid #2a1f3d;border-radius:4px;"
-    "padding:10px;min-height:460px;"
+    "padding:10px;"
 )
 _HEADER = (
     "font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#5a4570;"
@@ -20,6 +20,7 @@ _ITEM = (
 _EMPTY = "font-size:11px;color:#4a3f56;font-style:italic;"
 _STRUCK = "text-decoration:line-through;opacity:0.35;"
 _MINE = "font-size:12px;color:#7a5f96;font-style:italic;letter-spacing:2px;"
+_CLAIMED = "border-left-color:#3a2a50;color:#5a4f72;"
 
 
 _ASSETS = Path(__file__).parent / "assets"
@@ -41,20 +42,30 @@ def _src(name: str) -> str:
     return f"data:image/webp;base64,{_IMG[name]}"
 
 
-def render_entity(affinity: int, mode: str = "idle") -> str:
+def render_entity(affinity: int, mode: str = "idle", seq: int = 0) -> str:
     """The entity panel: Hollow materializes as affinity rises.
 
     mode: "idle" | "flash" (memory captured) | "flash_strong" (recall turn)
           | "end" (finale — dissolving portrait)
+    seq: turn counter — alternates one-shot animation names (flash-0/flash-1)
+         so the flash restarts even when Gradio morphs the DOM in place.
     """
     a = max(0, min(100, int(affinity)))
-    blur = round(14 * (1 - a / 100), 1)
-    opacity = round(0.25 + 0.75 * a / 100, 2)
-    scale = round(0.62 + 0.38 * a / 100, 2)
+    t = min(a, 90) / 90  # fully materialized at bond 90, not 100
+    blur = round(14 * (1 - t), 1)
+    opacity = round(0.25 + 0.75 * t, 2)
+    scale = round(0.62 + 0.38 * t, 2)
     almost_on = a >= 76
+    flash_key = f"flash-{seq % 2}"
+
+    # the fog curtain thins as the child becomes real
+    fog_op = round(1 - 0.85 * t, 2)
+    grain_op = round(0.13 - 0.08 * t, 2)
+    vig_op = round(1 - 0.6 * t, 2)
 
     look = f"filter:blur({blur}px);opacity:{opacity};transform:scale({scale});"
 
+    ghost = ""
     if mode == "end":
         figure = (
             '<div class="entity-figure">'
@@ -63,6 +74,11 @@ def render_entity(affinity: int, mode: str = "idle") -> str:
             "</div>"
         )
         flash = ""
+        ghost = (
+            f'<div class="entity-ghost {flash_key}" '
+            f"style=\"background-image:url('{_src('terror')}')\"></div>"
+        )
+        fog_op, grain_op, vig_op = 0.15, 0.05, 0.4
     else:
         sway = "" if almost_on else " entity-sway"
         almost_op = opacity if almost_on else 0
@@ -78,32 +94,48 @@ def render_entity(affinity: int, mode: str = "idle") -> str:
             strong = " entity-flash-strong" if mode == "flash_strong" else ""
             flash = (
                 f'<div class="entity-flash-wrap" style="{look}">'
-                f'<img class="entity-flash{strong}" src="{_src("terror")}">'
+                f'<img class="entity-flash {flash_key}{strong}" src="{_src("terror")}">'
                 "</div>"
             )
+        if mode == "flash_strong":
+            ghost = (
+                f'<div class="entity-ghost {flash_key}" '
+                f"style=\"background-image:url('{_src('terror')}')\"></div>"
+            )
 
     return (
         '<div class="entity-stage">'
         f"{figure}{flash}"
-        '<div class="entity-fog"></div>'
-        '<div class="entity-grain"></div>'
-        '<div class="entity-vig"></div>'
+        f'<div class="entity-fog" style="opacity:{fog_op}"></div>'
+        f'<div class="entity-grain" style="opacity:{grain_op}"></div>'
+        f'<div class="entity-vig" style="opacity:{vig_op}"></div>'
         "</div>"
+        f"{ghost}"
     )
 
 
 def render_treasure(treasure: list[str], struck: set[str] | None = None,
-                    mine: bool = False) -> str:
+                    mine: bool = False, claimed: set[str] | None = None) -> str:
     struck = struck or set()
+    claimed = claimed or set()
     header = f'<div style="{_HEADER}">✦ Treasure</div>'
     if mine:
         body = f'<div style="{_MINE}">...mine now.</div>'
     elif not treasure:
         body = f'<div style="{_EMPTY}">{_PLACEHOLDER}</div>'
     else:
-        body = "".join(
-            f'<div style="{_ITEM}{_STRUCK if m in struck else ""}">'
-            f"{html.escape(m, quote=True)}</div>"
-            for m in treasure
-        )
-    return f'<div style="{_PANEL}">{header}{body}</div>'
+        n = len(treasure)
+        parts = []
+        for i, m in enumerate(treasure):
+            # older memories sink into the dark; newest stays fully lit
+            age_op = max(0.45, round(1 - 0.07 * (n - 1 - i), 2))
+            style = f"{_ITEM}opacity:{age_op};"
+            if m in claimed:
+                style += _CLAIMED
+            if m in struck:
+                style += _STRUCK
+            parts.append(
+                f'<div style="{style}">{html.escape(m, quote=True)}</div>'
+            )
+        body = "".join(parts)
+    return f'<div class="treasure-panel" style="{_PANEL}">{header}{body}</div>'

styles.css

@@ -75,6 +75,12 @@
 body {
     background-color: #0a0810 !important;
     background-image:
+        /* old stains — desaturated dried-blood gray, barely there */
+        radial-gradient(ellipse 16% 11% at 78% 22%, rgba(74,52,56,0.10) 0%, transparent 70%),
+        radial-gradient(ellipse 9% 15%  at 11% 63%, rgba(66,46,50,0.09) 0%, transparent 70%),
+        radial-gradient(ellipse 13% 8%  at 56% 89%, rgba(70,48,52,0.08) 0%, transparent 70%),
+        radial-gradient(ellipse 6% 10%  at 33% 31%, rgba(62,44,48,0.07) 0%, transparent 70%),
+        radial-gradient(ellipse 8% 6%   at 92% 74%, rgba(70,50,54,0.08) 0%, transparent 70%),
         radial-gradient(ellipse at 14% -5%,  rgba(58,20,84,0.20) 0%, transparent 52%),
         radial-gradient(ellipse at 86% 105%, rgba(24,8,44,0.26) 0%, transparent 52%);
     background-attachment: fixed;
@@ -396,7 +402,8 @@ footer { display: none !important; }
     object-fit: cover;
 }
 
-/* terror flash: one-shot animation, restarts on Gradio re-mount */
+/* terror flash: one-shot; animation-name alternates per turn (flash-0/flash-1)
+   so the animation restarts even when Gradio morphs the DOM in place */
 .entity-flash-wrap {
     position: absolute;
     inset: 0;
@@ -409,22 +416,33 @@ footer { display: none !important; }
     height: 100%;
     object-fit: cover;
     opacity: 0;
-    animation: entity-flash-anim 1.2s ease-out forwards;
+    animation-duration: 1.8s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
 }
 
-.entity-flash-strong {
-    animation: entity-flash-anim 2s ease-out forwards,
-               entity-glitch 2s steps(2) forwards;
+.entity-flash.flash-0 { animation-name: entity-flash-a; }
+.entity-flash.flash-1 { animation-name: entity-flash-b; }
+
+.entity-flash.entity-flash-strong { animation-duration: 2.2s; }
+.entity-flash.entity-flash-strong.flash-0 { animation-name: entity-flash-a, entity-glitch-a; }
+.entity-flash.entity-flash-strong.flash-1 { animation-name: entity-flash-b, entity-glitch-b; }
+
+@keyframes entity-flash-a {
+    0%   { opacity: 0; }
+    10%  { opacity: 1; }
+    70%  { opacity: 1; }
+    100% { opacity: 0; }
 }
 
-@keyframes entity-flash-anim {
+@keyframes entity-flash-b {
     0%   { opacity: 0; }
-    12%  { opacity: 1; }
+    10%  { opacity: 1; }
     70%  { opacity: 1; }
     100% { opacity: 0; }
 }
 
-@keyframes entity-glitch {
+@keyframes entity-glitch-a {
     0%, 100% { transform: translate(0, 0); }
     20% { transform: translate(-3px, 1px); }
     40% { transform: translate(2px, -2px); }
@@ -432,6 +450,46 @@ footer { display: none !important; }
     80% { transform: translate(3px, -1px); }
 }
 
+@keyframes entity-glitch-b {
+    0%, 100% { transform: translate(0, 0); }
+    20% { transform: translate(-3px, 1px); }
+    40% { transform: translate(2px, -2px); }
+    60% { transform: translate(-2px, 2px); }
+    80% { transform: translate(3px, -1px); }
+}
+
+/* subliminal full-screen echo — recall turns and the finale only */
+.entity-ghost {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 998;
+    background-size: cover;
+    background-position: center 25%;
+    opacity: 0;
+    filter: grayscale(1) blur(3px);
+    animation-duration: 2.4s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+}
+
+.entity-ghost.flash-0 { animation-name: entity-ghost-a; }
+.entity-ghost.flash-1 { animation-name: entity-ghost-b; }
+
+@keyframes entity-ghost-a {
+    0%   { opacity: 0; }
+    15%  { opacity: 0.055; }
+    60%  { opacity: 0.04; }
+    100% { opacity: 0; }
+}
+
+@keyframes entity-ghost-b {
+    0%   { opacity: 0; }
+    15%  { opacity: 0.055; }
+    60%  { opacity: 0.04; }
+    100% { opacity: 0; }
+}
+
 /* atmosphere overlays, in front of the portrait */
 .entity-fog {
     position: absolute;
@@ -464,11 +522,22 @@ footer { display: none !important; }
     background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(5,4,9,0.82) 100%);
 }
 
+/* ── 16. Treasure — fixed-height case with inner scroll ── */
+/* items sink into the dark at both edges instead of clipping */
+.treasure-panel {
+    height: 500px;
+    overflow-y: auto;
+    -webkit-mask-image: linear-gradient(
+        to bottom, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
+    mask-image: linear-gradient(
+        to bottom, transparent 0, #000 16px, #000 calc(100% - 22px), transparent 100%);
+}
+
 /* finale: struck-through treasure + decomposing type already inline;
    reduced motion */
 @media (prefers-reduced-motion: reduce) {
-    .entity-sway, .entity-fog, .entity-flash, .entity-flash-strong {
+    .entity-sway, .entity-fog, .entity-flash, .entity-flash-strong, .entity-ghost {
         animation: none !important;
     }
-    .entity-flash, .entity-flash-strong { opacity: 0 !important; }
+    .entity-flash, .entity-flash-strong, .entity-ghost { opacity: 0 !important; }
 }

tests/test_render.py

@@ -97,3 +97,50 @@ class TestRenderTreasureFinale:
         out = render_treasure(["had a dog named Nala"], mine=True)
         assert "...mine now." in out
         assert "had a dog named Nala" not in out
+
+
+class TestRenderEntityUX:
+    def test_fully_sharp_at_bond_90(self):
+        out = render_entity(90)
+        assert "blur(0.0px)" in out
+        assert "opacity:1.0" in out
+
+    def test_atmosphere_thins_as_bond_rises(self):
+        low = render_entity(0)
+        high = render_entity(90)
+        assert 'class="entity-fog" style="opacity:1.0"' in low
+        assert 'class="entity-fog" style="opacity:0.15"' in high
+
+    def test_flash_animation_key_alternates_by_seq(self):
+        assert "flash-0" in render_entity(40, "flash", seq=0)
+        assert "flash-1" in render_entity(40, "flash", seq=1)
+        assert "flash-0" in render_entity(40, "flash", seq=2)
+
+    def test_ghost_echo_only_on_strong_flash_and_end(self):
+        assert "entity-ghost" not in render_entity(40, "idle")
+        assert "entity-ghost" not in render_entity(40, "flash")
+        assert "entity-ghost" in render_entity(40, "flash_strong")
+        assert "entity-ghost" in render_entity(95, "end")
+
+
+class TestRenderTreasureUX:
+    def test_panel_has_scroll_class(self):
+        assert "treasure-panel" in render_treasure([])
+        assert "treasure-panel" in render_treasure(["had a dog named Nala"])
+
+    def test_older_memories_fade(self):
+        out = render_treasure(["oldest memory", "middle memory", "newest memory"])
+        assert "opacity:0.86" in out  # oldest of three: 1 - 0.07*2
+        assert "opacity:1.0" in out   # newest stays fully lit
+
+    def test_age_fade_has_floor(self):
+        out = render_treasure([f"memory {i}" for i in range(20)])
+        assert "opacity:0.45" in out
+
+    def test_claimed_memories_marked(self):
+        out = render_treasure(["mine still", "taken one"], claimed={"taken one"})
+        assert "border-left-color:#3a2a50" in out
+
+    def test_unclaimed_render_unmarked(self):
+        out = render_treasure(["mine still"])
+        assert "border-left-color:#3a2a50" not in out