@workbench-kit/shell-react 0.0.2-prototype.0.2.40 → 0.0.2-prototype.0.2.43

package/src/field-remap/index.ts

@@ -16,6 +16,8 @@ export {
 } from './panel.js';
 export {
   FieldRemapFlowMapper,
+  type FieldRemapConnectionFeedback,
+  type FieldRemapConnectionFeedbackReason,
   type FieldRemapFlowActions,
   type FieldRemapFlowMapperProps,
 } from './flow.js';

package/src/field-remap/io-class-browse.tsx

@@ -5,6 +5,8 @@ import {
   type SourceField,
   type TargetSlot,
 } from '@workbench-kit/field-remap';
+import { SideBarRow } from '@workbench-kit/react/layout';
+import { Badge } from '@workbench-kit/react/primitives';
 
 export type FieldRemapIoChrome = 'browse' | 'edit' | 'none';
 
@@ -56,25 +58,30 @@ function FieldTree({
     <ul className="workbench-field-remap-io-browse__fields">
       {nodes.map((node) => (
         <li key={node.id}>
-          <div className="workbench-field-remap-io-browse__row">
+          <SideBarRow className="workbench-field-remap-io-browse__row" data-static="true">
             <code className="workbench-field-remap-io-browse__path">{node.path ?? node.label}</code>
             <span className="workbench-field-remap-io-browse__meta">
               {node.dataType ? <span>{node.dataType}</span> : null}
               {node.classRef ? (
-                <span
+                <Badge
                   className="workbench-field-remap-io-browse__badge"
                   title={labels?.classRefTitle ?? 'classRef'}
+                  variant="muted"
                 >
                   {formatClassRef(node.classRef)}
-                </span>
+                </Badge>
               ) : null}
               {node.hidden === true ? (
-                <span className="workbench-field-remap-io-browse__badge" title="hidden">
+                <Badge
+                  className="workbench-field-remap-io-browse__badge"
+                  title="hidden"
+                  variant="muted"
+                >
                   {labels?.hiddenBadge ?? 'Hidden'}
-                </span>
+                </Badge>
               ) : null}
             </span>
-          </div>
+          </SideBarRow>
           {node.children?.length ? (
             <FieldTree emptyLabel={emptyLabel} labels={labels} nodes={node.children} />
           ) : null}
@@ -101,22 +108,27 @@ function PortSection({
       {nodes.length === 0 ? (
         <p className="workbench-field-remap-io-browse__empty">{emptyLabel}</p>
       ) : (
-        nodes.map((node) => (
-          <div className="workbench-field-remap-io-browse__port" key={node.id}>
-            <p className="workbench-field-remap-io-browse__port-title">
-              <span className="workbench-field-remap-io-browse__port-id">{node.label}</span>
-              <span className="workbench-field-remap-io-browse__port-meta">
-                {node.classRef ? formatClassRef(node.classRef) : node.id}
-                {node.hidden === true ? ` · ${labels?.hiddenBadge ?? 'Hidden'}` : ''}
-              </span>
-            </p>
-            <FieldTree
-              emptyLabel={emptyLabel}
-              labels={labels}
-              nodes={node.children?.length ? node.children : [node]}
-            />
-          </div>
-        ))
+        <ul className="workbench-field-remap-io-browse__ports">
+          {nodes.map((node) => (
+            <li className="workbench-field-remap-io-browse__port" key={node.id}>
+              <SideBarRow
+                className="workbench-field-remap-io-browse__port-title"
+                data-static="true"
+              >
+                <span className="workbench-field-remap-io-browse__port-id">{node.label}</span>
+                <span className="workbench-field-remap-io-browse__port-meta">
+                  {node.classRef ? formatClassRef(node.classRef) : node.id}
+                  {node.hidden === true ? ` · ${labels?.hiddenBadge ?? 'Hidden'}` : ''}
+                </span>
+              </SideBarRow>
+              <FieldTree
+                emptyLabel={emptyLabel}
+                labels={labels}
+                nodes={node.children?.length ? node.children : [node]}
+              />
+            </li>
+          ))}
+        </ul>
       )}
     </section>
   );

package/src/field-remap/keyboard.ts

@@ -0,0 +1,16 @@
+const EDITABLE_SHORTCUT_TARGET = [
+  'input',
+  'textarea',
+  'select',
+  '[contenteditable]:not([contenteditable="false"])',
+  '[role="textbox"]',
+  '[data-field-remap-shortcuts="ignore"]',
+].join(', ');
+
+export function isFieldRemapEditableShortcutTarget(target: EventTarget | null): boolean {
+  return (
+    typeof Element !== 'undefined' &&
+    target instanceof Element &&
+    target.closest(EDITABLE_SHORTCUT_TARGET) !== null
+  );
+}

package/src/field-remap/modal-detail.tsx

@@ -0,0 +1,34 @@
+import type { JSX, ReactNode } from 'react';
+import { Modal } from '@workbench-kit/react/modal';
+import { WorkbenchModalPortal } from '@workbench-kit/react/workbench/modal-portal';
+
+export interface FieldRemapModalDetailProps {
+  readonly children: ReactNode;
+  readonly closeLabel: string;
+  readonly onClose: () => void;
+  readonly title: string;
+}
+
+export function FieldRemapModalDetail({
+  children,
+  closeLabel,
+  onClose,
+  title,
+}: FieldRemapModalDetailProps): JSX.Element {
+  return (
+    <WorkbenchModalPortal>
+      <Modal
+        bodyClassName="workbench-field-remap-detail-modal__body"
+        bodyPadding="none"
+        bodyScroll="auto"
+        className="workbench-field-remap-detail-modal"
+        closeLabel={closeLabel}
+        closeOnEscape={false}
+        title={title}
+        onClose={onClose}
+      >
+        {children}
+      </Modal>
+    </WorkbenchModalPortal>
+  );
+}

package/src/field-remap/panel.tsx

@@ -5,6 +5,7 @@ import {
   useRef,
   useState,
   type JSX,
+  type KeyboardEvent,
   type Ref,
 } from 'react';
 import {
@@ -50,6 +51,7 @@ import {
 } from './shape-io-editor.js';
 import { createFieldRemapPreviewController } from './preview-controller.js';
 import type { FieldRemapPreviewState } from './preview.js';
+import { isFieldRemapEditableShortcutTarget } from './keyboard.js';
 import './view.css';
 
 export type { FieldRemapHistorySnapshot } from './history.js';
@@ -80,6 +82,8 @@ export interface FieldRemapPanelProps {
   readonly sample?: FieldRemapSampleId | FieldRemapSampleDefinition | undefined;
   /** Optional host-owned transform registry (defaults to builtins + JSONata). */
   readonly transforms?: ValueTransformRegistry | undefined;
+  /** View-only authoring guard forwarded to Flow; this is not an authorization boundary. */
+  readonly readOnly?: boolean | undefined;
   /**
    * When true (default), show paste-JSON / type editors for host-owned shapes.
    * Prefer {@link FieldRemapPanelProps.ioChrome} for browse-first hosts; when
@@ -112,7 +116,7 @@ export interface FieldRemapPanelProps {
    * channel is controlled, the Panel never creates a partial private history.
    */
   readonly historyOwner?: FieldRemapHistoryOwner | undefined;
-  /** Imperative semantic undo/redo actions for host chrome. Keyboard routing remains host-owned. */
+  /** Imperative semantic undo/redo actions for host chrome. */
   readonly historyActionsRef?: Ref<FieldRemapHistoryActions | null> | undefined;
   /** Reports the active history owner's current undo/redo availability. */
   readonly onHistoryAvailabilityChange?:
@@ -136,6 +140,7 @@ export interface FieldRemapPanelProps {
   readonly showBindingsList?: FieldRemapFlowMapperProps['showBindingsList'];
   readonly showConvertPalette?: FieldRemapFlowMapperProps['showConvertPalette'];
   readonly emptyDetail?: FieldRemapFlowMapperProps['emptyDetail'];
+  readonly detailPresentation?: FieldRemapFlowMapperProps['detailPresentation'];
   /** Show the controller-owned preview snapshot in the nested Flow rail. */
   readonly showFlowPreview?: boolean;
   /** Forwarded to {@link FieldRemapFlowMapper} Controls MiniMap toggle. */
@@ -249,6 +254,7 @@ function createFieldRemapPreviewSignature(): (value: unknown) => string {
 export function FieldRemapPanel({
   sample: sampleProp,
   transforms: transformsProp,
+  readOnly = false,
   editableShapes = true,
   ioChrome: ioChromeProp,
   includeHidden: includeHiddenProp,
@@ -273,6 +279,7 @@ export function FieldRemapPanel({
   showBindingsList,
   showConvertPalette,
   emptyDetail,
+  detailPresentation,
   showFlowPreview,
   onShowMinimapChange,
   onPaneContextMenu,
@@ -282,7 +289,8 @@ export function FieldRemapPanel({
   labels,
   t,
 }: FieldRemapPanelProps): JSX.Element {
-  const ioChrome = resolveFieldRemapIoChrome(ioChromeProp, editableShapes);
+  const configuredIoChrome = resolveFieldRemapIoChrome(ioChromeProp, editableShapes);
+  const ioChrome = readOnly && configuredIoChrome === 'edit' ? 'browse' : configuredIoChrome;
   const [uncontrolledIncludeHidden, setUncontrolledIncludeHidden] = useState(false);
   const includeHiddenControlled = includeHiddenProp !== undefined;
   const includeHidden = includeHiddenControlled ? includeHiddenProp : uncontrolledIncludeHidden;
@@ -503,6 +511,41 @@ export function FieldRemapPanel({
       : (historyOwner?.canRedo ?? false),
   };
 
+  const handleHistoryKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (readOnly) {
+      return;
+    }
+    if (
+      event.defaultPrevented ||
+      event.altKey ||
+      (!event.ctrlKey && !event.metaKey) ||
+      isFieldRemapEditableShortcutTarget(event.target)
+    ) {
+      return;
+    }
+
+    const key = event.key.toLowerCase();
+    const requestsUndo = key === 'z' && !event.shiftKey;
+    const requestsRedo =
+      (key === 'z' && event.shiftKey) ||
+      (key === 'y' && event.ctrlKey && !event.metaKey && !event.shiftKey);
+    if (
+      (!requestsUndo && !requestsRedo) ||
+      (requestsUndo && !historyAvailability.canUndo) ||
+      (requestsRedo && !historyAvailability.canRedo)
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    if (requestsUndo) {
+      undo();
+    } else {
+      redo();
+    }
+  };
+
   useImperativeHandle(historyActionsRef, () => ({ ...historyAvailability, undo, redo }), [
     historyAvailability.canRedo,
     historyAvailability.canUndo,
@@ -644,6 +687,8 @@ export function FieldRemapPanel({
       data-testid="field-remap-demo"
       data-sample-id={sample.id}
       data-edges-mode={edgesControlled ? 'controlled' : 'uncontrolled'}
+      data-read-only={readOnly ? 'true' : 'false'}
+      onKeyDown={handleHistoryKeyDown}
     >
       <header className="workbench-field-remap-demo__header">
         <h2 className="workbench-field-remap-demo__title">{sample.title}</h2>
@@ -691,9 +736,11 @@ export function FieldRemapPanel({
       ) : null}
 
       <FieldRemapFlowMapper
+        readOnly={readOnly}
         sources={flowSources}
         targets={flowTargets}
         edges={flowEdges}
+        parentChildConflicts={conflicts}
         transforms={registry}
         onEdgesChange={commitFlowEdges}
         operators={operators}
@@ -708,6 +755,7 @@ export function FieldRemapPanel({
         showBindingsList={showBindingsList}
         showConvertPalette={showConvertPalette}
         emptyDetail={emptyDetail}
+        detailPresentation={detailPresentation}
         {...(showFlowPreview ? { preview, showPreview: true } : {})}
         onShowMinimapChange={onShowMinimapChange}
         includeHidden={includeHidden}
@@ -720,18 +768,6 @@ export function FieldRemapPanel({
         t={t}
       />
 
-      {conflicts.length > 0 ? (
-        <p
-          className="workbench-field-remap-demo__warn"
-          role="status"
-          data-testid="field-remap-conflicts"
-        >
-          Warning: parent and child fields are both mapped (
-          {conflicts.map((item) => `${item.parentId} / ${item.childId}`).join('; ')}). Prefer one
-          level.
-        </p>
-      ) : null}
-
       {preview.status === 'error' ? (
         <p className="workbench-field-remap-demo__error" role="alert">
           {preview.message}

package/src/field-remap/transform-options-editor.tsx

@@ -225,7 +225,11 @@ export function TransformOptionsEditor({
   };
 
   return (
-    <div className="workbench-field-remap-options" data-testid={`${testIdPrefix}-editor`}>
+    <div
+      className="workbench-field-remap-options"
+      data-field-remap-shortcuts="ignore"
+      data-testid={`${testIdPrefix}-editor`}
+    >
       {fields.map((field) => {
         const controlId = `${baseId}-${field.key}`;
         const testId = `${testIdPrefix}-${field.key}`;

package/src/field-remap/view.css

@@ -772,6 +772,11 @@
   font: inherit;
 }
 
+.workbench-field-remap-flow__binding-select.is-selected {
+  color: var(--vscode-textLink-foreground, var(--color-accent, #3794ff));
+  font-weight: 600;
+}
+
 .workbench-field-remap-detail,
 .workbench-field-remap-convert-note {
   display: flex;
@@ -797,6 +802,15 @@
   overflow: auto;
 }
 
+.workbench-field-remap-detail-modal .workbench-field-remap-detail,
+.workbench-field-remap-detail-modal .workbench-field-remap-convert-note {
+  min-height: 0;
+  max-height: none;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
 .workbench-field-remap-preview {
   display: flex;
   flex-direction: column;
@@ -1418,18 +1432,15 @@
 }
 
 .workbench-field-remap-io-browse {
+  --ui-sidebar-inline-padding: var(--shell-spacing-side-bar-inline);
+  --ui-sidebar-row-block-padding: var(--shell-spacing-side-bar-block);
+  --ui-sidebar-tree-indent-step: 10px;
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
+  gap: var(--shell-spacing-block);
   width: 100%;
 }
 
-@media (max-width: 800px) {
-  .workbench-field-remap-io-browse {
-    grid-template-columns: 1fr;
-  }
-}
-
 .workbench-field-remap-io-browse__toggle {
   display: inline-flex;
   align-items: center;
@@ -1442,31 +1453,36 @@
 .workbench-field-remap-io-browse__section {
   display: flex;
   flex-direction: column;
-  gap: 0.65rem;
+  gap: var(--shell-spacing-block);
   min-width: 0;
 }
 
 .workbench-field-remap-io-browse__section-title {
   margin: 0;
-  font-size: 0.85rem;
+  padding: 0 var(--ui-sidebar-inline-padding);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
   font-weight: 600;
 }
 
+.workbench-field-remap-io-browse__ports,
+.workbench-field-remap-io-browse__fields {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 .workbench-field-remap-io-browse__port {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  padding: 0.5rem 0.65rem;
-  border: 1px solid var(--vscode-widget-border, var(--color-border, #3c3c3c));
-  border-radius: 4px;
+  border-block-start: 1px solid var(--color-border);
 }
 
 .workbench-field-remap-io-browse__port-title {
-  display: flex;
   flex-wrap: wrap;
-  gap: 0.35rem 0.75rem;
-  margin: 0;
-  align-items: baseline;
+  min-height: 26px;
+  gap: 5px;
+  padding: var(--ui-sidebar-row-block-padding) var(--ui-sidebar-inline-padding);
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
 }
 
 .workbench-field-remap-io-browse__port-id {
@@ -1474,49 +1490,52 @@
 }
 
 .workbench-field-remap-io-browse__port-meta {
-  font-size: 0.75rem;
-  opacity: 0.75;
-}
-
-.workbench-field-remap-io-browse__fields {
-  margin: 0;
-  padding-left: 1rem;
-  list-style: disc;
+  margin-inline-start: auto;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
 }
 
 .workbench-field-remap-io-browse__fields .workbench-field-remap-io-browse__fields {
-  margin-top: 0.25rem;
+  padding-inline-start: var(--ui-sidebar-tree-indent-step);
 }
 
 .workbench-field-remap-io-browse__row {
-  display: flex;
   flex-wrap: wrap;
-  gap: 0.35rem 0.75rem;
-  align-items: baseline;
+  min-height: 26px;
+  gap: 5px;
+  padding: var(--ui-sidebar-row-block-padding) var(--ui-sidebar-inline-padding);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.workbench-field-remap-io-browse__port-title:hover,
+.workbench-field-remap-io-browse__row:hover {
+  background: transparent;
 }
 
 .workbench-field-remap-io-browse__path {
-  font-size: 0.8rem;
+  color: var(--color-text);
+  font-size: inherit;
   word-break: break-all;
 }
 
 .workbench-field-remap-io-browse__meta {
   display: inline-flex;
   flex-wrap: wrap;
-  gap: 0.35rem;
-  font-size: 0.75rem;
-  opacity: 0.8;
+  align-items: center;
+  gap: 5px;
+  margin-inline-start: auto;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
 }
 
 .workbench-field-remap-io-browse__badge {
-  padding: 0.05rem 0.35rem;
-  border-radius: 3px;
-  background: var(--vscode-badge-background, rgba(127, 127, 127, 0.25));
-  color: var(--vscode-badge-foreground, inherit);
+  flex: none;
 }
 
 .workbench-field-remap-io-browse__empty {
   margin: 0;
-  font-size: 0.8rem;
-  opacity: 0.7;
+  padding: var(--ui-sidebar-row-block-padding) var(--ui-sidebar-inline-padding);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
 }

package/src/index.ts

@@ -114,6 +114,8 @@ export {
 } from './field-remap/panel.js';
 export {
   FieldRemapFlowMapper,
+  type FieldRemapConnectionFeedback,
+  type FieldRemapConnectionFeedbackReason,
   type FieldRemapFlowActions,
   type FieldRemapFlowMapperProps,
 } from './field-remap/flow.js';
@@ -230,6 +232,11 @@ export {
   resolveShellCommandActivities,
 } from './workbench/command-palette.js';
 export { WorkbenchCommandHost, type WorkbenchCommandHostProps } from './workbench/command-host.js';
+export {
+  WorkbenchCommandHostController,
+  type WorkbenchCommandHostControllerProps,
+  type WorkbenchCommandHostExecutor,
+} from './workbench/command-host-controller.js';
 export { WorkbenchStartupGate, type WorkbenchStartupGateProps } from './workbench/startup-gate.js';
 export {
   normalizeKeybindingKeyFromEvent,

package/src/management/keybinding-overrides-storage.ts

@@ -1,22 +1,21 @@
-import {
-  parseWorkbenchKeybindingsConfig,
-  type WorkbenchKeybindingDefinition,
-} from '@workbench-kit/workbench-config';
+import { type WorkbenchKeybindingDefinition } from '@workbench-kit/workbench-config';
 import {
   type WorkbenchPersistenceDiagnosticOptions,
-  type WorkbenchPersistenceReadResult,
   type WorkbenchPersistenceWriteResult,
   type WorkbenchStorageReader,
   type WorkbenchStorageWriter,
 } from '@workbench-kit/workbench-core';
-
 import {
-  readLocalJsonStorage,
-  readLocalJsonStorageResult,
-  resolveLocalWorkbenchStorage,
-  writeLocalJsonStorage,
-  writeLocalJsonStorageResult,
-} from '../storage/local-json-storage.js';
+  readWorkbenchKeybindingOverridesStorageResult,
+  writeWorkbenchKeybindingOverridesStorageResult,
+  type WorkbenchKeybindingOverridesStorageReadResult,
+} from '@workbench-kit/workbench-core/keybinding-overrides-storage';
+import {
+  resolveWorkbenchShortcutPlatform,
+  type WorkbenchShortcutPlatform,
+} from '@workbench-kit/platform';
+
+import { resolveLocalWorkbenchStorage } from '../storage/local-json-storage.js';
 
 export const DEFAULT_WORKBENCH_KEYBINDING_STORAGE_KEY = 'workbench-kit/.workbench/keybindings';
 
@@ -27,22 +26,35 @@ export function isWorkbenchKeybindingPersistenceAvailable(): boolean {
 export function readPersistedKeybindingOverrides(
   storageKey = DEFAULT_WORKBENCH_KEYBINDING_STORAGE_KEY,
   storage?: WorkbenchStorageReader,
+  options: ReadPersistedKeybindingOverridesOptions = {},
 ): readonly WorkbenchKeybindingDefinition[] {
-  return readLocalJsonStorage(storageKey, parseWorkbenchKeybindingsConfig, () => [], storage);
+  return readPersistedKeybindingOverridesResult(storageKey, storage, options).value;
+}
+
+export interface ReadPersistedKeybindingOverridesOptions extends WorkbenchPersistenceDiagnosticOptions {
+  readonly platform?: WorkbenchShortcutPlatform | undefined;
+}
+
+export interface PersistedKeybindingOverridesReadResult extends WorkbenchKeybindingOverridesStorageReadResult {
+  readonly value: readonly WorkbenchKeybindingDefinition[];
 }
 
 export function readPersistedKeybindingOverridesResult(
   storageKey = DEFAULT_WORKBENCH_KEYBINDING_STORAGE_KEY,
   storage?: WorkbenchStorageReader,
-  options: WorkbenchPersistenceDiagnosticOptions = {},
-): WorkbenchPersistenceReadResult<readonly WorkbenchKeybindingDefinition[]> {
-  return readLocalJsonStorageResult(
-    storageKey,
-    parseWorkbenchKeybindingsConfig,
-    () => [],
-    storage,
+  options: ReadPersistedKeybindingOverridesOptions = {},
+): PersistedKeybindingOverridesReadResult {
+  const result = readWorkbenchKeybindingOverridesStorageResult({
     options,
-  );
+    platform: options.platform ?? resolveWorkbenchShortcutPlatform(),
+    storage: resolveLocalWorkbenchStorage(storage),
+    storageKey,
+  });
+
+  return {
+    ...result,
+    value: result.entries,
+  };
 }
 
 export function writePersistedKeybindingOverrides(
@@ -50,7 +62,15 @@ export function writePersistedKeybindingOverrides(
   storageKey = DEFAULT_WORKBENCH_KEYBINDING_STORAGE_KEY,
   storage?: WorkbenchStorageWriter,
 ): void {
-  writeLocalJsonStorage(storageKey, overrides, storage, { errorMode: 'throw' });
+  const resolvedStorage = resolveLocalWorkbenchStorage(storage);
+  if (!resolvedStorage) {
+    return;
+  }
+
+  const result = writePersistedKeybindingOverridesResult(overrides, storageKey, resolvedStorage);
+  if (!result.committed) {
+    throw new Error(result.diagnostic.message);
+  }
 }
 
 export function writePersistedKeybindingOverridesResult(
@@ -59,5 +79,10 @@ export function writePersistedKeybindingOverridesResult(
   storage?: WorkbenchStorageWriter,
   options: WorkbenchPersistenceDiagnosticOptions = {},
 ): WorkbenchPersistenceWriteResult {
-  return writeLocalJsonStorageResult(storageKey, overrides, storage, options);
+  return writeWorkbenchKeybindingOverridesStorageResult({
+    entries: overrides,
+    options,
+    storage: resolveLocalWorkbenchStorage(storage),
+    storageKey,
+  });
 }

package/src/management/keybinding-settings.tsx

@@ -3,11 +3,20 @@ import { KeybindingManagementPanel } from '@workbench-kit/react/workbench/manage
 import { useKeybindingManagementModel } from './use-keybinding-management.js';
 
 export function WorkbenchKeybindingManagementSettings() {
-  const { entries, overrideCount, resetKeybinding, setKeybinding } = useKeybindingManagementModel();
+  const {
+    editingDisabledReason,
+    entries,
+    overrideCount,
+    platform,
+    resetKeybinding,
+    setKeybinding,
+  } = useKeybindingManagementModel();
 
   return (
     <KeybindingManagementPanel
+      editingDisabledReason={editingDisabledReason}
       entries={entries}
+      platform={platform}
       summaryLabel={`${entries.length} command${entries.length === 1 ? '' : 's'} · ${overrideCount} user override${overrideCount === 1 ? '' : 's'}`}
       onResetKeybinding={resetKeybinding}
       onSetKeybinding={setKeybinding}