fix(data-table): surface inline-edit save failures instead of swallowing them (#2106)

A rejected inline-edit save (e.g. a 400 validation failure — an invalid status
transition) was caught with only `console.error`. Symptom: the save bar stayed
stuck, the cell kept the unsaved value, and the author got no feedback at all
(reproduced live on the showcase Studio preview: done→in_review was rejected
server-side, silently).

- saveRow / saveBatch: extract the server's reason (the ObjectStack adapter
  decorates thrown errors with the parsed body on `details`) and show it in the
  toolbar with an alert icon, instead of failing silently. The pending edit is
  kept so the author can fix and retry.
- Tint failed row(s) destructive (`erroredRows`) so it's unambiguous which rows
  didn't persist — no phantom "looks saved" state.
- Clear the error on a successful save (per-row or batch) and on cancel.
- Add `table.saveFailed` across all 10 locales.
- Tests: a failed save surfaces the reason and keeps the pending change; a
  successful save shows no failure message.

Applies to both the runtime list grid and the Studio design preview (one code
path). Found while verifying the editInline work end-to-end.

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

.changeset/data-table-surface-save-errors.md

@@ -0,0 +1,14 @@
+---
+"@object-ui/components": patch
+"@object-ui/i18n": patch
+---
+
+fix(data-table): surface inline-edit save failures instead of swallowing them
+
+A rejected inline-edit save (e.g. a 400 validation failure like an invalid
+status transition) was caught with only `console.error` — the toolbar stayed
+stuck, the cell kept the unsaved value, and the author got no feedback. Now the
+data-table shows the server's reason in the toolbar (with an alert icon) and
+tints the affected row(s) destructive so it's clear which rows didn't persist.
+The pending edit is kept for retry; the error clears on a successful save or on
+cancel. Adds the `table.saveFailed` string across all locales.

packages/components/src/__tests__/data-table-inline-edit.test.tsx

@@ -19,7 +19,7 @@
  *      render a native date picker (<input type="date">).
  */
 import { describe, it, expect, vi, beforeAll } from 'vitest';
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import React from 'react';
 import { renderComponent } from './test-utils';
@@ -131,4 +131,52 @@ describe('data-table — inline edit is per-row usable', () => {
 
     expect(onCellChange).not.toHaveBeenCalled();
   });
+
+  it('D) a failed save surfaces the server error and keeps the pending change', async () => {
+    // Regression: a rejected save (e.g. a 400 validation failure) was swallowed
+    // with only console.error — the toolbar stayed stuck, the cell kept the
+    // unsaved value, and the author got no feedback. The reason must surface.
+    const onBatchSave = vi.fn().mockRejectedValue({
+      // Shape the ObjectStack adapter decorates onto thrown errors.
+      details: { message: 'Invalid task status transition.' },
+    });
+    const { container, getByText } = renderComponent({ ...editableSchema, onBatchSave });
+
+    // Stage an edit.
+    const cells = container.querySelectorAll('tbody td');
+    const qtyCell = cells[2] as HTMLElement; // 报工数量
+    fireEvent.click(qtyCell);
+    const input = qtyCell.querySelector('input') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: '42' } });
+    fireEvent.blur(input);
+
+    // Save All → saveBatch → onBatchSave rejects.
+    fireEvent.click(getByText(/Save All/i));
+    expect(onBatchSave).toHaveBeenCalledTimes(1);
+
+    // The server's reason is surfaced, not swallowed.
+    await waitFor(() =>
+      expect(container.textContent).toContain('Invalid task status transition'),
+    );
+    // And the pending change is kept (Save All still offered) — no silent drop
+    // and no phantom "saved" state.
+    expect(getByText(/Save All/i)).toBeInTheDocument();
+  });
+
+  it('D2) a successful save does NOT show a save-failure message', async () => {
+    const onBatchSave = vi.fn().mockResolvedValue(undefined);
+    const { container, getByText } = renderComponent({ ...editableSchema, onBatchSave });
+
+    const cells = container.querySelectorAll('tbody td');
+    const qtyCell = cells[2] as HTMLElement;
+    fireEvent.click(qtyCell);
+    const input = qtyCell.querySelector('input') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: '7' } });
+    fireEvent.blur(input);
+
+    fireEvent.click(getByText(/Save All/i));
+    await waitFor(() => expect(onBatchSave).toHaveBeenCalledTimes(1));
+
+    expect(container.textContent).not.toContain('Save failed');
+  });
 });

packages/components/src/renderers/complex/data-table.tsx

@@ -51,6 +51,7 @@ import {
   Plus,
   Expand,
   MoreHorizontal,
+  AlertCircle,
 } from 'lucide-react';
 import {
   DropdownMenu,
@@ -118,6 +119,7 @@ const TABLE_DEFAULT_TRANSLATIONS: Record<string, string> = {
   'table.open': 'Open',
   'table.search': 'Search...',
   'table.modified': '{{count}} row modified',
+  'table.saveFailed': 'Save failed',
   'table.selected': '{{count}} selected',
   'table.edit': 'Edit',
   'table.delete': 'Delete',
@@ -163,6 +165,23 @@ function useTableTranslation() {
   }
 }
 
+/**
+ * Pull the most useful human-readable message out of whatever the save path
+ * threw. The ObjectStack adapter decorates thrown errors with the parsed
+ * response body on `details` (e.g. a `{ message, error }` from a validation
+ * failure), so prefer that; fall back to `error.message`, then a raw string.
+ * Never returns empty — callers render it as the save-failure reason.
+ */
+function extractSaveErrorMessage(error: unknown): string {
+  if (error && typeof error === 'object') {
+    const e = error as { message?: unknown; details?: { message?: unknown; error?: unknown } };
+    const detail = e.details && (e.details.message ?? e.details.error);
+    if (typeof detail === 'string' && detail.trim()) return detail.trim();
+    if (typeof e.message === 'string' && e.message.trim()) return e.message.trim();
+  }
+  return typeof error === 'string' && error.trim() ? error.trim() : 'Unknown error';
+}
+
 /**
  * Enterprise-level data table component with Airtable-like features.
  * 
@@ -322,6 +341,12 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   // Track pending changes for multi-cell editing: rowIndex -> { columnKey -> newValue }
   const [pendingChanges, setPendingChanges] = useState<Map<number, Record<string, any>>>(new Map());
   const [isSaving, setIsSaving] = useState(false);
+  // Last save failure message (server validation text, etc.) shown in the
+  // toolbar; null when the last save attempt succeeded or nothing's been saved.
+  const [saveError, setSaveError] = useState<string | null>(null);
+  // Row indices whose last save attempt failed — tinted destructive so the
+  // author sees exactly which rows didn't persist (no silent "phantom save").
+  const [erroredRows, setErroredRows] = useState<Set<number>>(new Set());
   // Column header context menu state
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; columnKey: string } | null>(null);
 
@@ -706,8 +731,21 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
       const newPendingChanges = new Map(pendingChanges);
       newPendingChanges.delete(rowIndex);
       setPendingChanges(newPendingChanges);
+      // Saved — drop any prior error for this row, and clear the banner once
+      // no errored rows remain.
+      setErroredRows((prev) => {
+        if (!prev.has(rowIndex)) return prev;
+        const next = new Set(prev);
+        next.delete(rowIndex);
+        if (next.size === 0) setSaveError(null);
+        return next;
+      });
     } catch (error) {
+      // Keep the pending change so the author can fix and retry; surface the
+      // reason instead of failing silently, and flag the row.
       console.error('Failed to save row:', error);
+      setSaveError(extractSaveErrorMessage(error));
+      setErroredRows((prev) => new Set(prev).add(rowIndex));
     } finally {
       setIsSaving(false);
     }
@@ -717,6 +755,13 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     const newPendingChanges = new Map(pendingChanges);
     newPendingChanges.delete(rowIndex);
     setPendingChanges(newPendingChanges);
+    setErroredRows((prev) => {
+      if (!prev.has(rowIndex)) return prev;
+      const next = new Set(prev);
+      next.delete(rowIndex);
+      if (next.size === 0) setSaveError(null);
+      return next;
+    });
   };
 
   const saveBatch = async () => {
@@ -736,15 +781,24 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
 
       // Clear all pending changes
       setPendingChanges(new Map());
+      // Saved — clear any prior errors.
+      setErroredRows(new Set());
+      setSaveError(null);
     } catch (error) {
+      // Batch is all-or-nothing here: keep every pending row, flag them all,
+      // and surface the reason instead of failing silently.
       console.error('Failed to save batch:', error);
+      setSaveError(extractSaveErrorMessage(error));
+      setErroredRows(new Set(pendingChanges.keys()));
     } finally {
       setIsSaving(false);
     }
   };
 
   const cancelAllChanges = () => {
     setPendingChanges(new Map());
+    setErroredRows(new Set());
+    setSaveError(null);
   };
 
   const handleCellKeyDown = (e: React.KeyboardEvent, rowIndex: number, columnKey: string) => {
@@ -843,6 +897,17 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
           <div className="flex flex-wrap items-center gap-2">
             {hasPendingChanges && (
               <>
+                {saveError && (
+                  <div
+                    role="alert"
+                    className="flex items-center gap-1.5 text-sm text-destructive max-w-[16rem] sm:max-w-sm"
+                  >
+                    <AlertCircle className="h-4 w-4 flex-none" />
+                    <span className="truncate" title={`${t('table.saveFailed')}: ${saveError}`}>
+                      {t('table.saveFailed')}: {saveError}
+                    </span>
+                  </div>
+                )}
                 <div className="text-sm text-muted-foreground">
                   {t('table.modified', { count: pendingChanges.size })}
                 </div>
@@ -1071,7 +1136,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                         "data-[state=selected]:bg-primary/5 data-[state=selected]:hover:bg-primary/10",
                         "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset",
                         schema.onRowClick && "cursor-pointer",
-                        rowHasChanges && "bg-amber-50 dark:bg-amber-950/20",
+                        rowHasChanges && !erroredRows.has(rowIndex) && "bg-amber-50 dark:bg-amber-950/20",
+                        erroredRows.has(rowIndex) && "bg-destructive/10 dark:bg-destructive/15 ring-1 ring-inset ring-destructive/40",
                         rowClassName && rowClassName(row, rowIndex)
                       )}
                       style={rowStyle ? rowStyle(row, rowIndex) : undefined}

packages/i18n/src/locales/ar.ts

@@ -137,6 +137,7 @@ const ar = {
     open: "فتح",
     search: "بحث...",
     modified: "{{count}} صف(صفوف) معدّل(ة)",
+    saveFailed: 'فشل الحفظ',
     selected: "{{count}} محدد(ة)",
     edit: "تعديل",
     delete: "حذف",

packages/i18n/src/locales/de.ts

@@ -137,6 +137,7 @@ const de = {
     open: "Öffnen",
     search: "Suchen...",
     modified: "{{count}} Zeile geändert",
+    saveFailed: 'Speichern fehlgeschlagen',
     selected: "{{count}} ausgewählt",
     edit: "Bearbeiten",
     delete: "Löschen",

packages/i18n/src/locales/en.ts

@@ -144,6 +144,7 @@ const en = {
     open: 'Open',
     search: 'Search...',
     modified: '{{count}} row modified',
+    saveFailed: 'Save failed',
     selected: '{{count}} selected',
     edit: 'Edit',
     delete: 'Delete',

packages/i18n/src/locales/es.ts

@@ -137,6 +137,7 @@ const es = {
     open: "Abrir",
     search: "Buscar...",
     modified: "{{count}} filas modificadas",
+    saveFailed: 'Error al guardar',
     selected: "{{count}} seleccionados",
     edit: "Editar",
     delete: "Eliminar",

packages/i18n/src/locales/fr.ts

@@ -137,6 +137,7 @@ const fr = {
     open: "Ouvrir",
     search: "Rechercher...",
     modified: "{{count}} ligne(s) modifiée(s)",
+    saveFailed: 'Échec de l’enregistrement',
     selected: "{{count}} sélectionné(s)",
     edit: "Modifier",
     delete: "Supprimer",

packages/i18n/src/locales/ja.ts

@@ -137,6 +137,7 @@ const ja = {
     open: "開く",
     search: "検索...",
     modified: "{{count}} 行が変更されました",
+    saveFailed: '保存に失敗しました',
     selected: "{{count}} 件選択中",
     edit: "編集",
     delete: "削除",

packages/i18n/src/locales/ko.ts

@@ -137,6 +137,7 @@ const ko = {
     open: "열기",
     search: "검색...",
     modified: "{{count}}개 행 수정됨",
+    saveFailed: '저장 실패',
     selected: "{{count}}개 선택됨",
     edit: "편집",
     delete: "삭제",