Add learning strategies, audio input/output, and UX polish

Learning strategies:
- Five teaching strategies: Explain, Quiz me, Socratic, Devil's advocate,
  Perspectives. Selectable on landing page and switchable mid-conversation.
- "Make me think" toggle appends reflection prompts to every response.
- Strategy prompts use forceful instructions for small local models.

Audio:
- Text-to-speech via speechSynthesis (system voices, male/female, offline).
  Speaker icon on each tutor response, auto-read option in settings.
- Speech-to-text via Web Speech API (default, online) or Transformers.js
  Whisper (opt-in, fully local, 40MB model download). Mic button in chat.
- Audio settings section with voice selection, auto-read toggle, and
  STT provider choice with plain-English trade-off explanation.

UX improvements:
- Landing page reworked: value proposition subtitle, topic suggestions
  below input, strategy picker, search toggle, notes with radio buttons
  for "add to web search" vs "use only my notes".
- Warning when teaching without grounded sources.
- About page rewritten with README content.
- Reduced top margin on landing page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Michael Borck

app/about/page.tsx

@@ -11,9 +11,10 @@ import {
   ReconnectInterval,
 } from "eventsource-parser";
 import { getSystemPrompt } from "@/utils/utils";
+import { getStrategyById, nudgePrompt } from "@/utils/strategies";
 import Chat from "@/components/Chat";
 
-const AUTO_SUMMARISE_THRESHOLD = 20000; // chars — roughly 5K tokens
+const AUTO_SUMMARISE_THRESHOLD = 20000;
 
 type Phase = "landing" | "preparing" | "chat";
 
@@ -29,10 +30,29 @@ export default function Home() {
   const [ageGroup, setAgeGroup] = useState("Middle School");
   const [customText, setCustomText] = useState("");
 
+  // Strategy state
+  const [strategyId, setStrategyId] = useState("explain");
+  const [nudgeEnabled, setNudgeEnabled] = useState(false);
+
+  // Search toggle (landing page override)
+  const [searchWeb, setSearchWeb] = useState(true);
+
+  // Audio settings
+  const [audioSettings, setAudioSettings] = useState({
+    voiceGender: "female" as "male" | "female",
+    autoRead: false,
+    sttProvider: "web" as "web" | "whisper",
+  });
+
+  // Keep parsed sources for rebuilding prompt on strategy change
+  const [parsedSources, setParsedSources] = useState<
+    { fullContent: string }[]
+  >([]);
+
   // Preparation phase steps
   const [prepSteps, setPrepSteps] = useState<PrepStep[]>([]);
 
-  // Load default education level from settings on mount
+  // Load defaults from settings on mount
   useEffect(() => {
     try {
       const savedSettings = localStorage.getItem("studybuddy-settings");
@@ -41,9 +61,17 @@ export default function Home() {
         if (settings.defaultEducationLevel) {
           setAgeGroup(settings.defaultEducationLevel);
         }
+        // If search is disabled in settings, default the toggle off
+        if (settings.searchEngine === "disabled") {
+          setSearchWeb(false);
+        }
+        // Load audio settings
+        if (settings.voiceGender) setAudioSettings((prev) => ({ ...prev, voiceGender: settings.voiceGender }));
+        if (settings.autoRead !== undefined) setAudioSettings((prev) => ({ ...prev, autoRead: settings.autoRead }));
+        if (settings.sttProvider) setAudioSettings((prev) => ({ ...prev, sttProvider: settings.sttProvider }));
       }
     } catch (error) {
-      console.warn("Failed to load default education level:", error);
+      console.warn("Failed to load settings:", error);
     }
   }, []);
 
@@ -93,30 +121,47 @@ export default function Home() {
     setter((prev) => prev.map((s, i) => (i === index ? { ...s, status } : s)));
   };
 
+  // Build system prompt with current strategy/nudge settings
+  const buildSystemPrompt = useCallback(
+    (parsed: { fullContent: string }[], sid: string, nudge: boolean) => {
+      const strategy = getStrategyById(sid);
+      return getSystemPrompt(
+        parsed,
+        ageGroup,
+        customText || undefined,
+        strategy.prompt,
+        nudge ? nudgePrompt : undefined,
+      );
+    },
+    [ageGroup, customText],
+  );
+
   const handleInitialChat = async () => {
     const currentTopic = inputValue;
     setTopic(currentTopic);
     setInputValue("");
     setPhase("preparing");
     setLoading(true);
 
-    // Check if search is enabled
-    let searchEnabled = true;
-    try {
-      const savedSettings = localStorage.getItem("studybuddy-settings");
-      if (savedSettings) {
-        const settings = JSON.parse(savedSettings);
-        if (settings.searchEngine === "disabled") {
-          searchEnabled = false;
+    // Determine if we should search — landing page toggle AND settings
+    let shouldSearch = searchWeb;
+    if (shouldSearch) {
+      try {
+        const savedSettings = localStorage.getItem("studybuddy-settings");
+        if (savedSettings) {
+          const settings = JSON.parse(savedSettings);
+          if (settings.searchEngine === "disabled") {
+            shouldSearch = false;
+          }
         }
-      }
-    } catch {}
+      } catch {}
+    }
 
     // Build initial steps
     const steps: PrepStep[] = [
       {
-        label: searchEnabled ? "Searching for sources..." : "Web search disabled",
-        status: searchEnabled ? "active" : "skipped",
+        label: shouldSearch ? "Searching for sources..." : "Web search off",
+        status: shouldSearch ? "active" : "skipped",
       },
       { label: "Reading web pages...", status: "waiting" },
       { label: "Preparing your tutor...", status: "waiting" },
@@ -127,7 +172,7 @@ export default function Home() {
     let fetchedSources: { name: string; url: string }[] = [];
 
     // Step 1: Search
-    if (searchEnabled) {
+    if (shouldSearch) {
       try {
         const sourcesResponse = await fetch("/api/getSources", {
           method: "POST",
@@ -162,7 +207,7 @@ export default function Home() {
       }
       updateStep(1, "done", setPrepSteps);
     } else {
-      updateStep(1, fetchedSources.length === 0 && searchEnabled ? "skipped" : "skipped", setPrepSteps);
+      updateStep(1, "skipped", setPrepSteps);
     }
 
     // Auto-summarise if content is too large
@@ -171,7 +216,6 @@ export default function Home() {
       (customText?.length || 0);
 
     if (totalContentSize > AUTO_SUMMARISE_THRESHOLD && parsed.length > 0) {
-      // Insert a summarising step before "Preparing"
       setPrepSteps((prev) => [
         ...prev.slice(0, 2),
         { label: "Summarising sources to fit...", status: "active" },
@@ -196,50 +240,50 @@ export default function Home() {
       );
     }
 
+    // Store parsed sources for strategy switching
+    setParsedSources(parsed);
+
     // Step 3: Prepare tutor
     setPrepSteps((prev) =>
       prev.map((s, i) =>
         i === prev.length - 1 ? { ...s, status: "active" } : s,
       ),
     );
 
-    // If no sources and no custom text, teach from knowledge
     const hasContent = parsed.length > 0 || customText;
+    const strategy = getStrategyById(strategyId);
+    const nudge = nudgeEnabled ? nudgePrompt : undefined;
+
+    const systemContent = hasContent
+      ? buildSystemPrompt(parsed, strategyId, nudgeEnabled)
+      : `You are a professional interactive personal tutor. The student wants to learn about a topic at a ${ageGroup} level. You don't have specific source material for this topic, so teach from your own knowledge. Be upfront that you're teaching from general knowledge and may not have the latest information. Start by greeting the learner, giving a short overview, and asking what they want to learn about (in markdown numbers). Be interactive. Keep the first message short and concise. Please return answers in markdown.\n\n${strategy.prompt}${nudge ? "\n\n" + nudge : ""}`;
 
     const initialMessage = [
-      {
-        role: "system",
-        content: hasContent
-          ? getSystemPrompt(parsed, ageGroup, customText || undefined)
-          : `You are a professional interactive personal tutor. The student wants to learn about a topic at a ${ageGroup} level. You don't have specific source material for this topic, so teach from your own knowledge. Be upfront that you're teaching from general knowledge and may not have the latest information. Start by greeting the learner, giving a short overview, and asking what they want to learn about (in markdown numbers). Be interactive and quiz them occasionally. Keep the first message short and concise. Please return answers in markdown.`,
-      },
+      { role: "system", content: systemContent },
       { role: "user", content: currentTopic },
     ];
     setMessages(initialMessage);
 
-    // Transition to chat
     setPrepSteps((prev) =>
       prev.map((s, i) =>
         i === prev.length - 1 ? { ...s, status: "done" } : s,
       ),
     );
 
-    // Brief pause so the user sees all steps complete
     await new Promise((r) => setTimeout(r, 400));
     setPhase("chat");
 
-    // Start streaming
     await handleChat(initialMessage);
     setLoading(false);
   };
 
-  const handleChat = async (messages?: { role: string; content: string }[]) => {
+  const handleChat = async (msgs?: { role: string; content: string }[]) => {
     setLoading(true);
 
     const chatRes = await fetch("/api/getChat", {
       method: "POST",
       headers: getHeaders(),
-      body: JSON.stringify({ messages }),
+      body: JSON.stringify({ messages: msgs }),
     });
 
     if (!chatRes.ok) {
@@ -287,6 +331,31 @@ export default function Home() {
     setLoading(false);
   };
 
+  // Mid-conversation strategy change
+  const handleStrategyChange = (newStrategyId: string) => {
+    setStrategyId(newStrategyId);
+    setMessages((prev) => {
+      if (prev.length === 0) return prev;
+      const newSystemContent =
+        parsedSources.length > 0 || customText
+          ? buildSystemPrompt(parsedSources, newStrategyId, nudgeEnabled)
+          : prev[0].content;
+      return [{ ...prev[0], content: newSystemContent }, ...prev.slice(1)];
+    });
+  };
+
+  const handleNudgeChange = (enabled: boolean) => {
+    setNudgeEnabled(enabled);
+    setMessages((prev) => {
+      if (prev.length === 0) return prev;
+      const newSystemContent =
+        parsedSources.length > 0 || customText
+          ? buildSystemPrompt(parsedSources, strategyId, enabled)
+          : prev[0].content;
+      return [{ ...prev[0], content: newSystemContent }, ...prev.slice(1)];
+    });
+  };
+
   return (
     <>
       <Header />
@@ -302,6 +371,12 @@ export default function Home() {
             handleInitialChat={handleInitialChat}
             customText={customText}
             setCustomText={setCustomText}
+            strategyId={strategyId}
+            setStrategyId={setStrategyId}
+            nudgeEnabled={nudgeEnabled}
+            setNudgeEnabled={setNudgeEnabled}
+            searchWeb={searchWeb}
+            setSearchWeb={setSearchWeb}
           />
         )}
 
@@ -321,6 +396,11 @@ export default function Home() {
               topic={topic}
               sources={sources}
               hasCustomText={!!customText}
+              strategyId={strategyId}
+              onStrategyChange={handleStrategyChange}
+              nudgeEnabled={nudgeEnabled}
+              onNudgeChange={handleNudgeChange}
+              audioSettings={audioSettings}
             />
           </div>
         )}

app/page.tsx

@@ -13,6 +13,9 @@ interface Settings {
   searchApiKey: string;
   searchUrl: string;
   defaultEducationLevel: string;
+  voiceGender: string;
+  autoRead: boolean;
+  sttProvider: string;
 }
 
 export default function SettingsPage() {
@@ -25,6 +28,9 @@ export default function SettingsPage() {
     searchApiKey: "",
     searchUrl: "",
     defaultEducationLevel: "Middle School",
+    voiceGender: "female",
+    autoRead: false,
+    sttProvider: "web",
   });
 
   const [saved, setSaved] = useState(false);
@@ -273,6 +279,9 @@ export default function SettingsPage() {
       searchApiKey: "",
       searchUrl: "",
       defaultEducationLevel: "Middle School",
+      voiceGender: "female",
+      autoRead: false,
+      sttProvider: "web",
     });
     setModels([]);
   };
@@ -565,6 +574,99 @@ export default function SettingsPage() {
             </div>
           </div>
 
+          {/* Audio Section */}
+          <div className="mb-10">
+            <div className="flex items-center mb-6">
+              <span className="inline-block h-px w-9 bg-accent mr-3"></span>
+              <span className="text-xs font-medium uppercase tracking-widest text-ink-muted">
+                Audio
+              </span>
+            </div>
+
+            <div className="mb-4">
+              <label className={labelClasses}>
+                Tutor voice
+              </label>
+              <select
+                value={settings.voiceGender}
+                onChange={(e) => setSettings({...settings, voiceGender: e.target.value})}
+                className={inputClasses}
+              >
+                <option value="female">Female</option>
+                <option value="male">Male</option>
+              </select>
+              <p className="mt-1 text-sm text-ink-quiet">
+                Uses your computer&apos;s built-in voices. Quality varies by operating system.
+              </p>
+            </div>
+
+            <div className="mb-4">
+              <label className="flex cursor-pointer items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={settings.autoRead}
+                  onChange={(e) => setSettings({...settings, autoRead: e.target.checked})}
+                  className="h-3.5 w-3.5 cursor-pointer rounded-sm accent-accent"
+                />
+                <span className="text-sm text-ink-muted">Read responses aloud automatically</span>
+              </label>
+            </div>
+
+            <div className="mb-4">
+              <label className={labelClasses}>
+                Voice input method
+              </label>
+              <select
+                value={settings.sttProvider}
+                onChange={(e) => setSettings({...settings, sttProvider: e.target.value})}
+                className={inputClasses}
+              >
+                <option value="web">Online (Google, via browser)</option>
+                <option value="whisper">Local (Whisper, private)</option>
+              </select>
+              <div className="mt-2 rounded-soft border border-hairline p-4 text-sm text-ink-muted" style={{ lineHeight: 1.7 }}>
+                {settings.sttProvider === "web" ? (
+                  <>
+                    <strong className="text-ink">Online voice input</strong> uses your browser&apos;s
+                    built-in speech recognition (powered by Google). It&apos;s fast and accurate, but
+                    your spoken audio is sent to Google&apos;s servers for processing. No account is
+                    needed. This is the same technology used by voice typing in Google Docs.
+                  </>
+                ) : (
+                  <>
+                    <strong className="text-ink">Local voice input</strong> uses a Whisper speech
+                    recognition model that runs entirely on your computer. Your audio never leaves
+                    your machine. It requires a one-time download of about 40 MB. Transcription
+                    is slightly slower than the online option (a few seconds per phrase).
+                    <br /><br />
+                    The model will download automatically the first time you use the microphone
+                    button. You can also{" "}
+                    <button
+                      type="button"
+                      onClick={async () => {
+                        const { loadWhisperModel, isWhisperLoaded } = await import("@/utils/speech");
+                        if (isWhisperLoaded()) {
+                          alert("Whisper model is already downloaded and ready.");
+                          return;
+                        }
+                        alert("Downloading Whisper model (~40 MB). This may take a minute. Check the console for progress.");
+                        const ok = await loadWhisperModel((p) => {
+                          console.log("Whisper download:", p.status, p.progress ? Math.round(p.progress) + "%" : "", p.file || "");
+                        });
+                        if (ok) alert("Whisper model downloaded and ready to use.");
+                        else alert("Download failed. Check your internet connection and try again.");
+                      }}
+                      className="text-ink underline transition-colors duration-normal hover:text-accent"
+                    >
+                      download it now
+                    </button>
+                    .
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+
           {/* Test Result Notification */}
           {testResult && (
             <div className={`mb-6 rounded-soft border p-4 ${