@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/workbench/CommandPalette.tsx

@@ -1,6 +1,7 @@
 import {
   useEffect,
   useId,
+  useCallback,
   useMemo,
   useRef,
   useState,
@@ -8,538 +9,61 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from 'react';
-import type { CommandMenuItem, ResolvedCommandMenuCommandItem } from '@workbench-kit/platform';
-import { EmptyState } from '../primitives/EmptyState';
-import { cxCodicon } from '../utils/codicon';
+import { IconButton } from '../primitives/icon-button';
+import { TextInput } from '../primitives/text-input';
 import { cx } from '../utils/cx';
 import {
-  getWorkbenchStatusLabel,
-  isWorkbenchStatusBusy,
-  isWorkbenchStatusDisabled,
-  type WorkbenchStatus,
-} from './status';
-
-export type WorkbenchCommandStatus = WorkbenchStatus;
-
-export interface WorkbenchCommandExecution {
-  kind: 'agent' | 'local' | 'remote' | 'composite' | (string & {});
-  label?: string | undefined;
-}
-
-export type WorkbenchCommandFeedback = 'none' | 'status' | 'timeline';
-export type WorkbenchCommandOutput = 'none' | 'message' | 'event' | 'artifact';
-export type WorkbenchCommandSideEffect = 'none' | 'workspace-write' | 'external-write';
-export type WorkbenchCommandRunSource = 'grouped-list' | 'list' | 'palette' | 'suggest';
-export type WorkbenchCommandGroupBy =
-  | 'category'
-  | 'danger'
-  | 'execution'
-  | 'feedback'
-  | 'keyword'
-  | 'output'
-  | 'sideEffect'
-  | 'status';
-
-export interface WorkbenchCommandDescriptor {
-  category?: string | undefined;
-  danger?: boolean | undefined;
-  description?: string | undefined;
-  disabled?: boolean | undefined;
-  disabledReason?: string | undefined;
-  execution?: WorkbenchCommandExecution | undefined;
-  feedback?: WorkbenchCommandFeedback | undefined;
-  icon?: string | undefined;
-  id: string;
-  keywords?: readonly string[] | undefined;
-  label: string;
-  metadata?: Record<string, unknown> | undefined;
-  output?: WorkbenchCommandOutput | undefined;
-  shortcut?: string | undefined;
-  sideEffect?: WorkbenchCommandSideEffect | undefined;
-  status?: WorkbenchCommandStatus | undefined;
-}
-
-export interface WorkbenchCommandRunContext {
-  groupId?: string | undefined;
-  groupLabel?: string | undefined;
-  index: number;
-  query: string;
-  source: WorkbenchCommandRunSource;
-}
-
-export interface WorkbenchCommandFilterInput {
-  commands: readonly WorkbenchCommandDescriptor[];
-  limit?: number | undefined;
-  query?: string | undefined;
-}
-
-export interface WorkbenchCommandNavigationInput {
-  commands: readonly WorkbenchCommandDescriptor[];
-  currentIndex: number;
-  direction: 'next' | 'previous';
-}
-
-export interface WorkbenchCommandGroup {
-  commands: readonly WorkbenchCommandDescriptor[];
-  id: string;
-  label: string;
-}
-
-export interface WorkbenchCommandGroupingInput {
-  commands: readonly WorkbenchCommandDescriptor[];
-  fallbackGroupLabel?: string | undefined;
-  groupBy?: WorkbenchCommandGroupBy | undefined;
-}
-
-export type WorkbenchCommandDescriptorOverrides = Partial<
-  Omit<WorkbenchCommandDescriptor, 'danger' | 'disabled' | 'icon' | 'id' | 'label' | 'shortcut'>
->;
-
-const commandExecutionLabels: Record<string, string> = {
-  agent: 'Agent',
-  composite: 'Composite',
-  local: 'Local',
-  remote: 'Remote',
-};
-
-const commandFeedbackLabels: Record<WorkbenchCommandFeedback, string> = {
-  none: 'No feedback',
-  status: 'Status',
-  timeline: 'Timeline',
-};
-
-const commandOutputLabels: Record<WorkbenchCommandOutput, string> = {
-  artifact: 'Artifact',
-  event: 'Event',
-  message: 'Message',
-  none: 'No output',
-};
-
-const commandSideEffectLabels: Record<WorkbenchCommandSideEffect, string> = {
-  'external-write': 'External write',
-  none: 'No side effect',
-  'workspace-write': 'Workspace write',
-};
-
-function normalizedSearchText(value: string) {
-  return value.trim().toLocaleLowerCase();
-}
-
-function commandSearchText(command: WorkbenchCommandDescriptor) {
-  return normalizedSearchText(
-    [
-      command.id,
-      command.label,
-      command.description,
-      command.category,
-      command.shortcut,
-      ...(command.keywords ?? []),
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-}
-
-export function getWorkbenchCommandStatusLabel(status: WorkbenchCommandStatus) {
-  return getWorkbenchStatusLabel(status);
-}
-
-export function getWorkbenchCommandExecutionLabel(execution: WorkbenchCommandExecution) {
-  return execution.label ?? commandExecutionLabels[execution.kind] ?? execution.kind;
-}
-
-export function isWorkbenchCommandRunnable(command: WorkbenchCommandDescriptor) {
-  return !(command.disabled || (command.status && isWorkbenchStatusDisabled(command.status)));
-}
-
-function normalizeWorkbenchCommandGroupId(label: string) {
-  const normalized = normalizedSearchText(label)
-    .replace(/[^\p{L}\p{N}]+/gu, '-')
-    .replace(/^-+|-+$/g, '');
-
-  return normalized || 'group';
-}
-
-function getWorkbenchCommandGroupLabels({
-  command,
-  fallbackGroupLabel,
-  groupBy = 'category',
-}: {
-  command: WorkbenchCommandDescriptor;
-  fallbackGroupLabel: string;
-  groupBy?: WorkbenchCommandGroupBy | undefined;
-}) {
-  if (groupBy === 'keyword') {
-    return command.keywords?.length ? [...command.keywords] : [fallbackGroupLabel];
-  }
-
-  if (groupBy === 'category') return [command.category ?? fallbackGroupLabel];
-  if (groupBy === 'danger') return [command.danger ? 'Danger' : 'Default'];
-  if (groupBy === 'execution') {
-    return [
-      command.execution ? getWorkbenchCommandExecutionLabel(command.execution) : fallbackGroupLabel,
-    ];
-  }
-  if (groupBy === 'feedback')
-    return [command.feedback ? commandFeedbackLabels[command.feedback] : fallbackGroupLabel];
-  if (groupBy === 'output')
-    return [command.output ? commandOutputLabels[command.output] : fallbackGroupLabel];
-  if (groupBy === 'sideEffect') {
-    return [command.sideEffect ? commandSideEffectLabels[command.sideEffect] : fallbackGroupLabel];
-  }
-
-  const status = command.status ?? (command.disabled ? 'disabled' : undefined);
-  return [status ? getWorkbenchCommandStatusLabel(status) : fallbackGroupLabel];
-}
-
-export function groupWorkbenchCommands({
-  commands,
-  fallbackGroupLabel = 'Other',
-  groupBy = 'category',
-}: WorkbenchCommandGroupingInput): WorkbenchCommandGroup[] {
-  const groups = new Map<string, { commands: WorkbenchCommandDescriptor[]; label: string }>();
-
-  commands.forEach((command) => {
-    getWorkbenchCommandGroupLabels({ command, fallbackGroupLabel, groupBy }).forEach((label) => {
-      const id = normalizeWorkbenchCommandGroupId(`${groupBy}-${label}`);
-      const group = groups.get(id) ?? { commands: [], label };
-
-      group.commands.push(command);
-      groups.set(id, group);
-    });
-  });
-
-  return Array.from(groups, ([id, group]) => ({
-    commands: group.commands,
-    id,
-    label: group.label,
-  }));
-}
-
-export function filterWorkbenchCommands({
-  commands,
-  limit,
-  query = '',
-}: WorkbenchCommandFilterInput) {
-  const tokens = normalizedSearchText(query).split(/\s+/).filter(Boolean);
-  const filtered = tokens.length
-    ? commands.filter((command) => {
-        const searchText = commandSearchText(command);
-        return tokens.every((token) => searchText.includes(token));
-      })
-    : [...commands];
-
-  return typeof limit === 'number' ? filtered.slice(0, limit) : filtered;
-}
-
-export function getNextWorkbenchCommandIndex({
-  commands,
-  currentIndex,
-  direction,
-}: WorkbenchCommandNavigationInput) {
-  if (commands.length === 0) return -1;
-
-  const step = direction === 'next' ? 1 : -1;
-  const startIndex =
-    currentIndex >= 0 && currentIndex < commands.length
-      ? currentIndex
-      : direction === 'next'
-        ? -1
-        : 0;
-
-  for (let offset = 1; offset <= commands.length; offset += 1) {
-    const nextIndex = (startIndex + step * offset + commands.length) % commands.length;
-    const command = commands[nextIndex];
-    if (command && isWorkbenchCommandRunnable(command)) return nextIndex;
-  }
-
-  return -1;
-}
-
-export function commandMenuItemToWorkbenchCommandDescriptor(
-  item: ResolvedCommandMenuCommandItem,
-  overrides: WorkbenchCommandDescriptorOverrides = {},
-): WorkbenchCommandDescriptor {
-  const metadata = {
-    menuItemId: item.id,
-    ...overrides.metadata,
-  };
-
-  return {
-    ...overrides,
-    danger: item.danger,
-    disabled: item.disabled,
-    icon: item.icon,
-    id: item.commandId,
-    label: item.label,
-    metadata,
-    shortcut: item.shortcut,
-  };
-}
-
-export function commandMenuItemsToWorkbenchCommandDescriptors(
-  items: readonly CommandMenuItem[],
-  overridesByCommandId: Record<string, WorkbenchCommandDescriptorOverrides> = {},
-) {
-  return items.flatMap((item) =>
-    item.type === 'command'
-      ? [commandMenuItemToWorkbenchCommandDescriptor(item, overridesByCommandId[item.commandId])]
-      : [],
-  );
-}
-
-function commandIcon(command: WorkbenchCommandDescriptor) {
-  if (!command.icon) return null;
-  return <i aria-hidden="true" className={cxCodicon(command.icon)} />;
-}
-
-function commandStatus(command: WorkbenchCommandDescriptor) {
-  const status = command.status ?? (command.disabled ? 'disabled' : 'idle');
-
-  return (
-    <span
-      aria-label={getWorkbenchCommandStatusLabel(status)}
-      className="ui-workbench-command-item__status"
-      title={getWorkbenchCommandStatusLabel(status)}
-    >
-      <span aria-hidden="true" className="ui-workbench-command-item__status-dot" />
-    </span>
-  );
-}
-
-function commandExecution(command: WorkbenchCommandDescriptor) {
-  if (!command.execution) return null;
-
-  return (
-    <span className="ui-workbench-command-item__chip">
-      {getWorkbenchCommandExecutionLabel(command.execution)}
-    </span>
-  );
-}
-
-export interface WorkbenchCommandListProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children' | 'onSelect'
-> {
-  activeCommandId?: string | undefined;
-  commands: readonly WorkbenchCommandDescriptor[];
-  emptyLabel?: ReactNode | undefined;
-  onActiveCommandChange?: ((commandId: string) => void) | undefined;
-  onRunCommand?:
-    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
-    | undefined;
-  query?: string | undefined;
-  source?: WorkbenchCommandRunSource | undefined;
-}
-
-export function WorkbenchCommandList({
-  activeCommandId,
-  className,
-  commands,
-  emptyLabel = 'No commands available',
-  id,
-  onActiveCommandChange,
-  onRunCommand,
-  query = '',
-  source = 'list',
-  ...props
-}: WorkbenchCommandListProps) {
-  const generatedId = useId();
-  const listId = id ?? generatedId;
-
-  if (commands.length === 0) {
-    return (
-      <div id={id} className={cx('ui-workbench-command-list', className)} {...props}>
-        <EmptyState compact icon="codicon-search">
-          {emptyLabel}
-        </EmptyState>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      id={id}
-      aria-label={props['aria-label'] ?? 'Commands'}
-      className={cx('ui-workbench-command-list', className)}
-      role="listbox"
-      {...props}
-    >
-      {commands.map((command, index) => {
-        const active = command.id === activeCommandId;
-        const disabled = !isWorkbenchCommandRunnable(command);
-        const itemId = `${listId}-${command.id}`;
-        const descriptionId = command.description ? `${itemId}-description` : undefined;
-        const disabledReasonId = command.disabledReason ? `${itemId}-disabled` : undefined;
-
-        return (
-          <button
-            key={command.id}
-            id={itemId}
-            aria-busy={command.status && isWorkbenchStatusBusy(command.status) ? true : undefined}
-            aria-describedby={
-              [descriptionId, disabledReasonId].filter(Boolean).join(' ') || undefined
-            }
-            aria-selected={active}
-            className="ui-workbench-command-item"
-            data-active={active ? 'true' : undefined}
-            data-danger={command.danger ? 'true' : undefined}
-            data-status={command.status ?? (command.disabled ? 'disabled' : 'idle')}
-            disabled={disabled}
-            role="option"
-            type="button"
-            onClick={() => onRunCommand?.(command, { index, query, source })}
-            onMouseDown={(event) => {
-              if (source === 'suggest') event.preventDefault();
-            }}
-            onMouseEnter={() => onActiveCommandChange?.(command.id)}
-          >
-            <span className="ui-workbench-command-item__icon">{commandIcon(command)}</span>
-            <span className="ui-workbench-command-item__content">
-              <span className="ui-workbench-command-item__label">{command.label}</span>
-              {command.description ? (
-                <span id={descriptionId} className="ui-workbench-command-item__description">
-                  {command.description}
-                </span>
-              ) : null}
-              {command.disabledReason ? (
-                <span id={disabledReasonId} className="ui-visually-hidden">
-                  {command.disabledReason}
-                </span>
-              ) : null}
-            </span>
-            <span className="ui-workbench-command-item__meta">
-              {command.category ? (
-                <span className="ui-workbench-command-item__category">{command.category}</span>
-              ) : null}
-              {commandExecution(command)}
-              {command.shortcut ? (
-                <kbd className="ui-workbench-command-item__shortcut">{command.shortcut}</kbd>
-              ) : null}
-              {commandStatus(command)}
-            </span>
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-export interface WorkbenchCommandGroupShellProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children' | 'onSelect'
-> {
-  activeCommandId?: string | undefined;
-  commands: readonly WorkbenchCommandDescriptor[];
-  emptyLabel?: ReactNode | undefined;
-  fallbackGroupLabel?: string | undefined;
-  groupBy?: WorkbenchCommandGroupBy | undefined;
-  groupNavLabel?: string | undefined;
-  onActiveCommandChange?: ((commandId: string) => void) | undefined;
-  onRunCommand?:
-    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
-    | undefined;
-  query?: string | undefined;
-  showGroupCounts?: boolean | undefined;
-  showGroupNav?: boolean | undefined;
-}
-
-export function WorkbenchCommandGroupShell({
-  activeCommandId,
-  className,
-  commands,
-  emptyLabel = 'No commands available',
-  fallbackGroupLabel = 'Other',
-  groupBy = 'category',
-  groupNavLabel = 'Command groups',
-  onActiveCommandChange,
-  onRunCommand,
-  query = '',
-  showGroupCounts = true,
-  showGroupNav = true,
-  ...props
-}: WorkbenchCommandGroupShellProps) {
-  const generatedId = useId().replace(/:/g, '');
-  const filteredCommands = useMemo(
-    () => filterWorkbenchCommands({ commands, query }),
-    [commands, query],
-  );
-  const groups = useMemo(
-    () => groupWorkbenchCommands({ commands: filteredCommands, fallbackGroupLabel, groupBy }),
-    [fallbackGroupLabel, filteredCommands, groupBy],
-  );
-
-  if (groups.length === 0) {
-    return (
-      <div
-        className={cx('ui-workbench-command-group-shell', className)}
-        data-show-group-nav={showGroupNav ? 'true' : 'false'}
-        {...props}
-      >
-        <EmptyState compact icon="codicon-symbol-keyword">
-          {emptyLabel}
-        </EmptyState>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cx('ui-workbench-command-group-shell', className)}
-      data-show-group-nav={showGroupNav ? 'true' : 'false'}
-      {...props}
-    >
-      {showGroupNav ? (
-        <nav aria-label={groupNavLabel} className="ui-workbench-command-group-shell__nav">
-          {groups.map((group) => (
-            <a
-              key={group.id}
-              className="ui-workbench-command-group-shell__nav-link"
-              href={`#${generatedId}-${group.id}`}
-            >
-              <span>{group.label}</span>
-              {showGroupCounts ? <em>{group.commands.length}</em> : null}
-            </a>
-          ))}
-        </nav>
-      ) : null}
-      <div className="ui-workbench-command-group-shell__content">
-        {groups.map((group) => {
-          const titleId = `${generatedId}-${group.id}-title`;
-
-          return (
-            <section
-              key={group.id}
-              id={`${generatedId}-${group.id}`}
-              className="ui-workbench-command-group-shell__section"
-              aria-labelledby={titleId}
-            >
-              <div className="ui-workbench-command-group-shell__section-header">
-                <h2 id={titleId}>{group.label}</h2>
-                {showGroupCounts ? <span>{group.commands.length}</span> : null}
-              </div>
-              <WorkbenchCommandList
-                activeCommandId={activeCommandId}
-                aria-label={`${group.label} commands`}
-                commands={group.commands}
-                emptyLabel={emptyLabel}
-                query={query}
-                source="grouped-list"
-                onActiveCommandChange={onActiveCommandChange}
-                onRunCommand={(command, context) =>
-                  onRunCommand?.(command, {
-                    ...context,
-                    groupId: group.id,
-                    groupLabel: group.label,
-                  })
-                }
-              />
-            </section>
-          );
-        })}
-      </div>
-    </div>
-  );
+  filterWorkbenchCommands,
+  getNextWorkbenchCommandIndex,
+  isWorkbenchCommandRunnable,
+  normalizeWorkbenchCommandQuery,
+  type WorkbenchCommandDescriptor,
+  type WorkbenchCommandRunContext,
+} from './command-model';
+import { WorkbenchCommandList } from './CommandList';
+export { WorkbenchCommandList } from './CommandList';
+export type { WorkbenchCommandListProps } from './CommandList';
+export { WorkbenchCommandGroupShell } from './CommandGroupShell';
+export type { WorkbenchCommandGroupShellProps } from './CommandGroupShell';
+
+export {
+  commandMenuItemsToWorkbenchCommandDescriptors,
+  commandMenuItemToWorkbenchCommandDescriptor,
+  filterWorkbenchCommands,
+  getNextWorkbenchCommandIndex,
+  getWorkbenchCommandExecutionLabel,
+  getWorkbenchCommandStatusLabel,
+  groupWorkbenchCommands,
+  isWorkbenchCommandRunnable,
+  normalizeWorkbenchCommandQuery,
+} from './command-model';
+export {
+  getWorkbenchCommandExecutionPolicyLabel,
+  isWorkbenchCommandExecutionPolicy,
+  resolveWorkbenchCommandExecutionPolicy,
+} from './command-execution-policy';
+export type { ResolveWorkbenchCommandExecutionPolicyInput } from './command-execution-policy';
+export type {
+  WorkbenchCommandDescriptor,
+  WorkbenchCommandDescriptorOverrides,
+  WorkbenchCommandExecution,
+  WorkbenchCommandExecutionPolicy,
+  WorkbenchCommandFeedback,
+  WorkbenchCommandFilterInput,
+  WorkbenchCommandGroup,
+  WorkbenchCommandGroupBy,
+  WorkbenchCommandGroupingInput,
+  WorkbenchCommandNavigationInput,
+  WorkbenchCommandOutput,
+  WorkbenchCommandRunContext,
+  WorkbenchCommandRunSource,
+  WorkbenchCommandSideEffect,
+  WorkbenchCommandStatus,
+} from './command-model';
+
+interface WorkbenchCommandPaletteKeyEvent {
+  key: string;
+  preventDefault: () => void;
 }
 
 function useControllableCommandQuery({
@@ -614,41 +138,49 @@ export function WorkbenchCommandPalette({
     onQueryChange,
     query,
   });
+  const commandQuery = normalizeWorkbenchCommandQuery(resolvedQuery);
   const filteredCommands = useMemo(
-    () => filterWorkbenchCommands({ commands, query: resolvedQuery }),
-    [commands, resolvedQuery],
+    () => filterWorkbenchCommands({ commands, query: commandQuery }),
+    [commandQuery, commands],
   );
-  const resolvedActiveCommandId = activeCommandId ?? uncontrolledActiveCommandId;
+  const fallbackActiveCommand = filteredCommands.find((command) =>
+    isWorkbenchCommandRunnable(command),
+  );
+  const resolvedActiveCommandId =
+    activeCommandId ?? uncontrolledActiveCommandId ?? fallbackActiveCommand?.id;
   const activeIndex = filteredCommands.findIndex(
     (command) => command.id === resolvedActiveCommandId,
   );
-  const activeCommand =
-    activeIndex >= 0
-      ? filteredCommands[activeIndex]
-      : filteredCommands.find((command) => isWorkbenchCommandRunnable(command));
-
-  const updateActiveCommand = (commandId: string | undefined) => {
-    if (!commandId) return;
-    if (activeCommandId === undefined) {
-      setUncontrolledActiveCommandId(commandId);
-    }
-    onActiveCommandChange?.(commandId);
-  };
+  const activeCommand = activeIndex >= 0 ? filteredCommands[activeIndex] : fallbackActiveCommand;
+
+  const updateActiveCommand = useCallback(
+    (commandId: string | undefined) => {
+      if (!commandId) return;
+      if (activeCommandId === undefined) {
+        setUncontrolledActiveCommandId(commandId);
+      }
+      onActiveCommandChange?.(commandId);
+    },
+    [activeCommandId, onActiveCommandChange],
+  );
 
-  const restoreFocus = () => {
+  const restoreFocus = useCallback(() => {
     if (!restoreFocusOnClose) return;
     previousFocusRef.current?.focus();
-  };
+  }, [restoreFocusOnClose]);
 
-  const closePalette = () => {
+  const closePalette = useCallback(() => {
     restoreFocus();
     onClose();
-  };
-
-  const runCommand = (command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => {
-    if (!isWorkbenchCommandRunnable(command)) return;
-    onRunCommand?.(command, context);
-  };
+  }, [onClose, restoreFocus]);
+
+  const runCommand = useCallback(
+    (command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => {
+      if (!isWorkbenchCommandRunnable(command)) return;
+      onRunCommand?.(command, context);
+    },
+    [onRunCommand],
+  );
 
   useEffect(() => {
     if (!open) return;
@@ -660,51 +192,117 @@ export function WorkbenchCommandPalette({
       window.cancelAnimationFrame(frame);
       restoreFocus();
     };
-  }, [open]);
+  }, [open, restoreFocus]);
 
   useEffect(() => {
     if (!open) return;
-    if (filteredCommands.length === 0) return;
-    if (activeCommand && isWorkbenchCommandRunnable(activeCommand)) return;
+    if (activeCommandId !== undefined) return;
+
+    setUncontrolledActiveCommandId((currentCommandId) => {
+      const nextCommandId = fallbackActiveCommand?.id;
 
-    const nextIndex = getNextWorkbenchCommandIndex({
-      commands: filteredCommands,
-      currentIndex: -1,
-      direction: 'next',
+      return currentCommandId === nextCommandId ? currentCommandId : nextCommandId;
     });
-    updateActiveCommand(filteredCommands[nextIndex]?.id);
-  }, [activeCommand, filteredCommands, open]);
+  }, [activeCommandId, fallbackActiveCommand?.id, open]);
+
+  const handlePaletteKeyDown = useCallback(
+    (event: WorkbenchCommandPaletteKeyEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        closePalette();
+        return;
+      }
+
+      if (
+        event.key !== 'ArrowDown' &&
+        event.key !== 'ArrowUp' &&
+        event.key !== 'Home' &&
+        event.key !== 'End' &&
+        event.key !== 'PageDown' &&
+        event.key !== 'PageUp' &&
+        event.key !== 'Enter'
+      ) {
+        return;
+      }
+
+      if (event.key === 'Enter') {
+        if (!activeCommand) return;
+        event.preventDefault();
+        runCommand(activeCommand, {
+          index: filteredCommands.findIndex((command) => command.id === activeCommand.id),
+          query: commandQuery,
+          source: 'palette',
+        });
+        return;
+      }
 
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Escape') {
       event.preventDefault();
-      closePalette();
-      return;
-    }
 
-    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Enter') return;
+      const direction =
+        event.key === 'ArrowUp' || event.key === 'End' || event.key === 'PageUp'
+          ? 'previous'
+          : 'next';
+      const stepCount = event.key === 'PageDown' || event.key === 'PageUp' ? 5 : 1;
+      let nextIndex =
+        event.key === 'Home'
+          ? getNextWorkbenchCommandIndex({
+              commands: filteredCommands,
+              currentIndex: -1,
+              direction: 'next',
+            })
+          : event.key === 'End'
+            ? getNextWorkbenchCommandIndex({
+                commands: filteredCommands,
+                currentIndex: 0,
+                direction: 'previous',
+              })
+            : activeIndex;
+
+      if (event.key !== 'Home' && event.key !== 'End') {
+        for (let step = 0; step < stepCount; step += 1) {
+          const steppedIndex = getNextWorkbenchCommandIndex({
+            commands: filteredCommands,
+            currentIndex: nextIndex,
+            direction,
+          });
+
+          if (steppedIndex < 0 || steppedIndex === nextIndex) break;
+          nextIndex = steppedIndex;
+        }
+      }
+
+      if (nextIndex >= 0) {
+        updateActiveCommand(filteredCommands[nextIndex]?.id);
+      }
+    },
+    [
+      activeCommand,
+      activeIndex,
+      closePalette,
+      commandQuery,
+      filteredCommands,
+      runCommand,
+      updateActiveCommand,
+    ],
+  );
 
-    if (event.key === 'Enter') {
-      if (!activeCommand) return;
-      event.preventDefault();
-      runCommand(activeCommand, {
-        index: filteredCommands.findIndex((command) => command.id === activeCommand.id),
-        query: resolvedQuery,
-        source: 'palette',
-      });
-      return;
-    }
+  useEffect(() => {
+    if (!open) return undefined;
 
-    const nextIndex = getNextWorkbenchCommandIndex({
-      commands: filteredCommands,
-      currentIndex: activeIndex,
-      direction: event.key === 'ArrowDown' ? 'next' : 'previous',
-    });
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.defaultPrevented) return;
 
-    if (nextIndex >= 0) {
-      event.preventDefault();
-      updateActiveCommand(filteredCommands[nextIndex]?.id);
-    }
+      handlePaletteKeyDown(event);
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [handlePaletteKeyDown, open]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    handlePaletteKeyDown(event);
   };
 
   if (!open) return null;
@@ -723,26 +321,26 @@ export function WorkbenchCommandPalette({
           <span id={titleId} className="ui-workbench-command-palette__title">
             {title}
           </span>
-          <button
-            aria-label={closeLabel}
+          <IconButton
             className="ui-workbench-command-palette__close"
-            type="button"
+            icon="codicon-close"
+            label={closeLabel}
             onClick={closePalette}
-          >
-            <i aria-hidden="true" className="codicon codicon-close" />
-          </button>
+          />
         </div>
         <div className="ui-workbench-command-palette__search">
           <i aria-hidden="true" className="codicon codicon-search" />
-          <input
+          <TextInput
             ref={inputRef}
+            aria-activedescendant={activeCommand ? `${listId}-${activeCommand.id}` : undefined}
             aria-controls={listId}
             aria-label={placeholder}
             className="ui-workbench-command-palette__input"
+            controlWidth="full"
             placeholder={placeholder}
             type="search"
             value={resolvedQuery}
-            onChange={(event) => setResolvedQuery(event.currentTarget.value)}
+            onValueChange={setResolvedQuery}
             onKeyDown={handleKeyDown}
           />
         </div>