fix: reduce handle size and remove overlapping labels

- 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

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}%` }}
           />

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({
+export function TypedHandle({ id, socketType, isInput, style }: TypedHandleProps) {
-  id,
-  socketType,
-  label,
-  isInput,
-  style,
-}: TypedHandleProps) {
   const color = SOCKET_COLORS[socketType];
   const isFlow = socketType === "flow";
 
   return (
-    <div
-      className="absolute flex items-center gap-1.5"
-      style={{
-        [isInput ? "left" : "right"]: -6,
-        top: "50%",
-        transform: "translateY(-50%)",
-        ...style,
-      }}
-    >
     <Handle
       type={isInput ? "target" : "source"}
       position={isInput ? Position.Left : Position.Right}
       id={id}
       style={{
         background: color,
-          width: isFlow ? 12 : 10,
+        width: isFlow ? 8 : 6,
-          height: isFlow ? 12 : 10,
+        height: isFlow ? 8 : 6,
         borderRadius: isFlow ? 2 : "50%",
-          border: `2px solid ${color}40`,
+        border: `1.5px solid ${color}60`,
+        ...style,
       }}
     />
-      {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>
   );
 }