From 637eebfba542275063439f57307eda6194c52662 Mon Sep 17 00:00:00 2001
From: madara88645 <163588475+madara88645@users.noreply.github.com>
Date: Sat, 30 May 2026 20:53:27 +0000
Subject: [PATCH] Add 'or try an example' button to the optimizer page empty
 state

This commit adds a small button to the empty state of the Optimizer page text area that, when clicked, populates the input field with a sample prompt. This mirrors the UX on the home page and other generative tools in the application, helping users get started more easily without having to write their own complex prompt from scratch.

Changes made:
- Added a conditional "or try an example" button in `web/app/optimizer/page.tsx` that appears only when the input is empty.
- When clicked, it sets the input to a sample prompt.
- Used existing styling (Tailwind CSS) to match the other example buttons, including `focus-visible` classes for keyboard accessibility.
---
 .jules/palette.md          |  3 +++
 web/app/optimizer/page.tsx | 13 +++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/.jules/palette.md b/.jules/palette.md
index f920ed47..09d66654 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -4,3 +4,6 @@
 ## 2024-05-26 - Avoid Redundant `aria-disabled` Attributes
 **Learning:** Adding an `aria-disabled` attribute to a button that already uses the native HTML `disabled` attribute is redundant and considered an ARIA anti-pattern. Native `disabled` inherently communicates the state to assistive technologies and removes the element from the tab order.
 **Action:** When improving loading states for buttons, rely on the native `disabled` attribute and use `aria-busy={loading}` to inform screen readers of the active process without duplicating the disabled state.
+## 2024-05-30 - Empty States Call-to-Action
+**Learning:** Including an 'or try an example' call-to-action button that populates the input field solves the 'blank canvas' UX problem by explicitly demonstrating the expected input format to users.
+**Action:** When designing empty states for text areas and generative tools, include an 'or try an example' call-to-action button that populates the input field.
diff --git a/web/app/optimizer/page.tsx b/web/app/optimizer/page.tsx
index 3b108c6f..fd14e9ed 100644
--- a/web/app/optimizer/page.tsx
+++ b/web/app/optimizer/page.tsx
@@ -450,6 +450,7 @@ export default function OptimizerPage() {
                                 <div className="text-sm italic text-zinc-400 mb-4">
                                     Paste a prompt on the left, then run the analyzer to see a shorter version here.
                                 </div>
+                                <div className="flex flex-col items-center gap-2">
                                 <button
                                     type="button"
                                     onClick={handleOptimize}
@@ -459,6 +460,18 @@ export default function OptimizerPage() {
                                 >
                                     {loading ? "Analyzing..." : "Analyze cost"}
                                 </button>
+                                {!input.trim() && (
+                                    <button
+                                        type="button"
+                                        onClick={() => {
+                                            setInput("You are a helpful assistant. Provide a detailed, step-by-step summary of the provided text, ensuring that no important information is left out, and format the output as a bulleted list with clear headings for each section.");
+                                        }}
+                                        className="text-xs text-emerald-400/80 hover:text-emerald-300 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-emerald-500 rounded px-2 py-1"
+                                    >
+                                        or try an example
+                                    </button>
+                                )}
+                                </div>
                             </div>
                         )}
                     </div>