From 62e5a7015fe63b54ea39b0c566546a14bd891dba Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 8 Jul 2026 13:10:55 +0000
Subject: [PATCH 1/2] feat(app-shell): metadata-driven
 Validations/Hooks/Actions config panels in Studio Data tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The object Validations, Hooks and Actions sub-tabs of the Studio Data pillar
are now no-code config panels driven by the corresponding metadata, each able
to create new entries:

- Validations: author every spec rule type — not just `script` but also
  `cross_field`, `state_machine`, `format`, `json_schema` and `conditional`
  (previously read-only "maintain in code"). The New menu adds any type
  seeded with a valid never-firing skeleton, and a rule's type is switchable
  in place (replacing stale type-specific keys). CEL predicates reuse the
  shared ConditionBuilder fed the object's draft fields.
- Hooks: feed the live `hook` JSONSchema from /meta/types to SchemaForm
  instead of synthesising a form from the value shape.
- Actions: pass the live `action` JSONSchema to ActionDefaultInspector as
  serverSchema so its "More fields" section can edit any uncurated property.

DataPillar resolves the per-type schemas once (useMetadataTypes) and passes
them down. Updates the Validations panel tests and console guide docs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LnU2XsAYisR96vUMCqfWVm
---
 ...config-panels-validations-hooks-actions.md |  13 +
 content/docs/guide/console.md                 |  18 +
 .../src/views/metadata-admin/i18n.ts          |  60 ++
 .../studio-design/ObjectActionsPanel.tsx      |   9 +
 .../views/studio-design/ObjectHooksPanel.tsx  |   9 +-
 .../ObjectValidationsPanel.test.tsx           |  53 +-
 .../studio-design/ObjectValidationsPanel.tsx  | 582 +++++++++++++++---
 .../studio-design/StudioDesignSurface.tsx     |  25 +-
 8 files changed, 686 insertions(+), 83 deletions(-)
 create mode 100644 .changeset/object-config-panels-validations-hooks-actions.md

diff --git a/.changeset/object-config-panels-validations-hooks-actions.md b/.changeset/object-config-panels-validations-hooks-actions.md
new file mode 100644
index 000000000..75a288f3d
--- /dev/null
+++ b/.changeset/object-config-panels-validations-hooks-actions.md
@@ -0,0 +1,13 @@
+---
+'@object-ui/app-shell': minor
+---
+
+Studio Data tab: metadata-driven config panels for Validations, Hooks and Actions (with add).
+
+The object **Validations**, **Hooks** and **Actions** sub-tabs are now no-code config panels driven by the corresponding metadata, each able to **create** new entries:
+
+- **Validations** — the panel covers every spec rule type, not just `script`: `cross_field`, `state_machine`, `format`, `json_schema` and `conditional` are all authorable (previously they were read-only "maintain in code"). The **New** menu adds any type seeded with a valid, never-firing skeleton, and a rule's type can be switched in place; CEL predicates reuse the shared `ConditionBuilder`.
+- **Hooks** — the `SchemaForm` is now fed the live `hook` JSONSchema from `/meta/types` instead of synthesising a form from the value shape, so its fields and enums match the running server's contract.
+- **Actions** — the `ActionDefaultInspector` now receives the live `action` JSONSchema as `serverSchema`, so its "More fields" section can edit any spec property not curated above (nothing is un-editable).
+
+`DataPillar` resolves the per-type schemas once (via `useMetadataTypes`) and passes them down.
diff --git a/content/docs/guide/console.md b/content/docs/guide/console.md
index dd11505f1..97924d7e9 100644
--- a/content/docs/guide/console.md
+++ b/content/docs/guide/console.md
@@ -33,6 +33,24 @@ The console opens at **http://localhost:5175** with MSW (Mock Service Worker) pr
 | **App Creation Wizard** | 4-step wizard (Basic Info → Objects → Navigation → Branding) to create or edit apps. |
 | **Error Boundary** | Graceful error handling with a retry button. |
 
+### Object design (Studio Data tab)
+
+Selecting an object in Studio's **Data** pillar (`/studio/:packageId/data`) opens a
+tab strip over that object — **Records · Form · Validations · Hooks · Actions ·
+API · Settings**. Each of Validations, Hooks and Actions is a no-code **config
+panel driven by the corresponding metadata**, and each supports **adding** new
+entries — no code round-trip required:
+
+| Tab | Edits | Panel |
+|-----|-------|-------|
+| **Validations** | the object's inline `validations[]` (spec `ValidationRuleSchema`) | Master-detail covering **every** rule type — `script`, `cross_field`, `state_machine`, `format`, `json_schema`, `conditional`. The **New** menu adds any type (seeded with a valid, never-firing skeleton); a rule's type can be switched in place. CEL predicates reuse the shared `ConditionBuilder`, fed the object's draft fields. |
+| **Hooks** | the separate `hook` metadata type targeting this object | Master-detail whose editor is the platform `SchemaForm` **driven by the live `hook` JSONSchema from `/meta/types`**, so its fields and enums always match the running server's contract. |
+| **Actions** | the object's inline `actions[]` (spec `ActionSchema`) | Master-detail using the type-aware `ActionDefaultInspector`; anything not curated falls through to a **"More fields"** form fed the live `action` JSONSchema, so no spec property is un-editable. |
+
+Validations and Actions persist with the object's own **Save draft**; Hooks (a
+distinct metadata type) save per-hook. Nothing goes live until the package is
+published from the top-bar **Publish** flow.
+
 ## Configuration
 
 The console reads its configuration from `objectstack.config.ts`:
diff --git a/packages/app-shell/src/views/metadata-admin/i18n.ts b/packages/app-shell/src/views/metadata-admin/i18n.ts
index bb2c9fcf1..8283417d9 100644
--- a/packages/app-shell/src/views/metadata-admin/i18n.ts
+++ b/packages/app-shell/src/views/metadata-admin/i18n.ts
@@ -984,6 +984,36 @@ const ENGINE_STRINGS_EN: Record<string, string> = {
   'engine.studio.rules.severityError': 'error (rejects the save)',
   'engine.studio.rules.enabled': 'Enabled',
   'engine.studio.rules.delete': 'Delete',
+  'engine.studio.rules.type': 'Type',
+  'engine.studio.rules.newType': 'New validation type',
+  'engine.studio.rules.typeScript': 'Script — CEL fail condition',
+  'engine.studio.rules.typeCrossField': 'Cross-field — CEL over multiple fields',
+  'engine.studio.rules.typeStateMachine': 'State machine — allowed transitions',
+  'engine.studio.rules.typeFormat': 'Format — regex / built-in format',
+  'engine.studio.rules.typeJsonSchema': 'JSON schema — validate a JSON field',
+  'engine.studio.rules.typeConditional': 'Conditional — apply a rule when a guard holds',
+  'engine.studio.rules.label': 'Label (optional)',
+  'engine.studio.rules.field': 'Field',
+  'engine.studio.rules.statusField': 'Status field',
+  'engine.studio.rules.fields': 'Participating fields',
+  'engine.studio.rules.noFields': 'This object has no fields yet.',
+  'engine.studio.rules.pickField': '— pick a field —',
+  'engine.studio.rules.format': 'Built-in format',
+  'engine.studio.rules.formatNone': '— none —',
+  'engine.studio.rules.regex': 'Regex pattern',
+  'engine.studio.rules.transitions': 'Allowed transitions (from → next states)',
+  'engine.studio.rules.transitionFrom': 'From state',
+  'engine.studio.rules.transitionTo': 'Next states (comma-separated)',
+  'engine.studio.rules.addTransition': 'Add transition',
+  'engine.studio.rules.jsonSchema': 'JSON Schema',
+  'engine.studio.rules.invalidJson': 'Invalid JSON',
+  'engine.studio.rules.then': 'Then — rule applied when the condition holds (JSON)',
+  'engine.studio.rules.otherwise': 'Otherwise — rule applied when it does not (JSON, optional)',
+  'engine.studio.rules.events': 'Runs on',
+  'engine.studio.rules.event.insert': 'Create',
+  'engine.studio.rules.event.update': 'Update',
+  'engine.studio.rules.event.delete': 'Delete',
+  'engine.studio.rules.priority': 'Priority',
   'engine.studio.settings.basics': 'Basics',
   'engine.studio.settings.noInspector': 'No default object inspector registered.',
   'engine.studio.settings.semanticRoles': 'Semantic roles',
@@ -1988,6 +2018,36 @@ const ENGINE_STRINGS_ZH: Record<string, string> = {
   'engine.studio.rules.severityError': 'error(拒绝保存)',
   'engine.studio.rules.enabled': '启用',
   'engine.studio.rules.delete': '删除',
+  'engine.studio.rules.type': '类型',
+  'engine.studio.rules.newType': '新建验证类型',
+  'engine.studio.rules.typeScript': 'Script —— CEL 失败条件',
+  'engine.studio.rules.typeCrossField': 'Cross-field —— 跨字段 CEL',
+  'engine.studio.rules.typeStateMachine': 'State machine —— 允许的状态流转',
+  'engine.studio.rules.typeFormat': 'Format —— 正则 / 内置格式',
+  'engine.studio.rules.typeJsonSchema': 'JSON schema —— 校验 JSON 字段',
+  'engine.studio.rules.typeConditional': 'Conditional —— 条件成立时应用规则',
+  'engine.studio.rules.label': '标签（可选）',
+  'engine.studio.rules.field': '字段',
+  'engine.studio.rules.statusField': '状态字段',
+  'engine.studio.rules.fields': '参与字段',
+  'engine.studio.rules.noFields': '该对象暂无字段。',
+  'engine.studio.rules.pickField': '—— 选择字段 ——',
+  'engine.studio.rules.format': '内置格式',
+  'engine.studio.rules.formatNone': '—— 无 ——',
+  'engine.studio.rules.regex': '正则表达式',
+  'engine.studio.rules.transitions': '允许的状态流转（从 → 下一状态）',
+  'engine.studio.rules.transitionFrom': '起始状态',
+  'engine.studio.rules.transitionTo': '下一状态（逗号分隔）',
+  'engine.studio.rules.addTransition': '新增流转',
+  'engine.studio.rules.jsonSchema': 'JSON Schema',
+  'engine.studio.rules.invalidJson': 'JSON 格式无效',
+  'engine.studio.rules.then': 'Then —— 条件成立时应用的规则（JSON）',
+  'engine.studio.rules.otherwise': 'Otherwise —— 条件不成立时应用的规则（JSON，可选）',
+  'engine.studio.rules.events': '触发时机',
+  'engine.studio.rules.event.insert': '新建',
+  'engine.studio.rules.event.update': '更新',
+  'engine.studio.rules.event.delete': '删除',
+  'engine.studio.rules.priority': '优先级',
   'engine.studio.settings.basics': '基础信息',
   'engine.studio.settings.noInspector': '未注册对象默认检查器。',
   'engine.studio.settings.semanticRoles': '语义角色',
diff --git a/packages/app-shell/src/views/studio-design/ObjectActionsPanel.tsx b/packages/app-shell/src/views/studio-design/ObjectActionsPanel.tsx
index a57f30f83..4bdaba40f 100644
--- a/packages/app-shell/src/views/studio-design/ObjectActionsPanel.tsx
+++ b/packages/app-shell/src/views/studio-design/ObjectActionsPanel.tsx
@@ -69,10 +69,18 @@ export function ObjectActionsPanel({
   draft,
   onPatch,
   disabled,
+  actionSchema,
 }: {
   draft: Record<string, unknown>;
   onPatch: (patch: Record<string, unknown>) => void;
   disabled?: boolean;
+  /**
+   * The live server JSONSchema for the `action` type (`/meta/types`). Handed to
+   * ActionDefaultInspector as `serverSchema` so its "More fields" section can
+   * edit any spec property not curated above — keeping this a faithful,
+   * forward-compatible config panel for the action metadata.
+   */
+  actionSchema?: Record<string, unknown>;
 }) {
   const locale = useMetadataLocale();
   const actions = React.useMemo(() => readActions(draft.actions), [draft.actions]);
@@ -203,6 +211,7 @@ export function ObjectActionsPanel({
               onPatch={patchSelected}
               readOnly={!!disabled}
               locale={locale}
+              serverSchema={actionSchema}
             />
           </>
         ) : (
diff --git a/packages/app-shell/src/views/studio-design/ObjectHooksPanel.tsx b/packages/app-shell/src/views/studio-design/ObjectHooksPanel.tsx
index 22f4a7f83..b8c6cda6a 100644
--- a/packages/app-shell/src/views/studio-design/ObjectHooksPanel.tsx
+++ b/packages/app-shell/src/views/studio-design/ObjectHooksPanel.tsx
@@ -68,10 +68,17 @@ export function ObjectHooksPanel({
   objectName,
   packageId,
   disabled,
+  hookSchema,
 }: {
   objectName: string;
   packageId: string;
   disabled?: boolean;
+  /**
+   * The live server JSONSchema for the `hook` type (`/meta/types`). Drives the
+   * SchemaForm so the fields, enums and grouping come from the real hook
+   * metadata contract rather than being synthesised from the value shape.
+   */
+  hookSchema?: Record<string, unknown>;
 }) {
   const locale = useMetadataLocale();
   const client = useMetadataClient();
@@ -249,7 +256,7 @@ export function ObjectHooksPanel({
             </div>
             <div className="min-h-0 flex-1 overflow-auto p-3">
               <SchemaForm
-                schema={undefined}
+                schema={hookSchema}
                 value={draft as Record<string, unknown>}
                 onChange={(next) => {
                   setDraft(next as HookItem);
diff --git a/packages/app-shell/src/views/studio-design/ObjectValidationsPanel.test.tsx b/packages/app-shell/src/views/studio-design/ObjectValidationsPanel.test.tsx
index 1d81607e2..637cab4df 100644
--- a/packages/app-shell/src/views/studio-design/ObjectValidationsPanel.test.tsx
+++ b/packages/app-shell/src/views/studio-design/ObjectValidationsPanel.test.tsx
@@ -14,6 +14,7 @@ const draft = {
   fields: {
     name: { type: 'text', label: '名称' },
     amount: { type: 'number', label: '金额' },
+    status: { type: 'select', label: '状态' },
   },
   validations: [
     { type: 'script', name: 'no_negative', message: '金额不能为负', condition: 'record.amount < 0', severity: 'error' },
@@ -29,17 +30,20 @@ describe('ObjectValidationsPanel', () => {
     expect(screen.getByDisplayValue('金额不能为负')).toBeTruthy();
   });
 
-  it('lists every rule with its type badge (non-script rules stay visible)', () => {
+  it('lists every rule with its type badge', () => {
     render(<ObjectValidationsPanel draft={draft} onPatch={() => {}} />);
     expect(screen.getByText('no_negative')).toBeTruthy();
     expect(screen.getByText('status_flow')).toBeTruthy();
     expect(screen.getByText('state_machine')).toBeTruthy();
   });
 
-  it('adds a script rule with a VALID never-failing default condition', () => {
+  it('adds a script rule with a VALID never-failing default condition from the New menu', () => {
     const onPatch = vi.fn();
     render(<ObjectValidationsPanel draft={draft} onPatch={onPatch} />);
     fireEvent.click(screen.getByText('New'));
+    // Target the menu <button> (the Type <select> has an <option> of the same
+    // text — a native option is role "option", not "button").
+    fireEvent.click(screen.getByRole('button', { name: 'Script — CEL fail condition' }));
     const patch = onPatch.mock.calls[0][0];
     const added = patch.validations[patch.validations.length - 1];
     // An empty condition 422s the whole draft save (spec ExpressionInputSchema)
@@ -48,6 +52,18 @@ describe('ObjectValidationsPanel', () => {
     expect(patch.validations).toHaveLength(3);
   });
 
+  it('adds a non-script rule type from the New menu with a valid skeleton', () => {
+    const onPatch = vi.fn();
+    render(<ObjectValidationsPanel draft={draft} onPatch={onPatch} />);
+    fireEvent.click(screen.getByText('New'));
+    fireEvent.click(screen.getByRole('button', { name: 'State machine — allowed transitions' }));
+    const patch = onPatch.mock.calls[0][0];
+    const added = patch.validations[patch.validations.length - 1];
+    // Seeded valid: a required `field` (first field) + an (empty) transitions map.
+    expect(added).toMatchObject({ type: 'state_machine', name: 'validation_3', field: 'name' });
+    expect(added.transitions).toEqual({});
+  });
+
   it('edits a script rule message via onPatch without touching other rules', () => {
     const onPatch = vi.fn();
     render(<ObjectValidationsPanel draft={draft} onPatch={onPatch} />);
@@ -59,19 +75,44 @@ describe('ObjectValidationsPanel', () => {
     expect(patch.validations[1]).toEqual(draft.validations[1]);
   });
 
-  it('marks non-script rules read-only (structured configs stay code-authored)', () => {
-    render(<ObjectValidationsPanel draft={draft} onPatch={() => {}} />);
+  it('makes non-script rules editable (metadata-driven, no longer read-only)', () => {
+    const onPatch = vi.fn();
+    render(<ObjectValidationsPanel draft={draft} onPatch={onPatch} />);
     fireEvent.click(screen.getByText('status_flow'));
-    expect(screen.getByText(/cannot be edited here yet/)).toBeTruthy();
+    // The state-machine rule's message is an editable input (not a read-only note).
+    const msg = screen.getByDisplayValue('非法状态转移');
+    fireEvent.change(msg, { target: { value: '状态流转不允许' } });
+    const patch = onPatch.mock.calls[0][0];
+    expect(patch.validations[1].message).toBe('状态流转不允许');
+    expect(patch.validations[1].type).toBe('state_machine');
+  });
+
+  it('converts a rule to another type, reseeding type-specific fields', () => {
+    const onPatch = vi.fn();
+    render(<ObjectValidationsPanel draft={draft} onPatch={onPatch} />);
+    fireEvent.click(screen.getByText('no_negative'));
+    // The Type <select> holds the current type; switching it converts the rule.
+    const typeSelect = screen.getByDisplayValue('Script — CEL fail condition');
+    fireEvent.change(typeSelect, { target: { value: 'format' } });
+    const patch = onPatch.mock.calls[0][0];
+    expect(patch.validations[0]).toMatchObject({ type: 'format', name: 'no_negative', message: '金额不能为负' });
+    // format has no `condition`; the reseed drops it.
+    expect(patch.validations[0].condition).toBeUndefined();
   });
 
   it('deletes a rule', () => {
     const onPatch = vi.fn();
     render(<ObjectValidationsPanel draft={draft} onPatch={onPatch} />);
     fireEvent.click(screen.getByText('no_negative'));
-    fireEvent.click(screen.getAllByText('Delete')[0]);
+    fireEvent.click(screen.getByTestId('rule-delete'));
     const patch = onPatch.mock.calls[0][0];
     expect(patch.validations).toHaveLength(1);
     expect(patch.validations[0].name).toBe('status_flow');
   });
+
+  it('hides authoring affordances when disabled (read-only package)', () => {
+    render(<ObjectValidationsPanel draft={draft} onPatch={() => {}} disabled />);
+    expect(screen.queryByText('New')).toBeNull();
+    expect(screen.queryByTestId('rule-delete')).toBeNull();
+  });
 });
diff --git a/packages/app-shell/src/views/studio-design/ObjectValidationsPanel.tsx b/packages/app-shell/src/views/studio-design/ObjectValidationsPanel.tsx
index d78f0d7d9..748aa7042 100644
--- a/packages/app-shell/src/views/studio-design/ObjectValidationsPanel.tsx
+++ b/packages/app-shell/src/views/studio-design/ObjectValidationsPanel.tsx
@@ -7,40 +7,82 @@
  */
 
 /**
- * Data pillar — Validations view (builder-ui Phase B).
+ * Data pillar — Validations view.
  *
- * Edits `ObjectSchema.validations` (spec `ValidationRuleSchema`, a
- * discriminated union on `type`). The no-code surface targets the `script`
- * rule — `{ type: 'script', name, message, condition }` where the CEL
- * `condition` is a FAIL predicate (TRUE ⇒ the write is rejected with
- * `message`). The condition editor reuses the metadata-admin
- * `ConditionBuilder`, fed with the DRAFT field list so unpublished fields
- * are pickable.
+ * Edits `ObjectSchema.validations` (spec `ValidationRuleSchema`, a discriminated
+ * union on `type`). Every rule type in the spec is authorable here — not just
+ * `script` — so the no-code surface is a faithful config panel for the metadata:
  *
- * Non-`script` rule types (state_machine / format / cross_field / json /
- * conditional) are surfaced read-only with their type badge — they carry
- * structures a row editor can't honestly express; authoring them stays in
- * code for now. Showing them (rather than hiding) keeps the list a truthful
- * inventory of everything that will run on save.
+ *   - script        — a CEL FAIL predicate (TRUE ⇒ the write is rejected).
+ *   - cross_field   — a CEL predicate plus the participating fields.
+ *   - state_machine — a status field + allowed from→to transitions.
+ *   - format        — a field + a built-in format or a regex pattern.
+ *   - json_schema   — a JSON field validated against a JSON Schema.
+ *   - conditional   — a CEL guard + a nested rule applied when it holds.
+ *
+ * Adding a rule offers every type (the "New" menu), each seeded with a VALID
+ * skeleton so the immediate object-draft save never 422s. The common fields
+ * (name / label / message / severity / events / priority / active) are shared
+ * by all types; the type-specific fields render below them. CEL conditions
+ * reuse the metadata-admin `ConditionBuilder`, fed the DRAFT field list so
+ * unpublished fields are pickable.
+ *
+ * Persistence: like actions, validations live ON the object draft — this panel
+ * calls `onPatch({ validations })` and the Data pillar's Save draft owns the
+ * write. Nothing here fetches or saves on its own.
  */
 
 import React from 'react';
-import { Plus, Trash2, ShieldAlert } from 'lucide-react';
+import { Plus, Trash2, ShieldAlert, ChevronDown } from 'lucide-react';
+import { Popover, PopoverTrigger, PopoverContent } from '@object-ui/components';
 import { ConditionBuilder } from '../metadata-admin/inspectors/ConditionBuilder';
 import { readFields } from '../metadata-admin/previews/object-fields-io';
-import { t, tFormat, useMetadataLocale } from '../metadata-admin/i18n';
+import { t, useMetadataLocale } from '../metadata-admin/i18n';
+
+type RuleType = 'script' | 'cross_field' | 'state_machine' | 'format' | 'json_schema' | 'conditional';
 
 interface ValidationRuleDraft {
   type?: string;
   name?: string;
   label?: string;
+  description?: string;
   message?: string;
   condition?: string;
   severity?: 'error' | 'warning' | 'info';
   active?: boolean;
+  events?: string[];
+  priority?: number;
+  // type-specific
+  field?: string;
+  fields?: string[];
+  regex?: string;
+  format?: string;
+  transitions?: Record<string, string[]>;
+  schema?: Record<string, unknown>;
+  then?: unknown;
+  otherwise?: unknown;
   [key: string]: unknown;
 }
 
+interface FieldOpt {
+  name: string;
+  label?: string;
+  hidden?: boolean;
+}
+
+/** Rule types, in menu order. `json_schema` matches the spec literal (not `json`). */
+const RULE_TYPES: ReadonlyArray<{ value: RuleType; labelKey: string }> = [
+  { value: 'script', labelKey: 'engine.studio.rules.typeScript' },
+  { value: 'cross_field', labelKey: 'engine.studio.rules.typeCrossField' },
+  { value: 'state_machine', labelKey: 'engine.studio.rules.typeStateMachine' },
+  { value: 'format', labelKey: 'engine.studio.rules.typeFormat' },
+  { value: 'json_schema', labelKey: 'engine.studio.rules.typeJsonSchema' },
+  { value: 'conditional', labelKey: 'engine.studio.rules.typeConditional' },
+];
+
+const EVENTS = ['insert', 'update', 'delete'] as const;
+const BUILTIN_FORMATS = ['', 'url', 'email', 'phone', 'json'] as const;
+
 function readRules(input: unknown): ValidationRuleDraft[] {
   if (!Array.isArray(input)) return [];
   return input.filter((r): r is ValidationRuleDraft => !!r && typeof r === 'object');
@@ -54,6 +96,330 @@ function nextRuleName(existing: string[]): string {
   return name;
 }
 
+/**
+ * A VALID minimal skeleton for a rule of `type` — every required field is
+ * present with a save-safe value. An empty `condition` is rejected by the
+ * spec's ExpressionInputSchema, so CEL-bearing types default to `false` (a
+ * never-firing no-op); required `field`/`fields` seed from the first field.
+ */
+function makeSkeleton(type: RuleType, name: string, firstField?: string): ValidationRuleDraft {
+  const base = { name, message: '', severity: 'error' as const, active: true };
+  switch (type) {
+    case 'script':
+      return { ...base, type, condition: 'false' };
+    case 'cross_field':
+      return { ...base, type, condition: 'false', fields: firstField ? [firstField] : [] };
+    case 'state_machine':
+      return { ...base, type, field: firstField ?? '', transitions: {} };
+    case 'format':
+      return { ...base, type, field: firstField ?? '' };
+    case 'json_schema':
+      return { ...base, type, field: firstField ?? '', schema: {} };
+    case 'conditional':
+      return {
+        ...base,
+        type,
+        condition: 'false',
+        then: { type: 'script', name: `${name}_then`, message: '', condition: 'false', severity: 'error' },
+      };
+  }
+}
+
+/** A JSON <textarea> that keeps invalid text local and only commits parsed objects. */
+function JsonField({
+  label,
+  value,
+  onCommit,
+  disabled,
+  locale,
+}: {
+  label: string;
+  value: unknown;
+  onCommit: (parsed: unknown) => void;
+  disabled?: boolean;
+  locale: string;
+}) {
+  const serialized = React.useMemo(() => {
+    if (value == null) return '';
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return '';
+    }
+  }, [value]);
+  const [text, setText] = React.useState(serialized);
+  const [err, setErr] = React.useState<string | null>(null);
+  // Re-sync when the selected rule changes underneath us.
+  React.useEffect(() => {
+    setText(serialized);
+    setErr(null);
+  }, [serialized]);
+  return (
+    <label className="block">
+      <span className="mb-1 block text-[11px] text-muted-foreground">{label}</span>
+      <textarea
+        value={text}
+        disabled={disabled}
+        spellCheck={false}
+        rows={5}
+        onChange={(e) => setText(e.target.value)}
+        onBlur={() => {
+          const raw = text.trim();
+          if (!raw) {
+            setErr(null);
+            onCommit(undefined);
+            return;
+          }
+          try {
+            onCommit(JSON.parse(raw));
+            setErr(null);
+          } catch {
+            setErr(t('engine.studio.rules.invalidJson', locale));
+          }
+        }}
+        className="w-full rounded border bg-background px-2 py-1 font-mono text-[11px]"
+      />
+      {err && <span className="mt-1 block text-[11px] text-destructive">{err}</span>}
+    </label>
+  );
+}
+
+/** State-machine `transitions` editor: from-state → allowed next states (CSV). */
+function TransitionsField({
+  transitions,
+  onCommit,
+  disabled,
+  locale,
+}: {
+  transitions: Record<string, string[]>;
+  onCommit: (next: Record<string, string[]>) => void;
+  disabled?: boolean;
+  locale: string;
+}) {
+  const rows = Object.entries(transitions);
+  const setRow = (idx: number, from: string, to: string[]) => {
+    const next: Record<string, string[]> = {};
+    rows.forEach(([k, v], i) => {
+      if (i === idx) {
+        if (from) next[from] = to;
+      } else {
+        next[k] = v;
+      }
+    });
+    onCommit(next);
+  };
+  return (
+    <div className="space-y-2">
+      <span className="block text-[11px] text-muted-foreground">{t('engine.studio.rules.transitions', locale)}</span>
+      {rows.map(([from, to], i) => (
+        <div key={i} className="flex items-center gap-1.5">
+          <input
+            value={from}
+            disabled={disabled}
+            placeholder={t('engine.studio.rules.transitionFrom', locale)}
+            onChange={(e) => setRow(i, e.target.value, to)}
+            className="w-32 rounded border bg-background px-2 py-1 text-[12px]"
+          />
+          <span className="text-muted-foreground">→</span>
+          <input
+            value={to.join(', ')}
+            disabled={disabled}
+            placeholder={t('engine.studio.rules.transitionTo', locale)}
+            onChange={(e) =>
+              setRow(i, from, e.target.value.split(',').map((s) => s.trim()).filter(Boolean))
+            }
+            className="min-w-0 flex-1 rounded border bg-background px-2 py-1 text-[12px]"
+          />
+          {!disabled && (
+            <button
+              type="button"
+              aria-label={t('engine.studio.rules.delete', locale)}
+              onClick={() => setRow(i, '', [])}
+              className="rounded border border-destructive/40 p-1 text-destructive hover:bg-destructive/10"
+            >
+              <Trash2 className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+      ))}
+      {!disabled && (
+        <button
+          type="button"
+          onClick={() => onCommit({ ...transitions, '': [] })}
+          disabled={'' in transitions}
+          className="inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[11px] hover:bg-muted disabled:opacity-50"
+        >
+          <Plus className="h-3 w-3" /> {t('engine.studio.rules.addTransition', locale)}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/** The type-specific fields for the selected rule (below the shared common fields). */
+function RuleTypeFields({
+  rule,
+  fields,
+  patch,
+  disabled,
+  locale,
+}: {
+  rule: ValidationRuleDraft;
+  fields: FieldOpt[];
+  patch: (p: Partial<ValidationRuleDraft>) => void;
+  disabled?: boolean;
+  locale: string;
+}) {
+  const fieldSelect = (label: string, value: string | undefined, onSet: (v: string) => void) => (
+    <label className="block">
+      <span className="mb-1 block text-[11px] text-muted-foreground">{label}</span>
+      <select
+        value={value ?? ''}
+        disabled={disabled}
+        onChange={(e) => onSet(e.target.value)}
+        className="w-full rounded border bg-background px-2 py-1 text-[12px]"
+      >
+        <option value="">{t('engine.studio.rules.pickField', locale)}</option>
+        {fields.map((f) => (
+          <option key={f.name} value={f.name}>
+            {f.label && f.label !== f.name ? `${f.label} (${f.name})` : f.name}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+
+  const conditionField = (
+    <div>
+      <span className="mb-1 block text-[11px] text-muted-foreground">
+        {t('engine.studio.rules.celPre', locale)}
+        <b>{t('engine.studio.rules.celTrue', locale)}</b>
+        {t('engine.studio.rules.celMid', locale)}
+        <code className="rounded bg-muted px-1">false</code>
+        {t('engine.studio.rules.celPost', locale)}
+      </span>
+      <ConditionBuilder
+        value={typeof rule.condition === 'string' ? rule.condition : ''}
+        onCommit={(cel) => patch({ condition: cel })}
+        fields={fields}
+        disabled={disabled}
+      />
+    </div>
+  );
+
+  switch (rule.type) {
+    case 'script':
+      return conditionField;
+    case 'cross_field': {
+      const selected = Array.isArray(rule.fields) ? rule.fields : [];
+      const toggle = (name: string, on: boolean) =>
+        patch({ fields: on ? [...new Set([...selected, name])] : selected.filter((f) => f !== name) });
+      return (
+        <>
+          {conditionField}
+          <div>
+            <span className="mb-1 block text-[11px] text-muted-foreground">{t('engine.studio.rules.fields', locale)}</span>
+            <div className="flex flex-wrap gap-2 rounded border p-2">
+              {fields.length === 0 && (
+                <span className="text-[11px] text-muted-foreground">{t('engine.studio.rules.noFields', locale)}</span>
+              )}
+              {fields.map((f) => (
+                <label key={f.name} className="flex items-center gap-1 text-[12px]">
+                  <input
+                    type="checkbox"
+                    checked={selected.includes(f.name)}
+                    disabled={disabled}
+                    onChange={(e) => toggle(f.name, e.target.checked)}
+                  />
+                  {f.label && f.label !== f.name ? `${f.label} (${f.name})` : f.name}
+                </label>
+              ))}
+            </div>
+          </div>
+        </>
+      );
+    }
+    case 'state_machine':
+      return (
+        <>
+          {fieldSelect(t('engine.studio.rules.statusField', locale), rule.field, (v) => patch({ field: v }))}
+          <TransitionsField
+            transitions={rule.transitions && typeof rule.transitions === 'object' ? rule.transitions : {}}
+            onCommit={(next) => patch({ transitions: next })}
+            disabled={disabled}
+            locale={locale}
+          />
+        </>
+      );
+    case 'format':
+      return (
+        <>
+          {fieldSelect(t('engine.studio.rules.field', locale), rule.field, (v) => patch({ field: v }))}
+          <label className="block">
+            <span className="mb-1 block text-[11px] text-muted-foreground">{t('engine.studio.rules.format', locale)}</span>
+            <select
+              value={typeof rule.format === 'string' ? rule.format : ''}
+              disabled={disabled}
+              onChange={(e) => patch({ format: e.target.value || undefined })}
+              className="w-full rounded border bg-background px-2 py-1 text-[12px]"
+            >
+              {BUILTIN_FORMATS.map((f) => (
+                <option key={f || 'none'} value={f}>
+                  {f || t('engine.studio.rules.formatNone', locale)}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="block">
+            <span className="mb-1 block text-[11px] text-muted-foreground">{t('engine.studio.rules.regex', locale)}</span>
+            <input
+              value={typeof rule.regex === 'string' ? rule.regex : ''}
+              disabled={disabled}
+              placeholder="^[A-Z]{2}\\d{4}$"
+              onChange={(e) => patch({ regex: e.target.value || undefined })}
+              className="w-full rounded border bg-background px-2 py-1 font-mono text-[12px]"
+            />
+          </label>
+        </>
+      );
+    case 'json_schema':
+      return (
+        <>
+          {fieldSelect(t('engine.studio.rules.field', locale), rule.field, (v) => patch({ field: v }))}
+          <JsonField
+            label={t('engine.studio.rules.jsonSchema', locale)}
+            value={rule.schema}
+            onCommit={(parsed) => patch({ schema: (parsed as Record<string, unknown>) ?? {} })}
+            disabled={disabled}
+            locale={locale}
+          />
+        </>
+      );
+    case 'conditional':
+      return (
+        <>
+          {conditionField}
+          <JsonField
+            label={t('engine.studio.rules.then', locale)}
+            value={rule.then}
+            onCommit={(parsed) => patch({ then: parsed })}
+            disabled={disabled}
+            locale={locale}
+          />
+          <JsonField
+            label={t('engine.studio.rules.otherwise', locale)}
+            value={rule.otherwise}
+            onCommit={(parsed) => patch({ otherwise: parsed })}
+            disabled={disabled}
+            locale={locale}
+          />
+        </>
+      );
+    default:
+      return null;
+  }
+}
+
 export function ObjectValidationsPanel({
   draft,
   onPatch,
@@ -66,14 +432,13 @@ export function ObjectValidationsPanel({
   const locale = useMetadataLocale();
   const rules = React.useMemo(() => readRules(draft.validations), [draft.validations]);
   const [selected, setSelected] = React.useState<string | null>(null);
+  const [addOpen, setAddOpen] = React.useState(false);
   // Default to the first rule so the detail pane isn't a dead "pick one" empty
-  // state whenever rules already exist (matches the Access pillar's
-  // Permission Set list, which default-selects its first item). Falls back
-  // automatically when `selected` no longer matches the current rule list
-  // (deleted, or the object switched under us).
+  // state whenever rules already exist. Falls back automatically when `selected`
+  // no longer matches the current rule list (deleted, or the object switched).
   const effectiveSelected = rules.some((r) => r.name === selected) ? selected : (rules[0]?.name ?? null);
 
-  const fields = React.useMemo(
+  const fields = React.useMemo<FieldOpt[]>(
     () =>
       readFields(draft.fields).entries.map((e) => ({
         name: e.name,
@@ -82,20 +447,16 @@ export function ObjectValidationsPanel({
       })),
     [draft.fields],
   );
+  const firstField = fields.find((f) => !f.hidden)?.name ?? fields[0]?.name;
 
   const commit = (next: ValidationRuleDraft[]) => onPatch({ validations: next });
 
   const patchRule = (name: string, patch: Partial<ValidationRuleDraft>) =>
     commit(rules.map((r) => (r.name === name ? { ...r, ...patch } : r)));
 
-  const addRule = () => {
+  const addRule = (type: RuleType) => {
     const name = nextRuleName(rules.map((r) => r.name ?? ''));
-    // `condition: 'false'` — a VALID never-failing CEL placeholder. An empty
-    // condition is rejected by the spec's ExpressionInputSchema, which would
-    // 422 the whole draft save and dead-end the create flow (the same
-    // required-field-blocks-authoring class as dashboard `layout` / page
-    // `regions`). A rule that never fires is safe to save mid-authoring.
-    commit([...rules, { type: 'script', name, message: '', condition: 'false', severity: 'error' }]);
+    commit([...rules, makeSkeleton(type, name, firstField)]);
     setSelected(name);
   };
 
@@ -105,6 +466,27 @@ export function ObjectValidationsPanel({
   };
 
   const sel = rules.find((r) => r.name === effectiveSelected) ?? null;
+  const selType = (typeof sel?.type === 'string' ? sel.type : 'script') as RuleType;
+
+  // Switching a rule's type REPLACES it with a fresh valid skeleton (so stale
+  // type-specific keys — a state_machine's `transitions`, a format's `regex` —
+  // don't linger on the new shape) while carrying the shared fields across.
+  const changeType = (name: string, nextType: RuleType) => {
+    const cur = rules.find((r) => r.name === name);
+    if (!cur) return;
+    const next = makeSkeleton(nextType, name, firstField);
+    // carry a CEL condition across the types that share one
+    if (
+      (nextType === 'script' || nextType === 'cross_field' || nextType === 'conditional') &&
+      typeof cur.condition === 'string'
+    ) {
+      next.condition = cur.condition;
+    }
+    for (const k of ['label', 'description', 'message', 'severity', 'active', 'events', 'priority'] as const) {
+      if (cur[k] !== undefined) (next as Record<string, unknown>)[k] = cur[k];
+    }
+    commit(rules.map((r) => (r.name === name ? next : r)));
+  };
 
   return (
     <div className="flex min-h-0 flex-1 gap-4">
@@ -115,13 +497,35 @@ export function ObjectValidationsPanel({
           <span className="text-[13px] font-medium">{t('engine.studio.rules.title', locale)}</span>
           <span className="text-[11px] text-muted-foreground">({rules.length})</span>
           {!disabled && (
-            <button
-              type="button"
-              onClick={addRule}
-              className="ml-auto inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[11px] hover:bg-muted"
-            >
-              <Plus className="h-3 w-3" /> {t('engine.studio.new', locale)}
-            </button>
+            <Popover open={addOpen} onOpenChange={setAddOpen}>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  className="ml-auto inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[11px] hover:bg-muted"
+                >
+                  <Plus className="h-3 w-3" /> {t('engine.studio.new', locale)}
+                  <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent align="end" sideOffset={4} className="w-56 p-1">
+                <p className="px-2 pb-1 pt-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                  {t('engine.studio.rules.newType', locale)}
+                </p>
+                {RULE_TYPES.map((rt) => (
+                  <button
+                    key={rt.value}
+                    type="button"
+                    onClick={() => {
+                      addRule(rt.value);
+                      setAddOpen(false);
+                    }}
+                    className="flex w-full items-center rounded-md px-2 py-1.5 text-left text-[12px] hover:bg-muted"
+                  >
+                    {t(rt.labelKey, locale)}
+                  </button>
+                ))}
+              </PopoverContent>
+            </Popover>
           )}
         </header>
         <div className="min-h-0 flex-1 overflow-auto">
@@ -148,14 +552,7 @@ export function ObjectValidationsPanel({
                     {r.message || t('engine.studio.rules.noMessage', locale)}
                   </span>
                 </span>
-                <span
-                  className={
-                    'shrink-0 rounded-full px-1.5 py-0.5 text-[10px] ' +
-                    (r.type === 'script'
-                      ? 'bg-primary/10 text-primary'
-                      : 'bg-muted text-muted-foreground')
-                  }
-                >
+                <span className="shrink-0 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] text-primary">
                   {r.type ?? 'script'}
                 </span>
               </button>
@@ -170,29 +567,23 @@ export function ObjectValidationsPanel({
           <div className="flex flex-1 items-center justify-center p-6 text-center text-[12px] text-muted-foreground">
             {t('engine.studio.rules.pick', locale)}
           </div>
-        ) : sel.type !== 'script' ? (
-          <div className="flex flex-1 flex-col gap-2 p-4">
-            <p className="text-[13px] font-medium">
-              {sel.label || sel.name}
-              <span className="ml-2 rounded-full bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
-                {sel.type}
-              </span>
-            </p>
-            <p className="text-[12px] leading-5 text-muted-foreground">
-              {tFormat('engine.studio.rules.structured', locale, { type: String(sel.type), message: sel.message || t('engine.studio.rules.none2', locale) })}
-            </p>
-            {!disabled && (
-              <button
-                type="button"
-                onClick={() => removeRule(sel.name!)}
-                className="mt-auto inline-flex w-fit items-center gap-1 rounded border border-destructive/40 px-2 py-1 text-[11px] text-destructive hover:bg-destructive/10"
-              >
-                <Trash2 className="h-3 w-3" /> {t('engine.studio.rules.deleteRule', locale)}
-              </button>
-            )}
-          </div>
         ) : (
           <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-auto p-4">
+            <label className="block">
+              <span className="mb-1 block text-[11px] text-muted-foreground">{t('engine.studio.rules.type', locale)}</span>
+              <select
+                value={selType}
+                disabled={disabled}
+                onChange={(e) => changeType(sel.name!, e.target.value as RuleType)}
+                className="w-full rounded border bg-background px-2 py-1 text-[12px]"
+              >
+                {RULE_TYPES.map((rt) => (
+                  <option key={rt.value} value={rt.value}>
+                    {t(rt.labelKey, locale)}
+                  </option>
+                ))}
+              </select>
+            </label>
             <label className="block">
               <span className="mb-1 block text-[11px] text-muted-foreground">{t('engine.studio.rules.nameLabel', locale)}</span>
               <input
@@ -206,6 +597,15 @@ export function ObjectValidationsPanel({
                 className="w-full rounded border bg-background px-2 py-1 text-[12px]"
               />
             </label>
+            <label className="block">
+              <span className="mb-1 block text-[11px] text-muted-foreground">{t('engine.studio.rules.label', locale)}</span>
+              <input
+                value={sel.label ?? ''}
+                disabled={disabled}
+                onChange={(e) => patchRule(sel.name!, { label: e.target.value || undefined })}
+                className="w-full rounded border bg-background px-2 py-1 text-[12px]"
+              />
+            </label>
             <label className="block">
               <span className="mb-1 block text-[11px] text-muted-foreground">{t('engine.studio.rules.messageLabel', locale)}</span>
               <input
@@ -216,18 +616,41 @@ export function ObjectValidationsPanel({
                 className="w-full rounded border bg-background px-2 py-1 text-[12px]"
               />
             </label>
+
+            {/* type-specific configuration */}
+            <RuleTypeFields
+              rule={sel}
+              fields={fields}
+              patch={(p) => patchRule(sel.name!, p)}
+              disabled={disabled}
+              locale={locale}
+            />
+
+            {/* runs-on events */}
             <div>
-              <span className="mb-1 block text-[11px] text-muted-foreground">
-                {t('engine.studio.rules.celPre', locale)}<b>{t('engine.studio.rules.celTrue', locale)}</b>{t('engine.studio.rules.celMid', locale)}
-                <code className="rounded bg-muted px-1">false</code>{t('engine.studio.rules.celPost', locale)}
-              </span>
-              <ConditionBuilder
-                value={typeof sel.condition === 'string' ? sel.condition : ''}
-                onCommit={(cel) => patchRule(sel.name!, { condition: cel })}
-                fields={fields}
-                disabled={disabled}
-              />
+              <span className="mb-1 block text-[11px] text-muted-foreground">{t('engine.studio.rules.events', locale)}</span>
+              <div className="flex items-center gap-4">
+                {EVENTS.map((ev) => {
+                  const on = Array.isArray(sel.events) ? sel.events.includes(ev) : false;
+                  return (
+                    <label key={ev} className="flex items-center gap-1.5 text-[12px]">
+                      <input
+                        type="checkbox"
+                        checked={on}
+                        disabled={disabled}
+                        onChange={(e) => {
+                          const cur = Array.isArray(sel.events) ? sel.events : [];
+                          const next = e.target.checked ? [...new Set([...cur, ev])] : cur.filter((x) => x !== ev);
+                          patchRule(sel.name!, { events: next });
+                        }}
+                      />
+                      {t(`engine.studio.rules.event.${ev}`, locale)}
+                    </label>
+                  );
+                })}
+              </div>
             </div>
+
             <div className="flex items-center gap-4">
               <label className="flex items-center gap-1.5 text-[12px]">
                 <span className="text-muted-foreground">{t('engine.studio.rules.severity', locale)}</span>
@@ -242,6 +665,18 @@ export function ObjectValidationsPanel({
                   <option value="info">info</option>
                 </select>
               </label>
+              <label className="flex items-center gap-1.5 text-[12px]">
+                <span className="text-muted-foreground">{t('engine.studio.rules.priority', locale)}</span>
+                <input
+                  type="number"
+                  value={typeof sel.priority === 'number' ? sel.priority : ''}
+                  disabled={disabled}
+                  onChange={(e) =>
+                    patchRule(sel.name!, { priority: e.target.value === '' ? undefined : Number(e.target.value) })
+                  }
+                  className="w-20 rounded border bg-background px-1.5 py-0.5 text-[12px]"
+                />
+              </label>
               <label className="flex items-center gap-1.5 text-[12px]">
                 <input
                   type="checkbox"
@@ -254,6 +689,7 @@ export function ObjectValidationsPanel({
               {!disabled && (
                 <button
                   type="button"
+                  data-testid="rule-delete"
                   onClick={() => removeRule(sel.name!)}
                   className="ml-auto inline-flex items-center gap-1 rounded border border-destructive/40 px-2 py-1 text-[11px] text-destructive hover:bg-destructive/10"
                 >
diff --git a/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx b/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
index 2a73d1c01..9a92f1e56 100644
--- a/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
+++ b/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx
@@ -68,7 +68,7 @@ import { getMetadataPreview, type MetadataSelection } from '../metadata-admin/pr
 import { PermissionMatrixEditPage } from '../metadata-admin/PermissionMatrixEditor';
 import { getMetadataInspector } from '../metadata-admin/inspector-registry';
 import { getMetadataDefaultInspector } from '../metadata-admin/default-inspector-registry';
-import { useMetadataClient } from '../metadata-admin/useMetadata';
+import { useMetadataClient, useMetadataTypes } from '../metadata-admin/useMetadata';
 import {
   DESIGNER_SEL_PARAM,
   parseNavSelParam,
@@ -1674,6 +1674,15 @@ function DataPillar({
   const client = useMetadataClient();
   const adapter = useAdapter();
   const locale = useMetadataLocale();
+  // Live server JSONSchemas per metadata type (`/meta/types`) — handed to the
+  // Actions/Hooks config panels so their forms are driven by the real metadata
+  // contract (and stay forward-compatible when the server spec adds fields).
+  const { entries: metaTypes } = useMetadataTypes(client);
+  const typeSchemas = React.useMemo(() => {
+    const idx: Record<string, Record<string, unknown> | undefined> = {};
+    for (const e of metaTypes) idx[e.type] = e.schema;
+    return idx;
+  }, [metaTypes]);
   // Below the mobile breakpoint the Objects rail overlays the canvas instead
   // of a permanent 208px column (which otherwise squeezed the grid/form
   // canvas down to almost nothing on phones) — closed by default, toggled by
@@ -2115,9 +2124,19 @@ function DataPillar({
                   disabled={readOnly}
                 />
               ) : viewMode === 'hooks' ? (
-                <ObjectHooksPanel objectName={current.name} packageId={packageId} disabled={readOnly} />
+                <ObjectHooksPanel
+                  objectName={current.name}
+                  packageId={packageId}
+                  disabled={readOnly}
+                  hookSchema={typeSchemas.hook}
+                />
               ) : viewMode === 'actions' ? (
-                <ObjectActionsPanel draft={objDraft} onPatch={onPatch} disabled={readOnly} />
+                <ObjectActionsPanel
+                  draft={objDraft}
+                  onPatch={onPatch}
+                  disabled={readOnly}
+                  actionSchema={typeSchemas.action}
+                />
               ) : viewMode === 'api' ? (
                 <ObjectApiPanel name={current.name} draft={objDraft} />
               ) : viewMode === 'grid' && !hasBaseline ? (

From c15bf59ba0c7fec50a13d18ff76b15f22797f9f4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 8 Jul 2026 15:45:00 +0000
Subject: [PATCH 2/2] =?UTF-8?q?feat(app-shell):=20curated=20Hook=20inspect?=
 =?UTF-8?q?or=20=E2=80=94=20object=20picker=20+=20dedicated=20function=20e?=
 =?UTF-8?q?ditor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Browser-testing the Studio Data → Hooks tab surfaced two gaps in the generic
SchemaForm: the target object could not be *selected* (it rendered as a
free-text box), and the handler function had no dedicated code input.

Add a curated HookDefaultInspector (registered for `hook`, mirroring
ActionDefaultInspector) and use it in ObjectHooksPanel:

- Object(s) this hook fires on — a multi-select PICKER (checkbox list of
  objects + an "All objects (*)" toggle), normalising to the spec
  `string | string[] | '*'` shape; an already-selected object missing from
  the live catalog is preserved so it is never dropped.
- Events — grouped write/query lifecycle-event checkboxes.
- Function — language (expression / sandboxed JS) + a dedicated handler-body
  code editor.
- Options — priority, async, and a CEL run condition (ConditionBuilder).
- Advanced props fall through to a SchemaForm fed the live `hook` JSONSchema.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LnU2XsAYisR96vUMCqfWVm
---
 ...config-panels-validations-hooks-actions.md |   2 +-
 .../src/views/metadata-admin/i18n.ts          |   2 +
 .../inspectors/HookDefaultInspector.tsx       | 278 ++++++++++++++++++
 .../views/metadata-admin/inspectors/index.ts  |   5 +
 .../views/studio-design/ObjectHooksPanel.tsx  |  41 ++-
 5 files changed, 317 insertions(+), 11 deletions(-)
 create mode 100644 packages/app-shell/src/views/metadata-admin/inspectors/HookDefaultInspector.tsx

diff --git a/.changeset/object-config-panels-validations-hooks-actions.md b/.changeset/object-config-panels-validations-hooks-actions.md
index 75a288f3d..30a395df1 100644
--- a/.changeset/object-config-panels-validations-hooks-actions.md
+++ b/.changeset/object-config-panels-validations-hooks-actions.md
@@ -7,7 +7,7 @@ Studio Data tab: metadata-driven config panels for Validations, Hooks and Action
 The object **Validations**, **Hooks** and **Actions** sub-tabs are now no-code config panels driven by the corresponding metadata, each able to **create** new entries:
 
 - **Validations** — the panel covers every spec rule type, not just `script`: `cross_field`, `state_machine`, `format`, `json_schema` and `conditional` are all authorable (previously they were read-only "maintain in code"). The **New** menu adds any type seeded with a valid, never-firing skeleton, and a rule's type can be switched in place; CEL predicates reuse the shared `ConditionBuilder`.
-- **Hooks** — the `SchemaForm` is now fed the live `hook` JSONSchema from `/meta/types` instead of synthesising a form from the value shape, so its fields and enums match the running server's contract.
+- **Hooks** — a new curated `HookDefaultInspector` replaces the flat generic form: the target object is an **object picker** (multi-select + `*`, not a free-text box), lifecycle events are grouped checkboxes, and the handler is a **dedicated code editor** (language + body). Advanced props fall through to a `SchemaForm` fed the live `hook` JSONSchema from `/meta/types`.
 - **Actions** — the `ActionDefaultInspector` now receives the live `action` JSONSchema as `serverSchema`, so its "More fields" section can edit any spec property not curated above (nothing is un-editable).
 
 `DataPillar` resolves the per-type schemas once (via `useMetadataTypes`) and passes them down.
diff --git a/packages/app-shell/src/views/metadata-admin/i18n.ts b/packages/app-shell/src/views/metadata-admin/i18n.ts
index 8283417d9..6b03fb9fa 100644
--- a/packages/app-shell/src/views/metadata-admin/i18n.ts
+++ b/packages/app-shell/src/views/metadata-admin/i18n.ts
@@ -486,6 +486,7 @@ const ENGINE_STRINGS_EN: Record<string, string> = {
   // Action default (home) inspector
   'engine.inspector.action.kind': 'Action',
   'engine.inspector.action.close': 'Close action',
+  'engine.inspector.hook.kind': 'Hook',
   // Dashboard default (home) inspector
   'engine.inspector.dashboard.kind': 'Dashboard',
   'engine.inspector.dashboard.close': 'Close dashboard',
@@ -1525,6 +1526,7 @@ const ENGINE_STRINGS_ZH: Record<string, string> = {
   // Action default (home) inspector
   'engine.inspector.action.kind': '动作',
   'engine.inspector.action.close': '关闭动作',
+  'engine.inspector.hook.kind': '钩子',
   // Dashboard default (home) inspector
   'engine.inspector.dashboard.kind': '仪表盘',
   'engine.inspector.dashboard.close': '关闭仪表盘',
diff --git a/packages/app-shell/src/views/metadata-admin/inspectors/HookDefaultInspector.tsx b/packages/app-shell/src/views/metadata-admin/inspectors/HookDefaultInspector.tsx
new file mode 100644
index 000000000..63b38398d
--- /dev/null
+++ b/packages/app-shell/src/views/metadata-admin/inspectors/HookDefaultInspector.tsx
@@ -0,0 +1,278 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * HookDefaultInspector — curated authoring panel for a database Hook.
+ *
+ * Replaces the flat, everything-at-once SchemaForm for `hook` with a panel
+ * organised around how a hook is actually designed:
+ *
+ *   1. Basics    — label / name / which object(s) it fires on (a PICKER, not a
+ *                  free-text box — the reason this exists)
+ *   2. Events    — the lifecycle events it subscribes to (write + query)
+ *   3. Function  — language (expression / sandboxed JS) + the handler body in a
+ *                  DEDICATED code editor (the second reason this exists)
+ *   4. Options   — priority / async / a CEL run condition
+ *
+ * Rare/advanced props (handler ref, js capabilities/timeout/memory, …) fall
+ * through to a collapsed "More fields" SchemaForm fed the live server schema,
+ * with the curated keys hidden so nothing is double-edited or lost.
+ *
+ * `object` is spec `string | string[]` (or `'*'` for every object). The picker
+ * normalises to/from that: `'*'` ⇒ all, one selection ⇒ a string, many ⇒ an
+ * array. Any already-selected object not in the live catalog is preserved as a
+ * synthesized option so a value is never silently dropped.
+ */
+
+import * as React from 'react';
+import { Label, Textarea } from '@object-ui/components';
+import type { MetadataDefaultInspectorProps } from '../default-inspector-registry';
+import { SchemaForm } from '../SchemaForm';
+import { t } from '../i18n';
+import {
+  InspectorShell,
+  InspectorTextField,
+  InspectorSelectField,
+  InspectorNumberField,
+  InspectorCheckboxField,
+} from './_shared';
+import { useObjectOptions } from '../previews/useObjectOptions';
+import { ConditionBuilder } from './ConditionBuilder';
+
+/* ─────────────── constants ─────────────── */
+
+const BODY_LANG_OPTS = [
+  { value: 'expression', label: 'Expression (L1)' },
+  { value: 'js', label: 'Sandboxed JS (L2)' },
+];
+
+/** Lifecycle events, grouped by the operation they hang off. */
+const WRITE_EVENTS = [
+  'beforeInsert', 'afterInsert',
+  'beforeUpdate', 'afterUpdate',
+  'beforeDelete', 'afterDelete',
+  'beforeUpdateMany', 'afterUpdateMany',
+  'beforeDeleteMany', 'afterDeleteMany',
+];
+const QUERY_EVENTS = [
+  'beforeFind', 'afterFind',
+  'beforeFindOne', 'afterFindOne',
+  'beforeCount', 'afterCount',
+  'beforeAggregate', 'afterAggregate',
+];
+
+const ALL_OBJECTS = '*';
+
+/** Keys this inspector edits with its own controls — hidden from the fallback. */
+const CURATED_FIELDS = [
+  'name', 'label', 'object', 'events', 'body', 'priority', 'async', 'condition',
+];
+
+/* ─────────────── helpers ─────────────── */
+
+function SectionHeader({ title, hint }: { title: string; hint?: string }) {
+  return (
+    <div className="space-y-0.5">
+      <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{title}</div>
+      {hint && <div className="text-[11px] text-muted-foreground/70">{hint}</div>}
+    </div>
+  );
+}
+
+function localize(v: unknown): string {
+  if (v == null) return '';
+  if (typeof v === 'string') return v;
+  if (typeof v === 'object') {
+    const o = v as Record<string, string>;
+    return o.en ?? o['en-US'] ?? Object.values(o)[0] ?? '';
+  }
+  return String(v);
+}
+
+/** Read the spec `object` (string | string[] | '*') into a selection set. */
+function readObjects(value: unknown): { all: boolean; names: string[] } {
+  if (value === ALL_OBJECTS) return { all: true, names: [] };
+  if (typeof value === 'string') return { all: false, names: value ? [value] : [] };
+  if (Array.isArray(value)) {
+    const names = value.filter((v): v is string => typeof v === 'string' && v !== ALL_OBJECTS);
+    return { all: value.includes(ALL_OBJECTS), names };
+  }
+  return { all: false, names: [] };
+}
+
+/** Write a selection set back to the narrowest valid spec shape. */
+function writeObjects(all: boolean, names: string[]): string | string[] {
+  if (all) return ALL_OBJECTS;
+  if (names.length === 1) return names[0];
+  return names;
+}
+
+/* ─────────────── inspector ─────────────── */
+
+export function HookDefaultInspector({
+  draft,
+  onPatch,
+  readOnly,
+  locale,
+  serverSchema,
+}: MetadataDefaultInspectorProps) {
+  const tr = React.useCallback((key: string) => t(key, locale), [locale]);
+
+  const str = (k: string): string => (typeof draft[k] === 'string' ? (draft[k] as string) : '');
+  const body = (draft.body && typeof draft.body === 'object' ? draft.body : {}) as Record<string, unknown>;
+  const events: string[] = Array.isArray(draft.events) ? (draft.events as string[]) : [];
+  const { all: allObjects, names: objectNames } = readObjects(draft.object);
+
+  const { options: objectOptions } = useObjectOptions();
+  // Preserve any selected object missing from the live catalog (draft-only /
+  // cross-package) so it is never dropped from the picker.
+  const pickerOptions = React.useMemo(() => {
+    const known = new Set(objectOptions.map((o) => o.value));
+    const extra = objectNames
+      .filter((n) => !known.has(n))
+      .map((n) => ({ value: n, label: `${n} (not published)` }));
+    return [...extra, ...objectOptions];
+  }, [objectOptions, objectNames]);
+
+  const patchBody = (p: Record<string, unknown>) => onPatch({ body: { ...body, ...p } });
+
+  const toggleObject = (name: string, on: boolean) => {
+    const next = on ? [...new Set([...objectNames, name])] : objectNames.filter((n) => n !== name);
+    onPatch({ object: writeObjects(false, next) });
+  };
+  const toggleEvent = (ev: string, on: boolean) => {
+    const next = on ? [...new Set([...events, ev])] : events.filter((e) => e !== ev);
+    onPatch({ events: next });
+  };
+
+  // A single object → give ConditionBuilder its fields; '*' / multi → raw mode.
+  const conditionObject = !allObjects && objectNames.length === 1 ? objectNames[0] : undefined;
+  const language = typeof body.language === 'string' ? (body.language as string) : 'expression';
+  const fallbackSchema = serverSchema as Record<string, unknown> | undefined;
+
+  return (
+    <InspectorShell
+      kindLabel={tr('engine.inspector.hook.kind')}
+      title={String(localize(draft.label) || draft.name || tr('engine.inspector.hook.kind'))}
+      onClose={() => {}}
+      closeLabel={tr('engine.inspector.action.close')}
+      hideClose
+    >
+      {/* 1 ─ Basics */}
+      <SectionHeader title="Basics" />
+      <InspectorTextField label="Label" value={localize(draft.label)} onCommit={(v) => onPatch({ label: v || undefined })} placeholder="Human-readable name" disabled={readOnly} />
+      <InspectorTextField label="Name" value={str('name')} onCommit={(v) => onPatch({ name: v })} placeholder="snake_case identifier" disabled={readOnly} mono testId="hook-name" />
+
+      <div className="space-y-1.5" data-testid="hook-object-picker">
+        <Label className="text-xs text-muted-foreground">Object(s) this hook fires on</Label>
+        <InspectorCheckboxField
+          label="All objects (*)"
+          value={allObjects}
+          onCommit={(on) => onPatch({ object: on ? ALL_OBJECTS : writeObjects(false, objectNames) })}
+          disabled={readOnly}
+        />
+        {!allObjects && (
+          <div className="max-h-40 space-y-1 overflow-auto rounded-md border p-2">
+            {pickerOptions.length === 0 ? (
+              <p className="text-[11px] text-muted-foreground">No objects found — publish an object, then pick it here.</p>
+            ) : (
+              pickerOptions.map((o) => (
+                <InspectorCheckboxField
+                  key={o.value}
+                  label={o.label}
+                  value={objectNames.includes(o.value)}
+                  onCommit={(on) => toggleObject(o.value, on)}
+                  disabled={readOnly}
+                />
+              ))
+            )}
+          </div>
+        )}
+        {!allObjects && objectNames.length === 0 && (
+          <p className="text-[11px] text-amber-600 dark:text-amber-400">Pick at least one object (or All objects).</p>
+        )}
+      </div>
+
+      {/* 2 ─ Events */}
+      <div className="border-t pt-3 space-y-2">
+        <SectionHeader title="Events" hint="Which lifecycle events invoke this hook." />
+        <div className="text-[11px] font-medium text-muted-foreground/80">Write</div>
+        <div className="grid grid-cols-2 gap-x-3 gap-y-1">
+          {WRITE_EVENTS.map((ev) => (
+            <InspectorCheckboxField key={ev} label={ev} value={events.includes(ev)} onCommit={(on) => toggleEvent(ev, on)} disabled={readOnly} />
+          ))}
+        </div>
+        <div className="pt-1 text-[11px] font-medium text-muted-foreground/80">Query</div>
+        <div className="grid grid-cols-2 gap-x-3 gap-y-1">
+          {QUERY_EVENTS.map((ev) => (
+            <InspectorCheckboxField key={ev} label={ev} value={events.includes(ev)} onCommit={(on) => toggleEvent(ev, on)} disabled={readOnly} />
+          ))}
+        </div>
+        {events.length === 0 && (
+          <p className="text-[11px] text-amber-600 dark:text-amber-400">Select at least one event.</p>
+        )}
+      </div>
+
+      {/* 3 ─ Function */}
+      <div className="border-t pt-3 space-y-3">
+        <SectionHeader title="Function" hint="The handler that runs when the hook fires." />
+        <InspectorSelectField
+          label="Language"
+          value={language}
+          options={BODY_LANG_OPTS}
+          onCommit={(v) => patchBody({ language: v })}
+          disabled={readOnly}
+        />
+        <div className="space-y-1">
+          <Label className="text-xs text-muted-foreground">Handler body</Label>
+          <Textarea
+            data-testid="hook-body-source"
+            value={typeof body.source === 'string' ? (body.source as string) : ''}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => patchBody({ source: e.target.value })}
+            disabled={readOnly}
+            spellCheck={false}
+            rows={8}
+            placeholder={language === 'expression' ? 'record.amount >= 0' : '// (ctx) => { ... }\nreturn;'}
+            className="text-xs font-mono"
+          />
+          <div className="text-[11px] text-muted-foreground/70">
+            {language === 'expression'
+              ? 'A single L1 expression evaluated against the record / ctx.'
+              : 'Runs in the sandbox as (ctx) => Promise<void>.'}
+          </div>
+        </div>
+      </div>
+
+      {/* 4 ─ Options */}
+      <div className="border-t pt-3 space-y-3">
+        <SectionHeader title="Options" />
+        <div className="grid grid-cols-2 gap-3">
+          <InspectorNumberField label="Priority" value={typeof draft.priority === 'number' ? (draft.priority as number) : undefined} onCommit={(v) => onPatch({ priority: v })} placeholder="100" disabled={readOnly} />
+          <div className="flex items-end pb-1.5">
+            <InspectorCheckboxField label="Run asynchronously (after commit)" value={draft.async === true} onCommit={(v) => onPatch({ async: v })} disabled={readOnly} />
+          </div>
+        </div>
+        <ConditionBuilder
+          label="Run only when (optional CEL)"
+          value={typeof draft.condition === 'string' ? (draft.condition as string) : ''}
+          onCommit={(v) => onPatch({ condition: v || undefined })}
+          objectName={conditionObject}
+          disabled={readOnly}
+        />
+      </div>
+
+      {/* Advanced — everything not curated above, from the live schema */}
+      {fallbackSchema && (
+        <div className="border-t pt-3 space-y-1.5">
+          <SectionHeader title={tr('engine.inspector.moreFields')} hint="Advanced / rarely-used properties." />
+          <SchemaForm
+            schema={fallbackSchema}
+            value={draft}
+            hiddenFields={CURATED_FIELDS}
+            readOnly={readOnly}
+            onChange={(next) => onPatch(next)}
+          />
+        </div>
+      )}
+    </InspectorShell>
+  );
+}
diff --git a/packages/app-shell/src/views/metadata-admin/inspectors/index.ts b/packages/app-shell/src/views/metadata-admin/inspectors/index.ts
index 954a2217e..958646d0f 100644
--- a/packages/app-shell/src/views/metadata-admin/inspectors/index.ts
+++ b/packages/app-shell/src/views/metadata-admin/inspectors/index.ts
@@ -19,6 +19,7 @@ import { ObjectFieldInspector } from './ObjectFieldInspector';
 import { ObjectDefaultInspector } from './ObjectDefaultInspector';
 import { DatasetDefaultInspector } from './DatasetDefaultInspector';
 import { ActionDefaultInspector } from './ActionDefaultInspector';
+import { HookDefaultInspector } from './HookDefaultInspector';
 
 export function registerBuiltinInspectors(): void {
   registerMetadataInspector('dashboard', DashboardWidgetInspector);
@@ -51,4 +52,8 @@ export function registerBuiltinInspectors(): void {
   // by action type, group inputs/placement/feedback/conditions/AI, fall back to
   // SchemaForm for advanced props.
   registerMetadataDefaultInspector('action', ActionDefaultInspector);
+  // Curated Hook authoring: object PICKER (not free text) + lifecycle events +
+  // a dedicated handler-body code editor, falling back to SchemaForm for
+  // advanced props. Replaces the flat generic form for `hook`.
+  registerMetadataDefaultInspector('hook', HookDefaultInspector);
 }
diff --git a/packages/app-shell/src/views/studio-design/ObjectHooksPanel.tsx b/packages/app-shell/src/views/studio-design/ObjectHooksPanel.tsx
index b8c6cda6a..88c70212e 100644
--- a/packages/app-shell/src/views/studio-design/ObjectHooksPanel.tsx
+++ b/packages/app-shell/src/views/studio-design/ObjectHooksPanel.tsx
@@ -26,6 +26,7 @@ import React from 'react';
 import { Webhook, Plus, Loader2, Save } from 'lucide-react';
 import { toast } from 'sonner';
 import { SchemaForm } from '../metadata-admin/SchemaForm';
+import { getMetadataDefaultInspector } from '../metadata-admin/default-inspector-registry';
 import { useMetadataClient } from '../metadata-admin/useMetadata';
 import { t, tFormat, useMetadataLocale } from '../metadata-admin/i18n';
 import { formatMetadataError } from './metadataError';
@@ -82,6 +83,9 @@ export function ObjectHooksPanel({
 }) {
   const locale = useMetadataLocale();
   const client = useMetadataClient();
+  // Curated hook authoring surface (object picker + events + dedicated body
+  // editor); falls back to the generic SchemaForm if unregistered.
+  const HookInspector = getMetadataDefaultInspector('hook');
   const [hooks, setHooks] = React.useState<HookItem[]>([]);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
@@ -254,16 +258,33 @@ export function ObjectHooksPanel({
                 </button>
               )}
             </div>
-            <div className="min-h-0 flex-1 overflow-auto p-3">
-              <SchemaForm
-                schema={hookSchema}
-                value={draft as Record<string, unknown>}
-                onChange={(next) => {
-                  setDraft(next as HookItem);
-                  setDirty(true);
-                }}
-                readOnly={!!disabled}
-              />
+            <div className="min-h-0 flex-1 overflow-auto">
+              {HookInspector ? (
+                <HookInspector
+                  type="hook"
+                  name={String(draft.name ?? '')}
+                  draft={draft as Record<string, unknown>}
+                  onPatch={(patch) => {
+                    setDraft((d) => ({ ...(d as HookItem), ...patch }));
+                    setDirty(true);
+                  }}
+                  readOnly={!!disabled}
+                  locale={locale}
+                  serverSchema={hookSchema}
+                />
+              ) : (
+                <div className="p-3">
+                  <SchemaForm
+                    schema={hookSchema}
+                    value={draft as Record<string, unknown>}
+                    onChange={(next) => {
+                      setDraft(next as HookItem);
+                      setDirty(true);
+                    }}
+                    readOnly={!!disabled}
+                  />
+                </div>
+              )}
             </div>
           </>
         )}