@matdata/yasgui 5.12.0 → 5.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
   "description": "Yet Another SPARQL GUI",
-  "version": "5.12.0",
+  "version": "5.14.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",

package/src/TabSettingsModal.scss

@@ -160,6 +160,18 @@
   font-style: italic;
 }
 
+.settingsLink {
+  display: inline-block;
+  margin-top: 5px;
+  font-size: 13px;
+  color: var(--yasgui-accent-color, #337ab7);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 .settingsField {
   margin-bottom: 10px;
 }
@@ -278,6 +290,63 @@
   }
 }
 
+.keyValueContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.keyValueRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 8px;
+  align-items: center;
+
+  .keyInput,
+  .valueInput {
+    padding: 8px;
+    border: 1px solid var(--yasgui-input-border, #ccc);
+    border-radius: 4px;
+    font-size: 14px;
+    background-color: var(--yasgui-bg-secondary, white);
+    color: var(--yasgui-text-primary, #000);
+
+    &:focus {
+      outline: none;
+      border-color: var(--yasgui-input-focus, #337ab7);
+      box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.1);
+    }
+
+    &::placeholder {
+      color: var(--yasgui-text-secondary, #999);
+    }
+  }
+
+  .removeButton {
+    padding: 6px 10px;
+    background-color: var(--yasgui-danger-color, #d9534f);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--yasgui-danger-hover, #c9302c);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.3);
+    }
+
+    i {
+      pointer-events: none;
+    }
+  }
+}
+
 .prefixTextarea {
   width: 100%;
   padding: 10px;

package/src/TabSettingsModal.ts

@@ -24,6 +24,9 @@ const AcceptHeaderGraphMap: { key: string; value: string }[] = [
   { key: "TSV", value: "text/tab-separated-values,*/*;q=0.9" },
 ];
 
+// Type for key-value pairs (headers, args, etc.)
+type KeyValuePair = { name: string; value: string };
+
 // Default API Key header name
 const DEFAULT_API_KEY_HEADER = "X-API-Key";
 
@@ -452,7 +455,7 @@ export default class TabSettingsModal {
     });
 
     const storedDarkTheme = this.tab.yasgui.persistentConfig.getCodeMirrorTheme("dark");
-    themeDarkSelect.value = storedDarkTheme || "material-palenight";
+    themeDarkSelect.value = storedDarkTheme || "github-dark";
 
     themeDarkSection.appendChild(themeDarkLabel);
     themeDarkSection.appendChild(themeDarkHelp);
@@ -468,9 +471,7 @@ export default class TabSettingsModal {
     themeReferenceLink.target = "_blank";
     themeReferenceLink.rel = "noopener noreferrer";
     themeReferenceLink.textContent = "Preview CodeMirror themes →";
-    themeReferenceLink.style.display = "inline-block";
-    themeReferenceLink.style.marginTop = "5px";
-    themeReferenceLink.style.fontSize = "13px";
+    addClass(themeReferenceLink, "settingsLink");
 
     themeReferenceSection.appendChild(themeReferenceLink);
     container.appendChild(themeReferenceSection);
@@ -1382,6 +1383,81 @@ export default class TabSettingsModal {
     acceptGraphSelect.setAttribute("data-config", "acceptHeaderGraph");
     acceptGraphSection.appendChild(acceptGraphSelect);
     container.appendChild(acceptGraphSection);
+
+    // Custom Headers section
+    const headersSection = this.createSection("Custom HTTP Headers");
+    const headersContainer = document.createElement("div");
+    addClass(headersContainer, "keyValueContainer");
+    headersContainer.setAttribute("data-config", "headers");
+
+    // Get existing headers
+    const existingHeaders = typeof reqConfig.headers === "function" ? {} : reqConfig.headers || {};
+    const headerPairs: KeyValuePair[] = Object.entries(existingHeaders).map(([name, value]) => ({
+      name,
+      value,
+    }));
+
+    // Draw existing headers
+    headerPairs.forEach((pair, index) => {
+      this.createKeyValueRow(headersContainer, pair, index);
+    });
+
+    // Add empty row for adding new headers
+    this.createKeyValueRow(headersContainer, { name: "", value: "" }, headerPairs.length);
+
+    headersSection.appendChild(headersContainer);
+    container.appendChild(headersSection);
+  }
+
+  private createKeyValueRow(container: HTMLElement, pair: KeyValuePair, index: number) {
+    const row = document.createElement("div");
+    addClass(row, "keyValueRow");
+
+    const nameInput = document.createElement("input");
+    nameInput.type = "text";
+    nameInput.placeholder = "Header Name";
+    nameInput.value = pair.name;
+    addClass(nameInput, "keyInput");
+
+    const valueInput = document.createElement("input");
+    valueInput.type = "text";
+    valueInput.placeholder = "Header Value";
+    valueInput.value = pair.value;
+    addClass(valueInput, "valueInput");
+
+    const removeButton = document.createElement("button");
+    removeButton.type = "button";
+    removeButton.innerHTML = '<i class="fas fa-times"></i>';
+    removeButton.title = "Remove header";
+    addClass(removeButton, "removeButton");
+
+    // Auto-add new empty row when typing in the last row
+    const onInput = () => {
+      const allRows = container.querySelectorAll(".keyValueRow");
+      const isLastRow = row === allRows[allRows.length - 1];
+
+      if (isLastRow && (nameInput.value.trim() || valueInput.value.trim())) {
+        // Add a new empty row
+        this.createKeyValueRow(container, { name: "", value: "" }, allRows.length);
+      }
+    };
+
+    nameInput.addEventListener("input", onInput);
+    valueInput.addEventListener("input", onInput);
+
+    removeButton.onclick = () => {
+      row.remove();
+      // Ensure there's always at least one empty row
+      const remainingRows = container.querySelectorAll(".keyValueRow");
+      if (remainingRows.length === 0) {
+        this.createKeyValueRow(container, { name: "", value: "" }, 0);
+      }
+    };
+
+    row.appendChild(nameInput);
+    row.appendChild(valueInput);
+    row.appendChild(removeButton);
+    container.appendChild(row);
   }
 
   private createSection(title: string): HTMLElement {
@@ -1493,7 +1569,7 @@ export default class TabSettingsModal {
       const currentMode = this.tab.yasgui.getTheme();
       const themeToApply =
         currentMode === "dark"
-          ? codeMirrorThemeDarkSelect?.value || "material-palenight"
+          ? codeMirrorThemeDarkSelect?.value || "github-dark"
           : codeMirrorThemeLightSelect?.value || "default";
 
       // Apply theme to all CodeMirror instances
@@ -1548,6 +1624,22 @@ export default class TabSettingsModal {
           updates[config] = (select as HTMLSelectElement).value;
         }
       });
+
+      // Save custom headers
+      const headersContainer = requestContent.querySelector(".keyValueContainer[data-config='headers']");
+      if (headersContainer) {
+        const headers: { [key: string]: string } = {};
+        const rows = headersContainer.querySelectorAll(".keyValueRow");
+        rows.forEach((row) => {
+          const nameInput = row.querySelector(".keyInput") as HTMLInputElement;
+          const valueInput = row.querySelector(".valueInput") as HTMLInputElement;
+          if (nameInput && valueInput && nameInput.value.trim()) {
+            headers[nameInput.value.trim()] = valueInput.value;
+          }
+        });
+        updates.headers = headers;
+      }
+
       this.tab.setRequestConfig(updates);
     }
 

package/src/ThemeManager.ts

@@ -74,10 +74,10 @@ export class ThemeManager {
     let cmTheme: string;
     if (this.persistentConfig) {
       const storedTheme = this.persistentConfig.getCodeMirrorTheme(theme);
-      cmTheme = storedTheme || (theme === "dark" ? "material-palenight" : "default");
+      cmTheme = storedTheme || (theme === "dark" ? "github-dark" : "default");
     } else {
       // Fallback if persistentConfig not yet available
-      cmTheme = theme === "dark" ? "material-palenight" : "default";
+      cmTheme = theme === "dark" ? "github-dark" : "default";
     }
 
     // Find all CodeMirror instances within the root element

package/src/github-dark-theme.scss

@@ -62,7 +62,7 @@
 }
 
 .cm-s-github-dark span.cm-atom {
-  color: #79c0ff; // Variables (?var, $var)
+  color: #f3f9ff; // Variables (?var, $var)
 }
 
 .cm-s-github-dark span.cm-string {
@@ -70,19 +70,19 @@
 }
 
 .cm-s-github-dark span.cm-string-2 {
-  color: #ffa657; // Prefixed names (rdf:type, foaf:name)
+  color: #5784ff; // Prefix namespace (rdf:, foaf:)
 }
 
 .cm-s-github-dark span.cm-variable-3 {
-  color: #d2a8ff; // URIs in angle brackets
+  color: #1b9b8e; // URIs in angle brackets
 }
 
 .cm-s-github-dark span.cm-number {
-  color: #79c0ff; // Numbers
+  color: #4faaf9; // Numbers
 }
 
 .cm-s-github-dark span.cm-comment {
-  color: #8b949e; // Comments
+  color: #696e74; // Comments
   font-style: italic;
 }
 
@@ -127,7 +127,32 @@
 }
 
 .cm-s-github-dark span.cm-bracket {
-  color: #c9d1d9; // Brackets
+  color: #c9d1d9; // Brackets (fallback)
+}
+
+// Rainbow bracket colors
+.cm-s-github-dark span.cm-bracket-level-0 {
+  color: #ffd700; // Gold
+}
+
+.cm-s-github-dark span.cm-bracket-level-1 {
+  color: #d2a8ff; // Purple
+}
+
+.cm-s-github-dark span.cm-bracket-level-2 {
+  color: #d85896; // Blue
+}
+
+.cm-s-github-dark span.cm-bracket-level-3 {
+  color: #229922; // Green
+}
+
+.cm-s-github-dark span.cm-bracket-paren {
+  color: #c9d1d9; // Constant color for () and []
+}
+
+.cm-s-github-dark span.cm-bracket-mismatch {
+  color: #ff7b72; // Red for mismatched brackets
 }
 
 .cm-s-github-dark span.cm-error {

package/src/queryManagement/QueryBrowser.ts

@@ -3,7 +3,7 @@ import { addClass, removeClass } from "@matdata/yasgui-utils";
 import type { WorkspaceConfig, FolderEntry } from "./types";
 import { filterFolderEntriesByName } from "./browserFilter";
 import { getWorkspaceBackend } from "./backends/getWorkspaceBackend";
-import { asWorkspaceBackendError } from "./backends/errors";
+import { asWorkspaceBackendError, isWorkspaceBackendError, WorkspaceBackendError } from "./backends/errors";
 import { getEndpointToAutoSwitch } from "./openManagedQuery";
 import { hashQueryText } from "./textHash";
 import type { BackendType, VersionRef, ManagedTabMetadata } from "./types";
@@ -36,7 +36,7 @@ export default class QueryBrowser {
   private expandedFolderIds = new Set<string>();
   private folderEntriesById = new Map<string, FolderEntry[]>();
   private folderLoadingById = new Set<string>();
-  private folderErrorById = new Map<string, string>();
+  private folderErrorById = new Map<string, WorkspaceBackendError>();
 
   private debouncedSearchHandle?: number;
 
@@ -315,7 +315,7 @@ export default class QueryBrowser {
       this.folderEntriesById.set(key, entries);
     } catch (e) {
       const err = asWorkspaceBackendError(e);
-      this.folderErrorById.set(key, err.message || "Failed to load folder");
+      this.folderErrorById.set(key, err);
       this.folderEntriesById.set(key, []);
     } finally {
       this.folderLoadingById.delete(key);
@@ -325,6 +325,22 @@ export default class QueryBrowser {
   private formatStatusError(err: Error, workspaceType: WorkspaceConfig["type"]) {
     const message = err.message || "Unknown error";
 
+    // Check for authentication/authorization errors
+    if (isWorkspaceBackendError(err)) {
+      if (err.code === "AUTH_FAILED") {
+        return `⚠️ Authentication failed. Please check your workspace configuration and credentials in Settings → Workspaces.`;
+      }
+      if (err.code === "FORBIDDEN") {
+        return `⚠️ Access forbidden. Please verify your ${workspaceType === "git" ? "token permissions" : "endpoint authentication"} in Settings → Workspaces.`;
+      }
+      if (err.code === "NETWORK_ERROR") {
+        return `⚠️ Unable to connect to workspace. Please check your workspace configuration and network connection.`;
+      }
+      if (err.code === "NOT_FOUND") {
+        return `⚠️ Workspace not found. Please verify your workspace configuration in Settings → Workspaces.`;
+      }
+    }
+
     if (message.includes("No GitProviderClient configured")) {
       return "Git workspaces require a supported provider. Supported: GitHub, GitLab, Bitbucket Cloud (bitbucket.org), and Gitea. For self-hosted/enterprise instances, configure a git workspace 'provider' and/or 'apiBaseUrl'.";
     }
@@ -333,7 +349,8 @@ export default class QueryBrowser {
       return "This workspace backend is not supported yet.";
     }
 
-    return message;
+    // Generic error with helpful suggestion
+    return `⚠️ Failed to load workspace: ${message}. Please check your workspace configuration and authentication in Settings → Workspaces.`;
   }
 
   private clearList() {
@@ -923,7 +940,7 @@ export default class QueryBrowser {
               addClass(error, "yasgui-query-browser__tree-meta");
               addClass(error, "yasgui-query-browser__tree-meta--error");
               error.setAttribute("style", makeIndentStyle(depth + 1));
-              error.textContent = err;
+              error.textContent = this.formatStatusError(err, backend.type);
               this.listEl.appendChild(error);
             }
 
@@ -1041,6 +1058,15 @@ export default class QueryBrowser {
       if (runId !== this.refreshRunId) return;
 
       const rootKey = this.folderKey(undefined);
+
+      // Check if root folder failed to load
+      const rootError = this.folderErrorById.get(rootKey);
+      if (rootError) {
+        this.setStatus(this.formatStatusError(rootError, workspace.type));
+        this.clearList();
+        return;
+      }
+
       const rootEntries = this.folderEntriesById.get(rootKey) || [];
 
       const expandedIds = Array.from(this.expandedFolderIds).sort();
@@ -1053,8 +1079,9 @@ export default class QueryBrowser {
             .sort()
             .join("|");
           const loading = this.folderLoadingById.has(key) ? "1" : "0";
-          const err = this.folderErrorById.get(key) || "";
-          return `${key}:${loading}:${err}:${entryPart}`;
+          const err = this.folderErrorById.get(key);
+          const errStr = err ? `${err.code}:${err.message}` : "";
+          return `${key}:${loading}:${errStr}:${entryPart}`;
         })
         .join(";");
 

package/src/queryManagement/SaveManagedQueryModal.ts

@@ -185,7 +185,7 @@ export default class SaveManagedQueryModal {
     this.nameEl.addEventListener("input", () => {
       if (this.filenameTouched) return;
       const suggested = this.suggestFilenameFromName(this.nameEl.value);
-      if (suggested) this.filenameEl.value = suggested.replace(/\.sparql$/i, "");
+      if (suggested) this.filenameEl.value = suggested.replace(/\.(rq|sparql)$/i, "");
     });
 
     this.filenameEl = document.createElement("input");
@@ -373,7 +373,7 @@ export default class SaveManagedQueryModal {
     let resolvedFilename = filename;
 
     if (isGit) {
-      resolvedFilename = resolvedFilename.replace(/\.sparql$/i, "");
+      resolvedFilename = resolvedFilename.replace(/\.(rq|sparql)$/i, "");
       if (!resolvedFilename) {
         window.alert("Please enter a filename");
         return;
@@ -446,7 +446,7 @@ export default class SaveManagedQueryModal {
 
     const defaultFilename =
       defaults?.filename ?? (defaultName ? (this.suggestFilenameFromName(defaultName) ?? "") : "");
-    this.filenameEl.value = defaultFilename.replace(/\.sparql$/i, "");
+    this.filenameEl.value = defaultFilename.replace(/\.(rq|sparql)$/i, "");
     this.messageEl.value = defaults?.message ?? "";
 
     this.folderPickerOpen = false;

package/src/queryManagement/backends/BitbucketProviderClient.ts

@@ -217,9 +217,9 @@ export class BitbucketProviderClient extends BaseGitProviderClient {
         }
 
         if (v.type === "commit_file") {
-          if (!/\.sparql$/i.test(name)) continue;
+          if (!/\.(rq|sparql)$/i.test(name)) continue;
           const id = relPath ? this.joinPath(relPath, name) : name;
-          const label = name.replace(/\.sparql$/i, "");
+          const label = name.replace(/\.(rq|sparql)$/i, "");
           entries.push({ kind: "query", id, label, parentId: relPath || undefined });
         }
       }

package/src/queryManagement/backends/GiteaProviderClient.ts

@@ -137,9 +137,9 @@ export class GiteaProviderClient extends BaseGitProviderClient {
       }
 
       if (item.type === "file") {
-        if (!/\.sparql$/i.test(item.name)) continue;
+        if (!/\.(rq|sparql)$/i.test(item.name)) continue;
         const id = relPath ? this.joinPath(relPath, item.name) : item.name;
-        const label = item.name.replace(/\.sparql$/i, "");
+        const label = item.name.replace(/\.(rq|sparql)$/i, "");
         entries.push({ kind: "query", id, label, parentId: relPath || undefined });
       }
     }

package/src/queryManagement/backends/GithubProviderClient.ts

@@ -148,11 +148,11 @@ export class GithubProviderClient extends BaseGitProviderClient {
       }
 
       if (item.type === "file") {
-        if (!/\.sparql$/i.test(item.name)) continue;
+        if (!/\.(rq|sparql)$/i.test(item.name)) continue;
         const id = config.rootPath
           ? item.path.slice(this.joinPath(config.rootPath).length).replace(/^\//, "")
           : item.path;
-        const label = item.name.replace(/\.sparql$/i, "");
+        const label = item.name.replace(/\.(rq|sparql)$/i, "");
         entries.push({ kind: "query", id, label, parentId: relPath || undefined });
       }
     }

package/src/queryManagement/backends/GitlabProviderClient.ts

@@ -160,9 +160,9 @@ export class GitlabProviderClient extends BaseGitProviderClient {
       }
 
       if (item.type === "blob") {
-        if (!/\.sparql$/i.test(item.name)) continue;
+        if (!/\.(rq|sparql)$/i.test(item.name)) continue;
         const id = relPath ? this.joinPath(relPath, item.name) : item.name;
-        const label = item.name.replace(/\.sparql$/i, "");
+        const label = item.name.replace(/\.(rq|sparql)$/i, "");
         entries.push({ kind: "query", id, label, parentId: relPath || undefined });
       }
     }

package/src/queryManagement/backends/InMemoryWorkspaceBackend.ts

@@ -65,7 +65,7 @@ export default class InMemoryWorkspaceBackend implements WorkspaceBackend {
         queries.push({
           kind: "query",
           id: queryId,
-          label: basename(queryId).replace(/\.sparql$/i, ""),
+          label: basename(queryId).replace(/\.(rq|sparql)$/i, ""),
           parentId: undefined,
         });
         continue;
@@ -75,7 +75,7 @@ export default class InMemoryWorkspaceBackend implements WorkspaceBackend {
         queries.push({
           kind: "query",
           id: queryId,
-          label: basename(queryId).replace(/\.sparql$/i, ""),
+          label: basename(queryId).replace(/\.(rq|sparql)$/i, ""),
           parentId: folder,
         });
         continue;
@@ -101,7 +101,7 @@ export default class InMemoryWorkspaceBackend implements WorkspaceBackend {
     if (!q) return [];
     const hits: FolderEntry[] = [];
     for (const queryId of this.versionsByQueryId.keys()) {
-      const label = basename(queryId).replace(/\.sparql$/i, "");
+      const label = basename(queryId).replace(/\.(rq|sparql)$/i, "");
       if (label.toLowerCase().includes(q)) {
         hits.push({ kind: "query", id: queryId, label, parentId: dirname(queryId) || undefined });
       }
@@ -159,7 +159,7 @@ export default class InMemoryWorkspaceBackend implements WorkspaceBackend {
     const versions = this.versionsByQueryId.get(queryId);
     if (!versions || versions.length === 0) throw new WorkspaceBackendError("NOT_FOUND", "Query not found");
 
-    const newId = dirname(queryId) ? `${dirname(queryId)}/${trimmed}.sparql` : `${trimmed}.sparql`;
+    const newId = dirname(queryId) ? `${dirname(queryId)}/${trimmed}.rq` : `${trimmed}.rq`;
     if (newId === queryId) return;
     if (this.versionsByQueryId.has(newId))
       throw new WorkspaceBackendError("CONFLICT", "A query with this name already exists");

package/src/queryManagement/normalizeQueryFilename.ts

@@ -3,6 +3,8 @@ export function normalizeQueryFilename(rawName: string): string {
   if (!name) throw new Error("Filename is required");
 
   const lower = name.toLowerCase();
-  if (lower.endsWith(".sparql")) return name;
-  return `${name}.sparql`;
+  // Accept both .rq and .sparql extensions for backwards compatibility
+  if (lower.endsWith(".rq") || lower.endsWith(".sparql")) return name;
+  // Default to .rq for new files
+  return `${name}.rq`;
 }

package/src/version.ts

@@ -1,3 +1,3 @@
 // Version information for YASGUI
 // This file is auto-generated during build - do not edit manually
-export const VERSION = "5.12.0";
+export const VERSION = "5.14.0";