From 0f532a88fae914661a9e4638b3d7548903d869aa Mon Sep 17 00:00:00 2001 From: Power-Maverick Date: Tue, 25 Aug 2026 17:58:58 -0400 Subject: [PATCH] feat: implement tool maturity feature with verified badge and filtering - Added maturity property to ToolDetail interface for tool maturity tracking. - Introduced utility functions for handling tool maturity: isVerifiedTool, compareVerifiedFirst, and renderVerifiedBadge. - Updated toolsSidebarManagement to load tools with maturity information and filter based on verified status. - Enhanced UI to display verified badges for tools and apply sorting/filtering based on maturity. - Created styles for verified tools and badges in both light and dark themes. - Added e2e tests for verifying tool maturity functionality, including badge display and filtering. - Included unit tests for tool maturity utilities and registry manager maturity mapping. - Documented local testing setup for tool maturity feature. --- docs/TOOL_MATURITY_LOCAL_TESTING.md | 26 +++++++ src/common/types/tool.ts | 3 + src/main/index.ts | 3 +- src/main/managers/toolRegistryManager.ts | 22 +++++- src/main/managers/toolsManager.ts | 1 + src/main/utilities/mockRegistry.ts | 3 + src/renderer/icons/dark/verified.svg | 5 ++ src/renderer/icons/light/verified.svg | 3 + src/renderer/index.html | 9 +++ src/renderer/modules/marketplaceManagement.ts | 44 +++++++++-- .../modules/toolsSidebarManagement.ts | 46 ++++++++++-- src/renderer/styles.scss | 46 ++++++++++++ src/renderer/types/index.ts | 1 + src/renderer/utils/toolMaturity.ts | 15 ++++ tests/e2e/data/maturity-registry.json | 59 +++++++++++++++ tests/e2e/fixtures.ts | 53 ++++++++++++-- tests/e2e/toolMaturity.spec.ts | 73 +++++++++++++++++++ .../main/managers/toolRegistryManager.test.ts | 15 ++++ tests/unit/renderer/toolMaturity.test.ts | 28 +++++++ 19 files changed, 435 insertions(+), 20 deletions(-) create mode 100644 docs/TOOL_MATURITY_LOCAL_TESTING.md create mode 100644 src/renderer/icons/dark/verified.svg create mode 100644 src/renderer/icons/light/verified.svg create mode 100644 src/renderer/utils/toolMaturity.ts create mode 100644 tests/e2e/data/maturity-registry.json create mode 100644 tests/e2e/toolMaturity.spec.ts create mode 100644 tests/unit/main/managers/toolRegistryManager.test.ts create mode 100644 tests/unit/renderer/toolMaturity.test.ts diff --git a/docs/TOOL_MATURITY_LOCAL_TESTING.md b/docs/TOOL_MATURITY_LOCAL_TESTING.md new file mode 100644 index 00000000..a4859bdd --- /dev/null +++ b/docs/TOOL_MATURITY_LOCAL_TESTING.md @@ -0,0 +1,26 @@ +# Tool Maturity UI Local Testing + +## Setup + +Use registry data containing `maturity: "Verified"`, no maturity value, and an unrecognized value such as `maturity: "Community Recommended"`. + +The built-in Supabase source reads `tool_maturity(status)` through the `tools` relationship. A missing `tool_maturity` row is treated as Unverified. Because the desktop app uses an anonymous key, the backend must grant public read access only to `tool_maturity.tool_id` and `tool_maturity.status`; review requests, reviewer identities, CSP snapshots, and change reasons must remain restricted. + +```bash +pnpm run typecheck +pnpm run lint +pnpm run test:unit -- tests/unit/renderer/toolMaturity.test.ts +pnpm exec playwright test tests/e2e/toolMaturity.spec.ts +pnpm run build +pnpm run dev +``` + +## Manual Checks + +1. Open Marketplace and confirm Verified tools appear before other tools while each selected sort remains the order within those groups. +2. Confirm only `Verified` tools show the checkmark badge in standard and compact modes, in light and dark themes. +3. Hover and inspect the badge with a screen reader to verify its short explanation is available. +4. Enable **Verified only** in Marketplace and Installed; confirm only Verified tools remain and the existing empty state appears when none match. +5. In Installed, select **Maturity (Verified first)** and confirm Verified tools appear first, followed by name. +6. Change a tool's registry maturity, wait at least 30 seconds, then reload either list through navigation or a filter change. Confirm both views reflect the new status without restarting the app. +7. Confirm missing, `Unverified`, and unknown maturity values show no badge. diff --git a/src/common/types/tool.ts b/src/common/types/tool.ts index 8804eeca..b57152a7 100644 --- a/src/common/types/tool.ts +++ b/src/common/types/tool.ts @@ -78,6 +78,7 @@ export interface Tool { marketplaceSourceId?: string; marketplaceSourceLabel?: string; marketplaceSourceType?: "builtin" | "private"; + maturity?: string; } /** @@ -112,6 +113,7 @@ export interface ToolRegistryEntry { marketplaceSourceId?: string; marketplaceSourceLabel?: string; marketplaceSourceType?: "builtin" | "private"; + maturity?: string; } /** @@ -149,6 +151,7 @@ export interface ToolManifest { marketplaceSourceId?: string; marketplaceSourceLabel?: string; marketplaceSourceType?: "builtin" | "private"; + maturity?: string; } /** diff --git a/src/main/index.ts b/src/main/index.ts index 570c07e5..1daa7d03 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -137,8 +137,9 @@ class ToolBoxApp { this.connectionsManager = new ConnectionsManager(); this.api = new ToolBoxUtilityManager(); // Pass Supabase credentials and Azure Blob base URL from environment variables + const testToolsDirectory = process.env.PPTB_TEST_MODE === "1" ? process.env.PPTB_TEST_TOOLS_DIRECTORY : undefined; this.toolManager = new ToolManager( - path.join(app.getPath("userData"), "tools"), + testToolsDirectory || path.join(app.getPath("userData"), "tools"), process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY, this.installIdManager, diff --git a/src/main/managers/toolRegistryManager.ts b/src/main/managers/toolRegistryManager.ts index f6bed5e6..f46522b6 100644 --- a/src/main/managers/toolRegistryManager.ts +++ b/src/main/managers/toolRegistryManager.ts @@ -35,6 +35,14 @@ interface SupabaseAnalyticsRow { mau?: number; // Monthly Active Users } +interface SupabaseMaturityRow { + status?: string; +} + +export function getSupabaseMaturityStatus(relation: SupabaseMaturityRow | SupabaseMaturityRow[] | undefined): string | undefined { + return (Array.isArray(relation) ? relation[0] : relation)?.status; +} + function getOptionalAnalyticsNumber(value: number | null | undefined): number | undefined { return typeof value === "number" ? value : undefined; } @@ -81,6 +89,7 @@ interface SupabaseTool { website?: string; min_api?: string; // Minimum ToolBox API version required max_api?: string; // Maximum ToolBox API version tested + tool_maturity?: SupabaseMaturityRow | SupabaseMaturityRow[]; tool_categories?: SupabaseCategoryRow[]; tool_contributors?: SupabaseContributorRow[]; tool_analytics?: SupabaseAnalyticsRow | SupabaseAnalyticsRow[]; // sometimes array depending on RLS / joins @@ -190,9 +199,10 @@ export class ToolRegistryManager extends EventEmitter { // Initialize Supabase client const url = supabaseUrl || SUPABASE_URL; const key = supabaseKey || SUPABASE_ANON_KEY; + const useTestRegistry = process.env.PPTB_TEST_MODE === "1" && !!process.env.PPTB_TEST_REGISTRY_PATH; // Validate Supabase credentials and create client - if (!url || !key || url === "" || key === "") { + if (useTestRegistry || !url || !key || url === "" || key === "") { logWarn("[ToolRegistry] Supabase credentials not configured. Set SUPABASE_URL and SUPABASE_ANON_KEY environment variables."); logWarn("[ToolRegistry] Falling back to local registry.json file."); this.useLocalFallback = true; @@ -347,6 +357,7 @@ export class ToolRegistryManager extends EventEmitter { features: tool.features, license: tool.license, status: (tool.status as "active" | "deprecated" | "archived" | undefined) || "active", + maturity: tool.maturity, marketplaceSourceId: source.id, marketplaceSourceLabel: source.label, marketplaceSourceType: source.type, @@ -385,6 +396,7 @@ export class ToolRegistryManager extends EventEmitter { "min_api", "max_api", // embedded relations + "tool_maturity(status)", "tool_categories(categories(name))", "tool_contributors(contributors(name,profile_url))", "tool_analytics(downloads,rating,mau)", @@ -444,6 +456,7 @@ export class ToolRegistryManager extends EventEmitter { minAPI: tool.min_api, // Include min API version from database maxAPI: tool.max_api, // Include max API version from database npmPackageName: tool.packagename || undefined, // npm package name for pre-release detection + maturity: getSupabaseMaturityStatus(tool.tool_maturity), } as ToolRegistryEntry; }); @@ -460,6 +473,10 @@ export class ToolRegistryManager extends EventEmitter { * Azure Blob is tried first (when configured), then the local registry.json. */ private async fetchFallbackRegistry(): Promise { + if (process.env.PPTB_TEST_MODE === "1" && process.env.PPTB_TEST_REGISTRY_PATH) { + return this.fetchLocalRegistry(); + } + if (this.azureBlobBaseUrl) { try { const tools = await this.fetchAzureBlobRegistry(); @@ -529,6 +546,7 @@ export class ToolRegistryManager extends EventEmitter { features: tool.features, license: tool.license, status: (tool.status as "active" | "deprecated" | "archived" | undefined) || "active", + maturity: tool.maturity, })); logInfo(`[ToolRegistry] Fetched ${tools.length} tools from Azure Blob registry`); @@ -627,6 +645,7 @@ export class ToolRegistryManager extends EventEmitter { status: (tool.status as "active" | "deprecated" | "archived" | undefined) || "active", minAPI: tool.minAPI, maxAPI: tool.maxAPI, + maturity: tool.maturity, })); } @@ -874,6 +893,7 @@ export class ToolRegistryManager extends EventEmitter { marketplaceSourceId: tool.marketplaceSourceId, marketplaceSourceLabel: tool.marketplaceSourceLabel, marketplaceSourceType: tool.marketplaceSourceType, + maturity: tool.maturity, }; // Save to manifest file diff --git a/src/main/managers/toolsManager.ts b/src/main/managers/toolsManager.ts index 976b37cc..60d0aba1 100644 --- a/src/main/managers/toolsManager.ts +++ b/src/main/managers/toolsManager.ts @@ -95,6 +95,7 @@ export class ToolManager extends EventEmitter { marketplaceSourceId: manifest.marketplaceSourceId, marketplaceSourceLabel: manifest.marketplaceSourceLabel, marketplaceSourceType: manifest.marketplaceSourceType, + maturity: manifest.maturity, }; const cached = this.analyticsCache.get(tool.id); diff --git a/src/main/utilities/mockRegistry.ts b/src/main/utilities/mockRegistry.ts index b20b081f..b9efc1d3 100644 --- a/src/main/utilities/mockRegistry.ts +++ b/src/main/utilities/mockRegistry.ts @@ -32,6 +32,7 @@ export interface OfflineMockRegistryTool { status?: string; minAPI?: string; maxAPI?: string; + maturity?: string; } export interface OfflineMockRegistryLoadResult { @@ -40,7 +41,9 @@ export interface OfflineMockRegistryLoadResult { } function resolveOfflineMockRegistryPath(): string | null { + const testRegistryPath = process.env.PPTB_TEST_MODE === "1" ? process.env.PPTB_TEST_REGISTRY_PATH : undefined; const candidatePaths = [ + ...(testRegistryPath ? [testRegistryPath] : []), // Bundled layout: dist/main/data/registry.json (most common runtime path) path.join(__dirname, "..", "data", "registry.json"), // Defensive fallback for alternate build layouts diff --git a/src/renderer/icons/dark/verified.svg b/src/renderer/icons/dark/verified.svg new file mode 100644 index 00000000..d643653b --- /dev/null +++ b/src/renderer/icons/dark/verified.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/renderer/icons/light/verified.svg b/src/renderer/icons/light/verified.svg new file mode 100644 index 00000000..af33cb81 --- /dev/null +++ b/src/renderer/icons/light/verified.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/renderer/index.html b/src/renderer/index.html index 54867f3d..893916bf 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -90,6 +90,7 @@

INSTALLED

+
@@ -120,6 +121,10 @@

INSTALLED

MCP Enabled +
@@ -275,6 +280,10 @@

MARKETPLACE

MCP Enabled +
diff --git a/src/renderer/modules/marketplaceManagement.ts b/src/renderer/modules/marketplaceManagement.ts index 6d7be306..ae4a486e 100644 --- a/src/renderer/modules/marketplaceManagement.ts +++ b/src/renderer/modules/marketplaceManagement.ts @@ -11,6 +11,7 @@ import { formatRatingMarkup } from "../utils/rating"; import { normalizeHttpsUrl, normalizeRepositoryUrl } from "../utils/repositoryUrl"; import { getUnsupportedBadgeTitle, getUnsupportedRequirement } from "../utils/toolCompatibility"; import { applyToolIconMasks, escapeHtml, generateToolIconHtml } from "../utils/toolIconResolver"; +import { compareVerifiedFirst, isVerifiedTool, renderVerifiedBadge } from "../utils/toolMaturity"; import { openLocalPageAsTab } from "./toolManagement"; import { loadSidebarTools } from "./toolsSidebarManagement"; @@ -66,6 +67,7 @@ export async function loadToolsLibrary(): Promise { marketplaceSourceId: tool.marketplaceSourceId, marketplaceSourceLabel: tool.marketplaceSourceLabel, marketplaceSourceType: tool.marketplaceSourceType, + maturity: tool.maturity, }) as ToolDetail, ); @@ -84,6 +86,8 @@ export async function loadMarketplace(): Promise { const marketplaceList = document.getElementById("marketplace-tools-list"); if (!marketplaceList) return; + await loadToolsLibrary(); + // Check if toolLibrary is empty (failed to load from registry) if (!toolLibrary || toolLibrary.length === 0) { marketplaceList.innerHTML = ` @@ -109,6 +113,7 @@ export async function loadMarketplace(): Promise { const authorFilter = document.getElementById("marketplace-author-filter") as HTMLSelectElement | null; const newFilter = document.getElementById("marketplace-new-filter") as HTMLInputElement | null; const mcpEnabledFilter = document.getElementById("marketplace-mcp-enabled-filter") as HTMLInputElement | null; + const verifiedOnlyFilter = document.getElementById("marketplace-verified-only-filter") as HTMLInputElement | null; const privateMarketplaceFilter = document.getElementById("marketplace-private-marketplace-filter") as HTMLInputElement | null; const privateMarketplaceFilterRow = document.getElementById("marketplace-private-marketplace-filter-row") as HTMLElement | null; const sortSelect = document.getElementById("marketplace-sort-select") as HTMLSelectElement | null; @@ -127,11 +132,12 @@ export async function loadMarketplace(): Promise { const selectedAuthor = authorFilter?.value || ""; const showNewOnly = newFilter?.checked || false; const showMcpEnabledOnly = mcpEnabledFilter?.checked || false; + const showVerifiedOnly = verifiedOnlyFilter?.checked || false; const showPrivateMarketplaceOnly = hasConfiguredPrivateMarketplace && (privateMarketplaceFilter?.checked || false); const deprecatedToolsVisibility = (await window.toolboxAPI.getSetting("deprecatedToolsVisibility")) || "hide-all"; // Update filter button indicator and one-click clear button visibility - const hasDropdownFilters = !!(selectedCategory || selectedAuthor || showNewOnly || showMcpEnabledOnly || showPrivateMarketplaceOnly); + const hasDropdownFilters = !!(selectedCategory || selectedAuthor || showNewOnly || showMcpEnabledOnly || showVerifiedOnly || showPrivateMarketplaceOnly); const marketplaceFilterBtn = document.getElementById("marketplace-filter-btn"); if (marketplaceFilterBtn) { marketplaceFilterBtn.classList.toggle("has-active-filters", hasDropdownFilters); @@ -187,6 +193,10 @@ export async function loadMarketplace(): Promise { return false; } + if (showVerifiedOnly && !isVerifiedTool(t.maturity)) { + return false; + } + if (showPrivateMarketplaceOnly && t.marketplaceSourceType !== "private") { return false; } @@ -203,6 +213,9 @@ export async function loadMarketplace(): Promise { // Sort tools based on selected option filteredTools = filteredTools.sort((a, b) => { + const maturityComparison = compareVerifiedFirst(a.maturity, b.maturity); + if (maturityComparison !== 0) return maturityComparison; + switch (sortOption) { case "name-asc": return a.name.localeCompare(b.name); @@ -225,7 +238,7 @@ export async function loadMarketplace(): Promise { // Show empty state if no tools match the search if (filteredTools.length === 0) { const hasSearchTerm = searchTerm.length > 0; - const hasActiveFilters = hasSearchTerm || selectedCategory || selectedAuthor || showNewOnly || showMcpEnabledOnly || showPrivateMarketplaceOnly; + const hasActiveFilters = hasSearchTerm || selectedCategory || selectedAuthor || showNewOnly || showMcpEnabledOnly || showVerifiedOnly || showPrivateMarketplaceOnly; const emptyMessage = hasSearchTerm ? "Try a different search term." : hasActiveFilters ? "No tools match the current filters." : "Check back later for new tools."; marketplaceList.innerHTML = `
@@ -254,6 +267,8 @@ export async function loadMarketplace(): Promise { const isDarkTheme = document.body.classList.contains("dark-theme"); const mcpIconPath = isDarkTheme ? "icons/dark/mcp.svg" : "icons/light/mcp.svg"; const mcpHeadlessEnabled = tool.mcpHeadlessEnabled === true; + const verifiedBadgeHtml = renderVerifiedBadge(tool.maturity, isDarkTheme); + const verifiedClass = isVerifiedTool(tool.maturity) ? "verified" : ""; const mcpBadgeHtml = mcpHeadlessEnabled ? `MCP` : ""; @@ -286,12 +301,12 @@ export async function loadMarketplace(): Promise { if (displayMode === "compact") { // Compact mode: icon, name, version, author only return ` -
+
${toolIconHtml}
- ${tool.name} + ${tool.name}${verifiedBadgeHtml}
v${tool.version}
@@ -312,12 +327,12 @@ export async function loadMarketplace(): Promise { // Standard mode: full details return ` -
+
${toolIconHtml}
- ${tool.name} + ${tool.name}${verifiedBadgeHtml}
v${tool.version}
@@ -448,6 +463,13 @@ export async function loadMarketplace(): Promise { }); } + if (verifiedOnlyFilter && !(verifiedOnlyFilter as any)._pptbBound) { + (verifiedOnlyFilter as any)._pptbBound = true; + verifiedOnlyFilter.addEventListener("change", () => { + loadMarketplace(); + }); + } + if (privateMarketplaceFilter && !(privateMarketplaceFilter as any)._pptbBound) { (privateMarketplaceFilter as any)._pptbBound = true; privateMarketplaceFilter.addEventListener("change", () => { @@ -790,6 +812,11 @@ function clearMarketplaceFilters(): void { mcpEnabledFilter.checked = false; } + const verifiedOnlyFilter = document.getElementById("marketplace-verified-only-filter") as HTMLInputElement | null; + if (verifiedOnlyFilter) { + verifiedOnlyFilter.checked = false; + } + const privateMarketplaceFilter = document.getElementById("marketplace-private-marketplace-filter") as HTMLInputElement | null; if (privateMarketplaceFilter) { privateMarketplaceFilter.checked = false; @@ -828,6 +855,11 @@ export function clearMarketplaceDropdownFilters(): void { mcpEnabledFilter.checked = false; } + const verifiedOnlyFilter = document.getElementById("marketplace-verified-only-filter") as HTMLInputElement | null; + if (verifiedOnlyFilter) { + verifiedOnlyFilter.checked = false; + } + const privateMarketplaceFilter = document.getElementById("marketplace-private-marketplace-filter") as HTMLInputElement | null; if (privateMarketplaceFilter) { privateMarketplaceFilter.checked = false; diff --git a/src/renderer/modules/toolsSidebarManagement.ts b/src/renderer/modules/toolsSidebarManagement.ts index 34ee693d..87b835fd 100644 --- a/src/renderer/modules/toolsSidebarManagement.ts +++ b/src/renderer/modules/toolsSidebarManagement.ts @@ -9,8 +9,9 @@ import { formatRatingMarkup } from "../utils/rating"; import { normalizeRepositoryUrl } from "../utils/repositoryUrl"; import { getUnsupportedBadgeTitle, getUnsupportedRequirement } from "../utils/toolCompatibility"; import { applyToolIconMasks, generateToolIconHtml } from "../utils/toolIconResolver"; +import { compareVerifiedFirst, isVerifiedTool, renderVerifiedBadge } from "../utils/toolMaturity"; import { getToolSourceIconHtml } from "../utils/toolSourceIcon"; -import { getToolLibrary, loadMarketplace, openToolDetail } from "./marketplaceManagement"; +import { getToolLibrary, loadMarketplace, loadToolsLibrary, openToolDetail } from "./marketplaceManagement"; import { switchSidebar } from "./sidebarManagement"; import { launchTool } from "./toolManagement"; @@ -26,6 +27,7 @@ export async function loadSidebarTools(): Promise { if (!toolsList) return; try { + await loadToolsLibrary(); const tools = await window.toolboxAPI.getAllTools(); const favoriteTools = await window.toolboxAPI.getFavoriteTools(); const deprecatedToolsVisibility = (await window.toolboxAPI.getSetting("deprecatedToolsVisibility")) || "hide-all"; @@ -47,6 +49,7 @@ export async function loadSidebarTools(): Promise { } // Enrich tools with update info and favorite status + const currentMaturityByToolId = new Map(getToolLibrary().map((tool) => [tool.id, tool.maturity])); const toolsWithUpdateInfo = await Promise.all( tools.map(async (tool: ToolDetail) => { const updateInfo = await window.toolboxAPI.checkToolUpdates(tool.id); @@ -58,6 +61,7 @@ export async function loadSidebarTools(): Promise { hasUpdate: updateInfo.hasUpdate, isFavorite: favoriteTools.includes(tool.id), isUpdating, + maturity: currentMaturityByToolId.get(tool.id), }; }), ); @@ -69,6 +73,7 @@ export async function loadSidebarTools(): Promise { const sortSelect = document.getElementById("tools-sort-select") as HTMLSelectElement | null; const updateRequiredFilter = document.getElementById("tools-update-required-filter") as CheckboxElement | null; const mcpEnabledFilter = document.getElementById("tools-mcp-enabled-filter") as CheckboxElement | null; + const verifiedOnlyFilter = document.getElementById("tools-verified-only-filter") as CheckboxElement | null; const privateMarketplaceFilter = document.getElementById("tools-private-marketplace-filter") as CheckboxElement | null; const privateMarketplaceFilterRow = document.getElementById("tools-private-marketplace-filter-row") as HTMLElement | null; const userSettings = await window.toolboxAPI.getUserSettings(); @@ -86,10 +91,11 @@ export async function loadSidebarTools(): Promise { const selectedAuthor = authorFilter?.value || ""; const showUpdateRequiredOnly = !!updateRequiredFilter?.checked; const showMcpEnabledOnly = !!mcpEnabledFilter?.checked; + const showVerifiedOnly = !!verifiedOnlyFilter?.checked; const showPrivateMarketplaceOnly = hasConfiguredPrivateMarketplace && !!privateMarketplaceFilter?.checked; // Update filter button indicator and one-click clear button visibility - const hasDropdownFilters = !!(selectedCategory || selectedAuthor || showUpdateRequiredOnly || showMcpEnabledOnly || showPrivateMarketplaceOnly); + const hasDropdownFilters = !!(selectedCategory || selectedAuthor || showUpdateRequiredOnly || showMcpEnabledOnly || showVerifiedOnly || showPrivateMarketplaceOnly); const toolsFilterBtn = document.getElementById("tools-filter-btn"); if (toolsFilterBtn) { toolsFilterBtn.classList.toggle("has-active-filters", hasDropdownFilters); @@ -143,6 +149,10 @@ export async function loadSidebarTools(): Promise { return false; } + if (showVerifiedOnly && !isVerifiedTool(t.maturity)) { + return false; + } + if (showPrivateMarketplaceOnly && t.marketplaceSourceType !== "private") { return false; } @@ -178,6 +188,8 @@ export async function loadSidebarTools(): Promise { case "downloads": // Sort by downloads - higher is better return (b.downloads || 0) - (a.downloads || 0); + case "maturity": + return compareVerifiedFirst(a.maturity, b.maturity) || a.name.localeCompare(b.name); default: return a.name.localeCompare(b.name); } @@ -186,7 +198,7 @@ export async function loadSidebarTools(): Promise { // Empty state when no matches after filtering if (sortedTools.length === 0) { const hasSearchTerm = searchTerm.length > 0; - const hasActiveFilters = hasSearchTerm || selectedCategory || selectedAuthor || showUpdateRequiredOnly || showMcpEnabledOnly || showPrivateMarketplaceOnly; + const hasActiveFilters = hasSearchTerm || selectedCategory || selectedAuthor || showUpdateRequiredOnly || showMcpEnabledOnly || showVerifiedOnly || showPrivateMarketplaceOnly; const emptyMessage = hasSearchTerm ? `No installed tools match "${searchTerm}".` : hasActiveFilters ? "No tools match the current filters." : "Try a different search term."; toolsList.innerHTML = `
@@ -228,6 +240,8 @@ export async function loadSidebarTools(): Promise { .map((tool: ToolDetail & { hasUpdate?: boolean; latestVersion?: string; isFavorite?: boolean; isUpdating?: boolean }) => { const isDarkTheme = document.body.classList.contains("dark-theme"); const mcpIconPath = isDarkTheme ? "icons/dark/mcp.svg" : "icons/light/mcp.svg"; + const verifiedBadgeHtml = renderVerifiedBadge(tool.maturity, isDarkTheme); + const verifiedClass = isVerifiedTool(tool.maturity) ? "verified" : ""; // Icon handling using utility function const defaultToolIcon = isDarkTheme ? "icons/dark/tool-default.svg" : "icons/light/tool-default.svg"; @@ -304,14 +318,14 @@ export async function loadSidebarTools(): Promise { if (displayMode === "compact") { // Compact mode: icon, name, version, author only return ` -
+
${updatingOverlayHtml}
${toolIconHtml}
- ${tool.name} + ${tool.name}${verifiedBadgeHtml}
v${tool.version}
@@ -343,14 +357,14 @@ export async function loadSidebarTools(): Promise { // Standard mode: full details return ` -
+
${updatingOverlayHtml}
${toolIconHtml}
- ${tool.name} + ${tool.name}${verifiedBadgeHtml}
v${tool.version}
@@ -468,6 +482,7 @@ export async function loadSidebarTools(): Promise { const authorFilter = document.getElementById("tools-author-filter") as HTMLSelectElement | null; const updateRequiredFilter = document.getElementById("tools-update-required-filter") as CheckboxElement | null; const mcpEnabledFilter = document.getElementById("tools-mcp-enabled-filter") as CheckboxElement | null; + const verifiedOnlyFilter = document.getElementById("tools-verified-only-filter") as CheckboxElement | null; const privateMarketplaceFilter = document.getElementById("tools-private-marketplace-filter") as CheckboxElement | null; if (searchInput && !(searchInput as any)._pptbBound) { @@ -506,6 +521,13 @@ export async function loadSidebarTools(): Promise { }); } + if (verifiedOnlyFilter && !verifiedOnlyFilter._pptbBound) { + verifiedOnlyFilter._pptbBound = true; + verifiedOnlyFilter.addEventListener("change", () => { + loadSidebarTools(); + }); + } + if (privateMarketplaceFilter && !privateMarketplaceFilter._pptbBound) { privateMarketplaceFilter._pptbBound = true; privateMarketplaceFilter.addEventListener("change", () => { @@ -837,6 +859,11 @@ function clearAllFilters(): void { mcpEnabledFilter.checked = false; } + const verifiedOnlyFilter = document.getElementById("tools-verified-only-filter") as CheckboxElement | null; + if (verifiedOnlyFilter) { + verifiedOnlyFilter.checked = false; + } + const privateMarketplaceFilter = document.getElementById("tools-private-marketplace-filter") as CheckboxElement | null; if (privateMarketplaceFilter) { privateMarketplaceFilter.checked = false; @@ -873,6 +900,11 @@ export function clearInstalledToolsDropdownFilters(): void { mcpEnabledFilter.checked = false; } + const verifiedOnlyFilter = document.getElementById("tools-verified-only-filter") as CheckboxElement | null; + if (verifiedOnlyFilter) { + verifiedOnlyFilter.checked = false; + } + const privateMarketplaceFilter = document.getElementById("tools-private-marketplace-filter") as CheckboxElement | null; if (privateMarketplaceFilter) { privateMarketplaceFilter.checked = false; diff --git a/src/renderer/styles.scss b/src/renderer/styles.scss index 90e28f52..c31a154a 100644 --- a/src/renderer/styles.scss +++ b/src/renderer/styles.scss @@ -3207,6 +3207,22 @@ body.dark-theme .search-filter-btn.active img { border-color: rgba(0, 120, 212, 0.4); } +.tool-item-pptb.verified:not(.deprecated):not(.unsupported) { + background: rgba(0, 120, 212, 0.06); + border-color: rgba(0, 120, 212, 0.42); + box-shadow: + inset 3px 0 0 #0078d4, + 0 3px 9px rgba(0, 120, 212, 0.12); +} + +.tool-item-pptb.verified:not(.deprecated):not(.unsupported):hover { + background: rgba(0, 120, 212, 0.11); + border-color: rgba(0, 120, 212, 0.65); + box-shadow: + inset 3px 0 0 #0078d4, + 0 5px 13px rgba(0, 120, 212, 0.18); +} + .tool-item-header-pptb { display: flex; align-items: center; @@ -3454,6 +3470,20 @@ body.dark-theme .tool-mcp-headless-badge { background: rgba(0, 120, 212, 0.18); } +.tool-verified-badge { + display: inline-flex; + align-items: center; + flex: 0 0 auto; + margin-left: 5px; + vertical-align: middle; +} + +.tool-verified-badge img { + display: block; + width: 16px; + height: 16px; +} + .tool-item-pptb.deprecated { border-left: 3px solid #d83b01; background: rgba(216, 59, 1, 0.05); @@ -3605,6 +3635,22 @@ body.dark-theme .tool-mcp-headless-badge { border-color: rgba(0, 120, 212, 0.4); } +.marketplace-item-pptb.verified:not(.deprecated):not(.unsupported) { + background: rgba(0, 120, 212, 0.06); + border-color: rgba(0, 120, 212, 0.42); + box-shadow: + inset 3px 0 0 #0078d4, + 0 3px 9px rgba(0, 120, 212, 0.12); +} + +.marketplace-item-pptb.verified:not(.deprecated):not(.unsupported):hover { + background: rgba(0, 120, 212, 0.11); + border-color: rgba(0, 120, 212, 0.65); + box-shadow: + inset 3px 0 0 #0078d4, + 0 5px 13px rgba(0, 120, 212, 0.18); +} + .marketplace-item-header-pptb { display: flex; align-items: center; diff --git a/src/renderer/types/index.ts b/src/renderer/types/index.ts index 867c6930..3a307f46 100644 --- a/src/renderer/types/index.ts +++ b/src/renderer/types/index.ts @@ -113,4 +113,5 @@ export interface ToolDetail { marketplaceSourceId?: string; marketplaceSourceLabel?: string; marketplaceSourceType?: "builtin" | "private"; + maturity?: string; } diff --git a/src/renderer/utils/toolMaturity.ts b/src/renderer/utils/toolMaturity.ts new file mode 100644 index 00000000..7fc91a32 --- /dev/null +++ b/src/renderer/utils/toolMaturity.ts @@ -0,0 +1,15 @@ +export function isVerifiedTool(maturity: string | undefined): boolean { + return maturity?.trim().toLowerCase() === "verified"; +} + +export function compareVerifiedFirst(aMaturity: string | undefined, bMaturity: string | undefined): number { + return Number(isVerifiedTool(bMaturity)) - Number(isVerifiedTool(aMaturity)); +} + +export function renderVerifiedBadge(maturity: string | undefined, isDarkTheme: boolean): string { + if (!isVerifiedTool(maturity)) return ""; + + const iconPath = isDarkTheme ? "icons/dark/verified.svg" : "icons/light/verified.svg"; + const description = "Verified tools have passed Power Platform ToolBox quality and safety checks."; + return ``; +} diff --git a/tests/e2e/data/maturity-registry.json b/tests/e2e/data/maturity-registry.json new file mode 100644 index 00000000..a3798cdc --- /dev/null +++ b/tests/e2e/data/maturity-registry.json @@ -0,0 +1,59 @@ +{ + "version": "1.0.0", + "updatedAt": "2026-08-24T00:00:00.000Z", + "description": "Deterministic maturity-model E2E registry", + "tools": [ + { + "id": "alpha-unverified", + "name": "Alpha Unverified", + "description": "An explicitly unverified test tool.", + "authors": [ + "PPTB Tests" + ], + "version": "1.0.0", + "downloadUrl": "https://example.test/alpha-unverified.tar.gz", + "publishedAt": "2026-01-01T00:00:00.000Z", + "status": "active", + "maturity": "unverified" + }, + { + "id": "bravo-verified", + "name": "Bravo Verified", + "description": "A verified test tool.", + "authors": [ + "PPTB Tests" + ], + "version": "1.0.0", + "downloadUrl": "https://example.test/bravo-verified.tar.gz", + "publishedAt": "2026-01-01T00:00:00.000Z", + "status": "active", + "maturity": "verified" + }, + { + "id": "community-recommended", + "name": "Community Recommended", + "description": "A future maturity tier test tool.", + "authors": [ + "PPTB Tests" + ], + "version": "1.0.0", + "downloadUrl": "https://example.test/community-recommended.tar.gz", + "publishedAt": "2026-01-01T00:00:00.000Z", + "status": "active", + "maturity": "community_recommended" + }, + { + "id": "zulu-verified", + "name": "Zulu Verified", + "description": "A second verified test tool.", + "authors": [ + "PPTB Tests" + ], + "version": "1.0.0", + "downloadUrl": "https://example.test/zulu-verified.tar.gz", + "publishedAt": "2026-01-01T00:00:00.000Z", + "status": "active", + "maturity": "verified" + } + ] +} \ No newline at end of file diff --git a/tests/e2e/fixtures.ts b/tests/e2e/fixtures.ts index f3580880..b4707db1 100644 --- a/tests/e2e/fixtures.ts +++ b/tests/e2e/fixtures.ts @@ -1,4 +1,6 @@ import { test as base, expect } from "@playwright/test"; +import fs from "fs"; +import os from "os"; import path from "path"; import type { ElectronApplication, Page } from "playwright"; import { _electron as electron } from "playwright"; @@ -13,6 +15,7 @@ import { _electron as electron } from "playwright"; interface AppFixtures { electronApp: ElectronApplication; window: Page; + maturityData: boolean; } async function dismissTelemetryConsentModalIfPresent(electronApp: ElectronApplication): Promise { @@ -121,24 +124,64 @@ async function resolveMainWindow(electronApp: ElectronApplication): Promise({ + maturityData: [false, { option: true }], + // Playwright fixtures require object destructuring for the first argument. - // eslint-disable-next-line no-empty-pattern - electronApp: async ({}, use) => { + electronApp: async ({ maturityData }, use) => { const mainEntry = path.resolve(__dirname, "../../dist/main/index.js"); + let tempRoot: string | null = null; + let maturityEnvironment: Record = {}; + + if (maturityData) { + tempRoot = fs.mkdtempSync(path.join(os.tmpdir(), "pptb-maturity-e2e-")); + const userDataDirectory = path.join(tempRoot, "user-data"); + const toolsDirectory = path.join(tempRoot, "tools"); + const registryPath = path.resolve(__dirname, "data/maturity-registry.json"); + const registry = JSON.parse(fs.readFileSync(registryPath, "utf-8")) as { tools: Array> }; + const installedToolIds = new Set(["alpha-unverified", "zulu-verified"]); + const installedTools = registry.tools + .filter((tool) => installedToolIds.has(String(tool.id))) + .map((tool) => ({ + ...tool, + installPath: path.join(toolsDirectory, String(tool.id)), + installedAt: "2026-08-24T00:00:00.000Z", + source: "registry", + sourceUrl: tool.downloadUrl, + })); + + fs.mkdirSync(toolsDirectory, { recursive: true }); + fs.mkdirSync(userDataDirectory, { recursive: true }); + fs.writeFileSync(path.join(toolsDirectory, "manifest.json"), JSON.stringify({ tools: installedTools }, null, 2)); + maturityEnvironment = { + PPTB_TEST_MODE: "1", + SUPABASE_URL: "", + SUPABASE_ANON_KEY: "", + AZURE_BLOB_BASE_URL: "", + PPTB_TEST_REGISTRY_PATH: registryPath, + PPTB_TEST_TOOLS_DIRECTORY: toolsDirectory, + }; + } const app = await electron.launch({ - args: [mainEntry], + args: [mainEntry, ...(tempRoot ? [`--user-data-dir=${path.join(tempRoot, "user-data")}`] : [])], env: { ...process.env, // Prevent the app from opening the real OS keychain in CI NODE_ENV: "test", // Suppress update checks during e2e PPTB_DISABLE_AUTO_UPDATE: "1", + ...maturityEnvironment, }, }); - await use(app); - await app.close(); + try { + await use(app); + } finally { + await app.close(); + if (tempRoot) { + fs.rmSync(tempRoot, { recursive: true, force: true }); + } + } }, window: async ({ electronApp }, use) => { diff --git a/tests/e2e/toolMaturity.spec.ts b/tests/e2e/toolMaturity.spec.ts new file mode 100644 index 00000000..054dcdfd --- /dev/null +++ b/tests/e2e/toolMaturity.spec.ts @@ -0,0 +1,73 @@ +import type { Locator } from "playwright"; +import { expect, test } from "./fixtures"; + +test.use({ maturityData: true }); + +const verifiedDescription = "Verified tools have passed Power Platform ToolBox quality and safety checks."; + +async function getToolIds(locator: Locator): Promise { + return locator.evaluateAll((elements) => elements.map((element) => element.getAttribute("data-tool-id") || "")); +} + +test.describe("Tool maturity", () => { + test("Marketplace badges and sorts Verified tools first", async ({ electronApp, window }) => { + const testEnvironment = await electronApp.evaluate(() => ({ + mode: process.env.PPTB_TEST_MODE, + registryPath: process.env.PPTB_TEST_REGISTRY_PATH, + toolsDirectory: process.env.PPTB_TEST_TOOLS_DIRECTORY, + })); + expect(testEnvironment.mode).toBe("1"); + expect(testEnvironment.registryPath).toContain("maturity-registry.json"); + expect(testEnvironment.toolsDirectory).toContain("pptb-maturity-e2e-"); + + await window.locator('[data-sidebar="marketplace"]').click(); + + const cards = window.locator("#marketplace-tools-list .marketplace-item-pptb"); + await expect(cards).toHaveCount(4); + await expect.poll(() => getToolIds(cards)).toEqual(["bravo-verified", "zulu-verified", "alpha-unverified", "community-recommended"]); + + const verifiedBadges = window.locator("#marketplace-tools-list .tool-verified-badge"); + await expect(verifiedBadges).toHaveCount(2); + await expect(verifiedBadges.first()).toHaveAttribute("aria-label", verifiedDescription); + await expect(window.locator('#marketplace-tools-list [data-tool-id="bravo-verified"] .marketplace-item-name-pptb > .tool-verified-badge')).toHaveCount(1); + await expect(window.locator('#marketplace-tools-list .marketplace-item-pptb[data-tool-id="bravo-verified"]')).toHaveClass(/\bverified\b/); + await expect(window.locator('#marketplace-tools-list .marketplace-item-pptb[data-tool-id="alpha-unverified"]')).not.toHaveClass(/\bverified\b/); + await expect(window.locator('[data-tool-id="alpha-unverified"] .tool-verified-badge')).toHaveCount(0); + await expect(window.locator('[data-tool-id="community-recommended"] .tool-verified-badge')).toHaveCount(0); + }); + + test("Marketplace Verified-only filter supports its empty state", async ({ window }) => { + await window.locator('[data-sidebar="marketplace"]').click(); + await window.locator("#marketplace-filter-btn").click(); + await window.locator("#marketplace-verified-only-filter").check(); + + const cards = window.locator("#marketplace-tools-list .marketplace-item-pptb"); + await expect(cards).toHaveCount(2); + await expect.poll(() => getToolIds(cards)).toEqual(["bravo-verified", "zulu-verified"]); + + await window.locator("#marketplace-search-input").fill("Alpha"); + await expect(window.locator("#marketplace-tools-list .empty-state")).toBeVisible(); + await expect(window.locator("#marketplace-tools-list")).toContainText("No matching tools"); + }); + + test("Installed view badges, filters, and sorts by maturity", async ({ window }) => { + const rows = window.locator("#sidebar-tools-list .tool-item-pptb"); + await expect(rows).toHaveCount(2); + await expect(window.locator('#sidebar-tools-list [data-tool-id="zulu-verified"] .tool-item-name-pptb > .tool-verified-badge')).toHaveAttribute("aria-label", verifiedDescription); + await expect(window.locator('#sidebar-tools-list .tool-item-pptb[data-tool-id="zulu-verified"]')).toHaveClass(/\bverified\b/); + await expect(window.locator('#sidebar-tools-list .tool-item-pptb[data-tool-id="alpha-unverified"]')).not.toHaveClass(/\bverified\b/); + await expect(window.locator('#sidebar-tools-list [data-tool-id="alpha-unverified"] .tool-verified-badge')).toHaveCount(0); + + await window.locator("#tools-filter-btn").click(); + await window.locator("#tools-sort-select").selectOption("maturity"); + await expect.poll(() => getToolIds(rows)).toEqual(["zulu-verified", "alpha-unverified"]); + + await window.locator("#tools-verified-only-filter").check(); + await expect(rows).toHaveCount(1); + await expect(rows.first()).toHaveAttribute("data-tool-id", "zulu-verified"); + + await window.locator("#tools-search-input").fill("Alpha"); + await expect(window.locator("#sidebar-tools-list .empty-state")).toBeVisible(); + await expect(window.locator("#sidebar-tools-list")).toContainText("No matching tools"); + }); +}); diff --git a/tests/unit/main/managers/toolRegistryManager.test.ts b/tests/unit/main/managers/toolRegistryManager.test.ts new file mode 100644 index 00000000..b6aed93b --- /dev/null +++ b/tests/unit/main/managers/toolRegistryManager.test.ts @@ -0,0 +1,15 @@ +import { getSupabaseMaturityStatus } from "../../../../src/main/managers/toolRegistryManager"; + +describe("ToolRegistryManager maturity mapping", () => { + it("reads a one-to-one Supabase relation object", () => { + expect(getSupabaseMaturityStatus({ status: "verified" })).toBe("verified"); + }); + + it("reads the array relation shape returned by some Supabase queries", () => { + expect(getSupabaseMaturityStatus([{ status: "unverified" }])).toBe("unverified"); + }); + + it.each([undefined, [], {}])("returns no maturity for a missing relation", (relation) => { + expect(getSupabaseMaturityStatus(relation)).toBeUndefined(); + }); +}); diff --git a/tests/unit/renderer/toolMaturity.test.ts b/tests/unit/renderer/toolMaturity.test.ts new file mode 100644 index 00000000..78777a09 --- /dev/null +++ b/tests/unit/renderer/toolMaturity.test.ts @@ -0,0 +1,28 @@ +import { compareVerifiedFirst, isVerifiedTool, renderVerifiedBadge } from "../../../src/renderer/utils/toolMaturity"; + +describe("tool maturity", () => { + it.each(["Verified", "verified", " VERIFIED "])("recognizes %s as Verified", (maturity) => { + expect(isVerifiedTool(maturity)).toBe(true); + }); + + it.each([undefined, "", "Unverified", "Community Recommended"])("does not badge %s as Verified", (maturity) => { + expect(isVerifiedTool(maturity)).toBe(false); + }); + + it("sorts Verified tools before other maturity values", () => { + expect(compareVerifiedFirst("Verified", "Unverified")).toBeLessThan(0); + expect(compareVerifiedFirst("Community Recommended", "Verified")).toBeGreaterThan(0); + expect(compareVerifiedFirst(undefined, "Community Recommended")).toBe(0); + }); + + it("renders an accessible theme-aware badge only for Verified tools", () => { + const lightBadge = renderVerifiedBadge("Verified", false); + const darkBadge = renderVerifiedBadge("verified", true); + + expect(lightBadge).toContain('src="icons/light/verified.svg"'); + expect(lightBadge).toContain('aria-label="Verified tools have passed Power Platform ToolBox quality and safety checks."'); + expect(lightBadge).not.toContain(">Verified<"); + expect(darkBadge).toContain('src="icons/dark/verified.svg"'); + expect(renderVerifiedBadge("Community Recommended", false)).toBe(""); + }); +});