sqlite-hub 0.9.0 → 0.9.3

package/frontend/js/views/charts.js

@@ -20,10 +20,12 @@ function renderMissingDatabase() {
 }
 
 function renderChartsList(state) {
-    const queries = state.charts.queries ?? [];
+    const activeTab = ['recent', 'saved'].includes(state.charts.historyTab) ? state.charts.historyTab : 'recent';
+    const allQueries = state.charts.queries ?? [];
+    const queries = activeTab === 'saved' ? allQueries.filter(item => item.isSaved) : allQueries;
     const selectedHistoryId = Number(state.charts.selectedHistoryId);
 
-    if (state.charts.loading && !queries.length) {
+    if (state.charts.loading && !allQueries.length) {
         return `
       <div class="flex h-full items-center justify-center px-6 text-center text-on-surface-variant/45">
         <div>
@@ -34,7 +36,7 @@ function renderChartsList(state) {
     `;
     }
 
-    if (state.charts.error && !queries.length) {
+    if (state.charts.error && !allQueries.length) {
         return `
       <div class="p-5">
         <div class="border border-error/30 bg-error-container/20 px-4 py-4 text-sm text-error">
@@ -45,15 +47,23 @@ function renderChartsList(state) {
     }
 
     if (!queries.length) {
+        const isSavedTab = activeTab === 'saved';
+
         return `
       <div class="flex h-full items-center justify-center px-6 text-center">
         <div>
-          <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">query_stats</span>
+          <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">${
+              isSavedTab ? 'bookmark' : 'query_stats'
+          }</span>
           <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
-            No Chartable Queries
+            ${isSavedTab ? 'No Saved Charts Queries' : 'No Chartable Queries'}
           </p>
           <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/60">
-            Run SELECT queries in the SQL Editor first. They will appear here automatically.
+            ${
+                isSavedTab
+                    ? 'Save chartable queries from this list or from the SQL Editor to keep them here.'
+                    : 'Run SELECT queries in the SQL Editor first. They will appear here automatically.'
+            }
           </p>
         </div>
       </div>
@@ -66,36 +76,67 @@ function renderChartsList(state) {
         ${queries
             .map(
                 item => `
-              <button
-                class="w-full border px-4 py-3 text-left transition-colors ${
-                    selectedHistoryId === item.id
+              <article
+                class="group w-full border transition-colors ${
+                    selectedHistoryId === Number(item.id)
                         ? 'border-primary-container/30 bg-surface-container-high'
                         : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
                 }"
-                data-action="navigate"
-                data-to="/charts/${encodeURIComponent(item.id)}"
-                type="button"
+                data-charts-history-item
               >
-                <div class="flex items-start justify-between gap-3">
-                  <div class="min-w-0 flex-1 truncate font-mono text-xs ${
-                      selectedHistoryId === item.id ? 'text-primary-container' : 'text-on-surface'
-                  }">
-                    ${escapeHtml(item.displayTitle)}
+                <button
+                  class="w-full px-4 py-3 text-left transition-colors group-hover:bg-surface-container-high"
+                  data-action="navigate"
+                  data-history-id="${escapeHtml(item.id)}"
+                  data-to="/charts/${encodeURIComponent(item.id)}"
+                  type="button"
+                >
+                  <div class="flex items-start justify-between gap-3">
+                    <div class="min-w-0 flex-1 truncate font-mono text-xs ${
+                        selectedHistoryId === Number(item.id) ? 'text-primary-container' : 'text-on-surface'
+                    }" data-charts-history-title>
+                      ${escapeHtml(item.displayTitle)}
+                    </div>
+                    <div class="flex shrink-0 flex-wrap justify-end gap-1">
+                      <span class="inline-flex" data-charts-saved-badge ${item.isSaved ? '' : 'hidden'}>
+                        ${renderStatusBadge('saved', 'primary')}
+                      </span>
+                      ${
+                          item.chartTypes?.length
+                              ? item.chartTypes
+                                    .map(chartType => renderStatusBadge(getQueryChartTypeLabel(chartType), 'primary'))
+                                    .join('')
+                              : renderStatusBadge('None', 'muted')
+                      }
+                    </div>
                   </div>
-                  <div class="flex shrink-0 flex-wrap justify-end gap-1">
-                    ${
-                        item.chartTypes?.length
-                            ? item.chartTypes
-                                  .map(chartType => renderStatusBadge(getQueryChartTypeLabel(chartType), 'primary'))
-                                  .join('')
-                            : renderStatusBadge('None', 'muted')
-                    }
+                  <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
+                    ${escapeHtml(item.previewSql)}
                   </div>
+                </button>
+                <div class="flex items-center justify-end border-t border-outline-variant/10 px-3 py-2 transition-colors group-hover:bg-surface-container-high">
+                  <button
+                    aria-label="Open chart query"
+                    class="min-h-[var(--control-height)] flex-1 self-stretch"
+                    data-action="navigate"
+                    data-history-id="${escapeHtml(item.id)}"
+                    data-to="/charts/${encodeURIComponent(item.id)}"
+                    type="button"
+                  ></button>
+                  <button
+                    class="query-history-icon-button ${item.isSaved ? 'is-active' : ''}"
+                    data-action="toggle-charts-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>
                 </div>
-                <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
-                  ${escapeHtml(item.previewSql)}
-                </div>
-              </button>
+              </article>
             `,
             )
             .join('')}
@@ -104,6 +145,37 @@ function renderChartsList(state) {
   `;
 }
 
+function renderChartsHistoryTabs(state) {
+    const activeTab = ['recent', 'saved'].includes(state.charts.historyTab) ? state.charts.historyTab : 'recent';
+    const savedCount = (state.charts.queries ?? []).filter(item => item.isSaved).length;
+    const tabs = [
+        { id: 'recent', label: 'Recent', count: state.charts.queries?.length ?? 0 },
+        { id: 'saved', label: 'Saved', count: savedCount },
+    ];
+
+    return `
+    <div class="mt-4 flex items-center gap-2">
+      ${tabs
+          .map(
+              tab => `
+                <button
+                  class="query-history-tab ${activeTab === tab.id ? 'is-active' : ''}"
+                  data-action="set-charts-history-tab"
+                  data-tab="${escapeHtml(tab.id)}"
+                  type="button"
+                >
+                  ${escapeHtml(tab.label)}
+                </button>
+              `,
+          )
+          .join('')}
+      <span class="ml-auto text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/50">
+        <span data-charts-history-count>${escapeHtml(String(tabs.find(tab => tab.id === activeTab)?.count ?? 0))}</span>
+      </span>
+    </div>
+  `;
+}
+
 function renderEmptyChartDetail() {
     return `
     <div class="flex flex-1 items-center justify-center px-8 py-10 text-center">
@@ -347,7 +419,7 @@ function renderChartCard(chart, state, analysis) {
   `;
 }
 
-function renderChartsDetail(state) {
+export function renderChartsDetail(state) {
     const detail = state.charts.detail;
     const selectedHistoryId = state.charts.selectedHistoryId;
     const historyVisible = state.editor.historyPanelVisible !== false;
@@ -485,6 +557,7 @@ export function renderChartsView(state) {
                       <h2 class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
                         Charts
                       </h2>
+                      ${renderChartsHistoryTabs(state)}
                     </div>
                     ${renderChartsList(state)}
                   </aside>

package/frontend/js/views/data.js

@@ -449,7 +449,36 @@ export function renderDataRowEditorPanel(state) {
             (foreignKey.mappings ?? []).map(mapping => String(mapping.from ?? '').trim()).filter(Boolean),
         ),
     );
-    const getColumnBadges = column => (foreignKeyColumnNames.has(column.name) ? ['FK'] : []);
+    const getColumnTypeBadge = column => String(column.declaredType || column.affinity || 'BLOB').trim().toUpperCase();
+    const getColumnNumberInputMeta = column => {
+        const affinity = String(column.affinity ?? '').toUpperCase();
+
+        if (affinity === 'INTEGER') {
+            return { inputType: 'number', numberStep: '1' };
+        }
+
+        if (affinity === 'NUMERIC') {
+            return { inputType: 'number', numberStep: 'any' };
+        }
+
+        return {};
+    };
+    const getColumnBadges = column => {
+        const badges = [{ label: getColumnTypeBadge(column), tone: 'type' }];
+
+        if (column.primaryKeyPosition > 0) {
+            badges.push({
+                label: column.primaryKeyPosition > 1 ? `PK ${column.primaryKeyPosition}` : 'PK',
+                tone: 'primary-key',
+            });
+        }
+
+        if (foreignKeyColumnNames.has(column.name)) {
+            badges.push({ label: 'FK', tone: 'foreign-key' });
+        }
+
+        return badges;
+    };
 
     const identityColumns = table.identityStrategy?.type === 'primaryKey' ? (table.identityStrategy.columns ?? []) : [];
     const editableColumns = (table.columnMeta ?? []).filter(column => {
@@ -502,6 +531,7 @@ export function renderDataRowEditorPanel(state) {
                 name: column.name,
                 label: column.name,
                 badges: getColumnBadges(column),
+                ...getColumnNumberInputMeta(column),
                 value: value === null || value === undefined ? '' : String(value),
             };
         }),

package/frontend/js/views/editor.js

@@ -265,6 +265,7 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
                       error: state.editor.historyError,
                       activeTab: state.editor.historyTab,
                       search: state.editor.historySearchInput,
+                      committedSearch: state.editor.historySearch,
                       total: state.editor.historyTotal,
                       hasMore: state.editor.historyHasMore,
                       activeHistoryId: state.editor.historyActiveId,

package/frontend/js/views/mediaTagging.js

@@ -326,7 +326,10 @@ function renderCreatedTagList(tags = [], { canRemove = false, removingTagKey = n
   `;
 }
 
-function renderPreviewMedia(currentItem, { detailsVisible = true, mediaTableName = '' } = {}) {
+function renderPreviewMedia(
+    currentItem,
+    { detailsVisible = true, mediaTableName = '', rotationDegrees = 0, status = null } = {},
+) {
     if (!currentItem) {
         return `
       <div class="media-tagging-preview__empty">
@@ -344,6 +347,15 @@ function renderPreviewMedia(currentItem, { detailsVisible = true, mediaTableName
     const pathValue = String(currentItem.path ?? '');
     const fileName = pathValue.split(/[\\/]/).filter(Boolean).pop() || 'Audio file';
     const isAudioPreview = Boolean(currentItem.previewUrl && currentItem.previewKind === 'audio');
+    const isRotatablePreview = Boolean(
+        currentItem.previewUrl && (currentItem.previewKind === 'image' || currentItem.previewKind === 'video'),
+    );
+    const numericRotation = Number(rotationDegrees);
+    const normalizedRotation = Number.isFinite(numericRotation)
+        ? ((Math.round(numericRotation / 90) * 90) % 360 + 360) % 360
+        : 0;
+    const rotationStyle = `--media-tagging-preview-rotation: ${normalizedRotation}deg;`;
+    const rotationClass = normalizedRotation === 90 || normalizedRotation === 270 ? ' is-rotated-quarter' : '';
     let assetMarkup = `
     <div class="media-tagging-preview__placeholder">
       <span class="material-symbols-outlined text-5xl">perm_media</span>
@@ -353,16 +365,27 @@ function renderPreviewMedia(currentItem, { detailsVisible = true, mediaTableName
     if (currentItem.previewUrl && currentItem.previewKind === 'image') {
         assetMarkup = `
       <img
-        class="media-tagging-preview__asset"
+        class="media-tagging-preview__asset${rotationClass}"
+        data-media-tagging-rotation-target="true"
+        data-rotation-degrees="${escapeHtml(String(normalizedRotation))}"
+        style="${escapeHtml(rotationStyle)}"
         src="${escapeHtml(currentItem.previewUrl)}"
         alt="${escapeHtml(pathValue || 'Current media item')}"
       />
     `;
     } else if (currentItem.previewUrl && currentItem.previewKind === 'video') {
         assetMarkup = `
-      <video class="media-tagging-preview__asset" controls preload="metadata" src="${escapeHtml(
+      <video
+        class="media-tagging-preview__asset${rotationClass}"
+        data-media-tagging-rotation-target="true"
+        data-rotation-degrees="${escapeHtml(String(normalizedRotation))}"
+        style="${escapeHtml(rotationStyle)}"
+        controls
+        preload="metadata"
+        src="${escapeHtml(
           currentItem.previewUrl,
-      )}"></video>
+      )}"
+      ></video>
     `;
     } else if (currentItem.previewUrl && currentItem.previewKind === 'audio') {
         assetMarkup = `
@@ -395,36 +418,100 @@ function renderPreviewMedia(currentItem, { detailsVisible = true, mediaTableName
     <div class="media-tagging-preview ${detailsVisible ? '' : 'media-tagging-preview--meta-hidden'}">
       <div class="media-tagging-preview__media${isAudioPreview ? ' media-tagging-preview__media--audio' : ''}">
         <div class="media-tagging-preview__media-toolbar">
-          <button
-            class="standard-button media-tagging-preview__toggle"
-            data-action="toggle-media-tagging-current-media"
-            data-next-value="${detailsVisible ? 'false' : 'true'}"
-            data-expanded-label="Shrink Media Viewer"
-            data-collapsed-label="Show Media Viewer"
-            aria-expanded="${detailsVisible ? 'true' : 'false'}"
-            type="button"
-          >
-            ${toggleLabel}
-          </button>
+          <div class="media-tagging-status media-tagging-status--compact media-tagging-status--preview">
+            <div class="media-tagging-status__value">${escapeHtml(status?.ratioLabel ?? '0 / 0')}</div>
+            <div class="media-tagging-status__label">
+              tagged / total
+            </div>
+          </div>
+          <div class="media-tagging-preview__toolbar-actions">
+            ${
+                isRotatablePreview
+                    ? `
+            <div class="media-tagging-preview__rotation-controls" aria-label="Rotate media preview">
+              <button
+                class="standard-button media-tagging-preview__icon-button"
+                data-action="rotate-media-tagging-current-media"
+                data-rotation-command="left"
+                type="button"
+                aria-label="Rotate left 90 degrees"
+                title="Rotate left 90 degrees"
+              >
+                <span class="material-symbols-outlined">rotate_left</span>
+              </button>
+              <button
+                class="standard-button media-tagging-preview__icon-button"
+                data-action="rotate-media-tagging-current-media"
+                data-rotation-command="right"
+                type="button"
+                aria-label="Rotate right 90 degrees"
+                title="Rotate right 90 degrees"
+              >
+                <span class="material-symbols-outlined">rotate_right</span>
+              </button>
+              <button
+                class="standard-button media-tagging-preview__icon-button"
+                data-action="rotate-media-tagging-current-media"
+                data-rotation-command="reset"
+                type="button"
+                aria-label="Reset rotation"
+                title="Reset rotation"
+                ${normalizedRotation === 0 ? 'disabled' : ''}
+              >
+                <span class="material-symbols-outlined">restart_alt</span>
+              </button>
+            </div>
+            `
+                    : ''
+            }
+            <button
+              class="standard-button media-tagging-preview__toggle"
+              data-action="toggle-media-tagging-current-media"
+              data-next-value="${detailsVisible ? 'false' : 'true'}"
+              data-expanded-label="Shrink Media Viewer"
+              data-collapsed-label="Show Media Viewer"
+              aria-expanded="${detailsVisible ? 'true' : 'false'}"
+              type="button"
+            >
+              ${toggleLabel}
+            </button>
+          </div>
+        </div>
+        <div class="media-tagging-preview__asset-shell">
+          ${assetMarkup}
         </div>
-        ${assetMarkup}
       </div>
       <div class="media-tagging-preview__meta">
         <div class="media-tagging-preview__meta-header">
           <div class="media-tagging-preview__eyebrow">Current Media</div>
-          ${
-              mediaTableName && currentItem.identity
-                  ? `
-                  <button
-                    class="standard-button media-tagging-preview__meta-action"
-                    data-action="open-media-tagging-current-in-data"
-                    type="button"
-                  >
-                    Open In Data
-                  </button>
-                `
-                  : ''
-          }
+          <div class="media-tagging-preview__meta-actions">
+            ${
+                mediaTableName
+                    ? `
+                    <button
+                      class="standard-button media-tagging-preview__meta-action"
+                      data-action="open-media-tagging-current-in-structure"
+                      type="button"
+                    >
+                      Open Structure
+                    </button>
+                  `
+                    : ''
+            }
+            ${
+                mediaTableName && currentItem.identity
+                    ? `
+                    <button
+                      class="standard-button media-tagging-preview__meta-action"
+                      data-action="open-media-tagging-current-in-data"
+                      type="button"
+                    >
+                      Open In Data
+                    </button>
+                  `
+                    : ''
+            }
+          </div>
         </div>
         ${
             metadata.length
@@ -548,7 +635,7 @@ function renderTaggingSection(state) {
     const booleanCandidates = state.mediaTagging.booleanCandidates ?? [];
 
     return `
-    <section class="media-tagging-card shell-section">
+    <section class="media-tagging-card media-tagging-card--tagging shell-section">
       <div class="media-tagging-card__header">
         <div>
           <div class="media-tagging-card__eyebrow">2. Tagging</div>
@@ -739,7 +826,12 @@ function renderWorkflowSection(state) {
               `
                 : ''
         }
-        ${renderPreviewMedia(workflow?.currentItem ?? null, { detailsVisible, mediaTableName })}
+        ${renderPreviewMedia(workflow?.currentItem ?? null, {
+            detailsVisible,
+            mediaTableName,
+            rotationDegrees: state.mediaTagging.workflowMediaRotationDegrees,
+            status,
+        })}
         <div class="media-tagging-workflow-sidebar">
           <div class="media-tagging-tag-panel">
             <div class="media-tagging-tag-panel__header">
@@ -750,12 +842,6 @@ function renderWorkflowSection(state) {
                     ${escapeHtml(formatNumber(selectableTags.length))} selectable tag(s)
                   </div>
                 </div>
-                <div class="media-tagging-status media-tagging-status--compact">
-                  <div class="media-tagging-status__value">${escapeHtml(status.ratioLabel)}</div>
-                  <div class="media-tagging-status__label">
-                    tagged / total
-                  </div>
-                </div>
               </div>
               <label class="media-tagging-field mt-4">
                 <span class="media-tagging-field__label">Search</span>
@@ -769,24 +855,29 @@ function renderWorkflowSection(state) {
             </div>
             ${renderTagList(selectableTags, selectedTagKeys)}
             <div class="media-tagging-tag-panel__footer">
-              <div class="flex flex-wrap items-center self-end gap-3">
-                <button
-                  class="standard-button"
-                  data-action="skip-media-tagging-item"
-                  type="button"
-                  ${workflow?.currentItem && canWrite && !state.mediaTagging.previewLoading && !state.mediaTagging.applying ? '' : 'disabled'}
-                >
-                  ${state.mediaTagging.applying ? 'Saving...' : 'Skip'}
-                </button>
-                <button
-                  class="signature-button"
-                  data-action="apply-media-tagging"
-                  data-can-apply="${workflow?.currentItem && canWrite && !state.mediaTagging.applying ? 'true' : 'false'}"
-                  type="button"
-                  ${workflow?.currentItem && canWrite && !state.mediaTagging.applying && selectedTagCount > 0 ? '' : 'disabled'}
-                >
-                  ${state.mediaTagging.applying ? 'Saving...' : `${selectedTagCount} tagged & next`}
-                </button>
+              <div class="media-tagging-tag-panel__footer-main">
+                <div class="media-tagging-tag-panel__remaining">
+                  ${escapeHtml(formatNumber(workflow?.status?.remainingCount ?? 0))} remaining 
+                </div>
+                <div class="media-tagging-tag-panel__actions">
+                  <button
+                    class="standard-button"
+                    data-action="skip-media-tagging-item"
+                    type="button"
+                    ${workflow?.currentItem && canWrite && !state.mediaTagging.previewLoading && !state.mediaTagging.applying ? '' : 'disabled'}
+                  >
+                    ${state.mediaTagging.applying ? 'Saving...' : 'Skip'}
+                  </button>
+                  <button
+                    class="signature-button"
+                    data-action="apply-media-tagging"
+                    data-can-apply="${workflow?.currentItem && canWrite && !state.mediaTagging.applying ? 'true' : 'false'}"
+                    type="button"
+                    ${workflow?.currentItem && canWrite && !state.mediaTagging.applying && selectedTagCount > 0 ? '' : 'disabled'}
+                  >
+                    ${state.mediaTagging.applying ? 'Saving...' : `${selectedTagCount} tagged & next`}
+                  </button>
+                </div>
               </div>
               ${
                   workflow?.allRemainingSkipped
@@ -801,9 +892,6 @@ function renderWorkflowSection(state) {
                     `
                       : ''
               }
-              <div class="text-[11px] font-mono uppercase tracking-[0.14em] text-on-surface-variant/45">
-                ${escapeHtml(formatNumber(workflow?.status?.remainingCount ?? 0))} remaining 
-              </div>
             </div>
           </div>
         </div>
@@ -820,24 +908,6 @@ export function renderMediaTaggingView(state, { subView = 'setup' } = {}) {
         main: `
       <section class="view-surface media-tagging-view">
         <div class="media-tagging-shell">
-          <header class="media-tagging-header">
-            <div class="media-tagging-header__copy">
-              <div class="text-[10px] font-bold uppercase tracking-[0.22em] text-primary-container">
-                Media Tagging
-              </div>
-              <h1 class="mt-3 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
-                ${showSetup ? 'Setup' : 'Tagging Queue'}
-              </h1>
-              <p class="mt-3 max-w-3xl text-sm leading-7 text-on-surface-variant/65">
-                ${
-                    showSetup
-                        ? 'Configure tags, media queries, and mapping once per database.'
-                        : 'Review the next untagged media item, select tags, skip it, or mark it as tagged.'
-                }
-              </p>
-            </div>
-          </header>
-
           ${renderIssueList(state)}
 
           ${