From d6bc3d8671ffa43cd3d8465cff828ce4a63bad1d Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Tue, 3 Mar 2026 19:45:24 +1300
Subject: [PATCH] feat: make PromptNode full-bleed

Textarea fills the entire node with no visible border or chrome.
Variable name badge overlays at the bottom-left. Handles use
z-index to stay visible over the content surface.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/PromptNode.tsx | 31 +++++++++++++++--------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/nodes/PromptNode.tsx b/src/components/nodes/PromptNode.tsx
index 39d8acd6..44ab34eb 100644
--- a/src/components/nodes/PromptNode.tsx
+++ b/src/components/nodes/PromptNode.tsx
@@ -114,6 +114,7 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
       <BaseNode
         id={id}
         selected={selected}
+        fullBleed
       >
         {/* Text input handle - for receiving text from LLM nodes */}
         <Handle
@@ -121,23 +122,22 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
           position={Position.Left}
           id="text"
           data-handletype="text"
+          style={{ zIndex: 10 }}
         />
 
-        <div className="relative flex-1 flex flex-col">
-          <textarea
-            value={localPrompt}
-            onChange={handleChange}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            placeholder={hasIncomingTextConnection ? "Text from connected node (editable)..." : "Describe what to generate..."}
-            className="nodrag nopan nowheel w-full flex-1 min-h-[70px] p-2 text-xs leading-relaxed text-neutral-100 border border-neutral-700 rounded bg-neutral-900/50 resize-none focus:outline-none focus:ring-1 focus:ring-neutral-600 focus:border-neutral-600 placeholder:text-neutral-500"
-          />
-          {nodeData.variableName && (
-            <div className="mt-1 text-[10px] text-blue-400 px-2">
-              @{nodeData.variableName}
-            </div>
-          )}
-        </div>
+        <textarea
+          value={localPrompt}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholder={hasIncomingTextConnection ? "Text from connected node (editable)..." : "Describe what to generate..."}
+          className="nodrag nopan nowheel w-full h-full p-3 text-xs leading-relaxed text-neutral-100 bg-neutral-800 rounded-lg resize-none focus:outline-none placeholder:text-neutral-500"
+        />
+        {nodeData.variableName && (
+          <div className="absolute bottom-2 left-3 z-10 text-[10px] text-blue-400 pointer-events-none">
+            @{nodeData.variableName}
+          </div>
+        )}
 
         {/* Text output handle */}
         <Handle
@@ -145,6 +145,7 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
           position={Position.Right}
           id="text"
           data-handletype="text"
+          style={{ zIndex: 10 }}
         />
       </BaseNode>