feat: compare (premium), rating-history trend, hover previews

artifacts/toolrate/src/components/tool-row.tsx

@@ -1,6 +1,6 @@
 import { Link } from "wouter";
 import { Badge } from "@/components/ui/badge";
-import { Star, MessageSquare, Wrench } from "lucide-react";
+import { Star, MessageSquare, Wrench, Scale } from "lucide-react";
 import { ToolWithStats } from "@workspace/api-client-react";
 import { cn } from "@/lib/utils";
 import { MiniBarStack } from "@/components/mini-bars";
@@ -12,10 +12,12 @@ export function ToolRow({
   tool,
   density,
   className,
+  compare,
 }: {
   tool: ToolWithStats;
   density: "cozy" | "compact";
   className?: string;
+  compare?: { selected: boolean; onToggle: () => void };
 }) {
   const compact = density === "compact";
   return (
@@ -28,6 +30,25 @@ export function ToolRow({
       )}
     >
       <div className="flex items-center gap-3 min-w-0">
+        {compare && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              compare.onToggle();
+            }}
+            title={compare.selected ? "Remove from compare" : "Add to compare"}
+            className={cn(
+              "shrink-0 w-6 h-6 rounded border flex items-center justify-center transition-colors",
+              compare.selected
+                ? "bg-primary text-primary-foreground border-primary"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
+          >
+            <Scale className="w-3.5 h-3.5" />
+          </button>
+        )}
         <div className="shrink-0 w-8 h-8 rounded-md border bg-muted flex items-center justify-center overflow-hidden">
           {tool.iconUrl ? (
             <img