From 2c40903fce313ba56d9107505388f6577ea15862 Mon Sep 17 00:00:00 2001
From: Lev Neiman <lev.neiman@gmail.com>
Date: Wed, 1 Apr 2026 12:49:03 -0700
Subject: [PATCH 1/6] feat(ui): add control template editing and creation
 support

- Add template-backed control detection and "Template" badge in controls list
- Add TemplateEditContent with parameter form, read-only summary, and
  Parameters/Full JSON mode toggle for editing template-backed controls
- Add TemplateParamForm component that auto-generates form inputs from
  template parameter definitions (string, string_list, enum, boolean, regex_re2)
- Add TemplatePreview component with debounced render endpoint calls that
  strips template metadata from the preview output
- Wire enable/disable toggle to use PATCH for template-backed controls
  (avoids 409 from PUT /data on template-backed controls)
- Template-backed controls can be created via "From JSON" by pasting a
  TemplateControlInput payload
- Add template types and render API method to client (manual until
  OpenAPI types are regenerated)
- Add 13 Playwright tests covering template badge, parameter form editing,
  JSON toggle, preview stripping, and raw control regression
---
 ui/src/core/api/client.ts                     |  19 +
 ui/src/core/api/types.ts                      |  69 +++
 .../core/components/template-param-form.tsx   | 175 ++++++++
 ui/src/core/components/template-preview.tsx   | 136 ++++++
 .../hooks/query-hooks/use-render-template.ts  |  28 ++
 .../agent-detail/agent-detail.tsx             |   3 +
 .../agent-detail/controls/table-columns.tsx   |  92 ++--
 .../modals/add-new-control/index.tsx          |   2 +
 .../modals/create-from-template/index.tsx     | 352 +++++++++++++++
 .../edit-control/edit-control-content.tsx     |  24 +-
 .../edit-control/template-edit-content.tsx    | 417 ++++++++++++++++++
 ui/tests/control-templates.spec.ts            | 282 ++++++++++++
 ui/tests/fixtures.ts                          | 138 ++++++
 13 files changed, 1701 insertions(+), 36 deletions(-)
 create mode 100644 ui/src/core/components/template-param-form.tsx
 create mode 100644 ui/src/core/components/template-preview.tsx
 create mode 100644 ui/src/core/hooks/query-hooks/use-render-template.ts
 create mode 100644 ui/src/core/page-components/agent-detail/modals/create-from-template/index.tsx
 create mode 100644 ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx
 create mode 100644 ui/tests/control-templates.spec.ts

diff --git a/ui/src/core/api/client.ts b/ui/src/core/api/client.ts
index 6fec427a..f8d114c6 100644
--- a/ui/src/core/api/client.ts
+++ b/ui/src/core/api/client.ts
@@ -8,6 +8,8 @@ import type {
   InitAgentRequestBody,
   ListAgentsQueryParams,
   PatchControlRequest,
+  RenderControlTemplateRequest,
+  RenderControlTemplateResponse,
   SetControlDataRequest,
   ValidateControlDataRequest,
   ValidateControlDataResponse,
@@ -209,6 +211,23 @@ export const api = {
         },
       }),
   },
+  controlTemplates: {
+    render: async (data: RenderControlTemplateRequest) => {
+      const res = await fetch(`${API_URL}/api/v1/control-templates/render`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+      const body = await res.json();
+      if (!res.ok) return { data: undefined, error: body, response: res };
+      return {
+        data: body as RenderControlTemplateResponse,
+        error: undefined,
+        response: res,
+      };
+    },
+  },
   policies: {
     create: (name: string) =>
       apiClient.PUT('/api/v1/policies', { body: { name } }),
diff --git a/ui/src/core/api/types.ts b/ui/src/core/api/types.ts
index 136d54eb..dfdfc3fa 100644
--- a/ui/src/core/api/types.ts
+++ b/ui/src/core/api/types.ts
@@ -111,6 +111,75 @@ export type ListControlsResponse =
 
 export type AgentRef = components['schemas']['AgentRef'];
 
+// =============================================================================
+// Template Types (manual until API types are regenerated)
+// =============================================================================
+
+export type TemplateValue = string | boolean | string[];
+
+export type TemplateParameterBase = {
+  label: string;
+  description?: string | null;
+  required?: boolean;
+  ui_hint?: string | null;
+};
+
+export type StringTemplateParameter = TemplateParameterBase & {
+  type: 'string';
+  default?: string | null;
+  placeholder?: string | null;
+};
+
+export type StringListTemplateParameter = TemplateParameterBase & {
+  type: 'string_list';
+  default?: string[] | null;
+  placeholder?: string[] | null;
+};
+
+export type EnumTemplateParameter = TemplateParameterBase & {
+  type: 'enum';
+  allowed_values: string[];
+  default?: string | null;
+};
+
+export type BooleanTemplateParameter = TemplateParameterBase & {
+  type: 'boolean';
+  default?: boolean | null;
+};
+
+export type RegexTemplateParameter = TemplateParameterBase & {
+  type: 'regex_re2';
+  default?: string | null;
+  placeholder?: string | null;
+};
+
+export type TemplateParameterDefinition =
+  | StringTemplateParameter
+  | StringListTemplateParameter
+  | EnumTemplateParameter
+  | BooleanTemplateParameter
+  | RegexTemplateParameter;
+
+export type TemplateDefinition = {
+  description?: string | null;
+  parameters: Record<string, TemplateParameterDefinition>;
+  definition_template: unknown;
+};
+
+export type TemplateControlInput = {
+  template: TemplateDefinition;
+  template_values: Record<string, TemplateValue>;
+};
+
+export type RenderControlTemplateRequest = {
+  template: TemplateDefinition;
+  template_values: Record<string, TemplateValue>;
+};
+
+export type RenderControlTemplateResponse = {
+  control: ControlDefinition;
+};
+
 // Helper type to extract query parameters from operations
 type ExtractQueryParams<T> = T extends { parameters: { query?: infer Q } }
   ? Q
diff --git a/ui/src/core/components/template-param-form.tsx b/ui/src/core/components/template-param-form.tsx
new file mode 100644
index 00000000..2591fde4
--- /dev/null
+++ b/ui/src/core/components/template-param-form.tsx
@@ -0,0 +1,175 @@
+import {
+  Select,
+  Stack,
+  Switch,
+  TagsInput,
+  Text,
+  TextInput,
+} from '@mantine/core';
+import { useMemo } from 'react';
+
+import type {
+  TemplateDefinition,
+  TemplateParameterDefinition,
+  TemplateValue,
+} from '@/core/api/types';
+
+import {
+  LabelWithTooltip,
+  labelPropsInline,
+} from './label-with-tooltip';
+
+type TemplateParamFormProps = {
+  template: TemplateDefinition;
+  values: Record<string, TemplateValue>;
+  onChange: (values: Record<string, TemplateValue>) => void;
+  errors?: Record<string, string>;
+};
+
+function paramLabel(
+  name: string,
+  param: TemplateParameterDefinition
+): React.ReactNode {
+  if (param.description) {
+    return <LabelWithTooltip label={param.label} tooltip={param.description} />;
+  }
+  return param.label;
+}
+
+function ParameterInput({
+  name,
+  param,
+  value,
+  error,
+  onChangeValue,
+}: {
+  name: string;
+  param: TemplateParameterDefinition;
+  value: TemplateValue | undefined;
+  error?: string;
+  onChangeValue: (name: string, value: TemplateValue) => void;
+}) {
+  const label = paramLabel(name, param);
+  const isRequired = param.required !== false;
+
+  switch (param.type) {
+    case 'string':
+      return (
+        <TextInput
+          label={label}
+          labelProps={param.description ? labelPropsInline : undefined}
+          placeholder={param.placeholder ?? undefined}
+          required={isRequired}
+          value={(value as string) ?? ''}
+          onChange={(e) => onChangeValue(name, e.currentTarget.value)}
+          error={error}
+          size="sm"
+        />
+      );
+
+    case 'string_list':
+      return (
+        <TagsInput
+          label={label}
+          labelProps={param.description ? labelPropsInline : undefined}
+          placeholder={
+            param.placeholder ? param.placeholder.join(', ') : 'Add items...'
+          }
+          required={isRequired}
+          value={Array.isArray(value) ? (value as string[]) : []}
+          onChange={(val) => onChangeValue(name, val)}
+          error={error}
+          size="sm"
+        />
+      );
+
+    case 'enum':
+      return (
+        <Select
+          label={label}
+          labelProps={param.description ? labelPropsInline : undefined}
+          data={param.allowed_values}
+          required={isRequired}
+          value={(value as string) ?? null}
+          onChange={(val) => {
+            if (val !== null) onChangeValue(name, val);
+          }}
+          error={error}
+          size="sm"
+        />
+      );
+
+    case 'boolean':
+      return (
+        <Switch
+          label={label}
+          checked={typeof value === 'boolean' ? value : false}
+          onChange={(e) => onChangeValue(name, e.currentTarget.checked)}
+          color="green.5"
+          size="md"
+          error={error}
+        />
+      );
+
+    case 'regex_re2':
+      return (
+        <TextInput
+          label={label}
+          labelProps={param.description ? labelPropsInline : undefined}
+          placeholder={param.placeholder ?? 'RE2 regex pattern'}
+          required={isRequired}
+          value={(value as string) ?? ''}
+          onChange={(e) => onChangeValue(name, e.currentTarget.value)}
+          error={error}
+          size="sm"
+          styles={{ input: { fontFamily: 'monospace' } }}
+        />
+      );
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * Auto-generated parameter form driven by a TemplateDefinition's parameters.
+ * Renders one input per parameter, mapped by type.
+ */
+export function TemplateParamForm({
+  template,
+  values,
+  onChange,
+  errors,
+}: TemplateParamFormProps) {
+  const paramEntries = useMemo(
+    () => Object.entries(template.parameters),
+    [template.parameters]
+  );
+
+  const handleChangeValue = (name: string, newValue: TemplateValue) => {
+    onChange({ ...values, [name]: newValue });
+  };
+
+  if (paramEntries.length === 0) {
+    return (
+      <Text size="sm" c="dimmed">
+        This template has no configurable parameters.
+      </Text>
+    );
+  }
+
+  return (
+    <Stack gap="md">
+      {paramEntries.map(([name, param]) => (
+        <ParameterInput
+          key={name}
+          name={name}
+          param={param}
+          value={values[name]}
+          error={errors?.[name]}
+          onChangeValue={handleChangeValue}
+        />
+      ))}
+    </Stack>
+  );
+}
diff --git a/ui/src/core/components/template-preview.tsx b/ui/src/core/components/template-preview.tsx
new file mode 100644
index 00000000..bd8f385e
--- /dev/null
+++ b/ui/src/core/components/template-preview.tsx
@@ -0,0 +1,136 @@
+import {
+  Alert,
+  Box,
+  Collapse,
+  Group,
+  Loader,
+  Text,
+  Textarea,
+  UnstyledButton,
+} from '@mantine/core';
+import { useDebouncedCallback } from '@mantine/hooks';
+import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
+import { useCallback, useEffect, useState } from 'react';
+
+import { isApiError } from '@/core/api/errors';
+import type {
+  ProblemDetail,
+  TemplateDefinition,
+  TemplateValue,
+} from '@/core/api/types';
+import { useRenderTemplate } from '@/core/hooks/query-hooks/use-render-template';
+
+type TemplatePreviewProps = {
+  template: TemplateDefinition;
+  values: Record<string, TemplateValue>;
+  /** Called when the render endpoint returns parameter-level errors. */
+  onErrors?: (errors: Record<string, string>) => void;
+  debounceMs?: number;
+  defaultOpen?: boolean;
+};
+
+/**
+ * Calls the render preview endpoint and displays the rendered control JSON.
+ */
+export function TemplatePreview({
+  template,
+  values,
+  onErrors,
+  debounceMs = 600,
+  defaultOpen = false,
+}: TemplatePreviewProps) {
+  const [opened, setOpened] = useState(defaultOpen);
+  const [renderedJson, setRenderedJson] = useState('');
+  const [renderError, setRenderError] = useState<ProblemDetail | null>(null);
+  const renderTemplate = useRenderTemplate();
+
+  const doRender = useCallback(async () => {
+    setRenderError(null);
+    try {
+      const result = await renderTemplate.mutateAsync({
+        template,
+        template_values: values,
+      });
+      if (result?.control) {
+        // Strip template authoring metadata — show only what the engine sees.
+        const { template: _t, template_values: _tv, ...rendered } = result.control as Record<string, unknown>;
+        setRenderedJson(JSON.stringify(rendered, null, 2));
+        onErrors?.({});
+      }
+    } catch (error) {
+      if (isApiError(error)) {
+        setRenderError(error.problemDetail);
+        const paramErrors: Record<string, string> = {};
+        for (const item of error.problemDetail.errors ?? []) {
+          if (item.field?.startsWith('template_values.')) {
+            const paramName = item.field.replace('template_values.', '');
+            paramErrors[paramName] = item.message;
+          }
+        }
+        if (Object.keys(paramErrors).length > 0) {
+          onErrors?.(paramErrors);
+        }
+      }
+      setRenderedJson('');
+    }
+  }, [template, values, renderTemplate, onErrors]);
+
+  const debouncedRender = useDebouncedCallback(doRender, debounceMs);
+
+  useEffect(() => {
+    debouncedRender();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [template, values]);
+
+  return (
+    <Box>
+      <UnstyledButton onClick={() => setOpened((o) => !o)} w="100%">
+        <Group gap="xs" mb={opened ? 'xs' : 0}>
+          {opened ? (
+            <IconChevronDown size={14} />
+          ) : (
+            <IconChevronRight size={14} />
+          )}
+          <Text size="sm" fw={500}>
+            Preview rendered control
+          </Text>
+          {renderTemplate.isPending && <Loader size={14} />}
+        </Group>
+      </UnstyledButton>
+
+      <Collapse in={opened}>
+        {renderError ? (
+          <Alert color="red" variant="light" title="Render error" mb="xs">
+            <Text size="xs">{renderError.detail}</Text>
+            {renderError.errors?.map((err, i) => (
+              <Text key={i} size="xs" c="dimmed" mt={2}>
+                {err.field}: {err.message}
+              </Text>
+            ))}
+          </Alert>
+        ) : null}
+
+        <Textarea
+          value={renderedJson}
+          readOnly
+          autosize
+          minRows={6}
+          maxRows={16}
+          styles={{
+            input: {
+              fontFamily: 'monospace',
+              fontSize: 12,
+              backgroundColor: 'var(--mantine-color-dark-7)',
+              color: 'var(--mantine-color-gray-3)',
+            },
+          }}
+          placeholder={
+            renderTemplate.isPending
+              ? 'Rendering...'
+              : 'Fill in parameters to see a preview'
+          }
+        />
+      </Collapse>
+    </Box>
+  );
+}
diff --git a/ui/src/core/hooks/query-hooks/use-render-template.ts b/ui/src/core/hooks/query-hooks/use-render-template.ts
new file mode 100644
index 00000000..e8d7743b
--- /dev/null
+++ b/ui/src/core/hooks/query-hooks/use-render-template.ts
@@ -0,0 +1,28 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { api } from '@/core/api/client';
+import { parseApiError } from '@/core/api/errors';
+import type { RenderControlTemplateRequest } from '@/core/api/types';
+
+/**
+ * Mutation hook to render a control template preview without persisting.
+ */
+export function useRenderTemplate() {
+  return useMutation({
+    mutationFn: async (request: RenderControlTemplateRequest) => {
+      const { data, error, response } = await api.controlTemplates.render(
+        request
+      );
+
+      if (error) {
+        throw parseApiError(
+          error,
+          'Failed to render template',
+          response?.status
+        );
+      }
+
+      return data;
+    },
+  });
+}
diff --git a/ui/src/core/page-components/agent-detail/agent-detail.tsx b/ui/src/core/page-components/agent-detail/agent-detail.tsx
index 497d4df8..191f9be3 100644
--- a/ui/src/core/page-components/agent-detail/agent-detail.tsx
+++ b/ui/src/core/page-components/agent-detail/agent-detail.tsx
@@ -24,6 +24,7 @@ import { useAgent } from '@/core/hooks/query-hooks/use-agent';
 import { useAgentControls } from '@/core/hooks/query-hooks/use-agent-controls';
 import { useHasMonitorData } from '@/core/hooks/query-hooks/use-has-monitor-data';
 import { useUpdateControl } from '@/core/hooks/query-hooks/use-update-control';
+import { useUpdateControlMetadata } from '@/core/hooks/query-hooks/use-update-control-metadata';
 import { useModalRoute } from '@/core/hooks/use-modal-route';
 import { useQueryParam } from '@/core/hooks/use-query-param';
 import { useTimeRangePreference } from '@/core/hooks/use-time-range-preference';
@@ -68,6 +69,7 @@ const AgentDetailPage = ({ agentId, defaultTab }: AgentDetailPageProps) => {
     });
 
   const updateControl = useUpdateControl();
+  const updateControlMetadata = useUpdateControlMetadata();
 
   const handleCloseEditModal = () => {
     closeModal();
@@ -142,6 +144,7 @@ const AgentDetailPage = ({ agentId, defaultTab }: AgentDetailPageProps) => {
   const columns = useControlsTableColumns({
     agentId,
     updateControl,
+    updateControlMetadata,
     removeControlFromAgent,
     onEditControl: handleEditControl,
     onDeleteControl: handleDeleteControl,
diff --git a/ui/src/core/page-components/agent-detail/controls/table-columns.tsx b/ui/src/core/page-components/agent-detail/controls/table-columns.tsx
index 64fce183..c79eef4c 100644
--- a/ui/src/core/page-components/agent-detail/controls/table-columns.tsx
+++ b/ui/src/core/page-components/agent-detail/controls/table-columns.tsx
@@ -7,6 +7,7 @@ import { useMemo } from 'react';
 import type { Control } from '@/core/api/types';
 import type { useRemoveControlFromAgent } from '@/core/hooks/query-hooks/use-remove-control-from-agent';
 import type { useUpdateControl } from '@/core/hooks/query-hooks/use-update-control';
+import type { useUpdateControlMetadata } from '@/core/hooks/query-hooks/use-update-control-metadata';
 import { openActionConfirmModal } from '@/core/utils/modals';
 
 import { getStepTypeLabelAndColor } from './utils';
@@ -14,6 +15,7 @@ import { getStepTypeLabelAndColor } from './utils';
 type UseControlsTableColumnsParams = {
   agentId: string;
   updateControl: ReturnType<typeof useUpdateControl>;
+  updateControlMetadata: ReturnType<typeof useUpdateControlMetadata>;
   removeControlFromAgent: ReturnType<typeof useRemoveControlFromAgent>;
   onEditControl: (control: Control) => void;
   onDeleteControl: (control: Control) => void;
@@ -22,6 +24,7 @@ type UseControlsTableColumnsParams = {
 export function useControlsTableColumns({
   agentId,
   updateControl,
+  updateControlMetadata,
   removeControlFromAgent,
   onEditControl,
   onDeleteControl,
@@ -35,6 +38,8 @@ export function useControlsTableColumns({
         cell: ({ row }: { row: { original: Control } }) => {
           const control = row.original;
           const enabled = control.control?.enabled ?? false;
+          const ctrl = control.control as Record<string, unknown> | undefined;
+          const isTemplate = ctrl?.template != null;
           return (
             <Switch
               checked={enabled}
@@ -50,38 +55,43 @@ export function useControlsTableColumns({
                         : `Disable "${control.name}"?`}
                     </Text>
                   ),
-                  onConfirm: () =>
-                    updateControl.mutate(
-                      {
-                        agentId,
-                        controlId: control.id,
-                        definition: {
-                          ...control.control,
-                          enabled: newEnabled,
-                        },
+                  onConfirm: () => {
+                    const callbacks = {
+                      onSuccess: () => {
+                        notifications.show({
+                          title: newEnabled
+                            ? 'Control enabled'
+                            : 'Control disabled',
+                          message: `"${control.name}" has been ${newEnabled ? 'enabled' : 'disabled'}.`,
+                          color: 'green',
+                        });
                       },
-                      {
-                        onSuccess: () => {
-                          notifications.show({
-                            title: newEnabled
-                              ? 'Control enabled'
-                              : 'Control disabled',
-                            message: `"${control.name}" has been ${newEnabled ? 'enabled' : 'disabled'}.`,
-                            color: 'green',
-                          });
-                        },
-                        onError: (error) => {
-                          notifications.show({
-                            title: 'Failed to update control',
-                            message:
-                              error instanceof Error
-                                ? error.message
-                                : 'An unexpected error occurred',
-                            color: 'red',
-                          });
+                      onError: (error: Error) => {
+                        notifications.show({
+                          title: 'Failed to update control',
+                          message: error.message || 'An unexpected error occurred',
+                          color: 'red',
+                        });
+                      },
+                    };
+
+                    if (isTemplate) {
+                      // Template-backed controls use PATCH to avoid 409 on PUT /data
+                      updateControlMetadata.mutate(
+                        { agentId, controlId: control.id, data: { enabled: newEnabled } },
+                        callbacks,
+                      );
+                    } else {
+                      updateControl.mutate(
+                        {
+                          agentId,
+                          controlId: control.id,
+                          definition: { ...control.control, enabled: newEnabled },
                         },
-                      }
-                    ),
+                        callbacks,
+                      );
+                    }
+                  },
                 });
               }}
             />
@@ -93,11 +103,22 @@ export function useControlsTableColumns({
         header: 'Control',
         accessorKey: 'name',
         size: 280,
-        cell: ({ row }: { row: { original: Control } }) => (
-          <Text size="sm" fw={500}>
-            {row.original.name}
-          </Text>
-        ),
+        cell: ({ row }: { row: { original: Control } }) => {
+          const ctrl = row.original.control as Record<string, unknown> | undefined;
+          const isTemplate = ctrl?.template != null;
+          return (
+            <Group gap={6} wrap="nowrap">
+              <Text size="sm" fw={500}>
+                {row.original.name}
+              </Text>
+              {isTemplate ? (
+                <Badge variant="light" color="blue" size="xs">
+                  Template
+                </Badge>
+              ) : null}
+            </Group>
+          );
+        },
       },
       {
         id: 'step_types',
@@ -205,6 +226,7 @@ export function useControlsTableColumns({
     [
       agentId,
       updateControl,
+      updateControlMetadata,
       removeControlFromAgent.isPending,
       removeControlFromAgent.variables?.controlId,
       onEditControl,
diff --git a/ui/src/core/page-components/agent-detail/modals/add-new-control/index.tsx b/ui/src/core/page-components/agent-detail/modals/add-new-control/index.tsx
index 69a029d6..17c789ff 100644
--- a/ui/src/core/page-components/agent-detail/modals/add-new-control/index.tsx
+++ b/ui/src/core/page-components/agent-detail/modals/add-new-control/index.tsx
@@ -123,6 +123,7 @@ export function AddNewControlModal({
     });
   };
 
+
   const handleEditModalClose = () => {
     closeSubmodal();
   };
@@ -360,6 +361,7 @@ export function AddNewControlModal({
           ) : null}
         </ErrorBoundary>
       </Modal>
+
     </Modal>
   );
 }
diff --git a/ui/src/core/page-components/agent-detail/modals/create-from-template/index.tsx b/ui/src/core/page-components/agent-detail/modals/create-from-template/index.tsx
new file mode 100644
index 00000000..da8c2c0d
--- /dev/null
+++ b/ui/src/core/page-components/agent-detail/modals/create-from-template/index.tsx
@@ -0,0 +1,352 @@
+import {
+  Alert,
+  Box,
+  Divider,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  Textarea,
+  TextInput,
+  Title,
+} from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { Button } from '@rungalileo/jupiter-ds';
+import { IconArrowLeft, IconX } from '@tabler/icons-react';
+import { useCallback, useState } from 'react';
+
+import { isApiError } from '@/core/api/errors';
+import type {
+  ProblemDetail,
+  TemplateControlInput,
+  TemplateDefinition,
+  TemplateValue,
+} from '@/core/api/types';
+import { TemplateParamForm } from '@/core/components/template-param-form';
+import { TemplatePreview } from '@/core/components/template-preview';
+import { useAddControlToAgent } from '@/core/hooks/query-hooks/use-add-control-to-agent';
+import { openActionConfirmModal } from '@/core/utils/modals';
+
+import { sanitizeControlNamePart } from '../edit-control/utils';
+
+type CreateFromTemplateProps = {
+  agentId: string;
+  agentName: string;
+  onClose: () => void;
+  onSuccess: () => void;
+};
+
+type Step = 'paste' | 'fill';
+
+function parseTemplateJson(text: string): TemplateDefinition | string {
+  if (!text.trim()) return 'Paste a template definition JSON to continue.';
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return 'Invalid JSON. Fix syntax errors and try again.';
+  }
+  if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+    return 'Template must be a JSON object.';
+  }
+  const obj = parsed as Record<string, unknown>;
+  if (!obj.definition_template) {
+    return 'Missing required field "definition_template".';
+  }
+  if (typeof obj.definition_template !== 'object' || obj.definition_template === null) {
+    return '"definition_template" must be a JSON object.';
+  }
+  // parameters is optional (defaults to empty dict on the server)
+  if (obj.parameters !== undefined) {
+    if (typeof obj.parameters !== 'object' || obj.parameters === null || Array.isArray(obj.parameters)) {
+      return '"parameters" must be a JSON object.';
+    }
+  }
+  return parsed as TemplateDefinition;
+}
+
+function buildDefaultValues(
+  template: TemplateDefinition
+): Record<string, TemplateValue> {
+  const defaults: Record<string, TemplateValue> = {};
+  for (const [name, param] of Object.entries(template.parameters ?? {})) {
+    if (param.default != null) {
+      defaults[name] = param.default as TemplateValue;
+    } else if (param.type === 'boolean') {
+      defaults[name] = false;
+    } else if (param.type === 'string_list') {
+      defaults[name] = [];
+    } else if (param.type === 'string' || param.type === 'regex_re2') {
+      defaults[name] = '';
+    } else if (param.type === 'enum' && param.allowed_values.length > 0) {
+      defaults[name] = param.allowed_values[0];
+    }
+  }
+  return defaults;
+}
+
+export function CreateFromTemplate({
+  agentId,
+  agentName,
+  onClose,
+  onSuccess,
+}: CreateFromTemplateProps) {
+  const [step, setStep] = useState<Step>('paste');
+  const [jsonText, setJsonText] = useState('');
+  const [parseError, setParseError] = useState<string | null>(null);
+  const [template, setTemplate] = useState<TemplateDefinition | null>(null);
+  const [templateValues, setTemplateValues] = useState<
+    Record<string, TemplateValue>
+  >({});
+  const [controlName, setControlName] = useState('');
+  const [paramErrors, setParamErrors] = useState<Record<string, string>>({});
+  const [apiError, setApiError] = useState<ProblemDetail | null>(null);
+
+  const addControlToAgent = useAddControlToAgent();
+
+  const handleContinue = () => {
+    const result = parseTemplateJson(jsonText);
+    if (typeof result === 'string') {
+      setParseError(result);
+      return;
+    }
+    setParseError(null);
+    setTemplate(result);
+    setTemplateValues(buildDefaultValues(result));
+    setControlName(
+      `template-control-for-${sanitizeControlNamePart(agentName)}`
+    );
+    setStep('fill');
+  };
+
+  const handleBack = () => {
+    setStep('paste');
+    setParamErrors({});
+    setApiError(null);
+  };
+
+  const handlePreviewErrors = useCallback(
+    (errors: Record<string, string>) => {
+      setParamErrors(errors);
+    },
+    []
+  );
+
+  const handleSave = () => {
+    if (!template) return;
+    if (!controlName.trim()) return;
+
+    const templateInput: TemplateControlInput = {
+      template,
+      template_values: templateValues,
+    };
+
+    openActionConfirmModal({
+      title: 'Create control?',
+      children: (
+        <Text size="sm" c="dimmed">
+          This will create a template-backed control and add it to the agent.
+        </Text>
+      ),
+      onConfirm: async () => {
+        setApiError(null);
+        try {
+          await addControlToAgent.mutateAsync({
+            agentId,
+            controlName: controlName.trim(),
+            definition: templateInput as never,
+          });
+          notifications.show({
+            title: 'Control created',
+            message: `"${controlName.trim()}" has been added to this agent.`,
+            color: 'green',
+          });
+          onSuccess();
+        } catch (error) {
+          if (isApiError(error)) {
+            const pd = error.problemDetail;
+            setApiError(pd);
+            if (pd.errors) {
+              const newParamErrors: Record<string, string> = {};
+              for (const item of pd.errors) {
+                if (item.field?.startsWith('template_values.')) {
+                  const paramName = item.field.replace(
+                    'template_values.',
+                    ''
+                  );
+                  newParamErrors[paramName] = item.message;
+                }
+              }
+              if (Object.keys(newParamErrors).length > 0) {
+                setParamErrors(newParamErrors);
+              }
+            }
+          } else {
+            notifications.show({
+              title: 'Failed to create control',
+              message:
+                error instanceof Error
+                  ? error.message
+                  : 'An unexpected error occurred',
+              color: 'red',
+            });
+          }
+        }
+      },
+    });
+  };
+
+  return (
+    <Box>
+      {/* Header */}
+      <Box p="md">
+        <Group justify="space-between" mb="xs">
+          <Title order={3} fw={600}>
+            Create from Template
+          </Title>
+          <Button size="sm" onClick={onClose} data-testid="close-template-modal-button">
+            <IconX size={16} />
+          </Button>
+        </Group>
+        <Text size="sm" c="dimmed">
+          {step === 'paste'
+            ? 'Paste a template definition JSON to get started'
+            : 'Fill in the template parameters and create the control'}
+        </Text>
+      </Box>
+      <Divider />
+
+      {step === 'paste' ? (
+        <Box p="md">
+          <Stack gap="md">
+            <Textarea
+              label="Template definition (JSON)"
+              placeholder={`{
+  "parameters": {
+    "pattern": {
+      "type": "regex_re2",
+      "label": "Pattern"
+    }
+  },
+  "definition_template": {
+    "execution": "server",
+    "scope": { "stages": ["pre"] },
+    "condition": {
+      "selector": { "path": "input" },
+      "evaluator": {
+        "name": "regex",
+        "config": { "pattern": { "$param": "pattern" } }
+      }
+    },
+    "action": { "decision": "deny" }
+  }
+}`}
+              value={jsonText}
+              onChange={(e) => {
+                setJsonText(e.currentTarget.value);
+                setParseError(null);
+              }}
+              autosize
+              minRows={12}
+              maxRows={20}
+              error={parseError}
+              styles={{
+                input: { fontFamily: 'monospace', fontSize: 12 },
+              }}
+            />
+
+            <Group justify="flex-end">
+              <Button variant="outline" onClick={onClose} data-testid="cancel-template-paste">
+                Cancel
+              </Button>
+              <Button variant="filled" onClick={handleContinue} data-testid="continue-template">
+                Continue
+              </Button>
+            </Group>
+          </Stack>
+        </Box>
+      ) : template ? (
+        <Box p="md">
+          <Stack gap="md">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleBack}
+              leftSection={<IconArrowLeft size={14} />}
+              style={{ alignSelf: 'flex-start' }}
+              data-testid="back-to-template-json"
+            >
+              Back to template JSON
+            </Button>
+
+            <TextInput
+              label="Control name"
+              required
+              value={controlName}
+              onChange={(e) => setControlName(e.currentTarget.value)}
+              size="sm"
+            />
+
+            {template.description ? (
+              <Paper withBorder p="sm" radius="sm">
+                <Text size="xs" c="dimmed" fw={500} mb={4}>
+                  Template
+                </Text>
+                <Text size="sm">{template.description}</Text>
+              </Paper>
+            ) : null}
+
+            <Box>
+              <Text size="sm" fw={500} mb="xs">
+                Parameters
+              </Text>
+              <TemplateParamForm
+                template={template}
+                values={templateValues}
+                onChange={setTemplateValues}
+                errors={paramErrors}
+              />
+            </Box>
+
+            <TemplatePreview
+              template={template}
+              values={templateValues}
+              onErrors={handlePreviewErrors}
+            />
+
+            {apiError ? (
+              <Alert
+                color="red"
+                variant="light"
+                title={apiError.title || 'Error'}
+              >
+                <Text size="xs">{apiError.detail}</Text>
+                {apiError.hint ? (
+                  <Text size="xs" c="dimmed" mt={4}>
+                    {apiError.hint}
+                  </Text>
+                ) : null}
+              </Alert>
+            ) : null}
+
+            <Divider />
+
+            <Group justify="flex-end">
+              <Button variant="outline" onClick={onClose} data-testid="cancel-template-create">
+                Cancel
+              </Button>
+              <Button
+                variant="filled"
+                onClick={handleSave}
+                loading={addControlToAgent.isPending}
+                data-testid="save-template-control"
+              >
+                Create Control
+              </Button>
+            </Group>
+          </Stack>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
diff --git a/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx b/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx
index 9cb71e6e..baab82ac 100644
--- a/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx
+++ b/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx
@@ -36,6 +36,7 @@ import {
 import { ControlDefinitionForm } from './control-definition-form';
 import { EvaluatorConfigSection } from './evaluator-config-section';
 import { JsonEditorView } from './json-editor-view';
+import { TemplateEditContent } from './template-edit-content';
 import type {
   ControlDefinitionFormValues,
   ControlEditorMode,
@@ -44,6 +45,11 @@ import type {
 import { useEvaluatorConfigState } from './use-evaluator-config-state';
 import { applyApiErrorsToForms } from './utils';
 
+function isTemplateBacked(control: Control): boolean {
+  const def = control.control as Record<string, unknown> | undefined;
+  return def?.template != null && def?.template_values != null;
+}
+
 const EVALUATOR_CONFIG_HEIGHT = 450;
 const JSON_EDITOR_HEIGHT = 520;
 type ValidationStatus = 'idle' | 'validating' | 'valid' | 'invalid';
@@ -63,7 +69,23 @@ export type EditControlContentProps = {
   initialEditorMode?: ControlEditorMode;
 };
 
-export const EditControlContent = ({
+export const EditControlContent = (props: EditControlContentProps) => {
+  // Template-backed controls use a dedicated editor in edit mode
+  if (props.mode !== 'create' && isTemplateBacked(props.control)) {
+    return (
+      <TemplateEditContent
+        control={props.control}
+        agentId={props.agentId}
+        onClose={props.onClose}
+        onSuccess={props.onSuccess}
+      />
+    );
+  }
+
+  return <RawEditControlContent {...props} />;
+};
+
+const RawEditControlContent = ({
   control,
   agentId,
   mode = 'edit',
diff --git a/ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx b/ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx
new file mode 100644
index 00000000..f613ef6c
--- /dev/null
+++ b/ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx
@@ -0,0 +1,417 @@
+import {
+  Alert,
+  Badge,
+  Box,
+  Divider,
+  Grid,
+  Group,
+  Paper,
+  SegmentedControl,
+  Stack,
+  Text,
+  Textarea,
+  TextInput,
+} from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { Button } from '@rungalileo/jupiter-ds';
+import { useCallback, useEffect, useState } from 'react';
+
+import { isApiError } from '@/core/api/errors';
+import type {
+  Control,
+  ProblemDetail,
+  TemplateControlInput,
+  TemplateValue,
+} from '@/core/api/types';
+import { TemplateParamForm } from '@/core/components/template-param-form';
+import { TemplatePreview } from '@/core/components/template-preview';
+import { useUpdateControl } from '@/core/hooks/query-hooks/use-update-control';
+import { useUpdateControlMetadata } from '@/core/hooks/query-hooks/use-update-control-metadata';
+import { openActionConfirmModal } from '@/core/utils/modals';
+
+import { ApiErrorAlert } from './api-error-alert';
+
+type TemplateEditContentProps = {
+  control: Control;
+  agentId: string;
+  onClose: () => void;
+  onSuccess?: () => void;
+};
+
+type EditorMode = 'params' | 'json';
+
+/**
+ * Editor for template-backed controls. Shows the parameter form by default,
+ * with a toggle to edit the full template JSON.
+ */
+export function TemplateEditContent({
+  control,
+  agentId,
+  onClose,
+  onSuccess,
+}: TemplateEditContentProps) {
+  // Access template fields via cast — these exist at runtime but aren't in the
+  // generated API types yet. Will be cleaned up after type regeneration.
+  const definitionRaw = control.control as Record<string, unknown>;
+  const template = definitionRaw.template as TemplateControlInput['template'];
+  const storedValues = definitionRaw.template_values as Record<
+    string,
+    TemplateValue
+  > | undefined;
+
+  const [editorMode, setEditorMode] = useState<EditorMode>('params');
+  const [controlName, setControlName] = useState(control.name);
+  const [templateValues, setTemplateValues] = useState<
+    Record<string, TemplateValue>
+  >(storedValues ?? {});
+  const [paramErrors, setParamErrors] = useState<Record<string, string>>({});
+  const [apiError, setApiError] = useState<ProblemDetail | null>(null);
+  const [nameError, setNameError] = useState<string | null>(null);
+
+  // JSON editor state
+  const [jsonText, setJsonText] = useState('');
+  const [jsonError, setJsonError] = useState<string | null>(null);
+
+  const updateControl = useUpdateControl();
+  const updateControlMetadata = useUpdateControlMetadata();
+  const isPending = updateControl.isPending || updateControlMetadata.isPending;
+
+  // Reset state when control changes
+  useEffect(() => {
+    setControlName(control.name);
+    const raw = control.control as Record<string, unknown>;
+    const vals = raw.template_values as Record<string, TemplateValue> | undefined;
+    setTemplateValues(vals ?? {});
+    setParamErrors({});
+    setApiError(null);
+    setNameError(null);
+    setEditorMode('params');
+    setJsonText('');
+    setJsonError(null);
+  }, [control]);
+
+  const handlePreviewErrors = useCallback(
+    (errors: Record<string, string>) => {
+      setParamErrors(errors);
+    },
+    []
+  );
+
+  const buildTemplateInput = useCallback((): TemplateControlInput => {
+    return {
+      template: template as TemplateControlInput['template'],
+      template_values: templateValues,
+    };
+  }, [template, templateValues]);
+
+  const handleEditorModeChange = (value: string) => {
+    const next = value as EditorMode;
+    if (next === editorMode) return;
+
+    if (next === 'json') {
+      // Params → JSON: serialize current state
+      const input = buildTemplateInput();
+      setJsonText(JSON.stringify(input, null, 2));
+      setJsonError(null);
+      setEditorMode('json');
+      return;
+    }
+
+    // JSON → Params: parse and sync back
+    try {
+      const parsed = JSON.parse(jsonText) as TemplateControlInput;
+      if (!parsed.template?.definition_template) {
+        setJsonError('JSON must contain a "template" object with "definition_template".');
+        return;
+      }
+      setTemplateValues(parsed.template_values ?? {});
+      setJsonError(null);
+      setEditorMode('params');
+    } catch {
+      setJsonError('Invalid JSON. Fix syntax errors before switching to Parameters.');
+    }
+  };
+
+  const handleSave = () => {
+    if (!controlName.trim()) {
+      setNameError('Control name is required');
+      return;
+    }
+    setNameError(null);
+
+    let templateInput: TemplateControlInput;
+
+    if (editorMode === 'json') {
+      try {
+        templateInput = JSON.parse(jsonText) as TemplateControlInput;
+        if (!templateInput.template?.definition_template) {
+          setJsonError('JSON must contain a "template" object with "definition_template".');
+          return;
+        }
+      } catch {
+        setJsonError('Invalid JSON. Fix syntax errors before saving.');
+        return;
+      }
+    } else {
+      templateInput = buildTemplateInput();
+    }
+
+    openActionConfirmModal({
+      title: 'Save changes?',
+      children: (
+        <Text size="sm" c="dimmed">
+          This will update the control configuration.
+        </Text>
+      ),
+      onConfirm: async () => {
+        setApiError(null);
+        try {
+          // Update name if changed
+          const nameChanged = controlName.trim() !== control.name.trim();
+          if (nameChanged) {
+            try {
+              await updateControlMetadata.mutateAsync({
+                agentId,
+                controlId: control.id,
+                data: { name: controlName.trim() },
+              });
+            } catch (renameError) {
+              if (isApiError(renameError)) {
+                const pd = renameError.problemDetail;
+                if (
+                  pd.status === 409 ||
+                  pd.error_code === 'CONTROL_NAME_CONFLICT'
+                ) {
+                  setNameError(pd.detail || 'Control name already exists');
+                } else {
+                  setApiError(pd);
+                }
+              } else {
+                notifications.show({
+                  title: 'Failed to rename control',
+                  message:
+                    renameError instanceof Error
+                      ? renameError.message
+                      : 'An unexpected error occurred',
+                  color: 'red',
+                });
+              }
+              return;
+            }
+          }
+
+          // Update template values
+          await updateControl.mutateAsync({
+            agentId,
+            controlId: control.id,
+            definition: templateInput as never,
+          });
+
+          notifications.show({
+            title: 'Control updated',
+            message: `"${controlName.trim()}" has been saved.`,
+            color: 'green',
+          });
+
+          if (onSuccess) {
+            onSuccess();
+          } else {
+            onClose();
+          }
+        } catch (error) {
+          if (isApiError(error)) {
+            const pd = error.problemDetail;
+            setApiError(pd);
+            if (pd.errors) {
+              const newParamErrors: Record<string, string> = {};
+              for (const item of pd.errors) {
+                if (item.field?.startsWith('template_values.')) {
+                  const paramName = item.field.replace(
+                    'template_values.',
+                    ''
+                  );
+                  newParamErrors[paramName] = item.message;
+                }
+              }
+              if (Object.keys(newParamErrors).length > 0) {
+                setParamErrors(newParamErrors);
+              }
+            }
+          } else {
+            notifications.show({
+              title: 'Failed to update control',
+              message:
+                error instanceof Error
+                  ? error.message
+                  : 'An unexpected error occurred',
+              color: 'red',
+            });
+          }
+        }
+      },
+    });
+  };
+
+  // Extract read-only summary from the rendered control
+  const action = (definitionRaw.action as { decision?: string })?.decision ?? 'unknown';
+  const execution = (definitionRaw.execution as string) ?? 'server';
+  const description = definitionRaw.description as string | undefined;
+
+  return (
+    <Box>
+      <Stack gap="md" mb="lg">
+        <Group justify="space-between" align="flex-end" wrap="nowrap">
+          <Box style={{ flex: 1, maxWidth: 420 }}>
+            <TextInput
+              label="Control name"
+              placeholder="Enter control name"
+              size="sm"
+              required
+              value={controlName}
+              onChange={(e) => {
+                setControlName(e.currentTarget.value);
+                setNameError(null);
+              }}
+              error={nameError}
+            />
+          </Box>
+          <Group gap="xs">
+            <Badge variant="light" color="blue" size="lg">
+              Template
+            </Badge>
+            <SegmentedControl
+              value={editorMode}
+              onChange={handleEditorModeChange}
+              data={[
+                { value: 'params', label: 'Parameters' },
+                { value: 'json', label: 'Full JSON' },
+              ]}
+              size="xs"
+            />
+          </Group>
+        </Group>
+      </Stack>
+
+      {editorMode === 'json' ? (
+        <Stack gap="md">
+          <Text size="sm" c="dimmed">
+            Edit the full template input JSON below. Control name stays separate.
+          </Text>
+          <Textarea
+            value={jsonText}
+            onChange={(e) => {
+              setJsonText(e.currentTarget.value);
+              setJsonError(null);
+            }}
+            error={jsonError}
+            autosize
+            minRows={16}
+            maxRows={28}
+            styles={{
+              input: { fontFamily: 'monospace', fontSize: 12 },
+            }}
+            data-testid="template-json-textarea"
+          />
+        </Stack>
+      ) : (
+        <Grid gutter="xl">
+          {/* Left panel: read-only summary */}
+          <Grid.Col span={4}>
+            <Stack gap="md">
+              {description ? (
+                <Box>
+                  <Text size="xs" fw={500} c="dimmed" mb={2}>
+                    Description
+                  </Text>
+                  <Text size="sm">{description}</Text>
+                </Box>
+              ) : null}
+              <Box>
+                <Text size="xs" fw={500} c="dimmed" mb={2}>
+                  Action
+                </Text>
+                <Badge variant="light" size="sm">
+                  {action}
+                </Badge>
+              </Box>
+              <Box>
+                <Text size="xs" fw={500} c="dimmed" mb={2}>
+                  Execution
+                </Text>
+                <Text size="sm">{execution}</Text>
+              </Box>
+              {template.description ? (
+                <Paper withBorder p="sm" radius="sm">
+                  <Text size="xs" c="dimmed" fw={500} mb={4}>
+                    Template
+                  </Text>
+                  <Text size="xs">{template.description}</Text>
+                </Paper>
+              ) : null}
+              <Alert variant="light" color="blue" p="xs">
+                <Text size="xs">
+                  Scope, condition, and action are managed by the template.
+                  Edit the parameters on the right to change control behavior.
+                </Text>
+              </Alert>
+            </Stack>
+          </Grid.Col>
+
+          {/* Right panel: parameter form + preview */}
+          <Grid.Col span={8}>
+            <Stack gap="md">
+              <Text size="sm" fw={500}>
+                Template Parameters
+              </Text>
+              <TemplateParamForm
+                template={template as TemplateControlInput['template']}
+                values={templateValues}
+                onChange={setTemplateValues}
+                errors={paramErrors}
+              />
+
+              <Divider />
+
+              <TemplatePreview
+                template={template as TemplateControlInput['template']}
+                values={templateValues}
+                onErrors={handlePreviewErrors}
+              />
+            </Stack>
+          </Grid.Col>
+        </Grid>
+      )}
+
+      {apiError ? (
+        <>
+          <Divider mt="xl" mb="md" />
+          <ApiErrorAlert
+            error={apiError}
+            unmappedErrors={[]}
+            onClose={() => setApiError(null)}
+          />
+        </>
+      ) : null}
+
+      <Divider mt="xl" mb="md" />
+      <Group justify="flex-end">
+        <Button
+          variant="outline"
+          onClick={onClose}
+          type="button"
+          data-testid="cancel-button"
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="filled"
+          onClick={handleSave}
+          data-testid="save-button"
+          loading={isPending}
+        >
+          Save
+        </Button>
+      </Group>
+    </Box>
+  );
+}
diff --git a/ui/tests/control-templates.spec.ts b/ui/tests/control-templates.spec.ts
new file mode 100644
index 00000000..303ea319
--- /dev/null
+++ b/ui/tests/control-templates.spec.ts
@@ -0,0 +1,282 @@
+import type { Page } from '@playwright/test';
+
+import { getAgentRoute } from '@/core/constants/agent-routes';
+
+import { expect, mockData, mockRoutes, test } from './fixtures';
+
+/** Set up mocks for template-backed control flows. */
+async function setupTemplateMocks(page: Page) {
+  await mockRoutes.agent(page, {
+    controls: { data: mockData.controlsWithTemplate },
+  });
+  await page.route('**/api/v1/controls/10/data', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ data: mockData.templateControl.control }),
+    });
+  });
+  await mockRoutes.controlRenderTemplate(page);
+  await mockRoutes.controlPatch(page);
+}
+
+test.describe('Control Templates', () => {
+  const agentId = 'customer-support-bot';
+  const controlsUrl = getAgentRoute(agentId, { tab: 'controls' });
+  const editTemplateUrl = getAgentRoute(agentId, {
+    tab: 'controls',
+    query: { modal: 'edit', controlId: '10' },
+  });
+  const editRawUrl = getAgentRoute(agentId, {
+    tab: 'controls',
+    query: { modal: 'edit', controlId: '1' },
+  });
+
+  // ---------------------------------------------------------------------------
+  // Template badge in controls list
+  // ---------------------------------------------------------------------------
+
+  test.describe('Template badge in controls list', () => {
+    test('displays Template badge for template-backed controls', async ({
+      mockedPage,
+    }) => {
+      // Given: an agent with both raw and template-backed controls
+      await setupTemplateMocks(mockedPage);
+
+      // When: navigating to the controls list
+      await mockedPage.goto(controlsUrl);
+
+      // Then: the template-backed control row shows a "Template" badge
+      const badge = mockedPage.locator('table').getByText('Template', { exact: true });
+      await expect(badge).toBeVisible();
+    });
+
+    test('does not display Template badge for raw controls', async ({
+      mockedPage,
+    }) => {
+      // Given: an agent with only raw controls (default mock data)
+
+      // When: navigating to the controls list
+      await mockedPage.goto(controlsUrl);
+
+      // Then: no "Template" badge appears anywhere in the table
+      const badges = mockedPage.locator('table').getByText('Template', { exact: true });
+      await expect(badges).toHaveCount(0);
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // Template-backed control editing
+  // ---------------------------------------------------------------------------
+
+  test.describe('Template-backed control editing', () => {
+    test('opens parameter form when editing template-backed control', async ({
+      mockedPage,
+    }) => {
+      // Given: a template-backed control with regex and step_name parameters
+      await setupTemplateMocks(mockedPage);
+
+      // When: opening the edit modal for the template-backed control
+      await mockedPage.goto(editTemplateUrl);
+
+      // Then: the parameter form renders with fields from the template definition
+      const dialog = mockedPage.getByRole('dialog');
+      await expect(dialog.getByText('Regex Pattern')).toBeVisible();
+      await expect(dialog.getByText('Step Name')).toBeVisible();
+
+      // And: the managed-by-template info is shown
+      await expect(dialog.getByText(/managed by the template/)).toBeVisible();
+    });
+
+    test('shows Template badge in the editor header', async ({
+      mockedPage,
+    }) => {
+      // Given: a template-backed control
+      await setupTemplateMocks(mockedPage);
+
+      // When: opening the edit modal
+      await mockedPage.goto(editTemplateUrl);
+
+      // Then: the Template badge is visible in the dialog header
+      const dialog = mockedPage.getByRole('dialog');
+      await expect(dialog.getByText('Template', { exact: true }).first()).toBeVisible();
+    });
+
+    test('shows Parameters and Full JSON mode switcher', async ({
+      mockedPage,
+    }) => {
+      // Given: a template-backed control in edit mode
+      await setupTemplateMocks(mockedPage);
+
+      // When: opening the edit modal
+      await mockedPage.goto(editTemplateUrl);
+
+      // Then: both mode options are visible in the segmented control
+      const dialog = mockedPage.getByRole('dialog');
+      await expect(dialog.getByText('Parameters', { exact: true })).toBeVisible();
+      await expect(dialog.locator('label').getByText('Full JSON')).toBeVisible();
+    });
+
+    test('can toggle to Full JSON mode and see template JSON', async ({
+      mockedPage,
+    }) => {
+      // Given: the template edit modal is open in Parameters mode
+      await setupTemplateMocks(mockedPage);
+      await mockedPage.goto(editTemplateUrl);
+      const dialog = mockedPage.getByRole('dialog');
+
+      // When: switching to Full JSON mode
+      await dialog.locator('label').getByText('Full JSON').click();
+
+      // Then: the JSON textarea shows the full TemplateControlInput with template structure
+      const jsonEditor = dialog.getByTestId('template-json-textarea');
+      await expect(jsonEditor).toBeVisible();
+      const jsonContent = await jsonEditor.inputValue();
+      expect(jsonContent).toContain('"template"');
+      expect(jsonContent).toContain('"template_values"');
+      expect(jsonContent).toContain('"definition_template"');
+    });
+
+    test('can switch from Full JSON back to Parameters', async ({
+      mockedPage,
+    }) => {
+      // Given: the template edit modal is in Full JSON mode
+      await setupTemplateMocks(mockedPage);
+      await mockedPage.goto(editTemplateUrl);
+      const dialog = mockedPage.getByRole('dialog');
+      await dialog.locator('label').getByText('Full JSON').click();
+      await expect(dialog.getByTestId('template-json-textarea')).toBeVisible();
+
+      // When: switching back to Parameters mode
+      await dialog.locator('label').getByText('Parameters').click();
+
+      // Then: the parameter form fields are visible again
+      await expect(dialog.getByText('Regex Pattern')).toBeVisible();
+      await expect(dialog.getByText('Step Name')).toBeVisible();
+    });
+
+    test('shows read-only control summary in left panel', async ({
+      mockedPage,
+    }) => {
+      // Given: a template-backed control with description, action, and template info
+      await setupTemplateMocks(mockedPage);
+
+      // When: opening the edit modal
+      await mockedPage.goto(editTemplateUrl);
+
+      // Then: the left panel shows rendered control metadata as read-only
+      const dialog = mockedPage.getByRole('dialog');
+      await expect(dialog.getByText('Deny when input matches pattern')).toBeVisible();
+      await expect(dialog.getByText('Regex denial template')).toBeVisible();
+      await expect(dialog.locator('.mantine-Badge-root').getByText('deny')).toBeVisible();
+    });
+
+    test('control name field is pre-filled and editable', async ({
+      mockedPage,
+    }) => {
+      // Given: a template-backed control named "Template Regex Guard"
+      await setupTemplateMocks(mockedPage);
+
+      // When: opening the edit modal
+      await mockedPage.goto(editTemplateUrl);
+      const nameInput = mockedPage.getByPlaceholder('Enter control name');
+
+      // Then: the name field is pre-filled with the control name
+      await expect(nameInput).toHaveValue('Template Regex Guard');
+
+      // And: the name field is editable
+      await nameInput.clear();
+      await nameInput.fill('Renamed Guard');
+      await expect(nameInput).toHaveValue('Renamed Guard');
+    });
+
+    test('preview panel strips template metadata from rendered output', async ({
+      mockedPage,
+    }) => {
+      // Given: a template-backed control in edit mode with the preview panel
+      await setupTemplateMocks(mockedPage);
+      await mockedPage.goto(editTemplateUrl);
+      const dialog = mockedPage.getByRole('dialog');
+
+      // When: expanding the preview panel (it calls the render endpoint
+      // which returns template + template_values in the response)
+      await dialog.getByText('Preview rendered control').click();
+
+      // Then: wait for the debounced render to complete and populate the preview
+      const preview = dialog.locator('textarea[readonly]');
+      await expect(preview).toBeVisible();
+      await expect(preview).not.toHaveValue('', { timeout: 5000 });
+      const previewContent = await preview.inputValue();
+
+      // And: the preview should contain rendered control fields
+      expect(previewContent).toContain('"condition"');
+      expect(previewContent).toContain('"action"');
+      expect(previewContent).toContain('"execution"');
+
+      // And: template authoring metadata should be stripped from the preview
+      expect(previewContent).not.toContain('"template"');
+      expect(previewContent).not.toContain('"template_values"');
+      expect(previewContent).not.toContain('"definition_template"');
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // Raw control editing regression
+  // ---------------------------------------------------------------------------
+
+  test.describe('Raw control editing regression', () => {
+    test('opens standard form editor for raw controls', async ({
+      mockedPage,
+    }) => {
+      // Given: a raw (non-template) control
+
+      // When: opening the edit modal for that control
+      await mockedPage.goto(editRawUrl);
+
+      // Then: the standard form fields are shown
+      const dialog = mockedPage.getByRole('dialog');
+      await expect(dialog.getByText('Selector path')).toBeVisible();
+      await expect(dialog.getByText('Description')).toBeVisible();
+
+      // And: template-specific elements are NOT shown
+      await expect(dialog.getByText('Template Parameters')).not.toBeVisible();
+      await expect(dialog.getByText(/managed by the template/)).not.toBeVisible();
+    });
+
+    test('raw control edit does not show Parameters toggle', async ({
+      mockedPage,
+    }) => {
+      // Given: a raw (non-template) control
+
+      // When: opening the edit modal
+      await mockedPage.goto(editRawUrl);
+
+      // Then: the "Parameters" toggle (template-only) is not visible
+      const dialog = mockedPage.getByRole('dialog');
+      await expect(dialog.getByText('Parameters', { exact: true })).not.toBeVisible();
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // Create from JSON flow
+  // ---------------------------------------------------------------------------
+
+  test.describe('Create from JSON flow', () => {
+    test('From JSON button opens JSON editor in create modal', async ({
+      mockedPage,
+    }) => {
+      // Given: the agent controls page
+
+      // When: navigating Add Control → Create Control → From JSON
+      await mockedPage.goto(controlsUrl);
+      await mockedPage.getByTestId('add-control-button').click();
+      await mockedPage.getByRole('button', { name: 'Create Control' }).click();
+      await mockedPage.getByTestId('from-json-button').click();
+
+      // Then: the JSON editor textarea is visible for pasting control or template JSON
+      await expect(
+        mockedPage.getByTestId('control-json-textarea')
+      ).toBeVisible();
+    });
+  });
+});
diff --git a/ui/tests/fixtures.ts b/ui/tests/fixtures.ts
index 9f566844..db527d07 100644
--- a/ui/tests/fixtures.ts
+++ b/ui/tests/fixtures.ts
@@ -79,6 +79,62 @@ const agentWithStepsResponse: GetAgentResponse = {
   ],
 };
 
+const templateBackedControl: Control = {
+  id: 10,
+  name: 'Template Regex Guard',
+  control: {
+    description: 'Deny when input matches pattern',
+    enabled: true,
+    execution: 'server',
+    scope: { step_names: ['chat-completion'], stages: ['pre'] },
+    condition: {
+      selector: { path: 'input' },
+      evaluator: {
+        name: 'regex',
+        config: { pattern: '\\b(SSN|social.security)\\b' },
+      },
+    },
+    action: { decision: 'deny' },
+    tags: [],
+    template: {
+      description: 'Regex denial template',
+      parameters: {
+        pattern: {
+          type: 'regex_re2',
+          label: 'Regex Pattern',
+          description: 'RE2 pattern to match against input',
+        },
+        step_name: {
+          type: 'string',
+          label: 'Step Name',
+          required: false,
+          default: 'chat-completion',
+        },
+      },
+      definition_template: {
+        description: 'Deny when input matches pattern',
+        execution: 'server',
+        scope: {
+          step_names: [{ $param: 'step_name' }],
+          stages: ['pre'],
+        },
+        condition: {
+          selector: { path: 'input' },
+          evaluator: {
+            name: 'regex',
+            config: { pattern: { $param: 'pattern' } },
+          },
+        },
+        action: { decision: 'deny' },
+      },
+    },
+    template_values: {
+      pattern: '\\b(SSN|social.security)\\b',
+      step_name: 'chat-completion',
+    },
+  } as Control['control'],
+};
+
 const controlsList: Control[] = [
   {
     id: 1,
@@ -144,10 +200,19 @@ const controlsList: Control[] = [
   },
 ];
 
+const controlsWithTemplateList: Control[] = [
+  ...controlsList,
+  templateBackedControl,
+];
+
 const controlsResponse: AgentControlsResponse = {
   controls: controlsList,
 };
 
+const controlsWithTemplateResponse: AgentControlsResponse = {
+  controls: controlsWithTemplateList,
+};
+
 // Control summaries for GET /api/v1/controls (list all controls)
 const controlSummariesList: (ControlSummary & {
   used_by_agent?: { agent_name: string } | null;
@@ -190,6 +255,22 @@ const controlSummariesList: (ControlSummary & {
   },
 ];
 
+const templateControlSummary: ControlSummary & {
+  used_by_agent?: { agent_name: string } | null;
+} = {
+  id: 10,
+  name: 'Template Regex Guard',
+  description: 'Deny when input matches pattern',
+  enabled: true,
+  execution: 'server',
+  step_types: null,
+  stages: ['pre'],
+  tags: [],
+  template_backed: true,
+  used_by_agent: { agent_name: 'customer-support-bot' },
+  used_by_agents_count: 1,
+};
+
 const listControlsResponse: ListControlsResponse = {
   controls: controlSummariesList,
   pagination: {
@@ -359,7 +440,10 @@ export const mockData = {
   agent: agentResponse,
   agentWithSteps: agentWithStepsResponse,
   controls: controlsResponse,
+  controlsWithTemplate: controlsWithTemplateResponse,
+  templateControl: templateBackedControl,
   listControls: listControlsResponse,
+  templateControlSummary: templateControlSummary,
   evaluators: evaluatorsResponse,
   stats: statsResponse,
   emptyStats: emptyStatsResponse,
@@ -676,6 +760,60 @@ export const mockRoutes = {
     // No-op - handled by controlGetData
   },
 
+  /** Mock POST /api/v1/control-templates/render */
+  controlRenderTemplate: async (page: Page) => {
+    await page.route('**/api/v1/control-templates/render', async (route) => {
+      const body = await route.request().postDataJSON();
+      // Return the template + values back as a rendered control preview
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          control: {
+            ...templateBackedControl.control,
+            template: body.template,
+            template_values: body.template_values,
+          },
+        }),
+      });
+    });
+  },
+
+  /** Mock PATCH /api/v1/controls/:id */
+  controlPatch: async (page: Page) => {
+    await page.route('**/api/v1/controls/*', async (route, request) => {
+      if (request.method() !== 'PATCH') {
+        await route.fallback();
+        return;
+      }
+      const body = await request.postDataJSON();
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          success: true,
+          name: body.name ?? 'Template Regex Guard',
+          enabled: body.enabled ?? true,
+        }),
+      });
+    });
+  },
+
+  /** Mock POST /api/v1/agents/:name/controls/:id (attach control) */
+  agentAddControl: async (page: Page) => {
+    await page.route('**/api/v1/agents/*/controls/*', async (route, request) => {
+      if (request.method() !== 'POST') {
+        await route.fallback();
+        return;
+      }
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ success: true }),
+      });
+    });
+  },
+
   /** Mock GET /api/v1/observability/stats */
   stats: async (
     page: Page,

From 5b3333f3feb44672055da1abf11019a26c2e92b1 Mon Sep 17 00:00:00 2001
From: Lev Neiman <lev.neiman@gmail.com>
Date: Wed, 1 Apr 2026 12:55:08 -0700
Subject: [PATCH 2/6] fix(ui): resolve lint errors in template control
 components

- Fix import sort order in template-param-form.tsx
- Fix jsx-no-leaked-render in template-preview.tsx (use ternary)
- Fix set-state-in-effect in template-edit-content.tsx by removing the
  useEffect sync and using key={control.id} to remount on control change
---
 ui/src/core/components/template-param-form.tsx   |  2 +-
 ui/src/core/components/template-preview.tsx      |  2 +-
 .../modals/edit-control/edit-control-content.tsx |  1 +
 .../edit-control/template-edit-content.tsx       | 16 +---------------
 4 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/ui/src/core/components/template-param-form.tsx b/ui/src/core/components/template-param-form.tsx
index 2591fde4..b81e6fa5 100644
--- a/ui/src/core/components/template-param-form.tsx
+++ b/ui/src/core/components/template-param-form.tsx
@@ -15,8 +15,8 @@ import type {
 } from '@/core/api/types';
 
 import {
-  LabelWithTooltip,
   labelPropsInline,
+  LabelWithTooltip,
 } from './label-with-tooltip';
 
 type TemplateParamFormProps = {
diff --git a/ui/src/core/components/template-preview.tsx b/ui/src/core/components/template-preview.tsx
index bd8f385e..a4c8cadd 100644
--- a/ui/src/core/components/template-preview.tsx
+++ b/ui/src/core/components/template-preview.tsx
@@ -94,7 +94,7 @@ export function TemplatePreview({
           <Text size="sm" fw={500}>
             Preview rendered control
           </Text>
-          {renderTemplate.isPending && <Loader size={14} />}
+          {renderTemplate.isPending ? <Loader size={14} /> : null}
         </Group>
       </UnstyledButton>
 
diff --git a/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx b/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx
index baab82ac..4f1db96c 100644
--- a/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx
+++ b/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx
@@ -74,6 +74,7 @@ export const EditControlContent = (props: EditControlContentProps) => {
   if (props.mode !== 'create' && isTemplateBacked(props.control)) {
     return (
       <TemplateEditContent
+        key={props.control.id}
         control={props.control}
         agentId={props.agentId}
         onClose={props.onClose}
diff --git a/ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx b/ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx
index f613ef6c..83eb48dc 100644
--- a/ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx
+++ b/ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx
@@ -14,7 +14,7 @@ import {
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { Button } from '@rungalileo/jupiter-ds';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { isApiError } from '@/core/api/errors';
 import type {
@@ -76,20 +76,6 @@ export function TemplateEditContent({
   const updateControlMetadata = useUpdateControlMetadata();
   const isPending = updateControl.isPending || updateControlMetadata.isPending;
 
-  // Reset state when control changes
-  useEffect(() => {
-    setControlName(control.name);
-    const raw = control.control as Record<string, unknown>;
-    const vals = raw.template_values as Record<string, TemplateValue> | undefined;
-    setTemplateValues(vals ?? {});
-    setParamErrors({});
-    setApiError(null);
-    setNameError(null);
-    setEditorMode('params');
-    setJsonText('');
-    setJsonError(null);
-  }, [control]);
-
   const handlePreviewErrors = useCallback(
     (errors: Record<string, string>) => {
       setParamErrors(errors);

From d2b7ede7768e3da61e01d76b551030df6d3943d1 Mon Sep 17 00:00:00 2001
From: Lev Neiman <lev.neiman@gmail.com>
Date: Wed, 1 Apr 2026 12:58:21 -0700
Subject: [PATCH 3/6] style(ui): run prettier on template control files

---
 .../core/components/template-param-form.tsx   |  5 +-
 ui/src/core/components/template-preview.tsx   |  6 ++-
 .../hooks/query-hooks/use-render-template.ts  |  5 +-
 .../agent-detail/controls/table-columns.tsx   | 22 ++++++---
 .../modals/add-new-control/index.tsx          |  2 -
 .../modals/create-from-template/index.tsx     | 49 +++++++++++++------
 .../edit-control/template-edit-content.tsx    | 43 ++++++++--------
 ui/tests/control-templates.spec.ts            | 36 ++++++++++----
 ui/tests/fixtures.ts                          | 23 +++++----
 9 files changed, 119 insertions(+), 72 deletions(-)

diff --git a/ui/src/core/components/template-param-form.tsx b/ui/src/core/components/template-param-form.tsx
index b81e6fa5..00539c9f 100644
--- a/ui/src/core/components/template-param-form.tsx
+++ b/ui/src/core/components/template-param-form.tsx
@@ -14,10 +14,7 @@ import type {
   TemplateValue,
 } from '@/core/api/types';
 
-import {
-  labelPropsInline,
-  LabelWithTooltip,
-} from './label-with-tooltip';
+import { labelPropsInline, LabelWithTooltip } from './label-with-tooltip';
 
 type TemplateParamFormProps = {
   template: TemplateDefinition;
diff --git a/ui/src/core/components/template-preview.tsx b/ui/src/core/components/template-preview.tsx
index a4c8cadd..4101742d 100644
--- a/ui/src/core/components/template-preview.tsx
+++ b/ui/src/core/components/template-preview.tsx
@@ -53,7 +53,11 @@ export function TemplatePreview({
       });
       if (result?.control) {
         // Strip template authoring metadata — show only what the engine sees.
-        const { template: _t, template_values: _tv, ...rendered } = result.control as Record<string, unknown>;
+        const {
+          template: _t,
+          template_values: _tv,
+          ...rendered
+        } = result.control as Record<string, unknown>;
         setRenderedJson(JSON.stringify(rendered, null, 2));
         onErrors?.({});
       }
diff --git a/ui/src/core/hooks/query-hooks/use-render-template.ts b/ui/src/core/hooks/query-hooks/use-render-template.ts
index e8d7743b..ae5a9b54 100644
--- a/ui/src/core/hooks/query-hooks/use-render-template.ts
+++ b/ui/src/core/hooks/query-hooks/use-render-template.ts
@@ -10,9 +10,8 @@ import type { RenderControlTemplateRequest } from '@/core/api/types';
 export function useRenderTemplate() {
   return useMutation({
     mutationFn: async (request: RenderControlTemplateRequest) => {
-      const { data, error, response } = await api.controlTemplates.render(
-        request
-      );
+      const { data, error, response } =
+        await api.controlTemplates.render(request);
 
       if (error) {
         throw parseApiError(
diff --git a/ui/src/core/page-components/agent-detail/controls/table-columns.tsx b/ui/src/core/page-components/agent-detail/controls/table-columns.tsx
index c79eef4c..b7cad0c6 100644
--- a/ui/src/core/page-components/agent-detail/controls/table-columns.tsx
+++ b/ui/src/core/page-components/agent-detail/controls/table-columns.tsx
@@ -69,7 +69,8 @@ export function useControlsTableColumns({
                       onError: (error: Error) => {
                         notifications.show({
                           title: 'Failed to update control',
-                          message: error.message || 'An unexpected error occurred',
+                          message:
+                            error.message || 'An unexpected error occurred',
                           color: 'red',
                         });
                       },
@@ -78,17 +79,24 @@ export function useControlsTableColumns({
                     if (isTemplate) {
                       // Template-backed controls use PATCH to avoid 409 on PUT /data
                       updateControlMetadata.mutate(
-                        { agentId, controlId: control.id, data: { enabled: newEnabled } },
-                        callbacks,
+                        {
+                          agentId,
+                          controlId: control.id,
+                          data: { enabled: newEnabled },
+                        },
+                        callbacks
                       );
                     } else {
                       updateControl.mutate(
                         {
                           agentId,
                           controlId: control.id,
-                          definition: { ...control.control, enabled: newEnabled },
+                          definition: {
+                            ...control.control,
+                            enabled: newEnabled,
+                          },
                         },
-                        callbacks,
+                        callbacks
                       );
                     }
                   },
@@ -104,7 +112,9 @@ export function useControlsTableColumns({
         accessorKey: 'name',
         size: 280,
         cell: ({ row }: { row: { original: Control } }) => {
-          const ctrl = row.original.control as Record<string, unknown> | undefined;
+          const ctrl = row.original.control as
+            | Record<string, unknown>
+            | undefined;
           const isTemplate = ctrl?.template != null;
           return (
             <Group gap={6} wrap="nowrap">
diff --git a/ui/src/core/page-components/agent-detail/modals/add-new-control/index.tsx b/ui/src/core/page-components/agent-detail/modals/add-new-control/index.tsx
index 17c789ff..69a029d6 100644
--- a/ui/src/core/page-components/agent-detail/modals/add-new-control/index.tsx
+++ b/ui/src/core/page-components/agent-detail/modals/add-new-control/index.tsx
@@ -123,7 +123,6 @@ export function AddNewControlModal({
     });
   };
 
-
   const handleEditModalClose = () => {
     closeSubmodal();
   };
@@ -361,7 +360,6 @@ export function AddNewControlModal({
           ) : null}
         </ErrorBoundary>
       </Modal>
-
     </Modal>
   );
 }
diff --git a/ui/src/core/page-components/agent-detail/modals/create-from-template/index.tsx b/ui/src/core/page-components/agent-detail/modals/create-from-template/index.tsx
index da8c2c0d..2d964058 100644
--- a/ui/src/core/page-components/agent-detail/modals/create-from-template/index.tsx
+++ b/ui/src/core/page-components/agent-detail/modals/create-from-template/index.tsx
@@ -53,12 +53,19 @@ function parseTemplateJson(text: string): TemplateDefinition | string {
   if (!obj.definition_template) {
     return 'Missing required field "definition_template".';
   }
-  if (typeof obj.definition_template !== 'object' || obj.definition_template === null) {
+  if (
+    typeof obj.definition_template !== 'object' ||
+    obj.definition_template === null
+  ) {
     return '"definition_template" must be a JSON object.';
   }
   // parameters is optional (defaults to empty dict on the server)
   if (obj.parameters !== undefined) {
-    if (typeof obj.parameters !== 'object' || obj.parameters === null || Array.isArray(obj.parameters)) {
+    if (
+      typeof obj.parameters !== 'object' ||
+      obj.parameters === null ||
+      Array.isArray(obj.parameters)
+    ) {
       return '"parameters" must be a JSON object.';
     }
   }
@@ -125,12 +132,9 @@ export function CreateFromTemplate({
     setApiError(null);
   };
 
-  const handlePreviewErrors = useCallback(
-    (errors: Record<string, string>) => {
-      setParamErrors(errors);
-    },
-    []
-  );
+  const handlePreviewErrors = useCallback((errors: Record<string, string>) => {
+    setParamErrors(errors);
+  }, []);
 
   const handleSave = () => {
     if (!template) return;
@@ -170,10 +174,7 @@ export function CreateFromTemplate({
               const newParamErrors: Record<string, string> = {};
               for (const item of pd.errors) {
                 if (item.field?.startsWith('template_values.')) {
-                  const paramName = item.field.replace(
-                    'template_values.',
-                    ''
-                  );
+                  const paramName = item.field.replace('template_values.', '');
                   newParamErrors[paramName] = item.message;
                 }
               }
@@ -204,7 +205,11 @@ export function CreateFromTemplate({
           <Title order={3} fw={600}>
             Create from Template
           </Title>
-          <Button size="sm" onClick={onClose} data-testid="close-template-modal-button">
+          <Button
+            size="sm"
+            onClick={onClose}
+            data-testid="close-template-modal-button"
+          >
             <IconX size={16} />
           </Button>
         </Group>
@@ -256,10 +261,18 @@ export function CreateFromTemplate({
             />
 
             <Group justify="flex-end">
-              <Button variant="outline" onClick={onClose} data-testid="cancel-template-paste">
+              <Button
+                variant="outline"
+                onClick={onClose}
+                data-testid="cancel-template-paste"
+              >
                 Cancel
               </Button>
-              <Button variant="filled" onClick={handleContinue} data-testid="continue-template">
+              <Button
+                variant="filled"
+                onClick={handleContinue}
+                data-testid="continue-template"
+              >
                 Continue
               </Button>
             </Group>
@@ -332,7 +345,11 @@ export function CreateFromTemplate({
             <Divider />
 
             <Group justify="flex-end">
-              <Button variant="outline" onClick={onClose} data-testid="cancel-template-create">
+              <Button
+                variant="outline"
+                onClick={onClose}
+                data-testid="cancel-template-create"
+              >
                 Cancel
               </Button>
               <Button
diff --git a/ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx b/ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx
index 83eb48dc..51d8e7c3 100644
--- a/ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx
+++ b/ui/src/core/page-components/agent-detail/modals/edit-control/template-edit-content.tsx
@@ -54,10 +54,9 @@ export function TemplateEditContent({
   // generated API types yet. Will be cleaned up after type regeneration.
   const definitionRaw = control.control as Record<string, unknown>;
   const template = definitionRaw.template as TemplateControlInput['template'];
-  const storedValues = definitionRaw.template_values as Record<
-    string,
-    TemplateValue
-  > | undefined;
+  const storedValues = definitionRaw.template_values as
+    | Record<string, TemplateValue>
+    | undefined;
 
   const [editorMode, setEditorMode] = useState<EditorMode>('params');
   const [controlName, setControlName] = useState(control.name);
@@ -76,12 +75,9 @@ export function TemplateEditContent({
   const updateControlMetadata = useUpdateControlMetadata();
   const isPending = updateControl.isPending || updateControlMetadata.isPending;
 
-  const handlePreviewErrors = useCallback(
-    (errors: Record<string, string>) => {
-      setParamErrors(errors);
-    },
-    []
-  );
+  const handlePreviewErrors = useCallback((errors: Record<string, string>) => {
+    setParamErrors(errors);
+  }, []);
 
   const buildTemplateInput = useCallback((): TemplateControlInput => {
     return {
@@ -107,14 +103,18 @@ export function TemplateEditContent({
     try {
       const parsed = JSON.parse(jsonText) as TemplateControlInput;
       if (!parsed.template?.definition_template) {
-        setJsonError('JSON must contain a "template" object with "definition_template".');
+        setJsonError(
+          'JSON must contain a "template" object with "definition_template".'
+        );
         return;
       }
       setTemplateValues(parsed.template_values ?? {});
       setJsonError(null);
       setEditorMode('params');
     } catch {
-      setJsonError('Invalid JSON. Fix syntax errors before switching to Parameters.');
+      setJsonError(
+        'Invalid JSON. Fix syntax errors before switching to Parameters.'
+      );
     }
   };
 
@@ -131,7 +131,9 @@ export function TemplateEditContent({
       try {
         templateInput = JSON.parse(jsonText) as TemplateControlInput;
         if (!templateInput.template?.definition_template) {
-          setJsonError('JSON must contain a "template" object with "definition_template".');
+          setJsonError(
+            'JSON must contain a "template" object with "definition_template".'
+          );
           return;
         }
       } catch {
@@ -212,10 +214,7 @@ export function TemplateEditContent({
               const newParamErrors: Record<string, string> = {};
               for (const item of pd.errors) {
                 if (item.field?.startsWith('template_values.')) {
-                  const paramName = item.field.replace(
-                    'template_values.',
-                    ''
-                  );
+                  const paramName = item.field.replace('template_values.', '');
                   newParamErrors[paramName] = item.message;
                 }
               }
@@ -239,7 +238,8 @@ export function TemplateEditContent({
   };
 
   // Extract read-only summary from the rendered control
-  const action = (definitionRaw.action as { decision?: string })?.decision ?? 'unknown';
+  const action =
+    (definitionRaw.action as { decision?: string })?.decision ?? 'unknown';
   const execution = (definitionRaw.execution as string) ?? 'server';
   const description = definitionRaw.description as string | undefined;
 
@@ -281,7 +281,8 @@ export function TemplateEditContent({
       {editorMode === 'json' ? (
         <Stack gap="md">
           <Text size="sm" c="dimmed">
-            Edit the full template input JSON below. Control name stays separate.
+            Edit the full template input JSON below. Control name stays
+            separate.
           </Text>
           <Textarea
             value={jsonText}
@@ -336,8 +337,8 @@ export function TemplateEditContent({
               ) : null}
               <Alert variant="light" color="blue" p="xs">
                 <Text size="xs">
-                  Scope, condition, and action are managed by the template.
-                  Edit the parameters on the right to change control behavior.
+                  Scope, condition, and action are managed by the template. Edit
+                  the parameters on the right to change control behavior.
                 </Text>
               </Alert>
             </Stack>
diff --git a/ui/tests/control-templates.spec.ts b/ui/tests/control-templates.spec.ts
index 303ea319..92670492 100644
--- a/ui/tests/control-templates.spec.ts
+++ b/ui/tests/control-templates.spec.ts
@@ -47,7 +47,9 @@ test.describe('Control Templates', () => {
       await mockedPage.goto(controlsUrl);
 
       // Then: the template-backed control row shows a "Template" badge
-      const badge = mockedPage.locator('table').getByText('Template', { exact: true });
+      const badge = mockedPage
+        .locator('table')
+        .getByText('Template', { exact: true });
       await expect(badge).toBeVisible();
     });
 
@@ -60,7 +62,9 @@ test.describe('Control Templates', () => {
       await mockedPage.goto(controlsUrl);
 
       // Then: no "Template" badge appears anywhere in the table
-      const badges = mockedPage.locator('table').getByText('Template', { exact: true });
+      const badges = mockedPage
+        .locator('table')
+        .getByText('Template', { exact: true });
       await expect(badges).toHaveCount(0);
     });
   });
@@ -99,7 +103,9 @@ test.describe('Control Templates', () => {
 
       // Then: the Template badge is visible in the dialog header
       const dialog = mockedPage.getByRole('dialog');
-      await expect(dialog.getByText('Template', { exact: true }).first()).toBeVisible();
+      await expect(
+        dialog.getByText('Template', { exact: true }).first()
+      ).toBeVisible();
     });
 
     test('shows Parameters and Full JSON mode switcher', async ({
@@ -113,8 +119,12 @@ test.describe('Control Templates', () => {
 
       // Then: both mode options are visible in the segmented control
       const dialog = mockedPage.getByRole('dialog');
-      await expect(dialog.getByText('Parameters', { exact: true })).toBeVisible();
-      await expect(dialog.locator('label').getByText('Full JSON')).toBeVisible();
+      await expect(
+        dialog.getByText('Parameters', { exact: true })
+      ).toBeVisible();
+      await expect(
+        dialog.locator('label').getByText('Full JSON')
+      ).toBeVisible();
     });
 
     test('can toggle to Full JSON mode and see template JSON', async ({
@@ -166,9 +176,13 @@ test.describe('Control Templates', () => {
 
       // Then: the left panel shows rendered control metadata as read-only
       const dialog = mockedPage.getByRole('dialog');
-      await expect(dialog.getByText('Deny when input matches pattern')).toBeVisible();
+      await expect(
+        dialog.getByText('Deny when input matches pattern')
+      ).toBeVisible();
       await expect(dialog.getByText('Regex denial template')).toBeVisible();
-      await expect(dialog.locator('.mantine-Badge-root').getByText('deny')).toBeVisible();
+      await expect(
+        dialog.locator('.mantine-Badge-root').getByText('deny')
+      ).toBeVisible();
     });
 
     test('control name field is pre-filled and editable', async ({
@@ -240,7 +254,9 @@ test.describe('Control Templates', () => {
 
       // And: template-specific elements are NOT shown
       await expect(dialog.getByText('Template Parameters')).not.toBeVisible();
-      await expect(dialog.getByText(/managed by the template/)).not.toBeVisible();
+      await expect(
+        dialog.getByText(/managed by the template/)
+      ).not.toBeVisible();
     });
 
     test('raw control edit does not show Parameters toggle', async ({
@@ -253,7 +269,9 @@ test.describe('Control Templates', () => {
 
       // Then: the "Parameters" toggle (template-only) is not visible
       const dialog = mockedPage.getByRole('dialog');
-      await expect(dialog.getByText('Parameters', { exact: true })).not.toBeVisible();
+      await expect(
+        dialog.getByText('Parameters', { exact: true })
+      ).not.toBeVisible();
     });
   });
 
diff --git a/ui/tests/fixtures.ts b/ui/tests/fixtures.ts
index db527d07..fd3137eb 100644
--- a/ui/tests/fixtures.ts
+++ b/ui/tests/fixtures.ts
@@ -801,17 +801,20 @@ export const mockRoutes = {
 
   /** Mock POST /api/v1/agents/:name/controls/:id (attach control) */
   agentAddControl: async (page: Page) => {
-    await page.route('**/api/v1/agents/*/controls/*', async (route, request) => {
-      if (request.method() !== 'POST') {
-        await route.fallback();
-        return;
+    await page.route(
+      '**/api/v1/agents/*/controls/*',
+      async (route, request) => {
+        if (request.method() !== 'POST') {
+          await route.fallback();
+          return;
+        }
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ success: true }),
+        });
       }
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({ success: true }),
-      });
-    });
+    );
   },
 
   /** Mock GET /api/v1/observability/stats */

From c5a1a95006c18e4c25a4854b2800d5524b783fed Mon Sep 17 00:00:00 2001
From: Lev Neiman <lev.neiman@gmail.com>
Date: Wed, 1 Apr 2026 13:01:57 -0700
Subject: [PATCH 4/6] fix(ui): fix ControlSummary type for template_backed
 field in test fixtures

---
 ui/tests/fixtures.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/tests/fixtures.ts b/ui/tests/fixtures.ts
index fd3137eb..e104f4a1 100644
--- a/ui/tests/fixtures.ts
+++ b/ui/tests/fixtures.ts
@@ -257,6 +257,7 @@ const controlSummariesList: (ControlSummary & {
 
 const templateControlSummary: ControlSummary & {
   used_by_agent?: { agent_name: string } | null;
+  template_backed?: boolean;
 } = {
   id: 10,
   name: 'Template Regex Guard',

From 4b1af7016a9dd0566f41bf51e423055ac618927e Mon Sep 17 00:00:00 2001
From: Lev Neiman <lev.neiman@gmail.com>
Date: Wed, 1 Apr 2026 17:12:00 -0700
Subject: [PATCH 5/6] fix(ui): block Form mode switch for template JSON
 payloads

---
 .../modals/edit-control/edit-control-content.tsx      | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx b/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx
index 4f1db96c..c2445ef6 100644
--- a/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx
+++ b/ui/src/core/page-components/agent-detail/modals/edit-control/edit-control-content.tsx
@@ -376,6 +376,17 @@ const RawEditControlContent = ({
         return;
       }
 
+      // Template payloads cannot be edited in Form mode — they use $param
+      // bindings that the form editor doesn't understand.
+      const raw = parsedDefinition as Record<string, unknown>;
+      if (raw.template != null) {
+        setDefinitionJsonError(
+          'Template-backed controls cannot be edited in Form mode. ' +
+            'Save from JSON to create the control, then edit it to get the parameter form.'
+        );
+        return;
+      }
+
       try {
         await validateControlDataAsync({ definition: parsedDefinition });
       } catch (error) {

From e192acd4543f3c85e0a999b081c2a46d8f5d8061 Mon Sep 17 00:00:00 2001
From: Lev Neiman <lev.neiman@gmail.com>
Date: Wed, 1 Apr 2026 17:15:02 -0700
Subject: [PATCH 6/6] test(ui): add test for Form mode block on template JSON
 payloads

---
 ui/tests/control-templates.spec.ts | 48 ++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/ui/tests/control-templates.spec.ts b/ui/tests/control-templates.spec.ts
index 92670492..2e32ad2f 100644
--- a/ui/tests/control-templates.spec.ts
+++ b/ui/tests/control-templates.spec.ts
@@ -296,5 +296,53 @@ test.describe('Control Templates', () => {
         mockedPage.getByTestId('control-json-textarea')
       ).toBeVisible();
     });
+
+    test('switching to Form mode is blocked when JSON contains a template payload', async ({
+      mockedPage,
+    }) => {
+      // Given: the JSON editor is open with a template payload pasted
+      await mockedPage.goto(controlsUrl);
+      await mockedPage.getByTestId('add-control-button').click();
+      await mockedPage.getByRole('button', { name: 'Create Control' }).click();
+      await mockedPage.getByTestId('from-json-button').click();
+
+      const jsonEditor = mockedPage.getByTestId('control-json-textarea');
+      await expect(jsonEditor).toBeVisible();
+
+      const templateJson = JSON.stringify({
+        template: {
+          parameters: {
+            pattern: { type: 'regex_re2', label: 'Pattern' },
+          },
+          definition_template: {
+            execution: 'server',
+            scope: { stages: ['pre'] },
+            condition: {
+              selector: { path: 'input' },
+              evaluator: {
+                name: 'regex',
+                config: { pattern: { $param: 'pattern' } },
+              },
+            },
+            action: { decision: 'deny' },
+          },
+        },
+        template_values: {},
+      });
+      await jsonEditor.fill(templateJson);
+
+      // When: attempting to switch to Form mode
+      await mockedPage.locator('label').getByText('Form').click();
+
+      // Then: an error message is shown explaining templates can't use Form mode
+      await expect(
+        mockedPage.getByText(
+          'Template-backed controls cannot be edited in Form mode'
+        )
+      ).toBeVisible();
+
+      // And: the JSON editor is still visible (did not switch)
+      await expect(jsonEditor).toBeVisible();
+    });
   });
 });