4768 client - Add explicit clear button for TIME property inputs

Chrome's <input type="time"> does not provide a native clear button,
so users had no way to clear a Time field. Expose an explicit X via the
existing trailingAction slot that reuses the debounced save path so the
empty -> null coercion already in useProperty stays the single source of
truth.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ivicac

client/src/pages/platform/workflow-editor/components/properties/Property.tsx

@@ -31,7 +31,7 @@ import {
 import {ArrayPropertyType, PropertyAllType, SelectOptionType} from '@/shared/types';
 import {TooltipPortal} from '@radix-ui/react-tooltip';
 import {UseQueryResult} from '@tanstack/react-query';
-import {CircleQuestionMarkIcon, SquareFunctionIcon} from 'lucide-react';
+import {CircleQuestionMarkIcon, SquareFunctionIcon, XIcon} from 'lucide-react';
 import {ReactNode} from 'react';
 import {Control, Controller, FieldValues, FormState} from 'react-hook-form';
 import {twMerge} from 'tailwind-merge';
@@ -101,6 +101,7 @@ const Property = ({
         handleFromAiClick,
         handleFromAiToggle,
         handleInputChange,
+        handleInputClear,
         handleInputTypeSwitchButtonClick,
         handleJsonSchemaBuilderChange,
         handleMentionInputValueChange,
@@ -763,6 +764,19 @@ const Property = ({
                             required={required}
                             showInputTypeSwitchButton={showInputTypeSwitchButton}
                             title={type}
+                            trailingAction={
+                                // Chrome's <input type="time"> has no native clear button.
+                                controlType === 'TIME' && inputValue ? (
+                                    <button
+                                        aria-label="Clear time"
+                                        className="flex items-center px-2 text-muted-foreground hover:text-foreground"
+                                        onClick={handleInputClear}
+                                        type="button"
+                                    >
+                                        <XIcon className="size-4" />
+                                    </button>
+                                ) : undefined
+                            }
                             type={hidden ? 'hidden' : getInputHTMLType(controlType)}
                             value={inputValue}
                         />

client/src/pages/platform/workflow-editor/components/properties/components/property-input/PropertyInput.test.tsx

@@ -102,6 +102,29 @@ describe('PropertyInput', async () => {
         expect(screen.getByTestId('trailing-action')).toBeInTheDocument();
     });
 
+    it('invokes trailingAction click handler (covers the TIME clear button pattern from #4768)', async () => {
+        const handleClear = vi.fn();
+
+        render(
+            <PropertyInput
+                aria-label="Time"
+                label="Time"
+                name="time"
+                trailingAction={
+                    <button aria-label="Clear time" onClick={handleClear} type="button">
+                        X
+                    </button>
+                }
+                type="time"
+                value="12:30"
+            />
+        );
+
+        await userEvent.click(screen.getByRole('button', {name: /clear time/i}));
+
+        expect(handleClear).toHaveBeenCalledTimes(1);
+    });
+
     it('strips leading = from display value on input change when expressionPrefix is true', async () => {
         const handleChange = vi.fn();
 

client/src/pages/platform/workflow-editor/components/properties/hooks/tests/timeFieldClear.test.ts

@@ -0,0 +1,95 @@
+import {describe, expect, it, vi} from 'vitest';
+
+/**
+ * Exercises the TIME-clearing flow introduced for issue #4768.
+ *
+ * Why: Chrome's <input type="time"> does not expose a native clear button,
+ * so the UI must render an explicit X. This test locks in three things:
+ *   1. The TIME clear button is shown only when inputValue is non-empty.
+ *   2. Invoking handleInputClear resets local state and triggers the save.
+ *   3. The saved value for an empty TIME input is null (not '').
+ */
+
+type ClearStateType = {
+    controlType?: string;
+    hasError: boolean;
+    inputValue: string;
+    latestValue: string;
+};
+
+const shouldShowTimeClearButton = (controlType: string | undefined, inputValue: string): boolean =>
+    controlType === 'TIME' && Boolean(inputValue);
+
+const makeHandleInputClear = (state: ClearStateType, saveInputValue: () => void) => () => {
+    state.inputValue = '';
+    state.hasError = false;
+    state.latestValue = '';
+
+    saveInputValue();
+};
+
+const resolveSaveValue = (controlType: string | undefined, valueToSave: string): unknown => {
+    const isDateOrTimeControlType = controlType === 'DATE' || controlType === 'DATE_TIME' || controlType === 'TIME';
+
+    if (valueToSave === '' && isDateOrTimeControlType) {
+        return null;
+    }
+
+    return valueToSave;
+};
+
+describe('TIME field clear affordance', () => {
+    it('shows the clear button only when a TIME input has a value', () => {
+        expect(shouldShowTimeClearButton('TIME', '12:30')).toBe(true);
+        expect(shouldShowTimeClearButton('TIME', '')).toBe(false);
+    });
+
+    it('does not show the clear button for DATE or DATE_TIME (they have native clear)', () => {
+        expect(shouldShowTimeClearButton('DATE', '2026-04-23')).toBe(false);
+        expect(shouldShowTimeClearButton('DATE_TIME', '2026-04-23T12:30')).toBe(false);
+    });
+
+    it('does not show the clear button for unrelated control types', () => {
+        expect(shouldShowTimeClearButton('TEXT', 'hello')).toBe(false);
+        expect(shouldShowTimeClearButton(undefined, '12:30')).toBe(false);
+    });
+});
+
+describe('handleInputClear', () => {
+    it('resets inputValue, clears error state, and triggers the debounced save', () => {
+        const state: ClearStateType = {
+            controlType: 'TIME',
+            hasError: true,
+            inputValue: '12:30',
+            latestValue: '12:30',
+        };
+        const saveInputValue = vi.fn();
+
+        const handleInputClear = makeHandleInputClear(state, saveInputValue);
+
+        handleInputClear();
+
+        expect(state.inputValue).toBe('');
+        expect(state.hasError).toBe(false);
+        expect(state.latestValue).toBe('');
+        expect(saveInputValue).toHaveBeenCalledTimes(1);
+    });
+
+    it('persists null (not empty string) when clearing a TIME field', () => {
+        const state: ClearStateType = {
+            controlType: 'TIME',
+            hasError: false,
+            inputValue: '09:45',
+            latestValue: '09:45',
+        };
+        const saveSpy = vi.fn();
+
+        const handleInputClear = makeHandleInputClear(state, () => {
+            saveSpy(resolveSaveValue(state.controlType, state.latestValue));
+        });
+
+        handleInputClear();
+
+        expect(saveSpy).toHaveBeenCalledWith(null);
+    });
+});

client/src/pages/platform/workflow-editor/components/properties/hooks/useProperty.ts

@@ -122,6 +122,7 @@ type UsePropertyReturnType = {
     handleFromAiClick: ((fromAi: boolean) => void) | undefined;
     handleFromAiToggle: (fromAi: boolean, fieldOnChange: (value: string) => void) => void;
     handleInputChange: (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => void;
+    handleInputClear: () => void;
     handleInputTypeSwitchButtonClick: () => void;
     handleJsonSchemaBuilderChange: (value?: SchemaRecordType) => void;
     handleMentionInputValueChange: (value: string | number) => void;
@@ -601,6 +602,18 @@ export const useProperty = ({
         });
     }, 600);
 
+    const handleInputClear = useCallback(() => {
+        setInputValue('');
+        setHasError(false);
+        setErrorMessage('');
+
+        latestValueRef.current = '';
+
+        saveInputValue();
+
+        inputRef.current?.focus();
+    }, [saveInputValue]);
+
     const handleCodeEditorChange = useDebouncedCallback((value?: string) => {
         if (
             !currentComponent ||
@@ -1770,6 +1783,7 @@ export const useProperty = ({
         handleFromAiClick: hideFromAi ? undefined : handleFromAiClick,
         handleFromAiToggle,
         handleInputChange,
+        handleInputClear,
         handleInputTypeSwitchButtonClick,
         handleJsonSchemaBuilderChange,
         handleMentionInputValueChange,