@tai42/studio-sdk 30.0.1 → 31.0.0

package/src/components/searchable-select.tsx

@@ -0,0 +1,432 @@
+/**
+ * `SearchableSelect` — a single-choice select whose popup opens with a search box:
+ * typing narrows the options to those whose label contains the text (the SDK's one
+ * search rule, `matchesSearch`). It takes the same option shapes as `Select` — a flat
+ * `options` run or labelled `groups`, never both — and its trigger wears the same
+ * class, auto-wires to an enclosing `Field` the same way, and has the same
+ * `combobox` role, so the two read as one control with and without search.
+ *
+ * Keyboard: on the trigger, Enter, ArrowDown or ArrowUp opens the popup as the key goes
+ * down (as on `Select`), Space opens it as a button press, and a printable key opens it
+ * with that key already typed. In the search box ArrowDown
+ * and ArrowUp move the highlight, Enter chooses it, and Escape closes the popup and
+ * returns focus to the trigger. The highlight is exposed as the search box's
+ * `aria-activedescendant`, so focus never leaves the box while the reader moves.
+ *
+ * Large lists: the options are indexed once per options change, a keystroke runs one
+ * substring test per option against that index, and the list renders from a deferred
+ * copy of the query so typing stays responsive. Each row is memoised on its indexed
+ * entry, so a keystroke re-renders only the rows whose highlight or selection changed;
+ * the rest are kept or removed by React without rendering.
+ *
+ * The popup is a Radix Popover, so it shares the layer, focus and dismiss stack the
+ * design system's dialogs use: it opens above a dialog and closes on Escape or an
+ * outside press without closing the dialog under it.
+ */
+import * as RadixPopover from '@radix-ui/react-popover';
+import {
+  type KeyboardEvent,
+  memo,
+  type MouseEvent,
+  type ReactNode,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { SELECT_TRIGGER_CLASS } from './control-styles';
+import { useFieldControl, useFieldLabelId } from './field';
+import { CheckIcon, ChevronDownIcon } from './icons';
+import {
+  indexSections,
+  type SearchEntry,
+  type SearchSection,
+  shownEntry,
+  stepEntry,
+  visibleOptions,
+} from './searchable-select-model';
+import type { SelectGroup, SelectOption } from './select';
+
+/** Everything the two option shapes have in common. */
+interface SearchableSelectSharedProps {
+  /**
+   * The chosen option's value; `''` for none (the placeholder shows). A value no option
+   * carries shows as itself on the trigger.
+   */
+  readonly value: string;
+  readonly onValueChange: (value: string) => void;
+  readonly placeholder?: string;
+  readonly disabled?: boolean;
+  /**
+   * Accessible name for the trigger, its popup and its listbox when it is not wired to
+   * an enclosing `Field`. A `Field` wins where both are given, as on `Select`.
+   */
+  readonly 'aria-label'?: string;
+  /** IDREFs describing the trigger, concatenated ahead of an enclosing `Field`'s own. */
+  readonly 'aria-describedby'?: string;
+  /** Accessible name of the search box (e.g. "Search tools"). */
+  readonly searchLabel: string;
+}
+
+/** The FLAT shape: one ungrouped run of options. */
+export interface SearchableSelectProps extends SearchableSelectSharedProps {
+  readonly options: readonly SelectOption[];
+}
+
+/** The GROUPED shape: labelled clusters, each carrying its own options. */
+export interface SearchableSelectGroupsProps extends SearchableSelectSharedProps {
+  readonly groups: readonly SelectGroup[];
+}
+
+type SearchableSelectArgs =
+  | (SearchableSelectProps & { readonly groups?: undefined })
+  | (SearchableSelectGroupsProps & { readonly options?: undefined });
+
+interface OptionRowProps {
+  readonly entry: SearchEntry;
+  readonly id: string;
+  readonly highlighted: boolean;
+  readonly selected: boolean;
+}
+
+/** One option. Pointer handling is delegated to the listbox, so a row is pure markup. */
+const OptionRow = memo(function OptionRow({ entry, id, highlighted, selected }: OptionRowProps) {
+  const disabled = entry.option.disabled === true;
+  return (
+    <div
+      id={id}
+      role="option"
+      aria-selected={selected}
+      aria-disabled={disabled ? true : undefined}
+      className="tai-select-item"
+      data-position={entry.position}
+      data-highlighted={highlighted ? '' : undefined}
+      data-disabled={disabled ? '' : undefined}
+    >
+      <span>{entry.option.label}</span>
+      {selected ? (
+        <span className="tai-select-item-indicator" aria-hidden="true">
+          <CheckIcon />
+        </span>
+      ) : null}
+    </div>
+  );
+});
+
+/** The position of the option row an event happened in, or `undefined` outside one. */
+function positionAt(target: EventTarget): number | undefined {
+  if (!(target instanceof Element)) return undefined;
+  const row = target.closest<HTMLElement>('[role="option"]');
+  if (row === null || row.dataset.disabled !== undefined) return undefined;
+  const position = Number(row.dataset.position);
+  return Number.isInteger(position) ? position : undefined;
+}
+
+/** A key that types a character (and so starts a search from the closed trigger). */
+function isPrintable(event: KeyboardEvent): boolean {
+  return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+
+/**
+ * The select's interaction state over its indexed `sections`: whether the popup is
+ * open, the query and what it leaves visible, the highlight, and the key and pointer
+ * handlers that move it and choose.
+ *
+ * The highlight is held as an option VALUE, so a list that changes while open keeps
+ * it on the same option. Choosing and the empty status read the live query; only the
+ * rendered rows trail it through `useDeferredValue`, so a fast type-and-Enter picks
+ * from what was typed.
+ */
+function useSearchSelection(
+  sections: readonly SearchSection[],
+  value: string,
+  onValueChange: (value: string) => void,
+) {
+  const listboxId = useId();
+  const optionId = useCallback(
+    (position: number) => `${listboxId}-${String(position)}`,
+    [listboxId],
+  );
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [wanted, setWanted] = useState<string | undefined>(undefined);
+  // Only a keyboard move scrolls the highlight into view; a pointer already sees it.
+  const scrollOnMove = useRef(false);
+
+  const indexed = useMemo(() => sections.flatMap((section) => section.entries), [sections]);
+  const selectedEntry = useMemo(
+    () => indexed.find((entry) => entry.option.value === value),
+    [indexed, value],
+  );
+  const live = useMemo(() => visibleOptions(sections, query), [sections, query]);
+  const deferredQuery = useDeferredValue(query);
+  const rendered = useMemo(
+    () => (deferredQuery === query ? live : visibleOptions(sections, deferredQuery)),
+    [sections, deferredQuery, query, live],
+  );
+  const highlightedEntry = shownEntry(live.entries, wanted);
+  const highlighted = highlightedEntry?.position;
+
+  const scrollToHighlight = useCallback(
+    (position: number | undefined) => {
+      if (position === undefined) return;
+      document.getElementById(optionId(position))?.scrollIntoView({ block: 'nearest' });
+    },
+    [optionId],
+  );
+
+  useEffect(() => {
+    if (!scrollOnMove.current) return;
+    scrollOnMove.current = false;
+    scrollToHighlight(highlighted);
+  }, [highlighted, scrollToHighlight]);
+
+  const onOpenChange = (next: boolean): void => {
+    setOpen(next);
+    if (!next) setQuery('');
+    else setWanted(selectedEntry?.option.value);
+  };
+
+  /** Runs once the popup's rows are mounted: focus goes to the search box, and the
+   *  highlight (the chosen option on open) is brought into view. */
+  const onOpened = (): void => {
+    inputRef.current?.focus();
+    scrollToHighlight(highlighted);
+  };
+
+  const choose = (entry: SearchEntry | undefined): void => {
+    if (entry === undefined || entry.option.disabled === true) return;
+    if (entry.option.value !== value) onValueChange(entry.option.value);
+    onOpenChange(false);
+  };
+
+  const move = (to: SearchEntry | undefined): void => {
+    scrollOnMove.current = true;
+    setWanted(to?.option.value);
+  };
+
+  const onSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      move(stepEntry(live.entries, highlightedEntry, event.key === 'ArrowDown' ? 1 : -1));
+    } else if (event.key === 'Enter') {
+      // Enter chooses; it must never submit the form the select sits in.
+      event.preventDefault();
+      choose(highlightedEntry);
+    }
+  };
+
+  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {
+    if (open) return;
+    if (event.key === 'Enter' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      // Prevented, so a native button press does not follow and toggle it shut again.
+      event.preventDefault();
+      onOpenChange(true);
+    } else if (isPrintable(event) && event.key !== ' ') {
+      event.preventDefault();
+      onOpenChange(true);
+      setQuery(event.key);
+    }
+  };
+
+  const entryAt = (target: EventTarget): SearchEntry | undefined => {
+    const position = positionAt(target);
+    return position === undefined ? undefined : indexed[position];
+  };
+  const onListClick = (event: MouseEvent<HTMLDivElement>): void => {
+    choose(entryAt(event.target));
+  };
+  const onListPointerMove = (event: MouseEvent<HTMLDivElement>): void => {
+    const entry = entryAt(event.target);
+    if (entry !== undefined && entry.option.value !== wanted) setWanted(entry.option.value);
+  };
+
+  return {
+    listboxId,
+    optionId,
+    inputRef,
+    open,
+    onOpenChange,
+    onOpened,
+    query,
+    setQuery,
+    empty: live.entries.length === 0,
+    rendered,
+    highlighted,
+    selectedEntry,
+    onSearchKeyDown,
+    onTriggerKeyDown,
+    onListClick,
+    onListPointerMove,
+  };
+}
+
+export function SearchableSelect(props: SearchableSelectArgs): ReactNode {
+  const {
+    value,
+    onValueChange,
+    placeholder = 'Select…',
+    disabled,
+    'aria-label': ariaLabel,
+    'aria-describedby': ownDescribedBy,
+    searchLabel,
+  } = props;
+  // Untyped JavaScript is the only caller that reaches this; dropping one list would
+  // lose its every entry without a word.
+  if ((props.options === undefined) === (props.groups === undefined)) {
+    throw new Error(
+      'SearchableSelect renders exactly one of `options` or `groups`; it was given both, or neither.',
+    );
+  }
+  const field = useFieldControl();
+  const fieldLabelId = useFieldLabelId();
+  const sections = useMemo(
+    () => indexSections(props.options, props.groups),
+    [props.options, props.groups],
+  );
+  const {
+    listboxId,
+    optionId,
+    inputRef,
+    open,
+    onOpenChange,
+    onOpened,
+    query,
+    setQuery,
+    empty,
+    rendered,
+    highlighted,
+    selectedEntry,
+    onSearchKeyDown,
+    onTriggerKeyDown,
+    onListClick,
+    onListPointerMove,
+  } = useSearchSelection(sections, value, onValueChange);
+  // The popup and its listbox carry the control's own name: the Field's label, else
+  // the caller's `aria-label`. The search box is named apart by `searchLabel`.
+  const popupName =
+    field.id !== undefined && fieldLabelId !== undefined
+      ? { 'aria-labelledby': fieldLabelId }
+      : { 'aria-label': ariaLabel };
+  const describedBy = [ownDescribedBy, field['aria-describedby']].filter(
+    (id): id is string => id !== undefined,
+  );
+  const rows = (entries: readonly SearchEntry[]): ReactNode =>
+    entries.map((entry) => (
+      <OptionRow
+        key={entry.position}
+        entry={entry}
+        id={optionId(entry.position)}
+        highlighted={entry.position === highlighted}
+        selected={entry === selectedEntry}
+      />
+    ));
+
+  return (
+    <RadixPopover.Root open={open} onOpenChange={onOpenChange}>
+      <RadixPopover.Trigger
+        type="button"
+        role="combobox"
+        id={field.id}
+        className={SELECT_TRIGGER_CLASS}
+        disabled={disabled}
+        // A trigger claiming the field's id is named by that field's `<label for>`, and
+        // `aria-label` outranks a native label: emitting both would drop the visible text.
+        aria-label={field.id === undefined ? ariaLabel : undefined}
+        aria-describedby={describedBy.length > 0 ? describedBy.join(' ') : undefined}
+        aria-invalid={field['aria-invalid']}
+        onKeyDown={onTriggerKeyDown}
+      >
+        <span>{selectedEntry?.option.label ?? (value === '' ? placeholder : value)}</span>
+        <ChevronDownIcon />
+      </RadixPopover.Trigger>
+      <RadixPopover.Portal>
+        <RadixPopover.Content
+          className="tai-select-content tai-search-select-content"
+          align="start"
+          sideOffset={4}
+          {...popupName}
+          onOpenAutoFocus={(event) => {
+            event.preventDefault();
+            onOpened();
+          }}
+        >
+          <div className="tai-search-select-search">
+            <input
+              ref={inputRef}
+              type="text"
+              role="combobox"
+              className="tai-input"
+              aria-label={searchLabel}
+              aria-expanded="true"
+              aria-controls={listboxId}
+              aria-autocomplete="list"
+              aria-activedescendant={highlighted === undefined ? undefined : optionId(highlighted)}
+              autoComplete="off"
+              spellCheck={false}
+              placeholder={searchLabel}
+              value={query}
+              onChange={(event) => {
+                setQuery(event.target.value);
+              }}
+              onKeyDown={onSearchKeyDown}
+            />
+          </div>
+          {/* Rows take no focus: the search box keeps it and points at the highlight,
+              so a press on a row must not move focus out of the box first. */}
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- the search box owns the keyboard through aria-activedescendant; focus never reaches the list */}
+          <div
+            id={listboxId}
+            role="listbox"
+            {...popupName}
+            tabIndex={-1}
+            className="tai-select-viewport tai-search-select-list"
+            onMouseDown={(event) => {
+              event.preventDefault();
+            }}
+            onClick={onListClick}
+            onPointerMove={onListPointerMove}
+          >
+            {rendered.sections.map((section) =>
+              section.label === undefined ? (
+                rows(section.entries)
+              ) : (
+                <SectionGroup key={section.label} label={section.label}>
+                  {rows(section.entries)}
+                </SectionGroup>
+              ),
+            )}
+          </div>
+          {empty ? (
+            <p role="status" className="tai-status tai-search-select-empty">
+              {query.trim() === '' ? 'Nothing to choose.' : `Nothing matches “${query.trim()}”.`}
+            </p>
+          ) : null}
+        </RadixPopover.Content>
+      </RadixPopover.Portal>
+    </RadixPopover.Root>
+  );
+}
+
+function SectionGroup({
+  label,
+  children,
+}: {
+  readonly label: string;
+  readonly children: ReactNode;
+}): ReactNode {
+  const labelId = useId();
+  return (
+    <div role="group" aria-labelledby={labelId}>
+      <div id={labelId} className="tai-select-group-label tai-label">
+        {label}
+      </div>
+      {children}
+    </div>
+  );
+}

package/src/components/subject-section.tsx

@@ -16,7 +16,7 @@ import { type ReactNode, useState } from 'react';
 
 import { Field } from './field';
 import { TextInput } from './inputs';
-import { Select } from './select';
+import { SearchableSelect } from './searchable-select';
 
 /** One conversation-target option: `target_kind:target_name` value, `kind · name` label. */
 export interface SubjectTargetOption {
@@ -141,12 +141,13 @@ export function SubjectSection({
         >
           <p style={{ margin: 0, color: 'var(--tai-color-text-muted)' }}>{caption}</p>
           <Field label="Target">
-            <Select
+            <SearchableSelect
               value={target}
               onValueChange={onTargetChange}
               aria-label="Subject target"
               placeholder={targetPlaceholder}
               options={targetOptions}
+              searchLabel="Search targets"
             />
           </Field>
           <Field

package/src/components/table.tsx

@@ -8,6 +8,10 @@
  * A numeric column opts in with `numeric`, which stamps `data-numeric="true"` —
  * the hook the stylesheet right-aligns on tabular figures so digits line up.
  *
+ * A selected body row opts in with `selected`, which stamps `data-selected="true"` —
+ * the hook the stylesheet draws as the one selected-row look every table shares. It
+ * is presentation only: the row's own link carries `aria-current` for assistive tech.
+ *
  * Each wrapper FORWARDS a consumer `ref` to the native element it renders — the
  * attribute spread carries it, the same way it carries every other native prop —
  * so a caller that has to measure or scroll a cell is not forced back to a raw
@@ -48,10 +52,16 @@ export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
   readonly children?: ReactNode;
   /** A consumer ref for the `<tr>` itself. */
   readonly ref?: Ref<HTMLTableRowElement>;
+  /** Draw the row as the selected one. */
+  readonly selected?: boolean;
 }
 
-export function TR({ children, ...props }: TableRowProps) {
-  return <tr {...props}>{children}</tr>;
+export function TR({ children, selected = false, ...props }: TableRowProps) {
+  return (
+    <tr {...props} data-selected={selected ? 'true' : undefined}>
+      {children}
+    </tr>
+  );
 }
 
 /** Right-align a column of digits on tabular figures. */

package/src/components/tool-meta-access.tsx

@@ -0,0 +1,101 @@
+/**
+ * Who may write the tool-organization overlay, and what a refused overlay write shows.
+ *
+ * Each write is gated on the exact `method path` it calls — filing or editing a tool
+ * (`PATCH /api/tool-meta/tools/{tool_name}`), and creating, renaming, moving or
+ * deleting a folder (each its own folder route) — so a caller whose projection reaches
+ * one of them is offered that one alone. Every write also closes once the tool_meta
+ * store is known OFF: from the kind-status table before any write, or from a write's
+ * 501 `tool-meta-not-configured` refusal, which {@link useReportToolMetaRefusal}
+ * records for every screen at once.
+ */
+import type { apiRoutes } from '@tai42/api-client';
+import { type ReactNode, useCallback } from 'react';
+
+import { errorMessage } from '../errors';
+import { FeatureDisabled, featureDisabledMessage, isFeatureDisabled } from '../feature-disabled';
+import { useCanWrite } from '../hooks/useCapabilities';
+import { useFeatureOff, useReportFeatureOff } from '../hooks/useSystemKinds';
+import { ErrorState } from './primitives';
+
+/** The kind-status kind of the tool-organization overlay store. */
+const TOOL_META_KIND = 'tool_meta';
+
+type ApiRoutes = typeof apiRoutes;
+
+// The overlay write routes. Spelled here because the SDK takes no runtime import of
+// the API client; the `satisfies` pin fails to compile if a route's method or path
+// drifts from the generated route table.
+const TOOL_META_WRITE_ROUTES = {
+  editTool: { method: 'PATCH', path: '/api/tool-meta/tools/{tool_name}' },
+  createFolder: { method: 'POST', path: '/api/tool-meta/folders' },
+  renameFolder: { method: 'POST', path: '/api/tool-meta/folders/{folder_id}/rename' },
+  moveFolder: { method: 'POST', path: '/api/tool-meta/folders/{folder_id}/move' },
+  deleteFolder: { method: 'DELETE', path: '/api/tool-meta/folders/{folder_id}' },
+} as const satisfies {
+  readonly editTool: ApiRoutes['patch_api_tool_meta_tools_tool_name'];
+  readonly createFolder: ApiRoutes['post_api_tool_meta_folders'];
+  readonly renameFolder: ApiRoutes['post_api_tool_meta_folders_folder_id_rename'];
+  readonly moveFolder: ApiRoutes['post_api_tool_meta_folders_folder_id_move'];
+  readonly deleteFolder: ApiRoutes['delete_api_tool_meta_folders_folder_id'];
+};
+
+/** Which overlay writes the caller may be offered. */
+export interface ToolMetaWriteAccess {
+  /** Edit a tool's overlay row — its display name, tags, visibility or folder. */
+  readonly editTool: boolean;
+  readonly createFolder: boolean;
+  readonly renameFolder: boolean;
+  readonly moveFolder: boolean;
+  readonly deleteFolder: boolean;
+}
+
+function useRouteOpen(route: { readonly method: string; readonly path: string }): boolean {
+  return useCanWrite(route.path, route.method);
+}
+
+/**
+ * The overlay writes the caller may be offered: each one's own route reached by the
+ * projection (fail closed until the projection is ready) and the tool_meta store not
+ * known OFF.
+ */
+export function useToolMetaWriteAccess(): ToolMetaWriteAccess {
+  const off = useFeatureOff(TOOL_META_KIND);
+  const editTool = useRouteOpen(TOOL_META_WRITE_ROUTES.editTool);
+  const createFolder = useRouteOpen(TOOL_META_WRITE_ROUTES.createFolder);
+  const renameFolder = useRouteOpen(TOOL_META_WRITE_ROUTES.renameFolder);
+  const moveFolder = useRouteOpen(TOOL_META_WRITE_ROUTES.moveFolder);
+  const deleteFolder = useRouteOpen(TOOL_META_WRITE_ROUTES.deleteFolder);
+  return {
+    editTool: editTool && !off,
+    createFolder: createFolder && !off,
+    renameFolder: renameFolder && !off,
+    moveFolder: moveFolder && !off,
+    deleteFolder: deleteFolder && !off,
+  };
+}
+
+/**
+ * Hand a failed overlay write here: a not-configured refusal (501
+ * `tool-meta-not-configured`) is recorded so every screen withdraws its overlay
+ * writes; any other failure is left to the caller, which shows it.
+ */
+export function useReportToolMetaRefusal(): (error: unknown) => void {
+  const reportOff = useReportFeatureOff();
+  return useCallback(
+    (error: unknown) => {
+      if (isFeatureDisabled(error)) reportOff(TOOL_META_KIND, featureDisabledMessage(error));
+    },
+    [reportOff],
+  );
+}
+
+/** A failed overlay write as its dialog shows it: the muted OFF note with the server's
+ *  message for a not-configured refusal, an error for anything else. */
+export function ToolMetaWriteError({ error }: { readonly error: unknown }): ReactNode {
+  if (error === null || error === undefined) return null;
+  if (isFeatureDisabled(error)) {
+    return <FeatureDisabled feature="Tool metadata" message={featureDisabledMessage(error)} />;
+  }
+  return <ErrorState message={errorMessage(error)} />;
+}

package/src/components/tool-name-entry.tsx

@@ -0,0 +1,77 @@
+/**
+ * `ToolPicker`'s typed entry: the control it draws when the session may not list tools
+ * (the read answered 403). The server checks a named tool on save, so a reader who
+ * knows the name can still fill the field; the note under the input says why there is
+ * no list.
+ *
+ * The input holds a draft while the reader types and hands the trimmed name to
+ * `onChange` on blur or Enter, so a host that acts on every change (an "add" control
+ * that appends each emitted name) receives one whole name, never each keystroke. Enter
+ * commits instead of submitting the enclosing form, since the form would otherwise read
+ * the value from before the commit. A blank draft emits nothing: the input shows the
+ * stored value again.
+ */
+import { type KeyboardEvent, type ReactNode, useId, useState } from 'react';
+
+import { useFieldControl } from './field';
+import { TextInput } from './inputs';
+
+/** The sentence under the typed entry, naming why there is no list and what saving does. */
+export const TOOL_LIST_REFUSED_NOTE =
+  "This session cannot list tools, so type the tool's exact name. Saving checks that the deployment serves it.";
+
+const NOTE_STYLE = { margin: 0, color: 'var(--tai-color-text-muted)' } as const;
+
+export interface ToolNameEntryProps {
+  /** The stored name, or `null` for none. */
+  readonly value: string | null;
+  readonly onChange: (toolName: string) => void;
+  readonly disabled: boolean;
+  /** Names the input when no enclosing `Field` labels it; a `Field`'s label wins. */
+  readonly ariaLabel: string | undefined;
+}
+
+export function ToolNameEntry({
+  value,
+  onChange,
+  disabled,
+  ariaLabel,
+}: ToolNameEntryProps): ReactNode {
+  const noteId = useId();
+  const labelled = useFieldControl().id !== undefined;
+  const [draft, setDraft] = useState<string | undefined>(undefined);
+
+  const commit = (): void => {
+    if (draft === undefined) return;
+    const name = draft.trim();
+    setDraft(undefined);
+    if (name !== '' && name !== value) onChange(name);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    commit();
+  };
+
+  return (
+    <>
+      <TextInput
+        value={draft ?? value ?? ''}
+        onChange={(event) => {
+          setDraft(event.target.value);
+        }}
+        onBlur={commit}
+        onKeyDown={onKeyDown}
+        disabled={disabled}
+        aria-label={labelled ? undefined : ariaLabel}
+        aria-describedby={noteId}
+        autoComplete="off"
+        spellCheck={false}
+      />
+      <p id={noteId} role="status" style={NOTE_STYLE}>
+        {TOOL_LIST_REFUSED_NOTE}
+      </p>
+    </>
+  );
+}