Add new components for package creation and question detail, implement auto bundle modal, and update routing for builder combo. Also, include new hooks for job management and enhance UI with material icons and star rating components.

apps/web/src/components/bank/AutoBundleModal.tsx

@@ -0,0 +1,186 @@
+import { useState } from "react";
+import { Input } from "@labas/ui/components/input";
+import { Button } from "@labas/ui/components/button";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+export function AutoBundleModal({
+  availableCount,
+  examTypeName,
+  sectionTypeName,
+  onClose,
+  onCreate,
+  isPending,
+}: {
+  availableCount: number;
+  examTypeName: string;
+  sectionTypeName: string;
+  onClose: () => void;
+  onCreate: (data: {
+    title: string;
+    description: string;
+    isPublic: boolean;
+    count: number;
+    sortOrder: "random" | "difficulty";
+  }) => void;
+  isPending: boolean;
+}) {
+  const dateStr = new Date().toLocaleDateString("id-ID", { day: "numeric", month: "short" });
+  const [count, setCount] = useState(Math.min(availableCount, 10));
+  const [title, setTitle] = useState(`${examTypeName} ${sectionTypeName} Bundle — ${dateStr}`);
+  const [description, setDescription] = useState("");
+  const [isPublic, setIsPublic] = useState(false);
+  const [sortOrder, setSortOrder] = useState<"random" | "difficulty">("random");
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="bg-[var(--warm-cream)] w-full max-w-lg rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">
+            Auto Bundle
+          </h2>
+          <button
+            onClick={onClose}
+            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
+          >
+            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2 mb-4">
+          <span className="px-3 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
+            {examTypeName}
+          </span>
+          {sectionTypeName && (
+            <span className="px-3 py-1 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
+              {sectionTypeName}
+            </span>
+          )}
+          <span className="text-sm text-[var(--warm-charcoal)]">
+            {availableCount} soal tersedia
+          </span>
+        </div>
+
+        {availableCount < 5 && (
+          <div className="mb-4 p-3 rounded-[var(--radius-md)] bg-[var(--lemon-400)]/20 border-2 border-[var(--lemon-500)]/30 text-sm text-[var(--lemon-800)] flex items-start gap-2">
+            <MaterialIcon name="info" className="text-sm mt-0.5 shrink-0" />
+            <span>
+              Soal yang tersedia sedikit ({availableCount} soal). Paket tetap bisa dibuat, tapi disarankan untuk menambah soal.
+            </span>
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Judul Paket
+            </label>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="e.g. IELTS Reading Bundle"
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Deskripsi
+            </label>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Deskripsi singkat..."
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Jumlah Soal: {count}
+            </label>
+            <input
+              type="range"
+              min={1}
+              max={availableCount}
+              value={count}
+              onChange={(e) => setCount(Number(e.target.value))}
+              className="w-full h-2 bg-[var(--warm-silver)] rounded-full appearance-none cursor-pointer accent-[var(--clay-black)]"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Urutan Soal
+            </label>
+            <div className="flex gap-2">
+              <button
+                onClick={() => setSortOrder("random")}
+                className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all ${
+                  sortOrder === "random"
+                    ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+                    : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
+                }`}
+              >
+                <MaterialIcon name="shuffle" className="text-sm mr-1" />
+                Acak
+              </button>
+              <button
+                onClick={() => setSortOrder("difficulty")}
+                className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all ${
+                  sortOrder === "difficulty"
+                    ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+                    : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
+                }`}
+              >
+                <MaterialIcon name="trending_up" className="text-sm mr-1" />
+                Difficulty
+              </button>
+            </div>
+          </div>
+
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={isPublic}
+              onChange={(e) => setIsPublic(e.target.checked)}
+              className="w-4 h-4 rounded border-[var(--oat-border)]"
+            />
+            <span className="text-sm text-[var(--warm-charcoal)]">
+              Publikasikan ke Bank Soal
+            </span>
+          </label>
+        </div>
+
+        <div className="mt-6 flex gap-3">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            className="flex-1 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+          >
+            Batal
+          </Button>
+          <Button
+            onClick={() =>
+              onCreate({
+                title,
+                description,
+                isPublic,
+                count,
+                sortOrder,
+              })
+            }
+            disabled={!title || isPending || count < 1}
+            className="flex-1 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
+          >
+            {isPending ? "Membuat..." : "Buat Paket"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/bank/CreatePackageModal.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { Input } from "@labas/ui/components/input";
+import { Button } from "@labas/ui/components/button";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+export function CreatePackageModal({
+  selectedCount,
+  onClose,
+  onCreate,
+  isPending,
+  examTypeName,
+  lowCount,
+}: {
+  selectedCount: number;
+  onClose: () => void;
+  onCreate: (data: { title: string; description: string; isPublic: boolean }) => void;
+  isPending: boolean;
+  examTypeName: string;
+  lowCount: boolean;
+}) {
+  const dateStr = new Date().toLocaleDateString("id-ID", { day: "numeric", month: "short" });
+  const [title, setTitle] = useState(`${examTypeName} Bundle — ${selectedCount} Soal`);
+  const [description, setDescription] = useState("");
+  const [isPublic, setIsPublic] = useState(false);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="bg-[var(--warm-cream)] w-full max-w-lg rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">
+            Buat Paket Soal
+          </h2>
+          <button
+            onClick={onClose}
+            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
+          >
+            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2 mb-4">
+          <span className="px-3 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
+            {examTypeName}
+          </span>
+          <span className="text-sm text-[var(--warm-charcoal)]">
+            {selectedCount} soal
+          </span>
+        </div>
+
+        {lowCount && (
+          <div className="mb-4 p-3 rounded-[var(--radius-md)] bg-[var(--lemon-400)]/20 border-2 border-[var(--lemon-500)]/30 text-sm text-[var(--lemon-800)] flex items-start gap-2">
+            <MaterialIcon name="info" className="text-sm mt-0.5 shrink-0" />
+            <span>
+              Soal yang tersedia sedikit ({selectedCount} soal). Paket tetap bisa dibuat, tapi disarankan untuk menambah soal.
+            </span>
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Judul Paket
+            </label>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="e.g. IELTS Reading Bundle"
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Deskripsi
+            </label>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Deskripsi singkat..."
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
+            />
+          </div>
+
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={isPublic}
+              onChange={(e) => setIsPublic(e.target.checked)}
+              className="w-4 h-4 rounded border-[var(--oat-border)]"
+            />
+            <span className="text-sm text-[var(--warm-charcoal)]">
+              Publikasikan ke Bank Soal
+            </span>
+          </label>
+        </div>
+
+        <div className="mt-6 flex gap-3">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            className="flex-1 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+          >
+            Batal
+          </Button>
+          <Button
+            onClick={() => onCreate({ title, description, isPublic })}
+            disabled={!title || isPending}
+            className="flex-1 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
+          >
+            {isPending ? "Membuat..." : "Buat Paket"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/bank/QuestionDetailModal.tsx

@@ -0,0 +1,216 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { formatLabel } from "@/lib/format";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+export function QuestionDetailModal({
+  question,
+  onClose,
+  isSelected,
+  onToggleSelect,
+  isSelectable,
+}: {
+  question: any;
+  onClose: () => void;
+  isSelected: boolean;
+  onToggleSelect: () => void;
+  isSelectable: boolean;
+}) {
+  const { data: session } = authClient.useSession();
+  const isOwner = question.creatorUserId === session?.user.id;
+
+  const ratingQuery = useQuery(
+    trpc.rating.getQuestionRating.queryOptions({ questionId: question.id }),
+  );
+
+  const rateMutation = useMutation({
+    ...trpc.rating.rateQuestion.mutationOptions(),
+    onSuccess: () => ratingQuery.refetch(),
+  });
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="bg-[var(--warm-cream)] w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-6">
+          <div className="flex gap-2 flex-wrap">
+            <span className="px-3 py-1.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
+              {question.examTypeName}
+            </span>
+            <span className="px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
+              {question.sectionTypeName}
+            </span>
+            <span className="px-3 py-1.5 rounded-full bg-[var(--lemon-400)]/30 text-[var(--lemon-800)] text-sm font-semibold">
+              {formatLabel(question.format)}
+            </span>
+            <span className="px-3 py-1.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-sm font-semibold">
+              Level {question.difficulty}
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
+          >
+            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
+          </button>
+        </div>
+
+        {/* Passage */}
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
+          <CardContent className="p-6">
+            <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-4 flex items-center gap-2">
+              <MaterialIcon name="menu_book" />
+              Teks Bacaan
+            </h2>
+            <div className="text-[var(--clay-black)] leading-relaxed whitespace-pre-wrap text-sm">
+              {question.passageText}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Question */}
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
+          <CardContent className="p-6">
+            <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-4 flex items-center gap-2">
+              <MaterialIcon name="help_outline" />
+              Pertanyaan
+            </h2>
+            <p className="text-lg text-[var(--clay-black)] font-medium mb-4">
+              {question.questionText}
+            </p>
+
+            {!!question.options &&
+              Array.isArray(question.options as unknown[]) &&
+              (question.options as unknown[]).length > 0 && (
+                <div className="space-y-2 mt-4">
+                  {(question.options as Array<{ key: string; text: string }>).map(
+                    (opt) => (
+                      <div
+                        key={opt.key}
+                        className="flex items-center p-4 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)]"
+                      >
+                        <span className="w-6 h-6 rounded-full border-2 border-[var(--oat-border)] flex items-center justify-center mr-3 text-xs font-bold text-[var(--warm-charcoal)]">
+                          {opt.key}
+                        </span>
+                        <span className="text-[var(--clay-black)]">{opt.text}</span>
+                      </div>
+                    ),
+                  )}
+                </div>
+              )}
+
+            {!question.options && (
+              <div className="p-4 rounded-[var(--radius-md)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)] mt-4 text-sm text-[var(--warm-charcoal)]">
+                <span className="font-semibold text-[var(--clay-black)]">
+                  Jenis soal:{" "}
+                </span>
+                {formatLabel(question.format)}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Lock card */}
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
+          <CardContent className="p-6">
+            <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-2 flex items-center gap-2">
+              <MaterialIcon name="lock" />
+              Jawaban & Penjelasan
+            </h2>
+            <p className="text-sm text-[var(--warm-charcoal)]">
+              Jawaban dan penjelasan akan tersedia setelah kamu mencoba mengerjakan
+              soal ini dalam paket latihan.
+            </p>
+          </CardContent>
+        </Card>
+
+        {/* Rating */}
+        <div className="flex items-center gap-4 mb-6">
+          <div className="flex gap-1">
+            {[1, 2, 3, 4, 5].map((star) => (
+              <button
+                key={star}
+                onClick={() => rateMutation.mutate({ questionId: question.id, score: star })}
+                className="transition-transform hover:scale-110"
+              >
+                <MaterialIcon
+                  name={(ratingQuery.data?.myRating ?? 0) >= star ? "star" : "star_outline"}
+                  className={`text-xl ${(ratingQuery.data?.myRating ?? 0) >= star ? "text-[var(--lemon-500)]" : "text-[var(--oat-border)]"}`}
+                />
+              </button>
+            ))}
+          </div>
+          {ratingQuery.data?.avgRating && (
+            <span className="text-sm text-[var(--warm-charcoal)]">
+              {ratingQuery.data.avgRating}/5 ({question.usageCount}x digunakan)
+            </span>
+          )}
+          {!ratingQuery.data?.avgRating && (
+            <span className="text-sm text-[var(--warm-charcoal)]">
+              {question.usageCount}x digunakan
+            </span>
+          )}
+        </div>
+
+        {/* Meta & Owner Actions */}
+        <div className="flex flex-wrap items-center justify-between gap-4 text-sm text-[var(--warm-charcoal)] border-t border-[var(--oat-border)] pt-4">
+          <div className="flex gap-4">
+            <span>Dibuat oleh {question.creatorName ?? "Anonim"}</span>
+            <span>•</span>
+            <span className="capitalize">{question.source}</span>
+          </div>
+          {isOwner && (
+            <div className="flex gap-2 items-center">
+              <span
+                className={`px-3 py-1.5 rounded-full text-xs font-semibold ${
+                  question.isPublic
+                    ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                    : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
+                }`}
+              >
+                {question.isPublic ? "Publik" : "Privat"}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Footer Actions */}
+        <div className="mt-6 flex flex-col sm:flex-row items-center justify-between gap-3">
+          <Button
+            variant="outline"
+            onClick={onToggleSelect}
+            disabled={!isSelectable}
+            className={`rounded-[var(--radius-lg)] border-2 clay-hover ${
+              !isSelectable
+                ? "opacity-40 cursor-not-allowed border-[var(--oat-border)] text-[var(--warm-silver)]"
+                : isSelected
+                  ? "border-[var(--pomegranate-400)] text-[var(--pomegranate-600)] bg-[var(--pomegranate-50)]"
+                  : "border-[var(--oat-border)] text-[var(--warm-charcoal)]"
+            }`}
+          >
+            <MaterialIcon name={isSelected ? "remove" : "add"} className="mr-2" />
+            {!isSelectable
+              ? "Jenis ujian berbeda"
+              : isSelected
+                ? "Hapus dari Pilihan"
+                : "Tambah ke Paket"}
+          </Button>
+          <Button
+            onClick={onClose}
+            className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
+          >
+            Tutup
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { Link } from "@tanstack/react-router";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent, CardHeader } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import type { GenerationResult } from "@labas/ai";
+
+interface ResultSectionProps {
+  result: GenerationResult;
+  generatedPackageId: string | null;
+}
+
+export function ResultSection({ result, generatedPackageId }: ResultSectionProps) {
+  return (
+    <div className="mt-16 space-y-6">
+      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Hasil Generate</h2>
+          <p className="text-sm text-[var(--warm-charcoal)] mt-1">
+            Paket latihan berhasil dibuat! Soal juga tersimpan di Bank Soal (privat). Jawaban & penjelasan disembunyikan agar latihan tetap fair.
+          </p>
+        </div>
+        <div className="flex gap-3">
+          {generatedPackageId && (
+            <Link to="/package/$id" params={{ id: generatedPackageId }}>
+              <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
+                <MaterialIcon name="play_arrow" className="mr-2" />
+                Lihat Paket
+              </Button>
+            </Link>
+          )}
+          <Link to="/bank">
+            <Button className="bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]">
+              <MaterialIcon name="database" className="mr-2" />
+              Bank Soal
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <div className="text-sm text-[var(--warm-charcoal)] mb-4 font-mono">
+        Model: {result.meta.model} · Tokens: {result.meta.tokensUsed ?? "?"} · Waktu: {result.meta.durationMs}ms · {result.questions.length} soal
+      </div>
+
+      {result.questions.map((q, idx) => (
+        <Card key={idx} className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <span className="bg-[var(--matcha-600)] text-[var(--pure-white)] w-8 h-8 flex items-center justify-center rounded-[var(--radius-md)] font-bold text-sm">
+                {idx + 1}
+              </span>
+              <span className="text-sm font-bold text-[var(--matcha-600)] uppercase tracking-tighter">
+                {q.format.replace(/_/g, " ")}
+              </span>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="p-5 rounded-[var(--radius-lg)] bg-[var(--oat-light)] text-[var(--clay-black)] leading-relaxed whitespace-pre-wrap text-base">
+              {q.passageText}
+            </div>
+            <p className="font-medium text-[var(--clay-black)] text-lg">{q.questionText}</p>
+            {"options" in q && q.options && (
+              <div className="space-y-2">
+                {q.options.map((opt) => (
+                  <div
+                    key={opt.key}
+                    className="flex items-center p-4 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)]"
+                  >
+                    <span className="w-6 h-6 rounded-full border-2 border-[var(--oat-border)] flex items-center justify-center mr-3 text-xs font-bold text-[var(--warm-charcoal)]">
+                      {opt.key}
+                    </span>
+                    <span className="text-[var(--clay-black)]">{opt.text}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+            <div className="flex gap-2 flex-wrap">
+              {q.skillTags.map((tag) => (
+                <span
+                  key={tag}
+                  className="px-3 py-1 rounded-full bg-[var(--oat-light)] text-xs font-medium text-[var(--warm-charcoal)]"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,182 @@
+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";
+
+interface TestBlueprintCardProps {
+  examType: string;
+  section: string;
+  selectedFormats: string[];
+  questionCount: number;
+  weaknessAlign: number;
+  mode: "quick" | "agentic";
+  setMode: (mode: "quick" | "agentic") => void;
+  isGenerating: boolean;
+  generatePending: boolean;
+  hasKey: boolean;
+  jobProgress: number;
+  jobProgressMessage?: string | null;
+  error: string | null;
+  onGenerate: () => void;
+}
+
+export function TestBlueprintCard({
+  examType,
+  selectedFormats,
+  questionCount,
+  weaknessAlign,
+  mode,
+  setMode,
+  isGenerating,
+  generatePending,
+  hasKey,
+  jobProgress,
+  jobProgressMessage,
+  error,
+  onGenerate,
+}: TestBlueprintCardProps) {
+  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)]">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <MaterialIcon name="analytics" className="text-[var(--matcha-600)]" />
+            <CardTitle className="font-headline text-xl text-[var(--clay-black)]">Test Blueprint</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <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>
+          </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>
+            <span className="font-bold text-[var(--clay-black)]">{questionCount} Soal</span>
+          </div>
+          <div className="flex justify-between items-center pb-4 border-b border-[var(--oat-border)]">
+            <span className="text-[var(--warm-charcoal)]">Format</span>
+            <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>
+          </div>
+
+          {/* AI Confidence Score Orbit */}
+          <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">
+              AI Confidence Score
+            </span>
+            <div className="relative flex items-center justify-center">
+              <svg className="w-32 h-32 transform -rotate-90">
+                <circle className="text-[var(--warm-silver)]" cx="64" cy="64" fill="transparent" r="56" stroke="currentColor" strokeWidth="8" />
+                <circle
+                  className="text-[var(--matcha-600)]"
+                  cx="64"
+                  cy="64"
+                  fill="transparent"
+                  r="56"
+                  stroke="currentColor"
+                  strokeDasharray="351.85"
+                  strokeDashoffset={351.85 - (351.85 * (weaknessAlign / 100))}
+                  strokeWidth="8"
+                />
+              </svg>
+              <span className="absolute text-3xl font-headline font-extrabold text-[var(--clay-black)]">{Math.round(weaknessAlign)}%</span>
+            </div>
+            <p className="text-[11px] text-center text-[var(--warm-charcoal)] px-2 leading-tight">
+              Probabilitas tinggi untuk mengatasi blindspot linguistik utama.
+            </p>
+          </div>
+
+          {/* Mode Toggle */}
+          <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 ${
+                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" />
+              Quick
+            </button>
+            <button
+              onClick={() => setMode("agentic")}
+              className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all ${
+                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" />
+              Agentic
+            </button>
+          </div>
+
+          {mode === "agentic" && (
+            <div className="p-3 rounded-[var(--radius-md)] bg-[var(--badge-blue-bg)] border-2 border-[var(--badge-blue-bg)] text-xs text-[var(--badge-blue-text)]">
+              <div className="flex items-center gap-2 mb-1">
+                <MaterialIcon name="info" className="text-sm" />
+                <span className="font-semibold">Mode Agentic</span>
+              </div>
+              <p>Multi-step validation: passage → validate → questions → self-check → quality score. Lebih lambat tapi kualitas lebih terjamin.</p>
+            </div>
+          )}
+
+          {/* 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"
+            onClick={onGenerate}
+            disabled={isGenerating || generatePending || selectedFormats.length === 0 || !hasKey}
+          >
+            <MaterialIcon name="auto_awesome" className="group-hover:rotate-12 transition-transform" />
+            {isGenerating
+              ? mode === "agentic"
+                ? `Agentic... ${jobProgress}%`
+                : `Generating... ${jobProgress}%`
+              : "Generate & Launch"}
+          </Button>
+
+          {/* Progress */}
+          {isGenerating && (
+            <div className="space-y-2">
+              <div className="flex items-center gap-3 p-3 rounded-[var(--radius-md)] bg-[var(--matcha-300)]/20 border-2 border-[var(--matcha-300)]">
+                <MaterialIcon name="psychology" className="text-[var(--matcha-600)] animate-pulse" />
+                <div>
+                  <p className="text-sm font-semibold text-[var(--matcha-800)]">
+                    {jobProgressMessage ?? "Sedang berjalan..."}
+                  </p>
+                  <p className="text-xs text-[var(--warm-charcoal)]">
+                    {mode === "agentic"
+                      ? "Passage → Validate → Questions → Self-Check → Score"
+                      : "Quick generation mode"}
+                  </p>
+                </div>
+              </div>
+              <div className="w-full h-2 bg-[var(--oat-border)] rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-[var(--matcha-600)] transition-all duration-500"
+                  style={{ width: `${jobProgress}%` }}
+                />
+              </div>
+              <p className="text-xs text-[var(--warm-charcoal)] text-center">
+                Bisa ditinggal — hasil akan muncul otomatis
+              </p>
+            </div>
+          )}
+
+          {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>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/src/components/test/AttemptTestView.tsx

@@ -0,0 +1,205 @@
+import { Link } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { formatTime } from "@/lib/time";
+import { trpc } from "@/utils/trpc";
+import { QuestionInput } from "./QuestionInput";
+
+interface AttemptTestViewProps {
+  attemptId: string;
+  pkg: any;
+  currentSectionIdx: number;
+  setCurrentSectionIdx: (idx: number) => void;
+  answers: Record<string, string>;
+  onAnswerChange: (questionId: string, sectionResultId: string, value: string) => void;
+  timeElapsed: number;
+  answeredCount: number;
+  totalQuestions: number;
+  onFinish: () => void;
+  isFinished: boolean;
+  submittingQId: string | null;
+}
+
+export function AttemptTestView({
+  attemptId,
+  pkg,
+  currentSectionIdx,
+  setCurrentSectionIdx,
+  answers,
+  onAnswerChange,
+  timeElapsed,
+  answeredCount,
+  totalQuestions,
+  onFinish,
+  isFinished,
+  submittingQId,
+}: AttemptTestViewProps) {
+  const attemptQuery = useQuery(trpc.attempt.getById.queryOptions({ id: attemptId }));
+  const attempt = attemptQuery.data;
+  const currentSection = pkg.sections[currentSectionIdx];
+  const sectionData = attempt?.sections?.[currentSectionIdx];
+  const sectionResultId = sectionData?.sectionResultId;
+
+  return (
+    <div className="min-h-screen bg-[var(--warm-cream)]">
+      {/* Top Bar */}
+      <div className="sticky top-0 z-50 bg-[var(--pure-white)] border-b-2 border-[var(--oat-border)] px-4 md:px-8 py-3">
+        <div className="max-w-5xl mx-auto flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <Link to="/package/$id" params={{ id: pkg.id }} className="text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]">
+              <MaterialIcon name="close" />
+            </Link>
+            <h1 className="font-headline font-bold text-[var(--clay-black)] text-sm md:text-base truncate max-w-[200px] md:max-w-sm">
+              {pkg.title}
+            </h1>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-1.5 bg-[var(--oat-light)] px-3 py-1.5 rounded-full text-sm font-mono text-[var(--clay-black)]">
+              <MaterialIcon name="timer" className="text-sm" />
+              {formatTime(timeElapsed)}
+            </div>
+            <div className="hidden md:flex items-center gap-1.5 text-sm text-[var(--warm-charcoal)]">
+              <MaterialIcon name="check_circle" className="text-sm text-[var(--matcha-600)]" />
+              {answeredCount}/{totalQuestions}
+            </div>
+            <Button
+              onClick={onFinish}
+              disabled={isFinished}
+              className="bg-[var(--pomegranate-500)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-700)] clay-hover rounded-[var(--radius-lg)] text-sm px-4 py-2"
+            >
+              Selesai
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Section Tabs */}
+      <div className="max-w-5xl mx-auto px-4 md:px-8 py-4">
+        <div className="flex gap-2 overflow-x-auto pb-2">
+          {pkg.sections.map((sec: any, idx: number) => (
+            <button
+              key={sec.id}
+              onClick={() => setCurrentSectionIdx(idx)}
+              className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold whitespace-nowrap border-2 transition-colors ${
+                idx === currentSectionIdx
+                  ? "bg-[var(--clay-black)] text-[var(--pure-white)] border-[var(--clay-black)]"
+                  : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-[var(--oat-border)] hover:border-[var(--matcha-400)]"
+              }`}
+            >
+              {sec.title}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-5xl mx-auto px-4 md:px-8 pb-32">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left: Passage */}
+          <div className="lg:col-span-1">
+            <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] sticky top-24">
+              <CardContent className="p-5">
+                <h2 className="font-headline font-bold text-[var(--clay-black)] mb-3 flex items-center gap-2">
+                  <MaterialIcon name="menu_book" className="text-[var(--matcha-600)]" />
+                  Bacaan
+                </h2>
+                <div className="prose prose-sm max-w-none text-[var(--clay-black)] whitespace-pre-wrap text-sm leading-relaxed max-h-[60vh] overflow-y-auto pr-2">
+                  {currentSection.questions[0]?.passageText ?? "Tidak ada bacaan untuk section ini."}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Right: Questions */}
+          <div className="lg:col-span-2 space-y-4">
+            {currentSection.questions.map((q: any, idx: number) => {
+              const answerValue = answers[q.id] ?? "";
+              return (
+                <Card
+                  key={q.id}
+                  className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]"
+                >
+                  <CardContent className="p-5">
+                    <div className="flex items-start gap-3 mb-4">
+                      <span className="w-8 h-8 rounded-full bg-[var(--clay-black)] text-[var(--pure-white)] text-xs flex items-center justify-center font-bold shrink-0">
+                        {idx + 1}
+                      </span>
+                      <div>
+                        <p className="text-[var(--clay-black)] font-medium leading-relaxed">
+                          {q.questionText}
+                        </p>
+                        <div className="flex gap-2 mt-1">
+                          <span className="text-xs px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
+                            {q.format.replace(/_/g, " ")}
+                          </span>
+                          {q.difficulty && (
+                            <span className="text-xs px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
+                              Lv.{q.difficulty}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="pl-11">
+                      {submittingQId === q.id && (
+                        <div className="text-xs text-[var(--matcha-600)] mb-2 flex items-center gap-1">
+                          <MaterialIcon name="sync" className="text-xs animate-spin" />
+                          Menyimpan...
+                        </div>
+                      )}
+                      <QuestionInput
+                        question={q}
+                        value={answerValue}
+                        onChange={(val) => {
+                          if (sectionResultId) {
+                            onAnswerChange(q.id, sectionResultId, val);
+                          }
+                        }}
+                        disabled={isFinished || !sectionResultId}
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+
+            {/* Section Navigation */}
+            <div className="flex justify-between pt-4">
+              <Button
+                variant="outline"
+                onClick={() => setCurrentSectionIdx(Math.max(0, currentSectionIdx - 1))}
+                disabled={currentSectionIdx === 0}
+                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+              >
+                <MaterialIcon name="arrow_back" />
+                <span className="ml-2">Sebelumnya</span>
+              </Button>
+              {currentSectionIdx < pkg.sections.length - 1 ? (
+                <Button
+                  onClick={() => setCurrentSectionIdx(currentSectionIdx + 1)}
+                  className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
+                >
+                  <span className="mr-2">Selanjutnya</span>
+                  <MaterialIcon name="arrow_forward" />
+                </Button>
+              ) : (
+                <Button
+                  onClick={onFinish}
+                  disabled={isFinished}
+                  className="bg-[var(--pomegranate-500)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-700)] clay-hover rounded-[var(--radius-lg)]"
+                >
+                  <MaterialIcon name="check_circle" />
+                  <span className="ml-2">Selesaikan</span>
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/test/QuestionInput.tsx

@@ -0,0 +1,140 @@
+import { Input } from "@labas/ui/components/input";
+
+const MCQ_FORMATS = [
+  "multiple_choice",
+  "synonym",
+  "grammar_in_context",
+  "sentence_completion",
+  "reference",
+  "kanji_reading",
+  "particle_choice",
+  "article_case",
+  "matching_headings",
+  "matching_information",
+  "summary_completion",
+  "cloze",
+];
+
+const TRUE_FALSE_CHOICES = [
+  { key: "TRUE", label: "True" },
+  { key: "FALSE", label: "False" },
+  { key: "NOT_GIVEN", label: "Not Given" },
+];
+
+const AUTHOR_VIEW_CHOICES = [
+  { key: "YES", label: "Yes" },
+  { key: "NO", label: "No" },
+  { key: "NOT_GIVEN", label: "Not Given" },
+];
+
+const radioClass =
+  "flex items-center gap-3 p-3 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] cursor-pointer hover:border-[var(--matcha-400)] transition-colors";
+const radioSelected = "border-[var(--matcha-600)] bg-[var(--matcha-100)]";
+const radioDisabled = "opacity-60 cursor-not-allowed";
+
+export function QuestionInput({
+  question,
+  value,
+  onChange,
+  disabled,
+}: {
+  question: any;
+  value: string;
+  onChange: (val: string) => void;
+  disabled?: boolean;
+}) {
+  const format = question.format;
+  const options = question.options as Array<{ key: string; text: string }> | undefined;
+
+  if (MCQ_FORMATS.includes(format)) {
+    if (!options || options.length === 0) {
+      return (
+        <div className="text-sm text-[var(--warm-silver)] italic">
+          Tidak ada opsi tersedia untuk soal ini.
+        </div>
+      );
+    }
+    return (
+      <div className="space-y-2">
+        {options.map((opt) => (
+          <label
+            key={opt.key}
+            className={`${radioClass} ${value === opt.key ? radioSelected : ""} ${disabled ? radioDisabled : ""}`}
+          >
+            <input
+              type="radio"
+              name={question.id}
+              value={opt.key}
+              checked={value === opt.key}
+              onChange={() => onChange(opt.key)}
+              disabled={disabled}
+              className="hidden"
+            />
+            <span className="w-8 h-8 rounded-full bg-[var(--oat-light)] text-[var(--clay-black)] text-sm font-bold flex items-center justify-center shrink-0">
+              {opt.key}
+            </span>
+            <span className="text-sm text-[var(--clay-black)]">{opt.text}</span>
+          </label>
+        ))}
+      </div>
+    );
+  }
+
+  if (format === "true_false_not_given") {
+    return (
+      <div className="space-y-2">
+        {TRUE_FALSE_CHOICES.map((c) => (
+          <label
+            key={c.key}
+            className={`${radioClass} ${value === c.key ? radioSelected : ""} ${disabled ? radioDisabled : ""}`}
+          >
+            <input
+              type="radio"
+              name={question.id}
+              value={c.key}
+              checked={value === c.key}
+              onChange={() => onChange(c.key)}
+              disabled={disabled}
+              className="hidden"
+            />
+            <span className="text-sm font-semibold text-[var(--clay-black)]">{c.label}</span>
+          </label>
+        ))}
+      </div>
+    );
+  }
+
+  if (format === "author_view") {
+    return (
+      <div className="space-y-2">
+        {AUTHOR_VIEW_CHOICES.map((c) => (
+          <label
+            key={c.key}
+            className={`${radioClass} ${value === c.key ? radioSelected : ""} ${disabled ? radioDisabled : ""}`}
+          >
+            <input
+              type="radio"
+              name={question.id}
+              value={c.key}
+              checked={value === c.key}
+              onChange={() => onChange(c.key)}
+              disabled={disabled}
+              className="hidden"
+            />
+            <span className="text-sm font-semibold text-[var(--clay-black)]">{c.label}</span>
+          </label>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <Input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={disabled}
+      placeholder="Ketik jawaban Anda..."
+      className="bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-lg)]"
+    />
+  );
+}

apps/web/src/components/ui/MaterialIcon.tsx

@@ -0,0 +1,3 @@
+export function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
+  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
+}

apps/web/src/components/ui/StarRating.tsx

@@ -0,0 +1,15 @@
+import { MaterialIcon } from "./MaterialIcon";
+
+export function StarRating({ value }: { value: number | null }) {
+  return (
+    <div className="flex gap-1">
+      {[1, 2, 3, 4, 5].map((star) => (
+        <MaterialIcon
+          key={star}
+          name={(value ?? 0) >= star ? "star" : "star_outline"}
+          className={`text-xl ${(value ?? 0) >= star ? "text-[var(--lemon-500)]" : "text-[var(--oat-border)]"}`}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,88 @@
+import { useState, useEffect, useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import type { GenerationResult } from "@labas/ai";
+
+const STORAGE_KEY = "labas_active_job";
+
+export function useGenerationJob() {
+  const [result, setResult] = useState<GenerationResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [generatedPackageId, setGeneratedPackageId] = useState<string | null>(null);
+  const [jobId, setJobIdState] = useState<string | null>(null);
+
+  const setJobId = useCallback((id: string | null) => {
+    setJobIdState(id);
+    if (id) {
+      sessionStorage.setItem(STORAGE_KEY, id);
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  }, []);
+
+  // Recover from sessionStorage on mount
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) setJobIdState(saved);
+  }, []);
+
+  // Fallback: check myJobs for active jobs
+  const myJobsQuery = useQuery(trpc.ai.myJobs.queryOptions({ limit: 10, offset: 0 }));
+
+  useEffect(() => {
+    if (!jobId && myJobsQuery.data) {
+      const active = myJobsQuery.data.find(
+        (j: any) => j.status === "pending" || j.status === "running",
+      );
+      if (active) setJobId(active.id);
+    }
+  }, [myJobsQuery.data, jobId, setJobId]);
+
+  // Poll job status
+  const jobQuery = useQuery({
+    ...trpc.ai.getJobStatus.queryOptions({ jobId: jobId! }, { enabled: !!jobId }),
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      if (!data) return 1000;
+      if (data.status === "completed" || data.status === "failed") return false;
+      return 1000;
+    },
+  });
+
+  const isGenerating =
+    jobId !== null &&
+    (!jobQuery.data || (jobQuery.data.status !== "completed" && jobQuery.data.status !== "failed"));
+
+  // Handle completion / failure
+  useEffect(() => {
+    if (jobQuery.data?.status === "completed" && jobQuery.data.resultJson) {
+      const res = jobQuery.data.resultJson as GenerationResult & { generatedPackageId?: string | null };
+      setResult(res);
+      setGeneratedPackageId(res.generatedPackageId ?? null);
+      setJobId(null);
+    }
+    if (jobQuery.data?.status === "failed") {
+      setError(jobQuery.data.errorMessage ?? "Generation failed");
+      setJobId(null);
+    }
+  }, [jobQuery.data, setJobId]);
+
+  const reset = useCallback(() => {
+    setResult(null);
+    setError(null);
+    setGeneratedPackageId(null);
+    setJobId(null);
+  }, [setJobId]);
+
+  return {
+    result,
+    error,
+    generatedPackageId,
+    jobId,
+    isGenerating,
+    jobQuery,
+    setError,
+    setJobId,
+    reset,
+  };
+}

apps/web/src/hooks/use-package-builder.ts

@@ -0,0 +1,118 @@
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { trpc } from "@/utils/trpc";
+
+export function usePackageBuilder() {
+  const navigate = useNavigate();
+
+  const createPackage = useMutation(trpc.package.create.mutationOptions());
+  const addSection = useMutation(trpc.package.addSection.mutationOptions());
+  const addQuestion = useMutation(trpc.package.addQuestion.mutationOptions());
+
+  const isPending = createPackage.isPending || addSection.isPending || addQuestion.isPending;
+
+  const handleCreatePackage = async (params: {
+    selectedIds: Set<string>;
+    questions: Array<{ id: string; examTypeId: string; sectionTypeId: string; sectionTypeName?: string | null; [key: string]: any }>;
+    title: string;
+    description: string;
+    isPublic: boolean;
+  }) => {
+    if (params.selectedIds.size === 0) return;
+
+    const firstId = Array.from(params.selectedIds)[0];
+    const firstQ = params.questions.find((q) => q.id === firstId);
+    const examTypeId = firstQ?.examTypeId ?? "";
+
+    try {
+      const pkg = await createPackage.mutateAsync({
+        title: params.title,
+        description: params.description,
+        examTypeId,
+        isPublic: params.isPublic,
+        estimatedDurationMin: params.selectedIds.size * 2,
+      });
+
+      const sec = await addSection.mutateAsync({
+        packageId: pkg.id,
+        sectionTypeId: firstQ?.sectionTypeId ?? "READING",
+        title: `${firstQ?.sectionTypeName ?? "Reading"} Section`,
+        orderIndex: 0,
+      });
+
+      const ids = Array.from(params.selectedIds);
+      for (let i = 0; i < ids.length; i++) {
+        await addQuestion.mutateAsync({
+          sectionId: sec.id,
+          questionId: ids[i],
+          orderIndex: i,
+        });
+      }
+
+      navigate({ to: "/package/$id", params: { id: pkg.id } });
+    } catch (err: any) {
+      alert("Gagal membuat paket: " + err.message);
+    }
+  };
+
+  const handleAutoBundle = async (params: {
+    title: string;
+    description: string;
+    isPublic: boolean;
+    examTypeId: string;
+    sectionTypeId: string;
+    count: number;
+    sortOrder: "random" | "difficulty";
+    allQuestions: Array<{ id: string; examTypeId: string; difficulty: number }>;
+  }) => {
+    const available = params.allQuestions.filter((q) => q.examTypeId === params.examTypeId);
+
+    let picked = available;
+    if (params.sortOrder === "random") {
+      picked = [...available].sort(() => Math.random() - 0.5);
+    } else {
+      picked = [...available].sort((a, b) => a.difficulty - b.difficulty);
+    }
+    picked = picked.slice(0, params.count);
+
+    if (picked.length === 0) {
+      alert("Tidak ada soal tersedia untuk ujian ini.");
+      return;
+    }
+
+    try {
+      const pkg = await createPackage.mutateAsync({
+        title: params.title,
+        description: params.description,
+        examTypeId: params.examTypeId,
+        isPublic: params.isPublic,
+        estimatedDurationMin: picked.length * 2,
+      });
+
+      const sec = await addSection.mutateAsync({
+        packageId: pkg.id,
+        sectionTypeId: params.sectionTypeId,
+        title: `${params.sectionTypeId} Section`,
+        orderIndex: 0,
+      });
+
+      for (let i = 0; i < picked.length; i++) {
+        await addQuestion.mutateAsync({
+          sectionId: sec.id,
+          questionId: picked[i].id,
+          orderIndex: i,
+        });
+      }
+
+      navigate({ to: "/package/$id", params: { id: pkg.id } });
+    } catch (err: any) {
+      alert("Gagal membuat paket: " + err.message);
+    }
+  };
+
+  return {
+    isPending,
+    handleCreatePackage,
+    handleAutoBundle,
+  };
+}

apps/web/src/hooks/use-question-selection.ts

@@ -0,0 +1,60 @@
+import { useState, useMemo } from "react";
+
+interface Question {
+  id: string;
+  examTypeId: string;
+  [key: string]: any;
+}
+
+export function useQuestionSelection(questions: Question[]) {
+  const [isSelectMode, setIsSelectMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const lockedExamType = useMemo(() => {
+    if (selectedIds.size === 0) return null;
+    const firstId = Array.from(selectedIds)[0];
+    const firstQ = questions.find((q) => q.id === firstId);
+    return firstQ?.examTypeId ?? null;
+  }, [selectedIds, questions]);
+
+  const toggleSelection = (id: string) => {
+    const q = questions.find((item) => item.id === id);
+    if (!q) return;
+    if (lockedExamType && q.examTypeId !== lockedExamType) return;
+
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const selectAll = () => {
+    if (lockedExamType) {
+      setSelectedIds(
+        new Set(questions.filter((q) => q.examTypeId === lockedExamType).map((q) => q.id)),
+      );
+    } else {
+      setSelectedIds(new Set(questions.map((q) => q.id)));
+    }
+  };
+
+  const clearSelection = () => setSelectedIds(new Set());
+
+  const exitSelectMode = () => {
+    setIsSelectMode(false);
+    setSelectedIds(new Set());
+  };
+
+  return {
+    isSelectMode,
+    setIsSelectMode,
+    selectedIds,
+    lockedExamType,
+    toggleSelection,
+    selectAll,
+    clearSelection,
+    exitSelectMode,
+  };
+}

apps/web/src/hooks/use-test-session.ts

@@ -0,0 +1,76 @@
+import { useState, useEffect, useCallback } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { trpc } from "@/utils/trpc";
+
+export function useTestSession(packageId: string) {
+  const navigate = useNavigate();
+
+  const [attemptId, setAttemptId] = useState<string | null>(null);
+  const [currentSectionIdx, setCurrentSectionIdx] = useState(0);
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [timeElapsed, setTimeElapsed] = useState(0);
+  const [isStarted, setIsStarted] = useState(false);
+  const [isFinished, setIsFinished] = useState(false);
+  const [submittingQId, setSubmittingQId] = useState<string | null>(null);
+
+  const startMutation = useMutation(trpc.attempt.start.mutationOptions());
+  const submitMutation = useMutation(trpc.attempt.submitAnswer.mutationOptions());
+  const finishMutation = useMutation(trpc.attempt.finish.mutationOptions());
+
+  // Timer
+  useEffect(() => {
+    if (!isStarted || isFinished) return;
+    const interval = setInterval(() => {
+      setTimeElapsed((t) => t + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [isStarted, isFinished]);
+
+  const handleStart = useCallback(async () => {
+    const res = await startMutation.mutateAsync({ packageId });
+    setAttemptId(res.attemptId);
+    setIsStarted(true);
+  }, [packageId, startMutation]);
+
+  const handleAnswerChange = useCallback(
+    async (questionId: string, sectionResultId: string, value: string) => {
+      if (!attemptId || isFinished) return;
+      setAnswers((prev) => ({ ...prev, [questionId]: value }));
+      setSubmittingQId(questionId);
+      try {
+        await submitMutation.mutateAsync({
+          attemptId,
+          sectionResultId,
+          questionId,
+          userAnswer: value,
+        });
+      } finally {
+        setSubmittingQId(null);
+      }
+    },
+    [attemptId, isFinished, submitMutation],
+  );
+
+  const handleFinish = useCallback(async () => {
+    if (!attemptId) return;
+    setIsFinished(true);
+    await finishMutation.mutateAsync({ attemptId });
+    navigate({ to: "/attempt/$id", params: { id: attemptId } });
+  }, [attemptId, finishMutation, navigate]);
+
+  return {
+    attemptId,
+    currentSectionIdx,
+    setCurrentSectionIdx,
+    answers,
+    timeElapsed,
+    isStarted,
+    isFinished,
+    submittingQId,
+    startPending: startMutation.isPending,
+    handleStart,
+    handleAnswerChange,
+    handleFinish,
+  };
+}

apps/web/src/lib/exam-constants.ts

@@ -0,0 +1,36 @@
+export const EXAM_TYPES = [
+  { id: "IELTS", name: "IELTS" },
+  { id: "TOEFL", name: "TOEFL" },
+  { id: "JLPT", name: "JLPT" },
+  { id: "HSK", name: "HSK" },
+  { id: "GOETHE", name: "German" },
+];
+
+export const SECTIONS = [
+  { id: "READING", name: "Reading" },
+  { id: "WRITING", name: "Writing" },
+];
+
+export const FORMATS = [
+  "multiple_choice",
+  "true_false_not_given",
+  "fill_blank",
+  "synonym",
+  "grammar_in_context",
+  "sentence_completion",
+  "cloze",
+  "reference",
+  "author_view",
+  "matching_headings",
+  "kanji_reading",
+  "particle_choice",
+  "article_case",
+];
+
+export const DIFFICULTIES = [
+  { value: 1, label: "Beginner" },
+  { value: 2, label: "Elementary" },
+  { value: 3, label: "Intermediate" },
+  { value: 4, label: "Advanced" },
+  { value: 5, label: "Expert" },
+];

apps/web/src/lib/format.ts

@@ -0,0 +1,3 @@
+export function formatLabel(fmt: string) {
+  return fmt.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+}

apps/web/src/lib/generate-constants.ts

@@ -0,0 +1,31 @@
+export const EXAM_TYPES = [
+  { id: "IELTS", name: "IELTS Academic", code: "gb" },
+  { id: "TOEFL", name: "TOEFL iBT", code: "us" },
+  { id: "JLPT", name: "JLPT", code: "jp" },
+  { id: "HSK", name: "HSK", code: "cn" },
+  { id: "GOETHE", name: "Goethe-Zertifikat", code: "de" },
+];
+
+export const SECTIONS = [
+  { id: "READING", name: "Reading", icon: "menu_book" },
+  { id: "WRITING", name: "Writing", icon: "edit_note" },
+];
+
+export const FORMATS = [
+  { id: "multiple_choice", name: "Multiple Choice" },
+  { id: "true_false_not_given", name: "True / False / Not Given" },
+  { id: "fill_blank", name: "Fill in Blank" },
+  { id: "synonym", name: "Synonym / Vocabulary" },
+  { id: "grammar_in_context", name: "Grammar in Context" },
+  { id: "sentence_completion", name: "Sentence Completion" },
+  { id: "cloze", name: "Cloze Test" },
+  { id: "reference", name: "Reference (Pronoun)" },
+  { id: "author_view", name: "Author's View" },
+  { id: "matching_headings", name: "Matching Headings" },
+  { id: "kanji_reading", name: "Kanji Reading (JLPT)" },
+  { id: "particle_choice", name: "Particle Choice (JLPT)" },
+  { id: "article_case", name: "Article / Case (German)" },
+];
+
+export const TOPICS = ["Science & Tech", "Business", "Sociology", "Arts", "History", "Environment", "Health", "Education"];
+export const DIFFICULTIES = ["Beginner", "Intermediate", "Academic", "Expert"];

apps/web/src/lib/time.ts

@@ -0,0 +1,5 @@
+export function formatTime(totalSeconds: number) {
+  const m = Math.floor(totalSeconds / 60);
+  const s = totalSeconds % 60;
+  return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+}

apps/web/src/routeTree.gen.ts

@@ -62,9 +62,9 @@ const PackageIdRoute = PackageIdRouteImport.update({
   getParentRoute: () => rootRouteImport,
 } as any)
 const BuilderComboRoute = BuilderComboRouteImport.update({
-  id: '/combo',
-  path: '/combo',
-  getParentRoute: () => BuilderRoute,
+  id: '/builder/combo',
+  path: '/builder/combo',
+  getParentRoute: () => rootRouteImport,
 } as any)
 const AttemptIdRoute = AttemptIdRouteImport.update({
   id: '/attempt/$id',
@@ -168,6 +168,7 @@ export interface RootRouteChildren {
   PackagesRoute: typeof PackagesRoute
   SettingsRoute: typeof SettingsRoute
   AttemptIdRoute: typeof AttemptIdRoute
+  BuilderComboRoute: typeof BuilderComboRoute
   PackageIdRoute: typeof PackageIdRouteWithChildren
 }
 
@@ -231,10 +232,10 @@ declare module '@tanstack/react-router' {
     }
     '/builder/combo': {
       id: '/builder/combo'
-      path: '/combo'
+      path: '/builder/combo'
       fullPath: '/builder/combo'
       preLoaderRoute: typeof BuilderComboRouteImport
-      parentRoute: typeof BuilderRoute
+      parentRoute: typeof rootRouteImport
     }
     '/attempt/$id': {
       id: '/attempt/$id'
@@ -274,6 +275,7 @@ const rootRouteChildren: RootRouteChildren = {
   PackagesRoute: PackagesRoute,
   SettingsRoute: SettingsRoute,
   AttemptIdRoute: AttemptIdRoute,
+  BuilderComboRoute: BuilderComboRoute,
   PackageIdRoute: PackageIdRouteWithChildren,
 }
 export const routeTree = rootRouteImport

apps/web/src/routes/__root.tsx

@@ -43,9 +43,11 @@ function RootComponent() {
         disableTransitionOnChange
         storageKey="labas-theme"
       >
-        <div className="min-h-screen bg-background">
+        <div className="min-h-screen bg-background relative">
           <Sidebar />
-          <main className={`min-h-screen transition-all duration-300 ${collapsed ? "md:ml-16" : "md:ml-64"}`}>
+          <main
+            className={`min-h-screen transition-all duration-300 relative z-0 ${collapsed ? "md:ml-16" : "md:ml-64"}`}
+          >
             <Outlet />
           </main>
         </div>

apps/web/src/routes/attempt.$id.tsx

@@ -4,6 +4,8 @@ import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { formatTime } from "@/lib/time";
 
 export const Route = createFileRoute("/attempt/$id")({
   component: AttemptResultComponent,
@@ -16,16 +18,6 @@ export const Route = createFileRoute("/attempt/$id")({
   },
 });
 
-function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
-  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
-}
-
-function formatTime(totalSeconds: number) {
-  const m = Math.floor(totalSeconds / 60);
-  const s = totalSeconds % 60;
-  return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
-}
-
 function AttemptResultComponent() {
   const { id: attemptId } = Route.useParams();
   const { data: session } = authClient.useSession();

apps/web/src/routes/bank.tsx

@@ -1,6 +1,6 @@
-import { useState, useMemo } from "react";
+import { useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { createFileRoute, redirect, Link, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { Input } from "@labas/ui/components/input";
@@ -14,6 +14,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@labas/ui/components/select";
+import { EXAM_TYPES, SECTIONS, FORMATS, DIFFICULTIES } from "@/lib/exam-constants";
+import { formatLabel } from "@/lib/format";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { useQuestionSelection } from "@/hooks/use-question-selection";
+import { usePackageBuilder } from "@/hooks/use-package-builder";
+import { CreatePackageModal } from "@/components/bank/CreatePackageModal";
+import { AutoBundleModal } from "@/components/bank/AutoBundleModal";
+import { QuestionDetailModal } from "@/components/bank/QuestionDetailModal";
 
 export const Route = createFileRoute("/bank")({
   component: BankComponent,
@@ -26,593 +34,11 @@ export const Route = createFileRoute("/bank")({
   },
 });
 
-const EXAM_TYPES = [
-  { id: "IELTS", name: "IELTS" },
-  { id: "TOEFL", name: "TOEFL" },
-  { id: "JLPT", name: "JLPT" },
-  { id: "HSK", name: "HSK" },
-  { id: "GOETHE", name: "German" },
-];
-
-const SECTIONS = [
-  { id: "READING", name: "Reading" },
-  { id: "WRITING", name: "Writing" },
-];
-
-const FORMATS = [
-  "multiple_choice",
-  "true_false_not_given",
-  "fill_blank",
-  "synonym",
-  "grammar_in_context",
-  "sentence_completion",
-  "cloze",
-  "reference",
-  "author_view",
-  "matching_headings",
-  "kanji_reading",
-  "particle_choice",
-  "article_case",
-];
-
-const DIFFICULTIES = [
-  { value: 1, label: "Beginner" },
-  { value: 2, label: "Elementary" },
-  { value: 3, label: "Intermediate" },
-  { value: 4, label: "Advanced" },
-  { value: 5, label: "Expert" },
-];
-
-function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
-  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
-}
-
-function formatLabel(fmt: string) {
-  return fmt.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
-}
-
-function StarRating({ value }: { value: number | null }) {
-  return (
-    <div className="flex gap-1">
-      {[1, 2, 3, 4, 5].map((star) => (
-        <MaterialIcon
-          key={star}
-          name={(value ?? 0) >= star ? "star" : "star_outline"}
-          className={`text-xl ${(value ?? 0) >= star ? "text-[var(--lemon-500)]" : "text-[var(--oat-border)]"}`}
-        />
-      ))}
-    </div>
-  );
-}
-
-// ── Create Package Modal ────────────────────────────────────
-
-function CreatePackageModal({
-  selectedCount,
-  onClose,
-  onCreate,
-  isPending,
-  examTypeName,
-  lowCount,
-}: {
-  selectedCount: number;
-  onClose: () => void;
-  onCreate: (data: { title: string; description: string; isPublic: boolean; examTypeId: string }) => void;
-  isPending: boolean;
-  examTypeName: string;
-  lowCount: boolean;
-}) {
-  const dateStr = new Date().toLocaleDateString("id-ID", { day: "numeric", month: "short" });
-  const [title, setTitle] = useState(`${examTypeName} Bundle — ${selectedCount} Soal`);
-  const [description, setDescription] = useState("");
-  const [isPublic, setIsPublic] = useState(false);
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div className="bg-[var(--warm-cream)] w-full max-w-lg rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
-        <div className="flex items-center justify-between mb-6">
-          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">
-            Buat Paket Soal
-          </h2>
-          <button
-            onClick={onClose}
-            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
-          >
-            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
-          </button>
-        </div>
-
-        <div className="flex items-center gap-2 mb-4">
-          <span className="px-3 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
-            {examTypeName}
-          </span>
-          <span className="text-sm text-[var(--warm-charcoal)]">
-            {selectedCount} soal
-          </span>
-        </div>
-
-        {lowCount && (
-          <div className="mb-4 p-3 rounded-[var(--radius-md)] bg-[var(--lemon-400)]/20 border-2 border-[var(--lemon-500)]/30 text-sm text-[var(--lemon-800)] flex items-start gap-2">
-            <MaterialIcon name="info" className="text-sm mt-0.5 shrink-0" />
-            <span>
-              Soal yang tersedia sedikit ({selectedCount} soal). Paket tetap bisa dibuat, tapi disarankan untuk menambah soal.
-            </span>
-          </div>
-        )}
-
-        <div className="space-y-4">
-          <div>
-            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
-              Judul Paket
-            </label>
-            <Input
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="e.g. IELTS Reading Bundle"
-              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
-            />
-          </div>
-
-          <div>
-            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
-              Deskripsi
-            </label>
-            <Input
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="Deskripsi singkat..."
-              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
-            />
-          </div>
-
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={isPublic}
-              onChange={(e) => setIsPublic(e.target.checked)}
-              className="w-4 h-4 rounded border-[var(--oat-border)]"
-            />
-            <span className="text-sm text-[var(--warm-charcoal)]">
-              Publikasikan ke Bank Soal
-            </span>
-          </label>
-        </div>
-
-        <div className="mt-6 flex gap-3">
-          <Button
-            variant="outline"
-            onClick={onClose}
-            className="flex-1 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
-          >
-            Batal
-          </Button>
-          <Button
-            onClick={() => onCreate({ title, description, isPublic, examTypeId: "" })}
-            disabled={!title || isPending}
-            className="flex-1 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
-          >
-            {isPending ? "Membuat..." : "Buat Paket"}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Auto Bundle Modal ───────────────────────────────────────
-
-function AutoBundleModal({
-  availableCount,
-  examTypeId,
-  examTypeName,
-  sectionTypeId,
-  sectionTypeName,
-  onClose,
-  onCreate,
-  isPending,
-}: {
-  availableCount: number;
-  examTypeId: string;
-  examTypeName: string;
-  sectionTypeId: string;
-  sectionTypeName: string;
-  onClose: () => void;
-  onCreate: (data: {
-    title: string;
-    description: string;
-    isPublic: boolean;
-    examTypeId: string;
-    sectionTypeId: string;
-    count: number;
-    sortOrder: "random" | "difficulty";
-  }) => void;
-  isPending: boolean;
-}) {
-  const dateStr = new Date().toLocaleDateString("id-ID", { day: "numeric", month: "short" });
-  const [count, setCount] = useState(Math.min(availableCount, 10));
-  const [title, setTitle] = useState(`${examTypeName} ${sectionTypeName} Bundle — ${dateStr}`);
-  const [description, setDescription] = useState("");
-  const [isPublic, setIsPublic] = useState(false);
-  const [sortOrder, setSortOrder] = useState<"random" | "difficulty">("random");
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div className="bg-[var(--warm-cream)] w-full max-w-lg rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
-        <div className="flex items-center justify-between mb-6">
-          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">
-            Auto Bundle
-          </h2>
-          <button
-            onClick={onClose}
-            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
-          >
-            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
-          </button>
-        </div>
-
-        <div className="flex items-center gap-2 mb-4">
-          <span className="px-3 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
-            {examTypeName}
-          </span>
-          {sectionTypeName && (
-            <span className="px-3 py-1 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
-              {sectionTypeName}
-            </span>
-          )}
-          <span className="text-sm text-[var(--warm-charcoal)]">
-            {availableCount} soal tersedia
-          </span>
-        </div>
-
-        {availableCount < 5 && (
-          <div className="mb-4 p-3 rounded-[var(--radius-md)] bg-[var(--lemon-400)]/20 border-2 border-[var(--lemon-500)]/30 text-sm text-[var(--lemon-800)] flex items-start gap-2">
-            <MaterialIcon name="info" className="text-sm mt-0.5 shrink-0" />
-            <span>
-              Soal yang tersedia sedikit ({availableCount} soal). Paket tetap bisa dibuat, tapi disarankan untuk menambah soal.
-            </span>
-          </div>
-        )}
-
-        <div className="space-y-4">
-          <div>
-            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
-              Judul Paket
-            </label>
-            <Input
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="e.g. IELTS Reading Bundle"
-              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
-            />
-          </div>
-
-          <div>
-            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
-              Deskripsi
-            </label>
-            <Input
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="Deskripsi singkat..."
-              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
-            />
-          </div>
-
-          <div>
-            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
-              Jumlah Soal: {count}
-            </label>
-            <input
-              type="range"
-              min={1}
-              max={availableCount}
-              value={count}
-              onChange={(e) => setCount(Number(e.target.value))}
-              className="w-full h-2 bg-[var(--warm-silver)] rounded-full appearance-none cursor-pointer accent-[var(--clay-black)]"
-            />
-          </div>
-
-          <div>
-            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
-              Urutan Soal
-            </label>
-            <div className="flex gap-2">
-              <button
-                onClick={() => setSortOrder("random")}
-                className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all ${
-                  sortOrder === "random"
-                    ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
-                    : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
-                }`}
-              >
-                <MaterialIcon name="shuffle" className="text-sm mr-1" />
-                Acak
-              </button>
-              <button
-                onClick={() => setSortOrder("difficulty")}
-                className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all ${
-                  sortOrder === "difficulty"
-                    ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
-                    : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
-                }`}
-              >
-                <MaterialIcon name="trending_up" className="text-sm mr-1" />
-                Difficulty
-              </button>
-            </div>
-          </div>
-
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={isPublic}
-              onChange={(e) => setIsPublic(e.target.checked)}
-              className="w-4 h-4 rounded border-[var(--oat-border)]"
-            />
-            <span className="text-sm text-[var(--warm-charcoal)]">
-              Publikasikan ke Bank Soal
-            </span>
-          </label>
-        </div>
-
-        <div className="mt-6 flex gap-3">
-          <Button
-            variant="outline"
-            onClick={onClose}
-            className="flex-1 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
-          >
-            Batal
-          </Button>
-          <Button
-            onClick={() => onCreate({
-              title,
-              description,
-              isPublic,
-              examTypeId,
-              sectionTypeId: sectionTypeId || "READING",
-              count,
-              sortOrder,
-            })}
-            disabled={!title || isPending || count < 1}
-            className="flex-1 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
-          >
-            {isPending ? "Membuat..." : "Buat Paket"}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Question Detail Modal ───────────────────────────────────
-
-function QuestionDetailModal({
-  question,
-  onClose,
-  isSelected,
-  onToggleSelect,
-  isSelectable,
-}: {
-  question: any;
-  onClose: () => void;
-  isSelected: boolean;
-  onToggleSelect: () => void;
-  isSelectable: boolean;
-}) {
-  const { data: session } = authClient.useSession();
-  const isOwner = question.creatorUserId === session?.user.id;
-
-  const ratingQuery = useQuery(
-    trpc.rating.getQuestionRating.queryOptions({ questionId: question.id }),
-  );
-
-  const rateMutation = useMutation({
-    ...trpc.rating.rateQuestion.mutationOptions(),
-    onSuccess: () => ratingQuery.refetch(),
-  });
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div className="bg-[var(--warm-cream)] w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
-        {/* Header */}
-        <div className="flex items-start justify-between mb-6">
-          <div className="flex gap-2 flex-wrap">
-            <span className="px-3 py-1.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
-              {question.examTypeName}
-            </span>
-            <span className="px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
-              {question.sectionTypeName}
-            </span>
-            <span className="px-3 py-1.5 rounded-full bg-[var(--lemon-400)]/30 text-[var(--lemon-800)] text-sm font-semibold">
-              {formatLabel(question.format)}
-            </span>
-            <span className="px-3 py-1.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-sm font-semibold">
-              Level {question.difficulty}
-            </span>
-          </div>
-          <button
-            onClick={onClose}
-            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
-          >
-            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
-          </button>
-        </div>
-
-        {/* Passage */}
-        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
-          <CardContent className="p-6">
-            <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-4 flex items-center gap-2">
-              <MaterialIcon name="menu_book" />
-              Teks Bacaan
-            </h2>
-            <div className="text-[var(--clay-black)] leading-relaxed whitespace-pre-wrap text-sm">
-              {question.passageText}
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Question */}
-        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
-          <CardContent className="p-6">
-            <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-4 flex items-center gap-2">
-              <MaterialIcon name="help_outline" />
-              Pertanyaan
-            </h2>
-            <p className="text-lg text-[var(--clay-black)] font-medium mb-4">
-              {question.questionText}
-            </p>
-
-            {!!question.options &&
-              Array.isArray(question.options as unknown[]) &&
-              (question.options as unknown[]).length > 0 && (
-                <div className="space-y-2 mt-4">
-                  {(question.options as Array<{ key: string; text: string }>).map(
-                    (opt) => (
-                      <div
-                        key={opt.key}
-                        className="flex items-center p-4 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)]"
-                      >
-                        <span className="w-6 h-6 rounded-full border-2 border-[var(--oat-border)] flex items-center justify-center mr-3 text-xs font-bold text-[var(--warm-charcoal)]">
-                          {opt.key}
-                        </span>
-                        <span className="text-[var(--clay-black)]">{opt.text}</span>
-                      </div>
-                    ),
-                  )}
-                </div>
-              )}
-
-            {!question.options && (
-              <div className="p-4 rounded-[var(--radius-md)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)] mt-4 text-sm text-[var(--warm-charcoal)]">
-                <span className="font-semibold text-[var(--clay-black)]">
-                  Jenis soal:{" "}
-                </span>
-                {formatLabel(question.format)}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* Lock card */}
-        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
-          <CardContent className="p-6">
-            <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-2 flex items-center gap-2">
-              <MaterialIcon name="lock" />
-              Jawaban & Penjelasan
-            </h2>
-            <p className="text-sm text-[var(--warm-charcoal)]">
-              Jawaban dan penjelasan akan tersedia setelah kamu mencoba mengerjakan
-              soal ini dalam paket latihan.
-            </p>
-          </CardContent>
-        </Card>
-
-        {/* Rating */}
-        <div className="flex items-center gap-4 mb-6">
-          <div className="flex gap-1">
-            {[1, 2, 3, 4, 5].map((star) => (
-              <button
-                key={star}
-                onClick={() => rateMutation.mutate({ questionId: question.id, score: star })}
-                className="transition-transform hover:scale-110"
-              >
-                <MaterialIcon
-                  name={(ratingQuery.data?.myRating ?? 0) >= star ? "star" : "star_outline"}
-                  className={`text-xl ${(ratingQuery.data?.myRating ?? 0) >= star ? "text-[var(--lemon-500)]" : "text-[var(--oat-border)]"}`}
-                />
-              </button>
-            ))}
-          </div>
-          {ratingQuery.data?.avgRating && (
-            <span className="text-sm text-[var(--warm-charcoal)]">
-              {ratingQuery.data.avgRating}/5 ({question.usageCount}x digunakan)
-            </span>
-          )}
-          {!ratingQuery.data?.avgRating && (
-            <span className="text-sm text-[var(--warm-charcoal)]">
-              {question.usageCount}x digunakan
-            </span>
-          )}
-        </div>
-
-        {/* Meta & Owner Actions */}
-        <div className="flex flex-wrap items-center justify-between gap-4 text-sm text-[var(--warm-charcoal)] border-t border-[var(--oat-border)] pt-4">
-          <div className="flex gap-4">
-            <span>Dibuat oleh {question.creatorName ?? "Anonim"}</span>
-            <span>•</span>
-            <span className="capitalize">{question.source}</span>
-          </div>
-          {isOwner && (
-            <div className="flex gap-2 items-center">
-              <span
-                className={`px-3 py-1.5 rounded-full text-xs font-semibold ${
-                  question.isPublic
-                    ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
-                    : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
-                }`}
-              >
-                {question.isPublic ? "Publik" : "Privat"}
-              </span>
-            </div>
-          )}
-        </div>
-
-        {/* Footer Actions */}
-        <div className="mt-6 flex flex-col sm:flex-row items-center justify-between gap-3">
-          <Button
-            variant="outline"
-            onClick={onToggleSelect}
-            disabled={!isSelectable}
-            className={`rounded-[var(--radius-lg)] border-2 clay-hover ${
-              !isSelectable
-                ? "opacity-40 cursor-not-allowed border-[var(--oat-border)] text-[var(--warm-silver)]"
-                : isSelected
-                  ? "border-[var(--pomegranate-400)] text-[var(--pomegranate-600)] bg-[var(--pomegranate-50)]"
-                  : "border-[var(--oat-border)] text-[var(--warm-charcoal)]"
-            }`}
-          >
-            <MaterialIcon name={isSelected ? "remove" : "add"} className="mr-2" />
-            {!isSelectable
-              ? "Jenis ujian berbeda"
-              : isSelected
-                ? "Hapus dari Pilihan"
-                : "Tambah ke Paket"}
-          </Button>
-          <Button
-            onClick={onClose}
-            className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
-          >
-            Tutup
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Bank Component ──────────────────────────────────────────
-
 type Tab = "mine" | "public";
 
 function BankComponent() {
   const { data: session } = authClient.useSession();
   const userId = session?.user.id;
-  const navigate = useNavigate();
 
   const [tab, setTab] = useState<Tab>("mine");
   const [search, setSearch] = useState("");
@@ -623,9 +49,7 @@ function BankComponent() {
   const [page, setPage] = useState(0);
   const [selectedQuestion, setSelectedQuestion] = useState<any | null>(null);
 
-  // Multi-select state
-  const [isSelectMode, setIsSelectMode] = useState(false);
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  // Modals
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [isAutoBundleOpen, setIsAutoBundleOpen] = useState(false);
 
@@ -650,6 +74,19 @@ function BankComponent() {
   const total = query.data?.total ?? 0;
   const totalPages = Math.ceil(total / limit);
 
+  const {
+    isSelectMode,
+    setIsSelectMode,
+    selectedIds,
+    lockedExamType,
+    toggleSelection,
+    selectAll,
+    clearSelection,
+    exitSelectMode,
+  } = useQuestionSelection(questions);
+
+  const { isPending: isPackagePending, handleCreatePackage, handleAutoBundle } = usePackageBuilder();
+
   const togglePublic = useMutation({
     ...trpc.question.togglePublic.mutationOptions(),
     onSuccess: () => query.refetch(),
@@ -660,10 +97,6 @@ function BankComponent() {
     onSuccess: () => query.refetch(),
   });
 
-  const createPackage = useMutation(trpc.package.create.mutationOptions());
-  const addSection = useMutation(trpc.package.addSection.mutationOptions());
-  const addQuestion = useMutation(trpc.package.addQuestion.mutationOptions());
-
   const clearFilters = () => {
     setSearch("");
     setExamType("");
@@ -675,160 +108,43 @@ function BankComponent() {
 
   const hasFilters = search || examType || section || format || difficulty !== undefined;
 
-  // Strict exam type guard: derive the locked exam type from first selection
-  const lockedExamType = useMemo(() => {
-    if (selectedIds.size === 0) return null;
-    const firstId = Array.from(selectedIds)[0];
-    const firstQ = questions.find((q) => q.id === firstId);
-    return firstQ?.examTypeId ?? null;
-  }, [selectedIds, questions]);
-
-  const toggleSelection = (id: string) => {
-    const q = questions.find((item) => item.id === id);
-    if (!q) return;
-
-    // Strict guard: cannot select different exam type
-    if (lockedExamType && q.examTypeId !== lockedExamType) return;
-
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  };
-
-  const selectAll = () => {
-    // Only select questions that match the locked exam type
-    if (lockedExamType) {
-      setSelectedIds(new Set(questions.filter((q) => q.examTypeId === lockedExamType).map((q) => q.id)));
-    } else {
-      setSelectedIds(new Set(questions.map((q) => q.id)));
-    }
-  };
-
-  const clearSelection = () => {
-    setSelectedIds(new Set());
-  };
-
-  const exitSelectMode = () => {
-    setIsSelectMode(false);
-    setSelectedIds(new Set());
-  };
+  const autoBundleExamType = examType || null;
+  const autoBundleSectionType = section || null;
 
-  const handleCreatePackage = async (data: {
+  const onCreatePackage = async (data: {
     title: string;
     description: string;
     isPublic: boolean;
-    examTypeId: string;
   }) => {
-    if (selectedIds.size === 0) return;
-
-    // Derive examTypeId from first selected question
-    const firstId = Array.from(selectedIds)[0];
-    const firstQ = questions.find((q) => q.id === firstId);
-    const examTypeId = firstQ?.examTypeId ?? data.examTypeId;
-
-    try {
-      const pkg = await createPackage.mutateAsync({
-        title: data.title,
-        description: data.description,
-        examTypeId,
-        isPublic: data.isPublic,
-        estimatedDurationMin: selectedIds.size * 2,
-      });
-
-      const sec = await addSection.mutateAsync({
-        packageId: pkg.id,
-        sectionTypeId: firstQ?.sectionTypeId ?? "READING",
-        title: `${firstQ?.sectionTypeName ?? "Reading"} Section`,
-        orderIndex: 0,
-      });
-
-      const ids = Array.from(selectedIds);
-      for (let i = 0; i < ids.length; i++) {
-        await addQuestion.mutateAsync({
-          sectionId: sec.id,
-          questionId: ids[i],
-          orderIndex: i,
-        });
-      }
-
-      setIsCreateModalOpen(false);
-      setIsSelectMode(false);
-      setSelectedIds(new Set());
-      navigate({ to: "/package/$id", params: { id: pkg.id } });
-    } catch (err: any) {
-      alert("Gagal membuat paket: " + err.message);
-    }
+    await handleCreatePackage({
+      selectedIds,
+      questions,
+      title: data.title,
+      description: data.description,
+      isPublic: data.isPublic,
+    });
+    setIsCreateModalOpen(false);
+    setIsSelectMode(false);
+    clearSelection();
   };
 
-  const handleAutoBundle = async (data: {
+  const onAutoBundle = async (data: {
     title: string;
     description: string;
     isPublic: boolean;
-    examTypeId: string;
-    sectionTypeId: string;
     count: number;
     sortOrder: "random" | "difficulty";
   }) => {
-    // Fetch all questions for this exam type (not just current page)
     const allQuestions = await query.refetch();
-    const available = (allQuestions.data?.questions ?? []).filter(
-      (q) => q.examTypeId === data.examTypeId,
-    );
-
-    let picked = available;
-    if (data.sortOrder === "random") {
-      picked = [...available].sort(() => Math.random() - 0.5);
-    } else {
-      picked = [...available].sort((a, b) => a.difficulty - b.difficulty);
-    }
-    picked = picked.slice(0, data.count);
-
-    if (picked.length === 0) {
-      alert("Tidak ada soal tersedia untuk ujian ini.");
-      return;
-    }
-
-    try {
-      const pkg = await createPackage.mutateAsync({
-        title: data.title,
-        description: data.description,
-        examTypeId: data.examTypeId,
-        isPublic: data.isPublic,
-        estimatedDurationMin: picked.length * 2,
-      });
-
-      const sec = await addSection.mutateAsync({
-        packageId: pkg.id,
-        sectionTypeId: data.sectionTypeId,
-        title: `${data.sectionTypeId} Section`,
-        orderIndex: 0,
-      });
-
-      for (let i = 0; i < picked.length; i++) {
-        await addQuestion.mutateAsync({
-          sectionId: sec.id,
-          questionId: picked[i].id,
-          orderIndex: i,
-        });
-      }
-
-      setIsAutoBundleOpen(false);
-      navigate({ to: "/package/$id", params: { id: pkg.id } });
-    } catch (err: any) {
-      alert("Gagal membuat paket: " + err.message);
-    }
+    await handleAutoBundle({
+      ...data,
+      examTypeId: autoBundleExamType ?? "",
+      sectionTypeId: autoBundleSectionType ?? "READING",
+      allQuestions: allQuestions.data?.questions ?? [],
+    });
+    setIsAutoBundleOpen(false);
   };
 
-  // Auto-bundle: count available questions for current filters
-  const autoBundleExamType = examType || null;
-  const autoBundleSectionType = section || null;
-
   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)]">
       <section className="mb-8">
@@ -890,10 +206,6 @@ function BankComponent() {
 
         <div className="flex flex-wrap gap-2">
           <Select
-            items={[
-              { value: "", label: "Semua Ujian" },
-              ...EXAM_TYPES.map((t) => ({ value: t.id, label: t.name })),
-            ]}
             value={examType}
             onValueChange={(v: string | null) => { setExamType(v ?? ""); setPage(0); }}
           >
@@ -911,10 +223,6 @@ function BankComponent() {
           </Select>
 
           <Select
-            items={[
-              { value: "", label: "Semua Section" },
-              ...SECTIONS.map((s) => ({ value: s.id, label: s.name })),
-            ]}
             value={section}
             onValueChange={(v: string | null) => { setSection(v ?? ""); setPage(0); }}
           >
@@ -932,10 +240,6 @@ function BankComponent() {
           </Select>
 
           <Select
-            items={[
-              { value: "", label: "Semua Format" },
-              ...FORMATS.map((f) => ({ value: f, label: formatLabel(f) })),
-            ]}
             value={format}
             onValueChange={(v: string | null) => { setFormat(v ?? ""); setPage(0); }}
           >
@@ -953,10 +257,6 @@ function BankComponent() {
           </Select>
 
           <Select
-            items={[
-              { value: "", label: "Semua Level" },
-              ...DIFFICULTIES.map((d) => ({ value: String(d.value), label: d.label })),
-            ]}
             value={difficulty !== undefined ? String(difficulty) : ""}
             onValueChange={(v: string | null) => { setDifficulty(v ? Number(v) : undefined); setPage(0); }}
           >
@@ -1251,8 +551,8 @@ function BankComponent() {
         <CreatePackageModal
           selectedCount={selectedIds.size}
           onClose={() => setIsCreateModalOpen(false)}
-          onCreate={handleCreatePackage}
-          isPending={createPackage.isPending || addSection.isPending}
+          onCreate={onCreatePackage}
+          isPending={isPackagePending}
           examTypeName={EXAM_TYPES.find((t) => t.id === lockedExamType)?.name ?? "Unknown"}
           lowCount={selectedIds.size < 5}
         />
@@ -1262,13 +562,11 @@ function BankComponent() {
       {isAutoBundleOpen && autoBundleExamType && (
         <AutoBundleModal
           availableCount={total}
-          examTypeId={autoBundleExamType}
           examTypeName={EXAM_TYPES.find((t) => t.id === autoBundleExamType)?.name ?? autoBundleExamType}
-          sectionTypeId={autoBundleSectionType ?? "READING"}
           sectionTypeName={SECTIONS.find((s) => s.id === autoBundleSectionType)?.name ?? "Reading"}
           onClose={() => setIsAutoBundleOpen(false)}
-          onCreate={handleAutoBundle}
-          isPending={createPackage.isPending || addSection.isPending}
+          onCreate={onAutoBundle}
+          isPending={isPackagePending}
         />
       )}
     </div>

apps/web/src/routes/builder.combo.tsx

@@ -6,14 +6,7 @@ import { trpc } from "@/utils/trpc";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@labas/ui/components/select";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 export const Route = createFileRoute("/builder/combo")({
   component: ComboBuilderComponent,
@@ -26,10 +19,6 @@ export const Route = createFileRoute("/builder/combo")({
   },
 });
 
-function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
-  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
-}
-
 interface SelectedSection {
   sourcePackageId: string;
   sourceSectionId: string;

apps/web/src/routes/generate.tsx

@@ -1,46 +1,22 @@
-import { useState, useEffect } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
 import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { useApiKey } from "@/hooks/use-api-key";
-import { Button } from "@labas/ui/components/button";
+import { useGenerationJob } from "@/hooks/use-generation-job";
 import { Input } from "@labas/ui/components/input";
-import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { TestBlueprintCard } from "@/components/generate/TestBlueprintCard";
+import { ResultSection } from "@/components/generate/ResultSection";
+import {
+  EXAM_TYPES,
+  SECTIONS,
+  FORMATS,
+  TOPICS,
+  DIFFICULTIES,
+} from "@/lib/generate-constants";
 import "flag-icons/css/flag-icons.min.css";
-import type { GenerationResult } from "@labas/ai";
-
-const EXAM_TYPES = [
-  { id: "IELTS", name: "IELTS Academic", code: "gb" },
-  { id: "TOEFL", name: "TOEFL iBT", code: "us" },
-  { id: "JLPT", name: "JLPT", code: "jp" },
-  { id: "HSK", name: "HSK", code: "cn" },
-  { id: "GOETHE", name: "Goethe-Zertifikat", code: "de" },
-];
-
-const SECTIONS = [
-  { id: "READING", name: "Reading", icon: "menu_book" },
-  { id: "WRITING", name: "Writing", icon: "edit_note" },
-];
-
-const FORMATS = [
-  { id: "multiple_choice", name: "Multiple Choice" },
-  { id: "true_false_not_given", name: "True / False / Not Given" },
-  { id: "fill_blank", name: "Fill in Blank" },
-  { id: "synonym", name: "Synonym / Vocabulary" },
-  { id: "grammar_in_context", name: "Grammar in Context" },
-  { id: "sentence_completion", name: "Sentence Completion" },
-  { id: "cloze", name: "Cloze Test" },
-  { id: "reference", name: "Reference (Pronoun)" },
-  { id: "author_view", name: "Author's View" },
-  { id: "matching_headings", name: "Matching Headings" },
-  { id: "kanji_reading", name: "Kanji Reading (JLPT)" },
-  { id: "particle_choice", name: "Particle Choice (JLPT)" },
-  { id: "article_case", name: "Article / Case (German)" },
-];
-
-const TOPICS = ["Science & Tech", "Business", "Sociology", "Arts", "History", "Environment", "Health", "Education"];
-const DIFFICULTIES = ["Beginner", "Intermediate", "Academic", "Expert"];
 
 export const Route = createFileRoute("/generate")({
   component: RouteComponent,
@@ -53,13 +29,20 @@ export const Route = createFileRoute("/generate")({
   },
 });
 
-function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
-  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
-}
-
 function RouteComponent() {
   const { storedKey, hasKey } = useApiKey();
 
+  const {
+    result,
+    error,
+    generatedPackageId,
+    isGenerating,
+    jobQuery,
+    setError,
+    setJobId,
+    reset,
+  } = useGenerationJob();
+
   const [examType, setExamType] = useState("IELTS");
   const [section, setSection] = useState("READING");
   const [selectedFormats, setSelectedFormats] = useState<string[]>(["multiple_choice"]);
@@ -67,52 +50,14 @@ function RouteComponent() {
   const [selectedTopics, setSelectedTopics] = useState<string[]>(["Science & Tech"]);
   const [questionCount, setQuestionCount] = useState(5);
   const [weaknessAlign, setWeaknessAlign] = useState(75);
-  const [result, setResult] = useState<GenerationResult | null>(null);
-  const [error, setError] = useState<string | null>(null);
   const [mode, setMode] = useState<"quick" | "agentic">("quick");
-  const [jobId, setJobIdState] = useState<string | null>(null);
-  const [generatedPackageId, setGeneratedPackageId] = useState<string | null>(null);
-
-  // Persist jobId to sessionStorage so it survives navigation
-  const setJobId = (id: string | null) => {
-    setJobIdState(id);
-    if (id) {
-      sessionStorage.setItem("labas_active_job", id);
-    } else {
-      sessionStorage.removeItem("labas_active_job");
-    }
-  };
-
-  // On mount: recover from sessionStorage
-  useEffect(() => {
-    const saved = sessionStorage.getItem("labas_active_job");
-    if (saved) {
-      setJobIdState(saved);
-    }
-  }, []);
-
-  // Also check myJobs for any pending/running jobs (fallback / cross-tab sync)
-  const myJobsQuery = useQuery(
-    trpc.ai.myJobs.queryOptions({ limit: 10, offset: 0 }),
-  );
-
-  useEffect(() => {
-    if (!jobId && myJobsQuery.data) {
-      const active = myJobsQuery.data.find(
-        (j: any) => j.status === "pending" || j.status === "running",
-      );
-      if (active) {
-        setJobId(active.id);
-      }
-    }
-  }, [myJobsQuery.data, jobId]);
 
   const generate = useMutation({
     ...trpc.ai.generate.mutationOptions(),
     onSuccess: (data) => {
       setJobId(data.jobId);
       setError(null);
-      setResult(null);
+      reset();
     },
     onError: (err) => {
       setError(err.message);
@@ -120,37 +65,6 @@ function RouteComponent() {
     },
   });
 
-  // Poll job status
-  const jobQuery = useQuery({
-    ...trpc.ai.getJobStatus.queryOptions(
-      { jobId: jobId! },
-      { enabled: !!jobId },
-    ),
-    refetchInterval: (query) => {
-      const data = query.state.data;
-      if (!data) return 1000;
-      if (data.status === "completed" || data.status === "failed") return false;
-      return 1000;
-    },
-  });
-
-  const isGenerating =
-    jobId !== null &&
-    (!jobQuery.data || (jobQuery.data.status !== "completed" && jobQuery.data.status !== "failed"));
-
-  useEffect(() => {
-    if (jobQuery.data?.status === "completed" && jobQuery.data.resultJson) {
-      const res = jobQuery.data.resultJson as GenerationResult & { generatedPackageId?: string | null };
-      setResult(res);
-      setGeneratedPackageId(res.generatedPackageId ?? null);
-      setJobId(null);
-    }
-    if (jobQuery.data?.status === "failed") {
-      setError(jobQuery.data.errorMessage ?? "Generation failed");
-      setJobId(null);
-    }
-  }, [jobQuery.data]);
-
   const toggleFormat = (id: string) => {
     setSelectedFormats((prev) =>
       prev.includes(id) ? prev.filter((f) => f !== id) : [...prev, id],
@@ -169,9 +83,7 @@ function RouteComponent() {
       return;
     }
 
-    setResult(null);
-    setError(null);
-    setJobId(null);
+    reset();
 
     generate.mutate({
       examType: examType as any,
@@ -302,7 +214,7 @@ function RouteComponent() {
                     />
                     <span className="font-semibold text-[var(--clay-black)]">{s.name}</span>
                   </div>
-                  <input
+                  <Input
                     type="checkbox"
                     checked={section === s.id}
                     readOnly
@@ -376,228 +288,27 @@ function RouteComponent() {
         </div>
 
         {/* Live Preview Card (Right) */}
-        <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)]">
-            <CardHeader>
-              <div className="flex items-center gap-3">
-                <MaterialIcon name="analytics" className="text-[var(--matcha-600)]" />
-                <CardTitle className="font-headline text-xl text-[var(--clay-black)]">Test Blueprint</CardTitle>
-              </div>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <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>
-              </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>
-                <span className="font-bold text-[var(--clay-black)]">{questionCount} Soal</span>
-              </div>
-              <div className="flex justify-between items-center pb-4 border-b border-[var(--oat-border)]">
-                <span className="text-[var(--warm-charcoal)]">Format</span>
-                <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>
-              </div>
-
-              {/* AI Confidence Score Orbit */}
-              <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">
-                  AI Confidence Score
-                </span>
-                <div className="relative flex items-center justify-center">
-                  <svg className="w-32 h-32 transform -rotate-90">
-                    <circle className="text-[var(--warm-silver)]" cx="64" cy="64" fill="transparent" r="56" stroke="currentColor" strokeWidth="8" />
-                    <circle
-                      className="text-[var(--matcha-600)]"
-                      cx="64"
-                      cy="64"
-                      fill="transparent"
-                      r="56"
-                      stroke="currentColor"
-                      strokeDasharray="351.85"
-                      strokeDashoffset={351.85 - (351.85 * (weaknessAlign / 100))}
-                      strokeWidth="8"
-                    />
-                  </svg>
-                  <span className="absolute text-3xl font-headline font-extrabold text-[var(--clay-black)]">{Math.round(weaknessAlign)}%</span>
-                </div>
-                <p className="text-[11px] text-center text-[var(--warm-charcoal)] px-2 leading-tight">
-                  Probabilitas tinggi untuk mengatasi blindspot linguistik utama.
-                </p>
-              </div>
-
-              {/* Mode Toggle */}
-              <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 ${
-                    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" />
-                  Quick
-                </button>
-                <button
-                  onClick={() => setMode("agentic")}
-                  className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all ${
-                    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" />
-                  Agentic
-                </button>
-              </div>
-
-              {mode === "agentic" && (
-                <div className="p-3 rounded-[var(--radius-md)] bg-[var(--badge-blue-bg)] border-2 border-[var(--badge-blue-bg)] text-xs text-[var(--badge-blue-text)]">
-                  <div className="flex items-center gap-2 mb-1">
-                    <MaterialIcon name="info" className="text-sm" />
-                    <span className="font-semibold">Mode Agentic</span>
-                  </div>
-                  <p>Multi-step validation: passage → validate → questions → self-check → quality score. Lebih lambat tapi kualitas lebih terjamin.</p>
-                </div>
-              )}
-
-              {/* 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"
-                onClick={handleGenerate}
-                disabled={isGenerating || generate.isPending || selectedFormats.length === 0 || !hasKey}
-              >
-                <MaterialIcon name="auto_awesome" className="group-hover:rotate-12 transition-transform" />
-                {isGenerating
-                  ? mode === "agentic"
-                    ? `Agentic... ${jobQuery.data?.progress ?? 0}%`
-                    : `Generating... ${jobQuery.data?.progress ?? 0}%`
-                  : "Generate & Launch"}
-              </Button>
-
-              {/* Progress */}
-              {isGenerating && (
-                <div className="space-y-2">
-                  <div className="flex items-center gap-3 p-3 rounded-[var(--radius-md)] bg-[var(--matcha-300)]/20 border-2 border-[var(--matcha-300)]">
-                    <MaterialIcon name="psychology" className="text-[var(--matcha-600)] animate-pulse" />
-                    <div>
-                      <p className="text-sm font-semibold text-[var(--matcha-800)]">
-                        {jobQuery.data?.progressMessage ?? "Sedang berjalan..."}
-                      </p>
-                      <p className="text-xs text-[var(--warm-charcoal)]">
-                        {mode === "agentic"
-                          ? "Passage → Validate → Questions → Self-Check → Score"
-                          : "Quick generation mode"}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="w-full h-2 bg-[var(--oat-border)] rounded-full overflow-hidden">
-                    <div
-                      className="h-full bg-[var(--matcha-600)] transition-all duration-500"
-                      style={{ width: `${jobQuery.data?.progress ?? 5}%` }}
-                    />
-                  </div>
-                  <p className="text-xs text-[var(--warm-charcoal)] text-center">
-                    Bisa ditinggal — hasil akan muncul otomatis
-                  </p>
-                </div>
-              )}
-
-              {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>
-              )}
-            </CardContent>
-          </Card>
-        </div>
+        <TestBlueprintCard
+          examType={examType}
+          section={section}
+          selectedFormats={selectedFormats}
+          questionCount={questionCount}
+          weaknessAlign={weaknessAlign}
+          mode={mode}
+          setMode={setMode}
+          isGenerating={isGenerating}
+          generatePending={generate.isPending}
+          hasKey={hasKey}
+          jobProgress={jobQuery.data?.progress ?? 0}
+          jobProgressMessage={jobQuery.data?.progressMessage}
+          error={error}
+          onGenerate={handleGenerate}
+        />
       </div>
 
       {/* Results Section */}
       {result && (
-        <div className="mt-16 space-y-6">
-          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
-            <div>
-              <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Hasil Generate</h2>
-              <p className="text-sm text-[var(--warm-charcoal)] mt-1">
-                Paket latihan berhasil dibuat! Soal juga tersimpan di Bank Soal (privat). Jawaban & penjelasan disembunyikan agar latihan tetap fair.
-              </p>
-            </div>
-            <div className="flex gap-3">
-              {generatedPackageId && (
-                <Link to="/package/$id" params={{ id: generatedPackageId }}>
-                  <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
-                    <MaterialIcon name="play_arrow" className="mr-2" />
-                    Lihat Paket
-                  </Button>
-                </Link>
-              )}
-              <Link to="/bank">
-                <Button className="bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]">
-                  <MaterialIcon name="database" className="mr-2" />
-                  Bank Soal
-                </Button>
-              </Link>
-            </div>
-          </div>
-
-          <div className="text-sm text-[var(--warm-charcoal)] mb-4 font-mono">
-            Model: {result.meta.model} · Tokens: {result.meta.tokensUsed ?? "?"} · Waktu: {result.meta.durationMs}ms · {result.questions.length} soal
-          </div>
-
-          {result.questions.map((q, idx) => (
-            <Card key={idx} className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-              <CardHeader>
-                <div className="flex items-center gap-3">
-                  <span className="bg-[var(--matcha-600)] text-[var(--pure-white)] w-8 h-8 flex items-center justify-center rounded-[var(--radius-md)] font-bold text-sm">
-                    {idx + 1}
-                  </span>
-                  <span className="text-sm font-bold text-[var(--matcha-600)] uppercase tracking-tighter">
-                    {q.format.replace(/_/g, " ")}
-                  </span>
-                </div>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="p-5 rounded-[var(--radius-lg)] bg-[var(--oat-light)] text-[var(--clay-black)] leading-relaxed whitespace-pre-wrap text-base">
-                  {q.passageText}
-                </div>
-                <p className="font-medium text-[var(--clay-black)] text-lg">{q.questionText}</p>
-                {"options" in q && q.options && (
-                  <div className="space-y-2">
-                    {q.options.map((opt) => (
-                      <div
-                        key={opt.key}
-                        className="flex items-center p-4 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)]"
-                      >
-                        <span className="w-6 h-6 rounded-full border-2 border-[var(--oat-border)] flex items-center justify-center mr-3 text-xs font-bold text-[var(--warm-charcoal)]">
-                          {opt.key}
-                        </span>
-                        <span className="text-[var(--clay-black)]">{opt.text}</span>
-                      </div>
-                    ))}
-                  </div>
-                )}
-                <div className="flex gap-2 flex-wrap">
-                  {q.skillTags.map((tag) => (
-                    <span
-                      key={tag}
-                      className="px-3 py-1 rounded-full bg-[var(--oat-light)] text-xs font-medium text-[var(--warm-charcoal)]"
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
+        <ResultSection result={result} generatedPackageId={generatedPackageId} />
       )}
     </div>
   );

apps/web/src/routes/index.tsx

@@ -4,6 +4,7 @@ import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 export const Route = createFileRoute("/")({
   component: HomeComponent,
@@ -16,10 +17,6 @@ export const Route = createFileRoute("/")({
   },
 });
 
-function MaterialIcon({ name, className = "text-xl" }: { name: string; className?: string }) {
-  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
-}
-
 function HomeComponent() {
   const { session } = Route.useRouteContext();
   const privateData = useQuery(trpc.privateData.queryOptions());
@@ -82,13 +79,13 @@ function HomeComponent() {
       <div className="flex flex-col md:flex-row gap-4 mb-10">
         <Link to="/generate">
           <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] h-11 px-6 clay-shadow clay-hover">
-            <MaterialIcon name="auto_awesome" />
+            <MaterialIcon name="auto_awesome" className="text-xl" />
             <span className="ml-2">Generate Soal Baru</span>
           </Button>
         </Link>
         <Link to="/settings">
           <Button variant="outline" className="rounded-[var(--radius-lg)] h-11 px-6 border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] clay-hover">
-            <MaterialIcon name="key" />
+            <MaterialIcon name="key" className="text-xl" />
             <span className="ml-2">Atur API Key</span>
           </Button>
         </Link>

apps/web/src/routes/jobs.tsx

@@ -5,6 +5,7 @@ import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/card";
 import { Button } from "@labas/ui/components/button";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import type { GenerationResult } from "@labas/ai";
 
 export const Route = createFileRoute("/jobs")({
@@ -18,10 +19,6 @@ export const Route = createFileRoute("/jobs")({
   },
 });
 
-function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
-  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
-}
-
 const STATUS_COLORS: Record<string, string> = {
   pending: "bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)]",
   running: "bg-[var(--matcha-300)] text-[var(--matcha-800)]",

apps/web/src/routes/package.$id.take.tsx

@@ -1,12 +1,12 @@
-import { useState, useEffect, useCallback } from "react";
-import { useQuery, useMutation } from "@tanstack/react-query";
-import { createFileRoute, redirect, Link, useNavigate } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
+import { useTestSession } from "@/hooks/use-test-session";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
-import { Input } from "@labas/ui/components/input";
-import { Label } from "@labas/ui/components/label";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { AttemptTestView } from "@/components/test/AttemptTestView";
 
 export const Route = createFileRoute("/package/$id/take")({
   component: TakeTestComponent,
@@ -19,225 +19,27 @@ export const Route = createFileRoute("/package/$id/take")({
   },
 });
 
-function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
-  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
-}
-
-function formatTime(totalSeconds: number) {
-  const m = Math.floor(totalSeconds / 60);
-  const s = totalSeconds % 60;
-  return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
-}
-
-function QuestionInput({
-  question,
-  value,
-  onChange,
-  disabled,
-}: {
-  question: any;
-  value: string;
-  onChange: (val: string) => void;
-  disabled?: boolean;
-}) {
-  const format = question.format;
-  const options = question.options as Array<{ key: string; text: string }> | undefined;
-
-  const radioClass =
-    "flex items-center gap-3 p-3 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] cursor-pointer hover:border-[var(--matcha-400)] transition-colors";
-  const radioSelected = "border-[var(--matcha-600)] bg-[var(--matcha-100)]";
-  const radioDisabled = "opacity-60 cursor-not-allowed";
-
-  if (
-    format === "multiple_choice" ||
-    format === "synonym" ||
-    format === "grammar_in_context" ||
-    format === "sentence_completion" ||
-    format === "reference" ||
-    format === "kanji_reading" ||
-    format === "particle_choice" ||
-    format === "article_case" ||
-    format === "matching_headings" ||
-    format === "matching_information" ||
-    format === "summary_completion" ||
-    format === "cloze"
-  ) {
-    if (!options || options.length === 0) {
-      return (
-        <div className="text-sm text-[var(--warm-silver)] italic">
-          Tidak ada opsi tersedia untuk soal ini.
-        </div>
-      );
-    }
-    return (
-      <div className="space-y-2">
-        {options.map((opt) => (
-          <label
-            key={opt.key}
-            className={`${radioClass} ${value === opt.key ? radioSelected : ""} ${disabled ? radioDisabled : ""}`}
-          >
-            <input
-              type="radio"
-              name={question.id}
-              value={opt.key}
-              checked={value === opt.key}
-              onChange={() => onChange(opt.key)}
-              disabled={disabled}
-              className="hidden"
-            />
-            <span className="w-8 h-8 rounded-full bg-[var(--oat-light)] text-[var(--clay-black)] text-sm font-bold flex items-center justify-center shrink-0">
-              {opt.key}
-            </span>
-            <span className="text-sm text-[var(--clay-black)]">{opt.text}</span>
-          </label>
-        ))}
-      </div>
-    );
-  }
-
-  if (format === "true_false_not_given") {
-    const choices = [
-      { key: "TRUE", label: "True" },
-      { key: "FALSE", label: "False" },
-      { key: "NOT_GIVEN", label: "Not Given" },
-    ];
-    return (
-      <div className="space-y-2">
-        {choices.map((c) => (
-          <label
-            key={c.key}
-            className={`${radioClass} ${value === c.key ? radioSelected : ""} ${disabled ? radioDisabled : ""}`}
-          >
-            <input
-              type="radio"
-              name={question.id}
-              value={c.key}
-              checked={value === c.key}
-              onChange={() => onChange(c.key)}
-              disabled={disabled}
-              className="hidden"
-            />
-            <span className="text-sm font-semibold text-[var(--clay-black)]">{c.label}</span>
-          </label>
-        ))}
-      </div>
-    );
-  }
-
-  if (format === "author_view") {
-    const choices = [
-      { key: "YES", label: "Yes" },
-      { key: "NO", label: "No" },
-      { key: "NOT_GIVEN", label: "Not Given" },
-    ];
-    return (
-      <div className="space-y-2">
-        {choices.map((c) => (
-          <label
-            key={c.key}
-            className={`${radioClass} ${value === c.key ? radioSelected : ""} ${disabled ? radioDisabled : ""}`}
-          >
-            <input
-              type="radio"
-              name={question.id}
-              value={c.key}
-              checked={value === c.key}
-              onChange={() => onChange(c.key)}
-              disabled={disabled}
-              className="hidden"
-            />
-            <span className="text-sm font-semibold text-[var(--clay-black)]">{c.label}</span>
-          </label>
-        ))}
-      </div>
-    );
-  }
-
-  if (format === "fill_blank") {
-    return (
-      <Input
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        disabled={disabled}
-        placeholder="Ketik jawaban Anda..."
-        className="bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-lg)]"
-      />
-    );
-  }
-
-  // Fallback for any unrecognized format
-  return (
-    <Input
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      disabled={disabled}
-      placeholder="Ketik jawaban Anda..."
-      className="bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-lg)]"
-    />
-  );
-}
-
 function TakeTestComponent() {
   const { id: packageId } = Route.useParams();
-  const navigate = useNavigate();
   const { data: session } = authClient.useSession();
 
   const packageQuery = useQuery(trpc.package.getById.queryOptions({ id: packageId }));
   const pkg = packageQuery.data;
 
-  const [attemptId, setAttemptId] = useState<string | null>(null);
-  const [currentSectionIdx, setCurrentSectionIdx] = useState(0);
-  const [answers, setAnswers] = useState<Record<string, string>>({});
-  const [timeElapsed, setTimeElapsed] = useState(0);
-  const [isStarted, setIsStarted] = useState(false);
-  const [isFinished, setIsFinished] = useState(false);
-  const [submittingQId, setSubmittingQId] = useState<string | null>(null);
-
-  const startMutation = useMutation(trpc.attempt.start.mutationOptions());
-  const submitMutation = useMutation(trpc.attempt.submitAnswer.mutationOptions());
-  const finishMutation = useMutation(trpc.attempt.finish.mutationOptions());
-
-  // Timer
-  useEffect(() => {
-    if (!isStarted || isFinished) return;
-    const interval = setInterval(() => {
-      setTimeElapsed((t) => t + 1);
-    }, 1000);
-    return () => clearInterval(interval);
-  }, [isStarted, isFinished]);
-
-  const handleStart = useCallback(async () => {
-    if (!pkg) return;
-    const res = await startMutation.mutateAsync({ packageId });
-    setAttemptId(res.attemptId);
-    setIsStarted(true);
-  }, [pkg, packageId, startMutation]);
-
-  const handleAnswerChange = useCallback(
-    async (questionId: string, sectionResultId: string, value: string) => {
-      if (!attemptId || isFinished) return;
-      setAnswers((prev) => ({ ...prev, [questionId]: value }));
-      setSubmittingQId(questionId);
-      try {
-        await submitMutation.mutateAsync({
-          attemptId,
-          sectionResultId,
-          questionId,
-          userAnswer: value,
-        });
-      } finally {
-        setSubmittingQId(null);
-      }
-    },
-    [attemptId, isFinished, submitMutation],
-  );
-
-  const handleFinish = useCallback(async () => {
-    if (!attemptId) return;
-    setIsFinished(true);
-    const res = await finishMutation.mutateAsync({ attemptId });
-    navigate({ to: "/attempt/$id", params: { id: attemptId } });
-  }, [attemptId, finishMutation, navigate]);
+  const {
+    attemptId,
+    currentSectionIdx,
+    setCurrentSectionIdx,
+    answers,
+    timeElapsed,
+    isStarted,
+    isFinished,
+    submittingQId,
+    startPending,
+    handleStart,
+    handleAnswerChange,
+    handleFinish,
+  } = useTestSession(packageId);
 
   if (packageQuery.isLoading) {
     return (
@@ -262,7 +64,7 @@ function TakeTestComponent() {
     );
   }
 
-  const totalQuestions = pkg.sections.reduce((sum, sec) => sum + sec.questions.length, 0);
+  const totalQuestions = pkg.sections.reduce((sum: number, sec: any) => sum + sec.questions.length, 0);
   const answeredCount = Object.keys(answers).length;
 
   // Start screen
@@ -312,11 +114,11 @@ function TakeTestComponent() {
 
           <Button
             onClick={handleStart}
-            disabled={startMutation.isPending}
+            disabled={startPending}
             className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)] px-8 py-6 text-lg"
           >
             <MaterialIcon name="play_arrow" />
-            <span className="ml-2">{startMutation.isPending ? "Memulai..." : "Mulai Latihan"}</span>
+            <span className="ml-2">{startPending ? "Memulai..." : "Mulai Latihan"}</span>
           </Button>
         </div>
       </div>
@@ -338,12 +140,6 @@ function TakeTestComponent() {
     );
   }
 
-  // Find the sectionResultId for this section
-  // We don't have it directly here since we didn't fetch attempt data.
-  // We need to fetch attempt data after starting.
-  // Actually, for the MVP, we can just use a placeholder or fetch attempt data.
-  // Let me add an attempt query.
-
   return (
     <AttemptTestView
       attemptId={attemptId!}
@@ -361,199 +157,3 @@ function TakeTestComponent() {
     />
   );
 }
-
-function AttemptTestView({
-  attemptId,
-  pkg,
-  currentSectionIdx,
-  setCurrentSectionIdx,
-  answers,
-  onAnswerChange,
-  timeElapsed,
-  answeredCount,
-  totalQuestions,
-  onFinish,
-  isFinished,
-  submittingQId,
-}: {
-  attemptId: string;
-  pkg: any;
-  currentSectionIdx: number;
-  setCurrentSectionIdx: (idx: number) => void;
-  answers: Record<string, string>;
-  onAnswerChange: (questionId: string, sectionResultId: string, value: string) => void;
-  timeElapsed: number;
-  answeredCount: number;
-  totalQuestions: number;
-  onFinish: () => void;
-  isFinished: boolean;
-  submittingQId: string | null;
-}) {
-  const attemptQuery = useQuery(trpc.attempt.getById.queryOptions({ id: attemptId }));
-
-  const attempt = attemptQuery.data;
-  const currentSection = pkg.sections[currentSectionIdx];
-  const sectionData = attempt?.sections?.[currentSectionIdx];
-  const sectionResultId = sectionData?.sectionResultId;
-
-  return (
-    <div className="min-h-screen bg-[var(--warm-cream)]">
-      {/* Top Bar */}
-      <div className="sticky top-0 z-50 bg-[var(--pure-white)] border-b-2 border-[var(--oat-border)] px-4 md:px-8 py-3">
-        <div className="max-w-5xl mx-auto flex items-center justify-between gap-4">
-          <div className="flex items-center gap-3">
-            <Link to="/package/$id" params={{ id: pkg.id }} className="text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]">
-              <MaterialIcon name="close" />
-            </Link>
-            <h1 className="font-headline font-bold text-[var(--clay-black)] text-sm md:text-base truncate max-w-[200px] md:max-w-sm">
-              {pkg.title}
-            </h1>
-          </div>
-
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-1.5 bg-[var(--oat-light)] px-3 py-1.5 rounded-full text-sm font-mono text-[var(--clay-black)]">
-              <MaterialIcon name="timer" className="text-sm" />
-              {formatTime(timeElapsed)}
-            </div>
-            <div className="hidden md:flex items-center gap-1.5 text-sm text-[var(--warm-charcoal)]">
-              <MaterialIcon name="check_circle" className="text-sm text-[var(--matcha-600)]" />
-              {answeredCount}/{totalQuestions}
-            </div>
-            <Button
-              onClick={onFinish}
-              disabled={isFinished}
-              className="bg-[var(--pomegranate-500)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-700)] clay-hover rounded-[var(--radius-lg)] text-sm px-4 py-2"
-            >
-              Selesai
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {/* Section Tabs */}
-      <div className="max-w-5xl mx-auto px-4 md:px-8 py-4">
-        <div className="flex gap-2 overflow-x-auto pb-2">
-          {pkg.sections.map((sec: any, idx: number) => (
-            <button
-              key={sec.id}
-              onClick={() => setCurrentSectionIdx(idx)}
-              className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold whitespace-nowrap border-2 transition-colors ${
-                idx === currentSectionIdx
-                  ? "bg-[var(--clay-black)] text-[var(--pure-white)] border-[var(--clay-black)]"
-                  : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-[var(--oat-border)] hover:border-[var(--matcha-400)]"
-              }`}
-            >
-              {sec.title}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="max-w-5xl mx-auto px-4 md:px-8 pb-32">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Left: Passage */}
-          <div className="lg:col-span-1">
-            <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] sticky top-24">
-              <CardContent className="p-5">
-                <h2 className="font-headline font-bold text-[var(--clay-black)] mb-3 flex items-center gap-2">
-                  <MaterialIcon name="menu_book" className="text-[var(--matcha-600)]" />
-                  Bacaan
-                </h2>
-                <div className="prose prose-sm max-w-none text-[var(--clay-black)] whitespace-pre-wrap text-sm leading-relaxed max-h-[60vh] overflow-y-auto pr-2">
-                  {currentSection.questions[0]?.passageText ?? "Tidak ada bacaan untuk section ini."}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* Right: Questions */}
-          <div className="lg:col-span-2 space-y-4">
-            {currentSection.questions.map((q: any, idx: number) => {
-              const answerValue = answers[q.id] ?? "";
-              return (
-                <Card
-                  key={q.id}
-                  className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]"
-                >
-                  <CardContent className="p-5">
-                    <div className="flex items-start gap-3 mb-4">
-                      <span className="w-8 h-8 rounded-full bg-[var(--clay-black)] text-[var(--pure-white)] text-xs flex items-center justify-center font-bold shrink-0">
-                        {idx + 1}
-                      </span>
-                      <div>
-                        <p className="text-[var(--clay-black)] font-medium leading-relaxed">
-                          {q.questionText}
-                        </p>
-                        <div className="flex gap-2 mt-1">
-                          <span className="text-xs px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
-                            {q.format.replace(/_/g, " ")}
-                          </span>
-                          {q.difficulty && (
-                            <span className="text-xs px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
-                              Lv.{q.difficulty}
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="pl-11">
-                      {submittingQId === q.id && (
-                        <div className="text-xs text-[var(--matcha-600)] mb-2 flex items-center gap-1">
-                          <MaterialIcon name="sync" className="text-xs animate-spin" />
-                          Menyimpan...
-                        </div>
-                      )}
-                      <QuestionInput
-                        question={q}
-                        value={answerValue}
-                        onChange={(val) => {
-                          if (sectionResultId) {
-                            onAnswerChange(q.id, sectionResultId, val);
-                          }
-                        }}
-                        disabled={isFinished || !sectionResultId}
-                      />
-                    </div>
-                  </CardContent>
-                </Card>
-              );
-            })}
-
-            {/* Section Navigation */}
-            <div className="flex justify-between pt-4">
-              <Button
-                variant="outline"
-                onClick={() => setCurrentSectionIdx(Math.max(0, currentSectionIdx - 1))}
-                disabled={currentSectionIdx === 0}
-                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
-              >
-                <MaterialIcon name="arrow_back" />
-                <span className="ml-2">Sebelumnya</span>
-              </Button>
-              {currentSectionIdx < pkg.sections.length - 1 ? (
-                <Button
-                  onClick={() => setCurrentSectionIdx(currentSectionIdx + 1)}
-                  className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
-                >
-                  <span className="mr-2">Selanjutnya</span>
-                  <MaterialIcon name="arrow_forward" />
-                </Button>
-              ) : (
-                <Button
-                  onClick={onFinish}
-                  disabled={isFinished}
-                  className="bg-[var(--pomegranate-500)] text-[var(--pure-white)] hover:bg-[var(--pomegranate-700)] clay-hover rounded-[var(--radius-lg)]"
-                >
-                  <MaterialIcon name="check_circle" />
-                  <span className="ml-2">Selesaikan</span>
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/web/src/routes/package.$id.tsx

@@ -4,6 +4,8 @@ import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { formatLabel } from "@/lib/format";
 
 export const Route = createFileRoute("/package/$id")({
   component: PackageDetailComponent,
@@ -16,14 +18,6 @@ export const Route = createFileRoute("/package/$id")({
   },
 });
 
-function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
-  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
-}
-
-function formatLabel(fmt: string) {
-  return fmt.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
-}
-
 function PackageDetailComponent() {
   const { id } = Route.useParams();
   const { data: session } = authClient.useSession();

apps/web/src/routes/packages.tsx

@@ -14,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@labas/ui/components/select";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 export const Route = createFileRoute("/packages")({
   component: PackagesComponent,
@@ -34,10 +35,6 @@ const EXAM_TYPES = [
   { id: "GOETHE", name: "German" },
 ];
 
-function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
-  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
-}
-
 function PackagesComponent() {
   const [search, setSearch] = useState("");
   const [examType, setExamType] = useState<string>("");

apps/web/src/routes/settings.tsx

@@ -14,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@labas/ui/components/select";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 export const Route = createFileRoute("/settings")({
   component: RouteComponent,
@@ -26,10 +27,6 @@ export const Route = createFileRoute("/settings")({
   },
 });
 
-function MaterialIcon({ name }: { name: string }) {
-  return <span className="material-symbols-outlined text-xl">{name}</span>;
-}
-
 function RouteComponent() {
   const { storedKey, isLoading, saveKey, removeKey, hasKey } = useApiKey();
 
@@ -63,7 +60,7 @@ function RouteComponent() {
           <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
             <CardHeader>
               <div className="flex items-center gap-3">
-                <MaterialIcon name="key" />
+                <MaterialIcon name="key" className="text-xl" />
                 <CardTitle className="font-headline text-[var(--clay-black)]">
                   {hasKey ? "Update API Key" : "Tambah API Key"}
                 </CardTitle>
@@ -189,7 +186,7 @@ function RouteComponent() {
               ) : hasKey ? (
                 <div className="space-y-4">
                   <div className="flex items-center gap-3 p-4 bg-[var(--matcha-300)] rounded-[var(--radius-lg)]">
-                    <MaterialIcon name="check_circle" />
+                    <MaterialIcon name="check_circle" className="text-xl" />
                     <div>
                       <p className="font-medium text-[var(--matcha-800)]">Key Tersimpan</p>
                       <p className="text-sm text-[var(--matcha-800)]/70">
@@ -205,7 +202,7 @@ function RouteComponent() {
                 </div>
               ) : (
                 <div className="text-center py-8">
-                  <MaterialIcon name="key_off" />
+                  <MaterialIcon name="key_off" className="text-xl" />
                   <p className="text-[var(--warm-charcoal)] mt-2">Belum ada API key.</p>
                   <p className="text-xs text-[var(--warm-charcoal)] mt-1">
                     Tambahkan key untuk mulai generate soal.

skills-lock.json

@@ -16,6 +16,11 @@
       "sourceType": "github",
       "computedHash": "220e5e1b12bbaeec49ec362b6e2262d77632d0536e9758bba9acbbc323fef990"
     },
+    "react-best-practices": {
+      "source": "mastra-ai/mastra",
+      "sourceType": "github",
+      "computedHash": "78115cffdf4f10d6984325376bd1ba3be93313370bf7ebe0c334b43f1f07e599"
+    },
     "shadcn": {
       "source": "shadcn/ui",
       "sourceType": "github",