diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 044ce1204..744eb0d09 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -119,6 +119,7 @@ import {
 } from "@/lib/paginationPageSize";
 import {
   filterColumnVisibilityOptions,
+  invertedHiddenColumnIndexes,
   nextHiddenColumnIndexes,
   visibleColumnIndexesForFilter,
 } from "@/lib/dataGridColumnVisibility";
@@ -1076,6 +1077,9 @@ function toggleColumnVisibility(columnIndex: number) {
 function showAllColumns() {
   hiddenColumnIndexes.value = new Set();
 }
+function invertColumnVisibility() {
+  hiddenColumnIndexes.value = invertedHiddenColumnIndexes(displayableColumnIndexes.value, hiddenColumnIndexes.value);
+}
 const firstVisibleColumnIndex = computed(() => visibleColumnIndexes.value[0] ?? 0);
 function actualColumnIndex(visibleColumnIndex: number): number {
   return visibleColumnIndexes.value[visibleColumnIndex] ?? visibleColumnIndex;
@@ -1716,6 +1720,21 @@ const activeCellDetail = computed(() => {
 
 const detailEditValue = ref("");
 const isEditingDetail = ref(false);
+const detailTemporalEditorKind = computed(() => {
+  const detail = activeCellDetail.value;
+  return detail ? temporalEditorKindForColumn(detail.colIndex) : undefined;
+});
+
+function resetDetailEdit() {
+  isEditingDetail.value = false;
+  detailEditValue.value = "";
+}
+
+function closeCellDetails() {
+  resetDetailEdit();
+  showCellDetail.value = false;
+  detailCell.value = null;
+}
 
 function startDetailEdit() {
   const detail = activeCellDetail.value;
@@ -1759,7 +1778,7 @@ function commitDetailEdit() {
 }
 
 function cancelDetailEdit() {
-  isEditingDetail.value = false;
+  resetDetailEdit();
 }
 
 function setDetailNull() {
@@ -1772,7 +1791,7 @@ function setDetailNull() {
   if (item.isNew && item.newIndex !== undefined) {
     newRows.value[item.newIndex][detail.colIndex] = null;
     newRows.value = [...newRows.value];
-    isEditingDetail.value = false;
+    resetDetailEdit();
     detailCell.value = { ...detailCell.value! };
     return;
   }
@@ -1785,7 +1804,7 @@ function setDetailNull() {
   if (useTransaction.value && !transactionActive.value) {
     enterTransaction();
   }
-  isEditingDetail.value = false;
+  resetDetailEdit();
   detailCell.value = { ...detailCell.value! };
 }
 
@@ -2002,6 +2021,7 @@ const {
 
 // --- Cell selection and detail ---
 function showCellDetails(rowIndex: number, colIndex: number) {
+  resetDetailEdit();
   detailCell.value = { rowIndex, col: colIndex };
   showCellDetail.value = true;
 }
@@ -2059,6 +2079,48 @@ function cutSelection() {
   }
 }
 
+function currentSelectedCellPosition() {
+  const range = selectedRange.value;
+  if (!range) return null;
+  return { rowIndex: range.startRow, colIndex: range.startCol };
+}
+
+function scrollCellIntoView(rowIndex: number, colIndex: number) {
+  nextTick(() => {
+    const rowEl = gridRef.value?.querySelector<HTMLElement>(`[data-row-index="${rowIndex}"]`);
+    const cellEl = rowEl?.querySelector<HTMLElement>(`[data-visible-col-index="${colIndex}"]`);
+    (cellEl ?? rowEl)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  });
+}
+
+function moveSelectedCell(rowDelta: number, colDelta: number): boolean {
+  const position = currentSelectedCellPosition();
+  if (!position || editingCell.value || displayItems.value.length === 0 || visibleColumnIndexes.value.length === 0)
+    return false;
+  const rowIndex = Math.max(0, Math.min(displayItems.value.length - 1, position.rowIndex + rowDelta));
+  const colIndex = Math.max(0, Math.min(visibleColumnIndexes.value.length - 1, position.colIndex + colDelta));
+  selectSingleCell(rowIndex, colIndex);
+  clearRowSelection();
+  if (showTranspose.value) transposeRowIndex.value = rowIndex;
+  scrollCellIntoView(rowIndex, colIndex);
+  return true;
+}
+
+function editSelectedCell(): boolean {
+  const position = currentSelectedCellPosition();
+  if (!position || editingCell.value) return false;
+  const item = displayItems.value[position.rowIndex];
+  const actualColIndex = actualColumnIndex(position.colIndex);
+  if (!item || !canEditCellItem(item, actualColIndex)) return false;
+  startEdit(item.id, actualColIndex);
+  return true;
+}
+
+function commitGridEdit() {
+  commitEdit();
+  nextTick(() => gridRef.value?.focus({ preventScroll: true }));
+}
+
 async function onGridKeydown(event: KeyboardEvent) {
   if (isFocusSearchShortcut(event)) {
     event.preventDefault();
@@ -2066,6 +2128,34 @@ async function onGridKeydown(event: KeyboardEvent) {
     return;
   }
   if (eventTargetAllowsNativeClipboard(event)) return;
+  if (event.key === "ArrowLeft" && moveTransposeRecordSelection(-1)) {
+    event.preventDefault();
+    return;
+  }
+  if (event.key === "ArrowRight" && moveTransposeRecordSelection(1)) {
+    event.preventDefault();
+    return;
+  }
+  if (event.key === "ArrowUp" && moveSelectedCell(-1, 0)) {
+    event.preventDefault();
+    return;
+  }
+  if (event.key === "ArrowDown" && moveSelectedCell(1, 0)) {
+    event.preventDefault();
+    return;
+  }
+  if (event.key === "ArrowLeft" && moveSelectedCell(0, -1)) {
+    event.preventDefault();
+    return;
+  }
+  if (event.key === "ArrowRight" && moveSelectedCell(0, 1)) {
+    event.preventDefault();
+    return;
+  }
+  if (event.key === "Enter" && editSelectedCell()) {
+    event.preventDefault();
+    return;
+  }
   if (clipboardShortcut(event, "c")) {
     if (!hasCellSelection.value) return;
     event.preventDefault();
@@ -2092,6 +2182,12 @@ function copyDetailValue() {
   copyText(text);
 }
 
+function copyDetailFormattedJson() {
+  const detail = activeCellDetail.value;
+  if (!detail?.formattedJson) return;
+  copyText(detail.formattedJson);
+}
+
 function copyDetailColumnName() {
   if (!activeCellDetail.value) return;
   copyText(activeCellDetail.value.column);
@@ -2105,8 +2201,14 @@ function copyDetailSqlCondition() {
   copyText(condition);
 }
 
-const TRANSPOSE_RECORD_WIDTH = 168;
-const transposePinnedWidth = computed(() => transposeFieldWidth(visibleColumns.value));
+const TRANSPOSE_RECORD_DEFAULT_WIDTH = 168;
+const TRANSPOSE_RECORD_MIN_WIDTH = 96;
+const TRANSPOSE_PINNED_MIN_WIDTH = 104;
+const transposeRecordWidth = ref(TRANSPOSE_RECORD_DEFAULT_WIDTH);
+const transposePinnedWidthOverride = ref<number | null>(null);
+const transposePinnedWidth = computed(
+  () => transposePinnedWidthOverride.value ?? transposeFieldWidth(visibleColumns.value),
+);
 
 const transposeRows = computed(() => {
   return buildTransposeRows({
@@ -2123,7 +2225,7 @@ const transposeRecordWindow = computed(() =>
     scrollLeft: transposeScrollLeft.value,
     viewportWidth: transposeViewportWidth.value,
     pinnedWidth: transposePinnedWidth.value,
-    recordWidth: TRANSPOSE_RECORD_WIDTH,
+    recordWidth: transposeRecordWidth.value,
     overscan: 2,
   }),
 );
@@ -2132,7 +2234,7 @@ const visibleTransposeRecordIndexes = computed(() => {
   return Array.from({ length: window.end - window.start }, (_, offset) => window.start + offset);
 });
 const transposeTotalWidth = computed(
-  () => transposePinnedWidth.value + displayItems.value.length * TRANSPOSE_RECORD_WIDTH,
+  () => transposePinnedWidth.value + displayItems.value.length * transposeRecordWidth.value,
 );
 
 function transposeScrollElement(): HTMLElement | undefined {
@@ -2161,13 +2263,54 @@ function scrollTransposeRecordIntoView(rowIndex: number) {
       totalRecords: displayItems.value.length,
       viewportWidth: el.clientWidth,
       pinnedWidth: transposePinnedWidth.value,
-      recordWidth: TRANSPOSE_RECORD_WIDTH,
+      recordWidth: transposeRecordWidth.value,
     });
     updateTransposeViewport();
   });
 }
 
+function onTransposePinnedResizeStart(event: MouseEvent) {
+  event.preventDefault();
+  const startX = event.clientX;
+  const startWidth = transposePinnedWidth.value;
+  const onMove = (e: MouseEvent) => {
+    transposePinnedWidthOverride.value = Math.max(TRANSPOSE_PINNED_MIN_WIDTH, startWidth + e.clientX - startX);
+    updateTransposeViewport();
+  };
+  const onUp = () => {
+    document.removeEventListener("mousemove", onMove);
+    document.removeEventListener("mouseup", onUp);
+  };
+  document.addEventListener("mousemove", onMove);
+  document.addEventListener("mouseup", onUp);
+}
+
+function onTransposeRecordResizeStart(event: MouseEvent) {
+  event.preventDefault();
+  const startX = event.clientX;
+  const startWidth = transposeRecordWidth.value;
+  const onMove = (e: MouseEvent) => {
+    transposeRecordWidth.value = Math.max(TRANSPOSE_RECORD_MIN_WIDTH, startWidth + e.clientX - startX);
+    updateTransposeViewport();
+  };
+  const onUp = () => {
+    document.removeEventListener("mousemove", onMove);
+    document.removeEventListener("mouseup", onUp);
+  };
+  document.addEventListener("mousemove", onMove);
+  document.addEventListener("mouseup", onUp);
+}
+
+function closeTranspose() {
+  showTranspose.value = false;
+  transposeRowIndex.value = null;
+}
+
 function openContextTranspose() {
+  if (showTranspose.value) {
+    closeTranspose();
+    return;
+  }
   if (!contextCell.value) return;
   const next = nextContextTransposeState({
     showTranspose: showTranspose.value,
@@ -2180,7 +2323,7 @@ function openContextTranspose() {
   transposeRowIndex.value = next.transposeRowIndex;
   showTranspose.value = next.showTranspose;
   if (next.showTranspose) {
-    showCellDetail.value = false;
+    closeCellDetails();
     nextTick(updateTransposeViewport);
     if (next.transposeRowIndex !== null) scrollTransposeRecordIntoView(next.transposeRowIndex);
   }
@@ -2191,19 +2334,29 @@ function toggleTranspose(rowIndex: number) {
   transposeRowIndex.value = next.transposeRowIndex;
   showTranspose.value = next.showTranspose;
   if (next.showTranspose) {
-    showCellDetail.value = false;
+    closeCellDetails();
     nextTick(updateTransposeViewport);
     if (next.transposeRowIndex !== null) scrollTransposeRecordIntoView(next.transposeRowIndex);
   }
 }
 
+function selectTransposeRecord(rowIndex: number) {
+  if (rowIndex < 0 || rowIndex >= displayItems.value.length) return;
+  transposeRowIndex.value = rowIndex;
+  gridRef.value?.focus({ preventScroll: true });
+}
+
+function moveTransposeRecordSelection(delta: number): boolean {
+  if (!isTransposeMode.value || displayItems.value.length === 0) return false;
+  const current = transposeRowIndex.value ?? 0;
+  const next = Math.max(0, Math.min(displayItems.value.length - 1, current + delta));
+  transposeRowIndex.value = next;
+  scrollTransposeRecordIntoView(next);
+  return true;
+}
+
 function transposeNav(delta: number) {
-  if (transposeRowIndex.value === null) return;
-  const next = transposeRowIndex.value + delta;
-  if (next >= 0 && next < displayItems.value.length) {
-    transposeRowIndex.value = next;
-    scrollTransposeRecordIntoView(next);
-  }
+  moveTransposeRecordSelection(delta);
 }
 
 watch(isTransposeMode, (active) => {
@@ -2219,10 +2372,8 @@ watch(
     }
     clearCellSelection();
     clearRowSelection();
-    showCellDetail.value = false;
-    detailCell.value = null;
-    showTranspose.value = false;
-    transposeRowIndex.value = null;
+    closeCellDetails();
+    closeTranspose();
     exitTransaction();
   },
 );
@@ -2546,6 +2697,7 @@ defineExpose({
   isColumnVisible,
   toggleColumnVisibility,
   showAllColumns,
+  invertColumnVisibility,
 });
 </script>
 
@@ -2885,7 +3037,7 @@ defineExpose({
                   >
                     <ChevronRight class="w-3 h-3" />
                   </Button>
-                  <Button variant="ghost" size="icon" class="h-5 w-5" @click="showTranspose = false">
+                  <Button variant="ghost" size="icon" class="h-5 w-5" @click="closeTranspose">
                     <X class="w-3 h-3" />
                   </Button>
                 </div>
@@ -2895,7 +3047,7 @@ defineExpose({
                   :style="{
                     '--transpose-total-w': `${transposeTotalWidth}px`,
                     '--transpose-field-w': `${transposePinnedWidth}px`,
-                    '--transpose-record-w': `${TRANSPOSE_RECORD_WIDTH}px`,
+                    '--transpose-record-w': `${transposeRecordWidth}px`,
                   }"
                   :items="transposeRows"
                   :item-size="30"
@@ -2909,24 +3061,33 @@ defineExpose({
                       :style="{ width: `${transposeTotalWidth}px` }"
                     >
                       <div
-                        class="sticky left-0 z-30 shrink-0 border-r border-border px-3 py-1.5 bg-[rgb(239_239_239)] truncate dark:bg-muted"
+                        class="sticky left-0 z-30 shrink-0 border-r border-border px-3 py-1.5 bg-[rgb(239_239_239)] truncate dark:bg-muted relative"
                         :style="{ width: `${transposePinnedWidth}px` }"
                       >
                         {{ t("grid.columnName") }}
+                        <div
+                          class="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/30"
+                          @mousedown.stop="onTransposePinnedResizeStart"
+                        />
                       </div>
                       <div class="shrink-0" :style="{ width: `${transposeRecordWindow.beforeWidth}px` }" />
                       <div
                         v-for="recordIndex in visibleTransposeRecordIndexes"
                         :key="`transpose-head-${recordIndex}`"
-                        class="shrink-0 border-r border-border px-2 py-1.5 text-center tabular-nums"
+                        class="shrink-0 border-r border-border px-2 py-1.5 text-center tabular-nums relative"
                         :class="
                           recordIndex === transposeRowIndex
                             ? 'bg-primary/15 text-primary font-semibold'
                             : 'bg-[rgb(239_239_239)] dark:bg-muted'
                         "
-                        :style="{ width: `${TRANSPOSE_RECORD_WIDTH}px` }"
+                        :style="{ width: `${transposeRecordWidth}px` }"
+                        @click="selectTransposeRecord(recordIndex)"
                       >
                         {{ recordIndex + 1 }}
+                        <div
+                          class="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/30"
+                          @mousedown.stop="onTransposeRecordResizeStart"
+                        />
                       </div>
                       <div class="shrink-0" :style="{ width: `${transposeRecordWindow.afterWidth}px` }" />
                     </div>
@@ -2952,8 +3113,9 @@ defineExpose({
                           'text-muted-foreground italic': item.values[recordIndex]?.isNull,
                           'bg-primary/10': recordIndex === transposeRowIndex,
                         }"
-                        :style="{ width: `${TRANSPOSE_RECORD_WIDTH}px` }"
+                        :style="{ width: `${transposeRecordWidth}px` }"
                         :title="item.values[recordIndex]?.display"
+                        @click="selectTransposeRecord(recordIndex)"
                       >
                         {{ item.values[recordIndex]?.display }}
                       </div>
@@ -3397,16 +3559,27 @@ defineExpose({
                         </div>
                       </TooltipTrigger>
                       <TooltipContent
-                        v-if="columnTypeMap.get(col) || columnCommentMap.get(col)"
                         side="bottom"
-                        class="text-xs grid grid-cols-[auto_1fr] gap-x-2"
+                        class="grid min-w-56 grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-1 text-xs"
                       >
+                        <span class="text-background/70">{{ t("grid.columnName") }}</span>
+                        <span class="flex min-w-0 items-center gap-2">
+                          <span class="min-w-0 flex-1 truncate font-mono">{{ col }}</span>
+                          <button
+                            type="button"
+                            class="flex h-5 w-5 shrink-0 items-center justify-center rounded hover:bg-background/10"
+                            :title="t('grid.copyColumnName')"
+                            @click.stop="copyText(col)"
+                          >
+                            <Copy class="h-3 w-3" />
+                          </button>
+                        </span>
                         <template v-if="columnTypeMap.get(col)">
-                          <span class="text-muted-foreground">{{ t("grid.columnType") }}</span>
+                          <span class="text-background/70">{{ t("grid.columnType") }}</span>
                           <span :class="typeColorClass(columnTypeMap.get(col)!)">{{ columnTypeMap.get(col) }}</span>
                         </template>
                         <template v-if="columnCommentMap.get(col)">
-                          <span class="text-muted-foreground">{{ t("grid.columnComment") }}</span>
+                          <span class="text-background/70">{{ t("grid.columnComment") }}</span>
                           <span>{{ columnCommentMap.get(col) }}</span>
                         </template>
                       </TooltipContent>
@@ -3509,6 +3682,7 @@ defineExpose({
                         @mousedown="handleDataCellMousedown(index, visibleColIdx, item.id, $event)"
                         @mouseenter="extendCellSelection(index, visibleColIdx)"
                         @dblclick="canEditCellItem(item, actualColIdx) && startEdit(item.id, actualColIdx)"
+                        :data-visible-col-index="visibleColIdx"
                         @contextmenu="onCellContext(item.id, index, actualColIdx, visibleColIdx)"
                       >
                         <template v-if="editingCell?.rowId === item.id && editingCell?.col === actualColIdx">
@@ -3517,7 +3691,7 @@ defineExpose({
                             v-model="editValue"
                             :kind="temporalEditorKindForColumn(actualColIdx)!"
                             @cancel="cancelEdit"
-                            @commit="commitEdit"
+                            @commit="commitGridEdit"
                           />
                           <input
                             v-else
@@ -3721,7 +3895,7 @@ defineExpose({
               <div class="h-9 flex items-center gap-2 px-3 border-b shrink-0 bg-muted/20">
                 <Info class="w-3.5 h-3.5 text-muted-foreground" />
                 <span class="text-xs font-medium flex-1 min-w-0 truncate">{{ t("grid.cellDetails") }}</span>
-                <Button variant="ghost" size="icon" class="h-5 w-5" @click="showCellDetail = false">
+                <Button variant="ghost" size="icon" class="h-5 w-5" @click="closeCellDetails">
                   <X class="w-3 h-3" />
                 </Button>
               </div>
@@ -3780,9 +3954,20 @@ defineExpose({
                     </a>
                   </div>
                   <template v-if="isEditingDetail">
-                    <textarea
+                    <TemporalCellEditor
+                      v-if="detailTemporalEditorKind"
                       v-model="detailEditValue"
-                      class="w-full h-40 rounded border bg-background p-2 font-mono text-xs outline-none resize-y focus:border-primary"
+                      :kind="detailTemporalEditorKind"
+                      variant="inline"
+                      :commit-on-close="false"
+                      @cancel="cancelDetailEdit"
+                      @commit="commitDetailEdit"
+                    />
+                    <textarea
+                      v-else
+                      v-model="detailEditValue"
+                      wrap="off"
+                      class="w-full h-40 overflow-auto rounded border bg-background p-2 font-mono text-xs outline-none resize-y focus:border-primary"
                       @keydown.escape.stop="cancelDetailEdit"
                     />
                     <div class="flex gap-1 mt-1">
@@ -3796,7 +3981,7 @@ defineExpose({
                   </template>
                   <pre
                     v-else
-                    class="max-h-56 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="max-h-56 overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre cursor-pointer hover:border-primary/50"
                     :class="{ 'cursor-text': activeCellDetail.isEditable }"
                     @dblclick="startDetailEdit"
                     >{{ activeCellDetail.displayValue }}</pre
@@ -3809,12 +3994,22 @@ defineExpose({
                     >{{ activeCellDetail.rawValue }}</pre
                   >
                 </div>
-                <div v-if="activeCellDetail.formattedJson" class="space-y-1">
-                  <div class="text-muted-foreground">{{ t("grid.formattedJson") }}</div>
+                <div v-if="activeCellDetail.formattedJson" class="mt-2 space-y-1">
+                  <div class="flex items-center justify-between gap-2">
+                    <div class="text-muted-foreground">{{ t("grid.formattedJson") }}</div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      class="h-6 px-2 text-xs"
+                      :title="t('grid.copyValue')"
+                      @click="copyDetailFormattedJson"
+                    >
+                      <Copy class="h-3 w-3" />
+                    </Button>
+                  </div>
                   <pre
                     class="max-h-72 overflow-auto rounded border bg-muted/20 p-2 font-mono text-xs whitespace-pre-wrap break-words"
-                  >
-        {{ activeCellDetail.formattedJson }}</pre
+                    >{{ activeCellDetail.formattedJson }}</pre
                   >
                 </div>
               </div>
diff --git a/apps/desktop/src/components/grid/TemporalCellEditor.vue b/apps/desktop/src/components/grid/TemporalCellEditor.vue
index 1e601da76..c10fb4e0a 100644
--- a/apps/desktop/src/components/grid/TemporalCellEditor.vue
+++ b/apps/desktop/src/components/grid/TemporalCellEditor.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref } from "vue";
-import { useI18n } from "vue-i18n";
 import type { FocusOutsideEvent, PointerDownOutsideEvent } from "reka-ui";
 import { CalendarClock, ChevronDown, ChevronUp, CircleSlash } from "lucide-vue-next";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { formatTemporalInputValue, type TemporalCellEditorKind } from "@/lib/dataGridTemporalEditor";
 
-const props = defineProps<{
-  kind: TemporalCellEditorKind;
-  modelValue: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    kind: TemporalCellEditorKind;
+    modelValue: string;
+    variant?: "cell" | "inline";
+    commitOnClose?: boolean;
+  }>(),
+  {
+    variant: "cell",
+    commitOnClose: true,
+  },
+);
 
 const emit = defineEmits<{
   "update:modelValue": [value: string];
@@ -19,7 +25,6 @@ const emit = defineEmits<{
   cancel: [];
 }>();
 
-const { locale } = useI18n();
 const open = ref(true);
 const triggerRef = ref<HTMLButtonElement | null>(null);
 let closeHandled = false;
@@ -27,14 +32,11 @@ let closeHandled = false;
 const hasDate = computed(() => props.kind !== "time");
 const hasTime = computed(() => props.kind !== "date");
 const displayValue = computed(() => props.modelValue || "NULL");
-const monthOptions = computed(() => {
-  const formatter = new Intl.DateTimeFormat(locale.value, { month: "short" });
-  return Array.from({ length: 12 }, (_, index) => ({
-    value: index + 1,
-    label: formatter.format(new Date(2026, index, 1)),
-  }));
-});
-
+const triggerClass = computed(() =>
+  props.variant === "inline"
+    ? "cell-edit-input flex h-9 w-full items-center gap-2 rounded border bg-background px-2 text-left text-xs outline-none hover:border-primary/60 focus:border-primary"
+    : "cell-edit-input absolute inset-0 z-10 flex items-center gap-1 border-2 border-primary bg-background px-2 py-0.5 text-left text-xs outline-none",
+);
 const dateParts = computed(() => {
   const text = formatTemporalInputValue(props.modelValue, "date");
   const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text);
@@ -61,7 +63,7 @@ onMounted(() => {
 
 function setOpen(value: boolean) {
   open.value = value;
-  if (!value && !closeHandled) finishCommit();
+  if (!value && props.commitOnClose && !closeHandled) finishCommit();
 }
 
 function setModelValue(value: string) {
@@ -69,18 +71,22 @@ function setModelValue(value: string) {
 }
 
 function updateDate(part: "day" | "month" | "year", rawValue: string | number) {
-  const next = { ...dateParts.value, [part]: Number(rawValue) || dateParts.value[part] };
+  const numberValue = Number(rawValue);
+  const next = { ...dateParts.value };
+  if (Number.isNaN(numberValue)) return;
+  if (part === "year") next.year = Math.max(1, Math.min(9999, numberValue));
+  else if (part === "month") next.month = Math.max(1, Math.min(12, numberValue));
+  else next.day = Math.max(1, Math.min(31, numberValue));
   const maxDay = daysInMonth(next.year, next.month);
   next.day = Math.max(1, Math.min(maxDay, next.day));
   setDateTimeValue(next.year, next.month, next.day, timeValue.value);
 }
 
-function updateDateFromSelect(part: "day" | "month", rawValue: unknown) {
-  if (rawValue === null || rawValue === undefined) return;
-  updateDate(part, String(rawValue));
+function updateDateFromInput(part: "day" | "month" | "year", event: Event) {
+  updateDate(part, (event.target as HTMLInputElement).value);
 }
 
-function stepDate(part: "year", delta: number) {
+function stepDate(part: "day" | "month" | "year", delta: number) {
   updateDate(part, dateParts.value[part] + delta);
 }
 
@@ -94,6 +100,10 @@ function updateTime(part: "hour" | "minute" | "second", rawValue: string | numbe
   setDateTimeValue(dateParts.value.year, dateParts.value.month, dateParts.value.day, nextTime);
 }
 
+function updateTimeFromInput(part: "hour" | "minute" | "second", event: Event) {
+  updateTime(part, (event.target as HTMLInputElement).value);
+}
+
 function stepTime(part: "hour" | "minute" | "second", delta: number) {
   const max = part === "hour" ? 23 : 59;
   const current = Number(timeParts.value[part]) || 0;
@@ -154,7 +164,8 @@ function isSelectInteractionTarget(target: EventTarget | null): boolean {
 }
 
 function normalizeTimePart(value: string | number, max: number): string {
-  const numberValue = Math.max(0, Math.min(max, Number(value) || 0));
+  const parsed = Number(value);
+  const numberValue = Math.max(0, Math.min(max, Number.isNaN(parsed) ? 0 : parsed));
   return String(numberValue).padStart(2, "0");
 }
 
@@ -178,13 +189,7 @@ function twoDigit(value: string | number): string {
 <template>
   <Popover :open="open" @update:open="setOpen">
     <PopoverTrigger as-child>
-      <button
-        ref="triggerRef"
-        type="button"
-        class="cell-edit-input absolute inset-0 z-10 flex items-center gap-1 border-2 border-primary bg-background px-2 py-0.5 text-left text-xs outline-none"
-        @keydown.stop="onKeydown"
-        @click.stop
-      >
+      <button ref="triggerRef" type="button" :class="triggerClass" @keydown.stop="onKeydown" @click.stop>
         <CalendarClock class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
         <span class="min-w-0 flex-1 truncate">{{ displayValue }}</span>
       </button>
@@ -197,47 +202,16 @@ function twoDigit(value: string | number): string {
       @keydown.stop="onKeydown"
       @interact-outside="onPopoverInteractOutside"
     >
-      <div v-if="hasDate" class="grid grid-cols-[3.5rem_4.75rem_5rem] gap-1.5">
-        <Select
-          :model-value="String(dateParts.day)"
-          @update:model-value="(value) => updateDateFromSelect('day', value)"
+      <div v-if="hasDate" class="grid grid-cols-[4.5rem_4.5rem_4.5rem] gap-1.5">
+        <div
+          class="grid h-7 min-w-0 grid-cols-[1fr_1.35rem] overflow-hidden rounded-md border border-input bg-background"
         >
-          <SelectTrigger class="h-7 w-full rounded-md px-2 text-[13px] tabular-nums">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent class="min-w-16">
-            <SelectItem
-              v-for="day in daysInMonth(dateParts.year, dateParts.month)"
-              :key="day"
-              :value="String(day)"
-              class="py-0.5 text-xs"
-            >
-              {{ day }}
-            </SelectItem>
-          </SelectContent>
-        </Select>
-
-        <Select
-          :model-value="String(dateParts.month)"
-          @update:model-value="(value) => updateDateFromSelect('month', value)"
-        >
-          <SelectTrigger class="h-7 w-full rounded-md px-2 text-[13px]">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent class="min-w-20">
-            <SelectItem
-              v-for="month in monthOptions"
-              :key="month.value"
-              :value="String(month.value)"
-              class="py-0.5 text-xs"
-            >
-              {{ month.label }}
-            </SelectItem>
-          </SelectContent>
-        </Select>
-
-        <div class="grid h-7 grid-cols-[1fr_1.35rem] overflow-hidden rounded-md border border-input bg-background">
-          <div class="flex items-center justify-center px-1 text-[13px] tabular-nums">{{ dateParts.year }}</div>
+          <input
+            :value="dateParts.year"
+            inputmode="numeric"
+            class="min-w-0 bg-transparent px-1 text-center text-[13px] tabular-nums outline-none"
+            @change="updateDateFromInput('year', $event)"
+          />
           <div class="grid border-l">
             <button type="button" class="flex items-center justify-center hover:bg-muted" @click="stepDate('year', 1)">
               <ChevronUp class="h-3 w-3" />
@@ -251,13 +225,64 @@ function twoDigit(value: string | number): string {
             </button>
           </div>
         </div>
+
+        <div
+          class="grid h-7 min-w-0 grid-cols-[1fr_1.35rem] overflow-hidden rounded-md border border-input bg-background"
+        >
+          <input
+            :value="twoDigit(dateParts.month)"
+            inputmode="numeric"
+            class="min-w-0 bg-transparent px-1 text-center text-[13px] tabular-nums outline-none"
+            @change="updateDateFromInput('month', $event)"
+          />
+          <div class="grid border-l">
+            <button type="button" class="flex items-center justify-center hover:bg-muted" @click="stepDate('month', 1)">
+              <ChevronUp class="h-3 w-3" />
+            </button>
+            <button
+              type="button"
+              class="flex items-center justify-center border-t hover:bg-muted"
+              @click="stepDate('month', -1)"
+            >
+              <ChevronDown class="h-3 w-3" />
+            </button>
+          </div>
+        </div>
+
+        <div
+          class="grid h-7 min-w-0 grid-cols-[1fr_1.35rem] overflow-hidden rounded-md border border-input bg-background"
+        >
+          <input
+            :value="twoDigit(dateParts.day)"
+            inputmode="numeric"
+            class="min-w-0 bg-transparent px-1 text-center text-[13px] tabular-nums outline-none"
+            @change="updateDateFromInput('day', $event)"
+          />
+          <div class="grid border-l">
+            <button type="button" class="flex items-center justify-center hover:bg-muted" @click="stepDate('day', 1)">
+              <ChevronUp class="h-3 w-3" />
+            </button>
+            <button
+              type="button"
+              class="flex items-center justify-center border-t hover:bg-muted"
+              @click="stepDate('day', -1)"
+            >
+              <ChevronDown class="h-3 w-3" />
+            </button>
+          </div>
+        </div>
       </div>
 
       <div v-if="hasTime" class="grid grid-cols-[3.5rem_0.5rem_3.5rem_0.5rem_3.5rem] items-center gap-1.5">
-        <div class="grid h-7 grid-cols-[1fr_1.35rem] overflow-hidden rounded-md border border-input bg-background">
-          <div class="flex items-center justify-center px-1 text-[13px] tabular-nums">
-            {{ twoDigit(timeParts.hour) }}
-          </div>
+        <div
+          class="grid h-7 min-w-0 grid-cols-[1fr_1.35rem] overflow-hidden rounded-md border border-input bg-background"
+        >
+          <input
+            :value="twoDigit(timeParts.hour)"
+            inputmode="numeric"
+            class="min-w-0 bg-transparent px-1 text-center text-[13px] tabular-nums outline-none"
+            @change="updateTimeFromInput('hour', $event)"
+          />
           <div class="grid border-l">
             <button type="button" class="flex items-center justify-center hover:bg-muted" @click="stepTime('hour', 1)">
               <ChevronUp class="h-3 w-3" />
@@ -272,10 +297,15 @@ function twoDigit(value: string | number): string {
           </div>
         </div>
         <span class="text-center text-xs text-muted-foreground">:</span>
-        <div class="grid h-7 grid-cols-[1fr_1.35rem] overflow-hidden rounded-md border border-input bg-background">
-          <div class="flex items-center justify-center px-1 text-[13px] tabular-nums">
-            {{ twoDigit(timeParts.minute) }}
-          </div>
+        <div
+          class="grid h-7 min-w-0 grid-cols-[1fr_1.35rem] overflow-hidden rounded-md border border-input bg-background"
+        >
+          <input
+            :value="twoDigit(timeParts.minute)"
+            inputmode="numeric"
+            class="min-w-0 bg-transparent px-1 text-center text-[13px] tabular-nums outline-none"
+            @change="updateTimeFromInput('minute', $event)"
+          />
           <div class="grid border-l">
             <button
               type="button"
@@ -294,10 +324,15 @@ function twoDigit(value: string | number): string {
           </div>
         </div>
         <span class="text-center text-xs text-muted-foreground">:</span>
-        <div class="grid h-7 grid-cols-[1fr_1.35rem] overflow-hidden rounded-md border border-input bg-background">
-          <div class="flex items-center justify-center px-1 text-[13px] tabular-nums">
-            {{ twoDigit(timeParts.second) }}
-          </div>
+        <div
+          class="grid h-7 min-w-0 grid-cols-[1fr_1.35rem] overflow-hidden rounded-md border border-input bg-background"
+        >
+          <input
+            :value="twoDigit(timeParts.second)"
+            inputmode="numeric"
+            class="min-w-0 bg-transparent px-1 text-center text-[13px] tabular-nums outline-none"
+            @change="updateTimeFromInput('second', $event)"
+          />
           <div class="grid border-l">
             <button
               type="button"
diff --git a/apps/desktop/src/components/layout/ContentArea.vue b/apps/desktop/src/components/layout/ContentArea.vue
index cd10f174c..5f00664b8 100644
--- a/apps/desktop/src/components/layout/ContentArea.vue
+++ b/apps/desktop/src/components/layout/ContentArea.vue
@@ -43,6 +43,7 @@ type DataGridHandle = {
   isColumnVisible: (columnIndex: number) => boolean;
   toggleColumnVisibility: (columnIndex: number) => void;
   showAllColumns: () => void;
+  invertColumnVisibility: () => void;
   showDdl: boolean;
   toggleDdl: () => void;
 };
@@ -496,15 +497,26 @@ defineExpose({ focusSearch, refreshData });
               </div>
               <div class="flex items-center justify-between gap-2 border-t bg-muted/30 px-3 py-2">
                 <span class="text-[11px] text-muted-foreground">{{ t("grid.columnVisibilityHint") }}</span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  class="h-7 px-2 text-xs"
-                  :disabled="(dataGridRef?.hiddenColumnCount ?? 0) === 0"
-                  @click="dataGridRef?.showAllColumns()"
-                >
-                  {{ t("grid.showAllColumns") }}
-                </Button>
+                <div class="flex items-center gap-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    class="h-7 px-2 text-xs"
+                    :disabled="(dataGridRef?.displayableColumnCount ?? 0) <= 1"
+                    @click="dataGridRef?.invertColumnVisibility()"
+                  >
+                    {{ t("grid.invertColumnVisibility") }}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    class="h-7 px-2 text-xs"
+                    :disabled="(dataGridRef?.hiddenColumnCount ?? 0) === 0"
+                    @click="dataGridRef?.showAllColumns()"
+                  >
+                    {{ t("grid.showAllColumns") }}
+                  </Button>
+                </div>
               </div>
             </PopoverContent>
           </Popover>
diff --git a/apps/desktop/src/composables/useDataGridEditor.ts b/apps/desktop/src/composables/useDataGridEditor.ts
index cbb7fd930..3ba5a9b4c 100644
--- a/apps/desktop/src/composables/useDataGridEditor.ts
+++ b/apps/desktop/src/composables/useDataGridEditor.ts
@@ -366,6 +366,7 @@ export function useDataGridEditor(options: UseDataGridEditorOptions) {
     if (e.key === "Enter") {
       e.preventDefault();
       commitEdit();
+      nextTick(focusScrollerWithoutScrolling);
     } else if (e.key === "Escape") {
       e.preventDefault();
       e.stopPropagation();
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index cebdc72cb..26f3ed5fc 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -306,6 +306,7 @@ export default {
     columnVisibility: "Columns",
     columnVisibilityHint: "At least one column stays visible.",
     searchColumns: "Search columns...",
+    invertColumnVisibility: "Invert",
     showAllColumns: "Show all",
     moreValues: "{count} more values, keep typing to narrow results",
     filterByValue: "Filter by This Value",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index 0f7fd8855..f94a0dab8 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -276,6 +276,7 @@ export default {
     columnVisibility: "Columnas",
     columnVisibilityHint: "Al menos una columna permanece visible.",
     searchColumns: "Buscar columnas...",
+    invertColumnVisibility: "Invertir",
     showAllColumns: "Mostrar todo",
     moreValues: "{count} valores más, sigue escribiendo para acotar los resultados",
     filterByValue: "Filtrar por este valor",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index de5fee618..528b8f94b 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -303,6 +303,7 @@ export default {
     columnVisibility: "字段筛选",
     columnVisibilityHint: "至少保留一列可见。",
     searchColumns: "搜索字段...",
+    invertColumnVisibility: "反选",
     showAllColumns: "显示全部",
     moreValues: "还有 {count} 个值，输入关键词继续缩小范围",
     filterByValue: "筛选此值",
diff --git a/apps/desktop/src/lib/dataGridColumnVisibility.ts b/apps/desktop/src/lib/dataGridColumnVisibility.ts
index f8ed8613f..407244199 100644
--- a/apps/desktop/src/lib/dataGridColumnVisibility.ts
+++ b/apps/desktop/src/lib/dataGridColumnVisibility.ts
@@ -33,3 +33,14 @@ export function nextHiddenColumnIndexes(options: {
   next.add(options.columnIndex);
   return next;
 }
+
+export function invertedHiddenColumnIndexes(
+  availableIndexes: number[],
+  hiddenIndexes: ReadonlySet<number>,
+): Set<number> {
+  const next = new Set(availableIndexes.filter((index) => !hiddenIndexes.has(index)));
+  if (next.size === availableIndexes.length && availableIndexes.length > 0) {
+    next.delete(availableIndexes[0]);
+  }
+  return next;
+}
diff --git a/packages/app-tests/dataGridColumnVisibility.test.ts b/packages/app-tests/dataGridColumnVisibility.test.ts
index 07cbadef1..64b346f88 100644
--- a/packages/app-tests/dataGridColumnVisibility.test.ts
+++ b/packages/app-tests/dataGridColumnVisibility.test.ts
@@ -2,6 +2,7 @@ import { strict as assert } from "node:assert";
 import test from "node:test";
 import {
   filterColumnVisibilityOptions,
+  invertedHiddenColumnIndexes,
   nextHiddenColumnIndexes,
   visibleColumnIndexesForFilter,
 } from "../../apps/desktop/src/lib/dataGridColumnVisibility.ts";
@@ -37,3 +38,15 @@ test("shows a hidden column again when toggled", () => {
 
   assert.deepEqual([...hidden].sort(), [2]);
 });
+
+test("inverts hidden column indexes", () => {
+  const hidden = invertedHiddenColumnIndexes([0, 1, 2, 3], new Set([1, 3]));
+
+  assert.deepEqual([...hidden].sort(), [0, 2]);
+});
+
+test("keeps one column visible when inverting all visible columns", () => {
+  const hidden = invertedHiddenColumnIndexes([0, 1, 2], new Set());
+
+  assert.deepEqual([...hidden].sort(), [1, 2]);
+});