feat: add custom renderer color, add handle (#955)

* feat: add custom renderer color, add handle

* feat: add semicolons

Author: olzhik11

frontend/components/traces/span-view/common.tsx

@@ -1,4 +1,4 @@
-import { Bolt, ChevronRight } from "lucide-react";
+import { Bolt, ChevronRight, GripHorizontal } from "lucide-react";
 import { Resizable } from "re-resizable";
 import React, { memo, PropsWithChildren, ReactNode } from "react";
 
@@ -41,6 +41,20 @@ export const ResizableWrapper = ({
       enable={{
         bottom: true,
       }}
+      handleComponent={{
+        bottom: (
+          <div className="flex items-center justify-center w-full h-2 cursor-ns-resize hover:bg-accent/50 transition-colors group">
+            <GripHorizontal className="w-4 h-4 text-muted-foreground" />
+          </div>
+        ),
+      }}
+      handleStyles={{
+        bottom: {
+          bottom: 0,
+          height: "8px",
+          cursor: "ns-resize",
+        },
+      }}
       className={cn("relative flex h-full w-full", className)}
     >
       {children}

frontend/components/ui/template-renderer/jsx-renderer.tsx

@@ -42,6 +42,11 @@ const createIframeContent = (templateCode: string, data: any): string => {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       line-height: 1.5;
       background: #0A0A0A;
+      color: #FAFAFA;
+    }
+    
+    .error {
+      color: #CC3333;
     }
     .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
   </style>