Policy Editor

Workflow

Block

WYSIWYG governance rule editor with visual and code editing modes for AI policy configuration. Supports condition/action rules with enable/disable toggles.

Preview

Create and manage governance rules

Governance Policy Editor

3 rules configured

IF confidence < 80%

THEN require human review

IF task.priority === "high" && dueDate < tomorrow

THEN require_approval

IF task.assignee === null

THEN log_only

Props

PolicyEditor component API reference

Prop	Type	Default	Description
`rules*`	`PolicyRule[]`	—	Array of policy rules
`onRulesChange*`	`(rules: PolicyRule[]) => void`	—	Callback when rules are modified
`mode`	`'visual' \| 'code'`	`'visual'`	Initial editing mode
`className`	`string`	—	Additional CSS classes

PolicyRule Type

Prop	Type	Default	Description
`id*`	`string`	—	Unique rule identifier
`condition*`	`string`	—	Rule condition (IF clause)
`action*`	`string`	—	Rule action (THEN clause)
`enabled*`	`boolean`	—	Whether rule is active

Usage

Import and implementation example

import { PolicyEditor, PolicyRule } from '@/blocks/workflow/policy-editor'

export default function Example() {
  const [rules, setRules] = useState<PolicyRule[]>([
    {
      id: 'rule-1',
      condition: 'IF confidence < 80%',
      action: 'THEN require human review',
      enabled: true,
    }
  ])

  return (
    <PolicyEditor
      rules={rules}
      onRulesChange={setRules}
      mode="visual"
    />
  )
}

Built With

3 components

This block uses the following UI components from the design system:

Button Input Textarea

Features

Built-in functionality

Dual editing modes: Visual form builder and raw code editor
Rule management: Add, edit, and delete rules
Enable/disable toggle: Activate or deactivate individual rules
Condition builder: Define conditions with expression syntax
Action selection: Choose from governance actions
Code view: Read-only code representation of rules
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Mode toggle uses native button elementsRule enable checkbox is properly labeledForm inputs have standard semantics

Keyboard Navigation

Key	Action
`Tab`	Navigate between rules and controls
`Enter / Space`	Activate buttons or toggle checkbox

Notes

Condition and action displayed in monospace font
Disabled rules have reduced opacity
Rule count shown in header
Add rule button clearly labeled

Related Components

Flow Builder Multistage Approval Flow Builder Compliance Checklist Audit Log