Update app.py

app.py

@@ -2,9 +2,11 @@ from __future__ import annotations
 
 import json
 import os
+import copy
+import html
 from pathlib import Path
 from textwrap import dedent
-from typing import Dict, List, Optional, Tuple
+from typing import Any, Dict, List, Optional, Tuple
 
 import gradio as gr
 from dotenv import load_dotenv
@@ -79,19 +81,114 @@ CUSTOM_CSS = """
 .inline-row {
   gap: 8px;
 }
+
+.hand-strip {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  padding: 10px 10px 14px;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  background: rgba(13, 37, 63, 0.03);
+  border: var(--panel-border);
+  border-radius: 18px;
+}
+
+.hand-card {
+  flex: 0 0 240px;
+  border-radius: 16px;
+  border: var(--panel-border);
+  box-shadow: var(--shadow-soft);
+  background: linear-gradient(180deg, #ffffff, #f8fbff);
+  padding: 10px 12px;
+  min-height: 150px;
+  scroll-snap-align: start;
+  transform: rotate(var(--angle)) translateY(var(--lift));
+  transform-origin: bottom center;
+  transition: transform 140ms ease, box-shadow 140ms ease;
+  position: relative;
+  z-index: var(--z);
+}
+
+.hand-card:hover {
+  transform: translateY(-12px) rotate(0deg) scale(1.02);
+  box-shadow: 0 18px 50px rgba(14, 35, 62, 0.18);
+}
+
+.hand-card__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: #4c6378;
+}
+
+.card-index {
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.card-badge {
+  background: #f0a35f;
+  color: #0d253f;
+  padding: 2px 9px;
+  border-radius: 999px;
+  font-weight: 800;
+  font-size: 11px;
+  letter-spacing: 0.02em;
+}
+
+.hand-card__body {
+  font-size: 14px;
+  line-height: 1.35;
+  color: #0d253f;
+  white-space: pre-wrap;
+}
+
+.hand-empty {
+  border: 1px dashed #dbe7f3;
+  border-radius: 16px;
+  padding: 16px 14px;
+  background: #fbfdff;
+}
+
+.hand-empty__title {
+  font-weight: 800;
+  color: #0d253f;
+  margin-bottom: 4px;
+}
+
+.hand-empty__hint {
+  font-size: 14px;
+  color: #4c6378;
+}
 """
 
 EXAMPLE_CHARACTER_PATH = Path(__file__).with_name("ExampleChar.txt")
 DEFAULT_CHARACTER_JSON = EXAMPLE_CHARACTER_PATH.read_text(encoding="utf-8")
 DEFAULT_CHARACTER = Character.model_validate_json(DEFAULT_CHARACTER_JSON)
 
-with open("tacklebox_deck.json", "r", encoding="utf-8") as f:
-    raw = json.load(f)
+DECK_PATH = Path(__file__).with_name("tacklebox_deck.json")
+DECK_DATA = json.loads(DECK_PATH.read_text(encoding="utf-8"))
+
+ChatHistory = List[Tuple[str, str]]
 
-deck = TackleboxDeck(**raw)
-player_hand = Hand()
-ai_hand = Hand()
-ChatHistory = List[Tuple[str, Optional[str]]]
+
+def fresh_deck() -> TackleboxDeck:
+    return TackleboxDeck(**copy.deepcopy(DECK_DATA))
+
+
+def ensure_session_state(
+    deck_state: Optional[TackleboxDeck],
+    player_hand_state: Optional[Hand],
+    ai_hand_state: Optional[Hand],
+) -> Tuple[TackleboxDeck, Hand, Hand]:
+    deck = deck_state if isinstance(deck_state, TackleboxDeck) else fresh_deck()
+    player_hand = player_hand_state if isinstance(player_hand_state, Hand) else Hand()
+    ai_hand = ai_hand_state if isinstance(ai_hand_state, Hand) else Hand()
+    return deck, player_hand, ai_hand
 
 def get_openai_client(api_key: Optional[str]) -> OpenAI:
     """Return an OpenAI client using UI input or environment configuration."""
@@ -101,15 +198,64 @@ def get_openai_client(api_key: Optional[str]) -> OpenAI:
     return OpenAI(api_key=key)
 
 
-def format_hand(hand: Hand) -> str:
-    """Pretty-print a hand for display."""
+def normalize_history(history: Optional[List[Any]]) -> ChatHistory:
+    """Coerce Gradio chat history into a predictable list of string pairs."""
+    normalized: ChatHistory = []
+    for turn in history or []:
+        if not isinstance(turn, (list, tuple)) or len(turn) != 2:
+            continue
+        user_turn, assistant_turn = turn
+        normalized.append((str(user_turn or ""), str(assistant_turn or "")))
+    return normalized
+
+
+def render_hand_html(hand: Hand) -> str:
+    """Render a hand as card-like HTML instead of a textbox."""
     if not hand.cards:
-        return "Your hand is empty. Grab something from the tackle box to start."
-    lines = "\n".join(f"- {card.description}" for card in hand.cards)
-    return f"Your hand ({len(hand.cards)} cards):\n{lines}"
+        return (
+            "<div class='hand-empty'>"
+            "<div class='hand-empty__title'>Your hand is empty.</div>"
+            "<div class='hand-empty__hint'>Grab something from the tackle box to start.</div>"
+            "</div>"
+        )
+
+    cards = []
+    count = len(hand.cards)
+    max_angle = 8
+    for index, card in enumerate(hand.cards):
+        t = 0.0 if count == 1 else (index / (count - 1)) * 2 - 1  # -1..1
+        angle = t * max_angle
+        lift = abs(t) * 6
+        shared_badge = (
+            "<span class='card-badge' title='This card is meant to be shared'>Shared</span>"
+            if getattr(card, "share_with_other_player", False)
+            else ""
+        )
+        description = html.escape(getattr(card, "description", ""))
+        cards.append(
+            (
+                "<div class='hand-card' "
+                f"style='--angle:{angle:.2f}deg; --lift:{lift:.1f}px; --z:{index};'>"
+                "<div class='hand-card__top'>"
+                f"<span class='card-index'>Card {index + 1}</span>"
+                f"{shared_badge}"
+                "</div>"
+                f"<div class='hand-card__body'>{description}</div>"
+                "</div>"
+            )
+        )
+    return "<div class='hand-strip'>" + "".join(cards) + "</div>"
 
 
-def format_ai_hand_debug() -> str:
+def hand_status_md(deck: TackleboxDeck, player_hand: Hand) -> str:
+    remaining = len(deck.cards)
+    in_hand = len(player_hand.cards)
+    if remaining == 0:
+        return f"**Tackle box:** empty • **Your hand:** {in_hand}"
+    return f"**Tackle box:** {remaining} cards left • **Your hand:** {in_hand}"
+
+
+def format_ai_hand_debug(ai_hand: Hand) -> str:
     """Readable snapshot of the AI hand for debugging."""
     if not ai_hand.cards:
         return "AI hand is empty."
@@ -273,7 +419,7 @@ def build_persona_prompt(character: Character) -> str:
     ).strip()
 
 
-def append_ai_hand_to_prompt(base_prompt: str) -> str:
+def append_ai_hand_to_prompt(base_prompt: str, ai_hand: Hand) -> str:
     """Add AI hand context to the persona prompt so the model sees its cards."""
     if not ai_hand.cards:
         return base_prompt
@@ -291,14 +437,18 @@ def generate_model_reply(
     history: ChatHistory,
     persona_prompt: str,
     api_key: Optional[str],
+    deck: TackleboxDeck,
+    player_hand: Hand,
+    ai_hand: Hand,
 ) -> str:
     """Call OpenAI with the parsed prompt and tool support (AI can draw cards)."""
     client = get_openai_client(api_key)
-    base_prompt = append_ai_hand_to_prompt(persona_prompt)
-    messages: List[Dict[str, str]] = [{"role": "system", "content": base_prompt}]
+    base_prompt = append_ai_hand_to_prompt(persona_prompt, ai_hand)
+    messages: List[Dict[str, Any]] = [{"role": "system", "content": base_prompt}]
 
     for user_turn, assistant_turn in history:
-        messages.append({"role": "user", "content": user_turn})
+        if user_turn:
+            messages.append({"role": "user", "content": user_turn})
         if assistant_turn:
             messages.append({"role": "assistant", "content": assistant_turn})
 
@@ -313,7 +463,7 @@ def generate_model_reply(
             "type": "function",
             "function": {
                 "name": "open_tacklebox",
-                "description": "Call this to draw a new event card when the conversation stalls, feels repetitive, or the user is giving short replies. In particular, if the user gives one- to three-word answers like 'yeah', 'true', 'ha', 'i guess', 'maybe', or 'idk' for two turns in a row, you MUST call this tool once before responding. Use at most once per user message.",
+                "description": "Call this to draw a new event card when the conversation stalls, feels repetitive, or the user is giving short replies over and over. In particular, if the user gives one- to three-word answers like 'yeah', 'true', 'ha', 'i guess', 'maybe', or 'idk' for two turns in a row, you MUST call this tool once before responding. Use at most once per user message.",
                 "parameters": {
                     "type": "object",
                     "properties": {},
@@ -340,45 +490,80 @@ def generate_model_reply(
     tool_messages: List[Dict[str, str]] = []
     ai_draw_notice = None
     shared_with_player_notice = None
+    ai_drew_this_turn = False
     for call in message.tool_calls:
-        if call.function.name == "open_tacklebox":
-            card = deck.draw_card()
-            if card:
-                ai_hand.add_card(card)
-                shared_with_player = False
-                if card.share_with_other_player:
-                    player_hand.add_card(card)
-                    shared_with_player = True
-
-                ai_draw_notice = "*They carefully grabed something out of the tacklebox.*"
-                if shared_with_player:
-                    shared_with_player_notice = (
-                        "*They hand you a card meant to be shared. It was added to your hand:*\n"
-                        f"- {card.description}"
-                    )
-
-                tool_content = json.dumps(
-                    {
-                        "card_drawn": card.description,
-                        "hand_size": len(ai_hand.cards),
-                        "shared_with_player": shared_with_player,
-                    }
-                )
-            else:
-                ai_draw_notice = "*They reached for the tacklebox, but it was empty.*"
-                tool_content = json.dumps({"card_drawn": None, "hand_size": len(ai_hand.cards)})
+        if call.function.name != "open_tacklebox":
+            tool_messages.append(
+                {
+                    "role": "tool",
+                    "tool_call_id": call.id,
+                    "content": json.dumps({"error": f"Unknown tool: {call.function.name}"}),
+                }
+            )
+            continue
 
+        if ai_drew_this_turn:
             tool_messages.append(
                 {
                     "role": "tool",
                     "tool_call_id": call.id,
-                    "name": call.function.name,
-                    "content": tool_content,
+                    "content": json.dumps(
+                        {
+                            "skipped": True,
+                            "reason": "Only one draw is allowed per turn.",
+                            "hand_size": len(ai_hand.cards),
+                        }
+                    ),
                 }
             )
+            continue
+
+        ai_drew_this_turn = True
+        card = deck.draw_card()
+        if card:
+            ai_hand.add_card(card)
+            shared_with_player = False
+            if card.share_with_other_player:
+                player_hand.add_card(card)
+                shared_with_player = True
+
+            ai_draw_notice = "*They carefully grabbed something out of the tacklebox.*"
+            if shared_with_player:
+                shared_with_player_notice = (
+                    "*They hand you a card meant to be shared. It was added to your hand:*\n"
+                    f"- {card.description}"
+                )
 
-    followup_messages = messages + [message] + tool_messages
-    followup_messages[0] = {"role": "system", "content": append_ai_hand_to_prompt(persona_prompt)}
+            tool_content = json.dumps(
+                {
+                    "card_drawn": card.description,
+                    "hand_size": len(ai_hand.cards),
+                    "shared_with_player": shared_with_player,
+                }
+            )
+        else:
+            ai_draw_notice = "*They reached for the tacklebox, but it was empty.*"
+            tool_content = json.dumps({"card_drawn": None, "hand_size": len(ai_hand.cards)})
+
+        tool_messages.append(
+            {
+                "role": "tool",
+                "tool_call_id": call.id,
+                "content": tool_content,
+            }
+        )
+
+    try:
+        assistant_message = message.model_dump(exclude_none=True)
+    except AttributeError:
+        assistant_message = message.dict(exclude_none=True)  # type: ignore[attr-defined]
+    assistant_message.setdefault("role", "assistant")
+
+    followup_messages: List[Dict[str, Any]] = messages + [assistant_message] + tool_messages
+    followup_messages[0] = {
+        "role": "system",
+        "content": append_ai_hand_to_prompt(persona_prompt, ai_hand),
+    }
 
     followup_response = client.chat.completions.create(
         model=MODEL,
@@ -395,10 +580,13 @@ def generate_model_reply(
 
 def orchestrate_chat(
     message: str,
-    history: Optional[ChatHistory],
+    history: Optional[List[Any]],
     persona_prompt: str,
     api_key: Optional[str],
-) -> str:
+    deck_state: Optional[TackleboxDeck],
+    player_hand_state: Optional[Hand],
+    ai_hand_state: Optional[Hand],
+) -> Tuple[str, str, str, TackleboxDeck, Hand, Hand]:
     """
     Main orchestration entry point.
 
@@ -406,15 +594,50 @@ def orchestrate_chat(
     - run (optional) tools
     - call the model with full context and persona prompt
     """
-    safe_history: ChatHistory = history or []
+    deck, player_hand, ai_hand = ensure_session_state(deck_state, player_hand_state, ai_hand_state)
+    safe_history = normalize_history(history)
     context: Dict = {"history": safe_history}
 
+    if not (message or "").strip():
+        return (
+            "Say something as Robin to start the scene.",
+            render_hand_html(player_hand),
+            hand_status_md(deck, player_hand),
+            deck,
+            player_hand,
+            ai_hand,
+        )
+
     parsed = parse_user_message(message, context)
     tool_results = maybe_run_tools(parsed, context)
     try:
-        return generate_model_reply(parsed, tool_results, safe_history, persona_prompt, api_key)
+        reply = generate_model_reply(
+            parsed,
+            tool_results,
+            safe_history,
+            persona_prompt,
+            api_key,
+            deck,
+            player_hand,
+            ai_hand,
+        )
+        return (
+            reply,
+            render_hand_html(player_hand),
+            hand_status_md(deck, player_hand),
+            deck,
+            player_hand,
+            ai_hand,
+        )
     except Exception as exc:  # noqa: BLE001
-        return f"⚠️ {exc}"
+        return (
+            f"⚠️ {exc}",
+            render_hand_html(player_hand),
+            hand_status_md(deck, player_hand),
+            deck,
+            player_hand,
+            ai_hand,
+        )
 
 
 def update_player_two_from_form(
@@ -472,21 +695,25 @@ def update_api_key(new_key: str) -> Tuple[str, str]:
 
 
 def grab_card_for_player(
-    history: Optional[ChatHistory] = None,
-) -> Tuple[str, str, ChatHistory]:
+    history: Optional[List[Any]],
+    deck_state: Optional[TackleboxDeck],
+    player_hand_state: Optional[Hand],
+    ai_hand_state: Optional[Hand],
+) -> Tuple[str, str, ChatHistory, TackleboxDeck, Hand, Hand]:
     """
     Draw a card from the tackle box into the player's hand and log it to chat.
 
     Returns: (formatted_hand, status_message, updated_chat_history)
     """
-    chat_history: ChatHistory = list(history or [])
+    deck, player_hand, ai_hand = ensure_session_state(deck_state, player_hand_state, ai_hand_state)
+    chat_history = normalize_history(history)
     card = deck.draw_card()
 
     if not card:
-        status = "No more cards in the tackle box."
+        status = hand_status_md(deck, player_hand) + " • **No more cards** in the tackle box."
         notice = "*You reached for the tacklebox, but it was empty.*"
-        chat_history.append((notice, None))
-        return format_hand(player_hand), status, chat_history
+        chat_history.append((notice, ""))
+        return render_hand_html(player_hand), status, chat_history, deck, player_hand, ai_hand
 
     player_hand.add_card(card)
     shared_with_ai_notice = None
@@ -496,22 +723,42 @@ def grab_card_for_player(
             "*This card says to share; it was added to Player 2's hand for their next turn.*"
         )
 
-    status = "Added card to your hand."
+    status = hand_status_md(deck, player_hand)
     if shared_with_ai_notice:
-        status = "Added card to your hand and shared with Player 2."
+        status += " • Shared with Player 2."
 
-    notice_lines = ["*You carefully grabed something out of the tacklebox.*"]
+    notice_lines = ["*You carefully grabbed something out of the tacklebox.*"]
     if shared_with_ai_notice:
         notice_lines.append(shared_with_ai_notice)
 
     notice = "\n".join(notice_lines)
-    chat_history.append((notice, None))
-    return format_hand(player_hand), status, chat_history
+    chat_history.append((notice, ""))
+    return render_hand_html(player_hand), status, chat_history, deck, player_hand, ai_hand
 
 
-def show_ai_hand_debug() -> str:
+def show_ai_hand_debug(ai_hand_state: Optional[Hand]) -> str:
     """Expose AI hand for debugging."""
-    return format_ai_hand_debug()
+    ai_hand = ai_hand_state or Hand()
+    return format_ai_hand_debug(ai_hand)
+
+
+def reset_session() -> Tuple[str, str, ChatHistory, TackleboxDeck, Hand, Hand]:
+    hand_html, status, chat_history, deck, player_hand, ai_hand = init_session()
+    return hand_html, status + " • Reset.", chat_history, deck, player_hand, ai_hand
+
+
+def init_session() -> Tuple[str, str, ChatHistory, TackleboxDeck, Hand, Hand]:
+    deck = fresh_deck()
+    player_hand = Hand()
+    ai_hand = Hand()
+    return (
+        render_hand_html(player_hand),
+        hand_status_md(deck, player_hand),
+        [],
+        deck,
+        player_hand,
+        ai_hand,
+    )
 
 
 DEFAULT_PERSONA_PROMPT = build_persona_prompt(DEFAULT_CHARACTER)
@@ -531,6 +778,9 @@ with gr.Blocks(title="Tacklebox - Player 2 Customizer", css=CUSTOM_CSS) as demo:
 
     persona_prompt_state = gr.State(DEFAULT_PERSONA_PROMPT)
     api_key_state = gr.State(ENV_API_KEY or "")
+    deck_state = gr.State(None)
+    player_hand_state = gr.State(None)
+    ai_hand_state = gr.State(None)
 
     with gr.Row(equal_height=True):
         with gr.Column(scale=6, min_width=380, elem_id="controls-col"):
@@ -626,20 +876,50 @@ with gr.Blocks(title="Tacklebox - Player 2 Customizer", css=CUSTOM_CSS) as demo:
 
         with gr.Column(scale=7, min_width=460, elem_id="chat-col"):
             with gr.Group(elem_classes=["section-card"]):
-                gr.Markdown("#### Your hand & tackle box")
-                hand_status = gr.Markdown("Your hand is empty. Grab a card to begin.")
-                hand_view = gr.Textbox(
-                    label="Your hand",
-                    value=format_hand(player_hand),
-                    lines=6,
-                    interactive=False,
+                gr.Markdown("#### How to play (quick start)")
+                gr.Markdown(
+                    """
+                    - You are **Robin**. The chatbot plays **Player 2** in the boat with you.
+                    - (Optional) Customize Player 2 on the left, then click **Apply Player 2**.
+                    - Keep the **Truth**: out loud, it’s just two people fishing.
+                    - Click **Grab something from the tackle box** to draw a private prompt into your hand.
+                    - Let card prompts change your *subtext* and choices — don’t read them aloud.
+                    - Cards marked **Shared** are also added to Player 2’s hand.
+                    - Use **Reset session** to start over with a fresh deck.
+                    - There’s no score — stop whenever you want, or when the deck runs out.
+                    - Player 2 may sometimes “grab from the tackle box” too.
+                    - Pause/rewind anytime if the content gets too intense.
+                    """
                 )
-                draw_btn = gr.Button("Grab something from the tackle box", variant="secondary")
+
+            with gr.Group(elem_classes=["section-card"]):
+                gr.Markdown("#### Your hand (private) & tackle box")
+                hand_status = gr.Markdown("Grab a card to begin.")
+                gr.Markdown(
+                    "<span class='subtle'>Tip: keep card text private and let it influence what you say next.</span>"
+                )
+                hand_view = gr.HTML(render_hand_html(Hand()))
+                with gr.Row():
+                    draw_btn = gr.Button("Grab something from the tackle box", variant="secondary")
+                    reset_btn = gr.Button("Reset session", variant="secondary")
 
             with gr.Group(elem_classes=["section-card"]):
                 chat = gr.ChatInterface(
                     orchestrate_chat,
-                    additional_inputs=[persona_prompt_state, api_key_state],
+                    additional_inputs=[
+                        persona_prompt_state,
+                        api_key_state,
+                        deck_state,
+                        player_hand_state,
+                        ai_hand_state,
+                    ],
+                    additional_outputs=[
+                        hand_view,
+                        hand_status,
+                        deck_state,
+                        player_hand_state,
+                        ai_hand_state,
+                    ],
                     title="Tacklebox Chat",
                     description="Robin chats with Player 2 (LLM persona).",
                     examples=[
@@ -673,8 +953,25 @@ with gr.Blocks(title="Tacklebox - Player 2 Customizer", css=CUSTOM_CSS) as demo:
 
     draw_btn.click(
         grab_card_for_player,
-        inputs=[chat.chatbot_value],
-        outputs=[hand_view, hand_status, chat.chatbot_value],
+        inputs=[chat.chatbot_value, deck_state, player_hand_state, ai_hand_state],
+        outputs=[
+            hand_view,
+            hand_status,
+            chat.chatbot_value,
+            deck_state,
+            player_hand_state,
+            ai_hand_state,
+        ],
+    )
+
+    reset_btn.click(
+        reset_session,
+        outputs=[hand_view, hand_status, chat.chatbot_value, deck_state, player_hand_state, ai_hand_state],
+    )
+
+    demo.load(
+        init_session,
+        outputs=[hand_view, hand_status, chat.chatbot_value, deck_state, player_hand_state, ai_hand_state],
     )