@lvce-editor/file-search-worker 5.9.0 → 5.10.0

package/dist/fileSearchWorkerMain.js

@@ -1003,7 +1003,7 @@ const create = (uid, uri, listItemHeight, x, y, width, height, platform, args, w
     width: 600,
     ...create$1({
       itemHeight: listItemHeight,
-      headerHeight: 30,
+      headerHeight: 38,
       minimumSliderSize: minimumSliderSize
     }),
     inputSource: User,
@@ -1084,19 +1084,19 @@ const focusPick$1 = async pick => {
 };
 
 const ColorTheme$1 = 0;
-const Commands$1 = 2;
-const Custom = 3;
-const EveryThing$1 = 4;
-const File$2 = 5;
-const GoToLine$2 = 6;
-const Help$2 = 7;
-const Recent$1 = 8;
-const Symbol$2 = 9;
-const View$3 = 10;
-const WorkspaceSymbol$2 = 11;
+const Commands$1 = 1;
+const Custom = 2;
+const File$2 = 3;
+const GoToLine$2 = 4;
+const Help$2 = 5;
+const Recent$1 = 6;
+const Symbol$2 = 7;
+const View$3 = 8;
+const WorkspaceSymbol$2 = 9;
+const EveryThing$1 = 100;
 
 const noop$2 = async () => {};
-const getFn$2 = id => {
+const getFn$3 = id => {
   switch (id) {
     case ColorTheme$1:
       return focusPick$1;
@@ -1105,7 +1105,7 @@ const getFn$2 = id => {
   }
 };
 const focusPick = (id, pick) => {
-  const fn = getFn$2(id);
+  const fn = getFn$3(id);
   return fn(pick);
 };
 
@@ -1695,7 +1695,7 @@ const getFilterValueEverything = value => {
   const prefixLength = prefix.length;
   return value.slice(prefixLength).trim();
 };
-const getFn$1 = id => {
+const getFn$2 = id => {
   switch (id) {
     case EveryThing$1:
       return getFilterValueEverything;
@@ -1704,1307 +1704,1279 @@ const getFn$1 = id => {
   }
 };
 const getFilterValue = (id, value) => {
-  const fn = getFn$1(id);
+  const fn = getFn$2(id);
   const filterValue = fn(value);
   return filterValue;
 };
 
-const select = Object.create(null);
-const getPick$1 = Object.create(null);
-const registerSelect = modules => {
-  Object.assign(select, modules);
-};
-const registerGetPick = modules => {
-  Object.assign(getPick$1, modules);
+const getColorThemeNames = async () => {
+  return invoke$1(/* Ajax.getJson */'ColorTheme.getColorThemeNames');
 };
-const getPicks$d = id => {
-  const fn = getPick$1[id];
-  return fn;
+
+const toProtoVisibleItem$2 = name => {
+  const pick = {
+    label: name,
+    description: '',
+    fileIcon: '',
+    icon: '',
+    matches: [],
+    direntType: 0,
+    uri: ''
+  };
+  return pick;
 };
-const getSelect = id => {
-  const fn = select[id];
-  return fn;
+const getPicks$c = async searchValue => {
+  const colorThemeNames = await getColorThemeNames();
+  const picks = colorThemeNames.map(toProtoVisibleItem$2);
+  return picks;
 };
 
-const getPicks$c = (id, searchValue) => {
-  const fn = getPicks$d(id);
-  return fn(searchValue);
+const handleError = async (error, notify = true, prefix = '') => {
+  console.error(error);
+};
+const showErrorDialog = async error => {
+  const code = error.code;
+  const message = error.message;
+  const stack = error.stack;
+  const name = error.name;
+  const errorInfo = {
+    code,
+    message,
+    stack,
+    name
+  };
+  await invoke$1('ErrorHandling.showErrorDialog', errorInfo);
+};
+const warn = (...args) => {
+  console.warn(...args);
 };
 
-const getQuickPickSubProviderId = prefix => {
-  switch (prefix) {
-    case Command:
-      return Commands$1;
-    case Symbol$1:
-      return Symbol$2;
-    case WorkspaceSymbol$1:
-      return WorkspaceSymbol$2;
-    case GoToLine$1:
-      return GoToLine$2;
-    case View$2:
-      return View$3;
-    case Help$1:
-      return Help$2;
-    default:
-      return File$2;
-  }
+const state$2 = {
+  menuEntries: []
+};
+const getAll = () => {
+  return state$2.menuEntries;
+};
+const add = menuEntries => {
+  state$2.menuEntries = [...state$2.menuEntries, ...menuEntries];
 };
 
-// TODO when user types letters -> no need to query provider again -> just filter existing results
-const setValue = async (state, newValue) => {
-  const {
-    providerId,
-    value,
-    minLineY,
-    maxLineY,
-    fileIconCache
-  } = state;
-  if (value === newValue) {
-    return state;
+// TODO combine Ajax with cache (specify strategy: cacheFirst, networkFirst)
+const getBuiltinPicks = async () => {
+  const builtinPicks = getAll();
+  return builtinPicks;
+};
+const prefixIdWithExt = item => {
+  if (!item.label) {
+    warn('[QuickPick] item has missing label', item);
+  }
+  if (!item.id) {
+    warn('[QuickPick] item has missing id', item);
   }
-  const prefix = getQuickPickPrefix(newValue);
-  const subId = getQuickPickSubProviderId(prefix);
-  const newPicks = await getPicks$c(subId, newValue);
-  const filterValue = getFilterValue(providerId, newValue);
-  const items = filterQuickPickItems(newPicks, filterValue);
-  const focusedIndex = items.length === 0 ? -1 : 0;
-  const sliced = items.slice(minLineY, maxLineY);
-  const {
-    newFileIconCache,
-    icons
-  } = await getQuickPickFileIcons(sliced, fileIconCache);
   return {
-    ...state,
-    picks: newPicks,
-    items,
-    focusedIndex,
-    inputSource: Script,
-    value: newValue,
-    icons,
-    fileIconCache: newFileIconCache
+    ...item,
+    id: `ext.${item.id}`,
+    label: item.label || item.id
   };
 };
-
-// TODO when user types letters -> no need to query provider again -> just filter existing results
-const handleInput = async (state, newValue, cursorOffset, inputSource = Script) => {
-  if (state.value === newValue) {
-    return state;
+const getExtensionPicks = async () => {
+  try {
+    // TODO don't call this every time
+    const extensionPicks = await invoke$1('ExtensionHost.getCommands');
+    if (!extensionPicks) {
+      return [];
+    }
+    const mappedPicks = extensionPicks.map(prefixIdWithExt);
+    return mappedPicks;
+  } catch (error) {
+    console.error(`Failed to get extension picks: ${error}`);
+    return [];
   }
-  const newState = await setValue(state, newValue);
-  return {
-    ...newState,
-    cursorOffset,
-    inputSource
+};
+const toProtoVisibleItem$1 = item => {
+  const pick = {
+    label: item.label,
+    description: '',
+    fileIcon: '',
+    icon: '',
+    matches: [],
+    direntType: 0,
+    uri: ''
   };
+  // @ts-ignore
+  pick.id = item.id;
+  return pick;
 };
-
-const handleBeforeInput = (state, inputType, data, selectionStart, selectionEnd) => {
-  string(inputType);
-  number(selectionStart);
-  number(selectionEnd);
-  const {
-    value
-  } = state;
-  const {
-    newValue,
-    cursorOffset
-  } = getNewValue(value, inputType, data, selectionStart, selectionEnd);
-  return handleInput(state, newValue, cursorOffset, User);
+const getPicks$b = async () => {
+  // TODO get picks in parallel
+  const builtinPicks = await getBuiltinPicks();
+  const extensionPicks = await getExtensionPicks();
+  const allPicks = [...builtinPicks, ...extensionPicks];
+  const converted = allPicks.map(toProtoVisibleItem$1);
+  return converted;
 };
 
-const handleBlur = async state => {
-  // TODO fix virtual dom diffing so that input isn't destroyed and loses focus when rerendering
-  // await CloseWidget.closeWidget(state.uid)
-  return state;
+const state$1 = {
+  args: []
 };
 
-const getPick = (items, index) => {
-  array(items);
-  number(index);
-  // if (index < state.recentPicks.length) {
-  //   return state.recentPicks[index]
-  // }
-  // index -= state.recentPicks.length
-  if (index < items.length) {
-    return items[index];
-  }
-  console.warn('no pick matching index', index);
-  return undefined;
+const getPicks$a = async searchValue => {
+  const items = state$1.args[1] || [];
+  return items;
 };
 
-const Hide = 'hide';
-const KeepOpen = '';
-
-const selectIndex = async (state, index, button = /* left */0) => {
-  const {
-    minLineY,
-    items,
-    value
-  } = state;
-  const actualIndex = index + minLineY;
-  const pick = getPick(items, actualIndex);
-  if (!pick) {
-    return state;
-  }
-  const prefix = getQuickPickPrefix(value);
-  const subId = getQuickPickSubProviderId(prefix);
-  const fn = getSelect(subId);
-  const selectPickResult = await fn(pick);
-  object(selectPickResult);
-  string(selectPickResult.command);
-  const {
-    command
-  } = selectPickResult;
-  switch (command) {
-    case Hide:
-      await closeWidget(state.uid);
-      return state;
-    default:
-      return state;
-  }
+const emptyMatches = [];
 
-  // TODO recent picks should be per provider
-  // if (!state.recentPickIds.has(pick.id)) {
-  //   state.recentPicks.unshift(pick)
-  //   state.recentPickIds.add(pick.id)
-  // }
-  // if (state.recentPicks.length > RECENT_PICKS_MAX_SIZE) {
-  //   const last = state.recentPicks.pop()
-  //   state.recentPickIds.delete(last.id)
-  // }
+const getWorkspacePath = async () => {
+  return invoke$1('Workspace.getPath');
 };
 
-const handleClickAt = (state, x, y) => {
-  const {
-    top,
-    headerHeight,
-    itemHeight
-  } = state;
-  const relativeY = y - top - headerHeight;
-  const index = Math.floor(relativeY / itemHeight);
-  return selectIndex(state, index);
+const RE_PROTOCOL = /^([a-z-]+):\/\//;
+const getProtocol = uri => {
+  const protocolMatch = uri.match(RE_PROTOCOL);
+  if (protocolMatch) {
+    return protocolMatch[1];
+  }
+  return '';
 };
 
-const setFocus = async focusKey => {
-  await invoke$1('Focus.setFocus', focusKey);
+const state = Object.create(null);
+const register = modules => {
+  Object.assign(state, modules);
+};
+const getFn$1 = protocol => {
+  return state[protocol];
 };
 
-const handleFocus = async state => {
-  // TODO fix virtual dom diffing so that input isn't destroyed and loses focus when rerendering
-  await setFocus(FocusQuickPickInput);
-  // await CloseWidget.closeWidget(state.uid)
-  return state;
+const searchFile$5 = async (path, value, prepare, assetDir) => {
+  const protocol = getProtocol(path);
+  // TODO call different providers depending on protocol
+  const fn = getFn$1(protocol);
+  const result = await fn(path, value, prepare, assetDir);
+  return result;
 };
 
-const getDefaultValue = id => {
-  switch (id) {
-    case EveryThing$1:
-      return Command;
-    default:
-      return '';
-  }
+// TODO this should be in FileSystem module
+const pathBaseName = path => {
+  return path.slice(path.lastIndexOf('/') + 1);
 };
 
-const Commands = 'quickPick://commands';
-const EveryThing = 'quickPick://everything';
-const Recent = 'quickPick://recent';
-const ColorTheme = 'quickPick://color-theme';
-const Symbol = 'quickPick://symbol';
-const View$1 = 'quickPick://view';
-const Help = 'quickPick://help';
-const WorkspaceSymbol = 'quickPick://workspace-symbol';
-const GoToLine = 'quickPick://go-to-line';
-
-const getQuickPickProviderId = prefix => {
-  switch (prefix) {
-    case Commands:
-    case Symbol:
-    case WorkspaceSymbol:
-    case EveryThing:
-    case GoToLine:
-    case View$1:
-    case Help:
-      return EveryThing$1;
-    case ColorTheme:
-      return ColorTheme$1;
-    case Recent:
-      return Recent$1;
-    default:
-      return File$2;
+// TODO this should be in FileSystem module
+const pathDirName = path => {
+  const pathSeparator = '/';
+  const index = path.lastIndexOf(pathSeparator);
+  if (index === -1) {
+    return '';
   }
+  return path.slice(0, index);
 };
 
-const state$3 = {
-  args: []
+const searchFile$4 = async (path, value) => {
+  const prepare = true;
+  const files = await searchFile$5(/* path */path, /* searchTerm */value, prepare, '');
+  return files;
 };
-
-const noop = args => {};
-const setArgsCustom = args => {
-  state$3.args = args;
+const convertToPick = uri => {
+  const baseName = pathBaseName(uri);
+  const dirName = pathDirName(uri);
+  return {
+    description: dirName,
+    direntType: File$1,
+    fileIcon: '',
+    icon: '',
+    label: baseName,
+    matches: emptyMatches,
+    uri
+  };
 };
-const getFn = id => {
-  switch (id) {
-    case Custom:
-      return setArgsCustom;
-    default:
-      return noop;
+
+// TODO handle files differently
+// e.g. when there are many files, don't need
+// to compute the fileIcon for all files
+
+const getPicks$9 = async searchValue => {
+  // TODO cache workspace path
+  const workspace = await getWorkspacePath();
+  if (!workspace) {
+    return [];
   }
+  const files = await searchFile$4(workspace, searchValue);
+  const picks = files.map(convertToPick);
+  return picks;
 };
-const setArgs = (id, args) => {
-  const fn = getFn(id);
-  return fn(args);
+
+const getPicks$8 = async () => {
+  const picks = [{
+    label: '1',
+    description: '',
+    icon: '',
+    fileIcon: '',
+    matches: [],
+    direntType: None$2,
+    uri: ''
+  }, {
+    label: '2',
+    description: '',
+    icon: '',
+    fileIcon: '',
+    matches: [],
+    direntType: None$2,
+    uri: ''
+  }, {
+    label: '3',
+    description: '',
+    icon: '',
+    fileIcon: '',
+    matches: [],
+    direntType: None$2,
+    uri: ''
+  }, {
+    label: '4',
+    description: '',
+    icon: '',
+    fileIcon: '',
+    matches: [],
+    direntType: None$2,
+    uri: ''
+  }, {
+    label: '5',
+    description: '',
+    icon: '',
+    fileIcon: '',
+    matches: [],
+    direntType: None$2,
+    uri: ''
+  }, {
+    label: '6',
+    description: '',
+    icon: '',
+    fileIcon: '',
+    matches: [],
+    direntType: None$2,
+    uri: ''
+  }];
+  return picks;
 };
 
-const loadContent = async state => {
-  const {
-    uri,
-    args,
-    fileIconCache
-  } = state;
-  const id = getQuickPickProviderId(uri);
-  const value = getDefaultValue(id);
-  const prefix = getQuickPickPrefix(value);
-  const subId = getQuickPickSubProviderId(prefix);
-  setArgs(subId, args);
-  const newPicks = await getPicks$c(subId, value);
-  array(newPicks);
-  const filterValue = getFilterValue(id, value);
-  const items = filterQuickPickItems(newPicks, filterValue);
-  const minLineY = 0;
-  const maxLineY = Math.min(minLineY + state.maxVisibleItems, newPicks.length);
-  const sliced = newPicks.slice(minLineY, maxLineY);
-  const {
-    newFileIconCache,
-    icons
-  } = await getQuickPickFileIcons(sliced, fileIconCache);
-  return {
-    ...state,
-    picks: newPicks,
-    items,
-    focusedIndex: 0,
-    state: Finished,
-    minLineY,
-    maxLineY,
-    value,
-    cursorOffset: value.length,
-    inputSource: Script,
-    focused: true,
-    fileIconCache: newFileIconCache,
-    icons,
-    providerId: id
+const DotDotDot = '...';
+const Colon = ':';
+const Percent = '%';
+const AngleBracket = '>';
+const View$1 = 'view';
+
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
   };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-const state$2 = {
-  menuEntries: []
+const GoToFile = 'Go to file';
+const GoToLineColumn = 'Go to Line / Column';
+const GoToSymbolInEditor = 'Go to Symbol in Editor';
+const NoResults = 'No Results';
+const OpenView = 'Open View';
+const QuickOpen = 'Quick open';
+const SearchForText = 'Search for text';
+const ShowAndRunCommands = 'Show And Run Commands';
+const TypeNameOfCommandToRun = 'Type the name of a command to run.';
+
+const typeNameofCommandToRun = () => {
+  return i18nString(TypeNameOfCommandToRun);
 };
-const getAll = () => {
-  return state$2.menuEntries;
+const showAndRunCommands = () => {
+  return i18nString(ShowAndRunCommands);
 };
-const add = menuEntries => {
-  state$2.menuEntries = [...state$2.menuEntries, ...menuEntries];
+const goToFile = () => {
+  return i18nString(GoToFile);
 };
-
-const getVisible$1 = (items, minLineY, maxLineY, icons) => {
-  const range = items.slice(minLineY, maxLineY);
-  const protoVisibleItems = range.map((item, index) => {
-    return {
-      ...item,
-      fileIcon: icons[index]
-    };
-  });
-  return protoVisibleItems;
+const noResults = () => {
+  return i18nString(NoResults);
+};
+const quickOpen = () => {
+  return i18nString(QuickOpen);
+};
+const goToLineColumn = () => {
+  return i18nString(GoToLineColumn);
+};
+const goToSymbolInEditor = () => {
+  return i18nString(GoToSymbolInEditor);
+};
+const searchForText = () => {
+  return i18nString(SearchForText);
+};
+const openView = () => {
+  return i18nString(OpenView);
 };
 
-const emptyHighlightSections = [];
-
-const getHighlightSections = (highlights, label) => {
-  if (highlights.length === 0) {
-    return emptyHighlightSections;
-  }
-  const sections = [];
-  let position = 0;
-  for (let i = 0; i < highlights.length; i += 2) {
-    const highlightStart = highlights[i];
-    const highlightEnd = highlights[i + 1];
-    if (position < highlightStart) {
-      const beforeText = label.slice(position, highlightStart);
-      sections.push({
-        highlighted: false,
-        text: beforeText
-      });
-    }
-    const highlightText = label.slice(highlightStart, highlightEnd);
-    sections.push({
-      highlighted: true,
-      text: highlightText
-    });
-    position = highlightEnd;
-  }
-  if (position < label.length) {
-    const afterText = label.slice(position);
-    sections.push({
-      highlighted: false,
-      text: afterText
-    });
-  }
-  return sections;
+const getPicks$7 = async () => {
+  return [{
+    description: goToFile(),
+    direntType: None$2,
+    fileIcon: '',
+    icon: '',
+    label: DotDotDot,
+    matches: [],
+    uri: ''
+  }, {
+    description: goToLineColumn(),
+    direntType: None$2,
+    fileIcon: '',
+    icon: '',
+    label: ':',
+    matches: [],
+    uri: ''
+  }, {
+    description: goToSymbolInEditor(),
+    direntType: None$2,
+    fileIcon: '',
+    icon: '',
+    label: Colon,
+    matches: [],
+    uri: ''
+  }, {
+    description: searchForText(),
+    direntType: None$2,
+    fileIcon: '',
+    icon: '',
+    label: Percent,
+    matches: [],
+    uri: ''
+  }, {
+    description: showAndRunCommands(),
+    direntType: None$2,
+    fileIcon: '',
+    icon: '',
+    label: AngleBracket,
+    matches: [],
+    uri: ''
+  }, {
+    description: openView(),
+    direntType: None$2,
+    fileIcon: '',
+    icon: '',
+    label: View$1,
+    matches: [],
+    uri: ''
+  }];
 };
 
-const getVisible = (setSize, protoVisibleItems, minLineY, focusedIndex) => {
-  const visibleItems = protoVisibleItems.map((visibleItem, i) => {
-    const highlights = visibleItem.matches.slice(1);
-    const sections = getHighlightSections(highlights, visibleItem.label);
-    return {
-      ...visibleItem,
-      posInSet: minLineY + i + 1,
-      setSize,
-      isActive: i === focusedIndex,
-      highlights: sections
-    };
-  });
-  return visibleItems;
+const getRecentlyOpened = () => {
+  return invoke$1(/* RecentlyOpened.getRecentlyOpened */'RecentlyOpened.getRecentlyOpened');
 };
 
-const createQuickPickViewModel = (oldState, newState) => {
-  const protoVisibleItems = getVisible$1(newState.items, newState.minLineY, newState.maxLineY, newState.icons);
-  const visibleItems = getVisible(newState.items.length, protoVisibleItems, newState.minLineY, newState.focusedIndex);
-  const oldFocusedIndex = oldState.focusedIndex - oldState.minLineY;
-  const newFocusedIndex = newState.focusedIndex - newState.minLineY;
-  const maxLineY = Math.min(newState.maxLineY, newState.items.length);
-  const itemCount = maxLineY - newState.minLineY;
-  const height = itemCount * newState.itemHeight;
+const toProtoVisibleItem = uri => {
   return {
-    visibleItems,
-    value: newState.value,
-    cursorOffset: newState.cursorOffset,
-    focused: newState.focused,
-    height,
-    oldFocusedIndex,
-    newFocusedIndex,
-    uid: newState.uid
+    label: uri,
+    description: '',
+    fileIcon: '',
+    icon: '',
+    matches: [],
+    direntType: Directory,
+    uri: uri
   };
 };
-
-const SetCursorOffset = 'setCursorOffset';
-const SetFocusedIndex = 'setFocusedIndex';
-const SetItemsHeight = 'setItemsHeight';
-const SetValue = 'setValue';
-
-const renderCursorOffset = newState => {
-  return ['Viewlet.send', newState.uid, /* method */SetCursorOffset, /* cursorOffset */newState.cursorOffset];
+const getPicks$6 = async () => {
+  const recentlyOpened = await getRecentlyOpened();
+  const picks = recentlyOpened.map(toProtoVisibleItem);
+  return picks;
 };
 
-const QuickPickInput = 'QuickPickInput';
-
-const renderFocus = newState => {
-  return ['Viewlet.focusElementByName', QuickPickInput];
+const getPicks$5 = async () => {
+  const picks = [];
+  return picks;
 };
 
-const renderFocusedIndex = newState => {
-  return ['Viewlet.send', newState.uid, /* method */SetFocusedIndex, /* oldFocusedIndex */newState.oldFocusedIndex, /* newFocusedIndex */newState.newFocusedIndex];
+const getPicks$4 = async () => {
+  return [];
 };
 
-const renderHeight = newState => {
-  if (newState.height === 0) {
-    return ['Viewlet.send', newState.uid, /* method */SetItemsHeight, /* height */20];
-  }
-  return ['Viewlet.send', newState.uid, /* method */SetItemsHeight, /* height */newState.height];
+const getPicks$3 = async () => {
+  const picks = [];
+  return picks;
 };
 
-const ComboBox = 'combobox';
-const ListBox = 'listbox';
-const None = 'none';
-const Option = 'option';
-
-const FileIcon = 'FileIcon';
-const InputBox = 'InputBox';
-const Label = 'Label';
-const MaskIcon = 'MaskIcon';
-const QuickPick$1 = 'QuickPick';
-const QuickPickHeader = 'QuickPickHeader';
-const QuickPickHighlight = 'QuickPickHighlight';
-const QuickPickItem = 'QuickPickItem';
-const QuickPickItemActive$1 = 'QuickPickItemActive';
-const QuickPickItemDescription = 'QuickPickItemDescription';
-const QuickPickItemLabel = 'QuickPickItemLabel';
-const QuickPickItems$1 = 'QuickPickItems';
-const QuickPickMaskIcon = 'QuickPickMaskIcon';
-const QuickPickStatus = 'QuickPickStatus';
-const Viewlet = 'Viewlet';
-
-const HandleBeforeInput = 'handleBeforeInput';
-const HandleBlur = 'handleBlur';
-const HandleFocus = 'handleFocus';
-const HandleInput = 'handleInput';
-const HandlePointerDown = 'handlePointerDown';
-const HandleWheel = 'handleWheel';
-
-const QuickPick = 'QuickPick';
-const QuickPickItems = 'QuickPickItems';
-const QuickPickItemActive = 'QuickPickItemActive';
+const Hide = 'hide';
+const KeepOpen = '';
 
-const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
-const i18nString = (key, placeholders = emptyObject) => {
-  if (placeholders === emptyObject) {
-    return key;
-  }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
+const selectPick$9 = async pick => {
+  const id = pick.label;
+  await setColorTheme(/* colorThemeId */id);
+  return {
+    command: Hide
   };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-const GoToFile = 'Go to file';
-const GoToLineColumn = 'Go to Line / Column';
-const GoToSymbolInEditor = 'Go to Symbol in Editor';
-const NoResults = 'No Results';
-const OpenView = 'Open View';
-const QuickOpen = 'Quick open';
-const SearchForText = 'Search for text';
-const ShowAndRunCommands = 'Show And Run Commands';
-const TypeNameOfCommandToRun = 'Type the name of a command to run.';
-
-const typeNameofCommandToRun = () => {
-  return i18nString(TypeNameOfCommandToRun);
-};
-const showAndRunCommands = () => {
-  return i18nString(ShowAndRunCommands);
-};
-const goToFile = () => {
-  return i18nString(GoToFile);
-};
-const noResults = () => {
-  return i18nString(NoResults);
+const shouldHide = item => {
+  if (item.id === 'Viewlet.openWidget' && item.args[0] === 'QuickPick') {
+    return false;
+  }
+  return true;
 };
-const quickOpen = () => {
-  return i18nString(QuickOpen);
+const selectPickBuiltin = async item => {
+  const args = item.args || [];
+  // TODO ids should be all numbers for efficiency -> also directly can call command
+  await invoke$1(item.id, ...args);
+  if (shouldHide(item)) {
+    return {
+      command: Hide
+    };
+  }
+  return {
+    command: KeepOpen
+  };
 };
-const goToLineColumn = () => {
-  return i18nString(GoToLineColumn);
+const selectPickExtension = async item => {
+  const id = item.id.slice(4); // TODO lots of string allocation with 'ext.' find a better way to separate builtin commands from extension commands
+  try {
+    await invoke$1('ExtensionHost.executeCommand', id);
+  } catch (error) {
+    await handleError(error, false);
+    await showErrorDialog(error);
+  }
+  return {
+    command: Hide
+  };
 };
-const goToSymbolInEditor = () => {
-  return i18nString(GoToSymbolInEditor);
+const selectPick$8 = async item => {
+  // @ts-ignore
+  const id = item.id;
+  if (id.startsWith('ext.')) {
+    return selectPickExtension(item);
+  }
+  return selectPickBuiltin(item);
 };
-const searchForText = () => {
-  return i18nString(SearchForText);
+
+const selectPick$7 = async pick => {
+  const {
+    args
+  } = state$1;
+  const resolve = args[2];
+  resolve(pick);
+  return {
+    command: Hide
+  };
 };
-const openView = () => {
-  return i18nString(OpenView);
+
+const openUri = async uri => {
+  await invoke$1(/* Main.openUri */'Main.openUri', /* uri */uri);
 };
 
-const Div = 4;
-const Input = 6;
-const Span = 8;
-const Img = 17;
-
-const getQuickPickInputVirtualDom = () => {
-  const ariaLabel = typeNameofCommandToRun();
+const selectPick$6 = async pick => {
+  const description = pick.description;
+  const fileName = pick.label;
+  const workspace = await getWorkspacePath();
+  const absolutePath = `${workspace}/${description}/${fileName}`;
+  await openUri(absolutePath);
   return {
-    type: Input,
-    className: InputBox,
-    spellcheck: false,
-    autocapitalize: 'off',
-    inputType: 'text',
-    childCount: 0,
-    role: ComboBox,
-    name: QuickPickInput,
-    onBeforeInput: HandleBeforeInput,
-    onBlur: HandleBlur,
-    onInput: HandleInput,
-    onFocus: HandleFocus,
-    ariaLabel: ariaLabel,
-    ariaAutoComplete: 'list',
-    ariaExpanded: true,
-    autocomplete: 'off'
+    command: Hide
   };
 };
 
-const getQuickPickHeaderVirtualDom = () => {
-  return [{
-    type: Div,
-    className: QuickPickHeader,
-    childCount: 1
-  }, getQuickPickInputVirtualDom()];
+const execute = async (method, ...params) => {
+  // TODO
 };
 
-const getFileIconVirtualDom = icon => {
+const selectPick$5 = async item => {
+  const rowIndex = Number.parseInt(item.label);
+  const position = {
+    rowIndex,
+    columnIndex: 5
+  };
+  await execute(/* EditorSetCursor.editorSetCursor */'TODO', /* position */position);
+  // TODO put cursor onto that line
   return {
-    type: Img,
-    className: FileIcon,
-    src: icon,
-    role: None,
-    childCount: 0
+    command: Hide
   };
 };
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-const Text = 12;
-const text = data => {
+const selectPick$4 = async item => {
+  // Command.execute(/* openView */ 549, /* viewName */ item.label)
   return {
-    type: Text,
-    text: data,
-    childCount: 0
+    command: Hide
   };
 };
 
-const quickPickHighlight = {
-  type: Span,
-  className: QuickPickHighlight,
-  childCount: 1
+const openWorkspaceFolder = uri => {
+  return invoke$1(/* Workspace.setPath */'Workspace.setPath', /* path */uri);
 };
-const getHighlights = (sections, label) => {
-  const labelDom = {
-    type: Div,
-    className: QuickPickItemLabel,
-    childCount: 0
+
+// TODO selectPick should be independent of show/hide
+const selectPick$3 = async pick => {
+  const path = `${pick.description}/${pick.label}`;
+  await openWorkspaceFolder(path);
+  return {
+    command: Hide
   };
-  const nodes = [labelDom];
-  if (sections.length === 0) {
-    labelDom.childCount++;
-    nodes.push(text(label));
-  } else {
-    for (const section of sections) {
-      if (section.highlighted) {
-        labelDom.childCount++;
-        nodes.push(quickPickHighlight, text(section.text));
-      } else {
-        labelDom.childCount++;
-        nodes.push(text(section.text));
-      }
-    }
-  }
-  return nodes;
 };
 
-const getQuickPickItemVirtualDom = visibleItem => {
-  const {
-    posInSet,
-    label,
-    setSize,
-    isActive,
-    description,
-    icon,
-    highlights,
-    fileIcon
-  } = visibleItem;
-  const dom = [];
-  dom.push({
-    type: Div,
-    className: QuickPickItem,
-    role: Option,
-    ariaPosInSet: posInSet,
-    ariaSetSize: setSize,
-    childCount: 1
-  });
-  const parent = dom[0];
-  if (isActive) {
-    // @ts-ignore
-    parent.id = QuickPickItemActive;
-    parent.className += ' ' + QuickPickItemActive$1;
-  }
-  if (fileIcon) {
-    parent.childCount++;
-    dom.push(getFileIconVirtualDom(fileIcon));
-  } else if (icon) {
-    parent.childCount++;
-    dom.push({
-      type: Div,
-      className: mergeClassNames(QuickPickMaskIcon, MaskIcon, `MaskIcon${icon}`),
-      childCount: 0
-    });
-  }
-  const highlightDom = getHighlights(highlights, label);
-  dom.push(...highlightDom);
-  if (description) {
-    parent.childCount++;
-    dom.push({
-      type: Div,
-      className: QuickPickItemDescription,
-      childCount: 1
-    }, text(description));
-  }
-  return dom;
+const selectPick$2 = async item => {
+  return {
+    command: Hide
+  };
 };
 
-const getQuickPickNoResultsVirtualDom = () => {
-  const noResults$1 = noResults();
-  return [{
-    type: Div,
-    className: mergeClassNames(QuickPickItem, QuickPickItemActive$1, QuickPickStatus),
-    childCount: 1
-  }, {
-    type: Div,
-    className: Label,
-    childCount: 1
-  }, text(noResults$1)];
+const selectPick$1 = async item => {
+  // Command.execute(/* openView */ 549, /* viewName */ item.label)
+  return {
+    command: Hide
+  };
 };
 
-const getQuickPickItemsVirtualDom = visibleItems => {
-  if (visibleItems.length === 0) {
-    return getQuickPickNoResultsVirtualDom();
-  }
-  const dom = visibleItems.flatMap(getQuickPickItemVirtualDom);
-  return dom;
+const selectPick = async item => {
+  return {
+    command: Hide
+  };
 };
 
-const getQuickPickVirtualDom = visibleItems => {
-  const quickOpen$1 = quickOpen();
-  return [{
-    type: Div,
-    className: mergeClassNames(Viewlet, QuickPick$1),
-    childCount: 2,
-    id: QuickPick,
-    ariaLabel: quickOpen$1
-  }, ...getQuickPickHeaderVirtualDom(), {
-    type: Div,
-    className: QuickPickItems$1,
-    id: QuickPickItems,
-    role: ListBox,
-    ariaActivedescendant: QuickPickItemActive,
-    onWheel: HandleWheel,
-    childCount: visibleItems.length
-  }, ...getQuickPickItemsVirtualDom(visibleItems)];
-};
+const selectPicks = [selectPick$9, selectPick$8, selectPick$7, selectPick$6, selectPick$5, selectPick$4, selectPick$3, selectPick$2, selectPick$1, selectPick];
+const getPicks$2 = [getPicks$c, getPicks$b, getPicks$a, getPicks$9, getPicks$8, getPicks$7, getPicks$6, getPicks$5, getPicks$4, getPicks$3];
 
-const renderItems = newState => {
-  const dom = getQuickPickVirtualDom(newState.visibleItems);
-  return ['Viewlet.setDom2', dom];
+const select = selectPicks;
+const getPick$1 = getPicks$2;
+const getPicks$1 = id => {
+  const fn = getPick$1[id];
+  return fn;
 };
-
-const renderValue = newState => {
-  return ['Viewlet.send', newState.uid, /* method */SetValue, /* value */newState.value];
+const getSelect = id => {
+  const fn = select[id];
+  return fn;
 };
 
-const getRenderer = diffType => {
-  switch (diffType) {
-    case RenderValue:
-      return renderValue;
-    case RenderCursorOffset:
-      return renderCursorOffset;
-    case RenderItems:
-      return renderItems;
-    case RenderFocusedIndex:
-      return renderFocusedIndex;
-    case Height:
-      return renderHeight;
-    case RenderFocus:
-      return renderFocus;
-    default:
-      throw new Error('unknown renderer');
-  }
+const getPicks = (id, searchValue) => {
+  const fn = getPicks$1(id);
+  return fn(searchValue);
 };
 
-const applyRender = (oldState, newState, diffResult) => {
-  const commands = [];
-  const viewModel = createQuickPickViewModel(oldState, newState);
-  for (const item of diffResult) {
-    if (item === Height) {
-      continue;
-    }
-    if (item === RenderFocusedIndex) {
-      continue;
-    }
-    const fn = getRenderer(item);
-    commands.push(fn(viewModel));
+const getQuickPickSubProviderId = prefix => {
+  switch (prefix) {
+    case Command:
+      return Commands$1;
+    case Symbol$1:
+      return Symbol$2;
+    case WorkspaceSymbol$1:
+      return WorkspaceSymbol$2;
+    case GoToLine$1:
+      return GoToLine$2;
+    case View$2:
+      return View$3;
+    case Help$1:
+      return Help$2;
+    default:
+      return File$2;
   }
-  return commands;
 };
 
-const render2 = (uid, diffResult) => {
+// TODO when user types letters -> no need to query provider again -> just filter existing results
+const setValue = async (state, newValue) => {
   const {
-    oldState,
-    newState
-  } = get(uid);
-  if (oldState === newState) {
-    return [];
+    providerId,
+    value,
+    minLineY,
+    maxLineY,
+    fileIconCache
+  } = state;
+  if (value === newValue) {
+    return state;
   }
-  set(uid, newState, newState);
-  const commands = applyRender(oldState, newState, diffResult);
-  return commands;
+  const prefix = getQuickPickPrefix(newValue);
+  const subId = getQuickPickSubProviderId(prefix);
+  const newPicks = await getPicks(subId, newValue);
+  const filterValue = getFilterValue(providerId, newValue);
+  const items = filterQuickPickItems(newPicks, filterValue);
+  const focusedIndex = items.length === 0 ? -1 : 0;
+  const sliced = items.slice(minLineY, maxLineY);
+  const {
+    newFileIconCache,
+    icons
+  } = await getQuickPickFileIcons(sliced, fileIconCache);
+  return {
+    ...state,
+    picks: newPicks,
+    items,
+    focusedIndex,
+    inputSource: Script,
+    value: newValue,
+    icons,
+    fileIconCache: newFileIconCache
+  };
 };
 
-const renderEventListeners = () => {
-  return [{
-    name: HandlePointerDown,
-    params: ['handlePointerDown', 'event.clientX', 'event.clientY'],
-    preventDefault: true
-  }, {
-    name: HandleWheel,
-    params: ['handleWheel', 'event.deltaMode', 'event.deltaY']
-  }, {
-    name: HandleBlur,
-    params: ['handleBlur']
-  }, {
-    name: HandleBeforeInput,
-    params: ['handleBeforeInput']
-  }, {
-    name: HandleInput,
-    params: ['handleInput', 'event.target.value']
-  }, {
-    name: HandleFocus,
-    params: ['handleFocus']
-  }];
+// TODO when user types letters -> no need to query provider again -> just filter existing results
+const handleInput = async (state, newValue, cursorOffset, inputSource = Script) => {
+  if (state.value === newValue) {
+    return state;
+  }
+  const newState = await setValue(state, newValue);
+  return {
+    ...newState,
+    cursorOffset,
+    inputSource
+  };
 };
 
-const selectCurrentIndex = state => {
-  return selectIndex(state, state.focusedIndex);
+const handleBeforeInput = (state, inputType, data, selectionStart, selectionEnd) => {
+  string(inputType);
+  number(selectionStart);
+  number(selectionEnd);
+  const {
+    value
+  } = state;
+  const {
+    newValue,
+    cursorOffset
+  } = getNewValue(value, inputType, data, selectionStart, selectionEnd);
+  return handleInput(state, newValue, cursorOffset, User);
 };
 
-const findLabelIndex = (items, label) => {
-  for (let i = 0; i < items.length; i++) {
-    if (items[i].label === label) {
-      return i;
-    }
+const handleBlur = async state => {
+  // TODO fix virtual dom diffing so that input isn't destroyed and loses focus when rerendering
+  // await CloseWidget.closeWidget(state.uid)
+  return state;
+};
+
+const getIndex = (top, headerHeight, itemHeight, y) => {
+  const relativeY = y - top - headerHeight;
+  const index = Math.floor(relativeY / itemHeight);
+  return index;
+};
+
+const getPick = (items, index) => {
+  array(items);
+  number(index);
+  // if (index < state.recentPicks.length) {
+  //   return state.recentPicks[index]
+  // }
+  // index -= state.recentPicks.length
+  if (index < items.length) {
+    return items[index];
   }
-  return -1;
+  console.warn('no pick matching index', index);
+  return undefined;
 };
 
-const selectItem = async (state, label) => {
-  string(label);
-  const index = findLabelIndex(state.items, label);
-  if (index === -1) {
+const selectIndex = async (state, index, button = /* left */0) => {
+  const {
+    minLineY,
+    items,
+    value
+  } = state;
+  const actualIndex = index + minLineY;
+  const pick = getPick(items, actualIndex);
+  if (!pick) {
     return state;
   }
-  return selectIndex(state, index);
+  const prefix = getQuickPickPrefix(value);
+  const subId = getQuickPickSubProviderId(prefix);
+  const fn = getSelect(subId);
+  const selectPickResult = await fn(pick);
+  object(selectPickResult);
+  string(selectPickResult.command);
+  const {
+    command
+  } = selectPickResult;
+  switch (command) {
+    case Hide:
+      await closeWidget(state.uid);
+      return state;
+    default:
+      return state;
+  }
+
+  // TODO recent picks should be per provider
+  // if (!state.recentPickIds.has(pick.id)) {
+  //   state.recentPicks.unshift(pick)
+  //   state.recentPickIds.add(pick.id)
+  // }
+  // if (state.recentPicks.length > RECENT_PICKS_MAX_SIZE) {
+  //   const last = state.recentPicks.pop()
+  //   state.recentPickIds.delete(last.id)
+  // }
 };
 
-const wrapCommand = fn => {
-  const wrapped = async (uid, ...args) => {
-    const {
-      newState
-    } = get(uid);
-    const newerState = await fn(newState, ...args);
-    if (newState === newerState) {
-      return;
-    }
-    const latest = get(uid);
-    set(uid, latest.oldState, newerState);
-  };
-  return wrapped;
+const handleClickAt = (state, x, y) => {
+  const {
+    top,
+    headerHeight,
+    itemHeight
+  } = state;
+  const index = getIndex(top, headerHeight, itemHeight, y);
+  return selectIndex(state, index);
 };
 
-const commandMap = {
-  'QuickPick.addMenuEntries': add,
-  'QuickPick.close': close,
-  'QuickPick.create2': create,
-  'QuickPick.diff2': diff2,
-  'QuickPick.dispose': dispose,
-  'QuickPick.focusFirst': wrapCommand(focusFirst),
-  'QuickPick.focusIndex': wrapCommand(focusIndex),
-  'QuickPick.focusLast': wrapCommand(focusLast),
-  'QuickPick.focusNext': wrapCommand(focusNext),
-  'QuickPick.focusPrevious': wrapCommand(focusPrevious),
-  'QuickPick.getCommandIds': getCommandIds,
-  'QuickPick.getKeyBindings': getKeyBindings,
-  'QuickPick.handleBeforeInput': wrapCommand(handleBeforeInput),
-  'QuickPick.handleBlur': wrapCommand(handleBlur),
-  'QuickPick.handleClickAt': wrapCommand(handleClickAt),
-  'QuickPick.handleFocus': wrapCommand(handleFocus),
-  'QuickPick.handleInput': wrapCommand(handleInput),
-  'QuickPick.handleWheel': wrapCommand(handleWheel),
-  'QuickPick.loadContent': wrapCommand(loadContent),
-  'QuickPick.render2': render2,
-  'QuickPick.renderEventListeners': renderEventListeners,
-  'QuickPick.selectCurrentIndex': wrapCommand(selectCurrentIndex),
-  'QuickPick.selectIndex': wrapCommand(selectIndex),
-  'QuickPick.selectItem': wrapCommand(selectItem),
-  'QuickPick.setDeltaY': wrapCommand(setDeltaY),
-  'QuickPick.setValue': wrapCommand(setValue)
+const setFocus = async focusKey => {
+  await invoke$1('Focus.setFocus', focusKey);
 };
 
-const getColorThemeNames = async () => {
-  return invoke$1(/* Ajax.getJson */'ColorTheme.getColorThemeNames');
+const handleFocus = async state => {
+  // TODO fix virtual dom diffing so that input isn't destroyed and loses focus when rerendering
+  await setFocus(FocusQuickPickInput);
+  // await CloseWidget.closeWidget(state.uid)
+  return state;
 };
 
-const toProtoVisibleItem$2 = name => {
-  const pick = {
-    label: name,
-    description: '',
-    fileIcon: '',
-    icon: '',
-    matches: [],
-    direntType: 0,
-    uri: ''
-  };
-  return pick;
+const getDefaultValue = id => {
+  switch (id) {
+    case EveryThing$1:
+      return Command;
+    default:
+      return '';
+  }
 };
-const getPicks$b = async searchValue => {
-  const colorThemeNames = await getColorThemeNames();
-  const picks = colorThemeNames.map(toProtoVisibleItem$2);
-  return picks;
+
+const Commands = 'quickPick://commands';
+const EveryThing = 'quickPick://everything';
+const Recent = 'quickPick://recent';
+const ColorTheme = 'quickPick://color-theme';
+const Symbol = 'quickPick://symbol';
+const View = 'quickPick://view';
+const Help = 'quickPick://help';
+const WorkspaceSymbol = 'quickPick://workspace-symbol';
+const GoToLine = 'quickPick://go-to-line';
+
+const getQuickPickProviderId = prefix => {
+  switch (prefix) {
+    case Commands:
+    case Symbol:
+    case WorkspaceSymbol:
+    case EveryThing:
+    case GoToLine:
+    case View:
+    case Help:
+      return EveryThing$1;
+    case ColorTheme:
+      return ColorTheme$1;
+    case Recent:
+      return Recent$1;
+    default:
+      return File$2;
+  }
 };
 
-const handleError = async (error, notify = true, prefix = '') => {
-  console.error(error);
+const noop = args => {};
+const setArgsCustom = args => {
+  state$1.args = args;
 };
-const showErrorDialog = async error => {
-  const code = error.code;
-  const message = error.message;
-  const stack = error.stack;
-  const name = error.name;
-  const errorInfo = {
-    code,
-    message,
-    stack,
-    name
-  };
-  await invoke$1('ErrorHandling.showErrorDialog', errorInfo);
+const getFn = id => {
+  switch (id) {
+    case Custom:
+      return setArgsCustom;
+    default:
+      return noop;
+  }
 };
-const warn = (...args) => {
-  console.warn(...args);
+const setArgs = (id, args) => {
+  const fn = getFn(id);
+  return fn(args);
 };
 
-// TODO combine Ajax with cache (specify strategy: cacheFirst, networkFirst)
-const getBuiltinPicks = async () => {
-  const builtinPicks = getAll();
-  return builtinPicks;
-};
-const prefixIdWithExt = item => {
-  if (!item.label) {
-    warn('[QuickPick] item has missing label', item);
-  }
-  if (!item.id) {
-    warn('[QuickPick] item has missing id', item);
-  }
+const loadContent = async state => {
+  const {
+    uri,
+    args,
+    fileIconCache
+  } = state;
+  const id = getQuickPickProviderId(uri);
+  const value = getDefaultValue(id);
+  const prefix = getQuickPickPrefix(value);
+  const subId = getQuickPickSubProviderId(prefix);
+  setArgs(subId, args);
+  const newPicks = await getPicks(subId, value);
+  array(newPicks);
+  const filterValue = getFilterValue(id, value);
+  const items = filterQuickPickItems(newPicks, filterValue);
+  const minLineY = 0;
+  const maxLineY = Math.min(minLineY + state.maxVisibleItems, newPicks.length);
+  const sliced = newPicks.slice(minLineY, maxLineY);
+  const {
+    newFileIconCache,
+    icons
+  } = await getQuickPickFileIcons(sliced, fileIconCache);
   return {
-    ...item,
-    id: `ext.${item.id}`,
-    label: item.label || item.id
-  };
-};
-const getExtensionPicks = async () => {
-  try {
-    // TODO don't call this every time
-    const extensionPicks = await invoke$1('ExtensionHost.getCommands');
-    if (!extensionPicks) {
-      return [];
-    }
-    const mappedPicks = extensionPicks.map(prefixIdWithExt);
-    return mappedPicks;
-  } catch (error) {
-    console.error(`Failed to get extension picks: ${error}`);
-    return [];
-  }
-};
-const toProtoVisibleItem$1 = item => {
-  const pick = {
-    label: item.label,
-    description: '',
-    fileIcon: '',
-    icon: '',
-    matches: [],
-    direntType: 0,
-    uri: ''
+    ...state,
+    picks: newPicks,
+    items,
+    focusedIndex: 0,
+    state: Finished,
+    minLineY,
+    maxLineY,
+    value,
+    cursorOffset: value.length,
+    inputSource: Script,
+    focused: true,
+    fileIconCache: newFileIconCache,
+    icons,
+    providerId: id
   };
-  // @ts-ignore
-  pick.id = item.id;
-  return pick;
-};
-const getPicks$a = async () => {
-  // TODO get picks in parallel
-  const builtinPicks = await getBuiltinPicks();
-  const extensionPicks = await getExtensionPicks();
-  const allPicks = [...builtinPicks, ...extensionPicks];
-  const converted = allPicks.map(toProtoVisibleItem$1);
-  return converted;
-};
-
-const getPicks$9 = async searchValue => {
-  const items = state$3.args[1] || [];
-  return items;
 };
 
-const state$1 = {
-  provider: File$2,
-  prefix: 'string-that-should-never-match-another-string'
+const getVisible$1 = (items, minLineY, maxLineY, icons) => {
+  const range = items.slice(minLineY, maxLineY);
+  const protoVisibleItems = range.map((item, index) => {
+    return {
+      ...item,
+      fileIcon: icons[index]
+    };
+  });
+  return protoVisibleItems;
 };
 
-const getPicks$8 = async value => {
-  const prefix = getQuickPickPrefix(value);
-  const providerId = getQuickPickProviderId(prefix);
+const emptyHighlightSections = [];
 
-  // TODO race condition
-  if (state$1.prefix !== prefix) {
-    state$1.prefix = prefix;
-    state$1.provider = providerId;
+const getHighlightSections = (highlights, label) => {
+  if (highlights.length === 0) {
+    return emptyHighlightSections;
   }
-  // TODO this line is a bit duplicated with getFilterValue
-  const slicedValue = value.slice(prefix.length).trimStart();
-  const picks = await getPicks$c(providerId, slicedValue);
-  return picks;
+  const sections = [];
+  let position = 0;
+  for (let i = 0; i < highlights.length; i += 2) {
+    const highlightStart = highlights[i];
+    const highlightEnd = highlights[i + 1];
+    if (position < highlightStart) {
+      const beforeText = label.slice(position, highlightStart);
+      sections.push({
+        highlighted: false,
+        text: beforeText
+      });
+    }
+    const highlightText = label.slice(highlightStart, highlightEnd);
+    sections.push({
+      highlighted: true,
+      text: highlightText
+    });
+    position = highlightEnd;
+  }
+  if (position < label.length) {
+    const afterText = label.slice(position);
+    sections.push({
+      highlighted: false,
+      text: afterText
+    });
+  }
+  return sections;
 };
 
-const emptyMatches = [];
-
-const getWorkspacePath = async () => {
-  return invoke$1('Workspace.getPath');
+const getVisible = (setSize, protoVisibleItems, minLineY, focusedIndex) => {
+  const visibleItems = protoVisibleItems.map((visibleItem, i) => {
+    const highlights = visibleItem.matches.slice(1);
+    const sections = getHighlightSections(highlights, visibleItem.label);
+    return {
+      ...visibleItem,
+      posInSet: minLineY + i + 1,
+      setSize,
+      isActive: i === focusedIndex,
+      highlights: sections
+    };
+  });
+  return visibleItems;
 };
 
-const RE_PROTOCOL = /^([a-z-]+):\/\//;
-const getProtocol = uri => {
-  const protocolMatch = uri.match(RE_PROTOCOL);
-  if (protocolMatch) {
-    return protocolMatch[1];
-  }
-  return '';
+const createQuickPickViewModel = (oldState, newState) => {
+  const protoVisibleItems = getVisible$1(newState.items, newState.minLineY, newState.maxLineY, newState.icons);
+  const visibleItems = getVisible(newState.items.length, protoVisibleItems, newState.minLineY, newState.focusedIndex);
+  const oldFocusedIndex = oldState.focusedIndex - oldState.minLineY;
+  const newFocusedIndex = newState.focusedIndex - newState.minLineY;
+  const maxLineY = Math.min(newState.maxLineY, newState.items.length);
+  const itemCount = maxLineY - newState.minLineY;
+  const height = itemCount * newState.itemHeight;
+  return {
+    visibleItems,
+    value: newState.value,
+    cursorOffset: newState.cursorOffset,
+    focused: newState.focused,
+    height,
+    oldFocusedIndex,
+    newFocusedIndex,
+    uid: newState.uid
+  };
 };
 
-const state = Object.create(null);
-const register = modules => {
-  Object.assign(state, modules);
-};
-const getModule = protocol => {
-  return state[protocol];
-};
+const SetCursorOffset = 'setCursorOffset';
+const SetFocusedIndex = 'setFocusedIndex';
+const SetItemsHeight = 'setItemsHeight';
 
-const searchFile$5 = async (path, value, prepare, assetDir) => {
-  const protocol = getProtocol(path);
-  // TODO call different providers depending on protocol
-  const fn = getModule(protocol);
-  const result = await fn(path, value, prepare, assetDir);
-  return result;
+const renderCursorOffset = newState => {
+  return ['Viewlet.send', newState.uid, /* method */SetCursorOffset, /* cursorOffset */newState.cursorOffset];
 };
 
-// TODO this should be in FileSystem module
-const pathBaseName = path => {
-  return path.slice(path.lastIndexOf('/') + 1);
-};
+const QuickPickInput = 'QuickPickInput';
 
-// TODO this should be in FileSystem module
-const pathDirName = path => {
-  const pathSeparator = '/';
-  const index = path.lastIndexOf(pathSeparator);
-  if (index === -1) {
-    return '';
-  }
-  return path.slice(0, index);
+const renderFocus = newState => {
+  return ['Viewlet.focusElementByName', QuickPickInput];
 };
 
-const searchFile$4 = async (path, value) => {
-  const prepare = true;
-  const files = await searchFile$5(/* path */path, /* searchTerm */value, prepare, '');
-  return files;
+const renderFocusedIndex = newState => {
+  return ['Viewlet.send', newState.uid, /* method */SetFocusedIndex, /* oldFocusedIndex */newState.oldFocusedIndex, /* newFocusedIndex */newState.newFocusedIndex];
 };
-const convertToPick = uri => {
-  const baseName = pathBaseName(uri);
-  const dirName = pathDirName(uri);
-  return {
-    description: dirName,
-    direntType: File$1,
-    fileIcon: '',
-    icon: '',
-    label: baseName,
-    matches: emptyMatches,
-    uri
-  };
+
+const renderHeight = newState => {
+  if (newState.height === 0) {
+    return ['Viewlet.send', newState.uid, /* method */SetItemsHeight, /* height */20];
+  }
+  return ['Viewlet.send', newState.uid, /* method */SetItemsHeight, /* height */newState.height];
 };
 
-// TODO handle files differently
-// e.g. when there are many files, don't need
-// to compute the fileIcon for all files
+const ComboBox = 'combobox';
+const ListBox = 'listbox';
+const None = 'none';
+const Option = 'option';
 
-const getPicks$7 = async searchValue => {
-  // TODO cache workspace path
-  const workspace = await getWorkspacePath();
-  if (!workspace) {
-    return [];
-  }
-  const files = await searchFile$4(workspace, searchValue);
-  const picks = files.map(convertToPick);
-  return picks;
-};
+const FileIcon = 'FileIcon';
+const InputBox = 'InputBox';
+const Label = 'Label';
+const MaskIcon = 'MaskIcon';
+const QuickPick$1 = 'QuickPick';
+const QuickPickHeader = 'QuickPickHeader';
+const QuickPickHighlight = 'QuickPickHighlight';
+const QuickPickItem = 'QuickPickItem';
+const QuickPickItemActive$1 = 'QuickPickItemActive';
+const QuickPickItemDescription = 'QuickPickItemDescription';
+const QuickPickItemLabel = 'QuickPickItemLabel';
+const QuickPickItems$1 = 'QuickPickItems';
+const QuickPickMaskIcon = 'QuickPickMaskIcon';
+const QuickPickStatus = 'QuickPickStatus';
+const Viewlet = 'Viewlet';
 
-const getPicks$6 = async () => {
-  const picks = [{
-    label: '1',
-    description: '',
-    icon: '',
-    fileIcon: '',
-    matches: [],
-    direntType: None$2,
-    uri: ''
-  }, {
-    label: '2',
-    description: '',
-    icon: '',
-    fileIcon: '',
-    matches: [],
-    direntType: None$2,
-    uri: ''
-  }, {
-    label: '3',
-    description: '',
-    icon: '',
-    fileIcon: '',
-    matches: [],
-    direntType: None$2,
-    uri: ''
-  }, {
-    label: '4',
-    description: '',
-    icon: '',
-    fileIcon: '',
-    matches: [],
-    direntType: None$2,
-    uri: ''
-  }, {
-    label: '5',
-    description: '',
-    icon: '',
-    fileIcon: '',
-    matches: [],
-    direntType: None$2,
-    uri: ''
-  }, {
-    label: '6',
-    description: '',
-    icon: '',
-    fileIcon: '',
-    matches: [],
-    direntType: None$2,
-    uri: ''
-  }];
-  return picks;
-};
+const HandleWheel = 'handleWheel';
+const HandlePointerDown = 'handlePointerDown';
+const HandleBeforeInput = 'handleBeforeInput';
+const HandleBlur = 'handleBlur';
+const HandleFocus = 'handleFocus';
+const HandleInput = 'handleInput';
 
-const DotDotDot = '...';
-const Colon = ':';
-const Percent = '%';
-const AngleBracket = '>';
-const View = 'view';
+const QuickPick = 'QuickPick';
+const QuickPickItems = 'QuickPickItems';
+const QuickPickItemActive = 'QuickPickItemActive';
 
-const getPicks$5 = async () => {
-  return [{
-    description: goToFile(),
-    direntType: None$2,
-    fileIcon: '',
-    icon: '',
-    label: DotDotDot,
-    matches: [],
-    uri: ''
-  }, {
-    description: goToLineColumn(),
-    direntType: None$2,
-    fileIcon: '',
-    icon: '',
-    label: ':',
-    matches: [],
-    uri: ''
-  }, {
-    description: goToSymbolInEditor(),
-    direntType: None$2,
-    fileIcon: '',
-    icon: '',
-    label: Colon,
-    matches: [],
-    uri: ''
-  }, {
-    description: searchForText(),
-    direntType: None$2,
-    fileIcon: '',
-    icon: '',
-    label: Percent,
-    matches: [],
-    uri: ''
-  }, {
-    description: showAndRunCommands(),
-    direntType: None$2,
-    fileIcon: '',
-    icon: '',
-    label: AngleBracket,
-    matches: [],
-    uri: ''
-  }, {
-    description: openView(),
-    direntType: None$2,
-    fileIcon: '',
-    icon: '',
-    label: View,
-    matches: [],
-    uri: ''
-  }];
+const Div = 4;
+const Input = 6;
+const Span = 8;
+const Img = 17;
+
+const getQuickPickInputVirtualDom = () => {
+  const ariaLabel = typeNameofCommandToRun();
+  return {
+    type: Input,
+    className: InputBox,
+    spellcheck: false,
+    autocapitalize: 'off',
+    inputType: 'text',
+    childCount: 0,
+    role: ComboBox,
+    name: QuickPickInput,
+    onBeforeInput: HandleBeforeInput,
+    onBlur: HandleBlur,
+    onInput: HandleInput,
+    onFocus: HandleFocus,
+    ariaLabel: ariaLabel,
+    ariaAutoComplete: 'list',
+    ariaExpanded: true,
+    autocomplete: 'off'
+  };
 };
 
-const getRecentlyOpened = () => {
-  return invoke$1(/* RecentlyOpened.getRecentlyOpened */'RecentlyOpened.getRecentlyOpened');
+const getQuickPickHeaderVirtualDom = () => {
+  return [{
+    type: Div,
+    className: QuickPickHeader,
+    childCount: 1
+  }, getQuickPickInputVirtualDom()];
 };
 
-const toProtoVisibleItem = uri => {
+const getFileIconVirtualDom = icon => {
   return {
-    label: uri,
-    description: '',
-    fileIcon: '',
-    icon: '',
-    matches: [],
-    direntType: Directory,
-    uri: uri
+    type: Img,
+    className: FileIcon,
+    src: icon,
+    role: None,
+    childCount: 0
   };
 };
-const getPicks$4 = async () => {
-  const recentlyOpened = await getRecentlyOpened();
-  const picks = recentlyOpened.map(toProtoVisibleItem);
-  return picks;
-};
 
-const getPicks$3 = async () => {
-  const picks = [];
-  return picks;
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
 };
-
-const getPicks$2 = async () => {
-  return [];
+const Text = 12;
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
 };
 
-const getPicks$1 = async () => {
-  const picks = [];
-  return picks;
+const quickPickHighlight = {
+  type: Span,
+  className: QuickPickHighlight,
+  childCount: 1
 };
-
-const selectPick$a = async pick => {
-  const id = pick.label;
-  await setColorTheme(/* colorThemeId */id);
-  return {
-    command: Hide
+const getHighlights = (sections, label) => {
+  const labelDom = {
+    type: Div,
+    className: QuickPickItemLabel,
+    childCount: 0
   };
+  const nodes = [labelDom];
+  if (sections.length === 0) {
+    labelDom.childCount++;
+    nodes.push(text(label));
+  } else {
+    for (const section of sections) {
+      if (section.highlighted) {
+        labelDom.childCount++;
+        nodes.push(quickPickHighlight, text(section.text));
+      } else {
+        labelDom.childCount++;
+        nodes.push(text(section.text));
+      }
+    }
+  }
+  return nodes;
 };
 
-const shouldHide = item => {
-  if (item.id === 'Viewlet.openWidget' && item.args[0] === 'QuickPick') {
-    return false;
+const getQuickPickItemVirtualDom = visibleItem => {
+  const {
+    posInSet,
+    label,
+    setSize,
+    isActive,
+    description,
+    icon,
+    highlights,
+    fileIcon
+  } = visibleItem;
+  const dom = [];
+  dom.push({
+    type: Div,
+    className: QuickPickItem,
+    role: Option,
+    ariaPosInSet: posInSet,
+    ariaSetSize: setSize,
+    childCount: 1
+  });
+  const parent = dom[0];
+  if (isActive) {
+    // @ts-ignore
+    parent.id = QuickPickItemActive;
+    parent.className += ' ' + QuickPickItemActive$1;
+  }
+  if (fileIcon) {
+    parent.childCount++;
+    dom.push(getFileIconVirtualDom(fileIcon));
+  } else if (icon) {
+    parent.childCount++;
+    dom.push({
+      type: Div,
+      className: mergeClassNames(QuickPickMaskIcon, MaskIcon, `MaskIcon${icon}`),
+      childCount: 0
+    });
   }
-  return true;
-};
-const selectPickBuiltin = async item => {
-  const args = item.args || [];
-  // TODO ids should be all numbers for efficiency -> also directly can call command
-  await invoke$1(item.id, ...args);
-  if (shouldHide(item)) {
-    return {
-      command: Hide
-    };
+  const highlightDom = getHighlights(highlights, label);
+  dom.push(...highlightDom);
+  if (description) {
+    parent.childCount++;
+    dom.push({
+      type: Div,
+      className: QuickPickItemDescription,
+      childCount: 1
+    }, text(description));
   }
-  return {
-    command: KeepOpen
-  };
+  return dom;
 };
-const selectPickExtension = async item => {
-  const id = item.id.slice(4); // TODO lots of string allocation with 'ext.' find a better way to separate builtin commands from extension commands
-  try {
-    await invoke$1('ExtensionHost.executeCommand', id);
-  } catch (error) {
-    await handleError(error, false);
-    await showErrorDialog(error);
-  }
-  return {
-    command: Hide
-  };
+
+const getQuickPickNoResultsVirtualDom = () => {
+  const noResults$1 = noResults();
+  return [{
+    type: Div,
+    className: mergeClassNames(QuickPickItem, QuickPickItemActive$1, QuickPickStatus),
+    childCount: 1
+  }, {
+    type: Div,
+    className: Label,
+    childCount: 1
+  }, text(noResults$1)];
 };
-const selectPick$9 = async item => {
-  // @ts-ignore
-  const id = item.id;
-  if (id.startsWith('ext.')) {
-    return selectPickExtension(item);
+
+const getQuickPickItemsVirtualDom = visibleItems => {
+  if (visibleItems.length === 0) {
+    return getQuickPickNoResultsVirtualDom();
   }
-  return selectPickBuiltin(item);
+  const dom = visibleItems.flatMap(getQuickPickItemVirtualDom);
+  return dom;
 };
 
-const selectPick$8 = async pick => {
-  const {
-    args
-  } = state$3;
-  const resolve = args[2];
-  resolve(pick);
-  return {
-    command: Hide
-  };
+const getQuickPickVirtualDom = visibleItems => {
+  const quickOpen$1 = quickOpen();
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, QuickPick$1),
+    childCount: 2,
+    id: QuickPick,
+    ariaLabel: quickOpen$1
+  }, ...getQuickPickHeaderVirtualDom(), {
+    type: Div,
+    className: QuickPickItems$1,
+    id: QuickPickItems,
+    role: ListBox,
+    ariaActivedescendant: QuickPickItemActive,
+    onWheel: HandleWheel,
+    onPointerDown: HandlePointerDown,
+    childCount: visibleItems.length
+  }, ...getQuickPickItemsVirtualDom(visibleItems)];
 };
 
-const selectPick$7 = item => {
-  const {
-    provider
-  } = state$1;
-  const fn = getSelect(provider);
-  return fn(item);
+const renderItems = newState => {
+  const dom = getQuickPickVirtualDom(newState.visibleItems);
+  return ['Viewlet.setDom2', dom];
 };
 
-const openUri = async uri => {
-  await invoke$1(/* Main.openUri */'Main.openUri', /* uri */uri);
+const renderValue = newState => {
+  return ['Viewlet.setValueByName', QuickPickInput, /* value */newState.value];
 };
 
-const selectPick$6 = async pick => {
-  const description = pick.description;
-  const fileName = pick.label;
-  const workspace = await getWorkspacePath();
-  const absolutePath = `${workspace}/${description}/${fileName}`;
-  await openUri(absolutePath);
-  return {
-    command: Hide
-  };
+const getRenderer = diffType => {
+  switch (diffType) {
+    case RenderValue:
+      return renderValue;
+    case RenderCursorOffset:
+      return renderCursorOffset;
+    case RenderItems:
+      return renderItems;
+    case RenderFocusedIndex:
+      return renderFocusedIndex;
+    case Height:
+      return renderHeight;
+    case RenderFocus:
+      return renderFocus;
+    default:
+      throw new Error('unknown renderer');
+  }
 };
 
-const execute = async (method, ...params) => {
-  // TODO
+const applyRender = (oldState, newState, diffResult) => {
+  const commands = [];
+  const viewModel = createQuickPickViewModel(oldState, newState);
+  for (const item of diffResult) {
+    if (item === Height) {
+      continue;
+    }
+    if (item === RenderFocusedIndex) {
+      continue;
+    }
+    const fn = getRenderer(item);
+    commands.push(fn(viewModel));
+  }
+  return commands;
 };
 
-const selectPick$5 = async item => {
-  const rowIndex = Number.parseInt(item.label);
-  const position = {
-    rowIndex,
-    columnIndex: 5
-  };
-  await execute(/* EditorSetCursor.editorSetCursor */'TODO', /* position */position);
-  // TODO put cursor onto that line
-  return {
-    command: Hide
-  };
+const render2 = (uid, diffResult) => {
+  const {
+    oldState,
+    newState
+  } = get(uid);
+  if (oldState === newState) {
+    return [];
+  }
+  set(uid, newState, newState);
+  const commands = applyRender(oldState, newState, diffResult);
+  return commands;
 };
 
-const selectPick$4 = async item => {
-  // Command.execute(/* openView */ 549, /* viewName */ item.label)
-  return {
-    command: Hide
-  };
+const renderEventListeners = () => {
+  return [{
+    name: HandlePointerDown,
+    params: ['handleClickAt', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleWheel,
+    params: ['handleWheel', 'event.deltaMode', 'event.deltaY'],
+    passive: true
+  }, {
+    name: HandleBlur,
+    params: ['handleBlur']
+  }, {
+    name: HandleBeforeInput,
+    params: ['handleBeforeInput']
+  }, {
+    name: HandleInput,
+    params: ['handleInput', 'event.target.value']
+  }, {
+    name: HandleFocus,
+    params: ['handleFocus']
+  }];
 };
 
-const openWorkspaceFolder = uri => {
-  return invoke$1(/* Workspace.setPath */'Workspace.setPath', /* path */uri);
+const selectCurrentIndex = state => {
+  return selectIndex(state, state.focusedIndex);
 };
 
-// TODO selectPick should be independent of show/hide
-const selectPick$3 = async pick => {
-  const path = `${pick.description}/${pick.label}`;
-  await openWorkspaceFolder(path);
-  return {
-    command: Hide
-  };
+const findLabelIndex = (items, label) => {
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].label === label) {
+      return i;
+    }
+  }
+  return -1;
 };
 
-const selectPick$2 = async item => {
-  return {
-    command: Hide
-  };
+const selectItem = async (state, label) => {
+  string(label);
+  const index = findLabelIndex(state.items, label);
+  if (index === -1) {
+    return state;
+  }
+  return selectIndex(state, index);
 };
 
-const selectPick$1 = async item => {
-  // Command.execute(/* openView */ 549, /* viewName */ item.label)
-  return {
-    command: Hide
+const wrapCommand = fn => {
+  const wrapped = async (uid, ...args) => {
+    const {
+      newState
+    } = get(uid);
+    const newerState = await fn(newState, ...args);
+    if (newState === newerState) {
+      return;
+    }
+    const latest = get(uid);
+    set(uid, latest.oldState, newerState);
   };
+  return wrapped;
 };
 
-const selectPick = async item => {
-  return {
-    command: Hide
-  };
+const commandMap = {
+  'QuickPick.addMenuEntries': add,
+  'QuickPick.close': close,
+  'QuickPick.create2': create,
+  'QuickPick.diff2': diff2,
+  'QuickPick.dispose': dispose,
+  'QuickPick.focusFirst': wrapCommand(focusFirst),
+  'QuickPick.focusIndex': wrapCommand(focusIndex),
+  'QuickPick.focusLast': wrapCommand(focusLast),
+  'QuickPick.focusNext': wrapCommand(focusNext),
+  'QuickPick.focusPrevious': wrapCommand(focusPrevious),
+  'QuickPick.getCommandIds': getCommandIds,
+  'QuickPick.getKeyBindings': getKeyBindings,
+  'QuickPick.handleBeforeInput': wrapCommand(handleBeforeInput),
+  'QuickPick.handleBlur': wrapCommand(handleBlur),
+  'QuickPick.handleClickAt': wrapCommand(handleClickAt),
+  'QuickPick.handleFocus': wrapCommand(handleFocus),
+  'QuickPick.handleInput': wrapCommand(handleInput),
+  'QuickPick.handleWheel': wrapCommand(handleWheel),
+  'QuickPick.loadContent': wrapCommand(loadContent),
+  'QuickPick.render2': render2,
+  'QuickPick.renderEventListeners': renderEventListeners,
+  'QuickPick.selectCurrentIndex': wrapCommand(selectCurrentIndex),
+  'QuickPick.selectIndex': wrapCommand(selectIndex),
+  'QuickPick.selectItem': wrapCommand(selectItem),
+  'QuickPick.setDeltaY': wrapCommand(setDeltaY),
+  'QuickPick.setValue': wrapCommand(setValue)
 };
 
-const selectPicks = [selectPick$a, selectPick$7, selectPick$9, selectPick$8, selectPick$7, selectPick$6, selectPick$5, selectPick$4, selectPick$3, selectPick$2, selectPick$1, selectPick];
-const getPicks = [getPicks$b, getPicks$8, getPicks$a, getPicks$9, getPicks$8, getPicks$7, getPicks$6, getPicks$5, getPicks$4, getPicks$3, getPicks$2, getPicks$1];
-
 const Memfs = 'memfs';
 const Html = 'html';
 const Fetch = 'fetch';
@@ -3066,8 +3038,6 @@ const searchModules = {
 
 const listen = async () => {
   register(searchModules);
-  registerSelect(selectPicks);
-  registerGetPick(getPicks);
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });