sqlite-hub 0.17.0 → 0.17.2

package/frontend/js/api.js

@@ -86,6 +86,12 @@ export function createConnection(payload) {
   });
 }
 
+export function chooseCreateDatabasePath() {
+  return request("/api/connections/choose-create-path", {
+    method: "POST",
+  });
+}
+
 export function importSql(payload) {
   return request("/api/connections/import-sql", {
     method: "POST",

package/frontend/js/app.js

@@ -24,6 +24,7 @@ import { renderTopNav } from './components/topNav.js';
 import { createRouter } from './router.js';
 import {
     createActiveConnectionBackup,
+    chooseCreateDatabasePath,
     createDocument,
     createDocumentFromMarkdownExport,
     clearCurrentQuery,
@@ -178,10 +179,19 @@ import {
     stringifyRowEditorJson,
 } from './utils/rowEditorJson.js';
 import { getTimestampPreviewForField } from './utils/timestampPreview.js';
+import {
+    buildRowEditorSubmittedValues,
+    getRowEditorValueState,
+    getRowEditorValueStateLabel,
+} from './utils/rowEditorValues.js';
 import {
     formatTextCellCharacterCount,
     getTextCellCharacterCount,
 } from './utils/textCellStats.js';
+import {
+    captureTableHorizontalScrollState,
+    restoreTableHorizontalScrollState,
+} from './utils/tableScrollState.js';
 
 const appRoot = document.querySelector('#app');
 
@@ -1257,6 +1267,10 @@ function renderApp(state) {
 
     const focusedInput = captureFocusedInputState();
     const queryHistoryScrollState = captureQueryHistoryScrollState();
+    const tableHorizontalScrollState = captureTableHorizontalScrollState({
+        routeName: lastRenderedRouteName,
+        scrollNodes: shellRefs.view.querySelectorAll('[data-table-horizontal-scroll]'),
+    });
     const isEnteringNewTableDesignerRoute =
         state.route.name === 'tableDesigner' && state.route.params?.isNew && previousRoutePath !== state.route.path;
 
@@ -1329,6 +1343,14 @@ function renderApp(state) {
         restoreQueryHistoryScrollState(queryHistoryScrollState);
     }
 
+    if (mainChanged && !mainPatched) {
+        restoreTableHorizontalScrollState({
+            snapshot: tableHorizontalScrollState,
+            routeName: state.route.name,
+            scrollNodes: shellRefs.view.querySelectorAll('[data-table-horizontal-scroll]'),
+        });
+    }
+
     if (pendingQueryEditorFocus && (state.route.name === 'editor' || state.route.name === 'editorResults')) {
         if (focusQueryEditorInput()) {
             pendingQueryEditorFocus = false;
@@ -1572,6 +1594,53 @@ function syncRowEditorFilePathPreview(inputNode) {
     previewNode.hidden = false;
 }
 
+function getRowEditorValueStateClassName(state) {
+    if (state === 'null') {
+        return 'border px-2 py-1 text-[9px] border-primary-container/35 bg-primary-container/15 text-primary-container';
+    }
+
+    if (state === 'empty') {
+        return 'border px-2 py-1 text-[9px] border-outline-variant/35 bg-surface-container-high text-on-surface-variant';
+    }
+
+    return 'border px-2 py-1 text-[9px] border-outline-variant/20 bg-surface-container text-on-surface-variant';
+}
+
+function syncRowEditorValueState(controlNode) {
+    const fieldNode = controlNode.closest('[data-row-editor-field]');
+    const valueInput = fieldNode?.querySelector('[data-row-editor-value-source]');
+    const stateBadge = fieldNode?.querySelector('[data-row-editor-value-state]');
+
+    if (!fieldNode || !valueInput || !stateBadge) {
+        return;
+    }
+
+    const valueState = getRowEditorValueState(valueInput.value);
+
+    valueInput.dataset.rowEditorDirty = 'true';
+    stateBadge.dataset.valueState = valueState;
+    stateBadge.className = getRowEditorValueStateClassName(valueState);
+    stateBadge.textContent = getRowEditorValueStateLabel(valueState);
+
+    syncRowEditorTimestampPreview(valueInput);
+    syncRowEditorFilePathPreview(valueInput);
+    syncRowEditorCharacterCount(valueInput);
+}
+
+function getRowEditorFieldMetadata(form) {
+    return Object.fromEntries(
+        Array.from(form.elements)
+            .filter(element => element.name?.startsWith('field:'))
+            .map(element => [
+                element.name.slice('field:'.length),
+                {
+                    initialState: element.closest('[data-row-editor-field]')?.dataset?.rowEditorInitialState,
+                    dirty: element.dataset.rowEditorDirty === 'true',
+                },
+            ]),
+    );
+}
+
 function closeCopyColumnMenus(exceptMenu = null) {
     document.querySelectorAll('[data-copy-column-menu][open]').forEach(menu => {
         if (menu !== exceptMenu && menu instanceof HTMLDetailsElement) {
@@ -1732,21 +1801,24 @@ function applyChangedRowEditorFormValues(rowObject) {
 
     const nextRowObject = { ...rowObject };
     const formData = new FormData(form);
+    const submittedValues = buildRowEditorSubmittedValues(formData, getRowEditorFieldMetadata(form));
 
-    for (const [key, value] of formData.entries()) {
-        if (!key.startsWith('field:')) {
-            continue;
-        }
-
+    for (const [fieldName, value] of Object.entries(submittedValues)) {
+        const key = `field:${fieldName}`;
         const control = Array.from(form.elements).find(element => element.name === key);
         const initialValue = control?.dataset?.rowEditorInitialValue;
-        const currentValue = String(value ?? '');
+        const initialState = control?.closest('[data-row-editor-field]')?.dataset?.rowEditorInitialState;
+        const currentState = getRowEditorValueState(value);
+        const currentValue = value === null ? null : String(value);
 
-        if (initialValue !== undefined && currentValue === initialValue) {
+        if (
+            initialState === currentState &&
+            (currentState === 'null' || (initialValue !== undefined && currentValue === initialValue))
+        ) {
             continue;
         }
 
-        nextRowObject[key.slice('field:'.length)] = currentValue;
+        nextRowObject[fieldName] = currentValue;
     }
 
     return nextRowObject;
@@ -2109,6 +2181,33 @@ async function handleAction(actionNode) {
         case 'edit-connection':
             openEditConnectionModal(actionNode.dataset.connectionId);
             return;
+        case 'choose-create-database-path': {
+            const labelNode = actionNode.querySelector('[data-create-database-path-button-label]');
+
+            actionNode.setAttribute('disabled', '');
+            if (labelNode) {
+                labelNode.textContent = 'Choosing...';
+            }
+
+            const selectedPath = await chooseCreateDatabasePath();
+            const pathInput = document.querySelector(
+                '[data-form="create-connection"] [data-create-database-path]',
+            );
+
+            if (selectedPath && pathInput instanceof HTMLInputElement) {
+                pathInput.value = selectedPath;
+                pathInput.focus({ preventScroll: true });
+                pathInput.setSelectionRange(pathInput.value.length, pathInput.value.length);
+            }
+
+            if (actionNode.isConnected) {
+                actionNode.removeAttribute('disabled');
+                if (labelNode) {
+                    labelNode.textContent = 'Browse...';
+                }
+            }
+            return;
+        }
         case 'close-modal':
             closeModal();
             return;
@@ -2689,6 +2788,7 @@ document.addEventListener('keydown', event => {
 
 document.addEventListener('input', event => {
     const target = event.target instanceof Element ? event.target : null;
+    const valueInput = target?.closest('[data-row-editor-value-source]');
     const timestampInput = target?.closest('[data-row-editor-timestamp-source]');
     const textCellInput = target?.closest('[data-row-editor-text-source]');
 
@@ -2701,6 +2801,10 @@ document.addEventListener('input', event => {
         syncRowEditorCharacterCount(textCellInput);
     }
 
+    if (valueInput) {
+        syncRowEditorValueState(valueInput);
+    }
+
     const bindNode = event.target.closest('[data-bind]');
 
     if (!bindNode) {
@@ -2845,6 +2949,7 @@ document.addEventListener(
 
 document.addEventListener('change', event => {
     const target = event.target instanceof Element ? event.target : null;
+    const valueControl = target?.closest('[data-row-editor-value-source]');
     const timestampInput = target?.closest('[data-row-editor-timestamp-source]');
     const textCellInput = target?.closest('[data-row-editor-text-source]');
 
@@ -2857,6 +2962,10 @@ document.addEventListener('change', event => {
         syncRowEditorCharacterCount(textCellInput);
     }
 
+    if (valueControl) {
+        syncRowEditorValueState(valueControl);
+    }
+
     const bindNode = event.target.closest('[data-bind]');
 
     if (!bindNode) {
@@ -3126,15 +3235,7 @@ document.addEventListener('submit', async event => {
             await submitCopyColumnModal(formData);
             return;
         case 'save-data-row': {
-            const values = {};
-
-            for (const [key, value] of formData.entries()) {
-                if (!key.startsWith('field:')) {
-                    continue;
-                }
-
-                values[key.slice('field:'.length)] = String(value ?? '');
-            }
+            const values = buildRowEditorSubmittedValues(formData, getRowEditorFieldMetadata(form));
 
             let rowIdentity = null;
             const rawRowIdentity = String(formData.get('rowIdentity') ?? '').trim();
@@ -3151,15 +3252,7 @@ document.addEventListener('submit', async event => {
             return;
         }
         case 'save-editor-row': {
-            const values = {};
-
-            for (const [key, value] of formData.entries()) {
-                if (!key.startsWith('field:')) {
-                    continue;
-                }
-
-                values[key.slice('field:'.length)] = String(value ?? '');
-            }
+            const values = buildRowEditorSubmittedValues(formData, getRowEditorFieldMetadata(form));
 
             await openEditorRowUpdatePreview(String(formData.get('rowIndex') ?? ''), values);
             return;

package/frontend/js/components/modal.js

@@ -264,14 +264,34 @@ function renderEditConnectionForm(modal) {
   `;
 }
 
-function renderCreateDatabaseForm(modal) {
+export function renderCreateDatabaseForm(modal) {
   return `
     <form class="space-y-5" data-form="create-connection">
-      ${renderField({
-        label: "New SQLite File Path",
-        name: "path",
-        placeholder: "/absolute/path/to/new-database.sqlite",
-      })}
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          New SQLite File Path
+        </span>
+        <span class="flex items-stretch gap-2">
+          <input
+            class="control-input min-w-0 flex-1 border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+            data-create-database-path
+            name="path"
+            placeholder="/absolute/path/to/new-database.sqlite"
+            type="text"
+          />
+          <button
+            class="standard-button flex-none"
+            data-action="choose-create-database-path"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">folder_open</span>
+            <span data-create-database-path-button-label>Browse...</span>
+          </button>
+        </span>
+        <span class="block text-[11px] leading-5 text-on-surface-variant/60">
+          Choose a folder and filename, or enter an absolute path manually.
+        </span>
+      </label>
       ${renderField({
         label: "Label",
         name: "label",

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/store.js

@@ -3490,6 +3490,16 @@ export async function submitCreateConnection(payload) {
     }
 }
 
+export async function chooseCreateDatabasePath() {
+    try {
+        const response = await api.chooseCreateDatabasePath();
+        return response.data?.path ?? null;
+    } catch (error) {
+        pushToast(normalizeError(error).message || 'Native file dialog could not be opened.', 'alert');
+        return null;
+    }
+}
+
 export async function submitImportSql(payload) {
     startModalSubmission();
 
@@ -5303,11 +5313,13 @@ export function getQueryMessages(snapshot = state) {
 
     return [
         ...snapshot.editor.result.statements.map(statement => ({
-            tone: statement.kind === 'resultSet' ? 'success' : inferStatusTone(statement.keyword),
+            tone: statement.kind === 'resultSet' && statement.truncated ? 'warning' : statement.kind === 'resultSet' ? 'success' : inferStatusTone(statement.keyword),
             label: `${statement.keyword} #${statement.index + 1}`,
             value:
                 statement.kind === 'resultSet'
-                    ? `${statement.rowCount} row(s) returned.`
+                    ? statement.truncated
+                        ? `Showing the first ${statement.rowCount} row(s); the result was limited to ${statement.rowLimit}.`
+                        : `${statement.rowCount} row(s) returned.`
                     : `${statement.changes} row(s) affected.`,
         })),
         ...queryMessages,

package/frontend/js/utils/jsonPreview.js

@@ -0,0 +1,31 @@
+export function formatJsonPreview(value) {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  let parsed = value;
+
+  if (typeof value !== "object") {
+    const text = String(value).trim();
+
+    if (!text || !["{", "["].includes(text[0])) {
+      return null;
+    }
+
+    try {
+      parsed = JSON.parse(text);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  if (!parsed || typeof parsed !== "object") {
+    return null;
+  }
+
+  try {
+    return JSON.stringify(parsed, null, 2);
+  } catch (error) {
+    return null;
+  }
+}

package/frontend/js/utils/rowEditorValues.js

@@ -0,0 +1,41 @@
+export function getRowEditorValueState(value) {
+  if (value === null || value === undefined) {
+    return "null";
+  }
+
+  return String(value) === "" ? "empty" : "value";
+}
+
+export function getRowEditorValueStateLabel(state) {
+  if (state === "null") {
+    return "NULL";
+  }
+
+  if (state === "empty") {
+    return "EMPTY STRING";
+  }
+
+  return "VALUE";
+}
+
+export function buildRowEditorSubmittedValues(formData, fieldMetadata = {}) {
+  const fieldNames = new Set();
+
+  for (const [key] of formData.entries()) {
+    if (key.startsWith("field:")) {
+      fieldNames.add(key.slice("field:".length));
+    }
+  }
+
+  return Object.fromEntries(
+    [...fieldNames].map((fieldName) => {
+      const valueKey = `field:${fieldName}`;
+      const value = String(formData.get(valueKey) ?? "");
+      const metadata = fieldMetadata[fieldName] ?? {};
+      const keepInitialNull =
+        metadata.initialState === "null" && metadata.dirty !== true && value === "";
+
+      return [fieldName, keepInitialNull ? null : value];
+    })
+  );
+}

package/frontend/js/utils/tableScrollState.js

@@ -0,0 +1,39 @@
+export function captureTableHorizontalScrollState({ routeName = "", scrollNodes = [] } = {}) {
+  return {
+    routeName: String(routeName ?? ""),
+    positions: Array.from(scrollNodes)
+      .map((scrollNode) => ({
+        key: String(scrollNode?.dataset?.tableScrollKey ?? ""),
+        scrollLeft: Number(scrollNode?.scrollLeft) || 0,
+      }))
+      .filter((position) => position.key),
+  };
+}
+
+export function restoreTableHorizontalScrollState({
+  snapshot,
+  routeName = "",
+  scrollNodes = [],
+} = {}) {
+  if (!snapshot || snapshot.routeName !== String(routeName ?? "")) {
+    return false;
+  }
+
+  const candidates = Array.from(scrollNodes);
+  let restored = false;
+
+  for (const position of snapshot.positions ?? []) {
+    const scrollNode = candidates.find(
+      (candidate) => String(candidate?.dataset?.tableScrollKey ?? "") === position.key
+    );
+
+    if (!scrollNode) {
+      continue;
+    }
+
+    scrollNode.scrollLeft = position.scrollLeft;
+    restored = true;
+  }
+
+  return restored;
+}

package/frontend/js/views/charts.js

@@ -220,6 +220,14 @@ function renderQueryResultState(state, result) {
     `;
     }
 
+    if (result.truncated) {
+        return `
+      <div class="border-b border-primary-container/20 bg-primary-container/10 px-4 py-3 text-sm text-on-surface">
+        Charts use the first ${escapeHtml(String(result.rowLimit ?? result.rows?.length ?? 0))} rows. Refine the query for a complete visualization.
+      </div>
+    `;
+    }
+
     return '';
 }