diff --git a/index.html b/index.html
index ae746f4..b4b89ad 100644
--- a/index.html
+++ b/index.html
@@ -295,6 +295,7 @@
                                     <button class="btn btn-modal primary" id="edit-dataset-btn"
                                         title="Edit this dataset contents">Edit Contents</button>
                                     <button class="btn btn-modal primary" id="build-chart-btn"
+                                        @click="openChartBuilder($store.datasets.currentDatasetId)"
                                         title="Build a chart using this dataset">Build Chart</button>
                                     <button class="btn btn-modal primary" id="new-snippet-btn"
                                         title="Create a new snippet using this dataset">New Snippet</button>
diff --git a/src/js/app.js b/src/js/app.js
index 6bd7ae4..7356d42 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -247,15 +247,7 @@ document.addEventListener('DOMContentLoaded', function () {
         refreshMetadataBtn.addEventListener('click', refreshDatasetMetadata);
     }
 
-    // Build chart from dataset button
-    const buildChartBtn = document.getElementById('build-chart-btn');
-    if (buildChartBtn) {
-        buildChartBtn.addEventListener('click', async () => {
-            if (Alpine.store('datasets').currentDatasetId) {
-                openChartBuilder(Alpine.store('datasets').currentDatasetId);
-            }
-        });
-    }
+    // Build chart from dataset button - now handled by Alpine @click in HTML
 
     // New snippet from dataset button
     const newSnippetBtn = document.getElementById('new-snippet-btn');
diff --git a/src/js/chart-builder.js b/src/js/chart-builder.js
index 429aadd..7ecfc7c 100644
--- a/src/js/chart-builder.js
+++ b/src/js/chart-builder.js
@@ -62,12 +62,12 @@ function chartBuilder() {
             return Object.values(this.encodings).some(enc => enc.field !== '');
         },
 
-        // Initialize component with dataset
-        async init(datasetId) {
+        // Load dataset and initialize chart builder
+        async loadDataset(datasetId) {
             try {
                 // Validate datasetId is provided
                 if (!datasetId || isNaN(datasetId)) {
-                    console.warn('Chart builder init called without valid datasetId');
+                    console.warn('Chart builder loadDataset called without valid datasetId');
                     return false;
                 }
 
@@ -214,7 +214,9 @@ function chartBuilder() {
             if (!this.isValid) return;
 
             try {
-                // Create snippet with auto-generated name
+                // Capture current state before closing (important: do this BEFORE close())
+                const specToSave = JSON.parse(JSON.stringify(this.spec));
+                const datasetNameToSave = this.datasetName;
                 const snippetName = generateSnippetName();
                 const now = new Date().toISOString();
 
@@ -223,11 +225,11 @@ function chartBuilder() {
                     name: snippetName,
                     created: now,
                     modified: now,
-                    spec: this.spec,
-                    draftSpec: null,
-                    comment: `Chart built from dataset: ${this.datasetName}`,
+                    spec: specToSave,
+                    draftSpec: specToSave, // Initialize draft with same spec
+                    comment: `Chart built from dataset: ${datasetNameToSave}`,
                     tags: [],
-                    datasetRefs: [this.datasetName],
+                    datasetRefs: [datasetNameToSave],
                     meta: {}
                 };
 
@@ -239,7 +241,8 @@ function chartBuilder() {
                 const datasetModal = document.getElementById('dataset-modal');
                 if (datasetModal) datasetModal.style.display = 'none';
 
-                // Select and open the new snippet
+                // Refresh snippet list and select the new snippet
+                renderSnippetList();
                 selectSnippet(snippet.id);
 
                 // Show success message
@@ -320,11 +323,11 @@ async function openChartBuilder(datasetId) {
         const modal = document.getElementById('chart-builder-modal');
         modal.style.display = 'flex';
 
-        // Get Alpine component instance and initialize it
+        // Get Alpine component instance and load dataset
         const chartBuilderView = document.getElementById('chart-builder-view');
         if (chartBuilderView && chartBuilderView._x_dataStack) {
             const component = chartBuilderView._x_dataStack[0];
-            const success = await component.init(datasetId);
+            const success = await component.loadDataset(datasetId);
 
             if (!success) {
                 modal.style.display = 'none';
@@ -345,8 +348,6 @@ async function openChartBuilder(datasetId) {
     }
 }
 
-
-
 // Populate field dropdowns with dataset columns (utility function)
 function populateFieldDropdowns(dataset) {
     const encodings = ['x', 'y', 'color', 'size'];
@@ -369,7 +370,7 @@ function populateFieldDropdowns(dataset) {
     });
 }
 
-// closeChartBuilder - now calls Alpine component's close() method  
+// closeChartBuilder - now calls Alpine component's close() method
 function closeChartBuilder() {
     const chartBuilderView = document.getElementById('chart-builder-view');
     if (chartBuilderView && chartBuilderView._x_dataStack) {
@@ -377,3 +378,7 @@ function closeChartBuilder() {
         component.close();
     }
 }
+
+// Expose functions to global scope for Alpine access
+window.openChartBuilder = openChartBuilder;
+window.closeChartBuilder = closeChartBuilder;