Update UI with custom color palette (warm gold, sage green, deep forest)

- Beautiful gradient header and buttons
- Custom CSS with your color scheme
- Cleaner layout without external resource links
- Kept all 13-stage NVC practice flow

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

app.py

@@ -1,9 +1,5 @@
 """
 NVC Deep Practice - A Multi-Stage Nonviolent Communication Learning Space
-
-Infused with the exquisite warmth of Sarah Peyton and Tara Brach -
-resonant empathy meeting radical acceptance, holding space with
-the tenderness of complete belonging.
 """
 
 import gradio as gr
@@ -556,14 +552,13 @@ def get_client():
     """Initialize Anthropic client"""
     api_key = os.environ.get("anthropic_key")
     if not api_key:
-        raise ValueError("anthropic_key environment variable not set")
+        raise ValueError("anthropic_key environment variable not set. Add it in Space Settings > Repository secrets.")
     return anthropic.Anthropic(api_key=api_key)
 
 def call_claude(system_prompt, messages, context=""):
     """Call Claude API with given prompts"""
     client = get_client()
 
-    # Build message content
     if context:
         user_content = f"{context}\n\nUser message: {messages[-1]['content']}" if messages else context
     else:
@@ -583,17 +578,12 @@ def call_claude(system_prompt, messages, context=""):
 def process_stage(user_input, stage, session_data, somatic_enabled):
     """Process current stage and return response"""
 
-    # Handle stage 3 skip
     if stage == 3 and not somatic_enabled:
         return "", 4, session_data, "Skipping somatic check-in..."
 
-    # Build context based on stage
     context = build_context(stage, session_data)
-
-    # Get system prompt for current stage
     system_prompt = STAGE_PROMPTS.get(stage, STAGE_PROMPTS[1])
 
-    # Call Claude
     try:
         response = call_claude(
             system_prompt,
@@ -603,10 +593,7 @@ def process_stage(user_input, stage, session_data, somatic_enabled):
     except Exception as e:
         return "", stage, session_data, f"Error calling Claude: {str(e)}"
 
-    # Update session data based on stage
     session_data = update_session_data(stage, user_input, session_data)
-
-    # Determine next stage
     next_stage = stage + 1 if stage < 13 else 1
 
     return response, next_stage, session_data, None
@@ -640,7 +627,6 @@ def update_session_data(stage, user_input, session_data):
     if stage == 1:
         session_data["original_message"] = user_input
     elif stage == 2:
-        # Store any feelings user confirms/mentions
         session_data["feelings"] = session_data.get("feelings", [])
     elif stage == 3:
         session_data["body_sensations"] = user_input
@@ -654,30 +640,198 @@ def update_session_data(stage, user_input, session_data):
 # ============ GRADIO INTERFACE ============
 
 def create_app():
-    """Create the Gradio interface"""
+    """Create the Gradio interface with custom color palette"""
 
-    # Custom CSS for warm theme
     custom_css = """
+    :root {
+        --warm-gold: #B8941E;
+        --olive-yellow: #A8A832;
+        --deep-forest: #3D5932;
+        --sage-green: #6B8070;
+        --soft-cream: #F8F6F0;
+        --warm-beige: #EAE6DC;
+    }
+
     .gradio-container {
-        font-family: 'Georgia', serif !important;
+        font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
+        background: var(--soft-cream) !important;
+    }
+
+    .main-header {
+        background: linear-gradient(135deg, var(--warm-gold) 0%, #C9A52E 100%);
+        padding: 2.5rem 2rem;
+        border-radius: 16px;
+        margin-bottom: 2rem;
+        border: none;
+        box-shadow: 0 4px 20px rgba(184, 148, 30, 0.2);
     }
-    .prose h1, .prose h2, .prose h3 {
-        color: #5d4e37 !important;
+
+    .main-header h1 {
+        color: white;
+        font-size: 2.2rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        letter-spacing: -0.02em;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
-    .chatbot {
-        font-size: 16px !important;
+
+    .main-header p {
+        color: rgba(255, 255, 255, 0.95);
+        font-size: 1.05rem;
+        line-height: 1.6;
+        margin-top: 0.5rem;
+    }
+
+    .intro-text {
+        color: var(--deep-forest);
+        font-size: 1.05rem;
+        line-height: 1.7;
+        padding: 1.25rem 1.5rem;
+        background: white;
+        border-radius: 12px;
+        border-left: 4px solid var(--sage-green);
+        margin-bottom: 1.5rem;
+        box-shadow: 0 2px 8px rgba(61, 89, 50, 0.08);
+    }
+
+    #chatbot {
+        border: 2px solid var(--sage-green) !important;
+        border-radius: 16px !important;
+        background: white !important;
+        box-shadow: 0 4px 16px rgba(61, 89, 50, 0.1) !important;
+    }
+
+    .message.user {
+        background: linear-gradient(135deg, var(--olive-yellow) 0%, #B8B840 100%) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 18px 18px 4px 18px !important;
+        padding: 0.85rem 1.1rem !important;
+        margin: 0.5rem 0 !important;
+        box-shadow: 0 2px 8px rgba(168, 168, 50, 0.2) !important;
+    }
+
+    .message.bot {
+        background: linear-gradient(135deg, var(--sage-green) 0%, #7A9080 100%) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 18px 18px 18px 4px !important;
+        padding: 0.85rem 1.1rem !important;
+        margin: 0.5rem 0 !important;
+        box-shadow: 0 2px 8px rgba(107, 128, 112, 0.2) !important;
+    }
+
+    textarea {
+        border: 2px solid var(--sage-green) !important;
+        border-radius: 12px !important;
+        padding: 1rem !important;
+        font-size: 1rem !important;
+        background: white !important;
+        transition: all 0.3s ease !important;
+        color: var(--deep-forest) !important;
+    }
+
+    textarea:focus {
+        border-color: var(--deep-forest) !important;
+        box-shadow: 0 0 0 3px rgba(61, 89, 50, 0.1) !important;
+        outline: none !important;
+    }
+
+    textarea::placeholder {
+        color: var(--sage-green) !important;
+        opacity: 0.7 !important;
+    }
+
+    .primary-button button {
+        background: linear-gradient(135deg, var(--deep-forest) 0%, #2D4426 100%) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 10px !important;
+        padding: 0.85rem 1.75rem !important;
+        font-weight: 600 !important;
+        font-size: 1rem !important;
+        transition: all 0.3s ease !important;
+        box-shadow: 0 3px 12px rgba(61, 89, 50, 0.3) !important;
+    }
+
+    .primary-button button:hover {
+        background: linear-gradient(135deg, #2D4426 0%, #1D3416 100%) !important;
+        box-shadow: 0 5px 16px rgba(61, 89, 50, 0.4) !important;
+        transform: translateY(-2px) !important;
+    }
+
+    .secondary-button button {
+        background: linear-gradient(135deg, var(--sage-green) 0%, #7A9080 100%) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 10px !important;
+        padding: 0.85rem 1.5rem !important;
+        font-weight: 500 !important;
+        transition: all 0.3s ease !important;
+        box-shadow: 0 2px 8px rgba(107, 128, 112, 0.2) !important;
+    }
+
+    .secondary-button button:hover {
+        background: linear-gradient(135deg, #7A9080 0%, #8AA090 100%) !important;
+        box-shadow: 0 4px 12px rgba(107, 128, 112, 0.3) !important;
+        transform: translateY(-1px) !important;
+    }
+
+    .sidebar-section {
+        background: white;
+        border-radius: 12px;
+        padding: 1.25rem;
+        margin-bottom: 1.25rem;
+        border: 2px solid var(--warm-beige);
+        box-shadow: 0 2px 8px rgba(61, 89, 50, 0.06);
+    }
+
+    .sidebar-section h3 {
+        color: var(--deep-forest);
+        font-size: 1.1rem;
+        font-weight: 600;
+        margin-bottom: 0.75rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 2px solid var(--olive-yellow);
+    }
+
+    .focus-display input {
+        background: linear-gradient(135deg, var(--warm-gold) 0%, #C9A52E 100%) !important;
+        border: none !important;
+        border-radius: 10px !important;
+        padding: 1rem !important;
+        font-size: 1.05rem !important;
+        font-weight: 600 !important;
+        color: white !important;
+        text-align: center !important;
+        box-shadow: 0 3px 12px rgba(184, 148, 30, 0.25) !important;
+    }
+
+    input[type="checkbox"] {
+        accent-color: var(--deep-forest) !important;
+    }
+
+    .checkbox-label {
+        color: var(--deep-forest) !important;
+        font-weight: 500 !important;
+    }
+
+    label {
+        color: var(--deep-forest) !important;
+        font-weight: 500 !important;
+    }
+
+    .card-shadow {
+        box-shadow: 0 3px 15px rgba(61, 89, 50, 0.1);
     }
     """
 
-    with gr.Blocks(
-        theme=gr.themes.Soft(
-            primary_hue="amber",
-            secondary_hue="orange",
-            neutral_hue="stone"
-        ),
-        css=custom_css,
-        title="NVC Deep Practice"
-    ) as demo:
+    with gr.Blocks(css=custom_css, theme=gr.themes.Soft(
+        primary_hue="green",
+        secondary_hue="amber",
+        neutral_hue="stone",
+        font=["Inter", "system-ui", "sans-serif"]
+    )) as demo:
 
         # State variables
         current_stage = gr.State(value=1)
@@ -685,26 +839,29 @@ def create_app():
         selected_needs = gr.State(value=[])
 
         # Header
-        gr.Markdown("""
-        # NVC Deep Practice
-
-        *Learn [Nonviolent Communication](https://www.cnvc.org/) through embodied practice*
-
-        ---
+        gr.HTML("""
+        <div class="main-header card-shadow">
+            <h1>NVC Deep Practice</h1>
+            <p><strong>Learn <a href="https://www.cnvc.org/" target="_blank" style="color: white; text-decoration: underline;">Nonviolent Communication</a> through embodied practice</strong></p>
+        </div>
+        """)
 
-        **How it works:** Write a raw message you want to send someone. This practice
-        will guide you through understanding your feelings, needs, and how to express
-        them with clarity and compassion.
+        gr.HTML("""
+        <div class="intro-text">
+            Write a raw message you want to send someone. This practice will guide you through
+            understanding your feelings, needs, and how to express them with clarity and compassion.
+        </div>
         """)
 
         with gr.Row():
-            # Main column
+            # Main chat area
             with gr.Column(scale=2):
                 chatbot = gr.Chatbot(
                     label="Practice Session",
-                    height=450,
+                    height=500,
                     show_label=True,
-                    avatar_images=(None, "https://em-content.zobj.net/source/twitter/376/seedling_1f331.png")
+                    elem_id="chatbot",
+                    bubble_full_width=False
                 )
 
                 # Needs selector (hidden until stage 5)
@@ -750,50 +907,73 @@ def create_app():
 
                     confirm_needs_btn = gr.Button("Confirm My Needs", variant="primary")
 
-                # Message input
                 msg = gr.Textbox(
                     label="Your Message",
-                    placeholder="What do you want to say? Or type 'continue' to proceed...",
-                    lines=3
+                    placeholder="What would you like to say? Share what's alive in you...",
+                    lines=3,
+                    show_label=False
                 )
 
                 with gr.Row():
-                    submit_btn = gr.Button("Continue Practice", variant="primary")
-                    reset_btn = gr.Button("Start New Practice", variant="secondary")
+                    submit_btn = gr.Button(
+                        "Continue Practice",
+                        variant="primary",
+                        elem_classes=["primary-button"],
+                        scale=2
+                    )
+                    reset_btn = gr.Button(
+                        "Start Fresh",
+                        elem_classes=["secondary-button"],
+                        scale=1
+                    )
 
             # Sidebar
             with gr.Column(scale=1):
-                gr.Markdown("### Settings")
+                gr.HTML("""
+                <div class="sidebar-section card-shadow">
+                    <h3>Practice Settings</h3>
+                </div>
+                """)
 
                 somatic_check = gr.Checkbox(
                     label="Include body check-ins",
                     value=True,
-                    info="Pause to notice body sensations"
+                    info="Pause to notice body sensations",
+                    elem_classes=["checkbox-label"]
                 )
 
-                gr.Markdown("### Current Stage")
-
-                stage_display = gr.Textbox(
-                    label="Stage",
-                    value="1/13: Raw Input",
-                    interactive=False
-                )
+                gr.HTML("""
+                <div class="sidebar-section card-shadow" style="margin-top: 1.5rem;">
+                    <h3>Current Focus</h3>
+                    <p style="color: #6B8070; font-size: 0.9rem; margin-bottom: 0.75rem;">
+                        Track your learning journey
+                    </p>
+                </div>
+                """)
 
                 focus_display = gr.Textbox(
-                    label="Learning Focus",
                     value="Emotional awareness",
-                    interactive=False
+                    interactive=False,
+                    elem_classes=["focus-display"],
+                    show_label=False
                 )
 
-                progress = gr.Slider(
-                    minimum=1,
-                    maximum=13,
-                    value=1,
-                    step=1,
-                    label="Progress",
+                stage_display = gr.Textbox(
+                    label="Stage",
+                    value="1/13: Raw Input",
                     interactive=False
                 )
 
+                gr.HTML("""
+                <div class="sidebar-section card-shadow" style="margin-top: 1.5rem;">
+                    <h3>About This Practice</h3>
+                    <p style="color: #3D5932; font-size: 0.9rem; line-height: 1.6;">
+                        This practice uses AI to guide you through the NVC process with warmth
+                        and attunement. Each stage builds on the last, helping you discover
+                        what's truly alive in you and how to express it with clarity.
+                    </p>
+                </div>
+                """)
 
         # Event handlers
         def handle_submit(message, history, stage, session, somatic, sel_needs):
@@ -801,7 +981,6 @@ def create_app():
             if not message.strip():
                 message = "continue"
 
-            # If at stage 5 and needs haven't been confirmed, prompt to select
             if stage == 5 and not sel_needs:
                 bot_response = "Please take a moment to select your needs from the list above, then click 'Confirm My Needs' to continue."
                 history = history + [[message, bot_response]]
@@ -809,16 +988,13 @@ def create_app():
                     history, "", stage, session, sel_needs,
                     f"{stage}/13: {STAGE_NAMES[stage]}",
                     STAGE_FOCUS[stage],
-                    stage,
                     gr.update(visible=True)
                 )
 
-            # If needs were just confirmed, add them to context
             if stage == 5 and sel_needs:
                 session["needs"] = sel_needs
                 message = f"I've identified these needs: {', '.join(sel_needs)}"
 
-            # Process the stage
             response, next_stage, updated_session, error = process_stage(
                 message, stage, session, somatic
             )
@@ -829,20 +1005,16 @@ def create_app():
                     history, "", stage, session, sel_needs,
                     f"{stage}/13: {STAGE_NAMES[stage]}",
                     STAGE_FOCUS[stage],
-                    stage,
                     gr.update(visible=(stage == 5))
                 )
 
-            # Update history
             if message != "continue":
                 history = history + [[message, response]]
             else:
                 history = history + [[None, response]]
 
-            # Show needs accordion at stage 5
             show_needs = (next_stage == 5)
 
-            # Reset if completed
             if stage == 13:
                 next_stage = 1
                 updated_session = {}
@@ -856,23 +1028,21 @@ def create_app():
                 sel_needs,
                 f"{next_stage}/13: {STAGE_NAMES[next_stage]}",
                 STAGE_FOCUS[next_stage],
-                next_stage,
                 gr.update(visible=show_needs)
             )
 
         def handle_reset():
             """Reset the practice session"""
             return (
-                [],  # history
-                "",  # message
-                1,   # stage
-                {},  # session_data
-                [],  # selected_needs
+                [],
+                "",
+                1,
+                {},
+                [],
                 "1/13: Raw Input",
                 "Emotional awareness",
-                1,
                 gr.update(visible=False),
-                [], [], [], []  # clear all checkboxes
+                [], [], [], []
             )
 
         def update_selected_needs(emotional, relational, value, lifestyle):
@@ -894,12 +1064,11 @@ def create_app():
 
             session["needs"] = all_selected
 
-            # Process to next stage with the needs
             response, next_stage, updated_session, error = process_stage(
                 f"I've identified these needs: {', '.join(all_selected)}",
                 stage,
                 session,
-                True  # somatic_enabled doesn't matter at this stage
+                True
             )
 
             history = history + [[f"Selected needs: {', '.join(all_selected)}", response]]
@@ -912,7 +1081,7 @@ def create_app():
             inputs=[msg, chatbot, current_stage, session_data, somatic_check, selected_needs],
             outputs=[
                 chatbot, msg, current_stage, session_data, selected_needs,
-                stage_display, focus_display, progress, needs_accordion
+                stage_display, focus_display, needs_accordion
             ]
         )
 
@@ -921,7 +1090,7 @@ def create_app():
             inputs=[msg, chatbot, current_stage, session_data, somatic_check, selected_needs],
             outputs=[
                 chatbot, msg, current_stage, session_data, selected_needs,
-                stage_display, focus_display, progress, needs_accordion
+                stage_display, focus_display, needs_accordion
             ]
         )
 
@@ -929,12 +1098,11 @@ def create_app():
             fn=handle_reset,
             outputs=[
                 chatbot, msg, current_stage, session_data, selected_needs,
-                stage_display, focus_display, progress, needs_accordion,
+                stage_display, focus_display, needs_accordion,
                 emotional_needs, relational_needs, value_needs, lifestyle_needs
             ]
         )
 
-        # Update selected needs display when checkboxes change
         for checkbox in [emotional_needs, relational_needs, value_needs, lifestyle_needs]:
             checkbox.change(
                 fn=update_selected_needs,
@@ -947,9 +1115,9 @@ def create_app():
             inputs=[emotional_needs, relational_needs, value_needs, lifestyle_needs, chatbot, current_stage, session_data],
             outputs=[selected_needs, chatbot, current_stage, session_data]
         ).then(
-            fn=lambda s: (f"{s}/13: {STAGE_NAMES[s]}", STAGE_FOCUS[s], s, gr.update(visible=False)),
+            fn=lambda s: (f"{s}/13: {STAGE_NAMES[s]}", STAGE_FOCUS[s], gr.update(visible=False)),
             inputs=[current_stage],
-            outputs=[stage_display, focus_display, progress, needs_accordion]
+            outputs=[stage_display, focus_display, needs_accordion]
         )
 
     return demo