fix: address code review feedback — null check, typed actionType, validation errors, input types

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

ROADMAP.md

@@ -1398,6 +1398,31 @@ All 313 `@object-ui/fields` tests pass.
 
 ---
 
+### RecordDetailView — Action Button Full-Chain Integration (March 2026)
+
+> **Issue #107:** All Action buttons on record detail pages (Change Stage, Mark as Won, etc.) clicked with zero response — no dialogs, no API calls, no toast, no data refresh.
+
+**Root Causes (6 independent bugs):**
+
+1. **Missing `ActionProvider`** — `RecordDetailView` didn't wrap `DetailView` with `ActionProvider`, so `useAction()` fell back to an empty `ActionRunner` with no handlers.
+2. **Action type overwritten** — `action:bar` component overrode `action.type` (`'api'`) with the component type (`'action:button'`), so `ActionRunner` never matched the registered `'api'` handler.
+3. **No API handler** — `api` action targets were logical names (e.g., `'opportunity_change_stage'`), not HTTP URLs. The built-in `executeAPI()` tried `fetch('opportunity_change_stage')` which failed silently.
+4. **No param collection** — `ActionParam[]` was passed as `params` (values) instead of `actionParams` (definitions to collect), so the param collection dialog was never triggered.
+5. **No confirm/toast handlers** — `confirmText` fell back to `window.confirm`, success/error messages were silently dropped.
+6. **No visibility context** — `useCondition` evaluated `visible` expressions like `"stage !== 'closed_won'"` with empty context, always returning `true`.
+
+**Fix:**
+
+- **RecordDetailView** (`apps/console/src/components/RecordDetailView.tsx`): Wrapped `DetailView` with `<ActionProvider>` providing `onConfirm`, `onToast`, `onNavigate`, `onParamCollection` handlers and a custom `api` handler that maps logical action targets to `dataSource.update()` operations.
+- **action-bar** (`packages/components/src/renderers/action/action-bar.tsx`): Preserves original `action.type` as `actionType` when overriding with component type. Forwards `data` prop to child action renderers for visibility context.
+- **action-button** (`packages/components/src/renderers/action/action-button.tsx`): Uses `actionType` for execution. Detects `ActionParam[]` arrays and passes as `actionParams`. Passes record `data` to `useCondition` for visibility expressions.
+- **ActionConfirmDialog** (`apps/console/src/components/ActionConfirmDialog.tsx`): Promise-based confirmation dialog using Shadcn `AlertDialog`.
+- **ActionParamDialog** (`apps/console/src/components/ActionParamDialog.tsx`): Dynamic form dialog for collecting action parameters (select, text, textarea) using Shadcn `Dialog`.
+
+**Tests:** 6 new integration tests covering: action button rendering, confirm dialog show/accept/cancel, param collection dialog, toast notification, dataSource.update invocation. All 764 console tests pass.
+
+---
+
 ## ⚠️ Risk Management
 
 | Risk | Mitigation |

apps/console/src/components/ActionParamDialog.tsx

@@ -43,6 +43,7 @@ interface ActionParamDialogProps {
 
 export function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProps) {
   const [values, setValues] = useState<Record<string, any>>({});
+  const [errors, setErrors] = useState<Record<string, boolean>>({});
 
   // Reset values when params change
   useEffect(() => {
@@ -54,16 +55,22 @@ export function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProp
         }
       }
       setValues(defaults);
+      setErrors({});
     }
   }, [state.open, state.params]);
 
   const handleSubmit = () => {
     // Validate required fields
+    const newErrors: Record<string, boolean> = {};
     for (const param of state.params) {
       if (param.required && !values[param.name]) {
-        return; // Don't submit if required fields are empty
+        newErrors[param.name] = true;
       }
     }
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
     state.resolve?.(values);
     onOpenChange(false);
   };
@@ -75,6 +82,7 @@ export function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProp
 
   const updateValue = (name: string, value: any) => {
     setValues(prev => ({ ...prev, [name]: value }));
+    setErrors(prev => ({ ...prev, [name]: false }));
   };
 
   return (
@@ -102,7 +110,7 @@ export function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProp
                   value={values[param.name] || ''}
                   onValueChange={(val) => updateValue(param.name, val)}
                 >
-                  <SelectTrigger id={param.name}>
+                  <SelectTrigger id={param.name} className={errors[param.name] ? 'border-destructive' : ''}>
                     <SelectValue placeholder={param.placeholder || `Select ${param.label}`} />
                   </SelectTrigger>
                   <SelectContent>
@@ -119,17 +127,22 @@ export function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProp
                   value={values[param.name] || ''}
                   onChange={(e) => updateValue(param.name, e.target.value)}
                   placeholder={param.placeholder}
+                  className={errors[param.name] ? 'border-destructive' : ''}
                 />
               ) : (
                 <Input
                   id={param.name}
-                  type={param.type === 'number' ? 'number' : 'text'}
+                  type={(['number', 'email', 'url', 'date', 'datetime-local', 'time', 'password'] as string[]).includes(param.type) ? param.type : 'text'}
                   value={values[param.name] || ''}
                   onChange={(e) => updateValue(param.name, e.target.value)}
                   placeholder={param.placeholder}
+                  className={errors[param.name] ? 'border-destructive' : ''}
                 />
               )}
 
+              {errors[param.name] && (
+                <p className="text-xs text-destructive">{param.label} is required</p>
+              )}
               {param.helpText && (
                 <p className="text-xs text-muted-foreground">{param.helpText}</p>
               )}

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

@@ -28,7 +28,7 @@ import { Loader2 } from 'lucide-react';
 import { resolveIcon } from './resolve-icon';
 
 export interface ActionButtonProps {
-  schema: ActionSchema & { type: string; className?: string };
+  schema: ActionSchema & { type: string; className?: string; actionType?: string };
   className?: string;
   /** Override context for this specific action */
   context?: Record<string, any>;
@@ -48,7 +48,7 @@ const ActionButtonRenderer = forwardRef<HTMLButtonElement, ActionButtonProps>(
     const [loading, setLoading] = useState(false);
 
     // Record data may be passed from SchemaRenderer (e.g. DetailView passes record data)
-    const recordData = rest.data && typeof rest.data === 'object' ? rest.data as Record<string, any> : {};
+    const recordData = rest.data != null && typeof rest.data === 'object' ? rest.data as Record<string, any> : {};
 
     // Evaluate visibility and enabled conditions with record data context
     const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined, recordData);
@@ -72,7 +72,7 @@ const ActionButtonRenderer = forwardRef<HTMLButtonElement, ActionButtonProps>(
           typeof schema.params[0] === 'object' && 'name' in schema.params[0] && 'type' in schema.params[0];
 
         await execute({
-          type: (schema as any).actionType || schema.type,
+          type: schema.actionType || schema.type,
           name: schema.name,
           target: schema.target,
           execute: schema.execute,