feat(ui): add full control JSON editing and create-from-JSON (#147)

## Summary
- add `Full JSON` mode for editing the entire control definition from
the control modal
- add `From JSON` in the create-control flow so a control can be created
directly from JSON without picking an evaluator first
- reuse a shared JSON editor for both full control definitions and
evaluator config JSON
- add helper text clarifying that the control JSON editor expects the
raw control definition, not `data` / `name` / `id` wrapper objects
- add Playwright coverage for the JSON create/edit flows

## Testing
- `make ui-typecheck`
- `make ui-lint` *(passes; existing `no-img-element` warnings remain in
`ui/src/core/layouts/app-layout.tsx`)*

## Screenshots

New control UI now has `From JSON` button`
<img width="841" height="613" alt="image"
src="https://github.com/user-attachments/assets/0db00e89-5fd0-4cca-bbee-ff2378a1fb87"
/>

When you click on it you get this
<img width="794" height="916" alt="Screenshot 2026-03-24 at 9 11 12 PM"
src="https://github.com/user-attachments/assets/f487e36a-b635-4fbf-b528-e83cb1404f9c"
/>

you can also edit full json in control now
<img width="802" height="917" alt="Screenshot 2026-03-24 at 9 11 38 PM"
src="https://github.com/user-attachments/assets/7207ce13-ec49-4137-9928-7bcdcd27eb64"
/>

Author: lan17

ui/src/core/page-components/agent-detail/modals/add-new-control/index.tsx

@@ -51,6 +51,33 @@ function getDefaultConfigForEvaluator(
   return DEFAULT_EVALUATOR_CONFIGS[evaluatorId] ?? {};
 }
 
+function buildJsonDraftControl(agentName: string) {
+  return {
+    id: 0,
+    name: `json-control-for-${sanitizeControlNamePart(agentName)}`,
+    control: {
+      description: '',
+      enabled: true,
+      execution: 'server' as const,
+      scope: {
+        step_types: ['llm'],
+        stages: ['post'] as ('post' | 'pre')[],
+      },
+      condition: {
+        selector: {
+          path: '*',
+        },
+        evaluator: {
+          name: 'regex',
+          config: getDefaultConfigForEvaluator('regex'),
+        },
+      },
+      action: { decision: 'deny' as const },
+      tags: [],
+    },
+  };
+}
+
 type AddNewControlModalProps = {
   opened: boolean;
   onClose: () => void;
@@ -90,6 +117,12 @@ export function AddNewControlModal({
     });
   };
 
+  const handleFromJsonClick = () => {
+    openModal(MODAL_NAMES.CONTROL_STORE, {
+      submodal: SUBMODAL_NAMES.CREATE,
+    });
+  };
+
   const handleEditModalClose = () => {
     closeSubmodal();
   };
@@ -110,31 +143,34 @@ export function AddNewControlModal({
   }, [evaluatorsData]);
 
   const draftControl = useMemo(() => {
-    if (!selectedEvaluator) return null;
-    const name = `${sanitizeControlNamePart(selectedEvaluator.name)}-control-for-${sanitizeControlNamePart(agentName)}`;
-    return {
-      id: 0,
-      name,
-      control: {
-        description: selectedEvaluator.description,
-        enabled: true,
-        execution: 'server' as const,
-        scope: {
-          step_types: ['llm'],
-          stages: ['post'] as ('post' | 'pre')[],
-        },
-        condition: {
-          selector: {
-            path: '*',
+    if (selectedEvaluator) {
+      const name = `${sanitizeControlNamePart(selectedEvaluator.name)}-control-for-${sanitizeControlNamePart(agentName)}`;
+      return {
+        id: 0,
+        name,
+        control: {
+          description: selectedEvaluator.description,
+          enabled: true,
+          execution: 'server' as const,
+          scope: {
+            step_types: ['llm'],
+            stages: ['post'] as ('post' | 'pre')[],
           },
-          evaluator: {
-            name: selectedEvaluator.id,
-            config: getDefaultConfigForEvaluator(selectedEvaluator.id),
+          condition: {
+            selector: {
+              path: '*',
+            },
+            evaluator: {
+              name: selectedEvaluator.id,
+              config: getDefaultConfigForEvaluator(selectedEvaluator.id),
+            },
           },
+          action: { decision: 'deny' as const },
         },
-        action: { decision: 'deny' as const },
-      },
-    };
+      };
+    }
+
+    return buildJsonDraftControl(agentName);
   }, [selectedEvaluator, agentName]);
 
   const columns: ColumnDef<EvaluatorInfo & { id: string }>[] = [
@@ -219,7 +255,7 @@ export function AddNewControlModal({
             </Button>
           </Group>
           <Text size="sm" c="dimmed">
-            Select an evaluator to create a new control
+            Select an evaluator to create a new control or start from JSON
           </Text>
         </Box>
         <Divider />
@@ -240,20 +276,30 @@ export function AddNewControlModal({
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
-              <Text size="sm" c="dimmed">
-                Learn here on how to add new type of evaluator.{' '}
-                <Text
-                  component="a"
-                  href="https://github.com/agentcontrol/agent-control/blob/main/README.md"
-                  c="blue"
+              <Group gap="md" wrap="nowrap">
+                <Button
+                  variant="outline"
                   size="sm"
-                  td="none"
-                  target="_blank"
-                  rel="noreferrer"
+                  data-testid="from-json-button"
+                  onClick={handleFromJsonClick}
                 >
-                  Docs ↗
+                  From JSON
+                </Button>
+                <Text size="sm" c="dimmed">
+                  Learn here on how to add new type of evaluator.{' '}
+                  <Text
+                    component="a"
+                    href="https://github.com/agentcontrol/agent-control/blob/main/README.md"
+                    c="blue"
+                    size="sm"
+                    td="none"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Docs ↗
+                  </Text>
                 </Text>
-              </Text>
+              </Group>
             </Group>
 
             {/* Table or Empty State */}
@@ -307,6 +353,7 @@ export function AddNewControlModal({
               control={draftControl}
               agentId={agentId}
               mode="create"
+              initialEditorMode={selectedEvaluator ? 'form' : 'json'}
               onClose={handleEditModalClose}
               onSuccess={handleEditModalSuccess}
             />

ui/src/core/page-components/agent-detail/modals/edit-control/control-condition.ts

@@ -2,9 +2,6 @@ import type { ControlDefinition } from '@/core/api/types';
 import type { AnyEvaluatorDefinition } from '@/core/evaluators';
 import { getEvaluator } from '@/core/evaluators';
 
-const COMPOSITE_CONDITION_EDITING_MESSAGE =
-  'This control uses a composite condition tree. This PR keeps the old single-condition UI, so saving will preserve the existing tree without editing it.';
-
 export type LeafConditionDetails = {
   selectorPath: string;
   evaluatorName: string;
@@ -16,7 +13,6 @@ export type ControlConditionState = {
   evaluatorId: string;
   evaluator: AnyEvaluatorDefinition | undefined;
   canEditLeafCondition: boolean;
-  conditionEditingMessage: string | null;
 };
 
 function getLeafConditionDetails(
@@ -46,9 +42,6 @@ export function getControlConditionState(
     evaluatorId,
     evaluator,
     canEditLeafCondition: Boolean(leafCondition),
-    conditionEditingMessage: leafCondition
-      ? null
-      : COMPOSITE_CONDITION_EDITING_MESSAGE,
   };
 }