sf-metadata-selector 1.0.0

package/README.md

@@ -0,0 +1,268 @@
+# Salesforce Metadata Selector CLI
+
+> A beautiful, interactive Node.js CLI tool that helps you browse, select, and generate `package.xml` files for Salesforce metadata retrieval.
+
+It connects to your Salesforce org via the Salesforce CLI (`sf`), lists all available metadata components, and provides a dark-themed web interface (using Tailwind CSS + Monaco Editor) where you can:
+
+- 🔍 **Search and filter** metadata types and components in real-time
+- ✅ **Select/deselect** individual components or entire types
+- 💾 **Save and load** selections as JSON for reuse
+- 🎯 **Use wildcards** (`*`) for entire metadata types
+- 🎨 **Customize API version** dynamically
+- 📊 **Track selection counts** in real-time
+- ⌨️ **Keyboard shortcuts** for common actions
+- 🚫 **Filter namespaced** components (exclude by default, include with flag)
+- 📥 **Download** the final `package.xml` with one click
+
+## Screenshot
+![sf-metadata-sel](https://raw.githubusercontent.com/mchinnappan100/npmjs-images/main/sf-metadata-selector/sf-metadata-selector-1.png)
+
+## ✨ New Features
+
+### 🔍 Search & Filter
+- **Real-time search** across all metadata types and component names
+- **Highlight matching** components for easy visibility
+- **Auto-hide** non-matching items to focus your selection
+
+### 💾 Save & Load Selections
+- **Export selections** to JSON file for backup or sharing
+- **Import selections** to quickly restore previous work
+- Saves API version and wildcard preferences
+
+### 🎯 Wildcard Support
+- **Toggle wildcard mode** to use `*` for entire metadata types
+- Automatically uses `*` when all components of a type are selected
+- Reduces package.xml size for large deployments
+
+### 📊 Selection Counter
+- **Real-time counter** showing selected vs. total components
+- Helps track your selection progress
+- Updates instantly as you select/deselect
+
+### ⌨️ Keyboard Shortcuts
+- `Ctrl+S` / `Cmd+S` - Download package.xml
+- Easy navigation with keyboard accessibility
+
+### 🎨 Custom API Version
+- **Editable API version** field (defaults to 60.0 or your specified version)
+- Updates package.xml in real-time
+- Supports all Salesforce API versions
+
+### 📈 Progress Indicator
+- Shows percentage progress while fetching metadata
+- Better feedback during long-running operations
+
+## 📋 Features
+
+- Lists all metadata types using `sf org list metadata-types`
+- Fetches components per type with `sf org list metadata`
+- **Dark theme** UI with Monaco Editor for real-time `package.xml` preview
+- **Per-type** Select All / Deselect All buttons
+- Global Select All / Deselect All
+- **Namespaced components filtering** (exclude by default, include with `--include-namespaced`)
+- Prevents `ENOBUFS` errors with increased buffer sizes
+- Generates a standalone HTML file
+
+## 🔧 Requirements
+
+- **Node.js** ≥ 16
+- **[Salesforce CLI (`sf`)](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm)** installed and authenticated
+- **npm** to install dependencies
+
+## 📦 Installation
+
+```bash
+npm install -g sf-extract-pkg
+
+```
+
+## 🚀 Usage
+
+### Basic Usage
+```bash
+# Excludes namespaced components by default
+./sf-metadata-ui.js -o myOrgAlias
+
+# Include namespaced components (managed package items, etc.)
+./sf-metadata-ui.js -o myOrgAlias --include-namespaced
+
+# Specify API version
+./sf-metadata-ui.js -o myOrgAlias --api-version 65.0
+
+# Custom output filename
+./sf-metadata-ui.js -o myOrgAlias --output my-selector.html
+
+# Using username instead of alias
+./sf-metadata-ui.js -o user@example.com.mySandbox
+```
+
+### Command Options
+```
+Options:
+  -o, --org <alias|username>     Salesforce org alias or username (required)
+  --include-namespaced           Include components with namespace prefix
+  --api-version <version>        API version for package.xml (default: 60.0)
+  --output <filename>            Output HTML filename (default: sf-metadata-selector.html)
+  -h, --help                     Display help for command
+```
+
+## 📖 How It Works
+
+1. **Connects** to your org using `sf org display`
+2. **Discovers** metadata types with `sf org list metadata-types`
+3. **Lists** components for each type with `sf org list metadata` (with progress indicator)
+4. **Filters** out namespaced components unless `--include-namespaced` is used
+5. **Generates** a rich HTML interface:
+   - **Left panel**: searchable metadata types + checkboxes + controls
+   - **Right panel**: Monaco Editor showing real-time `package.xml`
+6. **Download** button creates `package.xml` ready for deployment
+
+## 🎯 Usage Tips
+
+### Searching
+- Type in the search box to filter by metadata type or component name
+- Matching items are highlighted
+- Non-matching items are hidden
+
+### Saving Selections
+1. Select your desired components
+2. Click **💾 Save** button
+3. Save the JSON file to your computer
+4. Later, click **📂 Load** to restore selections
+
+### Using Wildcards
+1. Select all components you want for a metadata type
+2. Enable **"Use wildcards (*) for all"** checkbox
+3. Types with all components selected will use `*` instead of listing each member
+4. Great for CustomObject, ApexClass, etc.
+
+### Keyboard Navigation
+- Use `Tab` to navigate between controls
+- `Space` to toggle checkboxes
+- `Ctrl+S` (or `Cmd+S` on Mac) to download package.xml
+
+## 📄 Example Generated package.xml
+
+### Without Wildcards
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<Package xmlns="http://soap.sforce.com/2006/04/metadata">
+  <types>
+    <members>Account</members>
+    <members>Contact</members>
+    <members>CustomObject__c</members>
+    <name>CustomObject</name>
+  </types>
+  <types>
+    <members>MyController</members>
+    <members>MyUtility</members>
+    <name>ApexClass</name>
+  </types>
+  <version>64.0</version>
+</Package>
+```
+
+### With Wildcards (all components selected)
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<Package xmlns="http://soap.sforce.com/2006/04/metadata">
+  <types>
+    <members>*</members>
+    <name>CustomObject</name>
+  </types>
+  <types>
+    <members>*</members>
+    <name>ApexClass</name>
+  </types>
+  <version>60.0</version>
+</Package>
+```
+
+## 🛠️ Troubleshooting
+
+### ENOBUFS Error
+Already mitigated with larger `maxBuffer` (10–20 MB). If still occurring on very large orgs:
+- Use `--include-namespaced false` to reduce component count
+- Split retrieval into multiple package.xml files
+- Increase buffer in the script if needed
+
+### No Components Shown
+- Ensure the org alias/username is authenticated: `sf org list`
+- Check that you have permissions to view metadata
+- Try running with `--include-namespaced` to see if components are namespaced
+
+### package.xml Not Updating
+- Refresh the HTML page
+- Check browser console (F12) for JavaScript errors
+- Ensure Monaco Editor loaded correctly
+
+### Command Not Found
+- Make sure `sf` CLI is installed and in your PATH
+- Run `sf --version` to verify installation
+- See [Salesforce CLI Setup Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm)
+
+### Search Not Working
+- Clear the search box to see all components
+- Search is case-insensitive
+- Try searching for partial names
+
+### Load Selection Failed
+- Ensure the JSON file is from this tool's Save feature
+- Check that the file isn't corrupted
+- Verify JSON syntax if manually edited
+
+## 🎨 UI Features
+
+### Left Panel
+- **Search box** - Real-time filtering
+- **Selection counter** - Shows X / Total selected
+- **Namespace indicator** - Shows if namespaced components are included/excluded
+- **Action buttons** - Select All, Deselect All, Save, Load
+- **Collapsible sections** - Click to expand/collapse metadata types
+- **Per-type controls** - Select/Deselect All for each type
+- **Highlight on search** - Matching items highlighted in blue
+
+### Right Panel
+- **API Version input** - Change version on the fly
+- **Wildcard toggle** - Enable/disable wildcard mode
+- **Monaco Editor** - Syntax-highlighted XML editor
+- **Download button** - One-click package.xml download
+- **Keyboard hint** - Shows Ctrl+S shortcut
+
+## 🔮 Future Enhancements
+
+Potential features for future versions:
+- [ ] **Metadata comparison** between orgs
+- [ ] **Dependency analysis** to show related components
+- [ ] **Multiple package.xml** generation (e.g., split by feature)
+- [ ] **Recent selections** history
+- [ ] **Preset filters** (e.g., "All Apex", "All Objects")
+- [ ] **Diff view** against existing package.xml
+- [ ] **Cloud storage** integration for selections
+- [ ] **Batch operations** across multiple orgs
+- [ ] **Component descriptions** on hover
+
+
+### Testing
+```bash
+# Test with your org
+./sf-metadata-ui.js -o yourOrgAlias
+
+# Test with different options
+./sf-metadata-ui.js -o yourOrg --include-namespaced --api-version 59.0
+```
+
+
+## 📄 License
+
+MIT License - see LICENSE file for details
+
+---
+
+**Built with ❤️ for Salesforce developers**
+
+## 🔗 Useful Links
+
+- [Salesforce CLI Documentation](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference.htm)
+- [Metadata API Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.api_meta.meta/api_meta/)
+- [Package.xml Reference](https://developer.salesforce.com/docs/atlas.en-us.api_meta.meta/api_meta/meta_deploy.htm)

package/index.js

@@ -0,0 +1,673 @@
+#!/usr/bin/env node
+
+const { program } = require('commander');
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const { openResource } = require('open-resource');
+
+program
+  .name('sf-metadata-ui')
+  .description('Generate an interactive HTML page to select metadata and build package.xml')
+  .requiredOption('-o, --org <alias|username>', 'Salesforce org alias or username')
+  .option('--include-namespaced', 'Include components with namespace prefix (default: exclude them)')
+  .option('--api-version <version>', 'API version for package.xml (default: 64.0)', '64.0')
+  .option('--output <filename>', 'Output HTML filename (default: sf-metadata-selector.html)', 'sf-metadata-selector.html')
+  .parse();
+
+const options = program.opts();
+const org = options.org;
+const includeNamespaced = !!options.includeNamespaced;
+const apiVersion = options.apiVersion;
+const outputFile = options.output;
+
+async function main() {
+  try {
+    console.log(`Fetching org info for: ${org} ...`);
+
+    const orgInfoRaw = execSync(
+      `sf org display --target-org "${org}" --json`,
+      { encoding: 'utf-8', maxBuffer: 10 * 1024 * 1024 }
+    );
+    const orgInfo = JSON.parse(orgInfoRaw).result;
+
+    console.log(`Connected to: ${orgInfo.alias || orgInfo.username} (${orgInfo.instanceUrl})`);
+
+    console.log('Listing available metadata types...');
+    const typesCmd = `sf org list metadata-types --target-org "${org}" --json`;
+    const typesRaw = execSync(typesCmd, {
+      encoding: 'utf-8',
+      maxBuffer: 10 * 1024 * 1024
+    });
+    const typesData = JSON.parse(typesRaw);
+
+    let metadataTypes = [];
+
+    if (typesData.result && Array.isArray(typesData.result)) {
+      metadataTypes = typesData.result.map(item => item.metadataName || item.name || item.xmlName);
+    } else if (Array.isArray(typesData)) {
+      metadataTypes = typesData.map(item => item.metadataName || item.name || item.xmlName);
+    } else if (typesData.metadataObjects) {
+      metadataTypes = typesData.metadataObjects.map(obj => obj.xmlName);
+    } else {
+      console.warn('Unexpected format for metadata types. Using fallback list.');
+      metadataTypes = getFallbackMetadataTypes();
+    }
+
+    metadataTypes = [...new Set(metadataTypes.filter(t => t && typeof t === 'string'))];
+
+    console.log(`Found ${metadataTypes.length} metadata types`);
+
+    const components = [];
+    const totalTypes = metadataTypes.length;
+    let processedTypes = 0;
+
+    for (const type of metadataTypes.sort()) {
+      try {
+        processedTypes++;
+        const progress = Math.round((processedTypes / totalTypes) * 100);
+        console.log(`[${progress}%] Listing components for ${type} ...`);
+        
+        const listCmd = `sf org list metadata --metadata-type "${type}" --target-org "${org}" --json`;
+        const listRaw = execSync(listCmd, {
+          encoding: 'utf-8',
+          maxBuffer: 20 * 1024 * 1024
+        });
+        const listData = JSON.parse(listRaw);
+
+        let items = [];
+
+        if (listData.result && Array.isArray(listData.result)) {
+          items = listData.result;
+        } else if (Array.isArray(listData)) {
+          items = listData;
+        }
+
+        items.forEach(item => {
+          const fullName = item.fullName || item.fullname || item.name;
+          if (fullName && (includeNamespaced || !hasNamespace(fullName))) {
+            components.push({ type, fullName });
+          }
+        });
+      } catch (err) {
+        const msg = err.message || err.toString();
+        console.warn(`Skipping ${type} — ${msg.split('\n')[0] || 'error'}`);
+      }
+    }
+
+    components.sort((a, b) =>
+      a.type.localeCompare(b.type) || a.fullName.localeCompare(b.fullName)
+    );
+
+    console.log(`Found ${components.length} metadata components (namespaced: ${includeNamespaced ? 'included' : 'excluded'})`);
+
+    const html = generateHtml(components, includeNamespaced, apiVersion, orgInfo);
+
+    fs.writeFileSync(outputFile, html, 'utf-8');
+
+    console.log(`\nSuccess! Generated file:`);
+    console.log(`→ ${path.resolve(outputFile)}`);
+    console.log('Open it in your browser to select components and build package.xml');
+    
+    try {
+      openResource(outputFile);
+    } catch (err) {
+      console.log('Could not auto-open file. Please open it manually.');
+    }
+
+  } catch (err) {
+    console.error('Error occurred:');
+    console.error(err.message);
+    if (err.stderr) console.error('stderr:', err.stderr);
+    if (err.stdout) console.error('stdout:', err.stdout);
+    process.exit(1);
+  }
+}
+
+function hasNamespace(name) {
+  return /([a-zA-Z0-9]+__)[\w]+/.test(name);
+}
+
+function getFallbackMetadataTypes() {
+  return [
+    'ApexClass', 'ApexComponent', 'ApexPage', 'ApexTrigger',
+    'AuraDefinitionBundle', 'CustomObject', 'CustomField',
+    'CustomLabel', 'CustomMetadata', 'CustomTab', 'FlexiPage',
+    'LightningComponentBundle', 'Profile', 'PermissionSet',
+    'StaticResource', 'Layout', 'RecordType', 'ValidationRule',
+    'Flow', 'FlowDefinition', 'EmailTemplate', 'ReportType',
+    'Report', 'Dashboard', 'ListView', 'CustomApplication',
+    'CompactLayout', 'QuickAction', 'Territory2Type'
+  ];
+}
+
+function generateHtml(components, includeNamespaced, apiVersion, orgInfo) {
+  const groups = {};
+  components.forEach(c => {
+    if (!groups[c.type]) groups[c.type] = [];
+    groups[c.type].push(c.fullName);
+  });
+
+  const orgName = orgInfo.alias || orgInfo.username;
+
+  return `<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Salesforce Metadata Selector - ${orgName}</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="icon" type="image/x-icon"
+        href="https://mohan-chinnappan-n5.github.io/dfv/img/mc_favIcon.ico" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script>
+  <style>
+    body { background: #111827; color: #e5e7eb; font-family: ui-sans-serif, system-ui, sans-serif; }
+    details summary::-webkit-details-marker { display: none; }
+    details summary::before { content: '▶ '; transition: transform 0.2s; display: inline-block; }
+    details[open] summary::before { content: '▼ '; transform: rotate(0deg); }
+    .highlight { 
+      background-color: rgba(59, 130, 246, 0.25); 
+      animation: highlightPulse 0.3s ease-in-out;
+    }
+    @keyframes highlightPulse {
+      0%, 100% { background-color: rgba(59, 130, 246, 0.25); }
+      50% { background-color: rgba(59, 130, 246, 0.4); }
+    }
+    #search-box:focus {
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+    }
+    button {
+      transition: all 0.2s ease-in-out;
+    }
+    button:active {
+      transform: scale(0.98);
+    }
+    .metadata-type-summary {
+      transition: background-color 0.2s ease-in-out;
+    }
+  </style>
+</head>
+<body class="min-h-screen flex flex-col">
+  <!-- Enhanced Header -->
+  <header class="bg-gradient-to-r from-blue-900 to-blue-800 border-b border-blue-700 px-6 py-4 shadow-lg">
+    <div class="max-w-screen-2xl mx-auto">
+      <div class="flex items-center justify-between">
+        <!-- Title Section -->
+        <div class="flex items-center space-x-4">
+          <div class="flex items-center justify-center w-10 h-10 bg-blue-600 rounded-lg shadow-md">
+            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
+            </svg>
+          </div>
+          <div>
+            <h1 class="text-xl font-bold text-white">Salesforce Metadata Selector</h1>
+            <p class="text-xs text-blue-200 mt-0.5">Generate package.xml for deployment</p>
+          </div>
+        </div>
+        
+        <!-- Org Info Badge -->
+        <div class="flex items-center space-x-3">
+          <div class="text-right hidden sm:block">
+            <p class="text-xs text-blue-200">Connected Org</p>
+            <p style='display:none;' class="text-sm font-semibold text-white">${orgName}</p>
+          </div>
+          <div class="bg-blue-700 rounded-full px-4 py-2 border border-blue-600">
+            <span class="text-xs font-mono text-blue-100">${orgName}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="flex flex-1 gap-6 overflow-hidden p-6">
+    <!-- Left Panel: Component Selection -->
+    <div class="w-2/5 bg-gray-900 rounded-xl p-5 overflow-auto border border-gray-700 flex flex-col">
+      <!-- Search Box -->
+      <div class="mb-4 relative">
+        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+          </svg>
+        </div>
+        <input 
+          type="text" 
+          id="search-box" 
+          placeholder="Search metadata types or components..." 
+          class="w-full pl-10 pr-4 py-2.5 bg-gray-800 border border-gray-600 rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-all"
+        />
+      </div>
+
+      <!-- Info Bar -->
+      <div class="mb-4 bg-gray-800 rounded-lg p-3 border border-gray-700">
+        <div class="flex justify-between items-center text-sm">
+          <div class="flex items-center space-x-2">
+            <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+            </svg>
+            <span class="text-gray-400">Selection:</span>
+            <span class="font-bold text-blue-400" id="selected-count">0</span>
+            <span class="text-gray-500">/</span>
+            <span class="text-gray-300" id="total-count">${components.length}</span>
+          </div>
+          <div class="flex items-center space-x-2">
+            <svg class="w-4 h-4 ${includeNamespaced ? 'text-green-400' : 'text-orange-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+            </svg>
+            <span class="text-gray-400">Namespaced:</span>
+            <span class="font-medium ${includeNamespaced ? 'text-green-400' : 'text-orange-400'}">
+              ${includeNamespaced ? 'Included' : 'Excluded'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="mb-5 pb-4 border-b border-gray-700">
+        <div class="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-3">
+          <!-- Selection Controls -->
+          <div class="flex items-center gap-2">
+            <button id="select-all" class="flex-1 sm:flex-none bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+              </svg>
+              Select All
+            </button>
+            <button id="deselect-all" class="flex-1 sm:flex-none bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+              </svg>
+              Deselect All
+            </button>
+          </div>
+          
+          <!-- File Operations -->
+          <div class="flex items-center gap-2">
+            <button id="save-selection" class="flex-1 sm:flex-none bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2" title="Save selection to JSON">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
+              </svg>
+              Save
+            </button>
+            <button id="load-selection" class="flex-1 sm:flex-none bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2" title="Load selection from JSON">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+              </svg>
+              Load
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Components List -->
+      <div id="components" class="flex-1 overflow-auto"></div>
+    </div>
+
+    <!-- Right Panel: XML Editor -->
+    <div class="w-3/5 flex flex-col bg-gray-900 rounded-xl border border-gray-700 overflow-hidden shadow-xl">
+      <!-- API Version & Controls Header -->
+      <div class="bg-gray-800 border-b border-gray-700 px-5 py-3">
+        <div class="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-3">
+          <!-- API Version -->
+          <div class="flex items-center space-x-3">
+            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+            </svg>
+            <label class="text-sm font-medium text-gray-300">API Version:</label>
+            <input 
+              type="text" 
+              id="api-version" 
+              value="${apiVersion}" 
+              class="w-24 px-3 py-1.5 bg-gray-900 border border-gray-600 rounded-lg text-sm font-mono focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
+              placeholder="64.0"
+            />
+          </div>
+          
+          <!-- Wildcard Toggle -->
+          <div class="flex items-center space-x-2 bg-gray-900 rounded-lg px-4 py-2 border border-gray-700">
+            <input type="checkbox" id="use-wildcards" class="w-4 h-4 accent-blue-500 rounded" />
+            <label for="use-wildcards" class="text-sm text-gray-300 cursor-pointer select-none flex items-center gap-2">
+              <svg class="w-4 h-4 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
+              </svg>
+              Use wildcards (*) for all
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- Monaco Editor -->
+      <div id="editor" class="flex-1"></div>
+
+      <!-- Download Section -->
+      <div class="bg-gray-800 border-t border-gray-700 px-5 py-4">
+        <div class="flex justify-between items-center">
+          <div class="flex items-center space-x-4 text-sm text-gray-400">
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+              </svg>
+              <span>Keyboard shortcut:</span>
+              <kbd class="px-2 py-1 bg-gray-900 rounded text-xs font-mono border border-gray-700">Ctrl+S</kbd>
+            </div>
+          </div>
+          <button id="download" class="bg-green-600 hover:bg-green-700 px-8 py-2.5 rounded-lg font-medium transition-all hover:shadow-lg hover:shadow-green-600/50 flex items-center gap-2">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+            </svg>
+            Download package.xml
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Hidden file input for loading -->
+  <input type="file" id="file-input" accept=".json" style="display: none;" />
+
+  <script>
+    const groups = ${JSON.stringify(groups, null, 2)};
+    const container = document.getElementById('components');
+    const searchBox = document.getElementById('search-box');
+    const selectedCountEl = document.getElementById('selected-count');
+    const totalCountEl = document.getElementById('total-count');
+    const apiVersionInput = document.getElementById('api-version');
+    const useWildcardsCheckbox = document.getElementById('use-wildcards');
+
+    let allDetailsElements = [];
+
+    function hasNamespace(name) {
+      return /([a-zA-Z0-9]+__)\\w+/.test(name);
+    }
+
+    function updateCounts() {
+      const checked = document.querySelectorAll('#components input[type="checkbox"]:checked');
+      selectedCountEl.textContent = checked.length;
+    }
+
+    function updateXml() {
+      if (!editor) return;
+
+      const apiVersion = apiVersionInput.value || '64.0';
+      const useWildcards = useWildcardsCheckbox.checked;
+      const checked = document.querySelectorAll('#components input[type="checkbox"]:checked');
+      const typeMap = new Map();
+
+      checked.forEach(chk => {
+        const t = chk.dataset.type;
+        const m = chk.dataset.fullname;
+        if (t && m) {
+          if (!typeMap.has(t)) typeMap.set(t, []);
+          typeMap.get(t).push(m);
+        }
+      });
+
+      let xml = '<?xml version="1.0" encoding="UTF-8"?>\\n';
+      xml += '<Package xmlns="http://soap.sforce.com/2006/04/metadata">\\n';
+
+      [...typeMap.keys()].sort().forEach(t => {
+        xml += '  <types>\\n';
+        
+        if (useWildcards) {
+          // Check if all components of this type are selected
+          const totalForType = groups[t]?.length || 0;
+          const selectedForType = typeMap.get(t).length;
+          
+          if (totalForType > 0 && selectedForType === totalForType) {
+            xml += '    <members>*</members>\\n';
+          } else {
+            const members = typeMap.get(t).sort();
+            members.forEach(mem => {
+              xml += \`    <members>\${mem}</members>\\n\`;
+            });
+          }
+        } else {
+          const members = typeMap.get(t).sort();
+          members.forEach(mem => {
+            xml += \`    <members>\${mem}</members>\\n\`;
+          });
+        }
+        
+        xml += \`    <name>\${t}</name>\\n  </types>\\n\`;
+      });
+
+      xml += \`  <version>\${apiVersion}</version>\\n</Package>\`;
+
+      editor.setValue(xml);
+      updateCounts();
+    }
+
+    // Search/Filter functionality
+    searchBox.addEventListener('input', (e) => {
+      const query = e.target.value.toLowerCase();
+      
+      allDetailsElements.forEach(({ details, type, content }) => {
+        const typeMatches = type.toLowerCase().includes(query);
+        const labels = content.querySelectorAll('label');
+        let hasVisibleMembers = false;
+
+        labels.forEach(label => {
+          const memberName = label.querySelector('span').textContent.toLowerCase();
+          const matches = memberName.includes(query);
+          
+          label.style.display = (typeMatches || matches || query === '') ? 'flex' : 'none';
+          if (matches || typeMatches || query === '') hasVisibleMembers = true;
+        });
+
+        details.style.display = (hasVisibleMembers || query === '') ? 'block' : 'none';
+        
+        // Highlight matches
+        if (query !== '') {
+          labels.forEach(label => {
+            const span = label.querySelector('span');
+            const text = span.textContent;
+            if (text.toLowerCase().includes(query)) {
+              label.classList.add('highlight');
+            } else {
+              label.classList.remove('highlight');
+            }
+          });
+        } else {
+          labels.forEach(label => label.classList.remove('highlight'));
+        }
+      });
+    });
+
+    // Save selection to JSON
+    document.getElementById('save-selection').addEventListener('click', () => {
+      const checked = document.querySelectorAll('#components input[type="checkbox"]:checked');
+      const selection = {
+        apiVersion: apiVersionInput.value,
+        useWildcards: useWildcardsCheckbox.checked,
+        selectedComponents: Array.from(checked).map(chk => ({
+          type: chk.dataset.type,
+          fullName: chk.dataset.fullname
+        }))
+      };
+
+      const blob = new Blob([JSON.stringify(selection, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'metadata-selection.json';
+      a.click();
+      URL.revokeObjectURL(url);
+    });
+
+    // Load selection from JSON
+    document.getElementById('load-selection').addEventListener('click', () => {
+      document.getElementById('file-input').click();
+    });
+
+    document.getElementById('file-input').addEventListener('change', (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        try {
+          const selection = JSON.parse(event.target.result);
+          
+          // Deselect all first
+          document.querySelectorAll('#components input[type="checkbox"]').forEach(c => c.checked = false);
+          
+          // Apply loaded selection
+          if (selection.apiVersion) apiVersionInput.value = selection.apiVersion;
+          if (typeof selection.useWildcards === 'boolean') useWildcardsCheckbox.checked = selection.useWildcards;
+          
+          selection.selectedComponents.forEach(item => {
+            const checkbox = document.querySelector(
+              \`#components input[data-type="\${item.type}"][data-fullname="\${item.fullName}"]\`
+            );
+            if (checkbox) checkbox.checked = true;
+          });
+          
+          updateXml();
+          alert('Selection loaded successfully!');
+        } catch (err) {
+          alert('Error loading selection file: ' + err.message);
+        }
+      };
+      reader.readAsText(file);
+    });
+
+    // Render metadata types with per-type select/deselect
+    Object.keys(groups).sort().forEach(type => {
+      const members = groups[type];
+      if (members.length === 0) return;
+
+      const count = members.length;
+
+      const details = document.createElement('details');
+      details.className = 'mb-3';
+
+      const summary = document.createElement('summary');
+      summary.className = 'metadata-type-summary bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg cursor-pointer font-medium flex justify-between items-center group';
+
+      const left = document.createElement('span');
+      left.textContent = \`\${type} (\${count})\`;
+
+      const right = document.createElement('div');
+      right.className = 'space-x-2';
+      right.onclick = (e) => e.stopPropagation(); // Prevent details toggle
+
+      const selectAllBtn = document.createElement('button');
+      selectAllBtn.textContent = 'Select All';
+      selectAllBtn.className = 'text-xs bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded-md transition-colors opacity-0 group-hover:opacity-100';
+      selectAllBtn.type = 'button';
+
+      const deselectAllBtn = document.createElement('button');
+      deselectAllBtn.textContent = 'Deselect All';
+      deselectAllBtn.className = 'text-xs bg-red-600 hover:bg-red-500 px-3 py-1 rounded-md transition-colors opacity-0 group-hover:opacity-100';
+      deselectAllBtn.type = 'button';
+
+      right.appendChild(selectAllBtn);
+      right.appendChild(deselectAllBtn);
+
+      summary.appendChild(left);
+      summary.appendChild(right);
+
+      const content = document.createElement('div');
+      content.className = 'pl-6 pt-2 max-h-80 overflow-auto';
+
+      members.sort().forEach(name => {
+        const label = document.createElement('label');
+        label.className = 'flex items-center py-1 hover:bg-gray-800 rounded px-2 cursor-pointer text-sm';
+
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.className = 'mr-3 accent-blue-500';
+        checkbox.dataset.type = type;
+        checkbox.dataset.fullname = name;
+
+        const span = document.createElement('span');
+        span.className = 'font-mono ' + (hasNamespace(name) ? 'text-purple-400' : '');
+        span.textContent = name;
+
+        label.appendChild(checkbox);
+        label.appendChild(span);
+        content.appendChild(label);
+      });
+
+      details.appendChild(summary);
+      details.appendChild(content);
+      container.appendChild(details);
+
+      // Store reference for search
+      allDetailsElements.push({ details, type, content });
+
+      // Per-type select / deselect
+      selectAllBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        content.querySelectorAll('input[type="checkbox"]:not([style*="display: none"])').forEach(cb => cb.checked = true);
+        updateXml();
+      });
+
+      deselectAllBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        content.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
+        updateXml();
+      });
+    });
+
+    // Event delegation for checkbox changes
+    container.addEventListener('change', (e) => {
+      if (e.target.type === 'checkbox') {
+        updateXml();
+      }
+    });
+
+    // API version and wildcard changes
+    apiVersionInput.addEventListener('input', updateXml);
+    useWildcardsCheckbox.addEventListener('change', updateXml);
+
+    // Monaco Editor
+    require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs' }});
+    let editor;
+
+    require(['vs/editor/editor.main'], () => {
+      editor = monaco.editor.create(document.getElementById('editor'), {
+        value: '<?xml version="1.0" encoding="UTF-8"?>\\n<Package xmlns="http://soap.sforce.com/2006/04/metadata">\\n  <!-- Select components → -->\\n  <version>${apiVersion}</version>\\n</Package>',
+        language: 'xml',
+        theme: 'vs-dark',
+        automaticLayout: true,
+        minimap: { enabled: false },
+        fontSize: 13,
+        lineNumbers: 'on'
+      });
+      
+      // Keyboard shortcut for download (Ctrl+S)
+      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+        document.getElementById('download').click();
+      });
+      
+      updateXml();
+    });
+
+    // Global Select All / Deselect All
+    document.getElementById('select-all').addEventListener('click', () => {
+      document.querySelectorAll('#components input[type="checkbox"]:not([style*="display: none"])').forEach(c => c.checked = true);
+      updateXml();
+    });
+
+    document.getElementById('deselect-all').addEventListener('click', () => {
+      document.querySelectorAll('#components input[type="checkbox"]').forEach(c => c.checked = false);
+      updateXml();
+    });
+
+    // Download
+    document.getElementById('download').addEventListener('click', () => {
+      if (!editor) return;
+      const blob = new Blob([editor.getValue()], { type: 'application/xml' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'package.xml';
+      a.click();
+      URL.revokeObjectURL(url);
+    });
+  </script>
+</body>
+</html>`;
+}
+
+main();

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "sf-metadata-selector",
+  "version": "1.0.0",
+  "description": "A beautiful, interactive CLI tool for browsing, selecting, and generating package.xml files for Salesforce metadata retrieval with search, save/load, and wildcard support",
+  "keywords": [
+    "salesforce",
+    "sfdx",
+    "sf-cli",
+    "metadata",
+    "package-xml",
+    "deployment",
+    "devops",
+    "cli",
+    "interactive",
+    "ui",
+    "developer-tools"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "Mohan Chinnappan"
+  },
+  "main": "index.js",
+  "bin": {
+    "sf-metadata-ui": "./index.js",
+    "sf-pkg-builder": "./index.js",
+    "sfmd": "./index.js"
+  },
+  "scripts": {
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "commander": "^11.1.0",
+    "open-resource": "^2.0.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.57.0",
+    "prettier": "^3.2.5"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
+  },
+  "os": [
+    "darwin",
+    "linux",
+    "win32"
+  ],
+  "preferGlobal": true,
+  "files": [
+    "index.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}