sqlite-hub 0.16.0 → 0.17.2

package/frontend/js/components/queryHistoryPanel.js

@@ -1,133 +1,130 @@
-import {
-  escapeHtml,
-  formatNumber,
-} from "../utils/format.js";
-import { renderStatusBadge } from "./badges.js";
+import { escapeHtml, formatNumber } from '../utils/format.js';
+import { renderStatusBadge } from './badges.js';
 
 function getQueryTypeTone(queryType) {
-  if (queryType === "select" || queryType === "update") {
-    return "success";
-  }
+    if (queryType === 'select' || queryType === 'update') {
+        return 'success';
+    }
 
-  if (queryType === "pragma") {
-    return "primary";
-  }
+    if (queryType === 'pragma') {
+        return 'primary';
+    }
 
-  return "muted";
+    return 'muted';
 }
 
 export function renderQueryHistoryListItem(item, activeHistoryId, selectedHistoryId) {
-  const isActive = Number(activeHistoryId) === Number(item.id);
-  const isSelected = Number(selectedHistoryId) === Number(item.id);
-  const visibleTables = (item.tablesDetected ?? []).slice(0, 3);
-  const itemClasses = [
-    "query-history-item",
-    isActive ? "is-active" : "",
-    item.lastRun?.status === "error" ? "is-error" : "",
-  ]
-    .filter(Boolean)
-    .join(" ");
-  const tableMarkup = visibleTables
-    .map((tableName) =>
-      [
-        '<span class="border border-outline-variant/20 bg-surface-highest px-2 py-1">',
-        escapeHtml(tableName),
-        "</span>",
-      ].join("")
-    )
-    .join("");
+    const isActive = Number(activeHistoryId) === Number(item.id);
+    const isSelected = Number(selectedHistoryId) === Number(item.id);
+    const visibleTables = (item.tablesDetected ?? []).slice(0, 3);
+    const itemClasses = [
+        'query-history-item',
+        isActive ? 'is-active' : '',
+        item.lastRun?.status === 'error' ? 'is-error' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const tableMarkup = visibleTables
+        .map(tableName =>
+            [
+                '<span class="border border-outline-variant/20 bg-surface-highest px-2 py-1">',
+                escapeHtml(tableName),
+                '</span>',
+            ].join(''),
+        )
+        .join('');
 
-  return [
-    '<article class="',
-    itemClasses,
-    '"><button class="query-history-item-hit ',
-    isActive ? "is-active" : "",
-    '" data-action="select-query-history-item" data-history-id="',
-    escapeHtml(item.id),
-    '" type="button">',
-    '<div class="flex flex-wrap items-center gap-2"><span class="truncate font-headline text-sm font-bold uppercase tracking-tight text-on-surface">',
-    escapeHtml(item.displayTitle),
-    "</span>",
-    renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType)),
-    item.isSaved ? renderStatusBadge("saved", "primary") : "",
-    item.isDestructive ? renderStatusBadge("destructive", "warning") : "",
-    "</div>",
-    '<p class="query-history-sql-preview mt-2 text-left font-mono text-xs leading-5 text-on-surface-variant/75">',
-    escapeHtml(item.previewSql),
-    "</p></button>",
-    '<div class="flex items-center justify-between gap-3 border-t border-outline-variant/10 px-3 pb-3 pt-2">',
-    '<div class="min-w-0 flex flex-wrap gap-2 text-[10px] font-mono uppercase tracking-[0.14em] text-on-surface-variant/55">',
-    tableMarkup,
-    '</div><div class="flex items-center gap-1">',
-    '<button class="query-history-icon-button" data-action="open-query-history" data-history-id="',
-    escapeHtml(item.id),
-    '" title="Open in editor" type="button"><span class="material-symbols-outlined text-[18px]">edit_note</span></button>',
-    '<button class="query-history-icon-button" data-action="run-query-history" data-history-id="',
-    escapeHtml(item.id),
-    '" title="Run query" type="button"><span class="material-symbols-outlined text-[18px]">play_arrow</span></button>',
-    '<button class="query-history-icon-button ',
-    item.isSaved ? "is-active" : "",
-    '" data-action="toggle-query-history-saved" data-history-id="',
-    escapeHtml(item.id),
-    '" data-next-value="',
-    item.isSaved ? "false" : "true",
-    '" title="',
-    item.isSaved ? "Remove from saved" : "Save query",
-    '" type="button"><span class="material-symbols-outlined text-[18px]">',
-    item.isSaved ? "bookmark" : "bookmark_add",
-    "</span></button>",
-    '<button class="query-history-icon-button ',
-    isSelected ? "is-active" : "",
-    '" data-action="select-query-history-item" data-history-id="',
-    escapeHtml(item.id),
-    '" title="Open query detail" type="button"><span class="material-symbols-outlined text-[18px]">info</span></button>',
-    "</div></div></article>",
-  ].join("");
+    return [
+        '<article class="',
+        itemClasses,
+        '"><button class="query-history-item-hit ',
+        isActive ? 'is-active' : '',
+        '" data-action="select-query-history-item" data-history-id="',
+        escapeHtml(item.id),
+        '" type="button">',
+        '<div class="flex flex-wrap items-center gap-2"><span class="truncate font-headline text-sm font-bold uppercase tracking-tight text-on-surface w-full">',
+        escapeHtml(item.displayTitle),
+        '</span>',
+        renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType)),
+        item.isSaved ? renderStatusBadge('saved', 'primary') : '',
+        item.isDestructive ? renderStatusBadge('destructive', 'warning') : '',
+        '</div>',
+        '<p class="query-history-sql-preview mt-2 text-left font-mono text-xs leading-5 text-on-surface-variant/75">',
+        escapeHtml(item.previewSql),
+        '</p></button>',
+        '<div class="flex items-center justify-between gap-3 border-t border-outline-variant/10 px-3 pb-3 pt-2">',
+        '<div class="min-w-0 flex flex-wrap gap-2 text-[10px] font-mono uppercase tracking-[0.14em] text-on-surface-variant/55">',
+        tableMarkup,
+        '</div><div class="flex items-center gap-1">',
+        '<button class="query-history-icon-button" data-action="open-query-history" data-history-id="',
+        escapeHtml(item.id),
+        '" title="Open in editor" type="button"><span class="material-symbols-outlined text-[18px]">edit_note</span></button>',
+        '<button class="query-history-icon-button" data-action="run-query-history" data-history-id="',
+        escapeHtml(item.id),
+        '" title="Run query" type="button"><span class="material-symbols-outlined text-[18px]">play_arrow</span></button>',
+        '<button class="query-history-icon-button ',
+        item.isSaved ? 'is-active' : '',
+        '" data-action="toggle-query-history-saved" data-history-id="',
+        escapeHtml(item.id),
+        '" data-next-value="',
+        item.isSaved ? 'false' : 'true',
+        '" title="',
+        item.isSaved ? 'Remove from saved' : 'Save query',
+        '" type="button"><span class="material-symbols-outlined text-[18px]">',
+        item.isSaved ? 'bookmark' : 'bookmark_add',
+        '</span></button>',
+        '<button class="query-history-icon-button ',
+        isSelected ? 'is-active' : '',
+        '" data-action="select-query-history-item" data-history-id="',
+        escapeHtml(item.id),
+        '" title="Open query detail" type="button"><span class="material-symbols-outlined text-[18px]">info</span></button>',
+        '</div></div></article>',
+    ].join('');
 }
 
 function renderQueryHistoryTabs(activeTab, historyTotal) {
-  const tabs = [
-    { id: "recent", label: "Recent" },
-    { id: "saved", label: "Saved" },
-    { id: "unsaved", label: "Unsaved" },
-    { id: "failed", label: "Failed" },
-  ];
+    const tabs = [
+        { id: 'recent', label: 'Recent' },
+        { id: 'saved', label: 'Saved' },
+        { id: 'unsaved', label: 'Unsaved' },
+        { id: 'failed', label: 'Failed' },
+    ];
 
-  return [
-    '<div class="flex items-center gap-2">',
-    tabs
-      .map((tab) =>
-        [
-          '<button class="query-history-tab ',
-          activeTab === tab.id ? "is-active" : "",
-          '" data-action="set-query-history-tab" data-tab="',
-          tab.id,
-          '" type="button">',
-          escapeHtml(tab.label),
-          "</button>",
-        ].join("")
-      )
-      .join(""),
-    '<span class="ml-auto text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/50">',
-    escapeHtml(formatNumber(historyTotal)),
-    "</span></div>",
-  ].join("");
+    return [
+        '<div class="flex items-center gap-2">',
+        tabs
+            .map(tab =>
+                [
+                    '<button class="query-history-tab ',
+                    activeTab === tab.id ? 'is-active' : '',
+                    '" data-action="set-query-history-tab" data-tab="',
+                    tab.id,
+                    '" type="button">',
+                    escapeHtml(tab.label),
+                    '</button>',
+                ].join(''),
+            )
+            .join(''),
+        '<span class="ml-auto text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/50">',
+        escapeHtml(formatNumber(historyTotal)),
+        '</span></div>',
+    ].join('');
 }
 
 export function renderQueryHistoryPanel({
-  items = [],
-  loading = false,
-  loadingMore = false,
-  error = null,
-  activeTab = "recent",
-  search = "",
-  committedSearch = "",
-  total = 0,
-  hasMore = false,
-  activeHistoryId = null,
-  selectedHistoryId = null,
+    items = [],
+    loading = false,
+    loadingMore = false,
+    error = null,
+    activeTab = 'recent',
+    search = '',
+    committedSearch = '',
+    total = 0,
+    hasMore = false,
+    activeHistoryId = null,
+    selectedHistoryId = null,
 }) {
-  return `
+    return `
     <aside class="query-history-panel border-l border-outline-variant/10 bg-surface-container-lowest">
       <div class="border-b border-outline-variant/10 px-4 py-4">
         <div class="flex items-center justify-between gap-3">
@@ -162,23 +159,23 @@ export function renderQueryHistoryPanel({
       <div
         class="custom-scrollbar min-h-0 flex-1 overflow-auto px-3 py-3"
         data-query-history-committed-search="${escapeHtml(committedSearch)}"
-        data-query-history-loading-more="${loadingMore ? "true" : "false"}"
+        data-query-history-loading-more="${loadingMore ? 'true' : 'false'}"
         data-query-history-search="${escapeHtml(search)}"
         data-query-history-scroll
         data-query-history-tab="${escapeHtml(activeTab)}"
       >
         ${
-          error
-            ? `
+            error
+                ? `
               <div class="border border-error/30 bg-error-container/20 px-4 py-3 text-sm text-error">
                 ${escapeHtml(error.message)}
               </div>
             `
-            : ""
+                : ''
         }
         ${
-          !loading && !items.length
-            ? `
+            !loading && !items.length
+                ? `
               <div class="flex h-full min-h-[240px] flex-col items-center justify-center px-6 text-center">
                 <span class="material-symbols-outlined text-4xl text-on-surface-variant/25">manage_search</span>
                 <p class="mt-4 font-headline text-lg font-bold uppercase tracking-tight text-on-surface">
@@ -189,36 +186,34 @@ export function renderQueryHistoryPanel({
                 </p>
               </div>
             `
-            : ""
+                : ''
         }
           <div class="space-y-3">
-          ${items
-            .map((item) => renderQueryHistoryListItem(item, activeHistoryId, selectedHistoryId))
-            .join("")}
+          ${items.map(item => renderQueryHistoryListItem(item, activeHistoryId, selectedHistoryId)).join('')}
         </div>
         ${
-          loading
-            ? `
+            loading
+                ? `
               <div class="mt-4 text-center text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/50">
                 Loading query history...
               </div>
             `
-            : ""
+                : ''
         }
         ${
-          hasMore
-            ? `
+            hasMore
+                ? `
               <div class="mt-4 flex justify-center">
                 <button
                   class="standard-button"
                   data-action="load-more-query-history"
                   type="button"
                 >
-                  ${loadingMore ? "Loading..." : "Load More"}
+                  ${loadingMore ? 'Loading...' : 'Load More'}
                 </button>
               </div>
             `
-            : ""
+                : ''
         }
       </div>
     </aside>

package/frontend/js/components/queryResults.js

@@ -95,6 +95,7 @@ export function renderQueryResultsPane(
     sortDirection = null,
     resultScope = "editor",
     sortAction = "sort-editor-results-column",
+    scrollKey = "",
   } = {}
 ) {
   if (!result) {
@@ -124,7 +125,23 @@ export function renderQueryResultsPane(
 
   return `
     <div class="relative flex h-full min-h-0 flex-col overflow-hidden bg-surface-container">
-      <div class="custom-scrollbar min-h-0 flex-1 overflow-auto bg-surface-container-lowest">
+      ${
+        result.truncated
+          ? `
+              <div class="border-b border-primary-container/20 bg-primary-container/10 px-4 py-2 text-xs text-on-surface">
+                Showing the first ${escapeHtml(String(result.rowLimit ?? result.rows?.length ?? 0))} rows. Refine the query or export it to process the complete result set.
+              </div>
+            `
+          : ""
+      }
+      <div
+        class="custom-scrollbar min-h-0 flex-1 overflow-auto bg-surface-container-lowest"
+        ${
+          scrollKey
+            ? `data-table-horizontal-scroll data-table-scroll-key="${escapeHtml(scrollKey)}"`
+            : ""
+        }
+      >
         ${
           result.columns?.length
               ? renderDataGrid({

package/frontend/js/components/rowEditorPanel.js

@@ -12,37 +12,14 @@ import {
   formatTextCellCharacterCount,
   getTextCellCharacterCount,
 } from "../utils/textCellStats.js";
+import { formatJsonPreview } from "../utils/jsonPreview.js";
+import {
+  getRowEditorValueState,
+  getRowEditorValueStateLabel,
+} from "../utils/rowEditorValues.js";
 
 const URL_PATTERN = /^https?:\/\/[^\s<>"']+$/i;
 
-function getJsonPreview(value) {
-  if (value === null || value === undefined) {
-    return null;
-  }
-
-  if (typeof value === "object") {
-    return JSON.stringify(value, null, 2);
-  }
-
-  const text = String(value).trim();
-
-  if (!text || !["{", "["].includes(text[0])) {
-    return null;
-  }
-
-  try {
-    const parsed = JSON.parse(text);
-
-    if (!parsed || typeof parsed !== "object") {
-      return null;
-    }
-
-    return JSON.stringify(parsed, null, 2);
-  } catch (error) {
-    return null;
-  }
-}
-
 function getUrlValue(value) {
   const text = String(value ?? "").trim();
 
@@ -119,7 +96,7 @@ function renderOpenUrlButton(url) {
   }
 
   return `
-    <div class="mt-2">
+    <div class="mt-2" data-row-editor-url-action>
       <button
         class="standard-button"
         data-action="open-row-editor-url"
@@ -141,7 +118,7 @@ function renderAllowedValuesSelect(field, allowedValues) {
     currentValue !== "" && !hasCurrentAllowedValue;
   const options = [
     shouldRenderEmptyOption
-      ? `<option value="" ${currentValue === "" ? "selected" : ""}>NULL / empty</option>`
+      ? `<option value="" ${currentValue === "" ? "selected" : ""}>Empty string</option>`
       : "",
     shouldRenderCurrentOption
       ? `<option value="${escapeHtml(currentValue)}" selected>${escapeHtml(currentValue)}</option>`
@@ -160,6 +137,7 @@ function renderAllowedValuesSelect(field, allowedValues) {
       data-row-editor-initial-value="${escapeHtml(currentValue)}"
       data-row-editor-text-source
       data-row-editor-timestamp-source
+      data-row-editor-value-source
       name="field:${escapeHtml(field.name)}"
     >
       ${options}
@@ -284,7 +262,7 @@ function renderJsonViewer(prettyJson, title = "JSON Viewer") {
       <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/75">
         ${escapeHtml(title)}
       </div>
-      <pre class="custom-scrollbar mt-3 max-h-[18rem] overflow-auto whitespace-pre-wrap break-words border border-outline-variant/10 bg-surface-container-lowest px-4 py-4 font-mono text-xs leading-6 text-on-surface">${escapeHtml(
+      <pre class="row-editor-json-preview custom-scrollbar mt-3 max-h-[18rem] overflow-auto border border-outline-variant/10 bg-surface-container-lowest px-4 py-4 font-mono text-xs leading-6 text-on-surface">${escapeHtml(
         prettyJson
       )}</pre>
     </div>
@@ -301,7 +279,8 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
   const url = getUrlValue(value);
   const badges = withFilePathBadge(withUrlBadge(Array.isArray(label?.badges) ? label.badges : [], url), filePathPreview);
   const displayLabel = typeof label === "object" ? label.label : label;
-  const jsonPreview = getJsonPreview(value);
+  const jsonPreview = formatJsonPreview(value);
+  const valueState = getRowEditorValueState(rawValue);
 
   return `
     <div
@@ -315,6 +294,7 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
       <div class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(displayLabel)}</span>
         ${renderFieldBadgesWithCharacterCount(badges, rawValue)}
+        ${renderValueStateBadge(valueState)}
       </div>
       ${
         jsonPreview
@@ -328,6 +308,28 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
   `;
 }
 
+function getValueStateBadgeClassName(state) {
+  if (state === "null") {
+    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
+  }
+
+  if (state === "empty") {
+    return "border-outline-variant/35 bg-surface-container-high text-on-surface-variant";
+  }
+
+  return "border-outline-variant/20 bg-surface-container text-on-surface-variant";
+}
+
+function renderValueStateBadge(state) {
+  return `
+    <span
+      class="border px-2 py-1 text-[9px] ${getValueStateBadgeClassName(state)}"
+      data-row-editor-value-state
+      data-value-state="${escapeHtml(state)}"
+    >${escapeHtml(getRowEditorValueStateLabel(state))}</span>
+  `;
+}
+
 function renderEditableField(field, tableMeta = {}) {
   const columnName = getFieldColumnName(field);
   const protectedKeyColumn = isProtectedKeyColumn(columnName, tableMeta);
@@ -336,25 +338,28 @@ function renderEditableField(field, tableMeta = {}) {
   const filePathPreview = getFieldFilePathPreview(field, tableMeta);
   const baseBadges = withCheckBadge(Array.isArray(field.badges) ? field.badges : [], allowedValues);
   const badges = withFilePathBadge(withUrlBadge(baseBadges, url), filePathPreview);
-  const jsonPreview = getJsonPreview(field.value);
+  const jsonPreview = formatJsonPreview(field.value);
   const inputType = field.inputType === "number" ? "number" : "text";
   const numberStep = field.numberStep === "1" ? "1" : "any";
+  const valueState = getRowEditorValueState(getFieldRawValue(field));
 
   return `
     <div
       class="block space-y-2"
       data-row-editor-column-name="${escapeHtml(columnName)}"
       data-row-editor-field
+      data-row-editor-initial-state="${escapeHtml(valueState)}"
       data-row-editor-protected-key="${protectedKeyColumn ? "true" : "false"}"
       ${url ? "data-row-editor-url-field" : ""}
     >
       <span class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(field.label ?? field.name)}</span>
         ${renderFieldBadgesWithCharacterCount(badges, inputType === "number" ? null : field.value ?? "")}
+        ${renderValueStateBadge(valueState)}
       </span>
       ${
         jsonPreview
-          ? renderJsonViewer(jsonPreview, "JSON Preview")
+          ? `<div data-row-editor-json-preview-container>${renderJsonViewer(jsonPreview, "JSON Preview")}</div>`
           : ""
       }
       ${
@@ -366,6 +371,7 @@ function renderEditableField(field, tableMeta = {}) {
                 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"
                 data-row-editor-initial-value="${escapeHtml(field.value ?? "")}"
                 data-row-editor-timestamp-source
+                data-row-editor-value-source
                 name="field:${escapeHtml(field.name)}"
                 step="${escapeHtml(numberStep)}"
                 type="number"
@@ -379,6 +385,7 @@ function renderEditableField(field, tableMeta = {}) {
                 data-row-editor-initial-value="${escapeHtml(field.value ?? "")}"
                 data-row-editor-text-source
                 data-row-editor-timestamp-source
+                data-row-editor-value-source
                 name="field:${escapeHtml(field.name)}"
                 data-row-editor-url-input
                 spellcheck="false"
@@ -395,6 +402,7 @@ function renderEditableField(field, tableMeta = {}) {
                 data-row-editor-initial-value="${escapeHtml(field.value ?? "")}"
                 data-row-editor-text-source
                 data-row-editor-timestamp-source
+                data-row-editor-value-source
                 name="field:${escapeHtml(field.name)}"
                 spellcheck="false"
               >${escapeHtml(field.value ?? "")}</textarea>

package/frontend/js/components/sidebar.js

@@ -8,6 +8,7 @@ const sidebarItems = [
     { label: 'Structure', href: '#/structure', key: 'structure', icon: 'account_tree' },
     { label: 'SQL_Editor', href: '#/editor', key: 'editor', icon: 'terminal' },
     { label: 'Charts', href: '#/charts', key: 'charts', icon: 'bar_chart' },
+    { label: 'Documents', href: '#/documents', key: 'documents', icon: 'description' },
     { label: 'Table_Designer', href: '#/table-designer', key: 'tableDesigner', icon: 'table_chart' },
     {
         label: 'MEDIA_TAGGING',

package/frontend/js/router.js

@@ -21,6 +21,14 @@ export function parseHash(hash = window.location.hash) {
                     historyId: segments[1] ? decodeURIComponent(segments[1]) : null,
                 },
             };
+        case 'documents':
+            return {
+                name: 'documents',
+                path: cleanPath,
+                params: {
+                    documentId: segments[1] ? decodeURIComponent(segments[1]) : null,
+                },
+            };
         case 'editor':
             if (segments[1] === 'results') {
                 return { name: 'editorResults', path: '/editor/results', params: {} };