diff --git a/artifacts/api-server/src/routes/analytics.ts b/artifacts/api-server/src/routes/analytics.ts
index d3e6921..24e4a8e 100644
--- a/artifacts/api-server/src/routes/analytics.ts
+++ b/artifacts/api-server/src/routes/analytics.ts
@@ -104,7 +104,13 @@ router.get("/analytics/top-tools", async (req, res): Promise<void> => {
       ? (Number(avgUsefulness) + Number(avgUsability)) / 2
       : null;
     return {
-      tool: { ...tool, ratingCount, avgUsefulness, avgUsability, avgCombined },
+      tool: {
+        ...tool,
+        ratingCount,
+        avgUsefulness: avgUsefulness != null ? Number(avgUsefulness) : null,
+        avgUsability: avgUsability != null ? Number(avgUsability) : null,
+        avgCombined,
+      },
       score: Number(score),
       ratingCount,
     };
diff --git a/artifacts/toolrate/src/components/mini-bars.tsx b/artifacts/toolrate/src/components/mini-bars.tsx
index 41be2ca..b5efa12 100644
--- a/artifacts/toolrate/src/components/mini-bars.tsx
+++ b/artifacts/toolrate/src/components/mini-bars.tsx
@@ -1,8 +1,15 @@
 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;
+function num(v: number | string | null | undefined): number | null {
+  if (v == null || v === "") return null;
+  const n = typeof v === "string" ? Number(v) : v;
+  return Number.isFinite(n) ? n : null;
+}
+
+function pct(v: number | string | null | undefined): number {
+  const n = num(v);
+  if (n == null) return 0;
+  return Math.max(0, Math.min(5, n)) / 5 * 100;
 }
 
 export function MiniBars({
@@ -10,8 +17,8 @@ export function MiniBars({
   usability,
   className,
 }: {
-  usefulness: number | null | undefined;
-  usability: number | null | undefined;
+  usefulness: number | string | null | undefined;
+  usability: number | string | null | undefined;
   className?: string;
 }) {
   const rows = [
@@ -20,26 +27,29 @@ export function MiniBars({
   ];
   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)}%` }}
-            />
+      {rows.map(({ label, value }) => {
+        const n = num(value);
+        return (
+          <div
+            key={label}
+            className="flex items-center gap-2"
+            title={`${label}: ${n != null ? n.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">
+              {n != null ? n.toFixed(1) : "–"}
+            </span>
           </div>
-          <span className="text-[10px] text-muted-foreground tabular-nums w-7 text-right shrink-0">
-            {value != null ? value.toFixed(1) : "–"}
-          </span>
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 }
@@ -49,15 +59,17 @@ export function MiniBarStack({
   usability,
   className,
 }: {
-  usefulness: number | null | undefined;
-  usability: number | null | undefined;
+  usefulness: number | string | null | undefined;
+  usability: number | string | null | undefined;
   className?: string;
 }) {
+  const u = num(usefulness);
+  const a = num(usability);
   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"
+      title={`Usefulness ${u != null ? u.toFixed(1) : "N/A"} / Usability ${
+        a != null ? a.toFixed(1) : "N/A"
       } (of 5)`}
     >
       <div