@tai42/studio-sdk 25.0.1 → 26.0.0

package/src/components/execution-key-picker.tsx

@@ -1,20 +1,25 @@
 /**
- * Picks the api key a fire / recurring run RUNS AS. Shared by every fire-path form
- * (hooks, trigger links, schedules). Presentational and prop-driven — the host
- * feature owns the api-key list query and hands it in, so this component (and the
- * SDK) stay free of a data-fetching library, exactly as {@link ToolPicker} does.
+ * Picks the api key a stored record (a route, a hook, a trigger link, a schedule)
+ * RUNS AS. Presentational and prop-driven — the host feature owns the api-key list
+ * query and hands it in, so this component (and the SDK) stay free of a
+ * data-fetching library, exactly as {@link ToolPicker} does.
  *
- * The server decides authorization; this only lists the pickable keys and renders
- * the read's loading / empty / error states. The host form renders the server's
- * refusal verbatim elsewhere.
+ * The `binding` decides what renders: nothing with access control off, a pending
+ * control while the session's projection loads, and otherwise the key list plus the
+ * session's own identity when it is an api key the list does not hold. A stored key
+ * the loaded list does not hold is flagged with what the server will make of it,
+ * compared with the session's identity. The server decides authorization; the host
+ * form renders its refusal verbatim elsewhere.
  */
 import type { TokensPayload } from '@tai42/api-client';
-import type { ReactNode } from 'react';
+import { type ReactNode, useId } from 'react';
 
-import { errorMessage } from '../errors';
+import { errorMessage, isForbiddenError } from '../errors';
+import type { ExecutionKeyBinding, OwnIdentity } from '../hooks/useCapabilities';
+import { Badge } from './badge';
 import { Field } from './field';
 import { ErrorState } from './primitives';
-import { Select } from './select';
+import { Select, type SelectOption } from './select';
 
 /**
  * The subset of the api-key list query this picker reads. A caller's TanStack
@@ -61,56 +66,267 @@ function pickableKeys(keys: TokensPayload): TokensPayload {
   });
 }
 
+/**
+ * Whether the form has a key to send: always with access control off, never while the
+ * projection is pending, and otherwise once the list read has answered (loaded, or
+ * refused with a 403) and the picker holds a value, lists a key, or offers a key
+ * session's own identity. Under a checked binding the picker renders its `Select`
+ * exactly while the list read is pending or this holds.
+ */
+export function canHoldExecutionKey(
+  query: ExecutionKeyQuery,
+  binding: ExecutionKeyBinding,
+  value: string,
+): boolean {
+  if (binding.mode === 'unchecked') return true;
+  if (binding.mode === 'pending') return false;
+  return (
+    (query.isSuccess || isForbiddenError(query.error)) &&
+    (value !== '' ||
+      (query.isSuccess && !isExecutionKeyListEmpty(query)) ||
+      binding.own.kind === 'key')
+  );
+}
+
+/** The unlisted line's sentence for a stored key the key list does not hold. */
+function unlistedKeyHint(value: string, own: OwnIdentity): string {
+  if (own.admin) {
+    return `${value} is not a listed key. As an admin you may bind another identity; the server checks it on save.`;
+  }
+  if (own.kind === 'account') {
+    return `${value} is not a listed key. The server accepts only an api key you own; any other value is refused on save.`;
+  }
+  return `${value} is not a listed key. The server accepts an unlisted key only when it is your own identity; any other value is refused on save.`;
+}
+
+/** The second line: what the comparison of the value with the session's identity shows, or undefined when it shows
+ * nothing to say (a key session's own identity). */
+function unlistedKeyNote(
+  value: string,
+  own: OwnIdentity,
+): { readonly badge: string; readonly text: string } | undefined {
+  if (value === own.userId) {
+    return own.kind === 'account'
+      ? {
+          badge: 'not an api key',
+          text: `${value} is this session's account, not an api key, so the server will refuse it on save.`,
+        }
+      : undefined;
+  }
+  return {
+    badge: 'not your identity',
+    text: own.admin
+      ? `${value} is not this session's identity (${own.userId}).`
+      : `${value} is not this session's identity (${own.userId}), so the server will refuse it on save.`,
+  };
+}
+
+const DEFAULT_DESCRIPTION =
+  "The api key this fire runs AS. Every tool call it makes is authorized against that key's live grants — prefer a least-privilege service key over a human's broad one.";
+const FORBIDDEN_NOTE =
+  'This session cannot list api keys. Picking one needs read access to GET /api/auth/tokens-payload; ask an administrator to grant it.';
+const KEY_EMPTY_NOTE =
+  'No api keys of yours are listed. Mint one on the settings API-keys tab to run as a narrower key.';
+const ACCOUNT_EMPTY_NOTE =
+  'No api keys of yours are listed. You are signed in as an account, not an api key, so your own identity cannot be picked here. Mint a key on the settings API-keys tab first.';
+const MUTED_LINE = { margin: 0, color: 'var(--tai-color-text-muted)' } as const;
+
+function MutedLine({ text }: { readonly text: string }): ReactNode {
+  return (
+    <p role="status" style={MUTED_LINE}>
+      {text}
+    </p>
+  );
+}
+
 export interface ExecutionKeyPickerProps {
   /** The api-key list read the host feature owns and hands in. */
   readonly query: ExecutionKeyQuery;
+  /** How the host form binds its key (`useExecutionKeyBinding()`). */
+  readonly binding: ExecutionKeyBinding;
   readonly value: string;
   readonly onValueChange: (value: string) => void;
-  /** The host form's required-field error, shown under the control. */
+  /** The host form's required-field error, shown under the control while a `Select` renders. */
   readonly error?: string | undefined;
+  /** The field's description; the default speaks of a fire. */
+  readonly description?: string;
+}
+
+/** What the checked picker draws, derived from the list read, the value and the session's identity. */
+interface CheckedView {
+  readonly options: readonly SelectOption[];
+  /** A `Select` renders (a pending list, or something to hold). */
+  readonly selectRenders: boolean;
+  /** The muted note beside or in place of the `Select`. */
+  readonly note: string | undefined;
+  /** The stored value no listed option carries, once the list loaded. */
+  readonly unlisted: boolean;
+  /** The session's own identity is offered as an option. */
+  readonly ownOffered: boolean;
+}
+
+/** The view while the binding is pending: a disabled `Select` and nothing else. */
+const PENDING_VIEW: CheckedView = {
+  options: [],
+  selectRenders: true,
+  note: undefined,
+  unlisted: false,
+  ownOffered: false,
+};
+
+/** The `Select`'s options: the stored value no listed option carries (flagged once the list
+ * loaded), the session's own identity when offered, then the listed keys. */
+function checkedOptions(
+  stored: string | null,
+  unlisted: boolean,
+  forbidden: boolean,
+  ownOffered: string | null,
+  listed: readonly TokensPayload[number][],
+): SelectOption[] {
+  const options: SelectOption[] = [];
+  if (stored !== null && (unlisted || forbidden)) {
+    options.push({ value: stored, label: unlisted ? `${stored} (not a listed key)` : stored });
+  }
+  if (ownOffered !== null) {
+    options.push({ value: ownOffered, label: `${ownOffered} — this session's identity` });
+  }
+  for (const key of listed) options.push({ value: key.user_id, label: keyLabel(key) });
+  return options;
+}
+
+/** The muted note: the refused read's, or the empty list's for the session's kind. */
+function checkedNote(query: ExecutionKeyQuery, own: OwnIdentity): string | undefined {
+  if (isForbiddenError(query.error)) return FORBIDDEN_NOTE;
+  if (!isExecutionKeyListEmpty(query)) return undefined;
+  return own.kind === 'key' ? KEY_EMPTY_NOTE : ACCOUNT_EMPTY_NOTE;
+}
+
+function checkedView(query: ExecutionKeyQuery, own: OwnIdentity, value: string): CheckedView {
+  const forbidden = isForbiddenError(query.error);
+  const listed = query.isSuccess ? pickableKeys(query.data ?? []) : [];
+  const answered = query.isSuccess || forbidden;
+  const ownOffered =
+    own.kind === 'key' && answered && !listed.some((key) => key.user_id === own.userId);
+  const stored = value !== '' && !(ownOffered && value === own.userId) ? value : null;
+  const unlisted =
+    query.isSuccess && stored !== null && !listed.some((key) => key.user_id === stored);
+  const options = checkedOptions(
+    stored,
+    unlisted,
+    forbidden,
+    ownOffered ? own.userId : null,
+    listed,
+  );
+  const selectRenders =
+    (query.isPending && !query.isError) ||
+    canHoldExecutionKey(query, { mode: 'checked', own }, value);
+  return { options, selectRenders, note: checkedNote(query, own), unlisted, ownOffered };
+}
+
+/** The lines under the `Select`: the unlisted hint, the own-identity hint and the comparison note. */
+function KeyHints({
+  own,
+  view,
+  value,
+  hintId,
+  noteId,
+}: {
+  readonly own: OwnIdentity | undefined;
+  readonly view: CheckedView;
+  readonly value: string;
+  readonly hintId: string;
+  readonly noteId: string;
+}): ReactNode {
+  if (own === undefined) return null;
+  const keyNote = view.unlisted ? unlistedKeyNote(value, own) : undefined;
+  return (
+    <>
+      {view.unlisted ? (
+        <p id={hintId} className="tai-field-hint" style={{ margin: 0 }}>
+          <Badge variant="warning">not a listed key</Badge> {unlistedKeyHint(value, own)}
+        </p>
+      ) : null}
+      {view.ownOffered && value === own.userId ? (
+        <p id={hintId} className="tai-field-hint" style={{ margin: 0 }}>
+          {`This runs as this session's own identity, ${own.userId}, with its live grants.`}
+        </p>
+      ) : null}
+      {keyNote !== undefined ? (
+        <p id={noteId} role="status" className="tai-field-hint" style={{ margin: 0 }}>
+          <Badge variant="warning">{keyNote.badge}</Badge> {keyNote.text}
+        </p>
+      ) : null}
+    </>
+  );
+}
+
+/** The ids the `Select` is described by: the hint while one shows, the note while one shows. */
+function describedByIds(
+  own: OwnIdentity | undefined,
+  view: CheckedView,
+  value: string,
+  hintId: string,
+  noteId: string,
+): string | undefined {
+  if (own === undefined) return undefined;
+  const hinted = view.unlisted || (view.ownOffered && value === own.userId);
+  const noted = view.unlisted && unlistedKeyNote(value, own) !== undefined;
+  const ids = [hinted ? hintId : undefined, noted ? noteId : undefined].filter(
+    (id) => id !== undefined,
+  );
+  return ids.length === 0 ? undefined : ids.join(' ');
 }
 
 export function ExecutionKeyPicker({
   query,
+  binding,
   value,
   onValueChange,
   error,
+  description = DEFAULT_DESCRIPTION,
 }: ExecutionKeyPickerProps): ReactNode {
-  const listEmpty = isExecutionKeyListEmpty(query);
-
-  return (
-    <Field
-      label="Execution key"
-      description="The api key this fire runs AS. Every tool call it makes is authorized against that key's live grants — prefer a least-privilege service key over a human's broad one."
-      // Suppressed: the empty note / the ErrorState already say it.
-      error={listEmpty || query.isError ? undefined : error}
-      // Only the Select branch claims the field's control id; the error and
-      // empty branches render no labelable element, so `for` would dangle.
-      group={query.isError || listEmpty}
-    >
-      {query.isError ? (
+  const hintId = useId();
+  const noteId = useId();
+  if (binding.mode === 'unchecked') return null;
+  if (binding.mode === 'checked' && query.isError && !isForbiddenError(query.error)) {
+    return (
+      <Field label="Execution key" description={description} group>
         <ErrorState
           message={errorMessage(query.error)}
           onRetry={() => {
             query.refetch();
           }}
         />
-      ) : listEmpty ? (
-        <p role="status" style={{ margin: 0, color: 'var(--tai-color-text-muted)' }}>
-          No api keys available to run as. Mint one on the settings API-keys tab first.
-        </p>
-      ) : (
+      </Field>
+    );
+  }
+  // A pending binding renders the same tree as a pending list, so the control is not
+  // remounted when the binding resolves.
+  const own = binding.mode === 'checked' ? binding.own : undefined;
+  const view = own === undefined ? PENDING_VIEW : checkedView(query, own, value);
+  const loading = own === undefined || query.isPending;
+
+  return (
+    <Field
+      label="Execution key"
+      description={description}
+      error={view.selectRenders ? error : undefined}
+      // Only the Select claims the field's control id; with nothing to hold no
+      // labelable element renders, so `for` would dangle.
+      group={!view.selectRenders}
+    >
+      {view.selectRenders ? (
         <Select
-          options={pickableKeys(query.data ?? []).map((key) => ({
-            value: key.user_id,
-            label: keyLabel(key),
-          }))}
+          options={view.options}
           value={value}
-          placeholder={query.isPending ? 'Loading keys…' : 'Select an execution key'}
-          disabled={query.isPending}
+          placeholder={loading ? 'Loading keys…' : 'Select an execution key'}
+          disabled={loading}
           onValueChange={onValueChange}
+          aria-describedby={describedByIds(own, view, value, hintId, noteId)}
         />
-      )}
+      ) : null}
+      {view.note !== undefined ? <MutedLine text={view.note} /> : null}
+      <KeyHints own={own} view={view} value={value} hintId={hintId} noteId={noteId} />
     </Field>
   );
 }

package/src/components/extension-combo-builder.tsx

@@ -10,16 +10,16 @@
  *  - the current combos, each an ordered row of name `Badge`s with a per-combo Edit
  *    (pull it back into the draft) and Remove;
  *  - a combo UNDER CONSTRUCTION, authored with the shared `ExtensionPicker` (grouped
- *    by kind, single-select for the non-stackable `backend` kind). When the draft
- *    includes the `output_schema` extension, its config is authored inline with a
- *    `SchemaEditor` (no title required); an "Add combo" / "Update combo" action
- *    composes the elements — `output_schema` as `{ name, config: { schema } }`, every
- *    other extension as a bare name — and writes it into the value.
+ *    by kind, single-select for the non-stackable `backend` kind). An extension whose
+ *    catalog entry declares a `config_schema` is authored as `{ name, config }` through
+ *    its settings form; any other name stays a bare element, or the edited combo's own
+ *    element when it survives the edit. An "Add extension set" / "Update extension
+ *    set" action composes the elements and writes the combo into the value.
  *
  * The builder only blocks the client-trivial invalids: an EMPTY combo (Add is
  * disabled until the draft has ≥1 member), a DUPLICATE of a combo already in the
- * value (by name sequence; flagged inline, Add blocked), an INVALID `output_schema`
- * config (the `SchemaEditor` shows the parse/lint error and Add is blocked), and an
+ * value (by name sequence; flagged inline, Add blocked), an INVALID or not yet
+ * reported settings form of a drafted extension (Add is blocked), and an
  * UNKNOWN extension name in an existing combo (a name absent from `available`, which
  * happens when a plugin is removed after a preset was authored) — flagged inline on
  * that combo row and reported through `onValidityChange` so the caller can block
@@ -39,15 +39,17 @@ import type { Extension, PresetExtensionElement } from '@tai42/api-client';
 import { type ReactNode, useEffect, useState } from 'react';
 
 import { comboElementNames, extensionElementName } from '../extension-combos';
-import { type SchemaEditorChange } from '../schema-editor';
+import type { JsonSchema } from '../schema-form/types';
 import {
   ComboDraftEditor,
   CommittedComboList,
-  OUTPUT_SCHEMA,
-  outputSchemaConfig,
+  type ConfigurableExtension,
   sameNames,
   unknownNames,
 } from './extension-combo-parts';
+import type { ExtensionConfigChange } from './extension-config-editor';
+
+type Seeds = Readonly<Record<string, Record<string, unknown> | undefined>>;
 
 export interface ExtensionComboBuilderProps {
   /** The extension catalog the combos are drawn from (caller-fetched). */
@@ -84,15 +86,29 @@ export function ExtensionComboBuilder({
   availableReady = true,
 }: ExtensionComboBuilderProps): ReactNode {
   const [draft, setDraft] = useState<string[]>([]);
-  const [draftConfig, setDraftConfig] = useState<SchemaEditorChange>({ schema: null, valid: true });
+  // The settings each drafted configurable extension's form last reported.
+  const [draftConfigs, setDraftConfigs] = useState<Readonly<Record<string, ExtensionConfigChange>>>(
+    {},
+  );
+  // The stored settings the forms seed from when a combo is pulled in for edit.
+  const [draftSeeds, setDraftSeeds] = useState<Seeds>({});
   // The index of the combo being edited (pulled into the draft), or `null` for a new one.
   const [editing, setEditing] = useState<number | null>(null);
 
-  const draftHasOutputSchema = draft.includes(OUTPUT_SCHEMA);
+  const settingsSchemas = new Map<string, JsonSchema>();
+  for (const extension of available) {
+    if (extension.config_schema !== null) {
+      settingsSchemas.set(extension.name, extension.config_schema);
+    }
+  }
+  const configurable: ConfigurableExtension[] = draft.flatMap((name) => {
+    const schema = settingsSchemas.get(name);
+    return schema === undefined ? [] : [{ name, schema }];
+  });
   const isDuplicate =
     draft.length > 0 &&
     value.some((combo, index) => index !== editing && sameNames(comboElementNames(combo), draft));
-  const configInvalid = draftHasOutputSchema && !draftConfig.valid;
+  const configInvalid = configurable.some(({ name }) => draftConfigs[name]?.valid !== true);
   const canAdd = !disabled && draft.length > 0 && !isDuplicate && !configInvalid;
 
   // Unknown-name validation over the EXISTING combos. Until the catalog is ready the
@@ -108,16 +124,16 @@ export function ExtensionComboBuilder({
 
   const resetDraft = (): void => {
     setDraft([]);
-    setDraftConfig({ schema: null, valid: true });
+    setDraftConfigs({});
+    setDraftSeeds({});
     setEditing(null);
   };
 
   /**
-   * Compose the draft names into config-bearing elements. `output_schema` takes the
-   * inline-authored config; every other name keeps the edited combo's existing
-   * element verbatim when it survives — preserving any author `config` (e.g. an
-   * `ask_external` verifier) the builder does not itself author — and a newly-added
-   * name becomes a bare-name element.
+   * Compose the draft names into elements. An extension whose catalog entry declares
+   * a `config_schema` is authored as `{ name, config }` through its settings form;
+   * any other name stays a bare element, or the edited combo's own element when it
+   * survives the edit.
    */
   const composeCombo = (): PresetExtensionElement[] => {
     const source = editing === null ? undefined : value[editing];
@@ -125,11 +141,10 @@ export function ExtensionComboBuilder({
     if (source !== undefined) {
       for (const element of source) byName.set(extensionElementName(element), element);
     }
-    return draft.map((name) =>
-      name === OUTPUT_SCHEMA
-        ? { name, config: { schema: draftConfig.schema ?? {} } }
-        : (byName.get(name) ?? name),
-    );
+    return draft.map((name) => {
+      const report = settingsSchemas.has(name) ? draftConfigs[name] : undefined;
+      return report === undefined ? (byName.get(name) ?? name) : { name, config: report.config };
+    });
   };
 
   const commitCombo = (): void => {
@@ -146,11 +161,28 @@ export function ExtensionComboBuilder({
   const startEdit = (index: number): void => {
     const combo = value[index];
     if (combo === undefined) return;
+    const seeds: Record<string, Record<string, unknown>> = {};
+    for (const element of combo) {
+      if (typeof element !== 'string') seeds[element.name] = element.config;
+    }
     setDraft(comboElementNames(combo));
-    setDraftConfig({ schema: outputSchemaConfig(combo), valid: true });
+    setDraftConfigs({});
+    setDraftSeeds(seeds);
     setEditing(index);
   };
 
+  const changeDraft = (next: string[]): void => {
+    setDraft(next);
+    // An unticked extension's settings report goes with it.
+    setDraftConfigs((current) =>
+      Object.fromEntries(Object.entries(current).filter(([name]) => next.includes(name))),
+    );
+  };
+
+  const changeDraftConfig = (name: string, change: ExtensionConfigChange): void => {
+    setDraftConfigs((current) => ({ ...current, [name]: change }));
+  };
+
   const removeCombo = (index: number): void => {
     onChange(value.filter((_, i) => i !== index).map((combo) => [...combo]));
     // Removing the row under edit (or one before it) invalidates the draft target.
@@ -172,10 +204,10 @@ export function ExtensionComboBuilder({
       <ComboDraftEditor
         available={available}
         draft={draft}
-        onDraftChange={setDraft}
-        draftHasOutputSchema={draftHasOutputSchema}
-        draftConfig={draftConfig}
-        onDraftConfigChange={setDraftConfig}
+        onDraftChange={changeDraft}
+        configurable={configurable}
+        draftConfigs={draftSeeds}
+        onDraftConfigChange={changeDraftConfig}
         isDuplicate={isDuplicate}
         canAdd={canAdd}
         editing={editing}

package/src/components/extension-combo-parts.tsx

@@ -7,35 +7,18 @@ import type { Extension, PresetExtensionElement } from '@tai42/api-client';
 import { Fragment, type ReactNode } from 'react';
 
 import { comboElementNames } from '../extension-combos';
-import { SchemaEditor, type SchemaEditorChange } from '../schema-editor';
+import type { JsonSchema } from '../schema-form/types';
 import { Badge } from './badge';
+import { type ExtensionConfigChange, ExtensionConfigEditor } from './extension-config-editor';
 import { ExtensionPicker } from './extension-picker';
 import { CloseIcon, XCircleIcon } from './icons';
 import { Button } from './primitives';
 
-/** The one config-taking extension this builder authors inline. */
-export const OUTPUT_SCHEMA = 'output_schema';
-
 /** Two combos are equal when their NAME sequences match (config is not part of identity). */
 export function sameNames(a: readonly string[], b: readonly string[]): boolean {
   return a.length === b.length && a.every((name, index) => name === b[index]);
 }
 
-/** The stored `output_schema` config schema for a combo, if it carries one. */
-export function outputSchemaConfig(
-  combo: readonly PresetExtensionElement[],
-): Record<string, unknown> | null {
-  for (const element of combo) {
-    if (typeof element !== 'string' && element.name === OUTPUT_SCHEMA) {
-      const schema = element.config.schema;
-      return typeof schema === 'object' && schema !== null && !Array.isArray(schema)
-        ? (schema as Record<string, unknown>)
-        : {};
-    }
-  }
-  return null;
-}
-
 /** The element names in a combo that are absent from the known catalog. */
 export function unknownNames(
   combo: readonly PresetExtensionElement[],
@@ -158,14 +141,20 @@ export function CommittedComboList({
   );
 }
 
-/** The combo under construction: the extension picker, the inline output-schema
- *  editor when present, the duplicate note, and the Add/Update + Cancel actions. */
+/** A drafted extension whose catalog entry declares a settings schema. */
+export interface ConfigurableExtension {
+  readonly name: string;
+  readonly schema: JsonSchema;
+}
+
+/** The combo under construction: the extension picker, one settings form per drafted
+ *  configurable extension, the duplicate note, and the Add/Update + Cancel actions. */
 export function ComboDraftEditor({
   available,
   draft,
   onDraftChange,
-  draftHasOutputSchema,
-  draftConfig,
+  configurable,
+  draftConfigs,
   onDraftConfigChange,
   isDuplicate,
   canAdd,
@@ -178,9 +167,9 @@ export function ComboDraftEditor({
   readonly available: readonly Extension[];
   readonly draft: string[];
   readonly onDraftChange: (draft: string[]) => void;
-  readonly draftHasOutputSchema: boolean;
-  readonly draftConfig: SchemaEditorChange;
-  readonly onDraftConfigChange: (change: SchemaEditorChange) => void;
+  readonly configurable: readonly ConfigurableExtension[];
+  readonly draftConfigs: Readonly<Record<string, Record<string, unknown> | undefined>>;
+  readonly onDraftConfigChange: (name: string, change: ExtensionConfigChange) => void;
   readonly isDuplicate: boolean;
   readonly canAdd: boolean;
   readonly editing: number | null;
@@ -199,20 +188,21 @@ export function ComboDraftEditor({
         idPrefix={`${idPrefix}-draft`}
       />
 
-      {draftHasOutputSchema ? (
-        <SchemaEditor
-          value={draftConfig.schema}
-          onChange={onDraftConfigChange}
-          requireTitle={false}
-          label="Output schema"
-          description="The JSON Schema the output_schema extension enforces on this extension set's result."
-          disabled={disabled}
-          idPrefix={`${idPrefix}-output-schema`}
-          // Re-seed the editor when the draft target changes (a new draft vs a
+      {configurable.map(({ name, schema }) => (
+        <ExtensionConfigEditor
+          // Re-seed the form when the draft target changes (a new draft vs a
           // specific combo pulled in for edit).
-          key={editing === null ? 'new' : `edit-${String(editing)}`}
+          key={`${editing === null ? 'new' : String(editing)}-${name}`}
+          name={name}
+          schema={schema}
+          value={draftConfigs[name]}
+          onChange={(change) => {
+            onDraftConfigChange(name, change);
+          }}
+          disabled={disabled}
+          idPrefix={`${idPrefix}-settings-${name}`}
         />
-      ) : null}
+      ))}
 
       {isDuplicate ? (
         <p role="alert" className="tai-field-error">