@darkwheel/pptb-solution-explorer 0.2.0

package/README.md

@@ -0,0 +1,29 @@
+# Solution Explorer
+
+A comprehensive Power Platform Tool Box tool for exploring and managing Dataverse solutions.
+
+## Features
+
+- **Solution Listing**: View all solutions in your Dataverse environment
+- **Detailed Metadata**: See comprehensive information about each solution including:
+  - Solution name, version, and description
+  - Publisher information
+  - Installation and modification dates
+  - Managed vs. unmanaged status
+  - Solution components count
+  - Package type and version information
+- **Publisher Details**: View publisher information including prefix and option value prefix
+- **Filter & Search**: Easily find specific solutions
+- **Management Ready**: Quick access to solution metadata for administrative tasks
+
+## Usage
+
+1. Connect to your Dataverse environment in Power Platform Tool Box
+2. Open the Solution Explorer tool
+3. Click "Load Solutions" to retrieve all solutions
+4. Click on any solution to view detailed information
+
+## Requirements
+
+- Power Platform Tool Box
+- Dataverse connection with appropriate permissions to read solution metadata

package/dist/app.js

@@ -0,0 +1,612 @@
+"use strict";
+/// <reference types="@pptb/types" />
+/**
+ * Solution Explorer Tool for Power Platform Tool Box
+ *
+ * This tool helps administrators explore and manage Dataverse solutions
+ * with comprehensive metadata including publisher info, versions, deployment details, etc.
+ */
+// Global API references
+const toolbox = window.toolboxAPI;
+const dataverse = window.dataverseAPI;
+// Application state
+let currentConnection = null;
+let allSolutions = [];
+let filteredSolutions = [];
+let selectedSolutionId = null;
+let currentLimit = '100';
+/**
+ * Initialize the application
+ */
+async function initialize() {
+    log('Solution Explorer initialized', 'info');
+    try {
+        // Check connection
+        await refreshConnection();
+        // Setup event handlers
+        setupEventHandlers();
+        // Subscribe to events
+        subscribeToEvents();
+        log('Tool initialized successfully', 'success');
+    }
+    catch (error) {
+        log(`Initialization error: ${error.message}`, 'error');
+        await toolbox.utils.showNotification({
+            title: 'Initialization Error',
+            body: error.message,
+            type: 'error',
+            duration: 3000
+        });
+    }
+}
+/**
+ * Refresh connection information
+ */
+async function refreshConnection() {
+    try {
+        currentConnection = await toolbox.connections.getActiveConnection();
+        // Update page title with connection name
+        const titleElement = document.getElementById('page-title');
+        if (titleElement) {
+            if (currentConnection) {
+                titleElement.textContent = `📦 Solution Explorer (${currentConnection.name})`;
+                log(`Connected to: ${currentConnection.name}`, 'success');
+            }
+            else {
+                titleElement.textContent = '📦 Solution Explorer';
+                log('No active connection', 'warning');
+            }
+        }
+    }
+    catch (error) {
+        log(`Error refreshing connection: ${error.message}`, 'error');
+    }
+}
+/**
+ * Subscribe to platform events
+ */
+function subscribeToEvents() {
+    toolbox.events.on((event, payload) => {
+        switch (payload.event) {
+            case 'connection:updated':
+            case 'connection:created':
+                refreshConnection();
+                break;
+            case 'connection:deleted':
+                currentConnection = null;
+                refreshConnection();
+                break;
+        }
+    });
+}
+/**
+ * Setup UI event handlers
+ */
+function setupEventHandlers() {
+    // Load solutions button
+    document.getElementById('load-solutions-btn')?.addEventListener('click', loadSolutions);
+    // Refresh button
+    document.getElementById('refresh-btn')?.addEventListener('click', loadSolutions);
+    // Clear log button
+    document.getElementById('clear-log-btn')?.addEventListener('click', clearLog);
+    // Search input
+    const searchInput = document.getElementById('search-input');
+    searchInput?.addEventListener('input', applyFilters);
+    // Filter selects
+    document.getElementById('type-filter')?.addEventListener('change', applyFilters);
+    document.getElementById('visibility-filter')?.addEventListener('change', applyFilters);
+    // Limit filter - triggers reload
+    document.getElementById('limit-filter')?.addEventListener('change', (e) => {
+        currentLimit = e.target.value;
+        loadSolutions();
+    });
+}
+/**
+ * Load all solutions from Dataverse
+ */
+async function loadSolutions() {
+    if (!currentConnection) {
+        await toolbox.utils.showNotification({
+            title: 'No Connection',
+            body: 'Please connect to a Dataverse environment',
+            type: 'warning',
+            duration: 3000
+        });
+        return;
+    }
+    try {
+        const loadBtn = document.getElementById('load-solutions-btn');
+        if (loadBtn)
+            loadBtn.disabled = true;
+        log('Loading solutions...', 'info');
+        // Show loading
+        await toolbox.utils.showLoading('Loading solutions...');
+        // FetchXML to get solutions with publisher information (dynamically set top value)
+        const topAttribute = currentLimit === 'all' ? '' : `top="${currentLimit}"`;
+        const fetchXml = `
+<fetch ${topAttribute}>
+    <entity name="solution">
+        <attribute name="solutionid" />
+        <attribute name="uniquename" />
+        <attribute name="friendlyname" />
+        <attribute name="version" />
+        <attribute name="description" />
+        <attribute name="installedon" />
+        <attribute name="createdon" />
+        <attribute name="modifiedon" />
+        <attribute name="ismanaged" />
+        <attribute name="isvisible" />
+        <attribute name="solutionpackageversion" />
+        <attribute name="solutiontype" />
+        <attribute name="publisherid" />
+        <link-entity name="publisher" from="publisherid" to="publisherid" alias="publisher">
+            <attribute name="friendlyname" />
+            <attribute name="uniquename" />
+            <attribute name="customizationprefix" />
+            <attribute name="customizationoptionvalueprefix" />
+            <attribute name="description" />
+        </link-entity>
+        <link-entity name="systemuser" from="systemuserid" to="modifiedby" alias="modifiedby">
+            <attribute name="fullname" />
+            <attribute name="domainname" />
+        </link-entity>
+        <filter>
+            <condition attribute="isvisible" operator="eq" value="1" />
+        </filter>
+        <order attribute="installedon" descending="true" />
+    </entity>
+</fetch>`;
+        const result = await dataverse.fetchXmlQuery(fetchXml);
+        allSolutions = result.value;
+        log(`Loaded ${allSolutions.length} solution(s)`, 'success');
+        // Apply filters
+        applyFilters();
+        // Show solutions section
+        const solutionsSection = document.getElementById('solutions-section');
+        if (solutionsSection)
+            solutionsSection.style.display = 'block';
+        await toolbox.utils.showNotification({
+            title: 'Solutions Loaded',
+            body: `Successfully loaded ${allSolutions.length} solution(s)`,
+            type: 'success',
+            duration: 3000
+        });
+    }
+    catch (error) {
+        log(`Error loading solutions: ${error.message}`, 'error');
+        await toolbox.utils.showNotification({
+            title: 'Load Failed',
+            body: error.message,
+            type: 'error',
+            duration: 5000
+        });
+    }
+    finally {
+        await toolbox.utils.hideLoading();
+        const loadBtn = document.getElementById('load-solutions-btn');
+        if (loadBtn)
+            loadBtn.disabled = false;
+    }
+}
+/**
+ * Apply filters to solutions list
+ */
+function applyFilters() {
+    const searchInput = document.getElementById('search-input');
+    const typeFilter = document.getElementById('type-filter');
+    const visibilityFilter = document.getElementById('visibility-filter');
+    const searchTerm = searchInput?.value.toLowerCase() || '';
+    const typeValue = typeFilter?.value || 'all';
+    const visibilityValue = visibilityFilter?.value || 'all';
+    filteredSolutions = allSolutions.filter(solution => {
+        // Search filter
+        const matchesSearch = !searchTerm ||
+            (solution.friendlyname || '').toLowerCase().includes(searchTerm) ||
+            (solution.uniquename || '').toLowerCase().includes(searchTerm) ||
+            (solution['publisher.friendlyname'] || '').toLowerCase().includes(searchTerm);
+        // Type filter
+        const matchesType = typeValue === 'all' ||
+            (typeValue === 'managed' && solution.ismanaged) ||
+            (typeValue === 'unmanaged' && !solution.ismanaged);
+        // Visibility filter
+        const matchesVisibility = visibilityValue === 'all' ||
+            (visibilityValue === 'visible' && solution.isvisible) ||
+            (visibilityValue === 'hidden' && !solution.isvisible);
+        return matchesSearch && matchesType && matchesVisibility;
+    });
+    displaySolutions();
+}
+/**
+ * Display solutions list
+ */
+function displaySolutions() {
+    const listDiv = document.getElementById('solutions-list');
+    const countDiv = document.getElementById('solutions-count');
+    if (!listDiv)
+        return;
+    if (countDiv) {
+        countDiv.textContent = `${filteredSolutions.length} solution(s) ${filteredSolutions.length !== allSolutions.length ? `(filtered from ${allSolutions.length})` : ''}`;
+    }
+    if (filteredSolutions.length === 0) {
+        listDiv.innerHTML = '<div class="empty-message">No solutions found matching your criteria</div>';
+        return;
+    }
+    listDiv.innerHTML = filteredSolutions.map(solution => {
+        const isManaged = solution.ismanaged;
+        const typeLabel = isManaged ? 'Managed' : 'Unmanaged';
+        const typeClass = isManaged ? 'managed' : 'unmanaged';
+        return `
+            <div class="solution-card ${typeClass}" data-solutionid="${solution.solutionid}">
+                <div class="solution-header">
+                    <div class="solution-name">${escapeHtml(solution.friendlyname || solution.uniquename || 'N/A')}</div>
+                    <span class="solution-type-badge ${typeClass}">${typeLabel}</span>
+                </div>
+                <div class="solution-meta">
+                    <div class="solution-version">v${escapeHtml(solution.version || '1.0.0.0')}</div>
+                    <div class="solution-publisher">${escapeHtml(solution['publisher.friendlyname'] || 'N/A')}</div>
+                </div>
+                <div class="solution-unique-name">${escapeHtml(solution.uniquename || 'N/A')}</div>
+            </div>
+        `;
+    }).join('');
+    // Add click handlers
+    document.querySelectorAll('.solution-card').forEach(card => {
+        card.addEventListener('click', () => {
+            const solutionId = card.getAttribute('data-solutionid');
+            if (solutionId) {
+                const solution = filteredSolutions.find(s => s.solutionid === solutionId);
+                if (solution) {
+                    selectSolution(solutionId, solution);
+                }
+            }
+        });
+    });
+}
+/**
+ * Select a solution and display details
+ */
+async function selectSolution(solutionId, solutionData) {
+    selectedSolutionId = solutionId;
+    // Update selected state
+    document.querySelectorAll('.solution-card').forEach(card => {
+        card.classList.remove('selected');
+        if (card.getAttribute('data-solutionid') === solutionId) {
+            card.classList.add('selected');
+        }
+    });
+    const detailsPanel = document.getElementById('solution-details-panel');
+    if (!detailsPanel)
+        return;
+    // Show loading state
+    detailsPanel.innerHTML = '<div class="loading-indicator">Loading solution details...</div>';
+    try {
+        // Get component count
+        const componentCount = await getSolutionComponentCount(solutionId);
+        // Get deployment history
+        const deploymentHistory = await getSolutionDeploymentHistory(solutionId);
+        // Display details
+        displaySolutionDetails(solutionData, componentCount, deploymentHistory);
+        log(`Selected solution: ${solutionData.friendlyname}`, 'info');
+    }
+    catch (error) {
+        log(`Error loading solution details: ${error.message}`, 'error');
+        detailsPanel.innerHTML = `<div class="empty-state"><p>Error loading details: ${error.message}</p></div>`;
+    }
+}
+/**
+ * Get solution component count
+ */
+async function getSolutionComponentCount(solutionId) {
+    try {
+        const fetchXml = `
+<fetch aggregate="true">
+    <entity name="solutioncomponent">
+        <attribute name="solutioncomponentid" alias="count" aggregate="count" />
+        <filter>
+            <condition attribute="solutionid" operator="eq" value="${solutionId}" />
+        </filter>
+    </entity>
+</fetch>`;
+        const result = await dataverse.fetchXmlQuery(fetchXml);
+        return parseInt(result.value[0]?.count || '0', 10);
+    }
+    catch (error) {
+        log(`Error getting component count: ${error.message}`, 'warning');
+        return 0;
+    }
+}
+/**
+ * Get deployment history for a solution
+ */
+async function getSolutionDeploymentHistory(solutionId) {
+    try {
+        const fetchXml = `
+<fetch top="20">
+    <entity name="importjob">
+        <attribute name="importjobid" />
+        <attribute name="solutionname" />
+        <attribute name="completedon" />
+        <attribute name="startedon" />
+        <attribute name="progress" />
+        <attribute name="createdonbehalfby" />
+        <attribute name="createdby" />
+        <attribute name="modifiedby" />
+        <filter>
+            <condition attribute="solutionid" operator="eq" value="${solutionId}" />
+        </filter>
+        <order attribute="completedon" descending="true" />
+    </entity>
+</fetch>`;
+        const result = await dataverse.fetchXmlQuery(fetchXml);
+        return result.value || [];
+    }
+    catch (error) {
+        log(`Error getting deployment history: ${error.message}`, 'warning');
+        return [];
+    }
+}
+/**
+ * Display solution details in the right panel
+ */
+function displaySolutionDetails(solution, componentCount, deploymentHistory = []) {
+    const detailsPanel = document.getElementById('solution-details-panel');
+    if (!detailsPanel)
+        return;
+    const isManaged = solution.ismanaged;
+    const typeLabel = isManaged ? 'Managed' : 'Unmanaged';
+    const typeClass = isManaged ? 'managed' : 'unmanaged';
+    detailsPanel.innerHTML = `
+        <div class="solution-details">
+            <div class="details-header">
+                <h3>${escapeHtml(solution.friendlyname || solution.uniquename || 'N/A')}</h3>
+                <span class="solution-type-badge ${typeClass}">${typeLabel}</span>
+            </div>
+            
+            <div class="details-section">
+                <h4>Basic Information</h4>
+                <table class="details-table">
+                    <tr>
+                        <td class="label">Display Name:</td>
+                        <td>${escapeHtml(solution.friendlyname || 'N/A')}</td>
+                    </tr>
+                    <tr>
+                        <td class="label">Unique Name:</td>
+                        <td><code>${escapeHtml(solution.uniquename || 'N/A')}</code></td>
+                    </tr>
+                    <tr>
+                        <td class="label">Version:</td>
+                        <td>${escapeHtml(solution.version || '1.0.0.0')}</td>
+                    </tr>
+                    <tr>
+                        <td class="label">Description:</td>
+                        <td>${escapeHtml(solution.description || 'No description provided')}</td>
+                    </tr>
+                    <tr>
+                        <td class="label">Solution ID:</td>
+                        <td><code>${escapeHtml(solution.solutionid || 'N/A')}</code></td>
+                    </tr>
+                </table>
+            </div>
+            
+            <div class="details-section">
+                <h4>Publisher Information</h4>
+                <table class="details-table">
+                    <tr>
+                        <td class="label">Publisher Name:</td>
+                        <td>${escapeHtml(solution['publisher.friendlyname'] || 'N/A')}</td>
+                    </tr>
+                    <tr>
+                        <td class="label">Publisher Unique Name:</td>
+                        <td><code>${escapeHtml(solution['publisher.uniquename'] || 'N/A')}</code></td>
+                    </tr>
+                    <tr>
+                        <td class="label">Customization Prefix:</td>
+                        <td><code>${escapeHtml(solution['publisher.customizationprefix'] || 'N/A')}</code></td>
+                    </tr>
+                    <tr>
+                        <td class="label">Option Value Prefix:</td>
+                        <td>${solution['publisher.customizationoptionvalueprefix'] !== null && solution['publisher.customizationoptionvalueprefix'] !== undefined ? solution['publisher.customizationoptionvalueprefix'] : 'N/A'}</td>
+                    </tr>
+                    ${solution['publisher.description'] ? `
+                    <tr>
+                        <td class="label">Publisher Description:</td>
+                        <td>${escapeHtml(solution['publisher.description'])}</td>
+                    </tr>
+                    ` : ''}
+                </table>
+            </div>
+            
+            <div class="details-section">
+                <h4>Installation & Deployment</h4>
+                <table class="details-table">
+                    <tr>
+                        <td class="label">Installed On:</td>
+                        <td>${solution.installedon ? formatDateTime(solution.installedon) : 'N/A'}</td>
+                    </tr>
+                    <tr>
+                        <td class="label">Created On:</td>
+                        <td>${solution.createdon ? formatDateTime(solution.createdon) : 'N/A'}</td>
+                    </tr>
+                    <tr>
+                        <td class="label">Modified On:</td>
+                        <td>${solution.modifiedon ? formatDateTime(solution.modifiedon) : 'N/A'}</td>
+                    </tr>
+                    <tr>
+                        <td class="label">Last Modified By:</td>
+                        <td>
+                            <div class="modifier-info">
+                                <div class="modifier-name">${escapeHtml(solution['modifiedby.fullname'] || 'N/A')}</div>
+                                ${solution['modifiedby.domainname'] ? `<div class="modifier-domain">${escapeHtml(solution['modifiedby.domainname'])}</div>` : ''}
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="label">Package Type:</td>
+                        <td>${isManaged ? 'Managed' : 'Unmanaged'}</td>
+                    </tr>
+                    <tr>
+                        <td class="label">Is Visible:</td>
+                        <td>${solution.isvisible ? 'Yes' : 'No'}</td>
+                    </tr>
+                    ${solution.solutionpackageversion ? `
+                    <tr>
+                        <td class="label">Package Version:</td>
+                        <td>${escapeHtml(solution.solutionpackageversion)}</td>
+                    </tr>
+                    ` : ''}
+                </table>
+            </div>
+            
+            <div class="details-section">
+                <h4>Components</h4>
+                <table class="details-table">
+                    <tr>
+                        <td class="label">Component Count:</td>
+                        <td><strong>${componentCount}</strong> component(s)</td>
+                    </tr>
+                </table>
+            </div>
+            
+            ${deploymentHistory.length > 0 ? `
+            <div class="details-section">
+                <h4>Deployment History</h4>
+                <div class="deployment-history">
+                    ${deploymentHistory.map((deployment, index) => {
+        const completedOn = deployment.completedon ? formatDateTime(deployment.completedon) : 'N/A';
+        const startedOn = deployment.startedon ? formatDateTime(deployment.startedon) : 'N/A';
+        const deployedBy = escapeHtml(deployment['_createdby_value@OData.Community.Display.V1.FormattedValue'] || 'System');
+        const progress = deployment.progress !== null && deployment.progress !== undefined ? Math.round(deployment.progress) : 100;
+        return `
+                        <div class="deployment-item">
+                            <div class="deployment-header">
+                                <div class="deployment-number">#${index + 1}</div>
+                                <div class="deployment-date">${completedOn}</div>
+                            </div>
+                            <div class="deployment-details">
+                                <div class="deployment-info">
+                                    <span class="label">Deployed By:</span>
+                                    <span class="value">${deployedBy}</span>
+                                </div>
+                                <div class="deployment-info">
+                                    <span class="label">Started:</span>
+                                    <span class="value">${startedOn}</span>
+                                </div>
+                                <div class="deployment-info">
+                                    <span class="label">Progress:</span>
+                                    <span class="value">${progress}%</span>
+                                </div>
+                            </div>
+                        </div>
+                        `;
+    }).join('')}
+                </div>
+            </div>
+            ` : ''}
+            
+            <div class="details-section">
+                <h4>Management Actions</h4>
+                <div class="action-buttons">
+                    <button class="btn btn-secondary btn-small" onclick="copySolutionId('${solution.solutionid}')">Copy Solution ID</button>
+                    <button class="btn btn-secondary btn-small" onclick="copySolutionUniqueName('${solution.uniquename}')">Copy Unique Name</button>
+                </div>
+            </div>
+        </div>
+    `;
+}
+/**
+ * Copy solution ID to clipboard
+ */
+async function copySolutionId(solutionId) {
+    try {
+        await toolbox.utils.copyToClipboard(solutionId);
+        await toolbox.utils.showNotification({
+            title: 'Copied',
+            body: 'Solution ID copied to clipboard',
+            type: 'success',
+            duration: 2000
+        });
+        log('Solution ID copied to clipboard', 'info');
+    }
+    catch (error) {
+        log(`Error copying to clipboard: ${error.message}`, 'error');
+    }
+}
+/**
+ * Copy solution unique name to clipboard
+ */
+async function copySolutionUniqueName(uniqueName) {
+    try {
+        await toolbox.utils.copyToClipboard(uniqueName);
+        await toolbox.utils.showNotification({
+            title: 'Copied',
+            body: 'Unique name copied to clipboard',
+            type: 'success',
+            duration: 2000
+        });
+        log('Unique name copied to clipboard', 'info');
+    }
+    catch (error) {
+        log(`Error copying to clipboard: ${error.message}`, 'error');
+    }
+}
+// Make functions globally available for onclick handlers
+window.copySolutionId = copySolutionId;
+window.copySolutionUniqueName = copySolutionUniqueName;
+/**
+ * Format date/time for display
+ */
+function formatDateTime(dateString) {
+    try {
+        const date = new Date(dateString);
+        return date.toLocaleString();
+    }
+    catch {
+        return dateString;
+    }
+}
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+/**
+ * Log message to event log
+ */
+function log(message, type = 'info') {
+    const logDiv = document.getElementById('event-log');
+    if (!logDiv)
+        return;
+    const timestamp = new Date().toLocaleTimeString();
+    const logEntry = document.createElement('div');
+    logEntry.className = `log-entry ${type}`;
+    logEntry.innerHTML = `
+        <span class="log-timestamp">[${timestamp}]</span>
+        <span>${message}</span>
+    `;
+    logDiv.insertBefore(logEntry, logDiv.firstChild);
+    // Keep only last 50 entries
+    while (logDiv.children.length > 50) {
+        logDiv.removeChild(logDiv.lastChild);
+    }
+    console.log(`[${type.toUpperCase()}] ${message}`);
+}
+/**
+ * Clear event log
+ */
+function clearLog() {
+    const logDiv = document.getElementById('event-log');
+    if (logDiv) {
+        logDiv.innerHTML = '';
+        log('Log cleared', 'info');
+    }
+}
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initialize);
+}
+else {
+    initialize();
+}

package/dist/index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Solution Explorer</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1 id="page-title">📦 Solution Explorer</h1>
+            <p class="subtitle">Explore and manage Dataverse solutions with comprehensive metadata</p>
+        </header>
+
+        <!-- Filters Section -->
+        <section class="card filters-section">
+            <h2>Filters</h2>
+            <div class="filter-controls">
+                <div class="filter-group">
+                    <label for="search-input">Search:</label>
+                    <input 
+                        type="text" 
+                        id="search-input" 
+                        class="search-input" 
+                        placeholder="Search by solution name, unique name, or publisher..."
+                    />
+                </div>
+                <div class="filter-group">
+                    <label for="type-filter">Type:</label>
+                    <select id="type-filter" class="filter-select">
+                        <option value="all">All Solutions</option>
+                        <option value="managed">Managed Only</option>
+                        <option value="unmanaged">Unmanaged Only</option>
+                    </select>
+                </div>
+                <div class="filter-group">
+                    <label for="visibility-filter">Visibility:</label>
+                    <select id="visibility-filter" class="filter-select">
+                        <option value="all">All</option>
+                        <option value="visible">Visible Only</option>
+                        <option value="hidden">Hidden Only</option>
+                    </select>
+                </div>
+                <div class="filter-group">
+                    <label for="limit-filter">Show:</label>
+                    <select id="limit-filter" class="filter-select">
+                        <option value="100">Top 100</option>
+                        <option value="250">Top 250</option>
+                        <option value="500">Top 500</option>
+                        <option value="1000">Top 1000</option>
+                        <option value="all">All Solutions</option>
+                    </select>
+                </div>
+            </div>
+            <div class="filter-actions">
+                <button id="load-solutions-btn" class="btn btn-primary">Load Solutions</button>
+                <button id="refresh-btn" class="btn btn-secondary">Refresh</button>
+            </div>
+        </section>
+
+        <!-- Solutions List Section -->
+        <section class="card" id="solutions-section" style="display: none;">
+            <h2>Solutions</h2>
+            <div id="solutions-count" class="solutions-count"></div>
+            
+            <div class="split-view">
+                <div class="left-panel">
+                    <div id="solutions-list" class="solutions-list"></div>
+                </div>
+                <div class="right-panel" id="solution-details-panel">
+                    <div class="empty-state">
+                        <p>Select a solution to view detailed information</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Event Log -->
+        <section class="card">
+            <div class="section-header">
+                <h2>Event Log</h2>
+                <button id="clear-log-btn" class="btn btn-small">Clear Log</button>
+            </div>
+            <div id="event-log" class="event-log"></div>
+        </section>
+    </div>
+
+    <script type="module" src="app.js"></script>
+</body>
+</html>

package/dist/styles.css

@@ -0,0 +1,564 @@
+/* Solution Explorer Styles */
+
+:root {
+    --primary-color: #0078d4;
+    --primary-hover: #106ebe;
+    --success-color: #107c10;
+    --warning-color: #ffb900;
+    --error-color: #d13438;
+    --text-primary: #323130;
+    --text-secondary: #605e5c;
+    --border-color: #e1dfdd;
+    --bg-primary: #ffffff;
+    --bg-secondary: #faf9f8;
+    --bg-hover: #f3f2f1;
+    --shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+[data-theme="dark"] {
+    --text-primary: #ffffff;
+    --text-secondary: #d2d0ce;
+    --border-color: #3b3a39;
+    --bg-primary: #1b1a19;
+    --bg-secondary: #252423;
+    --bg-hover: #323130;
+    --shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+header {
+    background: var(--bg-primary);
+    padding: 24px;
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+    margin-bottom: 20px;
+}
+
+h1 {
+    margin: 0 0 8px 0;
+    font-size: 32px;
+    font-weight: 600;
+}
+
+.subtitle {
+    margin: 0 0 16px 0;
+    color: var(--text-secondary);
+    font-size: 14px;
+}
+
+/* Filters Section */
+.filters-section {
+    margin-bottom: 20px;
+}
+
+/* Card */
+.card {
+    background: var(--bg-primary);
+    padding: 24px;
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+    margin-bottom: 20px;
+}
+
+.card h2 {
+    margin: 0 0 16px 0;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+/* Filters Section */
+.filters-section {
+    margin-bottom: 20px;
+}
+
+.filter-controls {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+}
+
+.filter-actions {
+    display: flex;
+    gap: 12px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border-color);
+}
+
+.filter-group {
+    flex: 1;
+    min-width: 200px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.filter-group label {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+/* Buttons */
+.btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-family: inherit;
+}
+
+.btn:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow);
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+    background-color: var(--primary-hover);
+}
+
+.btn-secondary {
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background-color: var(--bg-hover);
+}
+
+.btn-small {
+    padding: 6px 12px;
+    font-size: 12px;
+}
+
+/* Inputs */
+.search-input,
+.filter-select {
+    padding: 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: inherit;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    width: 100%;
+}
+
+.search-input:focus,
+.filter-select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+/* Solutions Count */
+.solutions-count {
+    margin-bottom: 16px;
+    padding: 8px 12px;
+    background-color: var(--bg-secondary);
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+/* Split View */
+.split-view {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    min-height: 400px;
+}
+
+.left-panel,
+.right-panel {
+    overflow-y: auto;
+    max-height: 600px;
+}
+
+.left-panel {
+    border-right: 1px solid var(--border-color);
+    padding-right: 20px;
+}
+
+/* Solutions List */
+.solutions-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.solution-card {
+    padding: 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+    background-color: var(--bg-primary);
+}
+
+.solution-card:hover {
+    background-color: var(--bg-hover);
+    transform: translateX(4px);
+    box-shadow: var(--shadow);
+}
+
+.solution-card.selected {
+    border-color: var(--primary-color);
+    background-color: rgba(0, 120, 212, 0.05);
+}
+
+.solution-card.managed {
+    border-left: 4px solid var(--primary-color);
+}
+
+.solution-card.unmanaged {
+    border-left: 4px solid var(--success-color);
+}
+
+.solution-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    margin-bottom: 8px;
+}
+
+.solution-name {
+    font-weight: 600;
+    font-size: 16px;
+    flex: 1;
+}
+
+.solution-type-badge {
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.solution-type-badge.managed {
+    background-color: rgba(0, 120, 212, 0.2);
+    color: var(--primary-color);
+}
+
+.solution-type-badge.unmanaged {
+    background-color: rgba(16, 124, 16, 0.2);
+    color: var(--success-color);
+}
+
+.solution-meta {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 6px;
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.solution-version {
+    font-weight: 600;
+}
+
+.solution-unique-name {
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-family: 'Consolas', 'Courier New', monospace;
+}
+
+/* Solution Details */
+.solution-details {
+    padding: 0;
+}
+
+.details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid var(--border-color);
+}
+
+.details-header h3 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.details-section {
+    margin-bottom: 24px;
+}
+
+.details-section h4 {
+    margin: 0 0 12px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.details-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.details-table tr {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.details-table td {
+    padding: 10px 8px;
+    font-size: 14px;
+}
+
+.details-table td.label {
+    font-weight: 600;
+    color: var(--text-secondary);
+    width: 40%;
+}
+
+.details-table code {
+    background-color: var(--bg-secondary);
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 13px;
+}
+
+.modifier-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.modifier-name {
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.modifier-domain {
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-family: 'Consolas', 'Courier New', monospace;
+}
+
+/* Deployment History */
+.deployment-history {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.deployment-item {
+    padding: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background-color: var(--bg-secondary);
+}
+
+.deployment-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 10px;
+    font-weight: 600;
+}
+
+.deployment-number {
+    color: var(--text-secondary);
+    font-size: 13px;
+    min-width: 30px;
+}
+
+.deployment-date {
+    margin-left: auto;
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.deployment-details {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.deployment-info {
+    display: flex;
+    font-size: 13px;
+    gap: 8px;
+}
+
+.deployment-info .label {
+    font-weight: 600;
+    color: var(--text-secondary);
+    min-width: 90px;
+}
+
+.deployment-info .value {
+    color: var(--text-primary);
+}
+
+.action-buttons {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+/* Empty States */
+.empty-state,
+.empty-message {
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--text-secondary);
+}
+
+.loading-indicator {
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--text-secondary);
+    font-style: italic;
+}
+
+/* Event Log */
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.section-header h2 {
+    margin: 0;
+}
+
+.event-log {
+    max-height: 300px;
+    overflow-y: auto;
+    background-color: var(--bg-secondary);
+    padding: 12px;
+    border-radius: 4px;
+    font-family: 'Consolas', 'Courier New', monospace;
+    font-size: 12px;
+}
+
+.log-entry {
+    padding: 6px 8px;
+    margin-bottom: 4px;
+    border-radius: 3px;
+    display: flex;
+    gap: 8px;
+}
+
+.log-entry.info {
+    background-color: rgba(0, 120, 212, 0.1);
+    border-left: 3px solid var(--primary-color);
+}
+
+.log-entry.success {
+    background-color: rgba(16, 124, 16, 0.1);
+    border-left: 3px solid var(--success-color);
+}
+
+.log-entry.warning {
+    background-color: rgba(255, 185, 0, 0.1);
+    border-left: 3px solid var(--warning-color);
+}
+
+.log-entry.error {
+    background-color: rgba(209, 52, 56, 0.1);
+    border-left: 3px solid var(--error-color);
+}
+
+.log-timestamp {
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .split-view {
+        grid-template-columns: 1fr;
+    }
+    
+    .left-panel {
+        border-right: none;
+        border-bottom: 1px solid var(--border-color);
+        padding-right: 0;
+        padding-bottom: 20px;
+        max-height: 400px;
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 12px;
+    }
+    
+    header {
+        padding: 16px;
+    }
+    
+    h1 {
+        font-size: 24px;
+    }
+    
+    .header-actions {
+        flex-direction: column;
+    }
+    
+    .filter-controls {
+        flex-direction: column;
+    }
+    
+    .filter-group {
+        min-width: 100%;
+    }
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@darkwheel/pptb-solution-explorer",
+    "version": "0.2.0",
+    "displayName": "Solution Explorer",
+    "description": "A comprehensive tool to explore and manage Dataverse solutions with detailed metadata for administrators",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/darkwheel/pptb-solutionExplorer.git"
+    },
+    "contributors": [
+        {
+            "name": "Christoph Schaffer",
+            "url": "https://github.com/darkwheel"
+        }
+    ],
+    "keywords": [
+        "powerplatform",
+        "dataverse",
+        "toolbox",
+        "pptb",
+        "solution",
+        "management",
+        "deployment"
+    ],
+    "license": "MIT",
+    "configurations": {
+        "repository": "https://github.com/darkwheel/pptb-solutionExplorer",
+        "website": "https://github.com/darkwheel/pptb-solutionExplorer",
+        "iconUrl": "https://raw.githubusercontent.com/darkwheel/pptb-solutionExplorer/refs/heads/main/icon.png",
+        "readmeUrl": "https://raw.githubusercontent.com/darkwheel/pptb-solutionExplorer/refs/heads/main/README_NPM.md"
+    },
+    "features": {
+        "multi-connection": false
+    },
+    "scripts": {
+        "build": "tsc && npm run copy-html && npm run copy-css",
+        "copy-html": "shx cp src/index.html dist/",
+        "copy-css": "shx cp src/styles.css dist/",
+        "watch": "tsc --watch"
+    },
+    "devDependencies": {
+        "@pptb/types": "^1.0.11",
+        "typescript": "^5.0.0",
+        "shx": "^0.4.0"
+    }
+}