@lvce-editor/extension-search-view 7.8.0 → 7.10.0

package/dist/extensionSearchViewWorkerMain.js

@@ -145,7 +145,6 @@ const walkValue = (value, transferrables, isTransferrable) => {
     for (const property of Object.values(value)) {
       walkValue(property, transferrables, isTransferrable);
     }
-    return;
   }
 };
 const getTransferrables = value => {
@@ -299,7 +298,14 @@ class IpcError extends VError {
       const cause = new Error(message);
       // @ts-ignore
       cause.code = code;
-      cause.stack = stack;
+      if (stack) {
+        Object.defineProperty(cause, 'stack', {
+          configurable: true,
+          enumerable: false,
+          value: stack,
+          writable: true
+        });
+      }
       super(cause, betterMessage);
     } else {
       super(betterMessage);
@@ -586,7 +592,10 @@ const constructError = (message, type, name) => {
   if (ErrorConstructor === Error) {
     const error = new Error(message);
     if (name && name !== 'VError') {
-      error.name = name;
+      Object.defineProperty(error, 'name', {
+        configurable: true,
+        value: name
+      });
     }
     return error;
   }
@@ -603,8 +612,10 @@ const getCurrentStack = () => {
   const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
   return currentStack;
 };
-const getNewLineIndex = (string, startIndex = undefined) => {
-  return string.indexOf(NewLine, startIndex);
+const getNewLineIndex = (string, startIndex) => {
+  {
+    return string.indexOf(NewLine);
+  }
 };
 const getParentStack = error => {
   let parentStack = error.stack || error.data || error.message || '';
@@ -615,55 +626,91 @@ const getParentStack = error => {
 };
 const MethodNotFound = -32601;
 const Custom = -32001;
+const setStack = (error, stack) => {
+  const descriptor = Object.getOwnPropertyDescriptor(error, 'stack');
+  if (descriptor) {
+    if (!descriptor.configurable && !descriptor.writable) {
+      return;
+    }
+    if (!descriptor.configurable && descriptor.writable) {
+      error.stack = stack;
+      return;
+    }
+  }
+  Object.defineProperty(error, 'stack', {
+    configurable: true,
+    value: stack,
+    writable: true
+  });
+};
+const restoreExistingError = (error, currentStack) => {
+  if (typeof error.stack === 'string') {
+    setStack(error, `${error.stack}${NewLine}${currentStack}`);
+  }
+  return error;
+};
+const restoreMethodNotFoundError = (error, currentStack) => {
+  const restoredError = new JsonRpcError(error.message);
+  const parentStack = getParentStack(error);
+  setStack(restoredError, `${parentStack}${NewLine}${currentStack}`);
+  return restoredError;
+};
+const restoreStackFromData = (restoredError, error, currentStack) => {
+  if (error.data.stack && error.data.type && error.message) {
+    setStack(restoredError, `${error.data.type}: ${error.message}${NewLine}${error.data.stack}${NewLine}${currentStack}`);
+    return;
+  }
+  if (error.data.stack) {
+    setStack(restoredError, error.data.stack);
+  }
+};
+const applyDataProperties = (restoredError, error) => {
+  restoreStackFromData(restoredError, error, getCurrentStack());
+  if (error.data.codeFrame) {
+    // @ts-ignore
+    restoredError.codeFrame = error.data.codeFrame;
+  }
+  if (error.data.code) {
+    // @ts-ignore
+    restoredError.code = error.data.code;
+  }
+  if (error.data.type) {
+    // @ts-ignore
+    restoredError.name = error.data.type;
+  }
+};
+const applyDirectProperties = (restoredError, error) => {
+  if (error.stack) {
+    const lowerStack = restoredError.stack || '';
+    const indexNewLine = getNewLineIndex(lowerStack);
+    const parentStack = getParentStack(error);
+    // @ts-ignore
+    setStack(restoredError, `${parentStack}${lowerStack.slice(indexNewLine)}`);
+  }
+  if (error.codeFrame) {
+    // @ts-ignore
+    restoredError.codeFrame = error.codeFrame;
+  }
+};
+const restoreMessageError = (error, _currentStack) => {
+  const restoredError = constructError(error.message, error.type, error.name);
+  if (error.data) {
+    applyDataProperties(restoredError, error);
+  } else {
+    applyDirectProperties(restoredError, error);
+  }
+  return restoredError;
+};
 const restoreJsonRpcError = error => {
   const currentStack = getCurrentStack();
   if (error && error instanceof Error) {
-    if (typeof error.stack === 'string') {
-      error.stack = error.stack + NewLine + currentStack;
-    }
-    return error;
+    return restoreExistingError(error, currentStack);
   }
   if (error && error.code && error.code === MethodNotFound) {
-    const restoredError = new JsonRpcError(error.message);
-    const parentStack = getParentStack(error);
-    restoredError.stack = parentStack + NewLine + currentStack;
-    return restoredError;
+    return restoreMethodNotFoundError(error, currentStack);
   }
   if (error && error.message) {
-    const restoredError = constructError(error.message, error.type, error.name);
-    if (error.data) {
-      if (error.data.stack && error.data.type && error.message) {
-        restoredError.stack = error.data.type + ': ' + error.message + NewLine + error.data.stack + NewLine + currentStack;
-      } else if (error.data.stack) {
-        restoredError.stack = error.data.stack;
-      }
-      if (error.data.codeFrame) {
-        // @ts-ignore
-        restoredError.codeFrame = error.data.codeFrame;
-      }
-      if (error.data.code) {
-        // @ts-ignore
-        restoredError.code = error.data.code;
-      }
-      if (error.data.type) {
-        // @ts-ignore
-        restoredError.name = error.data.type;
-      }
-    } else {
-      if (error.stack) {
-        const lowerStack = restoredError.stack || '';
-        // @ts-ignore
-        const indexNewLine = getNewLineIndex(lowerStack);
-        const parentStack = getParentStack(error);
-        // @ts-ignore
-        restoredError.stack = parentStack + lowerStack.slice(indexNewLine);
-      }
-      if (error.codeFrame) {
-        // @ts-ignore
-        restoredError.codeFrame = error.codeFrame;
-      }
-    }
-    return restoredError;
+    return restoreMessageError(error);
   }
   if (typeof error === 'string') {
     return new Error(`JsonRpc Error: ${error}`);
@@ -747,7 +794,7 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(id, errorProperty);
 };
-const create$9 = (message, result) => {
+const create$a = (message, result) => {
   return {
     id: message.id,
     jsonrpc: Two$1,
@@ -756,7 +803,7 @@ const create$9 = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$9(message, resultProperty);
+  return create$a(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
@@ -850,7 +897,7 @@ const handleJsonRpcMessage = async (...args) => {
 
 const Two = '2.0';
 
-const create$8 = (method, params) => {
+const create$9 = (method, params) => {
   return {
     jsonrpc: Two,
     method,
@@ -858,7 +905,7 @@ const create$8 = (method, params) => {
   };
 };
 
-const create$7 = (id, method, params) => {
+const create$8 = (id, method, params) => {
   const message = {
     id,
     jsonrpc: Two,
@@ -869,12 +916,12 @@ const create$7 = (id, method, params) => {
 };
 
 let id$1 = 0;
-const create$6 = () => {
+const create$7 = () => {
   return ++id$1;
 };
 
 const registerPromise = map => {
-  const id = create$6();
+  const id = create$7();
   const {
     promise,
     resolve
@@ -891,7 +938,7 @@ const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer)
     id,
     promise
   } = registerPromise(callbacks);
-  const message = create$7(id, method, params);
+  const message = create$8(id, method, params);
   if (useSendAndTransfer && ipc.sendAndTransfer) {
     ipc.sendAndTransfer(message);
   } else {
@@ -927,7 +974,7 @@ const createRpc = ipc => {
      * @deprecated
      */
     send(method, ...params) {
-      const message = create$8(method, params);
+      const message = create$9(method, params);
       ipc.send(message);
     }
   };
@@ -967,7 +1014,7 @@ const listen$1 = async (module, options) => {
   return ipc;
 };
 
-const create$5 = async ({
+const create$6 = async ({
   commandMap,
   isMessagePortOpen = true,
   messagePort
@@ -985,7 +1032,7 @@ const create$5 = async ({
   return rpc;
 };
 
-const create$4 = async ({
+const create$5 = async ({
   commandMap,
   isMessagePortOpen,
   send
@@ -995,14 +1042,14 @@ const create$4 = async ({
     port2
   } = new MessageChannel();
   await send(port1);
-  return create$5({
+  return create$6({
     commandMap,
     isMessagePortOpen,
     messagePort: port2
   });
 };
 
-const create$3 = async ({
+const create$4 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -1045,7 +1092,7 @@ const remove = id => {
 };
 
 /* eslint-disable  @typescript-eslint/explicit-function-return-type */
-const create$2 = rpcId => {
+const create$3 = rpcId => {
   return {
     async dispose() {
       const rpc = get$1(rpcId);
@@ -1083,14 +1130,175 @@ const create$2 = rpcId => {
 
 const None$3 = 'none';
 
+const Audio = 0;
 const Button$2 = 1;
+const Col = 2;
+const ColGroup = 3;
 const Div = 4;
+const H1 = 5;
 const Input$1 = 6;
+const Kbd = 7;
 const Span = 8;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
 const Text = 12;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+const I = 16;
 const Img = 17;
+const Root = 0;
+const Ins = 20;
+const Del = 21;
+const H2 = 22;
+const H3 = 23;
+const H4 = 24;
+const H5 = 25;
+const H6 = 26;
+const Article = 27;
+const Aside = 28;
+const Footer = 29;
+const Header = 30;
+const Nav = 40;
+const Section = 41;
+const Search = 42;
+const Dd = 43;
+const Dl = 44;
+const Figcaption = 45;
+const Figure = 46;
+const Hr = 47;
+const Li = 48;
+const Ol = 49;
+const P = 50;
+const Pre = 51;
+const A = 53;
+const Abbr = 54;
+const Br = 55;
+const Cite = 56;
+const Data = 57;
+const Time = 58;
+const Tfoot = 59;
+const Ul = 60;
+const Video = 61;
+const TextArea = 62;
+const Select = 63;
+const Option$1 = 64;
+const Code = 65;
+const Label = 66;
+const Dt = 67;
+const Iframe = 68;
+const Main = 69;
+const Strong = 70;
+const Em = 71;
+const Style = 72;
+const Html = 73;
+const Head = 74;
+const Title = 75;
+const Meta = 76;
+const Canvas = 77;
+const Form = 78;
+const BlockQuote = 79;
+const Quote = 80;
+const Circle = 81;
+const Defs = 82;
+const Ellipse = 83;
+const G = 84;
+const Line = 85;
+const Path = 86;
+const Polygon = 87;
+const Polyline = 88;
+const Rect = 89;
+const Svg = 90;
+const Use = 91;
 const Reference = 100;
 
+const VirtualDomElements = {
+  __proto__: null,
+  A,
+  Abbr,
+  Article,
+  Aside,
+  Audio,
+  BlockQuote,
+  Br,
+  Button: Button$2,
+  Canvas,
+  Circle,
+  Cite,
+  Code,
+  Col,
+  ColGroup,
+  Data,
+  Dd,
+  Defs,
+  Del,
+  Div,
+  Dl,
+  Dt,
+  Ellipse,
+  Em,
+  Figcaption,
+  Figure,
+  Footer,
+  Form,
+  G,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Head,
+  Header,
+  Hr,
+  Html,
+  I,
+  Iframe,
+  Img,
+  Input: Input$1,
+  Ins,
+  Kbd,
+  Label,
+  Li,
+  Line,
+  Main,
+  Meta,
+  Nav,
+  Ol,
+  Option: Option$1,
+  P,
+  Path,
+  Polygon,
+  Polyline,
+  Pre,
+  Quote,
+  Rect,
+  Reference,
+  Root,
+  Search,
+  Section,
+  Select,
+  Span,
+  Strong,
+  Style,
+  Svg,
+  TBody,
+  THead,
+  Table,
+  Td,
+  Text,
+  TextArea,
+  Tfoot,
+  Th,
+  Time,
+  Title,
+  Tr,
+  Ul,
+  Use,
+  Video
+};
+
 const Button$1 = 'event.button';
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
@@ -1119,7 +1327,7 @@ const SetPatches = 'Viewlet.setPatches';
 const {
   invoke: invoke$2,
   set: set$4
-} = create$2(ExtensionHostWorker);
+} = create$3(ExtensionHostWorker);
 
 const ExtensionHost = {
   __proto__: null,
@@ -1129,13 +1337,13 @@ const ExtensionHost = {
 
 const {
   set: set$3
-} = create$2(ExtensionManagementWorker);
+} = create$3(ExtensionManagementWorker);
 
 const {
   invoke: invoke$1,
   invokeAndTransfer,
   set: set$2
-} = create$2(RendererWorker);
+} = create$3(RendererWorker);
 const showContextMenu2 = async (uid, menuId, x, y, args) => {
   number(uid);
   number(menuId);
@@ -1167,6 +1375,9 @@ const sendMessagePortToExtensionManagementWorker = async (port, rpcId) => {
 const openUri$1 = async (uri, focus, options) => {
   await invoke$1('Main.openUri', uri, focus, options);
 };
+const showErrorDialog = async errorInfo => {
+  await invoke$1('ErrorHandling.showErrorDialog', errorInfo);
+};
 const uninstallExtension = async id => {
   return invoke$1('ExtensionManagement.uninstall', id);
 };
@@ -1178,11 +1389,68 @@ const toCommandId = key => {
   const dotIndex = key.indexOf('.');
   return key.slice(dotIndex + 1);
 };
-const create$1 = () => {
+const create$2 = () => {
+  const commandQueues = new Map();
+  const generations = Object.create(null);
   const states = Object.create(null);
   const commandMapRef = {};
+  const getGeneration = uid => generations[uid] || 0;
+  const isCurrentGeneration = (uid, generation) => {
+    return states[uid] !== undefined && getGeneration(uid) === generation;
+  };
+  const updateState = (uid, generation, fallbackState, updater) => {
+    if (!isCurrentGeneration(uid, generation)) {
+      return Promise.resolve(fallbackState);
+    }
+    const current = states[uid];
+    const updatedState = updater(current.newState);
+    if (updatedState !== current.newState) {
+      states[uid] = {
+        newState: updatedState,
+        oldState: current.oldState,
+        scheduledState: updatedState
+      };
+    }
+    return Promise.resolve(updatedState);
+  };
+  const createAsyncCommandContext = (uid, generation) => {
+    let latestState = states[uid].newState;
+    return {
+      getState: () => {
+        if (isCurrentGeneration(uid, generation)) {
+          latestState = states[uid].newState;
+        }
+        return latestState;
+      },
+      updateState: async updater => {
+        latestState = await updateState(uid, generation, latestState, updater);
+        return latestState;
+      }
+    };
+  };
+  const enqueueCommand = async (uid, command) => {
+    const previous = commandQueues.get(uid) || Promise.resolve();
+    const run = async () => {
+      try {
+        await previous;
+      } catch {
+        // The previous caller receives its error; later commands must still run.
+      }
+      await command();
+    };
+    const current = run();
+    commandQueues.set(uid, current);
+    try {
+      await current;
+    } finally {
+      if (commandQueues.get(uid) === current) {
+        commandQueues.delete(uid);
+      }
+    }
+  };
   return {
     clear() {
+      commandQueues.clear();
       for (const key of Object.keys(states)) {
         delete states[key];
       }
@@ -1202,6 +1470,7 @@ const create$1 = () => {
       return diffResult;
     },
     dispose(uid) {
+      commandQueues.delete(uid);
       delete states[uid];
     },
     get(uid) {
@@ -1219,14 +1488,27 @@ const create$1 = () => {
       Object.assign(commandMapRef, commandMap);
     },
     set(uid, oldState, newState, scheduledState) {
+      const current = states[uid];
+      if (!current || oldState === newState && newState !== current.newState) {
+        generations[uid] = getGeneration(uid) + 1;
+      }
       states[uid] = {
         newState,
         oldState,
         scheduledState: scheduledState ?? newState
       };
     },
+    wrapAsyncCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
+        const context = createAsyncCommandContext(uid, generation);
+        await fn(context, ...args);
+      };
+      return wrapped;
+    },
     wrapCommand(fn) {
       const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
         const {
           newState,
           oldState
@@ -1235,6 +1517,9 @@ const create$1 = () => {
         if (oldState === newerState || newState === newerState) {
           return;
         }
+        if (!isCurrentGeneration(uid, generation)) {
+          return;
+        }
         const latestOld = states[uid];
         const latestNew = {
           ...latestOld.newState,
@@ -1259,6 +1544,7 @@ const create$1 = () => {
     },
     wrapLoadContent(fn) {
       const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
         const {
           newState,
           oldState
@@ -1273,6 +1559,11 @@ const create$1 = () => {
             error
           };
         }
+        if (!isCurrentGeneration(uid, generation)) {
+          return {
+            error
+          };
+        }
         const latestOld = states[uid];
         const latestNew = {
           ...latestOld.newState,
@@ -1288,6 +1579,51 @@ const create$1 = () => {
         };
       };
       return wrapped;
+    },
+    wrapSerialAsyncCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        await enqueueCommand(uid, async () => {
+          if (!states[uid]) {
+            return;
+          }
+          const generation = getGeneration(uid);
+          const context = createAsyncCommandContext(uid, generation);
+          await fn(context, ...args);
+        });
+      };
+      return wrapped;
+    },
+    wrapSerialCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        await enqueueCommand(uid, async () => {
+          if (!states[uid]) {
+            return;
+          }
+          const generation = getGeneration(uid);
+          const {
+            newState,
+            oldState
+          } = states[uid];
+          const newerState = await fn(newState, ...args);
+          if (oldState === newerState || newState === newerState) {
+            return;
+          }
+          if (!isCurrentGeneration(uid, generation)) {
+            return;
+          }
+          const latestOld = states[uid];
+          const latestNew = {
+            ...latestOld.newState,
+            ...newerState
+          };
+          states[uid] = {
+            newState: latestNew,
+            oldState: latestOld.oldState,
+            scheduledState: latestNew
+          };
+        });
+      };
+      return wrapped;
     }
   };
 };
@@ -1327,16 +1663,56 @@ const handleError = async (error, notify = true, prefix = '') => {
   console.error(error);
 };
 
+const loadStates = new Map();
+const tokenGenerator = {
+  value: 0
+};
+const cancel = uid => {
+  const loadState = loadStates.get(uid);
+  if (!loadState) {
+    return;
+  }
+  loadStates.delete(uid);
+  loadState.resolve();
+};
+const create$1 = uid => {
+  cancel(uid);
+  const {
+    promise,
+    resolve
+  } = Promise.withResolvers();
+  const token = ++tokenGenerator.value;
+  loadStates.set(uid, {
+    promise,
+    resolve,
+    token
+  });
+};
+const finish = (uid, token) => {
+  const loadState = loadStates.get(uid);
+  if (!loadState || loadState.token !== token) {
+    return;
+  }
+  loadStates.delete(uid);
+  loadState.resolve();
+};
+const getToken = uid => {
+  return loadStates.get(uid)?.token;
+};
+const wait = uid => {
+  return loadStates.get(uid)?.promise || Promise.resolve();
+};
+
 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);
+  let result = key;
+  for (const [placeholder, replacement] of Object.entries(placeholders)) {
+    result = result.split(`{${placeholder}}`).join(String(replacement));
+  }
+  return result;
 };
 
 const NoExtensionsFound = 'No extensions found.';
@@ -1362,11 +1738,13 @@ const CopyExtensionId = 'Copy Extension Id';
 const Name = 'Name';
 const Id$1 = 'Id';
 const Description = 'Description';
+const Downloads = 'Downloads';
 const Version = 'Version';
 const Publisher = 'Publisher';
+const Rating = 'Rating';
 const MarketplaceLink = 'Marketplace Link';
 const Category$1 = 'Category';
-const Disabled$2 = 'Disabled';
+const Disabled$3 = 'Disabled';
 const Featured$1 = 'Featured';
 const McpServers$1 = 'MCP Servers';
 const MostPopular$1 = 'Most Popular';
@@ -1394,9 +1772,15 @@ const version = () => {
 const description = () => {
   return i18nString(Description);
 };
+const downloads = () => {
+  return i18nString(Downloads);
+};
 const publisher = () => {
   return i18nString(Publisher);
 };
+const rating = () => {
+  return i18nString(Rating);
+};
 const marketplaceLink = () => {
   return i18nString(MarketplaceLink);
 };
@@ -1461,7 +1845,7 @@ const category = () => {
   return i18nString(Category$1);
 };
 const disabled = () => {
-  return i18nString(Disabled$2);
+  return i18nString(Disabled$3);
 };
 const featured = () => {
   return i18nString(Featured$1);
@@ -1585,7 +1969,7 @@ const getScrollBarY$1 = (delta, finalDelta, size, scrollBarSize) => {
 
 const Installed = '@installed';
 const Enabled$1 = '@enabled';
-const Disabled$1 = '@disabled';
+const Disabled$2 = '@disabled';
 const Builtin = '@builtin';
 const Sort = '@sort';
 const Id = '@id';
@@ -1593,13 +1977,13 @@ const Category = '@category';
 const Outdated = '@outdated';
 const Featured = '@featured';
 const McpServers = '@mcpservers';
-const MostPopular = '@mostpopular';
+const MostPopular = '@most-popular';
 const RecentlyPublished = '@recentlypublished';
 const Recommended = '@recommended';
 const WorkspaceUnsupported = '@workspaceunsupported';
 const Deprecated = '@deprecated';
 
-const RE_PARAM = /@\w+(?::\w+)?/g;
+const RE_PARAM = /@[\w-]+(?::\w+)?/g;
 const deserializeCategory = value => {
   if (value.startsWith(':"') && value.endsWith('"')) {
     return value.slice(2, -1);
@@ -1631,7 +2015,7 @@ const parseValue = value => {
     if (match.startsWith(Enabled$1)) {
       enabled = true;
     }
-    if (match.startsWith(Disabled$1)) {
+    if (match.startsWith(Disabled$2)) {
       disabled = true;
     }
     if (match.startsWith(Builtin)) {
@@ -1755,6 +2139,103 @@ const searchExtensions = async (extensions, value, platform, assetDir) => {
   }
 };
 
+const requestVersions = new Map();
+const requestVersionGenerator = {
+  value: 0
+};
+const getSearchResult = async state => {
+  const {
+    allExtensions,
+    headerHeight,
+    height,
+    itemHeight,
+    minimumSliderSize,
+    searchValue
+  } = state;
+  const value = searchValue.trim();
+  const inputActions = getInputActions(value.length > 0);
+  const items = await searchExtensions(allExtensions, value);
+  if (items.length === 0) {
+    return {
+      deltaY: 0,
+      finalDeltaY: 0,
+      focus: Input,
+      inputActions,
+      items,
+      maxLineY: 0,
+      message: noExtensionsFound(),
+      minLineY: 0,
+      placeholder: searchExtensionsInMarketPlace(),
+      scrollBarHeight: 0
+    };
+  }
+  const total = items.length;
+  const listHeight = getListHeight(total, itemHeight, height - headerHeight);
+  const scrollBarHeight = getScrollBarSize(listHeight, total * itemHeight, minimumSliderSize);
+  const maxLineY = Math.min(getNumberOfVisibleItems$1(listHeight, itemHeight), total);
+  const finalDeltaY = getFinalDeltaY(listHeight, itemHeight, total);
+  const scrollBarY = getScrollBarY$1(0, finalDeltaY, listHeight, scrollBarHeight);
+  return {
+    deltaY: 0,
+    finalDeltaY,
+    focus: state.focus,
+    inputActions,
+    items,
+    maxLineY,
+    message: '',
+    minLineY: 0,
+    placeholder: searchExtensionsInMarketPlace(),
+    scrollBarHeight,
+    scrollBarY
+  };
+};
+const handleChangeWithContext = async (context, update, waitForExtensions = true) => {
+  const {
+    uid
+  } = context.getState();
+  if (waitForExtensions) {
+    await wait(uid);
+  }
+  const requestVersion = ++requestVersionGenerator.value;
+  requestVersions.set(uid, requestVersion);
+  const requestState = {
+    ...context.getState(),
+    ...update,
+    initial: false
+  };
+  try {
+    const result = await getSearchResult(requestState);
+    await context.updateState(state => {
+      if (requestVersions.get(state.uid) !== requestVersion) {
+        return state;
+      }
+      return {
+        ...state,
+        ...update,
+        initial: false,
+        ...result
+      };
+    });
+  } catch (error) {
+    await handleError(error);
+    await context.updateState(state => {
+      if (requestVersions.get(state.uid) !== requestVersion) {
+        return state;
+      }
+      return {
+        ...state,
+        ...update,
+        initial: false,
+        message: error instanceof Error ? error.message : String(error)
+      };
+    });
+  } finally {
+    if (requestVersions.get(uid) === requestVersion) {
+      requestVersions.delete(uid);
+    }
+  }
+};
+
 // TODO debounce
 const handleChange = async (state, update) => {
   const fullNewState = {
@@ -1762,71 +2243,11 @@ const handleChange = async (state, update) => {
     ...update
   };
   try {
-    const {
-      inputSource,
-      searchValue
-    } = fullNewState;
-    const value = searchValue.trim();
-    const hasValue = value.length > 0;
-    const inputActions = getInputActions(hasValue);
-    const {
-      allExtensions,
-      assetDir,
-      headerHeight,
-      height,
-      itemHeight,
-      minimumSliderSize,
-      platform
-    } = state;
-    // TODO cancel ongoing requests
-    // TODO handle errors
-    const items = await searchExtensions(allExtensions, value, platform, assetDir);
-    if (items.length === 0) {
-      return {
-        ...fullNewState,
-        allExtensions,
-        deltaY: 0,
-        finalDeltaY: 0,
-        focus: Input,
-        inputActions,
-        inputSource,
-        items,
-        maxLineY: 0,
-        message: noExtensionsFound(),
-        minLineY: 0,
-        placeholder: searchExtensionsInMarketPlace(),
-        scrollBarHeight: 0,
-        searchValue
-      };
-    }
-    const total = items.length;
-    const availableHeight = height - headerHeight;
-    const listHeight = getListHeight(total, itemHeight, availableHeight);
-    const contentHeight = total * itemHeight;
-    const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, minimumSliderSize);
-    const numberOfVisible = getNumberOfVisibleItems$1(listHeight, itemHeight);
-    const maxLineY = Math.min(numberOfVisible, total);
-    const finalDeltaY = getFinalDeltaY(listHeight, itemHeight, total);
-    const scrollBarY = getScrollBarY$1(0, finalDeltaY, listHeight, scrollBarHeight);
+    const result = await getSearchResult(fullNewState);
     return {
       ...fullNewState,
-      allExtensions,
-      deltaY: 0,
-      finalDeltaY,
-      inputActions,
-      inputSource,
-      items,
-      maxLineY,
-      message: '',
-      minLineY: 0,
-      placeholder: searchExtensionsInMarketPlace(),
-      scrollBarHeight,
-      scrollBarY,
-      searchValue
+      ...result
     };
-
-    // TODO handle out of order responses (a bit complicated)
-    // for now just assume everything comes back in order
   } catch (error) {
     // TODO send error to error worker
     await handleError(error);
@@ -1840,6 +2261,32 @@ const handleChange = async (state, update) => {
 const User = 1;
 const Script = 2;
 
+const getCompletionText = (searchValue, completion, rangeEnd) => {
+  const hasTrailingWhitespace = /\s/.test(searchValue[rangeEnd] || '');
+  return completion.endsWith(':') || hasTrailingWhitespace ? completion : `${completion} `;
+};
+const acceptCompletionWithContext = async (context, label) => {
+  const state = context.getState();
+  const completion = label || state.completionItems[state.completionFocusedIndex]?.label;
+  if (!completion) {
+    return;
+  }
+  const range = getCompletionRange(state.searchValue, state.cursorOffset);
+  if (!range) {
+    return;
+  }
+  const completionText = getCompletionText(state.searchValue, completion, range.end);
+  const searchValue = `${state.searchValue.slice(0, range.start)}${completionText}${state.searchValue.slice(range.end)}`;
+  await handleChangeWithContext(context, {
+    completionFocusedIndex: 0,
+    completionItems: [],
+    cursorOffset: range.start + completionText.length,
+    focus: Input,
+    inputSource: Script,
+    searchValue,
+    suggestOpen: false
+  });
+};
 const acceptCompletion = async (state, label) => {
   const completion = label || state.completionItems[state.completionFocusedIndex]?.label;
   if (!completion) {
@@ -1849,11 +2296,12 @@ const acceptCompletion = async (state, label) => {
   if (!range) {
     return state;
   }
-  const searchValue = `${state.searchValue.slice(0, range.start)}${completion}${state.searchValue.slice(range.end)}`;
+  const completionText = getCompletionText(state.searchValue, completion, range.end);
+  const searchValue = `${state.searchValue.slice(0, range.start)}${completionText}${state.searchValue.slice(range.end)}`;
   return handleChange(state, {
     completionFocusedIndex: 0,
     completionItems: [],
-    cursorOffset: range.start + completion.length,
+    cursorOffset: range.start + completionText.length,
     focus: Input,
     inputSource: Script,
     searchValue,
@@ -1861,9 +2309,8 @@ const acceptCompletion = async (state, label) => {
   });
 };
 
-const clearSearchResults = state => {
-  return handleChange(state, {
-    ...state,
+const clearSearchResultsWithContext = async context => {
+  await handleChangeWithContext(context, {
     completionFocusedIndex: 0,
     completionItems: [],
     cursorOffset: 0,
@@ -1965,9 +2412,10 @@ const {
   getCommandIds,
   registerCommands,
   set: set$1,
+  wrapAsyncCommand,
   wrapCommand,
   wrapGetter
-} = create$1();
+} = create$2();
 
 const create = (id, uri, x, y, width, height, platform, assetDir, parentUid) => {
   const state = {
@@ -2009,6 +2457,7 @@ const create = (id, uri, x, y, width, height, platform, assetDir, parentUid) =>
     x,
     y
   };
+  create$1(id);
   set$1(id, state, state);
 };
 
@@ -2064,6 +2513,7 @@ const disableWorkspace = async (state, _id) => {
 };
 
 const dispose = uid => {
+  cancel(uid);
   dispose$1(uid);
 };
 
@@ -2077,6 +2527,82 @@ const enableWorkspace = async (state, _id) => {
   return state;
 };
 
+const CategorySuggestions = ['@category:"ai"', '@category:"azure"', '@category:"chat"', '@category:"data science"', '@category:"debuggers"', '@category:"education"', '@category:"extension packs"', '@category:"formatters"', '@category:"keymaps"', '@category:"language packs"', '@category:"linters"', '@category:"machine learning"', '@category:"notebooks"', '@category:"other"', '@category:"programming languages"', '@category:"scm providers"', '@category:"snippets"', '@category:"testing"', '@category:"themes"', '@category:"visualization"'];
+
+const getFuzzyHighlights = (label, query) => {
+  const lowerLabel = label.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+  const matchedIndexes = [];
+  let labelIndex = 0;
+  for (const character of lowerQuery) {
+    labelIndex = lowerLabel.indexOf(character, labelIndex);
+    if (labelIndex === -1) {
+      return undefined;
+    }
+    matchedIndexes.push(labelIndex);
+    labelIndex++;
+  }
+  const highlights = [];
+  for (const index of matchedIndexes) {
+    const lastEnd = highlights.at(-1);
+    if (lastEnd === index) {
+      highlights[highlights.length - 1] = index + 1;
+    } else {
+      highlights.push(index, index + 1);
+    }
+  }
+  return highlights;
+};
+
+const Suggestions = ['@builtin', '@category:', '@disabled', '@enabled', '@featured', '@id:', '@installed', '@mcpservers', '@most-popular', '@outdated', '@recentlypublished', '@recommended', '@sort:installs', '@workspaceunsupported'];
+
+const getCompletionItems = (value, cursorOffset) => {
+  const range = getCompletionRange(value, cursorOffset);
+  if (!range) {
+    return [];
+  }
+  const suggestions = range.query.toLowerCase().startsWith('@category:') ? CategorySuggestions : Suggestions;
+  const items = [];
+  for (const label of suggestions) {
+    const highlights = getFuzzyHighlights(label, range.query);
+    if (highlights) {
+      items.push({
+        highlights,
+        label
+      });
+    }
+  }
+  return items;
+};
+
+const handleInputWithContext = async (context, value, inputSource = User, cursorOffset = value.length) => {
+  const completionItems = getCompletionItems(value, cursorOffset);
+  await handleChangeWithContext(context, {
+    completionFocusedIndex: 0,
+    completionItems,
+    cursorOffset,
+    focus: Input,
+    inputSource,
+    searchValue: value,
+    suggestOpen: inputSource === User && completionItems.length > 0
+  });
+};
+
+const addFilter = (searchValue, filter) => {
+  const values = searchValue.trim().split(/\s+/);
+  if (values.includes(filter)) {
+    return searchValue;
+  }
+  return `${searchValue.trim()} ${filter}`.trim();
+};
+const filterByMostPopularWithContext = async context => {
+  const {
+    searchValue
+  } = context.getState();
+  const value = addFilter(searchValue, MostPopular);
+  await handleInputWithContext(context, value, Script);
+};
+
 // TODO optimize this function to return the minimum number
 // of visible items needed, e.g. when not scrolled 5 items with
 // 20px fill 100px but when scrolled 6 items are needed
@@ -2091,31 +2617,31 @@ const getScrollBarY = getScrollBarOffset;
 const focusIndexScrollDown = (state, index, listHeight, itemHeight, itemsLength) => {
   const {
     finalDeltaY,
-    height,
     headerHeight,
+    height,
     scrollBarHeight
   } = state;
-  const newMaxLineY = Math.min(index + 1, itemsLength);
   const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
-  const newMinLineY = Math.max(newMaxLineY - fittingItems, 0);
-  const newDeltaY = itemsLength < fittingItems ? 0 : newMinLineY * itemHeight - listHeight % itemHeight + itemHeight;
+  const newDeltaY = Math.min(Math.max((index + 1) * itemHeight - listHeight, 0), finalDeltaY);
+  const newMinLineY = Math.floor(newDeltaY / itemHeight);
+  const newMaxLineY = Math.min(newMinLineY + fittingItems, itemsLength);
   const scrollBarY = getScrollBarY(newDeltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
   return {
     ...state,
+    deltaY: newDeltaY,
+    focused: true,
     focusedIndex: index,
     listFocusedIndex: index,
-    minLineY: newMinLineY,
     maxLineY: newMaxLineY,
-    focused: true,
-    deltaY: newDeltaY,
+    minLineY: newMinLineY,
     scrollBarY
   };
 };
 const focusIndexScrollUp = (state, index, listHeight, itemHeight, itemsLength) => {
   const {
     finalDeltaY,
-    height,
     headerHeight,
+    height,
     scrollBarHeight
   } = state;
   const newMinLineY = index;
@@ -2125,23 +2651,23 @@ const focusIndexScrollUp = (state, index, listHeight, itemHeight, itemsLength) =
   const scrollBarY = getScrollBarY(newDeltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
   return {
     ...state,
+    deltaY: newDeltaY,
+    focused: true,
     focusedIndex: index,
     listFocusedIndex: index,
-    minLineY: newMinLineY,
     maxLineY: newMaxLineY,
-    focused: true,
-    deltaY: newDeltaY,
+    minLineY: newMinLineY,
     scrollBarY
   };
 };
 const focusIndex = (state, index) => {
   const {
-    itemHeight,
-    minLineY,
-    maxLineY,
     headerHeight,
     height,
-    items
+    itemHeight,
+    items,
+    maxLineY,
+    minLineY
   } = state;
   const itemsLength = items.length;
   if (itemsLength === 0) {
@@ -2151,9 +2677,9 @@ const focusIndex = (state, index) => {
   if (index === -1) {
     return {
       ...state,
+      focused: true,
       focusedIndex: -1,
-      listFocusedIndex: -1,
-      focused: true
+      listFocusedIndex: -1
     };
   }
   const listHeight = height - headerHeight;
@@ -2165,9 +2691,9 @@ const focusIndex = (state, index) => {
   }
   return {
     ...state,
+    focused: true,
     focusedIndex: index,
-    listFocusedIndex: index,
-    focused: true
+    listFocusedIndex: index
   };
 };
 const first = () => {
@@ -2180,7 +2706,7 @@ const next = (items, index) => {
   return (index + 1) % items.length;
 };
 const previous = (items, index) => {
-  return index === 0 ? items.length - 1 : index - 1;
+  return (index === 0 ? items.length : index) - 1;
 };
 const focusFirst = state => {
   const firstIndex = first();
@@ -2237,8 +2763,8 @@ const focusPrevious = state => {
 const focusPreviousPage = state => {
   const {
     focusedIndex,
-    minLineY,
-    maxLineY
+    maxLineY,
+    minLineY
   } = state;
   if (focusedIndex === 0 || focusedIndex === -1) {
     return state;
@@ -2294,7 +2820,7 @@ const getKeyBindings = () => {
     key: DownArrow,
     when: FocusExtensionsInput
   }, {
-    command: 'Extensions.toggleSuggest',
+    command: 'Extensions.openSuggest',
     key: CtrlCmd | Space,
     when: FocusExtensionsInput
   }, {
@@ -2340,19 +2866,45 @@ const getKeyBindings = () => {
   }];
 };
 
+const Disabled$1 = 'disabled';
+const Enabled = 'enabled';
+const Installing = 'installing';
+const NotInstalled = 'not-installed';
+const Uninstalling = 'uninstalling';
+const statuses = [Disabled$1, Enabled, Installing, NotInstalled, Uninstalling];
+const isExtensionStatus = status => {
+  return statuses.includes(status);
+};
+
 const Separator = 1;
 const None$1 = 0;
 const SubMenu = 4;
+const Disabled = 5;
 
-const getMenuEntriesList = () => {
+const nonEnableableStatuses = [Installing, NotInstalled, Uninstalling];
+const getEnablementFlags = (disabled, status) => {
+  if (status && nonEnableableStatuses.includes(status)) {
+    return {
+      disable: Disabled,
+      enable: Disabled
+    };
+  }
+  const isDisabled = status === Disabled$1 || status === undefined && disabled;
+  return {
+    disable: isDisabled ? Disabled : None$1,
+    enable: isDisabled ? None$1 : Disabled
+  };
+};
+const getMenuEntriesList = (builtin, disabled = false, status) => {
+  const enablementFlags = getEnablementFlags(disabled, status);
   return [{
     command: 'SearchExtensions.enable',
-    flags: None$1,
+    flags: enablementFlags.enable,
     id: 'enable',
     label: enable$2()
   }, {
     command: 'SearchExtensions.enableWorkspace',
-    flags: None$1,
+    flags: enablementFlags.enable,
     id: 'enableWorkspace',
     label: enableWorkspace$1()
   }, {
@@ -2362,12 +2914,12 @@ const getMenuEntriesList = () => {
     label: ''
   }, {
     command: 'SearchExtensions.disable',
-    flags: None$1,
+    flags: enablementFlags.disable,
     id: 'disable',
     label: disable$2()
   }, {
     command: 'SearchExtensions.disableWorkspace',
-    flags: None$1,
+    flags: enablementFlags.disable,
     id: 'disableWorkspace',
     label: disableWorkspace$1()
   }, {
@@ -2377,7 +2929,7 @@ const getMenuEntriesList = () => {
     label: ''
   }, {
     command: 'SearchExtensions.installAnotherVersion',
-    flags: None$1,
+    flags: builtin ? Disabled : None$1,
     id: 'installAnotherVersion',
     label: installAnotherVersion$1()
   }, {
@@ -2405,7 +2957,7 @@ const getMenuEntriesFilter = () => {
     id: 'filterByMcpServers',
     label: mcpServers()
   }, {
-    command: 'SearchExtensions.filterByMostPopular',
+    command: 'Extensions.filterByMostPopular',
     flags: None$1,
     id: 'filterByMostPopular',
     label: mostPopular()
@@ -2480,7 +3032,7 @@ const getMenuEntries2 = (state, props) => {
     case ExtensionSearchFilter:
       return getMenuEntriesFilter();
     default:
-      return getMenuEntriesList();
+      return getMenuEntriesList(props.builtin, props.disabled, props.status);
   }
 };
 
@@ -2504,6 +3056,13 @@ const openUri = async uri => {
   return openUri$1(uri);
 };
 
+const selectIndex = (state, index) => {
+  return {
+    ...state,
+    focusedIndex: index
+  };
+};
+
 const handleClick = async (state, index) => {
   const {
     items,
@@ -2520,7 +3079,7 @@ const handleClick = async (state, index) => {
   const extension = items[actualIndex];
   const uri = getExtensionDetailUri(extension.id);
   await openUri(uri);
-  const partialNewState = focusIndex(state, actualIndex);
+  const partialNewState = selectIndex(state, actualIndex);
   const newState = {
     ...partialNewState,
     focus: List$2
@@ -2540,6 +3099,8 @@ const text = data => {
   };
 };
 
+new Set(Object.values(VirtualDomElements));
+
 const SetText = 1;
 const Replace = 2;
 const SetAttribute = 3;
@@ -2777,17 +3338,14 @@ const diffTrees = (oldTree, newTree, patches, path) => {
 };
 
 const removeTrailingNavigationPatches = patches => {
-  // Find the last non-navigation patch
-  let lastNonNavigationIndex = -1;
-  for (let i = patches.length - 1; i >= 0; i--) {
-    const patch = patches[i];
+  while (patches.length > 0) {
+    const patch = patches.at(-1);
     if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
-      lastNonNavigationIndex = i;
       break;
     }
+    patches.pop();
   }
-  // Return patches up to and including the last non-navigation patch
-  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+  return patches;
 };
 
 const diffTree = (oldNodes, newNodes) => {
@@ -2819,6 +3377,9 @@ const handleClickAt = async (state, button, eventX, eventY, name = '') => {
   if (name.startsWith('@')) {
     return handleCompletionPointerDown(state, name);
   }
+  if (name) {
+    return state;
+  }
   if (button !== LeftClick) {
     return state;
   }
@@ -2884,21 +3445,14 @@ const handleContextMenu = async (state, button, eventX, eventY) => {
     return state;
   }
   await show2(uid, ManageExtension, eventX, eventY, {
-    menuId: ManageExtension
+    builtin: items[index]?.builtin === true,
+    disabled: items[index]?.disabled === true,
+    menuId: ManageExtension,
+    status: items[index]?.status
   });
   return state;
 };
 
-const Disabled = 'disabled';
-const Enabled = 'enabled';
-const Installing = 'installing';
-const NotInstalled = 'not-installed';
-const Uninstalling = 'uninstalling';
-const statuses = [Disabled, Enabled, Installing, NotInstalled, Uninstalling];
-const isExtensionStatus = status => {
-  return statuses.includes(status);
-};
-
 const updateStatus = (extension, id, status, builtin) => {
   if (extension.id !== id) {
     return extension;
@@ -2906,7 +3460,7 @@ const updateStatus = (extension, id, status, builtin) => {
   return {
     ...extension,
     builtin: builtin ?? extension.builtin,
-    disabled: status === Disabled,
+    disabled: status === Disabled$1,
     status
   };
 };
@@ -2923,7 +3477,7 @@ const setExtensionStatus = (state, id, status, builtin) => {
 
 const handleDisable = async (state, id) => {
   const error = await disableExtension(id);
-  return error ? state : setExtensionStatus(state, id, Disabled);
+  return error ? state : setExtensionStatus(state, id, Disabled$1);
 };
 
 const handleDisableWorkspace = (state, id) => {
@@ -2950,64 +3504,6 @@ const handleHeaderContextMenu = async state => {
   return state;
 };
 
-const getFuzzyHighlights = (label, query) => {
-  const lowerLabel = label.toLowerCase();
-  const lowerQuery = query.toLowerCase();
-  const matchedIndexes = [];
-  let labelIndex = 0;
-  for (const character of lowerQuery) {
-    labelIndex = lowerLabel.indexOf(character, labelIndex);
-    if (labelIndex === -1) {
-      return undefined;
-    }
-    matchedIndexes.push(labelIndex);
-    labelIndex++;
-  }
-  const highlights = [];
-  for (const index of matchedIndexes) {
-    const lastEnd = highlights.at(-1);
-    if (lastEnd === index) {
-      highlights[highlights.length - 1] = index + 1;
-    } else {
-      highlights.push(index, index + 1);
-    }
-  }
-  return highlights;
-};
-
-const Suggestions = ['@builtin', '@category:', '@disabled', '@enabled', '@featured', '@id:', '@installed', '@mcpservers', '@mostpopular', '@outdated', '@recentlypublished', '@recommended', '@sort:installs', '@workspaceunsupported'];
-
-const getCompletionItems = (value, cursorOffset) => {
-  const range = getCompletionRange(value, cursorOffset);
-  if (!range) {
-    return [];
-  }
-  const items = [];
-  for (const label of Suggestions) {
-    const highlights = getFuzzyHighlights(label, range.query);
-    if (highlights) {
-      items.push({
-        highlights,
-        label
-      });
-    }
-  }
-  return items;
-};
-
-const handleInput = async (state, value, inputSource = User, cursorOffset = value.length) => {
-  const completionItems = getCompletionItems(value, cursorOffset);
-  return handleChange(state, {
-    completionFocusedIndex: 0,
-    completionItems,
-    cursorOffset,
-    focus: Input,
-    inputSource,
-    searchValue: value,
-    suggestOpen: inputSource === User && completionItems.length > 0
-  });
-};
-
 const handleInputFocus = state => {
   return {
     ...state,
@@ -3173,14 +3669,22 @@ const handleSettingsButtonClick = async (state, index) => {
   const menuY = itemY + itemHeight - 10; // Position at the bottom of the extension item
 
   await show2(uid, ManageExtension, menuX, menuY, {
-    menuId: ManageExtension
+    builtin: items[actualIndex].builtin === true,
+    disabled: items[actualIndex].disabled === true,
+    menuId: ManageExtension,
+    status: items[actualIndex].status
   });
   return state;
 };
 
 const handleUninstall = async (state, id) => {
-  await uninstallExtension(id);
-  return setExtensionStatus(state, id, NotInstalled);
+  try {
+    await uninstallExtension(id);
+    return setExtensionStatus(state, id, NotInstalled);
+  } catch (error) {
+    await showErrorDialog(error);
+    return state;
+  }
 };
 
 const handleWheel = (state, deltaMode, deltaY) => {
@@ -3195,7 +3699,7 @@ const sendMessagePortToExtensionHostWorker = async port => {
 
 const createExtensionHostWorkerRpc = async () => {
   try {
-    const rpc = await create$4({
+    const rpc = await create$5({
       commandMap: {},
       send: sendMessagePortToExtensionHostWorker
     });
@@ -3217,7 +3721,7 @@ const initializeExtensionHostWorker = async () => {
 
 const createExtensionManagementWorkerRpc = async () => {
   try {
-    const rpc = await create$4({
+    const rpc = await create$5({
       commandMap: {},
       send: port => sendMessagePortToExtensionManagementWorker(port, 0)
     });
@@ -3330,6 +3834,28 @@ const getExtensionIcon = (extension, platform, assetDir) => {
   return getRemoteUrl(extension, platform, assetDir);
 };
 
+const getDownloadCountValue = extension => {
+  return extension?.downloadCount ?? extension?.downloads ?? extension?.marketplace?.downloadCount ?? extension?.marketplace?.downloads ?? extension?.packageJSON?.downloadCount ?? extension?.packageJSON?.downloads;
+};
+const getDownloadCount = extension => {
+  const downloadCount = getDownloadCountValue(extension);
+  if (typeof downloadCount !== 'number') {
+    return 'n/a';
+  }
+  return downloadCount.toLocaleString();
+};
+
+const getRatingValue = extension => {
+  return extension?.rating ?? extension?.averageRating ?? extension?.marketplace?.rating ?? extension?.marketplace?.averageRating ?? extension?.packageJSON?.rating ?? extension?.packageJSON?.averageRating;
+};
+const getRating = extension => {
+  const rating = getRatingValue(extension);
+  if (typeof rating !== 'number') {
+    return 'n/a';
+  }
+  return rating.toFixed(1);
+};
+
 const getBuiltin = extension => {
   return extension?.builtin === true;
 };
@@ -3406,10 +3932,12 @@ const normalizeExtension = (extension, platform, assetDir) => {
     categories: getCategories(extension),
     description: getDescription(extension),
     disabled: getDisabled(extension),
+    downloadCount: getDownloadCount(extension),
     icon: getIcon(extension, platform, assetDir),
     id: getId$1(extension),
     name: getName(extension),
     publisher: getPublisher(extension),
+    rating: getRating(extension),
     size: getSize(extension),
     status: getStatus(extension),
     updatedDate: getUpdatedDate(extension),
@@ -3443,31 +3971,48 @@ const restoreState = savedState => {
   };
 };
 
-const loadContent = async (state, savedState) => {
+const loadContentWithContext = async (context, savedState) => {
   const {
-    assetDir,
-    platform,
-    width
-  } = state;
-  const {
-    deltaY,
-    searchValue
-  } = restoreState(savedState);
-  // TODO just get local extensions on demand (not when query string is already different)
-  const allExtensions = await getAllExtensions(platform);
-  const size = getViewletSize(width);
-  const normalized = normalizeExtensions(allExtensions, platform, assetDir);
-  const scrollSensitivity = getIsFirefox() ? 2.5 : 1;
-  const updatedState = await handleInput({
-    ...state,
-    allExtensions: normalized,
-    deltaY,
-    initial: false,
-    inputSource: Script,
-    scrollSensitivity,
-    size
-  }, searchValue, Script);
-  return updatedState;
+    uid
+  } = context.getState();
+  const loadToken = getToken(uid);
+  try {
+    const initialState = context.getState();
+    const {
+      assetDir,
+      platform,
+      width
+    } = initialState;
+    const {
+      deltaY,
+      searchValue: restoredSearchValue
+    } = restoreState(savedState);
+    const size = getViewletSize(width);
+    const scrollSensitivity = getIsFirefox() ? 2.5 : 1;
+    await context.updateState(state => {
+      if (!state.initial) {
+        return state;
+      }
+      return {
+        ...state,
+        deltaY,
+        initial: false,
+        inputSource: Script,
+        scrollSensitivity,
+        searchValue: restoredSearchValue,
+        size
+      };
+    });
+    const allExtensions = await getAllExtensions(platform);
+    const normalized = normalizeExtensions(allExtensions, platform, assetDir);
+    await context.updateState(state => ({
+      ...state,
+      allExtensions: normalized
+    }));
+    await handleChangeWithContext(context, {}, false);
+  } finally {
+    finish(uid, loadToken);
+  }
 };
 
 const openSuggest = state => {
@@ -3514,6 +4059,10 @@ const getCss = state => {
   flex-shrink: 0;
 }
 
+.ExtensionListItemDisabled:not(.ExtensionActive) {
+  background: color-mix(in srgb, var(--SideBarBackground, rgb(30, 35, 36)) 95%, black);
+}
+
 .Extensions .ListItems {
   display: flex;
   flex-direction: column;
@@ -3527,6 +4076,24 @@ const getCss = state => {
   z-index: 1;
 }
 
+.ExtensionListItemFooter {
+  justify-content: flex-end;
+  padding-right: 2px;
+}
+
+.ExtensionListItemAuthorName {
+  flex: 1;
+}
+
+.ExtensionActions {
+  display: flex;
+  gap: 6px;
+}
+
+.ExtensionActionButton {
+  padding: 0 5px;
+}
+
 .ExtensionSearchCompletionWidget {
   position: absolute;
   left: ${completionLeft}px;
@@ -3641,9 +4208,14 @@ const ExtensionListItemActionInstall = 'ExtensionListItemActionInstall';
 const ExtensionListItemAuthorName = 'ExtensionListItemAuthorName';
 const ExtensionListItemDescription = 'ExtensionListItemDescription';
 const ExtensionListItemDetail = 'ExtensionListItemDetail';
+const ExtensionListItemDisabled = 'ExtensionListItemDisabled';
+const ExtensionListItemDownloadCount = 'ExtensionListItemDownloadCount';
 const ExtensionListItemFooter = 'ExtensionListItemFooter';
 const ExtensionListItemIcon = 'ExtensionListItemIcon';
+const ExtensionListItemMetadata = 'ExtensionListItemMetadata';
 const ExtensionListItemName = 'ExtensionListItemName';
+const ExtensionListItemRating = 'ExtensionListItemRating';
+const ExtensionListItemStatistic = 'ExtensionListItemStatistic';
 const ExtensionSearchCompletionHighlight = 'ExtensionSearchCompletionHighlight';
 const ExtensionSearchCompletionItem = 'ExtensionSearchCompletionItem';
 const ExtensionSearchCompletionItemFocused = 'ExtensionSearchCompletionItemFocused';
@@ -3733,6 +4305,8 @@ const getCompletionWidgetVirtualDom = (items, focusedIndex) => {
   }, ...items.flatMap((item, index) => getCompletionItemVirtualDom(item, index, focusedIndex))];
 };
 
+const Focusable = 0;
+
 const disabledClassName = mergeClassNames(SearchFieldButton, SearchFieldButtonDisabled);
 const getClassName$1 = enabled => {
   if (enabled) {
@@ -3751,7 +4325,7 @@ const getSearchFieldButtonVirtualDom = button => {
     childCount: 1,
     className: getClassName$1(enabled),
     onClick,
-    tabIndex: 0,
+    tabIndex: Focusable,
     title,
     type: Button$2
   }, {
@@ -3761,14 +4335,15 @@ const getSearchFieldButtonVirtualDom = button => {
   }];
 };
 
+const searchFieldNode = {
+  childCount: 2,
+  className: SearchField,
+  role: None,
+  type: Div
+};
 const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '', onBlur = '', inputProperties = {}) => {
   // TODO avoid mutation
-  const dom = [{
-    childCount: 2,
-    className: SearchField,
-    role: None,
-    type: Div
-  }, {
+  const dom = [searchFieldNode, {
     autocapitalize: 'off',
     autocomplete: 'off',
     autocorrect: 'off',
@@ -3870,7 +4445,7 @@ const getExtensionActions = (builtin, disabled, status) => {
   if (status === Uninstalling) {
     return builtin ? [] : [uninstalling];
   }
-  const enableOrDisable = status === Disabled || status === undefined && disabled ? enable : disable;
+  const enableOrDisable = status === Disabled$1 || status === undefined && disabled ? enable : disable;
   return builtin ? [enableOrDisable] : [enableOrDisable, uninstall];
 };
 
@@ -3894,6 +4469,25 @@ const getExtensionActionsVirtualDom = (id, builtin, disabled, status) => {
   }, ...actions.flatMap(action => getActionVirtualDom$1(action, id))];
 };
 
+const extensionListItemMetadataNode = {
+  childCount: 2,
+  className: ExtensionListItemMetadata,
+  type: Div
+};
+const getStatisticVirtualDom = (label, value, className) => {
+  const accessibleLabel = `${label}: ${value}`;
+  return [{
+    ariaLabel: accessibleLabel,
+    childCount: 1,
+    className: mergeClassNames(ExtensionListItemStatistic, className),
+    title: accessibleLabel,
+    type: Span
+  }, text(value)];
+};
+const getExtensionStatisticsVirtualDom = (downloadCount, rating$1) => {
+  return [extensionListItemMetadataNode, ...getStatisticVirtualDom(downloads(), downloadCount, ExtensionListItemDownloadCount), ...getStatisticVirtualDom(rating(), rating$1, ExtensionListItemRating)];
+};
+
 const listItemDetail = {
   childCount: 3,
   className: ExtensionListItemDetail,
@@ -3910,7 +4504,7 @@ const listItemDescription = {
   type: Div
 };
 const listItemFooter = {
-  childCount: 2,
+  childCount: 3,
   className: ExtensionListItemFooter,
   type: Div
 };
@@ -3919,11 +4513,8 @@ const listItemAuthorName = {
   className: ExtensionListItemAuthorName,
   type: Div
 };
-const getClassName = focused => {
-  if (focused) {
-    return mergeClassNames(ExtensionListItem, ExtensionActive);
-  }
-  return ExtensionListItem;
+const getClassName = (focused, disabled) => {
+  return mergeClassNames(ExtensionListItem, focused ? ExtensionActive : '', disabled ? ExtensionListItemDisabled : '');
 };
 const getId = focused => {
   if (focused) {
@@ -3936,12 +4527,14 @@ const getExtensionListItemVirtualDom = extension => {
     builtin = false,
     description,
     disabled = false,
+    downloadCount = 'n/a',
     focused,
     icon,
     id,
     name,
     posInSet,
     publisher,
+    rating = 'n/a',
     setSize,
     status
   } = extension;
@@ -3951,7 +4544,7 @@ const getExtensionListItemVirtualDom = extension => {
     ariaRoleDescription: Extension,
     ariaSetSize: setSize,
     childCount: 2,
-    className: getClassName(focused),
+    className: getClassName(focused, disabled),
     id: getId(focused),
     role: ListItem,
     type: Div
@@ -3961,7 +4554,7 @@ const getExtensionListItemVirtualDom = extension => {
     role: None,
     src: icon,
     type: Img
-  }, listItemDetail, listItemName, text(name), listItemDescription, text(description), listItemFooter, listItemAuthorName, text(publisher), ...actionsDom];
+  }, listItemDetail, listItemName, text(name), listItemDescription, text(description), listItemFooter, listItemAuthorName, text(publisher), ...getExtensionStatisticsVirtualDom(downloadCount, rating), ...actionsDom];
   return dom;
 };
 
@@ -3981,7 +4574,7 @@ const getExtensionsListVirtualDom = (visibleExtensions, focusOutline) => {
     onTouchStart: HandleTouchStart,
     onWheel: HandleWheel,
     role: List$1,
-    tabIndex: 0,
+    tabIndex: Focusable,
     type: Div
   }, ...visibleExtensions.flatMap(getExtensionListItemVirtualDom)];
   return dom;
@@ -3993,14 +4586,20 @@ const getExtensionsVirtualDom = (visibleExtensions, focusOutline) => {
   return dom;
 };
 
+const noExtensionsFoundNode = {
+  childCount: 1,
+  className: NoExtensionsFoundMessage,
+  type: Div
+};
 const getNoExtensionsFoundVirtualDom = message => {
-  return [{
-    childCount: 1,
-    className: NoExtensionsFoundMessage,
-    type: Div
-  }, text(message)];
+  return [noExtensionsFoundNode, text(message)];
 };
 
+const scrollBarThumbNode = {
+  childCount: 0,
+  className: ScrollBarThumb,
+  type: Div
+};
 const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
   const shouldShowScrollbar = scrollBarHeight > 0;
   if (!shouldShowScrollbar) {
@@ -4012,11 +4611,7 @@ const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
     onPointerDown: HandleScrollBarPointerDown,
     // TODO support pointercapture event
     type: Div
-  }, {
-    childCount: 0,
-    className: ScrollBarThumb,
-    type: Div
-  }];
+  }, scrollBarThumbNode];
 };
 
 const getVisibleItem = (item, setSize, itemHeight, minLineY, relative, i, focusedIndex) => {
@@ -4025,16 +4620,19 @@ const getVisibleItem = (item, setSize, itemHeight, minLineY, relative, i, focuse
     builtin,
     description,
     disabled,
+    downloadCount,
     icon,
     id,
     name,
     publisher,
+    rating,
     status
   } = item;
   return {
     builtin,
     description,
     disabled,
+    downloadCount,
     focused: i === focusedIndex,
     icon,
     id,
@@ -4042,6 +4640,7 @@ const getVisibleItem = (item, setSize, itemHeight, minLineY, relative, i, focuse
     name,
     posInSet: i + 1,
     publisher,
+    rating,
     setSize,
     status,
     top: (i - minLineY) * itemHeight - relative
@@ -4082,6 +4681,7 @@ const getExtensionsViewVirtualDom = state => {
   const {
     completionFocusedIndex,
     completionItems,
+    focus,
     focusedIndex,
     inputActions,
     message,
@@ -4090,7 +4690,7 @@ const getExtensionsViewVirtualDom = state => {
     scrollBarY,
     suggestOpen
   } = state;
-  const focusOutline = focusedIndex === -1 && state.focus === List$2;
+  const focusOutline = focusedIndex === -1 && focus === List$2;
   return [{
     ariaBusy: false,
     ariaLive: 'polite',
@@ -4145,10 +4745,7 @@ const renderScrollBar = newState => {
   const roundedScrollBarY = Math.round(scrollBarY);
   const heightString = px(scrollBarHeight);
   const translateString = position(0, roundedScrollBarY);
-  let className = ScrollBarThumb;
-  if (newState.scrollBarActive) {
-    className += ' ' + ScrollBarThumbActive;
-  }
+  const className = mergeClassNames(ScrollBarThumb, newState.scrollBarActive ? ScrollBarThumbActive : '');
   return [/* method */SetScrollBar, translateString, heightString, className];
 };
 
@@ -4167,7 +4764,7 @@ const titleFilters = [{
   value: Enabled$1
 }, {
   label: disabled,
-  value: Disabled$1
+  value: Disabled$2
 }, {
   label: builtIn,
   value: Builtin
@@ -4439,13 +5036,6 @@ const scrollDown = state => {
   return setDeltaY(state, newDeltaY);
 };
 
-const selectIndex = (state, index) => {
-  return {
-    ...state,
-    focusedIndex: index
-  };
-};
-
 const selectNextCompletion = state => {
   if (!state.suggestOpen || state.completionItems.length === 0) {
     return state;
@@ -4473,8 +5063,8 @@ const toggleSuggest = state => {
 const commandMap = {
   'Extensions.copyExtensionId': wrapCommand(copyExtensionId),
   'Extensions.copyExtensionInfo': wrapCommand(copyExtensionInfo),
-  'SearchExtensions.acceptCompletion': wrapCommand(acceptCompletion),
-  'SearchExtensions.clearSearchResults': wrapCommand(clearSearchResults),
+  'SearchExtensions.acceptCompletion': wrapAsyncCommand(acceptCompletionWithContext),
+  'SearchExtensions.clearSearchResults': wrapAsyncCommand(clearSearchResultsWithContext),
   'SearchExtensions.closeSuggest': wrapCommand(closeSuggest),
   'SearchExtensions.copyExtensionId': wrapCommand(copyExtensionId),
   'SearchExtensions.copyExtensionInfo': wrapCommand(copyExtensionInfo),
@@ -4485,6 +5075,7 @@ const commandMap = {
   'SearchExtensions.dispose': dispose,
   'SearchExtensions.enable': wrapCommand(enable$1),
   'SearchExtensions.enableWorkspace': wrapCommand(enableWorkspace),
+  'SearchExtensions.filterByMostPopular': wrapAsyncCommand(filterByMostPopularWithContext),
   'SearchExtensions.focusFirst': wrapCommand(focusFirst),
   'SearchExtensions.focusIndex': wrapCommand(focusIndex),
   'SearchExtensions.focusLast': wrapCommand(focusLast),
@@ -4512,7 +5103,7 @@ const commandMap = {
   'SearchExtensions.handleEnableWorkspace': wrapCommand(handleEnableWorkspace),
   'SearchExtensions.handleFocus': wrapCommand(handleFocus),
   'SearchExtensions.handleHeaderContextMenu': wrapCommand(handleHeaderContextMenu),
-  'SearchExtensions.handleInput': wrapCommand(handleInput),
+  'SearchExtensions.handleInput': wrapAsyncCommand(handleInputWithContext),
   'SearchExtensions.handleInputFocus': wrapCommand(handleInputFocus),
   'SearchExtensions.handleInstall': wrapCommand(handleInstall),
   'SearchExtensions.handleScrollBarCaptureLost': wrapCommand(handleScrollBarCaptureLost),
@@ -4524,7 +5115,7 @@ const commandMap = {
   'SearchExtensions.handleWheel': wrapCommand(handleWheel),
   'SearchExtensions.initialize': initialize,
   'SearchExtensions.installAnotherVersion': wrapCommand(installAnotherVersion),
-  'SearchExtensions.loadContent': wrapCommand(loadContent),
+  'SearchExtensions.loadContent': wrapAsyncCommand(loadContentWithContext),
   'SearchExtensions.openSuggest': wrapCommand(openSuggest),
   'SearchExtensions.render3': render3,
   'SearchExtensions.renderActions': renderActions,
@@ -4545,7 +5136,7 @@ const commandMap = {
 
 const listen = async () => {
   registerCommands(commandMap);
-  const rpc = await create$3({
+  const rpc = await create$4({
     commandMap: commandMap
   });
   set$2(rpc);