@mohsinonxrm/pptb-fetchxml-studio 1.0.0

package/src/app/AppShell.tsx

@@ -0,0 +1,1733 @@
+/**
+ * Main application shell with Fluent UI theming and layout
+ */
+
+import { useState, useEffect, useMemo, useCallback } from "react";
+import {
+	FluentProvider,
+	webLightTheme,
+	webDarkTheme,
+	makeStyles,
+	tokens,
+} from "@fluentui/react-components";
+import { usePptbContext } from "../shared/hooks/usePptbContext";
+import { useLazyMetadata } from "../shared/hooks/useLazyMetadata";
+import { PreviewTabs } from "../features/fetchxml/ui/RightPane/PreviewTabs";
+import type { RelatedEntityColumn } from "../features/fetchxml/ui/RightPane/AddColumnsPanel";
+import { EntitySelector } from "../features/fetchxml/ui/Toolbar/EntitySelector";
+import { SaveViewButton } from "../features/fetchxml/ui/Toolbar/SaveViewButton";
+import { TreeView } from "../features/fetchxml/ui/LeftPane/TreeView";
+import { PropertiesPanel } from "../features/fetchxml/ui/LeftPane/PropertiesPanel";
+import { BuilderProvider, useBuilder } from "../features/fetchxml/state/builderStore";
+import { ThemeProvider } from "../shared/contexts/ThemeContext";
+import { DeleteConfirmDialog } from "../features/fetchxml/ui/Dialogs/DeleteConfirmDialog";
+import { BulkDeleteDialog } from "../features/fetchxml/ui/Dialogs/BulkDeleteDialog";
+import { WorkflowPickerDialog } from "../features/fetchxml/ui/Dialogs/WorkflowPickerDialog";
+import {
+	executeFetchXml,
+	executeSystemView,
+	executePersonalView,
+	whoAmI,
+	isDataverseAvailable,
+	exportToExcel,
+	downloadBase64File,
+	checkPrivilegeByName,
+	getEnvironmentUrl,
+	buildRecordUrl,
+	deleteRecord,
+	deleteRecordsBatch,
+	checkBulkDeletePrivilege,
+	submitBulkDelete,
+	submitBulkDeleteFromFetchXml,
+	checkWorkflowPrivileges,
+	getOnDemandWorkflows,
+	executeWorkflowBatch,
+	checkDeletePrivilege,
+} from "../features/fetchxml/api/pptbClient";
+import { exportToExcelLocal, downloadExcelFile } from "../features/fetchxml/api/excelExport";
+import type {
+	AttributeMetadata,
+	LoadedViewInfo,
+	EntityMetadata,
+	RelationshipMetadata,
+	WorkflowInfo,
+	BatchDeleteProgress,
+	BatchDeleteResult,
+	WorkflowBatchProgress,
+} from "../features/fetchxml/api/pptbClient";
+import { generateFetchXml, addPagingToFetchXml } from "../features/fetchxml/model/fetchxml";
+import { generateLayoutXml } from "../features/fetchxml/model/layoutxml";
+import { collectAttributesFromFetchXml } from "../features/fetchxml/model/layoutxml";
+import type { QueryResult } from "../features/fetchxml/ui/RightPane/ResultsGrid";
+import { SettingsDrawer } from "../features/fetchxml/ui/Settings/SettingsDrawer";
+import {
+	defaultDisplaySettings,
+	type DisplaySettings,
+} from "../features/fetchxml/model/displaySettings";
+
+// ⚠️ IMPORTANT: makeStyles must be called OUTSIDE the component
+// but tokens will automatically update when FluentProvider theme changes
+// because Fluent UI v9 uses CSS variables under the hood
+const useStyles = makeStyles({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		height: "100%",
+		width: "100%",
+		overflow: "hidden",
+		position: "absolute",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+	},
+	leftPane: {
+		display: "flex",
+		flexDirection: "column",
+		overflow: "hidden",
+		minWidth: "300px",
+		maxWidth: "800px",
+		height: "100%",
+	},
+	leftPaneTop: {
+		display: "flex",
+		flexDirection: "column",
+		overflow: "hidden",
+		minHeight: 0, // Important for flex child with overflow
+	},
+	horizontalResizeHandle: {
+		height: "6px",
+		cursor: "ns-resize",
+		backgroundColor: tokens.colorNeutralBackground3,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		position: "relative",
+		flexShrink: 0,
+		":hover": {
+			backgroundColor: tokens.colorNeutralBackground3Hover,
+		},
+		":active": {
+			backgroundColor: tokens.colorBrandBackgroundPressed,
+		},
+	},
+	horizontalGrip: {
+		fontSize: "10px",
+		color: tokens.colorNeutralForeground3,
+		userSelect: "none",
+		pointerEvents: "none",
+		display: "flex",
+		gap: "3px",
+		alignItems: "center",
+	},
+	verticalResizeHandle: {
+		width: "6px",
+		cursor: "ew-resize",
+		backgroundColor: tokens.colorNeutralBackground3,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		position: "relative",
+		flexShrink: 0,
+		":hover": {
+			backgroundColor: tokens.colorNeutralBackground3Hover,
+		},
+		":active": {
+			backgroundColor: tokens.colorBrandBackgroundPressed,
+		},
+	},
+	verticalGrip: {
+		fontSize: "10px",
+		color: tokens.colorNeutralForeground3,
+		userSelect: "none",
+		pointerEvents: "none",
+		display: "flex",
+		flexDirection: "column",
+		gap: "2px",
+		lineHeight: "0.5",
+	},
+	leftPaneBottom: {
+		display: "flex",
+		flexDirection: "column",
+		minHeight: "100px",
+		overflow: "hidden",
+		minWidth: 0, // Important for flex child with overflow
+	},
+	propertiesContent: {
+		flex: 1,
+		overflow: "hidden",
+	},
+	rightPane: {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+		overflow: "hidden",
+		minWidth: 0,
+	},
+	toolbar: {
+		padding: "12px 16px",
+		borderTop: `1px solid ${tokens.colorNeutralStroke1}`,
+		borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+		display: "flex",
+		gap: "8px",
+		alignItems: "center",
+		flexShrink: 0,
+	},
+	placeholder: {
+		padding: "16px",
+		color: tokens.colorNeutralForeground3,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "100%",
+	},
+});
+
+export function AppShell() {
+	const { theme } = usePptbContext();
+	// Use theme from PPTB host context
+	const isDark = theme === "dark";
+
+	console.log("🎨 AppShell rendering:");
+	console.log("  - theme from context:", theme);
+	console.log("  - isDark:", isDark);
+	console.log("  - will use Fluent theme:", isDark ? "webDarkTheme" : "webLightTheme");
+	console.log("  - tokens.colorNeutralBackground1:", tokens.colorNeutralBackground1);
+	console.log("  - tokens.colorNeutralForeground1:", tokens.colorNeutralForeground1);
+
+	return (
+		<FluentProvider theme={isDark ? webDarkTheme : webLightTheme}>
+			<ThemeProvider isDark={isDark}>
+				<BuilderProvider>
+					<AppContent />
+				</BuilderProvider>
+			</ThemeProvider>
+		</FluentProvider>
+	);
+}
+
+/**
+ * Collect all unique entity logical names from a FetchXML query
+ * Includes root entity and all link-entities (recursively)
+ */
+function collectEntitiesFromFetchQuery(
+	fetchQuery: import("../features/fetchxml/model/nodes").FetchNode | null
+): string[] {
+	if (!fetchQuery?.entity?.name) return [];
+
+	const entities = new Set<string>();
+	entities.add(fetchQuery.entity.name);
+
+	const collectFromLinks = (
+		links: import("../features/fetchxml/model/nodes").LinkEntityNode[] | undefined
+	) => {
+		links?.forEach((link) => {
+			if (link.name) {
+				entities.add(link.name);
+			}
+			if (link.links) {
+				collectFromLinks(link.links);
+			}
+		});
+	};
+
+	collectFromLinks(fetchQuery.entity.links);
+
+	return Array.from(entities);
+}
+
+function AppContent() {
+	const styles = useStyles();
+	const builder = useBuilder();
+	const { loadAttributes, loadEntityMetadata, loadRelationships } = useLazyMetadata();
+
+	// State for query execution
+	const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
+	const [isExecuting, setIsExecuting] = useState(false);
+	const [isLoadingMore, setIsLoadingMore] = useState(false);
+	// Multi-entity attribute metadata: Map<entityLogicalName, Map<attributeLogicalName, AttributeMetadata>>
+	const [attributeMetadata, setAttributeMetadata] = useState<
+		Map<string, Map<string, AttributeMetadata>>
+	>(new Map());
+	// State for entity metadata (for layoutxml generation)
+	const [entityMetadata, setEntityMetadata] = useState<EntityMetadata | null>(null);
+	// State for lookup relationships (many-to-one) and one-to-many relationships
+	const [lookupRelationships, setLookupRelationships] = useState<RelationshipMetadata[]>([]);
+	const [oneToManyRelationships, setOneToManyRelationships] = useState<RelationshipMetadata[]>([]);
+	const [isLoadingRelationships, setIsLoadingRelationships] = useState(false);
+
+	// Paging state for infinite scroll / Retrieve All
+	// Kept separate from queryResult to track progress across page fetches
+	const [pagingState, setPagingState] = useState<{
+		currentPage: number;
+		pagingCookie?: string;
+		moreRecords: boolean;
+		isRetrieveAllInProgress: boolean;
+	} | null>(null);
+
+	// Export to Excel state
+	const [exportStatus, setExportStatus] = useState<{
+		isExporting: boolean;
+		error?: string;
+		hasPrivilege: boolean;
+		privilegeChecked: boolean;
+	}>({
+		isExporting: false,
+		hasPrivilege: false,
+		privilegeChecked: false,
+	});
+
+	// Record action privileges state
+	const [recordActionPrivileges, setRecordActionPrivileges] = useState<{
+		canDelete: boolean;
+		canBulkDelete: boolean;
+		canRunWorkflow: boolean;
+		privilegesChecked: boolean;
+	}>({
+		canDelete: false,
+		canBulkDelete: false,
+		canRunWorkflow: false,
+		privilegesChecked: false,
+	});
+
+	// Dialog states for record actions
+	const [deleteDialogState, setDeleteDialogState] = useState<{
+		open: boolean;
+		recordIds: string[];
+		recordName?: string;
+		isBatchDelete?: boolean; // Using batch DELETE for 4-100 records
+	}>({ open: false, recordIds: [] });
+
+	// Progress tracking for batch delete
+	const [deleteProgress, setDeleteProgress] = useState<BatchDeleteProgress | null>(null);
+
+	const [bulkDeleteDialogState, setBulkDeleteDialogState] = useState<{
+		open: boolean;
+		recordIds: string[];
+		isAllRecords?: boolean;
+		totalViewRecords?: number;
+	}>({ open: false, recordIds: [] });
+
+	const [workflowDialogState, setWorkflowDialogState] = useState<{
+		open: boolean;
+		recordIds: string[];
+		preSelectedWorkflow?: WorkflowInfo;
+	}>({ open: false, recordIds: [] });
+
+	// Currently selected record IDs (from ResultsGrid)
+	const [selectedRecordIds, setSelectedRecordIds] = useState<string[]>([]);
+
+	// Settings drawer state
+	const [settingsDrawerOpen, setSettingsDrawerOpen] = useState(false);
+	const [displaySettings, setDisplaySettings] = useState<DisplaySettings>(defaultDisplaySettings);
+
+	// State for resizable split
+	const [topHeight, setTopHeight] = useState(58); // Percentage of left pane height for tree/properties
+	const [leftPaneWidth, setLeftPaneWidth] = useState(480); // Width of left pane in pixels
+	const [isDraggingHorizontal, setIsDraggingHorizontal] = useState(false); // Tree/Properties resize
+	const [isDraggingVertical, setIsDraggingVertical] = useState(false); // Left/Right pane resize
+
+	// Handle horizontal resize (tree/properties split)
+	useEffect(() => {
+		if (!isDraggingHorizontal) return;
+
+		const handleMouseMove = (e: MouseEvent) => {
+			const leftPane = document.querySelector("[data-left-pane]") as HTMLElement;
+			if (!leftPane) return;
+
+			const rect = leftPane.getBoundingClientRect();
+			const newTopHeight = ((e.clientY - rect.top) / rect.height) * 100;
+
+			// Constrain between 30% and 80%
+			if (newTopHeight >= 30 && newTopHeight <= 80) {
+				setTopHeight(newTopHeight);
+			}
+		};
+
+		const handleMouseUp = () => {
+			setIsDraggingHorizontal(false);
+		};
+
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [isDraggingHorizontal]);
+
+	// Handle vertical resize (left/right pane split)
+	useEffect(() => {
+		if (!isDraggingVertical) return;
+
+		const handleMouseMove = (e: MouseEvent) => {
+			const appRoot = document.querySelector("[data-app-root]") as HTMLElement;
+			if (!appRoot) return;
+
+			const rect = appRoot.getBoundingClientRect();
+			const newLeftPaneWidth = e.clientX - rect.left;
+
+			// Constrain between 300px and 800px
+			if (newLeftPaneWidth >= 300 && newLeftPaneWidth <= 800) {
+				setLeftPaneWidth(newLeftPaneWidth);
+			}
+		};
+
+		const handleMouseUp = () => {
+			setIsDraggingVertical(false);
+		};
+
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [isDraggingVertical]);
+
+	// Check Dataverse API on mount
+	useEffect(() => {
+		console.log("=== PPTB FetchXML Studio - Dataverse API Check ===");
+		console.log("Dataverse API Available:", isDataverseAvailable());
+
+		if (isDataverseAvailable()) {
+			console.log("window.dataverseAPI methods:", Object.keys(window.dataverseAPI || {}));
+
+			// Call WhoAmI to verify connection
+			whoAmI()
+				.then((result) => {
+					if (result) {
+						console.log("✅ WhoAmI Success:", {
+							UserId: result.UserId,
+							BusinessUnitId: result.BusinessUnitId,
+							OrganizationId: result.OrganizationId,
+						});
+					} else {
+						console.warn("⚠️ WhoAmI returned null - API may not be fully initialized");
+					}
+				})
+				.catch((error) => {
+					console.error("❌ WhoAmI Error:", error);
+				});
+		} else {
+			console.error("❌ Dataverse API not available on window object");
+		}
+
+		console.log("===================================================");
+	}, []);
+
+	// Check export privilege on mount
+	useEffect(() => {
+		const checkExportPrivilege = async () => {
+			try {
+				const user = await whoAmI();
+				if (user) {
+					const hasPrivilege = await checkPrivilegeByName(user.UserId, "prvExportToExcel");
+					setExportStatus((prev) => ({
+						...prev,
+						hasPrivilege,
+						privilegeChecked: true,
+					}));
+					console.log(`📊 Export to Excel privilege: ${hasPrivilege ? "GRANTED" : "DENIED"}`);
+				} else {
+					setExportStatus((prev) => ({
+						...prev,
+						hasPrivilege: false,
+						privilegeChecked: true,
+					}));
+				}
+			} catch (error) {
+				console.error("Failed to check export privilege:", error);
+				setExportStatus((prev) => ({
+					...prev,
+					hasPrivilege: false,
+					privilegeChecked: true,
+				}));
+			}
+		};
+
+		if (isDataverseAvailable()) {
+			checkExportPrivilege();
+		}
+	}, []);
+
+	// Check record action privileges when entity changes
+	const entityLogicalName = builder.fetchQuery?.entity.name;
+	useEffect(() => {
+		if (!entityLogicalName || !isDataverseAvailable()) {
+			setRecordActionPrivileges({
+				canDelete: false,
+				canBulkDelete: false,
+				canRunWorkflow: false,
+				privilegesChecked: false,
+			});
+			return;
+		}
+
+		const checkRecordPrivileges = async () => {
+			try {
+				// Check delete privilege for this entity
+				const canDelete = await checkDeletePrivilege(entityLogicalName);
+
+				// Check bulk delete privilege
+				const canBulkDelete = await checkBulkDeletePrivilege();
+
+				// Check workflow privileges
+				const canRunWorkflow = await checkWorkflowPrivileges();
+
+				setRecordActionPrivileges({
+					canDelete,
+					canBulkDelete,
+					canRunWorkflow,
+					privilegesChecked: true,
+				});
+
+				console.log(`🔐 Record action privileges for ${entityLogicalName}:`, {
+					canDelete,
+					canBulkDelete,
+					canRunWorkflow,
+				});
+			} catch (error) {
+				console.error("Failed to check record action privileges:", error);
+				setRecordActionPrivileges({
+					canDelete: false,
+					canBulkDelete: false,
+					canRunWorkflow: false,
+					privilegesChecked: true,
+				});
+			}
+		};
+
+		checkRecordPrivileges();
+	}, [entityLogicalName]);
+
+	// Collect entities from FetchXML and memoize to avoid unnecessary reloads
+	const entitiesInQuery = useMemo(() => {
+		return collectEntitiesFromFetchQuery(builder.fetchQuery);
+	}, [builder.fetchQuery]);
+
+	// Create a stable key for the entities list to minimize effect re-runs
+	const entitiesKey = useMemo(() => entitiesInQuery.sort().join(","), [entitiesInQuery]);
+
+	// Load attribute metadata for all entities in the FetchXML query
+	// This includes the root entity and all link-entities
+	useEffect(() => {
+		if (entitiesInQuery.length === 0) {
+			setAttributeMetadata(new Map());
+			setEntityMetadata(null);
+			return;
+		}
+
+		const rootEntityName = entitiesInQuery[0];
+
+		// Load attributes for all entities in the query
+		Promise.all(
+			entitiesInQuery.map(async (entityName) => {
+				try {
+					const attributes = await loadAttributes(entityName);
+					const attrMap = new Map<string, AttributeMetadata>();
+					attributes.forEach((attr) => {
+						attrMap.set(attr.LogicalName, attr);
+					});
+					return { entityName, attrMap };
+				} catch (error) {
+					console.error(`Failed to load attributes for ${entityName}:`, error);
+					return { entityName, attrMap: new Map<string, AttributeMetadata>() };
+				}
+			})
+		).then((results) => {
+			const multiEntityMap = new Map<string, Map<string, AttributeMetadata>>();
+			results.forEach(({ entityName, attrMap }) => {
+				multiEntityMap.set(entityName, attrMap);
+			});
+			setAttributeMetadata(multiEntityMap);
+		});
+
+		// Load entity metadata (for ObjectTypeCode and PrimaryIdAttribute)
+		loadEntityMetadata(rootEntityName)
+			.then((entity) => {
+				setEntityMetadata(entity);
+			})
+			.catch((error) => {
+				console.error("Failed to load entity metadata:", error);
+				setEntityMetadata(null);
+			});
+
+		// Load relationships (many-to-one and one-to-many) for the Add Columns panel
+		setIsLoadingRelationships(true);
+		loadRelationships(rootEntityName)
+			.then((relationships) => {
+				// Store lookup relationships (many-to-one)
+				setLookupRelationships(relationships.manyToOne);
+				// Store one-to-many relationships for 1-N column support
+				setOneToManyRelationships(relationships.oneToMany);
+			})
+			.catch((error) => {
+				console.error("Failed to load relationships:", error);
+				setLookupRelationships([]);
+				setOneToManyRelationships([]);
+			})
+			.finally(() => {
+				setIsLoadingRelationships(false);
+			});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [entitiesKey, loadAttributes, loadEntityMetadata, loadRelationships]);
+
+	// Clear query results when the fetch query structure changes (entity change, view clear, etc.)
+	// We use the entity node id as a proxy - it changes when entity is re-selected or view is cleared
+	useEffect(() => {
+		setQueryResult(null);
+	}, [builder.fetchQuery?.entity?.id]);
+
+	// Sync layout with FetchXML when needed (e.g., after adding/removing attributes)
+	// Also sync when columnConfig is null but there are attributes (ensures columns button works)
+	useEffect(() => {
+		const hasAttributes = (builder.fetchQuery?.entity?.attributes?.length ?? 0) > 0;
+		const needsSync = builder.layoutNeedsSync || (hasAttributes && !builder.columnConfig);
+
+		if (needsSync && builder.fetchQuery) {
+			// Build attribute type map from metadata for better column widths
+			// Use root entity's attribute metadata
+			const attributeTypeMap = new Map<string, string>();
+			const rootEntityName = builder.fetchQuery.entity?.name;
+			if (attributeMetadata && rootEntityName) {
+				const rootEntityAttrs = attributeMetadata.get(rootEntityName);
+				rootEntityAttrs?.forEach((attr, name) => {
+					attributeTypeMap.set(name, attr.AttributeType || "");
+				});
+			}
+			builder.syncLayoutWithFetchXml(attributeTypeMap);
+		}
+	}, [builder.layoutNeedsSync, builder.fetchQuery, builder.columnConfig, attributeMetadata]);
+
+	// Generate FetchXML from builder state
+	const fetchXml = builder.fetchQuery ? generateFetchXml(builder.fetchQuery) : "";
+
+	// Check if current query is an aggregate query (disables delete/workflow buttons)
+	const isAggregateQuery = builder.fetchQuery?.options?.aggregate === true;
+
+	// Check if query has 1-N or N-N relationships that cause row duplication
+	// When these relationships exist, record commands should be disabled
+	const hasOneToManyRelationship = useMemo(() => {
+		if (!builder.fetchQuery?.entity?.links) return false;
+
+		const checkLinks = (links: typeof builder.fetchQuery.entity.links): boolean => {
+			for (const link of links) {
+				// Check if this link-entity is a 1-N or N-N relationship
+				if (link.relationshipType === "1N" || link.relationshipType === "NN") {
+					return true;
+				}
+				// Check nested link-entities
+				if (link.links && checkLinks(link.links)) {
+					return true;
+				}
+			}
+			return false;
+		};
+
+		return checkLinks(builder.fetchQuery.entity.links);
+	}, [builder.fetchQuery]);
+
+	// Generate LayoutXML from column config for saving
+	const layoutXml = useMemo(() => {
+		if (!builder.columnConfig || !entityMetadata) {
+			return "";
+		}
+		return generateLayoutXml({
+			...builder.columnConfig,
+			objectTypeCode: entityMetadata.ObjectTypeCode,
+			primaryIdAttribute: entityMetadata.PrimaryIdAttribute,
+		});
+	}, [builder.columnConfig, entityMetadata]);
+
+	// Handle save view completion - update loaded view state
+	const handleSaveViewComplete = (
+		viewId: string,
+		viewType: "system" | "personal",
+		viewName: string
+	) => {
+		// Update the builder's loaded view state so subsequent saves overwrite the same view
+		if (entityMetadata) {
+			builder.setLoadedView({
+				id: viewId,
+				type: viewType,
+				entitySetName: entityMetadata.EntitySetName,
+				name: viewName,
+			});
+		}
+		console.log(`✅ View saved: ${viewName} (${viewType}) - ${viewId}`);
+	};
+
+	/**
+	 * Build columns array from FetchXML and result data
+	 * Handles lookup field naming conventions and ensures all requested columns are present
+	 */
+	const buildColumnsFromResult = (
+		records: Record<string, unknown>[],
+		fetchQuery: typeof builder.fetchQuery
+	): string[] => {
+		// Start with columns from the result data (these have actual values)
+		const resultKeys = records.length > 0 ? Object.keys(records[0]) : [];
+		const resultKeySet = new Set(resultKeys.filter((k) => !k.includes("@")));
+
+		if (fetchQuery) {
+			// Get columns from FetchXML - this includes all requested attributes
+			const fetchXmlColumns = collectAttributesFromFetchXml(fetchQuery);
+			const fetchXmlColumnNames = fetchXmlColumns.map((col) => col.name);
+
+			// Build the final column list, handling lookup field naming conventions
+			const columnSet = new Set<string>();
+			const columns: string[] = [];
+
+			for (const colName of fetchXmlColumnNames) {
+				if (resultKeySet.has(colName)) {
+					columns.push(colName);
+					columnSet.add(colName);
+				} else if (resultKeySet.has(`_${colName}_value`)) {
+					columns.push(`_${colName}_value`);
+					columnSet.add(`_${colName}_value`);
+					columnSet.add(colName);
+				} else {
+					columns.push(colName);
+					columnSet.add(colName);
+				}
+			}
+
+			// Add any result columns not already handled
+			for (const key of resultKeys) {
+				if (!columnSet.has(key) && !key.includes("@")) {
+					columns.push(key);
+					columnSet.add(key);
+				}
+			}
+
+			return columns;
+		} else {
+			return resultKeys.filter((k) => !k.includes("@"));
+		}
+	};
+
+	/**
+	 * Execute the query and handle Retrieve All if enabled
+	 */
+	const handleExecute = async () => {
+		if (!fetchXml) return;
+
+		setIsExecuting(true);
+		setQueryResult(null);
+		setPagingState(null);
+
+		const startTime = performance.now();
+		const entityLogicalName = builder.fetchQuery?.entity.name;
+		const retrieveAll = builder.retrieveAllRecords;
+
+		// Check if user has set a 'top' limit in FetchXML - if so, we respect it and don't enable paging
+		const hasTopLimit = builder.fetchQuery?.options?.top !== undefined;
+		// Get page size from fetch options (count), default to 5000 if not set
+		const pageSize = builder.fetchQuery?.options?.count;
+
+		try {
+			// Determine execution method based on loaded view state
+			let result;
+			const loadedView = builder.loadedView;
+			let useViewExecution = false;
+
+			if (loadedView) {
+				const isUnmodified =
+					fetchXml.replace(/\s+/g, "") === loadedView.originalFetchXml.replace(/\s+/g, "");
+
+				if (isUnmodified) {
+					useViewExecution = true;
+					console.log(
+						`📋 Executing ${loadedView.type} view "${loadedView.name}" via ${
+							loadedView.type === "system" ? "savedQuery" : "userQuery"
+						}=${loadedView.id}`
+					);
+
+					if (loadedView.type === "system") {
+						result = await executeSystemView(loadedView.entitySetName, loadedView.id);
+					} else {
+						result = await executePersonalView(loadedView.entitySetName, loadedView.id);
+					}
+				}
+			}
+
+			// If not using view execution (either no view or view was modified), use FetchXML
+			if (!result) {
+				console.log(
+					loadedView
+						? `📝 View "${loadedView.name}" was modified - executing via fetchXmlQuery`
+						: "📡 Executing FetchXML query"
+				);
+				result = await executeFetchXml(fetchXml);
+			}
+
+			const executionTimeMs = Math.round(performance.now() - startTime);
+			const columns = buildColumnsFromResult(result.records, builder.fetchQuery);
+			const rows = result.records.map((record) => ({ ...record }));
+
+			// Set initial result
+			setQueryResult({
+				columns,
+				rows,
+				totalRecordCount: result.totalRecordCount,
+				moreRecords: result.moreRecords,
+				pagingCookie: result.pagingCookie,
+				entityLogicalName,
+				executionTimeMs,
+			});
+
+			// Initialize paging state
+			setPagingState({
+				currentPage: 1,
+				pagingCookie: result.pagingCookie,
+				moreRecords: result.moreRecords ?? false,
+				isRetrieveAllInProgress: retrieveAll && (result.moreRecords ?? false) && !hasTopLimit,
+			});
+
+			setIsExecuting(false);
+
+			// If Retrieve All is enabled and there are more records, start progressive loading
+			// Only for FetchXML execution, not for view execution (which doesn't support paging)
+			// Don't do Retrieve All if user set a 'top' limit - Dataverse handles the limit
+			if (retrieveAll && result.moreRecords && !useViewExecution && !hasTopLimit) {
+				await loadAllPages(
+					fetchXml,
+					columns,
+					rows,
+					result.pagingCookie,
+					2,
+					entityLogicalName,
+					pageSize
+				);
+			}
+		} catch (error) {
+			console.error("Failed to execute FetchXML:", error);
+			setQueryResult({ columns: [], rows: [] });
+			setIsExecuting(false);
+		}
+	};
+
+	/**
+	 * Progressive loading of all pages (Retrieve All)
+	 * Updates results as each page is fetched
+	 */
+	const loadAllPages = async (
+		baseFetchXml: string,
+		columns: string[],
+		initialRows: Record<string, unknown>[],
+		pagingCookie: string | undefined,
+		startPage: number,
+		entityLogicalName: string | undefined,
+		pageSize?: number
+	) => {
+		let allRows = [...initialRows];
+		let currentPagingCookie = pagingCookie;
+		let page = startPage;
+		let hasMore = true;
+
+		setIsLoadingMore(true);
+
+		try {
+			while (hasMore) {
+				console.log(`📄 Retrieve All: Fetching page ${page}...`);
+
+				// Add paging parameters to FetchXML (page, paging-cookie, and count for page size)
+				const pagedFetchXml = addPagingToFetchXml(
+					baseFetchXml,
+					page,
+					currentPagingCookie,
+					pageSize
+				);
+				const result = await executeFetchXml(pagedFetchXml);
+
+				// Append new rows
+				allRows = [...allRows, ...result.records];
+
+				// Update the grid progressively
+				setQueryResult((prev) => ({
+					columns: prev?.columns || columns,
+					rows: allRows,
+					totalRecordCount: prev?.totalRecordCount,
+					moreRecords: result.moreRecords,
+					pagingCookie: result.pagingCookie,
+					entityLogicalName,
+					executionTimeMs: prev?.executionTimeMs,
+				}));
+
+				// Update paging state
+				currentPagingCookie = result.pagingCookie;
+				hasMore = result.moreRecords ?? false;
+
+				setPagingState({
+					currentPage: page,
+					pagingCookie: currentPagingCookie,
+					moreRecords: hasMore,
+					isRetrieveAllInProgress: hasMore,
+				});
+
+				page++;
+			}
+
+			console.log(`✅ Retrieve All complete: ${allRows.length} total records`);
+		} catch (error) {
+			console.error("Failed during Retrieve All:", error);
+		} finally {
+			setIsLoadingMore(false);
+			setPagingState((prev) => (prev ? { ...prev, isRetrieveAllInProgress: false } : null));
+		}
+	};
+
+	/**
+	 * Load more records (for infinite scroll when Retrieve All is OFF)
+	 */
+	const handleLoadMore = async () => {
+		if (!fetchXml || !pagingState || !pagingState.moreRecords || isLoadingMore) return;
+		if (pagingState.isRetrieveAllInProgress) return; // Don't allow manual load during Retrieve All
+
+		// Don't load more if user has set a 'top' limit
+		if (builder.fetchQuery?.options?.top !== undefined) return;
+
+		setIsLoadingMore(true);
+
+		// Get page size from fetch options to maintain consistent page sizes
+		const pageSize = builder.fetchQuery?.options?.count;
+
+		try {
+			const nextPage = pagingState.currentPage + 1;
+			console.log(
+				`📄 Loading page ${nextPage}${pagingState.pagingCookie ? " with paging cookie" : ""}...`
+			);
+
+			// Add paging parameters: page number, paging cookie (required for reliable paging), and count (page size)
+			const pagedFetchXml = addPagingToFetchXml(
+				fetchXml,
+				nextPage,
+				pagingState.pagingCookie,
+				pageSize
+			);
+			const result = await executeFetchXml(pagedFetchXml);
+
+			// Append new rows to existing result
+			setQueryResult((prev) => {
+				if (!prev) return prev;
+				return {
+					...prev,
+					rows: [...prev.rows, ...result.records],
+					moreRecords: result.moreRecords,
+					pagingCookie: result.pagingCookie,
+				};
+			});
+
+			setPagingState({
+				currentPage: nextPage,
+				pagingCookie: result.pagingCookie,
+				moreRecords: result.moreRecords ?? false,
+				isRetrieveAllInProgress: false,
+			});
+
+			console.log(`✅ Page ${nextPage} loaded: ${result.records.length} records`);
+		} catch (error) {
+			console.error("Failed to load more records:", error);
+		} finally {
+			setIsLoadingMore(false);
+		}
+	};
+
+	/**
+	 * Export to Excel using Dataverse ExportToExcel API
+	 * Requires a saved view (system or personal) and prvExportToExcel privilege
+	 */
+	const handleExport = async () => {
+		// Check privilege first
+		if (!exportStatus.hasPrivilege) {
+			setExportStatus((prev) => ({
+				...prev,
+				error:
+					"You don't have permission to export to Excel. Contact your administrator to request the 'Export to Excel' privilege.",
+			}));
+			return;
+		}
+
+		// Check if we have a saved view
+		if (!builder.loadedView) {
+			setExportStatus((prev) => ({
+				...prev,
+				error: "Export to Excel requires a saved view. Please save your query as a view first.",
+			}));
+			return;
+		}
+
+		if (!fetchXml || !layoutXml) {
+			setExportStatus((prev) => ({
+				...prev,
+				error: "Export to Excel requires FetchXML and LayoutXML",
+			}));
+			return;
+		}
+
+		// Clear any previous error and set exporting state
+		setExportStatus((prev) => ({
+			...prev,
+			isExporting: true,
+			error: undefined,
+		}));
+
+		try {
+			console.log(
+				`📤 Exporting to Excel via ${builder.loadedView.type} view "${builder.loadedView.name}"...`
+			);
+
+			// Use view name for filename
+			const viewName = builder.loadedView.name;
+
+			const result = await exportToExcel(
+				builder.loadedView.id,
+				builder.loadedView.type,
+				fetchXml,
+				layoutXml,
+				viewName
+			);
+
+			// Trigger download
+			downloadBase64File(result.excelFile, result.filename);
+
+			console.log(`✅ Export complete: ${result.filename}`);
+
+			// Clear exporting state on success
+			setExportStatus((prev) => ({
+				...prev,
+				isExporting: false,
+			}));
+		} catch (error) {
+			console.error("Export to Excel failed:", error);
+			setExportStatus((prev) => ({
+				...prev,
+				isExporting: false,
+				error: error instanceof Error ? error.message : "Export to Excel failed. Please try again.",
+			}));
+		}
+	};
+
+	/**
+	 * Export to Excel locally using exceljs
+	 * Exports the current result set with native Excel data types
+	 * No view required - works directly with query results
+	 */
+	const handleExportLocal = async () => {
+		if (!queryResult || !queryResult.rows.length) {
+			setExportStatus((prev) => ({
+				...prev,
+				error: "No data to export. Execute a query first.",
+			}));
+			return;
+		}
+
+		setExportStatus((prev) => ({
+			...prev,
+			isExporting: true,
+			error: undefined,
+		}));
+
+		try {
+			console.log(`📤 Exporting ${queryResult.rows.length} records locally...`);
+
+			// Build column display names map
+			const columnDisplayNames = new Map<string, string>();
+
+			// Use actual column names from queryResult (includes _value format for lookups)
+			const columns = queryResult.columns;
+
+			for (const col of columns) {
+				// Try to get display name from attribute metadata
+				let displayName = col;
+
+				if (attributeMetadata && entityLogicalName) {
+					const entityAttrs = attributeMetadata.get(entityLogicalName);
+					if (entityAttrs) {
+						// Direct attribute lookup
+						const attr = entityAttrs.get(col);
+						if (attr?.DisplayName?.UserLocalizedLabel?.Label) {
+							displayName = attr.DisplayName.UserLocalizedLabel.Label;
+						}
+						// Handle lookup columns (_primarycontactid_value -> primarycontactid)
+						if (col.startsWith("_") && col.endsWith("_value")) {
+							const baseAttr = col.slice(1, -6);
+							const lookupAttr = entityAttrs.get(baseAttr);
+							if (lookupAttr?.DisplayName?.UserLocalizedLabel?.Label) {
+								displayName = lookupAttr.DisplayName.UserLocalizedLabel.Label;
+							}
+						}
+					}
+				}
+
+				columnDisplayNames.set(col, displayName);
+			}
+
+			// Generate filename from entity or view name
+			const fileName =
+				builder.loadedView?.name ||
+				entityMetadata?.DisplayName?.UserLocalizedLabel?.Label ||
+				entityLogicalName ||
+				"export";
+
+			const { buffer, fileName: finalFileName } = await exportToExcelLocal({
+				records: queryResult.rows,
+				columns,
+				columnDisplayNames,
+				attributeMetadata,
+				entityName: entityLogicalName,
+				fileName,
+				displaySettings,
+			});
+
+			// Trigger download
+			downloadExcelFile(buffer, finalFileName);
+
+			console.log(`✅ Local export complete: ${finalFileName}`);
+
+			setExportStatus((prev) => ({
+				...prev,
+				isExporting: false,
+			}));
+		} catch (error) {
+			console.error("Local export failed:", error);
+			setExportStatus((prev) => ({
+				...prev,
+				isExporting: false,
+				error: error instanceof Error ? error.message : "Local export failed. Please try again.",
+			}));
+		}
+	};
+
+	// Clear export error after 10 seconds
+	useEffect(() => {
+		if (exportStatus.error) {
+			const timer = setTimeout(() => {
+				setExportStatus((prev) => ({ ...prev, error: undefined }));
+			}, 10000);
+			return () => clearTimeout(timer);
+		}
+	}, [exportStatus.error]);
+
+	// ============ RECORD ACTION HANDLERS ============
+
+	/**
+	 * Handle selection change from ResultsGrid
+	 */
+	const handleSelectionChange = useCallback((recordIds: string[]) => {
+		setSelectedRecordIds(recordIds);
+	}, []);
+
+	/**
+	 * Get selected record IDs - called by command bar actions
+	 */
+	const getSelectedRecordIds = useCallback(() => {
+		return selectedRecordIds;
+	}, [selectedRecordIds]);
+
+	/**
+	 * Open record in a new browser tab
+	 */
+	const handleOpenRecord = useCallback(
+		async (recordIds: string[]) => {
+			if (recordIds.length === 0 || !entityLogicalName) return;
+
+			const envUrl = await getEnvironmentUrl();
+			if (!envUrl) {
+				console.error("Failed to get environment URL");
+				return;
+			}
+
+			// Open each selected record in a new tab
+			for (const recordId of recordIds) {
+				const url = buildRecordUrl(entityLogicalName, recordId, envUrl);
+				window.open(url, "_blank");
+			}
+		},
+		[entityLogicalName]
+	);
+
+	/**
+	 * Copy record URL(s) to clipboard
+	 */
+	const handleCopyRecordUrl = useCallback(
+		async (recordIds: string[]) => {
+			if (recordIds.length === 0 || !entityLogicalName) return;
+
+			const envUrl = await getEnvironmentUrl();
+			if (!envUrl) {
+				console.error("Failed to get environment URL");
+				return;
+			}
+
+			const urls = recordIds.map((id) => buildRecordUrl(entityLogicalName, id, envUrl));
+			const textToCopy = urls.join("\n");
+
+			try {
+				await navigator.clipboard.writeText(textToCopy);
+				console.log(`📋 Copied ${urls.length} record URL(s) to clipboard`);
+			} catch (error) {
+				console.error("Failed to copy to clipboard:", error);
+			}
+		},
+		[entityLogicalName]
+	);
+
+	/**
+	 * Open delete confirmation dialog
+	 * Handles 3 scenarios:
+	 * 1. No selection → Bulk delete ALL records from view (with warning)
+	 * 2. 1-100 records → Batch DELETE requests (with progress)
+	 * 3. >100 records → Bulk delete with FetchXML IN operator
+	 */
+	const handleDeleteRecords = useCallback(
+		(recordIds: string[]) => {
+			if (!entityLogicalName) return;
+
+			// Scenario 1: No selection - delete ALL records from view
+			if (recordIds.length === 0) {
+				if (!recordActionPrivileges.canBulkDelete) {
+					console.warn("Bulk delete privilege required to delete all records from view");
+					return;
+				}
+				const totalRecords = queryResult?.rows.length || 0;
+				setBulkDeleteDialogState({
+					open: true,
+					recordIds: [],
+					isAllRecords: true,
+					totalViewRecords: totalRecords,
+				});
+				return;
+			}
+
+			// Scenario 3: More than 100 records - use bulk delete with IN operator
+			if (recordIds.length > 100 && recordActionPrivileges.canBulkDelete) {
+				setBulkDeleteDialogState({
+					open: true,
+					recordIds,
+					isAllRecords: false,
+				});
+				return;
+			}
+
+			// Scenario 2: 1-100 records - use batch DELETE or direct delete
+			const recordName =
+				recordIds.length === 1
+					? (queryResult?.rows.find(
+							(row) => row[entityMetadata?.PrimaryIdAttribute || ""] === recordIds[0]
+					  )?.[entityMetadata?.PrimaryNameAttribute || ""] as string | undefined)
+					: undefined;
+
+			// Use batch delete for 4+ records (more efficient than sequential)
+			const isBatchDelete = recordIds.length >= 4;
+			setDeleteDialogState({ open: true, recordIds, recordName, isBatchDelete });
+		},
+		[entityLogicalName, recordActionPrivileges.canBulkDelete, queryResult, entityMetadata]
+	);
+
+	/**
+	 * Explicitly trigger bulk delete dialog (from command bar menu)
+	 * Bypasses the normal auto-routing logic and always uses bulk delete
+	 */
+	const handleBulkDeleteRecords = useCallback(
+		(recordIds: string[]) => {
+			if (!entityLogicalName || !recordActionPrivileges.canBulkDelete) return;
+
+			const isAllRecords = recordIds.length === 0;
+			const totalRecords = queryResult?.rows.length || 0;
+
+			setBulkDeleteDialogState({
+				open: true,
+				recordIds,
+				isAllRecords,
+				totalViewRecords: isAllRecords ? totalRecords : undefined,
+			});
+		},
+		[entityLogicalName, recordActionPrivileges.canBulkDelete, queryResult]
+	);
+
+	/**
+	 * Execute delete for records (called from DeleteConfirmDialog)
+	 * Supports both sequential delete (1-3 records) and batch delete (4-100 records)
+	 */
+	const handleConfirmDelete = useCallback(async (): Promise<BatchDeleteResult | void> => {
+		if (!entityLogicalName || deleteDialogState.recordIds.length === 0) return;
+
+		const recordIds = deleteDialogState.recordIds;
+		setDeleteProgress(null);
+
+		// For batch delete (4+ records), use $batch endpoint
+		if (deleteDialogState.isBatchDelete) {
+			const result = await deleteRecordsBatch(
+				entityLogicalName, // Use logical name, API will pluralize
+				recordIds,
+				(progress) => setDeleteProgress(progress)
+			);
+
+			if (result.succeeded > 0) {
+				console.log(`✅ Batch deleted ${result.succeeded} of ${recordIds.length} records`);
+				// Re-execute query to refresh results
+				handleExecute();
+			}
+
+			return result;
+		}
+
+		// Sequential delete for 1-3 records
+		let successCount = 0;
+		const errors: string[] = [];
+
+		for (const recordId of recordIds) {
+			try {
+				await deleteRecord(entityLogicalName, recordId);
+				successCount++;
+			} catch (error) {
+				errors.push(
+					`Failed to delete ${recordId}: ${error instanceof Error ? error.message : String(error)}`
+				);
+			}
+		}
+
+		if (successCount > 0) {
+			console.log(`✅ Deleted ${successCount} of ${recordIds.length} records`);
+			// Re-execute query to refresh results
+			handleExecute();
+		}
+
+		if (errors.length > 0) {
+			console.error("Delete errors:", errors);
+			return { succeeded: successCount, failed: errors.length, errors };
+		}
+	}, [
+		entityLogicalName,
+		deleteDialogState.recordIds,
+		deleteDialogState.isBatchDelete,
+		handleExecute,
+	]);
+
+	/**
+	 * Submit bulk delete job (called from BulkDeleteDialog)
+	 * Supports both selected records (IN operator) and all records from view
+	 */
+	const handleConfirmBulkDelete = useCallback(
+		async (jobName: string) => {
+			if (!entityLogicalName || !entityMetadata) {
+				throw new Error("Missing entity information for bulk delete");
+			}
+
+			// If deleting ALL records from view (no selection)
+			if (bulkDeleteDialogState.isAllRecords) {
+				// Use the current FetchXML directly from builder state
+				if (!builder.fetchQuery) {
+					throw new Error("No FetchXML query available");
+				}
+				const currentFetchXml = generateFetchXml(builder.fetchQuery);
+				const result = await submitBulkDeleteFromFetchXml(currentFetchXml, jobName);
+				console.log(`📤 Bulk delete job (all records) submitted: ${result.asyncOperationId}`);
+				return result;
+			}
+
+			// If deleting specific selected records
+			if (bulkDeleteDialogState.recordIds.length === 0) {
+				throw new Error("No records selected for bulk delete");
+			}
+
+			const recordIds = bulkDeleteDialogState.recordIds;
+			const primaryIdAttribute = entityMetadata.PrimaryIdAttribute;
+
+			const result = await submitBulkDelete(
+				entityLogicalName,
+				primaryIdAttribute,
+				recordIds,
+				jobName
+			);
+
+			console.log(`📤 Bulk delete job submitted: ${result.asyncOperationId}`);
+			return result;
+		},
+		[
+			entityLogicalName,
+			entityMetadata,
+			bulkDeleteDialogState.recordIds,
+			bulkDeleteDialogState.isAllRecords,
+			builder.fetchQuery,
+		]
+	);
+
+	/**
+	 * Run a specific workflow directly (from menu button)
+	 * Opens the workflow dialog with the workflow pre-selected for confirmation
+	 */
+	const handleRunSpecificWorkflow = useCallback((workflow: WorkflowInfo, recordIds: string[]) => {
+		if (recordIds.length === 0) return;
+		// Open the workflow dialog with the selected workflow pre-selected
+		setWorkflowDialogState({ open: true, recordIds, preSelectedWorkflow: workflow });
+	}, []);
+
+	/**
+	 * Fetch available workflows for the entity
+	 */
+	const handleFetchWorkflows = useCallback(async (): Promise<WorkflowInfo[]> => {
+		if (!entityLogicalName) return [];
+		return getOnDemandWorkflows(entityLogicalName);
+	}, [entityLogicalName]);
+
+	/**
+	 * Execute workflow on selected records
+	 */
+	const handleExecuteWorkflow = useCallback(
+		async (
+			workflowId: string,
+			recordIds: string[],
+			onProgress: (progress: WorkflowBatchProgress) => void
+		): Promise<{ succeeded: number; failed: number; errors: string[] }> => {
+			if (!entityLogicalName) {
+				return { succeeded: 0, failed: recordIds.length, errors: ["Entity not selected"] };
+			}
+			return executeWorkflowBatch(workflowId, recordIds, entityLogicalName, onProgress);
+		},
+		[entityLogicalName]
+	);
+
+	// ============ END RECORD ACTION HANDLERS ============
+
+	return (
+		<div className={styles.root} data-app-root>
+			{/* Left Pane */}
+			<div className={styles.leftPane} data-left-pane style={{ width: `${leftPaneWidth}px` }}>
+				{/* Top: Tree View */}
+				<div className={styles.leftPaneTop} style={{ height: `${topHeight}%` }}>
+					<EntitySelector
+						selectedEntity={builder.fetchQuery?.entity.name || null}
+						onEntityChange={builder.setEntity}
+						onNewQuery={builder.newQuery}
+						onViewLoad={(viewInfo: LoadedViewInfo) => {
+							// Load the view's FetchXML into the tree while preserving view info
+							// Pass layoutxml for column configuration if available
+							builder.loadView(
+								viewInfo.originalFetchXml,
+								{
+									id: viewInfo.id,
+									type: viewInfo.type,
+									entitySetName: viewInfo.entitySetName,
+									name: viewInfo.name,
+								},
+								viewInfo.layoutxml
+							);
+						}}
+					/>
+					{builder.fetchQuery ? (
+						<TreeView
+							fetchQuery={builder.fetchQuery}
+							selectedNodeId={builder.selectedNodeId}
+							onNodeSelect={builder.selectNode}
+							onAddAttribute={builder.addAttribute}
+							onAddAllAttributes={builder.addAllAttributes}
+							onAddOrder={builder.addOrder}
+							onAddFilter={builder.addFilter}
+							onAddSubfilter={builder.addSubfilter}
+							onAddCondition={builder.addCondition}
+							onAddLinkEntity={builder.addLinkEntity}
+							onRemoveNode={builder.removeNode}
+						/>
+					) : (
+						<div className={styles.placeholder}>Select an entity to begin</div>
+					)}
+				</div>
+				{/* Resize Handle */}
+				<div
+					className={styles.horizontalResizeHandle}
+					onMouseDown={() => setIsDraggingHorizontal(true)}
+					title="Drag to resize"
+				>
+					<span className={styles.horizontalGrip}>
+						<span>•</span>
+						<span>•</span>
+						<span>•</span>
+					</span>
+				</div>{" "}
+				{/* Bottom: Properties Panel */}
+				<div className={styles.leftPaneBottom} style={{ height: `${100 - topHeight}%` }}>
+					<div className={styles.toolbar}>
+						<span style={{ fontWeight: 600 }}>Properties</span>
+					</div>
+					<div className={styles.propertiesContent}>
+						<PropertiesPanel
+							selectedNode={builder.selectedNode}
+							fetchQuery={builder.fetchQuery}
+							onNodeUpdate={builder.updateNode}
+						/>
+					</div>
+				</div>
+			</div>
+			{/* Vertical Resize Handle */}
+			<div
+				className={styles.verticalResizeHandle}
+				onMouseDown={() => setIsDraggingVertical(true)}
+				title="Drag to resize"
+			>
+				<span className={styles.verticalGrip}>
+					<span>•</span>
+					<span>•</span>
+					<span>•</span>
+				</span>
+			</div>{" "}
+			{/* Right Pane */}
+			<div className={styles.rightPane}>
+				<PreviewTabs
+					xml={fetchXml}
+					layoutXml={layoutXml}
+					result={queryResult}
+					isExecuting={isExecuting}
+					isLoadingMore={isLoadingMore}
+					onExecute={handleExecute}
+					onExport={handleExport}
+					onExportLocal={handleExportLocal}
+					canExport={!!builder.loadedView && exportStatus.hasPrivilege}
+					isExporting={exportStatus.isExporting}
+					exportError={exportStatus.error}
+					onDismissExportError={() => setExportStatus((prev) => ({ ...prev, error: undefined }))}
+					exportDisabledReason={
+						!builder.loadedView
+							? "Save as a view first to enable export"
+							: !exportStatus.hasPrivilege
+							? "You don't have the prvExportToExcel privilege"
+							: undefined
+					}
+					onParseToTree={builder.loadFetchXml}
+					attributeMetadata={attributeMetadata}
+					fetchQuery={builder.fetchQuery}
+					columnConfig={builder.columnConfig}
+					onColumnResize={builder.updateColumnWidth}
+					onLoadMore={handleLoadMore}
+					entityDisplayName={
+						entityMetadata?.DisplayName?.UserLocalizedLabel?.Label || entityMetadata?.LogicalName
+					}
+					lookupRelationships={lookupRelationships}
+					oneToManyRelationships={oneToManyRelationships}
+					isLoadingRelationships={isLoadingRelationships}
+					onLoadRelatedAttributes={loadAttributes}
+					saveViewButton={
+						<SaveViewButton
+							fetchXml={fetchXml}
+							layoutXml={layoutXml}
+							entityLogicalName={builder.fetchQuery?.entity?.name || ""}
+							objectTypeCode={entityMetadata?.ObjectTypeCode || 0}
+							primaryIdAttribute={entityMetadata?.PrimaryIdAttribute || ""}
+							loadedView={builder.loadedView}
+							onSaveComplete={handleSaveViewComplete}
+							disabled={!fetchXml || !entityMetadata}
+						/>
+					}
+					onReorderColumns={(columns) => {
+						// Set the column config with new order
+						if (builder.columnConfig) {
+							builder.setColumnConfig({
+								...builder.columnConfig,
+								columns,
+							});
+						}
+					}}
+					onRemoveColumn={(columnName) => {
+						// Remove the attribute from the FetchXML
+						if (builder.fetchQuery?.entity.id) {
+							// Find the attribute node by name and remove it
+							const attr = builder.fetchQuery.entity.attributes.find((a) => a.name === columnName);
+							if (attr) {
+								builder.removeNode(attr.id);
+							}
+						}
+					}}
+					onAddColumn={(attributeName) => {
+						// Add the attribute to the root entity
+						if (builder.fetchQuery?.entity.id) {
+							builder.addAttributeByName(builder.fetchQuery.entity.id, attributeName);
+						}
+					}}
+					onAddRelatedColumns={(relatedColumns: RelatedEntityColumn[]) => {
+						// Add related entity columns - this requires creating link-entities
+						if (!builder.fetchQuery?.entity.id) return;
+
+						// Group by relationship to create link-entities
+						const byRelationship = new Map<string, RelatedEntityColumn[]>();
+						for (const col of relatedColumns) {
+							const key = col.relationship.SchemaName;
+							if (!byRelationship.has(key)) {
+								byRelationship.set(key, []);
+							}
+							byRelationship.get(key)!.push(col);
+						}
+
+						// For each relationship, find or create link-entity and add attributes
+						for (const [, cols] of byRelationship) {
+							const rel = cols[0].relationship;
+							const relType = cols[0].relationshipType;
+
+							let fromAttr: string;
+							let toAttr: string;
+							let relatedEntity: string;
+							let linkType: "inner" | "outer";
+							let relTypeForBuilder: "N1" | "1N";
+
+							if (relType === "N1") {
+								// For N:1 (Many-to-One) lookup relationships:
+								// - ReferencingAttribute = FK on current entity (e.g., primarycontactid on account)
+								// - ReferencedAttribute = PK on related entity (e.g., contactid on contact)
+								// In FetchXML link-entity:
+								// - from = attribute on the LINKED entity (the PK)
+								// - to = attribute on the PARENT entity (the FK)
+								fromAttr = rel.ReferencedAttribute; // PK on linked (contact.contactid)
+								toAttr = rel.ReferencingAttribute; // FK on parent (account.primarycontactid)
+								relatedEntity = rel.ReferencedEntity; // contact
+								linkType = "outer"; // N:1 typically use outer join to not filter parent records
+								relTypeForBuilder = "N1";
+							} else {
+								// For 1:N (One-to-Many) relationships:
+								// - ReferencingEntity = the related entity (the "many" side that has the FK)
+								// - ReferencedEntity = the current entity (the "one" side)
+								// - ReferencingAttribute = FK on the related entity
+								// - ReferencedAttribute = PK on the current entity
+								// In FetchXML link-entity:
+								// - from = FK on the LINKED entity (the FK to parent)
+								// - to = PK on the PARENT entity
+								fromAttr = rel.ReferencingAttribute; // FK on linked entity
+								toAttr = rel.ReferencedAttribute; // PK on parent (e.g., accountid)
+								relatedEntity = rel.ReferencingEntity; // The related entity (e.g., contact)
+								linkType = "outer"; // 1:N use outer join to include parent records without children
+								relTypeForBuilder = "1N";
+							}
+
+							// Check if link-entity already exists for this relationship
+							const existingLinkEntity = builder.fetchQuery.entity.links.find(
+								(le) => le.from === fromAttr && le.to === toAttr && le.name === relatedEntity
+							);
+
+							let linkEntityId: string;
+
+							if (existingLinkEntity) {
+								linkEntityId = existingLinkEntity.id;
+							} else {
+								// Create the link-entity with config - returns the ID immediately
+								linkEntityId = builder.addLinkEntityWithConfig(
+									builder.fetchQuery.entity.id,
+									relatedEntity,
+									fromAttr,
+									toAttr,
+									linkType,
+									relTypeForBuilder
+								);
+							}
+
+							// Add attributes to the link-entity using the ID
+							for (const col of cols) {
+								builder.addAttributeByName(linkEntityId, col.attribute.LogicalName);
+							}
+						}
+					}}
+					onSortChange={(data) => {
+						// Extract attribute name from columnId (may have entityName prefix or be an alias)
+						let attribute = data.columnId;
+						let entityName = data.entityName;
+
+						// If columnId contains a dot, it's a link-entity column (alias.attribute)
+						if (attribute.includes(".")) {
+							const parts = attribute.split(".");
+							entityName = parts[0];
+							attribute = parts[1];
+						}
+
+						// Handle lookup field naming (_attributename_value -> attributename)
+						if (attribute.startsWith("_") && attribute.endsWith("_value")) {
+							attribute = attribute.slice(1, -6);
+						}
+
+						// Check if this is an aliased column on root entity - need to find original attribute name
+						// FetchXML order-by uses the original attribute name, not the alias
+						if (!entityName && builder.fetchQuery?.entity?.attributes) {
+							const aliasedAttr = builder.fetchQuery.entity.attributes.find(
+								(a) => a.alias === attribute
+							);
+							if (aliasedAttr) {
+								attribute = aliasedAttr.name;
+							}
+						}
+
+						builder.setSort(
+							attribute,
+							data.direction === "descending",
+							data.isMultiSort,
+							entityName
+						);
+					}}
+					// Record action handlers
+					onOpenRecord={handleOpenRecord}
+					onCopyRecordUrl={handleCopyRecordUrl}
+					onDeleteRecords={handleDeleteRecords}
+					onBulkDeleteRecords={handleBulkDeleteRecords}
+					onRunSpecificWorkflow={handleRunSpecificWorkflow}
+					canDelete={recordActionPrivileges.canDelete}
+					canBulkDelete={recordActionPrivileges.canBulkDelete}
+					canRunWorkflow={recordActionPrivileges.canRunWorkflow}
+					onFetchWorkflows={handleFetchWorkflows}
+					isAggregateQuery={isAggregateQuery}
+					hasOneToManyRelationship={hasOneToManyRelationship}
+					onSelectionChange={handleSelectionChange}
+					getSelectedRecordIds={getSelectedRecordIds}
+					onOpenSettings={() => setSettingsDrawerOpen(true)}
+					displaySettings={displaySettings}
+				/>
+			</div>
+			{/* Delete Confirmation Dialog */}
+			<DeleteConfirmDialog
+				open={deleteDialogState.open}
+				recordName={deleteDialogState.recordName}
+				entityDisplayName={
+					entityMetadata?.DisplayName?.UserLocalizedLabel?.Label || entityLogicalName || "record"
+				}
+				recordCount={deleteDialogState.recordIds.length}
+				onClose={() => {
+					setDeleteDialogState({ open: false, recordIds: [] });
+					setDeleteProgress(null);
+				}}
+				onConfirm={handleConfirmDelete}
+				onProgress={deleteProgress ?? undefined}
+			/>
+			{/* Bulk Delete Dialog */}
+			<BulkDeleteDialog
+				open={bulkDeleteDialogState.open}
+				recordCount={bulkDeleteDialogState.recordIds.length}
+				entityDisplayName={
+					entityMetadata?.DisplayName?.UserLocalizedLabel?.Label || entityLogicalName || "records"
+				}
+				isAllRecords={bulkDeleteDialogState.isAllRecords}
+				totalViewRecords={bulkDeleteDialogState.totalViewRecords}
+				onClose={() => setBulkDeleteDialogState({ open: false, recordIds: [] })}
+				onConfirm={handleConfirmBulkDelete}
+			/>
+			{/* Workflow Picker Dialog */}
+			<WorkflowPickerDialog
+				open={workflowDialogState.open}
+				recordCount={workflowDialogState.recordIds.length}
+				entityDisplayName={
+					entityMetadata?.DisplayName?.UserLocalizedLabel?.Label || entityLogicalName || "records"
+				}
+				preSelectedWorkflow={workflowDialogState.preSelectedWorkflow}
+				onClose={() => setWorkflowDialogState({ open: false, recordIds: [] })}
+				onFetchWorkflows={handleFetchWorkflows}
+				onExecute={(workflow, onProgress) =>
+					handleExecuteWorkflow(workflow.workflowid, workflowDialogState.recordIds, onProgress)
+				}
+			/>
+			{/* Settings Drawer */}
+			<SettingsDrawer
+				open={settingsDrawerOpen}
+				settings={displaySettings}
+				onClose={() => setSettingsDrawerOpen(false)}
+				onSettingsChange={setDisplaySettings}
+			/>
+		</div>
+	);
+}