From cf940326e93c409623722a67aaf2218ba967a5c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Thu, 21 May 2026 20:31:00 -0400
Subject: [PATCH] feat(studio): make prompt modal editable with textarea

---
 .../src/components/sidebar/BlocksTab.tsx      | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/studio/src/components/sidebar/BlocksTab.tsx b/packages/studio/src/components/sidebar/BlocksTab.tsx
index 4208d1731..b3938479a 100644
--- a/packages/studio/src/components/sidebar/BlocksTab.tsx
+++ b/packages/studio/src/components/sidebar/BlocksTab.tsx
@@ -492,13 +492,19 @@ function PromptPreviewModal({
   prompt: string;
   onClose: () => void;
 }) {
+  const [value, setValue] = useState(prompt);
   const [copied, setCopied] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    requestAnimationFrame(() => textareaRef.current?.focus());
+  }, []);
 
   const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(prompt);
+    navigator.clipboard.writeText(value);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
-  }, [prompt]);
+  }, [value]);
 
   return (
     <div
@@ -506,7 +512,7 @@ function PromptPreviewModal({
       onClick={onClose}
     >
       <div
-        className="w-[520px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl"
+        className="w-[560px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800/60">
@@ -518,15 +524,7 @@ function PromptPreviewModal({
             className="p-1 rounded-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/50"
             onClick={onClose}
           >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-            >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
               <line x1="18" y1="6" x2="6" y2="18" />
               <line x1="6" y1="6" x2="18" y2="18" />
             </svg>
@@ -534,14 +532,23 @@ function PromptPreviewModal({
         </div>
         <div className="flex-1 overflow-y-auto px-5 py-4">
           <p className="text-[11px] text-neutral-500 mb-2">
-            Copy this prompt and paste it into your AI agent (Claude Code, Cursor, etc.)
+            Edit the prompt below, then copy and paste into your AI agent
           </p>
-          <pre className="text-[11px] text-neutral-300 leading-relaxed whitespace-pre-wrap font-mono bg-neutral-900/60 rounded-lg p-3 border border-neutral-800 select-all">
-            {prompt}
-          </pre>
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleCopy();
+              if (e.key === "Escape") onClose();
+            }}
+            className="w-full min-h-[240px] text-[11px] text-neutral-200 leading-relaxed font-mono bg-neutral-900/60 rounded-lg p-3 border border-neutral-800 resize-y focus:outline-none focus:border-studio-accent/60 focus:ring-1 focus:ring-studio-accent/30"
+          />
         </div>
         <div className="flex items-center justify-between px-5 py-3 border-t border-neutral-800/60">
-          <span className="text-[11px] text-neutral-600">Paste into your agent after copying</span>
+          <span className="text-[11px] text-neutral-600">
+            {navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}+Enter to copy
+          </span>
           <button
             className={`px-4 py-1.5 rounded-lg text-xs font-medium transition-colors ${
               copied