diff --git a/AGENTS.md b/AGENTS.md
index 7134c3dc9d81c2cf3938e6178ebbcb5e0aa9b45a..a4cf16d0a2803c1ecd22ad0cf3174c93b8f756ed 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -93,6 +93,9 @@ bun run build            # Build all packages
 - ❌ **Do not assume Prisma**. Database layer is **Drizzle ORM**.
 - ❌ **Do not hardcode API keys** in source code. AI keys are user-managed via the Settings UI.
 - ❌ **Do not add global CSS** in `apps/web` without checking `packages/ui/src/styles/globals.css` for existing design tokens and CSS variables.
+- ❌ **Do not skip heading levels**. After `<h1>`, the next heading must be `<h2>`, not `<h3>` (or lower). Never have two `<h1>` on one page.
+- ❌ **Do not create custom modal/dialog components**. Use shadcn `<Dialog>` from `@labas/ui/components/dialog` — it provides built-in focus trap, escape key, scroll lock, and ARIA.
+- ❌ **Do not use `any`** in frontend TypeScript. Enforced by eslint `@typescript-eslint/no-explicit-any: "error"` in `apps/web/eslint.config.mjs`.
 
 ---
 
@@ -109,6 +112,25 @@ bun run build            # Build all packages
   npx shadcn@latest add accordion dialog -c packages/ui
   ```
 - App-specific blocks (non-shared) should be added directly in `apps/web/src/components/`.
+- DevTools (TanStack Router, React Query) are **production-gated** via `import.meta.env.DEV` — do not remove the condition.
+- App-level error boundary is in `__root.tsx` using `<ErrorFallback>` — route-level error boundaries via `errorComponent` route option.
+- Lazy-loaded route components use the `.lazy.tsx` pattern: route file is thin, heavy component lives in `components/routes/*Page.tsx` wrapped in `Suspense`.
+
+---
+
+## 5b. Frontend Accessibility Conventions
+
+- **Skip link**: Root layout in `__root.tsx` has a hidden `<SkipLink>` that appears on Tab press, linking to `#main-content` on the `<main>` element.
+- **Icon-only buttons**: Every `<button>` or `<Button>` with only an icon (no visible text) **must** have `aria-label`. The icon element (`<MaterialIcon>`, `<span>`) should NOT have `aria-hidden="true"` unless decorative.
+- **Heading hierarchy**: Never skip levels (`h1 → h2 → h3`, never `h1 → h3`). Exactly one `<h1>` per page. Heading level corresponds to semantic nesting, not visual size.
+- **Form labels**: Every `<Input>`, `<select>`, `<textarea>` needs an associated `<Label>` (with `htmlFor` + `id`) OR an `aria-label` attribute. Search inputs, OTP digits, and icon-only filter buttons are common offenders.
+- **Dialogs**: All modals use the shadcn `<Dialog>` component (from `@labas/ui/components/dialog`), which provides:
+  - Focus trap inside dialog
+  - Escape key to close
+  - Scroll lock on body
+  - Focus restoration to trigger element on close
+  - ARIA `role="dialog"`, `aria-modal`, `aria-labelledby`
+- **Custom tabs/accordions**: Must have proper ARIA roles (`role="tablist"`, `role="tab"`, `aria-selected`, `tabindex` for roving tabindex) and arrow key handlers. Prefer shadcn `<Tabs>` where possible; use manual ARIA + `handleRovingKeyDown` helper only when tabs have close buttons or other non-standard elements.
 
 ---
 
@@ -187,7 +209,31 @@ bun run build            # Build all packages
 - Routers live in `packages/api/src/routers/`.
 - Register new routers in `packages/api/src/routers/index.ts`.
 
-## 11. Git & Workflow
+## 11. Admin Routes & DataTable
+
+### Admin Route Structure
+- Admin routes are flat files: `routes/admin.users.tsx`, `routes/admin.credits.tsx`, etc.
+- Wrapped by `routes/admin.tsx` layout shell (sidebar + admin role check).
+- All admin tRPC procedures live in `packages/api/src/routers/admin.ts` and use `adminProcedure` (extends `protectedProcedure` with role check).
+- Mutations use `audit()` helper for audit logging to `adminAuditLog` table.
+
+### DataTable Component (Design Reference)
+- Admin table routes should eventually use a `<DataTable<T>>` component from `components/admin/DataTable.tsx`.
+- API design: generic `<T>`, column defs with `accessorKey`/`accessorFn`/`cell` render prop, `actions` render prop, opt-in pagination, server-side sorting.
+- Search bars, filter pills, and status pill buttons live **above** the DataTable in the route component (not inside it).
+- **Do NOT** use DataTable for card-based layouts (e.g., Featured editor's pick) — keep card layouts as-is.
+
+### Current Migration Status
+- `admin.users.tsx` — table-based, good candidate for DataTable
+- `admin.jobs.tsx` — table-based, good candidate
+- `admin.moderation.tsx` — table-based, good candidate
+- `admin.credits.tsx` — transaction table, good candidate
+- `admin.featured.tsx` — card layout, keep as-is
+- `admin.index.tsx` — dashboard stats cards, keep as-is
+
+---
+
+## 11b. Git & Workflow
 
 - Do **NOT** run `git commit`, `git push`, `git rebase`, or force-push unless the user explicitly asks for it.
 - Do **NOT** create `README.md` or documentation files unless explicitly requested.
@@ -230,4 +276,4 @@ bun run build            # Build all packages
 
 ---
 
-_Last updated: 2026-05-14_
+_Last updated: 2026-05-19_
diff --git a/DESIGN.md b/DESIGN.md
index 14bc1af25e7044a3828d1b3cf373674ced3d4075..3bdaecfbbc95e45bfdf0b1214a3a96d42714e741 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -302,3 +302,89 @@ What makes Clay truly distinctive is its hover micro-animations: buttons on hove
 5. Hover animations are the signature — rotation + hard shadow, not subtle fades
 6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate
 7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles
+
+---
+
+## 4. Architectural Decisions (Q2 2026)
+
+### 4.1 Component Decomposition
+
+| Refactored Component | Original Lines | After | Strategy |
+|---|---|---|---|
+| `AttemptTestView.tsx` | 589 | ~320 | Extract header (AttemptHeader), abandon/finish dialogs, floating nav |
+| `use-generation-jobs.ts` | 391 | ~120 (facade) | Extract `use-job-shared.ts`, `use-job-state.ts`, `use-polling-transport.ts` |
+
+### 4.2 Lazy Loading Architecture
+
+Heavy route components extracted to `apps/web/src/components/routes/*Page.tsx` and loaded via `.lazy.tsx`:
+- `BankPage`, `GeneratePage`, `LandingPage`, `PackagesPage`, `SettingsPage`
+- Libraries `recharts` and `react-joyride` wrapped in lazy bundles (`ChartsBundle.tsx`, `TourGuideImpl.tsx`)
+- Each chunk loaded on-demand via React.lazy + Suspense
+
+### 4.3 Semantic CSS Token Mapping
+
+All `packages/ui` primitives use semantic tokens; zero app-specific CSS vars in primitives:
+- `--primary` → `--matcha-600` (green/action)
+- `--secondary` → `--clay-black` (black/neutral)
+- Theme lives in `packages/ui/src/styles/globals.css`
+- App (`apps/web`) imports only `@import "@labas/ui/globals.css"` — no `index.css` overrides
+
+### 4.4 Accessibility Decisions
+
+| Pattern | Implementation | Files |
+|---------|---------------|-------|
+| Focus trap + escape | shadcn `<Dialog>` (adapter: Base UI) | 6 modals in `components/` |
+| Keyboard tabs | `handleRovingKeyDown` helper + ARIA | `FilterBar.tsx`, `GeneratePage.tsx`, `FloatingNav.tsx` |
+| shadcn Tabs | `<Tabs>` primitive for simple tab groups | `PackagesPage.tsx`, `admin.featured.tsx` |
+| Skip link | `<SkipLink>` component, `#main-content` | `__root.tsx` |
+| Icon buttons | `aria-label` required, `title` insufficient | 16 buttons across 6 files |
+| Heading hierarchy | `h1 → h2 → h3`, never skip | Audited ~15 files |
+
+### 4.5 Admin DataTable API (Design)
+
+```ts
+interface ColumnDef<T> {
+  id: string;
+  header: string;
+  accessorKey?: keyof T & string;
+  accessorFn?: (row: T) => ReactNode;
+  cell?: (props: { row: T; value: ReactNode }) => ReactNode;
+  sortable?: boolean;
+  size?: string;
+}
+
+interface DataTableProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  keyExtractor: (row: T) => string | number;
+  isLoading?: boolean;
+  emptyMessage?: string;
+  page?: number;
+  totalPages?: number;
+  onPageChange?: (p: number) => void;
+  sortColumn?: string;
+  sortDirection?: "asc" | "desc";
+  onSort?: (column: string) => void;
+  actions?: (row: T) => ReactNode;
+}
+```
+
+- Generic `<T>` for full type safety
+- Opt-in pagination (reuses existing `Pagination` component)
+- Server-side sorting via `sortable` + `onSort` callback
+- Search bars/filter pills sit **above** DataTable, not inside it
+- Card layouts (Featured editor's pick) excluded — DataTable is table-only
+
+### 4.6 Job Transport Abstraction
+
+Polling implemented as `JobTransport` interface in `packages/ai/src/agentic.ts`:
+- Currently: in-memory `Map` for rate limiting
+- Designed to swap to WebSocket/SSE without changing callers
+- Exported: `checkRateLimit(userId)`, `JobTransport` type
+
+### 4.7 Type Safety
+
+- `no-explicit-any: "error"` enforced via `apps/web/eslint.config.mjs`
+- Shared frontend types in `apps/web/src/lib/types.ts` — all fields optional (permissive) to accept diverse tRPC shapes without `any`
+- tRPC errors caught as `unknown`, narrowed via `getErrorMessage(e)` helper
+- Zero `any` violations across entire frontend after Q2 2026 sprint
diff --git a/apps/web/eslint.config.mjs b/apps/web/eslint.config.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..497c0337cdc926e2e6075cfd7f56b0a81213bd95
--- /dev/null
+++ b/apps/web/eslint.config.mjs
@@ -0,0 +1,17 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ["src/**/*.{ts,tsx}"],
+    rules: {
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+    },
+  },
+  {
+    ignores: ["dist", "node_modules", "src/routeTree.gen.ts"],
+  },
+);
\ No newline at end of file
diff --git a/apps/web/package.json b/apps/web/package.json
index 318f2c3aef491a238633e50233562c981da802ca..b3a5dc4e18a56ff68755dea7c8dd08256ac378c4 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,6 +11,7 @@
     "start": "vite",
     "test": "bun test",
     "check-types": "vite build && tsc --noEmit",
+    "lint": "eslint src",
     "generate-pwa-assets": "pwa-assets-generator"
   },
   "dependencies": {
@@ -41,6 +42,7 @@
     "zod": "catalog:"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@labas/config": "workspace:*",
     "@tanstack/react-query-devtools": "^5.91.1",
     "@tanstack/react-router-devtools": "^1.166.13",
@@ -50,9 +52,11 @@
     "@types/react-dom": "catalog:",
     "@vite-pwa/assets-generator": "^1.0.2",
     "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.4.0",
     "postcss": "^8.5.10",
     "tailwindcss": "^4.2.2",
     "typescript": "catalog:",
+    "typescript-eslint": "^8.59.4",
     "vite": "^8.0.8"
   }
 }
diff --git a/apps/web/src/components/GettingStartedCard.tsx b/apps/web/src/components/GettingStartedCard.tsx
index 22095e9e72a4b0bc7703e47d18371a000aec147d..750432e5fc5834e45ec21de31329ea67c3b8fb30 100644
--- a/apps/web/src/components/GettingStartedCard.tsx
+++ b/apps/web/src/components/GettingStartedCard.tsx
@@ -73,6 +73,7 @@ export function GettingStartedCard() {
           </div>
           <button
             onClick={dismiss}
+            aria-label="Tutup"
             className="text-[var(--warm-silver)] hover:text-[var(--clay-black)] transition-colors cursor-pointer"
           >
             <MaterialIcon name="close" className="text-xl" />
diff --git a/apps/web/src/components/TourGuide.tsx b/apps/web/src/components/TourGuide.tsx
index 2a760c74d2a017ea0ae9e8a7cd2b23920e1f358d..d033248b8510a86e8ccc34bd2c7a008d7a013c67 100644
--- a/apps/web/src/components/TourGuide.tsx
+++ b/apps/web/src/components/TourGuide.tsx
@@ -1,67 +1,20 @@
-import { useState, useEffect } from "react";
-import { Joyride, type Step, type EventData } from "react-joyride";
+import { Suspense, lazy } from "react";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import type { Step } from "react-joyride";
 
-const joyrideOptions = {
-  primaryColor: "var(--matcha-600)",
-  textColor: "var(--clay-black)",
-  backgroundColor: "var(--pure-white)",
-  arrowColor: "var(--pure-white)",
-  overlayColor: "rgba(0,0,0,0.4)",
-};
+const TourGuideImpl = lazy(() => import("./TourGuideImpl").then((m) => ({ default: m.TourGuideImpl })));
+const PageTourImpl = lazy(() => import("./TourGuideImpl").then((m) => ({ default: m.PageTourImpl })));
 
-const joyrideStyles = {
-  buttonBack: { color: "var(--warm-charcoal)", fontSize: "14px", fontWeight: 500 } as any,
-  buttonSkip: { color: "var(--warm-charcoal)", fontSize: "14px", fontWeight: 500 } as any,
-  tooltipContainer: { textAlign: "left" } as any,
-  tooltipContent: { fontSize: "14px", lineHeight: "1.6", padding: "8px 0" } as any,
-  tooltipTitle: { fontSize: "18px", fontWeight: 700, fontFamily: "Manrope, sans-serif" } as any,
-};
-
-const joyrideLocale = { back: "Kembali", close: "Tutup", last: "Selesai", next: "Lanjut", skip: "Lewati" };
-
-// ── Global site tour ──
+export type { Step };
 
 const LS_GLOBAL = "labas-tour-completed";
 const TRIGGER_GLOBAL = "labas-tour-trigger";
 
-const globalSteps: Step[] = [
-  { target: "body" as any, placement: "center", title: "Selamat Datang di Labas!", content: "Platform latihan ujian bahasa berbasis AI. Yuk, kita lihat fitur-fitur utamanya!", hideOverlay: true },
-  { target: "[data-tour='dashboard-stats']", title: "Ringkasan Aktivitas", content: "Pantau jumlah latihan, waktu belajar, soal terjawab, dan akurasi kamu di sini.", spotlightPadding: 8 },
-  { target: "[data-tour='nav-generate']", title: "AI Lab — Generate Soal", content: "Buat soal latihan sendiri pakai AI. Pilih jenis ujian, section, format, dan topik.", spotlightPadding: 4 },
-  { target: "[data-tour='nav-bank']", title: "Bank Soal — Buat Paket", content: "Atur soal-soal kamu jadi paket latihan dari bank soal.", spotlightPadding: 4 },
-  { target: "[data-tour='nav-packages']", title: "Paket Soal — Mulai Latihan", content: "Temukan paket soal dari komunitas atau buatan sendiri.", spotlightPadding: 4 },
-  { target: "[data-tour='nav-analytics']", title: "Analytics — Evaluasi", content: "Lihat analitik mendalam: skor, tren, dan rekomendasi belajar.", spotlightPadding: 4 },
-  { target: "body" as any, placement: "center", title: "Siap Belajar?", content: "Setiap halaman punya panduan sendiri. Cari tombol ? di pojok kanan bawah halaman!", hideOverlay: true },
-];
-
 export function TourGuide() {
-  const [run, setRun] = useState(false);
-
-  useEffect(() => {
-    const onTrigger = () => { localStorage.removeItem(LS_GLOBAL); setRun(true); };
-    window.addEventListener(TRIGGER_GLOBAL, onTrigger);
-
-    const completed = localStorage.getItem(LS_GLOBAL);
-    if (!completed) {
-      const timer = setTimeout(() => setRun(true), 800);
-      return () => { clearTimeout(timer); window.removeEventListener(TRIGGER_GLOBAL, onTrigger); };
-    }
-
-    return () => window.removeEventListener(TRIGGER_GLOBAL, onTrigger);
-  }, []);
-
-  const handleEvent = (data: EventData) => {
-    const { action, status } = data;
-    if (status === "finished" || status === "skipped") { localStorage.setItem(LS_GLOBAL, "true"); setRun(false); }
-    if (action === "close" || action === "skip") setRun(false);
-  };
-
   return (
-    <Joyride steps={globalSteps} run={run} continuous
-      options={{ ...joyrideOptions, showProgress: true, buttons: ["back", "primary", "skip"] }}
-      locale={joyrideLocale} styles={joyrideStyles} onEvent={handleEvent}
-    />
+    <Suspense fallback={null}>
+      <TourGuideImpl />
+    </Suspense>
   );
 }
 
@@ -78,32 +31,10 @@ interface PageTourProps {
 }
 
 export function PageTour({ storageKey, steps, autoDelay }: PageTourProps) {
-  const [run, setRun] = useState(false);
-
-  useEffect(() => {
-    const onTrigger = () => { localStorage.removeItem(storageKey); setRun(true); };
-    window.addEventListener(storageKey, onTrigger);
-
-    const completed = localStorage.getItem(storageKey);
-    if (!completed && autoDelay !== undefined) {
-      const timer = setTimeout(() => setRun(true), autoDelay);
-      return () => { clearTimeout(timer); window.removeEventListener(storageKey, onTrigger); };
-    }
-
-    return () => window.removeEventListener(storageKey, onTrigger);
-  }, []);
-
-  const handleEvent = (data: EventData) => {
-    const { action, status } = data;
-    if (status === "finished" || status === "skipped") { localStorage.setItem(storageKey, "true"); setRun(false); }
-    if (action === "close" || action === "skip") setRun(false);
-  };
-
   return (
-    <Joyride steps={steps} run={run} continuous
-      options={{ ...joyrideOptions, showProgress: true, buttons: ["back", "primary", "skip"] }}
-      locale={joyrideLocale} styles={joyrideStyles} onEvent={handleEvent}
-    />
+    <Suspense fallback={null}>
+      <PageTourImpl storageKey={storageKey} steps={steps} autoDelay={autoDelay} />
+    </Suspense>
   );
 }
 
diff --git a/apps/web/src/components/TourGuideImpl.tsx b/apps/web/src/components/TourGuideImpl.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b1e137eaa85a32d2ca925bcba80426621c6a82ad
--- /dev/null
+++ b/apps/web/src/components/TourGuideImpl.tsx
@@ -0,0 +1,106 @@
+import { useState, useEffect, type CSSProperties } from "react";
+import { Joyride, type Step, type EventData } from "react-joyride";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+const joyrideOptions = {
+  primaryColor: "var(--matcha-600)",
+  textColor: "var(--clay-black)",
+  backgroundColor: "var(--pure-white)",
+  arrowColor: "var(--pure-white)",
+  overlayColor: "rgba(0,0,0,0.4)",
+};
+
+const joyrideStyles: Record<string, CSSProperties> = {
+  buttonBack: { color: "var(--warm-charcoal)", fontSize: "14px", fontWeight: 500 },
+  buttonSkip: { color: "var(--warm-charcoal)", fontSize: "14px", fontWeight: 500 },
+  tooltipContainer: { textAlign: "left" },
+  tooltipContent: { fontSize: "14px", lineHeight: "1.6", padding: "8px 0" },
+  tooltipTitle: { fontSize: "18px", fontWeight: 700, fontFamily: "Manrope, sans-serif" },
+};
+
+const joyrideLocale = { back: "Kembali", close: "Tutup", last: "Selesai", next: "Lanjut", skip: "Lewati" };
+
+export type { Step, EventData };
+
+// ── Global site tour ──
+
+const LS_GLOBAL = "labas-tour-completed";
+const TRIGGER_GLOBAL = "labas-tour-trigger";
+
+const globalSteps: Step[] = [
+  { target: "body", placement: "center", title: "Selamat Datang di Labas!", content: "Platform latihan ujian bahasa berbasis AI. Yuk, kita lihat fitur-fitur utamanya!", hideOverlay: true },
+  { target: "[data-tour='dashboard-stats']", title: "Ringkasan Aktivitas", content: "Pantau jumlah latihan, waktu belajar, soal terjawab, dan akurasi kamu di sini.", spotlightPadding: 8 },
+  { target: "[data-tour='nav-generate']", title: "AI Lab — Generate Soal", content: "Buat soal latihan sendiri pakai AI. Pilih jenis ujian, section, format, dan topik.", spotlightPadding: 4 },
+  { target: "[data-tour='nav-bank']", title: "Bank Soal — Buat Paket", content: "Atur soal-soal kamu jadi paket latihan dari bank soal.", spotlightPadding: 4 },
+  { target: "[data-tour='nav-packages']", title: "Paket Soal — Mulai Latihan", content: "Temukan paket soal dari komunitas atau buatan sendiri.", spotlightPadding: 4 },
+  { target: "[data-tour='nav-analytics']", title: "Analytics — Evaluasi", content: "Lihat analitik mendalam: skor, tren, dan rekomendasi belajar.", spotlightPadding: 4 },
+  { target: "body", placement: "center", title: "Siap Belajar?", content: "Setiap halaman punya panduan sendiri. Cari tombol ? di pojok kanan bawah halaman!", hideOverlay: true },
+];
+
+export function TourGuideImpl() {
+  const [run, setRun] = useState(false);
+
+  useEffect(() => {
+    const onTrigger = () => { localStorage.removeItem(LS_GLOBAL); setRun(true); };
+    window.addEventListener(TRIGGER_GLOBAL, onTrigger);
+
+    const completed = localStorage.getItem(LS_GLOBAL);
+    if (!completed) {
+      const timer = setTimeout(() => setRun(true), 800);
+      return () => { clearTimeout(timer); window.removeEventListener(TRIGGER_GLOBAL, onTrigger); };
+    }
+
+    return () => window.removeEventListener(TRIGGER_GLOBAL, onTrigger);
+  }, []);
+
+  const handleEvent = (data: EventData) => {
+    const { action, status } = data;
+    if (status === "finished" || status === "skipped") { localStorage.setItem(LS_GLOBAL, "true"); setRun(false); }
+    if (action === "close" || action === "skip") setRun(false);
+  };
+
+  return (
+    <Joyride steps={globalSteps} run={run} continuous
+      options={{ ...joyrideOptions, showProgress: true, buttons: ["back", "primary", "skip"] }}
+      locale={joyrideLocale} styles={joyrideStyles} onEvent={handleEvent}
+    />
+  );
+}
+
+// ── Page-specific tour ──
+
+interface PageTourProps {
+  storageKey: string;
+  steps: Step[];
+  autoDelay?: number;
+}
+
+export function PageTourImpl({ storageKey, steps, autoDelay }: PageTourProps) {
+  const [run, setRun] = useState(false);
+
+  useEffect(() => {
+    const onTrigger = () => { localStorage.removeItem(storageKey); setRun(true); };
+    window.addEventListener(storageKey, onTrigger);
+
+    const completed = localStorage.getItem(storageKey);
+    if (!completed && autoDelay !== undefined) {
+      const timer = setTimeout(() => setRun(true), autoDelay);
+      return () => { clearTimeout(timer); window.removeEventListener(storageKey, onTrigger); };
+    }
+
+    return () => window.removeEventListener(storageKey, onTrigger);
+  }, []);
+
+  const handleEvent = (data: EventData) => {
+    const { action, status } = data;
+    if (status === "finished" || status === "skipped") { localStorage.setItem(storageKey, "true"); setRun(false); }
+    if (action === "close" || action === "skip") setRun(false);
+  };
+
+  return (
+    <Joyride steps={steps} run={run} continuous
+      options={{ ...joyrideOptions, showProgress: true, buttons: ["back", "primary", "skip"] }}
+      locale={joyrideLocale} styles={joyrideStyles} onEvent={handleEvent}
+    />
+  );
+}
diff --git a/apps/web/src/components/analytics/BreakdownCharts.tsx b/apps/web/src/components/analytics/BreakdownCharts.tsx
index aa2c53047ed0a439b4036e9a6b57d0531c428d50..a29674b3a80220b9d3d2d672c8bec3fe0413cd84 100644
--- a/apps/web/src/components/analytics/BreakdownCharts.tsx
+++ b/apps/web/src/components/analytics/BreakdownCharts.tsx
@@ -13,7 +13,7 @@ import { formatLabel } from "@/lib/format";
 import { formatTime } from "@/lib/time";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
-interface ExamTypeItem {
+export interface ExamTypeItem {
   examTypeId: string;
   examTypeName: string;
   accuracyPct: number;
@@ -22,7 +22,7 @@ interface ExamTypeItem {
   attempts: number;
 }
 
-interface SectionTypeItem {
+export interface SectionTypeItem {
   sectionTypeId: string;
   sectionTypeName: string;
   accuracyPct: number;
@@ -31,7 +31,7 @@ interface SectionTypeItem {
   attempts: number;
 }
 
-interface FormatItem {
+export interface FormatItem {
   format: string;
   accuracyPct: number;
   avgTimeSpentSec: number;
diff --git a/apps/web/src/components/analytics/ChartsBundle.tsx b/apps/web/src/components/analytics/ChartsBundle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a9eea4f49bec6f85704a2f88a21c526fb56b809a
--- /dev/null
+++ b/apps/web/src/components/analytics/ChartsBundle.tsx
@@ -0,0 +1,45 @@
+import { ScoreTrendChart } from "./ScoreTrendChart";
+import { BreakdownCharts, type ExamTypeItem, type SectionTypeItem, type FormatItem } from "./BreakdownCharts";
+import { TimeAnalyticsPanel, type SectionTimeItem, type FormatTimeItem, type TimeTrendItem } from "./TimeAnalyticsPanel";
+
+interface ChartsBundleProps {
+  trend: { date: string; attempts: number; avgScorePct: number }[] | undefined;
+  byExamType: ExamTypeItem[] | undefined;
+  bySectionType: SectionTypeItem[] | undefined;
+  byFormat: FormatItem[] | undefined;
+  sectionTime: SectionTimeItem[] | undefined;
+  formatTimeData: FormatTimeItem[] | undefined;
+  timeTrend: TimeTrendItem[] | undefined;
+}
+
+export default function ChartsBundle({
+  trend,
+  byExamType,
+  bySectionType,
+  byFormat,
+  sectionTime,
+  formatTimeData,
+  timeTrend,
+}: ChartsBundleProps) {
+  return (
+    <>
+      <div className="mb-8">
+        <ScoreTrendChart data={trend} />
+      </div>
+      <div className="mb-8">
+        <BreakdownCharts
+          byExamType={byExamType}
+          bySectionType={bySectionType}
+          byFormat={byFormat}
+        />
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <TimeAnalyticsPanel
+          sectionTime={sectionTime}
+          formatTimeData={formatTimeData}
+          timeTrend={timeTrend}
+        />
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/analytics/TimeAnalyticsPanel.tsx b/apps/web/src/components/analytics/TimeAnalyticsPanel.tsx
index 0ee6c2cee79e46c8437a29489f3ed60ca6baa0ca..76bfb7d0d5325ab36c4352ea58492cfd041dadb7 100644
--- a/apps/web/src/components/analytics/TimeAnalyticsPanel.tsx
+++ b/apps/web/src/components/analytics/TimeAnalyticsPanel.tsx
@@ -11,19 +11,19 @@ import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/c
 import { formatTime } from "@/lib/time";
 import { formatLabel } from "@/lib/format";
 
-interface SectionTimeItem {
+export interface SectionTimeItem {
   sectionTypeName: string;
   avgTimeSpentSec: number;
   totalTimeSpentSec: number;
 }
 
-interface FormatTimeItem {
+export interface FormatTimeItem {
   format: string;
   avgTimeSpentSec: number;
   totalTimeSpentSec: number;
 }
 
-interface TimeTrendItem {
+export interface TimeTrendItem {
   date: string;
   avgTimeSpentSec: number;
 }
diff --git a/apps/web/src/components/attempt/OptionDisplay.tsx b/apps/web/src/components/attempt/OptionDisplay.tsx
index 2ba163f9edbb2b350063e4fde5002bab3b802900..05ee4801f16d2e99c6792f910dd6fc21a41e1e31 100644
--- a/apps/web/src/components/attempt/OptionDisplay.tsx
+++ b/apps/web/src/components/attempt/OptionDisplay.tsx
@@ -2,18 +2,28 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 import { MCQ_FORMATS, McqFormat } from "@/lib/question-formats";
 
+interface McqOptionItem {
+  key: string;
+  text: string;
+}
+
+interface MatchingOptionItem {
+  left: string;
+  right?: string;
+}
+
 interface OptionDisplayProps {
   format: string;
-  options: any[];
+  options: unknown;
   correctAnswer: string;
   userAnswer: string;
 }
 
 export function OptionDisplay({ format, options, correctAnswer, userAnswer }: OptionDisplayProps) {
-  if (!options || options.length === 0) return null;
+  if (!Array.isArray(options) || options.length === 0) return null;
 
   if (format === "matching_pairs") {
-    return <MatchingPairsOptions options={options} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
+    return <MatchingPairsOptions options={options as MatchingOptionItem[]} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
   }
 
   if (format === "true_false_not_given") {
@@ -24,8 +34,8 @@ export function OptionDisplay({ format, options, correctAnswer, userAnswer }: Op
     return <TriStateOptions choices={["YES", "NO", "NOT_GIVEN"]} labels={{ YES: "Yes", NO: "No", NOT_GIVEN: "Not Given" }} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
   }
 
-  if (MCQ_FORMATS.includes(format as McqFormat)) {
-    return <McqOptions options={options} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
+  if ((MCQ_FORMATS as readonly string[]).includes(format)) {
+    return <McqOptions options={options as McqOptionItem[]} correctAnswer={correctAnswer} userAnswer={userAnswer} />;
   }
 
   return null;
@@ -114,7 +124,7 @@ function TriStateOptions({ choices, labels, correctAnswer, userAnswer }: { choic
   );
 }
 
-function MatchingPairsOptions({ options, correctAnswer, userAnswer }: { options: { left: string; right?: string }[]; correctAnswer: string; userAnswer: string }) {
+function MatchingPairsOptions({ options, correctAnswer, userAnswer }: { options: MatchingOptionItem[]; correctAnswer: string; userAnswer: string }) {
   const parseMapping = (s: string): Map<string, string> => {
     const map = new Map();
     if (!s) return map;
diff --git a/apps/web/src/components/attempt/QuestionReviewCard.tsx b/apps/web/src/components/attempt/QuestionReviewCard.tsx
index a4e925b1492595d994c2bdb255622c8daf809f08..6ceedcfb965769ab456b6ffba4cbd1aa9475a101 100644
--- a/apps/web/src/components/attempt/QuestionReviewCard.tsx
+++ b/apps/web/src/components/attempt/QuestionReviewCard.tsx
@@ -5,13 +5,14 @@ import { Button } from "@labas/ui/components/button";
 import { Input } from "@labas/ui/components/input";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { formatTime } from "@/lib/time";
+import type { Question } from "@/lib/types";
 import { OptionDisplay } from "./OptionDisplay";
 
 interface QuestionReviewCardProps {
-  q: any;
+  q: Question;
   secIdx: number;
   qIdx: number;
-  ans: any;
+  ans: { questionId: string; userAnswer?: string; answer?: string; isCorrect?: boolean | null; partialScore?: number | null; timeSpentSec?: number } | null;
   userId?: string;
   isExpanded: boolean;
   onToggleExpand: () => void;
@@ -97,7 +98,7 @@ export function QuestionReviewCard({
           </p>
           <div className="flex items-center gap-2 mt-1">
             <span className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
-              {q.format.replace(/_/g, " ")}
+              {(q.format ?? "").replace(/_/g, " ")}
             </span>
             {ans?.timeSpentSec != null && (
               <span className="text-[10px] text-[var(--warm-silver)] flex items-center gap-0.5">
@@ -135,9 +136,9 @@ export function QuestionReviewCard({
           {/* Interactive Option Display */}
           {hasOptions && (
             <OptionDisplay
-              format={q.format}
+              format={q.format ?? ""}
               options={q.options}
-              correctAnswer={q.correctAnswer}
+              correctAnswer={q.correctAnswer ?? ""}
               userAnswer={userAnswer}
             />
           )}
diff --git a/apps/web/src/components/bank/AutoBundleModal.tsx b/apps/web/src/components/bank/AutoBundleModal.tsx
index bb4089f40cd5f7c90285fb8b364f7439d85487f4..82c56e0df8a25819c7c33a57f13045c09ac2c805 100644
--- a/apps/web/src/components/bank/AutoBundleModal.tsx
+++ b/apps/web/src/components/bank/AutoBundleModal.tsx
@@ -1,6 +1,12 @@
 import { useState } from "react";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@labas/ui/components/dialog";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 export function AutoBundleModal({
@@ -32,24 +38,13 @@ export function AutoBundleModal({
   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)]">
+    <Dialog open onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle 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>
+          </DialogTitle>
+        </DialogHeader>
 
         <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">
@@ -180,7 +175,7 @@ export function AutoBundleModal({
             {isPending ? "Membuat..." : "Buat Paket"}
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/apps/web/src/components/bank/BundleSidebar.tsx b/apps/web/src/components/bank/BundleSidebar.tsx
index 6fd3e61c8f8baae1167c5b03413f5b729f8990c2..10ba0b843161eb12674c264d5774c52babfb1a53 100644
--- a/apps/web/src/components/bank/BundleSidebar.tsx
+++ b/apps/web/src/components/bank/BundleSidebar.tsx
@@ -7,9 +7,9 @@ interface BundleItem {
   id: string;
   questionText?: string;
   title?: string;
-  examTypeName?: string;
+  examTypeName?: string | null;
   format?: string;
-  sectionTypeName?: string;
+  sectionTypeName?: string | null;
 }
 
 interface BundleSidebarProps {
@@ -82,7 +82,7 @@ export function BundleSidebar({
               Belum ada yang dipilih
             </div>
           ) : (
-            activeBundle.map((item: any, idx: number) => {
+            activeBundle.map((item, idx: number) => {
               const isQ = mode === "soal";
               return (
                 <div
@@ -93,17 +93,18 @@ export function BundleSidebar({
                     <MaterialIcon name={isQ ? "quiz" : "folder_open"} className="text-sm" />
                   </div>
                   <div className="flex-1 min-w-0">
-                    <h5 className="text-sm font-bold text-[var(--clay-black)] truncate">
+                    <h4 className="text-sm font-bold text-[var(--clay-black)] truncate">
                       {isQ ? item.questionText : item.title}
-                    </h5>
+                    </h4>
                     <p className="text-xs text-[var(--warm-charcoal)]">
                       {isQ
-                        ? `${item.examTypeName} \u00B7 ${formatLabel(item.format)}`
+                        ? `${item.examTypeName} \u00B7 ${formatLabel(item.format ?? "")}`
                         : `${item.examTypeName} \u00B7 ${item.sectionTypeName}`}
                     </p>
                   </div>
                   <button
                     onClick={() => onRemoveFromBundle(item.id, isQ ? "question" : "section")}
+                    aria-label={`Hapus ${isQ ? "soal" : "section"} dari bundle`}
                     className="text-[var(--warm-silver)] hover:text-[var(--pomegranate-400)] opacity-0 group-hover:opacity-100 transition-opacity shrink-0 cursor-pointer"
                   >
                     <MaterialIcon name="delete" className="text-sm" />
diff --git a/apps/web/src/components/bank/CreatePackageModal.tsx b/apps/web/src/components/bank/CreatePackageModal.tsx
index 24149bf182a72d79be57003e4cff3ca2fe65f15a..1496b755f9bc115f483aea3f257723720d850b50 100644
--- a/apps/web/src/components/bank/CreatePackageModal.tsx
+++ b/apps/web/src/components/bank/CreatePackageModal.tsx
@@ -1,6 +1,12 @@
 import { useState } from "react";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@labas/ui/components/dialog";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 export function CreatePackageModal({
@@ -18,30 +24,18 @@ export function CreatePackageModal({
   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)]">
+    <Dialog open onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle 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>
+          </DialogTitle>
+        </DialogHeader>
 
         <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">
@@ -115,7 +109,7 @@ export function CreatePackageModal({
             {isPending ? "Membuat..." : "Buat Paket"}
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/apps/web/src/components/bank/FilterBar.tsx b/apps/web/src/components/bank/FilterBar.tsx
index 700d0cf4a7867cb05cc2260ebc3ee925722e1533..204e10429279f7d55b860b93bb4e893a00517a94 100644
--- a/apps/web/src/components/bank/FilterBar.tsx
+++ b/apps/web/src/components/bank/FilterBar.tsx
@@ -59,7 +59,12 @@ export function FilterBar({
       <div className="px-6 md:px-12 lg:px-16 max-w-7xl mx-auto pt-4 pb-3 space-y-3">
         {/* ── Tier 1: Mode tabs ── */}
         <div className="flex items-center justify-between gap-3">
-          <div className="flex gap-2">
+          <div
+            className="flex gap-2"
+            role="tablist"
+            aria-label="Mode bank soal"
+            onKeyDown={(e) => handleRovingKeyDown(e, "tab")}
+          >
             <ModeButton active={mode === "soal"} onClick={() => onSetMode("soal")}>
               Dari Soal
             </ModeButton>
@@ -68,7 +73,12 @@ export function FilterBar({
             </ModeButton>
           </div>
           {mode === "soal" && (
-            <div className="flex gap-2">
+            <div
+              className="flex gap-2"
+              role="tablist"
+              aria-label="Sumber soal"
+              onKeyDown={(e) => handleRovingKeyDown(e, "tab")}
+            >
               <TabButton active={tab === "mine"} onClick={() => onSetTab("mine")}>
                 Soal Saya
               </TabButton>
@@ -80,7 +90,12 @@ export function FilterBar({
         </div>
 
         {/* ── Tier 2: Exam type chips ── */}
-        <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
+        <div
+          className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide"
+          role="radiogroup"
+          aria-label="Jenis ujian"
+          onKeyDown={(e) => handleRovingKeyDown(e, "radio")}
+        >
           <ChipButton
             active={examType === ""}
             onClick={() => onSetExamType("")}
@@ -110,7 +125,12 @@ export function FilterBar({
 
         {/* ── Visibility sub-filter (only in "mine" tab) ── */}
         {mode === "soal" && tab === "mine" && onSetVisibility && (
-          <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
+          <div
+            className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide"
+            role="radiogroup"
+            aria-label="Visibilitas soal"
+            onKeyDown={(e) => handleRovingKeyDown(e, "radio")}
+          >
             <VisChipButton
               active={visibility === "all"}
               onClick={() => onSetVisibility("all")}
@@ -143,6 +163,7 @@ export function FilterBar({
               placeholder={mode === "soal" ? "Cari soal..." : "Cari section..."}
               value={searchText}
               onChange={(e) => onSetSearch(e.target.value)}
+              aria-label={mode === "soal" ? "Cari soal" : "Cari section"}
               className="pl-10 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
             />
           </div>
@@ -169,6 +190,7 @@ export function FilterBar({
                 <Button
                   variant="outline"
                   onClick={onClearFilters}
+                  aria-label="Reset filter"
                   className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] h-11 clay-hover cursor-pointer"
                 >
                   <MaterialIcon name="filter_alt_off" />
@@ -242,9 +264,32 @@ export function FilterBar({
   );
 }
 
+function handleRovingKeyDown(e: React.KeyboardEvent<HTMLDivElement>, role: string) {
+  const buttons = Array.from(e.currentTarget.querySelectorAll(`[role="${role}"]`)) as HTMLElement[];
+  const idx = buttons.findIndex((b) => b === document.activeElement);
+  if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+    e.preventDefault();
+    const next = buttons[(idx + 1) % buttons.length];
+    next?.focus();
+  } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+    e.preventDefault();
+    const prev = buttons[(idx - 1 + buttons.length) % buttons.length];
+    prev?.focus();
+  } else if (e.key === "Home") {
+    e.preventDefault();
+    buttons[0]?.focus();
+  } else if (e.key === "End") {
+    e.preventDefault();
+    buttons[buttons.length - 1]?.focus();
+  }
+}
+
 function ModeButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
   return (
     <button
+      role="tab"
+      aria-selected={active}
+      tabIndex={active ? 0 : -1}
       onClick={onClick}
       className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all cursor-pointer ${
         active
@@ -260,6 +305,9 @@ function ModeButton({ active, onClick, children }: { active: boolean; onClick: (
 function TabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
   return (
     <button
+      role="tab"
+      aria-selected={active}
+      tabIndex={active ? 0 : -1}
       onClick={onClick}
       className={`px-3 py-1.5 rounded-[var(--radius-lg)] text-xs font-semibold transition-all cursor-pointer ${
         active
@@ -275,6 +323,9 @@ function TabButton({ active, onClick, children }: { active: boolean; onClick: ()
 function VisChipButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
   return (
     <button
+      role="radio"
+      aria-checked={active}
+      tabIndex={active ? 0 : -1}
       onClick={onClick}
       className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all flex items-center gap-1 cursor-pointer ${
         active
@@ -290,6 +341,9 @@ function VisChipButton({ active, onClick, children }: { active: boolean; onClick
 function ChipButton({ active, onClick, children, disabled }: { active: boolean; onClick: () => void; children: React.ReactNode; disabled?: boolean }) {
   return (
     <button
+      role="radio"
+      aria-checked={active}
+      tabIndex={active ? 0 : -1}
       onClick={onClick}
       disabled={disabled}
       className={`px-4 py-2 rounded-full text-sm font-semibold whitespace-nowrap transition-all ${
diff --git a/apps/web/src/components/bank/QuestionCard.tsx b/apps/web/src/components/bank/QuestionCard.tsx
index e1fd42765b00cdb0c9aeac789eecf0f8ecb20eda..d9e0364083330010b459e1020372019d97be2366 100644
--- a/apps/web/src/components/bank/QuestionCard.tsx
+++ b/apps/web/src/components/bank/QuestionCard.tsx
@@ -1,9 +1,10 @@
 import { Button } from "@labas/ui/components/button";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { formatLabel } from "@/lib/format";
+import type { Question } from "@/lib/types";
 
 interface QuestionCardProps {
-  q: any;
+  q: Question;
   isFeatured?: boolean;
   isInBundle: boolean;
   disabled?: boolean;
@@ -99,7 +100,7 @@ export function QuestionCard({
         <div className="flex items-center justify-between mt-auto pt-3 border-t border-[var(--oat-border)]">
           <div className="flex gap-2">
             <span className="px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-xs font-medium">
-              {formatLabel(q.format)}
+              {formatLabel(q.format ?? "")}
             </span>
             <span className="px-2 py-0.5 rounded bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-xs font-medium">
               Lv.{q.difficulty}
@@ -128,6 +129,7 @@ export function QuestionCard({
               </button>
               <button
                 onClick={onDelete}
+                aria-label="Hapus soal"
                 className="text-[var(--pomegranate-400)] hover:bg-[var(--pomegranate-400)]/10 px-2 py-1 rounded-full transition-colors cursor-pointer"
               >
                 <MaterialIcon name="delete" className="text-sm" />
diff --git a/apps/web/src/components/bank/QuestionDetailModal.tsx b/apps/web/src/components/bank/QuestionDetailModal.tsx
index 1040da7533a6ef9563825b4d473d61680d5573c2..17cb27a3022e89019f1dbd15d6e1c9135d793085 100644
--- a/apps/web/src/components/bank/QuestionDetailModal.tsx
+++ b/apps/web/src/components/bank/QuestionDetailModal.tsx
@@ -1,10 +1,17 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@labas/ui/components/dialog";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { formatLabel } from "@/lib/format";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import type { Question } from "@/lib/types";
 
 export function QuestionDetailModal({
   question,
@@ -13,7 +20,7 @@ export function QuestionDetailModal({
   onToggleSelect,
   isSelectable,
 }: {
-  question: any;
+  question: Question;
   onClose: () => void;
   isSelected: boolean;
   onToggleSelect: () => void;
@@ -32,36 +39,26 @@ export function QuestionDetailModal({
   });
 
   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>
+    <Dialog open onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <div className="flex items-start justify-between">
+            <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>
           </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>
+        </DialogHeader>
 
         {/* Passage */}
         <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] mb-6">
@@ -112,7 +109,7 @@ export function QuestionDetailModal({
                 <span className="font-semibold text-[var(--clay-black)]">
                   Jenis soal:{" "}
                 </span>
-                {formatLabel(question.format)}
+                {formatLabel(question.format ?? "")}
               </div>
             )}
           </CardContent>
@@ -139,6 +136,7 @@ export function QuestionDetailModal({
               <button
                 key={star}
                 onClick={() => rateMutation.mutate({ questionId: question.id, score: star })}
+                aria-label={`Nilai ${star} bintang`}
                 className="transition-transform hover:scale-110"
               >
                 <MaterialIcon
@@ -208,7 +206,7 @@ export function QuestionDetailModal({
             Tutup
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/apps/web/src/components/bank/SectionBrowser.tsx b/apps/web/src/components/bank/SectionBrowser.tsx
index cc106a5479dfe155a987de0d1e5c7f90172c971c..c7b709601ef39480f9bfb5e4bef577a217cea5b2 100644
--- a/apps/web/src/components/bank/SectionBrowser.tsx
+++ b/apps/web/src/components/bank/SectionBrowser.tsx
@@ -1,12 +1,13 @@
 import { Card, CardContent } from "@labas/ui/components/card";
 import { Button } from "@labas/ui/components/button";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import type { PackageSection } from "@/lib/types";
 
 interface SectionBrowserProps {
   isLoading: boolean;
-  groupedSections: Record<string, any[]>;
+  groupedSections: Record<string, PackageSection[]>;
   isSectionInBundle: (id: string) => boolean;
-  onToggleSection: (s: any) => void;
+  onToggleSection: (s: PackageSection) => void;
 }
 
 export function SectionBrowser({
@@ -39,11 +40,11 @@ export function SectionBrowser({
       {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">
+            <h2 className="font-headline font-bold text-[var(--clay-black)] mb-4 text-sm uppercase tracking-wider">
               {groupKey}
-            </h3>
+            </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              {groupSections.map((s: any) => {
+              {groupSections.map((s) => {
                 const inBundle = isSectionInBundle(s.id);
                 return (
                   <div
diff --git a/apps/web/src/components/bank/SoalBrowser.tsx b/apps/web/src/components/bank/SoalBrowser.tsx
index 5e57465448499b0b7ab7ef8dfb5857aa30037391..22b4424f6c0b72ea377b6e1af7f4bf21e9e2a804 100644
--- a/apps/web/src/components/bank/SoalBrowser.tsx
+++ b/apps/web/src/components/bank/SoalBrowser.tsx
@@ -4,10 +4,11 @@ import { Button } from "@labas/ui/components/button";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { QuestionCard } from "./QuestionCard";
 import { CalloutCard } from "./CalloutCard";
+import type { Question } from "@/lib/types";
 
 interface SoalBrowserProps {
   isLoading: boolean;
-  questions: any[];
+  questions: Question[];
   hasMore: boolean;
   isFetchingNextPage: boolean;
   hasFilters: boolean;
@@ -16,8 +17,8 @@ interface SoalBrowserProps {
   tab: "mine" | "public";
   filterKey: string;
   isQuestionInBundle: (id: string) => boolean;
-  onToggleQuestion: (q: any) => void;
-  onOpenDetail: (q: any) => void;
+  onToggleQuestion: (q: Question) => void;
+  onOpenDetail: (q: Question) => void;
   onTogglePublic: (id: string) => void;
   onDelete: (id: string) => void;
   onLoadMore: () => void;
@@ -47,7 +48,7 @@ export function SoalBrowser({
   onPublishAllPrivate,
 }: SoalBrowserProps) {
   const sentinelRef = useRef<HTMLDivElement>(null);
-  const isLocked = (q: any) => !!lockedExamType && q.examTypeId !== lockedExamType;
+  const isLocked = (q: Question) => !!lockedExamType && q.examTypeId !== lockedExamType;
 
   // ── Bulk mode ──
   const [bulkMode, setBulkMode] = useState(false);
@@ -64,7 +65,7 @@ export function SoalBrowser({
     : false;
 
   const privateQuestions = questions.filter(
-    (q: any) => !q.isPublic && q.creatorUserId === userId,
+    (q) => !q.isPublic && q.creatorUserId === userId,
   );
 
   const handleDismissCallout = () => {
@@ -75,7 +76,7 @@ export function SoalBrowser({
 
   const handlePublishAllPrivate = () => {
     if (onPublishAllPrivate && privateQuestions.length > 0) {
-      onPublishAllPrivate(privateQuestions.map((q: any) => q.id));
+      onPublishAllPrivate(privateQuestions.map((q) => q.id));
     }
   };
 
@@ -104,7 +105,7 @@ export function SoalBrowser({
   const clearSelection = () => setSelectedIds(new Set());
 
   const selectAll = () => {
-    setSelectedIds(new Set(questions.map((q: any) => q.id)));
+    setSelectedIds(new Set(questions.map((q) => q.id)));
   };
 
   const handleBulkPublish = () => {
diff --git a/apps/web/src/components/generate/ResultSection.tsx b/apps/web/src/components/generate/ResultSection.tsx
index c8c6f56f63d878a98cd7826982a53f8699c094a5..b6271135f0ea9dfe2073dfafb29ab09134bd1835 100644
--- a/apps/web/src/components/generate/ResultSection.tsx
+++ b/apps/web/src/components/generate/ResultSection.tsx
@@ -15,7 +15,7 @@ export function ResultSection({ result, generatedPackageId, onClear }: ResultSec
     <div className="mt-16 space-y-6">
       <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
         <div>
-          <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Hasil Generate</h2>
+          <h3 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Hasil Generate</h3>
           <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>
diff --git a/apps/web/src/components/package/EditPackageModal.tsx b/apps/web/src/components/package/EditPackageModal.tsx
index b83b1af806a52a2b7b34b6c7afcd74ceb20f3afb..670d26d978cd319f4abe501adeca35997fa4b9d3 100644
--- a/apps/web/src/components/package/EditPackageModal.tsx
+++ b/apps/web/src/components/package/EditPackageModal.tsx
@@ -1,7 +1,12 @@
 import { useState } from "react";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
-import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@labas/ui/components/dialog";
 
 export function EditPackageModal({
   initialTitle,
@@ -27,24 +32,13 @@ export function EditPackageModal({
   const [isPublic, setIsPublic] = useState(initialIsPublic);
 
   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)]">
+    <Dialog open onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="text-2xl font-headline font-bold text-[var(--clay-black)]">
             Edit Paket
-          </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>
+          </DialogTitle>
+        </DialogHeader>
 
         <div className="space-y-4">
           <div>
@@ -100,7 +94,7 @@ export function EditPackageModal({
             {isPending ? "Menyimpan..." : "Simpan"}
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/apps/web/src/components/routes/BankPage.tsx b/apps/web/src/components/routes/BankPage.tsx
index 5153f2bcdd09c4a15942eb7cf3c7b46ff2fd67bf..ac538eb6a2bd8aef35c28c6a98e75b82e61d72a6 100644
--- a/apps/web/src/components/routes/BankPage.tsx
+++ b/apps/web/src/components/routes/BankPage.tsx
@@ -17,6 +17,8 @@ import { SoalBrowser } from "@/components/bank/SoalBrowser";
 import { SectionBrowser } from "@/components/bank/SectionBrowser";
 import { BundleSidebar } from "@/components/bank/BundleSidebar";
 import { toast } from "sonner";
+import { getErrorMessage } from "@/lib/error-utils";
+import type { Question, PackageSection } from "@/lib/types";
 import type { Step } from "react-joyride";
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import z from "zod";
@@ -62,20 +64,20 @@ export function BankComponent() {
   const visibilityFilter = search.visibility ?? "all";
 
   // ── Infinite scroll state ──
-  const [allQuestions, setAllQuestions] = useState<any[]>([]);
+  const [allQuestions, setAllQuestions] = useState<Question[]>([]);
   const [offset, setOffset] = useState(0);
   const limit = 12;
   const filterKey = JSON.stringify({ searchText, examType, section, format, difficulty, tab, mode, visibility: visibilityFilter });
 
   // ── Sidebar / Bundle State ──
-  const [bundleQuestions, setBundleQuestions] = useState<any[]>([]);
-  const [bundleSections, setBundleSections] = useState<any[]>([]);
+  const [bundleQuestions, setBundleQuestions] = useState<Question[]>([]);
+  const [bundleSections, setBundleSections] = useState<PackageSection[]>([]);
   const [bundleTitle, setBundleTitle] = useState("");
   const [bundleDescription, setBundleDescription] = useState("");
   const [bundleIsPublic, setBundleIsPublic] = useState(false);
 
   // ── Modals ──
-  const [selectedQuestion, setSelectedQuestion] = useState<any | null>(null);
+  const [selectedQuestion, setSelectedQuestion] = useState<Question | null>(null);
   const [isAutoBundleOpen, setIsAutoBundleOpen] = useState(false);
 
   // ── Filter UI State ──
@@ -118,8 +120,8 @@ export function BankComponent() {
       setAllQuestions(data.questions ?? []);
     } else {
       setAllQuestions((prev) => {
-        const existingIds = new Set(prev.map((q: any) => q.id));
-        const newQs = (data.questions ?? []).filter((q: any) => !existingIds.has(q.id));
+        const existingIds = new Set(prev.map((q) => q.id));
+        const newQs = (data.questions ?? []).filter((q: Question) => !existingIds.has(q.id));
         return [...prev, ...newQs];
       });
     }
@@ -158,23 +160,24 @@ export function BankComponent() {
     onSuccess: () => questionQuery.refetch(),
   });
 
-  const bulkPublish = useMutation({
-    ...trpc.question.bulkPublish.mutationOptions(),
-    onSuccess: (data) => {
-      questionQuery.refetch();
-      if (data.skipped > 0) {
-        toast.success(
-          `${data.updated} soal dipublikasikan, ${data.skipped} dilewati`,
-          { description: "Beberapa soal bukan milikmu atau sudah tidak tersedia." },
-        );
-      } else {
-        toast.success(`${data.updated} soal berhasil dipublikasikan`);
-      }
-    },
-    onError: (err: any) => {
-      toast.error("Gagal mempublikasikan. Coba refresh dan pilih ulang soal.", { description: err.message });
-    },
-  });
+  const bulkPublish = useMutation(
+    trpc.question.bulkPublish.mutationOptions({
+      onSuccess: (data) => {
+        questionQuery.refetch();
+        if (data.skipped > 0) {
+          toast.success(
+            `${data.updated} soal dipublikasikan, ${data.skipped} dilewati`,
+            { description: "Beberapa soal bukan milikmu atau sudah tidak tersedia." },
+          );
+        } else {
+          toast.success(`${data.updated} soal berhasil dipublikasikan`);
+        }
+      },
+      onError: (err) => {
+        toast.error("Gagal mempublikasikan. Coba refresh dan pilih ulang soal.", { description: getErrorMessage(err) });
+      },
+    }),
+  );
 
   // ── Navigation helpers ──
   const setMode = (newMode: Mode) => {
@@ -258,7 +261,7 @@ export function BankComponent() {
   const isSectionInBundle = (sid: string) =>
     bundleSections.some((s) => s.id === sid);
 
-  const toggleQuestion = (q: any) => {
+  const toggleQuestion = (q: Question) => {
     if (lockedExamType && q.examTypeId !== lockedExamType) {
       toast.error(`Hanya bisa memilih soal dari ${EXAM_TYPES.find((t) => t.id === lockedExamType)?.name ?? lockedExamType}`);
       return;
@@ -270,7 +273,7 @@ export function BankComponent() {
     });
   };
 
-  const toggleSection = (s: any) => {
+  const toggleSection = (s: PackageSection) => {
     setBundleSections((prev) => {
       const exists = prev.find((x) => x.id === s.id);
       if (exists) return prev.filter((x) => x.id !== s.id);
@@ -314,8 +317,8 @@ export function BankComponent() {
       setBundleQuestions([]);
       setBundleTitle("");
       setBundleDescription("");
-    } catch (err: any) {
-      toast.error("Gagal membuat paket", { description: err.message });
+    } catch (err: unknown) {
+      toast.error("Gagal membuat paket", { description: getErrorMessage(err) });
     }
   };
 
@@ -327,7 +330,7 @@ export function BankComponent() {
         description: bundleDescription,
         isPublic: bundleIsPublic,
         sections: bundleSections.map((s, i) => ({
-          sourcePackageId: s.packageId,
+          sourcePackageId: s.packageId ?? "",
           sourceSectionId: s.id,
           orderIndex: i,
         })),
@@ -336,8 +339,8 @@ export function BankComponent() {
       setBundleTitle("");
       setBundleDescription("");
       toast.success("Combo paket berhasil dibuat!");
-    } catch (err: any) {
-      toast.error("Gagal membuat combo", { description: err.message });
+    } catch (err: unknown) {
+      toast.error("Gagal membuat combo", { description: getErrorMessage(err) });
     }
   };
 
@@ -388,12 +391,12 @@ export function BankComponent() {
   const questions = allQuestions;
 
   const sections = sectionQuery.data?.sections ?? [];
-  const groupedSections = sections.reduce((groups: Record<string, any[]>, s: any) => {
+  const groupedSections = sections.reduce<Record<string, PackageSection[]>>((groups, s) => {
     const key = `${s.examTypeName ?? "Unknown"} — ${s.packageTitle ?? "Untitled"}`;
     if (!groups[key]) groups[key] = [];
-    groups[key].push(s);
+    groups[key].push(s as PackageSection);
     return groups;
-  }, {} as Record<string, any[]>);
+  }, {});
 
   const isCreating =
     createPackage.isPending ||
diff --git a/apps/web/src/components/routes/GeneratePage.tsx b/apps/web/src/components/routes/GeneratePage.tsx
index 5ee722625cb4f622283afaf8e216a90450124188..03908ce2595f6bb20d5986fbf4fe8f06fbeea442 100644
--- a/apps/web/src/components/routes/GeneratePage.tsx
+++ b/apps/web/src/components/routes/GeneratePage.tsx
@@ -181,17 +181,18 @@ export function RouteComponent() {
           maxTokens: selectedConfig!.maxTokens ?? 16384,
         };
 
+    type GenerateMutateInput = Parameters<typeof generate.mutate>[0];
     generate.mutate({
-      examType: examType as any,
-      section: selectedSections[0] as any,
-      selectedSections: selectedSections as any,
-      formats: selectedFormats as any,
+      examType,
+      section: selectedSections[0],
+      selectedSections,
+      formats: selectedFormats,
       difficulty: difficulty + 1,
       topics: selectedTopics,
       questionCount,
       mode,
       apiKeyConfig,
-    } as any);
+    } as GenerateMutateInput);
   };
 
   const sectionSplits = (() => {
@@ -656,13 +657,37 @@ export function RouteComponent() {
             </div>
 
             {/* Tab Bar */}
-            <div className="flex gap-1 mb-6 border-b border-[var(--oat-border)] overflow-x-auto">
+            <div
+              className="flex gap-1 mb-6 border-b border-[var(--oat-border)] overflow-x-auto"
+              role="tablist"
+              aria-label="Hasil generate"
+              onKeyDown={(e) => {
+                if (completedResults.length === 0) return;
+                if (e.key === "ArrowRight") {
+                  e.preventDefault();
+                  setActiveTabIdx((i) => Math.min(completedResults.length - 1, i + 1));
+                } else if (e.key === "ArrowLeft") {
+                  e.preventDefault();
+                  setActiveTabIdx((i) => Math.max(0, i - 1));
+                } else if (e.key === "Home") {
+                  e.preventDefault();
+                  setActiveTabIdx(0);
+                } else if (e.key === "End") {
+                  e.preventDefault();
+                  setActiveTabIdx(completedResults.length - 1);
+                }
+              }}
+            >
               {completedResults.map((res, idx) => {
                 const questions = res.result?.questions ?? [];
                 const isActive = idx === activeTabIdx;
                 return (
                   <button
                     key={res.jobId}
+                    role="tab"
+                    aria-selected={isActive}
+                    aria-controls={`generate-panel-${idx}`}
+                    tabIndex={isActive ? 0 : -1}
                     onClick={() => setActiveTabIdx(idx)}
                     className={`flex items-center gap-2 px-4 py-3 text-sm font-semibold rounded-t-lg transition-all whitespace-nowrap border-b-2 min-h-[44px] ${
                       isActive
@@ -680,15 +705,18 @@ export function RouteComponent() {
                     <span className="text-xs text-[var(--warm-charcoal)]">
                       {questions.length} soal
                     </span>
-                    <button
+                    <span
                       onClick={(e) => {
                         e.stopPropagation();
                         removeJob(res.jobId);
                       }}
-                      className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-[var(--pomegranate-400)]/10 text-[var(--warm-charcoal)] hover:text-[var(--pomegranate-400)] transition-colors"
+                      role="button"
+                      aria-label={`Tutup tab ${res.mode}`}
+                      tabIndex={-1}
+                      className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-[var(--pomegranate-400)]/10 text-[var(--warm-charcoal)] hover:text-[var(--pomegranate-400)] transition-colors cursor-pointer"
                     >
                       <MaterialIcon name="close" className="text-xs" />
-                    </button>
+                    </span>
                   </button>
                 );
               })}
@@ -696,11 +724,17 @@ export function RouteComponent() {
 
             {/* Active Tab Content */}
             {activeResult && (
-              <ResultSection
-                result={activeResult.result}
-                generatedPackageId={activeResult.generatedPackageId}
-                onClear={resetAll}
-              />
+              <div
+                role="tabpanel"
+                id={`generate-panel-${activeTabIdx}`}
+                aria-labelledby={`generate-tab-${activeTabIdx}`}
+              >
+                <ResultSection
+                  result={activeResult.result}
+                  generatedPackageId={activeResult.generatedPackageId}
+                  onClear={resetAll}
+                />
+              </div>
             )}
           </div>
         )}
diff --git a/apps/web/src/components/routes/PackagesPage.tsx b/apps/web/src/components/routes/PackagesPage.tsx
index 7a6a71b6f9858499dee6219c6b4a7d4c7358f131..9acb1eaa0a5c563cbab0b26254545fd60694569f 100644
--- a/apps/web/src/components/routes/PackagesPage.tsx
+++ b/apps/web/src/components/routes/PackagesPage.tsx
@@ -7,6 +7,11 @@ import { trpc } from "@/utils/trpc";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+} from "@labas/ui/components/tabs";
 import {
   Select,
   SelectContent,
@@ -209,28 +214,22 @@ export function PackagesComponent() {
       <GettingStartedCard />
 
       {/* Tabs */}
-      <div className="flex gap-2 mb-6">
-        <button
-          onClick={() => setTab("all")}
-          className={`px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all ${
-            tab === "all"
-              ? "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)]"
-          }`}
-        >
-          Semua Paket
-        </button>
-        <button
-          onClick={() => setTab("mine")}
-          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)]"
-          }`}
-        >
-          Paket Saya
-        </button>
-      </div>
+      <Tabs value={tab} onValueChange={(v) => setTab(v as Tab)} className="mb-6">
+        <TabsList variant="line" className="h-11 bg-transparent">
+          <TabsTrigger
+            value="all"
+            className="px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold data-[active=true]:bg-[var(--clay-black)] data-[active=true]:text-[var(--pure-white)] data-[active=true]:clay-shadow bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)] transition-all"
+          >
+            Semua Paket
+          </TabsTrigger>
+          <TabsTrigger
+            value="mine"
+            className="px-4 py-2 rounded-[var(--radius-lg)] text-sm font-semibold data-[active=true]:bg-[var(--clay-black)] data-[active=true]:text-[var(--pure-white)] data-[active=true]:clay-shadow bg-[var(--pure-white)] text-[var(--warm-charcoal)] border-2 border-[var(--oat-border)] hover:bg-[var(--oat-light)] transition-all"
+          >
+            Paket Saya
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
 
       {/* Filters */}
       <div data-tour="packages-filters" className="flex flex-col md:flex-row gap-3 mb-8">
@@ -240,6 +239,7 @@ export function PackagesComponent() {
             placeholder="Cari paket..."
             value={searchText}
             onChange={(e) => setSearch(e.target.value)}
+            aria-label="Cari paket"
             className="pl-10 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
           />
         </div>
diff --git a/apps/web/src/components/routes/SettingsPage.tsx b/apps/web/src/components/routes/SettingsPage.tsx
index 849d39f4e968ccdf0aaaba17fefdf08c10f1ff1e..e508b59c7ebdaaad3bcd28093492905a8b566989 100644
--- a/apps/web/src/components/routes/SettingsPage.tsx
+++ b/apps/web/src/components/routes/SettingsPage.tsx
@@ -90,9 +90,9 @@ function TokenUsageSection() {
           </div>
 
           <div>
-            <h3 className="text-sm font-semibold text-[var(--clay-black)] mb-3">
+            <h2 className="text-sm font-semibold text-[var(--clay-black)] mb-3">
               Riwayat Generate Hari Ini
-            </h3>
+            </h2>
             {isLoading ? (
               <div className="space-y-2">
                 {[1, 2, 3].map((i) => (
diff --git a/apps/web/src/components/settings/AccountSettings.tsx b/apps/web/src/components/settings/AccountSettings.tsx
index 08195d54df27e999c05f4e790a257b9215afdf98..fed152a0609b916023ca0c0276023ceec7d577f8 100644
--- a/apps/web/src/components/settings/AccountSettings.tsx
+++ b/apps/web/src/components/settings/AccountSettings.tsx
@@ -4,6 +4,7 @@ import { Input } from "@labas/ui/components/input";
 import { Label } from "@labas/ui/components/label";
 import { Button } from "@labas/ui/components/button";
 import { toast } from "sonner";
+import { getErrorMessage } from "@/lib/error-utils";
 import { authClient } from "@/lib/auth-client";
 
 export function AccountSettings() {
@@ -39,8 +40,8 @@ export function AccountSettings() {
       setCurrentPassword("");
       setNewPassword("");
       setConfirmPassword("");
-    } catch (err: any) {
-      toast.error(err?.message || "Gagal mengubah password");
+    } catch (err: unknown) {
+      toast.error(getErrorMessage(err) || "Gagal mengubah password");
     } finally {
       setIsChangingPassword(false);
     }
@@ -54,8 +55,8 @@ export function AccountSettings() {
       await authClient.changeEmail({ newEmail });
       toast.success("Email berhasil diubah. Cek email baru Anda untuk verifikasi.");
       setNewEmail("");
-    } catch (err: any) {
-      toast.error(err?.message || "Gagal mengubah email");
+    } catch (err: unknown) {
+      toast.error(getErrorMessage(err) || "Gagal mengubah email");
     } finally {
       setIsChangingEmail(false);
     }
diff --git a/apps/web/src/components/test/AccentKeyboard.tsx b/apps/web/src/components/test/AccentKeyboard.tsx
index de24cb4bb83a98c452af7e307139e33db36886f3..642c8598c3d0a5e04f94482327680ec9e78c9343 100644
--- a/apps/web/src/components/test/AccentKeyboard.tsx
+++ b/apps/web/src/components/test/AccentKeyboard.tsx
@@ -7,13 +7,14 @@ const ACCENT_CHARS: Record<string, string[]> = {
 };
 
 interface AccentKeyboardProps {
-  examType: string;
+  examType?: string;
   onInsert: (char: string) => void;
   disabled?: boolean;
 }
 
 export function AccentKeyboard({ examType, onInsert, disabled }: AccentKeyboardProps) {
-  const chars = ACCENT_CHARS[examType];
+  if (!examType) return null;
+  const chars: string[] | undefined = ACCENT_CHARS[examType];
   if (!chars || chars.length === 0) return null;
 
   return (
@@ -21,7 +22,7 @@ export function AccentKeyboard({ examType, onInsert, disabled }: AccentKeyboardP
       <span className="w-full text-[10px] font-medium text-[var(--warm-charcoal)] uppercase tracking-wider mb-0.5">
         Special Characters
       </span>
-      {chars.map((char) => (
+      {chars.map((char: string) => (
         <button
           key={char}
           type="button"
diff --git a/apps/web/src/components/test/AttemptTestView.tsx b/apps/web/src/components/test/AttemptTestView.tsx
index 6f9060433705eb7b49fe342c2d94976361ae5c9d..fe51491bdd786cc20ed0d82cc4f4b734ebbfd6df 100644
--- a/apps/web/src/components/test/AttemptTestView.tsx
+++ b/apps/web/src/components/test/AttemptTestView.tsx
@@ -7,6 +7,7 @@ import { trpc } from "@/utils/trpc";
 import { QuestionInput } from "./QuestionInput";
 import { AccentKeyboard } from "./AccentKeyboard";
 import { parseFurigana } from "@/lib/furigana";
+import type { Question, Package, PackageSection } from "@/lib/types";
 import { AttemptHeader } from "./attempt/AttemptHeader";
 import { FloatingNav } from "./attempt/FloatingNav";
 import { FinishDialog } from "./attempt/FinishDialog";
@@ -14,7 +15,7 @@ import { AbandonDialog } from "./attempt/AbandonDialog";
 
 interface AttemptTestViewProps {
   attemptId: string;
-  pkg: any;
+  pkg: Package & { sections: PackageSection[] };
   currentSectionIdx: number;
   setCurrentSectionIdx: (idx: number) => void;
   answers: Record<string, string>;
@@ -32,7 +33,7 @@ interface AttemptTestViewProps {
 }
 
 interface QuestionCardProps {
-  q: any;
+  q: Question & { _examType?: string; _isRtl?: boolean; _useFurigana?: boolean };
   globalIdx: number;
   answerValue: string;
   sectionResultId: string | undefined;
@@ -83,7 +84,7 @@ const QuestionCard = memo(function QuestionCard({
             {globalIdx}
           </span>
           <h2 className="text-xl font-bold text-[var(--clay-black)] capitalize">
-            {q.format.replace(/_/g, " ")}
+            {(q.format ?? "").replace(/_/g, " ")}
           </h2>
         </div>
         <button
@@ -101,7 +102,7 @@ const QuestionCard = memo(function QuestionCard({
       </div>
 
       <p className="text-[var(--warm-charcoal)] mb-6 font-medium leading-relaxed" dir={q._isRtl ? "rtl" : undefined}>
-        {q._useFurigana ? parseFurigana(q.questionText) : q.questionText}
+        {q._useFurigana ? parseFurigana(q.questionText ?? "") : (q.questionText ?? "")}
       </p>
 
       <div className="pl-0">
@@ -165,7 +166,7 @@ export function AttemptTestView({
   const currentSection = pkg.sections[currentSectionIdx];
   const sectionData = attempt?.sections?.[currentSectionIdx];
   const sectionResultId = sectionData?.sectionResultId;
-  const examType: string = pkg.examType ?? "";
+  const examType: string = pkg.examTypeName ?? "";
   const isRtl = examType === "TOAFL";
   const useFurigana = examType === "JLPT" || examType === "TOPIK";
 
@@ -176,7 +177,7 @@ export function AttemptTestView({
     const key = `${currentSectionIdx}:${sectionResultId}`;
     if (flushKeyRef.current === key) return;
     flushKeyRef.current = key;
-    for (const q of currentSection.questions as any[]) {
+    for (const q of currentSection.questions ?? []) {
       const v = answers[q.id];
       if (v) void onAnswerChange(q.id, sectionResultId, v);
     }
@@ -193,9 +194,9 @@ export function AttemptTestView({
 
   // Build global question index across all sections
   const allQuestions: Array<{ id: string; sectionIdx: number; localIdx: number; passageText?: string }> = [];
-  pkg.sections.forEach((sec: any, sIdx: number) => {
-    sec.questions.forEach((q: any, qIdx: number) => {
-      allQuestions.push({ id: q.id, sectionIdx: sIdx, localIdx: qIdx, passageText: q.passageText });
+  pkg.sections.forEach((sec: PackageSection, sIdx: number) => {
+    sec.questions?.forEach((q: Question, qIdx: number) => {
+      allQuestions.push({ id: q.id, sectionIdx: sIdx, localIdx: qIdx, passageText: q.passageText ?? undefined });
     });
   });
 
@@ -207,7 +208,7 @@ export function AttemptTestView({
     }
   }, [allQuestions]);
 
-  const addQuestionMeta = (q: any) => ({
+  const addQuestionMeta = (q: Question) => ({
     ...q,
     _examType: examType,
     _isRtl: isRtl,
@@ -215,7 +216,7 @@ export function AttemptTestView({
   });
 
   const activeQuestion = currentSection?.questions?.find(
-    (q: any) => q.id === activeQuestionId,
+    (q: Question) => q.id === activeQuestionId,
   );
   const activeQuestionWithMeta = activeQuestion ? addQuestionMeta(activeQuestion) : null;
   const passageToShow =
@@ -279,8 +280,8 @@ export function AttemptTestView({
 
       <div className="h-full flex flex-col bg-[var(--warm-cream)] overflow-hidden">
         <AttemptHeader
-          pkgTitle={pkg.title}
-          currentSectionTitle={currentSection.title}
+          pkgTitle={pkg.title ?? ""}
+          currentSectionTitle={currentSection.title ?? ""}
           timeElapsed={timeElapsed}
           answeredCount={answeredCount}
           totalQuestions={totalQuestions}
diff --git a/apps/web/src/components/test/QuestionInput.tsx b/apps/web/src/components/test/QuestionInput.tsx
index 37358474cf1f1c5a97e0febb0fe3ffacc931d21f..83a70eaac98e99252da85d8dedb7c960f8458e74 100644
--- a/apps/web/src/components/test/QuestionInput.tsx
+++ b/apps/web/src/components/test/QuestionInput.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { Input } from "@labas/ui/components/input";
 
 import { MCQ_FORMATS } from "@/lib/question-formats";
+import type { Question } from "@/lib/types";
 
 const TRUE_FALSE_CHOICES = [
   { key: "TRUE", label: "True" },
@@ -82,6 +83,7 @@ function DebouncedTextInput({
 
   return (
     <Input
+      aria-label="Jawaban esai"
       value={localValue}
       onChange={handleChange}
       onBlur={handleBlur}
@@ -98,7 +100,7 @@ export function QuestionInput({
   onChange,
   disabled,
 }: {
-  question: any;
+  question: Question;
   value: string;
   onChange: (val: string) => void;
   disabled?: boolean;
@@ -147,6 +149,7 @@ export function QuestionInput({
                 onChange={(e) => updateMapping(opt.key, e.target.value)}
                 disabled={disabled}
                 placeholder="Padanan..."
+                aria-label="Padanan jawaban"
                 className="w-24 px-3 py-2 text-sm rounded-[var(--radius-md)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] focus:outline-none focus:border-[var(--matcha-600)]"
               />
             </div>
@@ -156,7 +159,7 @@ export function QuestionInput({
     );
   }
 
-  if (MCQ_FORMATS.includes(format)) {
+  if ((MCQ_FORMATS as readonly string[]).includes(format ?? "")) {
     if (!options || options.length === 0) {
       return (
         <div className="text-sm text-[var(--warm-silver)] italic">
diff --git a/apps/web/src/components/test/attempt/AbandonDialog.tsx b/apps/web/src/components/test/attempt/AbandonDialog.tsx
index 4bd490dd4fc8b58e807039edfd04390799bfba37..f3f35afd40e69f6f403cfec45ece1bc9ca57089f 100644
--- a/apps/web/src/components/test/attempt/AbandonDialog.tsx
+++ b/apps/web/src/components/test/attempt/AbandonDialog.tsx
@@ -1,4 +1,11 @@
 import { Button } from "@labas/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@labas/ui/components/dialog";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 interface AbandonDialogProps {
@@ -8,35 +15,23 @@ interface AbandonDialogProps {
 }
 
 export function AbandonDialog({ open, onClose, onConfirm }: AbandonDialogProps) {
-  if (!open) return null;
-
   return (
-    <div
-      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="abandon-dialog-title"
-    >
-      <div className="bg-[var(--warm-cream)] w-full max-w-md rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] shadow-xl p-6 md:p-8">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="w-10 h-10 rounded-full bg-[var(--pomegranate-400)]/20 flex items-center justify-center">
-            <MaterialIcon name="warning" className="text-[var(--pomegranate-400)]" />
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-full bg-[var(--pomegranate-400)]/20 flex items-center justify-center">
+              <MaterialIcon name="warning" className="text-[var(--pomegranate-400)]" />
+            </div>
+            <DialogTitle className="text-xl font-headline font-bold text-[var(--clay-black)]">
+              Keluar dari Latihan?
+            </DialogTitle>
           </div>
-          <h2 id="abandon-dialog-title" className="text-xl font-headline font-bold text-[var(--clay-black)]">
-            Keluar dari Latihan?
-          </h2>
-        </div>
-
-        <div className="space-y-3 mb-6">
-          <p className="text-sm text-[var(--warm-charcoal)]">
-            Apakah Anda yakin ingin meninggalkan sesi latihan ini? Progress pengerjaan Anda mungkin tidak tersimpan dan akan ditandai sebagai gagal atau dibatalkan.
-          </p>
-        </div>
-
-        <div className="flex gap-3">
+        </DialogHeader>
+        <DialogDescription className="text-sm text-[var(--warm-charcoal)]">
+          Apakah Anda yakin ingin meninggalkan sesi latihan ini? Progress pengerjaan Anda mungkin tidak tersimpan dan akan ditandai sebagai gagal atau dibatalkan.
+        </DialogDescription>
+        <div className="flex gap-3 mt-2">
           <Button
             variant="outline"
             onClick={onClose}
@@ -51,7 +46,7 @@ export function AbandonDialog({ open, onClose, onConfirm }: AbandonDialogProps)
             Keluar
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/apps/web/src/components/test/attempt/FinishDialog.tsx b/apps/web/src/components/test/attempt/FinishDialog.tsx
index afaa41d23fe71fd33da5aec562109ef75086b927..5a444879a7b39a5254754b2e7c8e4d1650b5d030 100644
--- a/apps/web/src/components/test/attempt/FinishDialog.tsx
+++ b/apps/web/src/components/test/attempt/FinishDialog.tsx
@@ -1,4 +1,11 @@
 import { Button } from "@labas/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@labas/ui/components/dialog";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 interface FinishDialogProps {
@@ -10,44 +17,37 @@ interface FinishDialogProps {
 }
 
 export function FinishDialog({ open, onClose, onConfirm, answeredCount, totalQuestions }: FinishDialogProps) {
-  if (!open) return null;
-
   return (
-    <div
-      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="finish-dialog-title"
-    >
-      <div className="bg-[var(--warm-cream)] w-full max-w-md rounded-[var(--radius-xl)] border-2 border-[var(--oat-border)] shadow-xl p-6 md:p-8">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="w-10 h-10 rounded-full bg-[var(--pomegranate-400)]/20 flex items-center justify-center">
-            <MaterialIcon name="help" className="text-[var(--pomegranate-400)]" />
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-full bg-[var(--pomegranate-400)]/20 flex items-center justify-center">
+              <MaterialIcon name="help" className="text-[var(--pomegranate-400)]" />
+            </div>
+            <DialogTitle className="text-xl font-headline font-bold text-[var(--clay-black)]">
+              Selesaikan Latihan?
+            </DialogTitle>
           </div>
-          <h2 id="finish-dialog-title" className="text-xl font-headline font-bold text-[var(--clay-black)]">
-            Selesaikan Latihan?
-          </h2>
-        </div>
-
-        <div className="space-y-3 mb-6">
-          <p className="text-sm text-[var(--warm-charcoal)]">
+        </DialogHeader>
+        <DialogDescription
+          className="space-y-3 *:text-sm"
+          render={<div />}
+        >
+          <p className="text-[var(--warm-charcoal)]">
             Kamu sudah menjawab <strong className="text-[var(--clay-black)]">{answeredCount} dari {totalQuestions}</strong> soal.
           </p>
           {answeredCount < totalQuestions && (
-            <div className="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">
+            <div className="p-3 rounded-[var(--radius-md)] bg-[var(--lemon-400)]/20 border-2 border-[var(--lemon-500)]/30 text-[var(--lemon-800)] flex items-start gap-2">
               <MaterialIcon name="warning" className="text-sm mt-0.5 shrink-0" />
               <span>Masih ada {totalQuestions - answeredCount} soal yang belum dijawab.</span>
             </div>
           )}
-          <p className="text-sm text-[var(--warm-charcoal)]">
+          <p className="text-[var(--warm-charcoal)]">
             Setelah selesai, jawaban tidak bisa diubah dan hasil akan langsung terlihat.
           </p>
-        </div>
-
-        <div className="flex gap-3">
+        </DialogDescription>
+        <div className="flex gap-3 mt-2">
           <Button
             variant="outline"
             onClick={onClose}
@@ -62,7 +62,7 @@ export function FinishDialog({ open, onClose, onConfirm, answeredCount, totalQue
             Selesaikan
           </Button>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/apps/web/src/components/test/attempt/FloatingNav.tsx b/apps/web/src/components/test/attempt/FloatingNav.tsx
index 2dbb916a7814cc6565df4e37d18f92c8b70bdf3a..56509c6ccc37792116b7699bf5c6fb009ba05078 100644
--- a/apps/web/src/components/test/attempt/FloatingNav.tsx
+++ b/apps/web/src/components/test/attempt/FloatingNav.tsx
@@ -1,4 +1,4 @@
-import type { RefObject } from "react";
+import type { RefObject, KeyboardEvent } from "react";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 interface FloatingNavProps {
@@ -23,6 +23,26 @@ export function FloatingNav({
   const isAnswered = (qId: string) => !!answers[qId];
   const isMarked = (qId: string) => markedQuestions.has(qId);
 
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (questions.length === 0) return;
+    const activeIdx = questions.findIndex((q) => q.id === activeQuestionId);
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const next = Math.min(questions.length - 1, Math.max(0, activeIdx) + 1);
+      onGoToQuestion(questions[next].id);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      const prev = Math.max(0, Math.max(0, activeIdx) - 1);
+      onGoToQuestion(questions[prev].id);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      onGoToQuestion(questions[0].id);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      onGoToQuestion(questions[questions.length - 1].id);
+    }
+  };
+
   return (
     <nav
       className="fixed bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 p-2 bg-[var(--clay-black)]/95 backdrop-blur-md rounded-full shadow-2xl border border-white/10 z-40 max-w-[90vw]"
@@ -43,6 +63,7 @@ export function FloatingNav({
         className="flex items-center gap-1 overflow-x-auto hide-scrollbar max-w-[60vw] sm:max-w-[50vw] md:max-w-[40vw] lg:max-w-[30vw]"
         role="tablist"
         aria-label="Daftar soal"
+        onKeyDown={handleKeyDown}
       >
         {questions.map((q, gIdx) => {
           const answered = isAnswered(q.id);
@@ -56,6 +77,8 @@ export function FloatingNav({
               onClick={() => onGoToQuestion(q.id)}
               role="tab"
               aria-selected={isActive}
+              tabIndex={isActive ? 0 : -1}
+              aria-controls={`question-panel-${q.id}`}
               aria-label={`Soal ${gIdx + 1}${marked ? " (ditandai)" : ""}${answered ? " (sudah dijawab)" : ""}`}
               className={`relative w-7 h-7 sm:w-8 sm:h-8 shrink-0 flex items-center justify-center rounded-full font-bold text-[10px] sm:text-xs transition-all ${
                 answered
diff --git a/apps/web/src/hooks/use-generation-jobs.ts b/apps/web/src/hooks/use-generation-jobs.ts
index 7b0c84c5a2472076f243df613120a21358d3085c..5cecd0c26fafadf3d4ea88cdd22967f9328d2823 100644
--- a/apps/web/src/hooks/use-generation-jobs.ts
+++ b/apps/web/src/hooks/use-generation-jobs.ts
@@ -1,277 +1,54 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import { useQuery, useQueries } from "@tanstack/react-query";
+import { useEffect, useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { trpc, trpcClient } from "@/utils/trpc";
-import type { GenerationResult } from "@labas/ai";
 import { authClient } from "@/lib/auth-client";
+import { useJobState } from "./use-job-state";
+import { usePollingTransport } from "./use-polling-transport";
+import { MAX_PARALLEL, ACTIVE_STATUSES, isTerminal } from "./use-job-shared";
+import type { GenerationResult } from "@labas/ai";
 
-const STORAGE_KEY = "labas_active_jobs";
-const RESULTS_KEY = "labas_completed_results";
-const CLEARED_JOBS_KEY = "labas_cleared_jobs";
-const MAX_PARALLEL = 3;
-
-export interface ActiveJob {
-  id: string;
-  status: string;
-  progress: number;
-  progressMessage: string;
-  mode: string;
-  logs: unknown[];
-  resultJson: unknown;
-  errorMessage?: string;
-  examTypeId?: string;
-  sectionTypeId?: string;
-  questionCount?: number;
-}
-
-export interface CompletedResult {
-  jobId: string;
-  result: GenerationResult;
-  generatedPackageId: string | null;
-  examType?: string;
-  section?: string;
-  mode: string;
-  timestamp: number;
-}
-
-const ACTIVE_STATUSES = new Set([
-  "pending",
-  "running",
-  "running_fast",
-  "partial_ready",
-  "running_quality",
-]);
-
-const TERMINAL_STATUSES = new Set(["completed", "failed", "cancelled"]);
-
-function isTerminal(status: string): boolean {
-  return TERMINAL_STATUSES.has(status);
-}
-
-function readStoredIds(): string[] {
-  try {
-    const raw = sessionStorage.getItem(STORAGE_KEY);
-    return raw ? (JSON.parse(raw) as string[]) : [];
-  } catch {
-    return [];
-  }
-}
-
-function writeStoredIds(ids: string[]) {
-  if (ids.length === 0) {
-    sessionStorage.removeItem(STORAGE_KEY);
-  } else {
-    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(ids));
-  }
-}
-
-function readStoredResults(): CompletedResult[] {
-  try {
-    const raw = sessionStorage.getItem(RESULTS_KEY);
-    return raw ? (JSON.parse(raw) as CompletedResult[]) : [];
-  } catch {
-    return [];
-  }
-}
-
-function writeStoredResults(results: CompletedResult[]) {
-  if (results.length === 0) {
-    sessionStorage.removeItem(RESULTS_KEY);
-  } else {
-    sessionStorage.setItem(RESULTS_KEY, JSON.stringify(results));
-  }
-}
-
-function readClearedJobIds(): string[] {
-  try {
-    const raw = sessionStorage.getItem(CLEARED_JOBS_KEY);
-    return raw ? (JSON.parse(raw) as string[]) : [];
-  } catch {
-    return [];
-  }
-}
-
-function writeClearedJobIds(ids: string[]) {
-  if (ids.length === 0) {
-    sessionStorage.removeItem(CLEARED_JOBS_KEY);
-  } else {
-    sessionStorage.setItem(CLEARED_JOBS_KEY, JSON.stringify(ids));
-  }
-}
-
-function broadcastJobs(ids: string[]) {
-  window.dispatchEvent(
-    new CustomEvent("labas:jobs-change", { detail: { ids } }),
-  );
-}
+export type { ActiveJob, CompletedResult } from "./use-job-shared";
 
 export function useGenerationJobs() {
   const { data: session } = authClient.useSession();
   const isAuthenticated = !!session;
 
-  const [error, setError] = useState<string | null>(null);
-  const [jobIds, setJobIdsState] = useState<string[]>([]);
-  const [completedResults, setCompletedResults] = useState<CompletedResult[]>(
-    [],
-  );
-
-  const processedJobStates = useRef<Record<string, string>>({});
-  const removedJobIdsRef = useRef<Set<string>>(new Set());
-
-  const setJobIds = useCallback(
-    (updater: string[] | ((prev: string[]) => string[])) => {
-      setJobIdsState((prev) => {
-        const ids =
-          typeof updater === "function" ? updater(prev) : updater;
-        writeStoredIds(ids);
-        broadcastJobs(ids);
-        return ids;
-      });
-    },
-    [],
-  );
-
-  const addJob = useCallback(
-    (id: string) => {
-      setJobIds((prev) => {
-        if (prev.includes(id)) return prev;
-        return [...prev, id];
-      });
-    },
-    [setJobIds],
-  );
-
-  const removeJob = useCallback(
-    (id: string) => {
-      removedJobIdsRef.current.add(id);
-
-      // Sync sessionStorage immediately so removal survives unmount
-      // (React state updater callbacks & effects are discarded on unmount)
-      writeStoredIds(readStoredIds().filter((j) => j !== id));
-      writeStoredResults(readStoredResults().filter((r) => r.jobId !== id));
-      const cleared = readClearedJobIds();
-      if (!cleared.includes(id)) writeClearedJobIds([...cleared, id]);
-
-      setJobIds((prev) => prev.filter((j) => j !== id));
-      setCompletedResults((prev) => prev.filter((r) => r.jobId !== id));
-      trpcClient.ai.cancelJob.mutate({ jobId: id }).catch(() => {});
-    },
-    [setJobIds],
-  );
-
-  const resetAll = useCallback(() => {
-    setError(null);
-
-    // Sync: clear sessionStorage immediately (survives unmount)
-    sessionStorage.removeItem(RESULTS_KEY);
-    sessionStorage.removeItem(STORAGE_KEY);
-
-    // Sync: merge current job IDs into cleared list (accumulate, don't overwrite)
-    const current = readStoredIds();
-    const existing = readClearedJobIds();
-    writeClearedJobIds([...new Set([...existing, ...current])]);
-
-    // Keep blocks in-memory, don't clear
-    for (const id of current) removedJobIdsRef.current.add(id);
-
-    setCompletedResults([]);
-    setJobIds([]);
-    processedJobStates.current = {};
-  }, [setJobIds]);
-
-  // Recover from sessionStorage on mount
-  useEffect(() => {
-    const saved = readStoredIds();
-    if (saved.length > 0) setJobIdsState(saved);
-    const savedResults = readStoredResults();
-    if (savedResults.length > 0) setCompletedResults(savedResults);
-
-    const clearedIds = readClearedJobIds();
-    for (const id of clearedIds) {
-      removedJobIdsRef.current.add(id);
-    }
-  }, []);
-
-  // Persist completedResults to sessionStorage
-  useEffect(() => {
-    writeStoredResults(completedResults);
-  }, [completedResults]);
-
-  // Sync across hook instances via custom event
-  useEffect(() => {
-    const handler = (e: Event) => {
-      const detail = (e as CustomEvent).detail as { ids: string[] };
-      setJobIdsState(detail.ids);
-    };
-    window.addEventListener("labas:jobs-change", handler);
-    return () => window.removeEventListener("labas:jobs-change", handler);
-  }, []);
+  const {
+    jobIds,
+    completedResults,
+    error,
+    processedStates,
+    removedIds,
+    addJob,
+    removeJob,
+    resetAll,
+    setError,
+    trackStatus,
+    setResult,
+    clearResult,
+  } = useJobState();
 
-  // Fallback: check myJobs for active jobs
+  /* Fallback: discover active jobs from myJobs endpoint */
   const myJobsQuery = useQuery({
     ...trpc.ai.myJobs.queryOptions({ limit: 20, offset: 0 }),
     enabled: isAuthenticated,
     refetchInterval: 3000,
   });
 
-  useEffect(() => {
-    if (!myJobsQuery.data) return;
-
-    const clearedIds = readClearedJobIds();
-
-    const activeIds = myJobsQuery.data
-      .filter(
-        (j) =>
-          ACTIVE_STATUSES.has(j.status) &&
-          !removedJobIdsRef.current.has(j.id) &&
-          !clearedIds.includes(j.id),
-      )
-      .map((j) => j.id);
-    if (activeIds.length === 0) return;
-
-    setJobIds((prev) => {
-      const newIds = activeIds.filter((id: string) => !prev.includes(id));
-      if (newIds.length === 0) return prev;
-      return [...prev, ...newIds];
-    });
-  }, [myJobsQuery.data, setJobIds]);
-
-  // Poll each active job individually
-  const jobQueries = useQueries({
-    queries: jobIds.map((jobId) => ({
-      ...trpc.ai.getJobStatus.queryOptions({ jobId }),
-      enabled: !!jobId && isAuthenticated,
-      refetchInterval: (query: any) => {
-        const data = query.state.data;
-        if (!data) return 1000;
-        if (isTerminal(data.status as string)) return false;
-        return 1000;
-      },
-    })),
-  });
-
-  const activeJobs = useMemo(() => {
-    return jobQueries
-      .filter((q) => q.data && !isTerminal((q.data as { status: string }).status))
-      .map((q) => q.data as unknown as ActiveJob);
-  }, [jobQueries]);
-
-  const isGenerating = activeJobs.length > 0;
-  const activeCount = activeJobs.length;
-  const canAddMore = activeCount < MAX_PARALLEL;
+  /* Transport layer — polling now, swappable for WebSocket later */
+  const transport = usePollingTransport({ isAuthenticated });
 
-  // Track completed results
   useEffect(() => {
-    for (let i = 0; i < jobQueries.length; i++) {
-      const query = jobQueries[i];
-      const jobId = jobIds[i];
-      if (!jobId || !query.data) continue;
+    transport.subscribe(jobIds);
+    return () => transport.unsubscribe();
+  }, [jobIds, transport]);
 
-      const data = query.data as Record<string, unknown>;
-      const status = data.status as string;
-
-      const prevStatus = processedJobStates.current[jobId];
-      if (prevStatus === status) continue;
-      processedJobStates.current[jobId] = status;
+  useEffect(() => {
+    transport.onUpdate((event) => {
+      const { jobId, status, data } = event;
+      const prevStatus = processedStates[jobId];
+      if (prevStatus === status) return;
+      trackStatus(jobId, status);
 
       const extractPkgId = (): string | null => {
         const rj = data.resultJson as Record<string, unknown> | null | undefined;
@@ -280,99 +57,88 @@ export function useGenerationJobs() {
         return typeof id === "string" ? id : null;
       };
 
-      // Skip if already tracked as completed
-      if (completedResults.some((r) => r.jobId === jobId && r.timestamp > 0)) {
-        // Update if status changed to completed with better data
+      const baseResult = {
+        jobId,
+        result: data.resultJson as GenerationResult,
+        generatedPackageId: extractPkgId(),
+        mode: (data.mode as string) ?? "quick",
+        timestamp: Date.now(),
+      };
+
+      const alreadyCompleted = completedResults.some(
+        (r) => r.jobId === jobId && r.timestamp > 0,
+      );
+
+      if (alreadyCompleted) {
         if (status === "completed" && data.resultJson) {
-          setCompletedResults((prev) =>
-            prev.map((r) =>
-              r.jobId === jobId
-                ? {
-                    jobId,
-                    result: data.resultJson as GenerationResult,
-                    generatedPackageId: extractPkgId(),
-                    mode: (data.mode as string) ?? "quick",
-                    timestamp: Date.now(),
-                  }
-                : r,
-            ),
-          );
+          setResult(baseResult);
         }
-        continue;
+        return;
       }
 
-      // Partial ready or completed → capture result
       if (status === "partial_ready" && data.resultJson) {
-        setCompletedResults((prev) => {
-          if (prev.some((r) => r.jobId === jobId)) return prev;
-          return [
-            ...prev,
-            {
-              jobId,
-              result: data.resultJson as GenerationResult,
-              generatedPackageId: extractPkgId(),
-              mode: (data.mode as string) ?? "quick",
-              timestamp: Date.now(),
-            },
-          ];
-        });
+        if (!completedResults.some((r) => r.jobId === jobId)) {
+          setResult(baseResult);
+        }
       }
 
       if (status === "completed" && data.resultJson) {
-        setCompletedResults((prev) => {
-          const exists = prev.findIndex((r) => r.jobId === jobId);
-          const entry: CompletedResult = {
-            jobId,
-            result: data.resultJson as GenerationResult,
-            generatedPackageId: extractPkgId(),
-            mode: (data.mode as string) ?? "quick",
-            timestamp: Date.now(),
-          };
-          if (exists >= 0) {
-            const updated = [...prev];
-            updated[exists] = entry;
-            return updated;
-          }
-          return [...prev, entry];
-        });
+        setResult(baseResult);
       }
 
       if (status === "failed") {
         setError((data.errorMessage as string) ?? "Generation failed");
-        setCompletedResults((prev) =>
-          prev.filter((r) => r.jobId !== jobId),
-        );
+        clearResult(jobId);
       }
 
       if (status === "cancelled") {
-        removedJobIdsRef.current.add(jobId);
-        setCompletedResults((prev) =>
-          prev.filter((r) => r.jobId !== jobId),
-        );
+        clearResult(jobId);
       }
-    }
-  }, [jobQueries, jobIds]);
+    });
+  }, [transport, processedStates, completedResults, trackStatus, setResult, setError, clearResult]);
 
-  // Auto-remove terminal jobs from tracking after a delay
+  /* Merge discovered jobs from myJobs fallback */
   useEffect(() => {
-    const terminalIds = jobQueries
+    if (!myJobsQuery.data) return;
+    const clearedIds = new Set<string>();
+    const discovered = myJobsQuery.data
       .filter(
-        (q) =>
-          q.data && isTerminal((q.data as { status: string }).status),
+        (j) =>
+          ACTIVE_STATUSES.has(j.status) &&
+          !removedIds.has(j.id) &&
+          !clearedIds.has(j.id),
       )
-      .map((_q, i) => jobIds[i])
-      .filter(Boolean);
+      .map((j) => j.id);
+    for (const id of discovered) {
+      if (!jobIds.includes(id)) addJob(id);
+    }
+  }, [myJobsQuery.data, removedIds, jobIds, addJob]);
 
-    if (terminalIds.length === 0) return;
+  /* Auto-remove terminal jobs after delay */
+  useEffect(() => {
+    const timers = jobIds
+      .filter((id) => {
+        const ev = processedStates[id];
+        return ev && isTerminal(ev);
+      })
+      .map((id) =>
+        setTimeout(() => removeJob(id), 5000),
+      );
+    return () => timers.forEach(clearTimeout);
+  }, [processedStates, jobIds, removeJob]);
 
-    const timers = terminalIds.map((id) =>
-      setTimeout(() => {
-        setJobIds((prev) => prev.filter((j) => j !== id));
-      }, 5000),
-    );
+  const activeJobs = transport.activeJobs;
+  const activeCount = activeJobs.length;
+  const canAddMore = activeCount < MAX_PARALLEL;
+  const isGenerating = activeCount > 0;
 
-    return () => timers.forEach(clearTimeout);
-  }, [jobQueries, jobIds, setJobIds]);
+  const wrappedRemoveJob = useCallback(
+    (id: string) => {
+      trpcClient.ai.cancelJob.mutate({ jobId: id }).catch(() => {});
+      removeJob(id);
+    },
+    [removeJob],
+  );
 
   return {
     jobIds,
@@ -383,7 +149,7 @@ export function useGenerationJobs() {
     canAddMore,
     error,
     addJob,
-    removeJob,
+    removeJob: wrappedRemoveJob,
     resetAll,
     setError,
     myJobsQuery,
diff --git a/apps/web/src/hooks/use-job-shared.ts b/apps/web/src/hooks/use-job-shared.ts
new file mode 100644
index 0000000000000000000000000000000000000000..429432dfa5e523b5880380c90882463c0dc606cf
--- /dev/null
+++ b/apps/web/src/hooks/use-job-shared.ts
@@ -0,0 +1,66 @@
+/** Shared types and constants for job management hooks. */
+
+export const STORAGE_KEY = "labas_active_jobs";
+export const RESULTS_KEY = "labas_completed_results";
+export const CLEARED_JOBS_KEY = "labas_cleared_jobs";
+export const MAX_PARALLEL = 3;
+
+export interface ActiveJob {
+  id: string;
+  status: string;
+  progress: number;
+  progressMessage: string;
+  mode: string;
+  logs: unknown[];
+  resultJson: unknown;
+  errorMessage?: string;
+  examTypeId?: string;
+  sectionTypeId?: string;
+  questionCount?: number;
+}
+
+export interface CompletedResult {
+  jobId: string;
+  result: import("@labas/ai").GenerationResult;
+  generatedPackageId: string | null;
+  examType?: string;
+  section?: string;
+  mode: string;
+  timestamp: number;
+}
+
+/** Event emitted by a JobTransport when a job's status changes. */
+export interface JobTransportEvent {
+  jobId: string;
+  status: string;
+  data: Record<string, unknown>;
+}
+
+/** Abstract transport for receiving real-time job updates.
+ *  Concrete adapters: PollingTransport (now), WebSocketTransport (future). */
+export interface JobTransport {
+  /** Start listening for updates on the given job IDs. */
+  subscribe(jobIds: string[]): void;
+  /** Stop listening for updates. */
+  unsubscribe(): void;
+  /** Register a callback for status-change events. */
+  onUpdate(callback: (event: JobTransportEvent) => void): void;
+  /** Register a callback for transport-level errors. */
+  onError(callback: (error: Error) => void): void;
+  /** Active jobs derived from latest events. */
+  readonly activeJobs: ActiveJob[];
+}
+
+export const ACTIVE_STATUSES = new Set([
+  "pending",
+  "running",
+  "running_fast",
+  "partial_ready",
+  "running_quality",
+]);
+
+export const TERMINAL_STATUSES = new Set(["completed", "failed", "cancelled"]);
+
+export function isTerminal(status: string): boolean {
+  return TERMINAL_STATUSES.has(status);
+}
diff --git a/apps/web/src/hooks/use-job-state.ts b/apps/web/src/hooks/use-job-state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6f6f3c903dd5f0217b7db467d3239392cabe4516
--- /dev/null
+++ b/apps/web/src/hooks/use-job-state.ts
@@ -0,0 +1,243 @@
+import { useCallback, useEffect, useReducer, useRef } from "react";
+import {
+  type CompletedResult,
+  STORAGE_KEY,
+  RESULTS_KEY,
+  CLEARED_JOBS_KEY,
+} from "./use-job-shared";
+
+/* ── Pure storage helpers (testable seam) ── */
+
+function readStoredIds(): string[] {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY);
+    return raw ? (JSON.parse(raw) as string[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeStoredIds(ids: string[]) {
+  if (ids.length === 0) sessionStorage.removeItem(STORAGE_KEY);
+  else sessionStorage.setItem(STORAGE_KEY, JSON.stringify(ids));
+}
+
+function readStoredResults(): CompletedResult[] {
+  try {
+    const raw = sessionStorage.getItem(RESULTS_KEY);
+    return raw ? (JSON.parse(raw) as CompletedResult[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeStoredResults(results: CompletedResult[]) {
+  if (results.length === 0) sessionStorage.removeItem(RESULTS_KEY);
+  else sessionStorage.setItem(RESULTS_KEY, JSON.stringify(results));
+}
+
+function readClearedJobIds(): string[] {
+  try {
+    const raw = sessionStorage.getItem(CLEARED_JOBS_KEY);
+    return raw ? (JSON.parse(raw) as string[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeClearedJobIds(ids: string[]) {
+  if (ids.length === 0) sessionStorage.removeItem(CLEARED_JOBS_KEY);
+  else sessionStorage.setItem(CLEARED_JOBS_KEY, JSON.stringify(ids));
+}
+
+function broadcastJobs(ids: string[]) {
+  window.dispatchEvent(
+    new CustomEvent("labas:jobs-change", { detail: { ids } }),
+  );
+}
+
+/* ── State shape ── */
+
+interface State {
+  jobIds: string[];
+  completedResults: CompletedResult[];
+  error: string | null;
+  processedStates: Record<string, string>;
+  removedIds: Set<string>;
+}
+
+type Action =
+  | { type: "init"; jobIds: string[]; results: CompletedResult[]; clearedIds: string[] }
+  | { type: "addJob"; id: string }
+  | { type: "removeJob"; id: string }
+  | { type: "reset" }
+  | { type: "syncIds"; ids: string[] }
+  | { type: "trackStatus"; jobId: string; status: string }
+  | { type: "setResult"; result: CompletedResult }
+  | { type: "clearResult"; jobId: string }
+  | { type: "setError"; error: string | null };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "init": {
+      const removed = new Set(action.clearedIds);
+      return {
+        ...state,
+        jobIds: action.jobIds,
+        completedResults: action.results,
+        removedIds: removed,
+      };
+    }
+
+    case "addJob": {
+      if (state.jobIds.includes(action.id)) return state;
+      const next = [...state.jobIds, action.id];
+      writeStoredIds(next);
+      broadcastJobs(next);
+      return { ...state, jobIds: next };
+    }
+
+    case "removeJob": {
+      const nextIds = state.jobIds.filter((j) => j !== action.id);
+      const nextResults = state.completedResults.filter((r) => r.jobId !== action.id);
+      const nextRemoved = new Set(state.removedIds).add(action.id);
+
+      writeStoredIds(nextIds);
+      writeStoredResults(nextResults);
+      const cleared = readClearedJobIds();
+      if (!cleared.includes(action.id)) writeClearedJobIds([...cleared, action.id]);
+
+      return {
+        ...state,
+        jobIds: nextIds,
+        completedResults: nextResults,
+        removedIds: nextRemoved,
+      };
+    }
+
+    case "reset": {
+      const current = readStoredIds();
+      const existing = readClearedJobIds();
+      writeClearedJobIds([...new Set([...existing, ...current])]);
+      sessionStorage.removeItem(RESULTS_KEY);
+      sessionStorage.removeItem(STORAGE_KEY);
+
+      const nextRemoved = new Set(state.removedIds);
+      for (const id of current) nextRemoved.add(id);
+
+      return {
+        ...state,
+        jobIds: [],
+        completedResults: [],
+        error: null,
+        processedStates: {},
+        removedIds: nextRemoved,
+      };
+    }
+
+    case "syncIds": {
+      return { ...state, jobIds: action.ids };
+    }
+
+    case "trackStatus": {
+      return {
+        ...state,
+        processedStates: { ...state.processedStates, [action.jobId]: action.status },
+      };
+    }
+
+    case "setResult": {
+      const idx = state.completedResults.findIndex((r) => r.jobId === action.result.jobId);
+      if (idx >= 0) {
+        const updated = [...state.completedResults];
+        updated[idx] = action.result;
+        return { ...state, completedResults: updated };
+      }
+      return { ...state, completedResults: [...state.completedResults, action.result] };
+    }
+
+    case "clearResult": {
+      return {
+        ...state,
+        completedResults: state.completedResults.filter((r) => r.jobId !== action.jobId),
+      };
+    }
+
+    case "setError": {
+      return { ...state, error: action.error };
+    }
+
+    default:
+      return state;
+  }
+}
+
+/* ── Hook ── */
+
+export function useJobState() {
+  const [state, dispatch] = useReducer(reducer, {
+    jobIds: [],
+    completedResults: [],
+    error: null,
+    processedStates: {},
+    removedIds: new Set<string>(),
+  });
+
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  /* Recover from sessionStorage on mount */
+  useEffect(() => {
+    const saved = readStoredIds();
+    const savedResults = readStoredResults();
+    const clearedIds = readClearedJobIds();
+    dispatch({ type: "init", jobIds: saved, results: savedResults, clearedIds });
+  }, []);
+
+  /* Persist completedResults */
+  useEffect(() => {
+    writeStoredResults(state.completedResults);
+  }, [state.completedResults]);
+
+  /* Sync across hook instances via custom event */
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail as { ids: string[] };
+      dispatch({ type: "syncIds", ids: detail.ids });
+    };
+    window.addEventListener("labas:jobs-change", handler);
+    return () => window.removeEventListener("labas:jobs-change", handler);
+  }, []);
+
+  const addJob = useCallback((id: string) => dispatch({ type: "addJob", id }), []);
+  const removeJob = useCallback((id: string) => dispatch({ type: "removeJob", id }), []);
+  const resetAll = useCallback(() => dispatch({ type: "reset" }), []);
+  const setError = useCallback((error: string | null) => dispatch({ type: "setError", error }), []);
+  const trackStatus = useCallback(
+    (jobId: string, status: string) => dispatch({ type: "trackStatus", jobId, status }),
+    [],
+  );
+  const setResult = useCallback(
+    (result: CompletedResult) => dispatch({ type: "setResult", result }),
+    [],
+  );
+  const clearResult = useCallback(
+    (jobId: string) => dispatch({ type: "clearResult", jobId }),
+    [],
+  );
+
+  return {
+    jobIds: state.jobIds,
+    completedResults: state.completedResults,
+    error: state.error,
+    processedStates: state.processedStates,
+    removedIds: state.removedIds,
+    addJob,
+    removeJob,
+    resetAll,
+    setError,
+    trackStatus,
+    setResult,
+    clearResult,
+  };
+}
diff --git a/apps/web/src/hooks/use-package-builder.ts b/apps/web/src/hooks/use-package-builder.ts
index 3b39fb59e2b721fa3b09baa30954f6426b054fab..475b1f808bbe62362dc8a099f78623499f5a6a1f 100644
--- a/apps/web/src/hooks/use-package-builder.ts
+++ b/apps/web/src/hooks/use-package-builder.ts
@@ -2,6 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { trpc } from "@/utils/trpc";
 import { toast } from "sonner";
+import { getErrorMessage } from "@/lib/error-utils";
 
 export function usePackageBuilder() {
   const navigate = useNavigate();
@@ -14,7 +15,7 @@ export function usePackageBuilder() {
 
   const handleCreatePackage = async (params: {
     selectedIds: Set<string>;
-    questions: Array<{ id: string; examTypeId: string; sectionTypeId: string; sectionTypeName?: string | null; [key: string]: any }>;
+    questions: Array<{ id: string; examTypeId: string; sectionTypeId: string; sectionTypeName?: string | null; [key: string]: unknown }>;
     title: string;
     description: string;
     isPublic: boolean;
@@ -51,8 +52,8 @@ export function usePackageBuilder() {
       }
 
       navigate({ to: "/package/$id", params: { id: pkg.id } });
-    } catch (err: any) {
-      toast.error("Gagal membuat paket", { description: err.message });
+    } catch (err: unknown) {
+      toast.error("Gagal membuat paket", { description: getErrorMessage(err) });
     }
   };
 
@@ -106,8 +107,8 @@ export function usePackageBuilder() {
       }
 
       navigate({ to: "/package/$id", params: { id: pkg.id } });
-    } catch (err: any) {
-      toast.error("Gagal membuat paket", { description: err.message });
+    } catch (err: unknown) {
+      toast.error("Gagal membuat paket", { description: getErrorMessage(err) });
     }
   };
 
diff --git a/apps/web/src/hooks/use-polling-transport.ts b/apps/web/src/hooks/use-polling-transport.ts
new file mode 100644
index 0000000000000000000000000000000000000000..034b47e8da8e693375c1c3d3856f7857ca7eeefc
--- /dev/null
+++ b/apps/web/src/hooks/use-polling-transport.ts
@@ -0,0 +1,80 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useQueries } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+import { type ActiveJob, type JobTransport, type JobTransportEvent, isTerminal } from "./use-job-shared";
+
+/** useQueries + .map() breaks contextual typing for refetchInterval; accept `unknown` so the callback is a valid supertype of TanStack's `Query` parameter. */
+function jobStatusRefetchInterval(query: unknown): number | false {
+  const data = (query as { state: { data: { status: string } | null | undefined } }).state.data;
+  if (data == null) return 1000;
+  if (isTerminal(data.status)) return false;
+  return 1000;
+}
+
+/** Polling-based implementation of JobTransport.
+ *  Uses tRPC useQueries to poll each tracked job individually. */
+export function usePollingTransport({
+  isAuthenticated,
+}: {
+  isAuthenticated: boolean;
+}): JobTransport {
+  const [jobIds, setJobIds] = useState<string[]>([]);
+  const [activeJobs, setActiveJobs] = useState<ActiveJob[]>([]);
+  const onUpdateRef = useRef<(event: JobTransportEvent) => void>(undefined);
+  const onErrorRef = useRef<(error: Error) => void>(undefined);
+
+  const jobQueries = useQueries({
+    queries: jobIds.map((jobId) => ({
+      ...trpc.ai.getJobStatus.queryOptions({ jobId }),
+      enabled: !!jobId && isAuthenticated,
+      refetchInterval: jobStatusRefetchInterval,
+    })),
+  });
+
+  useEffect(() => {
+    const nextActive = jobQueries
+      .filter((q) => q.data && !isTerminal((q.data as { status: string }).status))
+      .map((q) => q.data as unknown as ActiveJob);
+    setActiveJobs(nextActive);
+
+    // Emit events for status changes
+    for (let i = 0; i < jobQueries.length; i++) {
+      const query = jobQueries[i];
+      const jobId = jobIds[i];
+      if (!jobId || !query.data) continue;
+      const data = query.data as Record<string, unknown>;
+      onUpdateRef.current?.({
+        jobId,
+        status: data.status as string,
+        data,
+      });
+    }
+  }, [jobQueries, jobIds]);
+
+  const subscribe = useCallback((ids: string[]) => {
+    setJobIds(ids);
+  }, []);
+
+  const unsubscribe = useCallback(() => {
+    setJobIds([]);
+    setActiveJobs([]);
+  }, []);
+
+  const onUpdate = useCallback((callback: (event: JobTransportEvent) => void) => {
+    onUpdateRef.current = callback;
+  }, []);
+
+  const onError = useCallback((callback: (error: Error) => void) => {
+    onErrorRef.current = callback;
+  }, []);
+
+  return {
+    subscribe,
+    unsubscribe,
+    onUpdate,
+    onError,
+    get activeJobs() {
+      return activeJobs;
+    },
+  };
+}
diff --git a/apps/web/src/hooks/use-question-selection.ts b/apps/web/src/hooks/use-question-selection.ts
index 607d32667cb43c9950d6396bd87857c500a7b7be..5a118dba8c4ef441e8c36a1e4b2e0a7507dc6eeb 100644
--- a/apps/web/src/hooks/use-question-selection.ts
+++ b/apps/web/src/hooks/use-question-selection.ts
@@ -3,7 +3,7 @@ import { useState, useMemo } from "react";
 interface Question {
   id: string;
   examTypeId: string;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 export function useQuestionSelection(questions: Question[]) {
diff --git a/apps/web/src/hooks/use-test-session.ts b/apps/web/src/hooks/use-test-session.ts
index ab5e883da29474fcab5698242ae1c7f3e87dc3fb..6269e2c0501375ebdabd783f08572176db123213 100644
--- a/apps/web/src/hooks/use-test-session.ts
+++ b/apps/web/src/hooks/use-test-session.ts
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { trpc } from "@/utils/trpc";
+import { getErrorMessage } from "@/lib/error-utils";
 
 function getTimerKey(attemptId: string | null) {
   return attemptId ? `labas_attempt_timer_${attemptId}` : null;
@@ -168,9 +169,9 @@ export function useTestSession(packageId: string, existingAttemptId?: string) {
       // Load any saved timer (in case of refresh during attempt)
       const saved = loadElapsedTime(res.attemptId);
       if (saved > 0) setTimeElapsed(saved);
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error("[useTestSession] Start attempt failed:", err);
-      setStartError(err.message ?? "Gagal memulai latihan. Coba lagi.");
+      setStartError(getErrorMessage(err));
     }
   }, [packageId, startMutation]);
 
diff --git a/apps/web/src/lib/types.ts b/apps/web/src/lib/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..69dc824fa20ace2d599b08420093483e51922faa
--- /dev/null
+++ b/apps/web/src/lib/types.ts
@@ -0,0 +1,86 @@
+/** Shared frontend types inferred from tRPC outputs.
+ *  These are lightweight type aliases for data shapes used across components.
+ *  For strict typing, prefer tRPC inferred types: RouterOutputs['router']['procedure'] */
+
+export interface Question {
+  id: string;
+  examTypeId?: string;
+  sectionTypeId?: string;
+  format?: string;
+  passageText?: string | null;
+  questionText?: string;
+  options?: unknown;
+  correctAnswer?: string | null;
+  explanation?: string | null;
+  difficulty?: number | null;
+  isPublic?: boolean;
+  creatorUserId?: string | null;
+  examTypeName?: string | null;
+  sectionTypeName?: string | null;
+  skillTags?: string[] | null;
+  usageCount?: number;
+  avgRating?: number | null;
+  creatorName?: string | null;
+  source?: string | null;
+  _examType?: string;
+  _isRtl?: boolean;
+  _useFurigana?: boolean;
+}
+
+export interface Package {
+  id: string;
+  title?: string;
+  description?: string | null;
+  examTypeId?: string;
+  examTypeName?: string | null;
+  creatorUserId?: string | null;
+  creatorName?: string | null;
+  isPublic?: boolean;
+  totalQuestions?: number;
+  totalSections?: number;
+  estimatedDurationMin?: number | null;
+  usageCount?: number;
+  avgRating?: number | null;
+}
+
+export interface PackageSection {
+  id: string;
+  title?: string;
+  questions?: Question[];
+  packageId?: string;
+  packageTitle?: string | null;
+  examTypeName?: string | null;
+  sectionTypeName?: string | null;
+  sectionTypeId?: string;
+  orderIndex?: number;
+}
+
+export interface AttemptSection {
+  id: string;
+  title?: string;
+  questions?: Question[];
+  answers?: Array<{
+    questionId: string;
+    userAnswer?: string;
+    answer?: string;
+    isCorrect?: boolean | null;
+    partialScore?: number | null;
+    timeSpentSec?: number;
+  }>;
+}
+
+export interface Attempt {
+  id: string;
+  packageId?: string;
+  status?: string;
+  score?: number | null;
+  sections?: AttemptSection[];
+}
+
+export interface JobItem {
+  id: string;
+  status: string;
+  examTypeId?: string;
+  sectionTypeId?: string;
+  format?: string;
+}
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index 4497edb2ee1ebf1196faace661c1e1bc5d7ae994..947ba13f194d86f461c6a1031fe2d4f58ef0d711 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -11,6 +11,17 @@ import { GlobalGenerationProgress } from "@/components/generate/GlobalGeneration
 import { ErrorFallback } from "@/components/ErrorFallback";
 import type { trpc } from "@/utils/trpc";
 
+function SkipLink() {
+  return (
+    <a
+      href="#main-content"
+      className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-[var(--clay-black)] focus:text-[var(--pure-white)] focus:rounded-[var(--radius-lg)] focus:font-semibold focus:text-sm focus:shadow-xl"
+    >
+      Lewati ke konten utama
+    </a>
+  );
+}
+
 import "../index.css";
 
 export interface RouterAppContext {
@@ -70,8 +81,10 @@ function RootComponent() {
           </div>
         ) : (
           <div className="min-h-screen bg-background relative">
+            <SkipLink />
             <Sidebar />
             <main
+              id="main-content"
               className={`min-h-screen transition-all duration-300 relative z-0 ${collapsed ? "md:ml-16" : "md:ml-64"}`}
             >
               <Outlet />
diff --git a/apps/web/src/routes/admin.credits.tsx b/apps/web/src/routes/admin.credits.tsx
index 2b99fe217c221a79e947e857df1ffb81b067b6c7..e5a4ec3996456581f8b37039db2a8b7325adf3b4 100644
--- a/apps/web/src/routes/admin.credits.tsx
+++ b/apps/web/src/routes/admin.credits.tsx
@@ -20,6 +20,12 @@ function AdminCredits() {
   const [description, setDescription] = useState("");
   const queryClient = useQueryClient();
 
+  function handleSearch(val: string) {
+    setSearch(val);
+    setSelectedUserId("");
+    setSelectedUserName("");
+  }
+
   const userSearch = useQuery(
     trpc.admin.listUsers.queryOptions(
       { search: debouncedSearch || undefined, limit: 10, offset: 0 },
@@ -81,6 +87,7 @@ function AdminCredits() {
             placeholder="Search by name or email..."
             value={search}
             onChange={(e) => handleSearch(e.target.value)}
+            aria-label="Cari user"
             className="max-w-md"
           />
           {userSearch.data && userSearch.data.users.length > 0 && !selectedUserId && (
diff --git a/apps/web/src/routes/admin.featured.tsx b/apps/web/src/routes/admin.featured.tsx
index 2e8b6e1117c91ef160175dbee5097a6c89a695d0..608e1204864904ff047f20ba0d56ee17f64b5129 100644
--- a/apps/web/src/routes/admin.featured.tsx
+++ b/apps/web/src/routes/admin.featured.tsx
@@ -4,9 +4,11 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { trpc } from "@/utils/trpc";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@labas/ui/components/tabs";
 import { toast } from "sonner";
 import { getErrorMessage } from "@/lib/error-utils";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 export const Route = createFileRoute("/admin/featured")({
   component: AdminFeatured,
@@ -67,128 +69,163 @@ function AdminFeatured() {
 
   return (
     <div>
-      <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)] mb-2">Editor's Pick</h1>
+      <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)] mb-2">Editor&apos;s Pick</h1>
       <p className="text-[var(--warm-charcoal)] mb-6">Curate featured content for the homepage.</p>
 
-      <div className="flex gap-2 mb-6 border-b border-[var(--oat-border)] pb-0">
-        {tabs.map((t) => (
-          <button
-            key={t.key}
-            onClick={() => { setTab(t.key); setSearch(""); setPage(1); }}
-            className={`px-4 py-2.5 text-sm font-medium rounded-t-[var(--radius-lg)] transition-colors ${
-              tab === t.key
-                ? "bg-[var(--pure-white)] text-[var(--clay-black)] border border-[var(--oat-border)] border-b-[var(--pure-white)] -mb-[1px]"
-                : "text-[var(--warm-charcoal)] hover:text-[var(--clay-black)]"
-            }`}
-          >
-            {t.label}
-          </button>
-        ))}
-      </div>
+      <Tabs
+        value={tab}
+        onValueChange={(v) => { setTab(v as Tab); setSearch(""); setPage(1); }}
+        className="mb-6"
+      >
+        <TabsList variant="line" className="h-10 bg-transparent border-b border-[var(--oat-border)]">
+          {tabs.map((t) => (
+            <TabsTrigger
+              key={t.key}
+              value={t.key}
+              className="px-4 py-2.5 text-sm font-medium rounded-t-[var(--radius-lg)] data-[active=true]:bg-[var(--pure-white)] data-[active=true]:text-[var(--clay-black)] data-[active=true]:border data-[active=true]:border-[var(--oat-border)] data-[active=true]:border-b-[var(--pure-white)] data-[active=true]:-mb-[1px] text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors"
+            >
+              {t.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
 
-      {tab === "featured" && (
-        <div className="space-y-8">
-          <section>
-            <div className="flex items-center gap-2 mb-4">
-              <h2 className="text-lg font-headline font-bold text-[var(--clay-black)]">Featured Packages</h2>
-              <span className="text-sm text-[var(--warm-charcoal)]">({fPackages.length})</span>
-            </div>
-            {fPackages.length === 0 ? (
-              <p className="text-sm text-[var(--warm-charcoal)] py-4">No featured packages. Browse and select from the tabs above.</p>
-            ) : (
-              <div className="space-y-2">
-                {fPackages.map((pkg) => (
-                  <div key={pkg.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
-                    <div>
-                      <p className="font-medium text-[var(--clay-black)]">{pkg.title}</p>
-                      <p className="text-xs text-[var(--warm-charcoal)]">{pkg.examTypeId}</p>
-                    </div>
-                    <Button variant="outline" onClick={() => togglePkgMutation.mutate({ packageId: pkg.id })} disabled={togglePkgMutation.isPending} className="h-9 rounded-[var(--radius-lg)] text-xs">Unfeature</Button>
-                  </div>
-                ))}
+        <TabsContent value="featured" className="mt-6">
+          <div className="space-y-8">
+            <section>
+              <div className="flex items-center gap-2 mb-4">
+                <h2 className="text-lg font-headline font-bold text-[var(--clay-black)]">Featured Packages</h2>
+                <span className="text-sm text-[var(--warm-charcoal)]">({fPackages.length})</span>
               </div>
-            )}
-          </section>
-
-          <section>
-            <div className="flex items-center gap-2 mb-4">
-              <h2 className="text-lg font-headline font-bold text-[var(--clay-black)]">Featured Questions</h2>
-              <span className="text-sm text-[var(--warm-charcoal)]">({fQuestions.length})</span>
-            </div>
-            {fQuestions.length === 0 ? (
-              <p className="text-sm text-[var(--warm-charcoal)] py-4">No featured questions.</p>
-            ) : (
-              <div className="space-y-2">
-                {fQuestions.map((q) => (
-                  <div key={q.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
-                    <div className="flex-1 min-w-0">
-                      <p className="font-medium text-[var(--clay-black)] truncate">{q.questionText}</p>
-                      <p className="text-xs text-[var(--warm-charcoal)]">{q.format} · {q.examTypeId}</p>
+              {fPackages.length === 0 ? (
+                <p className="text-sm text-[var(--warm-charcoal)] py-4">No featured packages. Browse and select from the tabs above.</p>
+              ) : (
+                <div className="space-y-2">
+                  {fPackages.map((pkg) => (
+                    <div key={pkg.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
+                      <div>
+                        <p className="font-medium text-[var(--clay-black)]">{pkg.title}</p>
+                        <p className="text-xs text-[var(--warm-charcoal)]">{pkg.examTypeId}</p>
+                      </div>
+                      <Button variant="outline" onClick={() => togglePkgMutation.mutate({ packageId: pkg.id })} disabled={togglePkgMutation.isPending} className="h-9 rounded-[var(--radius-lg)] text-xs">Unfeature</Button>
                     </div>
-                    <Button variant="outline" className="shrink-0 ml-4 h-9 rounded-[var(--radius-lg)] text-xs" onClick={() => toggleQMutation.mutate({ questionId: q.id })} disabled={toggleQMutation.isPending}>Unfeature</Button>
-                  </div>
-                ))}
+                  ))}
+                </div>
+              )}
+            </section>
+
+            <section>
+              <div className="flex items-center gap-2 mb-4">
+                <h2 className="text-lg font-headline font-bold text-[var(--clay-black)]">Featured Questions</h2>
+                <span className="text-sm text-[var(--warm-charcoal)]">({fQuestions.length})</span>
               </div>
-            )}
-          </section>
-        </div>
-      )}
+              {fQuestions.length === 0 ? (
+                <p className="text-sm text-[var(--warm-charcoal)] py-4">No featured questions.</p>
+              ) : (
+                <div className="space-y-2">
+                  {fQuestions.map((q) => (
+                    <div key={q.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
+                      <div className="flex-1 min-w-0">
+                        <p className="font-medium text-[var(--clay-black)] truncate">{q.questionText}</p>
+                        <p className="text-xs text-[var(--warm-charcoal)]">{q.format} · {q.examTypeId}</p>
+                      </div>
+                      <Button variant="outline" className="shrink-0 ml-4 h-9 rounded-[var(--radius-lg)] text-xs" onClick={() => toggleQMutation.mutate({ questionId: q.id })} disabled={toggleQMutation.isPending}>Unfeature</Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </section>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="packages" className="mt-6">
+          <div className="relative flex-1">
+            <MaterialIcon name="search" className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--warm-charcoal)]" />
+            <Input
+              placeholder="Search packages..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              aria-label="Search packages"
+              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
+            />
+          </div>
+          <SearchResults query={searchQuery} tab="packages" page={page} setPage={setPage} limit={limit} togglePkgMutation={togglePkgMutation} toggleQMutation={toggleQMutation} />
+        </TabsContent>
 
-      {tab !== "featured" && (
-        <div>
+        <TabsContent value="questions" className="mt-6">
           <Input
-            placeholder={`Search ${tab}...`}
+            placeholder="Search questions..."
             value={search}
             onChange={(e) => handleSearch(e.target.value)}
             className="max-w-md mb-4"
           />
+          <SearchResults query={searchQuery} tab="questions" page={page} setPage={setPage} limit={limit} togglePkgMutation={togglePkgMutation} toggleQMutation={toggleQMutation} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
 
-          {searchQuery.isLoading ? (
-            <p className="text-sm text-[var(--warm-charcoal)] py-8 text-center">Searching...</p>
-          ) : (
-            <>
-              <p className="text-sm text-[var(--warm-charcoal)] mb-3">
-                {debouncedSearch ? `${searchQuery.data?.total ?? 0} results for "${debouncedSearch}"` : `Showing ${searchQuery.data?.total ?? 0} ${tab}`}
+function SearchResults({
+  query,
+  tab,
+  page,
+  setPage,
+  limit,
+  togglePkgMutation,
+  toggleQMutation,
+}: {
+  query: ReturnType<typeof useQuery>;
+  tab: "packages" | "questions";
+  page: number;
+  setPage: (fn: (p: number) => number) => void;
+  limit: number;
+  togglePkgMutation: { mutate: (args: { packageId: string }) => void; isPending: boolean };
+  toggleQMutation: { mutate: (args: { questionId: string }) => void; isPending: boolean };
+}) {
+  if (query.isLoading) {
+    return <p className="text-sm text-[var(--warm-charcoal)] py-8 text-center">Searching...</p>;
+  }
+  const data = query.data as { items: Array<{ id: string; title?: string; questionText?: string; format?: string; examTypeId?: string; isFeatured?: boolean }>; total: number } | undefined;
+  return (
+    <>
+      <p className="text-sm text-[var(--warm-charcoal)] mb-3">
+        {query.isSuccess ? `Showing ${data?.total ?? 0} ${tab}` : ""}
+      </p>
+      <div className="space-y-2">
+        {(data?.items ?? []).map((item) => (
+          <div key={item.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
+            <div className="flex-1 min-w-0">
+              <p className="font-medium text-[var(--clay-black)] truncate">
+                {item.title ?? item.questionText}
               </p>
-              <div className="space-y-2">
-                {(searchQuery.data?.items ?? []).map((item) => (
-                  <div key={item.id} className="flex items-center justify-between bg-[var(--pure-white)] border border-[var(--oat-border)] rounded-[var(--radius-lg)] px-4 py-3">
-                    <div className="flex-1 min-w-0">
-                      <p className="font-medium text-[var(--clay-black)] truncate">
-                        {"title" in item ? item.title : item.questionText}
-                      </p>
-                      <p className="text-xs text-[var(--warm-charcoal)]">
-                        {"format" in item ? `${item.format} · ${item.examTypeId}` : item.examTypeId}
-                        {item.isFeatured && (
-                          <span className="ml-2 text-xs font-semibold px-1.5 py-0.5 rounded-full bg-[var(--sunbeam-300)] text-[var(--sunbeam-800)]">Featured</span>
-                        )}
-                      </p>
-                    </div>
-                    <Button
-                      variant={item.isFeatured ? "outline" : "default"}
-                      className="shrink-0 ml-4 h-9 rounded-[var(--radius-lg)] text-xs"
-                      onClick={() => {
-                        if (tab === "packages") togglePkgMutation.mutate({ packageId: item.id });
-                        else toggleQMutation.mutate({ questionId: item.id });
-                      }}
-                      disabled={togglePkgMutation.isPending || toggleQMutation.isPending}
-                    >
-                      {item.isFeatured ? "Unfeature" : "Feature"}
-                    </Button>
-                  </div>
-                ))}
-              </div>
-              {searchQuery.data && (searchQuery.data.total as number) > limit && (
-                <div className="flex items-center justify-center gap-4 mt-6">
-                  <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>Previous</Button>
-                  <span className="text-sm text-[var(--warm-charcoal)]">Page {page} of {Math.ceil((searchQuery.data.total as number) / limit)}</span>
-                  <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page * limit >= (searchQuery.data.total as number)}>Next</Button>
-                </div>
-              )}
-            </>
-          )}
+              <p className="text-xs text-[var(--warm-charcoal)]">
+                {item.format ? `${item.format} · ${item.examTypeId}` : item.examTypeId}
+                {item.isFeatured && (
+                  <span className="ml-2 text-xs font-semibold px-1.5 py-0.5 rounded-full bg-[var(--sunbeam-300)] text-[var(--sunbeam-800)]">Featured</span>
+                )}
+              </p>
+            </div>
+            <Button
+              variant={item.isFeatured ? "outline" : "default"}
+              className="shrink-0 ml-4 h-9 rounded-[var(--radius-lg)] text-xs"
+              onClick={() => {
+                if (tab === "packages") togglePkgMutation.mutate({ packageId: item.id });
+                else toggleQMutation.mutate({ questionId: item.id });
+              }}
+              disabled={togglePkgMutation.isPending || toggleQMutation.isPending}
+            >
+              {item.isFeatured ? "Unfeature" : "Feature"}
+            </Button>
+          </div>
+        ))}
+      </div>
+      {data && data.total > limit && (
+        <div className="flex items-center justify-center gap-4 mt-6">
+          <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>Previous</Button>
+          <span className="text-sm text-[var(--warm-charcoal)]">Page {page} of {Math.ceil(data.total / limit)}</span>
+          <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page * limit >= data.total}>Next</Button>
         </div>
       )}
-    </div>
+    </>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/routes/admin.jobs.tsx b/apps/web/src/routes/admin.jobs.tsx
index 509c3bfffd34c9ea5979b00ed21131683f557415..75df45b4ab089d76ac69a7613eebcb71b76f1c32 100644
--- a/apps/web/src/routes/admin.jobs.tsx
+++ b/apps/web/src/routes/admin.jobs.tsx
@@ -80,7 +80,7 @@ function AdminJobs() {
             ) : (!jobs.data?.jobs || jobs.data.jobs.length === 0) ? (
               <tr><td colSpan={8} className="text-center py-16 text-[var(--warm-charcoal)]">No jobs found.</td></tr>
             ) : (
-              jobs.data.jobs.map((job: any) => (
+              jobs.data.jobs.map((job) => (
                 <tr key={job.id} className="border-t border-[var(--oat-border)] hover:bg-[var(--oat-light)]/50 transition-colors">
                   <td className="px-4 py-3 text-[var(--warm-charcoal)] font-mono text-xs">{job.userId?.slice(0, 10)}...</td>
                   <td className="px-4 py-3">{job.examTypeId}</td>
diff --git a/apps/web/src/routes/admin.moderation.tsx b/apps/web/src/routes/admin.moderation.tsx
index 18c7461a49f70b99404843d0c01c564a41760449..1be56b0ebb3ea76e2b5ddc7515522eb0dc3cf2ef 100644
--- a/apps/web/src/routes/admin.moderation.tsx
+++ b/apps/web/src/routes/admin.moderation.tsx
@@ -58,7 +58,7 @@ function AdminModeration() {
             ) : (!questions.data?.questions || questions.data.questions.length === 0) ? (
               <tr><td colSpan={7} className="text-center py-16 text-[var(--warm-charcoal)]">No questions yet.</td></tr>
             ) : (
-              questions.data.questions.map((q: any) => (
+              questions.data.questions.map((q) => (
                 <tr key={q.id} className="border-t border-[var(--oat-border)] hover:bg-[var(--oat-light)]/50 transition-colors">
                   <td className="px-4 py-3 max-w-xs">
                     <p className="font-medium text-[var(--clay-black)] truncate">{q.questionText}</p>
diff --git a/apps/web/src/routes/admin.tsx b/apps/web/src/routes/admin.tsx
index 73a5f1cd1cc7952dbbe09fc6adb2ee25176c2bc3..25570bf7450082c82ef8fa0b44c4f9716bf407b6 100644
--- a/apps/web/src/routes/admin.tsx
+++ b/apps/web/src/routes/admin.tsx
@@ -60,7 +60,7 @@ function AdminLayout() {
               <span className="text-sm text-[var(--warm-charcoal)]">Back to App</span>
             </Link>
           </div>
-          <h2 className="px-2 mb-4 text-xs font-semibold uppercase tracking-wider text-[var(--warm-charcoal)]">Admin Panel</h2>
+          <div className="px-2 mb-4 text-xs font-semibold uppercase tracking-wider text-[var(--warm-charcoal)]">Admin Panel</div>
           <nav className="flex flex-col gap-1">
             {adminNavItems.map((item) => {
               const isActive = location.pathname === item.to;
diff --git a/apps/web/src/routes/admin.users.tsx b/apps/web/src/routes/admin.users.tsx
index aaa4aaf79fea2c731db4bd31ee63ae4ad55578e1..0ca1b8247d696f06d6006ee79cd69e7faf6a1cdf 100644
--- a/apps/web/src/routes/admin.users.tsx
+++ b/apps/web/src/routes/admin.users.tsx
@@ -46,8 +46,9 @@ function AdminUsers() {
           <Input
             placeholder="Search by name or email..."
             value={search}
-            onChange={(e) => handleSearch(e.target.value)}
-            className="max-w-sm"
+            onChange={(e) => setSearch(e.target.value)}
+            aria-label="Cari user"
+            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
           />
         </div>
         <table className="w-full text-sm">
diff --git a/apps/web/src/routes/analytics.tsx b/apps/web/src/routes/analytics.tsx
index 28fcc792ca276c2d688f846ae3abff2c26dadb10..d67fd90a0800a3f06c9fac285a5eecf7b4272b38 100644
--- a/apps/web/src/routes/analytics.tsx
+++ b/apps/web/src/routes/analytics.tsx
@@ -1,12 +1,12 @@
+import { Suspense, lazy } from "react";
 import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
 import { useAnalytics } from "@/hooks/use-analytics";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { OverviewCards } from "@/components/analytics/OverviewCards";
-import { ScoreTrendChart } from "@/components/analytics/ScoreTrendChart";
-import { BreakdownCharts } from "@/components/analytics/BreakdownCharts";
 import { WeaknessPanel } from "@/components/analytics/WeaknessPanel";
-import { TimeAnalyticsPanel } from "@/components/analytics/TimeAnalyticsPanel";
+
+const ChartsBundle = lazy(() => import("@/components/analytics/ChartsBundle"));
 
 export const Route = createFileRoute("/analytics")({
   component: AnalyticsComponent,
@@ -19,6 +19,15 @@ export const Route = createFileRoute("/analytics")({
   },
 });
 
+function ChartSkeleton() {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <div className="h-80 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+      <div className="h-80 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
+    </div>
+  );
+}
+
 function AnalyticsComponent() {
   const {
     overview,
@@ -40,10 +49,7 @@ function AnalyticsComponent() {
             <div key={i} className="h-28 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
           ))}
         </div>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <div className="h-80 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
-          <div className="h-80 bg-[var(--oat-light)] animate-pulse rounded-[var(--radius-xl)]" />
-        </div>
+        <ChartSkeleton />
       </div>
     );
   }
@@ -77,31 +83,25 @@ function AnalyticsComponent() {
         <OverviewCards data={overview.data} />
       </div>
 
-      {/* Score Trend */}
-      <div className="mb-8">
-        <ScoreTrendChart data={trend.data} />
-      </div>
-
-      {/* Breakdown Charts */}
-      <div className="mb-8">
-        <BreakdownCharts
+      {/* Charts — lazy loaded */}
+      <Suspense fallback={<ChartSkeleton />}>
+        <ChartsBundle
+          trend={trend.data}
           byExamType={byExamType.data}
           bySectionType={bySectionType.data}
           byFormat={byFormat.data}
+          sectionTime={timeAnalytics.data?.sectionTime}
+          formatTimeData={timeAnalytics.data?.formatTime}
+          timeTrend={timeAnalytics.data?.timeTrend}
         />
-      </div>
+      </Suspense>
 
-      {/* Weaknesses + Time Analytics */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      {/* Weaknesses */}
+      <div className="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
         <WeaknessPanel
           weaknesses={weaknesses.data?.weaknesses}
           recommendations={weaknesses.data?.recommendations}
         />
-        <TimeAnalyticsPanel
-          sectionTime={timeAnalytics.data?.sectionTime}
-          formatTimeData={timeAnalytics.data?.formatTime}
-          timeTrend={timeAnalytics.data?.timeTrend}
-        />
       </div>
     </div>
   );
diff --git a/apps/web/src/routes/attempt.$id.tsx b/apps/web/src/routes/attempt.$id.tsx
index ce90c7178054a17cab81d1a4a1fbc9d9438ccade..4c35038e24c60a60299b8d148c7ce95cc69ab260 100644
--- a/apps/web/src/routes/attempt.$id.tsx
+++ b/apps/web/src/routes/attempt.$id.tsx
@@ -7,12 +7,29 @@ import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { formatTime } from "@/lib/time";
+import type { Question } from "@/lib/types";
 import { QuestionReviewCard } from "@/components/attempt/QuestionReviewCard";
 import { ReviewFilterBar } from "@/components/attempt/ReviewFilterBar";
 import { SkillBreakdown } from "@/components/attempt/SkillBreakdown";
 
 type FilterStatus = "all" | "wrong" | "correct" | "marked";
 
+interface AnswerItem {
+  questionId: string;
+  userAnswer?: string;
+  answer?: string;
+  isCorrect?: boolean | null;
+  partialScore?: number | null;
+  timeSpentSec?: number;
+}
+
+interface QuestionAnswer {
+  q: Question;
+  ans: AnswerItem | null;
+  secIdx: number;
+  qIdx: number;
+}
+
 export const Route = createFileRoute("/attempt/$id")({
   component: AttemptResultComponent,
   beforeLoad: async () => {
@@ -60,24 +77,24 @@ function AttemptResultComponent() {
   // ── Flatten all questions with section context ──
   const allQuestions = useMemo(() => {
     if (!attempt?.sections) return [];
-    return attempt.sections.flatMap((sec: any, secIdx: number) =>
-      sec.questions.map((q: any, qIdx: number) => ({
+    return attempt.sections.flatMap((sec, secIdx: number) =>
+      sec.questions.map((q: Question, qIdx: number) => ({
         q,
         secIdx,
         qIdx,
-        ans: sec.answers.find((a: any) => a.questionId === q.id) ?? null,
+        ans: sec.answers.find((a: AnswerItem) => a.questionId === q.id) ?? null,
       })),
     );
   }, [attempt]);
 
   // ── Filtered questions ──
   const partialCount = useMemo(
-    () => allQuestions.filter(({ ans }: any) => ans?.partialScore != null && ans?.partialScore < 100).length,
+    () => allQuestions.filter(({ ans }) => ans?.partialScore != null && ans?.partialScore < 100).length,
     [allQuestions],
   );
 
   const filteredQuestions = useMemo(() => {
-    return allQuestions.filter(({ q, ans }: any) => {
+    return allQuestions.filter(({ q, ans }) => {
       if (filterStatus === "wrong" && ans?.isCorrect !== false) return false;
       if (filterStatus === "correct" && ans?.isCorrect !== true) return false;
       if (filterStatus === "marked") {
@@ -97,7 +114,7 @@ function AttemptResultComponent() {
     const next = !allExpanded;
     setAllExpanded(next);
     if (next) {
-      setExpandedIds(new Set(filteredQuestions.map(({ q }: any) => q.id)));
+      setExpandedIds(new Set(filteredQuestions.map(({ q }) => q.id)));
     } else {
       setExpandedIds(new Set());
     }
@@ -210,6 +227,7 @@ function AttemptResultComponent() {
                       <button
                         key={star}
                         onClick={() => ratePackageMutation.mutate({ packageId: attempt.packageId!, score: star })}
+                        aria-label={`Nilai ${star} bintang`}
                         className="transition-transform hover:scale-110"
                       >
                         <MaterialIcon
@@ -235,7 +253,7 @@ function AttemptResultComponent() {
       <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) => {
+          {attempt.sections.map((sec) => {
             const secPct = sec.maxScore && sec.maxScore > 0
               ? Math.round(((sec.score ?? 0) / sec.maxScore) * 100)
               : 0;
@@ -273,9 +291,9 @@ function AttemptResultComponent() {
           <span className="ml-2 text-sm font-normal text-[var(--warm-charcoal)]">Klik topik untuk filter soal</span>
         </h2>
         <SkillBreakdown
-          questions={allQuestions.map(({ q, ans }: any) => ({
-            skillTags: q.skillTags,
-            isCorrect: ans?.isCorrect,
+          questions={allQuestions.map(({ q, ans }) => ({
+            skillTags: q.skillTags ?? [],
+            isCorrect: ans?.isCorrect ?? null,
           }))}
           onSkillClick={toggleSkill}
           activeSkills={filterSkills}
@@ -298,7 +316,7 @@ function AttemptResultComponent() {
           setFilterStatus={setFilterStatus}
           filterSkills={filterSkills}
           setFilterSkills={setFilterSkills}
-          questions={allQuestions.map(({ q, ans }: any) => ({
+          questions={allQuestions.map(({ q, ans }) => ({
             skillTags: q.skillTags ?? [],
             isCorrect: ans?.isCorrect,
           }))}
@@ -308,7 +326,7 @@ function AttemptResultComponent() {
         />
 
         <div className="space-y-3">
-          {filteredQuestions.map(({ q, secIdx, qIdx, ans }: any) => (
+          {filteredQuestions.map(({ q, secIdx, qIdx, ans }) => (
             <QuestionReviewCard
               key={q.id}
               q={q}
diff --git a/apps/web/src/routes/forgot-password.tsx b/apps/web/src/routes/forgot-password.tsx
index 92d3e8cda0110bf80331dd4e5008788e8b88b430..75409965e8564e2cfbd660a8cd4ece31e2fd1964 100644
--- a/apps/web/src/routes/forgot-password.tsx
+++ b/apps/web/src/routes/forgot-password.tsx
@@ -6,6 +6,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@laba
 import { Input } from "@labas/ui/components/input";
 import { Label } from "@labas/ui/components/label";
 import { toast } from "sonner";
+import { getErrorMessage } from "@/lib/error-utils";
 import { trpc } from "@/utils/trpc";
 
 export const Route = createFileRoute("/forgot-password")({
@@ -23,8 +24,8 @@ function StepEmail({ onNext }: { onNext: (email: string) => void }) {
       await sendMutation.mutateAsync({ email });
       toast.success("Kode OTP telah dikirim ke email Anda");
       onNext(email);
-    } catch (err: any) {
-      toast.error(err.message || "Gagal mengirim OTP");
+    } catch (err: unknown) {
+      toast.error(getErrorMessage(err) || "Gagal mengirim OTP");
     }
   };
 
@@ -120,8 +121,8 @@ function StepReset({ email }: { email: string }) {
       await resendMutation.mutateAsync({ email });
       toast.success("Kode OTP telah dikirim ulang");
       setCountdown(60);
-    } catch (err: any) {
-      toast.error(err.message || "Gagal mengirim ulang OTP");
+    } catch (err: unknown) {
+      toast.error(getErrorMessage(err) || "Gagal mengirim ulang OTP");
     }
   };
 
@@ -146,8 +147,8 @@ function StepReset({ email }: { email: string }) {
       await resetMutation.mutateAsync({ email, otp: code, newPassword });
       toast.success("Password berhasil direset! Silakan masuk.");
       navigate({ to: "/login" });
-    } catch (err: any) {
-      toast.error(err.message || "Gagal mereset password");
+    } catch (err: unknown) {
+      toast.error(getErrorMessage(err) || "Gagal mereset password");
       setOtp(["", "", "", "", "", ""]);
       inputRefs.current[0]?.focus();
     }
@@ -178,6 +179,7 @@ function StepReset({ email }: { email: string }) {
                   value={digit}
                   onChange={(e) => handleOtpChange(i, e.target.value)}
                   onKeyDown={(e) => handleKeyDown(i, e)}
+                  aria-label={`Digit ${i + 1} kode OTP`}
                   className="w-12 h-14 text-center text-xl font-bold"
                 />
               ))}
diff --git a/apps/web/src/routes/history.tsx b/apps/web/src/routes/history.tsx
index b238ee8886a12839c8521b9c0aa0bcc92b5c86f3..0a8175d2d314084e372a7bb4884dbd579d662e8e 100644
--- a/apps/web/src/routes/history.tsx
+++ b/apps/web/src/routes/history.tsx
@@ -145,6 +145,7 @@ export function HistoryComponent() {
               placeholder="Cari paket..."
               value={localSearch}
               onChange={(e) => setLocalSearch(e.target.value)}
+              aria-label="Cari paket"
               className="pl-10 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] h-11"
             />
           </div>
@@ -211,9 +212,9 @@ export function HistoryComponent() {
                           )}
                         </div>
 
-                        <h3 className="font-headline text-lg font-bold text-[var(--clay-black)] truncate">
+                        <h2 className="font-headline text-lg font-bold text-[var(--clay-black)] truncate">
                           {attempt.packageTitle ?? "Paket tidak diketahui"}
-                        </h3>
+                        </h2>
 
                         <div className="flex items-center gap-4 mt-1 text-xs text-[var(--warm-charcoal)]">
                           <span className="flex items-center gap-1">
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 168154026be67a9e736ba154691a2b96e3b31d77..6cc208fc2074648fcb2d916d4975e1f4691936b9 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -216,7 +216,7 @@ function HomeComponent() {
             </Link>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {featuredPkg.slice(0, 3).map((pkg: any) => (
+            {featuredPkg.slice(0, 3).map((pkg) => (
               <Link key={pkg.id} to="/package/$id" params={{ id: pkg.id }} className="block">
                 <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full transition-all hover:border-[var(--matcha-400)]">
                   <CardContent className="p-5">
diff --git a/apps/web/src/routes/jobs.tsx b/apps/web/src/routes/jobs.tsx
index ccba5fc0c9bc3ae5f8fe9e27f24ed0f7db24ae48..0247b493fcd72026d778f7f3f55fe3e746412ccd 100644
--- a/apps/web/src/routes/jobs.tsx
+++ b/apps/web/src/routes/jobs.tsx
@@ -171,7 +171,7 @@ function RouteComponent() {
     refetchInterval: (query) => {
       const data = query.state.data;
       if (!data) return false;
-      const hasRunning = data.some((j: any) => ACTIVE_STATUSES.has(j.status));
+      const hasRunning = data.some((j) => ACTIVE_STATUSES.has(j.status));
       return hasRunning ? 1000 : false;
     },
   });
@@ -335,7 +335,7 @@ function RouteComponent() {
                     <div className="flex items-center justify-between mb-3">
                       <div className="text-sm text-[var(--warm-charcoal)]">
                         {(() => {
-                          const splits = (result as any).sectionSplits as { section: string; count: number }[] | undefined;
+                          const splits = (result as unknown as { sectionSplits?: { section: string; count: number }[] }).sectionSplits;
                           if (splits && splits.length > 1) {
                             return (
                               <span>
@@ -387,7 +387,7 @@ function RouteComponent() {
                             {"options" in q && Array.isArray(q.options) && q.options.length > 0 && (
                               <div className="space-y-1 mb-2">
                                 {q.format === "matching_pairs"
-                                  ? q.options.map((opt: any, i: number) => (
+                                  ? q.options.map((opt: { left?: string; key?: string; right?: string }, i: number) => (
                                       <div
                                         key={i}
                                         className="text-sm px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--oat-border)] text-[var(--warm-charcoal)]"
@@ -396,7 +396,7 @@ function RouteComponent() {
                                         {opt.right ? ` → ${opt.right}` : ""}
                                       </div>
                                     ))
-                                  : q.options.map((opt: any) => (
+                                  : q.options.map((opt: { key: string; text: string }) => (
                                       <div
                                         key={opt.key}
                                         className="text-sm px-3 py-1.5 rounded-[var(--radius-md)] border border-[var(--oat-border)] text-[var(--warm-charcoal)]"
diff --git a/apps/web/src/routes/package.$id.attempt.$attemptId.tsx b/apps/web/src/routes/package.$id.attempt.$attemptId.tsx
index 700e915ff4ddfb1d0102ce5f6addb5b021925c69..5e816d3548161af3201eec3cb9f0688c40473563 100644
--- a/apps/web/src/routes/package.$id.attempt.$attemptId.tsx
+++ b/apps/web/src/routes/package.$id.attempt.$attemptId.tsx
@@ -62,7 +62,7 @@ function ContinueAttemptComponent() {
     );
   }
 
-  const totalQuestions = pkg.sections.reduce((sum: number, sec: any) => sum + sec.questions.length, 0);
+  const totalQuestions = pkg.sections.reduce((sum: number, sec) => sum + sec.questions.length, 0);
   const answeredCount = Object.keys(answers).length;
 
   const currentSection = pkg.sections[currentSectionIdx];
diff --git a/apps/web/src/routes/package.$id.index.tsx b/apps/web/src/routes/package.$id.index.tsx
index ddecf03ba4d6090cd3e04f11c31e36678c0c4d1e..24ac21b4e85084838d62c173d2d3b71e12bc3b9d 100644
--- a/apps/web/src/routes/package.$id.index.tsx
+++ b/apps/web/src/routes/package.$id.index.tsx
@@ -149,7 +149,7 @@ function PackageDetailComponent() {
                 <p className="text-sm text-[var(--warm-silver)] text-center py-4">Belum ada soal di section ini</p>
               ) : (
                 <div className="space-y-3">
-                  {section.questions.map((q: any, idx: number) => (
+                  {section.questions.map((q, idx: number) => (
                     <div
                       key={q.id}
                       className="block p-4 rounded-[var(--radius-lg)] bg-[var(--oat-light)] hover:bg-[var(--matcha-300)]/10 transition-colors"
diff --git a/apps/web/src/routes/package.$id.take.tsx b/apps/web/src/routes/package.$id.take.tsx
index 33cdca423efb8c548ff1b3aee445a9aa279b026a..542fb0cd1ce6ab8003998fb9020a7cf4a8ddcee1 100644
--- a/apps/web/src/routes/package.$id.take.tsx
+++ b/apps/web/src/routes/package.$id.take.tsx
@@ -87,7 +87,7 @@ function TakeTestComponent() {
     );
   }
 
-  const totalQuestions = pkg.sections.reduce((sum: number, sec: any) => sum + sec.questions.length, 0);
+  const totalQuestions = pkg.sections.reduce((sum: number, sec) => sum + sec.questions.length, 0);
   const answeredCount = Object.keys(answers).length;
 
   // Start screen
diff --git a/apps/web/src/routes/verify-email.tsx b/apps/web/src/routes/verify-email.tsx
index 82c7a9a2fefb3cc7c5072c940aed22d63b14921d..c5f7917155b55d8f661550b01a92e49e4c7befae 100644
--- a/apps/web/src/routes/verify-email.tsx
+++ b/apps/web/src/routes/verify-email.tsx
@@ -5,6 +5,7 @@ import { Button } from "@labas/ui/components/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
 import { Input } from "@labas/ui/components/input";
 import { toast } from "sonner";
+import { getErrorMessage } from "@/lib/error-utils";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { z } from "zod";
@@ -69,8 +70,8 @@ function RouteComponent() {
       await sendMutation.mutateAsync({ email });
       toast.success("Kode OTP telah dikirim ke email Anda");
       setCountdown(60);
-    } catch (err: any) {
-      toast.error(err.message || "Gagal mengirim OTP");
+    } catch (err: unknown) {
+      toast.error(getErrorMessage(err) || "Gagal mengirim OTP");
     }
   };
 
@@ -105,8 +106,8 @@ function RouteComponent() {
       } else {
         navigate({ to: "/login" });
       }
-    } catch (err: any) {
-      toast.error(err.message || "Kode OTP tidak valid");
+    } catch (err: unknown) {
+      toast.error(getErrorMessage(err) || "Kode OTP tidak valid");
       setOtp(["", "", "", "", "", ""]);
       inputRefs.current[0]?.focus();
     }
@@ -155,6 +156,7 @@ function RouteComponent() {
                 value={digit}
                 onChange={(e) => handleOtpChange(i, e.target.value)}
                 onKeyDown={(e) => handleKeyDown(i, e)}
+                aria-label={`Digit ${i + 1} kode verifikasi`}
                 className="w-12 h-14 text-center text-xl font-bold"
               />
             ))}
diff --git a/bun.lock b/bun.lock
index 2a403d5895e3db12ddf7829f5031d2be306258a7..e79ce1ce42dac9553031903ed8831fb7bacfe5fd 100644
--- a/bun.lock
+++ b/bun.lock
@@ -71,6 +71,7 @@
         "zod": "catalog:",
       },
       "devDependencies": {
+        "@eslint/js": "^10.0.1",
         "@labas/config": "workspace:*",
         "@tanstack/react-query-devtools": "^5.91.1",
         "@tanstack/react-router-devtools": "^1.166.13",
@@ -80,9 +81,11 @@
         "@types/react-dom": "catalog:",
         "@vite-pwa/assets-generator": "^1.0.2",
         "@vitejs/plugin-react": "^6.0.1",
+        "eslint": "^10.4.0",
         "postcss": "^8.5.10",
         "tailwindcss": "^4.2.2",
         "typescript": "catalog:",
+        "typescript-eslint": "^8.59.4",
         "vite": "^8.0.8",
       },
     },
@@ -500,6 +503,22 @@
 
     "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.12", "", { "os": "win32", "cpu": "x64" }, "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA=="],
 
+    "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.9.1", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ=="],
+
+    "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.2", "", {}, "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew=="],
+
+    "@eslint/config-array": ["@eslint/config-array@0.23.5", "", { "dependencies": { "@eslint/object-schema": "^3.0.5", "debug": "^4.3.1", "minimatch": "^10.2.4" } }, "sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA=="],
+
+    "@eslint/config-helpers": ["@eslint/config-helpers@0.6.0", "", { "dependencies": { "@eslint/core": "^1.2.1" } }, "sha512-ii6Bw9jJ2zi2cWA2Z+9/QZ/+3DX6kwaV5Q986D/CdP3Lap3w/pgQZ373FV7byY/i7L4IRH/G43I5dz1ClsCbpA=="],
+
+    "@eslint/core": ["@eslint/core@1.2.1", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ=="],
+
+    "@eslint/js": ["@eslint/js@10.0.1", "", { "peerDependencies": { "eslint": "^10.0.0" }, "optionalPeers": ["eslint"] }, "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA=="],
+
+    "@eslint/object-schema": ["@eslint/object-schema@3.0.5", "", {}, "sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw=="],
+
+    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.7.1", "", { "dependencies": { "@eslint/core": "^1.2.1", "levn": "^0.4.1" } }, "sha512-rZAP3aVgB9ds9KOeUSL+zZ21hPmo8dh6fnIFwRQj5EAZl9gzR7wxYbYXYysAM8CTqGmUGyp2S4kUdV17MnGuWQ=="],
+
     "@fastify/deepmerge": ["@fastify/deepmerge@3.2.1", "", {}, "sha512-N5Oqvltoa2r9z1tbx4xjky0oRR60v+T47Ic4J1ukoVQcptLOrIdRnCSdTGmOmajZuHVKlTnfcmrjyqsGEW1ztA=="],
 
     "@floating-ui/core": ["@floating-ui/core@1.7.5", "", { "dependencies": { "@floating-ui/utils": "^0.2.11" } }, "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ=="],
@@ -522,6 +541,16 @@
 
     "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
 
+    "@humanfs/core": ["@humanfs/core@0.19.2", "", { "dependencies": { "@humanfs/types": "^0.15.0" } }, "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA=="],
+
+    "@humanfs/node": ["@humanfs/node@0.16.8", "", { "dependencies": { "@humanfs/core": "^0.19.2", "@humanfs/types": "^0.15.0", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ=="],
+
+    "@humanfs/types": ["@humanfs/types@0.15.0", "", {}, "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q=="],
+
+    "@humanwhocodes/module-importer": ["@humanwhocodes/module-importer@1.0.1", "", {}, "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="],
+
+    "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
+
     "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.0.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ=="],
 
     "@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.0.4" }, "os": "darwin", "cpu": "x64" }, "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q=="],
@@ -812,10 +841,14 @@
 
     "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
 
+    "@types/esrecurse": ["@types/esrecurse@4.3.1", "", {}, "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw=="],
+
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
     "@types/jsesc": ["@types/jsesc@2.5.1", "", {}, "sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw=="],
 
+    "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
+
     "@types/node": ["@types/node@22.19.17", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-wGdMcf+vPYM6jikpS/qhg6WiqSV/OhG+jeeHT/KlVqxYfD40iYJf9/AE1uQxVWFvU7MipKRkRv8NSHiCGgPr8Q=="],
 
     "@types/nodemailer": ["@types/nodemailer@8.0.0", "", { "dependencies": { "@types/node": "*" } }, "sha512-fyf8jWULsCo0d0BuoQ75i6IeoHs47qcqxWc7yUdUcV0pOZGjUTTOvwdG1PRXUDqN/8A64yQdQdnA2pZgcdi+cA=="],
@@ -844,6 +877,26 @@
 
     "@types/whatwg-url": ["@types/whatwg-url@13.0.0", "", { "dependencies": { "@types/webidl-conversions": "*" } }, "sha512-N8WXpbE6Wgri7KUSvrmQcqrMllKZ9uxkYWMt+mCSGwNc0Hsw9VQTW7ApqI4XNrx6/SaM2QQJCzMPDEXE058s+Q=="],
 
+    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.59.4", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.59.4", "@typescript-eslint/type-utils": "8.59.4", "@typescript-eslint/utils": "8.59.4", "@typescript-eslint/visitor-keys": "8.59.4", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.59.4", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-PegsU+XfyJJNjd4+u/k6f9yTyp0lEXXiPopUNobZcIAUJFGICFLN+sP0Rb3JehVmiij1Ph0dFGYqODoRo/2+6A=="],
+
+    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.59.4", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.59.4", "@typescript-eslint/types": "8.59.4", "@typescript-eslint/typescript-estree": "8.59.4", "@typescript-eslint/visitor-keys": "8.59.4", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-zORHqO/tuhxY1zWuTvMUqddRxpiFJ72xVfcNoWpqdLjs6lfPbuQBJuW4pk+49/uBMy7Ssr4bzgjiKmmDB1UbZQ=="],
+
+    "@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.59.4", "", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.59.4", "@typescript-eslint/types": "^8.59.4", "debug": "^4.4.3" }, "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-Ly00Vu4oAacfDeHp2Zg85ioNG6l8HG+tN1D7J+xTHSxu9y0awYKJ2zH1rFBn8ZSfuGK+7FxK3Cgl3uAz0aZZLg=="],
+
+    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.59.4", "", { "dependencies": { "@typescript-eslint/types": "8.59.4", "@typescript-eslint/visitor-keys": "8.59.4" } }, "sha512-mUeR/3H1WrTAddJrwut8OoPjfauaztMQmRwV5fQTUyNVJCLiUXXe4lGEyYIL2oFDpP7UtgbGJXCt72wT0z2S3Q=="],
+
+    "@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.59.4", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-DLCpnKgD4alVxTBSKulK+gU1KCqOgUXfDRDXh2mZgzokQKa/70ax93I2uVO3m/LLvIAtWZIFoiifudmIqAxpMA=="],
+
+    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.59.4", "", { "dependencies": { "@typescript-eslint/types": "8.59.4", "@typescript-eslint/typescript-estree": "8.59.4", "@typescript-eslint/utils": "8.59.4", "debug": "^4.4.3", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-uonTuPAAKr9XaBGqJ3LjYTh72zy5DyGesljO9gtmk/eFW0W1fRHjnwVYKB35Lm8d5Q5CluEW3gPHjTvZTmgrfA=="],
+
+    "@typescript-eslint/types": ["@typescript-eslint/types@8.59.4", "", {}, "sha512-F1o7WJcCq+bc8dwcO/YsSEOudAH8RDtaOhM6wcAQhcUsFhnWQl81JKy48q1hoxAU0qrzM89+31GYh1515Zde3Q=="],
+
+    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.59.4", "", { "dependencies": { "@typescript-eslint/project-service": "8.59.4", "@typescript-eslint/tsconfig-utils": "8.59.4", "@typescript-eslint/types": "8.59.4", "@typescript-eslint/visitor-keys": "8.59.4", "debug": "^4.4.3", "minimatch": "^10.2.2", "semver": "^7.7.3", "tinyglobby": "^0.2.15", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.1.0" } }, "sha512-F+RuOmcDXo4+TPdfd/TCLS3m2nw8gE9XXyZLrA3JBfaA5tz9TtdkyD3YJFmPxulyc2cKbEok/CvFE3MgSLWnag=="],
+
+    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.59.4", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.59.4", "@typescript-eslint/types": "8.59.4", "@typescript-eslint/typescript-estree": "8.59.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-cYXeNAUsG4lJo5dbc1FcKm+JwIWrj1/UpTORsC6tGMjEZ81DYcvIr9/ueikhMa/Y/gDQYGp+YX9/xQrXje5BJw=="],
+
+    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.59.4", "", { "dependencies": { "@typescript-eslint/types": "8.59.4", "eslint-visitor-keys": "^5.0.0" } }, "sha512-U3gxVaDVnuZKhSspW/MzMxE1kq7zOdc072FcSNoqA1I9p8HyKbBFfEHoWckBAMgNMph4MamwS5iTVzFmrnt8TQ=="],
+
     "@vite-pwa/assets-generator": ["@vite-pwa/assets-generator@1.0.2", "", { "dependencies": { "cac": "^6.7.14", "colorette": "^2.0.20", "consola": "^3.4.2", "sharp": "^0.33.5", "sharp-ico": "^0.1.5", "unconfig": "^7.3.1" }, "bin": { "pwa-assets-generator": "bin/pwa-assets-generator.mjs" } }, "sha512-MCbrb508JZHqe7bUibmZj/lyojdhLRnfkmyXnkrCM2zVrjTgL89U8UEfInpKTvPeTnxsw2hmyZxnhsdNR6yhwg=="],
 
     "@vitejs/plugin-react": ["@vitejs/plugin-react@6.0.1", "", { "dependencies": { "@rolldown/pluginutils": "1.0.0-rc.7" }, "peerDependencies": { "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0", "babel-plugin-react-compiler": "^1.0.0", "vite": "^8.0.0" }, "optionalPeers": ["@rolldown/plugin-babel", "babel-plugin-react-compiler"] }, "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ=="],
@@ -852,9 +905,11 @@
 
     "acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
 
+    "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
+
     "agent-base": ["agent-base@7.1.4", "", {}, "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ=="],
 
-    "ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="],
+    "ajv": ["ajv@6.15.0", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw=="],
 
     "ajv-formats": ["ajv-formats@3.0.1", "", { "dependencies": { "ajv": "^8.0.0" } }, "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ=="],
 
@@ -1042,6 +1097,8 @@
 
     "dedent": ["dedent@1.7.2", "", { "peerDependencies": { "babel-plugin-macros": "^3.1.0" }, "optionalPeers": ["babel-plugin-macros"] }, "sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA=="],
 
+    "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
+
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
 
     "default-browser": ["default-browser@5.5.0", "", { "dependencies": { "bundle-name": "^4.1.0", "default-browser-id": "^5.0.0" } }, "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw=="],
@@ -1116,8 +1173,24 @@
 
     "escape-html": ["escape-html@1.0.3", "", {}, "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="],
 
+    "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
+
+    "eslint": ["eslint@10.4.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", "@eslint/config-array": "^0.23.5", "@eslint/config-helpers": "^0.6.0", "@eslint/core": "^1.2.1", "@eslint/plugin-kit": "^0.7.1", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.14.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^9.1.2", "eslint-visitor-keys": "^5.0.1", "espree": "^11.2.0", "esquery": "^1.7.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "minimatch": "^10.2.4", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-loXy6bWOoP3EP6JA7jo6p5jMpBJmHmsNZM5SFRHLdh1MGOPurMnNBj4ZlAbaqUAaQWbCr7jHV4P7gzAyryZWkQ=="],
+
+    "eslint-scope": ["eslint-scope@9.1.2", "", { "dependencies": { "@types/esrecurse": "^4.3.1", "@types/estree": "^1.0.8", "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ=="],
+
+    "eslint-visitor-keys": ["eslint-visitor-keys@5.0.1", "", {}, "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA=="],
+
+    "espree": ["espree@11.2.0", "", { "dependencies": { "acorn": "^8.16.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^5.0.1" } }, "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw=="],
+
     "esprima": ["esprima@4.0.1", "", { "bin": { "esparse": "./bin/esparse.js", "esvalidate": "./bin/esvalidate.js" } }, "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="],
 
+    "esquery": ["esquery@1.7.0", "", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g=="],
+
+    "esrecurse": ["esrecurse@4.3.0", "", { "dependencies": { "estraverse": "^5.2.0" } }, "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="],
+
+    "estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
+
     "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
 
     "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
@@ -1142,6 +1215,8 @@
 
     "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
 
+    "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
+
     "fast-string-truncated-width": ["fast-string-truncated-width@3.0.3", "", {}, "sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g=="],
 
     "fast-string-width": ["fast-string-width@3.0.2", "", { "dependencies": { "fast-string-truncated-width": "^3.0.2" } }, "sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg=="],
@@ -1160,14 +1235,22 @@
 
     "figures": ["figures@6.1.0", "", { "dependencies": { "is-unicode-supported": "^2.0.0" } }, "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg=="],
 
+    "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
+
     "filelist": ["filelist@1.0.6", "", { "dependencies": { "minimatch": "^5.0.1" } }, "sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA=="],
 
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
 
     "finalhandler": ["finalhandler@2.1.1", "", { "dependencies": { "debug": "^4.4.0", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "on-finished": "^2.4.1", "parseurl": "^1.3.3", "statuses": "^2.0.1" } }, "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA=="],
 
+    "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
+
     "flag-icons": ["flag-icons@7.5.0", "", {}, "sha512-kd+MNXviFIg5hijH766tt+3x76ele1AXlo4zDdCxIvqWZhKt4T83bOtxUOOMlTx/EcFdUMH5yvQgYlFh1EqqFg=="],
 
+    "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],
+
+    "flatted": ["flatted@3.4.2", "", {}, "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA=="],
+
     "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=="],
@@ -1218,7 +1301,7 @@
 
     "glob": ["glob@11.1.0", "", { "dependencies": { "foreground-child": "^3.3.1", "jackspeak": "^4.1.1", "minimatch": "^10.1.1", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^2.0.0" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw=="],
 
-    "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
 
     "globalthis": ["globalthis@1.0.4", "", { "dependencies": { "define-properties": "^1.2.1", "gopd": "^1.0.1" } }, "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ=="],
 
@@ -1268,6 +1351,8 @@
 
     "import-without-cache": ["import-without-cache@0.3.3", "", {}, "sha512-bDxwDdF04gm550DfZHgffvlX+9kUlcz32UD0AeBTmVPFiWkrexF2XVmiuFFbDhiFuP8fQkrkvI2KdSNPYWAXkQ=="],
 
+    "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
+
     "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
 
     "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=="],
@@ -1384,18 +1469,24 @@
 
     "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
 
+    "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],
+
     "json-parse-even-better-errors": ["json-parse-even-better-errors@2.3.1", "", {}, "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="],
 
-    "json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
+    "json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
 
     "json-schema-typed": ["json-schema-typed@8.0.2", "", {}, "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA=="],
 
+    "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],
+
     "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
 
     "jsonfile": ["jsonfile@6.2.1", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q=="],
 
     "jsonpointer": ["jsonpointer@5.0.1", "", {}, "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="],
 
+    "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
+
     "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
 
     "kuler": ["kuler@2.0.0", "", {}, "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A=="],
@@ -1404,6 +1495,8 @@
 
     "leven": ["leven@3.1.0", "", {}, "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="],
 
+    "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
+
     "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
 
     "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
@@ -1430,6 +1523,8 @@
 
     "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
 
+    "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
+
     "lodash": ["lodash@4.18.1", "", {}, "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q=="],
 
     "lodash.debounce": ["lodash.debounce@4.0.8", "", {}, "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="],
@@ -1498,6 +1593,8 @@
 
     "nanostores": ["nanostores@1.3.0", "", {}, "sha512-XPUa/jz+P1oJvN9VBxw4L9MtdFfaH3DAryqPssqhb2kXjmb9npz0dly6rCsgFWOPr4Yg9mTfM3MDZgZZ+7A3lA=="],
 
+    "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
+
     "negotiator": ["negotiator@1.0.0", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="],
 
     "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=="],
@@ -1540,12 +1637,18 @@
 
     "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=="],
 
+    "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
+
     "ora": ["ora@8.2.0", "", { "dependencies": { "chalk": "^5.3.0", "cli-cursor": "^5.0.0", "cli-spinners": "^2.9.2", "is-interactive": "^2.0.0", "is-unicode-supported": "^2.0.0", "log-symbols": "^6.0.0", "stdin-discarder": "^0.2.2", "string-width": "^7.2.0", "strip-ansi": "^7.1.0" } }, "sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw=="],
 
     "outvariant": ["outvariant@1.4.3", "", {}, "sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA=="],
 
     "own-keys": ["own-keys@1.0.1", "", { "dependencies": { "get-intrinsic": "^1.2.6", "object-keys": "^1.1.1", "safe-push-apply": "^1.0.0" } }, "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg=="],
 
+    "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
+
+    "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
+
     "package-json-from-dist": ["package-json-from-dist@1.0.1", "", {}, "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="],
 
     "package-manager-detector": ["package-manager-detector@1.6.0", "", {}, "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA=="],
@@ -1560,6 +1663,8 @@
 
     "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
 
+    "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
+
     "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
 
     "path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
@@ -1608,6 +1713,8 @@
 
     "powershell-utils": ["powershell-utils@0.1.0", "", {}, "sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A=="],
 
+    "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
+
     "prettier": ["prettier@3.8.3", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw=="],
 
     "pretty-bytes": ["pretty-bytes@6.1.1", "", {}, "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ=="],
@@ -1866,6 +1973,8 @@
 
     "triple-beam": ["triple-beam@1.4.1", "", {}, "sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg=="],
 
+    "ts-api-utils": ["ts-api-utils@2.5.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA=="],
+
     "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=="],
@@ -1880,6 +1989,8 @@
 
     "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
 
+    "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
+
     "type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="],
 
     "type-is": ["type-is@2.0.1", "", { "dependencies": { "content-type": "^1.0.5", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw=="],
@@ -1894,6 +2005,8 @@
 
     "typescript": ["typescript@6.0.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw=="],
 
+    "typescript-eslint": ["typescript-eslint@8.59.4", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.59.4", "@typescript-eslint/parser": "8.59.4", "@typescript-eslint/typescript-estree": "8.59.4", "@typescript-eslint/utils": "8.59.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-Rw6+44QNFaXtgHSjPy+Kw8hrJniMYzR85E9yLmOLcfZ91/rz+JXQbDTCmc6ccxMPY6K6PgAq26f0JCBfR7LIPQ=="],
+
     "unbox-primitive": ["unbox-primitive@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "has-bigints": "^1.0.2", "has-symbols": "^1.1.0", "which-boxed-primitive": "^1.1.1" } }, "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw=="],
 
     "unconfig": ["unconfig@7.5.0", "", { "dependencies": { "@quansync/fs": "^1.0.0", "defu": "^6.1.4", "jiti": "^2.6.1", "quansync": "^1.0.0", "unconfig-core": "7.5.0" } }, "sha512-oi8Qy2JV4D3UQ0PsopR28CzdQ3S/5A1zwsUwp/rosSbfhJ5z7b90bIyTwi/F7hCLD4SGcZVjDzd4XoUQcEanvA=="],
@@ -1928,6 +2041,8 @@
 
     "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
 
+    "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
+
     "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
@@ -1966,6 +2081,8 @@
 
     "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=="],
 
+    "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
+
     "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=="],
@@ -2014,6 +2131,8 @@
 
     "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
 
+    "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
+
     "yocto-spinner": ["yocto-spinner@1.1.0", "", { "dependencies": { "yoctocolors": "^2.1.1" } }, "sha512-/BY0AUXnS7IKO354uLLA2eRcWiqDifEbd6unXCsOxkFDAkhgUL3PH9X2bFoaU0YchnDXsF+iKleeTLJGckbXfA=="],
 
     "yoctocolors": ["yoctocolors@2.1.2", "", {}, "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug=="],
@@ -2022,6 +2141,8 @@
 
     "zod-to-json-schema": ["zod-to-json-schema@3.25.2", "", { "peerDependencies": { "zod": "^3.25.28 || ^4" } }, "sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA=="],
 
+    "@apideck/better-ajv-errors/ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="],
+
     "@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
 
     "@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
@@ -2048,6 +2169,10 @@
 
     "@esbuild-kit/core-utils/esbuild": ["esbuild@0.18.20", "", { "optionalDependencies": { "@esbuild/android-arm": "0.18.20", "@esbuild/android-arm64": "0.18.20", "@esbuild/android-x64": "0.18.20", "@esbuild/darwin-arm64": "0.18.20", "@esbuild/darwin-x64": "0.18.20", "@esbuild/freebsd-arm64": "0.18.20", "@esbuild/freebsd-x64": "0.18.20", "@esbuild/linux-arm": "0.18.20", "@esbuild/linux-arm64": "0.18.20", "@esbuild/linux-ia32": "0.18.20", "@esbuild/linux-loong64": "0.18.20", "@esbuild/linux-mips64el": "0.18.20", "@esbuild/linux-ppc64": "0.18.20", "@esbuild/linux-riscv64": "0.18.20", "@esbuild/linux-s390x": "0.18.20", "@esbuild/linux-x64": "0.18.20", "@esbuild/netbsd-x64": "0.18.20", "@esbuild/openbsd-x64": "0.18.20", "@esbuild/sunos-x64": "0.18.20", "@esbuild/win32-arm64": "0.18.20", "@esbuild/win32-ia32": "0.18.20", "@esbuild/win32-x64": "0.18.20" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA=="],
 
+    "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
+
+    "@modelcontextprotocol/sdk/ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="],
+
     "@mswjs/interceptors/@open-draft/deferred-promise": ["@open-draft/deferred-promise@2.2.0", "", {}, "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA=="],
 
     "@noble/curves/@noble/hashes": ["@noble/hashes@1.8.0", "", {}, "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="],
@@ -2084,14 +2209,20 @@
 
     "@tanstack/router-plugin/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
+    "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
+
     "@vite-pwa/assets-generator/cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],
 
+    "ajv-formats/ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="],
+
     "anymatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
     "ast-kit/@babel/parser": ["@babel/parser@8.0.0-rc.3", "", { "dependencies": { "@babel/types": "^8.0.0-rc.3" }, "bin": "./bin/babel-parser.js" }, "sha512-B20dvP3MfNc/XS5KKCHy/oyWl5IA6Cn9YjXRdDlCjNmUFrjvLXMNUfQq/QUy9fnG2gYkKKcrto2YaF9B32ToOQ=="],
 
     "babel-plugin-polyfill-corejs2/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
+    "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+
     "cliui/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
     "cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
@@ -2106,6 +2237,8 @@
 
     "express/cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
 
+    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+
     "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=="],
@@ -2148,6 +2281,8 @@
 
     "web/lucide-react": ["lucide-react@1.11.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-UOhjdztXCgdBReRcIhsvz2siIBogfv/lhJEIViCpLt924dO+GDms9T7DNoucI23s6kEPpe988m5N0D2ajnzb2g=="],
 
+    "workbox-build/ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="],
+
     "workbox-build/fs-extra": ["fs-extra@9.1.0", "", { "dependencies": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ=="],
 
     "workbox-build/pretty-bytes": ["pretty-bytes@5.6.0", "", {}, "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg=="],
@@ -2162,6 +2297,8 @@
 
     "yargs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
+    "@apideck/better-ajv-errors/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
+
     "@dotenvx/dotenvx/execa/get-stream": ["get-stream@6.0.1", "", {}, "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="],
 
     "@dotenvx/dotenvx/execa/human-signals": ["human-signals@2.1.0", "", {}, "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="],
@@ -2216,12 +2353,16 @@
 
     "@esbuild-kit/core-utils/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.18.20", "", { "os": "win32", "cpu": "x64" }, "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ=="],
 
+    "@modelcontextprotocol/sdk/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
+
     "@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=="],
 
+    "ajv-formats/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
+
     "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=="],
@@ -2286,6 +2427,8 @@
 
     "tsx/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.7", "", { "os": "win32", "cpu": "x64" }, "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg=="],
 
+    "workbox-build/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
+
     "workbox-build/source-map/whatwg-url": ["whatwg-url@7.1.0", "", { "dependencies": { "lodash.sortby": "^4.7.0", "tr46": "^1.0.1", "webidl-conversions": "^4.0.2" } }, "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg=="],
 
     "workbox-build/stringify-object/is-obj": ["is-obj@1.0.1", "", {}, "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg=="],
diff --git a/packages/api/src/routers/admin.ts b/packages/api/src/routers/admin.ts
index f6383f02dd23d6e9c0b476a1d98f5dfad516475c..155ca2cf376dba44e712aeeb01818918a365bbae 100644
--- a/packages/api/src/routers/admin.ts
+++ b/packages/api/src/routers/admin.ts
@@ -251,8 +251,25 @@ export const adminRouter = router({
 
   listFeatured: protectedProcedure.query(async () => {
     const packages = await db
-      .select()
+      .select({
+        id: schema.testPackage.id,
+        title: schema.testPackage.title,
+        description: schema.testPackage.description,
+        examTypeId: schema.testPackage.examTypeId,
+        creatorUserId: schema.testPackage.creatorUserId,
+        isPublic: schema.testPackage.isPublic,
+        isFeatured: schema.testPackage.isFeatured,
+        totalQuestions: schema.testPackage.totalQuestions,
+        totalSections: schema.testPackage.totalSections,
+        estimatedDurationMin: schema.testPackage.estimatedDurationMin,
+        usageCount: schema.testPackage.usageCount,
+        avgRating: schema.testPackage.avgRating,
+        createdAt: schema.testPackage.createdAt,
+        updatedAt: schema.testPackage.updatedAt,
+        examTypeName: schema.examType.name,
+      })
       .from(schema.testPackage)
+      .leftJoin(schema.examType, eq(schema.testPackage.examTypeId, schema.examType.id))
       .where(eq(schema.testPackage.isFeatured, true))
       .orderBy(desc(schema.testPackage.updatedAt));
 
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
index c2b6b2345b14d329be0b3040e5d646b83c6f735e..d46dd1f73297767363bb6bae39ac65ff0b4a8ad7 100644
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -24,9 +24,8 @@ const buttonVariants = cva(
           "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         xs: "h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xl: "h-11 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xl: "h-11 gap-1.5 px-3 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
         icon: "size-8",
         "icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-7 rounded-none",
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..da1c632bbb224ec6d3e31bf0b3acd634ab234c9c
--- /dev/null
+++ b/packages/ui/src/components/dialog.tsx
@@ -0,0 +1,154 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@labas/ui/lib/utils"
+import { Button } from "@labas/ui/components/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/40 backdrop-blur-sm duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius-xl)] bg-[var(--warm-cream)] p-6 md:p-8 text-[var(--clay-black)] ring-1 ring-[var(--oat-border)] border-2 border-[var(--oat-border)] shadow-xl duration-100 outline-none sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-4 right-4 w-10 h-10 rounded-full bg-[var(--oat-light)] hover:bg-[var(--oat-border)] flex items-center justify-center"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Tutup dialog</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 3c8413219d50296fb432b0cd89911fa28b31b701..6b5384a5a561a000a9462aa42a1f989345e3f24a 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -39,11 +39,11 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-full items-center justify-between gap-2 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] py-2.5 px-3 text-sm transition-all outline-none select-none cursor-pointer clay-shadow",
-        "hover:bg-[var(--oat-light)] hover:border-[var(--oat-border)]",
-        "focus-visible:ring-2 focus-visible:ring-[var(--clay-black)] focus-visible:ring-offset-1",
+        "flex w-full items-center justify-between gap-2 rounded-[var(--radius-lg)] border-2 border-border bg-card py-2.5 px-3 text-sm transition-all outline-none select-none cursor-pointer clay-shadow",
+        "hover:bg-muted hover:border-border",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        "data-placeholder:text-[var(--warm-charcoal)]",
+        "data-placeholder:text-muted-foreground",
         "data-[size=default]:h-11 data-[size=sm]:h-9",
         "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5",
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -54,7 +54,7 @@ function SelectTrigger({
       {children}
       <SelectPrimitive.Icon
         render={
-          <ChevronDownIcon className="pointer-events-none size-4 text-[var(--warm-charcoal)]" />
+          <ChevronDownIcon             className="pointer-events-none size-4 text-muted-foreground" />
         }
       />
     </SelectPrimitive.Trigger>
@@ -89,7 +89,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] p-1 shadow-lg clay-shadow",
+            "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) rounded-[var(--radius-lg)] border-2 border-border bg-popover p-1 shadow-lg clay-shadow",
             "data-[align-trigger=true]:animate-none",
             "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
             "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
@@ -114,7 +114,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
-      className={cn("px-2 py-1.5 text-xs font-semibold text-[var(--warm-charcoal)] uppercase tracking-wider", className)}
+      className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", className)}
       {...props}
     />
   )
@@ -129,9 +129,9 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius-md)] py-2 pr-8 pl-2.5 text-sm text-[var(--clay-black)] transition-colors outline-hidden select-none",
-        "hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)]",
-        "focus:bg-[var(--matcha-300)] focus:text-[var(--matcha-800)]",
+        "relative flex w-full cursor-default items-center gap-2 rounded-[var(--radius-md)] py-2 pr-8 pl-2.5 text-sm text-foreground transition-colors outline-hidden select-none",
+        "hover:bg-success/30 hover:text-success",
+        "focus:bg-success/30 focus:text-success",
         "data-disabled:pointer-events-none data-disabled:opacity-50",
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
@@ -146,7 +146,7 @@ function SelectItem({
           <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
         }
       >
-        <CheckIcon className="pointer-events-none size-4 text-[var(--matcha-600)]" />
+        <CheckIcon className="pointer-events-none size-4 text-primary" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   )
@@ -159,7 +159,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("pointer-events-none my-1 h-px bg-[var(--oat-border)]", className)}
+        className={cn("pointer-events-none my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -172,8 +172,8 @@ function SelectScrollUpButton({
   return (
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
-      className={cn(
-        "top-0 z-10 flex w-full cursor-default items-center justify-center py-1 text-[var(--warm-charcoal)] [&_svg:not([class*='size-'])]:size-4",
+        className={cn(
+          "top-0 z-10 flex w-full cursor-default items-center justify-center py-1 text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -190,8 +190,8 @@ function SelectScrollDownButton({
   return (
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"
-      className={cn(
-        "bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 text-[var(--warm-charcoal)] [&_svg:not([class*='size-'])]:size-4",
+        className={cn(
+          "bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 5d942fb9fdd6e399c3b5191c5ed59dd3a78dbe30..b3597e256b62e53518635a7cf1906af7913fda37 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -63,9 +63,9 @@
   --card-foreground: var(--clay-black);
   --popover: var(--pure-white);
   --popover-foreground: var(--clay-black);
-  --primary: var(--clay-black);
+  --primary: var(--matcha-600);
   --primary-foreground: var(--pure-white);
-  --secondary: var(--matcha-600);
+  --secondary: var(--clay-black);
   --secondary-foreground: var(--pure-white);
   --muted: var(--oat-light);
   --muted-foreground: var(--warm-silver);
@@ -73,6 +73,12 @@
   --accent-foreground: var(--clay-black);
   --destructive: var(--pomegranate-400);
   --destructive-foreground: var(--pure-white);
+  --success: var(--matcha-500);
+  --success-foreground: var(--pure-white);
+  --warning: var(--lemon-500);
+  --warning-foreground: var(--clay-black);
+  --info: var(--slushie-500);
+  --info-foreground: var(--clay-black);
   --border: var(--oat-border);
   --input: var(--oat-border);
   --ring: var(--focus-ring);
@@ -144,15 +150,21 @@
   --card-foreground: var(--pure-white);
   --popover: #2a2927;
   --popover-foreground: var(--pure-white);
-  --primary: var(--pure-white);
+  --primary: var(--matcha-300);
   --primary-foreground: var(--clay-black);
-  --secondary: var(--matcha-300);
+  --secondary: var(--pure-white);
   --secondary-foreground: var(--clay-black);
   --muted: #3a3937;
   --muted-foreground: var(--warm-silver);
   --border: #4a4947;
   --input: #4a4947;
   --ring: var(--slushie-500);
+  --success: var(--matcha-300);
+  --success-foreground: var(--clay-black);
+  --warning: var(--lemon-400);
+  --warning-foreground: var(--clay-black);
+  --info: var(--slushie-500);
+  --info-foreground: var(--pure-white);
   --surface: #1a1917;
   --surface-container: #2a2927;
   --surface-container-low: #222120;
@@ -195,6 +207,12 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);