From f378ad87c64c19f89cbd48ba03b1e34a5f26718d Mon Sep 17 00:00:00 2001
From: gauravshinde1729 <shindegauravpict@gmail.com>
Date: Sun, 12 Apr 2026 08:20:03 +0530
Subject: [PATCH] fix: display ROOT as "Your Application" in VEX rule path
 patterns

  Body:

  VEX rules created for direct dependencies store a path pattern of
  ["*", "ROOT", "pkg:..."]. The UI was rendering this literally as
  "* > ROOT > pkg:..." which was confusing.

  Strip the leading "*" before ROOT and replace ROOT with "Your
  Application" so the pattern displays as "Your Application > pkg:...".
---
 src/components/vex-rules/VexPathPattern.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/vex-rules/VexPathPattern.tsx b/src/components/vex-rules/VexPathPattern.tsx
index 094bf0c8..6d9fc796 100644
--- a/src/components/vex-rules/VexPathPattern.tsx
+++ b/src/components/vex-rules/VexPathPattern.tsx
@@ -19,6 +19,7 @@ const PathSegment: FunctionComponent<{
   truncate?: boolean;
 }> = ({ segment, showIcon = false, truncate = false }) => {
   if (segment === "*") return <span>*</span>;
+  if (segment === "ROOT") return <span>Your Application</span>;
 
   const version = extractVersion(segment);
   const packageName = beautifyPurl(segment);
@@ -42,14 +43,21 @@ const VexPathPattern: FunctionComponent<VexPathPatternProps> = ({
   pathPattern,
   showTooltip = true,
 }) => {
+  // Strip a leading "*" that precedes "ROOT" — the wildcard is redundant for display
+  // since ROOT already conveys "your application". Renders ["*","ROOT","pkg"] as "Your Application → pkg".
+  const displayPattern =
+    pathPattern.length >= 2 && pathPattern[0] === "*" && pathPattern[1] === "ROOT"
+      ? pathPattern.slice(1)
+      : pathPattern;
+
   const content = (
     <div className="text-sm text-foreground flex flex-wrap items-center gap-1">
-      {pathPattern.map((segment, index) => (
+      {displayPattern.map((segment, index) => (
         <span key={index} className="inline-flex items-center">
           <Badge variant="outline" className="gap-1 min-w-0">
             <PathSegment segment={segment} truncate={true} />
           </Badge>
-          {index < pathPattern.length - 1 && <span className="mx-1">→</span>}
+          {index < displayPattern.length - 1 && <span className="mx-1">→</span>}
         </span>
       ))}
     </div>
@@ -64,10 +72,10 @@ const VexPathPattern: FunctionComponent<VexPathPatternProps> = ({
       <TooltipTrigger className="text-left">{content}</TooltipTrigger>
       <TooltipContent>
         <div className="flex flex-wrap flex-row items-start gap-2 break-all max-w-md">
-          {pathPattern.map((segment, index) => (
+          {displayPattern.map((segment, index) => (
             <span key={index} className="flex flex-row items-center gap-1">
-              <PathSegment segment={segment} showIcon={segment !== "*"} />
-              {index < pathPattern.length - 1 && <span>→</span>}
+              <PathSegment segment={segment} showIcon={segment !== "*" && segment !== "ROOT"} />
+              {index < displayPattern.length - 1 && <span>→</span>}
             </span>
           ))}
         </div>