🎨 Palette: [UX improvement] Add 'or try an example' to optimizer page

.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.

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>