feat: CEL disabled on action buttons + record-page Undo wiring (#1787)

- components/layout (page header): evaluate CEL `disabled` against the record
  (was boolean-only), mirroring the existing `visible` eval — actions can grey
  out conditionally instead of only hiding.
- plugin-grid RowActionMenu: evaluate `disabled` (boolean | CEL) per row item.
- components action-button: forward `undoable`/`recordIdField` on execute.
- app-shell RecordDetailView: mount useGlobalUndo + wire the success toast's
  "Undo" for undoable actions (prior values from the loaded record).
- plugin-detail record:quick_actions: CEL disabled + running spinner per button.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: os-zhuang

.changeset/action-disabled-cel-record-undo.md

@@ -0,0 +1,24 @@
+---
+"@object-ui/components": minor
+"@object-ui/plugin-grid": minor
+"@object-ui/plugin-detail": minor
+"@object-ui/app-shell": minor
+---
+
+feat: evaluate CEL `disabled` on action buttons + record-page Undo wiring
+
+- **components (page header)**: the `record_header` action toolbar now evaluates
+  a CEL `disabled` predicate against the record (boolean was the only honoured
+  form before), mirroring its existing `visible` evaluation. An action can now
+  grey out conditionally (e.g. "Reassign" on a converted lead) instead of only
+  hiding via `visible`.
+- **plugin-grid (row menu)**: `RowActionMenu` items likewise evaluate `disabled`
+  (boolean or CEL against the row), and skip the click when disabled.
+- **components (action-button)**: forward `undoable` / `recordIdField` when
+  executing, so undoable update actions keep their Undo affordance through the
+  `action:button` path.
+- **app-shell (RecordDetailView)**: mount `useGlobalUndo` and wire the record
+  action runtime's success toast to offer "Undo" for `undoable` actions
+  (capturing the changed fields' prior values from the loaded record).
+- **plugin-detail (record:quick_actions)**: the widget's buttons now evaluate a
+  CEL `disabled` and show a spinner + disable while running.

packages/app-shell/src/views/RecordDetailView.tsx

@@ -11,7 +11,7 @@ import { useParams, useNavigate, useLocation, Link } from 'react-router-dom';
 import { DetailView, RecordChatterPanel, buildDefaultPageSchema, extractMentions } from '@object-ui/plugin-detail';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { useAuth, createAuthenticatedFetch } from '@object-ui/auth';
-import { ActionProvider, useObjectTranslation, useObjectLabel, usePageAssignment, RecordContextProvider, SchemaRenderer, DiscussionContextProvider, HighlightFieldsProvider } from '@object-ui/react';
+import { ActionProvider, useObjectTranslation, useObjectLabel, usePageAssignment, RecordContextProvider, SchemaRenderer, DiscussionContextProvider, HighlightFieldsProvider, useGlobalUndo } from '@object-ui/react';
 import { buildExpandFields } from '@object-ui/core';
 import { toast } from 'sonner';
 import { useRecordPresence, PresenceAvatars } from '@object-ui/collaboration';
@@ -347,10 +347,24 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
     });
   }, [objectName, objectDef, objects, fieldLabel, fieldOptionLabel, actionParamText, actionParamOptionLabel]);
 
-  const toastHandler = useCallback((message: string, options?: { type?: string }) => {
-    if (options?.type === 'error') toast.error(message);
-    else toast.success(message);
-  }, []);
+  // Global undo/redo (Ctrl+Z), backed by the dataSource — the success toast's
+  // "Undo" button (for `undoable` actions) restores the record's prior values.
+  const undoCtl = useGlobalUndo({
+    dataSource,
+    onUndo: () => { setActionRefreshKey(k => k + 1); toast.success('Change undone'); },
+  });
+
+  const toastHandler = useCallback((message: string, options?: { type?: string; duration?: number; undo?: { label?: string } }) => {
+    if (options?.type === 'error') { toast.error(message); return; }
+    if (options?.undo) {
+      toast.success(message, {
+        duration: options.duration,
+        action: { label: options.undo.label || 'Undo', onClick: () => { void undoCtl.undo(); } },
+      });
+      return;
+    }
+    toast.success(message, { duration: options?.duration });
+  }, [undoCtl]);
 
   const navigateHandler = useCallback((url: string, options?: { external?: boolean; newTab?: boolean }) => {
     if (options?.external || options?.newTab) {
@@ -364,8 +378,10 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
   const apiHandler = useCallback(async (action: ActionDef) => {
     try {
       const target = action.target || action.name;
-      const params = action.params || {};
+      const params: Record<string, any> = { ...(action.params || {}) };
+      delete params._rowRecord;
 
+      let undo: any;
       switch (target) {
         case 'opportunity_change_stage':
           await dataSource.update(objectName!, pureRecordId!, { stage: params.new_stage });
@@ -379,6 +395,22 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
         default:
           // Generic: update record with collected params
           if (Object.keys(params).length > 0) {
+            // Undoable single-record update: capture the changed fields' prior
+            // values from the loaded record so the success toast can offer Undo.
+            if (action.undoable && pageRecord && objectName && pureRecordId) {
+              const undoData: Record<string, unknown> = {};
+              for (const k of Object.keys(params)) undoData[k] = (pageRecord as any)[k] ?? null;
+              undo = {
+                id: `undo-${objectName}-${pureRecordId}-${Date.now()}`,
+                type: 'update',
+                objectName,
+                recordId: String(pureRecordId),
+                timestamp: Date.now(),
+                description: action.label || `Undo ${objectName}`,
+                undoData,
+                redoData: { ...params },
+              };
+            }
             await dataSource.update(objectName!, pureRecordId!, params);
           }
           break;
@@ -387,12 +419,16 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
       const shouldRefresh = action.refreshAfter === true;
       if (shouldRefresh) {
         setActionRefreshKey(k => k + 1);
+      } else if (undo) {
+        // Even when refreshAfter isn't set, reflect the change so the user sees
+        // it (and the subsequent Undo) on the open record.
+        setActionRefreshKey(k => k + 1);
       }
-      return { success: true, reload: shouldRefresh };
+      return { success: true, reload: shouldRefresh, undo };
     } catch (error) {
       return { success: false, error: (error as Error).message };
     }
-  }, [dataSource, objectName, pureRecordId]);
+  }, [dataSource, objectName, pureRecordId, pageRecord]);
 
   // Client-side modal transport: `type:'modal'` actions open here (Dialog /
   // Sheet / Drawer by `placement`) and render arbitrary SchemaNode content.

packages/components/src/renderers/action/action-button.tsx

@@ -98,6 +98,11 @@ const ActionButtonRenderer = forwardRef<HTMLButtonElement, ActionButtonProps>(
           successMessage: schema.successMessage,
           errorMessage: schema.errorMessage,
           refreshAfter: schema.refreshAfter,
+          // Forward `undoable` (and the row id field) so update actions can
+          // offer an Undo affordance — without this the flag is dropped and the
+          // handler never builds the undo operation.
+          undoable: (schema as any).undoable,
+          recordIdField: (schema as any).recordIdField,
           toast: schema.toast,
           // One-shot reveal dialog for actions whose response is shown
           // exactly once (2FA setup, OAuth client_secret, regenerated

packages/components/src/renderers/layout/containers.tsx

@@ -804,11 +804,30 @@ const PageHeaderRenderer: React.FC<any> = ({ schema, className, ...props }) => {
     const useOverflow = headerActions.length > INLINE_MAX + 1;
     const inlineActions = useOverflow ? headerActions.slice(0, INLINE_MAX) : headerActions;
     const overflowActions = useOverflow ? headerActions.slice(INLINE_MAX) : [];
+    // Resolve a `disabled` predicate against the record. Mirrors the `visible`
+    // evaluation above — a boolean OR a CEL expression (`'record.status == …'`
+    // or the `{ dialect, source }` envelope). Without this a CEL `disabled`
+    // silently did nothing (only boolean was honoured).
+    const dRecord: any = ctx?.data;
+    const dEvaluator = new ExpressionEvaluator({
+      ...(dRecord && typeof dRecord === 'object' ? dRecord : {}),
+      record: dRecord,
+      data: dRecord,
+    });
+    const resolveDisabled = (d: any): boolean => {
+      if (d === undefined || d === null) return false;
+      if (typeof d === 'boolean') return d;
+      const src = typeof d === 'string'
+        ? d
+        : (d && typeof d === 'object' && typeof (d as any).source === 'string' ? (d as any).source : undefined);
+      if (!src) return false;
+      try { return !!dEvaluator.evaluateExpression(src); } catch { return false; }
+    };
     const renderButton = (action: any, idx: number) => {
       const label = resolveLabel(action, idx);
       const variant = action.variant || 'default';
       const size = action.size || 'sm';
-      const disabled = typeof action.disabled === 'boolean' ? action.disabled : undefined;
+      const disabled = resolveDisabled(action.disabled);
       const icon = typeof action.icon === 'string' ? action.icon : null;
       return (
         <Button
@@ -852,7 +871,7 @@ const PageHeaderRenderer: React.FC<any> = ({ schema, className, ...props }) => {
             <DropdownMenuContent align="end" className="w-44">
               {overflowActions.map((action, idx) => {
                 const label = resolveLabel(action, idx + INLINE_MAX);
-                const disabled = typeof action.disabled === 'boolean' ? action.disabled : undefined;
+                const disabled = resolveDisabled(action.disabled);
                 const icon = typeof action.icon === 'string' ? action.icon : null;
                 const isDestructive =
                   action.variant === 'destructive' || action.name === 'sys_delete';

packages/plugin-detail/src/renderers/record-quick-actions.tsx

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { useRecordContext, useActionEngine, useMetadataItem } from '@object-ui/react';
+import { useRecordContext, useActionEngine, useMetadataItem, useCondition, toPredicateInput } from '@object-ui/react';
 import { usePermissions } from '@object-ui/permissions';
 import { Button, cn } from '@object-ui/components';
 import { Loader2 } from 'lucide-react';
@@ -110,11 +110,6 @@ export const RecordQuickActionsRenderer: React.FC<RecordQuickActionsRendererProp
   // (see packages/react/src/hooks/useActionEngine.ts) so executeAction
   // automatically picks up confirm/param/modal/result-dialog/toast handlers
   // — no need to thread a separate globalExecute.
-  // Tracks the action currently executing so its button shows a spinner and
-  // disables — a visible progress state for record-header actions (e.g. a
-  // `flow` action opening its wizard, or a slow server action).
-  const [runningName, setRunningName] = React.useState<string | null>(null);
-
   const { getActionsForLocation, executeAction } = useActionEngine({
     actions,
     context: {
@@ -158,40 +153,62 @@ export const RecordQuickActionsRenderer: React.FC<RecordQuickActionsRendererProp
       aria-label={schema.aria?.label || 'Quick actions'}
       {...designer}
     >
-      {visibleActions.map((action, idx) => {
-        const label = action.label || action.name || `Action ${idx + 1}`;
-        const variant = (action as any).variant || schema.variant || 'default';
-        const size = (action as any).size || schema.size || 'sm';
-        const disabled =
-          typeof action.disabled === 'boolean' ? action.disabled : undefined;
-        const isRunning = runningName === (action.name || `qa-${idx}`);
-        return (
-          <Button
-            key={action.name || `qa-${idx}`}
-            variant={variant}
-            size={size}
-            disabled={disabled || isRunning}
-            onClick={async () => {
-              const key = action.name || `qa-${idx}`;
-              setRunningName(key);
-              try {
-                if (typeof action.onClick === 'function') {
-                  await action.onClick();
-                } else if (action.name) {
-                  await executeAction(action.name);
-                }
-              } finally {
-                setRunningName((c) => (c === key ? null : c));
-              }
-            }}
-          >
-            {isRunning && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            {label}
-          </Button>
-        );
-      })}
+      {visibleActions.map((action, idx) => (
+        <QuickActionButton
+          key={action.name || `qa-${idx}`}
+          action={action}
+          record={ctx?.data}
+          variant={(action as any).variant || schema.variant || 'default'}
+          size={(action as any).size || schema.size || 'sm'}
+          label={action.label || action.name || `Action ${idx + 1}`}
+          onRun={async () => {
+            if (typeof action.onClick === 'function') await action.onClick();
+            else if (action.name) await executeAction(action.name);
+          }}
+        />
+      ))}
     </div>
   );
 };
 
+/**
+ * A single quick-action button. Owns its own running/loading state (a spinner +
+ * disable while the action executes — a visible progress state for slow / flow
+ * actions) and evaluates a CEL `disabled` predicate against the record (so an
+ * action can grey out conditionally, not just hide via `visible`).
+ */
+function QuickActionButton({
+  action, record, variant, size, label, onRun,
+}: {
+  action: ActionDef;
+  record: Record<string, unknown> | undefined;
+  variant: any;
+  size: any;
+  label: string;
+  onRun: () => Promise<void> | void;
+}) {
+  const [running, setRunning] = React.useState(false);
+  const recordCtx = React.useMemo(() => ({ record: record || {} }), [record]);
+  // `disabled` may be a boolean or a CEL predicate. Evaluate the predicate form
+  // against the record; useCondition must be called unconditionally (hook).
+  const disabledPred = toPredicateInput((action as any).disabled);
+  const condDisabled = useCondition(typeof disabledPred === 'string' ? disabledPred : undefined, recordCtx);
+  const isDisabled =
+    (typeof disabledPred === 'string' ? condDisabled : disabledPred === true) || running;
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      disabled={isDisabled}
+      onClick={async () => {
+        setRunning(true);
+        try { await onRun(); } finally { setRunning(false); }
+      }}
+    >
+      {running && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      {label}
+    </Button>
+  );
+}
+
 export default RecordQuickActionsRenderer;

packages/plugin-grid/src/components/RowActionMenu.tsx

@@ -91,10 +91,16 @@ const RowActionMenuItem: React.FC<{
   onActionDef?: (def: RowActionDef, row: any) => void;
 }> = ({ def, row, onActionDef }) => {
   const isVisible = useCondition(toPredicateInput(def.visible), row);
+  // `disabled` may be a boolean or a CEL predicate evaluated against the row
+  // (e.g. grey out "Reassign" once a lead is converted) — previously ignored.
+  const disabledPred = toPredicateInput((def as any).disabled);
+  const evalDisabled = useCondition(typeof disabledPred === 'string' ? disabledPred : undefined, row);
+  const isDisabled = typeof disabledPred === 'string' ? evalDisabled : disabledPred === true;
   if (def.visible && !isVisible) return null;
   return (
     <DropdownMenuItem
-      onClick={() => onActionDef?.(def, row)}
+      disabled={isDisabled}
+      onClick={() => { if (!isDisabled) onActionDef?.(def, row); }}
       data-testid={`row-action-${def.name}`}
       className={def.variant === 'danger' ? 'text-destructive focus:text-destructive' : undefined}
     >