feat(queryless): simulate AI responses for home hero chips

Clicking one of the three suggested-question chips now shows the
Thinking indicator for 2s and then reveals a pre-calculated answer
(markdown + chart + method block) instead of calling the API. Typed
questions still use the live streaming endpoint.

Canned answers and the chip prompt list live in a single module so
the chips and their responses stay in sync.

Author: demenech

src/app/[locale]/page.tsx

@@ -12,6 +12,7 @@ import { getAllGroups } from "@/lib/ckan/group";
 import { getAllReports } from "@/lib/reports";
 import { cn } from "@/lib/utils";
 import { isQuerylessEnabled } from "@/lib/queryless";
+import { QUERYLESS_SUGGESTED_PROMPTS } from "@/lib/queryless-canned";
 import { toPublicGroupSlug } from "@/lib/portal-name";
 import { ArrowRight, Code2, FolderKanban, Mail } from "lucide-react";
 import { Metadata } from "next";
@@ -40,11 +41,7 @@ export default async function Home() {
   const apiDocsUrl = "https://docs.ckan.org/en/2.11/api/index.html";
   const requestDataHref =
     "mailto:data@example.com?subject=Open%20Data%20Request";
-  const suggestedPrompts = [
-    "How has global temperature changed since 1980?",
-    "Compare atmospheric CO2 trends since 2000",
-    "Which countries spend most on pharmaceuticals?",
-  ];
+  const suggestedPrompts = QUERYLESS_SUGGESTED_PROMPTS;
 
   const [featuredDatasetsResult, statsResult, visualizationsResult, allGroups] =
     await Promise.all([

src/components/queryless/QuerylessAssistant.tsx

@@ -19,6 +19,7 @@ import { Button } from "@/components/ui/button";
 import { CardTitle } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
 import { QUERYLESS_OPEN_EVENT, querylessConfig } from "@/lib/queryless";
+import { getCannedResponse } from "@/lib/queryless-canned";
 import { locales } from "@/i18n/config";
 import VegaSpecRenderer, { parseVegaSpecText } from "./VegaSpecRenderer";
 
@@ -41,6 +42,9 @@ const QUERYLESS_DAILY_LIMIT_STORAGE_KEY = "queryless:daily-limit";
 const QUERYLESS_RATE_LIMIT_MAX_REQUESTS = 4;
 const QUERYLESS_RATE_LIMIT_WINDOW_MS = 60_000;
 const QUERYLESS_DAILY_LIMIT_MAX_REQUESTS = 20;
+// How long the "Thinking..." indicator shows before a pre-calculated
+// (simulated) answer is revealed for the home-page suggested-question chips.
+const QUERYLESS_SIMULATED_THINKING_MS = 2000;
 
 function createSessionId() {
   return `queryless-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
@@ -526,6 +530,7 @@ export default function QuerylessAssistant() {
   const previousMessageCountRef = useRef(0);
   const shouldAutoScrollRef = useRef(true);
   const streamRafRef = useRef<number | null>(null);
+  const simulateTimeoutRef = useRef<number | null>(null);
   const streamedAnswerRef = useRef("");
   const sessionIdRef = useRef<string>(createSessionId());
   const lastContextPathRef = useRef<string | null>(null);
@@ -783,6 +788,41 @@ export default function QuerylessAssistant() {
     }
   }, [context.pageDirective, context.path, input, isSending, messages, scrollMessagesToBottom]);
 
+  // Simulate an AI response for the home-page suggested-question chips: show the
+  // user's question, display the "Thinking..." indicator for a short delay, then
+  // reveal a pre-calculated answer. No API request is made and usage limits are
+  // not touched, since nothing is actually sent upstream.
+  const simulateMessage = useCallback(
+    (question: string, answer: string) => {
+      const trimmed = question.trim();
+      if (!trimmed || isSending) return;
+
+      hasExchangeSinceLastPageChangeRef.current = true;
+      shouldAutoScrollRef.current = true;
+      const assistantMessageId = `assistant-${Date.now()}`;
+
+      setMessages((prev) => [
+        ...prev,
+        { id: `user-${Date.now()}`, role: "user", content: trimmed },
+        { id: assistantMessageId, role: "assistant", content: "" },
+      ]);
+      setInput("");
+      setError(null);
+      setIsSending(true);
+
+      simulateTimeoutRef.current = window.setTimeout(() => {
+        setMessages((prev) =>
+          prev.map((message) =>
+            message.id === assistantMessageId ? { ...message, content: answer } : message
+          )
+        );
+        setIsSending(false);
+        simulateTimeoutRef.current = null;
+      }, QUERYLESS_SIMULATED_THINKING_MS);
+    },
+    [isSending]
+  );
+
   useEffect(() => {
     const handleOpenQueryless = (event: Event) => {
       const customEvent = event as CustomEvent<{
@@ -799,8 +839,13 @@ export default function QuerylessAssistant() {
       customEvent.preventDefault();
 
       if (customEvent.detail?.autoSubmit && prompt) {
+        const cannedAnswer = getCannedResponse(prompt);
         window.setTimeout(() => {
-          void sendMessage(prompt);
+          if (cannedAnswer) {
+            simulateMessage(prompt, cannedAnswer);
+          } else {
+            void sendMessage(prompt);
+          }
         }, 0);
       }
     };
@@ -809,7 +854,7 @@ export default function QuerylessAssistant() {
     return () => {
       window.removeEventListener(QUERYLESS_OPEN_EVENT, handleOpenQueryless as EventListener);
     };
-  }, [sendMessage]);
+  }, [sendMessage, simulateMessage]);
 
   useEffect(() => {
     if (!rateLimitRetryAt && !rateLimitMessage) return;
@@ -983,6 +1028,10 @@ export default function QuerylessAssistant() {
         window.cancelAnimationFrame(streamRafRef.current);
         streamRafRef.current = null;
       }
+      if (simulateTimeoutRef.current !== null) {
+        window.clearTimeout(simulateTimeoutRef.current);
+        simulateTimeoutRef.current = null;
+      }
     },
     []
   );

src/lib/queryless-canned.ts

@@ -0,0 +1,118 @@
+// Pre-calculated Queryless answers used to simulate an AI response for the
+// home-page suggested-question chips. Clicking one of these chips opens the
+// assistant, shows the "Thinking..." indicator for a moment, and then renders
+// the matching canned answer below — no real API request is made.
+//
+// The map is keyed by the exact prompt text shown on the chip, so
+// QUERYLESS_SUGGESTED_PROMPTS is the single source of truth: the home page
+// renders these strings as chips and the assistant looks the answer up by the
+// same string.
+
+const TEMPERATURE_ANSWER = `Global surface temperatures have warmed markedly since 1980. Compared with the 20th-century average, the annual temperature anomaly has risen from roughly **+0.3 °C** in 1980 to about **+1.2 °C** in 2023 — a gain of nearly a full degree in just over four decades, with the steepest warming after 2000.
+
+\`\`\`chart
+{
+  "title": "Global temperature anomaly since 1980",
+  "mark": {"type": "line", "point": true, "color": "#e11d48"},
+  "data": {
+    "values": [
+      {"year": 1980, "anomaly": 0.28},
+      {"year": 1985, "anomaly": 0.14},
+      {"year": 1990, "anomaly": 0.45},
+      {"year": 1995, "anomaly": 0.46},
+      {"year": 2000, "anomaly": 0.42},
+      {"year": 2005, "anomaly": 0.69},
+      {"year": 2010, "anomaly": 0.72},
+      {"year": 2015, "anomaly": 0.90},
+      {"year": 2020, "anomaly": 1.02},
+      {"year": 2023, "anomaly": 1.17}
+    ]
+  },
+  "encoding": {
+    "x": {"field": "year", "type": "quantitative", "title": "Year", "axis": {"format": "d"}},
+    "y": {"field": "anomaly", "type": "quantitative", "title": "Temp anomaly (°C)"}
+  }
+}
+\`\`\`
+
+The warming is not steady year to year, but the long-term trend is unmistakable and accelerating.
+
+[[QUERYLESS_METHOD]]
+Values are global land–ocean temperature anomalies relative to the 1901–2000 mean, sampled at five-year intervals (plus the latest year). Figures are illustrative of the widely reported GISTEMP/HadCRUT records.
+[[/QUERYLESS_METHOD]]`;
+
+const CO2_ANSWER = `Atmospheric CO₂ has risen steadily since 2000. Measured at Mauna Loa, the annual mean climbed from about **369 ppm** in 2000 to roughly **421 ppm** in 2023 — an increase of more than **50 ppm** (about 14%) in a little over two decades, with the yearly rise itself getting faster.
+
+\`\`\`chart
+{
+  "title": "Atmospheric CO₂ concentration since 2000 (ppm)",
+  "mark": {"type": "line", "point": true, "color": "#0f766e"},
+  "data": {
+    "values": [
+      {"year": 2000, "ppm": 369.5},
+      {"year": 2003, "ppm": 375.8},
+      {"year": 2006, "ppm": 381.9},
+      {"year": 2009, "ppm": 387.4},
+      {"year": 2012, "ppm": 393.8},
+      {"year": 2015, "ppm": 400.8},
+      {"year": 2018, "ppm": 408.5},
+      {"year": 2021, "ppm": 416.4},
+      {"year": 2023, "ppm": 421.1}
+    ]
+  },
+  "encoding": {
+    "x": {"field": "year", "type": "quantitative", "title": "Year", "axis": {"format": "d"}},
+    "y": {"field": "ppm", "type": "quantitative", "title": "CO₂ (ppm)", "scale": {"zero": false}}
+  }
+}
+\`\`\`
+
+The trend line is remarkably smooth — annual growth has averaged around 2 ppm per year and shows no sign of slowing.
+
+[[QUERYLESS_METHOD]]
+Values are annual mean atmospheric CO₂ concentrations in parts per million, in the style of the NOAA Mauna Loa (Keeling Curve) record, sampled at three-year intervals plus the latest year. Figures are illustrative.
+[[/QUERYLESS_METHOD]]`;
+
+const PHARMA_ANSWER = `Pharmaceutical spending per capita is highest in the United States by a wide margin, followed by other high-income economies. On a per-person basis, the **United States** spends roughly **$1,430 per year** on pharmaceuticals — well ahead of Switzerland, Germany and Japan.
+
+\`\`\`chart
+{
+  "title": "Pharmaceutical spending per capita (USD/year)",
+  "mark": {"type": "bar", "color": "#4f46e5"},
+  "data": {
+    "values": [
+      {"country": "United States", "spend": 1432},
+      {"country": "Switzerland", "spend": 963},
+      {"country": "Germany", "spend": 884},
+      {"country": "Japan", "spend": 817},
+      {"country": "Canada", "spend": 790},
+      {"country": "France", "spend": 646},
+      {"country": "Italy", "spend": 592},
+      {"country": "United Kingdom", "spend": 497}
+    ]
+  },
+  "encoding": {
+    "y": {"field": "country", "type": "nominal", "title": null, "sort": "-x"},
+    "x": {"field": "spend", "type": "quantitative", "title": "USD per capita"}
+  }
+}
+\`\`\`
+
+The gap between the US and the next-highest spenders is striking — reflecting both higher drug prices and higher utilisation.
+
+[[QUERYLESS_METHOD]]
+Values are illustrative annual pharmaceutical expenditure per capita in US dollars, in the style of OECD Health Statistics. Countries are sorted from highest to lowest spend.
+[[/QUERYLESS_METHOD]]`;
+
+export const QUERYLESS_CANNED_RESPONSES: Record<string, string> = {
+  "How has global temperature changed since 1980?": TEMPERATURE_ANSWER,
+  "Compare atmospheric CO2 trends since 2000": CO2_ANSWER,
+  "Which countries spend most on pharmaceuticals?": PHARMA_ANSWER,
+};
+
+// Order matters: this is the exact list rendered as home-page chips.
+export const QUERYLESS_SUGGESTED_PROMPTS = Object.keys(QUERYLESS_CANNED_RESPONSES);
+
+export function getCannedResponse(prompt: string): string | null {
+  return QUERYLESS_CANNED_RESPONSES[prompt.trim()] ?? null;
+}