From 067061d98286e6893e9b3605319375fe4a100c0e Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Thu, 11 Jun 2026 01:37:37 -0700
Subject: [PATCH] [eric] onboarding: prefilled starter text renders translucent
 (pending suggestion), solidifies on first keypress/edit

---
 frontend/src/app/pages/AgentChat/ChatInput.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/app/pages/AgentChat/ChatInput.tsx b/frontend/src/app/pages/AgentChat/ChatInput.tsx
index b10111eb..f77bdd58 100644
--- a/frontend/src/app/pages/AgentChat/ChatInput.tsx
+++ b/frontend/src/app/pages/AgentChat/ChatInput.tsx
@@ -63,6 +63,8 @@ const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode,
   }, [autoFocus]);
 
   // Drop the seeded prompt into the editor when it arrives (starter-prompt click).
+  // It renders translucent, reading as a pending suggestion, and solidifies the
+  // moment the user takes it (a keypress, including Enter-to-send, or any edit).
   const prefilledRef = useRef<string | null>(null);
   useEffect(() => {
     if (!prefillPrompt || prefilledRef.current === prefillPrompt) return;
@@ -72,7 +74,20 @@ const ChatInput = forwardRef<ChatInputHandle, Props>(({ onSend, disabled, mode,
     else editor.textContent = prefillPrompt;
     setHasContent(true);
     prefilledRef.current = prefillPrompt;
+    editor.style.opacity = '0.5';
+    editor.style.transition = 'opacity 0.15s';
     editor.focus();
+    const solidify = () => {
+      editor.style.opacity = '';
+      editor.removeEventListener('keydown', solidify);
+      editor.removeEventListener('input', solidify);
+    };
+    editor.addEventListener('keydown', solidify);
+    editor.addEventListener('input', solidify);
+    return () => {
+      editor.removeEventListener('keydown', solidify);
+      editor.removeEventListener('input', solidify);
+    };
   }, [prefillPrompt]);
 
   useDraftLoad(editorRef, ownerId);