Upgraded UI/UX with better rendering and Memory Liks Fixed

Author: Siddharthk17

frontend/__tests__/builder/edgeValidation.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { Connection } from "@xyflow/react";
-import { validateConnectionCandidate } from "@/hooks/usePipelineEditor";
+import { removeEdgeById, validateConnectionCandidate } from "@/hooks/usePipelineEditor";
 import type { BuilderEdge, BuilderNode } from "@/lib/yamlGraphSync";
 
 function makeConnection(source: string, target: string, targetHandle?: string): Connection {
@@ -72,3 +72,18 @@ describe("validateConnectionCandidate", () => {
     expect(result.message).toContain("terminal");
   });
 });
+
+describe("removeEdgeById", () => {
+  it("removes only the targeted edge id", () => {
+    const edges: BuilderEdge[] = [
+      { id: "e-1", source: "load", target: "filter" },
+      { id: "e-2", source: "filter", target: "save" },
+      { id: "e-3", source: "load", target: "save" },
+    ];
+
+    const nextEdges = removeEdgeById(edges, "e-2");
+
+    expect(nextEdges).toHaveLength(2);
+    expect(nextEdges.map((edge) => edge.id)).toEqual(["e-1", "e-3"]);
+  });
+});

frontend/components/pipeline-builder/ConfigPanel.tsx

@@ -129,11 +129,15 @@ export function ConfigPanel({
   };
 
   return (
-    <aside className="w-80 shrink-0 border-l bg-card/40 p-3" data-testid="config-panel">
+    <aside
+      className="flex h-full w-72 shrink-0 flex-col border-l bg-[var(--bg-surface)] p-3 text-[var(--text-primary)]"
+      style={{ borderColor: "var(--widget-border)" }}
+      data-testid="config-panel"
+    >
       <div className="mb-3 flex items-start justify-between gap-2">
         <div>
-          <h4 className="text-sm font-semibold">{node.data.label}</h4>
-          <p className="text-xs text-muted-foreground">{stepDefinition.label} configuration</p>
+          <h4 className="text-sm font-semibold text-[var(--text-primary)]">{node.data.label}</h4>
+          <p className="text-xs text-[var(--text-secondary)]">{stepDefinition.label} configuration</p>
         </div>
         <div className="flex items-center gap-1">
           <button
@@ -143,22 +147,26 @@ export function ConfigPanel({
               onClose();
             }}
             data-testid="config-panel-delete"
-            className="rounded border border-destructive/30 px-2 py-1 text-xs text-destructive hover:bg-destructive/10"
+            className="rounded border px-2 py-1 text-xs text-[var(--accent-error)] transition-colors hover:bg-[var(--interactive-hover)]"
+            style={{ borderColor: "color-mix(in srgb, var(--accent-error) 45%, transparent)" }}
           >
             Delete
           </button>
           <button
             type="button"
             onClick={onClose}
             data-testid="config-panel-close"
-            className="rounded border px-2 py-1 text-xs hover:bg-muted"
+            className="rounded border px-2 py-1 text-xs transition-colors hover:bg-[var(--interactive-hover)]"
+            style={{ borderColor: "var(--widget-border)" }}
           >
             Close
           </button>
         </div>
       </div>
 
-      <div className="space-y-3 text-xs">
+      <div
+        className="flex-1 space-y-3 overflow-y-auto pr-1 text-xs [&_input]:border-[var(--widget-border)] [&_input]:bg-[var(--bg-base)] [&_input]:text-[var(--text-primary)] [&_input:focus]:border-[var(--widget-border)] [&_input:focus]:outline-none [&_input:focus]:shadow-none [&_input:focus-visible]:outline-none [&_input:focus-visible]:shadow-none [&_select]:border-[var(--widget-border)] [&_select]:bg-[var(--bg-base)] [&_select]:text-[var(--text-primary)] [&_select:focus]:border-[var(--widget-border)] [&_select:focus]:outline-none [&_select:focus]:shadow-none [&_select:focus-visible]:outline-none [&_select:focus-visible]:shadow-none [&_textarea]:border-[var(--widget-border)] [&_textarea]:bg-[var(--bg-base)] [&_textarea]:text-[var(--text-primary)] [&_textarea:focus]:border-[var(--widget-border)] [&_textarea:focus]:outline-none [&_textarea:focus]:shadow-none [&_textarea:focus-visible]:outline-none [&_textarea:focus-visible]:shadow-none [&_option]:bg-[var(--bg-surface)] [&_option]:text-[var(--text-primary)]"
+      >
         {node.data.type === "load" && (
           <label className="block space-y-1">
             <span className="text-muted-foreground">File</span>
@@ -676,20 +684,28 @@ export function ConfigPanel({
         )}
       </div>
 
-      <div className="mt-4 flex items-center justify-end gap-2">
+      <div
+        className="mt-3 flex items-center justify-end gap-2 border-t pt-3"
+        style={{ borderColor: "var(--widget-border)" }}
+      >
         <button
           type="button"
           onClick={onClose}
           data-testid="config-panel-cancel"
-          className="rounded border px-2.5 py-1.5 text-xs hover:bg-muted"
+          className="rounded border px-2.5 py-1.5 text-xs transition-colors hover:bg-[var(--interactive-hover)]"
+          style={{ borderColor: "var(--widget-border)" }}
         >
           Cancel
         </button>
         <button
           type="button"
           onClick={saveConfig}
           data-testid="config-panel-save"
-          className="rounded border border-primary bg-primary px-2.5 py-1.5 text-xs text-primary-foreground hover:opacity-90"
+          className="rounded border px-2.5 py-1.5 text-xs font-medium text-[var(--bg-base)] transition-[filter] hover:brightness-110"
+          style={{
+            borderColor: "color-mix(in srgb, var(--accent-primary) 60%, transparent)",
+            backgroundColor: "var(--accent-primary)",
+          }}
         >
           Save
         </button>

frontend/components/pipeline-builder/PipelineCanvas.tsx

@@ -25,6 +25,7 @@ interface PipelineCanvasProps {
   onDropStep: (stepType: VisualStepType, position: XYPosition) => void;
   onConfigureNode: (nodeId: string) => void;
   onDeleteNode: (nodeId: string) => void;
+  onDeleteEdge: (edgeId: string) => void;
 }
 
 const nodeTypes = {
@@ -40,6 +41,7 @@ export function PipelineCanvas({
   onDropStep,
   onConfigureNode,
   onDeleteNode,
+  onDeleteEdge,
 }: PipelineCanvasProps) {
   const [instance, setInstance] = useState<ReactFlowInstance<BuilderNode, BuilderEdge> | null>(
     null,
@@ -88,13 +90,22 @@ export function PipelineCanvas({
   );
 
   return (
-    <div className="relative h-full w-full rounded-md border bg-background/30" data-testid="pipeline-canvas">
+    <div
+      className="relative h-full w-full overflow-hidden rounded-md border bg-[var(--bg-base)]"
+      style={{ borderColor: "var(--widget-border)" }}
+      data-testid="pipeline-canvas"
+    >
       <ReactFlow<BuilderNode, BuilderEdge>
         nodes={decoratedNodes}
         edges={edges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
+        onEdgeDoubleClick={(event, edge) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onDeleteEdge(edge.id);
+        }}
         onInit={setInstance}
         onDragOver={handleDragOver}
         onDrop={handleDrop}
@@ -103,13 +114,25 @@ export function PipelineCanvas({
         minZoom={0.2}
         maxZoom={2.5}
         proOptions={{ hideAttribution: true }}
+        className="bg-[var(--bg-base)]"
+        style={{ background: "var(--bg-base)" }}
+        defaultEdgeOptions={{
+          style: {
+            stroke: "var(--accent-primary)",
+            strokeOpacity: 0.6,
+            strokeWidth: 1.5,
+          },
+        }}
       >
-        <Background variant={BackgroundVariant.Dots} gap={20} size={1.2} />
-        <Controls />
+        <Background variant={BackgroundVariant.Dots} gap={16} size={1.2} color="var(--widget-border)" />
+        <Controls className="!border-[var(--widget-border)] !bg-[var(--bg-surface)] !fill-[var(--text-primary)]" />
         <MiniMap
-          nodeColor="#64748b"
+          nodeColor="var(--text-secondary)"
           maskColor="rgba(15, 23, 42, 0.4)"
-          style={{ background: "var(--card)", border: "1px solid var(--border)" }}
+          style={{
+            background: "var(--bg-surface)",
+            border: "1px solid var(--widget-border)",
+          }}
         />
       </ReactFlow>
 
@@ -118,7 +141,13 @@ export function PipelineCanvas({
           className="pointer-events-none absolute inset-0 flex items-center justify-center"
           data-testid="pipeline-canvas-empty"
         >
-          <p className="rounded border bg-card px-3 py-1.5 text-xs text-muted-foreground">
+          <p
+            className="rounded border px-3 py-1.5 text-xs text-[var(--text-secondary)]"
+            style={{
+              borderColor: "var(--widget-border)",
+              backgroundColor: "var(--bg-elevated)",
+            }}
+          >
             Drag steps from the palette to start building.
           </p>
         </div>

frontend/components/pipeline-builder/StepNode.tsx

@@ -10,16 +10,22 @@ function StepNodeComponent({ id, data, selected }: NodeProps<BuilderNode>) {
     <div
       data-testid={`step-node-${id}`}
       className={[
-        "min-w-[190px] rounded-lg border bg-card px-3 py-2 text-card-foreground shadow-sm",
-        selected ? "ring-2 ring-primary" : "ring-0",
+        "min-w-[190px] rounded-lg border px-3 py-2 shadow-sm transition-all",
+        selected ? "ring-2 ring-[var(--accent-primary)]" : "ring-0",
       ].join(" ")}
+      style={{
+        borderColor: "var(--widget-border)",
+        backgroundColor: "var(--bg-elevated)",
+        color: "var(--text-primary)",
+      }}
     >
       {definition.maxInputs > 0 && data.type !== "join" && (
         <Handle
           id="input"
           type="target"
           position={Position.Left}
-          className="h-3 w-3 border-2 border-border bg-background"
+          className="h-3 w-3 border-2"
+          style={{ borderColor: "var(--bg-base)", backgroundColor: "var(--accent-primary)" }}
         />
       )}
       {data.type === "join" && (
@@ -28,15 +34,23 @@ function StepNodeComponent({ id, data, selected }: NodeProps<BuilderNode>) {
             id="left"
             type="target"
             position={Position.Left}
-            style={{ top: "34%" }}
-            className="h-3 w-3 border-2 border-border bg-background"
+            className="h-3 w-3 border-2"
+            style={{
+              top: "34%",
+              borderColor: "var(--bg-base)",
+              backgroundColor: "var(--accent-primary)",
+            }}
           />
           <Handle
             id="right"
             type="target"
             position={Position.Left}
-            style={{ top: "66%" }}
-            className="h-3 w-3 border-2 border-border bg-background"
+            className="h-3 w-3 border-2"
+            style={{
+              top: "66%",
+              borderColor: "var(--bg-base)",
+              backgroundColor: "var(--accent-primary)",
+            }}
           />
         </>
       )}
@@ -45,17 +59,25 @@ function StepNodeComponent({ id, data, selected }: NodeProps<BuilderNode>) {
           id="output"
           type="source"
           position={Position.Right}
-          className="h-3 w-3 border-2 border-border bg-background"
+          className="h-3 w-3 border-2"
+          style={{ borderColor: "var(--bg-base)", backgroundColor: "var(--accent-secondary)" }}
         />
       )}
 
       <div className="flex items-start justify-between gap-2">
         <div className="space-y-0.5">
           <p className="text-sm font-semibold leading-none">{data.label}</p>
-          <p className="text-xs text-muted-foreground">{definition.label}</p>
+          <p className="text-xs text-[var(--text-secondary)]">{definition.label}</p>
         </div>
         {!data.backendSupported && (
-          <span className="rounded border border-amber-500/40 bg-amber-500/10 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-amber-700">
+          <span
+            className="rounded border px-1.5 py-0.5 text-[10px] uppercase tracking-wide"
+            style={{
+              borderColor: "color-mix(in srgb, var(--accent-warning) 45%, transparent)",
+              color: "var(--accent-warning)",
+              backgroundColor: "color-mix(in srgb, var(--accent-warning) 14%, transparent)",
+            }}
+          >
             Visual only
           </span>
         )}
@@ -67,7 +89,8 @@ function StepNodeComponent({ id, data, selected }: NodeProps<BuilderNode>) {
           onClick={() => data.onConfigure?.(id)}
           data-testid={`config-btn-${id}`}
           aria-label={`Configure ${data.label}`}
-          className="rounded border border-border px-2 py-1 text-[11px] hover:bg-muted"
+          className="rounded border px-2 py-1 text-[11px] transition-colors hover:bg-[var(--interactive-hover)]"
+          style={{ borderColor: "var(--widget-border)" }}
         >
           ⚙
         </button>
@@ -76,7 +99,8 @@ function StepNodeComponent({ id, data, selected }: NodeProps<BuilderNode>) {
           onClick={() => data.onDelete?.(id)}
           data-testid={`delete-btn-${id}`}
           aria-label={`Delete ${data.label}`}
-          className="rounded border border-destructive/30 px-2 py-1 text-[11px] text-destructive hover:bg-destructive/10"
+          className="rounded border px-2 py-1 text-[11px] text-[var(--accent-error)] transition-colors hover:bg-[var(--interactive-hover)]"
+          style={{ borderColor: "color-mix(in srgb, var(--accent-error) 45%, transparent)" }}
         >
           ×
         </button>

frontend/components/pipeline-builder/StepPalette.tsx

@@ -23,10 +23,14 @@ export function StepPalette({ onDragStart, onAddStep }: StepPaletteProps) {
   };
 
   return (
-    <aside className="w-72 shrink-0 border-r bg-card/40 p-3" data-testid="step-palette">
-      <h3 className="mb-3 text-sm font-semibold">Step Palette</h3>
+    <aside
+      className="flex h-full w-64 shrink-0 flex-col border-r bg-[var(--bg-surface)] p-3 text-[var(--text-primary)]"
+      style={{ borderColor: "var(--widget-border)" }}
+      data-testid="step-palette"
+    >
+      <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-[var(--text-secondary)]">Step Palette</h3>
 
-      <div className="space-y-4">
+      <div className="flex-1 space-y-4 overflow-y-auto pr-1">
         {CATEGORY_ORDER.map((category) => {
           const categorySteps = STEP_TYPES.filter(
             (stepType) => STEP_DEFINITIONS[stepType].category === category,
@@ -37,7 +41,7 @@ export function StepPalette({ onDragStart, onAddStep }: StepPaletteProps) {
 
           return (
             <section key={category} className="space-y-2">
-              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              <p className="text-xs font-medium uppercase tracking-wide text-[var(--text-secondary)]">
                 {STEP_CATEGORY_LABELS[category]}
               </p>
 
@@ -55,18 +59,26 @@ export function StepPalette({ onDragStart, onAddStep }: StepPaletteProps) {
                       }}
                       onClick={() => handleCardClick(stepType)}
                       data-testid={`step-card-${stepType}`}
-                      className="w-full rounded-md border bg-background px-2.5 py-2 text-left hover:bg-muted"
+                      className="w-full rounded-md border bg-[var(--bg-elevated)] px-2.5 py-2 text-left transition-colors hover:bg-[var(--interactive-hover)]"
+                      style={{ borderColor: "var(--widget-border)" }}
                     >
                       <div className="flex items-start justify-between gap-2">
                         <div className="space-y-0.5">
-                          <p className="text-sm font-medium leading-none">
+                          <p className="text-sm font-medium leading-none text-[var(--text-primary)]">
                             <span className="mr-1.5">{definition.icon}</span>
                             {definition.label}
                           </p>
-                          <p className="text-[11px] text-muted-foreground">{definition.description}</p>
+                          <p className="text-[11px] text-[var(--text-secondary)]">{definition.description}</p>
                         </div>
                         {!definition.backendSupported && (
-                          <span className="rounded border border-[var(--widget-border)] bg-[var(--bg-surface)] px-1 py-0.5 text-[10px] uppercase text-[var(--text-primary)]">
+                          <span
+                            className="rounded border px-1 py-0.5 text-[10px] font-semibold uppercase"
+                            style={{
+                              borderColor: "color-mix(in srgb, var(--accent-warning) 45%, transparent)",
+                              color: "var(--accent-warning)",
+                              backgroundColor: "color-mix(in srgb, var(--accent-warning) 14%, transparent)",
+                            }}
+                          >
                             Visual
                           </span>
                         )}