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

package/src/workbench/index.ts

@@ -1,5 +1,23 @@
 export { ActivityBar } from './ActivityBar';
 export type { ActivityBarItem, ActivityBarProps } from './ActivityBar';
+export { createStringDragMime, createTypedDragMime } from '../utils/dragMime';
+export type { TypedDragMime, TypedDragMimeOptions } from '../utils/dragMime';
+export {
+  EDITOR_TAB_DRAG_DATA_TYPE,
+  getEditorTabDropPosition,
+  isEditorTabMoveNoop,
+  isEditorTabsScrollerEventTarget,
+  normalizeEditorTabReorderIndex,
+  readEditorTabDragPayload,
+  resolveEditorTabDropTarget,
+  resolveEditorTabStripDropTarget,
+} from './editor-tabs-dnd';
+export type { EditorTabDragPayload, EditorTabDropTarget } from './editor-tabs-dnd';
+export { useEditorTabsStripDnd } from './useEditorTabsStripDnd';
+export type {
+  UseEditorTabsStripDndOptions,
+  UseEditorTabsStripDndResult,
+} from './useEditorTabsStripDnd';
 export {
   WorkbenchArtifactModeControls,
   WorkbenchArtifactPreview,
@@ -34,12 +52,43 @@ export {
   filterWorkbenchCommands,
   getNextWorkbenchCommandIndex,
   getWorkbenchCommandExecutionLabel,
+  getWorkbenchCommandExecutionPolicyLabel,
   getWorkbenchCommandStatusLabel,
   groupWorkbenchCommands,
+  isWorkbenchCommandExecutionPolicy,
   isWorkbenchCommandRunnable,
+  resolveWorkbenchCommandExecutionPolicy,
 } from './CommandPalette';
 export { WorkbenchMarkdownPreview } from './MarkdownPreview';
 export type { WorkbenchMarkdownPreviewProps } from './MarkdownPreview';
+export {
+  ChatCommandProposalCard,
+  ChatConversationBar,
+  ChatHistoryMenu,
+  ChatPanel,
+  ChatPhasedRunProgress,
+  ChatRenameDialog,
+  DEFAULT_RUNTIME_UNMOUNT_CANCELLABLE_STATUSES,
+  defaultWorkbenchChatConversationLabels,
+  shouldCancelRuntimeOnUnmount,
+  useCancelRuntimeOnUnmount,
+} from './chat';
+export type {
+  ChatCommandProposal,
+  ChatCommandProposalCardProps,
+  ChatCommandProposalStatus,
+  ChatConversationBarProps,
+  ChatHistoryMenuProps,
+  ChatPanelProps,
+  ChatPhasedRunProgressAction,
+  ChatPhasedRunProgressProps,
+  ChatRenameDialogProps,
+  ChatRunPhase,
+  ChatRunPhaseStatus,
+  UseCancelRuntimeOnUnmountOptions,
+  WorkbenchChatConversation,
+  WorkbenchChatConversationLabels,
+} from './chat';
 export { getSlashCommandQuery, isSlashCommandInput, parseSlashCommand } from './chat/slashCommand';
 export { useSlashCommandSuggest } from './chat/useSlashCommandSuggest';
 export type {
@@ -55,6 +104,74 @@ export {
 } from './keyboard';
 export { resolveWorkbenchTheme, useResolvedWorkbenchTheme } from './theme';
 export type { ResolvedWorkbenchTheme } from './theme';
+export { useDeferredWorkbenchMount } from './useDeferredWorkbenchMount';
+export type { UseDeferredWorkbenchMountOptions } from './useDeferredWorkbenchMount';
+export {
+  DEFAULT_WORKBENCH_HARD_RESET_CONFIRM_MESSAGE,
+  DEFAULT_WORKBENCH_STORAGE_PREFIX,
+  performWorkbenchHardReset,
+} from './hardReset';
+export type { WorkbenchHardResetOptions } from './hardReset';
+export {
+  applyWorkbenchAppearance,
+  applyWorkbenchThemeAttributes,
+  applyWorkbenchThemeProviderAttributes,
+  DARK_THEME_PRESET_OPTIONS,
+  DARK_THEME_PRESET_MANIFEST,
+  DEFAULT_DARK_THEME_PRESET,
+  DEFAULT_LIGHT_THEME_PRESET,
+  isDarkThemePresetId,
+  isLightThemePresetId,
+  LIGHT_THEME_PRESET_OPTIONS,
+  LIGHT_THEME_PRESET_MANIFEST,
+  resolveActiveThemePreset,
+  resolveWorkbenchThemeProviderAttributes,
+  WORKBENCH_COLOR_SCHEME_OPTIONS,
+} from './themePresets';
+export {
+  WORKBENCH_APPEARANCE_FIELD_DESCRIPTIONS,
+  WORKBENCH_APPEARANCE_FIELD_LABELS,
+} from './appearanceLabels';
+export type {
+  DarkThemePresetId,
+  LightThemePresetId,
+  ResolveWorkbenchThemeProviderAttributesInput,
+  ThemePresetId,
+  WorkbenchAppearanceSettings,
+  WorkbenchColorSchemePreference,
+  WorkbenchThemeDocumentAttributes,
+  WorkbenchThemeProviderAttributes,
+  WorkbenchThemePresetOption,
+  WorkbenchThemePresetManifestEntry,
+  WorkbenchThemePresetSelection,
+} from './themePresets';
+export {
+  applyWorkbenchShellAttributes,
+  DEFAULT_SHELL_PRESET,
+  isShellPresetId,
+  SHELL_PRESET_MANIFEST,
+  SHELL_PRESET_OPTIONS,
+} from './shellPresets';
+export type {
+  ShellPresetId,
+  WorkbenchShellPresetManifestEntry,
+  WorkbenchShellPresetOption,
+} from './shellPresets';
+export { WorkbenchThemeProvider } from './WorkbenchThemeProvider';
+export type { WorkbenchThemeProviderProps } from './WorkbenchThemeProvider';
+export { useWorkbenchAppearanceDocumentSync } from './useWorkbenchAppearanceDocumentSync';
+export { WorkbenchPlatformProvider, useWorkbenchHostPlatform } from './WorkbenchPlatformContext';
+export type { WorkbenchPlatformProviderProps } from './WorkbenchPlatformContext';
+export {
+  resolveWorkbenchHostPlatform,
+  resolveWorkbenchWindowChromeDataAttributes,
+} from './workbenchPlatformChrome';
+export type { WorkbenchHostPlatform, WorkbenchWindowChromeMode } from './workbenchPlatformChrome';
+export {
+  WorkbenchWindowChromeControls,
+  shouldUseDarwinPlatformChrome,
+} from './WorkbenchWindowChromeControls';
+export type { WorkbenchWindowChromeControlsProps } from './WorkbenchWindowChromeControls';
 export {
   WorkbenchShortcutCommandBridge,
   getWorkbenchShortcutCommandBindings,
@@ -68,6 +185,7 @@ export type {
   WorkbenchCommandDescriptor,
   WorkbenchCommandDescriptorOverrides,
   WorkbenchCommandExecution,
+  WorkbenchCommandExecutionPolicy,
   WorkbenchCommandFeedback,
   WorkbenchCommandFilterInput,
   WorkbenchCommandGroup,
@@ -84,6 +202,7 @@ export type {
   WorkbenchCommandStatus,
   WorkbenchCommandSuggestProps,
 } from './CommandPalette';
+export type { ResolveWorkbenchCommandExecutionPolicyInput } from './CommandPalette';
 export type {
   UseWorkbenchShortcutCommandsOptions,
   WorkbenchShortcutCommandBinding,
@@ -136,6 +255,16 @@ export type {
   WorkbenchSignUpSubmitContext,
   WorkbenchSignUpViewProps,
 } from './auth';
+export { WorkbenchBootstrapGate, WorkbenchBootstrapView, useWorkbenchBootstrap } from './bootstrap';
+export type {
+  WorkbenchBootstrapController,
+  WorkbenchBootstrapGateProps,
+  WorkbenchBootstrapRunStatus,
+  WorkbenchBootstrapTaskDefinition,
+  WorkbenchBootstrapTaskStatus,
+  WorkbenchBootstrapTaskViewModel,
+  WorkbenchBootstrapViewProps,
+} from './bootstrap';
 export {
   WORKBENCH_EDITOR_CLOSE_ALL_COMMAND_ID,
   WORKBENCH_EDITOR_CLOSE_COMMAND_ID,
@@ -144,6 +273,9 @@ export {
   WORKBENCH_EDITOR_DELETE_COMMAND_ID,
   WORKBENCH_EDITOR_DISCARD_CHANGES_COMMAND_ID,
   WORKBENCH_EDITOR_SAVE_COMMAND_ID,
+  WORKBENCH_EDITOR_SPLIT_DOWN_COMMAND_ID,
+  WORKBENCH_EDITOR_SPLIT_RIGHT_COMMAND_ID,
+  WORKBENCH_EDITOR_TOGGLE_PINNED_COMMAND_ID,
   WORKBENCH_COMMAND_SURFACE_ACTIVITY_BAR,
   WORKBENCH_COMMAND_SURFACE_EDITOR,
   WORKBENCH_COMMAND_SURFACE_SEARCH,
@@ -164,6 +296,7 @@ export {
   createWorkbenchEditorCommands,
   createWorkbenchEditorTabListMenuEntries,
   createWorkbenchEditorTabMenuEntries,
+  createWorkbenchStandaloneEditorTabMenuEntries,
   createWorkbenchSearchResultCommands,
   createWorkbenchSearchResultMenuEntries,
   createWorkbenchShellCommands,
@@ -206,7 +339,7 @@ export {
 } from './status';
 export type { WorkbenchStatus, WorkbenchStatusDescriptor, WorkbenchStatusVariant } from './status';
 export { SplitView } from './SplitView';
-export type { SplitViewProps } from './SplitView';
+export type { SplitViewLayoutMode, SplitViewProps } from './SplitView';
 export { StatusBar, StatusBarItem, StatusBarSection } from './StatusBar';
 export type {
   StatusBarItemModel,
@@ -251,12 +384,47 @@ export {
   WorkbenchStructuredDataTextArrayInput,
   buildWorkbenchStructuredDataTableFromRecords,
   formatWorkbenchStructuredDataTableCell,
+  useWorkbenchSettingsCommit,
 } from './settings';
+export {
+  AccountManagementPanel,
+  CommandManagementPanel,
+  ExtensionManagementPanel,
+  ExtensionManagementSidebar,
+  KeybindingManagementPanel,
+  ManagementPanelEmptyState,
+  ManagementPanelFrame,
+  ManagementPanelRunState,
+  ManagementPanelSummary,
+  ManagementPanelToolbar,
+  buildCommandManagementGroups,
+  countCommandManagementEntries,
+  filterCommandManagementGroups,
+  useManagementPanelQuery,
+} from './management';
+export type {
+  AccountManagementEntry,
+  AccountManagementEntryStatus,
+  AccountManagementPanelProps,
+  CommandManagementEntry,
+  CommandManagementEntryStatus,
+  CommandManagementGroup,
+  CommandManagementPanelProps,
+  CommandManagementRunState,
+  ExtensionCatalogBrowseEntry,
+  ExtensionManagementEntry,
+  ExtensionManagementPanelProps,
+  ExtensionManagementSidebarProps,
+  KeybindingManagementPanelProps,
+  ManagementPanelFrameProps,
+  ManagementPanelToolbarProps,
+} from './management';
 export type {
   WorkbenchPanelRegionProps,
   WorkbenchNavigationPanelProps,
   WorkbenchSectionedPanelItem,
   WorkbenchSectionedPanelProps,
+  WorkbenchSectionedPanelScrollSpyAxis,
   WorkbenchSchemaFormCancelContext,
   WorkbenchSchemaFormCheckboxField,
   WorkbenchSchemaFormErrors,
@@ -269,11 +437,17 @@ export type {
   WorkbenchSchemaFormOption,
   WorkbenchSchemaFormProps,
   WorkbenchSchemaFormSelectField,
+  WorkbenchSchemaFormSettingSpec,
+  WorkbenchSchemaFormSettingValueType,
+  WorkbenchSchemaFormSettingsCategoryInput,
   WorkbenchSchemaFormSubmitContext,
   WorkbenchSchemaFormTextField,
   WorkbenchSchemaFormValues,
   WorkbenchSettingsCategory,
+  WorkbenchSettingsCommitContextValue,
+  WorkbenchSettingsCommitMode,
   WorkbenchSettingsModalProps,
+  WorkbenchSettingsPreferenceChange,
   WorkbenchSettingsScope,
   WorkbenchStructuredDataFieldType,
   WorkbenchStructuredDataFieldValue,
@@ -320,13 +494,18 @@ export {
   appendWorkbenchStructuredDataSchemaTableRow,
   asWorkbenchStructuredDataRecord,
   booleanWorkbenchStructuredDataSchemaFieldValue,
+  buildWorkbenchStructuredDataSchemaSelectOptions,
   coerceWorkbenchStructuredDataFormFieldValue,
   coerceWorkbenchStructuredDataSchemaFieldValue,
   coerceWorkbenchSchemaFormFieldValue,
+  coerceWorkbenchSchemaFormSettingDefaultValue,
   createWorkbenchStructuredDataSchemaDocumentEmptyRow,
   createWorkbenchStructuredDataSchemaEmptyRow,
   createWorkbenchStructuredDataSchemaDocumentSampleData,
   createWorkbenchStructuredDataSchemaFallbackSection,
+  createWorkbenchSchemaFormFieldFromSettingSpec,
+  createWorkbenchSchemaFormFieldsFromSettingSpecs,
+  createWorkbenchSchemaFormSettingsCategory,
   formatWorkbenchStructuredDataSchemaValue,
   formatWorkbenchStructuredDataSchemaLabel,
   getWorkbenchStructuredDataFormErrors,
@@ -355,6 +534,8 @@ export {
   getWorkbenchStructuredDataSchemaTablePath,
   getWorkbenchStructuredDataSchemaTableRowKey,
   getWorkbenchStructuredDataSchemaTableRows,
+  hasWorkbenchStructuredDataSchemaSelectOptions,
+  isWorkbenchStructuredDataSchemaColorField,
   getWorkbenchStructuredDataValue,
   getWorkbenchSchemaFormErrors,
   getWorkbenchSchemaFormFieldDefaultValue,
@@ -366,17 +547,69 @@ export {
   removeWorkbenchStructuredDataSchemaTableRow,
   setWorkbenchStructuredDataPathOrRootValue,
   setWorkbenchStructuredDataValue,
+  shouldUseWorkbenchStructuredDataSchemaRadioControl,
   slugWorkbenchStructuredDataSchemaAnchor,
   stringifyWorkbenchStructuredDataSchemaFieldValue,
+  validateWorkbenchStructuredDataSchemaFieldValue,
 } from './settings';
 export { WorkbenchShell } from './WorkbenchShell';
 export type { WorkbenchShellProps } from './WorkbenchShell';
+export { WorkbenchViewEditor } from './WorkbenchViewEditor';
+export type {
+  WorkbenchViewEditorDataAttributes,
+  WorkbenchViewEditorEmptyState,
+  WorkbenchViewEditorEmptyStateProps,
+  WorkbenchViewEditorEmptyStateSurfaceProps,
+  WorkbenchViewEditorProps,
+} from './WorkbenchViewEditor';
+export { WorkbenchEditorTabs } from './WorkbenchEditorTabs';
+export type { WorkbenchEditorTabsProps } from './WorkbenchEditorTabs';
+export {
+  createWorkbenchStandaloneEditorTabCommandContext,
+  createWorkbenchStandaloneEditorTabContextMenuItems,
+  isWorkbenchEditorTabClosable,
+} from './editorTabContextMenu';
+export type {
+  CreateWorkbenchStandaloneEditorTabCommandContextInput,
+  WorkbenchStandaloneEditorTabLike,
+} from './editorTabContextMenu';
+export { useWorkbenchEditorTabContextMenu } from './useWorkbenchEditorTabContextMenu';
+export type {
+  UseWorkbenchEditorTabContextMenuOptions,
+  UseWorkbenchEditorTabContextMenuResult,
+} from './useWorkbenchEditorTabContextMenu';
+export { WorkbenchViewSidebar } from './WorkbenchViewSidebar';
+export type { WorkbenchViewSidebarItem, WorkbenchViewSidebarProps } from './WorkbenchViewSidebar';
+export {
+  WorkbenchDesktopTitleBar,
+  WorkbenchDesktopWindowControls,
+} from './WorkbenchDesktopTitleBar';
+export type {
+  WorkbenchDesktopTitleBarProps,
+  WorkbenchDesktopWindowControlsProps,
+} from './WorkbenchDesktopTitleBar';
 export { WorkbenchStandaloneShell } from './WorkbenchStandaloneShell';
 export { WorkbenchCanvasShell } from './WorkbenchCanvasShell';
 export type {
+  WorkbenchActivityLifecycleCallbackMap,
+  WorkbenchActivityLifecycleCallbacks,
+  WorkbenchActivityLifecycleEvent,
+  WorkbenchPrimarySidebarLifecycle,
+  WorkbenchPrimarySidebarLifecycleCallbacks,
+  WorkbenchPrimarySidebarLifecycleReason,
   WorkbenchStandaloneShellContext,
   WorkbenchStandaloneShellProps,
 } from './WorkbenchStandaloneShell';
+export {
+  createWorkbenchStandaloneShellStateSnapshot,
+  useWorkbenchStandaloneShellContext,
+} from './workbenchStandaloneShellReactContext';
+export type {
+  WorkbenchStandaloneShellStateChange,
+  WorkbenchStandaloneShellStateChangeKind,
+  WorkbenchStandaloneShellStateSnapshot,
+} from './workbenchStandaloneShellReactContext';
+export { useWorkbenchStandaloneShellStateSync } from './useWorkbenchStandaloneShellStateSync';
 export type { WorkbenchCanvasShellProps } from './WorkbenchCanvasShell';
 export type {
   WorkbenchActivityChangeEvent,
@@ -396,7 +629,6 @@ export type {
 export { StructuredArtifactEditor } from './StructuredArtifactEditor';
 export type { StructuredArtifactEditorProps } from './StructuredArtifactEditor';
 export type {
-  JsonWorkbenchDocument,
   WorkbenchDocument,
   WorkbenchDocumentAdapter,
   WorkbenchDocumentMeta,

package/src/workbench/jdw/jdw-editors.css

@@ -0,0 +1,4 @@
+/* Reserved for JDW editor surfaces that still need package-local chrome.
+ * Screen Spec shell layout now uses WorkbenchFill / SplitView / LabeledPane /
+ * SidebarStack — prefer those over new BEM here.
+ */

package/src/workbench/jdw/jdw.css

@@ -0,0 +1,2 @@
+/* workbench/jdw feature styles — Plan A import hub */
+@import './jdw-editors.css';

package/src/workbench/management/AccountManagementPanel.tsx

@@ -0,0 +1,82 @@
+import { Badge } from '../../primitives/badge';
+import { Button } from '../../primitives/button';
+import { ManagementCard, ManagementCardList } from './ManagementCard.js';
+import {
+  ManagementPanelEmptyState,
+  ManagementPanelFrame,
+  ManagementPanelSummary,
+} from './ManagementPanelFrame.js';
+import type { AccountManagementPanelProps } from './types.js';
+
+export function AccountManagementPanel({
+  accounts,
+  activeAccountId,
+  automationHint = 'Linked accounts are discovered from project integrations. Switching providers and token refresh stay host-controlled.',
+  className,
+  emptyLabel = 'No linked accounts are available for this project.',
+  onSignOut,
+  sessionLabel,
+}: AccountManagementPanelProps) {
+  const activeAccount =
+    accounts.find((account) => account.id === activeAccountId) ??
+    accounts.find((account) => account.status === 'active');
+
+  return (
+    <ManagementPanelFrame
+      className={className}
+      description={automationHint}
+      id="workbench-account-management"
+      title="Linked Accounts"
+    >
+      {sessionLabel ? <ManagementPanelSummary>{sessionLabel}</ManagementPanelSummary> : null}
+
+      {accounts.length === 0 ? (
+        <ManagementPanelEmptyState>{emptyLabel}</ManagementPanelEmptyState>
+      ) : (
+        <ManagementCardList>
+          {accounts.map((account) => {
+            const isActive = account.id === activeAccount?.id;
+
+            return (
+              <li key={account.id}>
+                <ManagementCard
+                  active={isActive}
+                  actions={
+                    onSignOut && isActive ? (
+                      <Button type="button" variant="danger" onClick={() => onSignOut(account.id)}>
+                        Sign out
+                      </Button>
+                    ) : undefined
+                  }
+                  badges={isActive ? <Badge variant="accent">Active</Badge> : undefined}
+                  layout="stack"
+                  subtitle={account.email}
+                  title={account.displayName}
+                >
+                  <dl className="workbench-management-card__details">
+                    <div>
+                      <dt>Provider</dt>
+                      <dd>{account.providerLabel ?? account.providerId}</dd>
+                    </div>
+                    <div>
+                      <dt>Account ID</dt>
+                      <dd>
+                        <code>{account.id}</code>
+                      </dd>
+                    </div>
+                    {account.status ? (
+                      <div>
+                        <dt>Status</dt>
+                        <dd>{account.status}</dd>
+                      </div>
+                    ) : null}
+                  </dl>
+                </ManagementCard>
+              </li>
+            );
+          })}
+        </ManagementCardList>
+      )}
+    </ManagementPanelFrame>
+  );
+}

package/src/workbench/management/CommandInspectorPanel.tsx

@@ -0,0 +1,127 @@
+import { formatKeybindingLabel } from '@workbench-kit/platform';
+import { Badge } from '../../primitives/badge';
+import { Button } from '../../primitives/button';
+import { cx } from '../../utils/cx';
+import { formatCommandRunState } from './format-command-run-state.js';
+import { ManagementPanelFrame, ManagementPanelRunState } from './ManagementPanelFrame.js';
+import type { CommandManagementEntry, CommandManagementRunState } from './types.js';
+
+function statusBadgeVariant(status: CommandManagementEntry['status']) {
+  switch (status) {
+    case 'available':
+      return 'accent' as const;
+    case 'disabled':
+      return 'muted' as const;
+    default:
+      return 'danger' as const;
+  }
+}
+
+export interface CommandInspectorPanelProps {
+  className?: string | undefined;
+  entry: CommandManagementEntry;
+  lastRun?: CommandManagementRunState | undefined;
+  onRunCommand?: ((commandId: string) => void | Promise<void>) | undefined;
+}
+
+export function CommandInspectorPanel({
+  className,
+  entry,
+  lastRun,
+  onRunCommand,
+}: CommandInspectorPanelProps) {
+  const shortcutLabel = entry.keybinding ? formatKeybindingLabel(entry.keybinding) : undefined;
+  const runStateLabel =
+    lastRun?.commandId === entry.id ? formatCommandRunState(lastRun) : undefined;
+  const canRun =
+    entry.status === 'available' && Boolean(onRunCommand) && lastRun?.status !== 'running';
+
+  return (
+    <ManagementPanelFrame
+      className={cx('workbench-command-inspector', className)}
+      description="Inspect command metadata, menu surfaces, and run the handler from the editor area."
+      id={`workbench-command-inspector-${entry.id}`}
+      title={entry.label}
+    >
+      <div className="workbench-command-inspector__toolbar">
+        <div className="workbench-command-inspector__badges">
+          {entry.category ? <Badge variant="muted">{entry.category}</Badge> : null}
+          <Badge variant={statusBadgeVariant(entry.status)}>
+            {entry.status === 'available' ? 'Runnable' : entry.status}
+          </Badge>
+          <Badge variant="muted">{entry.sourceLabel}</Badge>
+        </div>
+        <Button
+          disabled={!canRun}
+          type="button"
+          onClick={() => {
+            void onRunCommand?.(entry.id);
+          }}
+        >
+          Run command
+        </Button>
+      </div>
+
+      {runStateLabel ? (
+        <p
+          aria-live="polite"
+          className={cx(
+            'workbench-command-inspector__status',
+            lastRun?.status === 'error' && 'workbench-command-inspector__status--error',
+            lastRun?.status === 'running' && 'workbench-command-inspector__status--running',
+          )}
+          role="status"
+        >
+          {lastRun?.status === 'running' ? (
+            <i aria-hidden className="codicon codicon-loading codicon-modifier-spin" />
+          ) : null}
+          <span>{runStateLabel}</span>
+        </p>
+      ) : (
+        <ManagementPanelRunState lastRun={lastRun?.commandId === entry.id ? lastRun : undefined} />
+      )}
+
+      <dl className="workbench-command-inspector__details">
+        <div className="workbench-command-inspector__detail">
+          <dt>Command ID</dt>
+          <dd>
+            <code>{entry.id}</code>
+          </dd>
+        </div>
+        {entry.description ? (
+          <div className="workbench-command-inspector__detail">
+            <dt>Description</dt>
+            <dd>{entry.description}</dd>
+          </div>
+        ) : null}
+        <div className="workbench-command-inspector__detail">
+          <dt>Source</dt>
+          <dd>
+            {entry.sourceLabel}{' '}
+            <span className="workbench-command-inspector__subtle">({entry.source})</span>
+          </dd>
+        </div>
+        {shortcutLabel ? (
+          <div className="workbench-command-inspector__detail">
+            <dt>Keybinding</dt>
+            <dd>
+              <kbd>{shortcutLabel}</kbd>
+            </dd>
+          </div>
+        ) : null}
+        {entry.menuSurfaces && entry.menuSurfaces.length > 0 ? (
+          <div className="workbench-command-inspector__detail">
+            <dt>Menu surfaces</dt>
+            <dd>
+              <ul className="workbench-command-inspector__menu-list">
+                {entry.menuSurfaces.map((surface) => (
+                  <li key={surface}>{surface}</li>
+                ))}
+              </ul>
+            </dd>
+          </div>
+        ) : null}
+      </dl>
+    </ManagementPanelFrame>
+  );
+}