From 44011cb9a4a05e1356fc45a5ad901dfcbfa7f962 Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Mon, 29 Jun 2026 00:13:33 +0800
Subject: [PATCH] feat(grid): preview binary image cell values

---
 apps/desktop/src/components/grid/DataGrid.vue | 15 ++--
 .../components/grid/ImagePreviewDialog.vue    | 49 +++++++++--
 apps/desktop/src/i18n/locales/en.ts           |  2 +-
 apps/desktop/src/i18n/locales/es.ts           |  2 +-
 apps/desktop/src/i18n/locales/it.ts           |  2 +-
 apps/desktop/src/i18n/locales/ja.ts           |  2 +-
 apps/desktop/src/i18n/locales/pt-BR.ts        |  2 +-
 apps/desktop/src/i18n/locales/zh-CN.ts        |  2 +-
 apps/desktop/src/i18n/locales/zh-TW.ts        |  2 +-
 apps/desktop/src/lib/cellImageUrl.ts          | 82 ++++++++++++++++++-
 apps/desktop/src/lib/dataGridDetail.ts        | 21 ++++-
 apps/desktop/src/lib/imagePreviewViewer.ts    | 41 ++++++++++
 packages/app-tests/cellImageUrl.test.ts       | 31 +++++++
 packages/app-tests/dataGridDetail.test.ts     | 55 +++++++++++++
 packages/app-tests/imagePreviewViewer.test.ts | 67 +++++++++++++++
 15 files changed, 352 insertions(+), 23 deletions(-)
 create mode 100644 packages/app-tests/imagePreviewViewer.test.ts

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index f3eee4e0f2..66467ddf81 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -3482,6 +3482,7 @@ function cellDetailFor(rowIndex: number, columnIndex: number): DataGridCellDetai
     columns: props.result.columns,
     columnIndex,
     typeByColumn: columnTypeMap.value,
+    resultColumnTypes: props.result.column_types,
     commentByColumn: columnCommentMap.value,
     displayValue: (value, index) => formatCellCached(value, index),
     isEditable: canEditCellItem(item, columnIndex),
@@ -3509,6 +3510,7 @@ const rowDetail = computed(() => {
     columns: props.result.columns,
     columnIndexes: visibleColumnIndexes.value,
     typeByColumn: columnTypeMap.value,
+    resultColumnTypes: props.result.column_types,
     commentByColumn: columnCommentMap.value,
     displayValue: (value, index) => formatCellCached(value, index),
     isEditableColumn: (columnIndex) => canEditCellItem(item, columnIndex),
@@ -3528,6 +3530,7 @@ const columnDetail = computed(() => {
     columns: props.result.columns,
     columnIndex,
     typeByColumn: columnTypeMap.value,
+    resultColumnTypes: props.result.column_types,
     commentByColumn: columnCommentMap.value,
     displayValue: (value, index) => formatCellCached(value, index),
   });
@@ -8437,7 +8440,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                       </div>
                     </div>
                   </template>
-                  <div class="space-y-1" :class="[{ 'min-h-0 flex flex-col': cellDetailPanelIsBottom || isEditingDetail }, cellDetailPanelIsBottom ? 'flex-1' : '']">
+                  <div class="space-y-1" :class="[{ 'min-h-0 flex flex-col': cellDetailPanelIsBottom || isEditingDetail }, cellDetailPanelIsBottom && !(activeCellDetail.imagePreviewUrl && !isEditingDetail) ? 'flex-1' : '', activeCellDetail.imagePreviewUrl && !isEditingDetail ? 'shrink-0' : '']">
                     <div class="flex min-h-5 items-center justify-between gap-2">
                       <div class="text-muted-foreground">{{ t("grid.cellValue") }}</div>
                       <div v-if="!isEditingDetail" class="flex items-center gap-1">
@@ -8476,14 +8479,14 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                         </Popover>
                       </div>
                     </div>
-                    <div v-if="activeCellDetail.imagePreviewUrl && !isEditingDetail" class="space-y-1.5">
+                    <div v-if="activeCellDetail.imagePreviewUrl && !isEditingDetail" class="shrink-0 space-y-1.5">
                       <div class="text-muted-foreground">{{ t("grid.imagePreview") }}</div>
-                      <a :href="activeCellDetail.imagePreviewUrl" role="button" class="block overflow-hidden rounded border bg-muted/20" @click.prevent="openImagePreview(activeCellDetail.imagePreviewUrl, activeCellDetail.column)">
-                        <img :src="activeCellDetail.imagePreviewUrl" :alt="activeCellDetail.column" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="max-h-72 w-full object-contain" />
+                      <a :href="activeCellDetail.imagePreviewUrl" role="button" class="flex overflow-hidden rounded border bg-muted/20" :class="cellDetailPanelIsBottom ? 'max-h-28' : 'max-h-40'" @click.prevent="openImagePreview(activeCellDetail.imagePreviewUrl, activeCellDetail.column)">
+                        <img :src="activeCellDetail.imagePreviewUrl" :alt="activeCellDetail.column" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="max-h-full w-full object-contain" />
                       </a>
                     </div>
                     <template v-if="isEditingDetail">
-                      <div class="min-h-0" :class="cellDetailPanelIsBottom ? 'flex-1' : ''" :style="sideDetailEditorStyle">
+                      <div class="min-h-32 shrink-0" :class="cellDetailPanelIsBottom ? 'h-32' : ''" :style="sideDetailEditorStyle">
                         <TemporalCellEditor v-if="detailTemporalEditorKind" v-model="detailEditValue" :kind="detailTemporalEditorKind" variant="inline" :commit-on-close="false" @cancel="cancelDetailEdit" @commit="commitDetailEdit" />
                         <div v-else ref="detailsEditorContainer" data-cell-detail-editor-root class="min-h-0 h-full w-full rounded border overflow-hidden" />
                       </div>
@@ -8507,7 +8510,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
                     <pre
                       v-else
                       class="overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words cursor-pointer hover:border-primary/50"
-                      :class="[{ 'cursor-text': activeCellDetail.isEditable }, cellDetailPanelIsBottom ? 'min-h-0 flex-1' : '']"
+                      :class="[{ 'cursor-text': activeCellDetail.isEditable }, cellDetailPanelIsBottom && activeCellDetail.imagePreviewUrl ? 'min-h-24 max-h-32 shrink-0' : '', cellDetailPanelIsBottom && !activeCellDetail.imagePreviewUrl ? 'min-h-0 flex-1' : '']"
                       @dblclick="startDetailEdit"
                       >{{ activeCellDetail.rawValuePreview }}</pre
                     >
diff --git a/apps/desktop/src/components/grid/ImagePreviewDialog.vue b/apps/desktop/src/components/grid/ImagePreviewDialog.vue
index 5ec67f24c9..5fa26d5835 100644
--- a/apps/desktop/src/components/grid/ImagePreviewDialog.vue
+++ b/apps/desktop/src/components/grid/ImagePreviewDialog.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { ExternalLink, Maximize2, X, ZoomIn, ZoomOut } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { imagePreviewFitScale, imagePreviewTransform, nextImagePreviewScale } from "@/lib/imagePreviewViewer";
+import { imagePreviewDialogSize, imagePreviewFitScale, imagePreviewTransform, nextImagePreviewScale } from "@/lib/imagePreviewViewer";
 
 const props = defineProps<{
   open: boolean;
@@ -25,6 +25,8 @@ const imageError = ref(false);
 const stageRef = ref<HTMLElement>();
 const naturalWidth = ref(0);
 const naturalHeight = ref(0);
+const viewportWidth = ref(typeof window === "undefined" ? 0 : window.innerWidth);
+const viewportHeight = ref(typeof window === "undefined" ? 0 : window.innerHeight);
 const dragStart = ref<{ x: number; y: number; offsetX: number; offsetY: number } | null>(null);
 
 const hostLabel = computed(() => {
@@ -38,6 +40,7 @@ const hostLabel = computed(() => {
 
 const imageTitle = computed(() => props.title || t("grid.imagePreview"));
 const zoomLabel = computed(() => `${Math.round(scale.value * 100)}%`);
+const canOpenExternal = computed(() => !props.src.startsWith("data:"));
 const imageStyle = computed(() => ({
   width: naturalWidth.value ? `${naturalWidth.value}px` : "auto",
   height: naturalHeight.value ? `${naturalHeight.value}px` : "auto",
@@ -47,6 +50,25 @@ const imageStyle = computed(() => ({
     offsetY: offsetY.value,
   })}`,
 }));
+const dialogSize = computed(() =>
+  imagePreviewDialogSize({
+    imageWidth: naturalWidth.value,
+    imageHeight: naturalHeight.value,
+    viewportWidth: viewportWidth.value,
+    viewportHeight: viewportHeight.value,
+  }),
+);
+const dialogStyle = computed(() => ({
+  width: dialogSize.value ? `${dialogSize.value.width}px` : "min(92vw, 1280px)",
+  height: dialogSize.value ? `${dialogSize.value.height}px` : "min(86vh, 720px)",
+  maxWidth: "92vw",
+  maxHeight: "86vh",
+}));
+
+function updateViewportSize() {
+  viewportWidth.value = window.innerWidth;
+  viewportHeight.value = window.innerHeight;
+}
 
 function resetViewer() {
   scale.value = 1;
@@ -93,7 +115,7 @@ function onImageLoad(event: Event) {
   naturalWidth.value = img.naturalWidth;
   naturalHeight.value = img.naturalHeight;
   imageLoaded.value = true;
-  fitImage();
+  requestAnimationFrame(fitImage);
 }
 
 function onWheel(event: WheelEvent) {
@@ -136,14 +158,29 @@ async function openExternal() {
 watch(
   () => [props.open, props.src] as const,
   ([open]) => {
-    if (open) resetViewer();
+    if (open) {
+      updateViewportSize();
+      resetViewer();
+    }
   },
 );
+
+watch([viewportWidth, viewportHeight], () => {
+  if (props.open && imageLoaded.value) fitImage();
+});
+
+onMounted(() => {
+  window.addEventListener("resize", updateViewportSize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", updateViewportSize);
+});
 </script>
 
 <template>
   <Dialog :open="open" @update:open="(value) => emit('update:open', value)">
-    <DialogContent :show-close-button="false" class="image-preview-dialog h-[min(86vh,920px)] w-[min(92vw,1280px)] max-w-none gap-0 overflow-hidden rounded-xl border-white/10 bg-[#090b0f] p-0 text-white shadow-2xl" @escape-key-down="close">
+    <DialogContent :show-close-button="false" class="image-preview-dialog !flex !max-w-[92vw] flex-col gap-0 overflow-hidden rounded-xl border-white/10 bg-[#090b0f] p-0 text-white shadow-2xl sm:!max-w-[92vw]" :style="dialogStyle" @escape-key-down="close">
       <div class="flex h-12 shrink-0 items-center gap-3 border-b border-white/10 bg-white/[0.035] px-4">
         <div class="min-w-0 flex-1">
           <DialogTitle class="truncate text-sm font-semibold text-white">{{ imageTitle }}</DialogTitle>
@@ -160,7 +197,7 @@ watch(
           <Button variant="ghost" size="icon" class="h-7 w-7 text-white/75 hover:bg-white/10 hover:text-white" :title="t('grid.fitImage')" @click="fitImage">
             <Maximize2 class="h-3.5 w-3.5" />
           </Button>
-          <Button variant="ghost" size="icon" class="h-7 w-7 text-white/75 hover:bg-white/10 hover:text-white" :title="t('grid.openImage')" @click="openExternal">
+          <Button v-if="canOpenExternal" variant="ghost" size="icon" class="h-7 w-7 text-white/75 hover:bg-white/10 hover:text-white" :title="t('grid.openImage')" @click="openExternal">
             <ExternalLink class="h-3.5 w-3.5" />
           </Button>
         </div>
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index da00dcc4a2..824e05ecff 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -750,7 +750,7 @@ export default {
     layerPreview: "Layer Preview",
     zoomIn: "Zoom In",
     zoomOut: "Zoom Out",
-    fitImage: "Fit to Window",
+    fitImage: "Fit to View",
     openImage: "Open Image",
     columnName: "Column",
     columnType: "Type",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index 487a408870..9295be2a20 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -752,7 +752,7 @@ export default withEnglishFallback({
     layerPreview: "Vista previa de capa",
     zoomIn: "Acercar",
     zoomOut: "Alejar",
-    fitImage: "Ajustar a ventana",
+    fitImage: "Ajustar a la vista",
     openImage: "Abrir imagen",
     columnName: "Columna",
     columnType: "Tipo",
diff --git a/apps/desktop/src/i18n/locales/it.ts b/apps/desktop/src/i18n/locales/it.ts
index 17901aacf2..dbeecf8e9a 100644
--- a/apps/desktop/src/i18n/locales/it.ts
+++ b/apps/desktop/src/i18n/locales/it.ts
@@ -759,7 +759,7 @@ export default withEnglishFallback({
     layerPreview: "Anteprima Layer",
     zoomIn: "Ingrandisci",
     zoomOut: "Rimpicciolisci",
-    fitImage: "Adatta alla Finestra",
+    fitImage: "Adatta alla Vista",
     openImage: "Apri Immagine",
     columnName: "Colonna",
     columnType: "Tipo",
diff --git a/apps/desktop/src/i18n/locales/ja.ts b/apps/desktop/src/i18n/locales/ja.ts
index ebd5efcced..cef92cea4c 100644
--- a/apps/desktop/src/i18n/locales/ja.ts
+++ b/apps/desktop/src/i18n/locales/ja.ts
@@ -748,7 +748,7 @@ export default withEnglishFallback({
     layerPreview: "レイヤープレビュー",
     zoomIn: "拡大",
     zoomOut: "縮小",
-    fitImage: "ウィンドウに合わせる",
+    fitImage: "表示領域に合わせる",
     openImage: "画像を開く",
     columnName: "列",
     columnType: "データ型",
diff --git a/apps/desktop/src/i18n/locales/pt-BR.ts b/apps/desktop/src/i18n/locales/pt-BR.ts
index 4a77559342..04902ff859 100644
--- a/apps/desktop/src/i18n/locales/pt-BR.ts
+++ b/apps/desktop/src/i18n/locales/pt-BR.ts
@@ -764,7 +764,7 @@ export default withEnglishFallback({
     layerPreview: "Visualização de Camada",
     zoomIn: "Aproximar",
     zoomOut: "Afastar",
-    fitImage: "Ajustar à Janela",
+    fitImage: "Ajustar à Visualização",
     openImage: "Abrir Imagem",
     columnName: "Coluna",
     columnType: "Tipo",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index 67a9550acc..bfc5e6da79 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -753,7 +753,7 @@ export default withEnglishFallback({
     layerPreview: "图层预览",
     zoomIn: "放大",
     zoomOut: "缩小",
-    fitImage: "适应窗口",
+    fitImage: "适合显示区域",
     openImage: "打开图片",
     columnName: "列名",
     columnType: "类型",
diff --git a/apps/desktop/src/i18n/locales/zh-TW.ts b/apps/desktop/src/i18n/locales/zh-TW.ts
index 246dee8faa..2c1002159c 100644
--- a/apps/desktop/src/i18n/locales/zh-TW.ts
+++ b/apps/desktop/src/i18n/locales/zh-TW.ts
@@ -752,7 +752,7 @@ export default withEnglishFallback({
     layerPreview: "圖層預覽",
     zoomIn: "放大",
     zoomOut: "縮小",
-    fitImage: "適應視窗",
+    fitImage: "適合顯示區域",
     openImage: "開啟圖片",
     columnName: "欄位名稱",
     columnType: "類型",
diff --git a/apps/desktop/src/lib/cellImageUrl.ts b/apps/desktop/src/lib/cellImageUrl.ts
index a557c0ce29..3ca3c496a9 100644
--- a/apps/desktop/src/lib/cellImageUrl.ts
+++ b/apps/desktop/src/lib/cellImageUrl.ts
@@ -1,13 +1,25 @@
 import type { CellValue } from "@/lib/cellValue";
+import { isBinaryCellColumnType, parseBinaryCellBytes } from "@/lib/binaryCellDownload";
 
 const IMAGE_PATH_RE = /\.(?:png|jpe?g|webp|gif|avif|bmp|svg)$/i;
 const SAFE_DATA_IMAGE_RE = /^data:image\/(?:png|jpe?g|webp|gif|avif|bmp);base64,[a-z0-9+/=\s]+$/i;
+const MAX_BINARY_IMAGE_PREVIEW_BYTES = 8 * 1024 * 1024;
+const HEX_PREFIX_RE = /^(?:0[xX]|\\x)([0-9a-fA-F\s]+)$/;
+const HEX_ESCAPE_RE = /^(?:\\x[0-9a-fA-F]{2}|\s)+$/;
+const BARE_HEX_RE = /^[0-9a-fA-F\s]+$/;
 
 function isLocalHttpHost(hostname: string): boolean {
   return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1";
 }
 
-export function cellImagePreviewUrl(value: CellValue): string | null {
+export interface CellImagePreviewOptions {
+  binary?: boolean;
+}
+
+export function cellImagePreviewUrl(value: CellValue | unknown, columnType?: string, options: CellImagePreviewOptions = {}): string | null {
+  const binaryPreviewUrl = options.binary === false ? null : binaryImagePreviewUrl(value, columnType);
+  if (binaryPreviewUrl) return binaryPreviewUrl;
+
   if (typeof value !== "string") return null;
   const text = value.trim();
   if (!text) return null;
@@ -25,3 +37,71 @@ export function cellImagePreviewUrl(value: CellValue): string | null {
   if (!IMAGE_PATH_RE.test(url.pathname)) return null;
   return text;
 }
+
+function binaryImagePreviewUrl(value: unknown, columnType?: string): string | null {
+  if (estimatedBinaryByteLength(value, columnType) > MAX_BINARY_IMAGE_PREVIEW_BYTES) return null;
+  const bytes = parseBinaryCellBytes(value, columnType);
+  if (!bytes || bytes.length > MAX_BINARY_IMAGE_PREVIEW_BYTES) return null;
+  const mimeType = detectImageMimeType(bytes);
+  if (!mimeType) return null;
+  return `data:${mimeType};base64,${bytesToBase64(bytes)}`;
+}
+
+function estimatedBinaryByteLength(value: unknown, columnType?: string): number {
+  if (Array.isArray(value)) return value.length;
+  if (value && typeof value === "object" && Array.isArray((value as { data?: unknown }).data)) {
+    return (value as { data: unknown[] }).data.length;
+  }
+  if (typeof value !== "string") return 0;
+
+  const trimmed = value.trim();
+  const prefixed = trimmed.match(HEX_PREFIX_RE);
+  if (prefixed) return prefixed[1].replace(/\s+/g, "").length / 2;
+  if (HEX_ESCAPE_RE.test(trimmed)) return trimmed.replace(/\s+/g, "").replace(/\\x/gi, "").length / 2;
+  if (isBinaryCellColumnType(columnType) && BARE_HEX_RE.test(trimmed)) return trimmed.replace(/\s+/g, "").length / 2;
+  return 0;
+}
+
+function detectImageMimeType(bytes: Uint8Array): string | null {
+  if (startsWith(bytes, [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])) return "image/png";
+  if (startsWith(bytes, [0xff, 0xd8, 0xff])) return "image/jpeg";
+  if (asciiAt(bytes, 0, "GIF87a") || asciiAt(bytes, 0, "GIF89a")) return "image/gif";
+  if (asciiAt(bytes, 0, "RIFF") && asciiAt(bytes, 8, "WEBP")) return "image/webp";
+  if (startsWith(bytes, [0x42, 0x4d])) return "image/bmp";
+  if (asciiAt(bytes, 4, "ftyp") && (asciiAt(bytes, 8, "avif") || asciiAt(bytes, 8, "avis"))) return "image/avif";
+  return safeSvgMimeType(bytes);
+}
+
+function startsWith(bytes: Uint8Array, signature: number[]): boolean {
+  if (bytes.length < signature.length) return false;
+  return signature.every((byte, index) => bytes[index] === byte);
+}
+
+function asciiAt(bytes: Uint8Array, offset: number, value: string): boolean {
+  if (bytes.length < offset + value.length) return false;
+  for (let i = 0; i < value.length; i++) {
+    if (bytes[offset + i] !== value.charCodeAt(i)) return false;
+  }
+  return true;
+}
+
+function safeSvgMimeType(bytes: Uint8Array): string | null {
+  const text = new TextDecoder("utf-8", { fatal: false }).decode(bytes);
+  const trimmed = text.replace(/^\uFEFF/, "").trimStart();
+  if (!/^(?:<\?xml[\s\S]*?\?>\s*)?(?:<!--[\s\S]*?-->\s*)*<svg(?:\s|>)/i.test(trimmed.slice(0, 2048))) {
+    return null;
+  }
+  if (/<\s*script\b/i.test(text) || /<\s*foreignObject\b/i.test(text) || /\son[a-z]+\s*=/i.test(text) || /\b(?:href|xlink:href|src)\s*=\s*["']?\s*javascript:/i.test(text)) {
+    return null;
+  }
+  return "image/svg+xml";
+}
+
+function bytesToBase64(bytes: Uint8Array): string {
+  let binary = "";
+  const chunkSize = 0x8000;
+  for (let offset = 0; offset < bytes.length; offset += chunkSize) {
+    binary += String.fromCharCode(...bytes.subarray(offset, offset + chunkSize));
+  }
+  return btoa(binary);
+}
diff --git a/apps/desktop/src/lib/dataGridDetail.ts b/apps/desktop/src/lib/dataGridDetail.ts
index 836edb53b8..06850a72ab 100644
--- a/apps/desktop/src/lib/dataGridDetail.ts
+++ b/apps/desktop/src/lib/dataGridDetail.ts
@@ -44,9 +44,11 @@ export interface BuildDataGridCellDetailOptions {
   columns: readonly string[];
   columnIndex: number;
   typeByColumn?: ReadonlyMap<string, string>;
+  resultColumnTypes?: readonly string[];
   commentByColumn?: ReadonlyMap<string, string>;
   displayValue: (value: CellValue, columnIndex: number) => string;
   isEditable: boolean;
+  includeBinaryImagePreview?: boolean;
 }
 
 export interface BuildDataGridRowDetailOptions {
@@ -56,6 +58,7 @@ export interface BuildDataGridRowDetailOptions {
   columns: readonly string[];
   columnIndexes: readonly number[];
   typeByColumn?: ReadonlyMap<string, string>;
+  resultColumnTypes?: readonly string[];
   commentByColumn?: ReadonlyMap<string, string>;
   displayValue: (value: CellValue, columnIndex: number) => string;
   isEditableColumn?: (columnIndex: number) => boolean;
@@ -73,6 +76,7 @@ export interface BuildDataGridColumnDetailOptions {
   columns: readonly string[];
   columnIndex: number;
   typeByColumn?: ReadonlyMap<string, string>;
+  resultColumnTypes?: readonly string[];
   commentByColumn?: ReadonlyMap<string, string>;
   displayValue: (value: CellValue, columnIndex: number) => string;
 }
@@ -87,13 +91,14 @@ export function buildDataGridCellDetail(options: BuildDataGridCellDetailOptions)
   const formattedJson = typeof value === "string" && looksLikeJsonContainer(value) ? (formatJsonText(value) ?? "") : "";
   const rawValuePreview = previewText(rawValue);
   const displayValuePreview = previewText(displayValue);
+  const type = detailColumnType(options.typeByColumn, options.resultColumnTypes, column, options.columnIndex);
 
   return {
     rowNumber: options.rowIndex + 1,
     rowId: options.rowId,
     colIndex: options.columnIndex,
     column,
-    type: options.typeByColumn?.get(column) ?? "",
+    type,
     comment: options.commentByColumn?.get(column) ?? "",
     value,
     rawValue,
@@ -101,7 +106,7 @@ export function buildDataGridCellDetail(options: BuildDataGridCellDetailOptions)
     displayValue,
     displayValuePreview,
     isValuePreviewTruncated: rawValuePreview.length < rawValue.length || displayValuePreview.length < displayValue.length,
-    imagePreviewUrl: rawValue.length <= CELL_DETAIL_VALUE_PREVIEW_MAX_LENGTH ? cellImagePreviewUrl(value) : null,
+    imagePreviewUrl: cellImagePreviewUrl(value, type, { binary: options.includeBinaryImagePreview !== false }),
     length: value === null ? 0 : String(value).length,
     formattedJson,
     isEditable: options.isEditable,
@@ -121,9 +126,11 @@ export function buildDataGridColumnDetail(options: BuildDataGridColumnDetailOpti
         columns: options.columns,
         columnIndex: options.columnIndex,
         typeByColumn: options.typeByColumn,
+        resultColumnTypes: options.resultColumnTypes,
         commentByColumn: options.commentByColumn,
         displayValue: options.displayValue,
         isEditable: row.isEditable ?? false,
+        includeBinaryImagePreview: false,
       }),
     )
     .filter((field): field is DataGridCellDetail => field !== null);
@@ -131,7 +138,7 @@ export function buildDataGridColumnDetail(options: BuildDataGridColumnDetailOpti
   return {
     colIndex: options.columnIndex,
     column,
-    type: options.typeByColumn?.get(column) ?? "",
+    type: detailColumnType(options.typeByColumn, options.resultColumnTypes, column, options.columnIndex),
     comment: options.commentByColumn?.get(column) ?? "",
     fields,
   };
@@ -147,9 +154,11 @@ export function buildDataGridRowDetail(options: BuildDataGridRowDetailOptions):
         columns: options.columns,
         columnIndex,
         typeByColumn: options.typeByColumn,
+        resultColumnTypes: options.resultColumnTypes,
         commentByColumn: options.commentByColumn,
         displayValue: options.displayValue,
         isEditable: options.isEditableColumn?.(columnIndex) ?? false,
+        includeBinaryImagePreview: false,
       }),
     )
     .filter((field): field is DataGridCellDetail => field !== null);
@@ -161,6 +170,12 @@ export function buildDataGridRowDetail(options: BuildDataGridRowDetailOptions):
   };
 }
 
+function detailColumnType(typeByColumn: ReadonlyMap<string, string> | undefined, resultColumnTypes: readonly string[] | undefined, column: string, columnIndex: number): string {
+  const fromMeta = typeByColumn?.get(column)?.trim();
+  if (fromMeta) return fromMeta;
+  return resultColumnTypes?.[columnIndex]?.trim() ?? "";
+}
+
 export function dataGridRowDetailJson(detail: DataGridRowDetail): string {
   const row: Record<string, CellValue> = {};
   detail.fields.forEach((field) => {
diff --git a/apps/desktop/src/lib/imagePreviewViewer.ts b/apps/desktop/src/lib/imagePreviewViewer.ts
index 7c696bd473..aa50f930c2 100644
--- a/apps/desktop/src/lib/imagePreviewViewer.ts
+++ b/apps/desktop/src/lib/imagePreviewViewer.ts
@@ -27,3 +27,44 @@ export function imagePreviewFitScale(options: { imageWidth: number; imageHeight:
 export function imagePreviewTransform(options: { scale: number; offsetX: number; offsetY: number }): string {
   return `translate(${options.offsetX}px, ${options.offsetY}px) scale(${options.scale})`;
 }
+
+export function imagePreviewDialogSize(options: {
+  imageWidth: number;
+  imageHeight: number;
+  viewportWidth: number;
+  viewportHeight: number;
+  toolbarHeight?: number;
+  maxWidthRatio?: number;
+  maxHeightRatio?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  minWidth?: number;
+  minStageHeight?: number;
+}): { width: number; height: number } | null {
+  if (options.imageWidth <= 0 || options.imageHeight <= 0 || options.viewportWidth <= 0 || options.viewportHeight <= 0) {
+    return null;
+  }
+
+  const toolbarHeight = options.toolbarHeight ?? 48;
+  const maxWidth = Math.min(options.viewportWidth * (options.maxWidthRatio ?? 0.92), options.maxWidth ?? 1280);
+  const maxHeight = Math.min(options.viewportHeight * (options.maxHeightRatio ?? 0.86), options.maxHeight ?? 920);
+  const maxStageHeight = Math.max(1, maxHeight - toolbarHeight);
+  const minWidth = Math.min(maxWidth, options.minWidth ?? 360);
+  const minStageHeight = Math.min(maxStageHeight, options.minStageHeight ?? 180);
+  const imageRatio = options.imageWidth / options.imageHeight;
+  let stageWidth = maxWidth;
+  let stageHeight = stageWidth / imageRatio;
+
+  if (stageHeight > maxStageHeight) {
+    stageHeight = maxStageHeight;
+    stageWidth = stageHeight * imageRatio;
+  }
+
+  stageWidth = Math.min(maxWidth, Math.max(stageWidth, minWidth));
+  stageHeight = Math.min(maxStageHeight, Math.max(stageHeight, minStageHeight));
+
+  return {
+    width: Math.max(1, Math.floor(stageWidth)),
+    height: Math.max(1, Math.floor(stageHeight + toolbarHeight)),
+  };
+}
diff --git a/packages/app-tests/cellImageUrl.test.ts b/packages/app-tests/cellImageUrl.test.ts
index b89e3f6796..6349373972 100644
--- a/packages/app-tests/cellImageUrl.test.ts
+++ b/packages/app-tests/cellImageUrl.test.ts
@@ -27,3 +27,34 @@ test("detects safe data image URLs", () => {
   assert.equal(cellImagePreviewUrl("data:image/png;base64,abc123"), "data:image/png;base64,abc123");
   assert.equal(cellImagePreviewUrl("data:image/svg+xml;base64,abc123"), null);
 });
+
+test("detects binary image values from hex strings", () => {
+  assert.match(cellImagePreviewUrl("0x89504e470d0a1a0a0000000d49484452", "longblob") ?? "", /^data:image\/png;base64,/);
+  assert.match(cellImagePreviewUrl("0xffd8ffe000104a4649460001", "blob") ?? "", /^data:image\/jpeg;base64,/);
+  assert.match(cellImagePreviewUrl("0x47494638396101000100", "blob") ?? "", /^data:image\/gif;base64,/);
+  assert.match(cellImagePreviewUrl("0x524946461a00000057454250", "blob") ?? "", /^data:image\/webp;base64,/);
+  assert.match(cellImagePreviewUrl("0x89504e470d0a1a0a0000000d49484452") ?? "", /^data:image\/png;base64,/);
+  assert.match(cellImagePreviewUrl("89504e470d0a1a0a", "longblob") ?? "", /^data:image\/png;base64,/);
+  assert.equal(cellImagePreviewUrl("89504e470d0a1a0a"), null);
+});
+
+test("can skip generated binary image previews while keeping URL previews", () => {
+  assert.equal(cellImagePreviewUrl("0x89504e470d0a1a0a0000000d49484452", "longblob", { binary: false }), null);
+  assert.equal(cellImagePreviewUrl("https://cdn.example.com/avatar.png", "longblob", { binary: false }), "https://cdn.example.com/avatar.png");
+});
+
+test("detects binary image values from byte arrays and buffer-like values", () => {
+  assert.match(cellImagePreviewUrl([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]) ?? "", /^data:image\/png;base64,/);
+  assert.match(cellImagePreviewUrl({ type: "Buffer", data: [0xff, 0xd8, 0xff, 0xe0] }) ?? "", /^data:image\/jpeg;base64,/);
+});
+
+test("detects safe binary SVG values and rejects active SVG content", () => {
+  const svg = "0x3c73766720786d6c6e733d22687474703a2f2f7777772e77332e6f72672f323030302f737667223e3c2f7376673e";
+  const scriptedSvg = "0x3c7376673e3c7363726970743e616c6572742831293c2f7363726970743e3c2f7376673e";
+  assert.match(cellImagePreviewUrl(svg, "longblob") ?? "", /^data:image\/svg\+xml;base64,/);
+  assert.equal(cellImagePreviewUrl(scriptedSvg, "longblob"), null);
+});
+
+test("skips very large binary image previews", () => {
+  assert.equal(cellImagePreviewUrl(`0x${"00".repeat(8 * 1024 * 1024 + 1)}`, "longblob"), null);
+});
diff --git a/packages/app-tests/dataGridDetail.test.ts b/packages/app-tests/dataGridDetail.test.ts
index 3b5b635ea2..6126ad95c4 100644
--- a/packages/app-tests/dataGridDetail.test.ts
+++ b/packages/app-tests/dataGridDetail.test.ts
@@ -67,6 +67,61 @@ test("buildDataGridCellDetail reports image preview URLs", () => {
   assert.equal(detail?.imagePreviewUrl, "https://example.com/avatar.png");
 });
 
+test("buildDataGridCellDetail reports binary image preview URLs", () => {
+  const detail = buildDataGridCellDetail({
+    rowIndex: 0,
+    rowId: 1,
+    row: ["0x89504e470d0a1a0a0000000d49484452"],
+    columns: ["avatar"],
+    columnIndex: 0,
+    typeByColumn: new Map([["avatar", "longblob"]]),
+    displayValue: (value) => String(value),
+    isEditable: false,
+  });
+
+  assert.match(detail?.imagePreviewUrl ?? "", /^data:image\/png;base64,/);
+});
+
+test("buildDataGridCellDetail uses result column types for query results", () => {
+  const detail = buildDataGridCellDetail({
+    rowIndex: 0,
+    rowId: 1,
+    row: [30001, "0x89504e470d0a1a0a0000000d49484452"],
+    columns: ["id", "image_data"],
+    columnIndex: 1,
+    resultColumnTypes: ["bigint", "longblob"],
+    displayValue: (value) => String(value),
+    isEditable: false,
+  });
+
+  assert.equal(detail?.type, "longblob");
+  assert.match(detail?.imagePreviewUrl ?? "", /^data:image\/png;base64,/);
+});
+
+test("aggregate details defer binary image preview generation", () => {
+  const rowDetail = buildDataGridRowDetail({
+    rowIndex: 0,
+    rowId: 1,
+    row: ["0x89504e470d0a1a0a0000000d49484452"],
+    columns: ["avatar"],
+    columnIndexes: [0],
+    resultColumnTypes: ["longblob"],
+    displayValue: (value) => String(value),
+  });
+  const columnDetail = buildDataGridColumnDetail({
+    rows: [{ rowIndex: 0, rowId: 1, row: ["0x89504e470d0a1a0a0000000d49484452"] }],
+    columns: ["avatar"],
+    columnIndex: 0,
+    resultColumnTypes: ["longblob"],
+    displayValue: (value) => String(value),
+  });
+
+  assert.equal(rowDetail.fields[0]?.type, "longblob");
+  assert.equal(rowDetail.fields[0]?.imagePreviewUrl, null);
+  assert.equal(columnDetail?.fields[0]?.type, "longblob");
+  assert.equal(columnDetail?.fields[0]?.imagePreviewUrl, null);
+});
+
 test("buildDataGridCellDetail limits rendered previews for huge text values", () => {
   const hugeJson = `{"body":"${"x".repeat(120_000)}"}`;
   const detail = buildDataGridCellDetail({
diff --git a/packages/app-tests/imagePreviewViewer.test.ts b/packages/app-tests/imagePreviewViewer.test.ts
new file mode 100644
index 0000000000..cf0b1bf539
--- /dev/null
+++ b/packages/app-tests/imagePreviewViewer.test.ts
@@ -0,0 +1,67 @@
+import { strict as assert } from "node:assert";
+import { test } from "vitest";
+import { imagePreviewDialogSize } from "../../apps/desktop/src/lib/imagePreviewViewer.ts";
+
+test("sizes wide image preview dialogs as landscape", () => {
+  const size = imagePreviewDialogSize({
+    imageWidth: 1600,
+    imageHeight: 600,
+    viewportWidth: 1200,
+    viewportHeight: 900,
+  });
+
+  assert.ok(size);
+  assert.ok(size.width > size.height);
+  assert.ok(size.width > 384);
+});
+
+test("sizes tall image preview dialogs as portrait", () => {
+  const size = imagePreviewDialogSize({
+    imageWidth: 600,
+    imageHeight: 1600,
+    viewportWidth: 1200,
+    viewportHeight: 900,
+  });
+
+  assert.ok(size);
+  assert.ok(size.height > size.width);
+});
+
+test("keeps image preview dialogs inside viewport limits", () => {
+  const size = imagePreviewDialogSize({
+    imageWidth: 8000,
+    imageHeight: 3000,
+    viewportWidth: 1000,
+    viewportHeight: 700,
+  });
+
+  assert.ok(size);
+  assert.ok(size.width <= 920);
+  assert.ok(size.height <= 602);
+});
+
+test("keeps very tall image preview dialogs wide enough for controls", () => {
+  const size = imagePreviewDialogSize({
+    imageWidth: 100,
+    imageHeight: 3000,
+    viewportWidth: 1200,
+    viewportHeight: 900,
+  });
+
+  assert.ok(size);
+  assert.ok(size.width >= 360);
+  assert.ok(size.height <= 774);
+});
+
+test("keeps very wide image preview dialogs tall enough for controls", () => {
+  const size = imagePreviewDialogSize({
+    imageWidth: 3000,
+    imageHeight: 100,
+    viewportWidth: 1200,
+    viewportHeight: 900,
+  });
+
+  assert.ok(size);
+  assert.ok(size.width <= 1104);
+  assert.ok(size.height >= 228);
+});