@workbench-kit/react 0.0.1-prototype.0 → 0.0.2-prototype.0.1.2

package/src/workbench/CommandPalette.tsx

@@ -0,0 +1,819 @@
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  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 { 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>
+  );
+}
+
+function useControllableCommandQuery({
+  defaultQuery = '',
+  query,
+  onQueryChange,
+}: {
+  defaultQuery?: string | undefined;
+  query?: string | undefined;
+  onQueryChange?: ((query: string) => void) | undefined;
+}) {
+  const [uncontrolledQuery, setUncontrolledQuery] = useState(defaultQuery);
+  const resolvedQuery = query ?? uncontrolledQuery;
+
+  const setQuery = (nextQuery: string) => {
+    if (query === undefined) {
+      setUncontrolledQuery(nextQuery);
+    }
+    onQueryChange?.(nextQuery);
+  };
+
+  return [resolvedQuery, setQuery] as const;
+}
+
+export interface WorkbenchCommandPaletteProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children' | 'onSelect' | 'title'
+> {
+  activeCommandId?: string | undefined;
+  closeLabel?: string | undefined;
+  commands: readonly WorkbenchCommandDescriptor[];
+  defaultQuery?: string | undefined;
+  emptyLabel?: ReactNode | undefined;
+  onActiveCommandChange?: ((commandId: string) => void) | undefined;
+  onClose: () => void;
+  onQueryChange?: ((query: string) => void) | undefined;
+  onRunCommand?:
+    | ((command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => void)
+    | undefined;
+  open?: boolean | undefined;
+  placeholder?: string | undefined;
+  query?: string | undefined;
+  restoreFocusOnClose?: boolean | undefined;
+  title?: ReactNode | undefined;
+}
+
+export function WorkbenchCommandPalette({
+  activeCommandId,
+  className,
+  closeLabel = 'Close command palette',
+  commands,
+  defaultQuery,
+  emptyLabel = 'No commands match your search',
+  onActiveCommandChange,
+  onClose,
+  onQueryChange,
+  onRunCommand,
+  open = true,
+  placeholder = 'Search commands',
+  query,
+  restoreFocusOnClose = true,
+  title = 'Command Palette',
+  ...props
+}: WorkbenchCommandPaletteProps) {
+  const titleId = useId();
+  const listId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+  const [uncontrolledActiveCommandId, setUncontrolledActiveCommandId] = useState<string>();
+  const [resolvedQuery, setResolvedQuery] = useControllableCommandQuery({
+    defaultQuery,
+    onQueryChange,
+    query,
+  });
+  const filteredCommands = useMemo(
+    () => filterWorkbenchCommands({ commands, query: resolvedQuery }),
+    [commands, resolvedQuery],
+  );
+  const resolvedActiveCommandId = activeCommandId ?? uncontrolledActiveCommandId;
+  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 restoreFocus = () => {
+    if (!restoreFocusOnClose) return;
+    previousFocusRef.current?.focus();
+  };
+
+  const closePalette = () => {
+    restoreFocus();
+    onClose();
+  };
+
+  const runCommand = (command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => {
+    if (!isWorkbenchCommandRunnable(command)) return;
+    onRunCommand?.(command, context);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+
+    previousFocusRef.current = document.activeElement as HTMLElement | null;
+    const frame = window.requestAnimationFrame(() => inputRef.current?.focus());
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+      restoreFocus();
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    if (filteredCommands.length === 0) return;
+    if (activeCommand && isWorkbenchCommandRunnable(activeCommand)) return;
+
+    const nextIndex = getNextWorkbenchCommandIndex({
+      commands: filteredCommands,
+      currentIndex: -1,
+      direction: 'next',
+    });
+    updateActiveCommand(filteredCommands[nextIndex]?.id);
+  }, [activeCommand, filteredCommands, open]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      closePalette();
+      return;
+    }
+
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Enter') return;
+
+    if (event.key === 'Enter') {
+      if (!activeCommand) return;
+      event.preventDefault();
+      runCommand(activeCommand, {
+        index: filteredCommands.findIndex((command) => command.id === activeCommand.id),
+        query: resolvedQuery,
+        source: 'palette',
+      });
+      return;
+    }
+
+    const nextIndex = getNextWorkbenchCommandIndex({
+      commands: filteredCommands,
+      currentIndex: activeIndex,
+      direction: event.key === 'ArrowDown' ? 'next' : 'previous',
+    });
+
+    if (nextIndex >= 0) {
+      event.preventDefault();
+      updateActiveCommand(filteredCommands[nextIndex]?.id);
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="ui-workbench-command-palette-overlay" onClick={closePalette}>
+      <div
+        aria-labelledby={titleId}
+        aria-modal="true"
+        className={cx('ui-workbench-command-palette', className)}
+        role="dialog"
+        {...props}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="ui-workbench-command-palette__header">
+          <span id={titleId} className="ui-workbench-command-palette__title">
+            {title}
+          </span>
+          <button
+            aria-label={closeLabel}
+            className="ui-workbench-command-palette__close"
+            type="button"
+            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
+            ref={inputRef}
+            aria-controls={listId}
+            aria-label={placeholder}
+            className="ui-workbench-command-palette__input"
+            placeholder={placeholder}
+            type="search"
+            value={resolvedQuery}
+            onChange={(event) => setResolvedQuery(event.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+        <WorkbenchCommandList
+          id={listId}
+          activeCommandId={activeCommand?.id}
+          aria-label="Command palette results"
+          commands={filteredCommands}
+          emptyLabel={emptyLabel}
+          query={resolvedQuery}
+          source="palette"
+          onActiveCommandChange={updateActiveCommand}
+          onRunCommand={runCommand}
+        />
+      </div>
+    </div>
+  );
+}
+
+export interface WorkbenchCommandSuggestProps 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;
+  visible?: boolean | undefined;
+}
+
+export function WorkbenchCommandSuggest({
+  activeCommandId,
+  className,
+  commands,
+  emptyLabel = 'No suggested commands',
+  onActiveCommandChange,
+  onRunCommand,
+  query = '',
+  visible = true,
+  ...props
+}: WorkbenchCommandSuggestProps) {
+  const filteredCommands = useMemo(
+    () => filterWorkbenchCommands({ commands, limit: 8, query }),
+    [commands, query],
+  );
+  const fallbackActiveCommand = filteredCommands.find((command) =>
+    isWorkbenchCommandRunnable(command),
+  );
+
+  if (!visible) return null;
+
+  return (
+    <div className={cx('ui-workbench-command-suggest', className)} {...props}>
+      <div className="ui-workbench-command-suggest__header">
+        <span>Commands</span>
+        {query ? <span className="ui-workbench-command-suggest__query">/{query}</span> : null}
+      </div>
+      <WorkbenchCommandList
+        activeCommandId={activeCommandId ?? fallbackActiveCommand?.id}
+        aria-label="Suggested commands"
+        commands={filteredCommands}
+        emptyLabel={emptyLabel}
+        query={query}
+        source="suggest"
+        onActiveCommandChange={onActiveCommandChange}
+        onRunCommand={onRunCommand}
+      />
+    </div>
+  );
+}