@matdata/yasgui 5.5.0 → 5.7.0

package/src/TabSettingsModal.scss

@@ -63,7 +63,7 @@
   background: var(--yasgui-bg-primary, white);
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  max-width: 800px;
+  max-width: 1000px;
   width: 90%;
   max-height: 90vh;
   display: flex;
@@ -160,6 +160,13 @@
 
 .settingsSection {
   margin-bottom: 20px;
+
+  h3 {
+    margin: 0 0 12px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--yasgui-text-primary, #000);
+  }
 }
 
 .settingsLabel {
@@ -297,7 +304,8 @@
 }
 
 .primaryButton,
-.secondaryButton {
+.secondaryButton,
+.dangerButton {
   padding: 8px 20px;
   border: none;
   border-radius: 4px;
@@ -320,7 +328,21 @@
   color: var(--yasgui-text-primary, #333);
 
   &:hover {
-    background: var(--yasgui-border-color, #d0d0d0);
+    background: var(--yasgui-bg-quaternary, #d0d0d0);
+  }
+}
+
+.dangerButton {
+  background: var(--yasgui-danger-bg, #dc3545);
+  color: white;
+  margin-top: 10px;
+
+  &:hover {
+    background: var(--yasgui-danger-hover, #c82333);
+  }
+
+  &:active {
+    background: var(--yasgui-danger-active, #bd2130);
   }
 }
 
@@ -849,6 +871,24 @@
   }
 }
 
+.authHelpLink {
+  padding: 10px 12px;
+  background: var(--yasgui-bg-secondary, #f5f5f5);
+  border: 1px solid var(--yasgui-border-color, #e0e0e0);
+  border-radius: 4px;
+  font-size: 13px;
+  margin-bottom: 12px;
+
+  a {
+    color: var(--yasgui-accent-color, #337ab7);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
 .authSecurityNotice {
   padding: 12px;
   background: var(--yasgui-warning-bg, #fff3cd);
@@ -925,6 +965,33 @@
   }
 }
 
+// OAuth 2.0 specific styling
+.authInputHelp {
+  font-size: 12px;
+  color: var(--yasgui-text-secondary, #666);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+.oauth2TokenStatus {
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+
+  &.authenticated {
+    background: var(--yasgui-success-bg, #d4edda);
+    color: var(--yasgui-success-text, #155724);
+    border: 1px solid var(--yasgui-success-border, #c3e6cb);
+  }
+
+  &.expired {
+    background: var(--yasgui-warning-bg, #fff3cd);
+    color: var(--yasgui-warning-text, #856404);
+    border: 1px solid var(--yasgui-warning-border, #ffeaa7);
+  }
+}
+
 // Add endpoint form styling
 .addEndpointForm {
   margin-top: 20px;

package/src/TabSettingsModal.ts

@@ -3,6 +3,8 @@ import "./TabSettingsModal.scss";
 import Tab from "./Tab";
 import * as ConfigExportImport from "./ConfigExportImport";
 import { VERSION } from "./version";
+import * as OAuth2Utils from "./OAuth2Utils";
+import PersistentConfig from "./PersistentConfig";
 
 // Theme toggle icons
 const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
@@ -34,6 +36,9 @@ const AcceptHeaderGraphMap: { key: string; value: string }[] = [
   { key: "TSV", value: "text/tab-separated-values,*/*;q=0.9" },
 ];
 
+// Default API Key header name
+const DEFAULT_API_KEY_HEADER = "X-API-Key";
+
 export default class TabSettingsModal {
   private tab: Tab;
   private modalOverlay!: HTMLElement;
@@ -89,7 +94,8 @@ export default class TabSettingsModal {
     // Modal overlay
     this.modalOverlay = document.createElement("div");
     addClass(this.modalOverlay, "tabSettingsModalOverlay");
-    this.modalOverlay.onclick = () => this.close();
+    // Removed: this.modalOverlay.onclick = () => this.close();
+    // Users must explicitly click 'Save' or 'Cancel' to close the modal
 
     // Modal content
     this.modalContent = document.createElement("div");
@@ -423,7 +429,10 @@ export default class TabSettingsModal {
     const snippetsBarCheckbox = document.createElement("input");
     snippetsBarCheckbox.type = "checkbox";
     snippetsBarCheckbox.id = "showSnippetsBar";
-    snippetsBarCheckbox.checked = yasqe.getSnippetsBarVisible();
+    // Read from global config
+    const persistedValue = this.tab.yasgui.persistentConfig.getShowSnippetsBar();
+    snippetsBarCheckbox.checked =
+      persistedValue !== undefined ? persistedValue : this.tab.yasgui.config.showSnippetsBar !== false;
 
     const snippetsBarLabel = document.createElement("label");
     snippetsBarLabel.htmlFor = "showSnippetsBar";
@@ -689,22 +698,47 @@ export default class TabSettingsModal {
     const body = document.createElement("div");
     addClass(body, "authModalBody");
 
-    // Auth type (for now only basic, but designed for future)
+    // Auth type
     const typeSection = document.createElement("div");
     addClass(typeSection, "authModalSection");
     const typeLabel = document.createElement("label");
     typeLabel.textContent = "Authentication Type";
     const typeSelect = document.createElement("select");
+
     const basicOption = document.createElement("option");
     basicOption.value = "basic";
     basicOption.textContent = "HTTP Basic Authentication";
     typeSelect.appendChild(basicOption);
-    // Future: Add OAuth, Bearer Token, etc.
+
+    const bearerOption = document.createElement("option");
+    bearerOption.value = "bearer";
+    bearerOption.textContent = "Bearer Token";
+    typeSelect.appendChild(bearerOption);
+
+    const apiKeyOption = document.createElement("option");
+    apiKeyOption.value = "apiKey";
+    apiKeyOption.textContent = "API Key (Custom Header)";
+    typeSelect.appendChild(apiKeyOption);
+
+    const oauth2Option = document.createElement("option");
+    oauth2Option.value = "oauth2";
+    oauth2Option.textContent = "OAuth 2.0";
+    typeSelect.appendChild(oauth2Option);
+
+    // Set the current auth type
+    if (existingAuth) {
+      typeSelect.value = existingAuth.type;
+    }
+
     typeSection.appendChild(typeLabel);
     typeSection.appendChild(typeSelect);
     body.appendChild(typeSection);
 
-    // Username
+    // Basic Auth Fields
+    const basicAuthFields = document.createElement("div");
+    basicAuthFields.id = "basicAuthFields";
+    addClass(basicAuthFields, "authFieldsContainer");
+
     const usernameSection = document.createElement("div");
     addClass(usernameSection, "authModalSection");
     const usernameLabel = document.createElement("label");
@@ -712,13 +746,12 @@ export default class TabSettingsModal {
     const usernameInput = document.createElement("input");
     usernameInput.type = "text";
     usernameInput.placeholder = "Enter username";
-    usernameInput.value = existingAuth?.username || "";
+    usernameInput.value = existingAuth?.type === "basic" ? existingAuth.username : "";
     usernameInput.autocomplete = "username";
     usernameSection.appendChild(usernameLabel);
     usernameSection.appendChild(usernameInput);
-    body.appendChild(usernameSection);
+    basicAuthFields.appendChild(usernameSection);
 
-    // Password
     const passwordSection = document.createElement("div");
     addClass(passwordSection, "authModalSection");
     const passwordLabel = document.createElement("label");
@@ -726,11 +759,181 @@ export default class TabSettingsModal {
     const passwordInput = document.createElement("input");
     passwordInput.type = "password";
     passwordInput.placeholder = "Enter password";
-    passwordInput.value = existingAuth?.password || "";
+    passwordInput.value = existingAuth?.type === "basic" ? existingAuth.password : "";
     passwordInput.autocomplete = "current-password";
     passwordSection.appendChild(passwordLabel);
     passwordSection.appendChild(passwordInput);
-    body.appendChild(passwordSection);
+    basicAuthFields.appendChild(passwordSection);
+
+    body.appendChild(basicAuthFields);
+
+    // Bearer Token Fields
+    const bearerAuthFields = document.createElement("div");
+    bearerAuthFields.id = "bearerAuthFields";
+    addClass(bearerAuthFields, "authFieldsContainer");
+    bearerAuthFields.style.display = "none";
+
+    const tokenSection = document.createElement("div");
+    addClass(tokenSection, "authModalSection");
+    const tokenLabel = document.createElement("label");
+    tokenLabel.textContent = "Bearer Token";
+    const tokenInput = document.createElement("input");
+    tokenInput.type = "password";
+    tokenInput.placeholder = "Enter bearer token";
+    tokenInput.autocomplete = "off";
+    tokenInput.value = existingAuth?.type === "bearer" ? existingAuth.token : "";
+    tokenSection.appendChild(tokenLabel);
+    tokenSection.appendChild(tokenInput);
+    bearerAuthFields.appendChild(tokenSection);
+
+    body.appendChild(bearerAuthFields);
+
+    // API Key Fields
+    const apiKeyAuthFields = document.createElement("div");
+    apiKeyAuthFields.id = "apiKeyAuthFields";
+    addClass(apiKeyAuthFields, "authFieldsContainer");
+    apiKeyAuthFields.style.display = "none";
+
+    const headerNameSection = document.createElement("div");
+    addClass(headerNameSection, "authModalSection");
+    const headerNameLabel = document.createElement("label");
+    headerNameLabel.textContent = "Header Name";
+    const headerNameInput = document.createElement("input");
+    headerNameInput.type = "text";
+    headerNameInput.placeholder = `e.g., ${DEFAULT_API_KEY_HEADER}`;
+    headerNameInput.value = existingAuth?.type === "apiKey" ? existingAuth.headerName : DEFAULT_API_KEY_HEADER;
+    headerNameSection.appendChild(headerNameLabel);
+    headerNameSection.appendChild(headerNameInput);
+    apiKeyAuthFields.appendChild(headerNameSection);
+
+    const apiKeySection = document.createElement("div");
+    addClass(apiKeySection, "authModalSection");
+    const apiKeyLabel = document.createElement("label");
+    apiKeyLabel.textContent = "API Key";
+    const apiKeyInput = document.createElement("input");
+    apiKeyInput.type = "password";
+    apiKeyInput.placeholder = "Enter API key";
+    apiKeyInput.autocomplete = "off";
+    apiKeyInput.value = existingAuth?.type === "apiKey" ? existingAuth.apiKey : "";
+    apiKeySection.appendChild(apiKeyLabel);
+    apiKeySection.appendChild(apiKeyInput);
+    apiKeyAuthFields.appendChild(apiKeySection);
+
+    body.appendChild(apiKeyAuthFields);
+
+    // OAuth 2.0 Fields
+    const oauth2AuthFields = document.createElement("div");
+    oauth2AuthFields.id = "oauth2AuthFields";
+    addClass(oauth2AuthFields, "authFieldsContainer");
+    oauth2AuthFields.style.display = "none";
+
+    const clientIdSection = document.createElement("div");
+    addClass(clientIdSection, "authModalSection");
+    const clientIdLabel = document.createElement("label");
+    clientIdLabel.textContent = "Client ID";
+    const clientIdInput = document.createElement("input");
+    clientIdInput.type = "text";
+    clientIdInput.placeholder = "Enter OAuth 2.0 client ID";
+    clientIdInput.value = existingAuth?.type === "oauth2" ? existingAuth.clientId : "";
+    clientIdSection.appendChild(clientIdLabel);
+    clientIdSection.appendChild(clientIdInput);
+    oauth2AuthFields.appendChild(clientIdSection);
+
+    const authEndpointSection = document.createElement("div");
+    addClass(authEndpointSection, "authModalSection");
+    const authEndpointLabel = document.createElement("label");
+    authEndpointLabel.textContent = "Authorization Endpoint";
+    const authEndpointInput = document.createElement("input");
+    authEndpointInput.type = "url";
+    authEndpointInput.placeholder = "https://provider.com/oauth/authorize";
+    authEndpointInput.value = existingAuth?.type === "oauth2" ? existingAuth.authorizationEndpoint : "";
+    authEndpointSection.appendChild(authEndpointLabel);
+    authEndpointSection.appendChild(authEndpointInput);
+    oauth2AuthFields.appendChild(authEndpointSection);
+
+    const tokenEndpointSection = document.createElement("div");
+    addClass(tokenEndpointSection, "authModalSection");
+    const tokenEndpointLabel = document.createElement("label");
+    tokenEndpointLabel.textContent = "Token Endpoint";
+    const tokenEndpointInput = document.createElement("input");
+    tokenEndpointInput.type = "url";
+    tokenEndpointInput.placeholder = "https://provider.com/oauth/token";
+    tokenEndpointInput.value = existingAuth?.type === "oauth2" ? existingAuth.tokenEndpoint : "";
+    tokenEndpointSection.appendChild(tokenEndpointLabel);
+    tokenEndpointSection.appendChild(tokenEndpointInput);
+    oauth2AuthFields.appendChild(tokenEndpointSection);
+
+    const redirectUriSection = document.createElement("div");
+    addClass(redirectUriSection, "authModalSection");
+    const redirectUriLabel = document.createElement("label");
+    redirectUriLabel.textContent = "Redirect URI (Optional)";
+    const redirectUriInput = document.createElement("input");
+    redirectUriInput.type = "url";
+    redirectUriInput.placeholder = window.location.origin + window.location.pathname;
+    redirectUriInput.value = existingAuth?.type === "oauth2" ? existingAuth.redirectUri || "" : "";
+    const redirectUriHelp = document.createElement("div");
+    redirectUriHelp.textContent = "Leave empty to use current page URL. Must be registered with OAuth provider.";
+    addClass(redirectUriHelp, "authInputHelp");
+    redirectUriSection.appendChild(redirectUriLabel);
+    redirectUriSection.appendChild(redirectUriInput);
+    redirectUriSection.appendChild(redirectUriHelp);
+    oauth2AuthFields.appendChild(redirectUriSection);
+
+    const scopeSection = document.createElement("div");
+    addClass(scopeSection, "authModalSection");
+    const scopeLabel = document.createElement("label");
+    scopeLabel.textContent = "Scope (Optional)";
+    const scopeInput = document.createElement("input");
+    scopeInput.type = "text";
+    scopeInput.placeholder = "e.g., read write";
+    scopeInput.value = existingAuth?.type === "oauth2" ? existingAuth.scope || "" : "";
+    const scopeHelp = document.createElement("div");
+    scopeHelp.textContent = "Space-separated list of OAuth 2.0 scopes";
+    addClass(scopeHelp, "authInputHelp");
+    scopeSection.appendChild(scopeLabel);
+    scopeSection.appendChild(scopeInput);
+    scopeSection.appendChild(scopeHelp);
+    oauth2AuthFields.appendChild(scopeSection);
+
+    // Show token status if already authenticated
+    if (existingAuth?.type === "oauth2" && existingAuth.accessToken) {
+      const tokenStatusSection = document.createElement("div");
+      addClass(tokenStatusSection, "authModalSection");
+      const tokenStatusLabel = document.createElement("label");
+      tokenStatusLabel.textContent = "Authentication Status";
+      const tokenStatus = document.createElement("div");
+      addClass(tokenStatus, "oauth2TokenStatus");
+      tokenStatus.innerHTML = "✓ Authenticated";
+      addClass(tokenStatus, "authenticated");
+      tokenStatusSection.appendChild(tokenStatusLabel);
+      tokenStatusSection.appendChild(tokenStatus);
+      oauth2AuthFields.appendChild(tokenStatusSection);
+    }
+
+    body.appendChild(oauth2AuthFields);
+
+    // Function to toggle fields based on auth type
+    const toggleAuthFields = () => {
+      const authType = typeSelect.value;
+      basicAuthFields.style.display = authType === "basic" ? "block" : "none";
+      bearerAuthFields.style.display = authType === "bearer" ? "block" : "none";
+      apiKeyAuthFields.style.display = authType === "apiKey" ? "block" : "none";
+      oauth2AuthFields.style.display = authType === "oauth2" ? "block" : "none";
+    };
+
+    // Set initial visibility
+    toggleAuthFields();
+
+    // Update visibility when auth type changes
+    typeSelect.onchange = toggleAuthFields;
+
+    // Help link
+    const helpLink = document.createElement("div");
+    addClass(helpLink, "authHelpLink");
+    helpLink.innerHTML = `
+      📚 <a href="https://triply.cc/docs/yasgui#authentication" target="_blank" rel="noopener noreferrer">View authentication documentation</a>
+    `;
+    body.appendChild(helpLink);
 
     // Security notice
     const securityNotice = document.createElement("div");
@@ -755,13 +958,18 @@ export default class TabSettingsModal {
     removeButton.textContent = "Remove Authentication";
     removeButton.type = "button";
     addClass(removeButton, "authRemoveButton");
+    // Helper function to close modal and refresh endpoints list
+    const closeModalAndRefresh = () => {
+      authModalOverlay.remove();
+      const endpointsList = this.modalContent.querySelector(".endpointsTable");
+      if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+    };
+
     removeButton.onclick = () => {
       this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
         authentication: undefined,
       });
-      authModalOverlay.remove();
-      const endpointsList = this.modalContent.querySelector(".endpointsTable");
-      if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+      closeModalAndRefresh();
     };
     if (!existingAuth) {
       removeButton.disabled = true;
@@ -778,22 +986,125 @@ export default class TabSettingsModal {
     saveButton.type = "button";
     addClass(saveButton, "authSaveButton");
     saveButton.onclick = () => {
-      const username = usernameInput.value.trim();
-      const password = passwordInput.value;
-
-      if (username && password) {
-        this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
-          authentication: {
-            type: "basic",
-            username,
-            password,
-          },
-        });
-        authModalOverlay.remove();
-        const endpointsList = this.modalContent.querySelector(".endpointsTable");
-        if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
-      } else {
-        alert("Please enter both username and password.");
+      const authType = typeSelect.value;
+
+      if (authType === "basic") {
+        const username = usernameInput.value.trim();
+        const password = passwordInput.value;
+
+        if (username && password) {
+          this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+            authentication: {
+              type: "basic",
+              username,
+              password,
+            },
+          });
+          closeModalAndRefresh();
+        } else {
+          alert("Please enter both username and password.");
+        }
+      } else if (authType === "bearer") {
+        const token = tokenInput.value.trim();
+
+        if (token) {
+          this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+            authentication: {
+              type: "bearer",
+              token,
+            },
+          });
+          closeModalAndRefresh();
+        } else {
+          alert("Please enter a bearer token.");
+        }
+      } else if (authType === "apiKey") {
+        const headerName = headerNameInput.value.trim();
+        const apiKey = apiKeyInput.value.trim();
+
+        if (headerName && apiKey) {
+          this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+            authentication: {
+              type: "apiKey",
+              headerName,
+              apiKey,
+            },
+          });
+          closeModalAndRefresh();
+        } else {
+          alert("Please enter both header name and API key.");
+        }
+      } else if (authType === "oauth2") {
+        const clientId = clientIdInput.value.trim();
+        const authorizationEndpoint = authEndpointInput.value.trim();
+        const tokenEndpoint = tokenEndpointInput.value.trim();
+        const redirectUri = redirectUriInput.value.trim() || window.location.origin + window.location.pathname;
+        const scope = scopeInput.value.trim();
+
+        if (!clientId || !authorizationEndpoint || !tokenEndpoint) {
+          alert("Please enter Client ID, Authorization Endpoint, and Token Endpoint.");
+          return;
+        }
+
+        // Check if already authenticated (has access token)
+        if (existingAuth?.type === "oauth2" && existingAuth.accessToken) {
+          // Already has token, just save the configuration updates
+          this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+            authentication: {
+              type: "oauth2",
+              clientId,
+              authorizationEndpoint,
+              tokenEndpoint,
+              redirectUri,
+              scope,
+              accessToken: existingAuth.accessToken,
+              idToken: existingAuth.idToken,
+              refreshToken: existingAuth.refreshToken,
+              tokenExpiry: existingAuth.tokenExpiry,
+            },
+          });
+          closeModalAndRefresh();
+          return;
+        }
+
+        // Start OAuth 2.0 flow
+        saveButton.disabled = true;
+        saveButton.textContent = "Authenticating...";
+
+        OAuth2Utils.startOAuth2Flow({
+          clientId,
+          authorizationEndpoint,
+          tokenEndpoint,
+          redirectUri,
+          scope,
+        })
+          .then((tokenResponse) => {
+            const tokenExpiry = OAuth2Utils.calculateTokenExpiry(tokenResponse.expires_in);
+
+            this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+              authentication: {
+                type: "oauth2",
+                clientId,
+                authorizationEndpoint,
+                tokenEndpoint,
+                redirectUri,
+                scope,
+                accessToken: tokenResponse.access_token,
+                idToken: tokenResponse.id_token,
+                refreshToken: tokenResponse.refresh_token,
+                tokenExpiry,
+              },
+            });
+
+            closeModalAndRefresh();
+            alert("OAuth 2.0 authentication successful!");
+          })
+          .catch((error) => {
+            console.error("OAuth 2.0 authentication failed:", error);
+            alert("OAuth 2.0 authentication failed: " + error.message);
+            saveButton.disabled = false;
+            saveButton.textContent = "Save & Authenticate";
+          });
       }
     };
 
@@ -927,7 +1238,23 @@ export default class TabSettingsModal {
       }
       const snippetsBarCheckbox = document.getElementById("showSnippetsBar") as HTMLInputElement;
       if (snippetsBarCheckbox) {
-        yasqe.setSnippetsBarVisible(snippetsBarCheckbox.checked);
+        // Save globally to config and persistent storage
+        this.tab.yasgui.config.showSnippetsBar = snippetsBarCheckbox.checked;
+        this.tab.yasgui.persistentConfig.setShowSnippetsBar(snippetsBarCheckbox.checked);
+
+        // Apply to all tabs by updating each Yasqe instance's config and refreshing
+        this.tab.yasgui.persistentConfig.getTabs().forEach((tabId: string) => {
+          const tab = this.tab.yasgui.getTab(tabId);
+          if (tab) {
+            const tabYasqe = tab.getYasqe();
+            if (tabYasqe) {
+              // Update the individual Yasqe instance's config
+              tabYasqe.config.showSnippetsBar = snippetsBarCheckbox.checked;
+              // Refresh the snippets bar to reflect the change
+              tabYasqe.refreshSnippetsBar();
+            }
+          }
+        });
       }
       yasqe.saveQuery();
     }
@@ -1450,6 +1777,28 @@ export default class TabSettingsModal {
     aboutSection.appendChild(footerInfo);
 
     container.appendChild(aboutSection);
+
+    // Storage Management Section
+    const storageSection = document.createElement("div");
+    addClass(storageSection, "settingsSection");
+
+    const storageTitle = document.createElement("h3");
+    storageTitle.textContent = "Storage Management";
+    storageSection.appendChild(storageTitle);
+
+    const storageDescription = document.createElement("p");
+    storageDescription.textContent =
+      "Clear all locally stored data including tabs, queries, endpoint configurations, and preferences. This action cannot be undone.";
+    addClass(storageDescription, "settingsHelp");
+    storageSection.appendChild(storageDescription);
+
+    const clearStorageButton = document.createElement("button");
+    clearStorageButton.textContent = "Clear Persistent Storage";
+    addClass(clearStorageButton, "dangerButton");
+    clearStorageButton.onclick = () => this.clearPersistentStorage();
+    storageSection.appendChild(clearStorageButton);
+
+    container.appendChild(storageSection);
   }
 
   private createAboutLink(label: string, url: string, description: string): HTMLElement {
@@ -1473,6 +1822,27 @@ export default class TabSettingsModal {
     return linkContainer;
   }
 
+  private clearPersistentStorage() {
+    const confirmed = confirm(
+      "Are you sure you want to clear all persistent storage?\n\n" +
+        "This will delete:\n" +
+        "- All saved tabs and queries\n" +
+        "- Endpoint configurations and history\n" +
+        "- Authentication settings\n" +
+        "- Editor preferences\n" +
+        "- Prefixes\n\n" +
+        "This action cannot be undone and the page will reload.",
+    );
+
+    if (confirmed) {
+      // Clear persistent storage
+      PersistentConfig.clear();
+
+      // Reload the page to reinitialize with empty storage
+      window.location.reload();
+    }
+  }
+
   public destroy() {
     if (this.modalOverlay && this.modalOverlay.parentNode) {
       this.modalOverlay.parentNode.removeChild(this.modalOverlay);

package/src/defaults.ts

@@ -22,7 +22,6 @@ export default function initialize(): Config<CatalogueItem> {
       return "yagui_" + id;
     },
     tabName: "Query",
-    corsProxy: undefined,
     persistencyExpire: 60 * 60 * 24 * 30,
     persistenceLabelResponse: "response",
     persistenceLabelConfig: "config",
@@ -31,6 +30,7 @@ export default function initialize(): Config<CatalogueItem> {
     theme: undefined,
     showThemeToggle: true,
     orientation: "vertical",
+    showSnippetsBar: true,
     endpointButtons: undefined,
     endpointCatalogueOptions: {
       getData: () => {

package/src/endpointSelect.scss

@@ -4,6 +4,7 @@
     margin: 4px 0px;
     border: 2px solid #ccc;
     width: 100%;
+    min-width: 200px;
     &:hover {
       border-color: #bbb;
     }
@@ -125,6 +126,11 @@
     align-items: center;
     gap: 4px;
     margin-left: 4px;
+
+    // Hide on small screens (mobile)
+    @media (max-width: 768px) {
+      display: none;
+    }
   }
 
   .endpointButton {
@@ -152,5 +158,11 @@
       outline: 2px solid var(--yasgui-endpoint-button-focus, #5cb3fd);
       outline-offset: 2px;
     }
+
+    // Reduce padding on medium screens
+    @media (max-width: 1024px) {
+      padding: 4px 8px;
+      font-size: 12px;
+    }
   }
 }