fix(embed-studio): contextual empty state and input placeholder

The chat panel always said "Describe the chart you want to create"
even when a chart was already rendered in the preview pane next to
it - confusing because the obvious next action is to ask for tweaks,
not to recreate from scratch.

Branch the empty state and the textarea placeholder on three
situations:
- no chart yet (scratch): "Describe the chart you want to create"
+ the original example prompt
- existing chart: "Ask for changes to the chart" + a tweak example
- banner mode: phrase both as "banner" instead of "chart" so the
hint matches the banner system prompt's mood-setter intent

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/EmbedStudio.tsx

@@ -295,14 +295,34 @@ export function EmbedStudio({
         {/* Left: Chat */}
         <div className="es-chat">
           <div className="es-chat__messages">
-            {chat.messages.length === 0 && (
-              <div className="es-chat__empty">
-                <p>Describe the chart you want to create.</p>
-                <p className="es-chat__hint">
-                  Example: "Create a bar chart showing model sizes with categorical colors"
-                </p>
-              </div>
-            )}
+            {chat.messages.length === 0 && (() => {
+              const isBanner = src === "banner.html";
+              const hasChart = html.trim().length > 0;
+              let title: string;
+              let hint: string;
+              if (isBanner) {
+                title = hasChart
+                  ? "Ask for changes to the banner."
+                  : "Describe the banner you want.";
+                hint = hasChart
+                  ? 'Example: "make it slower and more abstract"'
+                  : 'Example: "abstract flow field in the primary color, very subtle motion"';
+              } else if (hasChart) {
+                title = "Ask for changes to the chart.";
+                hint =
+                  'Example: "switch to a sequential palette" or "highlight the biggest bar"';
+              } else {
+                title = "Describe the chart you want to create.";
+                hint =
+                  'Example: "Create a bar chart showing model sizes with categorical colors"';
+              }
+              return (
+                <div className="es-chat__empty">
+                  <p>{title}</p>
+                  <p className="es-chat__hint">{hint}</p>
+                </div>
+              );
+            })()}
             {chat.messages.map((msg) => (
               <MessageBubble key={msg.id} message={msg} />
             ))}
@@ -326,7 +346,15 @@ export function EmbedStudio({
                 onChange={(e) => chat.setInput(e.target.value)}
                 onKeyDown={handleKeyDown}
                 onInput={handleTextareaInput}
-                placeholder="Describe your chart..."
+                placeholder={
+                  html.trim().length > 0
+                    ? src === "banner.html"
+                      ? "Tweak the banner..."
+                      : "Tweak the chart..."
+                    : src === "banner.html"
+                      ? "Describe your banner..."
+                      : "Describe your chart..."
+                }
                 rows={1}
                 className="es-chat__textarea"
               />