feat: enhance TestBlueprintCard component to support multiple selected sections and improve error handling. Update generation job logic to handle section splits and ensure proper validation of selected formats and sections. Refactor API interactions for better error management and user experience.

apps/web/src/components/generate/TestBlueprintCard.tsx

@@ -1,11 +1,11 @@
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/card";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
-import { EXAM_TYPES } from "@/lib/generate-constants";
+import { EXAM_TYPES, SECTIONS } from "@/lib/generate-constants";
 
 interface TestBlueprintCardProps {
   examType: string;
-  section: string;
+  selectedSections: string[];
   selectedFormats: string[];
   questionCount: number;
   weaknessAlign: number;
@@ -20,6 +20,7 @@ interface TestBlueprintCardProps {
 
 export function TestBlueprintCard({
   examType,
+  selectedSections,
   selectedFormats,
   questionCount,
   weaknessAlign,
@@ -30,7 +31,12 @@ export function TestBlueprintCard({
   hasKey,
   error,
   onGenerate,
-}: TestBlueprintCardProps) {
+  onDismissError,
+}: TestBlueprintCardProps & { onDismissError?: () => void }) {
+  const sectionNames = selectedSections
+    .map((id) => SECTIONS.find((s) => s.id === id)?.name)
+    .filter(Boolean);
+
   return (
     <div className="lg:col-span-4 sticky top-8">
       <Card className="bg-[var(--pure-white)] border-2 border-[var(--oat-border)] clay-shadow rounded-[var(--radius-xl)]">
@@ -40,10 +46,18 @@ export function TestBlueprintCard({
             <CardTitle className="font-headline text-xl text-[var(--clay-black)]">Test Blueprint</CardTitle>
           </div>
         </CardHeader>
-        <CardContent className="space-y-6">
+        <CardContent className="space-y-5">
           <div className="flex justify-between items-center pb-4 border-b border-[var(--oat-border)]">
-            <span className="text-[var(--warm-charcoal)]">Estimasi Durasi</span>
-            <span className="font-bold text-[var(--clay-black)]">{questionCount * 2} Menit</span>
+            <span className="text-[var(--warm-charcoal)]">Ujian</span>
+            <span className="font-bold text-[var(--clay-black)]">
+              {EXAM_TYPES.find((t) => t.id === examType)?.name}
+            </span>
+          </div>
+          <div className="flex justify-between items-center pb-4 border-b border-[var(--oat-border)]">
+            <span className="text-[var(--warm-charcoal)]">Section</span>
+            <span className="font-bold text-[var(--clay-black)] text-right">
+              {sectionNames.join(" + ")}
+            </span>
           </div>
           <div className="flex justify-between items-center pb-4 border-b border-[var(--oat-border)]">
             <span className="text-[var(--warm-charcoal)]">Jumlah Soal</span>
@@ -54,13 +68,11 @@ export function TestBlueprintCard({
             <span className="font-bold text-[var(--clay-black)]">{selectedFormats.length} Jenis</span>
           </div>
           <div className="flex justify-between items-center pb-4 border-b border-[var(--oat-border)]">
-            <span className="text-[var(--warm-charcoal)]">Ujian</span>
-            <span className="font-bold text-[var(--clay-black)]">
-              {EXAM_TYPES.find((t) => t.id === examType)?.name}
-            </span>
+            <span className="text-[var(--warm-charcoal)]">Estimasi Durasi</span>
+            <span className="font-bold text-[var(--clay-black)]">{questionCount * 2} Menit</span>
           </div>
 
-          {/* AI Confidence Score Orbit */}
+          {/* AI Confidence Score */}
           <div className="bg-[var(--oat-light)] rounded-[var(--radius-lg)] p-6 flex flex-col items-center gap-4 relative overflow-hidden">
             <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--matcha-600)] to-transparent" />
             <span className="text-xs font-label uppercase tracking-widest text-[var(--warm-charcoal)] font-bold">
@@ -92,29 +104,25 @@ export function TestBlueprintCard({
           <div className="flex gap-1 p-1 rounded-[var(--radius-lg)] bg-[var(--oat-light)]">
             <button
               onClick={() => setMode("quick")}
-              className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all flex items-center justify-center gap-2 ${
+              className={`flex-1 py-2.5 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all flex items-center justify-center gap-2 min-h-[44px] ${
                 mode === "quick"
                   ? "bg-[var(--pure-white)] text-[var(--clay-black)] clay-shadow"
                   : "text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]"
               }`}
             >
-              <MaterialIcon name="flash_on" className="text-sm mr-1" />
-              <span>
+              <MaterialIcon name="flash_on" className="text-sm" />
               Quick
-              </span>
             </button>
             <button
               onClick={() => setMode("agentic")}
-              className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all flex items-center justify-center gap-2 ${
+              className={`flex-1 py-2.5 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all flex items-center justify-center gap-2 min-h-[44px] ${
                 mode === "agentic"
                   ? "bg-[var(--pure-white)] text-[var(--clay-black)] clay-shadow"
                   : "text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]"
               }`}
             >
-              <MaterialIcon name="psychology" className="text-sm mr-1" />
-              <span>
+              <MaterialIcon name="psychology" className="text-sm" />
               Agentic
-              </span>
             </button>
           </div>
 
@@ -130,7 +138,7 @@ export function TestBlueprintCard({
 
           {/* Primary CTA */}
           <Button
-            className="w-full py-5 rounded-[var(--radius-lg)] bg-[var(--clay-black)] text-[var(--pure-white)] font-bold text-lg flex items-center justify-center gap-3 clay-shadow clay-hover hover:bg-[var(--warm-charcoal)] transition-all active:scale-95 h-auto"
+            className="w-full py-5 rounded-[var(--radius-lg)] bg-[var(--clay-black)] text-[var(--pure-white)] font-bold text-lg flex items-center justify-center gap-3 clay-shadow clay-hover hover:bg-[var(--warm-charcoal)] transition-all active:scale-95 h-auto min-h-[56px]"
             onClick={onGenerate}
             disabled={isGenerating || generatePending || selectedFormats.length === 0 || !hasKey}
           >
@@ -143,8 +151,20 @@ export function TestBlueprintCard({
           </Button>
 
           {error && (
-            <div className="p-4 rounded-[var(--radius-md)] bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)] text-sm border-2 border-[var(--badge-blue-bg)]">
-              {error}
+            <div className="p-4 rounded-[var(--radius-md)] bg-[var(--pomegranate-400)]/10 text-[var(--pomegranate-400)] text-sm border-2 border-[var(--pomegranate-400)]/20">
+              <div className="flex items-start gap-2">
+                <MaterialIcon name="error" className="text-sm shrink-0 mt-0.5" />
+                <span className="flex-1">{error}</span>
+                {onDismissError && (
+                  <button
+                    onClick={onDismissError}
+                    className="shrink-0 p-1 rounded hover:bg-[var(--pomegranate-400)]/10 transition-colors"
+                    aria-label="Tutup error"
+                  >
+                    <MaterialIcon name="close" className="text-sm" />
+                  </button>
+                )}
+              </div>
             </div>
           )}
         </CardContent>

apps/web/src/hooks/use-generation-job.ts

@@ -84,13 +84,16 @@ export function useGenerationJob() {
       const res = jobQuery.data.resultJson as GenerationResult & { generatedPackageId?: string | null };
       setResult(res);
       setGeneratedPackageId(res.generatedPackageId ?? null);
+      setError(null); // Clear any previous error
       setJobId(null);
     }
     if (jobQuery.data?.status === "failed") {
+      setResult(null);
       setError(jobQuery.data.errorMessage ?? "Generation failed");
       setJobId(null);
     }
     if (jobQuery.data?.status === "cancelled") {
+      setResult(null);
       setError(jobQuery.data.errorMessage ?? "Generasi dibatalkan");
       setJobId(null);
     }

apps/web/src/routes/generate.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
@@ -6,7 +6,6 @@ import { trpc } from "@/utils/trpc";
 import { useApiKeys } from "@/hooks/use-api-key";
 import { useGenerationJob } from "@/hooks/use-generation-job";
 import { Button } from "@labas/ui/components/button";
-import { Input } from "@labas/ui/components/input";
 import {
   Select,
   SelectContent,
@@ -45,7 +44,6 @@ function RouteComponent() {
     configs[0]?.id ?? "",
   );
 
-  // keep selectedKeyId in sync when configs load
   useEffect(() => {
     if (configs.length > 0 && !configs.find((c) => c.id === selectedKeyId)) {
       setSelectedKeyId(configs[0].id);
@@ -64,8 +62,16 @@ function RouteComponent() {
     reset,
   } = useGenerationJob();
 
+  // Auto-scroll to results when they appear
+  const resultsRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (result && resultsRef.current) {
+      resultsRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, [result]);
+
   const [examType, setExamType] = useState("IELTS");
-  const [section, setSection] = useState("READING");
+  const [selectedSections, setSelectedSections] = useState<string[]>(["READING"]);
   const [selectedFormats, setSelectedFormats] = useState<string[]>(["multiple_choice"]);
   const [difficulty, setDifficulty] = useState(2);
   const [selectedTopics, setSelectedTopics] = useState<string[]>(["Science & Tech"]);
@@ -73,7 +79,6 @@ function RouteComponent() {
   const [weaknessAlign, setWeaknessAlign] = useState(75);
   const [mode, setMode] = useState<"quick" | "agentic">("quick");
 
-  // Reset selected formats when exam type changes to only keep valid ones
   useEffect(() => {
     setSelectedFormats((prev) => {
       const valid = prev.filter((f) =>
@@ -98,6 +103,17 @@ function RouteComponent() {
     },
   });
 
+  const toggleSection = (id: string) => {
+    setSelectedSections((prev) => {
+      if (prev.includes(id)) {
+        // Prevent unselecting the last section
+        if (prev.length === 1) return prev;
+        return prev.filter((s) => s !== id);
+      }
+      return [...prev, id];
+    });
+  };
+
   const toggleFormat = (id: string) => {
     setSelectedFormats((prev) =>
       prev.includes(id) ? prev.filter((f) => f !== id) : [...prev, id],
@@ -115,12 +131,21 @@ function RouteComponent() {
       setError("API key belum dikonfigurasi. Tambahkan di Settings.");
       return;
     }
+    if (selectedSections.length === 0) {
+      setError("Pilih minimal 1 section.");
+      return;
+    }
+    if (selectedFormats.length === 0) {
+      setError("Pilih minimal 1 format soal.");
+      return;
+    }
 
     reset();
 
     generate.mutate({
       examType: examType as any,
-      section: section as any,
+      section: selectedSections[0] as any,
+      selectedSections: selectedSections as any,
       formats: selectedFormats as any,
       difficulty: difficulty + 1,
       topics: selectedTopics,
@@ -135,16 +160,23 @@ function RouteComponent() {
     });
   };
 
+  const sectionSplits = (() => {
+    if (mode !== "agentic" || questionCount < 20 || selectedSections.length <= 1) return null;
+    const base = Math.floor(questionCount / selectedSections.length);
+    const rem = questionCount % selectedSections.length;
+    return selectedSections.map((s, i) => ({ section: s, count: base + (i < rem ? 1 : 0) }));
+  })();
+
   return (
     <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-7xl mx-auto bg-[var(--warm-cream)]">
-      {/* Header Section */}
+      {/* Header */}
       <section className="flex flex-col gap-2 relative mb-10">
         <div className="absolute -left-8 -top-8 w-64 h-64 ai-glow pointer-events-none opacity-50" />
         <h1 className="text-4xl md:text-5xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
           AI Exam Generator
         </h1>
         <p className="text-lg text-[var(--warm-charcoal)] max-w-2xl leading-relaxed">
-          Generate soal latihan reading comprehension dengan AI. Gunakan API key sendiri untuk latihan tanpa batas.
+          Generate soal latihan dengan AI. Pilih section, format, dan topik — sisanya AI yang kerjakan.
         </p>
       </section>
 
@@ -159,7 +191,7 @@ function RouteComponent() {
       )}
 
       {hasConfigs && (
-        <div className="mb-8 p-4 rounded-[var(--radius-lg)] bg-[var(--warm-cream)] border-2 border-[var(--oat-border)]">
+        <div className="mb-8 p-4 rounded-[var(--radius-lg)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)]">
           <label className="text-sm font-medium text-[var(--clay-black)] mb-2 block">
             Provider / API Key
           </label>
@@ -192,8 +224,9 @@ function RouteComponent() {
       )}
 
       <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
-        {/* Configuration Panel (Left) */}
-        <div className="lg:col-span-8 flex flex-col gap-8">
+        {/* Configuration Panel */}
+        <div className="lg:col-span-8 flex flex-col gap-10">
+
           {/* Exam Type */}
           <div className="flex flex-col gap-4">
             <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Jenis Ujian</label>
@@ -202,44 +235,121 @@ function RouteComponent() {
                 <button
                   key={t.id}
                   onClick={() => setExamType(t.id)}
-                  className={`flex items-center gap-3 py-4 px-4 rounded-[var(--radius-lg)] border-2 transition-all text-sm font-semibold clay-hover ${
+                  className={`flex items-center gap-3 py-4 px-4 rounded-[var(--radius-lg)] border-2 transition-all text-sm font-semibold clay-hover min-h-[56px] ${
                     examType === t.id
-                      ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+                      ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow border-[var(--clay-black)]"
                       : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-[var(--oat-border)]"
                   }`}
                 >
-                  <span className={`fi fi-${t.code} w-6 h-4 rounded-sm shadow-sm`} />
+                  <span className={`fi fi-${t.code} w-6 h-4 rounded-sm shadow-sm shrink-0`} />
                   {t.name}
                 </button>
               ))}
             </div>
           </div>
 
-          {/* Weakness Alignment */}
+          {/* Section Selection — Multi-select */}
           <div className="flex flex-col gap-4">
-            <div className="flex justify-between items-end">
-              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Fokus Latihan</label>
-              <span className="text-sm font-medium text-[var(--matcha-800)] bg-[var(--matcha-300)] px-3 py-1 rounded-full">
-                Intelligent Focus
+            <div className="flex items-center justify-between">
+              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Section</label>
+              <span className="text-xs text-[var(--warm-charcoal)]">
+                {selectedSections.length} dipilih
               </span>
             </div>
-            <div className="relative py-4">
+            <div className="flex flex-wrap gap-3">
+              {SECTIONS.map((s) => {
+                const isSelected = selectedSections.includes(s.id);
+                return (
+                  <button
+                    key={s.id}
+                    onClick={() => toggleSection(s.id)}
+                    className={`flex items-center gap-2.5 px-5 py-3 rounded-[var(--radius-lg)] border-2 transition-all text-sm font-semibold clay-hover min-h-[52px] ${
+                      isSelected
+                        ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow border-[var(--clay-black)]"
+                        : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-[var(--oat-border)]"
+                    }`}
+                  >
+                    <MaterialIcon
+                      name={isSelected ? "check_circle" : s.icon}
+                      className={`text-base shrink-0 ${isSelected ? "text-[var(--matcha-400)]" : ""}`}
+                    />
+                    {s.name}
+                  </button>
+                );
+              })}
+            </div>
+            {selectedSections.length > 1 && (
+              <p className="text-xs text-[var(--matcha-800)] bg-[var(--matcha-300)]/30 px-3 py-2 rounded-[var(--radius-md)]">
+                <MaterialIcon name="tips_and_updates" className="text-xs mr-1 inline" />
+                Kamu memilih {selectedSections.length} section. Mode Agentic dengan ≥20 soal akan otomatis membagi soal ke section yang dipilih.
+              </p>
+            )}
+          </div>
+
+          {/* Question Count */}
+          <div className="flex flex-col gap-4">
+            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">
+              Jumlah Soal
+              <span className="ml-2 text-sm font-normal text-[var(--warm-charcoal)]">{questionCount} soal</span>
+            </label>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+              {QUESTION_COUNT_PRESETS.map((p) => (
+                <button
+                  key={p.value}
+                  onClick={() => setQuestionCount(p.value)}
+                  className={`py-4 px-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all clay-hover flex flex-col items-center gap-1 min-h-[72px] ${
+                    questionCount === p.value
+                      ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+                      : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-2 border-[var(--oat-border)]"
+                  }`}
+                >
+                  <span>{p.label}</span>
+                  <span className={`text-xs ${questionCount === p.value ? "text-[var(--pure-white)]/70" : "text-[var(--warm-charcoal)]/70"}`}>{p.desc}</span>
+                </button>
+              ))}
+            </div>
+            <div className="flex items-center gap-3 mt-1">
+              <span className="text-xs font-medium text-[var(--warm-charcoal)] whitespace-nowrap">Custom:</span>
               <input
                 type="range"
-                min="0"
-                max="100"
-                value={weaknessAlign}
-                onChange={(e) => setWeaknessAlign(Number(e.target.value))}
+                min={1}
+                max={40}
+                value={questionCount}
+                onChange={(e) => setQuestionCount(Number(e.target.value))}
                 className="w-full h-2 bg-[var(--warm-silver)] rounded-full appearance-none cursor-pointer accent-[var(--clay-black)]"
               />
-              <div className="flex justify-between mt-4 text-xs font-label uppercase tracking-widest text-[var(--warm-charcoal)]">
-                <span>Soal Seimbang</span>
-                <span>Fokus Kelemahan</span>
-              </div>
+              <span className="text-xs font-bold text-[var(--clay-black)] w-6 text-right">{questionCount}</span>
             </div>
+
+            {/* Auto Multi-Section Preview */}
+            {sectionSplits && (
+              <div className="mt-2 p-4 rounded-[var(--radius-lg)] bg-[var(--matcha-300)]/30 border border-[var(--matcha-400)]">
+                <div className="flex items-center gap-2 mb-2 text-[var(--matcha-800)] font-semibold text-sm">
+                  <MaterialIcon name="auto_awesome" className="text-xs" />
+                  Auto Multi-Section
+                </div>
+                <p className="text-[var(--matcha-800)]/80 text-xs mb-3">
+                  Mode Agentic dengan {questionCount} soal akan dibagi ke {sectionSplits.length} section:
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {sectionSplits.map((s) => {
+                    const sec = SECTIONS.find((sec) => sec.id === s.section);
+                    return (
+                      <span
+                        key={s.section}
+                        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--pure-white)] text-[var(--matcha-800)] text-xs font-medium border border-[var(--matcha-400)]"
+                      >
+                        <MaterialIcon name={sec?.icon ?? "menu_book"} className="text-[10px]" />
+                        {sec?.name ?? s.section}: {s.count} soal
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
           </div>
 
-          {/* Difficulty Tuning */}
+          {/* Difficulty */}
           <div className="flex flex-col gap-4">
             <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Tingkat Kesulitan</label>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
@@ -247,7 +357,7 @@ function RouteComponent() {
                 <button
                   key={d}
                   onClick={() => setDifficulty(i)}
-                  className={`py-4 px-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all clay-hover ${
+                  className={`py-4 px-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all clay-hover min-h-[56px] ${
                     difficulty === i
                       ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
                       : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-2 border-[var(--oat-border)]"
@@ -259,47 +369,20 @@ function RouteComponent() {
             </div>
           </div>
 
-          {/* Module Selection */}
-          <div className="flex flex-col gap-4">
-            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Section</label>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {SECTIONS.map((s) => (
-                <div
-                  key={s.id}
-                  onClick={() => setSection(s.id)}
-                  className={`flex items-center justify-between p-5 rounded-[var(--radius-lg)] border-2 group cursor-pointer transition-all clay-hover ${
-                    section === s.id
-                      ? "bg-[var(--pure-white)] border-[var(--clay-black)] clay-shadow"
-                      : "bg-[var(--pure-white)] border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
-                  }`}
-                >
-                  <div className="flex items-center gap-4">
-                    <MaterialIcon
-                      name={s.icon}
-                      className={`text-[var(--clay-black)] group-hover:scale-110 transition-transform ${section === s.id ? "text-[var(--clay-black)]" : ""}`}
-                    />
-                    <span className="font-semibold text-[var(--clay-black)]">{s.name}</span>
-                  </div>
-                  <Input
-                    type="checkbox"
-                    checked={section === s.id}
-                    readOnly
-                    className="w-5 h-5 rounded border-[var(--oat-border)] text-[var(--clay-black)] focus:ring-[var(--clay-black)]"
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
-
           {/* Format Selection */}
           <div className="flex flex-col gap-4">
-            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Format Soal</label>
+            <div className="flex items-center justify-between">
+              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Format Soal</label>
+              <span className="text-xs text-[var(--warm-charcoal)]">
+                {selectedFormats.length} dipilih
+              </span>
+            </div>
             <div className="flex flex-wrap gap-2">
               {FORMATS.filter((f) => f.allowedExams.includes(examType)).map((f) => (
                 <button
                   key={f.id}
                   onClick={() => toggleFormat(f.id)}
-                  className={`px-4 py-2.5 rounded-full text-sm font-medium flex items-center gap-2 cursor-pointer transition-all clay-hover ${
+                  className={`px-4 py-2.5 rounded-full text-sm font-medium flex items-center gap-2 cursor-pointer transition-all clay-hover min-h-[40px] ${
                     selectedFormats.includes(f.id)
                       ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
                       : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)]"
@@ -316,13 +399,18 @@ function RouteComponent() {
 
           {/* Topic Focus */}
           <div className="flex flex-col gap-4">
-            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Topik</label>
+            <div className="flex items-center justify-between">
+              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Topik</label>
+              <span className="text-xs text-[var(--warm-charcoal)]">
+                {selectedTopics.length} dipilih
+              </span>
+            </div>
             <div className="flex flex-wrap gap-2">
               {selectedTopics.map((topic) => (
                 <span
                   key={topic}
                   onClick={() => toggleTopic(topic)}
-                  className="px-4 py-2 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] font-medium flex items-center gap-2 cursor-pointer transition-all hover:brightness-95 clay-hover"
+                  className="px-4 py-2 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] font-medium flex items-center gap-2 cursor-pointer transition-all hover:brightness-95 clay-hover min-h-[40px]"
                 >
                   {topic} <MaterialIcon name="close" className="text-sm" />
                 </span>
@@ -331,7 +419,7 @@ function RouteComponent() {
                 <button
                   key={topic}
                   onClick={() => toggleTopic(topic)}
-                  className="px-4 py-2 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] font-medium hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)] transition-all clay-hover"
+                  className="px-4 py-2 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] font-medium hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)] transition-all clay-hover min-h-[40px]"
                 >
                   {topic}
                 </button>
@@ -339,44 +427,35 @@ function RouteComponent() {
             </div>
           </div>
 
-          {/* Question Count */}
+          {/* Weakness Alignment */}
           <div className="flex flex-col gap-4">
-            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Jumlah Soal: {questionCount}</label>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-              {QUESTION_COUNT_PRESETS.map((p) => (
-                <button
-                  key={p.value}
-                  onClick={() => setQuestionCount(p.value)}
-                  className={`py-4 px-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all clay-hover flex flex-col items-center gap-1 ${
-                    questionCount === p.value
-                      ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
-                      : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-2 border-[var(--oat-border)]"
-                  }`}
-                >
-                  <span>{p.label}</span>
-                  <span className={`text-xs ${questionCount === p.value ? "text-[var(--pure-white)]/70" : "text-[var(--warm-charcoal)]/70"}`}>{p.desc}</span>
-                </button>
-              ))}
+            <div className="flex justify-between items-end">
+              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Fokus Latihan</label>
+              <span className="text-sm font-medium text-[var(--matcha-800)] bg-[var(--matcha-300)] px-3 py-1 rounded-full">
+                Intelligent Focus
+              </span>
             </div>
-            <div className="flex items-center gap-3 mt-2">
-              <span className="text-xs font-medium text-[var(--warm-charcoal)] whitespace-nowrap">Custom:</span>
+            <div className="relative py-4">
               <input
                 type="range"
-                min={1}
-                max={40}
-                value={questionCount}
-                onChange={(e) => setQuestionCount(Number(e.target.value))}
+                min="0"
+                max="100"
+                value={weaknessAlign}
+                onChange={(e) => setWeaknessAlign(Number(e.target.value))}
                 className="w-full h-2 bg-[var(--warm-silver)] rounded-full appearance-none cursor-pointer accent-[var(--clay-black)]"
               />
-              <span className="text-xs font-bold text-[var(--clay-black)] w-6 text-right">{questionCount}</span>
+              <div className="flex justify-between mt-4 text-xs font-label uppercase tracking-widest text-[var(--warm-charcoal)]">
+                <span>Soal Seimbang</span>
+                <span>Fokus Kelemahan</span>
+              </div>
             </div>
           </div>
         </div>
 
-        {/* Live Preview Card (Right) */}
+        {/* Live Preview Card */}
         <TestBlueprintCard
           examType={examType}
-          section={section}
+          selectedSections={selectedSections}
           selectedFormats={selectedFormats}
           questionCount={questionCount}
           weaknessAlign={weaknessAlign}
@@ -387,14 +466,16 @@ function RouteComponent() {
           hasKey={hasConfigs}
           error={error}
           onGenerate={handleGenerate}
+          onDismissError={() => setError(null)}
         />
       </div>
 
-      {/* Results Section */}
-      {result && (
-        <ResultSection result={result} generatedPackageId={generatedPackageId} />
-      )}
-
+      {/* Results */}
+      <div ref={resultsRef}>
+        {result && (
+          <ResultSection result={result} generatedPackageId={generatedPackageId} />
+        )}
+      </div>
     </div>
   );
 }

apps/web/src/routes/jobs.tsx

@@ -304,9 +304,26 @@ function RouteComponent() {
                   <CardContent className="pt-0">
                     <div className="flex items-center justify-between mb-3">
                       <div className="text-sm text-[var(--warm-charcoal)]">
-                        {result.questions.length} soal dihasilkan · {result.meta.model}
-                        {job.tokensUsed ? ` · ${job.tokensUsed} tokens` : ""}
-                        {result.meta.durationMs ? ` · ${(result.meta.durationMs / 1000).toFixed(1)}s` : ""}
+                        {(() => {
+                          const splits = (result as any).sectionSplits as { section: string; count: number }[] | undefined;
+                          if (splits && splits.length > 1) {
+                            return (
+                              <span>
+                                {result.questions.length} soal · {splits.length} section{" "}
+                                {splits.map((s) => `${s.section} ${s.count}`).join(", ")} · {result.meta.model}
+                                {job.tokensUsed ? ` · ${job.tokensUsed} tokens` : ""}
+                                {result.meta.durationMs ? ` · ${(result.meta.durationMs / 1000).toFixed(1)}s` : ""}
+                              </span>
+                            );
+                          }
+                          return (
+                            <span>
+                              {result.questions.length} soal dihasilkan · {result.meta.model}
+                              {job.tokensUsed ? ` · ${job.tokensUsed} tokens` : ""}
+                              {result.meta.durationMs ? ` · ${(result.meta.durationMs / 1000).toFixed(1)}s` : ""}
+                            </span>
+                          );
+                        })()}
                       </div>
                       <Button
                         variant="outline"

packages/ai/src/agentic.ts

@@ -1,13 +1,15 @@
 import { OpenAICompatibleClient } from "./client";
 import { GenerationError } from "./errors";
 import {
-  getQuestionJsonSchemaDescription,
   getPassageJsonSchemaDescription,
   getValidationJsonSchemaDescription,
-  getQuestionsArrayJsonSchemaDescription,
   getSelfValidationJsonSchemaDescription,
 } from "./schema-to-prompt";
-import { questionSchema, type GenerationInput, type GenerationResult } from "./schemas";
+import {
+  getGenericQuestionJsonSchemaDescription,
+  repairAndParseQuestions,
+} from "./repair";
+import { type GenerationInput, type GenerationResult } from "./schemas";
 
 interface AgenticStep {
   step: string;
@@ -32,6 +34,30 @@ function getTargetLanguage(examType: string): string {
   return "English";
 }
 
+/** Estimate max tokens needed per step to avoid truncation. */
+function calculateMaxTokens(
+  userMax: number,
+  step: "passage" | "validate" | "questions" | "self_validate" | "regenerate",
+  questionCount: number,
+): number {
+  const base = userMax > 0 ? userMax : 16_384;
+  switch (step) {
+    case "passage":
+      return Math.min(base, 8_192);
+    case "validate":
+      return Math.min(base, 4_096);
+    case "self_validate":
+      return Math.min(base, 4_096);
+    case "questions":
+      // Rough estimate: ~500 tokens per question JSON + overhead
+      return Math.min(Math.max(base, 2_000 + questionCount * 600), 64_000);
+    case "regenerate":
+      return Math.min(Math.max(base, 2_000 + questionCount * 600), 64_000);
+    default:
+      return base;
+  }
+}
+
 function parseJsonResponse(content: string): unknown {
   if (!content) throw new Error("Empty response from AI");
   let parsed: unknown;
@@ -73,7 +99,7 @@ ${schema}`;
         { role: "user", content: prompt },
       ],
       temperature: 0.7,
-      max_tokens: input.apiKeyConfig.maxTokens,
+      max_tokens: calculateMaxTokens(input.apiKeyConfig.maxTokens, "passage", input.questionCount),
       response_format: { type: "json_object" },
     },
     onToken ? { onToken } : undefined,
@@ -122,7 +148,7 @@ ${schema}`;
         { role: "user", content: prompt },
       ],
       temperature: 0.3,
-      max_tokens: input.apiKeyConfig.maxTokens,
+      max_tokens: calculateMaxTokens(input.apiKeyConfig.maxTokens, "validate", input.questionCount),
       response_format: { type: "json_object" },
     },
     onToken ? { onToken } : undefined,
@@ -140,12 +166,12 @@ async function step3GenerateQuestions(
   client: OpenAICompatibleClient,
   input: GenerationInput,
   passage: string,
+  count: number,
   onToken?: (token: string) => void,
 ): Promise<{ questions: Array<Record<string, unknown>>; tokensUsed: number }> {
-  const questionSchemaDesc = getQuestionJsonSchemaDescription();
-  const wrapperSchema = getQuestionsArrayJsonSchemaDescription();
+  const schema = getGenericQuestionJsonSchemaDescription();
 
-  const prompt = `Using the following passage, generate ${input.questionCount} reading comprehension questions for ${input.examType} exam.
+  const prompt = `Using the following passage, generate ${count} reading comprehension questions for ${input.examType} exam.
 
 Passage:
 """
@@ -161,12 +187,13 @@ Rules:
 - For multiple choice: always provide 4 options (A, B, C, D) with one clearly correct answer
 - Options must be plausible distractors
 - explanation (explanation) - dijelaskan dengan bahasa Indonesia
+- For true_false_not_given: correctAnswer must be exactly TRUE, FALSE, or NOT_GIVEN (uppercase)
+- For author_view: correctAnswer must be exactly YES, NO, or NOT_GIVEN (uppercase)
 
 Question schema:
-${questionSchemaDesc}
+${schema}
 
-Return ONLY valid JSON conforming to this schema:
-${wrapperSchema}`;
+Return ONLY valid JSON conforming to this schema.`;
 
   const result = await client.chatCompletion(
     {
@@ -176,7 +203,7 @@ ${wrapperSchema}`;
         { role: "user", content: prompt },
       ],
       temperature: 0.7,
-      max_tokens: input.apiKeyConfig.maxTokens,
+      max_tokens: calculateMaxTokens(input.apiKeyConfig.maxTokens, "questions", count),
       response_format: { type: "json_object" },
     },
     onToken ? { onToken } : undefined,
@@ -198,7 +225,7 @@ async function step4SelfValidate(
   passage: string,
   questions: Array<Record<string, unknown>>,
   onToken?: (token: string) => void,
-): Promise<{ correctedQuestions: Array<Record<string, unknown>>; confidence: number; tokensUsed: number }> {
+): Promise<{ confidence: number; issues: any[]; tokensUsed: number }> {
   const qaPairs = questions
     .map((q, i) => `Q${i + 1}: ${q.questionText}\nA: ${q.correctAnswer}`)
     .join("\n\n");
@@ -230,7 +257,7 @@ ${schema}`;
         { role: "user", content: prompt },
       ],
       temperature: 0.3,
-      max_tokens: input.apiKeyConfig.maxTokens,
+      max_tokens: calculateMaxTokens(input.apiKeyConfig.maxTokens, "self_validate", input.questionCount),
       response_format: { type: "json_object" },
     },
     onToken ? { onToken } : undefined,
@@ -240,56 +267,42 @@ ${schema}`;
   const confidence = typeof parsed.overallConfidence === "number" ? parsed.overallConfidence : 75;
   const issues = Array.isArray(parsed.issues) ? parsed.issues : [];
 
-  // Apply fixes if needed
-  const corrected = questions.map((q, i) => {
-    const issue = issues.find((iss: any) => iss?.questionIndex === i);
-    if (issue && issue.suggestedFix) {
-      return { ...q, explanation: `${q.explanation}\n[Validator note: ${issue.suggestedFix}]` };
-    }
-    return q;
-  });
-
-  return { correctedQuestions: corrected, confidence, tokensUsed: result.usage?.total_tokens ?? 0 };
+  return { confidence, issues, tokensUsed: result.usage?.total_tokens ?? 0 };
 }
 
-async function step4RegenerateBadQuestions(
+async function stepRegenerateQuestions(
   client: OpenAICompatibleClient,
   input: GenerationInput,
   passage: string,
-  questions: Array<Record<string, unknown>>,
-  issueIndices: number[],
+  count: number,
+  context: string,
   onToken?: (token: string) => void,
-): Promise<{ regenerated: Array<Record<string, unknown>>; tokensUsed: number }> {
-  const badQuestions = issueIndices.map((i) => ({
-    index: i,
-    ...questions[i],
-  }));
-
-  const questionSchemaDesc = getQuestionJsonSchemaDescription();
-  const wrapperSchema = getQuestionsArrayJsonSchemaDescription();
+): Promise<{ questions: Array<Record<string, unknown>>; tokensUsed: number }> {
+  const schema = getGenericQuestionJsonSchemaDescription();
 
-  const prompt = `You are an expert exam question writer. The following questions were flagged as incorrect or flawed. Regenerate them to fix the issues while keeping the same format and difficulty.
+  const prompt = `You are an expert exam question writer. ${context}
 
 Passage:
 """
 ${passage}
 """
 
-Flawed questions (with their original index):
-${JSON.stringify(badQuestions, null, 2)}
+Generate ${count} new reading comprehension questions for ${input.examType} exam.
+Formats: ${input.formats.join(", ")}
+Difficulty: ${input.difficulty}/5
 
 Rules:
-- Regenerate ONLY the flawed questions
-- Maintain the same format, difficulty (${input.difficulty}), and exam style (${input.examType})
 - Each question must be directly answerable from the passage
-- explanation (explanation) - dijelaskan dengan bahasa Indonesia
-- Return the same number of questions in the same order as the input
+- Use "passageText" field with relevant excerpt (or full passage)
+- For multiple choice: provide 4 options (A, B, C, D)
+- explanation - dijelaskan dengan bahasa Indonesia
+- For true_false_not_given: correctAnswer must be TRUE, FALSE, or NOT_GIVEN (uppercase)
+- For author_view: correctAnswer must be YES, NO, or NOT_GIVEN (uppercase)
 
 Question schema:
-${questionSchemaDesc}
+${schema}
 
-Return ONLY valid JSON conforming to this schema:
-${wrapperSchema}`;
+Return ONLY valid JSON conforming to this schema.`;
 
   const result = await client.chatCompletion(
     {
@@ -299,19 +312,18 @@ ${wrapperSchema}`;
         { role: "user", content: prompt },
       ],
       temperature: 0.7,
-      max_tokens: input.apiKeyConfig.maxTokens,
+      max_tokens: calculateMaxTokens(input.apiKeyConfig.maxTokens, "regenerate", count),
       response_format: { type: "json_object" },
     },
     onToken ? { onToken } : undefined,
   );
 
   const parsed = parseJsonResponse(result.content) as Record<string, unknown>;
-  if (!Array.isArray(parsed.questions) || parsed.questions.length !== badQuestions.length) {
-    throw new Error("Regeneration did not return the expected number of questions");
+  if (!Array.isArray(parsed.questions)) {
+    throw new Error("Missing questions array in regeneration response");
   }
-
   return {
-    regenerated: parsed.questions as Array<Record<string, unknown>>,
+    questions: parsed.questions as Array<Record<string, unknown>>,
     tokensUsed: result.usage?.total_tokens ?? 0,
   };
 }
@@ -334,7 +346,10 @@ export async function generateQuestionsAgentic(
     { step: "self_validate", status: "pending" as any },
   ];
 
-  const report = (current: number) => {
+  const report = (current: number, extraMsg?: string) => {
+    if (extraMsg && steps[current]) {
+      steps[current]!.message = extraMsg;
+    }
     if (onProgress) {
       onProgress({ steps, currentStep: current });
     }
@@ -342,7 +357,7 @@ export async function generateQuestionsAgentic(
 
   let accumulatedTokens = 0;
 
-  // Step 1: Generate passage
+  // ── Step 1: Generate passage ────────────────────────────
   report(0);
   let passage: string;
   let title: string;
@@ -360,36 +375,29 @@ export async function generateQuestionsAgentic(
     throw new GenerationError(`Step 1 failed: ${err.message}`, { tokensUsed: accumulatedTokens });
   }
 
-  // Step 2: Validate passage
+  // ── Step 2: Validate passage ────────────────────────────
   steps[1].status = "running";
   report(1);
-  let isValid: boolean;
-  let feedback: string;
   try {
     const s2 = await step2ValidatePassage(client, input, passage, onToken);
-    isValid = s2.isValid;
-    feedback = s2.feedback;
     accumulatedTokens += s2.tokensUsed;
-    steps[1].status = isValid ? "done" : "error";
-    steps[1].message = feedback;
-    steps[1].output = JSON.stringify({ isValid, feedback }, null, 2);
+    steps[1].status = s2.isValid ? "done" : "error";
+    steps[1].message = s2.feedback;
+    steps[1].output = JSON.stringify({ isValid: s2.isValid, feedback: s2.feedback }, null, 2);
   } catch (err: any) {
     steps[1].status = "error";
     steps[1].message = err.message ?? "Passage validation failed";
     throw new GenerationError(`Step 2 failed: ${err.message}`, { tokensUsed: accumulatedTokens });
   }
 
-  // Even if not perfect, continue (the feedback is logged)
-
-  // Step 3: Generate questions
+  // ── Step 3: Generate questions ──────────────────────────
   steps[2].status = "running";
-  report(2);
+  report(2, `Generating ${input.questionCount} questions...`);
   let rawQuestions: Array<Record<string, unknown>>;
   try {
-    const s3 = await step3GenerateQuestions(client, input, passage, onToken);
+    const s3 = await step3GenerateQuestions(client, input, passage, input.questionCount, onToken);
     rawQuestions = s3.questions;
     accumulatedTokens += s3.tokensUsed;
-    steps[2].status = "done";
     steps[2].message = `Generated ${rawQuestions.length} questions`;
     steps[2].output = rawQuestions.map((q, i) => `${i + 1}. [${q.format}] ${q.questionText}`).join("\n");
   } catch (err: any) {
@@ -398,73 +406,90 @@ export async function generateQuestionsAgentic(
     throw new GenerationError(`Step 3 failed: ${err.message}`, { tokensUsed: accumulatedTokens });
   }
 
-  // Step 4: Self-validate
+  // ── Step 4: Self-validate + Repair + Regenerate loop ─────
   steps[3].status = "running";
-  report(3);
-  let correctedQuestions: Array<Record<string, unknown>>;
-  let confidence: number;
+  report(3, "Validating & repairing questions...");
+
+  let validQuestions: any[] = [];
+  let allRepairLogs: string[] = [];
+
   try {
     const s4 = await step4SelfValidate(client, input, passage, rawQuestions, onToken);
-    correctedQuestions = s4.correctedQuestions;
-    confidence = s4.confidence;
     accumulatedTokens += s4.tokensUsed;
 
-    // If validation found issues and confidence is low, actually regenerate the bad questions
-    const issueIndices = (s4.correctedQuestions as any[])
-      .map((q, i) => (q.explanation?.includes("[Validator note:") ? i : -1))
-      .filter((i) => i !== -1);
-
-    if (issueIndices.length > 0 && confidence < 85) {
-      steps[3].message = `Found ${issueIndices.length} issues. Regenerating...`;
-      report(3);
-      const regen = await step4RegenerateBadQuestions(
-        client,
-        input,
-        passage,
-        rawQuestions,
-        issueIndices,
-        onToken,
-      );
+    // Repair & parse
+    let { valid, invalid, repairLog } = repairAndParseQuestions(rawQuestions, passage);
+    validQuestions = valid;
+    allRepairLogs.push(...repairLog);
+
+    // Regenerate structural-invalid questions (up to 2 attempts)
+    let regenerationAttempts = 0;
+    const maxRegenAttempts = 2;
+
+    while (invalid.length > 0 && regenerationAttempts < maxRegenAttempts && validQuestions.length < input.questionCount) {
+      regenerationAttempts++;
+      const regenCount = Math.min(invalid.length, input.questionCount - validQuestions.length);
+      const context = `The previous ${regenCount} question(s) had structural errors: ${invalid.map((i) => `Q${i.index + 1}: ${i.errors.join(", ")}`).join("; ")}.`;
+
+      report(3, `Regenerating ${regenCount} invalid question(s) (attempt ${regenerationAttempts}/${maxRegenAttempts})...`);
+
+      const regen = await stepRegenerateQuestions(client, input, passage, regenCount, context, onToken);
       accumulatedTokens += regen.tokensUsed;
 
-      // Replace the bad questions with regenerated ones
-      for (let idx = 0; idx < issueIndices.length; idx++) {
-        correctedQuestions[issueIndices[idx]] = regen.regenerated[idx];
+      const regenResult = repairAndParseQuestions(regen.questions, passage);
+      validQuestions.push(...regenResult.valid);
+      allRepairLogs.push(...regenResult.repairLog.map((l) => `[Regen ${regenerationAttempts}] ${l}`));
+
+      // If regeneration produced valid questions, remove corresponding invalid entries
+      if (regenResult.valid.length > 0) {
+        invalid = invalid.slice(regenResult.valid.length);
+      } else {
+        // No progress — break to avoid infinite loop
+        break;
       }
-      confidence = Math.min(100, confidence + 10);
-      steps[3].message = `Regenerated ${issueIndices.length} questions. Confidence: ${confidence}%`;
-    } else {
-      steps[3].message = `Confidence score: ${confidence}%`;
+    }
+
+    // If still below target, generate additional questions
+    if (validQuestions.length < input.questionCount) {
+      const needMore = input.questionCount - validQuestions.length;
+      report(3, `Generating ${needMore} additional question(s)...`);
+      const extra = await stepRegenerateQuestions(
+        client, input, passage, needMore,
+        `Need ${needMore} more valid questions to reach target of ${input.questionCount}.`,
+        onToken,
+      );
+      accumulatedTokens += extra.tokensUsed;
+      const extraResult = repairAndParseQuestions(extra.questions, passage);
+      validQuestions.push(...extraResult.valid);
+      allRepairLogs.push(...extraResult.repairLog.map((l) => `[Extra] ${l}`));
     }
 
     steps[3].status = "done";
-    steps[3].output = `Overall Confidence: ${confidence}%\nTotal Questions: ${correctedQuestions.length}`;
+    steps[3].message = `Validated ${validQuestions.length}/${input.questionCount} questions. Confidence: ${s4.confidence}%`;
+    steps[3].output = [
+      `Overall Confidence: ${s4.confidence}%`,
+      `Valid Questions: ${validQuestions.length}/${input.questionCount}`,
+      `Repair Log:`,
+      ...allRepairLogs,
+    ].join("\n");
   } catch (err: any) {
     steps[3].status = "error";
     steps[3].message = err.message ?? "Self-validation failed";
     throw new GenerationError(`Step 4 failed: ${err.message}`, { tokensUsed: accumulatedTokens });
   }
 
-  // Parse and validate final questions
-  const questions = correctedQuestions
-    .map((q) => {
-      try {
-        return questionSchema.parse({ ...q, passageText: passage });
-      } catch (e) {
-        console.warn("Question validation failed:", e);
-        return null;
-      }
-    })
-    .filter((q): q is NonNullable<typeof q> => q !== null);
-
-  if (questions.length === 0) {
+  // ── Final check ─────────────────────────────────────────
+  if (validQuestions.length === 0) {
     throw new GenerationError("No valid questions generated after agentic validation", {
       tokensUsed: accumulatedTokens,
     });
   }
 
+  // Trim to requested count (if we overshot)
+  const finalQuestions = validQuestions.slice(0, input.questionCount);
+
   return {
-    questions,
+    questions: finalQuestions,
     meta: {
       model: input.apiKeyConfig.model,
       durationMs: Date.now() - start,

packages/ai/src/client.ts

@@ -97,6 +97,34 @@ async function readSSEStream(
   return { content: fullContent, usage: lastUsage };
 }
 
+function looksTruncated(content: string): boolean {
+  const trimmed = content.trim();
+  if (trimmed.length === 0) return false;
+  // JSON object/array should end with } or ]
+  const lastChar = trimmed[trimmed.length - 1];
+  if (lastChar === "}" || lastChar === "]") return false;
+  // Check for common truncation signatures
+  const unterminated = /Unterminated string|Unexpected end of JSON|Unexpected token/i;
+  try {
+    JSON.parse(trimmed);
+    return false;
+  } catch (err: any) {
+    if (unterminated.test(err.message)) return true;
+  }
+  return false;
+}
+
+function isResponseFormatError(status: number, text: string): boolean {
+  if (status !== 400 && status !== 422) return false;
+  const lower = text.toLowerCase();
+  return (
+    lower.includes("response_format") ||
+    lower.includes("json mode") ||
+    lower.includes("json_object") ||
+    lower.includes("unsupported parameter")
+  );
+}
+
 export class OpenAICompatibleClient {
   constructor(
     private baseUrl: string,
@@ -106,17 +134,27 @@ export class OpenAICompatibleClient {
   async chatCompletion(
     opts: ChatCompletionOptions,
     callbacks?: StreamCallbacks,
+  ): Promise<ChatCompletionResult> {
+    return this._doChatCompletion(opts, callbacks, { attempt: 1 });
+  }
+
+  private async _doChatCompletion(
+    opts: ChatCompletionOptions,
+    callbacks: StreamCallbacks | undefined,
+    ctx: { attempt: number; retriedForTruncation?: boolean; retriedForResponseFormat?: boolean },
   ): Promise<ChatCompletionResult> {
     const url = `${this.baseUrl.replace(/\/$/, "")}/chat/completions`;
     const stream = true;
-    const body = {
+    const body: Record<string, unknown> = {
       model: opts.model,
       messages: opts.messages,
       temperature: opts.temperature ?? 0.7,
       stream,
-      ...(opts.max_tokens ? { max_tokens: opts.max_tokens } : {}),
-      ...(opts.response_format ? { response_format: opts.response_format } : {}),
     };
+    if (opts.max_tokens) body.max_tokens = opts.max_tokens;
+    if (opts.response_format && !ctx.retriedForResponseFormat) {
+      body.response_format = opts.response_format;
+    }
 
     log("info", "Sending chat completion request", {
       url,
@@ -124,6 +162,7 @@ export class OpenAICompatibleClient {
       messageCount: opts.messages.length,
       maxTokens: opts.max_tokens,
       stream,
+      attempt: ctx.attempt,
     });
 
     const res = await fetch(url, {
@@ -152,6 +191,16 @@ export class OpenAICompatibleClient {
         isHtml: preview.trim().startsWith("<"),
       });
 
+      // Retry without response_format if provider doesn't support it
+      if (!ctx.retriedForResponseFormat && isResponseFormatError(res.status, preview)) {
+        log("warn", "Provider rejected response_format, retrying without it");
+        return this._doChatCompletion(opts, callbacks, {
+          ...ctx,
+          attempt: ctx.attempt + 1,
+          retriedForResponseFormat: true,
+        });
+      }
+
       if (preview.trim().startsWith("<")) {
         throw new Error(
           `Provider returned HTML instead of JSON (status ${res.status}). ` +
@@ -190,6 +239,23 @@ export class OpenAICompatibleClient {
       throw new Error("Empty response from AI");
     }
 
+    // Truncation detection + retry
+    if (!ctx.retriedForTruncation && looksTruncated(result.content)) {
+      const newMaxTokens = opts.max_tokens
+        ? Math.min(Math.round(opts.max_tokens * 1.5), 128_000)
+        : 16_384;
+      log("warn", "Response looks truncated, retrying with more tokens", {
+        originalLength: result.content.length,
+        originalMaxTokens: opts.max_tokens,
+        newMaxTokens,
+      });
+      return this._doChatCompletion(
+        { ...opts, max_tokens: newMaxTokens },
+        callbacks,
+        { ...ctx, attempt: ctx.attempt + 1, retriedForTruncation: true },
+      );
+    }
+
     log("info", "Chat completion successful", {
       contentLength: result.content.length,
       usage: result.usage,

packages/ai/src/pipeline.ts

@@ -1,8 +1,8 @@
 import { OpenAICompatibleClient } from "./client";
 import { GenerationError } from "./errors";
 import { buildQuickModePrompt } from "./prompts";
+import { repairAndParseQuestions } from "./repair";
 import {
-  questionSchema,
   type GenerationInput,
   type GenerationResult,
 } from "./schemas";
@@ -107,33 +107,39 @@ export async function generateQuestionsQuick(
     throw new GenerationError("Missing 'questions' array in AI response", { tokensUsed });
   }
 
-  log("info", "Validating questions", { rawCount: raw.questions.length });
-
-  const questions = raw.questions
-    .map((q: unknown, idx: number) => {
-      try {
-        return questionSchema.parse(q);
-      } catch (e: any) {
-        log("warn", `Question ${idx} validation failed`, {
-          error: e.message,
-          questionPreview: JSON.stringify(q).slice(0, 200),
-        });
-        return null;
-      }
-    })
-    .filter((q): q is NonNullable<typeof q> => q !== null);
-
-  if (questions.length === 0) {
-    log("error", "No valid questions after validation", { rawCount: raw.questions.length });
+  log("info", "Validating & repairing questions", { rawCount: raw.questions.length });
+
+  // Extract a representative passage text for repair fallback
+  const firstWithPassage = raw.questions.find(
+    (q: any) => q && typeof q === "object" && typeof q.passageText === "string" && q.passageText.length >= 50,
+  ) as any;
+  const fallbackPassage = firstWithPassage?.passageText ?? "No passage available.";
+
+  const { valid, invalid, repairLog } = repairAndParseQuestions(raw.questions, fallbackPassage);
+
+  if (repairLog.length > 0) {
+    log("warn", "Repairs applied", { count: repairLog.length, details: repairLog });
+  }
+  if (invalid.length > 0) {
+    log("warn", "Invalid questions after repair", {
+      count: invalid.length,
+      details: invalid.map((i) => ({ index: i.index, errors: i.errors })),
+    });
+  }
+
+  if (valid.length === 0) {
+    log("error", "No valid questions after repair", { rawCount: raw.questions.length });
     throw new GenerationError("No valid questions generated", { tokensUsed });
   }
 
   log("info", "Quick mode generation completed", {
-    validCount: questions.length,
+    validCount: valid.length,
     rawCount: raw.questions.length,
     durationMs: Date.now() - start,
   });
 
+  const questions = valid;
+
   return {
     questions,
     meta: {

packages/ai/src/repair.ts

@@ -0,0 +1,360 @@
+import { z } from "zod";
+import {
+  questionFormatSchema,
+  multipleChoiceOptionSchema,
+  questionSchema,
+  type Question,
+} from "./schemas";
+
+// ── Generic Question Schema (for AI prompt) ─────────────────
+// Simplified schema that AI can understand easily.
+// We repair & map to discriminated union afterwards.
+
+export const genericQuestionSchema = z.object({
+  format: questionFormatSchema,
+  passageText: z.string(),
+  questionText: z.string().min(1),
+  options: z.array(multipleChoiceOptionSchema).optional(),
+  correctAnswer: z.string().min(1),
+  explanation: z.string().min(1),
+  difficulty: z.number().int().min(1).max(5),
+  skillTags: z.array(z.string()).min(1),
+});
+
+export type GenericQuestion = z.infer<typeof genericQuestionSchema>;
+
+const FORMATS_WITH_OPTIONS = new Set([
+  "multiple_choice",
+  "matching_headings",
+  "matching_information",
+  "synonym",
+  "grammar_in_context",
+  "sentence_completion",
+  "summary_completion",
+  "cloze",
+  "reference",
+  "kanji_reading",
+  "particle_choice",
+  "article_case",
+  "character_reading",
+  "sentence_arrangement",
+]);
+
+function normalizeOptionKey(key: string): string {
+  return key.trim().toUpperCase();
+}
+
+function normalizeOptionText(text: string): string {
+  return text.trim();
+}
+
+function ensureOptions(
+  q: GenericQuestion,
+): Array<{ key: string; text: string }> | undefined {
+  if (!FORMATS_WITH_OPTIONS.has(q.format)) return undefined;
+
+  let opts = q.options;
+  if (!Array.isArray(opts) || opts.length === 0) {
+    // AI forgot options — inject plausible placeholders so parsing can succeed
+    // We'll mark them for later regeneration if needed
+    if (q.format === "multiple_choice" || q.format === "synonym" || q.format === "grammar_in_context" ||
+        q.format === "sentence_completion" || q.format === "reference" || q.format === "kanji_reading" ||
+        q.format === "particle_choice" || q.format === "article_case" || q.format === "character_reading" ||
+        q.format === "sentence_arrangement") {
+      return [
+        { key: "A", text: "Option A" },
+        { key: "B", text: "Option B" },
+        { key: "C", text: "Option C" },
+        { key: "D", text: "Option D" },
+      ];
+    }
+    if (q.format === "matching_headings" || q.format === "matching_information" ||
+        q.format === "summary_completion" || q.format === "cloze") {
+      return [{ key: "1", text: "Placeholder option" }];
+    }
+  }
+
+  opts = opts!.map((o) => ({
+    key: normalizeOptionKey(o.key),
+    text: normalizeOptionText(o.text),
+  }));
+
+  // Deduplicate by key
+  const seen = new Set<string>();
+  const deduped = [];
+  for (const o of opts) {
+    if (!seen.has(o.key)) {
+      seen.add(o.key);
+      deduped.push(o);
+    }
+  }
+
+  return deduped;
+}
+
+function coerceCorrectAnswer(q: GenericQuestion): string {
+  const ans = String(q.correctAnswer).trim();
+
+  if (q.format === "true_false_not_given") {
+    const upper = ans.toUpperCase();
+    if (upper === "T" || upper === "TRUE") return "TRUE";
+    if (upper === "F" || upper === "FALSE") return "FALSE";
+    if (upper === "NG" || upper === "NOT GIVEN" || upper === "NOT_GIVEN") return "NOT_GIVEN";
+    // Fallback — pick the closest
+    if (ans.toLowerCase().includes("true")) return "TRUE";
+    if (ans.toLowerCase().includes("false")) return "FALSE";
+    return "NOT_GIVEN";
+  }
+
+  if (q.format === "author_view") {
+    const upper = ans.toUpperCase();
+    if (upper === "Y" || upper === "YES") return "YES";
+    if (upper === "N" || upper === "NO") return "NO";
+    if (upper === "NG" || upper === "NOT GIVEN" || upper === "NOT_GIVEN") return "NOT_GIVEN";
+    if (ans.toLowerCase().includes("yes")) return "YES";
+    if (ans.toLowerCase().includes("no")) return "NO";
+    return "NOT_GIVEN";
+  }
+
+  // For multiple choice / synonym / reference etc: ensure the key exists in options
+  if (q.options && q.options.length > 0) {
+    const keys = new Set(q.options.map((o) => normalizeOptionKey(o.key)));
+    const normalizedAns = normalizeOptionKey(ans);
+    if (!keys.has(normalizedAns)) {
+      // Answer key doesn't match any option — fallback to first option key
+      return q.options[0]!.key;
+    }
+    return normalizedAns;
+  }
+
+  return ans;
+}
+
+function ensurePassageText(q: GenericQuestion, fullPassage: string): string {
+  if (!q.passageText || q.passageText.trim().length < 50) {
+    return fullPassage;
+  }
+  return q.passageText.trim();
+}
+
+function ensureSkillTags(q: GenericQuestion): string[] {
+  if (Array.isArray(q.skillTags) && q.skillTags.length > 0) {
+    return q.skillTags.map((s) => String(s).trim()).filter(Boolean);
+  }
+  return ["comprehension"];
+}
+
+function ensureExplanation(q: GenericQuestion): string {
+  if (q.explanation && q.explanation.trim().length > 0) {
+    return q.explanation.trim();
+  }
+  return "Penjelasan tidak tersedia.";
+}
+
+function ensureQuestionText(q: GenericQuestion): string {
+  const text = q.questionText?.trim();
+  if (text && text.length >= 10) return text;
+  return text || "Soal latihan membaca.";
+}
+
+function ensureDifficulty(q: GenericQuestion): number {
+  const d = Number(q.difficulty);
+  if (Number.isFinite(d) && d >= 1 && d <= 5) return Math.round(d);
+  return 3;
+}
+
+/**
+ * Repair a single raw question to maximize chance of passing Zod validation.
+ */
+export function repairQuestion(
+  raw: unknown,
+  fullPassage: string,
+): { question: GenericQuestion; wasRepaired: boolean; repairNotes: string[] } {
+  const notes: string[] = [];
+  let wasRepaired = false;
+
+  if (!raw || typeof raw !== "object") {
+    throw new Error("Question is not an object");
+  }
+
+  const r = raw as Record<string, unknown>;
+
+  // Build generic question with defaults
+  const q: GenericQuestion = {
+    format: String(r.format || "multiple_choice").trim().toLowerCase() as any,
+    passageText: ensurePassageText(r as GenericQuestion, fullPassage),
+    questionText: ensureQuestionText(r as GenericQuestion),
+    options: Array.isArray(r.options)
+      ? r.options
+          .filter((o: any) => o && typeof o === "object")
+          .map((o: any) => ({ key: String(o.key ?? ""), text: String(o.text ?? "") }))
+      : undefined,
+    correctAnswer: String(r.correctAnswer ?? "").trim(),
+    explanation: ensureExplanation(r as GenericQuestion),
+    difficulty: ensureDifficulty(r as GenericQuestion),
+    skillTags: ensureSkillTags(r as GenericQuestion),
+  };
+
+  // Track repairs
+  if (!r.passageText || String(r.passageText).trim().length < 50) {
+    notes.push("passageText replaced with full passage");
+    wasRepaired = true;
+  }
+  if (!r.questionText || String(r.questionText).trim().length < 10) {
+    notes.push("questionText too short, used fallback");
+    wasRepaired = true;
+  }
+  if (!r.explanation || String(r.explanation).trim().length === 0) {
+    notes.push("explanation missing, used fallback");
+    wasRepaired = true;
+  }
+  if (!Array.isArray(r.skillTags) || r.skillTags.length === 0) {
+    notes.push("skillTags missing, used fallback");
+    wasRepaired = true;
+  }
+
+  // Coerce correctAnswer
+  const originalAns = q.correctAnswer;
+  q.correctAnswer = coerceCorrectAnswer(q);
+  if (q.correctAnswer !== originalAns) {
+    notes.push(`correctAnswer coerced from "${originalAns}" to "${q.correctAnswer}"`);
+    wasRepaired = true;
+  }
+
+  // Ensure options
+  const repairedOptions = ensureOptions(q);
+  if (repairedOptions !== undefined) {
+    if (!q.options || q.options.length === 0) {
+      notes.push("options missing, injected placeholders");
+      wasRepaired = true;
+    }
+    q.options = repairedOptions;
+  }
+
+  return { question: q, wasRepaired, repairNotes: notes };
+}
+
+/**
+ * Try to parse a generic question into the discriminated union schema.
+ * Returns null if it still fails.
+ */
+export function tryParseQuestion(generic: GenericQuestion): Question | null {
+  try {
+    return questionSchema.parse(generic as any);
+  } catch (err) {
+    return null;
+  }
+}
+
+/**
+ * Repair all questions, parse with Zod, separate valid/invalid.
+ */
+export function repairAndParseQuestions(
+  rawQuestions: unknown[],
+  fullPassage: string,
+): {
+  valid: Question[];
+  invalid: { index: number; raw: unknown; errors: string[] }[];
+  repairLog: string[];
+} {
+  const valid: Question[] = [];
+  const invalid: { index: number; raw: unknown; errors: string[] }[] = [];
+  const repairLog: string[] = [];
+
+  for (let i = 0; i < rawQuestions.length; i++) {
+    const raw = rawQuestions[i];
+    try {
+      const { question: repaired, wasRepaired, repairNotes } = repairQuestion(raw, fullPassage);
+      if (wasRepaired) {
+        repairLog.push(`Q${i + 1}: ${repairNotes.join("; ")}`);
+      }
+      const parsed = tryParseQuestion(repaired);
+      if (parsed) {
+        valid.push(parsed);
+      } else {
+        // Try to get Zod errors for diagnostics
+        const parseResult = questionSchema.safeParse(repaired as any);
+        const errors = parseResult.success
+          ? ["Unknown parse failure after repair"]
+          : parseResult.error.issues.map((iss) => `${iss.path.join(".")}: ${iss.message}`);
+        invalid.push({ index: i, raw, errors });
+        repairLog.push(`Q${i + 1}: still invalid after repair — ${errors.join(", ")}`);
+      }
+    } catch (err: any) {
+      invalid.push({ index: i, raw, errors: [err.message ?? "Repair failed"] });
+      repairLog.push(`Q${i + 1}: repair threw — ${err.message ?? String(err)}`);
+    }
+  }
+
+  return { valid, invalid, repairLog };
+}
+
+/**
+ * Build a generic JSON schema description for the AI prompt.
+ * Much simpler than the discriminated union — reduces AI confusion.
+ */
+export function getGenericQuestionJsonSchemaDescription(): string {
+  return JSON.stringify(
+    {
+      type: "object",
+      properties: {
+        questions: {
+          type: "array",
+          description: "Array of question objects",
+          items: {
+            type: "object",
+            properties: {
+              format: {
+                type: "string",
+                enum: [
+                  "multiple_choice",
+                  "true_false_not_given",
+                  "matching_headings",
+                  "matching_information",
+                  "fill_blank",
+                  "synonym",
+                  "grammar_in_context",
+                  "sentence_completion",
+                  "summary_completion",
+                  "cloze",
+                  "reference",
+                  "author_view",
+                  "kanji_reading",
+                  "particle_choice",
+                  "article_case",
+                  "character_reading",
+                  "sentence_arrangement",
+                ],
+              },
+              passageText: { type: "string", description: "Relevant excerpt from the passage (or full passage)" },
+              questionText: { type: "string", description: "The question text" },
+              options: {
+                type: "array",
+                description: "Required for multiple_choice, synonym, matching_*, reference, kanji_reading, particle_choice, article_case, character_reading, sentence_arrangement, summary_completion, cloze. Optional for others.",
+                items: {
+                  type: "object",
+                  properties: {
+                    key: { type: "string", description: "Option identifier (e.g. A, B, C, D)" },
+                    text: { type: "string", description: "Option text" },
+                  },
+                  required: ["key", "text"],
+                },
+              },
+              correctAnswer: {
+                type: "string",
+                description: "For true_false_not_given use TRUE/FALSE/NOT_GIVEN. For author_view use YES/NO/NOT_GIVEN. For multiple choice use the option key (e.g. A).",
+              },
+              explanation: { type: "string", description: "Explanation in Indonesian" },
+              difficulty: { type: "integer", minimum: 1, maximum: 5 },
+              skillTags: { type: "array", items: { type: "string" } },
+            },
+            required: ["format", "passageText", "questionText", "correctAnswer", "explanation", "difficulty", "skillTags"],
+          },
+        },
+      },
+      required: ["questions"],
+    },
+    null,
+    2,
+  );
+}

packages/ai/src/schemas.ts

@@ -188,6 +188,7 @@ export type Question = z.infer<typeof questionSchema>;
 export const generationInputSchema = z.object({
   examType: examTypeSchema,
   section: sectionTypeSchema,
+  selectedSections: z.array(sectionTypeSchema).min(1).optional(),
   formats: z.array(questionFormatSchema).min(1),
   difficulty: difficultySchema,
   topics: z.array(z.string()).min(1),

packages/api/src/queue.ts

@@ -1,7 +1,7 @@
 import { Queue, Worker, type Job } from "bullmq";
 import IORedis from "ioredis";
 import { env } from "@labas/env/server";
-import { generateQuestionsQuick, generateQuestionsAgentic, GenerationError, type GenerationInput } from "@labas/ai";
+import { generateQuestionsQuick, generateQuestionsAgentic, GenerationError, type GenerationInput, type GenerationResult } from "@labas/ai";
 import { db } from "@labas/db";
 import { generationJob, question, testPackage, packageSection, sectionQuestion } from "@labas/db";
 import { and, eq, notInArray } from "drizzle-orm";
@@ -92,6 +92,23 @@ export async function cancelGenerationJob(
   return { ok: true };
 }
 
+function computeSectionSplit(
+  selectedSections: string[],
+  count: number,
+): { section: string; count: number }[] {
+  const sections = selectedSections.length > 0 ? selectedSections : ["READING"];
+  if (count < 20 || sections.length <= 1) {
+    return [{ section: sections[0]!, count }];
+  }
+  const base = Math.floor(count / sections.length);
+  const remainder = count % sections.length;
+  const result = sections.map((section, i) => ({
+    section,
+    count: base + (i < remainder ? 1 : 0),
+  }));
+  return result;
+}
+
 export const generationQueue = new Queue("generation", {
   connection: new IORedis(env.REDIS_URL, connectionOptions),
 });
@@ -181,7 +198,14 @@ export const generationWorker = new Worker(
 
     try {
       const selectedMode = input.mode;
-      if (selectedMode === "agentic") {
+      const activeSections = input.selectedSections ?? [input.section];
+      const isMultiSection = selectedMode === "agentic" && input.questionCount >= 20 && activeSections.length > 1;
+      const sectionSplits = computeSectionSplit(activeSections, input.questionCount);
+
+      if (isMultiSection) {
+        await updateProgress(5, `Preparing ${sectionSplits.length} sections...`);
+        await pushLog("plan", `Multi-section plan: ${sectionSplits.map((s) => `${s.section}(${s.count})`).join(", ")}`, "done");
+      } else if (selectedMode === "agentic") {
         await updateProgress(10, "Generating passage...");
         await pushLog("generate_passage", "Starting passage generation...", "running");
       }
@@ -201,51 +225,102 @@ export const generationWorker = new Worker(
         }
       };
 
-      let result;
-      try {
-        result =
-          selectedMode === "agentic"
-            ? await generateQuestionsAgentic(input, async (p) => {
-                cancelPoll.check();
-                const stepProgress = Math.min(
-                  10 + Math.round((p.currentStep / p.steps.length) * 80),
-                  90,
-                );
-                const step = p.steps[p.currentStep];
-                const msg = step?.message ?? step?.step ?? "Processing...";
-                const status = step?.status === "error" ? "error" : step?.status === "done" ? "done" : "running";
-                await updateProgress(stepProgress, msg);
-                await pushLog(step?.step ?? "unknown", msg, status, step?.output);
-              }, tokenCounter)
-            : await generateQuestionsQuick(input, {
-                onToken: tokenCounter,
-              });
-      } catch (quickErr: any) {
-        const quickErrorMessage = quickErr?.message ?? String(quickErr);
-        const shouldFallbackToAgentic =
-          selectedMode === "quick" &&
-          (/Failed to parse AI response as JSON/i.test(quickErrorMessage) ||
-            /Unterminated string/i.test(quickErrorMessage) ||
-            /Missing 'questions' array/i.test(quickErrorMessage));
-
-        if (!shouldFallbackToAgentic) {
-          throw quickErr;
+      // ── Generation Phase ─────────────────────────────────────
+      let allQuestions: Array<{
+        section: string;
+        format: string;
+        passageText: string;
+        questionText: string;
+        options: any;
+        correctAnswer: string;
+        explanation: string;
+        difficulty: number;
+        skillTags: string[];
+        aiModel: string;
+      }> = [];
+      let totalTokens = 0;
+      let totalDurationMs = 0;
+
+      for (let secIdx = 0; secIdx < sectionSplits.length; secIdx++) {
+        const split = sectionSplits[secIdx]!;
+        const subInput: GenerationInput = { ...input, section: split.section as any, questionCount: split.count };
+        const progressSlice = isMultiSection ? 90 / sectionSplits.length : 80;
+        const progressOffset = isMultiSection ? 5 + secIdx * progressSlice : 10;
+
+        let sectionResult: GenerationResult;
+        try {
+          if (selectedMode === "agentic") {
+            sectionResult = await generateQuestionsAgentic(subInput, async (p) => {
+              cancelPoll.check();
+              const rawProgress = (p.currentStep / p.steps.length) * progressSlice;
+              const mappedProgress = Math.min(
+                Math.round(progressOffset + rawProgress),
+                isMultiSection ? Math.round(5 + (secIdx + 1) * progressSlice) : 90,
+              );
+              const step = p.steps[p.currentStep];
+              const msg = step?.message ?? step?.step ?? "Processing...";
+              const status = step?.status === "error" ? "error" : step?.status === "done" ? "done" : "running";
+              const prefix = isMultiSection ? `[${split.section}] ` : "";
+              await updateProgress(mappedProgress, `${prefix}${msg}`);
+              await pushLog(
+                step?.step ?? "unknown",
+                `${prefix}${msg}`,
+                status,
+                step?.output,
+              );
+            }, tokenCounter);
+          } else {
+            // Quick mode (single section only)
+            sectionResult = await generateQuestionsQuick(subInput, {
+              onToken: tokenCounter,
+            });
+          }
+        } catch (quickErr: any) {
+          const quickErrorMessage = quickErr?.message ?? String(quickErr);
+          const shouldFallbackToAgentic =
+            selectedMode === "quick" &&
+            (/Failed to parse AI response as JSON/i.test(quickErrorMessage) ||
+              /Unterminated string/i.test(quickErrorMessage) ||
+              /Missing 'questions' array/i.test(quickErrorMessage));
+
+          if (!shouldFallbackToAgentic) {
+            throw quickErr;
+          }
+
+          await updateProgress(25, "Quick mode JSON invalid, retrying with agentic mode...");
+          sectionResult = await generateQuestionsAgentic(
+            { ...subInput, mode: "agentic" },
+            async (p) => {
+              cancelPoll.check();
+              const stepProgress = Math.min(25 + Math.round((p.currentStep / p.steps.length) * 65), 90);
+              const msg =
+                p.steps[p.currentStep]?.message ?? p.steps[p.currentStep]?.step ?? "Processing...";
+              await updateProgress(stepProgress, msg);
+            },
+            tokenCounter,
+          );
         }
 
-        await updateProgress(25, "Quick mode JSON invalid, retrying with agentic mode...");
-        result = await generateQuestionsAgentic(
-          { ...input, mode: "agentic" },
-          async (p) => {
-            cancelPoll.check();
-            const stepProgress = Math.min(25 + Math.round((p.currentStep / p.steps.length) * 65), 90);
-            const msg =
-              p.steps[p.currentStep]?.message ?? p.steps[p.currentStep]?.step ?? "Processing...";
-            await updateProgress(stepProgress, msg);
-          },
-          tokenCounter,
-        );
+        for (const q of sectionResult.questions) {
+          allQuestions.push({
+            section: split.section,
+            format: q.format,
+            passageText: q.passageText,
+            questionText: q.questionText,
+            options: (q as any).options ?? null,
+            correctAnswer: q.correctAnswer,
+            explanation: q.explanation,
+            difficulty: q.difficulty,
+            skillTags: q.skillTags,
+            aiModel: input.apiKeyConfig.model,
+          });
+        }
+
+        totalTokens += sectionResult.meta.tokensUsed ?? 0;
+        totalDurationMs += sectionResult.meta.durationMs;
       }
 
+      // ── Saving Phase ─────────────────────────────────────────
       cancelPoll.check();
       await updateProgress(95, "Saving to bank...");
 
@@ -275,26 +350,26 @@ export const generationWorker = new Worker(
 
         const userId = jobRow?.userId;
         if (userId) {
-          const toInsert = result.questions.map((q) => ({
-            examTypeId: input.examType,
-            sectionTypeId: input.section,
-            format: q.format,
-            passageText: q.passageText,
-            questionText: q.questionText,
-            options: (q as any).options ?? null,
-            correctAnswer: q.correctAnswer,
-            explanation: q.explanation,
-            difficulty: q.difficulty,
-            skillTags: q.skillTags,
-            source: "ai" as const,
-            aiModel: input.apiKeyConfig.model,
-            creatorUserId: userId,
-            isPublic: false,
-          }));
-
           const inserted = await db
             .insert(question)
-            .values(toInsert as any)
+            .values(
+              allQuestions.map((q) => ({
+                examTypeId: input.examType,
+                sectionTypeId: q.section,
+                format: q.format,
+                passageText: q.passageText,
+                questionText: q.questionText,
+                options: q.options,
+                correctAnswer: q.correctAnswer,
+                explanation: q.explanation,
+                difficulty: q.difficulty,
+                skillTags: q.skillTags,
+                source: "ai" as const,
+                aiModel: q.aiModel,
+                creatorUserId: userId,
+                isPublic: false,
+              })) as any,
+            )
             .returning({ id: question.id });
 
           savedQuestionIds = inserted.map((r) => r.id);
@@ -308,18 +383,21 @@ export const generationWorker = new Worker(
                 month: "short",
                 year: "numeric",
               });
-              const pkgTitle = `AI Generated - ${input.examType} ${input.section} - ${dateStr}`;
+              const sectionLabel = isMultiSection
+                ? `${sectionSplits.length} sections`
+                : input.section;
+              const pkgTitle = `AI Generated - ${input.examType} ${sectionLabel} - ${dateStr}`;
 
               const [pkg] = await db
                 .insert(testPackage)
                 .values({
                   title: pkgTitle,
-                  description: `Paket latihan AI-generated dengan ${savedQuestionIds.length} soal ${input.examType} ${input.section}.`,
+                  description: `Paket latihan AI-generated dengan ${savedQuestionIds.length} soal ${input.examType}.`,
                   examTypeId: input.examType,
                   creatorUserId: userId,
                   isPublic: false,
                   totalQuestions: savedQuestionIds.length,
-                  totalSections: 1,
+                  totalSections: sectionSplits.length,
                   estimatedDurationMin: Math.ceil(savedQuestionIds.length * 1.5),
                 })
                 .returning();
@@ -327,24 +405,33 @@ export const generationWorker = new Worker(
               if (pkg) {
                 generatedPackageId = pkg.id;
 
-                const [sec] = await db
-                  .insert(packageSection)
-                  .values({
-                    packageId: pkg.id,
-                    sectionTypeId: input.section,
-                    title: `${input.section} Section`,
-                    orderIndex: 0,
-                  })
-                  .returning();
-
-                if (sec) {
-                  await db.insert(sectionQuestion).values(
-                    savedQuestionIds.map((qid, idx) => ({
-                      sectionId: sec.id,
-                      questionId: qid,
-                      orderIndex: idx,
-                    })),
-                  );
+                for (let i = 0; i < sectionSplits.length; i++) {
+                  const split = sectionSplits[i]!;
+                  const sectionQuestions = allQuestions
+                    .map((q, idx) => ({ ...q, _globalIndex: idx }))
+                    .filter((q) => q.section === split.section);
+
+                  const [sec] = await db
+                    .insert(packageSection)
+                    .values({
+                      packageId: pkg.id,
+                      sectionTypeId: split.section,
+                      title: `${split.section} Section`,
+                      orderIndex: i,
+                    })
+                    .returning();
+
+                  if (sec) {
+                    await db.insert(sectionQuestion).values(
+                      sectionQuestions
+                        .map((q, idx) => ({
+                          sectionId: sec.id,
+                          questionId: savedQuestionIds[q._globalIndex],
+                          orderIndex: idx,
+                        }))
+                        .filter((q) => q.questionId != null) as any,
+                    );
+                  }
                 }
               }
             } catch (packageErr: any) {
@@ -363,13 +450,23 @@ export const generationWorker = new Worker(
       await updateProgress(100, "Completed");
       await pushLog("save", `Saved ${savedQuestionIds.length} questions${generatedPackageId ? ` & created package` : ""}`, "done");
 
+      const combinedResult: GenerationResult = {
+        questions: allQuestions as any,
+        meta: {
+          model: input.apiKeyConfig.model,
+          tokensUsed: totalTokens || approxTokens,
+          durationMs: totalDurationMs || Date.now() - start,
+          mode: selectedMode,
+        },
+      };
+
       cancelPoll.check();
       await db
         .update(generationJob)
         .set({
           status: "completed",
-          resultJson: { ...result, savedQuestionIds, generatedPackageId } as any,
-          tokensUsed: result.meta.tokensUsed ?? approxTokens,
+          resultJson: { ...combinedResult, savedQuestionIds, generatedPackageId, sectionSplits } as any,
+          tokensUsed: totalTokens || approxTokens,
           durationMs: Date.now() - start,
           completedAt: new Date(),
         })

packages/api/src/routers/feedback.ts

@@ -2,7 +2,7 @@ import { z } from "zod";
 import { eq, and, sql } from "drizzle-orm";
 import { router, protectedProcedure, publicProcedure } from "../index";
 import { db } from "@labas/db";
-import { questionFeedback, question } from "@labas/db";
+import { questionFeedback } from "@labas/db";
 
 export const feedbackRouter = router({
   getQuestionFeedback: publicProcedure

packages/api/src/routers/stats.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { eq, and, desc, sql, gte } from "drizzle-orm";
+import { eq, and, sql, gte } from "drizzle-orm";
 import { router, protectedProcedure } from "../index";
 import { db } from "@labas/db";
 import {
@@ -12,10 +12,6 @@ import {
   sectionType,
 } from "@labas/db";
 
-function clamp(n: number, min: number, max: number) {
-  return Math.max(min, Math.min(max, n));
-}
-
 export const statsRouter = router({
   overview: protectedProcedure.query(async ({ ctx }) => {
     const userId = ctx.session.user.id;
@@ -257,7 +253,7 @@ export const statsRouter = router({
       const filled: { date: string; attempts: number; avgScorePct: number }[] = [];
       for (let i = days - 1; i >= 0; i--) {
         const d = new Date(Date.now() - i * 24 * 60 * 60 * 1000);
-        const key = d.toISOString().split("T")[0];
+        const key = d.toISOString().split("T")[0]!;
         filled.push(resultMap.get(key) ?? { date: key, attempts: 0, avgScorePct: 0 });
       }