Implement functional tree preview for ETL XML editor

[Codex]

Tree view tab in the ETL editor only displayed “Tree view not implemented,” leaving users without a structured preview of generated XML.

• Tree rendering: Replaced placeholder with DOMParser-driven tree builder that renders elements, attributes, and text nodes as a nested list, refreshed when the preview tab is active.
• Styling: Added minimal tree-specific styles for tags, attributes, and text to match the editor’s look while keeping changes localized.

Example (tree construction):

function updateTreeView(rawXml) {
  const doc = new DOMParser().parseFromString(rawXml, "application/xml");
  const rootList = document.createElement('ul');
  rootList.appendChild(createTreeNode(doc.documentElement));
  document.getElementById('treeView').innerHTML = '';
  document.getElementById('treeView').appendChild(rootList);
}

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Tree view in ETL Editor is missing</issue_title>
<issue_description>In ETL Editor.html you get the following message when you click on "Tree view":

Tree view not implemented.

</issue_description>

Comments on the Issue (you are @codex[agent] in this section)

• Fixes Tree view in ETL Editor is missing #4

[Copilot]

Pull request overview

This PR implements the previously-missing “Tree View” tab in ETL Editor.html, replacing the placeholder with a DOMParser-based XML tree renderer and adding localized styling so users can preview the generated XML structure in a nested, readable format.

Changes:

• Added updateTreeView() + createTreeNode() to parse generated XML and render it as a nested <ul>/<li> tree when the Tree View tab is active.
• Updated tab switching / refresh logic so the tree is rebuilt from the latest generated XML.
• Added minimal .tree-view styles for tag, attribute, and text-node rendering.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.