feat(frontend): show tooltip for pinned versions

frontend/src/app/scripts/_components/script-item.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { X } from "lucide-react";
+import { X, HelpCircle } from "lucide-react";
 import { Suspense } from "react";
 import Image from "next/image";
 
 import type { AppVersion, Script } from "@/lib/types";
 
 import { Separator } from "@/components/ui/separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useVersions } from "@/hooks/use-versions";
 import { basePath } from "@/config/site-config";
 import { extractDate } from "@/lib/time";
@@ -115,7 +116,21 @@ function VersionInfo({ item }: { item: Script }) {
   if (!matchedVersion)
     return null;
 
-  return <span className="font-medium text-sm">{matchedVersion.version}</span>;
+  return (
+    <span className="font-medium text-sm flex items-center gap-1">
+      {matchedVersion.version}
+      {matchedVersion.pinned && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <HelpCircle className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+          </TooltipTrigger>
+          <TooltipContent className="max-w-xs">
+            <p>This version is pinned. We test each update for breaking changes before releasing new versions.</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </span>
+  );
 }
 
 export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {