From 8ec0c194ffe67fc1ed4ad943a58a27de345c7900 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Tue, 28 Jul 2026 18:19:06 -0400
Subject: [PATCH] fix: reduce handle size and remove overlapping labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Flow handles: 12px → 8px (rounded square)
- Data handles: 10px → 6px (circle)
- Border: 2px → 1.5px with softer opacity
- Removed label text from handles (color indicates type)
- Removed wrapper div — handles render directly via React Flow
---
 .../admin/narrative-flow/NodeHandles.tsx      |  4 +-
 .../admin/narrative-flow/TypedHandle.tsx      | 51 +++++--------------
 2 files changed, 13 insertions(+), 42 deletions(-)

diff --git a/src/components/admin/narrative-flow/NodeHandles.tsx b/src/components/admin/narrative-flow/NodeHandles.tsx
index 8fe699e..afbc823 100644
--- a/src/components/admin/narrative-flow/NodeHandles.tsx
+++ b/src/components/admin/narrative-flow/NodeHandles.tsx
@@ -5,7 +5,7 @@ import { NODE_SOCKETS } from "./types";
 
 interface NodeHandlesProps {
   nodeType: string;
-  dynamicOutputs?: Array<{ id: string; label: string }>;
+  dynamicOutputs?: Array<{ id: string }>;
 }
 
 export function NodeHandles({ nodeType, dynamicOutputs }: NodeHandlesProps) {
@@ -28,7 +28,6 @@ export function NodeHandles({ nodeType, dynamicOutputs }: NodeHandlesProps) {
             key={socket.id}
             id={socket.id}
             socketType={socket.type}
-            label={socket.label}
             isInput={true}
             style={{ top: `${topPercent}%` }}
           />
@@ -41,7 +40,6 @@ export function NodeHandles({ nodeType, dynamicOutputs }: NodeHandlesProps) {
             key={socket.id}
             id={socket.id}
             socketType={socket.type}
-            label={socket.label}
             isInput={false}
             style={{ top: `${topPercent}%` }}
           />
diff --git a/src/components/admin/narrative-flow/TypedHandle.tsx b/src/components/admin/narrative-flow/TypedHandle.tsx
index 8a3d602..1741081 100644
--- a/src/components/admin/narrative-flow/TypedHandle.tsx
+++ b/src/components/admin/narrative-flow/TypedHandle.tsx
@@ -1,59 +1,32 @@
 "use client";
 
-import { Handle, Position, type HandleProps } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
 import { SOCKET_COLORS, type SocketType } from "./types";
 
 interface TypedHandleProps {
   id: string;
   socketType: SocketType;
-  label?: string;
   isInput: boolean;
   style?: React.CSSProperties;
 }
 
-export function TypedHandle({
-  id,
-  socketType,
-  label,
-  isInput,
-  style,
-}: TypedHandleProps) {
+export function TypedHandle({ id, socketType, isInput, style }: TypedHandleProps) {
   const color = SOCKET_COLORS[socketType];
   const isFlow = socketType === "flow";
 
   return (
-    <div
-      className="absolute flex items-center gap-1.5"
+    <Handle
+      type={isInput ? "target" : "source"}
+      position={isInput ? Position.Left : Position.Right}
+      id={id}
       style={{
-        [isInput ? "left" : "right"]: -6,
-        top: "50%",
-        transform: "translateY(-50%)",
+        background: color,
+        width: isFlow ? 8 : 6,
+        height: isFlow ? 8 : 6,
+        borderRadius: isFlow ? 2 : "50%",
+        border: `1.5px solid ${color}60`,
         ...style,
       }}
-    >
-      <Handle
-        type={isInput ? "target" : "source"}
-        position={isInput ? Position.Left : Position.Right}
-        id={id}
-        style={{
-          background: color,
-          width: isFlow ? 12 : 10,
-          height: isFlow ? 12 : 10,
-          borderRadius: isFlow ? 2 : "50%",
-          border: `2px solid ${color}40`,
-        }}
-      />
-      {label && (
-        <span
-          className="text-[9px] font-mono leading-none whitespace-nowrap pointer-events-none"
-          style={{
-            color: `${color}cc`,
-            [isInput ? "paddingLeft" : "paddingRight"]: 2,
-          }}
-        >
-          {label}
-        </span>
-      )}
-    </div>
+    />
   );
 }