feat: integrate react-joyride for guided tours and add GettingStartedCard and PageGuide components for user onboarding. Enhance sidebar with a help tour button and update bank components to support new features. Implement bulk selection in SoalBrowser and improve question management with additional props for locking and selection states.

apps/web/package.json

@@ -33,6 +33,7 @@
     "next-themes": "catalog:",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
+    "react-joyride": "^3.1.0",
     "recharts": "^3.8.1",
     "sonner": "^2.0.7",
     "vite-plugin-pwa": "^1.2.0",

apps/web/src/components/GettingStartedCard.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+const LS_KEY = "labas-getting-started-dismissed";
+
+const steps = [
+  {
+    num: 1,
+    title: "Generate Soal",
+    desc: "Buat soal latihan AI sesuai exam yang kamu pilih. Pilih jenis ujian, section, format, dan topik.",
+    link: "/generate",
+    icon: "auto_awesome" as const,
+    color: "matcha",
+  },
+  {
+    num: 2,
+    title: "Buat Paket",
+    desc: "Kumpulkan soal dari Bank Soal jadi paket latihan. Bisa manual atau pakai Auto Bundle.",
+    link: "/bank",
+    icon: "folder" as const,
+    color: "slushie",
+  },
+  {
+    num: 3,
+    title: "Mulai Latihan",
+    desc: "Kerjakan paket soal, lihat skor, dan pantau perkembangan belajarmu.",
+    link: "/packages",
+    icon: "play_arrow" as const,
+    color: "lemon",
+  },
+];
+
+const colorMap: Record<string, { bg: string; text: string; badge: string }> = {
+  matcha: { bg: "bg-[var(--matcha-300)]", text: "text-[var(--matcha-800)]", badge: "bg-[var(--matcha-300)]/30" },
+  slushie: { bg: "bg-[var(--slushie-500)]", text: "text-[var(--slushie-800)]", badge: "bg-[var(--slushie-500)]/20" },
+  lemon: { bg: "bg-[var(--lemon-400)]", text: "text-[var(--lemon-800)]", badge: "bg-[var(--lemon-400)]/30" },
+};
+
+export function GettingStartedCard() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const dismissed = localStorage.getItem(LS_KEY) === "true";
+    if (!dismissed) setVisible(true);
+  }, []);
+
+  const dismiss = () => {
+    localStorage.setItem(LS_KEY, "true");
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <Card className="mb-8 bg-gradient-to-br from-[var(--matcha-300)]/20 to-[var(--slushie-500)]/20 border-2 border-[var(--matcha-400)] rounded-[var(--radius-xl)] relative overflow-hidden">
+      <div className="absolute -right-12 -top-12 w-48 h-48 ai-glow pointer-events-none opacity-20" />
+      <CardContent className="p-6 md:p-8">
+        <div className="flex items-start justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="h-12 w-12 bg-[var(--clay-black)] rounded-[var(--radius-xl)] flex items-center justify-center">
+              <MaterialIcon name="school" className="text-2xl text-[var(--pure-white)]" />
+            </div>
+            <div>
+              <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
+                Mulai Belajar
+              </h2>
+              <p className="text-sm text-[var(--warm-charcoal)]">
+                Ikuti 3 langkah mudah untuk memulai latihan.
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={dismiss}
+            className="text-[var(--warm-silver)] hover:text-[var(--clay-black)] transition-colors cursor-pointer"
+          >
+            <MaterialIcon name="close" className="text-xl" />
+          </button>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {steps.map((step) => {
+            const c = colorMap[step.color];
+            return (
+              <Link
+                key={step.num}
+                to={step.link}
+                className="flex items-start gap-4 p-4 rounded-[var(--radius-xl)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)] hover:border-[var(--matcha-400)] transition-all group clay-hover"
+              >
+                <div className={`h-10 w-10 ${c.bg} rounded-[var(--radius-lg)] flex items-center justify-center shrink-0`}>
+                  <span className="text-sm font-black text-[var(--matcha-800)]">{step.num}</span>
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <MaterialIcon name={step.icon} className={`text-sm ${c.text}`} />
+                    <h3 className="font-headline font-bold text-[var(--clay-black)] group-hover:text-[var(--matcha-800)] transition-colors">
+                      {step.title}
+                    </h3>
+                  </div>
+                  <p className="text-xs text-[var(--warm-charcoal)] leading-relaxed">
+                    {step.desc}
+                  </p>
+                </div>
+                <MaterialIcon name="chevron_right" className="text-lg text-[var(--warm-silver)] group-hover:text-[var(--matcha-800)] shrink-0 self-center transition-colors" />
+              </Link>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/PageGuide.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+interface GuideItem {
+  icon: string;
+  title: string;
+  desc: string;
+}
+
+interface PageGuideProps {
+  items: GuideItem[];
+  title?: string;
+}
+
+export function PageGuide({ items, title = "Petunjuk" }: PageGuideProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Card className="mb-8 bg-[var(--pure-white)] border-2 border-[var(--slushie-500)]/30 rounded-[var(--radius-xl)] overflow-hidden">
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between p-4 md:p-5 cursor-pointer hover:bg-[var(--oat-light)] transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          <div className="h-9 w-9 bg-[var(--slushie-500)]/20 rounded-[var(--radius-lg)] flex items-center justify-center shrink-0">
+            <MaterialIcon name="help" className="text-lg text-[var(--slushie-800)]" />
+          </div>
+          <div className="text-left">
+            <h3 className="font-headline font-bold text-[var(--clay-black)]">{title}</h3>
+            <p className="text-xs text-[var(--warm-charcoal)]">
+              {open ? "Tutup petunjuk" : `Klik untuk lihat ${items.length} panduan`}
+            </p>
+          </div>
+        </div>
+        <MaterialIcon
+          name={open ? "expand_less" : "expand_more"}
+          className="text-xl text-[var(--warm-charcoal)]"
+        />
+      </button>
+
+      {open && (
+        <div className="px-4 md:px-5 pb-5 space-y-3 border-t border-[var(--oat-border)] pt-4">
+          {items.map((item, i) => (
+            <div key={i} className="flex items-start gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--oat-light)]">
+              <div className="h-8 w-8 bg-[var(--pure-white)] rounded-[var(--radius-md)] flex items-center justify-center shrink-0 shadow-sm">
+                <MaterialIcon name={item.icon} className="text-sm text-[var(--matcha-600)]" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-bold text-[var(--clay-black)]">{item.title}</p>
+                <p className="text-xs text-[var(--warm-charcoal)] mt-0.5 leading-relaxed">{item.desc}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+}

apps/web/src/components/TourGuide.tsx

@@ -0,0 +1,131 @@
+import { useState, useEffect } from "react";
+import { Joyride, type Step, type EventData } from "react-joyride";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+const joyrideOptions = {
+  primaryColor: "var(--matcha-600)",
+  textColor: "var(--clay-black)",
+  backgroundColor: "var(--pure-white)",
+  arrowColor: "var(--pure-white)",
+  overlayColor: "rgba(0,0,0,0.4)",
+};
+
+const joyrideStyles = {
+  buttonBack: { color: "var(--warm-charcoal)", fontSize: "14px", fontWeight: 500 } as any,
+  buttonSkip: { color: "var(--warm-charcoal)", fontSize: "14px", fontWeight: 500 } as any,
+  tooltipContainer: { textAlign: "left" } as any,
+  tooltipContent: { fontSize: "14px", lineHeight: "1.6", padding: "8px 0" } as any,
+  tooltipTitle: { fontSize: "18px", fontWeight: 700, fontFamily: "Manrope, sans-serif" } as any,
+};
+
+const joyrideLocale = { back: "Kembali", close: "Tutup", last: "Selesai", next: "Lanjut", skip: "Lewati" };
+
+// ── Global site tour ──
+
+const LS_GLOBAL = "labas-tour-completed";
+const TRIGGER_GLOBAL = "labas-tour-trigger";
+
+const globalSteps: Step[] = [
+  { target: "body" as any, placement: "center", title: "Selamat Datang di Labas!", content: "Platform latihan ujian bahasa berbasis AI. Yuk, kita lihat fitur-fitur utamanya!", hideOverlay: true },
+  { target: "[data-tour='dashboard-stats']", title: "Ringkasan Aktivitas", content: "Pantau jumlah latihan, waktu belajar, soal terjawab, dan akurasi kamu di sini.", spotlightPadding: 8 },
+  { target: "[data-tour='nav-generate']", title: "AI Lab — Generate Soal", content: "Buat soal latihan sendiri pakai AI. Pilih jenis ujian, section, format, dan topik.", spotlightPadding: 4 },
+  { target: "[data-tour='nav-bank']", title: "Bank Soal — Buat Paket", content: "Atur soal-soal kamu jadi paket latihan dari bank soal.", spotlightPadding: 4 },
+  { target: "[data-tour='nav-packages']", title: "Paket Soal — Mulai Latihan", content: "Temukan paket soal dari komunitas atau buatan sendiri.", spotlightPadding: 4 },
+  { target: "[data-tour='nav-analytics']", title: "Analytics — Evaluasi", content: "Lihat analitik mendalam: skor, tren, dan rekomendasi belajar.", spotlightPadding: 4 },
+  { target: "body" as any, placement: "center", title: "Siap Belajar?", content: "Setiap halaman punya panduan sendiri. Cari tombol <strong>?</strong> di pojok kanan bawah halaman!", hideOverlay: true },
+];
+
+export function TourGuide() {
+  const [run, setRun] = useState(false);
+
+  useEffect(() => {
+    const onTrigger = () => { localStorage.removeItem(LS_GLOBAL); setRun(true); };
+    window.addEventListener(TRIGGER_GLOBAL, onTrigger);
+
+    const completed = localStorage.getItem(LS_GLOBAL);
+    if (!completed) {
+      const timer = setTimeout(() => setRun(true), 800);
+      return () => { clearTimeout(timer); window.removeEventListener(TRIGGER_GLOBAL, onTrigger); };
+    }
+
+    return () => window.removeEventListener(TRIGGER_GLOBAL, onTrigger);
+  }, []);
+
+  const handleEvent = (data: EventData) => {
+    const { action, status } = data;
+    if (status === "finished" || status === "skipped") { localStorage.setItem(LS_GLOBAL, "true"); setRun(false); }
+    if (action === "close" || action === "skip") setRun(false);
+  };
+
+  return (
+    <Joyride steps={globalSteps} run={run} continuous
+      options={{ ...joyrideOptions, showProgress: true, buttons: ["back", "primary", "skip"] }}
+      locale={joyrideLocale} styles={joyrideStyles} onEvent={handleEvent}
+    />
+  );
+}
+
+export function triggerGlobalTour() {
+  window.dispatchEvent(new CustomEvent(TRIGGER_GLOBAL));
+}
+
+// ── Page-specific tour ──
+
+interface PageTourProps {
+  storageKey: string;
+  steps: Step[];
+  autoDelay?: number;
+}
+
+export function PageTour({ storageKey, steps, autoDelay }: PageTourProps) {
+  const [run, setRun] = useState(false);
+
+  useEffect(() => {
+    const onTrigger = () => { localStorage.removeItem(storageKey); setRun(true); };
+    window.addEventListener(storageKey, onTrigger);
+
+    const completed = localStorage.getItem(storageKey);
+    if (!completed && autoDelay !== undefined) {
+      const timer = setTimeout(() => setRun(true), autoDelay);
+      return () => { clearTimeout(timer); window.removeEventListener(storageKey, onTrigger); };
+    }
+
+    return () => window.removeEventListener(storageKey, onTrigger);
+  }, []);
+
+  const handleEvent = (data: EventData) => {
+    const { action, status } = data;
+    if (status === "finished" || status === "skipped") { localStorage.setItem(storageKey, "true"); setRun(false); }
+    if (action === "close" || action === "skip") setRun(false);
+  };
+
+  return (
+    <Joyride steps={steps} run={run} continuous
+      options={{ ...joyrideOptions, showProgress: true, buttons: ["back", "primary", "skip"] }}
+      locale={joyrideLocale} styles={joyrideStyles} onEvent={handleEvent}
+    />
+  );
+}
+
+export function triggerPageTour(storageKey: string) {
+  window.dispatchEvent(new CustomEvent(storageKey));
+}
+
+// ── Floating help button ──
+
+interface TourHelpButtonProps {
+  storageKey: string;
+  label?: string;
+}
+
+export function TourHelpButton({ storageKey, label = "Panduan Halaman" }: TourHelpButtonProps) {
+  return (
+    <button
+      onClick={() => triggerPageTour(storageKey)}
+      title={label}
+      className="fixed top-4 right-4 z-40 w-10 h-10 flex items-center justify-center bg-[var(--clay-black)] text-[var(--pure-white)] shadow-lg hover:bg-[var(--warm-charcoal)] transition-all clay-hover cursor-pointer hover:scale-105 active:scale-95 rounded-full"
+    >
+      <MaterialIcon name="help" className="text-lg" />
+    </button>
+  );
+}

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

@@ -21,6 +21,7 @@ interface BundleSidebarProps {
   bundleIsPublic: boolean;
   isCreating: boolean;
   autoBundleExamType: string | null;
+  lockedExamType?: string | null;
   onSetTitle: (v: string) => void;
   onSetDescription: (v: string) => void;
   onSetIsPublic: (v: boolean) => void;
@@ -39,6 +40,7 @@ export function BundleSidebar({
   bundleIsPublic,
   isCreating,
   autoBundleExamType,
+  lockedExamType,
   onSetTitle,
   onSetDescription,
   onSetIsPublic,
@@ -51,17 +53,25 @@ export function BundleSidebar({
   const bundleCount = activeBundle.length;
 
   return (
-    <div className="lg:col-span-4">
-      <div className="sticky top-46 bg-[var(--pure-white)] rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow overflow-hidden flex flex-col max-h-[calc(100vh-6rem)]">
+    <div data-tour="bank-sidebar" className="lg:col-span-4">
+      <div className="sticky top-32 bg-[var(--pure-white)] rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow overflow-hidden flex flex-col max-h-[calc(100vh-8rem)]">
         {/* Header */}
         <div className="p-5 bg-[var(--clay-black)] text-[var(--pure-white)]">
           <div className="flex justify-between items-center mb-2">
             <h3 className="text-lg font-bold font-headline">Paket Saat Ini</h3>
             <span className="text-xs font-medium bg-[var(--matcha-600)]/30 px-2 py-1 rounded">DRAFT</span>
           </div>
-          <p className="text-sm text-[var(--warm-silver)]">
-            {bundleCount} {mode === "soal" ? "soal" : "section"} dipilih
-          </p>
+          <div className="flex items-center gap-2">
+            <p className="text-sm text-[var(--warm-silver)]">
+              {bundleCount} {mode === "soal" ? "soal" : "section"} dipilih
+            </p>
+            {lockedExamType && (
+              <span className="text-[10px] font-medium bg-[var(--matcha-600)]/40 text-[var(--matcha-300)] px-2 py-0.5 rounded-full flex items-center gap-1">
+                <MaterialIcon name="lock" className="text-[10px]" />
+                {lockedExamType}
+              </span>
+            )}
+          </div>
         </div>
 
         {/* Items List */}

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

@@ -19,6 +19,8 @@ interface FilterBarProps {
   activeChips: FilterChip[];
   hasFilters: boolean;
   isAdvancedOpen: boolean;
+  lockedExamType?: string | null;
+  dataTour?: string;
   onToggleAdvanced: () => void;
   onSetMode: (mode: "soal" | "section") => void;
   onSetTab: (tab: "mine" | "public") => void;
@@ -37,6 +39,8 @@ export function FilterBar({
   activeChips,
   hasFilters,
   isAdvancedOpen,
+  lockedExamType,
+  dataTour,
   onToggleAdvanced,
   onSetMode,
   onSetTab,
@@ -47,7 +51,7 @@ export function FilterBar({
   advancedFilters,
 }: FilterBarProps) {
   return (
-    <div className="sticky top-0 z-30 bg-[var(--warm-cream)]/90 backdrop-blur-md border-b border-[var(--oat-border)] transition-all duration-200">
+    <div data-tour={dataTour} className="sticky top-0 z-30 bg-[var(--warm-cream)]/90 backdrop-blur-md border-b border-[var(--oat-border)] transition-all duration-200">
       <div className="px-6 md:px-12 lg:px-16 max-w-7xl mx-auto pt-4 pb-3 space-y-3">
         {/* ── Tier 1: Mode tabs ── */}
         <div className="flex items-center justify-between gap-3">
@@ -73,14 +77,31 @@ export function FilterBar({
 
         {/* ── Tier 2: Exam type chips ── */}
         <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
-          <ChipButton active={examType === ""} onClick={() => onSetExamType("")}>
+          <ChipButton
+            active={examType === ""}
+            onClick={() => onSetExamType("")}
+            disabled={!!lockedExamType}
+          >
             Semua
           </ChipButton>
-          {EXAM_TYPES.map((t) => (
-            <ChipButton key={t.id} active={examType === t.id} onClick={() => onSetExamType(t.id)}>
-              {t.name}
-            </ChipButton>
-          ))}
+          {EXAM_TYPES.map((t) => {
+            const isLocked = !!lockedExamType && lockedExamType !== t.id;
+            return (
+              <ChipButton
+                key={t.id}
+                active={examType === t.id}
+                onClick={() => {
+                  if (!isLocked) onSetExamType(t.id);
+                }}
+                disabled={isLocked}
+              >
+                <span className="flex items-center gap-1.5">
+                  {t.name}
+                  {isLocked && <MaterialIcon name="lock" className="text-[10px]" />}
+                </span>
+              </ChipButton>
+            );
+          })}
         </div>
 
         {/* ── Tier 3: Search + Advanced filter toggle ── */}
@@ -220,14 +241,17 @@ function TabButton({ active, onClick, children }: { active: boolean; onClick: ()
   );
 }
 
-function ChipButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
+function ChipButton({ active, onClick, children, disabled }: { active: boolean; onClick: () => void; children: React.ReactNode; disabled?: boolean }) {
   return (
     <button
       onClick={onClick}
-      className={`px-4 py-2 rounded-full text-sm font-semibold whitespace-nowrap transition-all cursor-pointer ${
-        active
-          ? "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)]"
+      disabled={disabled}
+      className={`px-4 py-2 rounded-full text-sm font-semibold whitespace-nowrap transition-all ${
+        disabled
+          ? "bg-[var(--oat-light)] text-[var(--warm-silver)] border-2 border-[var(--oat-border)] cursor-not-allowed opacity-50"
+          : active
+            ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow cursor-pointer"
+            : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)] cursor-pointer"
       }`}
     >
       {children}

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

@@ -6,6 +6,9 @@ interface QuestionCardProps {
   q: any;
   isFeatured?: boolean;
   isInBundle: boolean;
+  disabled?: boolean;
+  selected?: boolean;
+  bulkSelect?: boolean;
   onToggle: () => void;
   onOpenDetail: () => void;
   isOwner: boolean;
@@ -17,6 +20,9 @@ export function QuestionCard({
   q,
   isFeatured = false,
   isInBundle,
+  disabled = false,
+  selected = false,
+  bulkSelect = false,
   onToggle,
   onOpenDetail,
   isOwner,
@@ -25,22 +31,42 @@ export function QuestionCard({
 }: QuestionCardProps) {
   return (
     <div
-      onClick={onOpenDetail}
-      className={`clay-shadow clay-hover bg-[var(--pure-white)] border-2 rounded-[var(--radius-xl)] h-full flex flex-col cursor-pointer transition-all ${
-        isInBundle
-          ? "border-[var(--clay-black)] bg-[var(--matcha-100)]"
-          : "border-[var(--oat-border)]"
+      onClick={() => { if (!disabled) onOpenDetail(); }}
+      className={`border-2 rounded-[var(--radius-xl)] h-full flex flex-col transition-all ${
+        disabled
+          ? "bg-[var(--oat-light)] border-[var(--oat-border)] opacity-40 cursor-not-allowed"
+          : selected
+            ? "bg-[var(--matcha-100)] border-[var(--matcha-600)] clay-hover cursor-pointer ring-2 ring-[var(--matcha-400)]"
+            : isInBundle
+              ? "bg-[var(--matcha-100)] border-[var(--clay-black)] clay-shadow clay-hover cursor-pointer"
+              : "bg-[var(--pure-white)] border-[var(--oat-border)] clay-shadow clay-hover cursor-pointer"
       }`}
     >
       <div className="p-5 flex flex-col h-full">
         <div className="flex items-start justify-between mb-3">
           <div className="flex gap-2 flex-wrap">
+            {bulkSelect && (
+              <span className={`px-2 py-1 rounded-full text-[10px] font-semibold flex items-center gap-1 ${
+                selected
+                  ? "bg-[var(--matcha-600)] text-[var(--pure-white)]"
+                  : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
+              }`}>
+                <MaterialIcon name={selected ? "check_circle" : "radio_button_unchecked"} className="text-xs" />
+                {selected ? "Terpilih" : "Pilih"}
+              </span>
+            )}
             <span className="px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
               {q.examTypeName}
             </span>
             <span className="px-2.5 py-1 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-xs font-semibold">
               {q.sectionTypeName}
             </span>
+            {disabled && (
+              <span className="px-2 py-1 rounded-full bg-[var(--warm-silver)]/30 text-[var(--warm-charcoal)] text-[10px] font-semibold flex items-center gap-1">
+                <MaterialIcon name="lock" className="text-[10px]" />
+                Terkunci
+              </span>
+            )}
           </div>
           {q.avgRating && (
             <div className="flex items-center gap-1 text-[var(--lemon-700)]">
@@ -82,7 +108,7 @@ export function QuestionCard({
 
         {/* Actions row */}
         <div className="flex items-center justify-between mt-3 pt-3 border-t border-[var(--oat-border)]">
-          {isOwner && (
+          {isOwner && !bulkSelect && (
             <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
               <button
                 onClick={onTogglePublic}
@@ -102,20 +128,25 @@ export function QuestionCard({
               </button>
             </div>
           )}
+          {!bulkSelect && (
           <Button
             size="sm"
+            disabled={disabled}
             onClick={(e) => {
               e.stopPropagation();
-              onToggle();
+              if (!disabled) onToggle();
             }}
-            className={`ml-auto rounded-[var(--radius-lg)] text-xs cursor-pointer ${
-              isInBundle
-                ? "bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)]"
-                : "bg-[var(--matcha-300)] text-[var(--matcha-800)] hover:bg-[var(--matcha-400)]"
+            className={`ml-auto rounded-[var(--radius-lg)] text-xs ${
+              disabled
+                ? "bg-[var(--oat-light)] text-[var(--warm-silver)] cursor-not-allowed"
+                : isInBundle
+                  ? "bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] cursor-pointer"
+                  : "bg-[var(--matcha-300)] text-[var(--matcha-800)] hover:bg-[var(--matcha-400)] cursor-pointer"
             }`}
           >
-            {isInBundle ? "Hapus dari Paket" : "Tambah ke Paket"}
+            {disabled ? "Tidak Tersedia" : isInBundle ? "Hapus dari Paket" : "Tambah ke Paket"}
           </Button>
+          )}
         </div>
       </div>
     </div>

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

@@ -1,3 +1,4 @@
+import { useState, useRef, useEffect } from "react";
 import { Card } from "@labas/ui/components/card";
 import { Button } from "@labas/ui/components/button";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
@@ -6,35 +7,92 @@ import { QuestionCard } from "./QuestionCard";
 interface SoalBrowserProps {
   isLoading: boolean;
   questions: any[];
-  totalPages: number;
-  page: number;
+  hasMore: boolean;
+  isFetchingNextPage: boolean;
   hasFilters: boolean;
   userId?: string;
+  lockedExamType?: string | null;
+  tab: "mine" | "public";
+  filterKey: string;
   isQuestionInBundle: (id: string) => boolean;
   onToggleQuestion: (q: any) => void;
   onOpenDetail: (q: any) => void;
   onTogglePublic: (id: string) => void;
   onDelete: (id: string) => void;
-  onSetPage: (page: number) => void;
+  onLoadMore: () => void;
   onClearFilters: () => void;
+  onBulkPublish?: (ids: string[]) => void;
 }
 
 export function SoalBrowser({
   isLoading,
   questions,
-  totalPages,
-  page,
+  hasMore,
+  isFetchingNextPage,
   hasFilters,
   userId,
+  lockedExamType,
+  tab,
+  filterKey,
   isQuestionInBundle,
   onToggleQuestion,
   onOpenDetail,
   onTogglePublic,
   onDelete,
-  onSetPage,
+  onLoadMore,
   onClearFilters,
+  onBulkPublish,
 }: SoalBrowserProps) {
-  if (isLoading) {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const isLocked = (q: any) => !!lockedExamType && q.examTypeId !== lockedExamType;
+
+  // ── Bulk mode ──
+  const [bulkMode, setBulkMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    setBulkMode(false);
+    setSelectedIds(new Set());
+  }, [filterKey]);
+
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el || !hasMore || isFetchingNextPage) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) onLoadMore();
+      },
+      { rootMargin: "200px" },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [hasMore, isFetchingNextPage, onLoadMore]);
+
+  const toggleSelect = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const clearSelection = () => setSelectedIds(new Set());
+
+  const selectAll = () => {
+    setSelectedIds(new Set(questions.map((q: any) => q.id)));
+  };
+
+  const handleBulkPublish = () => {
+    if (onBulkPublish && selectedIds.size > 0) {
+      onBulkPublish(Array.from(selectedIds));
+      setBulkMode(false);
+      setSelectedIds(new Set());
+    }
+  };
+
+  // ── Loading state ──
+  if (isLoading && questions.length === 0) {
     return (
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         {Array.from({ length: 6 }).map((_, i) => (
@@ -44,6 +102,7 @@ export function SoalBrowser({
     );
   }
 
+  // ── Empty state ──
   if (questions.length === 0) {
     return (
       <div className="text-center py-20">
@@ -61,17 +120,80 @@ export function SoalBrowser({
     );
   }
 
+  // ── Bulk mode toolbar ──
+  const renderBulkToolbar = () => {
+    if (!onBulkPublish || tab !== "mine") return null;
+    return (
+      <div className="flex items-center justify-between mb-4 p-3 rounded-[var(--radius-lg)] bg-[var(--oat-light)] border-2 border-[var(--oat-border)]">
+        {bulkMode ? (
+          <>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={clearSelection}
+                className="text-xs font-semibold text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors cursor-pointer"
+              >
+                Batalkan ({selectedIds.size})
+              </button>
+              <button
+                onClick={selectAll}
+                className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors cursor-pointer"
+              >
+                Pilih Semua
+              </button>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                size="sm"
+                disabled={selectedIds.size === 0}
+                onClick={handleBulkPublish}
+                className="rounded-[var(--radius-lg)] bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] text-xs cursor-pointer"
+              >
+                <MaterialIcon name="public" className="text-xs mr-1" />
+                Jadikan Publik ({selectedIds.size})
+              </Button>
+              <button
+                onClick={() => { setBulkMode(false); setSelectedIds(new Set()); }}
+                className="text-xs text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors cursor-pointer font-semibold ml-2"
+              >
+                Selesai
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <span className="text-xs font-semibold text-[var(--warm-charcoal)]">
+              {questions.length} soal
+            </span>
+            <button
+              onClick={() => setBulkMode(true)}
+              className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors cursor-pointer flex items-center gap-1"
+            >
+              <MaterialIcon name="select_all" className="text-sm" />
+              Pilih Banyak
+            </button>
+          </>
+        )}
+      </div>
+    );
+  };
+
   return (
     <>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {renderBulkToolbar()}
+        <div className="md:col-span-2" />
+
         {questions[0] && (
           <div className="md:col-span-2">
             <QuestionCard
               q={questions[0]}
               isFeatured
               isInBundle={isQuestionInBundle(questions[0].id)}
-              onToggle={() => onToggleQuestion(questions[0])}
-              onOpenDetail={() => onOpenDetail(questions[0])}
+              disabled={bulkMode ? false : isLocked(questions[0])}
+              selected={bulkMode ? selectedIds.has(questions[0].id) : false}
+              bulkSelect={bulkMode}
+              onToggle={() => bulkMode ? toggleSelect(questions[0].id) : onToggleQuestion(questions[0])}
+              onOpenDetail={() => bulkMode ? toggleSelect(questions[0].id) : onOpenDetail(questions[0])}
               isOwner={questions[0].creatorUserId === userId}
               onTogglePublic={() => onTogglePublic(questions[0].id)}
               onDelete={() => onDelete(questions[0].id)}
@@ -83,8 +205,11 @@ export function SoalBrowser({
             key={q.id}
             q={q}
             isInBundle={isQuestionInBundle(q.id)}
-            onToggle={() => onToggleQuestion(q)}
-            onOpenDetail={() => onOpenDetail(q)}
+            disabled={bulkMode ? false : isLocked(q)}
+            selected={bulkMode ? selectedIds.has(q.id) : false}
+            bulkSelect={bulkMode}
+            onToggle={() => bulkMode ? toggleSelect(q.id) : onToggleQuestion(q)}
+            onOpenDetail={() => bulkMode ? toggleSelect(q.id) : onOpenDetail(q)}
             isOwner={q.creatorUserId === userId}
             onTogglePublic={() => onTogglePublic(q.id)}
             onDelete={() => onDelete(q.id)}
@@ -92,29 +217,21 @@ export function SoalBrowser({
         ))}
       </div>
 
-      {totalPages > 1 && (
-        <div className="flex items-center justify-center gap-2 mt-10">
-          <Button
-            variant="outline"
-            onClick={() => onSetPage(Math.max(1, page - 1))}
-            disabled={page <= 1}
-            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover cursor-pointer"
-          >
-            <MaterialIcon name="chevron_left" />
-          </Button>
-          <span className="text-sm text-[var(--warm-charcoal)] px-4">
-            Halaman {page} dari {totalPages}
-          </span>
-          <Button
-            variant="outline"
-            onClick={() => onSetPage(Math.min(totalPages, page + 1))}
-            disabled={page >= totalPages}
-            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover cursor-pointer"
-          >
-            <MaterialIcon name="chevron_right" />
-          </Button>
+      {isFetchingNextPage && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Card key={i} className="h-40 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+          ))}
         </div>
       )}
+
+      <div ref={sentinelRef} className="h-4" />
+
+      {!hasMore && questions.length > 0 && (
+        <p className="text-center text-sm text-[var(--warm-silver)] mt-8">
+          Semua soal telah dimuat ({questions.length} soal)
+        </p>
+      )}
     </>
   );
 }

apps/web/src/components/sidebar.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Link, useLocation, useNavigate } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { useSidebar } from "@/hooks/use-sidebar";
+import { triggerGlobalTour } from "@/components/TourGuide";
 
 interface NavItem {
   to: string;
@@ -63,9 +64,11 @@ function NavIcon({ name }: { name: string }) {
 }
 
 function NavLink({ item, isActive, collapsed }: { item: NavItem; isActive: boolean; collapsed: boolean }) {
+  const tourAttr = item.to !== "/" ? { "data-tour": `nav-${item.to.replace("/", "")}` } : {};
   return (
     <Link
       to={item.to}
+      {...tourAttr}
       className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all group clay-hover cursor-pointer ${
         isActive
           ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] font-semibold clay-shadow"
@@ -152,6 +155,19 @@ export function Sidebar() {
               />
             );
           })}
+
+          {/* Help Tour Button */}
+          <button
+            onClick={triggerGlobalTour}
+            className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all clay-hover cursor-pointer text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)] w-full ${
+              collapsed ? "justify-center py-3 px-2" : "py-3 px-3 text-left"
+            }`}
+            title={collapsed ? "Panduan" : undefined}
+          >
+            <NavIcon name="help" />
+            {!collapsed && <span className="text-sm font-medium">Panduan</span>}
+          </button>
+
           {isLoggedIn ? (
             <button
               onClick={handleSignOut}

apps/web/src/routes/__root.tsx

@@ -8,6 +8,7 @@ import { Sidebar } from "@/components/sidebar";
 import { ThemeProvider } from "@/components/theme-provider";
 import { useSidebar } from "@/hooks/use-sidebar";
 import { GlobalGenerationProgress } from "@/components/generate/GlobalGenerationProgress";
+import { TourGuide } from "@/components/TourGuide";
 import type { trpc } from "@/utils/trpc";
 
 import "../index.css";
@@ -72,6 +73,7 @@ function RootComponent() {
           </div>
         )}
         <GlobalGenerationProgress />
+        <TourGuide />
         <Toaster richColors />
       </ThemeProvider>
       <TanStackRouterDevtools position="bottom-left" />

apps/web/src/routes/bank.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { z } from "zod";
@@ -10,6 +10,8 @@ import { usePackageBuilder } from "@/hooks/use-package-builder";
 import { useLocalStorageBoolean } from "@/hooks/use-local-storage-boolean";
 import { AutoBundleModal } from "@/components/bank/AutoBundleModal";
 import { QuestionDetailModal } from "@/components/bank/QuestionDetailModal";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { PageTour, TourHelpButton } from "@/components/TourGuide";
 import { FilterBar } from "@/components/bank/FilterBar";
 import { MobileFilterSheet } from "@/components/bank/MobileFilterSheet";
 import { AdvancedFilters } from "@/components/bank/AdvancedFilters";
@@ -17,6 +19,7 @@ import { SoalBrowser } from "@/components/bank/SoalBrowser";
 import { SectionBrowser } from "@/components/bank/SectionBrowser";
 import { BundleSidebar } from "@/components/bank/BundleSidebar";
 import { toast } from "sonner";
+import type { Step } from "react-joyride";
 
 const FILTER_ADVANCED_KEY = "labas-bank-filter-advanced";
 
@@ -30,7 +33,6 @@ export const Route = createFileRoute("/bank")({
     section: z.string().optional(),
     format: z.string().optional(),
     difficulty: z.coerce.number().optional(),
-    page: z.coerce.number().optional(),
   }).parse,
   beforeLoad: async () => {
     const session = await authClient.getSession();
@@ -51,14 +53,18 @@ function BankComponent() {
   const userId = session?.user.id;
 
   const mode: Mode = search.mode ?? "soal";
-  const tab: QuestionTab = search.tab ?? "mine";
+  const tab: QuestionTab = search.tab ?? "public";
   const searchText = search.search ?? "";
   const examType = search.examType ?? "";
   const section = search.section ?? "";
   const format = search.format ?? "";
   const difficulty = search.difficulty;
-  const page = search.page ?? 1;
+
+  // ── Infinite scroll state ──
+  const [allQuestions, setAllQuestions] = useState<any[]>([]);
+  const [offset, setOffset] = useState(0);
   const limit = 12;
+  const filterKey = JSON.stringify({ searchText, examType, section, format, difficulty, tab, mode });
 
   // ── Sidebar / Bundle State ──
   const [bundleQuestions, setBundleQuestions] = useState<any[]>([]);
@@ -88,12 +94,35 @@ function BankComponent() {
           ? { creatorUserId: userId }
           : { isPublic: true }),
         limit,
-        offset: (page - 1) * limit,
+        offset,
       },
       { enabled: mode === "soal" },
     ),
   );
 
+  // Reset offset when filters change
+  useEffect(() => {
+    setOffset(0);
+  }, [filterKey]);
+
+  // Append / replace questions when query data arrives
+  useEffect(() => {
+    const data = questionQuery.data;
+    if (!data) return;
+    if (offset === 0) {
+      setAllQuestions(data.questions ?? []);
+    } else {
+      setAllQuestions((prev) => {
+        const existingIds = new Set(prev.map((q: any) => q.id));
+        const newQs = (data.questions ?? []).filter((q: any) => !existingIds.has(q.id));
+        return [...prev, ...newQs];
+      });
+    }
+  }, [questionQuery.data]);
+
+  const totalQuestions = questionQuery.data?.total ?? 0;
+  const hasMore = offset + limit < totalQuestions;
+
   const sectionQuery = useQuery(
     trpc.combo.availableSections.queryOptions(
       {
@@ -124,6 +153,15 @@ function BankComponent() {
     onSuccess: () => questionQuery.refetch(),
   });
 
+  const bulkPublish = useMutation({
+    ...trpc.question.bulkPublish.mutationOptions(),
+    onSuccess: () => {
+      questionQuery.refetch();
+      toast.success("Soal berhasil dipublikasikan");
+    },
+    onError: (err: any) => toast.error("Gagal mempublikasikan", { description: err.message }),
+  });
+
   // ── Navigation helpers ──
   const setMode = (newMode: Mode) => {
     navigate({
@@ -135,7 +173,6 @@ function BankComponent() {
         section: "",
         format: "",
         difficulty: undefined,
-        page: 1,
       },
     });
     if (newMode === "soal") setBundleSections([]);
@@ -143,22 +180,19 @@ function BankComponent() {
   };
 
   const setSearch = (value: string) =>
-    navigate({ search: (prev) => ({ ...prev, search: value, page: 1 }) });
+    navigate({ search: (prev) => ({ ...prev, search: value }) });
 
   const setExamType = (value: string) =>
-    navigate({ search: (prev) => ({ ...prev, examType: value, page: 1 }) });
+    navigate({ search: (prev) => ({ ...prev, examType: value }) });
 
   const setSection = (value: string) =>
-    navigate({ search: (prev) => ({ ...prev, section: value, page: 1 }) });
+    navigate({ search: (prev) => ({ ...prev, section: value }) });
 
   const setFormat = (value: string) =>
-    navigate({ search: (prev) => ({ ...prev, format: value, page: 1 }) });
+    navigate({ search: (prev) => ({ ...prev, format: value }) });
 
   const setDifficulty = (value: number | undefined) =>
-    navigate({ search: (prev) => ({ ...prev, difficulty: value, page: 1 }) });
-
-  const setPage = (newPage: number) =>
-    navigate({ search: (prev) => ({ ...prev, page: newPage }) });
+    navigate({ search: (prev) => ({ ...prev, difficulty: value }) });
 
   const setTab = (newTab: QuestionTab) =>
     navigate({
@@ -170,7 +204,6 @@ function BankComponent() {
         section: "",
         format: "",
         difficulty: undefined,
-        page: 1,
       },
     });
 
@@ -183,7 +216,6 @@ function BankComponent() {
         section: "",
         format: "",
         difficulty: undefined,
-        page: 1,
       }),
     });
 
@@ -199,6 +231,8 @@ function BankComponent() {
   ];
 
   // ── Bundle helpers ──
+  const lockedExamType = bundleQuestions.length > 0 ? bundleQuestions[0]?.examTypeId : null;
+
   const isQuestionInBundle = (qid: string) =>
     bundleQuestions.some((q) => q.id === qid);
 
@@ -206,6 +240,10 @@ function BankComponent() {
     bundleSections.some((s) => s.id === sid);
 
   const toggleQuestion = (q: any) => {
+    if (lockedExamType && q.examTypeId !== lockedExamType) {
+      toast.error(`Hanya bisa memilih soal dari ${EXAM_TYPES.find((t) => t.id === lockedExamType)?.name ?? lockedExamType}`);
+      return;
+    }
     setBundleQuestions((prev) => {
       const exists = prev.find((x) => x.id === q.id);
       if (exists) return prev.filter((x) => x.id !== q.id);
@@ -285,7 +323,7 @@ function BankComponent() {
   };
 
   // ── Auto Bundle ──
-  const autoBundleExamType = examType || null;
+  const autoBundleExamType = examType || lockedExamType || null;
   const autoBundleSectionType = section || null;
 
   const onAutoBundle = async (data: {
@@ -328,9 +366,7 @@ function BankComponent() {
   };
 
   // ── Render helpers ──
-  const questions = questionQuery.data?.questions ?? [];
-  const totalQuestions = questionQuery.data?.total ?? 0;
-  const totalPages = Math.ceil(totalQuestions / limit);
+  const questions = allQuestions;
 
   const sections = sectionQuery.data?.sections ?? [];
   const groupedSections = sections.reduce((groups: Record<string, any[]>, s: any) => {
@@ -356,6 +392,8 @@ function BankComponent() {
         activeChips={activeChips}
         hasFilters={hasFilters}
         isAdvancedOpen={isAdvancedOpen}
+        lockedExamType={lockedExamType}
+        dataTour="bank-filters"
         onToggleAdvanced={() => setIsAdvancedOpen((v) => !v)}
         onSetMode={setMode}
         onSetTab={setTab}
@@ -383,18 +421,32 @@ function BankComponent() {
           <p className="text-lg text-[var(--warm-charcoal)] mt-2">
             Pilih soal atau section untuk dibuatkan paket latihan.
           </p>
+          <div className="mt-3 flex flex-wrap gap-3 text-sm text-[var(--warm-charcoal)]">
+            <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--matcha-300)]/30 text-[var(--matcha-800)] font-medium">
+              <MaterialIcon name="auto_awesome" className="text-sm" />
+              Auto Bundle — biarkan AI pilihkan soal otomatis
+            </span>
+            <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] font-medium">
+              <MaterialIcon name="touch_app" className="text-sm" />
+              Manual — pilih sendiri soal satu per satu
+            </span>
+          </div>
         </section>
 
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
-          <div className="lg:col-span-8">
+          <div data-tour="bank-questions" className="lg:col-span-8">
             {mode === "soal" ? (
               <SoalBrowser
                 isLoading={questionQuery.isLoading}
                 questions={questions}
-                totalPages={totalPages}
-                page={page}
+                hasMore={hasMore}
+                isFetchingNextPage={questionQuery.isFetching}
+                onLoadMore={() => setOffset((prev) => prev + limit)}
                 hasFilters={hasFilters}
                 userId={userId}
+                lockedExamType={lockedExamType}
+                tab={tab}
+                filterKey={filterKey}
                 isQuestionInBundle={isQuestionInBundle}
                 onToggleQuestion={toggleQuestion}
                 onOpenDetail={setSelectedQuestion}
@@ -402,8 +454,8 @@ function BankComponent() {
                 onDelete={(id) => {
                   if (confirm("Yakin mau hapus soal ini?")) deleteQuestion.mutate({ id });
                 }}
-                onSetPage={setPage}
                 onClearFilters={clearFilters}
+                onBulkPublish={(ids) => bulkPublish.mutate({ ids })}
               />
             ) : (
               <SectionBrowser
@@ -424,6 +476,7 @@ function BankComponent() {
             bundleIsPublic={bundleIsPublic}
             isCreating={isCreating}
             autoBundleExamType={autoBundleExamType}
+            lockedExamType={lockedExamType}
             onSetTitle={setBundleTitle}
             onSetDescription={setBundleDescription}
             onSetIsPublic={setBundleIsPublic}
@@ -468,6 +521,36 @@ function BankComponent() {
           isPending={isPackagePending}
         />
       )}
+
+      <PageTour
+        storageKey={BANK_TOUR_KEY}
+        autoDelay={600}
+        steps={bankPageSteps}
+      />
+      <TourHelpButton storageKey={BANK_TOUR_KEY} />
     </div>
   );
 }
+
+// ── Bank page tour ──
+const BANK_TOUR_KEY = "labas-page-tour-bank";
+const bankPageSteps: Step[] = [
+  {
+    target: "[data-tour='bank-filters']",
+    title: "Filter & Mode",
+    content: "Pilih mode 'Dari Soal' untuk pilih soal satu per satu, atau 'Dari Section' untuk gabung section dari paket yang sudah ada. Filter juga berdasarkan exam type dan kata kunci.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='bank-questions']",
+    title: "Daftar Soal",
+    content: "Semua soal yang sesuai filter ditampilkan di sini. Klik soal untuk melihat detail, atau centang untuk menambahkannya ke paket.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='bank-sidebar']",
+    title: "Sidebar Paket",
+    content: "Soal yang dipilih muncul di sini. Atur judul, deskripsi, dan visibilitas paket. Klik 'Auto Bundle' untuk isi otomatis, atau 'Buat Paket' untuk simpan.",
+    spotlightPadding: 8,
+  },
+];

apps/web/src/routes/generate.tsx

@@ -16,6 +16,7 @@ import {
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { TestBlueprintCard } from "@/components/generate/TestBlueprintCard";
 import { ResultSection } from "@/components/generate/ResultSection";
+import { PageTour, TourHelpButton } from "@/components/TourGuide";
 import {
   EXAM_TYPES,
   SECTIONS,
@@ -25,6 +26,7 @@ import {
   QUESTION_COUNT_PRESETS,
 } from "@/lib/generate-constants";
 import "flag-icons/css/flag-icons.min.css";
+import type { Step } from "react-joyride";
 
 const MAX_PARALLEL = 3;
 
@@ -199,8 +201,26 @@ function RouteComponent() {
           AI Exam Generator
         </h1>
         <p className="text-lg text-[var(--warm-charcoal)] max-w-2xl leading-relaxed">
-          Generate soal latihan dengan AI. Pilih section, format, dan topik — sisanya AI yang kerjakan.
+          Generate soal latihan dengan AI. Pilih exam, section, format, dan topik — sisanya AI yang kerjakan.
         </p>
+        <div className="mt-4 flex flex-wrap gap-3 text-sm text-[var(--warm-charcoal)]">
+          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--matcha-300)]/30 text-[var(--matcha-800)] font-medium">
+            <MaterialIcon name="looks_one" className="text-sm" />
+            Pilih exam &amp; section
+          </span>
+          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] font-medium">
+            <MaterialIcon name="looks_two" className="text-sm" />
+            Atur jumlah &amp; format
+          </span>
+          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--lemon-400)]/30 text-[var(--lemon-800)] font-medium">
+            <MaterialIcon name="looks_3" className="text-sm" />
+            Generate &amp; simpan
+          </span>
+          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--clay-black)]/10 text-[var(--clay-black)] font-medium">
+            <MaterialIcon name="looks_4" className="text-sm" />
+            Buat paket dari Bank Soal
+          </span>
+        </div>
       </section>
 
       {!hasConfigs && (
@@ -251,7 +271,7 @@ function RouteComponent() {
         <div className="lg:col-span-8 flex flex-col gap-10">
 
           {/* Exam Type */}
-          <div className="flex flex-col gap-4">
+          <div data-tour="generate-exam-type" className="flex flex-col gap-4">
             <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Jenis Ujian</label>
             <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
               {EXAM_TYPES.map((t) => (
@@ -272,7 +292,7 @@ function RouteComponent() {
           </div>
 
           {/* Section Selection — Multi-select */}
-          <div className="flex flex-col gap-4">
+          <div data-tour="generate-section" className="flex flex-col gap-4">
             <div className="flex items-center justify-between">
               <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Section</label>
               <span className="text-xs text-[var(--warm-charcoal)]">
@@ -310,7 +330,7 @@ function RouteComponent() {
           </div>
 
           {/* Question Count */}
-          <div className="flex flex-col gap-4">
+          <div data-tour="generate-count" className="flex flex-col gap-4">
             <label className="font-headline text-xl font-bold text-[var(--clay-black)]">
               Jumlah Soal
               <span className="ml-2 text-sm font-normal text-[var(--warm-charcoal)]">{questionCount} soal</span>
@@ -373,7 +393,7 @@ function RouteComponent() {
           </div>
 
           {/* Difficulty */}
-          <div className="flex flex-col gap-4">
+          <div data-tour="generate-difficulty" className="flex flex-col gap-4">
             <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Tingkat Kesulitan</label>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
               {DIFFICULTIES.map((d, i) => (
@@ -393,7 +413,7 @@ function RouteComponent() {
           </div>
 
           {/* Format Selection */}
-          <div className="flex flex-col gap-4">
+          <div data-tour="generate-format" className="flex flex-col gap-4">
             <div className="flex items-center justify-between">
               <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Format Soal</label>
               <span className="text-xs text-[var(--warm-charcoal)]">
@@ -421,7 +441,7 @@ function RouteComponent() {
           </div>
 
           {/* Topic Focus */}
-          <div className="flex flex-col gap-4">
+          <div data-tour="generate-topic" className="flex flex-col gap-4">
             <div className="flex items-center justify-between">
               <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Topik</label>
               <span className="text-xs text-[var(--warm-charcoal)]">
@@ -451,7 +471,7 @@ function RouteComponent() {
           </div>
 
           {/* Weakness Alignment */}
-          <div className="flex flex-col gap-4">
+          <div data-tour="generate-weakness" className="flex flex-col gap-4">
             <div className="flex justify-between items-end">
               <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Fokus Latihan</label>
               <span className="text-sm font-medium text-[var(--matcha-800)] bg-[var(--matcha-300)] px-3 py-1 rounded-full">
@@ -476,22 +496,24 @@ function RouteComponent() {
         </div>
 
         {/* Live Preview Card */}
-        <TestBlueprintCard
-          examType={examType}
-          selectedSections={selectedSections}
-          selectedFormats={selectedFormats}
-          questionCount={questionCount}
-          weaknessAlign={weaknessAlign}
-          mode={mode}
-          setMode={setMode}
-          activeCount={activeCount}
-          maxParallel={MAX_PARALLEL}
-          generatePending={generate.isPending}
-          hasKey={hasConfigs}
-          error={error}
-          onGenerate={handleGenerate}
-          onDismissError={() => setError(null)}
-        />
+        <div data-tour="generate-blueprint" className="lg:col-span-4">
+          <TestBlueprintCard
+            examType={examType}
+            selectedSections={selectedSections}
+            selectedFormats={selectedFormats}
+            questionCount={questionCount}
+            weaknessAlign={weaknessAlign}
+            mode={mode}
+            setMode={setMode}
+            activeCount={activeCount}
+            maxParallel={MAX_PARALLEL}
+            generatePending={generate.isPending}
+            hasKey={hasConfigs}
+            error={error}
+            onGenerate={handleGenerate}
+            onDismissError={() => setError(null)}
+          />
+        </div>
       </div>
 
       {/* Results with Tabs */}
@@ -562,6 +584,66 @@ function RouteComponent() {
           </div>
         )}
       </div>
+
+      <PageTour
+        storageKey={GENERATE_TOUR_KEY}
+        autoDelay={600}
+        steps={generatePageSteps}
+      />
+      <TourHelpButton storageKey={GENERATE_TOUR_KEY} />
     </div>
   );
 }
+
+// ── Generate page tour ──
+const GENERATE_TOUR_KEY = "labas-page-tour-generate";
+const generatePageSteps: Step[] = [
+  {
+    target: "[data-tour='generate-exam-type']",
+    title: "Jenis Ujian",
+    content: "Pilih jenis ujian yang ingin kamu latih. Tersedia IELTS, TOEFL, JLPT, HSK, dan Goethe.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-section']",
+    title: "Section",
+    content: "Pilih section yang ingin digenerate. Bisa pilih lebih dari satu. Mode Agentic dengan ≥20 soal otomatis membagi soal ke setiap section.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-count']",
+    title: "Jumlah Soal",
+    content: "Atur jumlah soal yang ingin digenerate via preset atau slider. Maksimal 40 soal per generate.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-difficulty']",
+    title: "Tingkat Kesulitan",
+    content: "Pilih tingkat kesulitan: Beginner, Intermediate, Academic, atau Expert.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-format']",
+    title: "Format Soal",
+    content: "Pilih format soal (multiple choice, true/false, dll). Format tersedia tergantung exam type yang dipilih.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-topic']",
+    title: "Topik",
+    content: "Pilih topik yang ingin difokuskan. Bisa pilih lebih dari satu topik.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-weakness']",
+    title: "Intelligent Focus",
+    content: "Atur fokus pada kelemahan kamu. AI akan menarget area yang perlu ditingkatkan berdasarkan riwayat jawaban.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='generate-blueprint']",
+    title: "Test Blueprint & Generate",
+    content: "Ringkasan konfigurasi kamu. Pilih mode Quick (cepat) atau Agentic (multi-tahap). Klik 'Generate & Launch' untuk memulai!",
+    spotlightPadding: 8,
+  },
+];

apps/web/src/routes/index.tsx

@@ -5,7 +5,6 @@ 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("/")({
   component: HomeComponent,
@@ -33,32 +32,94 @@ function HomeComponent() {
   const recentAttempts = useQuery(
     trpc.attempt.myAttempts.queryOptions({ limit: 5, offset: 0 }),
   );
+  const featuredPackages = useQuery(
+    trpc.package.list.queryOptions({ isPublic: true, limit: 3 }),
+  );
 
   const stats = overview.data;
   const attempts = recentAttempts.data?.attempts ?? [];
+  const featured = featuredPackages.data?.packages ?? [];
+
+  const isNewUser = !stats || (stats.completedAttempts === 0 && stats.totalQuestionsAnswered === 0);
 
   return (
     <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-6xl mx-auto bg-[var(--warm-cream)]">
-      <section className="mb-10">
+      {/* Header */}
+      <section className="mb-8">
         <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
-          Labas
+          Halo, {session.data?.user.name ?? "Pengguna"}!
         </h1>
-        <p className="text-lg text-[var(--warm-charcoal)] mt-2">
-          Halo, {session.data?.user.name ?? "Pengguna"}! Platform latihan ujian bahasa dengan AI.
+        <p className="text-lg text-[var(--warm-charcoal)] mt-1">
+          {isNewUser ? "Siap mulai belajar? Pilih langkah di bawah ini." : "Lanjutkan latihanmu!"}
         </p>
       </section>
 
+      {/* Quick Start Banner for New Users */}
+      {isNewUser && (
+        <Card className="mb-8 bg-gradient-to-br from-[var(--matcha-300)]/40 to-[var(--slushie-500)]/30 border-2 border-[var(--matcha-400)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-6 md:p-8">
+            <div className="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8">
+              <div className="shrink-0">
+                <div className="h-16 w-16 bg-[var(--clay-black)] rounded-[var(--radius-2xl)] flex items-center justify-center">
+                  <MaterialIcon name="rocket_launch" className="text-3xl text-[var(--pure-white)]" />
+                </div>
+              </div>
+              <div className="flex-1">
+                <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-1">
+                  Selamat Datang di Labas
+                </h2>
+                <p className="text-sm text-[var(--warm-charcoal)] mb-4">
+                  Platform latihan ujian bahasa berbasis AI. Ikuti 3 langkah mudah untuk memulai:
+                </p>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                  <Link to="/generate" className="flex items-center gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)] hover:border-[var(--matcha-400)] transition-all group clay-hover">
+                    <div className="h-9 w-9 bg-[var(--matcha-300)] rounded-[var(--radius-md)] flex items-center justify-center shrink-0">
+                      <span className="text-xs font-black text-[var(--matcha-800)]">1</span>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-bold text-[var(--clay-black)] group-hover:text-[var(--matcha-800)]">Generate Soal</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">Buat soal dengan AI</p>
+                    </div>
+                    <MaterialIcon name="chevron_right" className="text-sm text-[var(--warm-silver)] group-hover:text-[var(--matcha-800)]" />
+                  </Link>
+                  <Link to="/bank" className="flex items-center gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)] hover:border-[var(--slushie-500)] transition-all group clay-hover">
+                    <div className="h-9 w-9 bg-[var(--slushie-500)]/30 rounded-[var(--radius-md)] flex items-center justify-center shrink-0">
+                      <span className="text-xs font-black text-[var(--slushie-800)]">2</span>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-bold text-[var(--clay-black)] group-hover:text-[var(--slushie-800)]">Buat Paket</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">Kumpulkan soal latihan</p>
+                    </div>
+                    <MaterialIcon name="chevron_right" className="text-sm text-[var(--warm-silver)] group-hover:text-[var(--slushie-800)]" />
+                  </Link>
+                  <Link to="/packages" className="flex items-center gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)] hover:border-[var(--lemon-600)] transition-all group clay-hover">
+                    <div className="h-9 w-9 bg-[var(--lemon-400)]/50 rounded-[var(--radius-md)] flex items-center justify-center shrink-0">
+                      <span className="text-xs font-black text-[var(--lemon-800)]">3</span>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-bold text-[var(--clay-black)] group-hover:text-[var(--lemon-800)]">Mulai Latihan</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">Kerjakan paket soal</p>
+                    </div>
+                    <MaterialIcon name="chevron_right" className="text-sm text-[var(--warm-silver)] group-hover:text-[var(--lemon-800)]" />
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
       {/* Quick Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
+      <div data-tour="dashboard-stats" className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-10">
         <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-          <CardContent className="p-6">
-            <div className="flex items-center gap-4">
-              <div className="h-12 w-12 bg-[var(--matcha-300)] rounded-[var(--radius-lg)] flex items-center justify-center">
-                <MaterialIcon name="assignment" className="text-xl text-[var(--matcha-800)]" />
+          <CardContent className="p-5">
+            <div className="flex items-center gap-3">
+              <div className="h-11 w-11 bg-[var(--matcha-300)] rounded-[var(--radius-lg)] flex items-center justify-center">
+                <MaterialIcon name="assignment" className="text-lg text-[var(--matcha-800)]" />
               </div>
               <div>
                 <p className="text-sm text-[var(--warm-charcoal)]">Latihan Selesai</p>
-                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">
+                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
                   {stats?.completedAttempts ?? 0}
                 </p>
               </div>
@@ -66,29 +127,44 @@ function HomeComponent() {
           </CardContent>
         </Card>
         <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-          <CardContent className="p-6">
-            <div className="flex items-center gap-4">
-              <div className="h-12 w-12 bg-[var(--slushie-500)] rounded-[var(--radius-lg)] flex items-center justify-center">
-                <MaterialIcon name="timer" className="text-xl text-[var(--clay-black)]" />
+          <CardContent className="p-5">
+            <div className="flex items-center gap-3">
+              <div className="h-11 w-11 bg-[var(--slushie-500)] rounded-[var(--radius-lg)] flex items-center justify-center">
+                <MaterialIcon name="timer" className="text-lg text-[var(--clay-black)]" />
               </div>
               <div>
                 <p className="text-sm text-[var(--warm-charcoal)]">Waktu Latihan</p>
-                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">
-                  {stats ? `${Math.round(stats.totalTimeSpentSec / 60)} menit` : "0 menit"}
+                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
+                  {stats ? `${Math.round(stats.totalTimeSpentSec / 60)}m` : "0m"}
                 </p>
               </div>
             </div>
           </CardContent>
         </Card>
         <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-          <CardContent className="p-6">
-            <div className="flex items-center gap-4">
-              <div className="h-12 w-12 bg-[var(--lemon-400)] rounded-[var(--radius-lg)] flex items-center justify-center">
-                <MaterialIcon name="percent" className="text-xl text-[var(--lemon-800)]" />
+          <CardContent className="p-5">
+            <div className="flex items-center gap-3">
+              <div className="h-11 w-11 bg-[var(--lemon-400)] rounded-[var(--radius-lg)] flex items-center justify-center">
+                <MaterialIcon name="quiz" className="text-lg text-[var(--lemon-800)]" />
               </div>
               <div>
-                <p className="text-sm text-[var(--warm-charcoal)]">Akurasi Rata-rata</p>
-                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">
+                <p className="text-sm text-[var(--warm-charcoal)]">Soal Terjawab</p>
+                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
+                  {stats?.totalQuestionsAnswered ?? 0}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-5">
+            <div className="flex items-center gap-3">
+              <div className="h-11 w-11 bg-[var(--pomegranate-400)]/30 rounded-[var(--radius-lg)] flex items-center justify-center">
+                <MaterialIcon name="trending_up" className="text-lg text-[var(--pomegranate-600)]" />
+              </div>
+              <div>
+                <p className="text-sm text-[var(--warm-charcoal)]">Akurasi</p>
+                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
                   {stats ? `${stats.overallAccuracyPct}%` : "-"}
                 </p>
               </div>
@@ -98,55 +174,97 @@ function HomeComponent() {
       </div>
 
       {/* Quick Actions */}
-      <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">
+      <div className="flex flex-col sm:flex-row gap-3 mb-10">
+        <Link to="/generate" className="flex-1">
+          <Button className="w-full bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] h-12 clay-shadow clay-hover text-base">
             <MaterialIcon name="auto_awesome" className="text-xl" />
             <span className="ml-2">Generate Soal Baru</span>
           </Button>
         </Link>
-        <Link to="/packages">
-          <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">
+        <Link to="/packages" className="flex-1">
+          <Button variant="outline" className="w-full rounded-[var(--radius-lg)] h-12 border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] clay-hover text-base">
             <MaterialIcon name="folder" className="text-xl" />
             <span className="ml-2">Mulai Latihan</span>
           </Button>
         </Link>
-        <Link to="/analytics">
-          <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">
+        <Link to="/analytics" className="flex-1">
+          <Button variant="outline" className="w-full rounded-[var(--radius-lg)] h-12 border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] clay-hover text-base">
             <MaterialIcon name="analytics" className="text-xl" />
             <span className="ml-2">Lihat Analitik</span>
           </Button>
         </Link>
       </div>
 
-      {/* Recent Attempts */}
-      <section className="mb-10">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
-            Latihan Terakhir
-          </h2>
-          <Link to="/history" className="text-sm text-[var(--matcha-600)] font-semibold hover:underline">
-            Lihat Semua
-          </Link>
-        </div>
-
-        {attempts.length === 0 ? (
-          <Card className="bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-            <CardContent className="p-6 text-center">
-              <MaterialIcon name="history" className="text-4xl text-[var(--warm-silver)] mx-auto mb-3" />
-              <p className="text-[var(--warm-charcoal)] font-semibold">Belum ada latihan</p>
-              <p className="text-sm text-[var(--warm-silver)] mt-1">
-                Pilih paket soal dan mulai latihan pertama Anda.
-              </p>
-              <Link to="/packages" className="inline-block mt-4">
-                <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]">
-                  <MaterialIcon name="folder" className="mr-2" />
-                  Lihat Paket
-                </Button>
+      {/* Featured Packages */}
+      {featured.length > 0 && (
+        <section className="mb-10">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
+              Paket Unggulan
+            </h2>
+            <Link to="/packages" className="text-sm text-[var(--matcha-600)] font-semibold hover:underline">
+              Lihat Semua
+            </Link>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {featured.map((pkg) => (
+              <Link key={pkg.id} to="/package/$id" params={{ id: pkg.id }} className="block">
+                <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full transition-all hover:border-[var(--matcha-400)]">
+                  <CardContent className="p-5">
+                    <div className="flex items-start justify-between gap-2 mb-3">
+                      <span className="px-2 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold shrink-0">
+                        {pkg.examTypeName}
+                      </span>
+                      <span className="text-xs text-[var(--warm-silver)] whitespace-nowrap">
+                        {pkg.usageCount}x digunakan
+                      </span>
+                    </div>
+                    <h3 className="font-headline text-base font-bold text-[var(--clay-black)] mb-1 line-clamp-2">
+                      {pkg.title}
+                    </h3>
+                    {pkg.description && (
+                      <p className="text-xs text-[var(--warm-charcoal)] line-clamp-2 mb-3">
+                        {pkg.description}
+                      </p>
+                    )}
+                    <div className="flex items-center justify-between pt-3 border-t border-[var(--oat-border)]">
+                      <div className="flex gap-3 text-xs text-[var(--warm-charcoal)]">
+                        <span className="flex items-center gap-1">
+                          <MaterialIcon name="quiz" className="text-xs" />
+                          {pkg.totalQuestions}
+                        </span>
+                        <span className="flex items-center gap-1">
+                          <MaterialIcon name="folder" className="text-xs" />
+                          {pkg.totalSections}
+                        </span>
+                        {pkg.estimatedDurationMin && (
+                          <span className="flex items-center gap-1">
+                            <MaterialIcon name="timer" className="text-xs" />
+                            {pkg.estimatedDurationMin}m
+                          </span>
+                        )}
+                      </div>
+                      <MaterialIcon name="play_circle" className="text-xl text-[var(--matcha-600)]" />
+                    </div>
+                  </CardContent>
+                </Card>
               </Link>
-            </CardContent>
-          </Card>
-        ) : (
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Recent Attempts */}
+      {attempts.length > 0 && (
+        <section className="mb-10">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
+              Latihan Terakhir
+            </h2>
+            <Link to="/history" className="text-sm text-[var(--matcha-600)] font-semibold hover:underline">
+              Lihat Semua
+            </Link>
+          </div>
           <div className="space-y-3">
             {attempts.map((a) => {
               const pct =
@@ -182,7 +300,6 @@ function HomeComponent() {
                           {formatDateShort(a.startedAt)}
                         </div>
                       </div>
-
                       <div className="flex items-center gap-4 shrink-0">
                         {pct != null && (
                           <div className="text-right">
@@ -211,59 +328,59 @@ function HomeComponent() {
               );
             })}
           </div>
-        )}
-      </section>
+        </section>
+      )}
 
-      {/* Feature Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <Link to="/generate" className="block">
-          <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
-            <CardContent className="p-6">
-              <div className="flex items-center gap-3 mb-4">
-                <div className="h-10 w-10 bg-[var(--matcha-300)] rounded-[var(--radius-md)] flex items-center justify-center">
-                  <MaterialIcon name="auto_awesome" className="text-xl text-[var(--matcha-800)]" />
+      {/* Feature Cards - simplified, only show if new user */}
+      {isNewUser && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Link to="/bank" className="block">
+            <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
+              <CardContent className="p-5">
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="h-9 w-9 bg-[var(--slushie-500)] rounded-[var(--radius-md)] flex items-center justify-center">
+                    <MaterialIcon name="database" className="text-lg text-[var(--clay-black)]" />
+                  </div>
+                  <h3 className="font-headline font-bold text-[var(--clay-black)]">Bank Soal</h3>
                 </div>
-                <h3 className="font-headline text-lg font-bold text-[var(--clay-black)]">AI Generator</h3>
-              </div>
-              <p className="text-sm text-[var(--warm-charcoal)]">
-                Generate soal dengan AI menggunakan API key sendiri. Dua mode: Quick dan Agentic.
-              </p>
-            </CardContent>
-          </Card>
-        </Link>
-
-        <Link to="/bank" className="block">
-          <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
-            <CardContent className="p-6">
-              <div className="flex items-center gap-3 mb-4">
-                <div className="h-10 w-10 bg-[var(--slushie-500)] rounded-[var(--radius-md)] flex items-center justify-center">
-                  <MaterialIcon name="database" className="text-xl text-[var(--clay-black)]" />
+                <p className="text-xs text-[var(--warm-charcoal)]">
+                  Simpan, publikasikan, dan buat paket dari soal pilihan.
+                </p>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link to="/history" className="block">
+            <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
+              <CardContent className="p-5">
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="h-9 w-9 bg-[var(--lemon-400)] rounded-[var(--radius-md)] flex items-center justify-center">
+                    <MaterialIcon name="history" className="text-lg text-[var(--lemon-800)]" />
+                  </div>
+                  <h3 className="font-headline font-bold text-[var(--clay-black)]">Riwayat</h3>
                 </div>
-                <h3 className="font-headline text-lg font-bold text-[var(--clay-black)]">Bank Soal</h3>
-              </div>
-              <p className="text-sm text-[var(--warm-charcoal)]">
-                Simpan, publikasikan, dan gunakan ulang soal latihan Anda. Buat paket dari soal pilihan.
-              </p>
-            </CardContent>
-          </Card>
-        </Link>
-
-        <Link to="/analytics" className="block">
-          <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
-            <CardContent className="p-6">
-              <div className="flex items-center gap-3 mb-4">
-                <div className="h-10 w-10 bg-[var(--lemon-400)] rounded-[var(--radius-md)] flex items-center justify-center">
-                  <MaterialIcon name="analytics" className="text-xl text-[var(--lemon-800)]" />
+                <p className="text-xs text-[var(--warm-charcoal)]">
+                  Lihat kembali hasil dan progres latihan kamu.
+                </p>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link to="/settings" className="block">
+            <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
+              <CardContent className="p-5">
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="h-9 w-9 bg-[var(--oat-light)] rounded-[var(--radius-md)] flex items-center justify-center">
+                    <MaterialIcon name="settings" className="text-lg text-[var(--warm-charcoal)]" />
+                  </div>
+                  <h3 className="font-headline font-bold text-[var(--clay-black)]">Pengaturan</h3>
                 </div>
-                <h3 className="font-headline text-lg font-bold text-[var(--clay-black)]">Analytics</h3>
-              </div>
-              <p className="text-sm text-[var(--warm-charcoal)]">
-                Evaluasi per-section, identifikasi kelemahan, dan pantau tren perkembangan Anda.
-              </p>
-            </CardContent>
-          </Card>
-        </Link>
-      </div>
+                <p className="text-xs text-[var(--warm-charcoal)]">
+                  Kelola API key dan preferensi akun kamu.
+                </p>
+              </CardContent>
+            </Card>
+          </Link>
+        </div>
+      )}
     </div>
   );
 }

apps/web/src/routes/packages.tsx

@@ -15,6 +15,9 @@ import {
   SelectValue,
 } from "@labas/ui/components/select";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { GettingStartedCard } from "@/components/GettingStartedCard";
+import { PageTour, TourHelpButton } from "@/components/TourGuide";
+import type { Step } from "react-joyride";
 import { toast } from "sonner";
 
 export const Route = createFileRoute("/packages")({
@@ -117,7 +120,7 @@ function PackagesComponent() {
   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">
-        <div className="flex items-center justify-between">
+        <div data-tour="packages-header" className="flex items-center justify-between">
           <div>
             <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
               Paket Soal
@@ -135,6 +138,9 @@ function PackagesComponent() {
         </div>
       </section>
 
+      {/* Getting Started Guide */}
+      <GettingStartedCard />
+
       {/* Tabs */}
       <div className="flex gap-2 mb-6">
         <button
@@ -160,7 +166,7 @@ function PackagesComponent() {
       </div>
 
       {/* Filters */}
-      <div className="flex flex-col md:flex-row gap-3 mb-8">
+      <div data-tour="packages-filters" className="flex flex-col md:flex-row gap-3 mb-8">
         <div className="relative flex-1 max-w-md">
           <MaterialIcon name="search" className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--warm-charcoal)]" />
           <Input
@@ -196,18 +202,32 @@ function PackagesComponent() {
           ))}
         </div>
       ) : packages.length === 0 ? (
-        <div className="text-center py-20">
+        <div className="text-center py-16">
           <MaterialIcon name="folder_open" className="text-6xl text-[var(--warm-silver)] mx-auto mb-4" />
           <p className="text-lg text-[var(--warm-charcoal)] font-semibold">Tidak ada paket ditemukan</p>
-          <p className="text-sm text-[var(--warm-silver)] mt-1">
+          <p className="text-sm text-[var(--warm-silver)] mt-1 mb-6">
             {tab === "mine"
               ? "Belum ada paket yang Anda buat. Buat paket dari Bank Soal."
-              : "Buat paket soal pertama Anda"}
+              : "Belum ada paket publik. Buat paket soal pertama Anda"}
           </p>
+          <div className="flex items-center justify-center gap-3">
+            <Link to="/generate">
+              <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]">
+                <MaterialIcon name="auto_awesome" className="mr-2" />
+                Generate Soal
+              </Button>
+            </Link>
+            <Link to="/bank">
+              <Button variant="outline" className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)]">
+                <MaterialIcon name="add" className="mr-2" />
+                Buat Paket
+              </Button>
+            </Link>
+          </div>
         </div>
       ) : (
         <>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div data-tour="packages-list" className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {packages.map((pkg) => {
               const isOwner = pkg.creatorUserId === userId;
               return (
@@ -342,6 +362,32 @@ function PackagesComponent() {
           )}
         </>
       )}
+
+      <PageTour storageKey={PACKAGES_TOUR_KEY} autoDelay={600} steps={packagesPageSteps} />
+      <TourHelpButton storageKey={PACKAGES_TOUR_KEY} />
     </div>
   );
 }
+
+// ── Packages page tour ──
+const PACKAGES_TOUR_KEY = "labas-page-tour-packages";
+const packagesPageSteps: Step[] = [
+  {
+    target: "[data-tour='packages-header']",
+    title: "Paket Soal",
+    content: "Temukan paket soal dari komunitas atau lihat paket buatan sendiri. Klik 'Buat Paket' untuk membuat paket baru dari Bank Soal.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='packages-filters']",
+    title: "Filter & Pencarian",
+    content: "Cari paket berdasarkan nama atau filter berdasarkan jenis ujian (IELTS, TOEFL, dll). Bisa juga switch antara 'Semua Paket' dan 'Paket Saya'.",
+    spotlightPadding: 8,
+  },
+  {
+    target: "[data-tour='packages-list']",
+    title: "Mulai Latihan",
+    content: "Klik kartu paket untuk lihat detail, atau langsung klik 'Mulai Latihan' untuk mengerjakan soal. Pantau skor dan progres kamu!",
+    spotlightPadding: 8,
+  },
+];

bun.lock

@@ -7,6 +7,7 @@
       "dependencies": {
         "@labas/env": "workspace:*",
         "dotenv": "catalog:",
+        "react-joyride": "^3.1.0",
         "zod": "catalog:",
       },
       "devDependencies": {
@@ -489,6 +490,8 @@
 
     "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.12", "", { "os": "win32", "cpu": "x64" }, "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA=="],
 
+    "@fastify/deepmerge": ["@fastify/deepmerge@3.2.1", "", {}, "sha512-N5Oqvltoa2r9z1tbx4xjky0oRR60v+T47Ic4J1ukoVQcptLOrIdRnCSdTGmOmajZuHVKlTnfcmrjyqsGEW1ztA=="],
+
     "@floating-ui/core": ["@floating-ui/core@1.7.5", "", { "dependencies": { "@floating-ui/utils": "^0.2.11" } }, "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ=="],
 
     "@floating-ui/dom": ["@floating-ui/dom@1.7.6", "", { "dependencies": { "@floating-ui/core": "^1.7.5", "@floating-ui/utils": "^0.2.11" } }, "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ=="],
@@ -497,6 +500,12 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.11", "", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="],
 
+    "@gilbarbara/deep-equal": ["@gilbarbara/deep-equal@0.4.1", "", {}, "sha512-QF2BGeQjsa59T59XvFdR3is5jrl28Eg0J6giXAC5919bcqvR8XP4B+07tpbs6Y6/IQd4FBncaL2WVXIBgSxt4w=="],
+
+    "@gilbarbara/hooks": ["@gilbarbara/hooks@0.11.0", "", { "dependencies": { "@gilbarbara/deep-equal": "^0.4.1" }, "peerDependencies": { "react": "16.8 - 19" } }, "sha512-CIVazdxqFRplUfm9wZL3/0X1TURJekhPMWGFdWzEmyJrGPiotX2yxA1KiB8N7VnhawIaMtb2Apnda4Y6DRwi2Q=="],
+
+    "@gilbarbara/types": ["@gilbarbara/types@0.2.2", "", { "dependencies": { "type-fest": "^4.1.0" } }, "sha512-QuQDBRRcm1Q8AbSac2W1YElurOhprj3Iko/o+P1fJxUWS4rOGKMVli98OXS7uo4z+cKAif6a+L9bcZFSyauQpQ=="],
+
     "@hono/node-server": ["@hono/node-server@1.19.14", "", { "peerDependencies": { "hono": "^4" } }, "sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw=="],
 
     "@hono/trpc-server": ["@hono/trpc-server@0.4.2", "", { "peerDependencies": { "@trpc/server": "^10.10.0 || >11.0.0-rc", "hono": ">=4.0.0" } }, "sha512-3TDrc42CZLgcTFkXQba+y7JlRWRiyw1AqhLqztWyNS2IFT+3bHld0lxKdGBttCtGKHYx0505dM67RMazjhdZqw=="],
@@ -1293,6 +1302,8 @@
 
     "is-interactive": ["is-interactive@2.0.0", "", {}, "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ=="],
 
+    "is-lite": ["is-lite@2.0.0", "", {}, "sha512-70f2BMIQlbSUXVKaZUd9a9fJH3IH1PDckV0m4BIIO4LjnNYvOh4Ng7vXIXEwpA0KDZknRq+7fHwGTu0jIdx28g=="],
+
     "is-map": ["is-map@2.0.3", "", {}, "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw=="],
 
     "is-module": ["is-module@1.0.0", "", {}, "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="],
@@ -1609,8 +1620,12 @@
 
     "react-hook-form": ["react-hook-form@7.73.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-VAfVYOPcx3piiEVQy95vyFmBwbVUsP/AUIN+mpFG8h11yshDd444nn0VyfaGWSRnhOLVgiDu7HIuBtAIzxn9dA=="],
 
+    "react-innertext": ["react-innertext@1.1.5", "", { "peerDependencies": { "@types/react": ">=0.0.0 <=99", "react": ">=0.0.0 <=99" } }, "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q=="],
+
     "react-is": ["react-is@19.2.5", "", {}, "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ=="],
 
+    "react-joyride": ["react-joyride@3.1.0", "", { "dependencies": { "@fastify/deepmerge": "^3.2.1", "@floating-ui/react-dom": "^2.1.8", "@gilbarbara/deep-equal": "^0.4.1", "@gilbarbara/hooks": "^0.11.0", "@gilbarbara/types": "^0.2.2", "is-lite": "^2.0.0", "react-innertext": "^1.1.5", "scroll": "^3.0.1", "scrollparent": "^2.1.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "16.8 - 19", "react-dom": "16.8 - 19" } }, "sha512-+UEDpNsYSHhhSW/OQcNl6+oODYx20EP6TykSD45if0MqAAZMYD+3DU64w9wP3fBjQswvq5BgK99w3rw6ing69g=="],
+
     "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
 
     "readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
@@ -1689,6 +1704,10 @@
 
     "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
 
+    "scroll": ["scroll@3.0.1", "", {}, "sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg=="],
+
+    "scrollparent": ["scrollparent@2.1.0", "", {}, "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA=="],
+
     "semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
 
     "send": ["send@1.2.1", "", { "dependencies": { "debug": "^4.4.3", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "etag": "^1.8.1", "fresh": "^2.0.0", "http-errors": "^2.0.1", "mime-types": "^3.0.2", "ms": "^2.1.3", "on-finished": "^2.4.1", "range-parser": "^1.2.1", "statuses": "^2.0.2" } }, "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ=="],
@@ -1843,7 +1862,7 @@
 
     "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
 
-    "type-fest": ["type-fest@5.6.0", "", { "dependencies": { "tagged-tag": "^1.0.0" } }, "sha512-8ZiHFm91orbSAe2PSAiSVBVko18pbhbiB3U9GglSzF/zCGkR+rxpHx6sEMCUm4kxY4LjDIUGgCfUMtwfZfjfUA=="],
+    "type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="],
 
     "type-is": ["type-is@2.0.1", "", { "dependencies": { "content-type": "^1.0.5", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw=="],
 
@@ -2077,6 +2096,8 @@
 
     "micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
+    "msw/type-fest": ["type-fest@5.6.0", "", { "dependencies": { "tagged-tag": "^1.0.0" } }, "sha512-8ZiHFm91orbSAe2PSAiSVBVko18pbhbiB3U9GglSzF/zCGkR+rxpHx6sEMCUm4kxY4LjDIUGgCfUMtwfZfjfUA=="],
+
     "npm-run-path/path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],
 
     "path-scurry/lru-cache": ["lru-cache@11.3.5", "", {}, "sha512-NxVFwLAnrd9i7KUBxC4DrUhmgjzOs+1Qm50D3oF1/oL+r1NpZ4gA7xvG0/zJ8evR7zIKn4vLf7qTNduWFtCrRw=="],

package.json

@@ -38,6 +38,7 @@
   "dependencies": {
     "@labas/env": "workspace:*",
     "dotenv": "catalog:",
+    "react-joyride": "^3.1.0",
     "zod": "catalog:"
   },
   "devDependencies": {

packages/ai/src/agentic.ts

@@ -193,7 +193,7 @@ Rules:
 - Questions should test real comprehension, not surface recall
 - For multiple choice: always provide 4 options (A, B, C, D) with one clearly correct answer
 - Options must be plausible distractors
-- explanation (explanation) - dijelaskan dengan bahasa Indonesia
+- explanation — WAJIB ditulis dalam Bahasa Indonesia. DILARANG menggunakan bahasa asing.
 - For true_false_not_given: correctAnswer must be exactly TRUE, FALSE, or NOT_GIVEN (uppercase)
 - For author_view: correctAnswer must be exactly YES, NO, or NOT_GIVEN (uppercase)
 
@@ -302,7 +302,7 @@ Rules:
 - Each question must be directly answerable from the passage
 - Use "passageText" field with relevant excerpt (or full passage)
 - For multiple choice: provide 4 options (A, B, C, D)
-- explanation - dijelaskan dengan bahasa Indonesia
+- explanation — WAJIB ditulis dalam Bahasa Indonesia. DILARANG menggunakan bahasa asing.
 - For true_false_not_given: correctAnswer must be TRUE, FALSE, or NOT_GIVEN (uppercase)
 - For author_view: correctAnswer must be YES, NO, or NOT_GIVEN (uppercase)
 
@@ -439,7 +439,27 @@ export async function generateQuestionsAgentic(
 
     // Repair & parse
     let { valid, invalid, repairLog } = repairAndParseQuestions(rawQuestions, passage);
-    validQuestions = valid;
+
+    // Move questions with non-Indonesian (CJK) explanations to invalid for regeneration
+    const hasCJK = (text: string) => /[\u4E00-\u9FFF\u3400-\u4DBF\u3040-\u309F\u30A0-\u30FF\uAC00-\uD7AF]/.test(text);
+    const cjkInvalid: Array<{ index: number; raw: unknown; errors: string[] }> = [];
+    const filteredValid: typeof valid = [];
+    for (let vi = 0; vi < valid.length; vi++) {
+      const q = valid[vi];
+      if (!q) continue;
+      if (q.explanation && hasCJK(q.explanation)) {
+        cjkInvalid.push({
+          index: vi,
+          raw: q,
+          errors: ["explanation contains CJK characters (should be Bahasa Indonesia)"],
+        });
+        repairLog.push(`Q${vi + 1}: explanation contains CJK characters, moved to regeneration queue`);
+      } else {
+        filteredValid.push(q);
+      }
+    }
+    validQuestions = filteredValid;
+    invalid = [...invalid, ...cjkInvalid];
     allRepairLogs.push(...repairLog);
 
     // Regenerate structural-invalid questions with bounded attempts

packages/ai/src/prompts.ts

@@ -21,9 +21,9 @@ INSTRUCTIONS:
 - Passage length should be appropriate for the exam type and difficulty.
 - Each question must have:
   * a reading passage (passageText)
-  * a clear question prompt (questionText)
-  * a correct answer (correctAnswer)
-  * an explanation (explanation) - dijelaskan dengan bahasa Indonesia
+   * a clear question prompt (questionText)
+   * a correct answer (correctAnswer)
+   * an explanation (explanation) — WAJIB ditulis dalam Bahasa Indonesia. DILARANG menggunakan bahasa asing (China, Jepang, Jerman, Inggris) untuk explanation.
   * difficulty level (${difficulty})
   * relevant skill tags (skillTags)
 - Questions should test real comprehension, not just surface-level recall.

packages/ai/src/repair.ts

@@ -144,6 +144,10 @@ function ensureSkillTags(q: GenericQuestion): string[] {
   return ["comprehension"];
 }
 
+function hasCJK(text: string): boolean {
+  return /[\u4E00-\u9FFF\u3400-\u4DBF\u3040-\u309F\u30A0-\u30FF\uAC00-\uD7AF]/.test(text);
+}
+
 function ensureExplanation(q: GenericQuestion): string {
   if (q.explanation && q.explanation.trim().length > 0) {
     return q.explanation.trim();
@@ -204,9 +208,13 @@ export function repairQuestion(
     notes.push("questionText too short, used fallback");
     wasRepaired = true;
   }
-  if (!r.explanation || String(r.explanation).trim().length === 0) {
+  const explanationText = String(r.explanation ?? "");
+  if (explanationText.trim().length === 0) {
     notes.push("explanation missing, used fallback");
     wasRepaired = true;
+  } else if (hasCJK(explanationText)) {
+    notes.push("explanation contains CJK characters (should be Bahasa Indonesia), marked for regeneration");
+    wasRepaired = true;
   }
   if (!Array.isArray(r.skillTags) || r.skillTags.length === 0) {
     notes.push("skillTags missing, used fallback");

packages/api/src/routers/attempt.ts

@@ -46,11 +46,72 @@ function normalizeAnswer(format: string, userAnswer: string, correctAnswer: stri
   }
 }
 
+// ── Simple in-memory rate limiter ──
+const rateLimitMap = new Map<string, number>();
+let rateLimitCleanup: ReturnType<typeof setInterval> | null = null;
+
+function startRateLimitCleanup() {
+  if (rateLimitCleanup) return;
+  rateLimitCleanup = setInterval(() => {
+    const cutoff = Date.now() - 60_000;
+    for (const [key, time] of rateLimitMap) {
+      if (time < cutoff) rateLimitMap.delete(key);
+    }
+  }, 60_000);
+}
+
+function checkRateLimit(key: string, windowMs: number) {
+  startRateLimitCleanup();
+  const now = Date.now();
+  const last = rateLimitMap.get(key) ?? 0;
+  if (now - last < windowMs) {
+    throwBadRequest("Terlalu banyak permintaan. Coba lagi nanti.");
+  }
+  rateLimitMap.set(key, now);
+}
+
 export const attemptRouter = router({
   start: protectedProcedure
     .input(z.object({ packageId: z.string().uuid() }))
     .mutation(async ({ ctx, input }) => {
       const userId = ctx.session.user.id;
+      checkRateLimit(`start:${userId}`, 3000);
+
+      // Check for existing in-progress attempt
+      const [activeAttempt] = await db
+        .select({ id: testAttempt.id })
+        .from(testAttempt)
+        .where(
+          and(
+            eq(testAttempt.userId, userId),
+            eq(testAttempt.packageId, input.packageId),
+            eq(testAttempt.status, "in_progress"),
+          ),
+        )
+        .limit(1);
+      if (activeAttempt) {
+        throwBadRequest("Kamu masih punya latihan yang sedang berjalan untuk paket ini");
+      }
+
+      // Check cooldown (10 detik setelah selesai)
+      const [recentAttempt] = await db
+        .select({ finishedAt: testAttempt.finishedAt })
+        .from(testAttempt)
+        .where(
+          and(
+            eq(testAttempt.userId, userId),
+            eq(testAttempt.packageId, input.packageId),
+            eq(testAttempt.status, "completed"),
+          ),
+        )
+        .orderBy(desc(testAttempt.finishedAt))
+        .limit(1);
+      if (recentAttempt?.finishedAt) {
+        const elapsed = Date.now() - new Date(recentAttempt.finishedAt).getTime();
+        if (elapsed < 10_000) {
+          throwBadRequest("Tunggu 10 detik sebelum memulai latihan ulang");
+        }
+      }
 
       const [pkg] = await db
         .select()
@@ -242,6 +303,7 @@ export const attemptRouter = router({
     )
     .mutation(async ({ ctx, input }) => {
       const userId = ctx.session.user.id;
+      checkRateLimit(`submit:${userId}`, 500);
 
       const [attempt] = await db
         .select()
@@ -300,6 +362,7 @@ export const attemptRouter = router({
     .input(z.object({ attemptId: z.string().uuid() }))
     .mutation(async ({ ctx, input }) => {
       const userId = ctx.session.user.id;
+      checkRateLimit(`finish:${userId}`, 3000);
 
       const [attempt] = await db
         .select()
@@ -311,6 +374,14 @@ export const attemptRouter = router({
       if (attempt.userId !== userId) throwForbidden();
       if (attempt.status !== "in_progress") throwBadRequest("Attempt already finished");
 
+      // Timer validation: must have spent at least 5 seconds
+      if (attempt.startedAt) {
+        const elapsedSec = Math.round((Date.now() - new Date(attempt.startedAt).getTime()) / 1000);
+        if (elapsedSec < 5) {
+          throwBadRequest("Latihan terlalu cepat. Harap kerjakan soal dengan benar.");
+        }
+      }
+
       const dbSections = await db
         .select()
         .from(sectionResult)

packages/api/src/routers/combo.ts

@@ -186,12 +186,18 @@ export const comboRouter = router({
         }
       }
 
+      const isOwner = combo.creatorUserId === userId;
+
       const sectionsWithQuestions = sections.map((section) => ({
         ...section,
         questions: sectionQuestions
           .filter((sq) => sq.sectionId === section.sourceSectionId)
           .sort((a, b) => a.orderIndex - b.orderIndex)
-          .map((sq) => sq.question),
+          .map((sq) => {
+            if (isOwner) return sq.question;
+            const { correctAnswer, explanation, ...rest } = sq.question;
+            return rest;
+          }),
       }));
 
       return { ...combo, sections: sectionsWithQuestions };

packages/api/src/routers/package.ts

@@ -219,12 +219,18 @@ export const packageRouter = router({
         }
       }
 
+      const isOwner = pkg.creatorUserId === userId;
+
       const sectionsWithQuestions = sections.map((section) => ({
         ...section,
         questions: sectionQuestions
           .filter((sq) => sq.sectionId === section.id && sq.question != null)
           .sort((a, b) => a.orderIndex - b.orderIndex)
-          .map((sq) => sq.question),
+          .map((sq) => {
+            if (isOwner) return sq.question;
+            const { correctAnswer, explanation, ...rest } = sq.question;
+            return rest;
+          }),
       }));
 
       return { ...pkg, sections: sectionsWithQuestions };

packages/api/src/routers/question.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { eq, and, desc, sql, like, or } from "drizzle-orm";
+import { eq, and, desc, sql, like, or, inArray } from "drizzle-orm";
 import { router, protectedProcedure, publicProcedure } from "../index";
 import { db } from "@labas/db";
 import { question, examType, sectionType, user } from "@labas/db";
@@ -46,6 +46,11 @@ function buildSearchCondition(term: string) {
   );
 }
 
+function stripAnswer<T extends { correctAnswer?: string; explanation?: string | null }>(row: T) {
+  const { correctAnswer, explanation, ...rest } = row;
+  return rest as Omit<T, "correctAnswer" | "explanation">;
+}
+
 export const questionRouter = router({
   list: publicProcedure
     .input(
@@ -108,7 +113,7 @@ export const questionRouter = router({
         .from(question)
         .where(where);
 
-      return { questions: rows, total: Number(countResult?.count ?? 0) };
+      return { questions: rows.map(stripAnswer), total: Number(countResult?.count ?? 0) };
     }),
 
   myQuestions: protectedProcedure
@@ -186,7 +191,8 @@ export const questionRouter = router({
       if (!row) return null;
       if (!row.isPublic && row.creatorUserId !== userId) return null;
 
-      return row;
+      if (row.creatorUserId === userId) return row;
+      return stripAnswer(row);
     }),
 
   create: protectedProcedure
@@ -280,4 +286,24 @@ export const questionRouter = router({
       await db.delete(question).where(eq(question.id, input.id));
       return { success: true };
     }),
+
+  bulkPublish: protectedProcedure
+    .input(z.object({ ids: z.array(z.string().uuid()) }))
+    .mutation(async ({ ctx, input }) => {
+      const rows = await db
+        .select({ id: question.id, creatorUserId: question.creatorUserId, isPublic: question.isPublic })
+        .from(question)
+        .where(inArray(question.id, input.ids));
+
+      for (const row of rows) {
+        assertOwnership(row, ctx.session.user.id, "Question");
+      }
+
+      await db
+        .update(question)
+        .set({ isPublic: true })
+        .where(inArray(question.id, input.ids));
+
+      return { success: true, updated: rows.length };
+    }),
 });