@workbench-kit/shell-react 0.0.2-prototype.0.2.33 → 0.0.2-prototype.0.2.34

package/src/extensions/use-extension-management.ts

@@ -1,22 +1,18 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
 import {
   DEFAULT_EXTENSION_CATALOG_TRUST_POLICY,
   DEFAULT_EXTENSION_INSTALL_TRUST_STORAGE_KEY,
-  DEFAULT_INSTALLED_EXTENSIONS_STORAGE_KEY,
   ExtensionInstallApprovalRequiredError,
   applyExtensionInstallPlanToRecords,
   assertExtensionCatalogUrlAllowed,
   loadExtensionInstallTrustRecords,
-  loadInstalledExtensions,
   parseExtensionCatalog,
   recordExtensionInstallTrust,
-  saveExtensionInstallTrustRecords,
-  saveInstalledExtensions,
-  toggleInstalledExtensionEnabled,
+  saveExtensionInstallTrustRecordsResult,
   type ExtensionCatalogEntry,
   type ExtensionCatalogTrustPolicy,
   type ExtensionInstallTrustRecord,
-  type InstalledExtensionRecord,
+  type WorkbenchPersistenceDiagnosticHandler,
 } from '@workbench-kit/workbench-core';
 import type {
   ExtensionCatalogBrowseEntry,
@@ -30,61 +26,67 @@ import {
   createExtensionCatalogBrowseEntries,
   createExtensionInstallPlanningContext,
   createExtensionManagementEntries,
+  type ExtensionUninstallActionConstraint,
 } from './management-model.js';
 import { useWorkbench, type WorkbenchStorageAdapter } from '../shell/provider.js';
+import { useExtensionEnablementController } from './extension-enablement-context.js';
+import type {
+  ExtensionEnablementTransitionResult,
+  ExtensionUninstallActionResult,
+} from './extension-enablement-controller.js';
+import { useWorkbenchPersistenceDiagnosticHandler } from '../shell/persistence-diagnostic-context.js';
+import {
+  reportPersistenceWriteResult,
+  usePersistenceDiagnosticHandlerRef,
+} from '../storage/persistence-diagnostics.js';
 
 export interface UseExtensionManagementModelOptions {
   catalogTrustPolicy?: ExtensionCatalogTrustPolicy | undefined;
   catalogUrl?: string | undefined;
-  installedExtensionsStorage?: WorkbenchStorageAdapter | undefined;
-  installedExtensionsStorageKey?: string | undefined;
   installTrustStorage?: WorkbenchStorageAdapter | undefined;
   installTrustStorageKey?: string | undefined;
+  onPersistenceDiagnostic?: WorkbenchPersistenceDiagnosticHandler | undefined;
 }
 
 export function useExtensionManagementModel({
   catalogTrustPolicy = DEFAULT_EXTENSION_CATALOG_TRUST_POLICY,
   catalogUrl = '/extension-catalog.json',
-  installedExtensionsStorage,
-  installedExtensionsStorageKey,
   installTrustStorage,
   installTrustStorageKey = DEFAULT_EXTENSION_INSTALL_TRUST_STORAGE_KEY,
+  onPersistenceDiagnostic,
 }: UseExtensionManagementModelOptions = {}) {
   const workbench = useWorkbench();
-  const { availableExtensions, extensionRegistry } = workbench;
-  const resolvedInstalledExtensionsStorage =
-    installedExtensionsStorage ?? workbench.installedExtensionsStorage;
-  const resolvedInstalledExtensionsStorageKey =
-    installedExtensionsStorageKey ??
-    workbench.installedExtensionsStorageKey ??
-    DEFAULT_INSTALLED_EXTENSIONS_STORAGE_KEY;
-  const resolvedInstallTrustStorage = installTrustStorage ?? resolvedInstalledExtensionsStorage;
+  const providerPersistenceDiagnostic = useWorkbenchPersistenceDiagnosticHandler();
+  const diagnosticHandlerRef = usePersistenceDiagnosticHandlerRef(
+    onPersistenceDiagnostic ?? providerPersistenceDiagnostic,
+  );
+  const extensionEnablement = useExtensionEnablementController();
+  const { availableExtensions, extensionCatalog } = workbench;
+  const resolvedInstallTrustStorage = installTrustStorage ?? workbench.installedExtensionsStorage;
+  const installedRecords = useSyncExternalStore(
+    extensionEnablement.subscribeInstalledRecords,
+    extensionEnablement.getInstalledRecordsSnapshot,
+    extensionEnablement.getInstalledRecordsSnapshot,
+  );
   const [catalogEntries, setCatalogEntries] = useState<readonly ExtensionCatalogEntry[]>([]);
   const [catalogLoading, setCatalogLoading] = useState(Boolean(catalogUrl));
   const [catalogError, setCatalogError] = useState<string | undefined>();
   const [pendingAction, setPendingAction] = useState<
     ExtensionManagementPendingAction | undefined
   >();
-  const [installedRecords, setInstalledRecords] = useState<readonly InstalledExtensionRecord[]>(
-    () =>
-      loadInstalledExtensions(
-        resolvedInstalledExtensionsStorageKey,
-        resolvedInstalledExtensionsStorage,
-      ),
-  );
+  const [pendingUninstallEntry, setPendingUninstallEntry] = useState<
+    ExtensionManagementEntry | undefined
+  >();
+  const [uninstallActionConstraint, setUninstallActionConstraint] = useState<
+    ExtensionUninstallActionConstraint | undefined
+  >();
+  const [lastTransition, setLastTransition] = useState<
+    ExtensionEnablementTransitionResult | undefined
+  >();
   const [installTrustRecords, setInstallTrustRecords] = useState<
     readonly ExtensionInstallTrustRecord[]
   >(() => loadExtensionInstallTrustRecords(installTrustStorageKey, resolvedInstallTrustStorage));
 
-  useEffect(() => {
-    setInstalledRecords(
-      loadInstalledExtensions(
-        resolvedInstalledExtensionsStorageKey,
-        resolvedInstalledExtensionsStorage,
-      ),
-    );
-  }, [resolvedInstalledExtensionsStorage, resolvedInstalledExtensionsStorageKey]);
-
   useEffect(() => {
     setInstallTrustRecords(
       loadExtensionInstallTrustRecords(installTrustStorageKey, resolvedInstallTrustStorage),
@@ -138,28 +140,66 @@ export function useExtensionManagementModel({
   }, [catalogTrustPolicy, catalogUrl]);
 
   const installedEntries = useMemo<readonly ExtensionManagementEntry[]>(() => {
-    return createExtensionManagementEntries({
+    const projectedEntries = createExtensionManagementEntries({
       availableExtensions,
-      extensionRegistry,
+      extensionCatalog,
       installedRecords,
+      transition: lastTransition,
+      uninstallActionConstraint,
     });
-  }, [availableExtensions, extensionRegistry, installedRecords]);
+    if (!pendingUninstallEntry) {
+      return projectedEntries;
+    }
+
+    return [
+      ...projectedEntries.filter((entry) => entry.id !== pendingUninstallEntry.id),
+      pendingUninstallEntry,
+    ].sort((left, right) => left.displayName.localeCompare(right.displayName));
+  }, [
+    availableExtensions,
+    extensionCatalog,
+    installedRecords,
+    lastTransition,
+    pendingUninstallEntry,
+    uninstallActionConstraint,
+  ]);
+
+  const handleTransition = useCallback(
+    (
+      result: ExtensionEnablementTransitionResult,
+      pendingKind: ExtensionManagementPendingAction['kind'],
+    ) => {
+      setLastTransition(result);
+      if (result.kind !== 'reloadRequired') {
+        setPendingAction(undefined);
+        return;
+      }
+
+      setPendingAction({ entryId: result.extensionId, kind: pendingKind });
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(() => {
+          window.location.reload();
+        });
+      }
+    },
+    [],
+  );
 
   const browseEntries = useMemo<readonly ExtensionCatalogBrowseEntry[]>(() => {
     return createExtensionCatalogBrowseEntries({
       availableExtensions,
       catalogEntries,
-      extensionRegistry,
+      extensionCatalog,
       installedRecords,
     });
-  }, [availableExtensions, catalogEntries, extensionRegistry, installedRecords]);
+  }, [availableExtensions, catalogEntries, extensionCatalog, installedRecords]);
 
   const installCatalogEntry = useCallback(
     (entry: ExtensionCatalogBrowseEntry, options?: ExtensionInstallOptions) => {
       const installContext = createExtensionInstallPlanningContext({
         availableExtensions,
         catalogEntries,
-        extensionRegistry,
+        extensionCatalog,
         installedRecords,
       });
       const plan = createCatalogEntryInstallPlan(entry, installContext);
@@ -178,26 +218,15 @@ export function useExtensionManagementModel({
         installSources: installContext.installSources,
         plan,
       });
-      saveInstalledExtensions(
-        next,
-        resolvedInstalledExtensionsStorageKey,
-        resolvedInstalledExtensionsStorage,
-      );
-      setInstalledRecords(next);
-      setPendingAction({ entryId: entry.id, kind: 'install' });
-      if (typeof window !== 'undefined') {
-        window.requestAnimationFrame(() => {
-          window.location.reload();
-        });
-      }
+      handleTransition(extensionEnablement.commitInstalledRecords(next, entry.id), 'install');
     },
     [
       availableExtensions,
       catalogEntries,
-      extensionRegistry,
+      extensionCatalog,
       installedRecords,
-      resolvedInstalledExtensionsStorage,
-      resolvedInstalledExtensionsStorageKey,
+      extensionEnablement,
+      handleTransition,
     ],
   );
 
@@ -207,31 +236,58 @@ export function useExtensionManagementModel({
         return;
       }
 
-      const next = toggleInstalledExtensionEnabled(
-        entry.id,
-        enabled,
-        resolvedInstalledExtensionsStorageKey,
-        resolvedInstalledExtensionsStorage,
-      );
-      setInstalledRecords(next);
-      setPendingAction({ entryId: entry.id, kind: 'toggle' });
+      handleTransition(extensionEnablement.toggleInstalledExtension(entry.id, enabled), 'toggle');
+    },
+    [extensionEnablement, handleTransition],
+  );
+
+  const uninstallInstalledEntry = useCallback(
+    (entry: ExtensionManagementEntry) => {
+      if (entry.source !== 'installed' || entry.id.startsWith('workbench-kit.builtin.')) {
+        return;
+      }
+
+      const result = extensionEnablement.uninstallInstalledExtension(entry.id);
+      if (result.kind === 'blocked' || result.kind === 'ineligibleTarget') {
+        setUninstallActionConstraint(toExtensionUninstallActionConstraint(result));
+        return;
+      }
+
+      setUninstallActionConstraint(undefined);
+      setLastTransition(result);
+      if (result.kind !== 'reloadRequired') {
+        setPendingUninstallEntry(undefined);
+        return;
+      }
+
+      setPendingUninstallEntry(entry);
       if (typeof window !== 'undefined') {
         window.requestAnimationFrame(() => {
           window.location.reload();
         });
       }
     },
-    [resolvedInstalledExtensionsStorage, resolvedInstalledExtensionsStorageKey],
+    [extensionEnablement],
   );
 
   const rememberInstallTrust = useCallback(
     (entry: ExtensionCatalogBrowseEntry) => {
       const permissions = entry.installPlan?.permissions ?? [];
       const next = recordExtensionInstallTrust(entry.id, permissions, installTrustRecords);
-      saveExtensionInstallTrustRecords(next, installTrustStorageKey, resolvedInstallTrustStorage);
       setInstallTrustRecords(next);
+      const persistence = saveExtensionInstallTrustRecordsResult(
+        next,
+        installTrustStorageKey,
+        resolvedInstallTrustStorage,
+      );
+      reportPersistenceWriteResult(persistence, diagnosticHandlerRef);
     },
-    [installTrustRecords, installTrustStorageKey, resolvedInstallTrustStorage],
+    [
+      diagnosticHandlerRef,
+      installTrustRecords,
+      installTrustStorageKey,
+      resolvedInstallTrustStorage,
+    ],
   );
 
   return {
@@ -242,7 +298,35 @@ export function useExtensionManagementModel({
     installedEntries,
     installTrustRecords,
     pendingAction,
+    pendingUninstallEntryId: pendingUninstallEntry?.id,
     rememberInstallTrust,
     toggleInstalledEntry,
+    uninstallInstalledEntry,
+  };
+}
+
+function toExtensionUninstallActionConstraint(
+  result: Extract<
+    ExtensionUninstallActionResult,
+    { readonly kind: 'blocked' | 'ineligibleTarget' }
+  >,
+): ExtensionUninstallActionConstraint {
+  if (result.kind === 'blocked') {
+    return {
+      eligibility: {
+        dependentExtensionIds: result.dependentExtensionIds,
+        kind: result.kind,
+        unresolvedExtensionIds: result.unresolvedExtensionIds,
+      },
+      extensionId: result.extensionId,
+    };
+  }
+  return {
+    eligibility: {
+      diagnosticExtensionIds: result.diagnosticExtensionIds,
+      kind: result.kind,
+      reason: result.reason,
+    },
+    extensionId: result.extensionId,
   };
 }

package/src/extensions/view.tsx

@@ -32,8 +32,10 @@ export function BuiltinExtensionsView({
     installedEntries,
     installTrustRecords,
     pendingAction,
+    pendingUninstallEntryId,
     rememberInstallTrust,
     toggleInstalledEntry,
+    uninstallInstalledEntry,
   } = useExtensionManagementModel({ catalogTrustPolicy, catalogUrl });
 
   const isInstallTrusted = useCallback(
@@ -55,9 +57,11 @@ export function BuiltinExtensionsView({
       isInstallTrusted={isInstallTrusted}
       missingExtensionIds={missingExtensionIds}
       pendingAction={pendingAction}
+      pendingUninstallEntryId={pendingUninstallEntryId}
       onInstall={installCatalogEntry}
       onRememberInstallTrust={rememberInstallTrust}
       onToggleEnabled={toggleInstalledEntry}
+      onUninstall={uninstallInstalledEntry}
     />
   );
 }

package/src/field-remap/chrome-labels.ts

@@ -18,6 +18,11 @@ export interface FieldRemapChromeLabels {
   readonly convertPaletteDescription: string;
   readonly convertPaletteAriaLabel: string;
   readonly convertsListAriaLabel: string;
+  /** Additive filter copy. Omitted legacy label objects use the English defaults. */
+  readonly convertFilterLabel?: string;
+  readonly convertFilterPlaceholder?: string;
+  readonly clearConvertFilter?: string;
+  readonly noMatchingConverts?: string;
   readonly placeConvert: string;
   readonly addCombine: string;
   readonly addSplit: string;
@@ -32,15 +37,29 @@ export interface FieldRemapChromeLabels {
   readonly hideHiddenFields: string;
   readonly emptyDetailTitle: string;
   readonly emptyDetailDescription: string;
+  /** Additive Flow preview copy. Omitted legacy label objects use English defaults. */
+  readonly previewTitle?: string;
+  readonly previewLoading?: string;
+  readonly previewError?: string;
+  readonly previewDocumentResult?: string;
+  readonly previewBindingResult?: string;
+  readonly previewStepIntermediateUnavailable?: string;
+  readonly previewOperatorIntermediateUnavailable?: string;
+  readonly previewDraftUnavailable?: string;
+  readonly previewSelectionUnavailable?: string;
 }
 
-export const defaultFieldRemapChromeLabels: FieldRemapChromeLabels = {
+export const defaultFieldRemapChromeLabels = {
   bindingsTitle: 'Bindings',
   convertPaletteTitle: 'Convert palette',
   convertPaletteDescription:
     'Place a convert first, then wire source → draft → target. Drafts stay off the document until both ports bind.',
   convertPaletteAriaLabel: 'Convert palette',
   convertsListAriaLabel: 'Converts',
+  convertFilterLabel: 'Filter converts',
+  convertFilterPlaceholder: 'Filter by label or id',
+  clearConvertFilter: 'Clear convert filter',
+  noMatchingConverts: 'No matching converts.',
   placeConvert: 'Place convert',
   addCombine: 'Add combine',
   addSplit: 'Add split',
@@ -57,7 +76,18 @@ export const defaultFieldRemapChromeLabels: FieldRemapChromeLabels = {
   emptyDetailTitle: 'Start with a convert',
   emptyDetailDescription:
     'Use the Convert palette to place a convert, then wire source → draft → target. Or select an existing binding / convert note on the canvas.',
-};
+  previewTitle: 'Sample preview',
+  previewLoading: 'Updating preview…',
+  previewError: 'Preview failed',
+  previewDocumentResult: 'Final document output',
+  previewBindingResult: 'Final binding value',
+  previewStepIntermediateUnavailable:
+    'Per-step intermediate values are unavailable; this is the final binding value.',
+  previewOperatorIntermediateUnavailable:
+    'Selected-operator intermediate values are unavailable; this is the final document output.',
+  previewDraftUnavailable: 'Draft converts are not executable until they become a binding.',
+  previewSelectionUnavailable: 'The selected binding or operator is no longer available.',
+} as const satisfies Required<FieldRemapChromeLabels>;
 
 /** Stable capability ids for optional `t()` injection (not free prose). */
 export const fieldRemapChromeLabelKeys = {
@@ -66,6 +96,10 @@ export const fieldRemapChromeLabelKeys = {
   convertPaletteDescription: 'fieldRemap.convertPaletteDescription',
   convertPaletteAriaLabel: 'fieldRemap.convertPaletteAriaLabel',
   convertsListAriaLabel: 'fieldRemap.convertsListAriaLabel',
+  convertFilterLabel: 'fieldRemap.convertFilterLabel',
+  convertFilterPlaceholder: 'fieldRemap.convertFilterPlaceholder',
+  clearConvertFilter: 'fieldRemap.clearConvertFilter',
+  noMatchingConverts: 'fieldRemap.noMatchingConverts',
   placeConvert: 'fieldRemap.placeConvert',
   addCombine: 'fieldRemap.addCombine',
   addSplit: 'fieldRemap.addSplit',
@@ -80,6 +114,15 @@ export const fieldRemapChromeLabelKeys = {
   hideHiddenFields: 'fieldRemap.hideHiddenFields',
   emptyDetailTitle: 'fieldRemap.emptyDetailTitle',
   emptyDetailDescription: 'fieldRemap.emptyDetailDescription',
+  previewTitle: 'fieldRemap.previewTitle',
+  previewLoading: 'fieldRemap.previewLoading',
+  previewError: 'fieldRemap.previewError',
+  previewDocumentResult: 'fieldRemap.previewDocumentResult',
+  previewBindingResult: 'fieldRemap.previewBindingResult',
+  previewStepIntermediateUnavailable: 'fieldRemap.previewStepIntermediateUnavailable',
+  previewOperatorIntermediateUnavailable: 'fieldRemap.previewOperatorIntermediateUnavailable',
+  previewDraftUnavailable: 'fieldRemap.previewDraftUnavailable',
+  previewSelectionUnavailable: 'fieldRemap.previewSelectionUnavailable',
 } as const satisfies Record<keyof FieldRemapChromeLabels, string>;
 
 export function resolveFieldRemapChromeLabels(
@@ -101,6 +144,10 @@ export function resolveFieldRemapChromeLabels(
     convertPaletteDescription: resolve('convertPaletteDescription'),
     convertPaletteAriaLabel: resolve('convertPaletteAriaLabel'),
     convertsListAriaLabel: resolve('convertsListAriaLabel'),
+    convertFilterLabel: resolve('convertFilterLabel'),
+    convertFilterPlaceholder: resolve('convertFilterPlaceholder'),
+    clearConvertFilter: resolve('clearConvertFilter'),
+    noMatchingConverts: resolve('noMatchingConverts'),
     placeConvert: resolve('placeConvert'),
     addCombine: resolve('addCombine'),
     addSplit: resolve('addSplit'),
@@ -115,5 +162,14 @@ export function resolveFieldRemapChromeLabels(
     hideHiddenFields: resolve('hideHiddenFields'),
     emptyDetailTitle: resolve('emptyDetailTitle'),
     emptyDetailDescription: resolve('emptyDetailDescription'),
+    previewTitle: resolve('previewTitle'),
+    previewLoading: resolve('previewLoading'),
+    previewError: resolve('previewError'),
+    previewDocumentResult: resolve('previewDocumentResult'),
+    previewBindingResult: resolve('previewBindingResult'),
+    previewStepIntermediateUnavailable: resolve('previewStepIntermediateUnavailable'),
+    previewOperatorIntermediateUnavailable: resolve('previewOperatorIntermediateUnavailable'),
+    previewDraftUnavailable: resolve('previewDraftUnavailable'),
+    previewSelectionUnavailable: resolve('previewSelectionUnavailable'),
   };
 }

package/src/field-remap/convert-palette.tsx

@@ -1,6 +1,6 @@
-import type { JSX } from 'react';
+import { useRef, useState, type JSX, type KeyboardEvent } from 'react';
 import { SideBarList, SideBarListItem } from '@workbench-kit/react/layout';
-import { IconButton } from '@workbench-kit/react/primitives';
+import { ClearableTextInput, IconButton } from '@workbench-kit/react/primitives';
 import type { ValueTransformRegistry } from '@workbench-kit/field-remap';
 
 import { defaultFieldRemapChromeLabels, type FieldRemapChromeLabels } from './chrome-labels.js';
@@ -32,6 +32,120 @@ export function FieldRemapConvertPalette({
   // The registry supports replacing definitions through `register`; resolve
   // display metadata on each host render even when the registry object is stable.
   const catalog = transforms.list().filter((definition) => definition.id !== 'identity');
+  const [filterQuery, setFilterQuery] = useState('');
+  const [requestedRovingTransformId, setRequestedRovingTransformId] = useState(() =>
+    catalog.some((definition) => definition.id === selectedTransformId)
+      ? selectedTransformId
+      : (catalog[0]?.id ?? ''),
+  );
+  const optionRefs = useRef(new Map<string, HTMLButtonElement>());
+  const normalizedFilterQuery = filterQuery.trim().toLowerCase();
+  const visibleCatalog = catalog.filter((definition) => {
+    if (!normalizedFilterQuery) {
+      return true;
+    }
+    return (
+      definition.id.toLowerCase().includes(normalizedFilterQuery) ||
+      definition.label.toLowerCase().includes(normalizedFilterQuery)
+    );
+  });
+  const visibleTransformIds = visibleCatalog.map((definition) => definition.id);
+  const selectedTransformIsVisible = visibleTransformIds.includes(selectedTransformId);
+  const rovingTransformId = visibleTransformIds.includes(requestedRovingTransformId)
+    ? requestedRovingTransformId
+    : selectedTransformIsVisible
+      ? selectedTransformId
+      : (visibleTransformIds[0] ?? '');
+  const filterLabel =
+    chromeLabels.convertFilterLabel ?? defaultFieldRemapChromeLabels.convertFilterLabel;
+  const filterPlaceholder =
+    chromeLabels.convertFilterPlaceholder ?? defaultFieldRemapChromeLabels.convertFilterPlaceholder;
+  const clearFilterLabel =
+    chromeLabels.clearConvertFilter ?? defaultFieldRemapChromeLabels.clearConvertFilter;
+  const noMatchingConverts =
+    chromeLabels.noMatchingConverts ?? defaultFieldRemapChromeLabels.noMatchingConverts;
+
+  const updateFilterQuery = (nextQuery: string) => {
+    const normalizedNextQuery = nextQuery.trim().toLowerCase();
+    const nextVisibleIds = catalog
+      .filter(
+        (definition) =>
+          !normalizedNextQuery ||
+          definition.id.toLowerCase().includes(normalizedNextQuery) ||
+          definition.label.toLowerCase().includes(normalizedNextQuery),
+      )
+      .map((definition) => definition.id);
+    setFilterQuery(nextQuery);
+    setRequestedRovingTransformId(
+      nextVisibleIds.includes(selectedTransformId)
+        ? selectedTransformId
+        : (nextVisibleIds[0] ?? ''),
+    );
+  };
+
+  const focusVisibleTransform = (transformId: string) => {
+    setRequestedRovingTransformId(transformId);
+    optionRefs.current.get(transformId)?.focus();
+  };
+
+  const handleFilterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+      return;
+    }
+    const targetId = selectedTransformIsVisible
+      ? selectedTransformId
+      : event.key === 'ArrowDown'
+        ? visibleTransformIds[0]
+        : visibleTransformIds[visibleTransformIds.length - 1];
+    if (!targetId) {
+      return;
+    }
+    event.preventDefault();
+    focusVisibleTransform(targetId);
+  };
+
+  const handleOptionKeyDown = (event: KeyboardEvent<HTMLButtonElement>, transformId: string) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (transformId !== selectedTransformId) {
+        onSelectedTransformIdChange(transformId);
+      }
+      onPlaceDraft(transformId);
+      return;
+    }
+
+    const currentIndex = visibleTransformIds.indexOf(transformId);
+    if (currentIndex < 0) {
+      return;
+    }
+    let nextIndex: number | undefined;
+    switch (event.key) {
+      case 'ArrowDown':
+        nextIndex = Math.min(currentIndex + 1, visibleTransformIds.length - 1);
+        break;
+      case 'ArrowUp':
+        nextIndex = Math.max(currentIndex - 1, 0);
+        break;
+      case 'Home':
+        nextIndex = 0;
+        break;
+      case 'End':
+        nextIndex = visibleTransformIds.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    const nextTransformId = visibleTransformIds[nextIndex];
+    if (!nextTransformId) {
+      return;
+    }
+    event.preventDefault();
+    focusVisibleTransform(nextTransformId);
+    if (nextTransformId !== selectedTransformId) {
+      onSelectedTransformIdChange(nextTransformId);
+    }
+  };
 
   return (
     <aside
@@ -49,11 +163,11 @@ export function FieldRemapConvertPalette({
           compact
           type="button"
           data-testid="field-remap-place-draft"
-          disabled={!selectedTransformId}
+          disabled={!selectedTransformId || !selectedTransformIsVisible}
           icon="codicon-add"
           label={chromeLabels.placeConvert}
           onClick={() => {
-            if (!selectedTransformId) {
+            if (!selectedTransformId || !selectedTransformIsVisible) {
               return;
             }
             onPlaceDraft(selectedTransformId);
@@ -61,24 +175,50 @@ export function FieldRemapConvertPalette({
         />
       </div>
 
+      <ClearableTextInput
+        aria-label={filterLabel}
+        className="workbench-field-remap-convert-palette__filter"
+        clearLabel={clearFilterLabel}
+        controlWidth="full"
+        placeholder={filterPlaceholder}
+        type="search"
+        value={filterQuery}
+        onClear={() => updateFilterQuery('')}
+        onKeyDown={handleFilterKeyDown}
+        onValueChange={updateFilterQuery}
+      />
+
       <SideBarList
         className="workbench-field-remap-convert-palette__list"
         role="listbox"
         aria-label={chromeLabels.convertsListAriaLabel}
       >
-        {catalog.map((definition) => {
+        {visibleCatalog.map((definition) => {
           const selected = definition.id === selectedTransformId;
           return (
             <SideBarListItem
+              ref={(element) => {
+                if (element) {
+                  optionRefs.current.set(definition.id, element);
+                } else {
+                  optionRefs.current.delete(definition.id);
+                }
+              }}
               key={definition.id}
               aria-selected={selected}
               data-testid={`field-remap-palette-item-${definition.id}`}
               role="option"
               selected={selected}
+              tabIndex={definition.id === rovingTransformId ? 0 : -1}
               variant="stacked"
               wrapperProps={{ role: 'presentation' }}
-              onClick={() => onSelectedTransformIdChange(definition.id)}
+              onClick={() => {
+                setRequestedRovingTransformId(definition.id);
+                onSelectedTransformIdChange(definition.id);
+              }}
               onDoubleClick={() => onPlaceDraft(definition.id)}
+              onFocus={() => setRequestedRovingTransformId(definition.id)}
+              onKeyDown={(event) => handleOptionKeyDown(event, definition.id)}
             >
               <strong>{definition.label}</strong>
               <code title={definition.id}>{definition.id}</code>
@@ -86,6 +226,11 @@ export function FieldRemapConvertPalette({
           );
         })}
       </SideBarList>
+      {visibleCatalog.length === 0 ? (
+        <p className="workbench-field-remap-convert-palette__empty" role="status">
+          {noMatchingConverts}
+        </p>
+      ) : null}
 
       {onAddCombine || onAddSplit ? (
         <div