first commit

ui/app/workspace/routing-rules/tree/views/node/rfConditionNode.tsx

@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils";
+import { Position } from "@xyflow/react";
+import { COND_H, COND_W, SCOPE_CONFIG, type ScopeKey } from "../constants";
+import { RFEdgeHandle } from "./rfEdgeHandle";
+
+/** Width of the left scope-color strip (matches common “start node” accent bars). */
+const ACCENT_STRIP_CLASS = "w-2.5";
+
+export function RFConditionNode({ data }: { data: any }) {
+	const condition = data.condition as string;
+	const color = data.color as string | null;
+	const scopes = (data.scopes as string[] | undefined) ?? [];
+	const accent = color ?? undefined;
+
+	return (
+		<div className="relative" style={{ width: COND_W, minHeight: COND_H }}>
+			<RFEdgeHandle type="target" position={Position.Left} accentColor={accent ?? "var(--muted-foreground)"} />
+			<RFEdgeHandle type="source" position={Position.Right} accentColor={accent ?? "var(--muted-foreground)"} />
+			<div
+				className="dark:bg-card relative z-10 flex w-full cursor-grab overflow-hidden rounded-lg border bg-white shadow-sm active:cursor-grabbing"
+				style={{ minHeight: COND_H, borderColor: accent }}
+			>
+				<div
+					className={cn("shrink-0 self-stretch", ACCENT_STRIP_CLASS, !accent && "bg-muted")}
+					style={accent ? { backgroundColor: accent } : undefined}
+					aria-hidden
+				/>
+				<div className="flex min-w-0 flex-1 flex-col gap-4 px-3 py-2.5">
+					<code className="text-foreground flex-1 font-mono text-[12px] leading-snug break-all">{condition}</code>
+					{scopes.length > 0 && (
+						<div className="flex flex-wrap gap-1">
+							{scopes.map((sc) => {
+								const cfg = SCOPE_CONFIG[sc as ScopeKey];
+								return cfg ? (
+									<span
+										key={sc}
+										className="rounded px-1 py-0 text-[9px] font-semibold"
+										style={{ backgroundColor: `${cfg.color}18`, color: cfg.color }}
+									>
+										{cfg.label}
+									</span>
+								) : null;
+							})}
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}