feat: redesign chat transcript + fix streaming/persistence lifecycle — v0.50.70 (PR #587 by @aronprins)

Redesign chat transcript + fix streaming/persistence lifecycle — v0.50.70

Squash-merges PR #587 by @aronprins (Aron Prins). Full credit to @aronprins for all feature and fix work.

Transcript redesign: unified --msg-rail/--msg-max CSS variables, user turns as tinted cards, thinking cards as bordered panels, error card treatment, day-change separators, composer fade.

Approval/clarify as composer flyouts: cards slide up from behind composer top, overflow:hidden + translateY clip prevents travel visibility, focus({preventScroll:true}).

Streaming lifecycle: DOM order user→thinking→tool cards→response, no mid-stream jump. Live tool cards inserted before [data-live-assistant].

Persistence: reasoning attached before s.save(), _restore_reasoning_metadata on reload, role=tool rows preserved in S.messages, CLI-session tool-result fallback.

Workspace panel FOUC fix: [data-workspace-panel] set at parse time.

Docs: docs/ui-ux/index.html + two-stage-proposal.html.

Maintainer additions (433b867): CHANGELOG v0.50.70, version badge, usage badge loop simplification.

Reviewed and approved by @nesquena (independent review). 1361 tests passing.

tests/test_ui_card_animation.py

@@ -0,0 +1,43 @@
+import pathlib
+import re
+
+
+STYLE_CSS = (pathlib.Path(__file__).parent.parent / "static" / "style.css").read_text(encoding="utf-8")
+UI_JS = (pathlib.Path(__file__).parent.parent / "static" / "ui.js").read_text(encoding="utf-8")
+COMPACT_CSS = re.sub(r"\s+", "", STYLE_CSS)
+
+
+def test_tool_card_toggle_uses_transformable_layout_and_transition():
+    assert ".tool-card-toggle{" in COMPACT_CSS
+    assert "display:inline-flex" in COMPACT_CSS
+    assert "transition:transform.18sease" in COMPACT_CSS
+
+
+def test_tool_card_detail_uses_transitionable_collapsed_state():
+    assert ".tool-card-detail{display:block;max-height:0;opacity:0;overflow:hidden;" in COMPACT_CSS
+    assert re.search(
+        r"\.tool-card\.open\s+\.tool-card-detail\s*\{[^}]*max-height:\s*520px;[^}]*opacity:\s*1;",
+        STYLE_CSS,
+    )
+
+
+def test_thinking_card_toggle_and_body_use_animation_friendly_state():
+    assert ".thinking-card-toggle{margin-left:auto;font-size:10px;display:inline-flex;" in COMPACT_CSS
+    assert ".thinking-card-body{display:block;max-height:0;opacity:0;overflow:hidden;" in COMPACT_CSS
+    assert re.search(
+        r"\.thinking-card\.open\s+\.thinking-card-body\s*\{[^}]*max-height:\s*300px;[^}]*opacity:\s*1;",
+        STYLE_CSS,
+    )
+
+
+def test_tool_card_toggle_uses_same_chevron_icon_markup_as_thinking_card():
+    assert "<span class=\"thinking-card-toggle\">${li('chevron-right',12)}</span>" in UI_JS
+    assert "<span class=\"tool-card-toggle\">${li('chevron-right',12)}</span>" in UI_JS
+
+
+def test_thinking_card_uses_panel_chrome_with_gold_palette():
+    assert re.search(
+        r"\.thinking-card\s*\{[^}]*background:\s*rgba\(201,168,76,.05\);[^}]*border:\s*1px\s+solid\s+rgba\(201,168,76,.18\);[^}]*border-radius:\s*8px;",
+        STYLE_CSS,
+    )
+    assert "border-left: 2px solid rgba(201,168,76,.4);" not in STYLE_CSS