Mobile-friendly: single column, ultra-concise

- Single column layout (stacks well on mobile)
- 1-2 sentence responses only (max 150 tokens)
- Simpler feelings/needs categories (4 each)
- Translation builds at bottom as you go
- Cleaner, faster UX

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -1,13 +1,12 @@
 """
-NVC Translation Practice - Learn to translate messages using Nonviolent Communication
-Streamlined flow with visual I-statement builder
+NVC Translation Practice - Transform messages with compassion
 """
 
 import gradio as gr
 import anthropic
 import os
 
-# ============ API SETUP ============
+# ============ SETUP ============
 
 def get_client():
     api_key = (
@@ -16,299 +15,201 @@ def get_client():
         os.environ.get("ANTHROPIC_KEY") or
         os.environ.get("anthropic_api_key")
     )
-    if not api_key:
-        return None
-    return anthropic.Anthropic(api_key=api_key)
+    return anthropic.Anthropic(api_key=api_key) if api_key else None
 
 API_KEY_CONFIGURED = bool(get_client())
 
-# ============ FEELINGS & NEEDS ============
+# ============ DATA ============
 
 FEELINGS = {
-    "Sad/Hurt": ["sad", "hurt", "disappointed", "lonely", "heavy", "grief"],
-    "Scared/Anxious": ["anxious", "scared", "worried", "overwhelmed", "insecure"],
-    "Angry/Frustrated": ["frustrated", "angry", "annoyed", "irritated", "resentful"],
-    "Confused/Tired": ["confused", "exhausted", "torn", "numb", "depleted"]
+    "Sad": ["sad", "hurt", "disappointed", "lonely"],
+    "Anxious": ["anxious", "worried", "overwhelmed", "scared"],
+    "Frustrated": ["frustrated", "angry", "annoyed", "irritated"],
+    "Tired": ["exhausted", "confused", "numb", "depleted"]
 }
 
 NEEDS = {
-    "Connection": ["understanding", "to be heard", "to be seen", "belonging", "closeness", "empathy"],
-    "Autonomy": ["autonomy", "choice", "freedom", "independence", "space"],
-    "Security": ["safety", "stability", "trust", "reassurance", "predictability"],
-    "Meaning": ["purpose", "contribution", "growth", "authenticity", "respect"]
+    "Connection": ["understanding", "to be heard", "belonging", "closeness"],
+    "Autonomy": ["autonomy", "choice", "freedom", "space"],
+    "Security": ["safety", "stability", "trust", "support"],
+    "Meaning": ["purpose", "respect", "growth", "authenticity"]
 }
 
-# ============ PROMPTS ============
+# ============ PROMPTS (ultra-concise) ============
 
-BASE = """Warm, concise NVC guide. 2-3 sentences max. No "I" statements - use "you" and "what's here is..."."""
+BASE = "Warm guide. 1-2 sentences only. Use 'you' not 'I'."
 
 PROMPTS = {
-    1: f"{BASE}\nAcknowledge what was shared with brief warmth. One sentence of resonance.",
-
-    2: f"{BASE}\nOffer 2-3 feeling guesses in one sentence. End with: 'Select what fits below.'",
-
-    3: f"{BASE}\nConnect their feelings to 2-3 possible needs briefly. End with: 'Choose what resonates below.'",
-
-    4: f"{BASE}\nHelp form a specific, doable request. Ask: 'What action would help meet this need?'",
-
-    5: f"{BASE}\nCelebrate their translation. One sentence of resonance about their growth. Invite them to practice again."
+    1: f"{BASE} Brief acknowledgment of what was shared.",
+    2: f"{BASE} Name 2 feeling guesses. Say: 'Select below or type your own.'",
+    3: f"{BASE} Connect feelings to 2 possible needs. Say: 'Choose below.'",
+    4: f"{BASE} Ask: 'What specific action would help?' Keep it short.",
+    5: f"{BASE} One sentence celebrating their work. Invite another round."
 }
 
-# ============ CORE FUNCTIONS ============
+# ============ FUNCTIONS ============
 
 def call_claude(prompt, message, context=""):
     client = get_client()
     if not client:
         return None
-
-    full_msg = f"{context}\n\n{message}" if context else message
-    response = client.messages.create(
+    msg = f"{context}\n{message}" if context else message
+    resp = client.messages.create(
         model="claude-sonnet-4-20250514",
-        max_tokens=300,
+        max_tokens=150,
         system=prompt,
-        messages=[{"role": "user", "content": full_msg}]
+        messages=[{"role": "user", "content": msg}]
     )
-    return response.content[0].text
+    return resp.content[0].text
 
 def build_statement(data):
-    """Build the I-statement display for sidebar"""
-    parts = []
+    """Build I-statement for display"""
+    lines = []
 
     if data.get("original"):
-        parts.append(f"**Original:** *\"{data['original'][:100]}{'...' if len(data.get('original','')) > 100 else ''}\"*")
-    else:
-        parts.append("**Original:** *waiting...*")
-
-    parts.append("---")
-    parts.append("### Your Translation")
-
-    if data.get("feelings"):
-        parts.append(f"**I feel:** {data['feelings']}")
-    else:
-        parts.append("**I feel:** *...*")
-
-    if data.get("needs"):
-        parts.append(f"**Because I need:** {data['needs']}")
-    else:
-        parts.append("**Because I need:** *...*")
-
-    if data.get("request"):
-        parts.append(f"**Would you be willing to:** {data['request']}")
-    else:
-        parts.append("**Would you be willing to:** *...*")
-
-    if data.get("final"):
-        parts.append("---")
-        parts.append("### Complete Message")
-        parts.append(f"*{data['final']}*")
+        orig = data['original'][:60] + "..." if len(data.get('original','')) > 60 else data['original']
+        lines.append(f"*\"{orig}\"*")
 
-    return "\n\n".join(parts)
+    lines.append("")
+    lines.append("**I feel** " + (data.get("feelings") or "___"))
+    lines.append("**because I need** " + (data.get("needs") or "___"))
+    lines.append("**Would you** " + (data.get("request") or "___") + "?")
 
-def format_chat(history):
-    """Format chat - Guide only, no 'You:' prefix"""
-    if not history:
-        return "*Share a message you want to communicate more skillfully...*"
+    return "\n\n".join(lines)
 
-    output = ""
-    for h in history:
-        if h.get("guide"):
-            output += f"{h['guide']}\n\n"
-    return output.strip()
-
-def process(user_input, history, stage, data, feelings_str, needs_str):
-    """Main processing function"""
+def process(user_input, stage, data, feelings_str, needs_str):
+    """Process input and advance"""
 
     if not user_input.strip() and stage > 1:
         user_input = "continue"
 
-    # Build context
+    # Context for Claude
     context = ""
     if data.get("original"):
-        context += f"Original: \"{data['original']}\"\n"
+        context = f"Original: {data['original']}"
     if data.get("feelings"):
-        context += f"Feelings: {data['feelings']}\n"
+        context += f"\nFeelings: {data['feelings']}"
     if data.get("needs"):
-        context += f"Needs: {data['needs']}\n"
+        context += f"\nNeeds: {data['needs']}"
 
-    # Get Claude response
+    # Get response
     try:
         response = call_claude(PROMPTS.get(stage, PROMPTS[1]), user_input, context)
-        if response is None:
-            return (
-                "*Add ANTHROPIC_API_KEY in Space Settings to begin.*",
-                "", history, stage, data,
-                build_statement(data),
-                gr.update(visible=False),
-                gr.update(visible=False)
-            )
-    except Exception as e:
-        return (
-            f"*Error: {str(e)}*",
-            "", history, stage, data,
-            build_statement(data),
-            gr.update(visible=False),
-            gr.update(visible=False)
-        )
-
-    # Update data based on stage
+        if not response:
+            return ("*Add ANTHROPIC_API_KEY in Settings*", "", stage, data,
+                    build_statement(data), gr.update(visible=False), gr.update(visible=False))
+    except:
+        return ("*Error - try again*", "", stage, data,
+                build_statement(data), gr.update(visible=False), gr.update(visible=False))
+
+    # Update data
     if stage == 1:
         data["original"] = user_input
     elif stage == 2:
-        data["feelings"] = feelings_str if feelings_str else user_input
+        data["feelings"] = feelings_str or user_input
     elif stage == 3:
-        data["needs"] = needs_str if needs_str else user_input
+        data["needs"] = needs_str or user_input
     elif stage == 4:
         data["request"] = user_input
-        # Build final statement
-        data["final"] = f"I feel {data.get('feelings', '...')} because I need {data.get('needs', '...')}. Would you be willing to {user_input}?"
-
-    # Add to history
-    history.append({"guide": response})
 
-    # Advance stage
-    next_stage = min(stage + 1, 5)
+    # Next stage
+    next_stage = stage + 1 if stage < 5 else 1
     if stage == 5:
-        # Reset for new practice
-        next_stage = 1
         data = {}
-        history = []
-
-    # Show appropriate selector
-    show_feelings = (next_stage == 2)
-    show_needs = (next_stage == 3)
 
     return (
-        format_chat(history),
+        response,
         "",
-        history,
         next_stage,
         data,
         build_statement(data),
-        gr.update(visible=show_feelings),
-        gr.update(visible=show_needs)
+        gr.update(visible=(next_stage == 2)),
+        gr.update(visible=(next_stage == 3))
     )
 
 def reset():
-    """Reset session"""
-    return (
-        "*Share a message you want to communicate more skillfully...*",
-        "",
-        [],
-        1,
-        {},
-        build_statement({}),
-        gr.update(visible=False),
-        gr.update(visible=False),
-        [], [], [], [],  # feelings
-        [],              # selected_feelings
-        [], [], [], []   # needs
-    )
+    return ("*What message do you want to transform?*", "", 1, {},
+            build_statement({}), gr.update(visible=False), gr.update(visible=False),
+            [], [], [], [], [], [], [], [])
 
-def update_feelings(f1, f2, f3, f4):
-    return ", ".join(f1 + f2 + f3 + f4)
+def combine_feelings(a, b, c, d):
+    return ", ".join(a + b + c + d)
 
-def update_needs(n1, n2, n3, n4):
-    return ", ".join(n1 + n2 + n3 + n4)
+def combine_needs(a, b, c, d):
+    return ", ".join(a + b + c + d)
 
 # ============ UI ============
 
-with gr.Blocks(
-    title="NVC Translation Practice",
-    theme=gr.themes.Soft(primary_hue="green", secondary_hue="amber")
-) as demo:
+css = """
+.container { max-width: 800px; margin: auto; }
+.statement-box { background: #f8f9fa; padding: 1rem; border-radius: 8px; }
+"""
+
+with gr.Blocks(title="NVC Practice", theme=gr.themes.Soft(), css=css) as demo:
 
-    # State
-    history_state = gr.State([])
     stage_state = gr.State(1)
     data_state = gr.State({})
 
-    # Header
-    gr.Markdown("""
-    # NVC Translation Practice
-    *Transform difficult messages with clarity and compassion*
-    """)
+    gr.Markdown("## NVC Translation Practice")
 
     if not API_KEY_CONFIGURED:
-        gr.Markdown("> **Setup:** Add `ANTHROPIC_API_KEY` in Settings > Secrets")
+        gr.Markdown("*Add ANTHROPIC_API_KEY in Settings > Secrets*")
+
+    # Guide response
+    guide = gr.Markdown("*What message do you want to transform?*")
+
+    # Feelings (hidden until stage 2)
+    with gr.Accordion("Select feelings", open=True, visible=False) as feelings_box:
+        with gr.Row():
+            f1 = gr.CheckboxGroup(FEELINGS["Sad"], label="Sad", scale=1)
+            f2 = gr.CheckboxGroup(FEELINGS["Anxious"], label="Anxious", scale=1)
+        with gr.Row():
+            f3 = gr.CheckboxGroup(FEELINGS["Frustrated"], label="Frustrated", scale=1)
+            f4 = gr.CheckboxGroup(FEELINGS["Tired"], label="Tired", scale=1)
+        feelings_txt = gr.Textbox(label="Selected", interactive=False)
+
+    # Needs (hidden until stage 3)
+    with gr.Accordion("Select needs", open=True, visible=False) as needs_box:
+        with gr.Row():
+            n1 = gr.CheckboxGroup(NEEDS["Connection"], label="Connection", scale=1)
+            n2 = gr.CheckboxGroup(NEEDS["Autonomy"], label="Autonomy", scale=1)
+        with gr.Row():
+            n3 = gr.CheckboxGroup(NEEDS["Security"], label="Security", scale=1)
+            n4 = gr.CheckboxGroup(NEEDS["Meaning"], label="Meaning", scale=1)
+        needs_txt = gr.Textbox(label="Selected", interactive=False)
+
+    # Input
+    user_input = gr.Textbox(placeholder="Type here...", lines=2, show_label=False)
 
     with gr.Row():
-        # LEFT: Chat + Selectors
-        with gr.Column(scale=2):
-            chat_display = gr.Markdown(
-                value="*Share a message you want to communicate more skillfully...*"
-            )
-
-            # Feelings selector
-            with gr.Accordion("Select Your Feelings", open=True, visible=False) as feelings_box:
-                with gr.Row():
-                    f1 = gr.CheckboxGroup(FEELINGS["Sad/Hurt"], label="Sad/Hurt")
-                    f2 = gr.CheckboxGroup(FEELINGS["Scared/Anxious"], label="Scared/Anxious")
-                with gr.Row():
-                    f3 = gr.CheckboxGroup(FEELINGS["Angry/Frustrated"], label="Angry/Frustrated")
-                    f4 = gr.CheckboxGroup(FEELINGS["Confused/Tired"], label="Confused/Tired")
-                feelings_display = gr.Textbox(label="Selected", interactive=False)
-
-            # Needs selector
-            with gr.Accordion("Select Your Needs", open=True, visible=False) as needs_box:
-                with gr.Row():
-                    n1 = gr.CheckboxGroup(NEEDS["Connection"], label="Connection")
-                    n2 = gr.CheckboxGroup(NEEDS["Autonomy"], label="Autonomy")
-                with gr.Row():
-                    n3 = gr.CheckboxGroup(NEEDS["Security"], label="Security")
-                    n4 = gr.CheckboxGroup(NEEDS["Meaning"], label="Meaning")
-                needs_display = gr.Textbox(label="Selected", interactive=False)
-
-            # Input
-            user_input = gr.Textbox(
-                placeholder="Type here...",
-                lines=2,
-                show_label=False
-            )
-
-            with gr.Row():
-                submit_btn = gr.Button("Continue", variant="primary")
-                reset_btn = gr.Button("Start Over")
-
-        # RIGHT: Building I-Statement
-        with gr.Column(scale=1):
-            gr.Markdown("### Your I-Statement")
-            statement_display = gr.Markdown(value=build_statement({}))
-
-            gr.Markdown("""
-            ---
-            *The NVC pattern:*
-            - **Observation** (what happened)
-            - **Feeling** (what you feel)
-            - **Need** (what you need)
-            - **Request** (specific ask)
-            """)
-
-    # Wire up feelings/needs updates
-    for cb in [f1, f2, f3, f4]:
-        cb.change(update_feelings, [f1, f2, f3, f4], feelings_display)
+        submit = gr.Button("Continue", variant="primary", scale=2)
+        reset_btn = gr.Button("Reset", scale=1)
+
+    # Building statement
+    gr.Markdown("---")
+    gr.Markdown("**Your translation:**")
+    statement = gr.Markdown(build_statement({}), elem_classes="statement-box")
 
+    # Wiring
+    for cb in [f1, f2, f3, f4]:
+        cb.change(combine_feelings, [f1, f2, f3, f4], feelings_txt)
     for cb in [n1, n2, n3, n4]:
-        cb.change(update_needs, [n1, n2, n3, n4], needs_display)
+        cb.change(combine_needs, [n1, n2, n3, n4], needs_txt)
 
-    # Submit handlers
-    submit_btn.click(
+    submit.click(
         process,
-        [user_input, history_state, stage_state, data_state, feelings_display, needs_display],
-        [chat_display, user_input, history_state, stage_state, data_state, statement_display, feelings_box, needs_box]
+        [user_input, stage_state, data_state, feelings_txt, needs_txt],
+        [guide, user_input, stage_state, data_state, statement, feelings_box, needs_box]
     )
-
     user_input.submit(
         process,
-        [user_input, history_state, stage_state, data_state, feelings_display, needs_display],
-        [chat_display, user_input, history_state, stage_state, data_state, statement_display, feelings_box, needs_box]
+        [user_input, stage_state, data_state, feelings_txt, needs_txt],
+        [guide, user_input, stage_state, data_state, statement, feelings_box, needs_box]
     )
-
-    # Reset
     reset_btn.click(
-        reset,
-        [],
-        [chat_display, user_input, history_state, stage_state, data_state, statement_display,
-         feelings_box, needs_box, f1, f2, f3, f4, feelings_display, n1, n2, n3, n4]
+        reset, [],
+        [guide, user_input, stage_state, data_state, statement, feelings_box, needs_box,
+         f1, f2, f3, f4, n1, n2, n3, n4]
     )
 
 if __name__ == "__main__":