sqlite-hub 1.0.0 → 1.1.0

package/frontend/js/views/connections.js

@@ -1,39 +1,36 @@
-import { renderConnectionCard } from "../components/connectionCard.js";
-import { renderPageHeader } from "../components/pageHeader.js";
-import { escapeHtml } from "../utils/format.js";
+import { renderConnectionCard } from '../components/connectionCard.js';
+import { renderPageHeader } from '../components/pageHeader.js';
+import { escapeHtml } from '../utils/format.js';
 
 function renderConnectionsActionButton({
-  label,
-  icon,
-  action = "open-modal",
-  modal,
-  tone = "secondary",
-  disabled = false,
+    label,
+    icon,
+    action = 'open-modal',
+    modal,
+    tone = 'secondary',
+    disabled = false,
 }) {
-  const toneClassName =
-    tone === "primary"
-      ? "signature-button"
-      : "standard-button";
-  const iconClassName = "";
-  const modalAttribute = modal ? `data-modal="${modal}"` : "";
+    const toneClassName = tone === 'primary' ? 'signature-button' : 'standard-button';
+    const iconClassName = '';
+    const modalAttribute = modal ? `data-modal="${modal}"` : '';
 
-  return `
+    return `
     <button
       class="${toneClassName}"
       data-action="${escapeHtml(action)}"
       ${modalAttribute}
       type="button"
-      ${disabled ? "disabled" : ""}
+      ${disabled ? 'disabled' : ''}
     >
       <span>${label}</span>
-      <span class="material-symbols-outlined${iconClassName ? ` ${iconClassName}` : ""}">${icon}</span>
+      <span class="material-symbols-outlined${iconClassName ? ` ${iconClassName}` : ''}">${icon}</span>
     </button>
   `;
 }
 
 function renderConnectionsBody(state) {
-  if (state.connections.loading && !state.connections.recent.length) {
-    return `
+    if (state.connections.loading && !state.connections.recent.length) {
+        return `
       <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
         <div class="text-center text-on-surface-variant/40">
           <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
@@ -41,10 +38,10 @@ function renderConnectionsBody(state) {
         </div>
       </div>
     `;
-  }
+    }
 
-  if (state.connections.error) {
-    return `
+    if (state.connections.error) {
+        return `
       <div class="border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
         <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
           ${escapeHtml(state.connections.error.code)}
@@ -52,10 +49,10 @@ function renderConnectionsBody(state) {
         <div class="mt-2">${escapeHtml(state.connections.error.message)}</div>
       </div>
     `;
-  }
+    }
 
-  if (!state.connections.recent.length) {
-    return `
+    if (!state.connections.recent.length) {
+        return `
       <div class="border border-dashed border-outline-variant/20 bg-surface-container-low px-8 py-10 text-center">
         <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">database_off</span>
         <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
@@ -66,71 +63,69 @@ function renderConnectionsBody(state) {
         </p>
         <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
           ${renderConnectionsActionButton({
-            label: "Open Database",
-            icon: "folder_open",
-            modal: "open-connection",
-            tone: "primary",
+              label: 'Create Database',
+              icon: 'note_add',
+              modal: 'create-connection',
           })}
           ${renderConnectionsActionButton({
-            label: "Create Database",
-            icon: "note_add",
-            modal: "create-connection",
+              label: 'Open Database',
+              icon: 'folder_open',
+              modal: 'open-connection',
+              tone: 'primary',
           })}
         </div>
       </div>
     `;
-  }
+    }
 
-  return `
+    return `
     <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       ${state.connections.recent
-        .map((connection) =>
-          renderConnectionCard(connection, state.connections.active?.id)
-        )
-        .join("")}
+          .map(connection => renderConnectionCard(connection, state.connections.active?.id))
+          .join('')}
     </div>
   `;
 }
 
 export function renderConnectionsView(state) {
-  const actions = `
+    const actions = `
+    ${
+        state.connections.active
+            ? renderConnectionsActionButton({
+                  label: state.connections.backupLoading ? 'Creating Backup...' : 'Create Backup',
+                  icon: 'inventory_2',
+                  action: 'create-backup',
+                  disabled: state.connections.backupLoading,
+              })
+            : ''
+    }
     ${renderConnectionsActionButton({
-      label: "Open Database",
-      icon: "folder_open",
-      modal: "open-connection",
-      tone: "primary",
+        label: 'Create Database',
+        icon: 'note_add',
+        modal: 'create-connection',
     })}
     ${renderConnectionsActionButton({
-      label: "Create Database",
-      icon: "note_add",
-      modal: "create-connection",
+        label: 'Open Database',
+        icon: 'folder_open',
+        modal: 'open-connection',
+        tone: 'primary',
     })}
-    ${
-      state.connections.active
-        ? renderConnectionsActionButton({
-            label: state.connections.backupLoading ? "Creating Backup..." : "Create Backup",
-            icon: "inventory_2",
-            action: "create-backup",
-            disabled: state.connections.backupLoading,
-          })
-        : ""
-    }
   `;
 
-  return {
-    main: `
+    return {
+        main: `
       <section class="view-surface relative min-h-full overflow-hidden">
         <div class="data-grid-texture pointer-events-none absolute inset-0"></div>
         <div class="view-frame relative z-10">
           ${renderPageHeader({
-            title: "Connections",
-            subtitle: `Registry // Recent_Targets: ${String(state.connections.recent.length).padStart(2, "0")}`,
-            actions,
+              title: 'Connections',
+              subtitle: `Registry // Recent_Targets: ${String(state.connections.recent.length).padStart(2, '0')}`,
+              actions,
           })}
           ${renderConnectionsBody(state)}
         </div>
       </section>
     `,
-    panel: "",
-  };
+        panel: '',
+    };
 }

package/frontend/js/views/data.js

@@ -112,25 +112,8 @@ function renderWorkspaceHeader(state) {
     const tablesVisible = state.dataBrowser.tablesVisible !== false;
 
     return `
-    <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
-      <div class="flex flex-wrap items-end justify-between gap-4">
-        <div class="data-headline-container">
-          <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-            Data Browser
-          </div>
-          <h1 class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
-            ${escapeHtml(table?.name ?? 'Table Data')}
-          </h1>
-          <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-            ${
-                table
-                    ? `rows ${escapeHtml(formatNumber(table.rowCount ?? 0))} // columns ${escapeHtml(
-                          formatNumber(table.columns?.length ?? 0),
-                      )}`
-                    : `tables ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}`
-            }
-          </div>
-        </div>
+    <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-3">
+      <div class="flex flex-wrap items-center justify-between gap-4">
         <div class="flex items-center gap-3">
           ${
               table
@@ -145,7 +128,14 @@ function renderWorkspaceHeader(state) {
                             : '<span class="material-symbols-outlined text-sm">visibility</span> Show Tables'
                     }
                   </button>
-                  <button
+                  `
+                  : ''
+          }
+        </div>
+        <div class="flex flex-wrap items-center justify-end gap-3">
+          ${
+              table
+                  ? `<button
                     class="standard-button"
                     data-action="open-data-export-modal"
                     type="button"
@@ -476,6 +466,8 @@ function renderTableSurface(state) {
         escapeHtml(formatNumber(totalRows)),
         filteredRowsText,
         ' rows',
+        ' // columns ',
+        escapeHtml(formatNumber(table.columns?.length ?? 0)),
         '</div>',
         '<div class="flex flex-wrap items-center gap-4"><div class="flex items-center gap-2">',
         '<span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">rows</span>',

package/frontend/js/views/editor.js

@@ -307,8 +307,6 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
                 query: state.editor.sqlText,
                 executing: state.editor.executing,
                 exporting: state.editor.exportLoading,
-                historyLoading: state.editor.historyLoading,
-                historyTotal: state.editor.historyTotal,
                 editorVisible: state.editor.editorPanelVisible,
                 historyVisible: state.editor.historyPanelVisible,
             })}

package/frontend/js/views/settings.js

@@ -30,6 +30,66 @@ function renderSettingsNavigation(activeSection) {
     `;
 }
 
+function renderVersionCheckStatus(settings) {
+    const result = settings.versionCheck;
+    const error = settings.versionCheckError;
+
+    if (error) {
+        return `
+          <div class="border border-error/20 bg-error-container/10 px-4 py-3 text-sm text-on-surface">
+            <div class="font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-error">
+              ${escapeHtml(error.code ?? 'VERSION_CHECK_FAILED')}
+            </div>
+            <div class="mt-1 text-on-surface-variant">${escapeHtml(error.message ?? 'Version check failed.')}</div>
+          </div>
+        `;
+    }
+
+    if (!result) {
+        return `
+          <div class="border border-outline-variant/10 bg-surface-container-high px-4 py-3 text-sm text-on-surface-variant">
+            No version check has been run yet.
+          </div>
+        `;
+    }
+
+    const updateAvailable = Boolean(result.updateAvailable);
+    const releaseLink =
+        updateAvailable && result.releaseUrl
+            ? `
+              <a
+                class="standard-button"
+                href="${escapeHtml(result.releaseUrl)}"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <span class="material-symbols-outlined text-sm">open_in_new</span>
+                Open Release
+              </a>
+            `
+            : '';
+
+    return `
+      <div class="border ${
+          updateAvailable ? 'border-primary-container/30 bg-primary-container/5' : 'border-outline-variant/10 bg-surface-container-high'
+      } px-4 py-3">
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div class="min-w-0">
+            <div class="font-mono text-[10px] font-bold uppercase tracking-[0.18em] ${
+                updateAvailable ? 'text-primary-container' : 'text-on-surface-variant/70'
+            }">
+              ${updateAvailable ? 'New Version Available' : 'Up To Date'}
+            </div>
+            <div class="mt-1 text-sm text-on-surface-variant">
+              Current v${escapeHtml(result.currentVersion ?? '0.0.0')} · Latest v${escapeHtml(result.latestVersion ?? 'unknown')}
+            </div>
+          </div>
+          ${releaseLink}
+        </div>
+      </div>
+    `;
+}
+
 function renderSettingsContent(state) {
     if (state.settings.loading && !state.settings.appVersion) {
         return `
@@ -56,6 +116,7 @@ function renderSettingsContent(state) {
     const activeSection = state.settings.section === 'api-tokens' ? 'api-tokens' : 'information';
     const appVersion = escapeHtml(state.settings.appVersion ?? '0.0.0');
     const sqliteVersion = escapeHtml(state.settings.sqliteVersion ?? 'unknown');
+    const versionCheckLoading = Boolean(state.settings.versionCheckLoading);
     const tokenDatabase = state.settings.tokenDatabase;
     const apiTokens = state.settings.apiTokens ?? [];
     const createdApiToken = state.settings.createdApiToken;
@@ -171,6 +232,23 @@ function renderSettingsContent(state) {
           <div class="border-t border-outline-variant/10 py-4 text-sm leading-6 text-on-surface-variant">
             SQL functions and syntax are evaluated with this SQLite runtime.
           </div>
+          <div class="border-t border-outline-variant/10 pt-4">
+            <div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <div class="text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/60">
+                Version_Check
+              </div>
+              <button
+                class="standard-button"
+                data-action="check-app-version"
+                type="button"
+                ${versionCheckLoading ? 'disabled aria-disabled="true"' : ''}
+              >
+                <span class="material-symbols-outlined text-sm">${versionCheckLoading ? 'progress_activity' : 'sync'}</span>
+                ${versionCheckLoading ? 'Checking...' : 'Check Updates'}
+              </button>
+            </div>
+            ${renderVersionCheckStatus(state.settings)}
+          </div>
         </div>
       </section>
 

package/frontend/js/views/structure.js

@@ -115,20 +115,27 @@ function renderObjectInspector(detail) {
     return `
     <div class="structure-graph__panel">
       <div class="space-y-3">
-        <div class="structure-graph__eyebrow">Object Inspector</div>
-        <div class="structure-graph__title">${escapeHtml(detail.name)}</div>
-        <div class="flex flex-wrap items-center gap-3">
-          <div class="structure-graph__subtitle">${escapeHtml(detail.type ?? 'object')}</div>
-          ${
-              detail.tableName
-                  ? `
-                  <div class="structure-graph__subtitle">
-                    TABLE ${escapeHtml(detail.tableName)}
-                  </div>
-                `
-                  : ''
-          }
+        <div class="structure-graph__panel-heading">
+          <div class="structure-graph__eyebrow">Object Inspector</div>
+          <button
+            class="query-history-icon-button"
+            data-structure-graph-action="toggle-inspector"
+            type="button"
+            aria-label="Hide inspector"
+          >
+            <span class="material-symbols-outlined text-[18px]">close</span>
+          </button>
         </div>
+        <div class="structure-graph__title">${escapeHtml(detail.name)}</div>
+        ${
+            detail.tableName
+                ? `
+                <div class="structure-graph__subtitle">
+                  TABLE ${escapeHtml(detail.tableName)}
+                </div>
+              `
+                : ''
+        }
       </div>
 
       <div class="structure-graph__summary">
@@ -255,6 +262,8 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
             <span class="material-symbols-outlined text-sm">table_rows</span>
             Open Data
           </button>
+        </div>
+        <div class="structure-graph__toolbar-inspector">
           <button
             class="${toolbarButtonClass}"
             data-structure-graph-action="toggle-inspector"
@@ -280,6 +289,11 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
               The active database does not expose table metadata for the schema graph.
             </p>
           </div>
+          <div
+            class="structure-graph__edge-readout"
+            data-structure-graph-edge-readout
+            hidden
+          ></div>
         </div>
 
         <aside

package/frontend/styles/components.css

@@ -624,13 +624,35 @@
 }
 
 .status-badge {
+    align-items: center;
     border: 1px solid transparent;
+    box-sizing: border-box;
     display: inline-flex;
     font-size: var(--font-size-micro);
     font-weight: 700;
+    justify-content: center;
     letter-spacing: 0.12em;
+    line-height: 1;
     padding: 0.125rem 0.5rem;
     text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.query-history-badge-row {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+    width: 100%;
+}
+
+.query-history-badge-row .status-badge {
+    min-height: var(--button-height);
+    min-width: 8.5rem;
+}
+
+.query-history-badge-row--compact .status-badge {
+    min-width: 6.75rem;
 }
 
 .status-badge--primary {
@@ -746,6 +768,76 @@
     width: clamp(20rem, 26vw, 22.5rem);
 }
 
+.query-history-panel__header {
+    border-bottom: 1px solid var(--border-medium);
+    padding: var(--spacing-4);
+}
+
+.query-history-tabs {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-2);
+    margin-top: var(--spacing-4);
+}
+
+.query-history-tabs__count {
+    color: var(--text-variant-subtle);
+    font-family: var(--font-family-mono);
+    font-size: 10px;
+    letter-spacing: 0.16em;
+    margin-left: auto;
+    text-transform: uppercase;
+}
+
+.query-history-list-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--spacing-3);
+}
+
+.query-history-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3);
+}
+
+.query-editor-toolbar {
+    align-items: center;
+    display: grid;
+    gap: var(--spacing-4);
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
+.query-editor-toolbar__left,
+.query-editor-toolbar__center,
+.query-editor-toolbar__right {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-3);
+}
+
+.query-editor-toolbar__center {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.query-editor-toolbar__right {
+    justify-content: flex-end;
+}
+
+@media (max-width: 980px) {
+    .query-editor-toolbar {
+        grid-template-columns: 1fr;
+    }
+
+    .query-editor-toolbar__left,
+    .query-editor-toolbar__center,
+    .query-editor-toolbar__right {
+        justify-content: flex-start;
+    }
+}
+
 .table-designer-sidebar {
     background: var(--color-surface-low);
     border-right: 1px solid var(--border-medium);
@@ -1478,6 +1570,63 @@ input.table-designer-main__name[type='text'] {
     background: var(--primary-alpha-08);
 }
 
+.query-history-item-main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    text-align: left;
+}
+
+.query-history-item-title {
+    color: var(--color-on-surface);
+    display: block;
+    font-family: var(--font-family-headline);
+    font-size: 0.875rem;
+    font-weight: 700;
+    letter-spacing: 0;
+    line-height: 1.15;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.query-history-item.is-active .query-history-item-title,
+.query-history-item-hit.is-active .query-history-item-title {
+    color: var(--color-primary-container);
+}
+
+.query-history-item-footer {
+    align-items: center;
+    border-top: 1px solid var(--border-subtle);
+    display: flex;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+    padding: var(--spacing-2) var(--spacing-3) var(--spacing-3);
+}
+
+.query-history-item-meta {
+    color: var(--text-variant-subtle);
+    display: flex;
+    flex-wrap: wrap;
+    font-family: var(--font-family-mono);
+    font-size: 10px;
+    gap: var(--spacing-2);
+    letter-spacing: 0.14em;
+    min-width: 0;
+    text-transform: uppercase;
+}
+
+.query-history-item-actions {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--spacing-1);
+    margin-left: auto;
+}
+
 .query-history-icon-button {
     background: transparent;
     border: 0;
@@ -1522,10 +1671,16 @@ input.table-designer-main__name[type='text'] {
 }
 
 .query-history-sql-preview {
+    color: rgb(var(--rgb-on-surface-variant) / 0.75);
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    font-family: var(--font-family-mono);
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    margin-top: var(--spacing-2);
     overflow: hidden;
+    text-align: left;
 }
 
 .query-history-detail-sql {