decision_agent 0.1.1 → 0.1.2

data/lib/decision_agent/web/public/app.js

@@ -30,6 +30,15 @@ class RuleBuilder {
         document.getElementById('downloadBtn').addEventListener('click', () => this.downloadJSON());
         document.getElementById('importFile').addEventListener('change', (e) => this.importJSON(e));
 
+        // Versioning
+        document.getElementById('saveVersionBtn').addEventListener('click', () => this.openSaveVersionModal());
+        document.getElementById('refreshVersionsBtn').addEventListener('click', () => this.loadVersionHistory());
+        document.getElementById('closeSaveVersionBtn').addEventListener('click', () => this.closeSaveVersionModal());
+        document.getElementById('cancelSaveVersionBtn').addEventListener('click', () => this.closeSaveVersionModal());
+        document.getElementById('confirmSaveVersionBtn').addEventListener('click', () => this.confirmSaveVersion());
+        document.getElementById('closeCompareBtn').addEventListener('click', () => this.closeCompareModal());
+        document.getElementById('closeCompareModalBtn').addEventListener('click', () => this.closeCompareModal());
+
         // Modal close on outside click
         document.getElementById('ruleModal').addEventListener('click', (e) => {
             if (e.target.id === 'ruleModal') {
@@ -37,6 +46,18 @@ class RuleBuilder {
             }
         });
 
+        document.getElementById('saveVersionModal').addEventListener('click', (e) => {
+            if (e.target.id === 'saveVersionModal') {
+                this.closeSaveVersionModal();
+            }
+        });
+
+        document.getElementById('compareVersionsModal').addEventListener('click', (e) => {
+            if (e.target.id === 'compareVersionsModal') {
+                this.closeCompareModal();
+            }
+        });
+
         // Operator change - hide/show value input
         document.addEventListener('change', (e) => {
             if (e.target.classList.contains('operator-select')) {
@@ -565,6 +586,303 @@ class RuleBuilder {
         div.textContent = String(text);
         return div.innerHTML;
     }
+
+    // ===== VERSION MANAGEMENT METHODS =====
+
+    getRuleData() {
+        const version = document.getElementById('rulesetVersion').value || '1.0';
+        const ruleset = document.getElementById('rulesetName').value || 'my_ruleset';
+
+        return {
+            version: version,
+            ruleset: ruleset,
+            rules: this.rules
+        };
+    }
+
+    openSaveVersionModal() {
+        const ruleset = document.getElementById('rulesetName').value;
+        if (!ruleset) {
+            alert('Please enter a ruleset name before saving a version');
+            return;
+        }
+
+        document.getElementById('saveVersionModal').classList.remove('hidden');
+    }
+
+    closeSaveVersionModal() {
+        document.getElementById('saveVersionModal').classList.add('hidden');
+        document.getElementById('versionChangelog').value = '';
+    }
+
+    async confirmSaveVersion() {
+        const ruleset = document.getElementById('rulesetName').value;
+        const createdBy = document.getElementById('versionCreatedBy').value;
+        const changelog = document.getElementById('versionChangelog').value;
+
+        const ruleData = this.getRuleData();
+
+        try {
+            const response = await fetch('/api/versions', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    rule_id: ruleset,
+                    content: ruleData,
+                    created_by: createdBy,
+                    changelog: changelog
+                })
+            });
+
+            if (response.ok) {
+                const version = await response.json();
+                alert(`Version ${version.version_number} saved successfully!`);
+                this.closeSaveVersionModal();
+                this.loadVersionHistory();
+            } else {
+                const error = await response.json();
+                alert(`Error saving version: ${error.error}`);
+            }
+        } catch (error) {
+            alert(`Error saving version: ${error.message}`);
+        }
+    }
+
+    async loadVersionHistory() {
+        const ruleset = document.getElementById('rulesetName').value;
+        if (!ruleset) {
+            document.getElementById('versionHistoryContainer').innerHTML =
+                '<p class="empty-state">Enter a ruleset name to view version history</p>';
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/rules/${encodeURIComponent(ruleset)}/history`);
+            if (response.ok) {
+                const history = await response.json();
+                this.displayVersionHistory(history);
+            } else {
+                document.getElementById('versionHistoryContainer').innerHTML =
+                    '<p class="empty-state">No versions found for this ruleset</p>';
+            }
+        } catch (error) {
+            document.getElementById('versionHistoryContainer').innerHTML =
+                `<p class="error-message">Error loading versions: ${error.message}</p>`;
+        }
+    }
+
+    displayVersionHistory(history) {
+        const container = document.getElementById('versionHistoryContainer');
+
+        if (!history.versions || history.versions.length === 0) {
+            container.innerHTML = '<p class="empty-state">No versions yet. Save a version to get started.</p>';
+            return;
+        }
+
+        let html = `
+            <div class="version-stats">
+                <div class="stat">
+                    <span class="stat-label">Total Versions:</span>
+                    <span class="stat-value">${history.total_versions}</span>
+                </div>
+                <div class="stat">
+                    <span class="stat-label">Active Version:</span>
+                    <span class="stat-value">${history.active_version ? history.active_version.version_number : 'None'}</span>
+                </div>
+            </div>
+            <table class="version-table">
+                <thead>
+                    <tr>
+                        <th>Version</th>
+                        <th>Created By</th>
+                        <th>Created At</th>
+                        <th>Status</th>
+                        <th>Changelog</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+        `;
+
+        history.versions.forEach((version, index) => {
+            const createdAt = new Date(version.created_at).toLocaleString();
+            const statusClass = version.status === 'active' ? 'status-active' :
+                               version.status === 'draft' ? 'status-draft' : 'status-archived';
+
+            html += `
+                <tr class="${version.status === 'active' ? 'active-version' : ''}">
+                    <td><strong>v${version.version_number}</strong></td>
+                    <td>${this.escapeHtml(version.created_by)}</td>
+                    <td>${createdAt}</td>
+                    <td><span class="status-badge ${statusClass}">${version.status}</span></td>
+                    <td>${this.escapeHtml(version.changelog || '')}</td>
+                    <td class="action-buttons">
+                        <button class="btn btn-xs btn-secondary" onclick="ruleBuilder.loadVersion('${version.id}')">Load</button>
+                        ${version.status !== 'active' ?
+                          `<button class="btn btn-xs btn-primary" onclick="ruleBuilder.rollbackToVersion('${version.id}')">Rollback</button>` :
+                          '<span class="active-badge">Active</span>'}
+                        ${index < history.versions.length - 1 ?
+                          `<button class="btn btn-xs btn-secondary" onclick="ruleBuilder.compareVersions('${version.id}', '${history.versions[index + 1].id}')">Compare</button>` : ''}
+                        ${version.status !== 'active' ?
+                          `<button class="btn btn-xs btn-danger" onclick="ruleBuilder.deleteVersion('${version.id}')">Delete</button>` : ''}
+                    </td>
+                </tr>
+            `;
+        });
+
+        html += `
+                </tbody>
+            </table>
+        `;
+
+        container.innerHTML = html;
+    }
+
+    async loadVersion(versionId) {
+        try {
+            const response = await fetch(`/api/versions/${encodeURIComponent(versionId)}`);
+            if (response.ok) {
+                const version = await response.json();
+                this.loadRulesFromVersion(version.content);
+                alert(`Loaded version ${version.version_number}`);
+            } else {
+                alert('Error loading version');
+            }
+        } catch (error) {
+            alert(`Error loading version: ${error.message}`);
+        }
+    }
+
+    loadRulesFromVersion(content) {
+        if (content.version) {
+            document.getElementById('rulesetVersion').value = content.version;
+        }
+        if (content.ruleset) {
+            document.getElementById('rulesetName').value = content.ruleset;
+        }
+        if (content.rules) {
+            this.rules = content.rules;
+            this.renderRules();
+            this.updateJSONPreview();
+        }
+    }
+
+    async rollbackToVersion(versionId) {
+        if (!confirm('Are you sure you want to rollback to this version? This will create a new version.')) {
+            return;
+        }
+
+        try {
+            const performedBy = prompt('Enter your name:', 'system');
+            if (!performedBy) return;
+
+            const response = await fetch(`/api/versions/${encodeURIComponent(versionId)}/activate`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ performed_by: performedBy })
+            });
+
+            if (response.ok) {
+                const version = await response.json();
+                alert(`Rolled back to version ${version.version_number}`);
+                this.loadVersionHistory();
+                this.loadVersion(versionId);
+            } else {
+                const error = await response.json();
+                alert(`Error during rollback: ${error.error}`);
+            }
+        } catch (error) {
+            alert(`Error during rollback: ${error.message}`);
+        }
+    }
+
+    async compareVersions(versionId1, versionId2) {
+        try {
+            const response = await fetch(
+                `/api/versions/${encodeURIComponent(versionId1)}/compare/${encodeURIComponent(versionId2)}`
+            );
+
+            if (response.ok) {
+                const comparison = await response.json();
+                this.displayComparison(comparison);
+                document.getElementById('compareVersionsModal').classList.remove('hidden');
+            } else {
+                alert('Error comparing versions');
+            }
+        } catch (error) {
+            alert(`Error comparing versions: ${error.message}`);
+        }
+    }
+
+    displayComparison(comparison) {
+        const container = document.getElementById('comparisonResult');
+        const v1 = comparison.version_1;
+        const v2 = comparison.version_2;
+        const diff = comparison.differences;
+
+        let html = `
+            <div class="comparison-header">
+                <div class="version-info">
+                    <h3>Version ${v1.version_number}</h3>
+                    <p>By ${this.escapeHtml(v1.created_by)} on ${new Date(v1.created_at).toLocaleString()}</p>
+                </div>
+                <div class="comparison-arrow">→</div>
+                <div class="version-info">
+                    <h3>Version ${v2.version_number}</h3>
+                    <p>By ${this.escapeHtml(v2.created_by)} on ${new Date(v2.created_at).toLocaleString()}</p>
+                </div>
+            </div>
+
+            <div class="comparison-content">
+                <div class="comparison-section">
+                    <h4>Version ${v1.version_number} Content:</h4>
+                    <pre class="json-code">${JSON.stringify(v1.content, null, 2)}</pre>
+                </div>
+                <div class="comparison-section">
+                    <h4>Version ${v2.version_number} Content:</h4>
+                    <pre class="json-code">${JSON.stringify(v2.content, null, 2)}</pre>
+                </div>
+            </div>
+
+            <div class="diff-summary">
+                <h4>Changes Summary:</h4>
+                <div class="diff-stats">
+                    <span class="diff-added">+${diff.added.length} added</span>
+                    <span class="diff-removed">-${diff.removed.length} removed</span>
+                    <span class="diff-changed">${Object.keys(diff.changed).length} changed</span>
+                </div>
+            </div>
+        `;
+
+        container.innerHTML = html;
+    }
+
+    closeCompareModal() {
+        document.getElementById('compareVersionsModal').classList.add('hidden');
+    }
+
+    async deleteVersion(versionId) {
+        if (!confirm('Are you sure you want to delete this version? This action cannot be undone.')) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/versions/${encodeURIComponent(versionId)}`, {
+                method: 'DELETE',
+                headers: { 'Content-Type': 'application/json' }
+            });
+
+            if (response.ok) {
+                alert('Version deleted successfully');
+                this.loadVersionHistory();
+            } else {
+                const error = await response.json();
+                alert(`Error deleting version: ${error.error}`);
+            }
+        } catch (error) {
+            alert(`Error deleting version: ${error.message}`);
+        }
+    }
 }
 
 // Initialize app when DOM is ready

data/lib/decision_agent/web/public/index.html

@@ -48,6 +48,7 @@
                 <!-- Action Buttons -->
                 <div class="actions">
                     <button class="btn btn-success" id="validateBtn">✓ Validate Rules</button>
+                    <button class="btn btn-primary" id="saveVersionBtn">💾 Save Version</button>
                     <button class="btn btn-secondary" id="clearBtn">Clear All</button>
                 </div>
             </div>
@@ -84,6 +85,18 @@
             </div>
         </div>
 
+        <!-- Version History Section -->
+        <div class="version-section">
+            <div class="panel-header">
+                <h2>📝 Version History</h2>
+                <button class="btn btn-secondary" id="refreshVersionsBtn">🔄 Refresh</button>
+            </div>
+
+            <div id="versionHistoryContainer" class="version-history-container">
+                <p class="empty-state">No versions yet. Save a version to get started.</p>
+            </div>
+        </div>
+
         <!-- Rule Editor Modal -->
         <div id="ruleModal" class="modal hidden">
             <div class="modal-content">
@@ -179,6 +192,48 @@
                 </div>
             </div>
         </template>
+
+        <!-- Save Version Modal -->
+        <div id="saveVersionModal" class="modal hidden">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2>Save New Version</h2>
+                    <button class="close-btn" id="closeSaveVersionBtn">&times;</button>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="versionCreatedBy">Created By:</label>
+                        <input type="text" id="versionCreatedBy" class="input" placeholder="system" value="system">
+                    </div>
+                    <div class="form-group">
+                        <label for="versionChangelog">Changelog:</label>
+                        <textarea id="versionChangelog" class="input" rows="3" placeholder="Describe the changes in this version..."></textarea>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" id="cancelSaveVersionBtn">Cancel</button>
+                    <button class="btn btn-primary" id="confirmSaveVersionBtn">Save Version</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Compare Versions Modal -->
+        <div id="compareVersionsModal" class="modal hidden">
+            <div class="modal-content modal-large">
+                <div class="modal-header">
+                    <h2>Compare Versions</h2>
+                    <button class="close-btn" id="closeCompareBtn">&times;</button>
+                </div>
+                <div class="modal-body">
+                    <div id="comparisonResult" class="comparison-container">
+                        <!-- Comparison will be displayed here -->
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" id="closeCompareModalBtn">Close</button>
+                </div>
+            </div>
+        </div>
     </div>
 
     <footer class="footer">

data/lib/decision_agent/web/public/styles.css

@@ -229,6 +229,15 @@ textarea.input {
     background: #059669;
 }
 
+.btn-danger {
+    background: var(--danger-color);
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
 .btn-sm {
     padding: 5px 10px;
     font-size: 12px;
@@ -556,3 +565,213 @@ textarea.input {
 ::-webkit-scrollbar-thumb:hover {
     background: var(--secondary-color);
 }
+
+/* ===== VERSION HISTORY STYLES ===== */
+.version-section {
+    margin-top: 30px;
+    padding: 20px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.version-history-container {
+    margin-top: 15px;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 40px;
+    color: #999;
+    font-style: italic;
+}
+
+.version-stats {
+    display: flex;
+    gap: 30px;
+    margin-bottom: 20px;
+    padding: 15px;
+    background: var(--hover-bg);
+    border-radius: 6px;
+}
+
+.stat {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.stat-label {
+    font-weight: 600;
+    color: #666;
+}
+
+.stat-value {
+    font-size: 1.2em;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+
+.version-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 15px;
+}
+
+.version-table th {
+    background: var(--primary-color);
+    color: white;
+    padding: 12px;
+    text-align: left;
+    font-weight: 600;
+}
+
+.version-table td {
+    padding: 12px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.version-table tr:hover {
+    background: var(--hover-bg);
+}
+
+.version-table tr.active-version {
+    background: #e8f5e9;
+}
+
+.status-badge {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 0.85em;
+    font-weight: 600;
+}
+
+.status-active {
+    background: #4caf50;
+    color: white;
+}
+
+.status-draft {
+    background: #ff9800;
+    color: white;
+}
+
+.status-archived {
+    background: #757575;
+    color: white;
+}
+
+.active-badge {
+    color: #4caf50;
+    font-weight: 600;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.btn-xs {
+    padding: 4px 10px;
+    font-size: 0.85em;
+}
+
+/* Version Modals */
+.modal-large .modal-content {
+    max-width: 900px;
+    width: 90%;
+}
+
+.comparison-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 20px;
+    background: var(--hover-bg);
+    border-radius: 6px;
+    margin-bottom: 20px;
+}
+
+.version-info {
+    flex: 1;
+}
+
+.version-info h3 {
+    margin: 0 0 8px 0;
+    color: var(--primary-color);
+}
+
+.version-info p {
+    margin: 0;
+    color: #666;
+    font-size: 0.9em;
+}
+
+.comparison-arrow {
+    font-size: 2em;
+    color: var(--primary-color);
+    font-weight: bold;
+}
+
+.comparison-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.comparison-section {
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 15px;
+}
+
+.comparison-section h4 {
+    margin-top: 0;
+    color: var(--primary-color);
+}
+
+.comparison-section .json-code {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.diff-summary {
+    padding: 15px;
+    background: var(--hover-bg);
+    border-radius: 6px;
+}
+
+.diff-summary h4 {
+    margin-top: 0;
+}
+
+.diff-stats {
+    display: flex;
+    gap: 20px;
+    margin-top: 10px;
+}
+
+.diff-added {
+    color: #4caf50;
+    font-weight: 600;
+}
+
+.diff-removed {
+    color: #f44336;
+    font-weight: 600;
+}
+
+.diff-changed {
+    color: #ff9800;
+    font-weight: 600;
+}
+
+.error-message {
+    color: var(--danger-color);
+    text-align: center;
+    padding: 20px;
+}