Add Manifold Markets prediction probability badges to bill cards

scripts/sql/007_add_manifold_url.sql

@@ -0,0 +1,4 @@
+-- Add manifold_url column to research table for prediction market links
+ALTER TABLE research ADD COLUMN IF NOT EXISTS manifold_url TEXT;
+
+COMMENT ON COLUMN research.manifold_url IS 'Manifold Markets prediction market URL for this bill';

src/components/ManifoldBadge.jsx

@@ -0,0 +1,79 @@
+import { useState, useEffect } from "react";
+import { colors, typography, spacing } from "../designTokens";
+
+/**
+ * Displays a live prediction market probability badge from Manifold Markets.
+ * Fetches the current probability on mount and links to the market.
+ */
+export default function ManifoldBadge({ marketUrl }) {
+  const [prob, setProb] = useState(null);
+
+  useEffect(() => {
+    if (!marketUrl) return;
+
+    // Extract slug from URL: https://manifold.markets/User/slug -> slug
+    const slug = marketUrl.split("/").pop();
+    if (!slug) return;
+
+    fetch(`https://api.manifold.markets/v0/slug/${slug}`)
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.probability != null) {
+          setProb(data.probability);
+        }
+      })
+      .catch(() => {});
+  }, [marketUrl]);
+
+  if (prob == null) return null;
+
+  const pct = Math.round(prob * 100);
+
+  return (
+    <a
+      href={marketUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={(e) => e.stopPropagation()}
+      title="Prediction market probability (Manifold Markets)"
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: spacing.xs,
+        padding: `2px ${spacing.sm}`,
+        borderRadius: spacing.radius.md,
+        backgroundColor: `${colors.primary[600]}12`,
+        border: `1px solid ${colors.primary[600]}30`,
+        color: colors.primary[700],
+        fontSize: typography.fontSize.xs,
+        fontWeight: typography.fontWeight.semibold,
+        fontFamily: typography.fontFamily.body,
+        textDecoration: "none",
+        flexShrink: 0,
+        transition: "background-color 0.15s ease",
+      }}
+      onMouseEnter={(e) =>
+        (e.currentTarget.style.backgroundColor = `${colors.primary[600]}25`)
+      }
+      onMouseLeave={(e) =>
+        (e.currentTarget.style.backgroundColor = `${colors.primary[600]}12`)
+      }
+    >
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
+        />
+      </svg>
+      {pct}%
+    </a>
+  );
+}

src/components/StatePanel.jsx

@@ -3,6 +3,7 @@ import { stateData } from "../data/states";
 import { useData } from "../context/DataContext";
 import ResearchCard from "./ResearchCard";
 import ReformAnalyzer from "./reform/ReformAnalyzer";
+import ManifoldBadge from "./ManifoldBadge";
 import { colors, typography, spacing } from "../designTokens";
 import { track } from "../lib/analytics";
 import { BASE_PATH } from "../lib/basePath";
@@ -279,13 +280,18 @@ const StatePanel = memo(({ stateAbbr, onClose, initialBillId }) => {
                     <BillIcon />
                   </div>
                   <div style={{ flex: 1 }}>
-                    <p style={{
-                      margin: 0,
-                      color: colors.secondary[900],
-                      fontSize: typography.fontSize.sm,
-                      fontWeight: typography.fontWeight.semibold,
-                      fontFamily: typography.fontFamily.body,
-                    }}>{bill.bill}</p>
+                    <div style={{ display: "flex", alignItems: "center", gap: spacing.sm }}>
+                      <p style={{
+                        margin: 0,
+                        color: colors.secondary[900],
+                        fontSize: typography.fontSize.sm,
+                        fontWeight: typography.fontWeight.semibold,
+                        fontFamily: typography.fontFamily.body,
+                      }}>{bill.bill}</p>
+                      {bill.manifoldUrl && (
+                        <ManifoldBadge marketUrl={bill.manifoldUrl} />
+                      )}
+                    </div>
                     <p style={{
                       margin: `${spacing.xs} 0 0`,
                       color: colors.text.secondary,

src/context/DataContext.jsx

@@ -111,6 +111,7 @@ export function DataProvider({ children }) {
           description: description,
           url: item.url,
           status: formatStatus(item.status),
+          manifoldUrl: item.manifold_url || null,
           reformConfig: impact?.reformParams ? {
             id: item.id,
             label: item.title,