feat: add version history viewer for managed queries

docs/user-guide.md

@@ -1186,6 +1186,13 @@ The token must have access to the specific repository you're configuring as a wo
 - For SPARQL workspaces the URI is the managed-query IRI stored in the triplestore
 - For Git workspaces the URI is the browser-accessible link to the file in the repository (GitHub/GitLab/Bitbucket/Gitea)
 
+**View version history of a managed query:**
+
+- In the **Query Browser**: right-click any query and choose **History**
+- A dialog opens listing all saved versions of that query (newest first), each showing its date, author, and save message
+- Click a version in the list to preview its SPARQL text on the right side of the dialog
+- Click **Open in tab** to open the selected historical version in a new tab linked to the managed query; from there you can edit and re-save it to create a new version
+
 **Credentials:**
 
 - Tokens are stored locally, not saved together with the managed query and are not re-displayed after entry

packages/yasgui/src/queryManagement/QueryBrowser.ts

@@ -9,6 +9,7 @@ import { hashQueryText } from "./textHash";
 import type { BackendType, VersionRef, ManagedTabMetadata } from "./types";
 import { normalizeQueryFilename } from "./normalizeQueryFilename";
 import SaveManagedQueryModal from "./SaveManagedQueryModal";
+import QueryHistoryModal from "./QueryHistoryModal";
 
 import "./QueryBrowser.scss";
 
@@ -53,6 +54,8 @@ export default class QueryBrowser {
   private queryContextMenuEl?: HTMLElement;
   private queryContextMenuCleanup?: () => void;
 
+  private queryHistoryModal?: QueryHistoryModal;
+
   private entrySignature(entry: FolderEntry): string {
     const parent = entry.parentId || "";
     // Include label + parent so renames/moves force a re-render.
@@ -719,6 +722,14 @@ export default class QueryBrowser {
       }
     }
 
+    // History
+    menu.appendChild(
+      makeItem("History", async () => {
+        if (!this.queryHistoryModal) this.queryHistoryModal = new QueryHistoryModal(this.yasgui);
+        await this.queryHistoryModal.show(this.selectedWorkspaceId!, backend, backend.type, entry.id, entry.label);
+      }),
+    );
+
     // Rename
     if (backend.renameQuery) {
       const renameQuery = backend.renameQuery.bind(backend);

packages/yasgui/src/queryManagement/QueryHistoryModal.scss

@@ -0,0 +1,239 @@
+.queryHistoryModalOverlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--yasgui-overlay-bg, rgba(0, 0, 0, 0.5));
+  z-index: 10000;
+  align-items: center;
+  justify-content: center;
+
+  &.open {
+    display: flex;
+  }
+}
+
+.queryHistoryModal {
+  background: var(--yasgui-bg-primary, white);
+  border-radius: 8px;
+  width: 860px;
+  max-width: 95vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.queryHistoryModalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid var(--yasgui-border-color, #e0e0e0);
+  flex-shrink: 0;
+
+  h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--yasgui-text-primary, #000);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .closeButton {
+    background: none;
+    border: none;
+    font-size: 28px;
+    line-height: 1;
+    cursor: pointer;
+    color: var(--yasgui-text-secondary, #666);
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+
+    &:hover {
+      color: var(--yasgui-text-primary, #333);
+    }
+  }
+}
+
+.queryHistoryModalBody {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.queryHistoryVersionsPanel {
+  width: 280px;
+  min-width: 200px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--yasgui-border-color, #e0e0e0);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.queryHistoryPreviewPanel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.queryHistoryPanelTitle {
+  padding: 10px 12px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--yasgui-text-secondary, #666);
+  border-bottom: 1px solid var(--yasgui-border-color, #e0e0e0);
+  flex-shrink: 0;
+}
+
+.queryHistoryLoading,
+.queryHistoryError,
+.queryHistoryEmpty {
+  padding: 12px;
+  font-size: 13px;
+  color: var(--yasgui-text-secondary, #666);
+}
+
+.queryHistoryError {
+  color: var(--yasgui-error-color, #c00);
+}
+
+.queryHistoryVersionsList {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+}
+
+.queryHistoryVersionItem {
+  padding: 10px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--yasgui-border-color, #e0e0e0);
+  outline: none;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: var(--yasgui-bg-secondary, #f5f5f5);
+  }
+
+  &:focus-visible {
+    background: var(--yasgui-bg-secondary, #f5f5f5);
+    box-shadow: inset 0 0 0 2px var(--yasgui-accent-color, #337ab7);
+  }
+
+  &--selected {
+    background: var(--yasgui-accent-bg, #e8f0fe);
+    border-left: 3px solid var(--yasgui-accent-color, #337ab7);
+    padding-left: 9px;
+
+    &:hover {
+      background: var(--yasgui-accent-bg, #e8f0fe);
+    }
+  }
+}
+
+.queryHistoryVersionDate {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--yasgui-text-primary, #000);
+}
+
+.queryHistoryVersionMeta {
+  font-size: 12px;
+  color: var(--yasgui-text-secondary, #666);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.queryHistoryVersionMessage {
+  font-size: 12px;
+  color: var(--yasgui-text-secondary, #555);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-style: italic;
+}
+
+.queryHistoryPreviewEmpty {
+  padding: 24px 16px;
+  font-size: 13px;
+  color: var(--yasgui-text-secondary, #999);
+  text-align: center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.queryHistoryPreviewContent {
+  flex: 1;
+  margin: 0;
+  padding: 12px 16px;
+  overflow: auto;
+  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--yasgui-text-primary, #000);
+  background: var(--yasgui-bg-secondary, #f7f7f7);
+  white-space: pre-wrap;
+  word-break: break-word;
+  border-top: 1px solid var(--yasgui-border-color, #e0e0e0);
+}
+
+.queryHistoryModalFooter {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--yasgui-border-color, #e0e0e0);
+  flex-shrink: 0;
+
+  button {
+    padding: 8px 16px;
+    border-radius: 4px;
+    border: 1px solid var(--yasgui-border-color, #e0e0e0);
+    background: var(--yasgui-bg-primary, white);
+    color: var(--yasgui-text-primary, #000);
+    font-size: 14px;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background: var(--yasgui-bg-secondary, #f5f5f5);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &.primary {
+      background: var(--yasgui-accent-color, #337ab7);
+      color: #fff;
+      border-color: var(--yasgui-accent-color, #337ab7);
+      font-weight: 600;
+
+      &:hover:not(:disabled) {
+        background: var(--yasgui-accent-color-hover, #2a6496);
+        border-color: var(--yasgui-accent-color-hover, #2a6496);
+      }
+    }
+  }
+}