Enhance application by adding new routes for jobs and attempt details, updating sidebar navigation, and implementing combo package builder functionality. Also, include new dependencies in the lock files and modify API key structure to support maxTokens.

apps/server/src/index.ts

@@ -7,6 +7,9 @@ import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { logger } from "hono/logger";
 
+// Side-effect: start background job worker
+import "@labas/api/queue";
+
 const app = new Hono();
 
 app.use(logger());

apps/web/src/components/sidebar.tsx

@@ -5,9 +5,10 @@ import { useSidebar } from "@/hooks/use-sidebar";
 const navItems = [
   { to: "/", label: "Dashboard", icon: "dashboard" },
   { to: "/generate", label: "AI Lab", icon: "auto_awesome" },
+  { to: "/jobs", label: "Jobs", icon: "schedule" },
   { to: "/bank", label: "Bank Soal", icon: "database" },
   { to: "/packages", label: "Paket", icon: "folder" },
-  { to: "/builder", label: "Builder", icon: "construction" },
+  { to: "/builder/combo", label: "Combo", icon: "join_inner" },
   { to: "/analytics", label: "Analytics", icon: "analytics" },
 ];
 
@@ -46,7 +47,7 @@ export function Sidebar() {
 
         <nav className="flex-1 space-y-1 w-full">
           {navItems.map((item) => {
-            const isActive = location.pathname === item.to || location.pathname.startsWith(`${item.to}/`);
+            const isActive = location.pathname === item.to || (location.pathname.startsWith(`${item.to}/`) && item.to !== "/builder");
             return (
               <Link
                 key={item.to}

apps/web/src/hooks/use-api-key.ts

@@ -8,6 +8,7 @@ export interface StoredApiKey {
   baseUrl: string;
   apiKey: string;
   modelName: string;
+  maxTokens?: number;
 }
 
 export function useApiKey() {

apps/web/src/routeTree.gen.ts

@@ -12,12 +12,14 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as PackagesRouteImport } from './routes/packages'
 import { Route as LoginRouteImport } from './routes/login'
+import { Route as JobsRouteImport } from './routes/jobs'
 import { Route as GenerateRouteImport } from './routes/generate'
-import { Route as BuilderRouteImport } from './routes/builder'
 import { Route as BankRouteImport } from './routes/bank'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as PackageIdRouteImport } from './routes/package.$id'
-import { Route as BankIdRouteImport } from './routes/bank.$id'
+import { Route as BuilderComboRouteImport } from './routes/builder.combo'
+import { Route as AttemptIdRouteImport } from './routes/attempt.$id'
+import { Route as PackageIdTakeRouteImport } from './routes/package.$id.take'
 
 const SettingsRoute = SettingsRouteImport.update({
   id: '/settings',
@@ -34,16 +36,16 @@ const LoginRoute = LoginRouteImport.update({
   path: '/login',
   getParentRoute: () => rootRouteImport,
 } as any)
+const JobsRoute = JobsRouteImport.update({
+  id: '/jobs',
+  path: '/jobs',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const GenerateRoute = GenerateRouteImport.update({
   id: '/generate',
   path: '/generate',
   getParentRoute: () => rootRouteImport,
 } as any)
-const BuilderRoute = BuilderRouteImport.update({
-  id: '/builder',
-  path: '/builder',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const BankRoute = BankRouteImport.update({
   id: '/bank',
   path: '/bank',
@@ -59,91 +61,114 @@ const PackageIdRoute = PackageIdRouteImport.update({
   path: '/package/$id',
   getParentRoute: () => rootRouteImport,
 } as any)
-const BankIdRoute = BankIdRouteImport.update({
-  id: '/$id',
-  path: '/$id',
-  getParentRoute: () => BankRoute,
+const BuilderComboRoute = BuilderComboRouteImport.update({
+  id: '/combo',
+  path: '/combo',
+  getParentRoute: () => BuilderRoute,
+} as any)
+const AttemptIdRoute = AttemptIdRouteImport.update({
+  id: '/attempt/$id',
+  path: '/attempt/$id',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const PackageIdTakeRoute = PackageIdTakeRouteImport.update({
+  id: '/take',
+  path: '/take',
+  getParentRoute: () => PackageIdRoute,
 } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/bank': typeof BankRouteWithChildren
-  '/builder': typeof BuilderRoute
+  '/bank': typeof BankRoute
   '/generate': typeof GenerateRoute
+  '/jobs': typeof JobsRoute
   '/login': typeof LoginRoute
   '/packages': typeof PackagesRoute
   '/settings': typeof SettingsRoute
-  '/bank/$id': typeof BankIdRoute
-  '/package/$id': typeof PackageIdRoute
+  '/attempt/$id': typeof AttemptIdRoute
+  '/builder/combo': typeof BuilderComboRoute
+  '/package/$id': typeof PackageIdRouteWithChildren
+  '/package/$id/take': typeof PackageIdTakeRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/bank': typeof BankRouteWithChildren
-  '/builder': typeof BuilderRoute
+  '/bank': typeof BankRoute
   '/generate': typeof GenerateRoute
+  '/jobs': typeof JobsRoute
   '/login': typeof LoginRoute
   '/packages': typeof PackagesRoute
   '/settings': typeof SettingsRoute
-  '/bank/$id': typeof BankIdRoute
-  '/package/$id': typeof PackageIdRoute
+  '/attempt/$id': typeof AttemptIdRoute
+  '/builder/combo': typeof BuilderComboRoute
+  '/package/$id': typeof PackageIdRouteWithChildren
+  '/package/$id/take': typeof PackageIdTakeRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
-  '/bank': typeof BankRouteWithChildren
-  '/builder': typeof BuilderRoute
+  '/bank': typeof BankRoute
   '/generate': typeof GenerateRoute
+  '/jobs': typeof JobsRoute
   '/login': typeof LoginRoute
   '/packages': typeof PackagesRoute
   '/settings': typeof SettingsRoute
-  '/bank/$id': typeof BankIdRoute
-  '/package/$id': typeof PackageIdRoute
+  '/attempt/$id': typeof AttemptIdRoute
+  '/builder/combo': typeof BuilderComboRoute
+  '/package/$id': typeof PackageIdRouteWithChildren
+  '/package/$id/take': typeof PackageIdTakeRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
     | '/bank'
-    | '/builder'
     | '/generate'
+    | '/jobs'
     | '/login'
     | '/packages'
     | '/settings'
-    | '/bank/$id'
+    | '/attempt/$id'
+    | '/builder/combo'
     | '/package/$id'
+    | '/package/$id/take'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/bank'
-    | '/builder'
     | '/generate'
+    | '/jobs'
     | '/login'
     | '/packages'
     | '/settings'
-    | '/bank/$id'
+    | '/attempt/$id'
+    | '/builder/combo'
     | '/package/$id'
+    | '/package/$id/take'
   id:
     | '__root__'
     | '/'
     | '/bank'
-    | '/builder'
     | '/generate'
+    | '/jobs'
     | '/login'
     | '/packages'
     | '/settings'
-    | '/bank/$id'
+    | '/attempt/$id'
+    | '/builder/combo'
     | '/package/$id'
+    | '/package/$id/take'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  BankRoute: typeof BankRouteWithChildren
-  BuilderRoute: typeof BuilderRoute
+  BankRoute: typeof BankRoute
   GenerateRoute: typeof GenerateRoute
+  JobsRoute: typeof JobsRoute
   LoginRoute: typeof LoginRoute
   PackagesRoute: typeof PackagesRoute
   SettingsRoute: typeof SettingsRoute
-  PackageIdRoute: typeof PackageIdRoute
+  AttemptIdRoute: typeof AttemptIdRoute
+  PackageIdRoute: typeof PackageIdRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
@@ -169,6 +194,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/jobs': {
+      id: '/jobs'
+      path: '/jobs'
+      fullPath: '/jobs'
+      preLoaderRoute: typeof JobsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/generate': {
       id: '/generate'
       path: '/generate'
@@ -176,13 +208,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof GenerateRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/builder': {
-      id: '/builder'
-      path: '/builder'
-      fullPath: '/builder'
-      preLoaderRoute: typeof BuilderRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/bank': {
       id: '/bank'
       path: '/bank'
@@ -204,35 +229,52 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PackageIdRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/bank/$id': {
-      id: '/bank/$id'
-      path: '/$id'
-      fullPath: '/bank/$id'
-      preLoaderRoute: typeof BankIdRouteImport
-      parentRoute: typeof BankRoute
+    '/builder/combo': {
+      id: '/builder/combo'
+      path: '/combo'
+      fullPath: '/builder/combo'
+      preLoaderRoute: typeof BuilderComboRouteImport
+      parentRoute: typeof BuilderRoute
+    }
+    '/attempt/$id': {
+      id: '/attempt/$id'
+      path: '/attempt/$id'
+      fullPath: '/attempt/$id'
+      preLoaderRoute: typeof AttemptIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/package/$id/take': {
+      id: '/package/$id/take'
+      path: '/take'
+      fullPath: '/package/$id/take'
+      preLoaderRoute: typeof PackageIdTakeRouteImport
+      parentRoute: typeof PackageIdRoute
     }
   }
 }
 
-interface BankRouteChildren {
-  BankIdRoute: typeof BankIdRoute
+interface PackageIdRouteChildren {
+  PackageIdTakeRoute: typeof PackageIdTakeRoute
 }
 
-const BankRouteChildren: BankRouteChildren = {
-  BankIdRoute: BankIdRoute,
+const PackageIdRouteChildren: PackageIdRouteChildren = {
+  PackageIdTakeRoute: PackageIdTakeRoute,
 }
 
-const BankRouteWithChildren = BankRoute._addFileChildren(BankRouteChildren)
+const PackageIdRouteWithChildren = PackageIdRoute._addFileChildren(
+  PackageIdRouteChildren,
+)
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  BankRoute: BankRouteWithChildren,
-  BuilderRoute: BuilderRoute,
+  BankRoute: BankRoute,
   GenerateRoute: GenerateRoute,
+  JobsRoute: JobsRoute,
   LoginRoute: LoginRoute,
   PackagesRoute: PackagesRoute,
   SettingsRoute: SettingsRoute,
-  PackageIdRoute: PackageIdRoute,
+  AttemptIdRoute: AttemptIdRoute,
+  PackageIdRoute: PackageIdRouteWithChildren,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

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

@@ -0,0 +1,265 @@
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent } from "@labas/ui/components/card";
+
+export const Route = createFileRoute("/attempt/$id")({
+  component: AttemptResultComponent,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
+});
+
+function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
+  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
+}
+
+function formatTime(totalSeconds: number) {
+  const m = Math.floor(totalSeconds / 60);
+  const s = totalSeconds % 60;
+  return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+}
+
+function AttemptResultComponent() {
+  const { id: attemptId } = Route.useParams();
+  const { data: session } = authClient.useSession();
+
+  const attemptQuery = useQuery(trpc.attempt.getById.queryOptions({ id: attemptId }));
+  const attempt = attemptQuery.data;
+
+  if (attemptQuery.isLoading) {
+    return (
+      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
+        <div className="h-8 w-48 bg-[var(--oat-light)] animate-pulse rounded mb-4" />
+        <div className="h-64 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+      </div>
+    );
+  }
+
+  if (!attempt) {
+    return (
+      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
+        <div className="text-center py-20">
+          <MaterialIcon name="error_outline" className="text-6xl text-[var(--warm-silver)] mx-auto mb-4" />
+          <p className="text-lg text-[var(--warm-charcoal)] font-semibold">Hasil tidak ditemukan</p>
+          <Link to="/packages" className="text-[var(--matcha-600)] font-semibold mt-4 inline-block">
+            Kembali ke Paket
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const percentage = attempt.maxScore && attempt.maxScore > 0
+    ? Math.round(((attempt.totalScore ?? 0) / attempt.maxScore) * 100)
+    : 0;
+
+  const durationSec = attempt.finishedAt && attempt.startedAt
+    ? Math.round((new Date(attempt.finishedAt).getTime() - new Date(attempt.startedAt).getTime()) / 1000)
+    : 0;
+
+  return (
+    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-6">
+        <Link to="/packages" className="hover:text-[var(--clay-black)] transition-colors">
+          Paket
+        </Link>
+        <MaterialIcon name="chevron_right" className="text-xs" />
+        <span className="text-[var(--clay-black)] font-medium">Hasil Latihan</span>
+      </div>
+
+      {/* Score Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight mb-4">
+          Hasil Latihan
+        </h1>
+
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] overflow-hidden">
+          <CardContent className="p-6">
+            <div className="flex flex-col md:flex-row items-center gap-6">
+              {/* Big Score Circle */}
+              <div className="w-32 h-32 rounded-full border-4 border-[var(--matcha-500)] flex flex-col items-center justify-center bg-[var(--matcha-100)]">
+                <span className="text-3xl font-headline font-extrabold text-[var(--matcha-800)]">
+                  {percentage}%
+                </span>
+                <span className="text-xs text-[var(--matcha-700)] font-medium">
+                  {attempt.totalScore ?? 0}/{attempt.maxScore ?? 0}
+                </span>
+              </div>
+
+              <div className="flex-1 space-y-2 text-center md:text-left">
+                <p className="text-lg font-semibold text-[var(--clay-black)]">
+                  {percentage >= 80
+                    ? "Sempurna!"
+                    : percentage >= 60
+                      ? "Bagus, terus berlatih!"
+                      : percentage >= 40
+                        ? "Perlu latihan lebih"
+                        : "Jangan menyerah, coba lagi!"}
+                </p>
+                <div className="flex flex-wrap gap-4 text-sm text-[var(--warm-charcoal)] justify-center md:justify-start">
+                  <span className="flex items-center gap-1">
+                    <MaterialIcon name="timer" className="text-sm" />
+                    {formatTime(durationSec)}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <MaterialIcon name="quiz" className="text-sm" />
+                    {attempt.maxScore ?? 0} soal
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <MaterialIcon name="check_circle" className="text-sm text-[var(--matcha-600)]" />
+                    {attempt.totalScore ?? 0} benar
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <MaterialIcon name="cancel" className="text-sm text-[var(--pomegranate-500)]" />
+                    {(attempt.maxScore ?? 0) - (attempt.totalScore ?? 0)} salah
+                  </span>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Section Breakdown */}
+      <div className="mb-8">
+        <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">Per Section</h2>
+        <div className="space-y-3">
+          {attempt.sections.map((sec: any) => {
+            const secPct = sec.maxScore && sec.maxScore > 0
+              ? Math.round(((sec.score ?? 0) / sec.maxScore) * 100)
+              : 0;
+            return (
+              <Card key={sec.id} className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+                <CardContent className="p-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="font-semibold text-[var(--clay-black)]">{sec.title}</p>
+                      <p className="text-sm text-[var(--warm-charcoal)]">
+                        {sec.score ?? 0}/{sec.maxScore ?? 0} benar
+                      </p>
+                    </div>
+                    <div className="w-16 h-16 rounded-full border-2 border-[var(--matcha-400)] flex items-center justify-center bg-[var(--matcha-50)]">
+                      <span className="text-lg font-bold text-[var(--matcha-700)]">{secPct}%</span>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Question Review */}
+      <div className="mb-8">
+        <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">Pembahasan Soal</h2>
+        <div className="space-y-4">
+          {attempt.sections.map((sec: any, secIdx: number) =>
+            sec.questions.map((q: any, qIdx: number) => {
+              const ans = sec.answers.find((a: any) => a.questionId === q.id);
+              const isCorrect = ans?.isCorrect;
+              const userAnswer = ans?.userAnswer ?? "Tidak dijawab";
+
+              return (
+                <Card
+                  key={q.id}
+                  className={`clay-shadow bg-[var(--pure-white)] border-2 rounded-[var(--radius-xl)] ${
+                    isCorrect === true
+                      ? "border-[var(--matcha-400)]"
+                      : isCorrect === false
+                        ? "border-[var(--pomegranate-400)]"
+                        : "border-[var(--oat-border)]"
+                  }`}
+                >
+                  <CardContent className="p-5">
+                    <div className="flex items-start gap-3 mb-3">
+                      <span
+                        className={`w-8 h-8 rounded-full text-xs flex items-center justify-center font-bold shrink-0 ${
+                          isCorrect === true
+                            ? "bg-[var(--matcha-600)] text-[var(--pure-white)]"
+                            : isCorrect === false
+                              ? "bg-[var(--pomegranate-500)] text-[var(--pure-white)]"
+                              : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
+                        }`}
+                      >
+                        {secIdx + 1}.{qIdx + 1}
+                      </span>
+                      <div className="flex-1">
+                        <p className="text-[var(--clay-black)] font-medium">{q.questionText}</p>
+                        <div className="flex gap-2 mt-1">
+                          <span className="text-xs px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
+                            {q.format.replace(/_/g, " ")}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="pl-11 space-y-2">
+                      <div className="flex flex-wrap gap-4 text-sm">
+                        <div>
+                          <span className="text-[var(--warm-silver)]">Jawaban Anda:</span>{" "}
+                          <span
+                            className={`font-semibold ${
+                              isCorrect === true
+                                ? "text-[var(--matcha-700)]"
+                                : isCorrect === false
+                                  ? "text-[var(--pomegranate-600)]"
+                                  : "text-[var(--warm-charcoal)]"
+                            }`}
+                          >
+                            {userAnswer}
+                          </span>
+                        </div>
+                        {(isCorrect === false || isCorrect === null) && (
+                          <div>
+                            <span className="text-[var(--warm-silver)]">Jawaban Benar:</span>{" "}
+                            <span className="font-semibold text-[var(--matcha-700)]">
+                              {q.correctAnswer}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+
+                      {q.explanation && (
+                        <div className="bg-[var(--oat-light)] rounded-[var(--radius-lg)] p-3 text-sm text-[var(--warm-charcoal)]">
+                          <span className="font-semibold text-[var(--clay-black)]">Penjelasan:</span>{" "}
+                          {q.explanation}
+                        </div>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            }),
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex gap-3">
+        <Link to="/package/$id/take" params={{ id: attempt.packageId! }}>
+          <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
+            <MaterialIcon name="replay" />
+            <span className="ml-2">Coba Lagi</span>
+          </Button>
+        </Link>
+        <Link to="/packages">
+          <Button
+            variant="outline"
+            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+          >
+            <MaterialIcon name="arrow_back" />
+            <span className="ml-2">Kembali ke Paket</span>
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -1,230 +0,0 @@
-import { useState } from "react";
-import { useQuery, useMutation } from "@tanstack/react-query";
-import { createFileRoute, redirect, Link } from "@tanstack/react-router";
-import { authClient } from "@/lib/auth-client";
-import { trpc } from "@/utils/trpc";
-import { Button } from "@labas/ui/components/button";
-import { Card, CardContent } from "@labas/ui/components/card";
-
-export const Route = createFileRoute("/bank/$id")({
-  component: QuestionDetailComponent,
-  beforeLoad: async () => {
-    const session = await authClient.getSession();
-    if (!session.data) {
-      redirect({ to: "/login", throw: true });
-    }
-    return { session };
-  },
-});
-
-function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
-  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
-}
-
-function formatLabel(fmt: string) {
-  return fmt.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
-}
-
-function StarRating({
-  value,
-  onChange,
-  readonly = false,
-}: {
-  value: number | null;
-  onChange?: (v: number) => void;
-  readonly?: boolean;
-}) {
-  const [hover, setHover] = useState<number | null>(null);
-  return (
-    <div className="flex gap-1">
-      {[1, 2, 3, 4, 5].map((star) => (
-        <button
-          key={star}
-          type="button"
-          disabled={readonly}
-          onClick={() => onChange?.(star)}
-          onMouseEnter={() => !readonly && setHover(star)}
-          onMouseLeave={() => setHover(null)}
-          className={`transition-transform ${readonly ? "cursor-default" : "cursor-pointer hover:scale-110"}`}
-        >
-          <MaterialIcon
-            name={(hover ?? value ?? 0) >= star ? "star" : "star_outline"}
-            className={`text-xl ${(hover ?? value ?? 0) >= star ? "text-[var(--lemon-500)]" : "text-[var(--oat-border)]"}`}
-          />
-        </button>
-      ))}
-    </div>
-  );
-}
-
-function QuestionDetailComponent() {
-  const { id } = Route.useParams();
-  const { data: session } = authClient.useSession();
-
-  const questionQuery = useQuery(trpc.question.getById.queryOptions({ id }));
-  const ratingQuery = useQuery(trpc.rating.getQuestionRating.queryOptions({ questionId: id }));
-
-  const rateMutation = useMutation({
-    ...trpc.rating.rateQuestion.mutationOptions(),
-    onSuccess: () => {
-      ratingQuery.refetch();
-      questionQuery.refetch();
-    },
-  });
-
-  const q = questionQuery.data;
-
-  if (questionQuery.isLoading) {
-    return (
-      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
-        <div className="h-8 w-48 bg-[var(--oat-light)] animate-pulse rounded mb-4" />
-        <div className="h-64 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
-      </div>
-    );
-  }
-
-  if (!q) {
-    return (
-      <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
-        <div className="text-center py-20">
-          <MaterialIcon name="error_outline" className="text-6xl text-[var(--warm-silver)] mx-auto mb-4" />
-          <p className="text-lg text-[var(--warm-charcoal)] font-semibold">Soal tidak ditemukan</p>
-          <Link to="/bank" className="text-[var(--matcha-600)] font-semibold mt-4 inline-block">
-            Kembali ke Bank Soal
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
-  const isOwner = q.creatorUserId === session?.user.id;
-
-  return (
-    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-6">
-        <Link to="/bank" className="hover:text-[var(--clay-black)] transition-colors">Bank Soal</Link>
-        <MaterialIcon name="chevron_right" className="text-xs" />
-        <span className="text-[var(--clay-black)] font-medium">Detail Soal</span>
-      </div>
-
-      {/* Header */}
-      <div className="flex flex-wrap items-start justify-between gap-4 mb-6">
-        <div className="flex gap-2 flex-wrap">
-          <span className="px-3 py-1.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
-            {q.examTypeName}
-          </span>
-          <span className="px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
-            {q.sectionTypeName}
-          </span>
-          <span className="px-3 py-1.5 rounded-full bg-[var(--lemon-400)]/30 text-[var(--lemon-800)] text-sm font-semibold">
-            {formatLabel(q.format)}
-          </span>
-          <span className="px-3 py-1.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-sm font-semibold">
-            Level {q.difficulty}
-          </span>
-        </div>
-        <div className="flex items-center gap-3">
-          <StarRating
-            value={ratingQuery.data?.myRating ?? null}
-            onChange={(score) => rateMutation.mutate({ questionId: id, score })}
-          />
-          {ratingQuery.data?.avgRating && (
-            <span className="text-sm text-[var(--warm-charcoal)]">
-              {ratingQuery.data.avgRating}/5
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Passage */}
-      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
-        <CardContent className="p-6">
-          <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-4 flex items-center gap-2">
-            <MaterialIcon name="menu_book" />
-            Teks Bacaan
-          </h2>
-          <div className="text-[var(--clay-black)] leading-relaxed whitespace-pre-wrap">
-            {q.passageText}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Question */}
-      <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
-        <CardContent className="p-6">
-          <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-4 flex items-center gap-2">
-            <MaterialIcon name="help_outline" />
-            Pertanyaan
-          </h2>
-          <p className="text-lg text-[var(--clay-black)] font-medium mb-4">{q.questionText}</p>
-
-          {!!q.options && Array.isArray(q.options as unknown[]) && (q.options as unknown[]).length > 0 && (
-            <div className="space-y-2 mt-4">
-              {(q.options as Array<{ key: string; text: string }>).map((opt) => (
-                <div
-                  key={opt.key}
-                  className={`flex items-center p-4 rounded-[var(--radius-lg)] border-2 transition-all ${
-                    opt.key === q.correctAnswer
-                      ? "border-[var(--matcha-600)] bg-[var(--matcha-300)]/20"
-                      : "border-[var(--oat-border)] bg-[var(--oat-light)]"
-                  }`}
-                >
-                  <span className="w-6 h-6 rounded-full border-2 border-[var(--oat-border)] flex items-center justify-center mr-3 text-xs font-bold text-[var(--warm-charcoal)]">
-                    {opt.key}
-                  </span>
-                  <span className={`${opt.key === q.correctAnswer ? "font-semibold text-[var(--matcha-800)]" : "text-[var(--clay-black)]"}`}>
-                    {opt.text}
-                  </span>
-                  {opt.key === q.correctAnswer && (
-                    <span className="ml-auto text-xs font-bold text-[var(--matcha-800)] bg-[var(--matcha-300)] px-2 py-1 rounded-full">
-                      Benar
-                    </span>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-
-          {!q.options && (
-            <div className="p-4 rounded-[var(--radius-md)] border-2 border-[var(--matcha-300)] bg-[var(--matcha-300)]/20 mt-4">
-              <span className="font-semibold text-[var(--matcha-800)]">Jawaban: </span>
-              <span className="text-[var(--matcha-800)]">{q.correctAnswer}</span>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Explanation */}
-      {q.explanation && (
-        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
-          <CardContent className="p-6">
-            <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-4 flex items-center gap-2">
-              <MaterialIcon name="lightbulb" />
-              Penjelasan
-            </h2>
-            <p className="text-[var(--warm-charcoal)] leading-relaxed">{q.explanation}</p>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Meta */}
-      <div className="flex flex-wrap items-center justify-between gap-4 text-sm text-[var(--warm-charcoal)]">
-        <div className="flex gap-4">
-          <span>Dibuat oleh {q.creatorName ?? "Anonim"}</span>
-          <span>•</span>
-          <span>{q.usageCount}x digunakan</span>
-          <span>•</span>
-          <span className="capitalize">{q.source}</span>
-        </div>
-        {isOwner && (
-          <div className="flex gap-2">
-            <span className={`px-2 py-1 rounded-full text-xs font-semibold ${q.isPublic ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]" : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"}`}>
-              {q.isPublic ? "Publik" : "Privat"}
-            </span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

apps/web/src/routes/bank.tsx

@@ -1,6 +1,6 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { useState, useMemo } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { createFileRoute, redirect, Link, useNavigate } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { Input } from "@labas/ui/components/input";
@@ -71,13 +71,564 @@ function formatLabel(fmt: string) {
   return fmt.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
 }
 
+function StarRating({ value }: { value: number | null }) {
+  return (
+    <div className="flex gap-1">
+      {[1, 2, 3, 4, 5].map((star) => (
+        <MaterialIcon
+          key={star}
+          name={(value ?? 0) >= star ? "star" : "star_outline"}
+          className={`text-xl ${(value ?? 0) >= star ? "text-[var(--lemon-500)]" : "text-[var(--oat-border)]"}`}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ── Create Package Modal ────────────────────────────────────
+
+function CreatePackageModal({
+  selectedCount,
+  onClose,
+  onCreate,
+  isPending,
+  examTypeName,
+  lowCount,
+}: {
+  selectedCount: number;
+  onClose: () => void;
+  onCreate: (data: { title: string; description: string; isPublic: boolean; examTypeId: string }) => void;
+  isPending: boolean;
+  examTypeName: string;
+  lowCount: boolean;
+}) {
+  const dateStr = new Date().toLocaleDateString("id-ID", { day: "numeric", month: "short" });
+  const [title, setTitle] = useState(`${examTypeName} Bundle — ${selectedCount} Soal`);
+  const [description, setDescription] = useState("");
+  const [isPublic, setIsPublic] = useState(false);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="bg-[var(--warm-cream)] w-full max-w-lg rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">
+            Buat Paket Soal
+          </h2>
+          <button
+            onClick={onClose}
+            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
+          >
+            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2 mb-4">
+          <span className="px-3 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
+            {examTypeName}
+          </span>
+          <span className="text-sm text-[var(--warm-charcoal)]">
+            {selectedCount} soal
+          </span>
+        </div>
+
+        {lowCount && (
+          <div className="mb-4 p-3 rounded-[var(--radius-md)] bg-[var(--lemon-400)]/20 border-2 border-[var(--lemon-500)]/30 text-sm text-[var(--lemon-800)] flex items-start gap-2">
+            <MaterialIcon name="info" className="text-sm mt-0.5 shrink-0" />
+            <span>
+              Soal yang tersedia sedikit ({selectedCount} soal). Paket tetap bisa dibuat, tapi disarankan untuk menambah soal.
+            </span>
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Judul Paket
+            </label>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="e.g. IELTS Reading Bundle"
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Deskripsi
+            </label>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Deskripsi singkat..."
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
+            />
+          </div>
+
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={isPublic}
+              onChange={(e) => setIsPublic(e.target.checked)}
+              className="w-4 h-4 rounded border-[var(--oat-border)]"
+            />
+            <span className="text-sm text-[var(--warm-charcoal)]">
+              Publikasikan ke Bank Soal
+            </span>
+          </label>
+        </div>
+
+        <div className="mt-6 flex gap-3">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            className="flex-1 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+          >
+            Batal
+          </Button>
+          <Button
+            onClick={() => onCreate({ title, description, isPublic, examTypeId: "" })}
+            disabled={!title || isPending}
+            className="flex-1 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
+          >
+            {isPending ? "Membuat..." : "Buat Paket"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Auto Bundle Modal ───────────────────────────────────────
+
+function AutoBundleModal({
+  availableCount,
+  examTypeId,
+  examTypeName,
+  sectionTypeId,
+  sectionTypeName,
+  onClose,
+  onCreate,
+  isPending,
+}: {
+  availableCount: number;
+  examTypeId: string;
+  examTypeName: string;
+  sectionTypeId: string;
+  sectionTypeName: string;
+  onClose: () => void;
+  onCreate: (data: {
+    title: string;
+    description: string;
+    isPublic: boolean;
+    examTypeId: string;
+    sectionTypeId: string;
+    count: number;
+    sortOrder: "random" | "difficulty";
+  }) => void;
+  isPending: boolean;
+}) {
+  const dateStr = new Date().toLocaleDateString("id-ID", { day: "numeric", month: "short" });
+  const [count, setCount] = useState(Math.min(availableCount, 10));
+  const [title, setTitle] = useState(`${examTypeName} ${sectionTypeName} Bundle — ${dateStr}`);
+  const [description, setDescription] = useState("");
+  const [isPublic, setIsPublic] = useState(false);
+  const [sortOrder, setSortOrder] = useState<"random" | "difficulty">("random");
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="bg-[var(--warm-cream)] w-full max-w-lg rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">
+            Auto Bundle
+          </h2>
+          <button
+            onClick={onClose}
+            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
+          >
+            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2 mb-4">
+          <span className="px-3 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
+            {examTypeName}
+          </span>
+          {sectionTypeName && (
+            <span className="px-3 py-1 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
+              {sectionTypeName}
+            </span>
+          )}
+          <span className="text-sm text-[var(--warm-charcoal)]">
+            {availableCount} soal tersedia
+          </span>
+        </div>
+
+        {availableCount < 5 && (
+          <div className="mb-4 p-3 rounded-[var(--radius-md)] bg-[var(--lemon-400)]/20 border-2 border-[var(--lemon-500)]/30 text-sm text-[var(--lemon-800)] flex items-start gap-2">
+            <MaterialIcon name="info" className="text-sm mt-0.5 shrink-0" />
+            <span>
+              Soal yang tersedia sedikit ({availableCount} soal). Paket tetap bisa dibuat, tapi disarankan untuk menambah soal.
+            </span>
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Judul Paket
+            </label>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="e.g. IELTS Reading Bundle"
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Deskripsi
+            </label>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Deskripsi singkat..."
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Jumlah Soal: {count}
+            </label>
+            <input
+              type="range"
+              min={1}
+              max={availableCount}
+              value={count}
+              onChange={(e) => setCount(Number(e.target.value))}
+              className="w-full h-2 bg-[var(--warm-silver)] rounded-full appearance-none cursor-pointer accent-[var(--clay-black)]"
+            />
+          </div>
+
+          <div>
+            <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
+              Urutan Soal
+            </label>
+            <div className="flex gap-2">
+              <button
+                onClick={() => setSortOrder("random")}
+                className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all ${
+                  sortOrder === "random"
+                    ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+                    : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
+                }`}
+              >
+                <MaterialIcon name="shuffle" className="text-sm mr-1" />
+                Acak
+              </button>
+              <button
+                onClick={() => setSortOrder("difficulty")}
+                className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all ${
+                  sortOrder === "difficulty"
+                    ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+                    : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
+                }`}
+              >
+                <MaterialIcon name="trending_up" className="text-sm mr-1" />
+                Difficulty
+              </button>
+            </div>
+          </div>
+
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={isPublic}
+              onChange={(e) => setIsPublic(e.target.checked)}
+              className="w-4 h-4 rounded border-[var(--oat-border)]"
+            />
+            <span className="text-sm text-[var(--warm-charcoal)]">
+              Publikasikan ke Bank Soal
+            </span>
+          </label>
+        </div>
+
+        <div className="mt-6 flex gap-3">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            className="flex-1 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+          >
+            Batal
+          </Button>
+          <Button
+            onClick={() => onCreate({
+              title,
+              description,
+              isPublic,
+              examTypeId,
+              sectionTypeId: sectionTypeId || "READING",
+              count,
+              sortOrder,
+            })}
+            disabled={!title || isPending || count < 1}
+            className="flex-1 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
+          >
+            {isPending ? "Membuat..." : "Buat Paket"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Question Detail Modal ───────────────────────────────────
+
+function QuestionDetailModal({
+  question,
+  onClose,
+  isSelected,
+  onToggleSelect,
+  isSelectable,
+}: {
+  question: any;
+  onClose: () => void;
+  isSelected: boolean;
+  onToggleSelect: () => void;
+  isSelectable: boolean;
+}) {
+  const { data: session } = authClient.useSession();
+  const isOwner = question.creatorUserId === session?.user.id;
+
+  const ratingQuery = useQuery(
+    trpc.rating.getQuestionRating.queryOptions({ questionId: question.id }),
+  );
+
+  const rateMutation = useMutation({
+    ...trpc.rating.rateQuestion.mutationOptions(),
+    onSuccess: () => ratingQuery.refetch(),
+  });
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="bg-[var(--warm-cream)] w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] clay-shadow p-6 md:p-8">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-6">
+          <div className="flex gap-2 flex-wrap">
+            <span className="px-3 py-1.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
+              {question.examTypeName}
+            </span>
+            <span className="px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
+              {question.sectionTypeName}
+            </span>
+            <span className="px-3 py-1.5 rounded-full bg-[var(--lemon-400)]/30 text-[var(--lemon-800)] text-sm font-semibold">
+              {formatLabel(question.format)}
+            </span>
+            <span className="px-3 py-1.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-sm font-semibold">
+              Level {question.difficulty}
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center transition-colors"
+          >
+            <MaterialIcon name="close" className="text-[var(--clay-black)]" />
+          </button>
+        </div>
+
+        {/* Passage */}
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
+          <CardContent className="p-6">
+            <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-4 flex items-center gap-2">
+              <MaterialIcon name="menu_book" />
+              Teks Bacaan
+            </h2>
+            <div className="text-[var(--clay-black)] leading-relaxed whitespace-pre-wrap text-sm">
+              {question.passageText}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Question */}
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
+          <CardContent className="p-6">
+            <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-4 flex items-center gap-2">
+              <MaterialIcon name="help_outline" />
+              Pertanyaan
+            </h2>
+            <p className="text-lg text-[var(--clay-black)] font-medium mb-4">
+              {question.questionText}
+            </p>
+
+            {!!question.options &&
+              Array.isArray(question.options as unknown[]) &&
+              (question.options as unknown[]).length > 0 && (
+                <div className="space-y-2 mt-4">
+                  {(question.options as Array<{ key: string; text: string }>).map(
+                    (opt) => (
+                      <div
+                        key={opt.key}
+                        className="flex items-center p-4 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)]"
+                      >
+                        <span className="w-6 h-6 rounded-full border-2 border-[var(--oat-border)] flex items-center justify-center mr-3 text-xs font-bold text-[var(--warm-charcoal)]">
+                          {opt.key}
+                        </span>
+                        <span className="text-[var(--clay-black)]">{opt.text}</span>
+                      </div>
+                    ),
+                  )}
+                </div>
+              )}
+
+            {!question.options && (
+              <div className="p-4 rounded-[var(--radius-md)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)] mt-4 text-sm text-[var(--warm-charcoal)]">
+                <span className="font-semibold text-[var(--clay-black)]">
+                  Jenis soal:{" "}
+                </span>
+                {formatLabel(question.format)}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Lock card */}
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
+          <CardContent className="p-6">
+            <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-2 flex items-center gap-2">
+              <MaterialIcon name="lock" />
+              Jawaban & Penjelasan
+            </h2>
+            <p className="text-sm text-[var(--warm-charcoal)]">
+              Jawaban dan penjelasan akan tersedia setelah kamu mencoba mengerjakan
+              soal ini dalam paket latihan.
+            </p>
+          </CardContent>
+        </Card>
+
+        {/* Rating */}
+        <div className="flex items-center gap-4 mb-6">
+          <div className="flex gap-1">
+            {[1, 2, 3, 4, 5].map((star) => (
+              <button
+                key={star}
+                onClick={() => rateMutation.mutate({ questionId: question.id, score: star })}
+                className="transition-transform hover:scale-110"
+              >
+                <MaterialIcon
+                  name={(ratingQuery.data?.myRating ?? 0) >= star ? "star" : "star_outline"}
+                  className={`text-xl ${(ratingQuery.data?.myRating ?? 0) >= star ? "text-[var(--lemon-500)]" : "text-[var(--oat-border)]"}`}
+                />
+              </button>
+            ))}
+          </div>
+          {ratingQuery.data?.avgRating && (
+            <span className="text-sm text-[var(--warm-charcoal)]">
+              {ratingQuery.data.avgRating}/5 ({question.usageCount}x digunakan)
+            </span>
+          )}
+          {!ratingQuery.data?.avgRating && (
+            <span className="text-sm text-[var(--warm-charcoal)]">
+              {question.usageCount}x digunakan
+            </span>
+          )}
+        </div>
+
+        {/* Meta & Owner Actions */}
+        <div className="flex flex-wrap items-center justify-between gap-4 text-sm text-[var(--warm-charcoal)] border-t border-[var(--oat-border)] pt-4">
+          <div className="flex gap-4">
+            <span>Dibuat oleh {question.creatorName ?? "Anonim"}</span>
+            <span>•</span>
+            <span className="capitalize">{question.source}</span>
+          </div>
+          {isOwner && (
+            <div className="flex gap-2 items-center">
+              <span
+                className={`px-3 py-1.5 rounded-full text-xs font-semibold ${
+                  question.isPublic
+                    ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                    : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
+                }`}
+              >
+                {question.isPublic ? "Publik" : "Privat"}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Footer Actions */}
+        <div className="mt-6 flex flex-col sm:flex-row items-center justify-between gap-3">
+          <Button
+            variant="outline"
+            onClick={onToggleSelect}
+            disabled={!isSelectable}
+            className={`rounded-[var(--radius-lg)] border-2 clay-hover ${
+              !isSelectable
+                ? "opacity-40 cursor-not-allowed border-[var(--oat-border)] text-[var(--warm-silver)]"
+                : isSelected
+                  ? "border-[var(--pomegranate-400)] text-[var(--pomegranate-600)] bg-[var(--pomegranate-50)]"
+                  : "border-[var(--oat-border)] text-[var(--warm-charcoal)]"
+            }`}
+          >
+            <MaterialIcon name={isSelected ? "remove" : "add"} className="mr-2" />
+            {!isSelectable
+              ? "Jenis ujian berbeda"
+              : isSelected
+                ? "Hapus dari Pilihan"
+                : "Tambah ke Paket"}
+          </Button>
+          <Button
+            onClick={onClose}
+            className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
+          >
+            Tutup
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Bank Component ──────────────────────────────────────────
+
+type Tab = "mine" | "public";
+
 function BankComponent() {
+  const { data: session } = authClient.useSession();
+  const userId = session?.user.id;
+  const navigate = useNavigate();
+
+  const [tab, setTab] = useState<Tab>("mine");
   const [search, setSearch] = useState("");
   const [examType, setExamType] = useState<string>("");
   const [section, setSection] = useState<string>("");
   const [format, setFormat] = useState<string>("");
   const [difficulty, setDifficulty] = useState<number | undefined>();
   const [page, setPage] = useState(0);
+  const [selectedQuestion, setSelectedQuestion] = useState<any | null>(null);
+
+  // Multi-select state
+  const [isSelectMode, setIsSelectMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isAutoBundleOpen, setIsAutoBundleOpen] = useState(false);
+
   const limit = 12;
 
   const query = useQuery(
@@ -87,7 +638,9 @@ function BankComponent() {
       sectionTypeId: section || undefined,
       format: format || undefined,
       difficulty,
-      isPublic: true,
+      ...(tab === "mine" && userId
+        ? { creatorUserId: userId }
+        : { isPublic: true }),
       limit,
       offset: page * limit,
     }),
@@ -97,6 +650,20 @@ function BankComponent() {
   const total = query.data?.total ?? 0;
   const totalPages = Math.ceil(total / limit);
 
+  const togglePublic = useMutation({
+    ...trpc.question.togglePublic.mutationOptions(),
+    onSuccess: () => query.refetch(),
+  });
+
+  const deleteQuestion = useMutation({
+    ...trpc.question.delete.mutationOptions(),
+    onSuccess: () => query.refetch(),
+  });
+
+  const createPackage = useMutation(trpc.package.create.mutationOptions());
+  const addSection = useMutation(trpc.package.addSection.mutationOptions());
+  const addQuestion = useMutation(trpc.package.addQuestion.mutationOptions());
+
   const clearFilters = () => {
     setSearch("");
     setExamType("");
@@ -108,6 +675,160 @@ function BankComponent() {
 
   const hasFilters = search || examType || section || format || difficulty !== undefined;
 
+  // Strict exam type guard: derive the locked exam type from first selection
+  const lockedExamType = useMemo(() => {
+    if (selectedIds.size === 0) return null;
+    const firstId = Array.from(selectedIds)[0];
+    const firstQ = questions.find((q) => q.id === firstId);
+    return firstQ?.examTypeId ?? null;
+  }, [selectedIds, questions]);
+
+  const toggleSelection = (id: string) => {
+    const q = questions.find((item) => item.id === id);
+    if (!q) return;
+
+    // Strict guard: cannot select different exam type
+    if (lockedExamType && q.examTypeId !== lockedExamType) return;
+
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const selectAll = () => {
+    // Only select questions that match the locked exam type
+    if (lockedExamType) {
+      setSelectedIds(new Set(questions.filter((q) => q.examTypeId === lockedExamType).map((q) => q.id)));
+    } else {
+      setSelectedIds(new Set(questions.map((q) => q.id)));
+    }
+  };
+
+  const clearSelection = () => {
+    setSelectedIds(new Set());
+  };
+
+  const exitSelectMode = () => {
+    setIsSelectMode(false);
+    setSelectedIds(new Set());
+  };
+
+  const handleCreatePackage = async (data: {
+    title: string;
+    description: string;
+    isPublic: boolean;
+    examTypeId: string;
+  }) => {
+    if (selectedIds.size === 0) return;
+
+    // Derive examTypeId from first selected question
+    const firstId = Array.from(selectedIds)[0];
+    const firstQ = questions.find((q) => q.id === firstId);
+    const examTypeId = firstQ?.examTypeId ?? data.examTypeId;
+
+    try {
+      const pkg = await createPackage.mutateAsync({
+        title: data.title,
+        description: data.description,
+        examTypeId,
+        isPublic: data.isPublic,
+        estimatedDurationMin: selectedIds.size * 2,
+      });
+
+      const sec = await addSection.mutateAsync({
+        packageId: pkg.id,
+        sectionTypeId: firstQ?.sectionTypeId ?? "READING",
+        title: `${firstQ?.sectionTypeName ?? "Reading"} Section`,
+        orderIndex: 0,
+      });
+
+      const ids = Array.from(selectedIds);
+      for (let i = 0; i < ids.length; i++) {
+        await addQuestion.mutateAsync({
+          sectionId: sec.id,
+          questionId: ids[i],
+          orderIndex: i,
+        });
+      }
+
+      setIsCreateModalOpen(false);
+      setIsSelectMode(false);
+      setSelectedIds(new Set());
+      navigate({ to: "/package/$id", params: { id: pkg.id } });
+    } catch (err: any) {
+      alert("Gagal membuat paket: " + err.message);
+    }
+  };
+
+  const handleAutoBundle = async (data: {
+    title: string;
+    description: string;
+    isPublic: boolean;
+    examTypeId: string;
+    sectionTypeId: string;
+    count: number;
+    sortOrder: "random" | "difficulty";
+  }) => {
+    // Fetch all questions for this exam type (not just current page)
+    const allQuestions = await query.refetch();
+    const available = (allQuestions.data?.questions ?? []).filter(
+      (q) => q.examTypeId === data.examTypeId,
+    );
+
+    let picked = available;
+    if (data.sortOrder === "random") {
+      picked = [...available].sort(() => Math.random() - 0.5);
+    } else {
+      picked = [...available].sort((a, b) => a.difficulty - b.difficulty);
+    }
+    picked = picked.slice(0, data.count);
+
+    if (picked.length === 0) {
+      alert("Tidak ada soal tersedia untuk ujian ini.");
+      return;
+    }
+
+    try {
+      const pkg = await createPackage.mutateAsync({
+        title: data.title,
+        description: data.description,
+        examTypeId: data.examTypeId,
+        isPublic: data.isPublic,
+        estimatedDurationMin: picked.length * 2,
+      });
+
+      const sec = await addSection.mutateAsync({
+        packageId: pkg.id,
+        sectionTypeId: data.sectionTypeId,
+        title: `${data.sectionTypeId} Section`,
+        orderIndex: 0,
+      });
+
+      for (let i = 0; i < picked.length; i++) {
+        await addQuestion.mutateAsync({
+          sectionId: sec.id,
+          questionId: picked[i].id,
+          orderIndex: i,
+        });
+      }
+
+      setIsAutoBundleOpen(false);
+      navigate({ to: "/package/$id", params: { id: pkg.id } });
+    } catch (err: any) {
+      alert("Gagal membuat paket: " + err.message);
+    }
+  };
+
+  // Auto-bundle: count available questions for current filters
+  const autoBundleExamType = examType || null;
+  const autoBundleSectionType = section || null;
+
   return (
     <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-7xl mx-auto bg-[var(--warm-cream)]">
       <section className="mb-8">
@@ -115,10 +836,34 @@ function BankComponent() {
           Bank Soal
         </h1>
         <p className="text-lg text-[var(--warm-charcoal)] mt-2">
-          Jelajahi soal latihan dari komunitas.
+          Kelola dan jelajahi soal latihan. Pilih soal untuk dibuatkan paket.
         </p>
       </section>
 
+      {/* Tabs */}
+      <div className="flex gap-2 mb-6">
+        <button
+          onClick={() => { setTab("mine"); setPage(0); }}
+          className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all ${
+            tab === "mine"
+              ? "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)]"
+          }`}
+        >
+          Soal Saya
+        </button>
+        <button
+          onClick={() => { setTab("public"); setPage(0); }}
+          className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all ${
+            tab === "public"
+              ? "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)]"
+          }`}
+        >
+          Publik
+        </button>
+      </div>
+
       {/* Search & Filters */}
       <div className="flex flex-col gap-4 mb-8">
         <div className="flex gap-3">
@@ -173,7 +918,7 @@ function BankComponent() {
             value={section}
             onValueChange={(v: string | null) => { setSection(v ?? ""); setPage(0); }}
           >
-            <SelectTrigger className="w-36">
+            <SelectTrigger className="w-38">
               <SelectValue placeholder="Semua Section" />
             </SelectTrigger>
             <SelectContent>
@@ -194,7 +939,7 @@ function BankComponent() {
             value={format}
             onValueChange={(v: string | null) => { setFormat(v ?? ""); setPage(0); }}
           >
-            <SelectTrigger className="w-40">
+            <SelectTrigger className="w-52">
               <SelectValue placeholder="Semua Format" />
             </SelectTrigger>
             <SelectContent>
@@ -230,6 +975,76 @@ function BankComponent() {
         </div>
       </div>
 
+      {/* Select Mode Toolbar */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          {!isSelectMode ? (
+            <>
+              <Button
+                variant="outline"
+                onClick={() => setIsSelectMode(true)}
+                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+              >
+                <MaterialIcon name="checklist" className="mr-2" />
+                Mode Pilih
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => setIsAutoBundleOpen(true)}
+                disabled={!autoBundleExamType}
+                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+              >
+                <MaterialIcon name="auto_fix_high" className="mr-2" />
+                Auto Bundle
+              </Button>
+              {!autoBundleExamType && (
+                <span className="text-xs text-[var(--warm-silver)]">
+                  Pilih jenis ujian dulu untuk Auto Bundle
+                </span>
+              )}
+            </>
+          ) : (
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                onClick={exitSelectMode}
+                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+              >
+                <MaterialIcon name="close" className="mr-2" />
+                Selesai
+              </Button>
+              <Button
+                variant="outline"
+                onClick={selectAll}
+                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover text-sm"
+              >
+                Pilih Semua
+              </Button>
+              <Button
+                variant="outline"
+                onClick={clearSelection}
+                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover text-sm"
+              >
+                Batal Pilih
+              </Button>
+            </div>
+          )}
+        </div>
+
+        {isSelectMode && (
+          <div className="flex items-center gap-3">
+            {lockedExamType && (
+              <span className="px-3 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
+                {EXAM_TYPES.find((t) => t.id === lockedExamType)?.name ?? lockedExamType}
+              </span>
+            )}
+            <span className="text-sm font-semibold text-[var(--clay-black)]">
+              {selectedIds.size} soal dipilih
+            </span>
+          </div>
+        )}
+      </div>
+
       {/* Results */}
       {query.isLoading ? (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -246,18 +1061,58 @@ function BankComponent() {
       ) : (
         <>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {questions.map((q) => (
-              <Link key={q.id} to="/bank/$id" params={{ id: q.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 flex flex-col">
+            {questions.map((q) => {
+              const isOwner = q.creatorUserId === userId;
+              const isSelected = selectedIds.has(q.id);
+              const isMismatched = isSelectMode && lockedExamType && q.examTypeId !== lockedExamType;
+              return (
+                <Card
+                  key={q.id}
+                  onClick={() => {
+                    if (isSelectMode) {
+                      toggleSelection(q.id);
+                    } else {
+                      setSelectedQuestion(q);
+                    }
+                  }}
+                  className={`clay-shadow clay-hover bg-[var(--pure-white)] border-2 rounded-[var(--radius-xl)] h-full flex flex-col cursor-pointer transition-all ${
+                    isSelected
+                      ? "border-[var(--clay-black)] bg-[var(--matcha-100)]"
+                      : isMismatched
+                        ? "border-[var(--oat-border)] opacity-30 pointer-events-none"
+                        : "border-[var(--oat-border)]"
+                  }`}
+                >
                   <CardContent className="p-5 flex flex-col h-full">
                     <div className="flex items-start justify-between mb-3">
-                      <div className="flex gap-2 flex-wrap">
-                        <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>
+                      <div className="flex items-center gap-2 flex-wrap">
+                        {isSelectMode && (
+                          <div
+                            className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors shrink-0 ${
+                              isSelected
+                                ? "bg-[var(--clay-black)] border-[var(--clay-black)]"
+                                : isMismatched
+                                  ? "border-[var(--warm-silver)]"
+                                  : "border-[var(--oat-border)]"
+                            }`}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              toggleSelection(q.id);
+                            }}
+                          >
+                            {isSelected && (
+                              <MaterialIcon name="check" className="text-xs text-[var(--pure-white)]" />
+                            )}
+                          </div>
+                        )}
+                        <div className="flex gap-2 flex-wrap">
+                          <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>
+                        </div>
                       </div>
                       {q.avgRating && (
                         <div className="flex items-center gap-1 text-[var(--lemon-700)]">
@@ -267,7 +1122,7 @@ function BankComponent() {
                       )}
                     </div>
 
-                    <h3 className="font-headline text-base font-bold text-[var(--clay-black)] mb-2 line-clamp-2">
+                    <h3 className="font-headline text-base font-bold text-[var(--clay-black)] line-clamp-2 mb-2">
                       {q.questionText}
                     </h3>
 
@@ -288,10 +1143,42 @@ function BankComponent() {
                         {q.usageCount}x digunakan
                       </span>
                     </div>
+
+                    {isOwner && (
+                      <div
+                        className="flex items-center justify-between mt-3 pt-3 border-t border-[var(--oat-border)]"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            togglePublic.mutate({ id: q.id });
+                          }}
+                          className={`text-xs font-semibold px-3 py-1.5 rounded-full transition-colors ${
+                            q.isPublic
+                              ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                              : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
+                          }`}
+                        >
+                          {q.isPublic ? "Publik" : "Privat"}
+                        </button>
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            if (confirm("Yakin mau hapus soal ini?")) {
+                              deleteQuestion.mutate({ id: q.id });
+                            }
+                          }}
+                          className="text-xs text-[var(--pomegranate-400)] hover:bg-[var(--pomegranate-400)]/10 px-2 py-1 rounded-full transition-colors"
+                        >
+                          <MaterialIcon name="delete" className="text-sm" />
+                        </button>
+                      </div>
+                    )}
                   </CardContent>
                 </Card>
-              </Link>
-            ))}
+              );
+            })}
           </div>
 
           {/* Pagination */}
@@ -320,6 +1207,70 @@ function BankComponent() {
           )}
         </>
       )}
+
+      {/* Sticky Bottom Bar for Selection */}
+      {isSelectMode && selectedIds.size > 0 && (
+        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40">
+          <div className="flex items-center gap-3 bg-[var(--clay-black)] text-[var(--pure-white)] px-6 py-3 rounded-[var(--radius-xl)] clay-shadow">
+            <span className="text-sm font-semibold">
+              {selectedIds.size} soal dipilih
+            </span>
+            <Button
+              onClick={() => setIsCreateModalOpen(true)}
+              className="bg-[var(--matcha-500)] text-[var(--pure-white)] hover:bg-[var(--matcha-700)] rounded-[var(--radius-lg)] text-sm px-4 py-2 h-auto"
+            >
+              <MaterialIcon name="folder" className="mr-1 text-sm" />
+              Buat Paket
+            </Button>
+            <button
+              onClick={clearSelection}
+              className="text-xs text-[var(--warm-silver)] hover:text-[var(--pure-white)] transition-colors"
+            >
+              Batal
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Detail Modal */}
+      {selectedQuestion && (
+        <QuestionDetailModal
+          question={selectedQuestion}
+          onClose={() => setSelectedQuestion(null)}
+          isSelected={selectedIds.has(selectedQuestion.id)}
+          onToggleSelect={() => {
+            toggleSelection(selectedQuestion.id);
+            if (!isSelectMode) setIsSelectMode(true);
+          }}
+          isSelectable={!lockedExamType || selectedQuestion.examTypeId === lockedExamType}
+        />
+      )}
+
+      {/* Create Package Modal */}
+      {isCreateModalOpen && (
+        <CreatePackageModal
+          selectedCount={selectedIds.size}
+          onClose={() => setIsCreateModalOpen(false)}
+          onCreate={handleCreatePackage}
+          isPending={createPackage.isPending || addSection.isPending}
+          examTypeName={EXAM_TYPES.find((t) => t.id === lockedExamType)?.name ?? "Unknown"}
+          lowCount={selectedIds.size < 5}
+        />
+      )}
+
+      {/* Auto Bundle Modal */}
+      {isAutoBundleOpen && autoBundleExamType && (
+        <AutoBundleModal
+          availableCount={total}
+          examTypeId={autoBundleExamType}
+          examTypeName={EXAM_TYPES.find((t) => t.id === autoBundleExamType)?.name ?? autoBundleExamType}
+          sectionTypeId={autoBundleSectionType ?? "READING"}
+          sectionTypeName={SECTIONS.find((s) => s.id === autoBundleSectionType)?.name ?? "Reading"}
+          onClose={() => setIsAutoBundleOpen(false)}
+          onCreate={handleAutoBundle}
+          isPending={createPackage.isPending || addSection.isPending}
+        />
+      )}
     </div>
   );
 }

apps/web/src/routes/{builder.tsx → builder.combo.tsx}

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { Input } from "@labas/ui/components/input";
@@ -15,8 +15,8 @@ import {
   SelectValue,
 } from "@labas/ui/components/select";
 
-export const Route = createFileRoute("/builder")({
-  component: BuilderComponent,
+export const Route = createFileRoute("/builder/combo")({
+  component: ComboBuilderComponent,
   beforeLoad: async () => {
     const session = await authClient.getSession();
     if (!session.data) {
@@ -26,156 +26,126 @@ export const Route = createFileRoute("/builder")({
   },
 });
 
-const EXAM_TYPES = [
-  { id: "IELTS", name: "IELTS" },
-  { id: "TOEFL", name: "TOEFL" },
-  { id: "JLPT", name: "JLPT" },
-  { id: "HSK", name: "HSK" },
-  { id: "GOETHE", name: "German" },
-];
-
 function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
   return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
 }
 
-function formatLabel(fmt: string) {
-  return fmt.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+interface SelectedSection {
+  sourcePackageId: string;
+  sourceSectionId: string;
+  packageTitle: string;
+  sectionTitle: string;
+  sectionTypeName: string;
+  examTypeName: string;
 }
 
-function BuilderComponent() {
+function ComboBuilderComponent() {
   const [step, setStep] = useState<"select" | "review">("select");
   const [search, setSearch] = useState("");
   const [examTypeFilter, setExamTypeFilter] = useState("");
-  const [selectedQuestions, setSelectedQuestions] = useState<string[]>([]);
+  const [selectedSections, setSelectedSections] = useState<SelectedSection[]>([]);
 
   // Package form
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
-  const [examType, setExamType] = useState("IELTS");
   const [isPublic, setIsPublic] = useState(false);
 
-  const questionsQuery = useQuery(
-    trpc.question.list.queryOptions({
-      search: search || undefined,
+  const availableQuery = useQuery(
+    trpc.combo.availableSections.queryOptions({
       examTypeId: examTypeFilter || undefined,
-      isPublic: true,
+      search: search || undefined,
       limit: 50,
       offset: 0,
     }),
   );
 
-  const createPackage = useMutation({
-    ...trpc.package.create.mutationOptions(),
+  const createCombo = useMutation({
+    ...trpc.combo.create.mutationOptions(),
   });
 
-  const addSection = useMutation({
-    ...trpc.package.addSection.mutationOptions(),
-  });
-
-  const addQuestion = useMutation({
-    ...trpc.package.addQuestion.mutationOptions(),
-  });
-
-  const toggleQuestion = (id: string) => {
-    setSelectedQuestions((prev) =>
-      prev.includes(id) ? prev.filter((q) => q !== id) : [...prev, id],
-    );
+  const toggleSection = (section: SelectedSection) => {
+    setSelectedSections((prev) => {
+      const exists = prev.find(
+        (s) => s.sourceSectionId === section.sourceSectionId,
+      );
+      if (exists) {
+        return prev.filter((s) => s.sourceSectionId !== section.sourceSectionId);
+      }
+      return [...prev, section];
+    });
   };
 
-  const handleCreatePackage = async () => {
-    if (!title || selectedQuestions.length === 0) return;
+  const handleCreateCombo = async () => {
+    if (!title || selectedSections.length === 0) return;
 
     try {
-      const pkg = await createPackage.mutateAsync({
+      await createCombo.mutateAsync({
         title,
         description,
-        examTypeId: examType,
         isPublic,
-        estimatedDurationMin: selectedQuestions.length * 2,
-      });
-
-      const sec = await addSection.mutateAsync({
-        packageId: pkg.id,
-        sectionTypeId: "READING",
-        title: "Reading Section",
-        orderIndex: 0,
-      });
-
-      for (let i = 0; i < selectedQuestions.length; i++) {
-        await addQuestion.mutateAsync({
-          sectionId: sec.id,
-          questionId: selectedQuestions[i],
+        sections: selectedSections.map((s, i) => ({
+          sourcePackageId: s.sourcePackageId,
+          sourceSectionId: s.sourceSectionId,
           orderIndex: i,
-        });
-      }
+        })),
+      });
 
-      alert(`Paket "${title}" berhasil dibuat!`);
-      setSelectedQuestions([]);
+      alert(`Combo paket "${title}" berhasil dibuat!`);
+      setSelectedSections([]);
       setTitle("");
       setDescription("");
       setStep("select");
     } catch (err: any) {
-      alert("Gagal membuat paket: " + err.message);
+      alert("Gagal membuat combo: " + err.message);
     }
   };
 
-  const questions = questionsQuery.data?.questions ?? [];
-  const selectedCount = selectedQuestions.length;
+  const sections = availableQuery.data?.sections ?? [];
+  const groupedSections = sections.reduce((groups, section) => {
+    const key = `${section.examTypeName} — ${section.packageTitle}`;
+    if (!groups[key]) groups[key] = [];
+    groups[key].push(section);
+    return groups;
+  }, {} as Record<string, typeof sections>);
 
   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">
         <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
-          Test Builder
+          Package Combiner
         </h1>
         <p className="text-lg text-[var(--warm-charcoal)] mt-2">
-          Susun paket soal dari bank soal yang tersedia.
+          Gabungkan section dari berbagai paket jadi satu paket ujian baru.
         </p>
+        <div className="mt-3 p-3 rounded-[var(--radius-md)] bg-[var(--lemon-400)]/20 border-2 border-[var(--lemon-500)]/30 text-sm text-[var(--lemon-800)] flex items-start gap-2">
+          <MaterialIcon name="info" className="text-sm mt-0.5 shrink-0" />
+          <span>Pilih section (kelompok soal) dari paket yang sudah ada. Bedanya dengan Builder: disini kamu gabungkan section utuh, bukan pilih soal satu per satu.</span>
+        </div>
       </section>
 
       {step === "select" ? (
         <>
-          {/* Selection Toolbar */}
+          {/* Toolbar */}
           <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6 sticky top-0 z-30 bg-[var(--warm-cream)] py-4">
             <div className="flex gap-3 flex-1 w-full md:w-auto">
               <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
-                  placeholder="Cari soal..."
+                  placeholder="Cari paket..."
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
                   className="pl-10 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
                 />
               </div>
-              <Select
-                items={[
-                  { value: "", label: "Semua Ujian" },
-                  ...EXAM_TYPES.map((t) => ({ value: t.id, label: t.name })),
-                ]}
-                value={examTypeFilter}
-                onValueChange={(v: string | null) => setExamTypeFilter(v ?? "")}
-              >
-                <SelectTrigger className="w-36">
-                  <SelectValue placeholder="Semua Ujian" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="">Semua Ujian</SelectItem>
-                    {EXAM_TYPES.map((t) => (
-                      <SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
             </div>
 
             <div className="flex items-center gap-3">
               <span className="text-sm text-[var(--warm-charcoal)]">
-                <span className="font-bold text-[var(--clay-black)]">{selectedCount}</span> soal dipilih
+                <span className="font-bold text-[var(--clay-black)]">{selectedSections.length}</span> section dipilih
               </span>
               <Button
-                onClick={() => selectedCount > 0 && setStep("review")}
-                disabled={selectedCount === 0}
+                onClick={() => selectedSections.length > 0 && setStep("review")}
+                disabled={selectedSections.length === 0}
                 className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
               >
                 <MaterialIcon name="arrow_forward" />
@@ -184,62 +154,77 @@ function BuilderComponent() {
             </div>
           </div>
 
-          {/* Question Grid */}
-          {questionsQuery.isLoading ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {Array.from({ length: 6 }).map((_, i) => (
-                <Card key={i} className="h-32 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+          {/* Sections by Package */}
+          {availableQuery.isLoading ? (
+            <div className="space-y-4">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <Card key={i} className="h-24 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
               ))}
             </div>
-          ) : questions.length === 0 ? (
+          ) : Object.keys(groupedSections).length === 0 ? (
             <div className="text-center py-20">
-              <MaterialIcon name="search_off" className="text-6xl text-[var(--warm-silver)] mx-auto mb-4" />
-              <p className="text-lg text-[var(--warm-charcoal)] font-semibold">Tidak ada soal ditemukan</p>
+              <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 section ditemukan</p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {questions.map((q) => {
-                const isSelected = selectedQuestions.includes(q.id);
-                return (
-                  <div
-                    key={q.id}
-                    onClick={() => toggleQuestion(q.id)}
-                    className={`cursor-pointer rounded-[var(--radius-xl)] border-2 p-5 transition-all clay-hover ${
-                      isSelected
-                        ? "border-[var(--clay-black)] bg-[var(--matcha-300)]/10 clay-shadow"
-                        : "border-[var(--oat-border)] bg-[var(--pure-white)] hover:bg-[var(--oat-light)]"
-                    }`}
-                  >
-                    <div className="flex items-start gap-3">
-                      <div className={`mt-0.5 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
-                        isSelected ? "bg-[var(--clay-black)] border-[var(--clay-black)]" : "border-[var(--oat-border)]"
-                      }`}>
-                        {isSelected && <MaterialIcon name="check" className="text-xs text-[var(--pure-white)]" />}
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <div className="flex gap-2 flex-wrap mb-2">
-                          <span className="px-2 py-0.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
-                            {q.examTypeName}
-                          </span>
-                          <span className="px-2 py-0.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-xs font-semibold">
-                            {q.sectionTypeName}
-                          </span>
-                          <span className="px-2 py-0.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-xs font-semibold">
-                            {formatLabel(q.format)}
-                          </span>
-                        </div>
-                        <p className="text-sm font-medium text-[var(--clay-black)] line-clamp-2">{q.questionText}</p>
-                        <p className="text-xs text-[var(--warm-charcoal)] line-clamp-1 mt-1">{q.passageText}</p>
-                      </div>
+            <div className="space-y-6">
+              {Object.entries(groupedSections).map(([groupKey, groupSections]) => (
+                <Card key={groupKey} className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+                  <CardContent className="p-5">
+                    <h3 className="font-headline font-bold text-[var(--clay-black)] mb-4 text-sm uppercase tracking-wider">
+                      {groupKey}
+                    </h3>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                      {groupSections.map((section) => {
+                        const isSelected = selectedSections.some(
+                          (s) => s.sourceSectionId === section.id,
+                        );
+                        return (
+                          <div
+                            key={section.id}
+                            onClick={() =>
+                              toggleSection({
+                                sourcePackageId: section.packageId,
+                                sourceSectionId: section.id,
+                                packageTitle: section.packageTitle ?? "Untitled",
+                                sectionTitle: section.title,
+                                sectionTypeName: section.sectionTypeName ?? "Unknown",
+                                examTypeName: section.examTypeName ?? "Unknown",
+                              })
+                            }
+                            className={`cursor-pointer rounded-[var(--radius-lg)] border-2 p-4 transition-all clay-hover ${
+                              isSelected
+                                ? "border-[var(--clay-black)] bg-[var(--matcha-300)]/10 clay-shadow"
+                                : "border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
+                            }`}
+                          >
+                            <div className="flex items-center gap-3">
+                              <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
+                                isSelected ? "bg-[var(--clay-black)] border-[var(--clay-black)]" : "border-[var(--oat-border)]"
+                              }`}>
+                                {isSelected && <MaterialIcon name="check" className="text-xs text-[var(--pure-white)]" />}
+                              </div>
+                              <div className="flex-1">
+                                <p className="text-sm font-medium text-[var(--clay-black)]">{section.title}</p>
+                                <div className="flex gap-2 mt-1">
+                                  <span className="px-2 py-0.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-xs font-semibold">
+                                    {section.sectionTypeName}
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
                     </div>
-                  </div>
-                );
-              })}
+                  </CardContent>
+                </Card>
+              ))}
             </div>
           )}
         </>
       ) : (
-        /* Review & Create Step */
+        /* Review Step */
         <div className="max-w-2xl mx-auto">
           <Button
             variant="outline"
@@ -252,14 +237,14 @@ function BuilderComponent() {
 
           <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
             <CardContent className="p-6 space-y-5">
-              <h2 className="font-headline text-xl font-bold text-[var(--clay-black)]">Detail Paket</h2>
+              <h2 className="font-headline text-xl font-bold text-[var(--clay-black)]">Detail Combo Paket</h2>
 
               <div>
                 <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">Judul</label>
                 <Input
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
-                  placeholder="e.g. IELTS Reading Practice Set 1"
+                  placeholder="e.g. IELTS Mixed Practice"
                   className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
                 />
               </div>
@@ -274,26 +259,6 @@ function BuilderComponent() {
                 />
               </div>
 
-              <div>
-                <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">Jenis Ujian</label>
-                <Select
-                  items={EXAM_TYPES.map((t) => ({ value: t.id, label: t.name }))}
-                  value={examType}
-                  onValueChange={(v: string | null) => setExamType(v ?? "IELTS")}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Pilih ujian" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      {EXAM_TYPES.map((t) => (
-                        <SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
-
               <label className="flex items-center gap-2 cursor-pointer">
                 <input
                   type="checkbox"
@@ -309,39 +274,38 @@ function BuilderComponent() {
           <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
             <CardContent className="p-6">
               <h3 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-4">
-                Soal Terpilih ({selectedCount})
+                Section Terpilih ({selectedSections.length})
               </h3>
               <div className="space-y-3">
-                {selectedQuestions.map((qid, idx) => {
-                  const q = questions.find((item) => item.id === qid);
-                  if (!q) return null;
-                  return (
-                    <div key={qid} className="flex items-start gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--oat-light)]">
-                      <span className="w-6 h-6 rounded-full bg-[var(--clay-black)] text-[var(--pure-white)] text-xs flex items-center justify-center font-bold shrink-0">
-                        {idx + 1}
-                      </span>
-                      <p className="text-sm text-[var(--clay-black)] line-clamp-2 flex-1">{q.questionText}</p>
-                      <button
-                        onClick={() => toggleQuestion(qid)}
-                        className="text-[var(--pomegranate-400)] hover:text-[var(--pomegranate-400)]/80"
-                      >
-                        <MaterialIcon name="close" className="text-sm" />
-                      </button>
+                {selectedSections.map((sec, idx) => (
+                  <div key={sec.sourceSectionId} className="flex items-start gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--oat-light)]">
+                    <span className="w-6 h-6 rounded-full bg-[var(--clay-black)] text-[var(--pure-white)] text-xs flex items-center justify-center font-bold shrink-0">
+                      {idx + 1}
+                    </span>
+                    <div className="flex-1">
+                      <p className="text-sm font-medium text-[var(--clay-black)]">{sec.sectionTitle}</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">{sec.packageTitle} · {sec.examTypeName}</p>
                     </div>
-                  );
-                })}
+                    <button
+                      onClick={() => toggleSection(sec)}
+                      className="text-[var(--pomegranate-400)] hover:text-[var(--pomegranate-400)]/80"
+                    >
+                      <MaterialIcon name="close" className="text-sm" />
+                    </button>
+                  </div>
+                ))}
               </div>
             </CardContent>
           </Card>
 
           <Button
-            onClick={handleCreatePackage}
-            disabled={!title || createPackage.isPending}
+            onClick={handleCreateCombo}
+            disabled={!title || createCombo.isPending}
             className="w-full py-4 rounded-[var(--radius-lg)] bg-[var(--clay-black)] text-[var(--pure-white)] font-bold text-lg clay-shadow clay-hover hover:bg-[var(--warm-charcoal)] h-auto"
           >
-            <MaterialIcon name="folder" />
+            <MaterialIcon name="construction" />
             <span className="ml-2">
-              {createPackage.isPending ? "Membuat Paket..." : "Buat Paket Soal"}
+              {createCombo.isPending ? "Membuat Combo..." : "Buat Combo Paket"}
             </span>
           </Button>
         </div>

apps/web/src/routes/generate.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { useMutation } from "@tanstack/react-query";
+import { useState, useEffect } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
@@ -69,86 +69,87 @@ function RouteComponent() {
   const [weaknessAlign, setWeaknessAlign] = useState(75);
   const [result, setResult] = useState<GenerationResult | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [saveMode, setSaveMode] = useState<"questions" | "package">("questions");
-  const [packageTitle, setPackageTitle] = useState("");
-  const [packageDesc, setPackageDesc] = useState("");
-  const [isPublicPackage, setIsPublicPackage] = useState(false);
+  const [mode, setMode] = useState<"quick" | "agentic">("quick");
+  const [jobId, setJobIdState] = useState<string | null>(null);
+  const [generatedPackageId, setGeneratedPackageId] = useState<string | null>(null);
+
+  // Persist jobId to sessionStorage so it survives navigation
+  const setJobId = (id: string | null) => {
+    setJobIdState(id);
+    if (id) {
+      sessionStorage.setItem("labas_active_job", id);
+    } else {
+      sessionStorage.removeItem("labas_active_job");
+    }
+  };
+
+  // On mount: recover from sessionStorage
+  useEffect(() => {
+    const saved = sessionStorage.getItem("labas_active_job");
+    if (saved) {
+      setJobIdState(saved);
+    }
+  }, []);
+
+  // Also check myJobs for any pending/running jobs (fallback / cross-tab sync)
+  const myJobsQuery = useQuery(
+    trpc.ai.myJobs.queryOptions({ limit: 10, offset: 0 }),
+  );
+
+  useEffect(() => {
+    if (!jobId && myJobsQuery.data) {
+      const active = myJobsQuery.data.find(
+        (j: any) => j.status === "pending" || j.status === "running",
+      );
+      if (active) {
+        setJobId(active.id);
+      }
+    }
+  }, [myJobsQuery.data, jobId]);
 
   const generate = useMutation({
     ...trpc.ai.generate.mutationOptions(),
     onSuccess: (data) => {
-      setResult(data);
+      setJobId(data.jobId);
       setError(null);
+      setResult(null);
     },
     onError: (err) => {
       setError(err.message);
-      setResult(null);
+      setJobId(null);
     },
   });
 
-  const saveQuestions = useMutation({
-    ...trpc.ai.saveQuestions.mutationOptions(),
-    onSuccess: () => {
-      alert("Soal berhasil disimpan!");
+  // Poll job status
+  const jobQuery = useQuery({
+    ...trpc.ai.getJobStatus.queryOptions(
+      { jobId: jobId! },
+      { enabled: !!jobId },
+    ),
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      if (!data) return 1000;
+      if (data.status === "completed" || data.status === "failed") return false;
+      return 1000;
     },
   });
 
-  const createPackage = useMutation({
-    ...trpc.package.create.mutationOptions(),
-  });
-
-  const addSection = useMutation({
-    ...trpc.package.addSection.mutationOptions(),
-  });
-
-  const addQuestion = useMutation({
-    ...trpc.package.addQuestion.mutationOptions(),
-  });
-
-  const handleSaveAsPackage = async () => {
-    if (!result || !packageTitle) return;
-
-    try {
-      // 1. Create package
-      const pkg = await createPackage.mutateAsync({
-        title: packageTitle,
-        description: packageDesc,
-        examTypeId: examType,
-        isPublic: isPublicPackage,
-        estimatedDurationMin: result.questions.length * 2,
-      });
-
-      // 2. Add section
-      const sec = await addSection.mutateAsync({
-        packageId: pkg.id,
-        sectionTypeId: section,
-        title: `${SECTIONS.find((s) => s.id === section)?.name} Section`,
-        orderIndex: 0,
-      });
-
-      // 3. Save questions and add to section
-      const saved = await saveQuestions.mutateAsync({
-        examTypeId: examType,
-        sectionTypeId: section,
-        questions: result.questions,
-        isPublic: isPublicPackage,
-      });
-
-      for (let i = 0; i < saved.length; i++) {
-        await addQuestion.mutateAsync({
-          sectionId: sec.id,
-          questionId: saved[i].id,
-          orderIndex: i,
-        });
-      }
+  const isGenerating =
+    jobId !== null &&
+    (!jobQuery.data || (jobQuery.data.status !== "completed" && jobQuery.data.status !== "failed"));
 
-      alert(`Paket "${packageTitle}" berhasil dibuat!`);
-      setPackageTitle("");
-      setPackageDesc("");
-    } catch (err: any) {
-      alert("Gagal membuat paket: " + err.message);
+  useEffect(() => {
+    if (jobQuery.data?.status === "completed" && jobQuery.data.resultJson) {
+      const res = jobQuery.data.resultJson as GenerationResult & { generatedPackageId?: string | null };
+      setResult(res);
+      setGeneratedPackageId(res.generatedPackageId ?? null);
+      setJobId(null);
     }
-  };
+    if (jobQuery.data?.status === "failed") {
+      setError(jobQuery.data.errorMessage ?? "Generation failed");
+      setJobId(null);
+    }
+  }, [jobQuery.data]);
 
   const toggleFormat = (id: string) => {
     setSelectedFormats((prev) =>
@@ -168,6 +169,10 @@ function RouteComponent() {
       return;
     }
 
+    setResult(null);
+    setError(null);
+    setJobId(null);
+
     generate.mutate({
       examType: examType as any,
       section: section as any,
@@ -175,11 +180,12 @@ function RouteComponent() {
       difficulty: difficulty + 1,
       topics: selectedTopics,
       questionCount,
-      mode: "quick",
+      mode,
       apiKeyConfig: {
         baseUrl: storedKey.baseUrl,
         apiKey: storedKey.apiKey,
         model: storedKey.modelName,
+        maxTokens: storedKey.maxTokens ?? 16384,
       },
     });
   };
@@ -426,16 +432,84 @@ function RouteComponent() {
                 </p>
               </div>
 
+              {/* Mode Toggle */}
+              <div className="flex gap-1 p-1 rounded-[var(--radius-lg)] bg-[var(--oat-light)]">
+                <button
+                  onClick={() => setMode("quick")}
+                  className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all ${
+                    mode === "quick"
+                      ? "bg-[var(--pure-white)] text-[var(--clay-black)] clay-shadow"
+                      : "text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]"
+                  }`}
+                >
+                  <MaterialIcon name="flash_on" className="text-sm mr-1" />
+                  Quick
+                </button>
+                <button
+                  onClick={() => setMode("agentic")}
+                  className={`flex-1 py-2 px-3 rounded-[var(--radius-md)] text-sm font-semibold transition-all ${
+                    mode === "agentic"
+                      ? "bg-[var(--pure-white)] text-[var(--clay-black)] clay-shadow"
+                      : "text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]"
+                  }`}
+                >
+                  <MaterialIcon name="psychology" className="text-sm mr-1" />
+                  Agentic
+                </button>
+              </div>
+
+              {mode === "agentic" && (
+                <div className="p-3 rounded-[var(--radius-md)] bg-[var(--badge-blue-bg)] border-2 border-[var(--badge-blue-bg)] text-xs text-[var(--badge-blue-text)]">
+                  <div className="flex items-center gap-2 mb-1">
+                    <MaterialIcon name="info" className="text-sm" />
+                    <span className="font-semibold">Mode Agentic</span>
+                  </div>
+                  <p>Multi-step validation: passage → validate → questions → self-check → quality score. Lebih lambat tapi kualitas lebih terjamin.</p>
+                </div>
+              )}
+
               {/* Primary CTA */}
               <Button
                 className="w-full py-5 rounded-[var(--radius-lg)] bg-[var(--clay-black)] text-[var(--pure-white)] font-bold text-lg flex items-center justify-center gap-3 clay-shadow clay-hover hover:bg-[var(--warm-charcoal)] transition-all active:scale-95 h-auto"
                 onClick={handleGenerate}
-                disabled={generate.isPending || selectedFormats.length === 0 || !hasKey}
+                disabled={isGenerating || generate.isPending || selectedFormats.length === 0 || !hasKey}
               >
                 <MaterialIcon name="auto_awesome" className="group-hover:rotate-12 transition-transform" />
-                {generate.isPending ? "Generating..." : "Generate & Launch"}
+                {isGenerating
+                  ? mode === "agentic"
+                    ? `Agentic... ${jobQuery.data?.progress ?? 0}%`
+                    : `Generating... ${jobQuery.data?.progress ?? 0}%`
+                  : "Generate & Launch"}
               </Button>
 
+              {/* Progress */}
+              {isGenerating && (
+                <div className="space-y-2">
+                  <div className="flex items-center gap-3 p-3 rounded-[var(--radius-md)] bg-[var(--matcha-300)]/20 border-2 border-[var(--matcha-300)]">
+                    <MaterialIcon name="psychology" className="text-[var(--matcha-600)] animate-pulse" />
+                    <div>
+                      <p className="text-sm font-semibold text-[var(--matcha-800)]">
+                        {jobQuery.data?.progressMessage ?? "Sedang berjalan..."}
+                      </p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">
+                        {mode === "agentic"
+                          ? "Passage → Validate → Questions → Self-Check → Score"
+                          : "Quick generation mode"}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="w-full h-2 bg-[var(--oat-border)] rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-[var(--matcha-600)] transition-all duration-500"
+                      style={{ width: `${jobQuery.data?.progress ?? 5}%` }}
+                    />
+                  </div>
+                  <p className="text-xs text-[var(--warm-charcoal)] text-center">
+                    Bisa ditinggal — hasil akan muncul otomatis
+                  </p>
+                </div>
+              )}
+
               {error && (
                 <div className="p-4 rounded-[var(--radius-md)] bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)] text-sm border-2 border-[var(--badge-blue-bg)]">
                   {error}
@@ -450,85 +524,32 @@ function RouteComponent() {
       {result && (
         <div className="mt-16 space-y-6">
           <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
-            <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Hasil Generate</h2>
-
-            <div className="flex gap-2">
-              <Button
-                onClick={() => setSaveMode(saveMode === "questions" ? "package" : "questions")}
-                variant="outline"
-                className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
-              >
-                <MaterialIcon name={saveMode === "package" ? "list" : "folder"} />
-                <span className="ml-2">{saveMode === "package" ? "Simpan Satuan" : "Simpan Paket"}</span>
-              </Button>
-
-              {saveMode === "questions" ? (
-                <Button
-                  onClick={() =>
-                    saveQuestions.mutate({
-                      examTypeId: examType,
-                      sectionTypeId: section,
-                      questions: result.questions,
-                      isPublic: false,
-                    })
-                  }
-                  disabled={saveQuestions.isPending}
-                  className="bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]"
-                >
-                  {saveQuestions.isPending ? "Menyimpan..." : "Simpan ke Bank"}
-                </Button>
-              ) : (
-                <Button
-                  onClick={handleSaveAsPackage}
-                  disabled={createPackage.isPending || !packageTitle}
-                  className="bg-[var(--blueberry-800)] text-[var(--pure-white)] hover:bg-[var(--ube-800)] clay-hover rounded-[var(--radius-lg)]"
-                >
-                  {createPackage.isPending ? "Membuat..." : "Buat Paket"}
-                </Button>
+            <div>
+              <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Hasil Generate</h2>
+              <p className="text-sm text-[var(--warm-charcoal)] mt-1">
+                Paket latihan berhasil dibuat! Soal juga tersimpan di Bank Soal (privat). Jawaban & penjelasan disembunyikan agar latihan tetap fair.
+              </p>
+            </div>
+            <div className="flex gap-3">
+              {generatedPackageId && (
+                <Link to="/package/$id" params={{ id: generatedPackageId }}>
+                  <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
+                    <MaterialIcon name="play_arrow" className="mr-2" />
+                    Lihat Paket
+                  </Button>
+                </Link>
               )}
+              <Link to="/bank">
+                <Button className="bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]">
+                  <MaterialIcon name="database" className="mr-2" />
+                  Bank Soal
+                </Button>
+              </Link>
             </div>
           </div>
 
-          {/* Package Form */}
-          {saveMode === "package" && (
-            <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-              <CardContent className="p-5 space-y-4">
-                <h3 className="font-headline font-bold text-[var(--clay-black)]">Detail Paket</h3>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div>
-                    <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">Judul Paket</label>
-                    <Input
-                      value={packageTitle}
-                      onChange={(e) => setPackageTitle(e.target.value)}
-                      placeholder="e.g. IELTS Reading - Science & Tech"
-                      className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
-                    />
-                  </div>
-                  <div>
-                    <label className="text-sm font-medium text-[var(--clay-black)] block mb-1">Deskripsi (opsional)</label>
-                    <Input
-                      value={packageDesc}
-                      onChange={(e) => setPackageDesc(e.target.value)}
-                      placeholder="Deskripsi singkat..."
-                      className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
-                    />
-                  </div>
-                </div>
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={isPublicPackage}
-                    onChange={(e) => setIsPublicPackage(e.target.checked)}
-                    className="w-4 h-4 rounded border-[var(--oat-border)]"
-                  />
-                  <span className="text-sm text-[var(--warm-charcoal)]">Publikasikan ke Bank Soal</span>
-                </label>
-              </CardContent>
-            </Card>
-          )}
-
           <div className="text-sm text-[var(--warm-charcoal)] mb-4 font-mono">
-            Model: {result.meta.model} · Tokens: {result.meta.tokensUsed ?? "?"} · Waktu: {result.meta.durationMs}ms
+            Model: {result.meta.model} · Tokens: {result.meta.tokensUsed ?? "?"} · Waktu: {result.meta.durationMs}ms · {result.questions.length} soal
           </div>
 
           {result.questions.map((q, idx) => (
@@ -551,41 +572,18 @@ function RouteComponent() {
                 {"options" in q && q.options && (
                   <div className="space-y-2">
                     {q.options.map((opt) => (
-                      <label
+                      <div
                         key={opt.key}
-                        className={`flex items-center p-4 rounded-[var(--radius-lg)] border-2 cursor-pointer transition-all clay-hover ${
-                          opt.key === q.correctAnswer
-                            ? "border-[var(--clay-black)] bg-[var(--oat-light)]"
-                            : "border-[var(--oat-border)] bg-[var(--oat-light)] hover:bg-[var(--matcha-300)]/30"
-                        }`}
+                        className="flex items-center p-4 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)]"
                       >
-                        <span className="w-5 h-5 rounded-full border-2 border-[var(--oat-border)] flex items-center justify-center mr-4">
-                          {opt.key === q.correctAnswer && (
-                            <span className="w-2.5 h-2.5 rounded-full bg-[var(--clay-black)]" />
-                          )}
+                        <span className="w-6 h-6 rounded-full border-2 border-[var(--oat-border)] flex items-center justify-center mr-3 text-xs font-bold text-[var(--warm-charcoal)]">
+                          {opt.key}
                         </span>
-                        <span className={`${opt.key === q.correctAnswer ? "font-semibold text-[var(--clay-black)]" : "text-[var(--clay-black)]"}`}>
-                          {opt.text}
-                        </span>
-                        {opt.key === q.correctAnswer && (
-                          <span className="ml-auto text-xs font-bold text-[var(--matcha-800)] bg-[var(--matcha-300)] px-2 py-1 rounded-full">
-                            Benar
-                          </span>
-                        )}
-                      </label>
+                        <span className="text-[var(--clay-black)]">{opt.text}</span>
+                      </div>
                     ))}
                   </div>
                 )}
-                {!("options" in q) && (
-                  <div className="p-4 rounded-[var(--radius-md)] border-2 border-[var(--matcha-300)] bg-[var(--matcha-300)]/30 text-sm">
-                    <span className="font-semibold text-[var(--matcha-800)]">Jawaban: </span>
-                    <span className="text-[var(--matcha-800)]">{q.correctAnswer}</span>
-                  </div>
-                )}
-                <div className="text-sm text-[var(--warm-charcoal)]">
-                  <span className="font-medium text-[var(--clay-black)]">Penjelasan: </span>
-                  {q.explanation}
-                </div>
                 <div className="flex gap-2 flex-wrap">
                   {q.skillTags.map((tag) => (
                     <span

apps/web/src/routes/jobs.tsx

@@ -0,0 +1,225 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { Button } from "@labas/ui/components/button";
+import type { GenerationResult } from "@labas/ai";
+
+export const Route = createFileRoute("/jobs")({
+  component: RouteComponent,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
+});
+
+function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
+  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  pending: "bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)]",
+  running: "bg-[var(--matcha-300)] text-[var(--matcha-800)]",
+  completed: "bg-[var(--lemon-300)] text-[var(--lemon-800)]",
+  failed: "bg-[var(--pomegranate-400)]/20 text-[var(--pomegranate-400)]",
+};
+
+const STATUS_ICONS: Record<string, string> = {
+  pending: "hourglass_empty",
+  running: "sync",
+  completed: "check_circle",
+  failed: "error",
+};
+
+function formatDate(d: string | Date | null) {
+  if (!d) return "—";
+  return new Date(d).toLocaleString("id-ID", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function RouteComponent() {
+  const [expandedJobId, setExpandedJobId] = useState<string | null>(null);
+
+  const jobsQuery = useQuery(trpc.ai.myJobs.queryOptions({ limit: 50, offset: 0 }));
+
+  const toggleExpand = (id: string) => {
+    setExpandedJobId((prev) => (prev === id ? null : id));
+  };
+
+  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">
+        <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+          Riwayat Generasi
+        </h1>
+        <p className="text-lg text-[var(--warm-charcoal)] mt-2">
+          Pantau dan kelola proses generate soal AI-mu.
+        </p>
+      </section>
+
+      {jobsQuery.isLoading ? (
+        <div className="flex items-center gap-3 text-[var(--warm-charcoal)]">
+          <MaterialIcon name="sync" className="animate-spin" />
+          Memuat riwayat...
+        </div>
+      ) : jobsQuery.isError ? (
+        <div className="p-4 rounded-[var(--radius-md)] bg-[var(--pomegranate-400)]/10 text-[var(--pomegranate-400)] border-2 border-[var(--pomegranate-400)]/20">
+          Gagal memuat riwayat: {jobsQuery.error.message}
+        </div>
+      ) : !jobsQuery.data?.length ? (
+        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="py-16 text-center">
+            <MaterialIcon name="schedule" className="text-5xl text-[var(--oat-border)] mb-4" />
+            <p className="text-[var(--warm-charcoal)] text-lg">Belum ada riwayat generasi.</p>
+            <p className="text-sm text-[var(--warm-charcoal)] mt-1">
+              Mulai generate soal di{" "}
+              <Link to="/generate" className="text-[var(--matcha-600)] font-semibold underline">
+                AI Lab
+              </Link>
+              .
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-4">
+          {jobsQuery.data.map((job) => {
+            const isExpanded = expandedJobId === job.id;
+            const result = job.resultJson as GenerationResult | null;
+
+            return (
+              <Card
+                key={job.id}
+                className={`clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] transition-all ${
+                  isExpanded ? "ring-2 ring-[var(--matcha-300)]" : ""
+                }`}
+              >
+                <CardHeader className="pb-3">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={`flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold ${
+                          STATUS_COLORS[job.status] ?? "bg-gray-100 text-gray-600"
+                        }`}
+                      >
+                        <MaterialIcon name={STATUS_ICONS[job.status] ?? "help"} className="text-sm" />
+                        {job.status.toUpperCase()}
+                      </div>
+                      <div className="text-sm text-[var(--warm-charcoal)]">
+                        {job.examTypeId} · {job.sectionTypeId} · {job.questionCount} soal ·{" "}
+                        {job.mode === "agentic" ? "Agentic" : "Quick"}
+                      </div>
+                    </div>
+                    <div className="text-xs text-[var(--warm-charcoal)]">
+                      {formatDate(job.createdAt)}
+                    </div>
+                  </div>
+
+                  {job.status === "running" && (
+                    <div className="mt-3">
+                      <div className="flex justify-between text-xs text-[var(--warm-charcoal)] mb-1">
+                        <span>{job.progressMessage ?? "Processing..."}</span>
+                        <span>{job.progress}%</span>
+                      </div>
+                      <div className="w-full h-2 bg-[var(--oat-border)] rounded-full overflow-hidden">
+                        <div
+                          className="h-full bg-[var(--matcha-600)] transition-all duration-500"
+                          style={{ width: `${job.progress}%` }}
+                        />
+                      </div>
+                    </div>
+                  )}
+                </CardHeader>
+
+                {job.status === "completed" && result && (
+                  <CardContent className="pt-0">
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="text-sm text-[var(--warm-charcoal)]">
+                        {result.questions.length} soal dihasilkan · {result.meta.model}
+                        {result.meta.tokensUsed ? ` · ${result.meta.tokensUsed} tokens` : ""}
+                        {result.meta.durationMs ? ` · ${(result.meta.durationMs / 1000).toFixed(1)}s` : ""}
+                      </div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => toggleExpand(job.id)}
+                        className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] text-xs"
+                      >
+                        <MaterialIcon name={isExpanded ? "expand_less" : "expand_more"} className="text-sm mr-1" />
+                        {isExpanded ? "Tutup" : "Lihat Soal"}
+                      </Button>
+                    </div>
+
+                    {isExpanded && (
+                      <div className="space-y-3 mt-4 border-t-2 border-[var(--oat-border)] pt-4">
+                        {result.questions.map((q, i) => (
+                          <div
+                            key={i}
+                            className="p-4 rounded-[var(--radius-lg)] bg-[var(--warm-cream)] border-2 border-[var(--oat-border)]"
+                          >
+                            <div className="flex items-center gap-2 mb-2">
+                              <span className="text-xs font-bold px-2 py-0.5 rounded bg-[var(--matcha-300)] text-[var(--matcha-800)]">
+                                {q.format.replace(/_/g, " ")}
+                              </span>
+                              <span className="text-xs text-[var(--warm-charcoal)]">
+                                Difficulty {q.difficulty}/5
+                              </span>
+                            </div>
+                            <p className="text-sm font-medium text-[var(--clay-black)] mb-2">
+                              {i + 1}. {q.questionText}
+                            </p>
+                            {"options" in q && Array.isArray(q.options) && q.options.length > 0 && (
+                              <div className="space-y-1 mb-2">
+                                {q.options.map((opt: any) => (
+                                  <div
+                                    key={opt.key}
+                                    className={`text-sm px-3 py-1.5 rounded-[var(--radius-md)] border ${
+                                      // opt.key === q.correctAnswer
+                                      //   ? "bg-[var(--matcha-300)]/30 border-[var(--matcha-300)] text-[var(--matcha-800)] font-medium"
+                                      //   : "border-[var(--oat-border)] text-[var(--warm-charcoal)]"
+                                      "border-[var(--oat-border)] text-[var(--warm-charcoal)]"
+                                    }`}
+                                  >
+                                    {opt.key}. {opt.text}
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                            {/* <p className="text-xs text-[var(--warm-charcoal)]">
+                              <span className="font-semibold">Jawaban:</span> {q.correctAnswer}
+                            </p>
+                            <p className="text-xs text-[var(--warm-charcoal)] mt-1">
+                              <span className="font-semibold">Penjelasan:</span> {q.explanation}
+                            </p> */}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </CardContent>
+                )}
+
+                {job.status === "failed" && (
+                  <CardContent className="pt-0">
+                    <div className="p-3 rounded-[var(--radius-md)] bg-[var(--pomegranate-400)]/10 text-[var(--pomegranate-400)] text-sm border-2 border-[var(--pomegranate-400)]/20">
+                      <MaterialIcon name="error" className="text-sm mr-1" />
+                      {job.errorMessage ?? "Generation failed"}
+                    </div>
+                  </CardContent>
+                )}
+              </Card>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -140,10 +140,8 @@ function PackageDetailComponent() {
               ) : (
                 <div className="space-y-3">
                   {section.questions.map((q: any, idx: number) => (
-                    <Link
+                    <div
                       key={q.id}
-                      to="/bank/$id"
-                      params={{ id: q.id }}
                       className="block p-4 rounded-[var(--radius-lg)] bg-[var(--oat-light)] hover:bg-[var(--matcha-300)]/10 transition-colors"
                     >
                       <div className="flex items-start gap-3">
@@ -164,7 +162,7 @@ function PackageDetailComponent() {
                           </div>
                         </div>
                       </div>
-                    </Link>
+                    </div>
                   ))}
                 </div>
               )}
@@ -175,10 +173,12 @@ function PackageDetailComponent() {
 
       {/* Actions */}
       <div className="flex gap-3 mt-8">
-        <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
-          <MaterialIcon name="play_arrow" />
-          <span className="ml-2">Mulai Latihan</span>
-        </Button>
+        <Link to="/package/$id/take" params={{ id }}>
+          <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
+            <MaterialIcon name="play_arrow" />
+            <span className="ml-2">Mulai Latihan</span>
+          </Button>
+        </Link>
         {isOwner && (
           <Button
             variant="outline"

apps/web/src/routes/packages.tsx

@@ -70,7 +70,7 @@ function PackagesComponent() {
               Kumpulan paket latihan dari komunitas.
             </p>
           </div>
-          <Link to="/builder">
+          <Link to="/bank">
             <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)] h-11">
               <MaterialIcon name="add" />
               <span className="ml-2 hidden sm:inline">Buat Paket</span>

apps/web/src/routes/settings.tsx

@@ -37,13 +37,14 @@ function RouteComponent() {
   const [baseUrl, setBaseUrl] = useState(storedKey?.baseUrl ?? "https://api.openai.com/v1");
   const [apiKey, setApiKey] = useState("");
   const [modelName, setModelName] = useState(storedKey?.modelName ?? "gpt-4o-mini");
+  const [maxTokens, setMaxTokens] = useState<number>(storedKey?.maxTokens ?? 16384);
   const [isSaving, setIsSaving] = useState(false);
 
   const handleSave = async () => {
     if (!apiKey) return;
     setIsSaving(true);
     try {
-      await saveKey({ provider, baseUrl, apiKey, modelName });
+      await saveKey({ provider, baseUrl, apiKey, modelName, maxTokens });
       setApiKey("");
     } finally {
       setIsSaving(false);
@@ -114,15 +115,30 @@ function RouteComponent() {
                 </div>
               </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="baseUrl" className="text-[var(--clay-black)]">Base URL</Label>
-                <Input
-                  id="baseUrl"
-                  value={baseUrl}
-                  onChange={(e) => setBaseUrl(e.target.value)}
-                  placeholder="https://api.openai.com/v1"
-                  className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
-                />
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="baseUrl" className="text-[var(--clay-black)]">Base URL</Label>
+                  <Input
+                    id="baseUrl"
+                    value={baseUrl}
+                    onChange={(e) => setBaseUrl(e.target.value)}
+                    placeholder="https://api.openai.com/v1"
+                    className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="maxTokens" className="text-[var(--clay-black)]">Max Tokens</Label>
+                  <Input
+                    id="maxTokens"
+                    type="number"
+                    min={1}
+                    max={65536}
+                    value={maxTokens}
+                    onChange={(e) => setMaxTokens(Number(e.target.value))}
+                    placeholder="16384"
+                    className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+                  />
+                </div>
               </div>
 
               <div className="space-y-2">

bun.lock

@@ -100,8 +100,11 @@
         "@labas/env": "workspace:*",
         "@trpc/client": "catalog:",
         "@trpc/server": "catalog:",
+        "bullmq": "^5.76.2",
         "dotenv": "catalog:",
         "drizzle-orm": "^0.45.1",
+        "ioredis": "^5.10.1",
+        "winston": "^3.19.0",
         "zod": "catalog:",
       },
       "devDependencies": {
@@ -412,6 +415,10 @@
 
     "@canvas/image-data": ["@canvas/image-data@1.1.0", "", {}, "sha512-QdObRRjRbcXGmM1tmJ+MrHcaz1MftF2+W7YI+MsphnsCrmtyfS0d5qJbk0MeSbUeyM/jCb0hmnkXPsy026L7dA=="],
 
+    "@colors/colors": ["@colors/colors@1.6.0", "", {}, "sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA=="],
+
+    "@dabh/diagnostics": ["@dabh/diagnostics@2.0.8", "", { "dependencies": { "@so-ric/colorspace": "^1.1.6", "enabled": "2.0.x", "kuler": "^2.0.0" } }, "sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q=="],
+
     "@dotenvx/dotenvx": ["@dotenvx/dotenvx@1.63.0", "", { "dependencies": { "commander": "^11.1.0", "dotenv": "^17.2.1", "eciesjs": "^0.4.10", "execa": "^5.1.1", "fdir": "^6.2.0", "ignore": "^5.3.0", "object-treeify": "1.1.33", "picomatch": "^4.0.4", "which": "^4.0.0", "yocto-spinner": "^1.1.0" }, "bin": { "dotenvx": "src/cli/dotenvx.js" } }, "sha512-jjkmzIRu19uH78AjFInqfcALehbDCZZ7M09hurVawyqNxtOXEg2LR73L59y4QnzfYDEzjbhVzGAd2uDHu0D1aQ=="],
 
     "@drizzle-team/brocli": ["@drizzle-team/brocli@0.10.2", "", {}, "sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w=="],
@@ -542,6 +549,8 @@
 
     "@inquirer/type": ["@inquirer/type@4.0.5", "", { "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-aetVUNeKNc/VriqXlw1NRSW0zhMBB0W4bNbWRJgzRl/3d0QNDQFfk0GO5SDdtjMZVg6o8ZKEiadd7SCCzoOn5Q=="],
 
+    "@ioredis/commands": ["@ioredis/commands@1.5.1", "", {}, "sha512-JH8ZL/ywcJyR9MmJ5BNqZllXNZQqQbnVZOqpPQqE1vHiFgAw4NHbvE0FOduNU8IX9babitBT46571OnPTT0Zcw=="],
+
     "@isaacs/cliui": ["@isaacs/cliui@9.0.0", "", {}, "sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg=="],
 
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
@@ -574,6 +583,18 @@
 
     "@mongodb-js/saslprep": ["@mongodb-js/saslprep@1.4.9", "", { "dependencies": { "sparse-bitfield": "^3.0.3" } }, "sha512-RXSxsokhAF/4nWys8An8npsqOI33Ex1Hlzqjw2pZOO+GKtMAR2noGnUdsFiGwsaO/xXI+56mtjTmDA3JXJsvmA=="],
 
+    "@msgpackr-extract/msgpackr-extract-darwin-arm64": ["@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw=="],
+
+    "@msgpackr-extract/msgpackr-extract-darwin-x64": ["@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw=="],
+
+    "@msgpackr-extract/msgpackr-extract-linux-arm": ["@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3", "", { "os": "linux", "cpu": "arm" }, "sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw=="],
+
+    "@msgpackr-extract/msgpackr-extract-linux-arm64": ["@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg=="],
+
+    "@msgpackr-extract/msgpackr-extract-linux-x64": ["@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg=="],
+
+    "@msgpackr-extract/msgpackr-extract-win32-x64": ["@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3", "", { "os": "win32", "cpu": "x64" }, "sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ=="],
+
     "@mswjs/interceptors": ["@mswjs/interceptors@0.41.6", "", { "dependencies": { "@open-draft/deferred-promise": "^2.2.0", "@open-draft/logger": "^0.3.0", "@open-draft/until": "^2.0.0", "is-node-process": "^1.2.0", "outvariant": "^1.4.3", "strict-event-emitter": "^0.5.1" } }, "sha512-qmDvJIjcNsZ6tXWy2G9yuCgMPTTn35GMA3dPpSLm7QJVpbQzYdw0ALy1bKoivXnEM3U93/OrK+/M719b+fg84Q=="],
 
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
@@ -646,6 +667,8 @@
 
     "@sindresorhus/merge-streams": ["@sindresorhus/merge-streams@4.0.0", "", {}, "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ=="],
 
+    "@so-ric/colorspace": ["@so-ric/colorspace@1.1.6", "", { "dependencies": { "color": "^5.0.2", "text-hex": "1.0.x" } }, "sha512-/KiKkpHNOBgkFJwu9sh48LkHSMYGyuTcSFK/qMBdnOAlrRJzRSXAOFB5qwzaVQuDl8wAvHVMkaASQDReTahxuw=="],
+
     "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
 
     "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
@@ -764,6 +787,8 @@
 
     "@types/statuses": ["@types/statuses@2.0.6", "", {}, "sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA=="],
 
+    "@types/triple-beam": ["@types/triple-beam@1.3.5", "", {}, "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw=="],
+
     "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
 
     "@types/validate-npm-package-name": ["@types/validate-npm-package-name@4.0.2", "", {}, "sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw=="],
@@ -844,6 +869,8 @@
 
     "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
 
+    "bullmq": ["bullmq@5.76.2", "", { "dependencies": { "cron-parser": "4.9.0", "ioredis": "5.10.1", "msgpackr": "1.11.5", "node-abort-controller": "3.1.1", "semver": "7.7.4", "tslib": "2.8.1" } }, "sha512-kkNU6TPAjqV3Ep0kIaYhT79Z2IMoA7vadqjmr/zvmPicg0K/cOAecqZTihD726LbI043yPU0MBv/nMQmd5rNIg=="],
+
     "bun-types": ["bun-types@1.3.13", "", { "dependencies": { "@types/node": "*" } }, "sha512-QXKeHLlOLqQX9LgYaHJfzdBaV21T63HhFJnvuRCcjZiaUDpbs5ED1MgxbMra71CsryN/1dAoXuJJJwIv/2drVA=="],
 
     "bundle-name": ["bundle-name@4.1.0", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q=="],
@@ -878,6 +905,8 @@
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
+    "cluster-key-slot": ["cluster-key-slot@1.1.2", "", {}, "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA=="],
+
     "code-block-writer": ["code-block-writer@13.0.3", "", {}, "sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg=="],
 
     "color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
@@ -914,6 +943,8 @@
 
     "cosmiconfig": ["cosmiconfig@9.0.1", "", { "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", "parse-json": "^5.2.0" }, "peerDependencies": { "typescript": ">=4.9.5" }, "optionalPeers": ["typescript"] }, "sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ=="],
 
+    "cron-parser": ["cron-parser@4.9.0", "", { "dependencies": { "luxon": "^3.2.1" } }, "sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q=="],
+
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
     "crypto-random-string": ["crypto-random-string@2.0.0", "", {}, "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="],
@@ -952,6 +983,8 @@
 
     "defu": ["defu@6.1.7", "", {}, "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ=="],
 
+    "denque": ["denque@2.1.0", "", {}, "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw=="],
+
     "depd": ["depd@2.0.0", "", {}, "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="],
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
@@ -980,6 +1013,8 @@
 
     "empathic": ["empathic@2.0.0", "", {}, "sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA=="],
 
+    "enabled": ["enabled@2.0.0", "", {}, "sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ=="],
+
     "encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],
 
     "enhanced-resolve": ["enhanced-resolve@5.21.0", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-otxSQPw4lkOZWkHpB3zaEQs6gWYEsmX4xQF68ElXC/TWvGxGMSGOvoNbaLXm6/cS/fSfHtsEdw90y20PCd+sCA=="],
@@ -1042,6 +1077,8 @@
 
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
+    "fecha": ["fecha@4.2.3", "", {}, "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw=="],
+
     "fetch-blob": ["fetch-blob@3.2.0", "", { "dependencies": { "node-domexception": "^1.0.0", "web-streams-polyfill": "^3.0.3" } }, "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ=="],
 
     "figures": ["figures@6.1.0", "", { "dependencies": { "is-unicode-supported": "^2.0.0" } }, "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg=="],
@@ -1054,6 +1091,8 @@
 
     "flag-icons": ["flag-icons@7.5.0", "", {}, "sha512-kd+MNXviFIg5hijH766tt+3x76ele1AXlo4zDdCxIvqWZhKt4T83bOtxUOOMlTx/EcFdUMH5yvQgYlFh1EqqFg=="],
 
+    "fn.name": ["fn.name@1.1.0", "", {}, "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw=="],
+
     "for-each": ["for-each@0.3.5", "", { "dependencies": { "is-callable": "^1.2.7" } }, "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg=="],
 
     "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
@@ -1154,6 +1193,8 @@
 
     "internal-slot": ["internal-slot@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "hasown": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw=="],
 
+    "ioredis": ["ioredis@5.10.1", "", { "dependencies": { "@ioredis/commands": "1.5.1", "cluster-key-slot": "^1.1.0", "debug": "^4.3.4", "denque": "^2.1.0", "lodash.defaults": "^4.2.0", "lodash.isarguments": "^3.1.0", "redis-errors": "^1.2.0", "redis-parser": "^3.0.0", "standard-as-callback": "^2.1.0" } }, "sha512-HuEDBTI70aYdx1v6U97SbNx9F1+svQKBDo30o0b9fw055LMepzpOOd0Ccg9Q6tbqmBSJaMuY0fB7yw9/vjBYCA=="],
+
     "ip-address": ["ip-address@10.1.0", "", {}, "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q=="],
 
     "ipaddr.js": ["ipaddr.js@1.9.1", "", {}, "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="],
@@ -1222,7 +1263,7 @@
 
     "is-shared-array-buffer": ["is-shared-array-buffer@1.0.4", "", { "dependencies": { "call-bound": "^1.0.3" } }, "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A=="],
 
-    "is-stream": ["is-stream@4.0.1", "", {}, "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A=="],
+    "is-stream": ["is-stream@2.0.1", "", {}, "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="],
 
     "is-string": ["is-string@1.1.1", "", { "dependencies": { "call-bound": "^1.0.3", "has-tostringtag": "^1.0.2" } }, "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA=="],
 
@@ -1274,6 +1315,8 @@
 
     "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
 
+    "kuler": ["kuler@2.0.0", "", {}, "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A=="],
+
     "kysely": ["kysely@0.28.16", "", {}, "sha512-3i5pmOiZvMDj00qhrIVbH0AnioVTx22DMP7Vn5At4yJO46iy+FM8Y/g61ltenLVSo3fiO8h8Q3QOFgf/gQ72ww=="],
 
     "leven": ["leven@3.1.0", "", {}, "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="],
@@ -1308,14 +1351,22 @@
 
     "lodash.debounce": ["lodash.debounce@4.0.8", "", {}, "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="],
 
+    "lodash.defaults": ["lodash.defaults@4.2.0", "", {}, "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ=="],
+
+    "lodash.isarguments": ["lodash.isarguments@3.1.0", "", {}, "sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg=="],
+
     "lodash.sortby": ["lodash.sortby@4.7.0", "", {}, "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="],
 
     "log-symbols": ["log-symbols@6.0.0", "", { "dependencies": { "chalk": "^5.3.0", "is-unicode-supported": "^1.3.0" } }, "sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw=="],
 
+    "logform": ["logform@2.7.0", "", { "dependencies": { "@colors/colors": "1.6.0", "@types/triple-beam": "^1.3.2", "fecha": "^4.2.0", "ms": "^2.1.1", "safe-stable-stringify": "^2.3.1", "triple-beam": "^1.3.0" } }, "sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ=="],
+
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
     "lucide-react": ["lucide-react@0.546.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Z94u6fKT43lKeYHiVyvyR8fT7pwCzDu7RyMPpTvh054+xahSgj4HFQ+NmflvzdXsoAjYGdCguGaFKYuvq0ThCQ=="],
 
+    "luxon": ["luxon@3.7.2", "", {}, "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
@@ -1352,6 +1403,10 @@
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
+    "msgpackr": ["msgpackr@1.11.5", "", { "optionalDependencies": { "msgpackr-extract": "^3.0.2" } }, "sha512-UjkUHN0yqp9RWKy0Lplhh+wlpdt9oQBYgULZOiFhV3VclSF1JnSQWZ5r9gORQlNYaUKQoR8itv7g7z1xDDuACA=="],
+
+    "msgpackr-extract": ["msgpackr-extract@3.0.3", "", { "dependencies": { "node-gyp-build-optional-packages": "5.2.2" }, "optionalDependencies": { "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.3", "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.3", "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.3", "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.3", "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.3", "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.3" }, "bin": { "download-msgpackr-prebuilds": "bin/download-prebuilds.js" } }, "sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA=="],
+
     "msw": ["msw@2.13.6", "", { "dependencies": { "@inquirer/confirm": "^6.0.11", "@mswjs/interceptors": "^0.41.3", "@open-draft/deferred-promise": "^3.0.0", "@types/statuses": "^2.0.6", "cookie": "^1.1.1", "graphql": "^16.13.2", "headers-polyfill": "^5.0.1", "is-node-process": "^1.2.0", "outvariant": "^1.4.3", "path-to-regexp": "^6.3.0", "picocolors": "^1.1.1", "rettime": "^0.11.7", "statuses": "^2.0.2", "strict-event-emitter": "^0.5.1", "tough-cookie": "^6.0.1", "type-fest": "^5.5.0", "until-async": "^3.0.2", "yargs": "^17.7.2" }, "peerDependencies": { "typescript": ">= 4.8.x" }, "optionalPeers": ["typescript"], "bin": { "msw": "cli/index.js" } }, "sha512-GAJbQy8Ra/Ydjt0Hb2MGT2qhzd83J3+QZMHdH85uW7r/XkKc846+Ma2PLif5hGvTm5Yqa+wkcstpim0WeLZU9g=="],
 
     "mute-stream": ["mute-stream@3.0.0", "", {}, "sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw=="],
@@ -1364,10 +1419,14 @@
 
     "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
 
+    "node-abort-controller": ["node-abort-controller@3.1.1", "", {}, "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ=="],
+
     "node-domexception": ["node-domexception@1.0.0", "", {}, "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ=="],
 
     "node-fetch": ["node-fetch@3.3.2", "", { "dependencies": { "data-uri-to-buffer": "^4.0.0", "fetch-blob": "^3.1.4", "formdata-polyfill": "^4.0.10" } }, "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA=="],
 
+    "node-gyp-build-optional-packages": ["node-gyp-build-optional-packages@5.2.2", "", { "dependencies": { "detect-libc": "^2.0.1" }, "bin": { "node-gyp-build-optional-packages": "bin.js", "node-gyp-build-optional-packages-optional": "optional.js", "node-gyp-build-optional-packages-test": "build-test.js" } }, "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw=="],
+
     "node-releases": ["node-releases@2.0.38", "", {}, "sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw=="],
 
     "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
@@ -1390,6 +1449,8 @@
 
     "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],
 
+    "one-time": ["one-time@1.0.0", "", { "dependencies": { "fn.name": "1.x.x" } }, "sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g=="],
+
     "onetime": ["onetime@5.1.2", "", { "dependencies": { "mimic-fn": "^2.1.0" } }, "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg=="],
 
     "open": ["open@11.0.0", "", { "dependencies": { "default-browser": "^5.4.0", "define-lazy-prop": "^3.0.0", "is-in-ssh": "^1.0.0", "is-inside-container": "^1.0.0", "powershell-utils": "^0.1.0", "wsl-utils": "^0.3.0" } }, "sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw=="],
@@ -1492,10 +1553,16 @@
 
     "react-hook-form": ["react-hook-form@7.73.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-VAfVYOPcx3piiEVQy95vyFmBwbVUsP/AUIN+mpFG8h11yshDd444nn0VyfaGWSRnhOLVgiDu7HIuBtAIzxn9dA=="],
 
+    "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=="],
+
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
     "recast": ["recast@0.23.11", "", { "dependencies": { "ast-types": "^0.16.1", "esprima": "~4.0.0", "source-map": "~0.6.1", "tiny-invariant": "^1.3.3", "tslib": "^2.0.1" } }, "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA=="],
 
+    "redis-errors": ["redis-errors@1.2.0", "", {}, "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w=="],
+
+    "redis-parser": ["redis-parser@3.0.0", "", { "dependencies": { "redis-errors": "^1.0.0" } }, "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A=="],
+
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
 
     "regenerate": ["regenerate@1.4.2", "", {}, "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="],
@@ -1550,6 +1617,8 @@
 
     "safe-regex-test": ["safe-regex-test@1.1.0", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-regex": "^1.2.1" } }, "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw=="],
 
+    "safe-stable-stringify": ["safe-stable-stringify@2.5.0", "", {}, "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA=="],
+
     "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
 
     "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
@@ -1618,6 +1687,10 @@
 
     "split2": ["split2@4.2.0", "", {}, "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg=="],
 
+    "stack-trace": ["stack-trace@0.0.10", "", {}, "sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg=="],
+
+    "standard-as-callback": ["standard-as-callback@2.1.0", "", {}, "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A=="],
+
     "statuses": ["statuses@2.0.2", "", {}, "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="],
 
     "stdin-discarder": ["stdin-discarder@0.2.2", "", {}, "sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ=="],
@@ -1636,6 +1709,8 @@
 
     "string.prototype.trimstart": ["string.prototype.trimstart@1.0.8", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", "es-object-atoms": "^1.0.0" } }, "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg=="],
 
+    "string_decoder": ["string_decoder@1.3.0", "", { "dependencies": { "safe-buffer": "~5.2.0" } }, "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA=="],
+
     "stringify-object": ["stringify-object@5.0.0", "", { "dependencies": { "get-own-enumerable-keys": "^1.0.0", "is-obj": "^3.0.0", "is-regexp": "^3.1.0" } }, "sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg=="],
 
     "strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "^6.2.2" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
@@ -1662,6 +1737,8 @@
 
     "terser": ["terser@5.46.2", "", { "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.15.0", "commander": "^2.20.0", "source-map-support": "~0.5.20" }, "bin": { "terser": "bin/terser" } }, "sha512-uxfo9fPcSgLDYob/w1FuL0c99MWiJDnv+5qXSQc5+Ki5NjVNsYi66INnMFBjf6uFz6OnX12piJQPF4IpjJTNTw=="],
 
+    "text-hex": ["text-hex@1.0.0", "", {}, "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg=="],
+
     "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
 
     "tinyexec": ["tinyexec@1.1.1", "", {}, "sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg=="],
@@ -1684,6 +1761,8 @@
 
     "tree-kill": ["tree-kill@1.2.2", "", { "bin": { "tree-kill": "cli.js" } }, "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="],
 
+    "triple-beam": ["triple-beam@1.4.1", "", {}, "sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg=="],
+
     "ts-morph": ["ts-morph@26.0.0", "", { "dependencies": { "@ts-morph/common": "~0.27.0", "code-block-writer": "^13.0.3" } }, "sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug=="],
 
     "tsconfig-paths": ["tsconfig-paths@4.2.0", "", { "dependencies": { "json5": "^2.2.2", "minimist": "^1.2.6", "strip-bom": "^3.0.0" } }, "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg=="],
@@ -1778,6 +1857,10 @@
 
     "which-typed-array": ["which-typed-array@1.1.20", "", { "dependencies": { "available-typed-arrays": "^1.0.7", "call-bind": "^1.0.8", "call-bound": "^1.0.4", "for-each": "^0.3.5", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-tostringtag": "^1.0.2" } }, "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg=="],
 
+    "winston": ["winston@3.19.0", "", { "dependencies": { "@colors/colors": "^1.6.0", "@dabh/diagnostics": "^2.0.8", "async": "^3.2.3", "is-stream": "^2.0.0", "logform": "^2.7.0", "one-time": "^1.0.0", "readable-stream": "^3.4.0", "safe-stable-stringify": "^2.3.1", "stack-trace": "0.0.x", "triple-beam": "^1.3.0", "winston-transport": "^4.9.0" } }, "sha512-LZNJgPzfKR+/J3cHkxcpHKpKKvGfDZVPS4hfJCc4cCG0CgYzvlD6yE/S3CIL/Yt91ak327YCpiF/0MyeZHEHKA=="],
+
+    "winston-transport": ["winston-transport@4.9.0", "", { "dependencies": { "logform": "^2.7.0", "readable-stream": "^3.6.2", "triple-beam": "^1.3.0" } }, "sha512-8drMJ4rkgaPo1Me4zD/3WLfI/zPdA9o2IipKODunnGDcuqbHwjsbB79ylv04LCGGzU0xQ6vTznOMpQGaLhhm6A=="],
+
     "workbox-background-sync": ["workbox-background-sync@7.4.0", "", { "dependencies": { "idb": "^7.0.1", "workbox-core": "7.4.0" } }, "sha512-8CB9OxKAgKZKyNMwfGZ1XESx89GryWTfI+V5yEj8sHjFH8MFelUwYXEyldEK6M6oKMmn807GoJFUEA1sC4XS9w=="],
 
     "workbox-broadcast-update": ["workbox-broadcast-update@7.4.0", "", { "dependencies": { "workbox-core": "7.4.0" } }, "sha512-+eZQwoktlvo62cI0b+QBr40v5XjighxPq3Fzo9AWMiAosmpG5gxRHgTbGGhaJv/q/MFVxwFNGh/UwHZ/8K88lA=="],
@@ -1874,6 +1957,8 @@
 
     "@rollup/pluginutils/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
+    "@so-ric/colorspace/color": ["color@5.0.3", "", { "dependencies": { "color-convert": "^3.1.3", "color-string": "^2.1.3" } }, "sha512-ezmVcLR3xAVp8kYOm4GS45ZLLgIE6SPAFoduLr6hTDajwb3KZ2F46gulK3XpcwRFb5KKGCSezCBAY4Dw4HsyXA=="],
+
     "@surma/rollup-plugin-off-main-thread/magic-string": ["magic-string@0.25.9", "", { "dependencies": { "sourcemap-codec": "^1.4.8" } }, "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" }, "bundled": true }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
@@ -1910,10 +1995,14 @@
 
     "eciesjs/@noble/hashes": ["@noble/hashes@1.8.0", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
 
+    "execa/is-stream": ["is-stream@4.0.1", "", {}, "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A=="],
+
     "express/cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
 
     "filelist/minimatch": ["minimatch@5.1.9", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw=="],
 
+    "get-stream/is-stream": ["is-stream@4.0.1", "", {}, "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A=="],
+
     "log-symbols/is-unicode-supported": ["is-unicode-supported@1.3.0", "", {}, "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ=="],
 
     "micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
@@ -1942,8 +2031,6 @@
 
     "simple-swizzle/is-arrayish": ["is-arrayish@0.3.4", "", {}, "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA=="],
 
-    "tempy/is-stream": ["is-stream@2.0.1", "", {}, "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="],
-
     "tempy/type-fest": ["type-fest@0.16.0", "", {}, "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg=="],
 
     "terser/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
@@ -1970,8 +2057,6 @@
 
     "@dotenvx/dotenvx/execa/human-signals": ["human-signals@2.1.0", "", {}, "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="],
 
-    "@dotenvx/dotenvx/execa/is-stream": ["is-stream@2.0.1", "", {}, "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="],
-
     "@dotenvx/dotenvx/execa/npm-run-path": ["npm-run-path@4.0.1", "", { "dependencies": { "path-key": "^3.0.0" } }, "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw=="],
 
     "@dotenvx/dotenvx/execa/signal-exit": ["signal-exit@3.0.7", "", {}, "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="],
@@ -2024,6 +2109,10 @@
 
     "@rollup/plugin-node-resolve/@rollup/pluginutils/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
+    "@so-ric/colorspace/color/color-convert": ["color-convert@3.1.3", "", { "dependencies": { "color-name": "^2.0.0" } }, "sha512-fasDH2ont2GqF5HpyO4w0+BcewlhHEZOFn9c1ckZdHpJ56Qb7MHhH/IcJZbBGgvdtwdwNbLvxiBEdg336iA9Sg=="],
+
+    "@so-ric/colorspace/color/color-string": ["color-string@2.1.4", "", { "dependencies": { "color-name": "^2.0.0" } }, "sha512-Bb6Cq8oq0IjDOe8wJmi4JeNn763Xs9cfrBcaylK1tPypWzyoy2G3l90v9k64kjphl/ZJjPIShFztenRomi8WTg=="],
+
     "ast-kit/@babel/parser/@babel/types": ["@babel/types@8.0.0-rc.3", "", { "dependencies": { "@babel/helper-string-parser": "^8.0.0-rc.3", "@babel/helper-validator-identifier": "^8.0.0-rc.3" } }, "sha512-mOm5ZrYmphGfqVWoH5YYMTITb3cDXsFgmvFlvkvWDMsR9X8RFnt7a0Wb6yNIdoFsiMO9WjYLq+U/FMtqIYAF8Q=="],
 
     "cliui/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
@@ -2102,6 +2191,10 @@
 
     "yargs/string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
+    "@so-ric/colorspace/color/color-convert/color-name": ["color-name@2.1.0", "", {}, "sha512-1bPaDNFm0axzE4MEAzKPuqKWeRaT43U/hyxKPBdqTfmPF+d6n7FSoTFxLVULUJOmiLp01KjhIPPH+HrXZJN4Rg=="],
+
+    "@so-ric/colorspace/color/color-string/color-name": ["color-name@2.1.0", "", {}, "sha512-1bPaDNFm0axzE4MEAzKPuqKWeRaT43U/hyxKPBdqTfmPF+d6n7FSoTFxLVULUJOmiLp01KjhIPPH+HrXZJN4Rg=="],
+
     "ast-kit/@babel/parser/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@8.0.0-rc.3", "", {}, "sha512-AmwWFx1m8G/a5cXkxLxTiWl+YEoWuoFLUCwqMlNuWO1tqAYITQAbCRPUkyBHv1VOFgfjVOqEj6L3u15J5ZCzTA=="],
 
     "filelist/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],

packages/ai/src/agentic.ts

@@ -0,0 +1,336 @@
+import { OpenAICompatibleClient } from "./client";
+import { questionSchema, type GenerationInput, type GenerationResult } from "./schemas";
+
+interface AgenticStep {
+  step: string;
+  status: "running" | "done" | "error" | "pending";
+  message?: string;
+}
+
+export interface AgenticProgress {
+  steps: AgenticStep[];
+  currentStep: number;
+}
+
+function getSystemPrompt(): string {
+  return "You are a precise exam question generator. You always return valid JSON. You never include markdown formatting around the JSON.";
+}
+
+function getTargetLanguage(examType: string): string {
+  if (examType === "JLPT") return "Japanese";
+  if (examType === "HSK") return "Chinese";
+  if (examType === "GOETHE") return "German";
+  return "English";
+}
+
+function parseJsonResponse(content: string): unknown {
+  if (!content) throw new Error("Empty response from AI");
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(content);
+  } catch {
+    const cleaned = content
+      .replace(/^```json\s*/, "")
+      .replace(/```\s*$/, "")
+      .trim();
+    parsed = JSON.parse(cleaned);
+  }
+  return parsed;
+}
+
+async function step1GeneratePassage(
+  client: OpenAICompatibleClient,
+  input: GenerationInput,
+): Promise<{ passage: string; title: string }> {
+  const prompt = `Generate an authentic, high-quality reading passage for ${input.examType} ${input.section.toLowerCase()} section at difficulty level ${input.difficulty}/5.
+
+Requirements:
+- Language: ${getTargetLanguage(input.examType)}
+- Topics: ${input.topics.join(", ")}
+- Difficulty: ${input.difficulty}/5
+- The passage should be natural, well-structured, and appropriate for the exam level
+- Length should be suitable for ${input.questionCount} comprehension questions
+
+Return ONLY valid JSON:
+{
+  "title": "Brief title describing the passage topic",
+  "passage": "The full reading passage text..."
+}`;
+
+  const result = await client.chatCompletion({
+    model: input.apiKeyConfig.model,
+    messages: [
+      { role: "system", content: getSystemPrompt() },
+      { role: "user", content: prompt },
+    ],
+    temperature: 0.7,
+    max_tokens: input.apiKeyConfig.maxTokens,
+  });
+
+  const parsed = parseJsonResponse(result.content) as Record<string, unknown>;
+  if (!parsed.passage || typeof parsed.passage !== "string") {
+    throw new Error("Invalid passage generation response");
+  }
+  return {
+    passage: parsed.passage,
+    title: typeof parsed.title === "string" ? parsed.title : "Untitled Passage",
+  };
+}
+
+async function step2ValidatePassage(
+  client: OpenAICompatibleClient,
+  input: GenerationInput,
+  passage: string,
+): Promise<{ isValid: boolean; feedback: string }> {
+  const prompt = `Validate this reading passage for a ${input.examType} exam at difficulty ${input.difficulty}/5.
+
+Passage:
+"""
+${passage}
+"""
+
+Check:
+1. Grammar and spelling correctness
+2. Difficulty appropriateness (${input.difficulty}/5)
+3. Length sufficiency for ${input.questionCount} questions
+4. Topic relevance: ${input.topics.join(", ")}
+5. Natural flow and coherence
+
+Return ONLY valid JSON:
+{
+  "isValid": true/false,
+  "feedback": "Brief assessment. If invalid, explain why.",
+  "score": number from 1-10
+}`;
+
+  const result = await client.chatCompletion({
+    model: input.apiKeyConfig.model,
+    messages: [
+      { role: "system", content: getSystemPrompt() },
+      { role: "user", content: prompt },
+    ],
+    temperature: 0.3,
+    max_tokens: input.apiKeyConfig.maxTokens,
+  });
+
+  const parsed = parseJsonResponse(result.content) as Record<string, unknown>;
+  return {
+    isValid: !!parsed.isValid,
+    feedback: typeof parsed.feedback === "string" ? parsed.feedback : "No feedback",
+  };
+}
+
+async function step3GenerateQuestions(
+  client: OpenAICompatibleClient,
+  input: GenerationInput,
+  passage: string,
+): Promise<Array<Record<string, unknown>>> {
+  const formats = input.formats;
+  const formatInstructions = formats
+    .map((f) => {
+      const schemas: Record<string, string> = {
+        multiple_choice: `{"format":"multiple_choice","questionText":"...","options":[{"key":"A","text":"..."},...],"correctAnswer":"A","explanation":"...","difficulty":${input.difficulty},"skillTags":["..."]`,
+        true_false_not_given: `{"format":"true_false_not_given","questionText":"...","correctAnswer":"TRUE|FALSE|NOT_GIVEN","explanation":"...","difficulty":${input.difficulty},"skillTags":["..."]`,
+        fill_blank: `{"format":"fill_blank","questionText":"...","correctAnswer":"exact text","explanation":"...","difficulty":${input.difficulty},"skillTags":["..."]`,
+        synonym: `{"format":"synonym","questionText":"...","options":[{"key":"A","text":"..."},...],"correctAnswer":"A","explanation":"...","difficulty":${input.difficulty},"skillTags":["vocabulary","synonym"]`,
+        grammar_in_context: `{"format":"grammar_in_context","questionText":"...","options":[{"key":"A","text":"..."},...],"correctAnswer":"A","explanation":"...","difficulty":${input.difficulty},"skillTags":["grammar"]`,
+        sentence_completion: `{"format":"sentence_completion","questionText":"...","options":[{"key":"A","text":"..."},...],"correctAnswer":"A","explanation":"...","difficulty":${input.difficulty},"skillTags":["..."]`,
+        cloze: `{"format":"cloze","questionText":"...","options":[{"key":"A","text":"..."},...],"correctAnswer":"serialized mapping","explanation":"...","difficulty":${input.difficulty},"skillTags":["grammar","vocabulary"]`,
+        reference: `{"format":"reference","questionText":"...","options":[{"key":"A","text":"..."},...],"correctAnswer":"A","explanation":"...","difficulty":${input.difficulty},"skillTags":["reference","inference"]`,
+        author_view: `{"format":"author_view","questionText":"...","correctAnswer":"YES|NO|NOT_GIVEN","explanation":"...","difficulty":${input.difficulty},"skillTags":["inference","author_view"]`,
+        matching_headings: `{"format":"matching_headings","questionText":"Match each paragraph to a heading:","options":[{"key":"i","text":"..."},...],"correctAnswer":"serialized mapping","explanation":"...","difficulty":${input.difficulty},"skillTags":["main_idea","matching"]`,
+        kanji_reading: `{"format":"kanji_reading","questionText":"...","options":[{"key":"A","text":"..."},...],"correctAnswer":"A","explanation":"...","difficulty":${input.difficulty},"skillTags":["kanji","reading"]`,
+        particle_choice: `{"format":"particle_choice","questionText":"...","options":[{"key":"A","text":"..."},...],"correctAnswer":"A","explanation":"...","difficulty":${input.difficulty},"skillTags":["grammar","particle"]`,
+        article_case: `{"format":"article_case","questionText":"...","options":[{"key":"A","text":"..."},...],"correctAnswer":"A","explanation":"...","difficulty":${input.difficulty},"skillTags":["grammar","article","case"]`,
+      };
+      return schemas[f] || schemas["multiple_choice"];
+    })
+    .join("\n---\n");
+
+  const prompt = `Using the following passage, generate ${input.questionCount} reading comprehension questions for ${input.examType} exam.
+
+Passage:
+"""
+${passage}
+"""
+
+Formats to generate:
+${formatInstructions}
+
+Rules:
+- Each question must be directly answerable from the passage
+- Use "passageText" field with the relevant excerpt from the passage (or full passage if needed)
+- 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
+
+Return ONLY valid JSON:
+{
+  "questions": [
+    // array of question objects matching the format schemas above
+  ]
+}`;
+
+  const result = await client.chatCompletion({
+    model: input.apiKeyConfig.model,
+    messages: [
+      { role: "system", content: getSystemPrompt() },
+      { role: "user", content: prompt },
+    ],
+    temperature: 0.7,
+    max_tokens: input.apiKeyConfig.maxTokens,
+  });
+
+  const parsed = parseJsonResponse(result.content) as Record<string, unknown>;
+  if (!Array.isArray(parsed.questions)) {
+    throw new Error("Missing questions array in AI response");
+  }
+  return parsed.questions as Array<Record<string, unknown>>;
+}
+
+async function step4SelfValidate(
+  client: OpenAICompatibleClient,
+  input: GenerationInput,
+  passage: string,
+  questions: Array<Record<string, unknown>>,
+): Promise<{ correctedQuestions: Array<Record<string, unknown>>; confidence: number }> {
+  const qaPairs = questions
+    .map((q, i) => `Q${i + 1}: ${q.questionText}\nA: ${q.correctAnswer}`)
+    .join("\n\n");
+
+  const prompt = `You are a strict exam validator. Review these questions against the passage and identify any errors.
+
+Passage:
+"""
+${passage}
+"""
+
+Questions & Claimed Answers:
+${qaPairs}
+
+For each question, verify:
+1. Is the claimed answer truly correct based on the passage?
+2. Are there any ambiguous questions?
+3. Are distractors plausible but clearly wrong?
+
+Return ONLY valid JSON:
+{
+  "overallConfidence": number from 0-100,
+  "issues": [
+    {
+      "questionIndex": 0-based index,
+      "issue": "description of problem",
+      "suggestedFix": "corrected answer or explanation"
+    }
+  ],
+  "needsRevision": true/false
+}`;
+
+  const result = await client.chatCompletion({
+    model: input.apiKeyConfig.model,
+    messages: [
+      { role: "system", content: getSystemPrompt() },
+      { role: "user", content: prompt },
+    ],
+    temperature: 0.3,
+    max_tokens: input.apiKeyConfig.maxTokens,
+  });
+
+  const parsed = parseJsonResponse(result.content) as Record<string, unknown>;
+  const confidence = typeof parsed.overallConfidence === "number" ? parsed.overallConfidence : 75;
+  const issues = Array.isArray(parsed.issues) ? parsed.issues : [];
+
+  // Apply fixes if needed
+  const corrected = questions.map((q, i) => {
+    const issue = issues.find((iss: any) => iss?.questionIndex === i);
+    if (issue && issue.suggestedFix) {
+      return { ...q, explanation: `${q.explanation}\n[Validator note: ${issue.suggestedFix}]` };
+    }
+    return q;
+  });
+
+  return { correctedQuestions: corrected, confidence };
+}
+
+export async function generateQuestionsAgentic(
+  input: GenerationInput,
+  onProgress?: (progress: AgenticProgress) => void,
+): Promise<GenerationResult> {
+  const start = Date.now();
+  const client = new OpenAICompatibleClient(
+    input.apiKeyConfig.baseUrl,
+    input.apiKeyConfig.apiKey,
+  );
+
+  const steps: [AgenticStep, AgenticStep, AgenticStep, AgenticStep] = [
+    { step: "generate_passage", status: "running" },
+    { step: "validate_passage", status: "pending" as any },
+    { step: "generate_questions", status: "pending" as any },
+    { step: "self_validate", status: "pending" as any },
+  ];
+
+  const report = (current: number) => {
+    if (onProgress) {
+      onProgress({ steps, currentStep: current });
+    }
+  };
+
+  // Step 1: Generate passage
+  report(0);
+  const { passage, title } = await step1GeneratePassage(client, input);
+  steps[0].status = "done";
+  steps[0].message = `Generated: ${title}`;
+
+  // Step 2: Validate passage
+  steps[1].status = "running";
+  report(1);
+  const validation = await step2ValidatePassage(client, input, passage);
+  steps[1].status = validation.isValid ? "done" : "error";
+  steps[1].message = validation.feedback;
+
+  // Even if not perfect, continue (the feedback is logged)
+
+  // Step 3: Generate questions
+  steps[2].status = "running";
+  report(2);
+  const rawQuestions = await step3GenerateQuestions(client, input, passage);
+  steps[2].status = "done";
+  steps[2].message = `Generated ${rawQuestions.length} questions`;
+
+  // Step 4: Self-validate
+  steps[3].status = "running";
+  report(3);
+  const { correctedQuestions, confidence } = await step4SelfValidate(
+    client,
+    input,
+    passage,
+    rawQuestions,
+  );
+  steps[3].status = "done";
+  steps[3].message = `Confidence score: ${confidence}%`;
+
+  // Parse and validate final questions
+  const questions = correctedQuestions
+    .map((q) => {
+      try {
+        return questionSchema.parse({ ...q, passageText: passage });
+      } catch (e) {
+        console.warn("Question validation failed:", e);
+        return null;
+      }
+    })
+    .filter((q): q is NonNullable<typeof q> => q !== null);
+
+  if (questions.length === 0) {
+    throw new Error("No valid questions generated after agentic validation");
+  }
+
+  return {
+    questions,
+    meta: {
+      model: input.apiKeyConfig.model,
+      durationMs: Date.now() - start,
+      mode: "agentic",
+    },
+  };
+}

packages/ai/src/client.ts

@@ -11,35 +11,121 @@ export interface ChatCompletionOptions {
   response_format?: { type: "json_object" };
 }
 
-export interface ChatCompletionResponse {
-  id: string;
-  choices: {
-    message: ChatMessage;
-    finish_reason: string;
-  }[];
+export interface StreamCallbacks {
+  onToken: (token: string) => void;
+}
+
+export interface ChatCompletionResult {
+  content: string;
   usage?: {
-    prompt_tokens: number;
-    completion_tokens: number;
-    total_tokens: number;
+    prompt_tokens?: number;
+    completion_tokens?: number;
+    total_tokens?: number;
   };
 }
 
+// Simple debug logger that works in both Node and Bun
+function log(
+  level: "info" | "error" | "warn",
+  message: string,
+  meta?: Record<string, unknown>,
+) {
+  const timestamp = new Date().toISOString();
+  const metaStr = meta ? ` ${JSON.stringify(meta)}` : "";
+  // eslint-disable-next-line no-console
+  console[level](`[${timestamp}] [AI-CLIENT] ${level.toUpperCase()}: ${message}${metaStr}`);
+}
+
+function parseSSELine(line: string): { content?: string; usage?: ChatCompletionResult["usage"] } | null {
+  if (!line.startsWith("data: ")) return null;
+  const data = line.slice(6).trim();
+  if (data === "[DONE]") return null;
+  try {
+    const chunk = JSON.parse(data);
+    const content = chunk.choices?.[0]?.delta?.content;
+    const usage = chunk.usage;
+    return { content: typeof content === "string" ? content : undefined, usage };
+  } catch {
+    return null;
+  }
+}
+
+async function readSSEStream(
+  reader: any,
+  callbacks: StreamCallbacks,
+): Promise<{ content: string; usage?: ChatCompletionResult["usage"] }> {
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let fullContent = "";
+  let lastUsage: ChatCompletionResult["usage"] | undefined;
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split("\n");
+    buffer = lines.pop() ?? "";
+
+    for (const line of lines) {
+      const parsed = parseSSELine(line);
+      if (!parsed) continue;
+      if (parsed.content) {
+        fullContent += parsed.content;
+        callbacks.onToken(parsed.content);
+      }
+      if (parsed.usage) {
+        lastUsage = parsed.usage;
+      }
+    }
+  }
+
+  // Process any remaining buffer
+  if (buffer.trim()) {
+    const parsed = parseSSELine(buffer.trim());
+    if (parsed) {
+      if (parsed.content) {
+        fullContent += parsed.content;
+        callbacks.onToken(parsed.content);
+      }
+      if (parsed.usage) {
+        lastUsage = parsed.usage;
+      }
+    }
+  }
+
+  return { content: fullContent, usage: lastUsage };
+}
+
 export class OpenAICompatibleClient {
   constructor(
     private baseUrl: string,
     private apiKey: string,
   ) {}
 
-  async chatCompletion(opts: ChatCompletionOptions): Promise<ChatCompletionResponse> {
+  async chatCompletion(
+    opts: ChatCompletionOptions,
+    callbacks?: StreamCallbacks,
+  ): Promise<ChatCompletionResult> {
     const url = `${this.baseUrl.replace(/\/$/, "")}/chat/completions`;
+    const stream = true;
     const body = {
       model: opts.model,
       messages: opts.messages,
       temperature: opts.temperature ?? 0.7,
-      max_tokens: opts.max_tokens ?? 4096,
+      stream,
+      ...(opts.max_tokens ? { max_tokens: opts.max_tokens } : {}),
       ...(opts.response_format ? { response_format: opts.response_format } : {}),
     };
 
+    log("info", "Sending chat completion request", {
+      url,
+      model: opts.model,
+      messageCount: opts.messages.length,
+      maxTokens: opts.max_tokens,
+      stream,
+    });
+
     const res = await fetch(url, {
       method: "POST",
       headers: {
@@ -47,13 +133,68 @@ export class OpenAICompatibleClient {
         Authorization: `Bearer ${this.apiKey}`,
       },
       body: JSON.stringify(body),
+      signal: AbortSignal.timeout(300_000),
+    });
+
+    log("info", "Received response", {
+      status: res.status,
+      statusText: res.statusText,
+      contentType: res.headers.get("content-type"),
     });
 
     if (!res.ok) {
       const text = await res.text();
-      throw new Error(`OpenAI-compatible API error ${res.status}: ${text}`);
+      const preview = text.slice(0, 500);
+      log("error", "API request failed", {
+        status: res.status,
+        statusText: res.statusText,
+        preview,
+        isHtml: preview.trim().startsWith("<"),
+      });
+
+      if (preview.trim().startsWith("<")) {
+        throw new Error(
+          `Provider returned HTML instead of JSON (status ${res.status}). ` +
+            `This usually means the base URL or endpoint is wrong, or the provider does not support this API. ` +
+            `Preview: ${preview.slice(0, 200)}`,
+        );
+      }
+
+      throw new Error(`OpenAI-compatible API error ${res.status}: ${preview}`);
     }
 
-    return res.json() as Promise<ChatCompletionResponse>;
+    if (!res.body) {
+      throw new Error("Empty response body from API");
+    }
+
+    const reader = res.body.getReader() as any;
+    const result = await readSSEStream(
+      reader,
+      callbacks ?? { onToken: () => {} },
+    );
+
+    // Defense: if content looks like HTML, something went wrong with streaming
+    if (result.content.trim().startsWith("<")) {
+      const preview = result.content.slice(0, 500);
+      log("error", "Stream returned HTML instead of JSON", {
+        preview: preview.slice(0, 200),
+      });
+      throw new Error(
+        `Provider returned HTML in stream instead of JSON. ` +
+          `The provider may not support SSE streaming. ` +
+          `Preview: ${preview.slice(0, 200)}`,
+      );
+    }
+
+    if (!result.content) {
+      throw new Error("Empty response from AI");
+    }
+
+    log("info", "Chat completion successful", {
+      contentLength: result.content.length,
+      usage: result.usage,
+    });
+
+    return result;
   }
 }

packages/ai/src/index.ts

@@ -1,4 +1,6 @@
 export { OpenAICompatibleClient } from "./client";
 export { generateQuestionsQuick } from "./pipeline";
+export { generateQuestionsAgentic } from "./agentic";
+export type { AgenticProgress } from "./agentic";
 export { buildQuickModePrompt } from "./prompts";
 export * from "./schemas";

packages/ai/src/pipeline.ts

@@ -6,47 +6,89 @@ import {
   type GenerationResult,
 } from "./schemas";
 
+export interface QuickModeCallbacks {
+  onToken?: (token: string) => void;
+}
+
+function log(level: "info" | "error" | "warn", message: string, meta?: Record<string, unknown>) {
+  const timestamp = new Date().toISOString();
+  const metaStr = meta ? ` ${JSON.stringify(meta)}` : "";
+  // eslint-disable-next-line no-console
+  console[level](`[${timestamp}] [PIPELINE] ${level.toUpperCase()}: ${message}${metaStr}`);
+}
+
 export async function generateQuestionsQuick(
   input: GenerationInput,
+  callbacks?: QuickModeCallbacks,
 ): Promise<GenerationResult> {
   const start = Date.now();
+  log("info", "Quick mode generation started", {
+    model: input.apiKeyConfig.model,
+    baseUrl: input.apiKeyConfig.baseUrl,
+    examType: input.examType,
+    section: input.section,
+    questionCount: input.questionCount,
+    formats: input.formats,
+    maxTokens: input.apiKeyConfig.maxTokens,
+  });
+
   const client = new OpenAICompatibleClient(
     input.apiKeyConfig.baseUrl,
     input.apiKeyConfig.apiKey,
   );
 
   const prompt = buildQuickModePrompt(input);
+  log("info", "Prompt built", { promptLength: prompt.length });
 
-  const response = await client.chatCompletion({
-    model: input.apiKeyConfig.model,
-    messages: [
+  let result;
+  try {
+    result = await client.chatCompletion(
       {
-        role: "system",
-        content:
-          "You are a precise exam question generator. You always return valid JSON. You never include markdown formatting around the JSON.",
+        model: input.apiKeyConfig.model,
+        messages: [
+          {
+            role: "system",
+            content:
+              "You are a precise exam question generator. You always return valid JSON. You never include markdown formatting around the JSON.",
+          },
+          { role: "user", content: prompt },
+        ],
+        temperature: 0.7,
+        max_tokens: input.apiKeyConfig.maxTokens,
       },
-      { role: "user", content: prompt },
-    ],
-    temperature: 0.7,
-    max_tokens: 4096,
-    response_format: { type: "json_object" },
-  });
-
-  const content = response.choices[0]?.message.content;
-  if (!content) {
-    throw new Error("Empty response from AI");
+      callbacks?.onToken
+        ? { onToken: callbacks.onToken }
+        : undefined,
+    );
+  } catch (err: any) {
+    log("error", "chatCompletion failed in quick mode", { error: err.message });
+    throw err;
   }
 
+  const content = result.content;
+  log("info", "Raw response received", { contentLength: content.length, preview: content.slice(0, 200) });
+
   let parsed: unknown;
   try {
     parsed = JSON.parse(content);
-  } catch {
-    // Sometimes LLM wraps in markdown — strip it
+    log("info", "JSON parsed successfully (direct)");
+  } catch (parseErr: any) {
+    log("warn", "Direct JSON parse failed, trying markdown strip", { error: parseErr.message });
     const cleaned = content
       .replace(/^```json\s*/, "")
       .replace(/```\s*$/, "")
       .trim();
-    parsed = JSON.parse(cleaned);
+    try {
+      parsed = JSON.parse(cleaned);
+      log("info", "JSON parsed successfully after markdown strip");
+    } catch (stripErr: any) {
+      log("error", "JSON parse failed even after markdown strip", {
+        error: stripErr.message,
+        cleanedPreview: cleaned.slice(0, 500),
+        originalPreview: content.slice(0, 500),
+      });
+      throw new Error(`Failed to parse AI response as JSON: ${stripErr.message}. Preview: ${content.slice(0, 200)}`);
+    }
   }
 
   if (!parsed || typeof parsed !== "object") {
@@ -55,29 +97,42 @@ export async function generateQuestionsQuick(
 
   const raw = parsed as Record<string, unknown>;
   if (!Array.isArray(raw.questions)) {
+    log("error", "Missing questions array in parsed JSON", { keys: Object.keys(raw) });
     throw new Error("Missing 'questions' array in AI response");
   }
 
+  log("info", "Validating questions", { rawCount: raw.questions.length });
+
   const questions = raw.questions
-    .map((q: unknown) => {
+    .map((q: unknown, idx: number) => {
       try {
         return questionSchema.parse(q);
-      } catch (e) {
-        console.warn("Question validation failed:", e);
+      } catch (e: any) {
+        log("warn", `Question ${idx} validation failed`, {
+          error: e.message,
+          questionPreview: JSON.stringify(q).slice(0, 200),
+        });
         return null;
       }
     })
     .filter((q): q is NonNullable<typeof q> => q !== null);
 
   if (questions.length === 0) {
+    log("error", "No valid questions after validation", { rawCount: raw.questions.length });
     throw new Error("No valid questions generated");
   }
 
+  log("info", "Quick mode generation completed", {
+    validCount: questions.length,
+    rawCount: raw.questions.length,
+    durationMs: Date.now() - start,
+  });
+
   return {
     questions,
     meta: {
       model: input.apiKeyConfig.model,
-      tokensUsed: response.usage?.total_tokens,
+      tokensUsed: result.usage?.total_tokens,
       durationMs: Date.now() - start,
       mode: "quick",
     },

packages/ai/src/prompts.ts

@@ -152,8 +152,8 @@ INSTRUCTIONS:
 - Each question must have:
   * a reading passage (passageText)
   * a clear question prompt (questionText)
-  * a correct answer (correctAnswer)
-  * an explanation (explanation)
+  * a correct answer (correctAnswer) - dijelaskan dengan bahasa Indonesia
+  * an explanation (explanation) - dijelaskan dengan bahasa Indonesia
   * difficulty level (${difficulty})
   * relevant skill tags (skillTags)
 - Questions should test real comprehension, not just surface-level recall.

packages/ai/src/schemas.ts

@@ -29,6 +29,7 @@ export const aiKeyConfigSchema = z.object({
   baseUrl: z.string().url(),
   apiKey: z.string().min(1),
   model: z.string().min(1),
+  maxTokens: z.number().int().min(1).max(65536).default(16384),
 });
 
 // ── Question Option Schemas ────────────────────────────────

packages/api/package.json

@@ -17,8 +17,11 @@
     "@labas/env": "workspace:*",
     "@trpc/client": "catalog:",
     "@trpc/server": "catalog:",
+    "bullmq": "^5.76.2",
     "dotenv": "catalog:",
     "drizzle-orm": "^0.45.1",
+    "ioredis": "^5.10.1",
+    "winston": "^3.19.0",
     "zod": "catalog:"
   },
   "devDependencies": {

packages/api/src/logger.ts

@@ -0,0 +1,29 @@
+import winston from "winston";
+
+const { combine, timestamp, printf, colorize, errors } = winston.format;
+
+const customFormat = printf(({ level, message, timestamp, stack, ...metadata }) => {
+  let msg = `${timestamp} [${level}]: ${message}`;
+  if (Object.keys(metadata).length > 0) {
+    msg += ` \n  ${JSON.stringify(metadata, null, 2)}`;
+  }
+  if (stack) {
+    msg += `\n  ${stack}`;
+  }
+  return msg;
+});
+
+export const logger = winston.createLogger({
+  level: process.env.LOG_LEVEL ?? "info",
+  defaultMeta: { service: "labas-api" },
+  transports: [
+    new winston.transports.Console({
+      format: combine(
+        colorize(),
+        timestamp({ format: "YYYY-MM-DD HH:mm:ss" }),
+        errors({ stack: true }),
+        customFormat,
+      ),
+    }),
+  ],
+});

packages/api/src/queue.ts

@@ -0,0 +1,262 @@
+import { Queue, Worker, type Job } from "bullmq";
+import IORedis from "ioredis";
+import { env } from "@labas/env/server";
+import { generateQuestionsQuick, generateQuestionsAgentic, type GenerationInput } from "@labas/ai";
+import { db } from "@labas/db";
+import { generationJob, question, testPackage, packageSection, sectionQuestion } from "@labas/db";
+import { eq } from "drizzle-orm";
+
+const redisConnection = new IORedis(env.REDIS_URL, { maxRetriesPerRequest: null });
+
+export const generationQueue = new Queue("generation", {
+  connection: redisConnection,
+});
+
+export const generationWorker = new Worker(
+  "generation",
+  async (job: Job<{ input: GenerationInput; jobId: string }>) => {
+    const { input, jobId } = job.data;
+    const start = Date.now();
+
+    const updateProgress = async (progress: number, message: string) => {
+      await job.updateProgress(progress);
+      await db
+        .update(generationJob)
+        .set({ progress, progressMessage: message })
+        .where(eq(generationJob.id, jobId));
+    };
+
+    // Heartbeat: update DB every 10s so BullMQ knows worker is alive
+    let heartbeatInterval: ReturnType<typeof setInterval> | null = null;
+    const startHeartbeat = () => {
+      if (heartbeatInterval) clearInterval(heartbeatInterval);
+      heartbeatInterval = setInterval(() => {
+        db
+          .update(generationJob)
+          .set({ updatedAt: new Date() })
+          .where(eq(generationJob.id, jobId))
+          .catch(() => {});
+      }, 10_000);
+    };
+    const stopHeartbeat = () => {
+      if (heartbeatInterval) {
+        clearInterval(heartbeatInterval);
+        heartbeatInterval = null;
+      }
+    };
+
+    try {
+      await db
+        .update(generationJob)
+        .set({ status: "running" })
+        .where(eq(generationJob.id, jobId));
+
+      if (input.mode === "agentic") {
+        await updateProgress(10, "Generating passage...");
+      }
+
+      startHeartbeat();
+
+      let approxTokens = 0;
+      const countToken = (token: string) => {
+        approxTokens += Math.ceil(token.length / 4);
+      };
+
+      const result =
+        input.mode === "agentic"
+          ? await generateQuestionsAgentic(input, async (p) => {
+              const stepProgress = Math.min(
+                10 + Math.round((p.currentStep / p.steps.length) * 80),
+                90,
+              );
+              const msg = p.steps[p.currentStep]?.message ?? p.steps[p.currentStep]?.step ?? "Processing...";
+              await updateProgress(stepProgress, msg);
+            })
+          : await generateQuestionsQuick(input, {
+              onToken: (token) => {
+                countToken(token);
+                // Update progress message with token count every ~500 chars
+                if (approxTokens % 20 === 0) {
+                  job.updateProgress(job.progress ?? 5).catch(() => {});
+                  db
+                    .update(generationJob)
+                    .set({ progressMessage: `Generating... (~${approxTokens} tokens)` })
+                    .where(eq(generationJob.id, jobId))
+                    .catch(() => {});
+                }
+              },
+            });
+
+      stopHeartbeat();
+      await updateProgress(95, "Saving to bank...");
+
+      // Idempotent auto-save: check if already saved
+      const [existingJob] = await db
+        .select({ resultJson: generationJob.resultJson })
+        .from(generationJob)
+        .where(eq(generationJob.id, jobId))
+        .limit(1);
+
+      const alreadySaved =
+        existingJob?.resultJson &&
+        typeof existingJob.resultJson === "object" &&
+        "savedQuestionIds" in (existingJob.resultJson as any) &&
+        Array.isArray((existingJob.resultJson as any).savedQuestionIds) &&
+        (existingJob.resultJson as any).savedQuestionIds.length > 0;
+
+      let savedQuestionIds: string[] = [];
+      let generatedPackageId: string | null = null;
+
+      if (!alreadySaved) {
+        const [jobRow] = await db
+          .select({ userId: generationJob.userId })
+          .from(generationJob)
+          .where(eq(generationJob.id, jobId))
+          .limit(1);
+
+        const userId = jobRow?.userId;
+        if (userId) {
+          const toInsert = result.questions.map((q) => ({
+            examTypeId: input.examType,
+            sectionTypeId: input.section,
+            format: q.format,
+            passageText: q.passageText,
+            questionText: q.questionText,
+            options: (q as any).options ?? null,
+            correctAnswer: q.correctAnswer,
+            explanation: q.explanation,
+            difficulty: q.difficulty,
+            skillTags: q.skillTags,
+            source: "ai" as const,
+            aiModel: input.apiKeyConfig.model,
+            creatorUserId: userId,
+            isPublic: false,
+          }));
+
+          const inserted = await db
+            .insert(question)
+            .values(toInsert as any)
+            .returning({ id: question.id });
+
+          savedQuestionIds = inserted.map((r) => r.id);
+
+          // Auto-create a package from generated questions
+          if (savedQuestionIds.length > 0) {
+            const dateStr = new Date().toLocaleDateString("id-ID", {
+              day: "numeric",
+              month: "short",
+              year: "numeric",
+            });
+            const pkgTitle = `AI Generated — ${input.examType} ${input.section} — ${dateStr}`;
+
+            const [pkg] = await db
+              .insert(testPackage)
+              .values({
+                title: pkgTitle,
+                description: `Paket latihan AI-generated dengan ${savedQuestionIds.length} soal ${input.examType} ${input.section}.`,
+                examTypeId: input.examType,
+                creatorUserId: userId,
+                isPublic: false,
+                totalQuestions: savedQuestionIds.length,
+                totalSections: 1,
+                estimatedDurationMin: Math.ceil(savedQuestionIds.length * 1.5),
+              })
+              .returning();
+
+            if (pkg) {
+              generatedPackageId = pkg.id;
+
+              const [sec] = await db
+                .insert(packageSection)
+                .values({
+                  packageId: pkg.id,
+                  sectionTypeId: input.section,
+                  title: `${input.section} Section`,
+                  orderIndex: 0,
+                })
+                .returning();
+
+              if (sec) {
+                await db.insert(sectionQuestion).values(
+                  savedQuestionIds.map((qid, idx) => ({
+                    sectionId: sec.id,
+                    questionId: qid,
+                    orderIndex: idx,
+                  })),
+                );
+              }
+            }
+          }
+        }
+      }
+
+      await updateProgress(100, "Completed");
+
+      await db
+        .update(generationJob)
+        .set({
+          status: "completed",
+          resultJson: { ...result, savedQuestionIds, generatedPackageId } as any,
+          tokensUsed: result.meta.tokensUsed ?? approxTokens,
+          durationMs: Date.now() - start,
+          completedAt: new Date(),
+        })
+        .where(eq(generationJob.id, jobId));
+    } catch (err: any) {
+      stopHeartbeat();
+      await db
+        .update(generationJob)
+        .set({
+          status: "failed",
+          errorMessage: err.message ?? String(err),
+          durationMs: Date.now() - start,
+          completedAt: new Date(),
+        })
+        .where(eq(generationJob.id, jobId));
+      throw err;
+    }
+  },
+  {
+    connection: redisConnection,
+    concurrency: 2,
+  },
+);
+
+export async function enqueueGeneration(
+  userId: string,
+  input: GenerationInput,
+): Promise<string> {
+  const [jobRecord] = await db
+    .insert(generationJob)
+    .values({
+      userId,
+      mode: input.mode,
+      examTypeId: input.examType,
+      sectionTypeId: input.section,
+      questionCount: input.questionCount,
+      status: "pending",
+      progress: 0,
+    })
+    .returning();
+
+  if (!jobRecord) {
+    throw new Error("Failed to create generation job");
+  }
+
+  await generationQueue.add(
+    "generate",
+    { input, jobId: jobRecord.id },
+    {
+      jobId: jobRecord.id,
+      removeOnComplete: { count: 100 },
+      removeOnFail: { count: 100 },
+      attempts: 3,
+      backoff: {
+        type: "exponential",
+        delay: 5000,
+      },
+    },
+  );
+
+  return jobRecord.id;
+}

packages/api/src/routers/ai.ts

@@ -1,16 +1,50 @@
 import { z } from "zod";
+import { eq, desc } from "drizzle-orm";
 import { router, protectedProcedure } from "../index";
-import { generateQuestionsQuick } from "@labas/ai";
 import { generationInputSchema } from "@labas/ai/schemas";
+import { enqueueGeneration } from "../queue";
 import { db } from "@labas/db";
-import { question } from "@labas/db";
+import { question, generationJob } from "@labas/db";
 
 export const aiRouter = router({
   generate: protectedProcedure
     .input(generationInputSchema)
-    .mutation(async ({ input }) => {
-      const result = await generateQuestionsQuick(input);
-      return result;
+    .mutation(async ({ ctx, input }) => {
+      const jobId = await enqueueGeneration(ctx.session.user.id, input);
+      return { jobId };
+    }),
+
+  getJobStatus: protectedProcedure
+    .input(z.object({ jobId: z.string().uuid() }))
+    .query(async ({ ctx, input }) => {
+      const [job] = await db
+        .select()
+        .from(generationJob)
+        .where(eq(generationJob.id, input.jobId))
+        .limit(1);
+
+      if (!job) return null;
+      if (job.userId !== ctx.session.user.id) return null;
+
+      return job;
+    }),
+
+  myJobs: protectedProcedure
+    .input(
+      z.object({
+        limit: z.number().min(1).max(50).default(20),
+        offset: z.number().min(0).default(0),
+      }).optional(),
+    )
+    .query(async ({ ctx, input }) => {
+      const rows = await db
+        .select()
+        .from(generationJob)
+        .where(eq(generationJob.userId, ctx.session.user.id))
+        .orderBy(desc(generationJob.createdAt))
+        .limit(input?.limit ?? 20)
+        .offset(input?.offset ?? 0);
+      return rows;
     }),
 
   saveQuestions: protectedProcedure

packages/api/src/routers/attempt.ts

@@ -0,0 +1,415 @@
+import { z } from "zod";
+import { eq, and, desc, sql, inArray } from "drizzle-orm";
+import { router, protectedProcedure } from "../index";
+import { db } from "@labas/db";
+import {
+  testAttempt,
+  sectionResult,
+  answer,
+  testPackage,
+  packageSection,
+  sectionQuestion,
+  question,
+} from "@labas/db";
+
+function normalizeAnswer(format: string, userAnswer: string, correctAnswer: string): boolean {
+  const ua = userAnswer.trim();
+  const ca = correctAnswer.trim();
+
+  switch (format) {
+    case "true_false_not_given":
+    case "author_view":
+      return ua.toUpperCase() === ca.toUpperCase();
+    case "fill_blank":
+      return ua.toLowerCase() === ca.toLowerCase();
+    case "multiple_choice":
+    case "synonym":
+    case "grammar_in_context":
+    case "sentence_completion":
+    case "summary_completion":
+    case "cloze":
+    case "reference":
+    case "kanji_reading":
+    case "particle_choice":
+    case "article_case":
+    case "matching_headings":
+    case "matching_information":
+      return ua.toUpperCase() === ca.toUpperCase();
+    default:
+      return ua === ca;
+  }
+}
+
+export const attemptRouter = router({
+  start: protectedProcedure
+    .input(z.object({ packageId: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+
+      const [pkg] = await db
+        .select()
+        .from(testPackage)
+        .where(eq(testPackage.id, input.packageId))
+        .limit(1);
+
+      if (!pkg) throw new Error("Package not found");
+      if (!pkg.isPublic && pkg.creatorUserId !== userId) {
+        throw new Error("Not authorized to access this package");
+      }
+
+      const sections = await db
+        .select({
+          id: packageSection.id,
+          sectionTypeId: packageSection.sectionTypeId,
+        })
+        .from(packageSection)
+        .where(eq(packageSection.packageId, input.packageId))
+        .orderBy(packageSection.orderIndex);
+
+      const [attempt] = await db
+        .insert(testAttempt)
+        .values({
+          userId,
+          packageId: input.packageId,
+          status: "in_progress",
+        })
+        .returning();
+
+      if (!attempt) throw new Error("Failed to create attempt");
+
+      for (const section of sections) {
+        await db.insert(sectionResult).values({
+          attemptId: attempt.id,
+          sectionTypeId: section.sectionTypeId,
+        });
+      }
+
+      await db
+        .update(testPackage)
+        .set({ usageCount: sql`${testPackage.usageCount} + 1` })
+        .where(eq(testPackage.id, input.packageId));
+
+      return { attemptId: attempt.id };
+    }),
+
+  getById: protectedProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .query(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+
+      const [attempt] = await db
+        .select()
+        .from(testAttempt)
+        .where(eq(testAttempt.id, input.id))
+        .limit(1);
+
+      if (!attempt) return null;
+      if (attempt.userId !== userId) throw new Error("Not authorized");
+
+      const dbSections = await db
+        .select()
+        .from(sectionResult)
+        .where(eq(sectionResult.attemptId, input.id))
+        .orderBy(sectionResult.createdAt);
+
+      const sectionResultIds = dbSections.map((s) => s.id);
+
+      let answers: any[] = [];
+      if (sectionResultIds.length > 0) {
+        answers = await db
+          .select({
+            id: answer.id,
+            sectionResultId: answer.sectionResultId,
+            questionId: answer.questionId,
+            userAnswer: answer.userAnswer,
+            isCorrect: answer.isCorrect,
+            timeSpentSec: answer.timeSpentSec,
+            createdAt: answer.createdAt,
+            question: {
+              id: question.id,
+              format: question.format,
+              passageText: question.passageText,
+              questionText: question.questionText,
+              options: question.options,
+              correctAnswer: question.correctAnswer,
+              explanation: question.explanation,
+              difficulty: question.difficulty,
+              skillTags: question.skillTags,
+            },
+          })
+          .from(answer)
+          .innerJoin(question, eq(answer.questionId, question.id))
+          .where(inArray(answer.sectionResultId, sectionResultIds));
+      }
+
+      const pkgSections = await db
+        .select({
+          id: packageSection.id,
+          sectionTypeId: packageSection.sectionTypeId,
+          title: packageSection.title,
+          orderIndex: packageSection.orderIndex,
+        })
+        .from(packageSection)
+        .where(eq(packageSection.packageId, attempt.packageId!))
+        .orderBy(packageSection.orderIndex);
+
+      const psIds = pkgSections.map((s) => s.id);
+      let sectionQuestions: any[] = [];
+      if (psIds.length > 0) {
+        const sqs = await db
+          .select({
+            sectionId: sectionQuestion.sectionId,
+            questionId: sectionQuestion.questionId,
+            orderIndex: sectionQuestion.orderIndex,
+          })
+          .from(sectionQuestion)
+          .where(inArray(sectionQuestion.sectionId, psIds));
+
+        if (sqs.length > 0) {
+          const qIds = sqs.map((sq) => sq.questionId);
+          const qs = await db
+            .select()
+            .from(question)
+            .where(inArray(question.id, qIds));
+
+          const qMap = new Map(qs.map((q) => [q.id, q]));
+          sectionQuestions = sqs.map((sq) => ({
+            ...sq,
+            question: qMap.get(sq.questionId),
+          }));
+        }
+      }
+
+      // Zip packageSections with dbSections by creation order (both ordered)
+      const sectionsWithData = pkgSections.map((pkgSec, idx) => {
+        const secResult = dbSections[idx];
+        const secAnswers = answers.filter((a) => a.sectionResultId === secResult?.id);
+        const secQuestions = sectionQuestions
+          .filter((sq) => sq.sectionId === pkgSec.id)
+          .sort((a, b) => a.orderIndex - b.orderIndex)
+          .map((sq) => sq.question);
+
+        return {
+          ...pkgSec,
+          sectionResultId: secResult?.id,
+          score: secResult?.score,
+          maxScore: secResult?.maxScore,
+          timeSpentSec: secResult?.timeSpentSec,
+          answers: secAnswers,
+          questions: secQuestions,
+        };
+      });
+
+      return {
+        ...attempt,
+        sections: sectionsWithData,
+      };
+    }),
+
+  submitAnswer: protectedProcedure
+    .input(
+      z.object({
+        attemptId: z.string().uuid(),
+        sectionResultId: z.string().uuid(),
+        questionId: z.string().uuid(),
+        userAnswer: z.string(),
+        timeSpentSec: z.number().optional(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+
+      const [attempt] = await db
+        .select()
+        .from(testAttempt)
+        .where(eq(testAttempt.id, input.attemptId))
+        .limit(1);
+
+      if (!attempt) throw new Error("Attempt not found");
+      if (attempt.userId !== userId) throw new Error("Not authorized");
+      if (attempt.status !== "in_progress") throw new Error("Attempt already finished");
+
+      const [q] = await db
+        .select()
+        .from(question)
+        .where(eq(question.id, input.questionId))
+        .limit(1);
+
+      if (!q) throw new Error("Question not found");
+
+      const isCorrect = normalizeAnswer(q.format, input.userAnswer, q.correctAnswer);
+
+      const [existing] = await db
+        .select()
+        .from(answer)
+        .where(
+          and(
+            eq(answer.sectionResultId, input.sectionResultId),
+            eq(answer.questionId, input.questionId),
+          ),
+        )
+        .limit(1);
+
+      if (existing) {
+        await db
+          .update(answer)
+          .set({
+            userAnswer: input.userAnswer,
+            isCorrect,
+            timeSpentSec: input.timeSpentSec,
+          })
+          .where(eq(answer.id, existing.id));
+      } else {
+        await db.insert(answer).values({
+          sectionResultId: input.sectionResultId,
+          questionId: input.questionId,
+          userAnswer: input.userAnswer,
+          isCorrect,
+          timeSpentSec: input.timeSpentSec,
+        });
+      }
+
+      return { isCorrect };
+    }),
+
+  finish: protectedProcedure
+    .input(z.object({ attemptId: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+
+      const [attempt] = await db
+        .select()
+        .from(testAttempt)
+        .where(eq(testAttempt.id, input.attemptId))
+        .limit(1);
+
+      if (!attempt) throw new Error("Attempt not found");
+      if (attempt.userId !== userId) throw new Error("Not authorized");
+      if (attempt.status !== "in_progress") throw new Error("Attempt already finished");
+
+      const dbSections = await db
+        .select()
+        .from(sectionResult)
+        .where(eq(sectionResult.attemptId, input.attemptId))
+        .orderBy(sectionResult.createdAt);
+
+      const pkgSections = await db
+        .select({ id: packageSection.id })
+        .from(packageSection)
+        .where(eq(packageSection.packageId, attempt.packageId!))
+        .orderBy(packageSection.orderIndex);
+
+      // Count questions per packageSection
+      const psIds = pkgSections.map((s) => s.id);
+      let questionCounts = new Map<string, number>();
+      if (psIds.length > 0) {
+        const counts = await db
+          .select({
+            sectionId: sectionQuestion.sectionId,
+            count: sql<number>`count(*)`,
+          })
+          .from(sectionQuestion)
+          .where(inArray(sectionQuestion.sectionId, psIds))
+          .groupBy(sectionQuestion.sectionId);
+
+        for (const c of counts) {
+          questionCounts.set(c.sectionId, c.count);
+        }
+      }
+
+      let totalScore = 0;
+
+      for (let i = 0; i < dbSections.length; i++) {
+        const secResult = dbSections[i];
+        const pkgSec = pkgSections[i];
+        if (!secResult || !pkgSec) continue;
+
+        const secAnswers = await db
+          .select()
+          .from(answer)
+          .where(eq(answer.sectionResultId, secResult.id));
+
+        const sectionScore = secAnswers.filter((a) => a.isCorrect).length;
+        const sectionMax = questionCounts.get(pkgSec.id) ?? secAnswers.length;
+
+        await db
+          .update(sectionResult)
+          .set({
+            score: sectionScore,
+            maxScore: sectionMax,
+          })
+          .where(eq(sectionResult.id, secResult.id));
+
+        totalScore += sectionScore;
+      }
+
+      // Total questions in package
+      let totalQuestions = 0;
+      for (const count of questionCounts.values()) {
+        totalQuestions += count;
+      }
+
+      await db
+        .update(testAttempt)
+        .set({
+          status: "completed",
+          finishedAt: new Date(),
+          totalScore,
+          maxScore: totalQuestions,
+        })
+        .where(eq(testAttempt.id, input.attemptId));
+
+      return {
+        totalScore,
+        maxScore: totalQuestions,
+        percentage: totalQuestions > 0 ? Math.round((totalScore / totalQuestions) * 100) : 0,
+      };
+    }),
+
+  myAttempts: protectedProcedure
+    .input(
+      z
+        .object({
+          packageId: z.string().uuid().optional(),
+          limit: z.number().min(1).max(50).default(20),
+          offset: z.number().min(0).default(0),
+        })
+        .optional(),
+    )
+    .query(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+      const conditions = [eq(testAttempt.userId, userId)];
+
+      if (input?.packageId) {
+        conditions.push(eq(testAttempt.packageId, input.packageId));
+      }
+
+      const where = and(...conditions);
+
+      const rows = await db
+        .select({
+          id: testAttempt.id,
+          packageId: testAttempt.packageId,
+          comboId: testAttempt.comboId,
+          startedAt: testAttempt.startedAt,
+          finishedAt: testAttempt.finishedAt,
+          totalScore: testAttempt.totalScore,
+          maxScore: testAttempt.maxScore,
+          status: testAttempt.status,
+          createdAt: testAttempt.createdAt,
+        })
+        .from(testAttempt)
+        .where(where)
+        .orderBy(desc(testAttempt.createdAt))
+        .limit(input?.limit ?? 20)
+        .offset(input?.offset ?? 0);
+
+      const [countResult] = await db
+        .select({ count: sql<number>`count(*)` })
+        .from(testAttempt)
+        .where(where);
+      const totalCount = Number(countResult?.count ?? 0);
+
+      return { attempts: rows, total: totalCount };
+    }),
+});

packages/api/src/routers/combo.ts

@@ -0,0 +1,335 @@
+import { z } from "zod";
+import { eq, and, desc, sql, inArray, or } from "drizzle-orm";
+import { router, protectedProcedure, publicProcedure } from "../index";
+import { db } from "@labas/db";
+import {
+  comboPackage,
+  comboSection,
+  testPackage,
+  packageSection,
+  sectionQuestion,
+  question,
+  examType,
+  sectionType,
+  user,
+} from "@labas/db";
+
+export const comboRouter = router({
+  list: publicProcedure
+    .input(
+      z
+        .object({
+          isPublic: z.boolean().optional(),
+          search: z.string().optional(),
+          limit: z.number().min(1).max(50).default(20),
+          offset: z.number().min(0).default(0),
+        })
+        .optional(),
+    )
+    .query(async ({ ctx, input }) => {
+      const userId = ctx.session?.user.id;
+      const conditions = [];
+
+      if (input?.isPublic !== undefined) {
+        conditions.push(eq(comboPackage.isPublic, input.isPublic));
+      } else if (!userId) {
+        conditions.push(eq(comboPackage.isPublic, true));
+      }
+
+      const where = conditions.length > 0 ? and(...conditions) : undefined;
+
+      const rows = await db
+        .select({
+          id: comboPackage.id,
+          title: comboPackage.title,
+          description: comboPackage.description,
+          creatorUserId: comboPackage.creatorUserId,
+          isPublic: comboPackage.isPublic,
+          createdAt: comboPackage.createdAt,
+          updatedAt: comboPackage.updatedAt,
+          creatorName: user.name,
+        })
+        .from(comboPackage)
+        .leftJoin(user, eq(comboPackage.creatorUserId, user.id))
+        .where(where)
+        .orderBy(desc(comboPackage.createdAt))
+        .limit(input?.limit ?? 20)
+        .offset(input?.offset ?? 0);
+
+      const [countResult] = await db
+        .select({ count: sql<number>`count(*)` })
+        .from(comboPackage)
+        .where(where);
+
+      return { combos: rows, total: Number(countResult?.count ?? 0) };
+    }),
+
+  myCombos: protectedProcedure
+    .input(
+      z
+        .object({
+          search: z.string().optional(),
+          limit: z.number().min(1).max(50).default(20),
+          offset: z.number().min(0).default(0),
+        })
+        .optional(),
+    )
+    .query(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+      const conditions = [eq(comboPackage.creatorUserId, userId)];
+      const where = and(...conditions);
+
+      const rows = await db
+        .select({
+          id: comboPackage.id,
+          title: comboPackage.title,
+          description: comboPackage.description,
+          isPublic: comboPackage.isPublic,
+          createdAt: comboPackage.createdAt,
+          updatedAt: comboPackage.updatedAt,
+        })
+        .from(comboPackage)
+        .where(where)
+        .orderBy(desc(comboPackage.createdAt))
+        .limit(input?.limit ?? 20)
+        .offset(input?.offset ?? 0);
+
+      const [countResult] = await db
+        .select({ count: sql<number>`count(*)` })
+        .from(comboPackage)
+        .where(where);
+
+      return { combos: rows, total: Number(countResult?.count ?? 0) };
+    }),
+
+  getById: publicProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .query(async ({ ctx, input }) => {
+      const userId = ctx.session?.user.id;
+
+      const [combo] = await db
+        .select({
+          id: comboPackage.id,
+          title: comboPackage.title,
+          description: comboPackage.description,
+          creatorUserId: comboPackage.creatorUserId,
+          isPublic: comboPackage.isPublic,
+          createdAt: comboPackage.createdAt,
+          updatedAt: comboPackage.updatedAt,
+          creatorName: user.name,
+        })
+        .from(comboPackage)
+        .leftJoin(user, eq(comboPackage.creatorUserId, user.id))
+        .where(eq(comboPackage.id, input.id))
+        .limit(1);
+
+      if (!combo) return null;
+      if (!combo.isPublic && combo.creatorUserId !== userId) return null;
+
+      // Fetch combo sections with source data
+      const sections = await db
+        .select({
+          id: comboSection.id,
+          comboId: comboSection.comboId,
+          sourcePackageId: comboSection.sourcePackageId,
+          sourceSectionId: comboSection.sourceSectionId,
+          orderIndex: comboSection.orderIndex,
+          packageTitle: testPackage.title,
+          sectionTitle: packageSection.title,
+          sectionTypeName: sectionType.name,
+          examTypeName: examType.name,
+        })
+        .from(comboSection)
+        .leftJoin(testPackage, eq(comboSection.sourcePackageId, testPackage.id))
+        .leftJoin(packageSection, eq(comboSection.sourceSectionId, packageSection.id))
+        .leftJoin(sectionType, eq(packageSection.sectionTypeId, sectionType.id))
+        .leftJoin(examType, eq(testPackage.examTypeId, examType.id))
+        .where(eq(comboSection.comboId, input.id))
+        .orderBy(comboSection.orderIndex);
+
+      // Fetch questions for each section
+      const sectionIds = sections.map((s) => s.sourceSectionId);
+      let sectionQuestions: Array<{
+        sectionId: string;
+        questionId: string;
+        orderIndex: number;
+        question: any;
+      }> = [];
+
+      if (sectionIds.length > 0) {
+        const sqs = await db
+          .select({
+            sectionId: sectionQuestion.sectionId,
+            questionId: sectionQuestion.questionId,
+            orderIndex: sectionQuestion.orderIndex,
+          })
+          .from(sectionQuestion)
+          .where(inArray(sectionQuestion.sectionId, sectionIds));
+
+        if (sqs.length > 0) {
+          const questionIds = sqs.map((sq) => sq.questionId);
+          const qs = await db
+            .select()
+            .from(question)
+            .where(inArray(question.id, questionIds));
+
+          const questionMap = new Map(qs.map((q) => [q.id, q]));
+          sectionQuestions = sqs.map((sq) => ({
+            ...sq,
+            question: questionMap.get(sq.questionId),
+          }));
+        }
+      }
+
+      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),
+      }));
+
+      return { ...combo, sections: sectionsWithQuestions };
+    }),
+
+  create: protectedProcedure
+    .input(
+      z.object({
+        title: z.string().min(1).max(200),
+        description: z.string().optional(),
+        isPublic: z.boolean().default(false),
+        sections: z.array(
+          z.object({
+            sourcePackageId: z.string().uuid(),
+            sourceSectionId: z.string().uuid(),
+            orderIndex: z.number().default(0),
+          }),
+        ).min(1),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { sections, ...pkgData } = input;
+
+      const [combo] = await db
+        .insert(comboPackage)
+        .values({
+          ...pkgData,
+          creatorUserId: ctx.session.user.id,
+        })
+        .returning();
+
+      if (!combo) {
+        throw new Error("Failed to create combo package");
+      }
+
+      await db.insert(comboSection).values(
+        sections.map((s) => ({
+          comboId: combo.id,
+          ...s,
+        })),
+      );
+
+      return combo;
+    }),
+
+  update: protectedProcedure
+    .input(
+      z.object({
+        id: z.string().uuid(),
+        title: z.string().min(1).max(200).optional(),
+        description: z.string().optional(),
+        isPublic: z.boolean().optional(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { id, ...data } = input;
+      const [combo] = await db
+        .update(comboPackage)
+        .set(data)
+        .where(
+          and(eq(comboPackage.id, id), eq(comboPackage.creatorUserId, ctx.session.user.id)),
+        )
+        .returning();
+      return combo ?? null;
+    }),
+
+  delete: protectedProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      await db
+        .delete(comboPackage)
+        .where(
+          and(eq(comboPackage.id, input.id), eq(comboPackage.creatorUserId, ctx.session.user.id)),
+        );
+      return { success: true };
+    }),
+
+  // Get available sections from packages for combiner
+  availableSections: protectedProcedure
+    .input(
+      z.object({
+        examTypeId: z.string().optional(),
+        search: z.string().optional(),
+        limit: z.number().min(1).max(50).default(20),
+        offset: z.number().min(0).default(0),
+      }).optional(),
+    )
+    .query(async ({ ctx, input }) => {
+      const userId = ctx.session.user.id;
+
+      // Get packages the user can access (public or owned)
+      const pkgConditions = [
+        and(
+          eq(testPackage.isPublic, true),
+          eq(testPackage.creatorUserId, userId),
+        ),
+      ];
+
+      if (input?.examTypeId) {
+        pkgConditions.push(eq(testPackage.examTypeId, input.examTypeId));
+      }
+
+      const packages = await db
+        .select({
+          id: testPackage.id,
+          title: testPackage.title,
+          examTypeId: testPackage.examTypeId,
+          creatorUserId: testPackage.creatorUserId,
+          isPublic: testPackage.isPublic,
+          examTypeName: examType.name,
+        })
+        .from(testPackage)
+        .leftJoin(examType, eq(testPackage.examTypeId, examType.id))
+        .where(
+          or(
+            eq(testPackage.isPublic, true),
+            eq(testPackage.creatorUserId, userId),
+          ),
+        )
+        .limit(input?.limit ?? 20)
+        .offset(input?.offset ?? 0);
+
+      const packageIds = packages.map((p) => p.id);
+
+      const sections = await db
+        .select({
+          id: packageSection.id,
+          packageId: packageSection.packageId,
+          sectionTypeId: packageSection.sectionTypeId,
+          title: packageSection.title,
+          orderIndex: packageSection.orderIndex,
+          packageTitle: testPackage.title,
+          examTypeName: examType.name,
+          sectionTypeName: sectionType.name,
+        })
+        .from(packageSection)
+        .leftJoin(testPackage, eq(packageSection.packageId, testPackage.id))
+        .leftJoin(examType, eq(testPackage.examTypeId, examType.id))
+        .leftJoin(sectionType, eq(packageSection.sectionTypeId, sectionType.id))
+        .where(inArray(packageSection.packageId, packageIds))
+        .orderBy(testPackage.title, packageSection.orderIndex);
+
+      return { packages, sections };
+    }),
+});
+

packages/api/src/routers/index.ts

@@ -1,5 +1,7 @@
 import { protectedProcedure, publicProcedure, router } from "../index";
 import { aiRouter } from "./ai";
+import { attemptRouter } from "./attempt";
+import { comboRouter } from "./combo";
 import { questionRouter } from "./question";
 import { packageRouter } from "./package";
 import { ratingRouter } from "./rating";
@@ -16,6 +18,8 @@ export const appRouter = router({
     };
   }),
   ai: aiRouter,
+  attempt: attemptRouter,
+  combo: comboRouter,
   question: questionRouter,
   package: packageRouter,
   rating: ratingRouter,

packages/api/src/routers/question.ts

@@ -14,6 +14,7 @@ export const questionRouter = router({
           format: z.string().optional(),
           difficulty: z.number().optional(),
           isPublic: z.boolean().optional(),
+          creatorUserId: z.string().optional(),
           search: z.string().optional(),
           skillTags: z.array(z.string()).optional(),
           limit: z.number().min(1).max(50).default(20),
@@ -35,9 +36,17 @@ export const questionRouter = router({
         );
       }
 
-      if (input?.isPublic !== undefined) {
+      if (input?.creatorUserId) {
+        conditions.push(eq(question.creatorUserId, input.creatorUserId));
+      } else if (input?.isPublic !== undefined) {
         conditions.push(eq(question.isPublic, input.isPublic));
-      } else if (!userId) {
+      } else if (userId) {
+        // Default for authenticated users: show public questions + their own private questions
+        conditions.push(
+          or(eq(question.isPublic, true), eq(question.creatorUserId, userId)),
+        );
+      } else {
+        // Default for guests: only public questions
         conditions.push(eq(question.isPublic, true));
       }
 

packages/db/docker-compose.yml

@@ -19,5 +19,20 @@ services:
       retries: 5
     restart: unless-stopped
 
+  redis:
+    image: redis:7-alpine
+    container_name: labas-redis
+    ports:
+      - "6379:6379"
+    volumes:
+      - labas_redis_data:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    restart: unless-stopped
+
 volumes:
   labas_postgres_data:
+  labas_redis_data:

packages/db/src/schema/app.ts

@@ -427,3 +427,43 @@ export const questionRatingRelations = relations(questionRating, ({ one }) => ({
     references: [question.id],
   }),
 }));
+
+// ── Generation Jobs (Background AI Jobs) ───────────────────
+
+export const generationJob = pgTable(
+  "generation_job",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    status: text("status").notNull().default("pending"), // "pending" | "running" | "completed" | "failed"
+    mode: text("mode").notNull().default("quick"), // "quick" | "agentic"
+    examTypeId: text("exam_type_id").notNull(),
+    sectionTypeId: text("section_type_id").notNull(),
+    questionCount: integer("question_count").notNull(),
+    progress: integer("progress").default(0).notNull(), // 0-100
+    progressMessage: text("progress_message"),
+    resultJson: jsonb("result_json"), // GenerationResult
+    errorMessage: text("error_message"),
+    tokensUsed: integer("tokens_used"),
+    durationMs: integer("duration_ms"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at")
+      .defaultNow()
+      .$onUpdate(() => new Date())
+      .notNull(),
+    completedAt: timestamp("completed_at"),
+  },
+  (table) => [
+    index("generationJob_userId_idx").on(table.userId),
+    index("generationJob_status_idx").on(table.status),
+  ],
+);
+
+export const generationJobRelations = relations(generationJob, ({ one }) => ({
+  user: one(user, {
+    fields: [generationJob.userId],
+    references: [user.id],
+  }),
+}));

packages/env/src/server.ts

@@ -5,6 +5,7 @@ import { z } from "zod";
 export const env = createEnv({
   server: {
     DATABASE_URL: z.string().min(1),
+    REDIS_URL: z.string().min(1).default("redis://localhost:6379"),
     BETTER_AUTH_SECRET: z.string().min(32),
     BETTER_AUTH_URL: z.url(),
     CORS_ORIGIN: z.url(),

skills-lock.json

@@ -6,6 +6,11 @@
       "sourceType": "github",
       "computedHash": "a4c830509e85557b59339d8d93a4e243e9e59c686e7678854d39230e12c2a6dc"
     },
+    "caveman-compress": {
+      "source": "juliusbrussee/caveman",
+      "sourceType": "github",
+      "computedHash": "300fb8578258161e1752a2a4142a7e9ff178c960bcb83b84422e2987421f33bf"
+    },
     "hono": {
       "source": "yusukebe/hono-skill",
       "sourceType": "github",