From e6953cc1c966ee21fa7770c4fc8fff65668c32c4 Mon Sep 17 00:00:00 2001
From: ZhuchkaTriplesix <mrlololoshka94@gmail.com>
Date: Sun, 15 Nov 2026 17:22:42 +0300
Subject: [PATCH] feat(frontend): Glide grid edits with staging dirty markers

Wire cell edits into a Pinia StagingBuffer, highlight modified/deleted/inserted
rows in Glide, and refresh the baseline when query results land.

Closes #1890
---
 apps/tauri/src/staging/buffer.test.ts       |  44 +++++
 apps/tauri/src/staging/buffer.ts            | 206 ++++++++++++++++++++
 apps/tauri/src/stores/gridStaging.test.ts   |  40 ++++
 apps/tauri/src/stores/gridStaging.ts        |  77 ++++++++
 apps/tauri/src/stores/queryResult.ts        |  19 +-
 apps/tauri/src/ui/ResultGrid.vue            |  43 +++-
 apps/tauri/src/ui/glide/ResultDataEditor.ts | 101 +++++++++-
 7 files changed, 514 insertions(+), 16 deletions(-)
 create mode 100644 apps/tauri/src/staging/buffer.test.ts
 create mode 100644 apps/tauri/src/staging/buffer.ts
 create mode 100644 apps/tauri/src/stores/gridStaging.test.ts
 create mode 100644 apps/tauri/src/stores/gridStaging.ts

diff --git a/apps/tauri/src/staging/buffer.test.ts b/apps/tauri/src/staging/buffer.test.ts
new file mode 100644
index 00000000..77564c4a
--- /dev/null
+++ b/apps/tauri/src/staging/buffer.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { NULL_SENTINEL, StagingBuffer } from "./buffer";
+
+describe("StagingBuffer (frontend)", () => {
+  function sample() {
+    return new StagingBuffer(
+      ["id", "name", "email"],
+      [
+        ["1", "Alice", "alice@test.com"],
+        ["2", "Bob", "bob@test.com"],
+      ],
+      ["id"],
+    );
+  }
+
+  it("starts clean", () => {
+    const buf = sample();
+    expect(buf.isDirty()).toBe(false);
+    expect(buf.cellStatus(0, 1)).toBe("clean");
+    expect(buf.getCellValue(0, 1)).toBe("Alice");
+  });
+
+  it("marks cell dirty and clears when reverted to original", () => {
+    const buf = sample();
+    buf.setCell(0, 1, "Alice Cooper");
+    expect(buf.isDirty()).toBe(true);
+    expect(buf.cellStatus(0, 1)).toBe("modified");
+    expect(buf.rowStatus(0)).toBe("modified");
+    expect(buf.getCellValue(0, 1)).toBe("Alice Cooper");
+    buf.setCell(0, 1, "Alice");
+    expect(buf.isDirty()).toBe(false);
+    expect(buf.cellStatus(0, 1)).toBe("clean");
+  });
+
+  it("toggle delete and null sentinel", () => {
+    const buf = sample();
+    buf.toggleDeleteRow(1);
+    expect(buf.rowStatus(1)).toBe("deleted");
+    buf.setCellNull(0, 2);
+    expect(buf.getCellValue(0, 2)).toBe("NULL");
+    expect(buf.effectiveRows()[0]?.[2]).toBe("NULL");
+    expect(NULL_SENTINEL).toContain("QUERYA_NULL");
+  });
+});
diff --git a/apps/tauri/src/staging/buffer.ts b/apps/tauri/src/staging/buffer.ts
new file mode 100644
index 00000000..c2bf0cbf
--- /dev/null
+++ b/apps/tauri/src/staging/buffer.ts
@@ -0,0 +1,206 @@
+/** Frontend staging buffer — Flutter / Rust `StagingBuffer` parity (cell layer). */
+
+export const NULL_SENTINEL = "\u0000__QUERYA_NULL__\u0000";
+
+export type StagedRowStatus =
+  | "unchanged"
+  | "modified"
+  | "inserted"
+  | "deleted";
+
+export type StagedCellStatus = "clean" | "modified";
+
+export class StagingBuffer {
+  private columns: string[];
+  private originalRows: string[][];
+  private primaryKeys: string[];
+  private modifiedCells = new Map<number, Map<number, string>>();
+  private insertedRows: string[][] = [];
+  private deletedRowIndices = new Set<number>();
+  private revision = 0;
+
+  constructor(
+    columns: string[],
+    rows: string[][],
+    primaryKeys: string[] = [],
+  ) {
+    this.columns = [...columns];
+    this.originalRows = rows.map((r) => [...r]);
+    this.primaryKeys = [...primaryKeys];
+  }
+
+  /** Replace baseline (e.g. after a new query) and clear staged edits. */
+  replaceBaseline(
+    columns: string[],
+    rows: string[][],
+    primaryKeys: string[] = [],
+  ): void {
+    this.columns = [...columns];
+    this.originalRows = rows.map((r) => [...r]);
+    this.primaryKeys = [...primaryKeys];
+    this.modifiedCells.clear();
+    this.insertedRows = [];
+    this.deletedRowIndices.clear();
+    this.revision += 1;
+  }
+
+  getRevision(): number {
+    return this.revision;
+  }
+
+  getColumns(): string[] {
+    return this.columns;
+  }
+
+  getPrimaryKeys(): string[] {
+    return this.primaryKeys;
+  }
+
+  totalRowCount(): number {
+    return this.originalRows.length + this.insertedRows.length;
+  }
+
+  isDirty(): boolean {
+    return (
+      this.modifiedCells.size > 0 ||
+      this.insertedRows.length > 0 ||
+      this.deletedRowIndices.size > 0
+    );
+  }
+
+  changeCount(): number {
+    let cells = 0;
+    for (const m of this.modifiedCells.values()) cells += m.size;
+    return cells + this.insertedRows.length + this.deletedRowIndices.size;
+  }
+
+  getCellValue(row: number, col: number): string {
+    if (row < this.originalRows.length) {
+      const staged = this.modifiedCells.get(row)?.get(col);
+      if (staged !== undefined) return sanitizeNull(staged);
+      return this.originalRows[row]?.[col] ?? "";
+    }
+    const insertIdx = row - this.originalRows.length;
+    return sanitizeNull(this.insertedRows[insertIdx]?.[col] ?? "");
+  }
+
+  rowStatus(row: number): StagedRowStatus {
+    if (row >= this.originalRows.length) {
+      return row < this.totalRowCount() ? "inserted" : "unchanged";
+    }
+    if (this.deletedRowIndices.has(row)) return "deleted";
+    const mods = this.modifiedCells.get(row);
+    if (mods && mods.size > 0) return "modified";
+    return "unchanged";
+  }
+
+  cellStatus(row: number, col: number): StagedCellStatus {
+    if (
+      row < this.originalRows.length &&
+      this.modifiedCells.get(row)?.has(col)
+    ) {
+      return "modified";
+    }
+    return "clean";
+  }
+
+  setCell(row: number, col: number, value: string): void {
+    if (row < 0 || col < 0) return;
+    if (row < this.originalRows.length) {
+      const orig = this.originalRows[row]?.[col] ?? "";
+      if (value === orig) {
+        const map = this.modifiedCells.get(row);
+        if (map) {
+          map.delete(col);
+          if (map.size === 0) this.modifiedCells.delete(row);
+          this.revision += 1;
+        }
+      } else {
+        let map = this.modifiedCells.get(row);
+        if (!map) {
+          map = new Map();
+          this.modifiedCells.set(row, map);
+        }
+        if (map.get(col) !== value) {
+          map.set(col, value);
+          this.revision += 1;
+        }
+      }
+      return;
+    }
+    const insertIdx = row - this.originalRows.length;
+    const ins = this.insertedRows[insertIdx];
+    if (!ins) return;
+    while (ins.length <= col) ins.push("");
+    if (ins[col] !== value) {
+      ins[col] = value;
+      this.revision += 1;
+    }
+  }
+
+  setCellNull(row: number, col: number): void {
+    this.setCell(row, col, NULL_SENTINEL);
+  }
+
+  toggleDeleteRow(row: number): void {
+    if (row < 0) return;
+    if (row < this.originalRows.length) {
+      if (this.deletedRowIndices.has(row)) this.deletedRowIndices.delete(row);
+      else this.deletedRowIndices.add(row);
+      this.revision += 1;
+    } else {
+      const insertIdx = row - this.originalRows.length;
+      if (insertIdx >= 0 && insertIdx < this.insertedRows.length) {
+        this.insertedRows.splice(insertIdx, 1);
+        this.revision += 1;
+      }
+    }
+  }
+
+  revertAll(): void {
+    if (!this.isDirty()) return;
+    this.modifiedCells.clear();
+    this.insertedRows = [];
+    this.deletedRowIndices.clear();
+    this.revision += 1;
+  }
+
+  /** Effective grid values (deleted rows kept for strike-through). */
+  effectiveRows(): string[][] {
+    const out: string[][] = [];
+    for (let r = 0; r < this.originalRows.length; r++) {
+      const mods = this.modifiedCells.get(r);
+      if (mods) {
+        const row = [...(this.originalRows[r] ?? [])];
+        for (const [c, v] of mods) {
+          if (c < row.length) row[c] = sanitizeNull(v);
+        }
+        out.push(row);
+      } else {
+        out.push([...(this.originalRows[r] ?? [])]);
+      }
+    }
+    for (const ins of this.insertedRows) {
+      out.push(ins.map(sanitizeNull));
+    }
+    return out;
+  }
+}
+
+function sanitizeNull(value: string): string {
+  return value === NULL_SENTINEL ? "NULL" : value;
+}
+
+/** Coerce query result cells to staging strings. */
+export function rowsToStrings(rows: unknown[][]): string[][] {
+  return rows.map((row) =>
+    row.map((cell) => {
+      if (cell === null || cell === undefined) return "NULL";
+      if (typeof cell === "string") return cell;
+      if (typeof cell === "number" || typeof cell === "boolean") {
+        return String(cell);
+      }
+      return JSON.stringify(cell);
+    }),
+  );
+}
diff --git a/apps/tauri/src/stores/gridStaging.test.ts b/apps/tauri/src/stores/gridStaging.test.ts
new file mode 100644
index 00000000..5d54550b
--- /dev/null
+++ b/apps/tauri/src/stores/gridStaging.test.ts
@@ -0,0 +1,40 @@
+import { createPinia, setActivePinia } from "pinia";
+import { beforeEach, describe, expect, it } from "vitest";
+import { useGridStagingStore } from "./gridStaging";
+
+describe("useGridStagingStore", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it("attaches baseline and tracks dirty cell markers", () => {
+    const store = useGridStagingStore();
+    store.attachFromQuery(
+      ["id", "name"],
+      [
+        ["1", "Alice"],
+        ["2", "Bob"],
+      ],
+    );
+    expect(store.isDirty).toBe(false);
+    expect(store.cellStatus(0, 1)).toBe("clean");
+
+    store.setCell(0, 1, "Alice Cooper");
+    expect(store.isDirty).toBe(true);
+    expect(store.changeCount).toBe(1);
+    expect(store.cellStatus(0, 1)).toBe("modified");
+    expect(store.rowStatus(0)).toBe("modified");
+    expect(store.getCellValue(0, 1)).toBe("Alice Cooper");
+    expect(store.effectiveRows()[0]?.[1]).toBe("Alice Cooper");
+  });
+
+  it("replaceBaseline clears prior edits", () => {
+    const store = useGridStagingStore();
+    store.attachFromQuery(["id"], [["1"]]);
+    store.setCell(0, 0, "9");
+    expect(store.isDirty).toBe(true);
+    store.attachFromQuery(["id"], [["2"]]);
+    expect(store.isDirty).toBe(false);
+    expect(store.getCellValue(0, 0)).toBe("2");
+  });
+});
diff --git a/apps/tauri/src/stores/gridStaging.ts b/apps/tauri/src/stores/gridStaging.ts
new file mode 100644
index 00000000..51aac152
--- /dev/null
+++ b/apps/tauri/src/stores/gridStaging.ts
@@ -0,0 +1,77 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+import { rowsToStrings, StagingBuffer } from "../staging/buffer";
+
+/**
+ * Pinia façade over {@link StagingBuffer} for the result grid.
+ * Apply / discard IPC lands in #1891; this store owns dirty markers (#1890).
+ */
+export const useGridStagingStore = defineStore("gridStaging", () => {
+  const buffer = ref<StagingBuffer | null>(null);
+  /** Mirrors buffer revision so Vue / Glide can watch cheaply. */
+  const revision = ref(0);
+
+  const isDirty = computed(() => buffer.value?.isDirty() ?? false);
+  const changeCount = computed(() => buffer.value?.changeCount() ?? 0);
+  const rowCount = computed(() => buffer.value?.totalRowCount() ?? 0);
+
+  function bump() {
+    revision.value = buffer.value?.getRevision() ?? 0;
+  }
+
+  function attachFromQuery(columns: string[], rows: unknown[][]) {
+    const stringRows = rowsToStrings(rows);
+    if (!buffer.value) {
+      buffer.value = new StagingBuffer(columns, stringRows);
+    } else {
+      buffer.value.replaceBaseline(columns, stringRows);
+    }
+    bump();
+  }
+
+  function clear() {
+    buffer.value = null;
+    revision.value = 0;
+  }
+
+  function setCell(row: number, col: number, value: string) {
+    buffer.value?.setCell(row, col, value);
+    bump();
+  }
+
+  function cellStatus(row: number, col: number) {
+    return buffer.value?.cellStatus(row, col) ?? "clean";
+  }
+
+  function rowStatus(row: number) {
+    return buffer.value?.rowStatus(row) ?? "unchanged";
+  }
+
+  function getCellValue(row: number, col: number) {
+    return buffer.value?.getCellValue(row, col) ?? "";
+  }
+
+  function effectiveRows(): string[][] {
+    return buffer.value?.effectiveRows() ?? [];
+  }
+
+  function revertAll() {
+    buffer.value?.revertAll();
+    bump();
+  }
+
+  return {
+    revision,
+    isDirty,
+    changeCount,
+    rowCount,
+    attachFromQuery,
+    clear,
+    setCell,
+    cellStatus,
+    rowStatus,
+    getCellValue,
+    effectiveRows,
+    revertAll,
+  };
+});
diff --git a/apps/tauri/src/stores/queryResult.ts b/apps/tauri/src/stores/queryResult.ts
index bbfafb4e..a42b4031 100644
--- a/apps/tauri/src/stores/queryResult.ts
+++ b/apps/tauri/src/stores/queryResult.ts
@@ -10,6 +10,7 @@ import {
   formatConnectionError,
 } from "../api/connection";
 import { useConnectionsStore } from "./connections";
+import { useGridStagingStore } from "./gridStaging";
 import { usePreferencesStore } from "./preferences";
 import { useShellNavStore } from "./shellNav";
 import { useShellStatusStore } from "./shellStatus";
@@ -47,10 +48,20 @@ export const useQueryResultStore = defineStore("queryResult", () => {
     error.value = acc.error;
   }
 
+  function syncStagingBaseline() {
+    const staging = useGridStagingStore();
+    if (acc.columns.length === 0) {
+      staging.clear();
+      return;
+    }
+    staging.attachFromQuery(acc.columns, acc.rows);
+  }
+
   function reset() {
     acc = emptyAccumulatedQuery();
     bindBuffers();
     syncScalars();
+    useGridStagingStore().clear();
     bump();
   }
 
@@ -67,7 +78,12 @@ export const useQueryResultStore = defineStore("queryResult", () => {
     } else {
       syncScalars();
     }
-    if (ev.type === "error") error.value = acc.error;
+    if (ev.type === "error") {
+      error.value = acc.error;
+      useGridStagingStore().clear();
+    } else if (ev.type === "done") {
+      syncStagingBaseline();
+    }
     bump();
   }
 
@@ -83,6 +99,7 @@ export const useQueryResultStore = defineStore("queryResult", () => {
     acc.elapsedMs = 0;
     bindBuffers();
     syncScalars();
+    syncStagingBaseline();
     bump();
     if (opts.message) {
       useShellStatusStore().setQueryMetrics({
diff --git a/apps/tauri/src/ui/ResultGrid.vue b/apps/tauri/src/ui/ResultGrid.vue
index 7c0cf2fb..19ae5fc2 100644
--- a/apps/tauri/src/ui/ResultGrid.vue
+++ b/apps/tauri/src/ui/ResultGrid.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { storeToRefs } from "pinia";
 import type { Theme } from "@glideapps/glide-data-grid";
 import { useQueryResultStore } from "../stores/queryResult";
+import { useGridStagingStore } from "../stores/gridStaging";
 import { ResultDataEditor } from "./glide/ResultDataEditor";
 import {
   buildQueryaGlideTheme,
@@ -13,7 +14,10 @@ import {
 import "@glideapps/glide-data-grid/dist/index.css";
 
 const query = useQueryResultStore();
-const { columns, rows, revision, rowCount } = storeToRefs(query);
+const staging = useGridStagingStore();
+const { columns, rows, revision, rowCount, running } = storeToRefs(query);
+const { revision: stagingRevision, isDirty, changeCount } =
+  storeToRefs(staging);
 
 const host = ref<HTMLDivElement | null>(null);
 const size = ref({ width: 640, height: 320 });
@@ -22,15 +26,35 @@ let ro: ResizeObserver | null = null;
 let unsubTheme: (() => void) | null = null;
 let glideTheme: Partial<Theme> = buildQueryaGlideTheme();
 
+const displayRows = computed(() => {
+  // Prefer staged effective values when dirty so edits show immediately.
+  if (staging.isDirty && staging.rowCount > 0) {
+    return staging.effectiveRows();
+  }
+  return rows.value;
+});
+
+const editable = computed(
+  () => !running.value && columns.value.length > 0 && rows.value.length > 0,
+);
+
+function onCellEdited(row: number, col: number, value: string) {
+  staging.setCell(row, col, value);
+}
+
 function render() {
   if (!root || !host.value) return;
   root.render(
     createElement(ResultDataEditor, {
       columns: columns.value,
-      rows: rows.value,
+      rows: displayRows.value,
       width: Math.max(100, size.value.width),
       height: Math.max(100, size.value.height),
       theme: glideTheme,
+      editable: editable.value,
+      cellStatus: (r, c) => staging.cellStatus(r, c),
+      rowStatus: (r) => staging.rowStatus(r),
+      onCellEdited,
     }),
   );
 }
@@ -57,8 +81,10 @@ onMounted(() => {
   refreshTheme();
 });
 
-// Shallow: revision/rowCount bump on append — no deep walk of unknown[][].
-watch([columns, revision, rowCount], () => render());
+watch(
+  [columns, revision, rowCount, stagingRevision, isDirty, changeCount, running],
+  () => render(),
+);
 
 onBeforeUnmount(() => {
   unsubTheme?.();
@@ -75,7 +101,12 @@ onBeforeUnmount(() => {
     ref="host"
     class="result-grid"
     data-testid="result-grid"
-    aria-label="Query results"
+    :data-staging-dirty="isDirty ? 'true' : 'false'"
+    :aria-label="
+      isDirty
+        ? `Query results, ${changeCount} staged change(s)`
+        : 'Query results'
+    "
   />
 </template>
 
diff --git a/apps/tauri/src/ui/glide/ResultDataEditor.ts b/apps/tauri/src/ui/glide/ResultDataEditor.ts
index 3596ed14..3a2a6f14 100644
--- a/apps/tauri/src/ui/glide/ResultDataEditor.ts
+++ b/apps/tauri/src/ui/glide/ResultDataEditor.ts
@@ -7,19 +7,27 @@ import {
 import {
   DataEditor,
   GridCellKind,
+  type EditableGridCell,
   type GridCell,
   type Item,
   type Theme,
 } from "@glideapps/glide-data-grid";
+import type { StagedCellStatus, StagedRowStatus } from "../../staging/buffer";
 import { sizeGlideColumns } from "./columnWidths";
 
 export type ResultDataEditorProps = {
   columns: string[];
+  /** Display rows (effective / query). */
   rows: unknown[][];
   width: number;
   height: number;
   /** Querya workbench → Glide theme (dark/light). */
   theme: Partial<Theme>;
+  /** When true, cells are editable and dirty markers apply. */
+  editable?: boolean;
+  cellStatus?: (row: number, col: number) => StagedCellStatus;
+  rowStatus?: (row: number) => StagedRowStatus;
+  onCellEdited?: (row: number, col: number, value: string) => void;
 };
 
 function cellText(value: unknown): string {
@@ -32,7 +40,17 @@ function cellText(value: unknown): string {
 const KEYBINDINGS = { search: true } as const;
 
 export function ResultDataEditor(props: ResultDataEditorProps): ReactElement {
-  const { columns, rows, width, height, theme } = props;
+  const {
+    columns,
+    rows,
+    width,
+    height,
+    theme,
+    editable = false,
+    cellStatus,
+    rowStatus,
+    onCellEdited,
+  } = props;
 
   const gridColumns = useMemo(
     () => sizeGlideColumns({ columns, rows, viewportWidth: width }),
@@ -41,30 +59,76 @@ export function ResultDataEditor(props: ResultDataEditorProps): ReactElement {
 
   const muted = theme.textMedium ?? theme.textLight ?? "#94a3b8";
   const stripeBg = theme.bgCellMedium;
+  const accent = theme.accentColor ?? "#22d3ee";
+  const surface = theme.bgCell ?? "#0c0c0c";
 
   const getCellContent = useCallback(
     ([col, row]: Item): GridCell => {
       const raw = rows[row]?.[col];
-      const isNull = raw === null || raw === undefined;
+      const isNull =
+        raw === null ||
+        raw === undefined ||
+        (typeof raw === "string" && raw === "NULL");
+      const display = isNull ? "NULL" : cellText(raw);
+      const data = isNull ? "" : cellText(raw);
+
+      const staged = cellStatus?.(row, col) === "modified";
+      const rowSt = rowStatus?.(row) ?? "unchanged";
+      const themeOverride: Partial<Theme> = {};
+      if (isNull) themeOverride.textDark = muted;
+      if (staged) {
+        themeOverride.bgCell = mixHex(surface, accent, 0.22);
+      }
+      if (rowSt === "deleted") {
+        themeOverride.textDark = muted;
+        themeOverride.bgCell = mixHex(surface, "#ef4444", 0.14);
+      } else if (rowSt === "inserted") {
+        themeOverride.bgCell = mixHex(
+          staged ? (themeOverride.bgCell as string) || surface : surface,
+          "#22c55e",
+          0.14,
+        );
+      }
+
       return {
         kind: GridCellKind.Text,
-        data: isNull ? "" : cellText(raw),
-        displayData: isNull ? "NULL" : cellText(raw),
+        data,
+        displayData: display,
         allowOverlay: true,
-        readonly: true,
-        themeOverride: isNull ? { textDark: muted } : undefined,
+        readonly: !editable,
+        themeOverride:
+          Object.keys(themeOverride).length > 0 ? themeOverride : undefined,
       };
     },
-    [rows, muted],
+    [rows, muted, accent, surface, editable, cellStatus, rowStatus],
   );
 
-  // Flutter grid: odd rows use muted @ 0.12 (chessboard readability).
   const getRowThemeOverride = useCallback(
     (row: number): Partial<Theme> | undefined => {
+      const rowSt = rowStatus?.(row) ?? "unchanged";
+      if (rowSt === "deleted") {
+        return { bgCell: mixHex(surface, "#ef4444", 0.1) };
+      }
+      if (rowSt === "inserted") {
+        return { bgCell: mixHex(surface, "#22c55e", 0.1) };
+      }
+      if (rowSt === "modified") {
+        return { bgCell: mixHex(surface, accent, 0.08) };
+      }
       if (row % 2 === 0 || !stripeBg) return undefined;
       return { bgCell: stripeBg };
     },
-    [stripeBg],
+    [stripeBg, rowStatus, surface, accent],
+  );
+
+  const handleCellEdited = useCallback(
+    (cell: Item, newValue: EditableGridCell) => {
+      if (!onCellEdited || !editable) return;
+      const [col, row] = cell;
+      if (newValue.kind !== GridCellKind.Text) return;
+      onCellEdited(row, col, newValue.data);
+    },
+    [onCellEdited, editable],
   );
 
   return createElement(DataEditor, {
@@ -72,6 +136,7 @@ export function ResultDataEditor(props: ResultDataEditorProps): ReactElement {
     rows: rows.length,
     getCellContent,
     getRowThemeOverride,
+    onCellEdited: editable ? handleCellEdited : undefined,
     width,
     height,
     theme,
@@ -84,3 +149,21 @@ export function ResultDataEditor(props: ResultDataEditorProps): ReactElement {
     minColumnWidth: 56,
   });
 }
+
+function parseRgb(hex: string): [number, number, number] | null {
+  const m = /^#([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  const n = parseInt(m[1]!, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function mixHex(base: string, overlay: string, alpha: number): string {
+  const b = parseRgb(base);
+  const o = parseRgb(overlay.startsWith("#") ? overlay : `#${overlay}`);
+  if (!b || !o) return base;
+  const mix = (x: number, y: number) => Math.round(x * (1 - alpha) + y * alpha);
+  const r = mix(b[0], o[0]);
+  const g = mix(b[1], o[1]);
+  const bl = mix(b[2], o[2]);
+  return `#${((1 << 24) | (r << 16) | (g << 8) | bl).toString(16).slice(1)}`;
+}