ci: dev version includes UTC time (dev-YYYYMMDD-HHmm)

Phase 1: browse power-up
- faceted filters: tags + features (array containment) and min rating
  on listTools; new ?tags=?features=?minRating= URL params with chips
- global Cmd+K command palette (cmdk) with tool search + navigation
- mini usefulness/usability bars on grid cards, wide cards and table rows

artifacts/toolrate/src/components/command-palette.tsx

@@ -0,0 +1,124 @@
+import { useState, useEffect, useRef } from "react";
+import { useLocation } from "wouter";
+import { useListTools, getListToolsQueryKey } from "@workspace/api-client-react";
+import {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+} from "@/components/ui/command";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  Compass,
+  PlusCircle,
+  BarChart3,
+  Trash2,
+  ShieldCheck,
+  Wrench,
+  Star,
+} from "lucide-react";
+
+export function CommandPalette() {
+  const [, navigate] = useLocation();
+  const { isAuthenticated, isAdmin, hasFeature } = useAuth();
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    window.addEventListener("keydown", down);
+    return () => window.removeEventListener("keydown", down);
+  }, []);
+
+  useEffect(() => {
+    if (!open) setSearch("");
+  }, [open]);
+
+  const { data: tools } = useListTools(
+    search ? { search } : undefined,
+    {
+      query: {
+        queryKey: getListToolsQueryKey(search ? { search } : undefined),
+        enabled: open && search.trim().length > 0,
+        staleTime: 30_000,
+      },
+    },
+  );
+
+  function go(path: string) {
+    setOpen(false);
+    navigate(path);
+  }
+
+  const showTrash = hasFeature("trash") || isAdmin;
+  const showWatchlist = (hasFeature("watchlist") || isAdmin) && isAuthenticated;
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput
+        placeholder="Search tools or jump to…"
+        value={search}
+        onValueChange={(v) => {
+          setSearch(v);
+          if (searchTimer.current) clearTimeout(searchTimer.current);
+        }}
+      />
+      <CommandList>
+        <CommandEmpty>
+          {search ? `No tools found for "${search}".` : "Start typing to search tools."}
+        </CommandEmpty>
+        <CommandGroup heading="Navigate">
+          <CommandItem onSelect={() => go("/tools")}>
+            <Compass className="mr-2 h-4 w-4" /> Browse Tools
+          </CommandItem>
+          <CommandItem onSelect={() => go("/tools/new")}>
+            <PlusCircle className="mr-2 h-4 w-4" /> Add a Tool
+          </CommandItem>
+          <CommandItem onSelect={() => go("/analytics")}>
+            <BarChart3 className="mr-2 h-4 w-4" /> Analytics
+          </CommandItem>
+          {showWatchlist && (
+            <CommandItem onSelect={() => go("/watchlist")}>
+              <Star className="mr-2 h-4 w-4" /> My Watchlist
+            </CommandItem>
+          )}
+          {showTrash && (
+            <CommandItem onSelect={() => go("/trash")}>
+              <Trash2 className="mr-2 h-4 w-4" /> Trash
+            </CommandItem>
+          )}
+          {isAdmin && (
+            <CommandItem onSelect={() => go("/admin")}>
+              <ShieldCheck className="mr-2 h-4 w-4" /> Admin
+            </CommandItem>
+          )}
+        </CommandGroup>
+        {search.trim().length > 0 && (
+          <>
+            <CommandSeparator />
+            <CommandGroup heading="Tools">
+              {(tools ?? []).slice(0, 10).map((tool) => (
+                <CommandItem key={tool.id} onSelect={() => go(`/tools/${tool.id}`)}>
+                  <Wrench className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" />
+                  <span className="truncate">{tool.name}</span>
+                  <span className="ml-auto text-xs text-muted-foreground shrink-0">
+                    {tool.avgCombined ? `${tool.avgCombined.toFixed(1)}★` : ""}
+                  </span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </>
+        )}
+      </CommandList>
+    </CommandDialog>
+  );
+}

artifacts/toolrate/src/components/filter-popover.tsx

@@ -0,0 +1,119 @@
+import { useListAllTags, useListAllFeatures } from "@workspace/api-client-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { SlidersHorizontal, X } from "lucide-react";
+
+export function FilterPopover({
+  tags,
+  features,
+  minRating,
+  onChange,
+  onClear,
+  activeCount,
+}: {
+  tags: string[];
+  features: string[];
+  minRating: number | null;
+  onChange: (patch: { tags?: string[]; features?: string[]; minRating?: number | null }) => void;
+  onClear: () => void;
+  activeCount: number;
+}) {
+  const { data: allTags } = useListAllTags();
+  const { data: allFeatures } = useListAllFeatures();
+
+  function toggle(list: string[], value: string): string[] {
+    return list.includes(value) ? list.filter((v) => v !== value) : [...list, value];
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2" data-testid="button-filters">
+          <SlidersHorizontal className="w-4 h-4" />
+          Filters
+          {activeCount > 0 && (
+            <span className="rounded-full bg-primary text-primary-foreground text-[10px] font-medium px-1.5 py-0.5 min-w-[1.25rem] text-center">
+              {activeCount}
+            </span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[340px]" align="start">
+        <div className="space-y-4">
+          {allTags && allTags.length > 0 && (
+            <div>
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Tags</h4>
+              <ScrollArea className="h-40">
+                <div className="space-y-1.5 pr-2">
+                  {allTags.map((t) => (
+                    <Label key={t} className="flex items-center gap-2 text-sm font-normal cursor-pointer">
+                      <Checkbox
+                        checked={tags.includes(t)}
+                        onCheckedChange={() => onChange({ tags: toggle(tags, t) })}
+                      />
+                      {t}
+                    </Label>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+          )}
+          {allFeatures && allFeatures.length > 0 && (
+            <div>
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Features</h4>
+              <ScrollArea className="h-40">
+                <div className="space-y-1.5 pr-2">
+                  {allFeatures.map((f) => (
+                    <Label key={f} className="flex items-center gap-2 text-sm font-normal cursor-pointer">
+                      <Checkbox
+                        checked={features.includes(f)}
+                        onCheckedChange={() => onChange({ features: toggle(features, f) })}
+                      />
+                      {f}
+                    </Label>
+                  ))}
+                </div>
+              </ScrollArea>
+            </div>
+          )}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Min. rating</h4>
+              {minRating != null && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-1 text-xs text-muted-foreground"
+                  onClick={() => onChange({ minRating: null })}
+                >
+                  <X className="w-3 h-3" />
+                </Button>
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              <Slider
+                className="flex-1"
+                min={0}
+                max={5}
+                step={0.5}
+                value={[minRating ?? 0]}
+                onValueChange={([v]) => onChange({ minRating: v })}
+                aria-label="Minimum rating"
+              />
+              <span className="text-sm tabular-nums w-8 text-right text-muted-foreground">
+                {minRating != null ? `${minRating.toFixed(1)}+` : "Any"}
+              </span>
+            </div>
+          </div>
+          <Button variant="outline" size="sm" className="w-full" onClick={onClear}>
+            Clear filters
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

artifacts/toolrate/src/components/layout.tsx

@@ -5,6 +5,7 @@ import { useGetVersion, getGetVersionQueryKey } from "@workspace/api-client-reac
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { CommandPalette } from "@/components/command-palette";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   const [location] = useLocation();
@@ -29,6 +30,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
   return (
     <div className="flex min-h-screen bg-background text-foreground">
+      <CommandPalette />
       <aside className="w-64 border-r bg-card flex flex-col hidden md:flex">
         <div className="p-6 border-b">
           <Link href="/" className="flex items-center gap-2 text-primary font-bold text-xl">

artifacts/toolrate/src/components/mini-bars.tsx

@@ -0,0 +1,73 @@
+import { cn } from "@/lib/utils";
+
+function pct(v: number | null | undefined): number {
+  if (v == null) return 0;
+  return Math.max(0, Math.min(5, v)) / 5 * 100;
+}
+
+export function MiniBars({
+  usefulness,
+  usability,
+  className,
+}: {
+  usefulness: number | null | undefined;
+  usability: number | null | undefined;
+  className?: string;
+}) {
+  const rows = [
+    { label: "Usefulness", value: usefulness },
+    { label: "Usability", value: usability },
+  ];
+  return (
+    <div className={cn("space-y-1 w-full", className)}>
+      {rows.map(({ label, value }) => (
+        <div
+          key={label}
+          className="flex items-center gap-2"
+          title={`${label}: ${value != null ? value.toFixed(1) : "N/A"} / 5`}
+        >
+          <span className="text-[10px] uppercase tracking-wide text-muted-foreground w-[3.5rem] shrink-0">
+            {label}
+          </span>
+          <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+            <div
+              className="h-full rounded-full bg-primary/70"
+              style={{ width: `${pct(value)}%` }}
+            />
+          </div>
+          <span className="text-[10px] text-muted-foreground tabular-nums w-7 text-right shrink-0">
+            {value != null ? value.toFixed(1) : "–"}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function MiniBarStack({
+  usefulness,
+  usability,
+  className,
+}: {
+  usefulness: number | null | undefined;
+  usability: number | null | undefined;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn("h-1.5 w-16 rounded-full bg-muted overflow-hidden flex", className)}
+      title={`Usefulness ${usefulness != null ? usefulness.toFixed(1) : "N/A"} / Usability ${
+        usability != null ? usability.toFixed(1) : "N/A"
+      } (of 5)`}
+    >
+      <div
+        className="h-full bg-primary/80"
+        style={{ width: `${pct(usefulness)}%` }}
+      />
+      <div
+        className="h-full bg-primary/40"
+        style={{ width: `${pct(usability)}%` }}
+      />
+    </div>
+  );
+}

artifacts/toolrate/src/components/tool-card-wide.tsx

@@ -3,6 +3,7 @@ import { Card } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Star, MessageSquare, Wrench, ChevronRight } from "lucide-react";
 import { ToolWithStats } from "@workspace/api-client-react";
+import { MiniBarStack } from "@/components/mini-bars";
 
 export function ToolCardWide({ tool, density }: { tool: ToolWithStats; density: "cozy" | "compact" }) {
   const compact = density === "compact";
@@ -46,18 +47,21 @@ export function ToolCardWide({ tool, density }: { tool: ToolWithStats; density:
             </div>
           )}
         </div>
-        <div className="shrink-0 flex items-center gap-4 text-sm text-muted-foreground">
-          <div className="flex items-center gap-1">
-            <Star className="w-4 h-4 fill-primary text-primary" />
-            <span className="font-medium text-foreground">
-              {tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
-            </span>
+        <div className="shrink-0 flex flex-col items-end gap-2 text-sm text-muted-foreground">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-1">
+              <Star className="w-4 h-4 fill-primary text-primary" />
+              <span className="font-medium text-foreground">
+                {tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              <MessageSquare className="w-4 h-4" />
+              <span>{tool.ratingCount}</span>
+            </div>
+            <ChevronRight className="w-4 h-4" />
           </div>
-          <div className="flex items-center gap-1">
-            <MessageSquare className="w-4 h-4" />
-            <span>{tool.ratingCount}</span>
-          </div>
-          <ChevronRight className="w-4 h-4" />
+          {!compact && <MiniBarStack usefulness={tool.avgUsefulness} usability={tool.avgUsability} />}
         </div>
       </Link>
     </Card>

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

@@ -3,6 +3,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
 import { Badge } from "@/components/ui/badge";
 import { Star, MessageSquare, Wrench } from "lucide-react";
 import { Link } from "wouter";
+import { MiniBars } from "@/components/mini-bars";
 
 export function ToolCard({ tool }: { tool: ToolWithStats }) {
   return (
@@ -47,19 +48,22 @@ export function ToolCard({ tool }: { tool: ToolWithStats }) {
             )}
           </div>
         </CardContent>
-        <CardFooter className="pt-0 flex justify-between items-center text-sm text-muted-foreground border-t p-4 mt-auto">
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-1">
-              <Star className="w-4 h-4 fill-primary text-primary" />
-              <span className="font-medium text-foreground">
-                {tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
-              </span>
-            </div>
-            <div className="flex items-center gap-1">
-              <MessageSquare className="w-4 h-4" />
-              <span>{tool.ratingCount}</span>
+        <CardFooter className="pt-0 flex flex-col gap-3 border-t p-4 mt-auto">
+          <div className="flex items-center justify-between text-sm text-muted-foreground">
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-1">
+                <Star className="w-4 h-4 fill-primary text-primary" />
+                <span className="font-medium text-foreground">
+                  {tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
+                </span>
+              </div>
+              <div className="flex items-center gap-1">
+                <MessageSquare className="w-4 h-4" />
+                <span>{tool.ratingCount}</span>
+              </div>
             </div>
           </div>
+          <MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} />
         </CardFooter>
       </Link>
     </Card>

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

@@ -3,6 +3,7 @@ import { Badge } from "@/components/ui/badge";
 import { Star, MessageSquare, Wrench } from "lucide-react";
 import { ToolWithStats } from "@workspace/api-client-react";
 import { cn } from "@/lib/utils";
+import { MiniBarStack } from "@/components/mini-bars";
 
 export const TABLE_GRID =
   "grid-cols-[minmax(0,2fr)_minmax(0,1fr)_80px_80px]";
@@ -56,8 +57,13 @@ export function ToolRow({
         </Badge>
       </div>
       <div className="flex items-center justify-end gap-1">
-        <Star className="w-4 h-4 fill-primary text-primary" />
-        <span className="font-medium">{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}</span>
+        <div className="flex flex-col items-end gap-0.5">
+          <div className="flex items-center gap-1">
+            <Star className="w-4 h-4 fill-primary text-primary" />
+            <span className="font-medium">{tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}</span>
+          </div>
+          {!compact && <MiniBarStack usefulness={tool.avgUsefulness} usability={tool.avgUsability} />}
+        </div>
       </div>
       <div className="flex items-center justify-end gap-1 text-muted-foreground">
         <MessageSquare className="w-4 h-4" />

artifacts/toolrate/src/pages/tools-browse.tsx

@@ -11,6 +11,7 @@ import { ToolCardWide } from "@/components/tool-card-wide";
 import { ToolRow, TABLE_GRID } from "@/components/tool-row";
 import { ViewToggle, type ViewMode } from "@/components/view-toggle";
 import { DensityToggle, type Density } from "@/components/density-toggle";
+import { FilterPopover } from "@/components/filter-popover";
 import { useBrowsePreferences, isViewMode, isDensity } from "@/hooks/use-browse-preferences";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -87,6 +88,16 @@ export default function ToolsBrowse() {
   const [sort, setSort] = useState<ListToolsSort>(initialSort);
   const [overrideView, setOverrideView] = useState<ViewMode | null>(null);
   const [overrideDensity, setOverrideDensity] = useState<Density | null>(null);
+  const [tags, setTags] = useState<string[]>(() =>
+    (initialParams.get("tags") ?? "").split(",").map((t) => t.trim()).filter(Boolean),
+  );
+  const [features, setFeatures] = useState<string[]>(() =>
+    (initialParams.get("features") ?? "").split(",").map((f) => f.trim()).filter(Boolean),
+  );
+  const [minRating, setMinRating] = useState<number | null>(() => {
+    const v = Number(initialParams.get("minRating"));
+    return Number.isFinite(v) ? Math.min(5, Math.max(0, v)) : null;
+  });
 
   const urlView = initialParams.get("view");
   const urlDensity = initialParams.get("density");
@@ -102,9 +113,12 @@ export default function ToolsBrowse() {
     if (sort && sort !== ListToolsSort.newest) p.set("sort", sort);
     if (view !== "grid") p.set("view", view);
     if (density !== "cozy") p.set("density", density);
+    if (tags.length > 0) p.set("tags", tags.join(","));
+    if (features.length > 0) p.set("features", features.join(","));
+    if (minRating != null) p.set("minRating", String(minRating));
     const qs = p.toString();
     navigate(qs ? `/tools?${qs}` : "/tools", { replace: true });
-  }, [search, category, sort, view, density, navigate]);
+  }, [search, category, sort, view, density, tags, features, minRating, navigate]);
 
   useEffect(() => {
     const t = setTimeout(() => setSearch(searchInput), 300);
@@ -135,6 +149,9 @@ export default function ToolsBrowse() {
     ...(search ? { search } : {}),
     ...(category && category !== "all" ? { category } : {}),
     ...(sort ? { sort } : {}),
+    ...(tags.length > 0 ? { tags: tags.join(",") } : {}),
+    ...(features.length > 0 ? { features: features.join(",") } : {}),
+    ...(minRating != null ? { minRating } : {}),
   };
 
   const { data: tools, isLoading: loadingTools } = useListTools(queryParams);
@@ -155,9 +172,13 @@ export default function ToolsBrowse() {
     setSearchInput("");
     setCategory("all");
     setSort(ListToolsSort.newest);
+    setTags([]);
+    setFeatures([]);
+    setMinRating(null);
   };
 
-  const hasFilters = search !== "" || category !== "all" || sort !== ListToolsSort.newest;
+  const filterCount = tags.length + features.length + (minRating != null ? 1 : 0);
+  const hasFilters = search !== "" || category !== "all" || sort !== ListToolsSort.newest || filterCount > 0;
 
   function toggleNameSort() {
     setSort(sort === ListToolsSort.name_asc ? ListToolsSort.name_desc : ListToolsSort.name_asc);
@@ -242,6 +263,23 @@ export default function ToolsBrowse() {
                 ))}
               </SelectContent>
             </Select>
+
+            <FilterPopover
+              tags={tags}
+              features={features}
+              minRating={minRating}
+              onChange={({ tags: t, features: f, minRating: m }) => {
+                if (t) setTags(t);
+                if (f) setFeatures(f);
+                if (m !== undefined) setMinRating(m);
+              }}
+              onClear={() => {
+                setTags([]);
+                setFeatures([]);
+                setMinRating(null);
+              }}
+              activeCount={filterCount}
+            />
           </div>
         </div>
 
@@ -286,6 +324,42 @@ export default function ToolsBrowse() {
                 </button>
               </Badge>
             )}
+            {tags.map((t) => (
+              <Badge key={`tag-${t}`} variant="secondary" className="gap-1 pl-2.5 pr-1.5 py-1">
+                {t}
+                <button
+                  onClick={() => setTags(tags.filter((x) => x !== t))}
+                  className="rounded-sm hover:bg-muted p-0.5"
+                  aria-label={`Remove tag ${t}`}
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              </Badge>
+            ))}
+            {features.map((f) => (
+              <Badge key={`feat-${f}`} variant="secondary" className="gap-1 pl-2.5 pr-1.5 py-1">
+                {f}
+                <button
+                  onClick={() => setFeatures(features.filter((x) => x !== f))}
+                  className="rounded-sm hover:bg-muted p-0.5"
+                  aria-label={`Remove feature ${f}`}
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              </Badge>
+            ))}
+            {minRating != null && (
+              <Badge variant="secondary" className="gap-1 pl-2.5 pr-1.5 py-1">
+                ⭐ {minRating.toFixed(1)}+
+                <button
+                  onClick={() => setMinRating(null)}
+                  className="rounded-sm hover:bg-muted p-0.5"
+                  aria-label="Remove min rating"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              </Badge>
+            )}
             <Button variant="link" size="sm" className="px-1 text-muted-foreground" onClick={clearFilters}>
               Clear all
             </Button>