feat(studio): no-code condition builder for CEL predicate fields (#1836)

Generalise the Action visible/disabled condition builder to CEL predicate
fields across the studio, so admins build conditions visually instead of
hand-writing CEL:

- ConditionBuilder: accept a pre-fetched field catalog + make the label
  optional (so it can be embedded in the generic form).
- widgets: 'condition' widget wrapping ConditionBuilder (fields from the
  widget context) + registry entry.
- SchemaForm: auto-detect CEL fields by name convention (visible / hidden /
  disabled / visibleOn / condition / *When) so generic forms get the builder.
- PageBlockInspector: page block 'Hidden (CEL)' now uses the builder.

Verified live: a page block's Hidden field renders the no-code builder
(Add condition / Expression toggle). 274 metadata-admin tests pass.

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

Author: 3 people

packages/app-shell/src/views/metadata-admin/SchemaForm.tsx

@@ -311,6 +311,22 @@ function detectColorWidget(name: string, schema: JsonSchema | undefined): string
   return undefined;
 }
 
+const CONDITION_FIELD_NAMES = new Set(['visible', 'hidden', 'disabled', 'visibleOn', 'condition', 'predicate']);
+/**
+ * Detect a CEL predicate field by NAME CONVENTION (`visible` / `hidden` /
+ * `disabled` / `visibleOn` / `condition` / `*When`) so it renders the no-code
+ * condition builder instead of a raw expression text box. String-only, no enum.
+ */
+function detectConditionWidget(name: string, schema: JsonSchema | undefined): string | undefined {
+  if (Array.isArray(schema?.enum)) return undefined;
+  const isString =
+    schema?.type === 'string' ||
+    (Array.isArray(schema?.anyOf) && (schema!.anyOf as JsonSchema[]).some((b) => b?.type === 'string'));
+  if (!isString) return undefined;
+  if (CONDITION_FIELD_NAMES.has(name) || /When$/.test(name)) return 'condition';
+  return undefined;
+}
+
 /* -------------------------------------------------------------------------- */
 /* FormView spec (subset)                                                     */
 /* -------------------------------------------------------------------------- */
@@ -777,6 +793,10 @@ function FieldRow({
       else {
         const colorWidget = detectColorWidget(name, schema);
         if (colorWidget) widget = colorWidget;
+        else {
+          const condWidget = detectConditionWidget(name, schema);
+          if (condWidget) widget = condWidget;
+        }
       }
     }
   }

packages/app-shell/src/views/metadata-admin/inspectors/ConditionBuilder.tsx

@@ -107,14 +107,18 @@ function initFrom(value: string): { rows: Row[]; join: '&&' | '||'; raw: boolean
   return { rows: [], join: '&&', raw: !!value };
 }
 
-export function ConditionBuilder({ label, value, onCommit, objectName, disabled }: {
-  label: string;
+export function ConditionBuilder({ label, value, onCommit, objectName, fields: fieldsProp, disabled }: {
+  label?: string;
   value: string;
   onCommit: (cel: string) => void;
   objectName?: string;
+  /** Pre-fetched field catalog (e.g. from the generic form's widget context);
+   *  when omitted, fields are loaded from `objectName`. */
+  fields?: Array<{ name: string; label?: string; hidden?: boolean }>;
   disabled?: boolean;
 }) {
-  const { fields } = useObjectFields(objectName);
+  const { fields: hookFields } = useObjectFields(objectName);
+  const fields = fieldsProp ?? hookFields;
   const subjectOptions = React.useMemo(() => {
     const fieldOpts = fields
       .filter((f) => !f.hidden)
@@ -157,7 +161,7 @@ export function ConditionBuilder({ label, value, onCommit, objectName, disabled
     return (
       <div className="space-y-1">
         <div className="flex items-center justify-between">
-          <Label className="text-xs text-muted-foreground">{label}</Label>
+          {label ? <Label className="text-xs text-muted-foreground">{label}</Label> : <span />}
           <button type="button" disabled={disabled}
             onClick={() => { const n = initFrom(value); if (!value || !n.raw) { setRowsState(n.rows); setJoin(n.join); setRaw(false); } }}
             className="inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground disabled:opacity-50">
@@ -183,7 +187,7 @@ export function ConditionBuilder({ label, value, onCommit, objectName, disabled
   return (
     <div className="space-y-1.5">
       <div className="flex items-center justify-between">
-        <Label className="text-xs text-muted-foreground">{label}</Label>
+        {label ? <Label className="text-xs text-muted-foreground">{label}</Label> : <span />}
         <button type="button" disabled={disabled} onClick={() => setRaw(true)}
           className="inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground disabled:opacity-50">
           <Code2 className="h-3 w-3" /> Expression

packages/app-shell/src/views/metadata-admin/inspectors/PageBlockInspector.tsx

@@ -27,6 +27,7 @@ import {
 } from './_shared';
 import { BLOCK_CONFIG, blockHasConfig, type BlockPropField } from '../previews/block-config';
 import { ColorVariantPicker } from '../color-variant-field';
+import { ConditionBuilder } from './ConditionBuilder';
 import { useObjectOptions } from '../previews/useObjectOptions';
 import { useObjectFields } from '../previews/useObjectFields';
 import {
@@ -536,7 +537,13 @@ export function PageBlockInspector({ selection, draft, onPatch, onClearSelection
       <InspectorTextField label={t('engine.inspector.pageBlock.type', locale)} value={block.type ?? ''} onCommit={(v) => patch({ type: v })} disabled={readOnly} mono />
       <InspectorTextField label={t('engine.inspector.pageBlock.id', locale)} value={block.id ?? ''} onCommit={(v) => patch({ id: v })} disabled={readOnly} mono />
       <InspectorTextField label={t('engine.inspector.pageBlock.className', locale)} value={block.className ?? ''} onCommit={(v) => patch({ className: v })} disabled={readOnly} mono />
-      <InspectorTextField label={t('engine.inspector.pageBlock.hidden', locale)} value={block.hidden ?? ''} onCommit={(v) => patch({ hidden: v })} disabled={readOnly} mono />
+      <ConditionBuilder
+        label={t('engine.inspector.pageBlock.hidden', locale)}
+        value={block.hidden ?? ''}
+        onCommit={(v) => patch({ hidden: v || undefined })}
+        objectName={pageObject}
+        disabled={readOnly}
+      />
 
       {blockHasConfig(block.type) && (
         <div className="space-y-3 border-t border-border pt-3">

packages/app-shell/src/views/metadata-admin/widgets.tsx

@@ -46,6 +46,7 @@ import { ChevronDown, ChevronsUpDown, ChevronUp, Plus, Search, Trash2 } from 'lu
 import { iconNames } from 'lucide-react/dynamic.mjs';
 import { detectLocale, t, tFormat } from './i18n';
 import { ColorVariantPicker } from './color-variant-field';
+import { ConditionBuilder } from './inspectors/ConditionBuilder';
 
 export interface WidgetContext {
   /** Names of all object metadata records (for `ref:object`). */
@@ -1646,6 +1647,21 @@ function ColorPickerWidget({ value, onChange, readOnly, schema, fieldSpec }: Wid
   );
 }
 
+/* -------------------------------------------------------------------------- */
+/* condition — no-code CEL predicate builder (visible / hidden / disabled / …) */
+/* -------------------------------------------------------------------------- */
+
+function ConditionWidget({ value, onChange, readOnly, context }: WidgetProps) {
+  return (
+    <ConditionBuilder
+      value={value == null ? '' : String(value)}
+      onCommit={(cel) => onChange(cel || undefined)}
+      fields={context?.objectFields}
+      disabled={readOnly}
+    />
+  );
+}
+
 export const WIDGETS: Record<string, WidgetRenderer> = {
   'ref:object': RefObjectWidget,
   'filter-mode': FilterModeWidget,
@@ -1658,6 +1674,7 @@ export const WIDGETS: Record<string, WidgetRenderer> = {
   'view-ref': ViewRefWidget,
   'icon': IconPickerWidget,
   'color-picker': ColorPickerWidget,
+  'condition': ConditionWidget,
   'master-detail': MasterDetailWidget,
   'string-tags': StringTagsWidget,
   'multiselect': MultiSelectWidget,