Add job cancellation functionality, including UI updates for canceling jobs in the TestBlueprintCard and jobs route. Enhance job management with cancellation handling in the API and database schema, ensuring proper status updates and error messages for canceled jobs.

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

@@ -18,6 +18,8 @@ interface TestBlueprintCardProps {
   jobProgressMessage?: string | null;
   error: string | null;
   onGenerate: () => void;
+  onCancelJob?: () => void;
+  cancelJobPending?: boolean;
 }
 
 export function TestBlueprintCard({
@@ -34,6 +36,8 @@ export function TestBlueprintCard({
   jobProgressMessage,
   error,
   onGenerate,
+  onCancelJob,
+  cancelJobPending,
 }: TestBlueprintCardProps) {
   return (
     <div className="lg:col-span-4 sticky top-8">
@@ -147,7 +151,7 @@ export function TestBlueprintCard({
             <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>
+                <div className="min-w-0 flex-1">
                   <p className="text-sm font-semibold text-[var(--matcha-800)]">
                     {jobProgressMessage ?? "Sedang berjalan..."}
                   </p>
@@ -164,6 +168,19 @@ export function TestBlueprintCard({
                   style={{ width: `${jobProgress}%` }}
                 />
               </div>
+              {onCancelJob && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="w-full rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] text-[var(--warm-charcoal)]"
+                  disabled={cancelJobPending}
+                  onClick={onCancelJob}
+                >
+                  <MaterialIcon name="cancel" className="text-sm mr-1" />
+                  Batalkan job
+                </Button>
+              )}
               <p className="text-xs text-[var(--warm-charcoal)] text-center">
                 Bisa ditinggal — hasil akan muncul otomatis
               </p>

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

@@ -44,14 +44,18 @@ export function useGenerationJob() {
     refetchInterval: (query) => {
       const data = query.state.data;
       if (!data) return 1000;
-      if (data.status === "completed" || data.status === "failed") return false;
+      if (data.status === "completed" || data.status === "failed" || data.status === "cancelled")
+        return false;
       return 1000;
     },
   });
 
   const isGenerating =
     jobId !== null &&
-    (!jobQuery.data || (jobQuery.data.status !== "completed" && jobQuery.data.status !== "failed"));
+    (!jobQuery.data ||
+      (jobQuery.data.status !== "completed" &&
+        jobQuery.data.status !== "failed" &&
+        jobQuery.data.status !== "cancelled"));
 
   // Handle completion / failure
   useEffect(() => {
@@ -65,6 +69,10 @@ export function useGenerationJob() {
       setError(jobQuery.data.errorMessage ?? "Generation failed");
       setJobId(null);
     }
+    if (jobQuery.data?.status === "cancelled") {
+      setError(jobQuery.data.errorMessage ?? "Generasi dibatalkan");
+      setJobId(null);
+    }
   }, [jobQuery.data, setJobId]);
 
   const reset = useCallback(() => {

apps/web/src/routes/generate.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
-import { trpc } from "@/utils/trpc";
+import { queryClient, trpc } from "@/utils/trpc";
 import { useApiKey } from "@/hooks/use-api-key";
 import { useGenerationJob } from "@/hooks/use-generation-job";
 import { Input } from "@labas/ui/components/input";
@@ -36,6 +36,7 @@ function RouteComponent() {
     result,
     error,
     generatedPackageId,
+    jobId,
     isGenerating,
     jobQuery,
     setError,
@@ -57,7 +58,6 @@ function RouteComponent() {
     onSuccess: (data) => {
       setJobId(data.jobId);
       setError(null);
-      reset();
     },
     onError: (err) => {
       setError(err.message);
@@ -65,6 +65,18 @@ function RouteComponent() {
     },
   });
 
+  const cancelJob = useMutation({
+    ...trpc.ai.cancelJob.mutationOptions(),
+    onSuccess: async () => {
+      setJobId(null);
+      setError(null);
+      await queryClient.invalidateQueries({ queryKey: trpc.ai.myJobs.queryKey() });
+    },
+    onError: (err) => {
+      setError(err.message);
+    },
+  });
+
   const toggleFormat = (id: string) => {
     setSelectedFormats((prev) =>
       prev.includes(id) ? prev.filter((f) => f !== id) : [...prev, id],
@@ -303,6 +315,14 @@ function RouteComponent() {
           jobProgressMessage={jobQuery.data?.progressMessage}
           error={error}
           onGenerate={handleGenerate}
+          onCancelJob={
+            jobId
+              ? () => {
+                  cancelJob.mutate({ jobId });
+                }
+              : undefined
+          }
+          cancelJobPending={cancelJob.isPending}
         />
       </div>
 

apps/web/src/routes/jobs.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
@@ -24,6 +24,7 @@ const STATUS_COLORS: Record<string, string> = {
   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)]",
+  cancelled: "bg-[var(--warm-silver)] text-[var(--warm-charcoal)]",
 };
 
 const STATUS_ICONS: Record<string, string> = {
@@ -31,6 +32,7 @@ const STATUS_ICONS: Record<string, string> = {
   running: "sync",
   completed: "check_circle",
   failed: "error",
+  cancelled: "block",
 };
 
 function formatDate(d: string | Date | null) {
@@ -46,9 +48,18 @@ function formatDate(d: string | Date | null) {
 
 function RouteComponent() {
   const [expandedJobId, setExpandedJobId] = useState<string | null>(null);
+  const queryClient = useQueryClient();
 
   const jobsQuery = useQuery(trpc.ai.myJobs.queryOptions({ limit: 50, offset: 0 }));
 
+  const cancelJob = useMutation({
+    ...trpc.ai.cancelJob.mutationOptions(),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: trpc.ai.myJobs.queryKey() });
+      await queryClient.invalidateQueries({ queryKey: trpc.ai.getJobStatus.queryKey() });
+    },
+  });
+
   const toggleExpand = (id: string) => {
     setExpandedJobId((prev) => (prev === id ? null : id));
   };
@@ -116,8 +127,23 @@ function RouteComponent() {
                         {job.mode === "agentic" ? "Agentic" : "Quick"}
                       </div>
                     </div>
-                    <div className="text-xs text-[var(--warm-charcoal)]">
-                      {formatDate(job.createdAt)}
+                    <div className="flex items-center gap-2">
+                      {(job.status === "pending" || job.status === "running") && (
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] text-xs shrink-0"
+                          disabled={cancelJob.isPending}
+                          onClick={() => cancelJob.mutate({ jobId: job.id })}
+                        >
+                          <MaterialIcon name="cancel" className="text-sm mr-1" />
+                          Batalkan
+                        </Button>
+                      )}
+                      <div className="text-xs text-[var(--warm-charcoal)]">
+                        {formatDate(job.createdAt)}
+                      </div>
                     </div>
                   </div>
 
@@ -212,6 +238,15 @@ function RouteComponent() {
                     </div>
                   </CardContent>
                 )}
+
+                {job.status === "cancelled" && (
+                  <CardContent className="pt-0">
+                    <div className="p-3 rounded-[var(--radius-md)] bg-[var(--warm-silver)]/40 text-[var(--warm-charcoal)] text-sm border-2 border-[var(--oat-border)]">
+                      <MaterialIcon name="block" className="text-sm mr-1" />
+                      {job.errorMessage ?? "Job dibatalkan"}
+                    </div>
+                  </CardContent>
+                )}
               </Card>
             );
           })}

packages/api/src/queue.ts

@@ -4,10 +4,94 @@ 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";
+import { and, eq, notInArray } from "drizzle-orm";
 
 const redisConnection = new IORedis(env.REDIS_URL, { maxRetriesPerRequest: null });
 
+/** Thrown when the job was cancelled (DB status or cooperative poll). */
+export class GenerationJobCancelledError extends Error {
+  constructor() {
+    super("JOB_CANCELLED");
+    this.name = "GenerationJobCancelledError";
+  }
+}
+
+const CANCEL_POLL_MS = 500;
+
+function createCancellationPoller(jobId: string) {
+  let cancelled = false;
+  const interval = setInterval(() => {
+    db
+      .select({ status: generationJob.status })
+      .from(generationJob)
+      .where(eq(generationJob.id, jobId))
+      .limit(1)
+      .then(([row]) => {
+        if (row?.status === "cancelled") cancelled = true;
+      })
+      .catch(() => {});
+  }, CANCEL_POLL_MS);
+  return {
+    stop: () => clearInterval(interval),
+    check: () => {
+      if (cancelled) throw new GenerationJobCancelledError();
+    },
+  };
+}
+
+export type CancelGenerationJobResult =
+  | { ok: true }
+  | { ok: false; reason: "not_found" | "forbidden" | "not_cancellable" };
+
+/**
+ * Marks the job cancelled in Postgres, then removes the BullMQ job if it is still waiting/delayed.
+ * Active jobs are stopped cooperatively by the worker (cancellation poller).
+ */
+export async function cancelGenerationJob(
+  userId: string,
+  jobId: string,
+): Promise<CancelGenerationJobResult> {
+  const [row] = await db
+    .select({
+      id: generationJob.id,
+      userId: generationJob.userId,
+      status: generationJob.status,
+    })
+    .from(generationJob)
+    .where(eq(generationJob.id, jobId))
+    .limit(1);
+
+  if (!row) return { ok: false, reason: "not_found" };
+  if (row.userId !== userId) return { ok: false, reason: "forbidden" };
+  if (row.status === "completed" || row.status === "failed" || row.status === "cancelled") {
+    return { ok: false, reason: "not_cancellable" };
+  }
+
+  await db
+    .update(generationJob)
+    .set({
+      status: "cancelled",
+      errorMessage: "Dibatalkan pengguna",
+      completedAt: new Date(),
+    })
+    .where(eq(generationJob.id, jobId));
+
+  try {
+    const bullJob = await generationQueue.getJob(jobId);
+    if (bullJob) {
+      try {
+        await bullJob.remove();
+      } catch {
+        // Job is likely active (or already gone) — worker exits via DB `cancelled` + poller.
+      }
+    }
+  } catch {
+    // Redis/BullMQ hiccup — DB already cancelled; worker will exit cooperatively if active.
+  }
+
+  return { ok: true };
+}
+
 export const generationQueue = new Queue("generation", {
   connection: redisConnection,
 });
@@ -18,7 +102,32 @@ export const generationWorker = new Worker(
     const { input, jobId } = job.data;
     const start = Date.now();
 
+    const [initialRow] = await db
+      .select({ status: generationJob.status })
+      .from(generationJob)
+      .where(eq(generationJob.id, jobId))
+      .limit(1);
+
+    if (!initialRow || initialRow.status === "cancelled" || initialRow.status === "completed") {
+      return;
+    }
+
+    const claimed = await db
+      .update(generationJob)
+      .set({ status: "running" })
+      .where(
+        and(eq(generationJob.id, jobId), notInArray(generationJob.status, ["cancelled", "completed"])),
+      )
+      .returning({ id: generationJob.id });
+
+    if (!claimed.length) {
+      return;
+    }
+
+    const cancelPoll = createCancellationPoller(jobId);
+
     const updateProgress = async (progress: number, message: string) => {
+      cancelPoll.check();
       await job.updateProgress(progress);
       await db
         .update(generationJob)
@@ -46,11 +155,6 @@ export const generationWorker = new Worker(
     };
 
     try {
-      await db
-        .update(generationJob)
-        .set({ status: "running" })
-        .where(eq(generationJob.id, jobId));
-
       if (input.mode === "agentic") {
         await updateProgress(10, "Generating passage...");
       }
@@ -65,6 +169,7 @@ export const generationWorker = new Worker(
       const result =
         input.mode === "agentic"
           ? await generateQuestionsAgentic(input, async (p) => {
+              cancelPoll.check();
               const stepProgress = Math.min(
                 10 + Math.round((p.currentStep / p.steps.length) * 80),
                 90,
@@ -74,6 +179,7 @@ export const generationWorker = new Worker(
             })
           : await generateQuestionsQuick(input, {
               onToken: (token) => {
+                cancelPoll.check();
                 countToken(token);
                 // Update progress message with token count every ~500 chars
                 if (approxTokens % 20 === 0) {
@@ -87,7 +193,7 @@ export const generationWorker = new Worker(
               },
             });
 
-      stopHeartbeat();
+      cancelPoll.check();
       await updateProgress(95, "Saving to bank...");
 
       // Idempotent auto-save: check if already saved
@@ -192,6 +298,7 @@ export const generationWorker = new Worker(
 
       await updateProgress(100, "Completed");
 
+      cancelPoll.check();
       await db
         .update(generationJob)
         .set({
@@ -203,7 +310,18 @@ export const generationWorker = new Worker(
         })
         .where(eq(generationJob.id, jobId));
     } catch (err: any) {
-      stopHeartbeat();
+      if (err instanceof GenerationJobCancelledError || err?.name === "GenerationJobCancelledError") {
+        await db
+          .update(generationJob)
+          .set({
+            status: "cancelled",
+            errorMessage: "Dibatalkan pengguna",
+            durationMs: Date.now() - start,
+            completedAt: new Date(),
+          })
+          .where(eq(generationJob.id, jobId));
+        return;
+      }
       await db
         .update(generationJob)
         .set({
@@ -214,6 +332,9 @@ export const generationWorker = new Worker(
         })
         .where(eq(generationJob.id, jobId));
       throw err;
+    } finally {
+      stopHeartbeat();
+      cancelPoll.stop();
     }
   },
   {

packages/api/src/routers/ai.ts

@@ -2,7 +2,7 @@ import { z } from "zod";
 import { eq, desc } from "drizzle-orm";
 import { router, protectedProcedure } from "../index";
 import { generationInputSchema } from "@labas/ai/schemas";
-import { enqueueGeneration } from "../queue";
+import { cancelGenerationJob, enqueueGeneration } from "../queue";
 import { db } from "@labas/db";
 import { question, generationJob } from "@labas/db";
 
@@ -29,6 +29,22 @@ export const aiRouter = router({
       return job;
     }),
 
+  cancelJob: protectedProcedure
+    .input(z.object({ jobId: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      const result = await cancelGenerationJob(ctx.session.user.id, input.jobId);
+      if (!result.ok) {
+        const msg =
+          result.reason === "not_found"
+            ? "Job tidak ditemukan"
+            : result.reason === "forbidden"
+              ? "Tidak diizinkan"
+              : "Job sudah selesai atau tidak bisa dibatalkan";
+        throw new Error(msg);
+      }
+      return { ok: true as const };
+    }),
+
   myJobs: protectedProcedure
     .input(
       z.object({

packages/db/src/schema/app.ts

@@ -437,7 +437,7 @@ export const generationJob = pgTable(
     userId: text("user_id")
       .notNull()
       .references(() => user.id, { onDelete: "cascade" }),
-    status: text("status").notNull().default("pending"), // "pending" | "running" | "completed" | "failed"
+    status: text("status").notNull().default("pending"), // "pending" | "running" | "completed" | "failed" | "cancelled"
     mode: text("mode").notNull().default("quick"), // "quick" | "agentic"
     examTypeId: text("exam_type_id").notNull(),
     sectionTypeId: text("section_type_id").notNull(),