sqlite-hub 0.9.0 → 0.9.1

package/changelog.md

@@ -1,3 +1,8 @@
+# v0.9.1
+
+- Improvements in tagging queue
+- rotate right, rotate left
+
 # v0.9.0
 
 - tagging view

package/frontend/js/app.js

@@ -87,6 +87,7 @@ import {
     toggleChartsResultsPanel,
     toggleChartsSqlPanel,
     setMediaTaggingWorkflowMediaDetailsVisible,
+    setMediaTaggingWorkflowMediaRotationDegrees,
     queueTableDesignerCsvImport,
     showToast,
     submitCreateConnection,
@@ -137,6 +138,7 @@ const shellRefs = {
     toast: document.querySelector('#toast-root'),
 };
 let lastRenderedRoutePath = null;
+let lastRenderedRouteName = null;
 let lastRenderedTopNavMarkup = '';
 let lastRenderedSidebarMarkup = '';
 let lastRenderedStatusBarMarkup = '';
@@ -148,11 +150,16 @@ let lastRenderedPanelOpen = false;
 let lastRenderedLockedRoute = false;
 let pendingNewTableDesignerAutofocus = false;
 let pendingQueryEditorFocus = false;
+let pendingMediaTaggingTagSearchFocus = false;
 
 function invalidateMainRenderCache() {
     lastRenderedMainMarkup = null;
 }
 
+function isMediaTaggingRouteName(routeName) {
+    return routeName === 'mediaTaggingSetup' || routeName === 'mediaTaggingQueue';
+}
+
 function resetStructureGraphForDatabaseChange() {
     resetPersistedStructureGraphState();
 }
@@ -258,6 +265,45 @@ function syncMediaTaggingCurrentMediaUi(button, detailsVisible) {
     return true;
 }
 
+function normalizeMediaTaggingRotationDegrees(value) {
+    const numericValue = Number(value);
+
+    if (!Number.isFinite(numericValue)) {
+        return 0;
+    }
+
+    return ((Math.round(numericValue / 90) * 90) % 360 + 360) % 360;
+}
+
+function syncMediaTaggingMediaRotationUi(node, rotationDegrees) {
+    if (!(node instanceof HTMLElement)) {
+        return false;
+    }
+
+    const preview = node.closest('.media-tagging-preview');
+    const target = preview?.querySelector('[data-media-tagging-rotation-target]');
+
+    if (!(preview instanceof HTMLElement) || !(target instanceof HTMLElement)) {
+        return false;
+    }
+
+    const normalizedRotation = normalizeMediaTaggingRotationDegrees(rotationDegrees);
+
+    target.style.setProperty('--media-tagging-preview-rotation', `${normalizedRotation}deg`);
+    target.dataset.rotationDegrees = String(normalizedRotation);
+    target.classList.toggle('is-rotated-quarter', normalizedRotation === 90 || normalizedRotation === 270);
+
+    const resetButton = preview.querySelector(
+        '[data-action="rotate-media-tagging-current-media"][data-rotation-command="reset"]',
+    );
+
+    if (resetButton instanceof HTMLButtonElement) {
+        resetButton.disabled = normalizedRotation === 0;
+    }
+
+    return true;
+}
+
 function syncMediaTaggingTagSearchUi(input) {
     if (!(input instanceof HTMLInputElement)) {
         return false;
@@ -615,6 +661,52 @@ function focusQueryEditorInput() {
     return true;
 }
 
+function focusMediaTaggingTagSearchInput() {
+    const input = document.querySelector('[data-bind="media-tagging-tag-search"]');
+
+    if (!(input instanceof HTMLInputElement)) {
+        return false;
+    }
+
+    input.focus({ preventScroll: true });
+    input.setSelectionRange(input.value.length, input.value.length);
+    return true;
+}
+
+function syncSidebarActiveRoute(routeName) {
+    if (!isMediaTaggingRouteName(routeName)) {
+        return false;
+    }
+
+    const mediaTaggingLink = shellRefs.sidebar.querySelector('a.sidebar-link[data-group="mediaTagging"]');
+    const setupLink = shellRefs.sidebar.querySelector('a.sidebar-sublink[href="#/media-tagging"]');
+    const queueLink = shellRefs.sidebar.querySelector('a.sidebar-sublink[href="#/media-tagging/queue"]');
+
+    if (
+        !(mediaTaggingLink instanceof HTMLAnchorElement) ||
+        !(setupLink instanceof HTMLAnchorElement) ||
+        !(queueLink instanceof HTMLAnchorElement)
+    ) {
+        return false;
+    }
+
+    mediaTaggingLink.classList.add('is-active');
+    setupLink.classList.toggle('is-active', routeName === 'mediaTaggingSetup');
+    queueLink.classList.toggle('is-active', routeName === 'mediaTaggingQueue');
+    return true;
+}
+
+async function applyMediaTaggingAndFocusSearch() {
+    pendingMediaTaggingTagSearchFocus = true;
+    const result = await applyCurrentMediaTaggingSelection();
+
+    if (!result) {
+        pendingMediaTaggingTagSearchFocus = false;
+    }
+
+    return result;
+}
+
 async function handleTableDesignerCsvImport(fileInput) {
     if (!(fileInput instanceof HTMLInputElement)) {
         return;
@@ -656,6 +748,7 @@ async function handleTableDesignerCsvImport(fileInput) {
 
 function renderApp(state) {
     const previousRoutePath = lastRenderedRoutePath;
+    const previousRouteName = lastRenderedRouteName;
     const { main, panel } = resolveView(state);
     const topNavMarkup = renderTopNav(state);
     const sidebarMarkup = renderSidebar(state);
@@ -722,7 +815,14 @@ function renderApp(state) {
     }
 
     if (sidebarChanged) {
-        shellRefs.sidebar.innerHTML = sidebarMarkup;
+        const sidebarSynced =
+            isMediaTaggingRouteName(previousRouteName) &&
+            isMediaTaggingRouteName(state.route.name) &&
+            syncSidebarActiveRoute(state.route.name);
+
+        if (!sidebarSynced) {
+            shellRefs.sidebar.innerHTML = sidebarMarkup;
+        }
     }
 
     if (statusBarChanged) {
@@ -757,6 +857,10 @@ function renderApp(state) {
         if (focusQueryEditorInput()) {
             pendingQueryEditorFocus = false;
         }
+    } else if (pendingMediaTaggingTagSearchFocus && state.route.name === 'mediaTaggingQueue') {
+        if (focusMediaTaggingTagSearchInput()) {
+            pendingMediaTaggingTagSearchFocus = false;
+        }
     } else if (
         pendingNewTableDesignerAutofocus &&
         state.route.name === 'tableDesigner' &&
@@ -771,6 +875,7 @@ function renderApp(state) {
     }
 
     lastRenderedRoutePath = state.route.path;
+    lastRenderedRouteName = state.route.name;
     lastRenderedTopNavMarkup = topNavMarkup;
     lastRenderedSidebarMarkup = sidebarMarkup;
     lastRenderedStatusBarMarkup = statusBarMarkup;
@@ -1071,7 +1176,7 @@ async function handleAction(actionNode) {
             await resetSkippedMediaTaggingItems();
             return;
         case 'apply-media-tagging':
-            await applyCurrentMediaTaggingSelection();
+            await applyMediaTaggingAndFocusSearch();
             return;
         case 'toggle-media-tagging-current-media':
             if (actionNode instanceof HTMLButtonElement) {
@@ -1080,6 +1185,20 @@ async function handleAction(actionNode) {
                 setMediaTaggingWorkflowMediaDetailsVisible(nextValue, { notify: false });
             }
             return;
+        case 'rotate-media-tagging-current-media': {
+            const currentRotation = getState().mediaTagging.workflowMediaRotationDegrees ?? 0;
+            const command = actionNode.dataset.rotationCommand;
+            const nextRotation =
+                command === 'left'
+                    ? currentRotation - 90
+                    : command === 'right'
+                      ? currentRotation + 90
+                      : 0;
+
+            syncMediaTaggingMediaRotationUi(actionNode, nextRotation);
+            setMediaTaggingWorkflowMediaRotationDegrees(nextRotation, { notify: false });
+            return;
+        }
         case 'open-media-tagging-current-in-data': {
             const currentState = getState();
             const mediaTableName = currentState.mediaTagging.draft?.mediaTable ?? '';
@@ -1093,6 +1212,17 @@ async function handleAction(actionNode) {
             router.navigate(`/data/${encodeURIComponent(mediaTableName)}`);
             return;
         }
+        case 'open-media-tagging-current-in-structure': {
+            const mediaTableName = String(getState().mediaTagging.draft?.mediaTable ?? '').trim();
+
+            if (!mediaTableName) {
+                showToast('The current media table could not be opened in Structure.', 'alert');
+                return;
+            }
+
+            router.navigate(`/structure/${encodeURIComponent(mediaTableName)}`);
+            return;
+        }
         case 'import-table-designer-csv': {
             const fileInput = document.querySelector('[data-bind="table-designer-import-file"]');
 
@@ -1149,6 +1279,19 @@ async function handleAction(actionNode) {
     }
 }
 
+function isMediaTaggingMenuActive(routeName) {
+    return routeName === 'mediaTaggingSetup' || routeName === 'mediaTaggingQueue';
+}
+
+function canApplyMediaTaggingShortcut(state) {
+    return (
+        isMediaTaggingMenuActive(state.route.name) &&
+        Boolean(state.mediaTagging.workflow?.currentItem) &&
+        !state.mediaTagging.applying &&
+        (state.mediaTagging.selectedTagKeys?.length ?? 0) > 0
+    );
+}
+
 document.addEventListener('click', event => {
     const actionNode = event.target.closest('[data-action]');
 
@@ -1161,6 +1304,7 @@ document.addEventListener('click', event => {
 
 document.addEventListener('keydown', event => {
     const target = event.target;
+    const state = getState();
 
     // Handle Enter key in tag form fields to trigger create tag
     if (
@@ -1181,6 +1325,20 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (
+        (event.key === 'Enter' || event.code === 'Enter' || event.code === 'NumpadEnter') &&
+        event.shiftKey &&
+        !event.altKey &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.defaultPrevented &&
+        canApplyMediaTaggingShortcut(state)
+    ) {
+        event.preventDefault();
+        void applyMediaTaggingAndFocusSearch();
+        return;
+    }
+
     if (
         event.key === 'Enter' &&
         event.shiftKey &&
@@ -1204,8 +1362,6 @@ document.addEventListener('keydown', event => {
         return;
     }
 
-    const state = getState();
-
     if (state.modal) {
         event.preventDefault();
         closeModal();

package/frontend/js/components/queryHistoryDetail.js

@@ -23,6 +23,18 @@ function canOpenQueryHistoryInCharts(item) {
   return Boolean(item?.chartsEligible);
 }
 
+function getQueryTypeTone(queryType) {
+  if (queryType === "select" || queryType === "update") {
+    return "success";
+  }
+
+  if (queryType === "pragma") {
+    return "primary";
+  }
+
+  return "muted";
+}
+
 function renderRunItem(run) {
   return `
     <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
@@ -135,9 +147,9 @@ export function renderQueryHistoryDetail({
           </button>
         </div>
         <div class="mt-4 flex flex-wrap gap-2">
-          ${renderStatusBadge(item.queryType, item.isDestructive ? "alert" : "primary")}
+          ${renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType))}
           ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
-          ${item.isDestructive ? renderStatusBadge("destructive", "alert") : ""}
+          ${item.isDestructive ? renderStatusBadge("destructive", "warning") : ""}
           ${item.lastRun ? renderStatusBadge(item.lastRun.status, item.lastRun.status === "error" ? "alert" : "success") : ""}
         </div>
       </div>

package/frontend/js/components/queryHistoryPanel.js

@@ -4,12 +4,8 @@ import {
 } from "../utils/format.js";
 import { renderStatusBadge } from "./badges.js";
 
-function getQueryTypeTone(queryType, isDestructive) {
-  if (isDestructive) {
-    return "alert";
-  }
-
-  if (queryType === "select") {
+function getQueryTypeTone(queryType) {
+  if (queryType === "select" || queryType === "update") {
     return "success";
   }
 
@@ -39,9 +35,9 @@ export function renderQueryHistoryListItem(item, activeHistoryId, selectedHistor
           <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.isDestructive))}
+          ${renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType))}
           ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
-          ${item.isDestructive ? renderStatusBadge("destructive", "alert") : ""}
+          ${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)}

package/frontend/js/store.js

@@ -194,6 +194,7 @@ const state = {
         dismissedIssueKeys: [],
         selectedTagKeys: [],
         workflowMediaDetailsVisible: true,
+        workflowMediaRotationDegrees: 0,
         skippedMediaKeys: [],
         tagFormValues: {},
     },
@@ -348,6 +349,35 @@ function requiresActiveDatabase(routeName) {
     ].includes(routeName);
 }
 
+function isMediaTaggingRouteName(routeName) {
+    return routeName === 'mediaTaggingSetup' || routeName === 'mediaTaggingQueue';
+}
+
+function getConnectionIdentity(connection) {
+    return connection?.id ?? connection?.path ?? null;
+}
+
+function hasLoadedMediaTaggingForActiveConnection() {
+    const activeConnectionId = getConnectionIdentity(state.connections.active);
+
+    return (
+        Boolean(activeConnectionId) &&
+        getConnectionIdentity(state.mediaTagging.connection) === activeConnectionId &&
+        !state.mediaTagging.loading &&
+        (state.mediaTagging.draft !== null || state.mediaTagging.suggestedConfig !== null)
+    );
+}
+
+function normalizeMediaTaggingRotationDegrees(value) {
+    const numericValue = Number(value);
+
+    if (!Number.isFinite(numericValue)) {
+        return 0;
+    }
+
+    return ((Math.round(numericValue / 90) * 90) % 360 + 360) % 360;
+}
+
 function normalizeDataPageSize(value, fallback = 50) {
     const numericValue = Number(value);
 
@@ -844,6 +874,7 @@ function setMissingDatabaseState() {
     state.mediaTagging.issues = [];
     state.mediaTagging.dismissedIssueKeys = [];
     state.mediaTagging.selectedTagKeys = [];
+    state.mediaTagging.workflowMediaRotationDegrees = 0;
     state.mediaTagging.skippedMediaKeys = [];
     state.mediaTagging.tagFormValues = {};
     state.mediaTagging.error = error;
@@ -1579,6 +1610,9 @@ function applyMediaTaggingResponse(data, options = {}) {
     };
     state.mediaTagging.tags = data?.tags ?? [];
     state.mediaTagging.workflow = data?.workflow ?? null;
+    if (previousCurrentKey !== nextCurrentKey) {
+        state.mediaTagging.workflowMediaRotationDegrees = 0;
+    }
     state.mediaTagging.issues = data?.issues ?? [];
     state.mediaTagging.error = null;
     syncDismissedMediaTaggingIssues();
@@ -1650,6 +1684,7 @@ async function loadMediaTagging(version) {
         state.mediaTagging.issues = [];
         state.mediaTagging.dismissedIssueKeys = [];
         state.mediaTagging.selectedTagKeys = [];
+        state.mediaTagging.workflowMediaRotationDegrees = 0;
         state.mediaTagging.skippedMediaKeys = [];
         state.mediaTagging.tagFormValues = {};
         state.mediaTagging.removingTagKey = null;
@@ -1759,6 +1794,7 @@ function invalidateDatabaseCaches() {
     state.mediaTagging.issues = [];
     state.mediaTagging.dismissedIssueKeys = [];
     state.mediaTagging.selectedTagKeys = [];
+    state.mediaTagging.workflowMediaRotationDegrees = 0;
     state.mediaTagging.skippedMediaKeys = [];
     state.mediaTagging.tagFormValues = {};
 }
@@ -1772,6 +1808,10 @@ async function loadRouteData(route) {
         return;
     }
 
+    if (isMediaTaggingRouteName(route.name) && hasLoadedMediaTaggingForActiveConnection()) {
+        return;
+    }
+
     const version = ++routeLoadVersion;
 
     if (route.name === 'landing' || route.name === 'connections') {
@@ -2878,6 +2918,20 @@ export function setMediaTaggingWorkflowMediaDetailsVisible(value, options = {})
     }
 }
 
+export function setMediaTaggingWorkflowMediaRotationDegrees(value, options = {}) {
+    const nextValue = normalizeMediaTaggingRotationDegrees(value);
+
+    if (state.mediaTagging.workflowMediaRotationDegrees === nextValue) {
+        return;
+    }
+
+    state.mediaTagging.workflowMediaRotationDegrees = nextValue;
+
+    if (options.notify !== false) {
+        emitChange();
+    }
+}
+
 export async function refreshMediaTaggingPreview() {
     return previewMediaTaggingDraft({
         keepSelectedTags: true,

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)}
 
           ${

package/frontend/styles/components.css

@@ -287,6 +287,12 @@
     color: var(--color-error);
 }
 
+.status-badge--warning {
+    background: rgba(245, 158, 11, 0.12);
+    border-color: rgba(245, 158, 11, 0.28);
+    color: #f59e0b;
+}
+
 .status-badge--success {
     background: rgba(0, 220, 225, 0.1);
     color: var(--color-tertiary-dim);

package/frontend/styles/views.css

@@ -389,11 +389,6 @@
     padding: var(--spacing-6);
 }
 
-.media-tagging-header {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
-    padding-bottom: var(--spacing-4);
-}
-
 .media-tagging-grid {
     align-content: stretch;
     display: grid;
@@ -415,6 +410,7 @@
 }
 
 .media-tagging-card--workflow {
+    flex: 1;
     min-height: 32rem;
 }
 
@@ -602,6 +598,11 @@
     font-size: 1.25rem;
 }
 
+.media-tagging-status--preview {
+    align-items: flex-start;
+    min-width: max-content;
+}
+
 .media-tagging-mapping-list {
     display: grid;
     gap: var(--spacing-3);
@@ -641,7 +642,7 @@
     border: 1px solid rgba(75, 71, 50, 0.16);
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     min-height: 26rem;
     overflow: hidden;
     padding: var(--spacing-4);
@@ -653,17 +654,52 @@
 }
 
 .media-tagging-preview__media--audio .media-tagging-preview__media-toolbar {
-    justify-content: flex-end;
-    position: static;
+    justify-content: space-between;
 }
 
 .media-tagging-preview__media-toolbar {
+    align-items: center;
+    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
     display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
     gap: var(--spacing-3);
-    position: absolute;
-    right: var(--spacing-4);
-    top: var(--spacing-4);
-    z-index: 1;
+    justify-content: space-between;
+    margin: calc(var(--spacing-4) * -1) calc(var(--spacing-4) * -1) var(--spacing-4);
+    min-height: calc(var(--control-height) + var(--spacing-4));
+    padding: var(--spacing-2) var(--spacing-4);
+    width: calc(100% + (var(--spacing-4) * 2));
+}
+
+.media-tagging-preview__toolbar-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+    justify-content: flex-end;
+    margin-left: auto;
+}
+
+.media-tagging-preview__asset-shell {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    min-height: 0;
+    overflow: hidden;
+    width: 100%;
+}
+
+.media-tagging-preview__rotation-controls {
+    display: flex;
+    gap: var(--spacing-2);
+}
+
+.media-tagging-preview__icon-button {
+    backdrop-filter: blur(8px);
+    background: rgba(20, 20, 20, 0.78);
+    min-width: var(--control-height);
+    padding: 0;
+    width: var(--control-height);
 }
 
 .media-tagging-preview__toggle {
@@ -674,10 +710,19 @@
 .media-tagging-preview__asset {
     flex: 1;
     height: 100%;
+    min-height: 0;
     object-fit: contain;
+    transform: rotate(var(--media-tagging-preview-rotation, 0deg));
+    transform-origin: center;
+    transition: transform var(--transition-standard);
     width: 100%;
 }
 
+.media-tagging-preview__asset.is-rotated-quarter {
+    height: min(100%, 72vw);
+    width: min(100%, 72vh);
+}
+
 .media-tagging-audio-preview {
     align-items: center;
     align-self: center;
@@ -765,6 +810,7 @@
 .media-tagging-preview__meta-header {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     gap: var(--spacing-3);
     justify-content: space-between;
 }
@@ -782,6 +828,13 @@
     flex: 0 0 auto;
 }
 
+.media-tagging-preview__meta-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+    justify-content: flex-end;
+}
+
 .media-tagging-preview__metadata {
     border-top: 1px solid rgba(75, 71, 50, 0.14);
     display: flex;
@@ -858,6 +911,32 @@
     gap: var(--spacing-3);
 }
 
+.media-tagging-tag-panel__footer-main {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+}
+
+.media-tagging-tag-panel__remaining {
+    color: rgba(205, 199, 171, 0.45);
+    flex: 1 1 auto;
+    font-family: var(--font-family-mono);
+    font-size: 0.6875rem;
+    letter-spacing: 0.14em;
+    min-width: 0;
+    text-transform: uppercase;
+}
+
+.media-tagging-tag-panel__actions {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+    justify-content: flex-end;
+}
+
 .media-tagging-tag-list {
     align-content: start;
     display: grid;
@@ -1139,9 +1218,44 @@
         grid-template-columns: 1fr;
     }
 
+    .sql-highlight-shell--media {
+        min-height: 9rem;
+    }
+
     .media-tagging-audio-preview {
         grid-template-columns: 1fr;
         justify-items: center;
         text-align: center;
     }
 }
+
+@media (min-width: 1024px) and (max-height: 900px) {
+    .media-tagging-card--tagging .media-tagging-card__header,
+    .media-tagging-card--tagging .media-tagging-card__body {
+        padding: var(--spacing-4);
+    }
+
+    .media-tagging-card--tagging .media-tagging-card__body {
+        gap: var(--spacing-3);
+    }
+
+    .media-tagging-card--tagging .media-tagging-form-grid,
+    .media-tagging-card--tagging .media-tagging-query-grid {
+        gap: var(--spacing-3);
+    }
+
+    .media-tagging-card--tagging .media-tagging-field {
+        gap: 0.35rem;
+    }
+
+    .media-tagging-card--tagging .sql-highlight-shell--media {
+        min-height: 4.5rem;
+    }
+
+    .media-tagging-card--tagging .sql-highlight-content,
+    .media-tagging-card--tagging .sql-highlight-input {
+        font-size: 0.72rem;
+        line-height: 1.5;
+        padding: 0.65rem 0.75rem;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sqlite-hub",
-    "version": "0.9.0",
+    "version": "0.9.1",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {

package/server/services/storage/appStateStore.js

@@ -100,8 +100,11 @@ function normalizeMediaTaggingConfigRecord(config = {}) {
   };
 }
 
-function isChartCompatibleQueryType(queryType) {
-  return String(queryType ?? "").trim().toLowerCase() === "select";
+function isChartCompatibleQuery(queryType, rawSql = "") {
+  return (
+    String(queryType ?? "").trim().toLowerCase() === "select" ||
+    detectQueryType(rawSql) === "select"
+  );
 }
 
 class AppStateStore {
@@ -752,7 +755,7 @@ class AppStateStore {
       previewSql: buildSqlPreview(row.raw_sql ?? row.rawSql),
       lastRun,
       chartsEligible:
-        isChartCompatibleQueryType(queryType) &&
+        isChartCompatibleQuery(queryType, row.raw_sql ?? row.rawSql) &&
         (!lastRun || String(lastRun.status ?? "").trim().toLowerCase() !== "error"),
     };
   }
@@ -1252,12 +1255,12 @@ class AppStateStore {
             LIMIT 1
           )
         WHERE q.database_key = ?
-          AND q.query_type = 'select'
           AND COALESCE(latest.status, 'success') != 'error'
         ORDER BY q.last_used_at DESC, q.id DESC
       `)
       .all(normalizedDatabaseKey)
-      .map((row) => this.decorateQueryHistoryRow(row));
+      .map((row) => this.decorateQueryHistoryRow(row))
+      .filter((item) => item.chartsEligible);
   }
 
   getQueryHistoryItemById(historyId) {
@@ -1367,7 +1370,7 @@ class AppStateStore {
   getChartQueryHistoryItemForDatabase(historyId, databaseKey) {
     const item = this.getQueryHistoryItemForDatabase(historyId, databaseKey);
 
-    if (!isChartCompatibleQueryType(item.queryType)) {
+    if (!isChartCompatibleQuery(item.queryType, item.rawSql)) {
       throw new ValidationError("Only SELECT queries can be opened in Charts.");
     }
 

package/server/services/storage/queryHistoryUtils.js

@@ -37,11 +37,174 @@ function getLeadingKeywords(sql = "", limit = 3) {
   return matches.slice(0, limit).map((token) => token.toLowerCase());
 }
 
+function readWordAt(value = "", index = 0) {
+  const match = String(value).slice(index).match(/^[A-Za-z]+/);
+  return match ? match[0].toLowerCase() : "";
+}
+
+function skipWhitespace(value = "", index = 0) {
+  let cursor = index;
+
+  while (cursor < value.length && /\s/.test(value[cursor])) {
+    cursor += 1;
+  }
+
+  return cursor;
+}
+
+function advanceQuotedSql(value = "", index = 0) {
+  const quote = value[index];
+  const closingQuote = quote === "[" ? "]" : quote;
+  let cursor = index + 1;
+
+  while (cursor < value.length) {
+    if (value[cursor] === closingQuote) {
+      if ((quote === "'" || quote === '"') && value[cursor + 1] === closingQuote) {
+        cursor += 2;
+        continue;
+      }
+
+      return cursor + 1;
+    }
+
+    cursor += 1;
+  }
+
+  return value.length;
+}
+
+function isSqlWordBoundary(value = "", index = 0) {
+  return index < 0 || index >= value.length || !/[A-Za-z0-9_]/.test(value[index]);
+}
+
+function findTopLevelWord(value = "", word = "", startIndex = 0) {
+  const normalizedWord = String(word).toLowerCase();
+  let cursor = startIndex;
+  let depth = 0;
+
+  while (cursor < value.length) {
+    const char = value[cursor];
+
+    if (char === "'" || char === '"' || char === "`" || char === "[") {
+      cursor = advanceQuotedSql(value, cursor);
+      continue;
+    }
+
+    if (char === "(") {
+      depth += 1;
+      cursor += 1;
+      continue;
+    }
+
+    if (char === ")") {
+      depth = Math.max(0, depth - 1);
+      cursor += 1;
+      continue;
+    }
+
+    if (
+      depth === 0 &&
+      value.slice(cursor, cursor + normalizedWord.length).toLowerCase() === normalizedWord &&
+      isSqlWordBoundary(value, cursor - 1) &&
+      isSqlWordBoundary(value, cursor + normalizedWord.length)
+    ) {
+      return cursor;
+    }
+
+    cursor += 1;
+  }
+
+  return -1;
+}
+
+function findMatchingParen(value = "", openIndex = 0) {
+  let cursor = openIndex;
+  let depth = 0;
+
+  while (cursor < value.length) {
+    const char = value[cursor];
+
+    if (char === "'" || char === '"' || char === "`" || char === "[") {
+      cursor = advanceQuotedSql(value, cursor);
+      continue;
+    }
+
+    if (char === "(") {
+      depth += 1;
+    } else if (char === ")") {
+      depth -= 1;
+
+      if (depth === 0) {
+        return cursor;
+      }
+    }
+
+    cursor += 1;
+  }
+
+  return -1;
+}
+
+function resolveCteStatementKeyword(sql = "") {
+  const stripped = stripBlockComments(stripLineComments(sql)).trim();
+  let cursor = skipWhitespace(stripped, 0);
+
+  if (readWordAt(stripped, cursor) !== "with") {
+    return "";
+  }
+
+  cursor += 4;
+  cursor = skipWhitespace(stripped, cursor);
+
+  if (readWordAt(stripped, cursor) === "recursive") {
+    cursor += "recursive".length;
+  }
+
+  while (cursor < stripped.length) {
+    const asIndex = findTopLevelWord(stripped, "as", cursor);
+
+    if (asIndex < 0) {
+      return "with";
+    }
+
+    cursor = skipWhitespace(stripped, asIndex + 2);
+
+    if (readWordAt(stripped, cursor) === "not") {
+      cursor = skipWhitespace(stripped, cursor + 3);
+    }
+
+    if (readWordAt(stripped, cursor) === "materialized") {
+      cursor = skipWhitespace(stripped, cursor + "materialized".length);
+    }
+
+    if (stripped[cursor] !== "(") {
+      return "with";
+    }
+
+    const closeIndex = findMatchingParen(stripped, cursor);
+
+    if (closeIndex < 0) {
+      return "with";
+    }
+
+    cursor = skipWhitespace(stripped, closeIndex + 1);
+
+    if (stripped[cursor] === ",") {
+      cursor = skipWhitespace(stripped, cursor + 1);
+      continue;
+    }
+
+    return readWordAt(stripped, cursor) || "with";
+  }
+
+  return "with";
+}
+
 function resolveEffectiveKeyword(sql = "") {
-  const [firstKeyword, secondKeyword, thirdKeyword] = getLeadingKeywords(sql, 3);
+  const [firstKeyword, secondKeyword] = getLeadingKeywords(sql, 3);
 
   if (firstKeyword === "with") {
-    return secondKeyword === "recursive" ? thirdKeyword ?? "with" : secondKeyword ?? "with";
+    return resolveCteStatementKeyword(sql);
   }
 
   if (firstKeyword === "explain") {

package/shortkeys.md

@@ -0,0 +1,5 @@
+# Meddia Tagging
+
+## tagging queue
+
+`shift + enter` triggers tagged & next