From 7eb24a46409b7278a5c35989cdaff65c28c6c96b Mon Sep 17 00:00:00 2001
From: Naomi Gilbert <naomi@morialkar.com>
Date: Thu, 30 Jul 2026 22:30:58 -0400
Subject: [PATCH 1/2] fix(builder): warn before leaving with unsaved schema
 changes

The structure builder held every edit in local state and only persisted it
through the explicit Save button, with no dirty tracking, no router blocker
and no beforeunload handler. Navigating away discarded the work silently.

Track a snapshot of what the server holds, keyed by draft field id, and
compare the live draft against it. The baseline is rebased on load, after a
successful save-all, after a field deletion (which persists immediately) and
after a confirmed destructive type change, so only genuinely unsaved work
triggers the guard. useBlocker covers in-app navigation and, via
enableBeforeUnload, tab close and reload.

Also replace the canvas' 'Autosaved draft' label, which claimed a behaviour
that does not exist, with a live saved/unsaved indicator.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .claude/launch.json                           |  11 ++
 apps/client/src/components/FieldCanvas.tsx    |  19 +++-
 .../src/components/UnsavedChangesModal.tsx    |  49 +++++++++
 apps/client/src/contexts/I18nContext.tsx      |  16 ++-
 .../__tests__/builder-unsaved-guard.test.tsx  | 104 ++++++++++++++++++
 .../routes/builder.$databaseId.$tableId.tsx   |  64 ++++++++++-
 6 files changed, 258 insertions(+), 5 deletions(-)
 create mode 100644 .claude/launch.json
 create mode 100644 apps/client/src/components/UnsavedChangesModal.tsx
 create mode 100644 apps/client/src/routes/__tests__/builder-unsaved-guard.test.tsx

diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 0000000..1f99702
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "client",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["--filter", "client", "dev"],
+      "port": 5173
+    }
+  ]
+}
diff --git a/apps/client/src/components/FieldCanvas.tsx b/apps/client/src/components/FieldCanvas.tsx
index a24785e..4738afb 100644
--- a/apps/client/src/components/FieldCanvas.tsx
+++ b/apps/client/src/components/FieldCanvas.tsx
@@ -30,6 +30,7 @@ interface FieldCanvasProps {
   onAdd: (type: FieldType, insertIndex?: number) => void;
   onReorder: (fields: BuilderField[]) => void;
   onRemove: (id: string) => void;
+  isDirty?: boolean;
 }
 
 interface BuilderDndProviderProps {
@@ -201,6 +202,7 @@ export function FieldCanvas({
   selectedId,
   onSelect,
   onRemove,
+  isDirty = false,
 }: Omit<FieldCanvasProps, 'onAdd' | 'onReorder'>) {
   const { t } = useI18n();
   const { active, over } = useDndContext();
@@ -226,7 +228,22 @@ export function FieldCanvas({
     <div className="card h-100">
       <div className="card-header d-flex justify-content-between align-items-center">
         <h4 className="card-title mb-0">{t('builder.canvas.title')}</h4>
-        <span className="text-muted small">{t('builder.saveDraft.label')}</span>
+        <span
+          className={`small ${isDirty ? 'text-warning' : 'text-muted'}`}
+          data-testid="builder-save-status"
+        >
+          {isDirty ? (
+            <>
+              <i className="ti ti-alert-circle me-1" aria-hidden="true" />
+              {t('builder.status.unsaved')}
+            </>
+          ) : (
+            <>
+              <i className="ti ti-check me-1" aria-hidden="true" />
+              {t('builder.status.saved')}
+            </>
+          )}
+        </span>
       </div>
       <div
         className="card-body p-0"
diff --git a/apps/client/src/components/UnsavedChangesModal.tsx b/apps/client/src/components/UnsavedChangesModal.tsx
new file mode 100644
index 0000000..637acf6
--- /dev/null
+++ b/apps/client/src/components/UnsavedChangesModal.tsx
@@ -0,0 +1,49 @@
+import { useI18n } from '../contexts/I18nContext';
+
+interface UnsavedChangesModalProps {
+  isOpen: boolean;
+  onLeave: () => void;
+  onStay: () => void;
+}
+
+export function UnsavedChangesModal({ isOpen, onLeave, onStay }: UnsavedChangesModalProps) {
+  const { t } = useI18n();
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="modal show d-block"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="unsaved-title"
+    >
+      <div className="modal-dialog modal-dialog-centered">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 id="unsaved-title" className="modal-title">
+              {t('unsaved.title')}
+            </h5>
+            <button
+              type="button"
+              className="btn-close"
+              onClick={onStay}
+              aria-label={t('common.close')}
+            />
+          </div>
+          <div className="modal-body">
+            <p className="mb-0">{t('unsaved.message')}</p>
+          </div>
+          <div className="modal-footer">
+            <button type="button" className="btn btn-secondary" onClick={onStay}>
+              {t('unsaved.stay')}
+            </button>
+            <button type="button" className="btn btn-danger" onClick={onLeave}>
+              {t('unsaved.leave')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/client/src/contexts/I18nContext.tsx b/apps/client/src/contexts/I18nContext.tsx
index e5a5c41..6ceec98 100644
--- a/apps/client/src/contexts/I18nContext.tsx
+++ b/apps/client/src/contexts/I18nContext.tsx
@@ -188,7 +188,13 @@ const resources = {
       'builder.options.noOptions': 'Aucune option configurable pour ce type.',
       'builder.validation.title': 'Règles de validation',
       'builder.validation.noRules': 'Aucune règle pour ce type.',
-      'builder.saveDraft.label': 'Brouillon enregistré automatiquement',
+      'builder.status.unsaved': 'Modifications non enregistrées',
+      'builder.status.saved': 'Toutes les modifications sont enregistrées',
+      'unsaved.title': 'Modifications non enregistrées',
+      'unsaved.message':
+        'Cette page contient des modifications qui ne sont pas encore enregistrées. Si vous quittez maintenant, elles seront perdues.',
+      'unsaved.stay': 'Rester sur la page',
+      'unsaved.leave': 'Quitter sans enregistrer',
       'builder.destructive.title': 'Changement destructif',
       'builder.destructive.affectedRecords_one': '{{count}} fiche concernée',
       'builder.destructive.affectedRecords_other': '{{count}} fiches concernées',
@@ -482,7 +488,13 @@ const resources = {
       'builder.options.noOptions': 'No configurable options for this type.',
       'builder.validation.title': 'Validation rules',
       'builder.validation.noRules': 'No rules for this type.',
-      'builder.saveDraft.label': 'Autosaved draft',
+      'builder.status.unsaved': 'Unsaved changes',
+      'builder.status.saved': 'All changes saved',
+      'unsaved.title': 'Unsaved changes',
+      'unsaved.message':
+        'This page has changes that have not been saved yet. If you leave now, they will be lost.',
+      'unsaved.stay': 'Stay on this page',
+      'unsaved.leave': 'Leave without saving',
       'builder.destructive.title': 'Destructive change',
       'builder.destructive.affectedRecords_one': '{{count}} record affected',
       'builder.destructive.affectedRecords_other': '{{count}} records affected',
diff --git a/apps/client/src/routes/__tests__/builder-unsaved-guard.test.tsx b/apps/client/src/routes/__tests__/builder-unsaved-guard.test.tsx
new file mode 100644
index 0000000..9c88f37
--- /dev/null
+++ b/apps/client/src/routes/__tests__/builder-unsaved-guard.test.tsx
@@ -0,0 +1,104 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { apiClient } from '../../lib/apiClient';
+import { render } from '../../test/render';
+
+/**
+ * Captures the options the page passes to useBlocker so the test can ask the page
+ * the same question the router would: "would leaving right now discard work?".
+ */
+let blockerOpts: { shouldBlockFn: () => boolean; enableBeforeUnload: () => boolean } | null = null;
+let blockerResolver: any = { status: 'idle' };
+
+vi.mock('@tanstack/react-router', () => ({
+  createFileRoute: () => () => ({}),
+  useParams: () => ({ databaseId: 'db-1', tableId: 'tbl-1' }),
+  useBlocker: (opts: any) => {
+    blockerOpts = opts;
+    return blockerResolver;
+  },
+}));
+
+import StructureBuilder from '../builder.$databaseId.$tableId';
+
+const mockDatabase = { id: 'db-1', name: 'Patrimoine', workspace_id: 'ws-1' };
+const mockTable = { id: 'tbl-1', name: 'Ouvrages', database_id: 'db-1' };
+const mockFields = [
+  {
+    id: 'f1',
+    name: 'Titre',
+    type: 'title',
+    position: 0,
+    options: {},
+    validation: {},
+    table_id: 'tbl-1',
+  },
+];
+
+function renderBuilder() {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <StructureBuilder />
+    </QueryClientProvider>
+  );
+}
+
+describe('schema builder unsaved-changes guard', () => {
+  beforeEach(() => {
+    blockerOpts = null;
+    blockerResolver = { status: 'idle' };
+    vi.spyOn(apiClient, 'get').mockImplementation((url: string) => {
+      if (url.startsWith('/databases/')) return Promise.resolve(mockDatabase) as any;
+      if (url.startsWith('/tables/')) return Promise.resolve(mockTable) as any;
+      if (url.startsWith('/fields?')) return Promise.resolve(mockFields) as any;
+      if (url.startsWith('/tables?')) return Promise.resolve([mockTable]) as any;
+      return Promise.resolve([]) as any;
+    });
+  });
+
+  it('does not block navigation when the draft matches what was loaded', async () => {
+    renderBuilder();
+
+    expect(await screen.findByText('All changes saved')).toBeInTheDocument();
+    expect(blockerOpts?.shouldBlockFn()).toBe(false);
+    expect(blockerOpts?.enableBeforeUnload()).toBe(false);
+  });
+
+  it('blocks navigation and warns once a field is edited', async () => {
+    const user = userEvent.setup();
+    renderBuilder();
+
+    const nameInput = await screen.findByLabelText('Field name');
+    await user.type(nameInput, ' modifié');
+
+    await waitFor(() => {
+      expect(screen.getByText('Unsaved changes')).toBeInTheDocument();
+    });
+
+    // Both in-app navigation and tab close/reload must be guarded.
+    expect(blockerOpts?.shouldBlockFn()).toBe(true);
+    expect(blockerOpts?.enableBeforeUnload()).toBe(true);
+  });
+
+  it('offers to stay or leave when the router reports a blocked navigation', async () => {
+    const user = userEvent.setup();
+    const proceed = vi.fn();
+    const reset = vi.fn();
+    blockerResolver = { status: 'blocked', proceed, reset };
+
+    renderBuilder();
+
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText(/have not been saved yet/i)).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Stay on this page' }));
+    expect(reset).toHaveBeenCalledTimes(1);
+    expect(proceed).not.toHaveBeenCalled();
+
+    await user.click(screen.getByRole('button', { name: 'Leave without saving' }));
+    expect(proceed).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/client/src/routes/builder.$databaseId.$tableId.tsx b/apps/client/src/routes/builder.$databaseId.$tableId.tsx
index ce94d39..210ad54 100644
--- a/apps/client/src/routes/builder.$databaseId.$tableId.tsx
+++ b/apps/client/src/routes/builder.$databaseId.$tableId.tsx
@@ -1,6 +1,6 @@
-import { createFileRoute, useParams } from '@tanstack/react-router';
+import { createFileRoute, useBlocker, useParams } from '@tanstack/react-router';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useI18n } from '../contexts/I18nContext';
 import { apiClient } from '../lib/apiClient';
 import { FIELD_TYPES, type FieldType, type BuilderField } from '../lib/fieldTypes';
@@ -9,6 +9,7 @@ import { FieldPalette } from '../components/FieldPalette';
 import { FieldCanvas, BuilderDndProvider } from '../components/FieldCanvas';
 import { FieldOptionPanel } from '../components/FieldOptionPanel';
 import { DestructiveChangeModal } from '../components/DestructiveChangeModal';
+import { UnsavedChangesModal } from '../components/UnsavedChangesModal';
 import { LoadingSpinner } from '../components/LoadingSpinner';
 import { EmptyState } from '../components/ui/EmptyState';
 import { PageActions, PageHeader } from '../components/ui/PageHeader';
@@ -78,6 +79,24 @@ function createNewField(type: FieldType, position: number): BuilderField {
   };
 }
 
+/**
+ * Serialize the parts of a field that `handleSaveAll` persists, so the draft can be
+ * compared against what the server currently holds.
+ */
+function snapshotField(field: BuilderField): string {
+  return JSON.stringify({
+    name: field.name,
+    type: field.type,
+    position: field.position,
+    options: field.options,
+    validation: field.validation,
+  });
+}
+
+function snapshotFields(fields: BuilderField[]): Record<string, string> {
+  return Object.fromEntries(fields.map((f) => [f.id, snapshotField(f)]));
+}
+
 function StructureBuilder() {
   const { databaseId, tableId } = useParams({ from: '/builder/$databaseId/$tableId' });
   const { t } = useI18n();
@@ -87,6 +106,9 @@ function StructureBuilder() {
   const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<'structure' | 'layout'>('structure');
   const initializedRef = useRef(false);
+  // Snapshot of what the server holds, keyed by draft field id. Compared against the
+  // live draft to know whether leaving the page would discard work.
+  const [savedSnapshot, setSavedSnapshot] = useState<Record<string, string>>({});
   const [pendingAction, setPendingAction] = useState<{
     fieldId: string;
     action: 'delete' | 'type-change';
@@ -182,6 +204,7 @@ function StructureBuilder() {
 
       const sorted = [...loadedFields].sort((a, b) => a.position - b.position);
       setFields(sorted);
+      setSavedSnapshot(snapshotFields(sorted));
       if (sorted.length > 0) {
         setSelectedFieldId(sorted[0].id);
       }
@@ -272,6 +295,13 @@ function StructureBuilder() {
       }
 
       setFields((prev) => prev.filter((f) => f.id !== fieldId));
+      // The removal is persisted immediately (or the field never existed server-side),
+      // so drop it from the baseline rather than reporting it as an unsaved change.
+      setSavedSnapshot((prev) => {
+        const next = { ...prev };
+        delete next[fieldId];
+        return next;
+      });
       if (selectedFieldId === fieldId) {
         setSelectedFieldId(null);
       }
@@ -339,6 +369,12 @@ function StructureBuilder() {
       .put<Field>(`/fields/${field.persistedId}`, payload)
       .then(() => {
         setPendingAction(null);
+        // This field is now persisted with its new type; rebase it so it no longer
+        // counts as an unsaved change.
+        setSavedSnapshot((prev) => ({
+          ...prev,
+          [field.id]: snapshotField({ ...field, type: pendingAction.newType ?? field.type }),
+        }));
         queryClient.invalidateQueries({ queryKey: ['fields', tableId] });
       })
       .catch(() => {
@@ -354,10 +390,27 @@ function StructureBuilder() {
       ...newFields.map((f) => saveFieldMutation.mutateAsync(f)),
       ...existingFields.map((f) => saveFieldMutation.mutateAsync(f)),
     ]).then(() => {
+      setSavedSnapshot(snapshotFields(fields));
       queryClient.invalidateQueries({ queryKey: ['fields', tableId] });
     });
   }, [fields, queryClient, tableId, saveFieldMutation]);
 
+  const isDirty = useMemo(() => {
+    const current = snapshotFields(fields);
+    const currentIds = Object.keys(current);
+    const savedIds = Object.keys(savedSnapshot);
+
+    if (currentIds.length !== savedIds.length) return true;
+    return currentIds.some((id) => current[id] !== savedSnapshot[id]);
+  }, [fields, savedSnapshot]);
+
+  // Covers in-app navigation; `enableBeforeUnload` covers tab close and reload.
+  const blocker = useBlocker({
+    shouldBlockFn: () => isDirty,
+    enableBeforeUnload: () => isDirty,
+    withResolver: true,
+  });
+
   const selectedField = selectedFieldId ? fields.find((f) => f.id === selectedFieldId) : undefined;
 
   const availableTables = tablesQuery.data
@@ -459,6 +512,7 @@ function StructureBuilder() {
                 selectedId={selectedFieldId}
                 onSelect={setSelectedFieldId}
                 onRemove={handleRemove}
+                isDirty={isDirty}
               />
             </div>
 
@@ -492,6 +546,12 @@ function StructureBuilder() {
           onCancel={() => setPendingAction(null)}
         />
       )}
+
+      <UnsavedChangesModal
+        isOpen={blocker.status === 'blocked'}
+        onLeave={() => blocker.proceed?.()}
+        onStay={() => blocker.reset?.()}
+      />
     </div>
   );
 }

From 2e18d338703cbf95135f5a2ea2880c28263d9648 Mon Sep 17 00:00:00 2001
From: Naomi Gilbert <naomi@morialkar.com>
Date: Fri, 31 Jul 2026 19:50:50 -0400
Subject: [PATCH 2/2] fix(builder): make field deletion actually persist and
 surface failures

Found while verifying the unsaved-changes guard against the running app.

The API treats every field deletion as destructive and rejects a DELETE
without a confirmation token, but the client only requested a token when
preview-impact reported affected records. A deletion with no affected
records therefore always returned 409. deleteFieldMutation had no onError,
so the failure was swallowed while the field had already been dropped from
local state: it vanished from the canvas and came back on reload.

Always fetch the confirmation token (the impact now only decides whether the
user is warned first), restore the field and show an error when the request
fails, and let apiClient.delete carry a body so the token can be sent.

This also keeps the unsaved-changes baseline honest, since it treats a
deletion as already persisted.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/client/src/contexts/I18nContext.tsx      |  4 ++
 apps/client/src/lib/apiClient.ts              |  7 ++-
 .../routes/builder.$databaseId.$tableId.tsx   | 53 ++++++++++++++-----
 3 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/contexts/I18nContext.tsx b/apps/client/src/contexts/I18nContext.tsx
index 6ceec98..9adab29 100644
--- a/apps/client/src/contexts/I18nContext.tsx
+++ b/apps/client/src/contexts/I18nContext.tsx
@@ -188,6 +188,8 @@ const resources = {
       'builder.options.noOptions': 'Aucune option configurable pour ce type.',
       'builder.validation.title': 'Règles de validation',
       'builder.validation.noRules': 'Aucune règle pour ce type.',
+      'builder.deleteFailed':
+        'Le champ « {{name}} » n’a pas pu être supprimé. Il a été rétabli; réessayez.',
       'builder.status.unsaved': 'Modifications non enregistrées',
       'builder.status.saved': 'Toutes les modifications sont enregistrées',
       'unsaved.title': 'Modifications non enregistrées',
@@ -488,6 +490,8 @@ const resources = {
       'builder.options.noOptions': 'No configurable options for this type.',
       'builder.validation.title': 'Validation rules',
       'builder.validation.noRules': 'No rules for this type.',
+      'builder.deleteFailed':
+        'Field "{{name}}" could not be deleted. It has been restored; please try again.',
       'builder.status.unsaved': 'Unsaved changes',
       'builder.status.saved': 'All changes saved',
       'unsaved.title': 'Unsaved changes',
diff --git a/apps/client/src/lib/apiClient.ts b/apps/client/src/lib/apiClient.ts
index b0028a0..587eeb2 100644
--- a/apps/client/src/lib/apiClient.ts
+++ b/apps/client/src/lib/apiClient.ts
@@ -98,8 +98,11 @@ class ApiClient {
     });
   }
 
-  async delete<T>(endpoint: string): Promise<T> {
-    return this.request<T>(endpoint, { method: 'DELETE' });
+  async delete<T>(endpoint: string, data?: unknown): Promise<T> {
+    return this.request<T>(endpoint, {
+      method: 'DELETE',
+      body: data === undefined ? undefined : JSON.stringify(data),
+    });
   }
 }
 
diff --git a/apps/client/src/routes/builder.$databaseId.$tableId.tsx b/apps/client/src/routes/builder.$databaseId.$tableId.tsx
index 210ad54..9a197e0 100644
--- a/apps/client/src/routes/builder.$databaseId.$tableId.tsx
+++ b/apps/client/src/routes/builder.$databaseId.$tableId.tsx
@@ -109,6 +109,7 @@ function StructureBuilder() {
   // Snapshot of what the server holds, keyed by draft field id. Compared against the
   // live draft to know whether leaving the page would discard work.
   const [savedSnapshot, setSavedSnapshot] = useState<Record<string, string>>({});
+  const [deleteError, setDeleteError] = useState<string | null>(null);
   const [pendingAction, setPendingAction] = useState<{
     fieldId: string;
     action: 'delete' | 'type-change';
@@ -168,15 +169,28 @@ function StructureBuilder() {
   });
 
   const deleteFieldMutation = useMutation({
-    mutationFn: async (field: BuilderField) => {
+    mutationFn: async ({ field, token }: { field: BuilderField; token?: string }) => {
       if (field.persistedId) {
-        return apiClient.delete(`/fields/${field.persistedId}`);
+        // The API treats every field deletion as destructive, so a confirmation
+        // token is always required — not only when records are affected.
+        return apiClient.delete(`/fields/${field.persistedId}`, { confirmation_token: token });
       }
       return Promise.resolve();
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['fields', tableId] });
     },
+    onError: (_error, { field }) => {
+      // The deletion did not reach the server: put the field back rather than
+      // leaving the canvas showing a removal that never happened.
+      setFields((prev) =>
+        prev.some((f) => f.id === field.id)
+          ? prev
+          : [...prev, field].sort((a, b) => a.position - b.position)
+      );
+      setSavedSnapshot((prev) => ({ ...prev, [field.id]: snapshotField(field) }));
+      setDeleteError(field.name);
+    },
   });
 
   const updateTableMutation = useMutation({
@@ -286,12 +300,12 @@ function StructureBuilder() {
   }, []);
 
   const confirmRemove = useCallback(
-    (fieldId: string) => {
+    (fieldId: string, token?: string) => {
       const field = fields.find((f) => f.id === fieldId);
       if (!field) return;
 
       if (field.persistedId) {
-        deleteFieldMutation.mutate(field);
+        deleteFieldMutation.mutate({ field, token });
       }
 
       setFields((prev) => prev.filter((f) => f.id !== fieldId));
@@ -315,13 +329,14 @@ function StructureBuilder() {
       if (!field) return;
 
       if (field.persistedId) {
-        apiClient
-          .get<SchemaImpact>(`/fields/${field.persistedId}/preview-impact`)
-          .then(async (impact) => {
+        // A token is needed for every deletion; the impact only decides whether the
+        // user is warned first.
+        Promise.all([
+          apiClient.get<SchemaImpact>(`/fields/${field.persistedId}/preview-impact`),
+          apiClient.get<{ token: string }>(`/fields/${field.persistedId}/confirmation-token`),
+        ])
+          .then(([impact, tokenResponse]) => {
             if (impact.affected_records > 0) {
-              const tokenResponse = await apiClient.get<{ token: string }>(
-                `/fields/${field.persistedId}/confirmation-token`
-              );
               setPendingAction({
                 fieldId,
                 action: 'delete',
@@ -331,10 +346,10 @@ function StructureBuilder() {
                 message: t('builder.destructive.deleteMessage'),
               });
             } else {
-              confirmRemove(fieldId);
+              confirmRemove(fieldId, tokenResponse.token);
             }
           })
-          .catch(() => confirmRemove(fieldId));
+          .catch(() => setDeleteError(field.name));
       } else {
         confirmRemove(fieldId);
       }
@@ -346,7 +361,7 @@ function StructureBuilder() {
     if (!pendingAction) return;
 
     if (pendingAction.action === 'delete') {
-      confirmRemove(pendingAction.fieldId);
+      confirmRemove(pendingAction.fieldId, pendingAction.token);
       setPendingAction(null);
       return;
     }
@@ -547,6 +562,18 @@ function StructureBuilder() {
         />
       )}
 
+      {deleteError && (
+        <div className="alert alert-danger alert-dismissible mt-3" role="alert">
+          {t('builder.deleteFailed', { name: deleteError })}
+          <button
+            type="button"
+            className="btn-close"
+            onClick={() => setDeleteError(null)}
+            aria-label={t('common.close')}
+          />
+        </div>
+      )}
+
       <UnsavedChangesModal
         isOpen={blocker.status === 'blocked'}
         onLeave={() => blocker.proceed?.()}