Plugins dialog: as-you-type search with fuzzy match + highlighting (#14611 )

Update search button icons and styles
Revise button labels and styling for search options to improve UI consistency.
2026-07-09 02:16:35 +03:00 · 2026-07-07 19:38:31 +08:00 · 2026-07-07 16:28:48 +08:00 · 2026-07-07 13:08:48 +08:00 · 2026-07-07 12:13:33 +08:00 · 2026-07-06 18:14:26 +08:00
15 changed files with 1108 additions and 128 deletions
--- a/resources/web/dialog/PluginsDialog/index.html
+++ b/resources/web/dialog/PluginsDialog/index.html
@@ -5,6 +5,8 @@
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Plugins</title>
  <link rel="stylesheet" href="./styles.css" />
+  <link rel="stylesheet" href="./plugin-sort.css" />
+  <link rel="stylesheet" href="./plugin-search.css" />
  <link rel="stylesheet" type="text/css" href="../../include/global.css" />
  <link rel="stylesheet" type="text/css" href="../css/common.css" />
  <link rel="stylesheet" type="text/css" href="../css/theme.css" />
@@ -14,10 +16,33 @@
  <script type="text/javascript" src="../js/globalapi.js"></script>
  <script type="text/javascript" src="../js/common.js"></script>
  <script src="./index.js"></script>
+  <script src="./plugin-sort.js"></script>
+  <script src="./plugin-search.js"></script>
 </head>
 <body onLoad="OnInit()">
  <div class="app">
    <div class="toolbar">
+      <div id="pluginSearch" class="plugin-search">
+        <span class="plugin-search-icon" aria-hidden="true">
+          <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4">
+            <circle cx="6.5" cy="6.5" r="4.5" />
+            <line x1="10" y1="10" x2="14" y2="14" />
+          </svg>
+        </span>
+        <input id="plugin_search_input" class="plugin-search-input" type="text"
+          placeholder="Search plugins" autocomplete="off" spellcheck="false" aria-label="Search plugins" />
+        <button id="plugin_search_clear" class="plugin-search-clear" type="button" title="Clear" aria-label="Clear search">
+          <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor"
+            stroke-width="1.6" stroke-linecap="round" aria-hidden="true">
+            <line x1="5" y1="5" x2="11" y2="11" />
+            <line x1="11" y1="5" x2="5" y2="11" />
+          </svg>
+        </button>
+        <button id="plugin_search_cc" class="plugin-search-toggle" type="button"
+          aria-pressed="false" title="Match case">Aa</button>
+        <button id="plugin_search_w" class="plugin-search-toggle" type="button"
+          aria-pressed="false" title="Match whole word"><span class="plugin-search-underline">ab</span></button>
+      </div>
 <!--        <button id="open_terminal" class="ButtonStyleRegular ButtonTypeChoice left-btn">-->
 <!--            Open Terminal-->
 <!--        </button>-->
@@ -43,9 +68,14 @@
      <section class="pane plugin-list-pane">
        <div class="hdr plugin-cols">
          <span>Activate</span>
-          <span>Name</span>
-          <span>Plugin Version</span>
-          <span>Status</span>
+          <span class="sort-th" data-sort-field="name" role="button" tabindex="0"
+            title="Sort by name">Name<span class="sort-tri" aria-hidden="true"></span></span>
+          <span class="sort-th" data-sort-field="version" role="button" tabindex="0"
+            title="Sort by version">Plugin Version<span class="sort-tri" aria-hidden="true"></span></span>
+          <span class="sort-th" data-sort-field="source" role="button" tabindex="0"
+            title="Sort by source">Source<span class="sort-tri" aria-hidden="true"></span></span>
+          <span class="sort-th" data-sort-field="status" role="button" tabindex="0"
+            title="Sort by status">Status<span class="sort-tri" aria-hidden="true"></span></span>
        </div>
        <div id="pluginList" class="body thin-scroll"></div>
      </section>
--- a/resources/web/dialog/PluginsDialog/index.js
+++ b/resources/web/dialog/PluginsDialog/index.js
@@ -11,6 +11,12 @@ const pluginInstallActions = {
 };

 let expandedPluginIds = new Set();
+
+// why: transient per-search override on top of expandedPluginIds. A search
+//      auto-expands rows whose capabilities match, display-only. This lets a
+//      triangle click during search collapse/reopen such a row without touching
+//      the base (id -> bool).
+let searchExpandOverride = new Map();
 let selectedPluginId = "";
 let contextPluginId = "";
 let activeDetailTab = "plugin-info";
@@ -214,6 +220,10 @@ function HandleStudio(value) {

  if (payload.command === "list_plugins") {
    SetSelectedInstallAction(payload.install_action, false);
+    if (typeof NormalizePluginSort === "function") {
+      pluginSort = NormalizePluginSort(payload.sort_key, payload.sort_order);
+      RenderSortHeaders();
+    }
    ApplyPlugins(payload.data || []);
  } else if (payload.command === "status_message") {
    ShowStatusMessage(String(payload.message || ""), String(payload.level || "info"));
@@ -261,7 +271,6 @@ function ApplyPlugins(plugins) {
  expandedPluginIds = new Set(Array.from(expandedPluginIds).filter((pluginKey) => pluginsById.has(pluginKey)));

  RenderPlugins();
-  SyncPluginListHeaderGutter();
  RenderDetails();
 }

@@ -295,6 +304,27 @@ function SyncPluginListHeaderGutter() {
  listPane.style.setProperty("--plugin-list-scrollbar-width", `${scrollbarWidth}px`);
 }

+// why: paint matched-character ranges as <mark> without an innerHTML build
+// note: if no ranges -> return the plain text node
+function ApplyHighlight(container, text, ranges) {
+  if (!ranges || !ranges.length) {
+    container.appendChild(document.createTextNode(text));
+    return;
+  }
+  let pos = 0;
+  for (const [start, end] of ranges) {
+    if (start > pos)
+      container.appendChild(document.createTextNode(text.slice(pos, start)));
+    const mark = document.createElement("mark");
+    mark.className = "plugin-search-hit";
+    mark.textContent = text.slice(start, end);
+    container.appendChild(mark);
+    pos = end;
+  }
+  if (pos < text.length)
+    container.appendChild(document.createTextNode(text.slice(pos)));
+}
+
 function RenderPlugins() {
  if (!pluginList)
    return;
@@ -306,13 +336,32 @@ function RenderPlugins() {
    empty.className = "empty-state";
    empty.textContent = "No plugins found";
    pluginList.appendChild(empty);
+    SyncPluginListHeaderGutter();
    return;
  }

+  // why: stable filter over the existing C++ sort order - no scoring, no reorder. The empty query
+  //      short-circuits (searching=false), leaving every existing render path untouched.
+  const searching = typeof PluginSearchActive === "function" && PluginSearchActive();
+  let shown = 0;
+
  for (const plugin of pluginsById.values()) {
    const pluginKey = String(plugin.plugin_key || "");
    const capabilities = GetCapabilities(plugin);
-    const isExpanded = expandedPluginIds.has(pluginKey) && capabilities.length > 0;
+    const match = searching ? ComputePluginMatch(plugin) : null;
+    if (searching && !match.matched)
+      continue;
+    shown++;
+
+    // why: transient override wins. Otherwise while searching start collapsed and auto-expand only
+    //      capability matches (the persistent expand state is ignored so unrelated caps don't clutter
+    //      results); when not searching use the persistent state. The base is never written while
+    //      searching, so clearing the search restores exactly what the user had.
+    const open = searchExpandOverride.has(pluginKey)
+      ? searchExpandOverride.get(pluginKey)
+      : (searching ? match.hasCapMatch : expandedPluginIds.has(pluginKey));
+    const isExpanded = open && capabilities.length > 0;
+
    const block = document.createElement("div");
    block.className = "plugin-block";
    block.dataset.pluginKey = pluginKey;
@@ -327,15 +376,31 @@ function RenderPlugins() {
      row.classList.add("selected");

    row.appendChild(CheckCell(row, plugin));
-    row.appendChild(LabelCell(plugin, isExpanded, capabilities.length));
+    row.appendChild(LabelCell(plugin, isExpanded, capabilities.length, match?.nameRanges));
    row.appendChild(VersionCell(plugin));
+    row.appendChild(SourceCell(plugin));
    row.appendChild(StatusCell(plugin));

    block.appendChild(row);
    if (isExpanded)
-      block.appendChild(RenderCapabilityTree(plugin, capabilities));
+      block.appendChild(RenderCapabilityTree(plugin, capabilities, match?.capRanges));
    pluginList.appendChild(block);
  }
+
+  // why: distinct from the size===0 "no plugins" state - here plugins exist but none match the query.
+  if (searching && shown === 0) {
+    const empty = document.createElement("div");
+    empty.className = "empty-state";
+    empty.appendChild(document.createTextNode('No plugins match "'));
+    const term = document.createElement("b");
+    term.textContent = pluginSearch.query;
+    empty.appendChild(term);
+    empty.appendChild(document.createTextNode('"'));
+    pluginList.appendChild(empty);
+  }
+
+  // why: recompute the scrollbar gutter on every render - search and sort re-render via RenderPlugins
+  SyncPluginListHeaderGutter();
 }

 function GetErrorText(plugin) {
@@ -474,7 +539,7 @@ function CheckCell(row, plugin) {
  return checkCell;
 }

-function LabelCell(plugin, isExpanded = false, capabilityCount = 0) {
+function LabelCell(plugin, isExpanded = false, capabilityCount = 0, nameRanges = null) {
  const labelCell = document.createElement("span");
  labelCell.className = "label-cell";

@@ -505,7 +570,7 @@ function LabelCell(plugin, isExpanded = false, capabilityCount = 0) {
  nameWrap.className = "plugin-name-wrap";

  const labelElement = document.createElement(hasCloudLink ? "a" : "span");
-  labelElement.textContent = pluginLabelText;
+  ApplyHighlight(labelElement, pluginLabelText, nameRanges);
  labelElement.className = "plugin-name-text";

  if (hasCloudLink) {
@@ -523,25 +588,38 @@ function LabelCell(plugin, isExpanded = false, capabilityCount = 0) {
    nameWrap.appendChild(countBadge);
  }
  labelCell.appendChild(nameWrap);
-  labelCell.appendChild(SourceBadge(plugin.source));

  return labelCell;
 }

-function RenderCapabilityTree(plugin, capabilities) {
+function SourceCell(plugin) {
+  const cell = document.createElement("span");
+  const normalized = String(plugin.source || "").toLowerCase();
+  const variant = (normalized === "mine" || normalized === "subscribed") ? normalized : "local";
+  cell.className = `source-cell source-${variant}`;
+
+  const sourceLabel = document.createElement("span");
+  sourceLabel.className = "source-label";
+  sourceLabel.textContent = SourceLabel(plugin.source);
+  cell.appendChild(sourceLabel);
+
+  return cell;
+}
+
+function RenderCapabilityTree(plugin, capabilities, capRanges = null) {
  const tree = document.createElement("div");
  tree.className = "capabilities-tree";
  tree.setAttribute("role", "group");
  tree.setAttribute("aria-label", "Capabilities");

  capabilities.forEach((capability, index) => {
-    tree.appendChild(RenderCapabilityRow(plugin, capability, index === capabilities.length - 1));
+    tree.appendChild(RenderCapabilityRow(plugin, capability, index === capabilities.length - 1, capRanges));
  });

  return tree;
 }

-function RenderCapabilityRow(plugin, capability, isLast) {
+function RenderCapabilityRow(plugin, capability, isLast, capRanges = null) {
  const row = document.createElement("div");
  row.className = "capability-row plugin-cols";
  row.classList.toggle("is-last", isLast);
@@ -556,7 +634,8 @@ function RenderCapabilityRow(plugin, capability, isLast) {
  branch.setAttribute("aria-hidden", "true");
  const name = document.createElement("span");
  name.className = "capability-name";
-  name.textContent = String(capability?.name || "") || "-";
+  const capabilityLabel = String(capability?.name || "");
+  ApplyHighlight(name, capabilityLabel || "-", capRanges?.get(capabilityLabel));
  nameCell.appendChild(branch);
  nameCell.appendChild(name);
  row.appendChild(nameCell);
@@ -566,6 +645,11 @@ function RenderCapabilityRow(plugin, capability, isLast) {
  typeCell.textContent = String(capability?.type || "-");
  row.appendChild(typeCell);

+  // why: empty placeholder for the new Source column so the run-action cell stays under Status.
+  const sourceSpacer = document.createElement("span");
+  sourceSpacer.className = "capability-source-cell";
+  row.appendChild(sourceSpacer);
+
  const actionsCell = document.createElement("span");
  actionsCell.className = "capability-actions-cell";
  const capabilityName = String(capability?.name || "");
@@ -898,7 +982,12 @@ function OnPluginListClick(event) {

    const pluginKey = String(block.dataset.pluginKey || "");
    selectedPluginId = pluginKey;
-    if (expandedPluginIds.has(pluginKey))
+    // why: during a search the triangle writes to the transient override (read from the on-screen open
+    //      state), so an auto-expanded row collapses without touching the saved layout. With no search
+    //      active, toggle the persistent base exactly as before.
+    if (typeof PluginSearchActive === "function" && PluginSearchActive())
+      searchExpandOverride.set(pluginKey, !block.classList.contains("expanded"));
+    else if (expandedPluginIds.has(pluginKey))
      expandedPluginIds.delete(pluginKey);
    else
      expandedPluginIds.add(pluginKey);
--- a/resources/web/dialog/PluginsDialog/plugin-search.css
+++ b/resources/web/dialog/PluginsDialog/plugin-search.css
@@ -0,0 +1,138 @@
+.plugin-search {
+  --search-width: 300px;
+  flex: 0 0 auto;
+  width: var(--search-width);
+  /* why: the search bar takes the auto margin (pinned far left); sort + Refresh + Install cluster right. */
+  margin-right: auto;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  /* why: match the compact toolbar buttons (.toolbar .ButtonTypeChoice is 26px) so the row aligns. */
+  height: 26px;
+  padding: 0 6px;
+  box-sizing: border-box;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.plugin-search:focus-within {
+  border-color: var(--main-color);
+  box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.25);
+}
+
+.plugin-search-icon {
+  display: inline-flex;
+  color: var(--muted);
+}
+
+.plugin-search-input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: var(--text);
+  font: inherit;
+}
+
+.plugin-search-input::placeholder {
+  color: var(--muted);
+}
+
+/* why: compact squarish toggles - min-width keeps single-char W from collapsing while two-char Cc
+   grows just enough to fit; tight horizontal padding keeps them from reading as wide pills. */
+.plugin-search-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 1px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+/* why: set the clear x apart from the Cc/W pair while keeping the pair itself tight - margins on the
+   toggles only, so the icon-to-text gap is left as-is. clear+toggle = Cc, toggle+toggle = W. */
+.plugin-search-clear + .plugin-search-toggle {
+  margin-left: 4px;
+}
+.plugin-search-toggle + .plugin-search-toggle {
+  margin-left: -1px;
+}
+
+/* why: subtle round clear affordance - a small muted disc, not a square button. The x is an inline SVG
+   (not a text glyph) so it centers pixel-perfectly regardless of the platform font. JS flips its
+   visibility (not display) so its reserved slot never reflows Cc/W. */
+.plugin-search-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: var(--muted);
+  cursor: pointer;
+  visibility: hidden;
+  background: rgba(127, 127, 127, 0.20);
+}
+
+.plugin-search-clear svg {
+  display: block;
+}
+
+.plugin-search-clear:hover {
+  color: var(--text);
+  background: rgba(127, 127, 127, 0.45);
+}
+
+.plugin-search-toggle:hover {
+  color: var(--text);
+  background: var(--row-hover);
+}
+
+.plugin-search-toggle.on {
+  color: var(--button-fg-light, #fff);
+  background: var(--main-color);
+  border-color: var(--main-color-hover);
+}
+
+/* "ab" over a bracket drawn by ::after box draws it */
+.plugin-search-underline {
+  position: relative;
+  display: inline-block;
+  padding-bottom: 2px;
+}
+.plugin-search-underline::after {
+  content: "";
+  position: absolute;
+  /* why: ticks stick out past the outer edges of "a"/"b" on each side. */
+  left: -1px;
+  right: -1px;
+  bottom: 0;
+  /* why: short ticks + bottom rule, tucked near the baseline. */
+  height: 2px;
+  border: 1px solid currentColor;
+  border-top: 0;
+  /* why: soften the two joints where the ticks meet the bottom rule. */
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+/* why: reuse the themed warn tokens so matched-char marks track light and dark automatically.
+   note: no padding/margin/border - a highlight must not change text width, else rows reflow. */
+mark.plugin-search-hit {
+  border-radius: 2px;
+  background: var(--plugin-status-warn-bg);
+  color: var(--plugin-status-warn);
+}
--- a/resources/web/dialog/PluginsDialog/plugin-search.js
+++ b/resources/web/dialog/PluginsDialog/plugin-search.js
@@ -0,0 +1,156 @@
+const pluginSearch = { query: "", caseSensitive: false, wholeWord: false };
+
+function PluginSearchActive() {
+  return pluginSearch.query.length > 0;
+}
+
+// --- matcher: fold per-character on the fly so matched offsets stay in ORIGINAL coordinates ---
+// why: highlighting marks slices of the original string; a separate folded string would desync offsets.
+function FoldChar(ch) {
+  return ch.normalize("NFD").replace(/\p{Diacritic}/gu, ""); // accents always folded (both Cc states)
+}
+function Norm(ch, caseSensitive) {
+  const folded = FoldChar(ch);
+  return caseSensitive ? folded : folded.toLowerCase(); // Cc controls case only
+}
+function EscapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function MatchText(text, query) {
+  if (!query)
+    return [];
+  return pluginSearch.wholeWord ? WholeWordRanges(text, query) : FuzzyRanges(text, query);
+}
+
+// Fuzzy: ordered subsequence. Builds ranges in original coordinates, merging adjacent runs on the fly.
+function FuzzyRanges(text, query) {
+  const caseSensitive = pluginSearch.caseSensitive;
+  const needle = Array.from(query).map((ch) => Norm(ch, caseSensitive)).join("");
+  const ranges = [];
+  let qi = 0;
+  for (let i = 0; i < text.length && qi < needle.length; i++) {
+    if (Norm(text[i], caseSensitive) === needle[qi]) {
+      const last = ranges[ranges.length - 1];
+      if (last && last[1] === i)
+        last[1] = i + 1;
+      else
+        ranges.push([i, i + 1]);
+      qi++;
+    }
+  }
+  return qi === needle.length ? ranges : null;
+}
+
+// Whole word: literal \b-bounded match that bypasses fuzzy; Cc still applies. The per-char fold keeps the
+// haystack length-aligned to the original text, so regex indices map straight back to original offsets.
+// note: one-to-many folds (ligatures, eszett) shift offsets by a char; rare in plugin names, cosmetic only.
+function WholeWordRanges(text, query) {
+  const caseSensitive = pluginSearch.caseSensitive;
+  const haystack = Array.from(text).map((ch) => Norm(ch, caseSensitive)).join("");
+  const needle = Array.from(query).map((ch) => Norm(ch, caseSensitive)).join("");
+  if (!needle)
+    return null;
+  const re = new RegExp(`\\b${EscapeRegExp(needle)}\\b`, "g");
+  const ranges = [];
+  let match;
+  // why: needle is non-empty, so \b-bounded matches are never zero-length - no empty-match guard needed.
+  while ((match = re.exec(haystack)) !== null)
+    ranges.push([match.index, match.index + match[0].length]);
+  return ranges.length > 0 ? ranges : null;
+}
+
+// Per-plugin evaluator consumed by RenderPlugins. The name text mirrors LabelCell's pluginLabelText so
+// highlight offsets line up with what is rendered. Capability names exist for loaded plugins only.
+function ComputePluginMatch(plugin) {
+  const name = plugin.label || plugin.name || plugin.plugin_id || "";
+  const nameRanges = MatchText(name, pluginSearch.query);
+  const capabilities = Array.isArray(plugin?.capabilities) ? plugin.capabilities : [];
+  const capRanges = new Map();
+  for (const capability of capabilities) {
+    const key = String(capability?.name || "");
+    const ranges = MatchText(key, pluginSearch.query);
+    if (ranges)
+      capRanges.set(key, ranges);
+  }
+  return {
+    matched: !!nameRanges || capRanges.size > 0,
+    nameRanges,
+    capRanges,
+    hasCapMatch: capRanges.size > 0,
+  };
+}
+
+// --- widget wiring ---
+let pluginSearchInput = null;
+let pluginSearchClear = null;
+let pluginSearchCc = null;
+let pluginSearchW = null;
+
+function InitPluginSearch() {
+  pluginSearchInput = document.getElementById("plugin_search_input");
+  pluginSearchClear = document.getElementById("plugin_search_clear");
+  pluginSearchCc = document.getElementById("plugin_search_cc");
+  pluginSearchW = document.getElementById("plugin_search_w");
+  if (!pluginSearchInput)
+    return;
+
+  // why: common.js installs a document-level onkeydown that cancels the default action of every key
+  //      (returnValue=false) to block webview shortcuts; on the way up it also swallows typing. Stop the
+  //      field's keydowns from bubbling to it so the input stays editable, leaving the global guard intact.
+  pluginSearchInput.addEventListener("keydown", (event) => event.stopPropagation());
+
+  pluginSearchInput.addEventListener("input", OnPluginSearchInput);
+  pluginSearchClear?.addEventListener("click", ClearPluginSearch);
+  pluginSearchCc?.addEventListener("click", () => TogglePluginSearchFlag(pluginSearchCc, "caseSensitive"));
+  pluginSearchW?.addEventListener("click", () => TogglePluginSearchFlag(pluginSearchW, "wholeWord"));
+  SyncPluginSearchClear();
+}
+
+function OnPluginSearchInput() {
+  pluginSearch.query = pluginSearchInput.value;
+  // why: emptying the box by editing (not just the x) also ends the search - drop the transient vetoes.
+  if (!pluginSearch.query)
+    ClearSearchExpandOverride();
+  SyncPluginSearchClear();
+  RenderPluginsIfReady();
+}
+
+function ClearPluginSearch() {
+  pluginSearch.query = "";
+  if (pluginSearchInput)
+    pluginSearchInput.value = "";
+  ClearSearchExpandOverride();
+  SyncPluginSearchClear();
+  RenderPluginsIfReady();
+  pluginSearchInput?.focus();
+}
+
+function TogglePluginSearchFlag(button, key) {
+  pluginSearch[key] = !pluginSearch[key];
+  button.classList.toggle("on", pluginSearch[key]);
+  button.setAttribute("aria-pressed", String(pluginSearch[key]));
+  RenderPluginsIfReady();
+}
+
+// why: toggle visibility (not display / the hidden attribute) so the x keeps its reserved slot and
+//      showing or hiding it never reflows the Cc / W buttons.
+function SyncPluginSearchClear() {
+  if (pluginSearchClear)
+    pluginSearchClear.style.visibility = pluginSearch.query.length ? "visible" : "hidden";
+}
+
+// why: searchExpandOverride lives in index.js; guard so this module stays loadable on its own.
+function ClearSearchExpandOverride() {
+  if (typeof searchExpandOverride !== "undefined")
+    searchExpandOverride.clear();
+}
+
+function RenderPluginsIfReady() {
+  if (typeof RenderPlugins === "function")
+    RenderPlugins();
+}
+
+// why: guarded so the module can be loaded in headless syntax checks; mirrors plugin-sort.js.
+if (typeof document !== "undefined")
+  document.addEventListener("DOMContentLoaded", InitPluginSearch);
--- a/resources/web/dialog/PluginsDialog/plugin-sort.css
+++ b/resources/web/dialog/PluginsDialog/plugin-sort.css
@@ -0,0 +1,42 @@
+/* why: sort affordance lives on the list column headers, not a toolbar dropdown. */
+
+.hdr .sort-th {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.hdr .sort-th .sort-tri {
+  width: 0;
+  height: 0;
+  flex: none;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  display: none;
+}
+
+/* faint up-triangle hint on hover, only while the column is not the active sort */
+.hdr .sort-th:hover .sort-tri {
+  display: block;
+  border-bottom: 5px solid var(--muted);
+}
+
+/* active column wins over the hover hint (same specificity, declared later) */
+.hdr .sort-th[data-sort="asc"] .sort-tri {
+  display: block;
+  border-bottom: 5px solid var(--text);
+  border-top: 0;
+}
+
+.hdr .sort-th[data-sort="desc"] .sort-tri {
+  display: block;
+  border-top: 5px solid var(--text);
+  border-bottom: 0;
+}
+
+.hdr .sort-th[data-sort="asc"],
+.hdr .sort-th[data-sort="desc"] {
+  color: var(--text);
+}
--- a/resources/web/dialog/PluginsDialog/plugin-sort.js
+++ b/resources/web/dialog/PluginsDialog/plugin-sort.js
@@ -0,0 +1,67 @@
+// why: C++ owns ordering; this file only sends and reflects sort state.
+
+const DEFAULT_PLUGIN_SORT = { key: "none", order: "asc" };
+// note: SORT_FIELDS are the clickable columns. "none" is the baseline/cleared state, not a field -
+//   it is special-cased in NormalizePluginSort and produced by CyclePluginSort's third click.
+const SORT_FIELDS = new Set(["status", "name", "source", "version"]);
+let pluginSort = { ...DEFAULT_PLUGIN_SORT };
+
+// why: C++ returns canonical sort state; guard stale or malformed values before reflecting them.
+function NormalizePluginSort(sortKey, sortOrder) {
+  const key = String(sortKey || "");
+  return {
+    key: key === "none" ? "none" : (SORT_FIELDS.has(key) ? key : DEFAULT_PLUGIN_SORT.key),
+    order: sortOrder === "desc" ? "desc" : DEFAULT_PLUGIN_SORT.order,
+  };
+}
+
+function RequestPluginSort(sortKey, sortOrder) {
+  pluginSort = NormalizePluginSort(sortKey, sortOrder);
+  RenderSortHeaders();
+
+  if (typeof SendMessage === "function")
+    SendMessage("set_plugin_sort", {
+      sort_key: pluginSort.key,
+      sort_order: pluginSort.order,
+    });
+}
+
+// why: one click per column cycles asc -> desc -> clear; setting any column clears the previous
+//   one for free because C++ (and pluginSort) only ever hold a single key.
+function CyclePluginSort(field) {
+  if (!SORT_FIELDS.has(field))
+    return;
+  if (pluginSort.key !== field)
+    RequestPluginSort(field, "asc");
+  else if (pluginSort.order === "asc")
+    RequestPluginSort(field, "desc");
+  else
+    RequestPluginSort("none", "asc"); // third click: back to baseline
+}
+
+// why: paints the sort indicator for headers
+// e.g., when user clicks triangle to change sort order, or change to sort by a new different field
+function RenderSortHeaders() {
+  document.querySelectorAll(".hdr .sort-th").forEach((th) => {
+    // "" | "asc" | "desc" - renders the triangle via plugin-sort.css [data-sort=...].
+    th.dataset.sort = th.dataset.sortField === pluginSort.key ? pluginSort.order : "";
+  });
+}
+
+function InitSortHeaders() {
+  document.querySelectorAll(".hdr .sort-th").forEach((th) => {
+    th.addEventListener("click", () => CyclePluginSort(th.dataset.sortField));
+    // note: role="button" cells need Enter/Space to match the old dropdown's keyboard access.
+    th.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        CyclePluginSort(th.dataset.sortField);
+      }
+    });
+  });
+  RenderSortHeaders(); // paint the initial state (baseline = no triangle)
+}
+
+// why: guarded so the module can be loaded in headless syntax checks.
+if (typeof document !== "undefined")
+  document.addEventListener("DOMContentLoaded", InitSortHeaders);
--- a/resources/web/dialog/PluginsDialog/styles.css
+++ b/resources/web/dialog/PluginsDialog/styles.css
@@ -187,7 +187,27 @@ body {
 }

 .plugin-cols {
-  grid-template-columns: 70px minmax(0, 2.8fr) minmax(120px, 0.9fr) minmax(140px, 1fr);
+  grid-template-columns: 70px minmax(0, 2.4fr) minmax(110px, 0.85fr) minmax(96px, 0.7fr) minmax(130px, 0.95fr);
+}
+
+/* Source is its own (sortable) column, shown as colored text (mirrors .status-cell), not a chip. */
+.source-cell {
+  display: flex;
+  align-items: center;
+}
+
+.source-cell.source-mine {
+  color: var(--plugin-source-mine-text);
+  font-weight: 600;
+}
+
+.source-cell.source-subscribed {
+  color: var(--plugin-source-subscribed-text);
+  font-weight: 600;
+}
+
+.source-cell.source-local {
+  color: var(--plugin-source-neutral-text);
 }

 /* Center the "Activate" header over the centered checkbox in each row. */
@@ -835,11 +855,6 @@ body {
  white-space: nowrap;
 }

-/* In a list row, sit at the right edge of the Name column (the name fills the rest). */
-.label-cell .plugin-source-badge {
-  margin-right: 4px;
-}
-
 .plugin-source-badge.source-local {
  background: var(--plugin-source-neutral-bg);
  color: var(--plugin-source-neutral-text);
--- a/src/slic3r/CMakeLists.txt
+++ b/src/slic3r/CMakeLists.txt
@@ -109,6 +109,9 @@ set(SLIC3R_GUI_SOURCES
    GUI/Downloader.hpp
    GUI/DownloadProgressDialog.cpp
    GUI/DownloadProgressDialog.hpp
+    GUI/PluginSource.hpp
+    GUI/PluginSort.hpp
+    GUI/PluginStatus.hpp
    GUI/PluginPickerDialog.cpp
    GUI/PluginPickerDialog.hpp
    GUI/PluginsDialog.cpp
--- a/src/slic3r/GUI/PluginSort.hpp
+++ b/src/slic3r/GUI/PluginSort.hpp
@@ -0,0 +1,210 @@
+#pragma once
+
+#include "PluginSource.hpp"
+#include "PluginStatus.hpp"
+
+#include "libslic3r/Semver.hpp"
+
+#include <algorithm>
+#include <cctype>
+#include <string>
+#include <string_view>
+#include <vector>
+
+namespace Slic3r::GUI
+{
+    enum class PluginSortKey
+    {
+        Status,
+        Name,
+        Source,
+        Version,
+        // why: neutral "no column selected" state - clearing a header sort returns here and the
+        //   list falls to compare_plugin_base_order only. Header UI reaches it via the asc/desc/clear cycle.
+        None
+    };
+
+    enum class PluginSortOrder
+    {
+        Asc,
+        Desc
+    };
+
+    inline std::string to_string(PluginSortKey sort_key)
+    {
+        switch (sort_key)
+        {
+        case PluginSortKey::Status: return "status";
+        case PluginSortKey::Name: return "name";
+        case PluginSortKey::Source: return "source";
+        case PluginSortKey::Version: return "version";
+        case PluginSortKey::None: return "none";
+        }
+
+        return "status";
+    }
+
+    inline std::string to_string(PluginSortOrder sort_order)
+    {
+        return sort_order == PluginSortOrder::Desc ? "desc" : "asc";
+    }
+
+    inline PluginSortKey plugin_sort_key_from_string(const std::string& sort_key, PluginSortKey fallback)
+    {
+        if (sort_key == "status")
+            return PluginSortKey::Status;
+        if (sort_key == "name")
+            return PluginSortKey::Name;
+        if (sort_key == "source")
+            return PluginSortKey::Source;
+        if (sort_key == "version")
+            return PluginSortKey::Version;
+        if (sort_key == "none")
+            return PluginSortKey::None;
+        return fallback;
+    }
+
+    inline PluginSortOrder plugin_sort_order_from_string(const std::string& sort_order, PluginSortOrder fallback)
+    {
+        if (sort_order == "asc")
+            return PluginSortOrder::Asc;
+        if (sort_order == "desc")
+            return PluginSortOrder::Desc;
+        return fallback;
+    }
+
+    // Natural, case-insensitive ASCII compare returning -1 / 0 / +1. Digit runs compare by
+    // numeric value; other chars compare lowercased; on a prefix tie the shorter string is less.
+    //   e.g. "item2"  < "item10"   (2 < 10, not '2' > '1')
+    //        "Camera" == "camera"  (case ignored)
+    //        "app"    < "apple"    (prefix is shorter)
+    //        "1"      < "01"       (equal value, fewer leading zeros wins the tie)
+    // note: ASCII only - no locale/Unicode; accented or non-Latin names fall back to byte order.
+    inline int compare_ascii_case_insensitive_natural(const std::string& lhs, const std::string& rhs)
+    {
+        std::size_t li = 0;
+        std::size_t ri = 0;
+
+        while (li < lhs.size() && ri < rhs.size())
+        {
+            const unsigned char lc = static_cast<unsigned char>(lhs[li]);
+            const unsigned char rc = static_cast<unsigned char>(rhs[ri]);
+
+            if (std::isdigit(lc) && std::isdigit(rc))
+            {
+                const std::size_t lhs_digit_begin = li;
+                const std::size_t rhs_digit_begin = ri;
+                while (li < lhs.size() && std::isdigit(static_cast<unsigned char>(lhs[li])))
+                    ++li;
+                while (ri < rhs.size() && std::isdigit(static_cast<unsigned char>(rhs[ri])))
+                    ++ri;
+
+                const std::string_view lhs_run(lhs.data() + lhs_digit_begin, li - lhs_digit_begin);
+                const std::string_view rhs_run(rhs.data() + rhs_digit_begin, ri - rhs_digit_begin);
+                // why: digit runs compare numerically; leading zeros only break exact ties ("1" < "01").
+                const std::string_view lhs_num = lhs_run.substr(std::min(lhs_run.find_first_not_of('0'), lhs_run.size()));
+                const std::string_view rhs_num = rhs_run.substr(std::min(rhs_run.find_first_not_of('0'), rhs_run.size()));
+                if (lhs_num.size() != rhs_num.size())
+                    return lhs_num.size() < rhs_num.size() ? -1 : 1;
+                if (const int cmp = lhs_num.compare(rhs_num); cmp != 0)
+                    return cmp;
+                // note: fewer-leading-zeros-first is our convention, not an industry standard (impls
+                //   diverge here); it only matters as a deterministic total order for unstable std::sort.
+                if (lhs_run.size() != rhs_run.size())
+                    return lhs_run.size() < rhs_run.size() ? -1 : 1;
+                continue;
+            }
+
+            const int lower_lhs = std::tolower(lc);
+            const int lower_rhs = std::tolower(rc);
+            if (lower_lhs != lower_rhs)
+                return lower_lhs < lower_rhs ? -1 : 1;
+
+            ++li;
+            ++ri;
+        }
+
+        if (li == lhs.size() && ri == rhs.size())
+            return 0;
+        return li == lhs.size() ? -1 : 1;
+    }
+
+    // Neutral baseline order: the whole order when no column is sorted, and the tie-breaker under
+    // every primary sort key. Name-first so the default view is intuitively alphabetical:
+    // name, then source, then status, then type, with plugin_key as the final deterministic tie.
+    //   e.g. with no column sorted the list reads A..Z by name.
+    template <class PluginItem>
+    int compare_plugin_base_order(const PluginItem& lhs, const PluginItem& rhs)
+    {
+        if (const int cmp = compare_ascii_case_insensitive_natural(lhs.display_name, rhs.display_name); cmp != 0)
+            return cmp;
+        if (const int cmp = static_cast<int>(lhs.source) - static_cast<int>(rhs.source); cmp != 0)
+            return cmp;
+        if (const int cmp = static_cast<int>(lhs.status) - static_cast<int>(rhs.status); cmp != 0)
+            return cmp;
+        if (const int cmp = lhs.type_key.compare(rhs.type_key); cmp != 0)
+            return cmp;
+        return lhs.plugin_key.compare(rhs.plugin_key);
+    }
+
+    // Compares two version strings returning -1 / 0 / +1. Uses Slic3r::Semver (the same parser the
+    // plugin catalog's update-available check uses); on unparseable input falls back to the natural
+    // compare so the order stays deterministic.
+    //   e.g. "1.2.0" < "1.10.0" (numeric), "1.0.0-rc1" < "1.0.0" (semver prerelease rule).
+    inline int compare_plugin_version(const std::string& lhs, const std::string& rhs)
+    {
+        const auto lhs_semver = Semver::parse(lhs);
+        const auto rhs_semver = Semver::parse(rhs);
+        if (lhs_semver && rhs_semver)
+        {
+            if (*lhs_semver < *rhs_semver) return -1;
+            if (*rhs_semver < *lhs_semver) return 1;
+            return 0;
+        }
+        return compare_ascii_case_insensitive_natural(lhs, rhs);
+    }
+
+    // Compares two items by the chosen primary key, returning -1 / 0 / +1. Status and Source
+    // rank by enum ordinal (the declared dialog priority); Name uses the natural compare above.
+    //   e.g. Status: an enabled item (lower ordinal) sorts before a disabled one.
+    //        Name:   "Plugin 2" sorts before "Plugin 10".
+    template <class PluginItem>
+    int compare_plugin_sort_key(const PluginItem& lhs, const PluginItem& rhs, PluginSortKey sort_key)
+    {
+        switch (sort_key)
+        {
+        case PluginSortKey::Status:
+            // why: PluginStatus/PluginSource declare the dialog sort priority as their ordinal order.
+            return static_cast<int>(lhs.status) - static_cast<int>(rhs.status);
+        case PluginSortKey::Name:
+            return compare_ascii_case_insensitive_natural(lhs.display_name, rhs.display_name);
+        case PluginSortKey::Source:
+            return static_cast<int>(lhs.source) - static_cast<int>(rhs.source);
+        case PluginSortKey::Version:
+            return compare_plugin_version(lhs.sort_version, rhs.sort_version);
+        case PluginSortKey::None:
+            // why: no primary key - every pair ties here so sort_plugin_items_for_dialog falls
+            //   straight to the ascending base order (direction is irrelevant for the baseline).
+            return 0;
+        }
+
+        return 0;
+    }
+
+    // Sorts the dialog list in place by primary key + direction. Ties always fall back to the
+    // ascending base order, so the result is deterministic regardless of the primary direction.
+    //   e.g. sort_key=Name, order=Desc -> names Z..A, but equal names keep the stable base order.
+    template <class PluginItem>
+    void sort_plugin_items_for_dialog(std::vector<PluginItem>& items, PluginSortKey sort_key,
+                                      PluginSortOrder sort_order)
+    {
+        std::sort(items.begin(), items.end(),
+                  [sort_key, sort_order](const PluginItem& lhs, const PluginItem& rhs)
+                  {
+                      if (const int cmp = compare_plugin_sort_key(lhs, rhs, sort_key); cmp != 0)
+                          return sort_order == PluginSortOrder::Asc ? cmp < 0 : cmp > 0;
+                      // why: ties fall back to ascending base order regardless of the primary direction.
+                      return compare_plugin_base_order(lhs, rhs) < 0;
+                  });
+    }
+} // namespace Slic3r::GUI
--- a/src/slic3r/GUI/PluginSource.hpp
+++ b/src/slic3r/GUI/PluginSource.hpp
@@ -0,0 +1,29 @@
+#pragma once
+
+#include <string>
+
+namespace Slic3r
+{
+    namespace GUI
+    {
+        enum class PluginSource
+        {
+            // IMPORTANT: ordinal order is the Plugins dialog Source sort priority.
+            Mine,
+            Subscribed,
+            Local
+        };
+
+        inline std::string to_string(PluginSource source)
+        {
+            switch (source)
+            {
+            case PluginSource::Mine: return "mine";
+            case PluginSource::Subscribed: return "subscribed";
+            case PluginSource::Local: return "local";
+            }
+
+            return "local";
+        }
+    }
+} // namespace Slic3r::GUI
--- a/src/slic3r/GUI/PluginStatus.hpp
+++ b/src/slic3r/GUI/PluginStatus.hpp
@@ -0,0 +1,31 @@
+#pragma once
+
+#include <string>
+
+namespace Slic3r
+{
+    namespace GUI
+    {
+        enum class PluginStatus
+        {
+            // IMPORTANT: ordinal order is the Plugins dialog Status sort priority.
+            Activated,
+            Error,
+            Inactive,
+            Loading
+        };
+
+        inline std::string to_string(PluginStatus status)
+        {
+            switch (status)
+            {
+            case PluginStatus::Activated: return "Activated";
+            case PluginStatus::Error: return "Error";
+            case PluginStatus::Inactive: return "Inactive";
+            case PluginStatus::Loading: return "Loading";
+            }
+
+            return "Inactive";
+        }
+    }
+} // namespace Slic3r::GUI
--- a/src/slic3r/GUI/PluginsDialog.cpp
+++ b/src/slic3r/GUI/PluginsDialog.cpp
@@ -25,7 +25,6 @@
 #include <boost/log/trivial.hpp>

 #include <algorithm>
-#include <cctype>
 #include <memory>
 #include <mutex>
 #include <vector>
@@ -90,6 +89,7 @@ struct PluginDialogItem
    std::string version;
    std::string installed_version;
    std::string latest_version;
+    std::string sort_version;   // Version shown in the row (installed if installed, else latest); used by the Version sort.
    std::string type_label;
    std::string type_key;
    std::string sharing_token;
@@ -103,7 +103,7 @@ struct PluginDialogItem
    PluginUpdateStatus update_status = PluginUpdateStatus::Normal;
    std::string error_text;
    bool has_error = false;
-    bool loaded    = false;
+    bool is_loaded    = false;
    bool loading   = false;

    // Installation and capability flags
@@ -187,27 +187,62 @@ void refresh_plugin_catalog_blocking(bool fetch_cloud)
    }
 }

-std::string to_string(PluginSource source)
+std::string to_string(PluginUpdateStatus status);
+nlohmann::json build_context_actions_payload(const PluginAvailableActions& available_actions);
+
+nlohmann::json build_plugin_payload_item(const PluginDialogItem& dialog_item)
 {
-    switch (source) {
-    case PluginSource::Local: return "local";
-    case PluginSource::Mine: return "mine";
-    case PluginSource::Subscribed: return "subscribed";
+    nlohmann::json payload_item;
+    payload_item["plugin_key"]  = dialog_item.plugin_key;
+    payload_item["plugin_id"]   = dialog_item.plugin_id;
+    payload_item["name"]        = dialog_item.display_name;
+    payload_item["description"] = dialog_item.description;
+    payload_item["author"]      = dialog_item.author;
+    payload_item["version"]     = dialog_item.version;
+    payload_item["type"]        = dialog_item.type_label;
+    payload_item["type_key"]    = dialog_item.type_key;
+    payload_item["types"]       = dialog_item.type_labels;
+
+    nlohmann::json caps = nlohmann::json::array();
+    for (const PluginCapabilityView& capability : dialog_item.capabilities) {
+        nlohmann::json c;
+        c["name"]       = capability.name;
+        c["type"]       = capability.type_label;
+        c["type_key"]   = capability.type_key;
+        c["enabled"]    = capability.enabled;
+        c["can_toggle"] = capability.can_toggle;
+        c["can_run"]    = capability.can_run;
+        caps.push_back(std::move(c));
    }
+    payload_item["capabilities"] = std::move(caps);

-    return "local";
-}
-
-std::string to_string(PluginStatus status)
-{
-    switch (status) {
-    case PluginStatus::Inactive: return "Inactive";
-    case PluginStatus::Error: return "Error";
-    case PluginStatus::Loading: return "Loading";
-    case PluginStatus::Activated: return "Activated";
+    nlohmann::json changelog = nlohmann::json::array();
+    for (const PluginChangelogView& entry : dialog_item.changelog) {
+        nlohmann::json c;
+        c["version"]      = entry.version;
+        c["changelog"]    = entry.changelog;
+        c["created_time"] = entry.created_time;
+        changelog.push_back(std::move(c));
    }
+    payload_item["changelog"] = std::move(changelog);

-    return "Inactive";
+    payload_item["label"]                 = dialog_item.display_name;
+    payload_item["source"]                = to_string(dialog_item.source);
+    payload_item["status"]                = to_string(dialog_item.status);
+    payload_item["error"]                 = dialog_item.error_text;
+    payload_item["update_status"]         = to_string(dialog_item.update_status);
+    payload_item["unauthorized"]          = dialog_item.unauthorized;
+    payload_item["context_actions"]       = build_context_actions_payload(dialog_item.available_actions);
+    payload_item["update_available"]      = dialog_item.update_status == PluginUpdateStatus::UpdateAvailable;
+    payload_item["can_toggle"]            = dialog_item.available_actions.can_toggle;
+    payload_item["has_script_capability"] = dialog_item.has_script_capability;
+    payload_item["can_run_script"]        = dialog_item.can_run_script;
+    payload_item["sharing_token"]         = dialog_item.sharing_token;
+    payload_item["thumbnail_url"]         = dialog_item.thumbnail_url;
+    payload_item["installed"]             = dialog_item.has_local_package;
+    payload_item["installed_version"]     = dialog_item.installed_version;
+    payload_item["latest_version"]        = dialog_item.latest_version;
+    return payload_item;
 }

 std::string to_string(PluginUpdateStatus status)
@@ -285,6 +320,9 @@ PluginDialogItem build_plugin_dialog_item(const PluginDescriptor& descriptor)
                                 (descriptor.installed_version.empty() ? descriptor.version : descriptor.installed_version) :
                                 std::string{};
    item.latest_version    = descriptor.latest_available_version();
+    // why: sort by the same version the row displays (GetDisplayVersion in index.js) - installed when
+    //   installed, otherwise latest - so the Version sort matches what the user sees.
+    item.sort_version      = item.installed_version.empty() ? item.latest_version : item.installed_version;
    item.type_label        = descriptor.type_label();
    item.type_key          = plugin_capability_type_to_string(descriptor.primary_capability_type());
    // "types" is the display-only compatibility list. Cloud plugins show the raw labels the
@@ -311,9 +349,9 @@ PluginDialogItem build_plugin_dialog_item(const PluginDescriptor& descriptor)
    item.has_local_package     = descriptor.has_local_package();
    item.unauthorized          = descriptor.is_unauthorized();
    item.has_script_capability = descriptor.has_capability_type(Slic3r::PluginCapabilityType::Script);
-    item.loaded                = loader.is_plugin_loaded(descriptor.plugin_key);
+    item.is_loaded                = loader.is_plugin_loaded(descriptor.plugin_key);
    item.loading               = loader.is_plugin_load_in_progress(descriptor.plugin_key);
-    if (item.loaded) {
+    if (item.is_loaded) {
        for (const auto& cap : loader.get_loaded_plugin_capabilities(descriptor.plugin_key)) {
            if (cap) {
                item.capabilities.push_back({cap->name, plugin_capability_type_display_name(cap->type),
@@ -342,7 +380,7 @@ PluginDialogItem build_plugin_dialog_item(const PluginDescriptor& descriptor)
        item.status = PluginStatus::Loading;
    else if (item.has_error)
        item.status = PluginStatus::Error;
-    else if (item.loaded)
+    else if (item.is_loaded)
        item.status = PluginStatus::Activated;
    else
        item.status = PluginStatus::Inactive;
@@ -352,7 +390,7 @@ PluginDialogItem build_plugin_dialog_item(const PluginDescriptor& descriptor)
                                                [](const PluginCapabilityView& capability) {
                                                    return capability.type_key == "script" && capability.enabled;
                                                });
-    item.can_run_script = descriptor.is_metadata_valid() && !descriptor.has_error() && item.has_script_capability && item.loaded &&
+    item.can_run_script = descriptor.is_metadata_valid() && !descriptor.has_error() && item.has_script_capability && item.is_loaded &&
                          !item.loading && has_enabled_script;
    for (PluginCapabilityView& capability : item.capabilities) {
        capability.can_run = item.can_run_script && capability.type_key == "script" && capability.enabled;
@@ -478,6 +516,8 @@ void PluginsDialog::on_script_message(const nlohmann::json& payload)
        open_plugin_on_cloud(payload.value("sharing_token", ""));
    } else if (command == "open_plugin_hub") {
        open_plugin_hub();
+    } else if (command == "set_plugin_sort") {
+        set_plugin_sort(payload.value("sort_key", ""), payload.value("sort_order", ""));
    } else if (command == "set_plugin_install_action") {
        const std::string action = payload.value("action", "");
        if (action == "explore" || action == "install-local")
@@ -487,92 +527,41 @@ void PluginsDialog::on_script_message(const nlohmann::json& payload)

 void PluginsDialog::send_plugins() { call_web_handler(build_plugins_payload()); }

+void PluginsDialog::set_plugin_sort(const std::string& sort_key, const std::string& sort_order)
+{
+    m_plugin_sort_key   = plugin_sort_key_from_string(sort_key, m_plugin_sort_key);
+    m_plugin_sort_order = plugin_sort_order_from_string(sort_order, m_plugin_sort_order);
+    send_plugins();
+}
+
 nlohmann::json PluginsDialog::build_plugins_payload() const
 {
    nlohmann::json response;
    response["command"]        = "list_plugins";
    response["install_action"] = s_selected_plugin_install_action;
+    response["sort_key"]       = to_string(m_plugin_sort_key);
+    response["sort_order"]     = to_string(m_plugin_sort_order);
    response["data"]           = nlohmann::json::array();

-    auto append_plugin = [&response](const PluginDescriptor& row) {
-        const PluginDialogItem dialog_item = build_plugin_dialog_item(row);
-
-        nlohmann::json payload_item;
-        payload_item["plugin_key"]  = dialog_item.plugin_key;
-        payload_item["plugin_id"]   = dialog_item.plugin_id;
-        payload_item["name"]        = row.name;
-        payload_item["description"] = dialog_item.description;
-        payload_item["author"]      = dialog_item.author;
-        payload_item["version"]     = dialog_item.version;
-        payload_item["installed_version"] = dialog_item.installed_version;
-        payload_item["latest_version"]    = dialog_item.latest_version;
-        payload_item["installed"]         = dialog_item.has_local_package;
-        payload_item["type"]        = dialog_item.type_label;
-        payload_item["type_key"]    = dialog_item.type_key;
-        payload_item["types"]       = dialog_item.type_labels;
-        nlohmann::json caps         = nlohmann::json::array();
-        for (const PluginCapabilityView& capability : dialog_item.capabilities) {
-            nlohmann::json c;
-            c["name"]       = capability.name;
-            c["type"]       = capability.type_label;
-            c["type_key"]   = capability.type_key;
-            c["enabled"]    = capability.enabled;
-            c["can_toggle"] = capability.can_toggle;
-            c["can_run"]    = capability.can_run;
-            caps.push_back(std::move(c));
-        }
-        payload_item["capabilities"] = std::move(caps);
-        nlohmann::json changelog     = nlohmann::json::array();
-        for (const PluginChangelogView& entry : dialog_item.changelog) {
-            nlohmann::json c;
-            c["version"]      = entry.version;
-            c["changelog"]    = entry.changelog;
-            c["created_time"] = entry.created_time;
-            changelog.push_back(std::move(c));
-        }
-        payload_item["changelog"]             = std::move(changelog);
-        payload_item["label"]                 = dialog_item.display_name;
-        payload_item["source"]                = to_string(dialog_item.source);
-        payload_item["status"]                = to_string(dialog_item.status);
-        payload_item["error"]                 = dialog_item.error_text;
-        payload_item["update_status"]         = to_string(dialog_item.update_status);
-        payload_item["unauthorized"]          = dialog_item.unauthorized;
-        payload_item["context_actions"]       = build_context_actions_payload(dialog_item.available_actions);
-        payload_item["update_available"]      = dialog_item.update_status == PluginUpdateStatus::UpdateAvailable;
-        payload_item["can_toggle"]            = dialog_item.available_actions.can_toggle;
-        payload_item["has_script_capability"] = dialog_item.has_script_capability;
-        payload_item["can_run_script"]        = dialog_item.can_run_script;
-        payload_item["sharing_token"]         = dialog_item.sharing_token;
-        payload_item["thumbnail_url"]         = dialog_item.thumbnail_url;
-        response["data"].push_back(std::move(payload_item));
-    };
-
    const auto& catalog = PluginManager::instance().get_catalog();
    const auto valid    = catalog.get_all_plugin_descriptors();
    const auto invalid  = catalog.get_invalid_plugins();
    BOOST_LOG_TRIVIAL(info) << "Prepared " << valid.size() + invalid.size() << " plugin rows for Plugins dialog";

+    std::vector<PluginDialogItem> items;
+    items.reserve(valid.size() + invalid.size());
+
    for (const PluginDescriptor& row : valid)
-        append_plugin(row);
+        items.push_back(build_plugin_dialog_item(row));

    for (const PluginDescriptor& row : invalid)
-        append_plugin(row);
+        items.push_back(build_plugin_dialog_item(row));

-    auto sort_value = [](const nlohmann::json& payload_item, const char* key) { return payload_item.value(key, std::string{}); };
+    // In-place sort
+    sort_plugin_items_for_dialog(items, m_plugin_sort_key, m_plugin_sort_order);

-    std::sort(response["data"].begin(), response["data"].end(), [&sort_value](const nlohmann::json& lhs, const nlohmann::json& rhs) {
-        const std::string lhs_source = sort_value(lhs, "source");
-        const std::string rhs_source = sort_value(rhs, "source");
-        if (lhs_source != rhs_source)
-            return lhs_source < rhs_source;
-
-        const std::string lhs_type = sort_value(lhs, "type_key");
-        const std::string rhs_type = sort_value(rhs, "type_key");
-        if (lhs_type != rhs_type)
-            return lhs_type < rhs_type;
-
-        return sort_value(lhs, "name") < sort_value(rhs, "name");
-    });
+    for (const PluginDialogItem& item : items)
+        response["data"].push_back(build_plugin_payload_item(item));

    return response;
 }
@@ -1274,7 +1263,7 @@ void PluginsDialog::delete_mine_local_and_cloud_plugin(const std::string& plugin

    // delete_mine_local_and_cloud_plugin already updated the in-memory catalog
    // (finalize_cloud_plugin_removal removes the row and, when a local package existed,
-    // re-syncs the cloud list itself), so a UI refresh is sufficient here — an extra
+    // re-syncs the cloud list itself), so a UI refresh is sufficient here - an extra
    // clearing rescan + cloud fetch would be redundant.
    send_plugins();
    show_status(wxString::Format(_L("Deleted \"%s\"."), plugin_name), "success");
--- a/src/slic3r/GUI/PluginsDialog.hpp
+++ b/src/slic3r/GUI/PluginsDialog.hpp
@@ -2,6 +2,9 @@
 #define slic3r_PluginsDialog_hpp_

 #include "Widgets/WebViewHostDialog.hpp"
+#include "PluginSource.hpp"
+#include "PluginStatus.hpp"
+#include "PluginSort.hpp"
 #include "slic3r/plugin/PluginDescriptor.hpp"

 #include <exception>
@@ -27,21 +30,6 @@ enum class PluginCapabilityType;

 namespace GUI {

-enum class PluginSource
-{
-    Local,
-    Mine,
-    Subscribed
-};
-
-enum class PluginStatus
-{
-    Inactive,
-    Error,
-    Loading,
-    Activated
-};
-
 class PluginsDialog : public Slic3r::GUI::WebViewHostDialog
 {
 public:
@@ -63,6 +51,7 @@ private:
    void on_script_message(const nlohmann::json& payload) override;

    void send_plugins();
+    void set_plugin_sort(const std::string& sort_key, const std::string& sort_order);
    nlohmann::json build_plugins_payload() const;

    bool get_descriptor(const std::string& plugin_key, Slic3r::PluginDescriptor& descriptor) const;
@@ -221,6 +210,8 @@ private:
    }

    std::function<void()> m_open_terminal_dlg_fn;
+    PluginSortKey m_plugin_sort_key       = PluginSortKey::None;
+    PluginSortOrder m_plugin_sort_order   = PluginSortOrder::Asc;

    // Serializes run_script_plugin. With main-thread execution a plugin's orca.host.ui modal
    // (message/show_dialog) or the result message box pumps a nested event loop, which could
--- a/tests/slic3rutils/CMakeLists.txt
+++ b/tests/slic3rutils/CMakeLists.txt
@@ -4,6 +4,7 @@ add_executable(${_TEST_NAME}_tests
    test_plugin_host_api.cpp
    test_plugin_capability_identifier.cpp
    test_plugin_install.cpp
+    test_plugin_sort.cpp
    )

 if (MSVC)
--- a/tests/slic3rutils/test_plugin_sort.cpp
+++ b/tests/slic3rutils/test_plugin_sort.cpp
@@ -0,0 +1,189 @@
+#include <catch2/catch_all.hpp>
+
+#include <slic3r/GUI/PluginSort.hpp>
+
+#include <string>
+#include <vector>
+
+using Slic3r::GUI::compare_ascii_case_insensitive_natural;
+using Slic3r::GUI::PluginSortKey;
+using Slic3r::GUI::PluginSortOrder;
+using Slic3r::GUI::PluginSource;
+using Slic3r::GUI::PluginStatus;
+using Slic3r::GUI::plugin_sort_key_from_string;
+using Slic3r::GUI::plugin_sort_order_from_string;
+using Slic3r::GUI::sort_plugin_items_for_dialog;
+
+namespace {
+
+struct SortFixtureItem
+{
+    std::string plugin_key;
+    PluginSource source;
+    PluginStatus status;
+    std::string type_key;
+    std::string display_name;
+    std::string sort_version;
+};
+
+std::vector<std::string> keys(const std::vector<SortFixtureItem>& items)
+{
+    std::vector<std::string> result;
+    result.reserve(items.size());
+    for (const SortFixtureItem& item : items)
+        result.push_back(item.plugin_key);
+    return result;
+}
+
+} // namespace
+
+TEST_CASE("plugin dialog status sort uses requested priority and base-order ties", "[plugin][sort]")
+{
+    std::vector<SortFixtureItem> items = {
+        {"local_inactive", PluginSource::Local, PluginStatus::Inactive, "script", "Local Inactive"},
+        {"mine_error", PluginSource::Mine, PluginStatus::Error, "script", "Mine Error"},
+        {"mine_activated", PluginSource::Mine, PluginStatus::Activated, "script", "Mine Activated"},
+        {"local_activated", PluginSource::Local, PluginStatus::Activated, "script", "Local Activated"},
+        {"subscribed_loading", PluginSource::Subscribed, PluginStatus::Loading, "script", "Subscribed Loading"},
+    };
+
+    sort_plugin_items_for_dialog(items, PluginSortKey::Status, PluginSortOrder::Asc);
+
+    // why: local_activated and mine_activated tie on Status, so base order breaks the tie by name
+    //   (case-insensitive) - "Local Activated" before "Mine Activated".
+    const std::vector<std::string> expected = {
+        "local_activated",
+        "mine_activated",
+        "mine_error",
+        "local_inactive",
+        "subscribed_loading",
+    };
+    CHECK(keys(items) == expected);
+
+    sort_plugin_items_for_dialog(items, PluginSortKey::Status, PluginSortOrder::Desc);
+
+    // why: Desc reverses the status ordinal, but the Activated tie still resolves by ascending
+    //   base order (name: "Local Activated" before "Mine Activated") - direction only flips the key.
+    const std::vector<std::string> desc_expected = {
+        "subscribed_loading",
+        "local_inactive",
+        "mine_error",
+        "local_activated",
+        "mine_activated",
+    };
+    CHECK(keys(items) == desc_expected);
+}
+
+TEST_CASE("plugin dialog source sort uses enum priority", "[plugin][sort]")
+{
+    std::vector<SortFixtureItem> items = {
+        {"local", PluginSource::Local, PluginStatus::Activated, "script", "Local"},
+        {"mine", PluginSource::Mine, PluginStatus::Activated, "script", "Mine"},
+        {"subscribed", PluginSource::Subscribed, PluginStatus::Activated, "script", "Subscribed"},
+    };
+
+    sort_plugin_items_for_dialog(items, PluginSortKey::Source, PluginSortOrder::Asc);
+    const std::vector<std::string> asc_expected = {"mine", "subscribed", "local"};
+    CHECK(keys(items) == asc_expected);
+
+    sort_plugin_items_for_dialog(items, PluginSortKey::Source, PluginSortOrder::Desc);
+    const std::vector<std::string> desc_expected = {"local", "subscribed", "mine"};
+    CHECK(keys(items) == desc_expected);
+}
+
+TEST_CASE("plugin dialog version sort is semver-aware with base-order ties", "[plugin][sort]")
+{
+    std::vector<SortFixtureItem> items = {
+        {"v_1_2_0",  PluginSource::Local, PluginStatus::Activated, "script", "B", "1.2.0"},
+        {"v_1_10_0", PluginSource::Local, PluginStatus::Activated, "script", "A", "1.10.0"},
+        {"v_0_9_3",  PluginSource::Local, PluginStatus::Activated, "script", "C", "0.9.3"},
+    };
+
+    sort_plugin_items_for_dialog(items, PluginSortKey::Version, PluginSortOrder::Asc);
+    // why: semver numeric compare - 1.10.0 > 1.2.0 (not lexical "1.10" < "1.2"), so ascending is
+    //   0.9.3 < 1.2.0 < 1.10.0.
+    const std::vector<std::string> asc_expected = {"v_0_9_3", "v_1_2_0", "v_1_10_0"};
+    CHECK(keys(items) == asc_expected);
+
+    sort_plugin_items_for_dialog(items, PluginSortKey::Version, PluginSortOrder::Desc);
+    const std::vector<std::string> desc_expected = {"v_1_10_0", "v_1_2_0", "v_0_9_3"};
+    CHECK(keys(items) == desc_expected);
+}
+
+TEST_CASE("plugin dialog name sort is case-insensitive and numeric-aware", "[plugin][sort]")
+{
+    std::vector<SortFixtureItem> items = {
+        {"rig10", PluginSource::Local, PluginStatus::Activated, "script", "Rig 10"},
+        {"ada_lower", PluginSource::Local, PluginStatus::Activated, "script", "ada"},
+        {"rig2", PluginSource::Local, PluginStatus::Activated, "script", "Rig 2"},
+        {"ada_upper", PluginSource::Local, PluginStatus::Activated, "script", "Ada"},
+    };
+
+    sort_plugin_items_for_dialog(items, PluginSortKey::Name, PluginSortOrder::Asc);
+
+    // why: "Ada"/"ada" tie on the case-insensitive name (primary AND base name level), so the tie
+    //   falls through source/status/type to plugin_key: "ada_lower" before "ada_upper".
+    const std::vector<std::string> expected = {"ada_lower", "ada_upper", "rig2", "rig10"};
+    CHECK(keys(items) == expected);
+
+    sort_plugin_items_for_dialog(items, PluginSortKey::Name, PluginSortOrder::Desc);
+
+    // why: names reverse ("Rig 10" before "Rig 2"), but "Ada"/"ada" tie on the case-insensitive
+    //   key and keep ascending base order, which resolves by plugin_key ("ada_lower" < "ada_upper").
+    const std::vector<std::string> desc_expected = {"rig10", "rig2", "ada_lower", "ada_upper"};
+    CHECK(keys(items) == desc_expected);
+}
+
+TEST_CASE("natural compare handles digits, case, prefixes and leading zeros", "[plugin][sort]")
+{
+    // numeric runs compare by value, not lexically
+    CHECK(compare_ascii_case_insensitive_natural("item2", "item10") < 0);
+    CHECK(compare_ascii_case_insensitive_natural("item10", "item2") > 0);
+    CHECK(compare_ascii_case_insensitive_natural("2", "10") < 0);
+
+    // case is ignored on the primary comparison
+    CHECK(compare_ascii_case_insensitive_natural("Camera", "camera") == 0);
+
+    // a prefix is less than the longer string it prefixes
+    CHECK(compare_ascii_case_insensitive_natural("app", "apple") < 0);
+    CHECK(compare_ascii_case_insensitive_natural("apple", "app") > 0);
+
+    // equal numeric value: fewer leading zeros wins the tie
+    CHECK(compare_ascii_case_insensitive_natural("1", "01") < 0);
+    CHECK(compare_ascii_case_insensitive_natural("01", "1") > 0);
+
+    // reflexivity and empty-string boundaries
+    CHECK(compare_ascii_case_insensitive_natural("plugin", "plugin") == 0);
+    CHECK(compare_ascii_case_insensitive_natural("", "") == 0);
+    CHECK(compare_ascii_case_insensitive_natural("", "a") < 0);
+}
+
+TEST_CASE("plugin dialog None sort key falls to ascending base order in both directions", "[plugin][sort]")
+{
+    std::vector<SortFixtureItem> items = {
+        {"z_mine", PluginSource::Mine, PluginStatus::Activated, "script", "Zebra"},
+        {"a_local", PluginSource::Local, PluginStatus::Activated, "script", "Apple"},
+        {"m_sub", PluginSource::Subscribed, PluginStatus::Error, "script", "Mango"},
+    };
+
+    // why: no primary key -> pure name-first base order (Apple < Mango < Zebra). A source-first
+    //   baseline would instead give {z_mine, m_sub, a_local}, so this pins the name-first order.
+    const std::vector<std::string> base_expected = {"a_local", "m_sub", "z_mine"};
+
+    sort_plugin_items_for_dialog(items, PluginSortKey::None, PluginSortOrder::Asc);
+    CHECK(keys(items) == base_expected);
+
+    // why: None has no direction - Desc must not reverse the baseline.
+    sort_plugin_items_for_dialog(items, PluginSortKey::None, PluginSortOrder::Desc);
+    CHECK(keys(items) == base_expected);
+}
+
+TEST_CASE("plugin dialog sort request parsing keeps previous state on invalid values", "[plugin][sort]")
+{
+    CHECK(plugin_sort_key_from_string("source", PluginSortKey::Status) == PluginSortKey::Source);
+    CHECK(plugin_sort_key_from_string("none", PluginSortKey::Status) == PluginSortKey::None);
+    CHECK(plugin_sort_key_from_string("missing", PluginSortKey::Name) == PluginSortKey::Name);
+
+    CHECK(plugin_sort_order_from_string("desc", PluginSortOrder::Asc) == PluginSortOrder::Desc);
+    CHECK(plugin_sort_order_from_string("down", PluginSortOrder::Asc) == PluginSortOrder::Asc);
+}
Author	SHA1	Message	Date
Ian Chua	05fa7ee56d	Plugins dialog: as-you-type search with fuzzy match + highlighting (#14611 )	2026-07-07 19:38:31 +08:00
Andrew	fb2c0ef237	Update search button icons and styles Revise button labels and styling for search options to improve UI consistency.	2026-07-07 16:28:48 +08:00
Andrew	9a6b861ce3	Merge branch 'feat/plugin-feature' into feature/plugins-dialog-search	2026-07-07 13:08:48 +08:00
Ian Chua	e6008c0883	Plugins dialog: sort via clickable column headers (name, version, source, status) (#14610 )	2026-07-07 12:13:33 +08:00
Andrew	cfe3673b22	Refine plugin sorting to use name-first base order Ensure plugins are sorted alphabetically by name when no other column is sorted, and resolve ties by source, status, type, and plugin_key.	2026-07-06 18:14:26 +08:00
Andrew	8ddb4db0de	Recompute scrollbar gutter on every render Address issues with search and sort re-renders by ensuring the scrollbar gutter is consistently updated with each rendering cycle.	2026-07-06 18:14:26 +08:00
Andrew	bc21551185	Implement plugin search functionality	2026-07-06 18:14:26 +08:00
Andrew	ee7339b64b	Refine plugin sorting to use name-first base order Ensure plugins are sorted alphabetically by name when no other column is sorted, and resolve ties by source, status, type, and plugin_key.	2026-07-06 16:25:07 +08:00
Andrew	a11e442f1d	Add version sorting for plugins Enhance plugin dialog with semver-aware sorting by version, enabling users to sort plugins based on version comparisons.	2026-07-06 15:25:09 +08:00
Andrew	714fe54f77	Move plugin sort from dropdown to clickable column headers Replace the toolbar sort dropdown with sortable Name/Source/Status column headers that cycle ascending, descending, then clear. Add a Source column and a PluginSortKey::None baseline for the cleared state. The whole header cell is the click target and the sort triangle snaps in without a fade.	2026-07-06 15:03:14 +08:00
Andrew	b724cb6631	Implement plugin sorting functionality Add support for sorting plugins by status, name, or source in both ascending and descending order.	2026-07-06 12:31:34 +08:00