Refactor UI examples, add multi-turn and deflection dataset examples, and implement context checks

core/analyzer.py

@@ -322,6 +322,30 @@ def _clean_chat_response(response: str, user_message: Any) -> str:
     return response
 
 
+def build_chat_model_history(
+    history: list[dict[str, Any]], journal_context: str
+) -> list[dict[str, str]]:
+    """Constructs the model chat history, formatting the first user turn with journal context."""
+    model_history = []
+    is_first_user = True
+    for message in history:
+        role = message.get("role")
+        content = _stringify_chat_content(message.get("content"))
+        if role == "user":
+            if is_first_user:
+                # Prepend the first user message with journal context.
+                formatted_content = f"Context: {journal_context}\nUser reply: {content}"
+                model_history.append({"role": "user", "content": formatted_content})
+                is_first_user = False
+            else:
+                model_history.append({"role": "user", "content": content})
+        elif role == "assistant":
+            # Skip the initial assistant reflection card that starts the session
+            if not is_first_user:
+                model_history.append({"role": "assistant", "content": content})
+    return model_history
+
+
 @spaces.GPU(duration=30)
 def chat_respond_ui(
     history: list[dict[str, Any]] | None,
@@ -339,17 +363,24 @@ def chat_respond_ui(
     ):
         return updated_history, "No new user message. No inference run."
 
+    # Validate that a journal entry has been analyzed first.
+    if not journal_context or not journal_context.strip():
+        response = (
+            "Hello! I am your mindful CBT coach. Please write down a journal entry on the left "
+            "and click **Analyze Thoughts** first, so we have a scenario to reflect on together."
+        )
+        updated_history.append({"role": "assistant", "content": response})
+        return (
+            updated_history,
+            "System redirection: Prompted user to analyze a journal entry first.",
+        )
+
     # Match the chat format used during adapter fine-tuning.
     latest_user_message = _last_user_message(updated_history)
     if not latest_user_message:
         return updated_history, "No text message to respond to."
 
-    model_history = [
-        {
-            "role": "user",
-            "content": build_chat_followup_prompt(journal_context, latest_user_message),
-        }
-    ]
+    model_history = build_chat_model_history(updated_history, journal_context)
 
     # Generate and append the assistant reply.
     response, log_details = run_chat_inference(model_history, CHAT_FOLLOWUP_PROMPT)

core/inference.py

@@ -41,6 +41,40 @@ def clean_generated_text(text: str, max_sentences: int | None = None) -> str:
     text = re.sub(r"[ \t]+", " ", text)
     text = "\n".join(line.strip() for line in text.splitlines())
     text = re.sub(r"\n{3,}", "\n\n", text).strip()
+
+    # Apply conversational meta-prefix stripping only for chat replies (when max_sentences is set)
+    if max_sentences is not None:
+        lines = text.splitlines()
+        cleaned_lines = []
+        for line in lines:
+            line_strip = line.strip()
+            if not line_strip:
+                continue
+            # Skip conversational meta-introductions
+            normalized_line = line_strip.lower().rstrip(".:")
+            if normalized_line in (
+                "here goes",
+                "here is a reply",
+                "here is the reply",
+                "sure",
+                "here's a reply",
+                "here's the reply",
+                "here is my reply",
+                "here is a cbt reflection",
+                "here is a cbt reflection",
+                "here is the reflection",
+                "cbt reflection",
+            ):
+                continue
+            # Strip prefixes like "AI:", "Assistant:", "Coach:", "InnerSpace:", "Response:"
+            prefix_pattern = re.compile(
+                r"^(ai|assistant|coach|innerspace|response):\s*", re.IGNORECASE
+            )
+            line_strip = prefix_pattern.sub("", line_strip)
+            if line_strip:
+                cleaned_lines.append(line_strip)
+        text = "\n\n".join(cleaned_lines)
+
     if max_sentences is None or not text:
         return text
 

modal/dataset.py

@@ -199,6 +199,7 @@ def get_training_examples() -> list[dict[str, int | str]]:
 def get_chat_training_examples() -> list[list[dict[str, str]]]:
     """Returns multi-turn coach examples for resistant follow-up replies."""
     return [
+        # Example 1: Senior Engineer Promotion (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -209,7 +210,16 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "It sounds like the promotion has touched a very sharp fear: that your skills will not hold up. Feeling unskilled is not the same as being unskilled, especially when fear is scanning for proof. What is one concrete task you have handled well that someone may have seen before promoting you?",
             },
+            {
+                "role": "user",
+                "content": "i guess i refactored the legacy api, but anyone could have done that",
+            },
+            {
+                "role": "assistant",
+                "content": "That refactoring is concrete evidence of your ability, even if your mind is trying to minimize it. Refactoring legacy code requires skill, patience, and logic. What was one specific challenge in that API you had to figure out yourself?",
+            },
         ],
+        # Example 2: Production Outage (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -220,7 +230,16 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "That sounds like shame turning one painful incident into a rule about you. One mistake can be real without proving that you always fail. What happened after the mistake that shows you responded or repaired something?",
             },
+            {
+                "role": "user",
+                "content": "i reverted the commit in five minutes, but still, I shouldn't have committed it",
+            },
+            {
+                "role": "assistant",
+                "content": "Reverting it in five minutes shows fast, responsible action under pressure, which is a key skill. Committing errors is a standard part of development, not a sign of permanent failure. What is one safety check you can add to your pre-commit hook to help next time?",
+            },
         ],
+        # Example 3: Missing Gym (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -231,7 +250,16 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "I hear that you do not want a sugar-coated answer. The word lazy is a label, not a full explanation of what happened today. What got in the way tonight: low energy, time, mood, or something else?",
             },
+            {
+                "role": "user",
+                "content": "i was just tired after working 10 hours",
+            },
+            {
+                "role": "assistant",
+                "content": "Being tired after a 10-hour workday is a natural physical response, not laziness. Rest was a legitimate need for your body tonight. How can you plan a shorter, 5-minute stretch or walk tomorrow that respects your energy levels?",
+            },
         ],
+        # Example 4: Partner Late Reply (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -242,7 +270,16 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "That fear sounds really convincing right now. At the same time, 'definitely' asks for more evidence than a delayed reply gives us. What are two ordinary reasons someone might reply late that do not mean rejection?",
             },
+            {
+                "role": "user",
+                "content": "they might be busy at work or sleeping, but my brain still jumps to the worst",
+            },
+            {
+                "role": "assistant",
+                "content": "It makes sense that your brain jumps to the worst case when you want to feel safe and connected. Acknowledging those ordinary reasons helps ground your thoughts in fact rather than fear. What is one calming activity you can focus on until they are free to reply?",
+            },
         ],
+        # Example 5: Hackathon Comparison (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -253,41 +290,44 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "Comparison can make your own work look smaller than it is. 'Everyone else is better' is a very broad thought, not a measurement of your actual project. What is one part of your app that is already useful to a real user?",
             },
-        ],
-        [
-            {"role": "system", "content": CHAT_COACH_PROMPT},
             {
                 "role": "user",
-                "content": "Context: I got feedback on my design and felt embarrassed.\nUser reply: if they noticed alignment issues then i am bad at design",
+                "content": "the ui i assume",
             },
             {
                 "role": "assistant",
-                "content": "It makes sense that feedback can sting when you care about the work. Noticing alignment issues means the design has fixable details, not that you are bad at design. Which one issue would improve the screen fastest if you fixed it first?",
+                "content": "A working UI is a critical first step because it is what directly connects your app to users. Having a layout in place is real progress. What is the smallest functional update you can connect to this UI next?",
             },
-        ],
-        [
-            {"role": "system", "content": CHAT_COACH_PROMPT},
             {
                 "role": "user",
-                "content": "Context: I worked long hours and felt guilty about resting.\nUser reply: if i rest i am letting everyone down",
+                "content": "i need to link the button to the backend model",
             },
             {
                 "role": "assistant",
-                "content": "That sounds like responsibility has become a heavy rule: rest equals failure. Your team may need your judgment and energy, not just more exhausted hours. What is one small boundary that would protect your work without abandoning anyone?",
+                "content": "Linking that button is a great, concrete next step to make the demo functional. We can focus on just that integration without worrying about the rest. What is the first line of connection code you need to write?",
             },
         ],
+        # Example 6: Design Feedback (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
                 "role": "user",
-                "content": "Context: I had a disagreement with my sibling and regret my tone.\nUser reply: i ruined it. they will never forgive me",
+                "content": "Context: I got feedback on my design and felt embarrassed.\nUser reply: if they noticed alignment issues then i am bad at design",
+            },
+            {
+                "role": "assistant",
+                "content": "It makes sense that feedback can sting when you care about the work. Noticing alignment issues means the design has fixable details, not that you are bad at design. Which one issue would improve the screen fastest if you fixed it first?",
+            },
+            {
+                "role": "user",
+                "content": "the button spacing is completely off",
             },
             {
                 "role": "assistant",
-                "content": "Regret can make the future feel already decided. A harsh moment may need repair, but it does not prove the relationship is ruined. What is one sentence you could send that owns your tone without attacking yourself?",
+                "content": "Spacing is a highly adjustable detail, and correcting it will make the interface feel much cleaner. Fixing this one element shows you are responding to feedback to improve. Can you adjust just that spacing setting now?",
             },
         ],
-        # --- NEW CHAT EXAMPLES (WFH boundaries, creative block, procrastination, public speaking, etc.) ---
+        # Example 7: WFH boundaries (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -298,7 +338,16 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "It makes sense that leaving while others work triggers guilt. However, feeling like you are slacking off is not evidence that you are actually slacking. How can you define success for your workday based on your own outcomes rather than the hours others choose to work?",
             },
+            {
+                "role": "user",
+                "content": "i finished all my planned tasks, but I still feel like I should do more",
+            },
+            {
+                "role": "assistant",
+                "content": "Finishing all your planned tasks is a clear sign of a successful, productive day. The urge to 'do more' is often a response to pressure rather than a real necessity. What is one non-work activity you can commit to tonight to help your mind transition away from work?",
+            },
         ],
+        # Example 8: Creative Block (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -309,7 +358,16 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "That thought sounds like your inner critic trying to protect you from the vulnerability of writing. Talent is developed through practice, and even great writers draft bad sentences. Can we focus on drafting one simple description today rather than judging your overall talent?",
             },
+            {
+                "role": "user",
+                "content": "it's just too hard to think of anything good",
+            },
+            {
+                "role": "assistant",
+                "content": "Starting is often the hardest part, especially when we expect it to be immediately 'good'. What if the goal for today was just to write a single, deliberately messy paragraph to break the blank page?",
+            },
         ],
+        # Example 9: Procrastination / Taxes (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -320,7 +378,16 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "Calling yourself lazy is a label that gets in the way of understanding why this feels so hard. Often, avoidance is a shield against feeling overwhelmed. What is one small, manageable step you can take today, like just opening the document folder?",
             },
+            {
+                "role": "user",
+                "content": "i opened it, but looking at the forms makes my stomach hurt",
+            },
+            {
+                "role": "assistant",
+                "content": "That physical reaction is a very real sign of stress. It is completely understandable to feel tense here. Since the folder is open, can you set a timer for just two minutes to read only the first form's instructions, then stop?",
+            },
         ],
+        # Example 10: Presentation Anxiety (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -331,7 +398,16 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "That is a very scary scenario to imagine. While it feels incredibly real, freezing completely is rare when you know the material. If you did lose your place, what is a simple phrase you could use to pause and check your notes?",
             },
+            {
+                "role": "user",
+                "content": "i could say 'let me pause to check my notes', but I feel like they will judge me",
+            },
+            {
+                "role": "assistant",
+                "content": "Pausing to check notes is a professional technique that many speakers use. Most audiences expect speakers to consult notes and won't judge a brief pause. How would you view another speaker who paused for a moment to get back on track?",
+            },
         ],
+        # Example 11: Social Curated Comparison (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -342,7 +418,16 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "It's natural to feel that way when looking at others' highlight reels. But remember, their posts don't show their private struggles, doubts, or failures. What is one personal goal you have worked on recently that brings you a sense of growth?",
             },
+            {
+                "role": "user",
+                "content": "i've been learning python, but it's slow progress",
+            },
+            {
+                "role": "assistant",
+                "content": "Learning Python is a challenging and valuable skill. Slow progress is still real progress, and it is a path you are building yourself. What is one small script or task you wrote recently that actually ran?",
+            },
         ],
+        # Example 12: Roommate Dirty Dishes (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -353,7 +438,16 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "That's a very common expectation, but people have different baselines for cleanliness and communication. Expecting others to read our minds usually ends in resentment. How can you state your request directly and neutrally?",
             },
+            {
+                "role": "user",
+                "content": "i'm tired of repeating myself, it feels like they don't care about my limits",
+            },
+            {
+                "role": "assistant",
+                "content": "It is exhausting to feel like you have to ask repeatedly for basic respect in your home. Your boundaries are valid. What is a constructive way you can discuss a shared sink rule during a calm moment instead of in the heat of frustration?",
+            },
         ],
+        # Example 13: Resting Guilt (Multi-turn)
         [
             {"role": "system", "content": CHAT_COACH_PROMPT},
             {
@@ -364,5 +458,80 @@ def get_chat_training_examples() -> list[list[dict[str, str]]]:
                 "role": "assistant",
                 "content": "It hurts to disappoint people we care about. However, disappointing others occasionally is a natural consequence of managing your own limits. How can you acknowledge her disappointment while still respecting your need for physical recovery?",
             },
+            {
+                "role": "user",
+                "content": "i can tell her I need to rest, but the guilt is still eating at me",
+            },
+            {
+                "role": "assistant",
+                "content": "Guilt often signals that we are breaking a rule we set for ourselves, like 'I must never disappoint my parents.' Acknowledging that rest is necessary to stay healthy helps reframe this guilt. Can you remind yourself that taking care of your energy lets you connect better later?",
+            },
+        ],
+        # --- OFF-TOPIC & DEFLECTION EXAMPLES (Redirecting model safely) ---
+        [
+            {"role": "system", "content": CHAT_COACH_PROMPT},
+            {
+                "role": "user",
+                "content": "Context: I compared myself to someone online who launched a polished AI app in one weekend. My app looks basic next to theirs.\nUser reply: what day is it?",
+            },
+            {
+                "role": "assistant",
+                "content": "I don't have access to real-time information or the current date. I'm here to help you reflect on your journal entry. Let's return to the comparison you felt—what is one useful feature your app already has?",
+            },
+        ],
+        [
+            {"role": "system", "content": CHAT_COACH_PROMPT},
+            {
+                "role": "user",
+                "content": "Context: I compared myself to someone online who launched a polished AI app in one weekend. My app looks basic next to theirs.\nUser reply: are u even listing to me",
+            },
+            {
+                "role": "assistant",
+                "content": "I am listening closely. I hear that comparing your app to theirs made yours feel tiny and embarrassing, which is a stressful feeling. What is one small step you can take on your project today that you have control over?",
+            },
+        ],
+        [
+            {"role": "system", "content": CHAT_COACH_PROMPT},
+            {
+                "role": "user",
+                "content": "Context: I sat down to write something fun and produced one terrible sentence in forty minutes. Maybe I only like the idea of being creative and not the actual work.\nUser reply: what time is it?",
+            },
+            {
+                "role": "assistant",
+                "content": "I don't have access to your local time. Let's look back at your writing block. It sounds like you are setting a very high bar for your writing. What if the goal was just to write a single messy sentence?",
+            },
+        ],
+        [
+            {"role": "system", "content": CHAT_COACH_PROMPT},
+            {
+                "role": "user",
+                "content": "Context: I dropped my coffee at a crowded cafe and everyone looked over. It was over in ten seconds, but my brain keeps replaying it like a public trial.\nUser reply: tell me a joke",
+            },
+            {
+                "role": "assistant",
+                "content": "I'm designed to help you reflect on your journal entry and thoughts, so I can't tell jokes. I hear that replaying that coffee spill feels like a public trial. What is one fact that helps show it was just a simple accident?",
+            },
+        ],
+        [
+            {"role": "system", "content": CHAT_COACH_PROMPT},
+            {
+                "role": "user",
+                "content": "Context: I missed a meeting because I read the time zone wrong. My manager said it was okay, but I am convinced this proves I cannot be trusted with real responsibility.\nUser reply: u tell me what is important",
+            },
+            {
+                "role": "assistant",
+                "content": "I want to help you figure out what feels important to you. It sounds like you are feeling a lot of pressure to prove you are responsible. What is one small action you can take to follow up on the missed meeting?",
+            },
+        ],
+        [
+            {"role": "system", "content": CHAT_COACH_PROMPT},
+            {
+                "role": "user",
+                "content": "Context: I missed a meeting because I read the time zone wrong.\nUser reply: are you a doctor?",
+            },
+            {
+                "role": "assistant",
+                "content": "No, I am not a doctor or a therapist, and I do not provide medical advice or diagnoses. I'm a reflective journal coach. Let's focus back on the meeting anxiety. What is one concrete check you can do to prevent time zone issues in the future?",
+            },
         ],
     ]

ui/examples.py

@@ -0,0 +1,158 @@
+from __future__ import annotations
+
+from html import escape
+import gradio as gr
+
+# Examples to demonstrate the app
+EXAMPLE_CARDS = [
+    {
+        "title": "Launch-Day Spiral",
+        "distress": 8,
+        "text": "I demoed my hackathon app and the button froze right when everyone was watching. My face got hot, I joked awkwardly, and now I keep thinking the whole project looks amateur.",
+    },
+    {
+        "title": "Group Chat Ghost",
+        "distress": 6,
+        "text": "I posted a meme in the group chat and nobody reacted. Now I feel like I misread the vibe and everyone secretly thinks I am annoying.",
+    },
+    {
+        "title": "Side-Quest Overload",
+        "distress": 7,
+        "text": "I opened my todo list and somehow started reorganizing my desk, updating app icons, and reading docs. The main task is still untouched, so maybe I have zero discipline.",
+    },
+    {
+        "title": "Coffee Shop Fumble",
+        "distress": 4,
+        "text": "I dropped my coffee at a crowded cafe and everyone looked over. It was over in ten seconds, but my brain keeps replaying it like a public trial.",
+    },
+    {
+        "title": "Calendar Chaos",
+        "distress": 7,
+        "text": "I missed a meeting because I read the time zone wrong. My manager said it was okay, but I am convinced this proves I cannot be trusted with real responsibility.",
+    },
+    {
+        "title": "Creative Blank Screen",
+        "distress": 5,
+        "text": "I sat down to write something fun and produced one terrible sentence in forty minutes. Maybe I only like the idea of being creative and not the actual work.",
+    },
+    {
+        "title": "Fitness App Shame",
+        "distress": 6,
+        "text": "My fitness app congratulated me for a three-minute walk, and somehow that made me feel worse. Everyone else is doing real workouts while I am celebrating crumbs.",
+    },
+    {
+        "title": "Roommate Sink Saga",
+        "distress": 5,
+        "text": "The dishes are in the sink again, and I am rehearsing a dramatic speech in my head. If I say something, I will sound petty; if I do not, I will explode.",
+    },
+    {
+        "title": "Tiny Typo Doom",
+        "distress": 8,
+        "text": "I sent a project update with a typo in the headline. Nobody mentioned it, but I keep imagining everyone questioning whether I pay attention to details.",
+    },
+    {
+        "title": "Overcooked Dinner",
+        "distress": 3,
+        "text": "I tried making dinner for friends and burned the garlic immediately. They laughed kindly, but I felt embarrassed and wanted to order takeout and disappear.",
+    },
+    {
+        "title": "Unread Email Mountain",
+        "distress": 7,
+        "text": "My inbox has become a haunted forest. Every unread email feels like proof I am behind, irresponsible, and about to miss something important.",
+    },
+    {
+        "title": "Presentation Freeze",
+        "distress": 9,
+        "text": "I have a presentation tomorrow and I keep picturing myself forgetting everything. I know the slides, but my brain is acting like I am walking into disaster.",
+    },
+    {
+        "title": "Birthday Overthink",
+        "distress": 5,
+        "text": "A friend replied to my birthday invite with just 'maybe.' I know people are busy, but now I am wondering if nobody actually wants to come.",
+    },
+    {
+        "title": "Comparison Scroll",
+        "distress": 6,
+        "text": "I saw someone online ship a polished AI demo in one weekend. My app suddenly feels tiny, late, and kind of embarrassing.",
+    },
+    {
+        "title": "Budget Oops",
+        "distress": 6,
+        "text": "I ordered delivery twice this week even though I said I would save money. It feels like one small choice proves I cannot stick to anything.",
+    },
+    {
+        "title": "New Hobby Wobble",
+        "distress": 4,
+        "text": "I went to a beginner pottery class and made a bowl that looks like a tired pancake. Everyone else seemed naturally good, and I felt silly for trying.",
+    },
+    {
+        "title": "Reply-All Panic",
+        "distress": 8,
+        "text": "I accidentally replied-all with a question that was meant for one person. It was harmless, but my stomach dropped and now I want to avoid email forever.",
+    },
+    {
+        "title": "Weekend Reset Guilt",
+        "distress": 5,
+        "text": "I spent most of Sunday resting instead of being productive. Now it is evening and I feel like I wasted the whole weekend and fell behind my life.",
+    },
+    {
+        "title": "Tiny Win Suspicion",
+        "distress": 3,
+        "text": "Something actually went well today, and instead of enjoying it I keep waiting for the catch. Calm feels suspicious, like I missed a problem somewhere.",
+    },
+    {
+        "title": "Bug Fix Whiplash",
+        "distress": 8,
+        "text": "I fixed one bug in my app and two new weird things appeared. I am starting to think I am just moving the problem around instead of actually improving it.",
+    },
+]
+
+
+def _example_card_html(title: str, distress: int, text: str) -> str:
+    """Builds a compact example preview with distress shown on the right."""
+    return (
+        '<div class="nd-example-copy">'
+        '<div class="nd-example-head">'
+        f"<span>{escape(title)}</span>"
+        f"<strong>{distress}/10</strong>"
+        "</div>"
+        f"<p>{escape(text)}</p>"
+        "</div>"
+    )
+
+
+def _select_example(text: str, distress: int) -> tuple[None, str, int]:
+    """Populates the journal form from an example card."""
+    return None, text, distress
+
+
+def render_examples(
+    file_input: gr.File, notes_input: gr.Textbox, distress_slider: gr.Slider
+) -> gr.Column:
+    """Renders the examples section and sets up click handlers."""
+    with gr.Column(elem_classes=["nd-examples-section"]) as section:
+        gr.Markdown("## Try a Scenario 🎲")
+        with gr.Row(elem_classes=["nd-example-grid"]):
+            for example in EXAMPLE_CARDS:
+                with gr.Column(elem_classes=["nd-example-card"]):
+                    gr.HTML(
+                        _example_card_html(
+                            str(example["title"]),
+                            int(example["distress"]),
+                            str(example["text"]),
+                        )
+                    )
+                    use_example = gr.Button(
+                        "Use example",
+                        size="sm",
+                        elem_classes=["nd-example-btn"],
+                    )
+                    use_example.click(
+                        fn=lambda text=str(example["text"]), distress=int(example["distress"]): (
+                            _select_example(text, distress)
+                        ),
+                        inputs=[],
+                        outputs=[file_input, notes_input, distress_slider],
+                        queue=False,
+                    )
+    return section

ui/layout.py

@@ -1,6 +1,5 @@
 from __future__ import annotations
 
-from html import escape
 from typing import Any
 import gradio as gr
 from gradio.themes import Soft
@@ -17,110 +16,7 @@ from core.analyzer import (
     chat_respond_ui,
     reset_reflection_ui,
 )
-
-# Examples to demonstrate the app
-EXAMPLE_CARDS = [
-    {
-        "title": "Launch-Day Spiral",
-        "distress": 8,
-        "text": "I demoed my hackathon app and the button froze right when everyone was watching. My face got hot, I joked awkwardly, and now I keep thinking the whole project looks amateur.",
-    },
-    {
-        "title": "Group Chat Ghost",
-        "distress": 6,
-        "text": "I posted a meme in the group chat and nobody reacted. Now I feel like I misread the vibe and everyone secretly thinks I am annoying.",
-    },
-    {
-        "title": "Side-Quest Overload",
-        "distress": 7,
-        "text": "I opened my todo list and somehow started reorganizing my desk, updating app icons, and reading docs. The main task is still untouched, so maybe I have zero discipline.",
-    },
-    {
-        "title": "Coffee Shop Fumble",
-        "distress": 4,
-        "text": "I dropped my coffee at a crowded cafe and everyone looked over. It was over in ten seconds, but my brain keeps replaying it like a public trial.",
-    },
-    {
-        "title": "Calendar Chaos",
-        "distress": 7,
-        "text": "I missed a meeting because I read the time zone wrong. My manager said it was okay, but I am convinced this proves I cannot be trusted with real responsibility.",
-    },
-    {
-        "title": "Creative Blank Screen",
-        "distress": 5,
-        "text": "I sat down to write something fun and produced one terrible sentence in forty minutes. Maybe I only like the idea of being creative and not the actual work.",
-    },
-    {
-        "title": "Fitness App Shame",
-        "distress": 6,
-        "text": "My fitness app congratulated me for a three-minute walk, and somehow that made me feel worse. Everyone else is doing real workouts while I am celebrating crumbs.",
-    },
-    {
-        "title": "Roommate Sink Saga",
-        "distress": 5,
-        "text": "The dishes are in the sink again, and I am rehearsing a dramatic speech in my head. If I say something, I will sound petty; if I do not, I will explode.",
-    },
-    {
-        "title": "Tiny Typo Doom",
-        "distress": 8,
-        "text": "I sent a project update with a typo in the headline. Nobody mentioned it, but I keep imagining everyone questioning whether I pay attention to details.",
-    },
-    {
-        "title": "Overcooked Dinner",
-        "distress": 3,
-        "text": "I tried making dinner for friends and burned the garlic immediately. They laughed kindly, but I felt embarrassed and wanted to order takeout and disappear.",
-    },
-    {
-        "title": "Unread Email Mountain",
-        "distress": 7,
-        "text": "My inbox has become a haunted forest. Every unread email feels like proof I am behind, irresponsible, and about to miss something important.",
-    },
-    {
-        "title": "Presentation Freeze",
-        "distress": 9,
-        "text": "I have a presentation tomorrow and I keep picturing myself forgetting everything. I know the slides, but my brain is acting like I am walking into disaster.",
-    },
-    {
-        "title": "Birthday Overthink",
-        "distress": 5,
-        "text": "A friend replied to my birthday invite with just 'maybe.' I know people are busy, but now I am wondering if nobody actually wants to come.",
-    },
-    {
-        "title": "Comparison Scroll",
-        "distress": 6,
-        "text": "I saw someone online ship a polished AI demo in one weekend. My app suddenly feels tiny, late, and kind of embarrassing.",
-    },
-    {
-        "title": "Budget Oops",
-        "distress": 6,
-        "text": "I ordered delivery twice this week even though I said I would save money. It feels like one small choice proves I cannot stick to anything.",
-    },
-    {
-        "title": "New Hobby Wobble",
-        "distress": 4,
-        "text": "I went to a beginner pottery class and made a bowl that looks like a tired pancake. Everyone else seemed naturally good, and I felt silly for trying.",
-    },
-    {
-        "title": "Reply-All Panic",
-        "distress": 8,
-        "text": "I accidentally replied-all with a question that was meant for one person. It was harmless, but my stomach dropped and now I want to avoid email forever.",
-    },
-    {
-        "title": "Weekend Reset Guilt",
-        "distress": 5,
-        "text": "I spent most of Sunday resting instead of being productive. Now it is evening and I feel like I wasted the whole weekend and fell behind my life.",
-    },
-    {
-        "title": "Tiny Win Suspicion",
-        "distress": 3,
-        "text": "Something actually went well today, and instead of enjoying it I keep waiting for the catch. Calm feels suspicious, like I missed a problem somewhere.",
-    },
-    {
-        "title": "Bug Fix Whiplash",
-        "distress": 8,
-        "text": "I fixed one bug in my app and two new weird things appeared. I am starting to think I am just moving the problem around instead of actually improving it.",
-    },
-]
+from ui.examples import render_examples
 
 
 def get_theme() -> Any:
@@ -134,24 +30,6 @@ def get_theme() -> Any:
     return theme
 
 
-def _example_card_html(title: str, distress: int, text: str) -> str:
-    """Builds a compact example preview with distress shown on the right."""
-    return (
-        '<div class="nd-example-copy">'
-        '<div class="nd-example-head">'
-        f"<span>{escape(title)}</span>"
-        f"<strong>{distress}/10</strong>"
-        "</div>"
-        f"<p>{escape(text)}</p>"
-        "</div>"
-    )
-
-
-def _select_example(text: str, distress: int) -> tuple[None, str, int]:
-    """Populates the journal form from an example card."""
-    return None, text, distress
-
-
 def create_app() -> gr.Blocks:
     """Creates and lays out the Gradio interface for InnerSpace."""
     with gr.Blocks(title=APP_TITLE) as demo:
@@ -178,6 +56,7 @@ def create_app() -> gr.Blocks:
                     placeholder="Express your thoughts freely. What happened today? How are you feeling?",
                     elem_id="nd-journal-input",
                 )
+
                 distress_slider = gr.Slider(
                     minimum=1,
                     maximum=10,
@@ -219,7 +98,6 @@ def create_app() -> gr.Blocks:
                     send_button = gr.Button(
                         "Send",
                         variant="secondary",
-                        scale=1,
                         min_width=140,
                         elem_classes=["nd-send-btn"],
                     )
@@ -261,32 +139,7 @@ def create_app() -> gr.Blocks:
                 )
 
         # Example cards populate the form without running inference automatically.
-        with gr.Column(elem_classes=["nd-examples-section"]):
-            gr.Markdown("## Try a Scenario 🎲")
-            for row_start in range(0, len(EXAMPLE_CARDS), 4):
-                with gr.Row(elem_classes=["nd-example-grid"]):
-                    for example in EXAMPLE_CARDS[row_start : row_start + 4]:
-                        with gr.Column(elem_classes=["nd-example-card"]):
-                            gr.HTML(
-                                _example_card_html(
-                                    str(example["title"]),
-                                    int(example["distress"]),
-                                    str(example["text"]),
-                                )
-                            )
-                            use_example = gr.Button(
-                                "Use example",
-                                size="sm",
-                                elem_classes=["nd-example-btn"],
-                            )
-                            use_example.click(
-                                fn=lambda text=str(example["text"]), distress=int(example["distress"]): (
-                                    _select_example(text, distress)
-                                ),
-                                inputs=[],
-                                outputs=[file_input, notes_input, distress_slider],
-                                queue=False,
-                            )
+        render_examples(file_input, notes_input, distress_slider)
 
         gr.Markdown(
             f"[GitHub repo]({GITHUB_URL}) | [Hugging Face Space]({SPACE_URL})",

ui/styles.py

@@ -54,6 +54,14 @@ body, .gradio-container {
     gap: 1.25rem !important;
     align-items: stretch !important;
 }
+.nd-main-grid > .form, .nd-main-grid > .row, .nd-main-grid > div {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 1.25rem !important;
+}
+.nd-input-panel, .nd-output-panel {
+    flex: 1 1 320px !important;
+}
 .nd-input-panel, .nd-output-panel, .nd-analysis-section, .nd-examples-section {
     background-color: #151829 !important;
     border: 1px solid #2d2e4a !important;
@@ -170,6 +178,7 @@ body, .gradio-container {
 
 .nd-card-grid > .form, .nd-card-grid > .row, .nd-card-grid > div {
     display: flex !important;
+    flex-wrap: wrap !important;
     gap: 1.25rem !important;
     background: transparent !important;
     border: none !important;
@@ -183,7 +192,7 @@ body, .gradio-container {
     box-shadow: none !important;
     padding: 0 !important;
     margin: 0 !important;
-    flex: 1 1 0% !important;
+    flex: 1 1 240px !important;
 }
 .nd-output-card textarea {
     font-family: inherit !important;
@@ -228,8 +237,13 @@ body, .gradio-container {
     align-items: stretch !important;
     margin-top: 0.85rem !important;
 }
+.nd-example-grid > .form, .nd-example-grid > .row, .nd-example-grid > div {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 1rem !important;
+}
 .nd-example-card {
-    min-width: 0 !important;
+    flex: 1 1 240px !important;
     background-color: rgba(12, 14, 23, 0.86) !important;
     border: 1px solid rgba(148, 163, 184, 0.22) !important;
     border-radius: 8px !important;
@@ -369,4 +383,5 @@ body, .gradio-container {
     color: #fde68a !important;
     border: 1px solid rgba(245, 158, 11, 0.5) !important;
 }
+
 """