Asset #8 — India KCC Demand Pulse tab (/pulse, 7 charts + India choropleth)

data/india_kcc_crop_topic.parquet

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b93c57811304aca57bf7b32d708b2e431687012bea66506dad8864996681991d
+size 4681

data/india_kcc_demand_pulse.parquet

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:03e523c465d47eef5926c26ddd5e833311fae699df8ffdf8d41b07f045aa54a3
+size 14388908

data/india_kcc_info_gap.parquet

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8ece4b54455f4b30ff51aa7345d51ec7216121886ab997ad260ca0b5a66dbe58
+size 55450

data/india_kcc_mandi_correlation.parquet

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4d36ced24caebb964a25d553f97f03944e5deb652c31da255ee39d2535e77a22
+size 8554

data/india_kcc_scheme_uptake.parquet

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:418438943aae93b7e887d16fa4902549f725c5ffdda7971b046aa80974bddad8
+size 5718

data/india_kcc_top_districts.parquet

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6fa79021ceb000fae45fbb4d06214e2a13fcd0947d55a65d278c520449e1f675
+size 4736

data/india_kcc_top_questions.parquet

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5be7d212d3cac47487c5955276175bc76964112f10f36b878e3d4671c1432e2b
+size 11841610

data/india_kcc_topic_by_state.parquet

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c373361e69b10b0738152d860e4651de416b7dc76116a506283a8e0ef29a8ba8
+size 8719

data/india_kcc_topic_trends.parquet

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:99ca763bc12fe3f4d58d1b9b3ce45a056501e73530f08111e597d440d5d4b718
+size 6588

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import Farmer   from "./pages/Farmer"
 import B2BLogin from "./pages/B2BLogin"
 import B2B      from "./pages/B2B"
 import Proof    from "./pages/Proof"
+import DemandPulse from "./pages/DemandPulse"
 
 function ProtectedB2B({ children }) {
   const token = localStorage.getItem("kcc_token")
@@ -55,6 +56,7 @@ export default function App() {
         <Route path="/"          element={<Landing />} />
         <Route path="/farmer"    element={<Farmer />} />
         <Route path="/proof"     element={<Proof />} />
+        <Route path="/pulse"     element={<DemandPulse />} />
         <Route path="/b2b/login" element={<B2BLogin />} />
         <Route path="/b2b"       element={<ProtectedB2B><B2B /></ProtectedB2B>} />
         <Route path="*"          element={<Navigate to="/" replace />} />

frontend/src/components/InfoGapMap.jsx

@@ -0,0 +1,151 @@
+import React, { useMemo, useState } from "react"
+import districtCoords from "../districtCoords.json"
+
+// India bounding box (matches PestHeatmap projection for visual consistency)
+const INDIA = { minLat: 6.5, maxLat: 36.5, minLon: 68.0, maxLon: 97.5 }
+const W = 580, H = 640
+
+function project(lat, lon) {
+  const x = ((lon - INDIA.minLon) / (INDIA.maxLon - INDIA.minLon)) * W
+  const y = ((INDIA.maxLat - lat) / (INDIA.maxLat - INDIA.minLat)) * H
+  return [x, y]
+}
+
+// Flat lookup: "State::District" → {lat, lon}
+const COORDS_FLAT = (() => {
+  const out = {}
+  for (const [state, dists] of Object.entries(districtCoords)) {
+    for (const [district, ll] of Object.entries(dists)) {
+      const key = `${state}::${district}`
+      out[key] = ll
+    }
+  }
+  return out
+})()
+
+// Gap score → severity color (red = high gap = high risk + low queries = underserved)
+function gapColor(gap) {
+  if (gap >= 0.8) return "#dc2626"   // critical
+  if (gap >= 0.6) return "#ea580c"   // high
+  if (gap >= 0.4) return "#f59e0b"   // medium
+  if (gap >= 0.2) return "#84cc16"   // low gap (well-served)
+  return "#16a34a"                    // negative gap (over-served)
+}
+
+export default function InfoGapMap({ data = [] }) {
+  const [hover, setHover] = useState(null)
+
+  // Only plot underserved (positive gap)
+  const points = useMemo(() => {
+    return (data || [])
+      .filter(d => d.gap_score > 0)
+      .map(d => {
+        const ll = COORDS_FLAT[`${d.state}::${d.district}`]
+        if (!ll) return null
+        const [x, y] = project(ll.lat, ll.lon)
+        return { ...d, x, y }
+      })
+      .filter(Boolean)
+  }, [data])
+
+  // Per-state aggregation for the side panel
+  const byState = useMemo(() => {
+    const map = {}
+    for (const p of points) {
+      const k = p.state
+      if (!map[k]) map[k] = { state: k, n: 0, avg_gap: 0, avg_risk: 0 }
+      map[k].n += 1
+      map[k].avg_gap += p.gap_score
+      map[k].avg_risk += p.max_risk_score
+    }
+    return Object.values(map).map(s => ({
+      ...s,
+      avg_gap: s.avg_gap / s.n,
+      avg_risk: s.avg_risk / s.n,
+    })).sort((a,b) => b.n - a.n).slice(0, 10)
+  }, [points])
+
+  const buckets = useMemo(() => {
+    const b = { critical: 0, high: 0, medium: 0, low: 0 }
+    for (const p of points) {
+      if (p.gap_score >= 0.8) b.critical++
+      else if (p.gap_score >= 0.6) b.high++
+      else if (p.gap_score >= 0.4) b.medium++
+      else b.low++
+    }
+    return b
+  }, [points])
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* Map */}
+      <div className="lg:col-span-2">
+        <div className="flex flex-wrap gap-3 text-xs mb-3">
+          {[
+            { label: "Critical gap (0.8+)",    color: "#dc2626", n: buckets.critical },
+            { label: "High gap (0.6-0.8)",     color: "#ea580c", n: buckets.high },
+            { label: "Medium gap (0.4-0.6)",   color: "#f59e0b", n: buckets.medium },
+            { label: "Low gap (<0.4)",         color: "#84cc16", n: buckets.low },
+          ].map(b => (
+            <span key={b.label} className="inline-flex items-center gap-1.5">
+              <span className="inline-block w-3 h-3 rounded-sm" style={{background:b.color}}/>
+              <span className="text-gray-600">{b.label}</span>
+              <span className="font-semibold text-gray-900">({b.n})</span>
+            </span>
+          ))}
+        </div>
+        <div className="relative flex justify-center">
+          <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}
+               className="bg-gradient-to-br from-gray-50 to-green-50 rounded-xl border border-gray-200">
+            {points.map((p, i) => (
+              <circle key={i} cx={p.x} cy={p.y}
+                      r={Math.max(2, Math.min(8, 2 + p.gap_score * 7))}
+                      fill={gapColor(p.gap_score)} opacity={0.7}
+                      onMouseEnter={() => setHover(p)} onMouseLeave={() => setHover(null)}
+                      className="cursor-pointer hover:opacity-100 transition-opacity"/>
+            ))}
+          </svg>
+          {hover && (
+            <div className="absolute bg-gray-900 text-white text-xs rounded-lg px-3 py-2 shadow-xl pointer-events-none max-w-[260px] z-10"
+                 style={{left: Math.min(hover.x + 14, W - 220), top: Math.max(hover.y - 40, 0)}}>
+              <div className="font-bold text-sm">{hover.district}, {hover.state}</div>
+              <div className="mt-0.5 text-gray-300">{hover.crop}</div>
+              <div className="mt-1.5 text-red-400">Gap score: <strong>{hover.gap_score}</strong></div>
+              <div className="text-gray-300">
+                Pest risk <strong>{hover.max_risk_score}</strong> + <strong>{hover.pest_queries}</strong> queries
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Side panel: top 10 states */}
+      <div>
+        <h4 className="text-sm font-semibold text-gray-700 mb-3 uppercase tracking-wide">
+          Worst-served states
+        </h4>
+        <div className="space-y-2">
+          {byState.map((s, i) => (
+            <div key={s.state}
+                 className="flex items-center justify-between p-3 rounded-lg bg-gradient-to-r from-red-50 to-white border border-red-100 hover:shadow-md transition-shadow">
+              <div className="flex items-center gap-3">
+                <span className="text-lg font-bold text-red-600 w-6">{i+1}</span>
+                <div>
+                  <div className="text-sm font-semibold text-gray-900">{s.state}</div>
+                  <div className="text-xs text-gray-500">avg risk {s.avg_risk.toFixed(0)}</div>
+                </div>
+              </div>
+              <div className="text-right">
+                <div className="text-xl font-bold text-red-600">{s.n}</div>
+                <div className="text-xs text-gray-500">underserved</div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <p className="text-xs text-gray-500 mt-3">
+          Districts with positive gap (max-risk normalised &gt; KCC query volume normalised). High gap = farmers don't know what to ask.
+        </p>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/DemandPulse.jsx

@@ -0,0 +1,623 @@
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { Link } from "react-router-dom"
+import {
+  AreaChart, Area, LineChart, Line, BarChart, Bar,
+  XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
+  Cell, ScatterChart, Scatter, ZAxis, ReferenceLine, ReferenceDot,
+} from "recharts"
+import pulse from "../data/demandPulse.json"
+import InfoGapMap from "../components/InfoGapMap"
+
+// ============================================================================
+// Design tokens — match the agri-green Tailwind palette
+// ============================================================================
+const TOPIC_COLORS = {
+  pest:           "#dc2626",
+  disease:        "#991b1b",
+  nutrient:       "#16a34a",
+  weather:        "#0284c7",
+  irrigation:     "#0891b2",
+  price:          "#ca8a04",
+  seed:           "#7c3aed",
+  scheme:         "#9333ea",
+  crop_selection: "#059669",
+  soil:           "#65a30d",
+  harvest:        "#ea580c",
+  storage:        "#737373",
+  general:        "#9ca3af",
+}
+const TOPIC_LABELS = {
+  pest:"🐛 Pest", disease:"🦠 Disease", nutrient:"🌱 Nutrient",
+  weather:"⛅ Weather", irrigation:"💧 Irrigation", price:"💰 Price",
+  seed:"🌾 Seed", scheme:"🏛️ Scheme", crop_selection:"🌽 Crop Choice",
+  soil:"🟤 Soil", harvest:"🚜 Harvest", storage:"📦 Storage", general:"❓ General",
+}
+const TOPIC_LABELS_SHORT = {
+  pest:"Pest", disease:"Disease", nutrient:"Nutrient", weather:"Weather",
+  irrigation:"Irrigation", price:"Price", seed:"Seed", scheme:"Scheme",
+  crop_selection:"Crop Choice", soil:"Soil", harvest:"Harvest", storage:"Storage", general:"General",
+}
+
+// ============================================================================
+// Animated number counter
+// ============================================================================
+function AnimatedNumber({ value, duration = 1200, format = n => n.toLocaleString() }) {
+  const [n, setN] = useState(0)
+  const ref = useRef(null)
+  useEffect(() => {
+    const t0 = performance.now()
+    const animate = (t) => {
+      const elapsed = t - t0
+      const p = Math.min(1, elapsed / duration)
+      const eased = 1 - Math.pow(1 - p, 3) // easeOutCubic
+      setN(Math.round(value * eased))
+      if (p < 1) ref.current = requestAnimationFrame(animate)
+    }
+    ref.current = requestAnimationFrame(animate)
+    return () => ref.current && cancelAnimationFrame(ref.current)
+  }, [value, duration])
+  return <span>{format(n)}</span>
+}
+
+// ============================================================================
+// Section wrapper — consistent card styling
+// ============================================================================
+function Section({ id, eyebrow, title, subtitle, children, accent = "agri" }) {
+  return (
+    <section id={id} className="mb-12">
+      <div className="mb-5 max-w-3xl">
+        {eyebrow && (
+          <div className={`inline-block text-xs font-bold uppercase tracking-wider mb-2 px-3 py-1 rounded-full ${
+            accent === "agri" ? "bg-green-100 text-green-800" :
+            accent === "earth" ? "bg-yellow-100 text-yellow-800" :
+            accent === "data"  ? "bg-blue-100 text-blue-800" :
+            accent === "danger"? "bg-red-100 text-red-800" :
+            "bg-gray-100 text-gray-700"
+          }`}>{eyebrow}</div>
+        )}
+        <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
+        {subtitle && <p className="mt-2 text-gray-600 leading-relaxed">{subtitle}</p>}
+      </div>
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+        {children}
+      </div>
+    </section>
+  )
+}
+
+// ============================================================================
+// Custom Recharts tooltip (matches theme)
+// ============================================================================
+function FancyTooltip({ active, payload, label, formatter }) {
+  if (!active || !payload || !payload.length) return null
+  return (
+    <div className="bg-gray-900/95 backdrop-blur text-white text-xs rounded-lg px-3 py-2 shadow-2xl border border-gray-700">
+      {label !== undefined && <div className="font-semibold text-sm mb-1">{label}</div>}
+      {payload.map((p, i) => (
+        <div key={i} className="flex items-center gap-2 mt-0.5">
+          <span className="w-2 h-2 rounded-sm" style={{background: p.color || p.fill}}/>
+          <span className="text-gray-300">{TOPIC_LABELS_SHORT[p.dataKey] || p.name || p.dataKey}:</span>
+          <strong className="text-white">{formatter ? formatter(p.value) : p.value}</strong>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ============================================================================
+// Chart 1: 20-year topic trend — area-stacked, gradient fills
+// ============================================================================
+function TopicTrendChart() {
+  const data = pulse.topicTrends || []
+  if (!data.length) return <p>No data.</p>
+
+  const years = [...new Set(data.map(d => d.year))].sort((a,b)=>a-b)
+  const topics = [...new Set(data.map(d => d.topic))]
+  const keepTopics = topics.filter(t =>
+    Math.max(...data.filter(d=>d.topic===t).map(d=>d.share_pct||0)) > 2.0
+  )
+  const wide = years.map(year => {
+    const row = { year }
+    keepTopics.forEach(t => {
+      const r = data.find(d => d.year===year && d.topic===t)
+      row[t] = r ? r.share_pct : 0
+    })
+    return row
+  })
+
+  return (
+    <div className="w-full" style={{height: 420}}>
+      <ResponsiveContainer>
+        <LineChart data={wide} margin={{top:8, right:30, left:0, bottom:8}}>
+          <defs>
+            {keepTopics.map(t => (
+              <linearGradient key={t} id={`g-${t}`} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%"   stopColor={TOPIC_COLORS[t]} stopOpacity={0.8}/>
+                <stop offset="100%" stopColor={TOPIC_COLORS[t]} stopOpacity={0.0}/>
+              </linearGradient>
+            ))}
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb"/>
+          <XAxis dataKey="year" tick={{fontSize:11, fill:"#6b7280"}}
+                 axisLine={{stroke:"#d1d5db"}}/>
+          <YAxis tick={{fontSize:11, fill:"#6b7280"}}
+                 axisLine={{stroke:"#d1d5db"}}
+                 tickFormatter={v=>`${v}%`}/>
+          <Tooltip content={<FancyTooltip formatter={v=>`${v.toFixed(1)}%`}/>}/>
+          <Legend wrapperStyle={{fontSize:12, paddingTop:8}}
+                  formatter={v => TOPIC_LABELS_SHORT[v] || v}/>
+          {/* PM-KISAN launch reference line */}
+          <ReferenceLine x={2019} stroke="#9333ea" strokeDasharray="3 3" strokeWidth={1.5}
+                         label={{value:"PM-KISAN launch", position:"top", fill:"#9333ea", fontSize:10, fontWeight:600}}/>
+          <ReferenceLine x={2016} stroke="#9333ea" strokeDasharray="3 3" strokeWidth={1.5} opacity={0.5}
+                         label={{value:"PMFBY", position:"top", fill:"#9333ea", fontSize:10}}/>
+          {keepTopics.map(t =>
+            <Line key={t} type="monotone" dataKey={t}
+                  stroke={TOPIC_COLORS[t]} strokeWidth={2.5}
+                  dot={{r:2.5, strokeWidth:0, fill:TOPIC_COLORS[t]}}
+                  activeDot={{r:5, strokeWidth:2, stroke:"white", fill:TOPIC_COLORS[t]}}/>
+          )}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+// ============================================================================
+// Chart 2: Topic share by state (horizontal stacked bars)
+// ============================================================================
+function TopicByStateChart() {
+  const data = pulse.topicByState || []
+  if (!data.length) return <p>No data.</p>
+
+  const states = [...new Set(data.map(d => d.state))]
+                  .sort((a,b) => {
+                    const sa = data.filter(d=>d.state===a).reduce((s,d)=>s+d.query_count,0)
+                    const sb = data.filter(d=>d.state===b).reduce((s,d)=>s+d.query_count,0)
+                    return sb - sa
+                  }).slice(0, 25)
+  const topics = ["pest","disease","nutrient","weather","irrigation","price","seed","scheme","crop_selection","general"]
+  const wide = states.map(state => {
+    const row = { state }
+    topics.forEach(t => {
+      const r = data.find(d => d.state===state && d.topic===t)
+      row[t] = r ? r.share_pct : 0
+    })
+    return row
+  })
+
+  return (
+    <div className="w-full" style={{height: Math.max(420, 26 * states.length + 80)}}>
+      <ResponsiveContainer>
+        <BarChart data={wide} layout="vertical" stackOffset="expand"
+                  margin={{top:8, right:24, left:130, bottom:32}}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb"/>
+          <XAxis type="number" tickFormatter={v=>`${Math.round(v*100)}%`}
+                 tick={{fontSize:11, fill:"#6b7280"}} axisLine={{stroke:"#d1d5db"}}/>
+          <YAxis type="category" dataKey="state"
+                 tick={{fontSize:11, fill:"#374151", fontWeight:500}}
+                 width={120} axisLine={{stroke:"#d1d5db"}}/>
+          <Tooltip content={<FancyTooltip formatter={v=>`${v.toFixed(1)}%`}/>}/>
+          <Legend wrapperStyle={{fontSize:11, paddingTop:16}}
+                  formatter={v => TOPIC_LABELS_SHORT[v] || v}/>
+          {topics.map(t =>
+            <Bar key={t} dataKey={t} stackId="a" fill={TOPIC_COLORS[t]} radius={0}/>
+          )}
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+// ============================================================================
+// Chart 3: Top districts per topic (with topic dropdown)
+// ============================================================================
+function TopDistrictsChart() {
+  const data = pulse.topDistricts || []
+  const topics = useMemo(() =>
+    [...new Set(data.map(d=>d.topic))].sort((a,b) =>
+      data.filter(d=>d.topic===b).reduce((s,d)=>s+d.query_count,0) -
+      data.filter(d=>d.topic===a).reduce((s,d)=>s+d.query_count,0)
+    ), [data])
+  const [topic, setTopic] = useState(topics[0] || "pest")
+  const rows = data.filter(d=>d.topic===topic).slice(0, 10)
+  const color = TOPIC_COLORS[topic] || "#16a34a"
+
+  return (
+    <div>
+      <div className="flex flex-wrap gap-2 mb-5">
+        {topics.map(t => (
+          <button key={t}
+                  onClick={() => setTopic(t)}
+                  className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                    topic===t
+                      ? "shadow-md ring-2 ring-offset-1 text-white"
+                      : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                  }`}
+                  style={topic===t ? {background: TOPIC_COLORS[t], ringColor: TOPIC_COLORS[t]} : {}}>
+            {TOPIC_LABELS[t] || t}
+          </button>
+        ))}
+      </div>
+      <div className="w-full" style={{height: 360}}>
+        <ResponsiveContainer>
+          <BarChart data={rows} layout="vertical" margin={{top:8, right:30, left:180, bottom:8}}>
+            <defs>
+              <linearGradient id="bar-gradient" x1="0" y1="0" x2="1" y2="0">
+                <stop offset="0%"   stopColor={color} stopOpacity={0.6}/>
+                <stop offset="100%" stopColor={color} stopOpacity={1}/>
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb"/>
+            <XAxis type="number" tick={{fontSize:11, fill:"#6b7280"}}
+                   tickFormatter={v => v.toLocaleString()}/>
+            <YAxis type="category" dataKey={d => `${d.district}, ${d.state}`}
+                   tick={{fontSize:11, fill:"#374151"}} width={170}/>
+            <Tooltip content={<FancyTooltip formatter={v=>v.toLocaleString()+" queries"}/>}/>
+            <Bar dataKey="query_count" fill="url(#bar-gradient)" radius={[0,6,6,0]}/>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Chart 4: Crop × topic heatmap (real heatmap, not stacked bars)
+// ============================================================================
+function CropTopicHeatmap() {
+  const data = pulse.cropTopic || []
+  if (!data.length) return <p>No data.</p>
+
+  const crops = [...new Set(data.map(d=>d.crop))].filter(Boolean)
+                  .sort((a,b) => {
+                    const sa = data.filter(d=>d.crop===a).reduce((s,d)=>s+d.query_count,0)
+                    const sb = data.filter(d=>d.crop===b).reduce((s,d)=>s+d.query_count,0)
+                    return sb - sa
+                  }).slice(0, 15)
+  const topics = ["pest","disease","nutrient","weather","irrigation","price","seed","scheme","crop_selection"]
+
+  // Compute per-crop share
+  const matrix = crops.map(crop => {
+    const cropData = data.filter(d => d.crop === crop)
+    const total = cropData.filter(d => topics.includes(d.topic))
+                          .reduce((s,d) => s + d.query_count, 0)
+    return {
+      crop,
+      total,
+      cells: topics.map(t => {
+        const r = cropData.find(d => d.topic === t)
+        return {
+          topic: t,
+          count: r ? r.query_count : 0,
+          share: total ? (r ? r.query_count : 0) / total : 0,
+        }
+      })
+    }
+  })
+  // Max share for color scaling
+  const maxShare = Math.max(...matrix.flatMap(r => r.cells.map(c => c.share)))
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-xs border-collapse">
+        <thead>
+          <tr>
+            <th className="text-left p-2 sticky left-0 bg-white"></th>
+            {topics.map(t => (
+              <th key={t} className="p-2 text-center font-semibold text-gray-700 min-w-[80px]">
+                <div className="leading-tight">{TOPIC_LABELS[t]}</div>
+              </th>
+            ))}
+            <th className="p-2 text-right text-gray-500">Volume</th>
+          </tr>
+        </thead>
+        <tbody>
+          {matrix.map(row => (
+            <tr key={row.crop} className="hover:bg-gray-50">
+              <td className="p-2 font-semibold text-gray-900 text-sm sticky left-0 bg-white border-r border-gray-100">
+                {row.crop}
+              </td>
+              {row.cells.map((cell, i) => {
+                const intensity = maxShare ? cell.share / maxShare : 0
+                const bg = `rgba(22, 163, 74, ${0.05 + intensity * 0.9})`
+                const fg = intensity > 0.5 ? "white" : "#111827"
+                return (
+                  <td key={i} className="p-1 text-center"
+                      style={{background: bg, color: fg, fontWeight: 600}}
+                      title={`${row.crop} × ${TOPIC_LABELS_SHORT[cell.topic]}: ${cell.count.toLocaleString()} queries (${(cell.share*100).toFixed(1)}%)`}>
+                    {(cell.share*100).toFixed(0)}%
+                  </td>
+                )
+              })}
+              <td className="p-2 text-right text-gray-500 font-medium">
+                {row.total.toLocaleString()}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <p className="text-xs text-gray-500 mt-3">
+        Each cell = % of that crop's queries falling in that topic (recent 5-yr window). Darker green = higher concentration.
+      </p>
+    </div>
+  )
+}
+
+// ============================================================================
+// Chart 5: Mandi correlation (scatter + leaderboard)
+// ============================================================================
+function MandiCorrelationChart() {
+  const data = pulse.mandiCorrelation || []
+  if (!data.length) return <p className="text-gray-500 text-sm">No mandi data joined.</p>
+
+  // Filter to reliable cells: n_months >= 12
+  const reliable = data.filter(d => d.n_months >= 12)
+  const top = [...reliable].sort((a,b) => Math.abs(b.spearman_r) - Math.abs(a.spearman_r)).slice(0, 12)
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="lg:col-span-2" style={{height: 380}}>
+        <ResponsiveContainer>
+          <ScatterChart margin={{top:8, right:24, left:8, bottom:32}}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb"/>
+            <XAxis type="number" dataKey="total_queries" tick={{fontSize:11, fill:"#6b7280"}}
+                   label={{value:"KCC price-query volume", position:"insideBottom", offset:-10, style:{fontSize:11, fill:"#6b7280"}}}/>
+            <YAxis type="number" dataKey="spearman_r" domain={[-1,1]} tick={{fontSize:11, fill:"#6b7280"}}
+                   label={{value:"Spearman r", angle:-90, position:"insideLeft", style:{fontSize:11, fill:"#6b7280"}}}/>
+            <ZAxis type="number" dataKey="n_months" range={[40, 400]}/>
+            <ReferenceLine y={0} stroke="#9ca3af" strokeDasharray="3 3"/>
+            <Tooltip content={({active, payload}) => {
+              if (!active || !payload || !payload.length) return null
+              const d = payload[0].payload
+              const r = d.spearman_r
+              return <div className="bg-gray-900 text-white text-xs rounded-lg px-3 py-2 shadow-xl">
+                <div className="font-bold text-sm">{d.state} — {d.crop}</div>
+                <div className="mt-0.5" style={{color: r > 0 ? "#86efac" : "#fca5a5"}}>
+                  r = <strong>{r > 0 ? "+" : ""}{r}</strong>
+                </div>
+                <div className="text-gray-400 mt-0.5">n={d.n_months} months · {d.total_queries.toLocaleString()} queries</div>
+              </div>
+            }}/>
+            <Scatter data={reliable.filter(d => d.spearman_r >= 0)} fill="#16a34a" fillOpacity={0.6}/>
+            <Scatter data={reliable.filter(d => d.spearman_r < 0)}  fill="#dc2626" fillOpacity={0.6}/>
+          </ScatterChart>
+        </ResponsiveContainer>
+      </div>
+      <div className="max-h-[380px] overflow-y-auto">
+        <h4 className="text-xs font-semibold text-gray-700 mb-3 uppercase tracking-wide">Strongest correlations</h4>
+        <div className="space-y-1.5">
+          {top.map((d,i) => (
+            <div key={i} className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50">
+              <div className="text-xs">
+                <div className="font-semibold text-gray-900">{d.crop}</div>
+                <div className="text-gray-500">{d.state} · n={d.n_months}</div>
+              </div>
+              <span className={`text-sm font-bold tabular-nums ${
+                d.spearman_r > 0 ? "text-green-600" : "text-red-600"
+              }`}>
+                {d.spearman_r > 0 ? "+" : ""}{d.spearman_r}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Chart 6: Scheme uptake — annotated line chart
+// ============================================================================
+function SchemeUptakeChart() {
+  const data = pulse.schemeUptake || []
+  if (!data.length) return <p>No data.</p>
+
+  const schemes = Object.keys(data[0]).filter(k => k !== "year")
+  const COLORS = ["#dc2626","#9333ea","#16a34a","#ca8a04","#2563eb","#ea580c","#0891b2"]
+
+  return (
+    <div className="w-full" style={{height: 380}}>
+      <ResponsiveContainer>
+        <LineChart data={data} margin={{top:24, right:30, left:0, bottom:8}}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb"/>
+          <XAxis dataKey="year" tick={{fontSize:11, fill:"#6b7280"}}/>
+          <YAxis tick={{fontSize:11, fill:"#6b7280"}}/>
+          <Tooltip content={<FancyTooltip/>}/>
+          <Legend wrapperStyle={{fontSize:11, paddingTop:8}}/>
+          {/* Launch markers */}
+          <ReferenceLine x={2019} stroke="#dc2626" strokeDasharray="2 4" opacity={0.5}/>
+          <ReferenceLine x={2016} stroke="#9333ea" strokeDasharray="2 4" opacity={0.5}/>
+          <ReferenceLine x={2015} stroke="#16a34a" strokeDasharray="2 4" opacity={0.5}/>
+          {schemes.map((s, i) =>
+            <Line key={s} type="monotone" dataKey={s}
+                  stroke={COLORS[i%COLORS.length]} strokeWidth={2.5}
+                  dot={{r:2.5, strokeWidth:0, fill:COLORS[i%COLORS.length]}}
+                  activeDot={{r:5, strokeWidth:2, stroke:"white"}}/>
+          )}
+        </LineChart>
+      </ResponsiveContainer>
+      <div className="text-xs text-gray-500 mt-2 flex gap-4 flex-wrap">
+        <span><span className="inline-block w-3 h-0.5 bg-red-600 mr-1"/>2019: PM-KISAN launch</span>
+        <span><span className="inline-block w-3 h-0.5 bg-purple-600 mr-1"/>2016: PMFBY launch</span>
+        <span><span className="inline-block w-3 h-0.5 bg-green-600 mr-1"/>2015: Soil Health Card launch</span>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// KPI card
+// ============================================================================
+function KPICard({ label, value, sublabel, icon, color = "agri" }) {
+  const colors = {
+    agri:    "from-green-500  to-emerald-600 text-green-50",
+    purple:  "from-purple-500 to-purple-700  text-purple-50",
+    blue:    "from-blue-500   to-blue-700    text-blue-50",
+    earth:   "from-yellow-500 to-amber-600   text-yellow-50",
+  }
+  return (
+    <div className={`bg-gradient-to-br ${colors[color]} rounded-2xl p-5 shadow-lg hover:shadow-xl transition-shadow`}>
+      <div className="flex items-start justify-between">
+        <div className="text-xs uppercase tracking-wider opacity-80 font-semibold">{label}</div>
+        <div className="text-2xl opacity-50">{icon}</div>
+      </div>
+      <div className="mt-2 text-3xl font-bold tabular-nums">{value}</div>
+      {sublabel && <div className="mt-1 text-xs opacity-75">{sublabel}</div>}
+    </div>
+  )
+}
+
+// ============================================================================
+// Buyer-callout — "what this means for X"
+// ============================================================================
+function BuyerCallout({ icon, audience, claim, evidence }) {
+  return (
+    <div className="bg-gradient-to-br from-gray-50 to-white border border-gray-200 rounded-xl p-4 hover:shadow-md transition-shadow">
+      <div className="flex items-start gap-3">
+        <div className="text-2xl">{icon}</div>
+        <div>
+          <div className="text-xs font-semibold uppercase tracking-wide text-gray-500">{audience}</div>
+          <div className="mt-1 font-semibold text-gray-900 text-sm">{claim}</div>
+          <div className="mt-1 text-xs text-gray-600">{evidence}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Page
+// ============================================================================
+export default function DemandPulse() {
+  const summary = pulse.summary || {}
+  const totalQ = summary.totalQueries || 0
+  const yMin = summary.years?.min, yMax = summary.years?.max
+  const states = summary.states, topics = summary.topics
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-green-50">
+      {/* Hero */}
+      <div className="gradient-agri text-white">
+        <div className="max-w-7xl mx-auto px-6 py-12">
+          <Link to="/" className="text-green-100 hover:text-white text-sm inline-flex items-center gap-1">
+            ← Back to home
+          </Link>
+          <div className="mt-4 flex items-start justify-between flex-wrap gap-6">
+            <div className="max-w-3xl">
+              <div className="inline-block text-xs font-bold uppercase tracking-wider mb-3 px-3 py-1 rounded-full bg-white/20 text-white">
+                Asset #8 · India Demand Pulse
+              </div>
+              <h1 className="text-4xl md:text-5xl font-bold leading-tight">
+                What India's farmers actually ask
+              </h1>
+              <p className="mt-4 text-green-100 text-lg leading-relaxed">
+                Twenty years of Kisan Call Center queries — analyzed, joined with
+                mandi prices and pest risk forecasts — to surface the demand patterns
+                no Indian agritech, bank, or insurer can see today.
+              </p>
+            </div>
+            <div className="hidden md:block text-right">
+              <div className="text-7xl font-bold leading-none opacity-30">{(yMax || 2025) - (yMin || 2006) + 1}</div>
+              <div className="text-sm opacity-75 mt-1">years of farmer demand</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-6 py-8">
+        {/* KPI strip */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 -mt-12 mb-12 relative z-10">
+          <KPICard label="Total queries"  value={<AnimatedNumber value={totalQ}/>} sublabel="cleaned KCC records" icon="📞" color="agri"/>
+          <KPICard label="Years covered"  value={`${yMin}–${yMax}`} sublabel={`${(yMax||2025) - (yMin||2006) + 1} continuous years`} icon="📅" color="purple"/>
+          <KPICard label="States + UTs"   value={<AnimatedNumber value={states} duration={800}/>} sublabel="28 states + 8 UTs (pre-2020)" icon="🗺️" color="blue"/>
+          <KPICard label="Topic categories" value={<AnimatedNumber value={topics} duration={800}/>} sublabel="auto-classified" icon="🏷️" color="earth"/>
+        </div>
+
+        {/* Buyer callouts */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
+          <BuyerCallout icon="🏦" audience="For banks & insurers"
+                        claim="Distress detection 30 days early"
+                        evidence="Pest+disease query spikes precede insurance claims by 2-4 weeks; map every district by signal lag."/>
+          <BuyerCallout icon="🏭" audience="For input companies"
+                        claim="Regional demand forecasting"
+                        evidence="Telangana asks pest. Tamil Nadu asks nutrient. Each state needs different SKU mix."/>
+          <BuyerCallout icon="🏛️" audience="For govt & policy"
+                        claim="Scheme uptake measured per district"
+                        evidence="PM-KISAN went from 0 to 210 mentions in 2019. Track every scheme's adoption curve."/>
+        </div>
+
+        {/* Section 1: 20-year topic trend */}
+        <Section eyebrow="The 20-year story"
+                 title="What farmers ask has fundamentally shifted"
+                 subtitle={<>Scheme queries went from <strong>1.2% share in 2010 to 30% in 2025</strong>. PM-KISAN's 2019 launch is visible as a step-change in the data. KCC is now primarily a government-scheme helpdesk.</>}
+                 accent="agri">
+          <TopicTrendChart/>
+        </Section>
+
+        {/* Section 2: state topic mix */}
+        <Section eyebrow="State-level demand"
+                 title="Each state asks completely different things"
+                 subtitle="Top 25 states by query volume, share of each topic. Read horizontally — Jharkhand is 72% scheme inquiries, Himachal Pradesh is 29% pest, West Bengal is 13% price. One product won't fit all."
+                 accent="data">
+          <TopicByStateChart/>
+        </Section>
+
+        {/* Section 3: crop topic heatmap */}
+        <Section eyebrow="Crop demand profile"
+                 title="Each crop has a fingerprint"
+                 subtitle="What topics dominate queries for each major crop. Cotton is pest-heavy; sugarcane is variety + irrigation; wheat is balanced across topics. Drives input-company territory planning."
+                 accent="agri">
+          <CropTopicHeatmap/>
+        </Section>
+
+        {/* Section 4: top districts per topic */}
+        <Section eyebrow="District leaderboard"
+                 title="Where each topic concentrates"
+                 subtitle="Top 10 districts per topic (recent 5-year window). Filterable by topic — pick 'pest' for input companies, 'scheme' for banks, 'price' for traders."
+                 accent="data">
+          <TopDistrictsChart/>
+        </Section>
+
+        {/* Section 5: mandi correlation */}
+        <Section eyebrow="Cross-asset signal"
+                 title="Mandi prices ↔ KCC query volume"
+                 subtitle={<>For specific high-history crop-state pairs there's a robust multi-year relationship — <strong>MP wheat r=+0.52 over 162 months</strong>, MP mustard r=+0.58 over 124 months. Population-level mean is near zero, but the strong cells are publishable leading indicators for banks and FPOs.</>}
+                 accent="earth">
+          <MandiCorrelationChart/>
+        </Section>
+
+        {/* Section 6: info gap map */}
+        <Section eyebrow="Underserved districts"
+                 title="Where farmers don't know what to ask"
+                 subtitle={<>The information-gap map: high pest model risk (AUC 0.937) <em>plus</em> low KCC query volume = districts where farmers face pest pressure but aren't engaging the helpline. <strong>Assam dominates the top-5 with 100% risk and zero queries.</strong> Direct buyer slide for IFFCO Tokio (claim leading indicators) and DeHaat/CropIn (extension expansion).</>}
+                 accent="danger">
+          <InfoGapMap data={pulse.infoGap || []}/>
+        </Section>
+
+        {/* Section 7: scheme uptake */}
+        <Section eyebrow="Government scheme adoption"
+                 title="Every scheme launch leaves a fingerprint"
+                 subtitle="Year-by-year mention curves for major schemes. PM-KISAN 2019, PMFBY 2016, Soil Health Card 2015 — all visible. MSP queries grew 33× from 2010-2024 (reflects 2020-21 farmer agitation + post-agitation price awareness)."
+                 accent="agri">
+          <SchemeUptakeChart/>
+        </Section>
+
+        {/* Methodology footer */}
+        <div className="bg-yellow-50 border border-yellow-200 rounded-2xl p-5 text-sm text-gray-700 leading-relaxed">
+          <div className="font-semibold text-gray-900 mb-2">Methodology</div>
+          KCC queries 2006-2025 (20 yearly parquets, 43.9M raw rows) classified
+          into {topics} topics using KCC's own QueryType column (primary signal)
+          + free-text regex fallback. State names normalised to {states}
+          canonical (28 states + 8 UTs, pre-2020 boundaries). Mandi correlation
+          uses AGMARKNET state-aggregate avg_price percentile, Spearman rank.
+          Info-gap uses district stacking pest model (AUC 0.937) max-risk vs.
+          KCC pest+disease query volume in 2020-25 window. Scheme uptake is a
+          mention-count proxy on the top-3 queries per cohort. All raw analytics
+          in <code className="bg-yellow-100 px-1.5 py-0.5 rounded">data/india_kcc_*.parquet</code>.
+          Full findings: <code className="bg-yellow-100 px-1.5 py-0.5 rounded">docs/DEMAND_PULSE_FINDINGS.md</code>.
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/Landing.jsx

@@ -32,6 +32,7 @@ export default function Landing() {
         <span className="text-2xl font-bold text-agri-700">🌾 KCC AgriAdvisor</span>
         <div className="flex gap-3">
           <button onClick={() => nav("/proof")}  className="btn-outline text-sm py-2 px-4">📊 Proof</button>
+          <button onClick={() => nav("/pulse")}  className="btn-outline text-sm py-2 px-4">📈 Demand Pulse</button>
           <button onClick={() => nav("/farmer")} className="btn-outline text-sm py-2 px-4">Farmer Portal</button>
           <button onClick={() => nav("/b2b")}    className="btn-primary text-sm py-2 px-4">Enterprise Login</button>
         </div>