sqlite-hub 0.7.0 → 0.9.0

package/frontend/js/components/connectionCard.js

@@ -73,17 +73,16 @@ export function renderConnectionCard(connection, activeConnectionId) {
       <div class="border-t border-outline-variant/10 bg-surface-container-low px-4 py-3">
         <div class="grid grid-cols-[minmax(0,1fr)_5.1rem_5.8rem] gap-2">
           <button
-            class="clipped-corner min-w-0 bg-primary-container px-3 py-2.5 text-[10px] font-black uppercase tracking-[0.18em] text-on-primary shadow-[0_0_18px_-10px_rgba(252,227,0,0.7)] transition-[filter,box-shadow] hover:brightness-105"
+            class="signature-button"
             data-action="select-connection"
             data-connection-id="${escapeHtml(connection.id)}"
-            style="--clip-path: ${clipPath};"
             type="button"
             title="${primaryActionLabel}"
           >
             ${primaryActionLabel}
           </button>
           <button
-            class="border border-outline-variant/20 bg-surface-container px-3 py-2.5 text-[10px] font-bold uppercase tracking-[0.18em] text-on-surface-variant transition-colors hover:bg-surface-container-highest"
+            class="standard-button"
             data-action="edit-connection"
             data-connection-id="${escapeHtml(connection.id)}"
             type="button"
@@ -91,7 +90,7 @@ export function renderConnectionCard(connection, activeConnectionId) {
             Edit
           </button>
           <button
-            class="border border-outline-variant/20 bg-surface-container px-3 py-2.5 text-[10px] font-bold uppercase tracking-[0.18em] text-on-surface-variant transition-colors hover:bg-surface-container-highest"
+            class="delete-button"
             data-action="remove-connection"
             data-connection-id="${escapeHtml(connection.id)}"
             type="button"

package/frontend/js/components/emptyState.js

@@ -22,7 +22,7 @@ function renderRecentConnections(recentConnections = []) {
         .map(
           (connection) => `
             <button
-              class="flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 py-3 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high"
+              class="control-button flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high"
               data-action="select-connection"
               data-connection-id="${escapeHtml(connection.id)}"
               type="button"
@@ -135,7 +135,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
             ? `
               <div class="mx-auto mt-8 grid w-full max-w-3xl grid-cols-1 gap-4 px-6 md:grid-cols-3">
                 <button
-                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  class="standard-button"
                   data-action="navigate"
                   data-to="/overview"
                   type="button"
@@ -143,7 +143,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
                   Overview
                 </button>
                 <button
-                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  class="standard-button"
                   data-action="navigate"
                   data-to="/structure"
                   type="button"
@@ -151,7 +151,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
                   Structure
                 </button>
                 <button
-                  class="border border-outline-variant/20 bg-surface-container-low px-5 py-4 font-headline text-sm font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container/30 hover:text-primary-container"
+                  class="standard-button"
                   data-action="navigate"
                   data-to="/editor"
                   type="button"

package/frontend/js/components/modal.js

@@ -1,10 +1,18 @@
-import { escapeHtml, truncateMiddle } from "../utils/format.js";
+import { escapeHtml, highlightSql, truncateMiddle } from "../utils/format.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
 import {
   analyzeQueryChartResult,
   getQueryChartTypeLabel,
   QUERY_CHART_TYPES,
 } from "../lib/queryCharts.js";
+import {
+  hasDefaultMediaTaggingTagTable,
+  hasDefaultMediaTaggingMappingTable,
+  MEDIA_TAGGING_DEFAULT_MAPPING_TABLE,
+  MEDIA_TAGGING_DEFAULT_MAPPING_TABLE_SQL,
+  MEDIA_TAGGING_DEFAULT_TAG_TABLE,
+  MEDIA_TAGGING_DEFAULT_TAG_TABLE_SQL,
+} from "../lib/mediaTaggingDefaults.js";
 
 function renderField({ label, name, type = "text", placeholder = "", value = "" }) {
   return `
@@ -13,7 +21,7 @@ function renderField({ label, name, type = "text", placeholder = "", value = ""
         ${escapeHtml(label)}
       </span>
       <input
-        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
         name="${escapeHtml(name)}"
         placeholder="${escapeHtml(placeholder)}"
         type="${escapeHtml(type)}"
@@ -25,18 +33,43 @@ function renderField({ label, name, type = "text", placeholder = "", value = ""
 
 function renderCheckboxField({ label, name, checked = false, text }) {
   return `
-    <label class="flex items-center gap-3 border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface">
-      <input
-        class="rounded-none border-outline bg-surface-container-lowest text-primary-container focus:ring-primary-container"
-        ${checked ? "checked" : ""}
-        name="${escapeHtml(name)}"
-        type="checkbox"
-      />
-      ${escapeHtml(text || label)}
+    <label class="flex flex-col gap-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        ${escapeHtml(label)}
+      </span>
+      <span class="standard-checkbox">
+        <input
+          ${checked ? "checked" : ""}
+          name="${escapeHtml(name)}"
+          type="checkbox"
+        />
+        <span>${escapeHtml(text || label)}</span>
+      </span>
     </label>
   `;
 }
 
+function renderSqlPreviewField(value, minHeightClass = "sql-highlight-shell--tall") {
+  return `
+    <div class="sql-highlight-shell ${minHeightClass}">
+      <div class="query-editor-layer sql-highlight-layer">
+        <div
+          aria-hidden="true"
+          class="query-editor-highlight sql-highlight-content"
+          data-query-editor-highlight
+        >${value ? highlightSql(value) : ""}</div>
+        <textarea
+          class="query-editor-input sql-highlight-input custom-scrollbar"
+          data-sql-highlight="true"
+          readonly
+          spellcheck="false"
+          wrap="off"
+        >${escapeHtml(value)}</textarea>
+      </div>
+    </div>
+  `;
+}
+
 function renderFileField({
   label,
   name,
@@ -50,7 +83,7 @@ function renderFileField({
       </span>
       <input
         accept="${escapeHtml(accept)}"
-        class="block w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface file:mr-4 file:border-0 file:bg-primary-container file:px-3 file:py-2 file:text-xs file:font-bold file:text-on-primary"
+        class="control-input block w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface file:mr-4 file:border-0 file:bg-primary-container file:px-3 file:py-2 file:text-xs file:font-bold file:text-on-primary"
         name="${escapeHtml(name)}"
         type="file"
       />
@@ -66,11 +99,11 @@ function renderFileField({
 function renderSelectField({ label, name, value = "", options = [], bind = "" }) {
   return `
     <label class="block space-y-2">
-      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+      <span class="block text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         ${escapeHtml(label)}
       </span>
       <select
-        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
         ${bind ? `data-bind="${escapeHtml(bind)}"` : ""}
         ${name ? `name="${escapeHtml(name)}"` : ""}
       >
@@ -124,14 +157,14 @@ function renderOpenConnectionForm(modal) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          class="standard-button"
           type="submit"
         >
           ${modal.submitting ? "Opening..." : "Open Database"}
@@ -198,14 +231,14 @@ function renderEditConnectionForm(modal) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          class="standard-button"
           type="submit"
         >
           ${modal.submitting ? "Saving..." : "Save Changes"}
@@ -231,14 +264,14 @@ function renderCreateDatabaseForm(modal) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          class="standard-button"
           type="submit"
         >
           ${modal.submitting ? "Creating..." : "Create Database"}
@@ -265,7 +298,7 @@ function renderImportTargetOptions(state) {
         Import Target
       </span>
       <select
-        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
         name="targetMode"
       >
         ${
@@ -286,7 +319,7 @@ function renderImportTargetOptions(state) {
               Recent Connection
             </span>
             <select
-              class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+              class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
               name="targetConnectionId"
             >
               ${recentOptions}
@@ -324,14 +357,14 @@ function renderImportSqlForm(modal, state) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          class="standard-button"
           type="submit"
         >
           ${modal.submitting ? "Importing..." : "Import SQL Dump"}
@@ -393,14 +426,14 @@ function renderDeleteRowConfirmForm(modal) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="border border-error/25 bg-error-container/10 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-error"
+          class="delete-button"
           type="submit"
         >
           ${modal.submitting ? "Deleting..." : "Delete Row"}
@@ -633,14 +666,14 @@ function renderChartEditorForm(modal, state) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary"
+          class="standard-button"
           type="submit"
         >
           ${modal.submitting ? "Saving..." : draft.mode === "edit" ? "Save Chart" : "Create Chart"}
@@ -666,14 +699,14 @@ function renderDeleteChartForm(modal) {
       ${renderError(modal.error)}
       <div class="flex items-center justify-end gap-3 pt-2">
         <button
-          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          class="standard-button"
           data-action="close-modal"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="border border-error/25 bg-error-container/10 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-error"
+          class="delete-button"
           type="submit"
         >
           ${modal.submitting ? "Deleting..." : "Delete Chart"}
@@ -683,6 +716,167 @@ function renderDeleteChartForm(modal) {
   `;
 }
 
+function renderDeleteQueryHistoryForm(modal) {
+  return `
+    <form class="space-y-5" data-form="delete-query-history-confirm">
+      <div class="space-y-3">
+        <p class="text-sm leading-7 text-on-surface">
+          Delete query <span class="font-bold text-primary-container">${escapeHtml(
+            modal.queryTitle ?? "SQL query"
+          )}</span>?
+        </p>
+        <p class="text-sm leading-7 text-on-surface-variant/65">
+          This removes the query-history entry and all recorded runs linked to it.
+        </p>
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="standard-button"
+          data-action="close-modal"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="delete-button"
+          type="submit"
+        >
+          ${modal.submitting ? "Deleting..." : "Delete Query"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+function renderCreateMediaTaggingMappingTableForm(modal, state) {
+  const mappingExists = hasDefaultMediaTaggingMappingTable(state.mediaTagging.schemaTables ?? []);
+  const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
+
+  return `
+    <form class="space-y-5" data-form="create-media-tagging-mapping-table">
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Mapping Table
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-sm text-on-surface">
+          ${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)}
+        </div>
+      </div>
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Status
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface">
+          ${
+            mappingExists
+              ? `${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)} already exists in the active database.`
+              : `${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)} does not exist yet.`
+          }
+          ${
+            readOnly && !mappingExists
+              ? `<div class="mt-2 text-on-surface-variant/60">The active connection is read-only, so the table cannot be created here.</div>`
+              : ""
+          }
+        </div>
+      </div>
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          SQL
+        </div>
+        ${renderSqlPreviewField(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE_SQL)}
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="standard-button"
+          data-action="close-modal"
+          type="button"
+        >
+          Close
+        </button>
+        ${
+          !mappingExists
+            ? `
+                <button
+                  class="standard-button"
+                  type="submit"
+                  ${readOnly ? "disabled" : ""}
+                >
+                  ${modal.submitting ? "Creating..." : "Create Table"}
+                </button>
+              `
+            : ""
+        }
+      </div>
+    </form>
+  `;
+}
+
+function renderCreateMediaTaggingTagTableForm(modal, state) {
+  const tagTableExists = hasDefaultMediaTaggingTagTable(state.mediaTagging.schemaTables ?? []);
+  const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
+
+  return `
+    <form class="space-y-5" data-form="create-media-tagging-tag-table">
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Tag Table
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-sm text-on-surface">
+          ${escapeHtml(MEDIA_TAGGING_DEFAULT_TAG_TABLE)}
+        </div>
+      </div>
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Status
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface">
+          ${
+            tagTableExists
+              ? `${escapeHtml(MEDIA_TAGGING_DEFAULT_TAG_TABLE)} already exists in the active database.`
+              : `${escapeHtml(MEDIA_TAGGING_DEFAULT_TAG_TABLE)} does not exist yet.`
+          }
+          ${
+            readOnly && !tagTableExists
+              ? `<div class="mt-2 text-on-surface-variant/60">The active connection is read-only, so the table cannot be created here.</div>`
+              : ""
+          }
+        </div>
+      </div>
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          SQL
+        </div>
+        ${renderSqlPreviewField(MEDIA_TAGGING_DEFAULT_TAG_TABLE_SQL)}
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="standard-button"
+          data-action="close-modal"
+          type="button"
+        >
+          Close
+        </button>
+        ${
+          !tagTableExists
+            ? `
+                <button
+                  class="standard-button"
+                  type="submit"
+                  ${readOnly ? "disabled" : ""}
+                >
+                  ${modal.submitting ? "Creating..." : "Create Table"}
+                </button>
+              `
+            : ""
+        }
+      </div>
+    </form>
+  `;
+}
+
 export function renderModal(state) {
   const modal = state.modal;
 
@@ -726,6 +920,21 @@ export function renderModal(state) {
       title: "Delete Chart",
       body: renderDeleteChartForm(modal),
     },
+    "delete-query-history": {
+      eyebrow: "History // Confirm query deletion",
+      title: "Delete Query",
+      body: renderDeleteQueryHistoryForm(modal),
+    },
+    "create-media-tagging-tag-table": {
+      eyebrow: "Media Tagging // Create default tag table",
+      title: "Create Tag Table",
+      body: renderCreateMediaTaggingTagTableForm(modal, state),
+    },
+    "create-media-tagging-mapping-table": {
+      eyebrow: "Media Tagging // Create default join table",
+      title: "Create Mapping Table",
+      body: renderCreateMediaTaggingMappingTableForm(modal, state),
+    },
   };
 
   const config = contentByKind[modal.kind];
@@ -747,7 +956,7 @@ export function renderModal(state) {
             </h2>
           </div>
           <button
-            class="flex h-10 w-10 items-center justify-center border border-outline-variant/20 text-on-surface-variant hover:bg-surface-container-highest hover:text-primary-container"
+            class="control-icon-button border border-outline-variant/20 text-on-surface-variant hover:bg-surface-container-highest hover:text-primary-container"
             data-action="close-modal"
             type="button"
           >

package/frontend/js/components/queryEditor.js

@@ -19,11 +19,16 @@ function renderHighlightedQuery(query) {
 
 function renderEditorSurface({ query }) {
   return `
-    <div class="flex min-h-0 flex-1 overflow-hidden">
-      <div class="flex w-12 flex-col items-center bg-surface-container-lowest py-4 font-mono text-xs select-none text-outline-variant/30">
-        ${renderLineNumbers(query)}
+    <div class="query-editor-shell flex min-h-0 flex-1 overflow-hidden">
+      <div class="flex w-12 min-h-0 overflow-hidden bg-surface-container-lowest py-4 font-mono text-xs select-none text-outline-variant/30">
+        <div
+          class="query-editor-gutter-track flex w-full flex-col items-center"
+          data-query-editor-gutter
+        >
+          ${renderLineNumbers(query)}
+        </div>
       </div>
-      <div class="relative flex-1 overflow-hidden bg-surface-container p-6 font-mono text-sm leading-relaxed">
+      <div class="relative min-h-0 flex-1 overflow-hidden bg-surface-container p-6 font-mono text-sm leading-relaxed">
         <div class="pointer-events-none absolute right-0 top-0 p-4 opacity-5">
           <span class="material-symbols-outlined text-[120px] font-thin">terminal</span>
         </div>
@@ -55,8 +60,7 @@ export function renderQueryEditor({
   editorVisible = true,
   historyVisible = true,
 }) {
-  const secondaryButtonClass =
-    "toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-on-surface transition-colors hover:border-primary-container hover:text-primary-container";
+  const secondaryButtonClass = "standard-button";
   const left = `
     <div class="flex items-center gap-2 bg-surface-container-lowest px-3 py-1">
       <span class="material-symbols-outlined text-xs text-[#FCE300]">database</span>
@@ -104,9 +108,8 @@ export function renderQueryEditor({
       ${exporting ? "Exporting..." : "Export CSV"}
     </button>
     <button
-      class="toolbar-button toolbar-button--primary bg-primary-container px-4 py-2 font-headline text-xs font-bold uppercase tracking-widest text-on-primary clipped-corner"
+      class="signature-button"
       data-action="execute-query"
-      style="--clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);"
       type="button"
     >
       ${executing ? "RUNNING..." : "EXECUTE"}

package/frontend/js/components/queryHistoryDetail.js

@@ -19,6 +19,10 @@ function renderDetailMetaItem(label, value) {
   `;
 }
 
+function canOpenQueryHistoryInCharts(item) {
+  return Boolean(item?.chartsEligible);
+}
+
 function renderRunItem(run) {
   return `
     <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
@@ -155,14 +159,14 @@ export function renderQueryHistoryDetail({
           </label>
           <div class="mt-2 flex gap-2">
             <input
-              class="flex-1 border border-outline-variant/20 bg-surface-container px-3 py-2 text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
+              class="control-input flex-1 border border-outline-variant/20 bg-surface-container text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
               name="title"
               placeholder="${escapeHtml(item.displayTitle)}"
               type="text"
               value="${escapeHtml(item.title ?? "")}"
             />
             <button
-              class="border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+              class="standard-button"
               type="submit"
             >
               Save
@@ -175,15 +179,30 @@ export function renderQueryHistoryDetail({
 
         <div class="mt-5 flex flex-wrap gap-2">
           <button
-            class="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            class="standard-button"
             data-action="open-query-history"
             data-history-id="${escapeHtml(item.id)}"
             type="button"
           >
             Open In Editor
           </button>
+          ${
+            canOpenQueryHistoryInCharts(item)
+              ? `
+                <button
+                  class="standard-button"
+                  data-action="navigate"
+                  data-to="/charts/${encodeURIComponent(item.id)}"
+                  type="button"
+                >
+                  <span class="material-symbols-outlined text-sm">bar_chart</span>
+                  Open In Charts
+                </button>
+              `
+              : ""
+          }
           <button
-            class="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            class="standard-button"
             data-action="run-query-history"
             data-history-id="${escapeHtml(item.id)}"
             type="button"
@@ -191,7 +210,7 @@ export function renderQueryHistoryDetail({
             Run Now
           </button>
           <button
-            class="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            class="standard-button"
             data-action="toggle-query-history-saved"
             data-history-id="${escapeHtml(item.id)}"
             data-next-value="${item.isSaved ? "false" : "true"}"
@@ -200,8 +219,8 @@ export function renderQueryHistoryDetail({
             ${item.isSaved ? "Unsave" : "Save"}
           </button>
           <button
-            class="toolbar-button border border-error/25 bg-error-container/20 px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-error transition-colors hover:border-error hover:bg-error-container/30"
-            data-action="delete-query-history"
+            class="delete-button"
+            data-action="open-delete-query-history-modal"
             data-history-id="${escapeHtml(item.id)}"
             type="button"
           >
@@ -228,7 +247,7 @@ export function renderQueryHistoryDetail({
           )}</textarea>
           <div class="mt-2 flex justify-end">
             <button
-              class="border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+              class="standard-button"
               type="submit"
             >
               Save Notes