Add initial project structure with design and product documentation, API key management, sidebar navigation, and route setup

.gitignore

@@ -1,5 +1,8 @@
 # Dependencies
 node_modules
+.agents
+.claude
+references
 .pnp
 .pnp.js
 

DESIGN.md

@@ -0,0 +1,304 @@
+# Design System Inspired by Clay
+
+## 1. Visual Theme & Atmosphere
+
+Clay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like flavors at a juice bar, not colors in an enterprise UI kit.
+
+The typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`) that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.
+
+What makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), change background to a contrasting swatch color, and cast a hard offset shadow (`rgb(0,0,0) -7px 7px`). This playful hover behavior — where a button literally tilts and jumps on interaction — creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24px–40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.
+
+**Key Characteristics:**
+- Warm cream canvas (`#faf9f7`) with oat-toned borders (`#dad4c8`) — artisanal, not clinical
+- Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit
+- Roobert font with 5 OpenType stylistic sets — quirky geometric character
+- Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow
+- Space Mono for code and technical labels
+- Generous border radius: 24px cards, 40px sections, 1584px pills
+- Mixed border styles: solid + dashed in the same interface
+- Multi-layer shadow with inset highlight: `0px 1px 1px` + `-1px inset` + `-0.5px`
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Clay Black** (`#000000`): Text, headings, pricing card text, `--_theme--pricing-cards---text`
+- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text
+- **Warm Cream** (`#faf9f7`): Page background — the warm, paper-like canvas
+
+### Swatch Palette — Named Colors
+
+**Matcha (Green)**
+- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`, light green accent
+- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`, mid green
+- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`, deep green for dark sections
+
+**Slushie (Cyan)**
+- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`, bright cyan accent
+- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`, deep teal
+
+**Lemon (Gold)**
+- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`, warm pale gold
+- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`, primary gold
+- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`, deep amber
+- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`, dark amber
+
+**Ube (Purple)**
+- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`, soft lavender
+- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`, deep purple
+- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`, darkest purple
+
+**Pomegranate (Pink/Red)**
+- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`, warm coral-pink
+
+**Blueberry (Navy Blue)**
+- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`, deep navy
+
+### Neutral Scale (Warm)
+- **Warm Silver** (`#9f9b93`): Secondary/muted text, footer links
+- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links
+- **Dark Charcoal** (`#333333`): Link text on light backgrounds
+
+### Surface & Border
+- **Oat Border** (`#dad4c8`): Primary border — warm, cream-toned structural lines
+- **Oat Light** (`#eee9df`): Secondary lighter border
+- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections
+- **Dark Border** (`#525a69`): Border on dark sections
+- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)
+
+### Badges
+- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface
+- **Badge Blue Text** (`#3859f9`): Vivid blue badge text
+- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator
+
+### Shadows
+- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): Multi-layer with inset highlight — the signature
+- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state — playful hard shadow
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary**: `Roobert`, fallback: `Arial`
+- **Monospace**: `Space Mono`
+- **OpenType Features**: `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on all Roobert text (display uses all 5; body/UI uses `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`)
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |
+| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |
+| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |
+| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |
+| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |
+| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |
+| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |
+| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |
+| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |
+| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20–1.40 | -0.16px to -0.32px | 4–5 stylistic sets |
+| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |
+| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |
+| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |
+| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |
+| Caption | Roobert | 14px (0.88rem) | 400 | 1.50–1.60 | -0.14px | 4 stylistic sets |
+| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |
+| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |
+| Badge | Roobert | 9.6px | 600 | — | — | Pill badges |
+
+### Principles
+- **Five stylistic sets as identity**: The combination of `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on Roobert creates a distinctive typographic personality. `ss01` is reserved for headings and emphasis — body text omits it, creating a subtle hierarchy through glyph variation.
+- **Aggressive display compression**: -3.2px at 80px, -2.4px at 60px — the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.
+- **Weight 600 for headings, 500 for UI, 400 for body**: Clean three-tier system where each weight has a strict role.
+- **Uppercase labels with positive tracking**: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Transparent with Hover Animation)**
+- Background: transparent (`rgba(239, 241, 243, 0)`)
+- Text: `#000000`
+- Padding: 6.4px 12.8px
+- Border: none (or `1px solid #717989` for outlined variant)
+- Hover: background shifts to swatch color (e.g., `#434346`), text to white, `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`
+- Focus: `rgb(20, 110, 245) solid 2px` outline
+
+**White Solid**
+- Background: `#ffffff`
+- Text: `#000000`
+- Padding: 6.4px
+- Hover: oat-200 swatch color, animated rotation + shadow
+- Use: Primary CTA on colored sections
+
+**Ghost Outlined**
+- Background: transparent
+- Text: `#000000`
+- Padding: 8px
+- Border: `1px solid #717989`
+- Radius: 4px
+- Hover: dragonfruit swatch color, white text, animated rotation
+
+### Cards & Containers
+- Background: `#ffffff` on cream canvas
+- Border: `1px solid #dad4c8` (warm oat) or `1px dashed #dad4c8`
+- Radius: 12px (standard cards), 24px (feature cards/images), 40px (section containers/footer)
+- Shadow: `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`
+- Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)
+
+### Inputs & Forms
+- Text: `#000000`
+- Border: `1px solid #717989`
+- Radius: 4px
+- Focus: `rgb(20, 110, 245) solid 2px` outline
+
+### Navigation
+- Sticky top nav on cream background
+- Roobert 15px weight 500 for nav links
+- Clay logo left-aligned
+- CTA buttons right-aligned with pill radius
+- Border bottom: `1px solid #dad4c8`
+- Mobile: hamburger collapse at 767px
+
+### Image Treatment
+- Product screenshots in white cards with oat borders
+- Colorful illustrated sections with swatch background colors
+- 8px–24px radius on images
+- Full-width colorful section backgrounds
+
+### Distinctive Components
+
+**Swatch Color Sections**
+- Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)
+- White text on dark swatches, black text on light swatches
+- Each section tells a distinct product story through its color
+
+**Playful Hover Buttons**
+- Rotate -8deg + translate upward on hover
+- Hard offset shadow (`-7px 7px`) instead of soft blur
+- Background transitions to contrasting swatch color
+- Creates a physical, toy-like interaction quality
+
+**Dashed Border Elements**
+- Dashed borders (`1px dashed #dad4c8`) alongside solid borders
+- Used for secondary containers and decorative elements
+- Adds a hand-drawn, craft-like quality
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px
+
+### Grid & Container
+- Max content width centered
+- Feature sections alternate between white cards and colorful swatch backgrounds
+- Card grids: 2–3 columns on desktop
+- Full-width colorful sections break the grid
+- Footer with generous 40px radius container
+
+### Whitespace Philosophy
+- **Warm, generous breathing**: The cream background provides a warm rest between content blocks. Spacing is generous but not austere — it feels inviting, like a well-set table.
+- **Color as spatial rhythm**: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own "room."
+- **Craft-like density inside cards**: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.
+
+### Border Radius Scale
+- Sharp (4px): Ghost buttons, inputs
+- Standard (8px): Small cards, images, links
+- Badge (11px): Tag badges
+- Card (12px): Standard cards, buttons
+- Feature (24px): Feature cards, images, panels
+- Section (40px): Large sections, footer, containers
+- Pill (1584px): CTAs, pill-shaped buttons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, cream canvas | Page background |
+| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons — multi-layer with inset highlight |
+| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state — playful hard offset shadow |
+| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |
+
+**Shadow Philosophy**: Clay's shadow system is uniquely three-layered: a downward cast (`0px 1px 1px`), an upward inset highlight (`0px -1px 1px inset`), and a subtle edge (`0px -0.5px 1px`). This creates a "pressed into clay" quality where elements feel both raised AND embedded — like a clay tablet where content is stamped into the surface. The hover hard shadow (`-7px 7px`) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.
+
+### Decorative Depth
+- Full-width swatch-colored sections create dramatic depth through color contrast
+- Dashed borders add visual texture alongside solid borders
+- Product illustrations with warm, organic art style
+
+## 7. Do's and Don'ts
+
+### Do
+- Use warm cream (`#faf9f7`) as the page background — the warmth is the identity
+- Apply all 5 OpenType stylistic sets on Roobert headings: `"ss01", "ss03", "ss10", "ss11", "ss12"`
+- Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds
+- Apply the playful hover animation: `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `-7px 7px`
+- Use warm oat borders (`#dad4c8`) — not neutral gray
+- Mix solid and dashed borders for visual variety
+- Use generous radius: 24px for cards, 40px for sections
+- Use weight 600 exclusively for headings, 500 for UI, 400 for body
+
+### Don't
+- Don't use cool gray backgrounds — the warm cream (`#faf9f7`) is non-negotiable
+- Don't use neutral gray borders (`#ccc`, `#ddd`) — always use the warm oat tones
+- Don't mix more than 2 swatch colors in the same section
+- Don't skip the OpenType stylistic sets — they define Roobert's character
+- Don't use subtle hover effects — the rotation + hard shadow is the signature interaction
+- Don't use small border radius (<12px) on feature cards — the generous rounding is structural
+- Don't use standard shadows (blur-based) — Clay uses hard offset and multi-layer inset
+- Don't forget the uppercase labels with 1.08px tracking — they're the wayfinding system
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <479px | Single column, tight padding |
+| Mobile | 479–767px | Standard mobile, stacked layout |
+| Tablet | 768–991px | 2-column grids, condensed nav |
+| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |
+
+### Touch Targets
+- Buttons: minimum 6.4px + 12.8px padding for adequate touch area
+- Nav links: 15px font with generous spacing
+- Mobile: full-width buttons for easy tapping
+
+### Collapsing Strategy
+- Hero: 80px → 60px → smaller display text
+- Navigation: horizontal → hamburger at 767px
+- Feature sections: multi-column → stacked
+- Colorful sections: maintain full-width but compress padding
+- Card grids: 3-column → 2-column → single column
+
+### Image Behavior
+- Product screenshots scale proportionally
+- Colorful section illustrations adapt to viewport width
+- Rounded corners maintained across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Warm Cream (`#faf9f7`)
+- Text: Clay Black (`#000000`)
+- Secondary text: Warm Silver (`#9f9b93`)
+- Border: Oat Border (`#dad4c8`)
+- Green accent: Matcha 600 (`#078a52`)
+- Cyan accent: Slushie 500 (`#3bd3fd`)
+- Gold accent: Lemon 500 (`#fbbd41`)
+- Purple accent: Ube 800 (`#43089f`)
+- Pink accent: Pomegranate 400 (`#fc7981`)
+
+### Example Component Prompts
+- "Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989)."
+- "Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius."
+- "Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px."
+- "Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px."
+- "Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'."
+
+### Iteration Guide
+1. Start with warm cream (#faf9f7) — never cool white
+2. Swatch colors are for full sections, not small accents — go bold with matcha, slushie, ube
+3. Oat borders (#dad4c8) everywhere — dashed variants for decoration
+4. OpenType stylistic sets are mandatory — they make Roobert look like Roobert
+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

PRD.md

@@ -0,0 +1,331 @@
+# PRD: Labas — AI-Powered Multi-Language Test Practice Platform
+
+## Problem Statement
+
+Pelajar Indonesia yang mempersiapkan ujian bahasa (IELTS, TOEFL, JLPT, HSK, Goethe) kesulitan menemukan soal latihan reading comprehension yang:
+- **Bervariasi** dan mencakup format soal spesifik tiap ujian (synonym, grammar-in-context, cloze, matching headings, author's view, dll.)
+- **Terjangkau** — platform existing biasanya berbayar dan tidak fleksibel
+- **Relevan** dengan kelemahan personal — tidak ada analisis per-section yang memberi rekomendasi perbaikan
+- **Terbuka** — tidak ada platform open-source "bring your own key" untuk generasi soal AI
+
+## Solution
+
+**Labas** adalah platform open-source yang menyediakan:
+1. **AI Question Generator** — generate soal reading comprehension pakai OpenAI-compatible API (BYOK). Dua mode: quick (single prompt) dan agentic (multi-step validation)
+2. **Question Bank** — kumpulan soal publik/privat yang bisa di-browse, di-rating, dan digunakan ulang
+3. **Package Builder** — susun paket soal dari kombinasi soal existing + AI-generated, dengan visibility publik/privat
+4. **Package Combiner** — gabung section dari berbagai paket tanpa perlu generate ulang
+5. **Exam Interface** — antarmuka ujian side-by-side (teks + soal), timer, auto-grade
+6. **Deep Analytics** — evaluasi per-section, identifikasi kelemahan, rekomendasi paket soal untuk perbaikan
+
+Target pengguna: pelajar Indonesia yang mempersiapkan IELTS, TOEFL, JLPT, HSK, dan ujian bahasa Jerman.
+
+## User Stories
+
+### AI Generation
+1. Sebagai pelajar, saya ingin generate soal reading comprehension dengan AI menggunakan API key saya sendiri, agar saya bisa latihan tanpa batasan platform
+2. Sebagai pelajar, saya ingin memilih jenis ujian (IELTS/TOEFL/JLPT/HSK/German), section (Reading/Writing), dan tingkat kesulitan sebelum generate, agar soal sesuai kebutuhan saya
+3. Sebagai pelajar, saya ingin memilih format soal (multiple choice, true/false, matching, fill-in-blank, synonym, dll.) yang akan digenerate, agar latihan saya spesifik
+4. Sebagai pelajar, saya ingin memilih topik bacaan (Science, Business, Arts, dll.) untuk soal yang digenerate, agar konteks relevan dengan minat saya
+5. Sebagai pelajar, saya ingin melihat preview hasil generate sebelum menyimpan, agar saya bisa mengedit atau mere-generate soal yang kurang baik
+6. Sebagai power user, saya ingin menggunakan mode "agentic" yang melakukan validasi multi-step (passage → validate → questions → self-answer → score), agar kualitas soal lebih terjamin
+7. Sebagai pelajar casual, saya ingin menggunakan mode "quick" yang cepat dan hemat token, agar saya bisa langsung latihan
+
+### Question Bank
+8. Sebagai pelajar, saya ingin browse kumpulan soal publik berdasarkan bahasa, tingkat kesulitan, format, dan topik, agar saya bisa menemukan soal yang sesuai
+9. Sebagai pelajar, saya ingin melihat detail soal (passage, pertanyaan, pilihan, jawaban) sebelum memutuskan menggunakannya
+10. Sebagai pelajar, saya ingin memberi rating dan melihat rating soal/paket dari pengguna lain, agar saya tahu kualitasnya
+11. Sebagai kreator, saya ingin mempublikasikan soal yang saya buat ke bank publik, agar orang lain bisa menggunakannya
+12. Sebagai kreator, saya ingin menyimpan soal sebagai privat, agar hanya saya yang bisa mengaksesnya
+13. Sebagai pelajar, saya ingin mencari soal berdasarkan keyword di teks bacaan atau pertanyaan
+
+### Package Builder & Combiner
+14. Sebagai pelajar, saya ingin membuat paket soal (bundle) dari beberapa soal yang saya pilih dari bank, agar saya bisa latihan dalam satu sesi terstruktur
+15. Sebagai kreator, saya ingin memberi judul, deskripsi, dan visibility (publik/privat) pada paket yang saya buat
+16. Sebagai pelajar, saya ingin mengkombinasikan section dari berbagai paket (misal: Reading dari Paket A, Writing dari Paket B) menjadi satu paket ujian baru, tanpa perlu generate ulang dengan AI
+17. Sebagai pelajar, saya ingin melihat estimasi durasi dan jumlah soal sebelum memulai ujian
+
+### Exam Interface
+18. Sebagai pelajar, saya ingin melihat teks bacaan dan soal secara side-by-side saat mengerjakan, agar saya tidak perlu scroll bolak-balik
+19. Sebagai pelajar, saya ingin timer yang menunjukkan sisa waktu pengerjaan, agar saya bisa mengatur pace
+20. Sebagai pelajar, saya ingin navigasi antar soal (previous/next/jump), agar saya bisa mengerjakan dengan fleksibel
+21. Sebagai pelajar, saya ingin menandai soal untuk direview nanti, agar saya bisa fokus dulu ke soal lain
+22. Sebagai pelajar, saya ingin melihat progress (soal ke-X dari total) selama ujian
+23. Sebagai pelajar, saya ingin jawaban saya tersimpan otomatis, agar tidak hilang jika koneksi terputus
+24. Sebagai pelajar, saya ingin hasil ujian langsung terlihat setelah selesai (auto-grade untuk soal objektif)
+
+### Analytics & Evaluation
+25. Sebagai pelajar, saya ingin melihat skor per-section (Reading/Writing/Listening/Speaking) setelah ujian, agar saya tahu kekuatan dan kelemahan saya
+26. Sebagai pelajar, saya ingin melihat breakdown akurasi per skill tag (grammar, vocabulary, inference, dll.), agar saya tahu area mana yang perlu diperbaiki
+27. Sebagai pelajar, saya ingin melihat tren progres dari waktu ke waktu (line chart akurasi), agar saya tahu apakah saya improving
+28. Sebagai pelajar, saya ingin melihat radar chart proficiency per skill, agar visualisasi kelemahan saya jelas
+29. Sebagai pelajar, saya ingin mendapat rekomendasi paket soal yang fokus ke kelemahan saya, agar saya bisa memperbaiki area tersebut secara terarah
+30. Sebagai pelajar, saya ingin melihat statistik: total soal dikerjakan, total waktu latihan, akurasi rata-rata
+
+### Settings & Profile
+31. Sebagai pengguna, saya ingin menyimpan API key saya (OpenAI-compatible) dengan aman (encrypted), agar saya tidak perlu input ulang setiap generate
+32. Sebagai pengguna, saya ingin mengatur base URL dan model name untuk AI provider, agar saya bisa pakai provider alternatif (OpenRouter, Groq, local LLM)
+33. Sebagai pengguna, saya ingin mengelola (tambah/edit/hapus) multiple API keys untuk provider berbeda
+34. Sebagai pengguna, saya ingin mengedit profil (nama, avatar) saya
+
+### Community
+35. Sebagai pelajar, saya ingin melihat paket soal "trending" atau "staff pick", agar saya bisa menemukan soal berkualitas tinggi
+36. Sebagai kreator, saya ingin melihat berapa kali paket soal saya digunakan orang lain
+37. Sebagai pelajar, saya ingin membagikan link paket soal ke teman
+
+## Exam Types Supported
+
+| Exam | Language | Levels | Focus Areas |
+|------|----------|--------|-------------|
+| IELTS Academic | English | Band 1-9 | Academic reading, formal writing |
+| TOEFL iBT | English | 0-120 | Academic English, university context |
+| JLPT | Japanese | N5-N1 | Kanji reading, grammar particles, text comprehension |
+| HSK | Chinese | HSK 1-6 | Character recognition, word choice, sentence structure |
+| Goethe / TestDaF | German | A1-C2 | Article/case, vocabulary in context, Lückentext |
+
+## Question Formats
+
+| Format | IELTS | TOEFL | JLPT | HSK | German | Auto-Gradeable |
+|--------|-------|-------|------|-----|--------|:---:|
+| Multiple Choice | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| True/False/Not Given | ✓ | ✓ | | | ✓ | ✓ |
+| Matching Headings | ✓ | ✓ | | | ✓ | ✓ |
+| Matching Information | ✓ | ✓ | | | ✓ | ✓ |
+| Fill in Blank | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| Synonym / Vocabulary | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| Grammar in Context | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| Sentence Completion | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| Summary Completion | ✓ | ✓ | | | | ✓ |
+| Cloze Test | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| Reference (pronoun) | | ✓ | ✓ | | | ✓ |
+| Author's View | ✓ | ✓ | ✓ | | | ✓ |
+| Kanji Reading | | | ✓ | | | ✓ |
+| Particle Choice | | | ✓ | | | ✓ |
+| Article / Case Choice | | | | | ✓ | ✓ |
+
+## Implementation Decisions
+
+### Tech Stack
+- **Frontend**: React 19 + TanStack Router (SPA) + TanStack Query + Tailwind CSS 4 + shadcn/ui
+- **Backend**: Hono + tRPC
+- **Auth**: Better Auth (email/password)
+- **Database**: PostgreSQL + Drizzle ORM
+- **AI**: OpenAI-compatible API (generic interface, user-provided keys)
+- **Monorepo**: Turborepo + Bun workspaces
+- **Theme**: Light default, dark toggle (system preference aware via next-themes)
+
+### Architecture
+
+```
+apps/web/            React SPA frontend
+  routes/            File-based routes (TanStack Router)
+    index.tsx        Landing / Home
+    generate.tsx     AI Generator wizard
+    bank.tsx         Question Bank browse
+    bank/$id.tsx     Package / Question detail
+    builder.tsx      Test Builder (craft package)
+    builder/combo.tsx Package Combiner
+    exam/$id.tsx     Exam Interface
+    exam/$id/result.tsx  Exam Results
+    analytics.tsx    Deep Analytics dashboard
+    settings.tsx     Settings (API keys, profile)
+
+apps/server/         Hono backend
+  Mounts Better Auth + tRPC
+
+packages/
+  ai/                AI generation pipeline (new)
+  api/               tRPC routers + context
+    routers/
+      ai.ts          generateQuestions (streaming)
+      question.ts    CRUD questions, search, filter
+      package.ts     CRUD packages, sections
+      combo.ts       Combo package creation
+      exam.ts        Attempts, grading, results
+      analytics.ts   Stats, trends, recommendations
+      settings.ts    API key management
+  auth/              Better Auth config
+  db/                Drizzle ORM schema
+  ui/                shadcn/ui shared components
+  env/               Environment validation
+```
+
+### Deep Modules (testable in isolation)
+
+- **`packages/ai/`** — AI generation pipeline
+  - Interface: `generateQuestions(input: GenerationInput) => GenerationResult`
+  - Two pipelines: `quick` (single call) and `agentic` (multi-step)
+  - Zod schemas for all question formats (type-safe generation + validation)
+  - OpenAI-compatible client abstraction
+
+- **`packages/api/src/routers/`** — tRPC routers
+  - Each router encapsulates one domain with clear procedures
+
+### Database Schema (New Tables)
+
+```
+exam_type          id, name, language, description
+section_type       id, name
+question           id, exam_type_id, section_type_id, format, passage_text,
+                   question_text, options_json, correct_answer, explanation,
+                   difficulty (1-5), skill_tags[], source (ai|manual),
+                   ai_model, creator_user_id, is_public, usage_count, avg_rating
+package            id, title, description, exam_type_id, creator_user_id,
+                   is_public, total_questions, usage_count, avg_rating
+package_section    id, package_id, section_type_id, title, order_index
+section_question   id, section_id, question_id, order_index
+combo_package      id, title, description, creator_user_id, is_public
+combo_section      id, combo_id, source_package_id, source_section_id, order_index
+test_attempt       id, user_id, package_id_or_combo_id, started_at, finished_at, total_score
+section_result     id, attempt_id, section_type, score, max_score, time_spent_sec
+answer             id, section_result_id, question_id, user_answer, is_correct, time_spent_sec
+user_api_key       id, user_id, provider, base_url, api_key_encrypted, model_name, is_active
+question_rating    id, user_id, question_id, score (1-5), created_at
+```
+
+### Agentic AI Pipeline
+
+```
+Step 1: Passage Generator   → Authentic reading passage sesuai level ujian
+Step 2: Passage Validator   → Validasi akurasi, difficulty, grammar, panjang
+Step 3: Question Generator  → Generate N questions dalam format yang diminta
+Step 4: Self-Answer & Validate → AI menjawab sendiri, flag ambigu, hitung confidence
+Step 5: Quality Scorer      → Overall score, needsHumanReview flag
+```
+
+### Weakness Analysis Algorithm
+
+1. Group answers by `section_type` dan `skill_tag`
+2. Hitung akurasi per group
+3. Identifikasi skill tags dengan akurasi di bawah threshold (default 70%)
+4. Sort by `total_attempts * (1 - accuracy)` — prioritize yang sering salah
+5. Cari paket soal publik dengan skill tags yang match kelemahan user
+6. Return top-N rekomendasi paket
+
+---
+
+## Implementation Phases
+
+### Phase 1 — Foundation (Schema + Core Infrastructure)
+**Goal:** Database siap, user bisa manage API key, AI pipeline dasar berjalan
+
+| # | Task | Package |
+|---|------|---------|
+| 1.1 | Add application tables to Drizzle schema | `packages/db/` |
+| 1.2 | Generate & run migrations | `packages/db/` |
+| 1.3 | Create `packages/ai/` — OpenAI-compatible client + Zod schemas for all question formats | `packages/ai/` |
+| 1.4 | AI key management tRPC router (encrypt/decrypt) | `packages/api/` |
+| 1.5 | Settings page → API key CRUD UI | `apps/web/` |
+| 1.6 | Quick mode AI generation pipeline (single call) | `packages/ai/` |
+| 1.7 | AI Generator router + basic UI page | `packages/api/` + `apps/web/` |
+
+**User stories delivered:** 1, 2, 3, 4, 7, 31, 32, 33
+
+### Phase 2 — Question Bank & Packages
+**Goal:** Soal bisa disimpan, dipublikasikan, di-browse, dan dibundle
+
+| # | Task | Package |
+|---|------|---------|
+| 2.1 | Question CRUD tRPC router (search, filter, publish/unpublish) | `packages/api/` |
+| 2.2 | Package CRUD tRPC router (create, add sections, add questions) | `packages/api/` |
+| 2.3 | Question Bank browse page (grid, search, filters) | `apps/web/` |
+| 2.4 | Package detail page (preview soal, rating, stats) | `apps/web/` |
+| 2.5 | AI Generator → save result as question / package | `apps/web/` |
+| 2.6 | Test Builder page (craft package from bank items) | `apps/web/` |
+| 2.7 | Rating system for public questions/packages | `packages/api/` |
+
+**User stories delivered:** 5, 8, 9, 10, 11, 12, 13, 14, 15, 17
+
+### Phase 3 — Package Combiner + Agentic Mode
+**Goal:** Pengguna bisa mix section dari berbagai paket; power user bisa pakai agentic generation
+
+| # | Task | Package |
+|---|------|---------|
+| 3.1 | Combo package tRPC router | `packages/api/` |
+| 3.2 | Package Combiner UI (select sections from different packages) | `apps/web/` |
+| 3.3 | Agentic mode AI pipeline (multi-step) | `packages/ai/` |
+| 3.4 | Agentic mode toggle + streaming progress in AI Generator UI | `apps/web/` |
+
+**User stories delivered:** 6, 16
+
+### Phase 4 — Exam Experience
+**Goal:** Pengguna bisa mengerjakan ujian dengan antarmuka side-by-side, timer, auto-grade
+
+| # | Task | Package |
+|---|------|---------|
+| 4.1 | Exam attempt + answer submission tRPC router | `packages/api/` |
+| 4.2 | Auto-grade logic (untuk semua format objektif) | `packages/api/` |
+| 4.3 | Exam Interface page (side-by-side passage + questions) | `apps/web/` |
+| 4.4 | Timer component (client-side with periodic sync) | `apps/web/` |
+| 4.5 | Question navigation (prev/next/jump, mark for review) | `apps/web/` |
+| 4.6 | Auto-save answers | `apps/web/` |
+| 4.7 | Exam Results page (per-section scores, answer review) | `apps/web/` |
+
+**User stories delivered:** 18, 19, 20, 21, 22, 23, 24, 25
+
+### Phase 5 — Analytics & Recommendations
+**Goal:** User bisa melihat performa, kelemahan, dan rekomendasi perbaikan
+
+| # | Task | Package |
+|---|------|---------|
+| 5.1 | Analytics tRPC router (stats, trends, skill breakdown) | `packages/api/` |
+| 5.2 | Weakness identification + recommendation algorithm | `packages/api/` |
+| 5.3 | Deep Analytics dashboard page (stats cards, line chart, radar chart) | `apps/web/` |
+| 5.4 | Performance by Skill table | `apps/web/` |
+| 5.5 | Recommended packages section on dashboard | `apps/web/` |
+
+**User stories delivered:** 26, 27, 28, 29, 30
+
+### Phase 6 — Community & Polish
+**Goal:** Platform terasa hidup dengan konten komunitas, trending, PWA offline support
+
+| # | Task | Package |
+|---|------|---------|
+| 6.1 | Trending / most-used packages endpoint | `packages/api/` |
+| 6.2 | Staff pick / featured content | `apps/web/` |
+| 6.3 | Creator stats (usage count, rating) on profile | `apps/web/` |
+| 6.4 | Share link for public packages | `apps/web/` |
+| 6.5 | PWA offline support for exam mode (cache questions) | `apps/web/` |
+| 6.6 | UI polish, loading skeletons, empty states, error boundaries | `apps/web/` |
+| 6.7 | i18n foundation (Bahasa Indonesia UI strings) | `apps/web/` |
+
+**User stories delivered:** 34, 35, 36, 37
+
+---
+
+## Out of Scope
+
+- Mobile app (React Native) — web-first, PWA covers mobile
+- Writing essay auto-grading — terlalu kompleks dan unreliable untuk AI saat ini
+- Speaking section generation — fokus ke reading comprehension dulu
+- Listening audio generation — perlu TTS, terlalu kompleks untuk initial release
+- Proctoring / anti-cheat
+- Subscription / payment system — open-source, self-hosted
+- Real-time multiplayer
+- Social features (comments, following) beyond ratings
+- Admin dashboard — semua management via DB langsung atau CLI
+- Email verification & password reset flow (bisa ditambah nanti)
+- OAuth login (Google, GitHub) — email/password saja untuk initial release
+
+## Testing Strategy
+
+- **AI package** (`packages/ai/`): Unit tests for Zod validation schemas, integration tests with mocked LLM responses
+- **API routers** (`packages/api/src/routers/`): tRPC procedure tests against test database
+- **Package Combiner**: Complex business logic — priority for testing
+- **Auto-grade logic**: Must be correct — parametrized tests per format
+- **Test structure**: `packages/*/__tests__/` (establishing fresh — codebase has no tests yet)
+
+A good test:
+- Tests external behavior (API contract), not implementation details
+- Uses tRPC test client to call procedures end-to-end
+- Isolates AI calls via mocking
+
+## Further Notes
+
+- Repo akan dijadikan open-source — semua API key di-skip dari git, dokumentasi jelas untuk self-hosting
+- UI text dalam Bahasa Indonesia (target pengguna), kode dalam English
+- Soal bisa bilingual (passage dalam bahasa target, instruksi dalam Bahasa Indonesia)
+- Timer di exam interface harus client-side dengan periodic sync ke server
+- PWA support sudah ada, perlu di-enhance untuk offline exam mode (cache soal)
+- Default theme: light, dark toggle tetap ada
+- Nama "Labas" dari "labs" + "bahasa"

apps/web/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
+    "@labas/ai": "workspace:*",
     "@labas/api": "workspace:*",
     "@labas/auth": "workspace:*",
     "@labas/env": "workspace:*",
@@ -26,6 +27,7 @@
     "@trpc/tanstack-react-query": "^11.16.0",
     "better-auth": "catalog:",
     "dotenv": "catalog:",
+    "flag-icons": "^7.5.0",
     "lucide-react": "^1.8.0",
     "next-themes": "catalog:",
     "react": "^19.2.5",

apps/web/src/components/header.tsx

@@ -1,32 +1,17 @@
 import { Link } from "@tanstack/react-router";
-
 import { ModeToggle } from "./mode-toggle";
 import UserMenu from "./user-menu";
 
 export default function Header() {
-  const links = [
-    { to: "/", label: "Home" },
-    { to: "/dashboard", label: "Dashboard" },
-  ] as const;
-
   return (
-    <div>
-      <div className="flex flex-row items-center justify-between px-2 py-1">
-        <nav className="flex gap-4 text-lg">
-          {links.map(({ to, label }) => {
-            return (
-              <Link key={to} to={to}>
-                {label}
-              </Link>
-            );
-          })}
-        </nav>
-        <div className="flex items-center gap-2">
-          <ModeToggle />
-          <UserMenu />
-        </div>
+    <header className="sticky top-0 z-50 flex items-center justify-between w-full px-6 py-3 bg-surface-container-low border-b border-outline-variant/50">
+      <div className="flex items-center gap-6">
+        <span className="text-xl font-bold tracking-tight text-primary font-headline md:hidden">Labas</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <ModeToggle />
+        <UserMenu />
       </div>
-      <hr />
-    </div>
+    </header>
   );
 }

apps/web/src/components/sidebar.tsx

@@ -0,0 +1,143 @@
+import { Link, useLocation } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+import { useSidebar } from "@/hooks/use-sidebar";
+
+const navItems = [
+  { to: "/", label: "Dashboard", icon: "dashboard" },
+  { to: "/generate", label: "AI Lab", icon: "auto_awesome" },
+  { to: "/bank", label: "Bank Soal", icon: "database" },
+  { to: "/analytics", label: "Analytics", icon: "analytics" },
+];
+
+const bottomItems = [
+  { to: "/settings", label: "Settings", icon: "settings" },
+];
+
+function NavIcon({ name }: { name: string }) {
+  return <span className="material-symbols-outlined text-xl w-6 text-center">{name}</span>;
+}
+
+export function Sidebar() {
+  const location = useLocation();
+  const { collapsed, toggle } = useSidebar();
+  const { data: session } = authClient.useSession();
+  const isLoggedIn = !!session;
+
+  return (
+    <>
+      {/* Desktop Sidebar */}
+      <aside
+        className={`fixed left-0 top-0 h-full flex flex-col z-40 bg-[var(--warm-cream)] border-r border-[var(--oat-border)] hidden md:flex transition-all duration-300 ${
+          collapsed ? "w-16 items-center px-2 py-4" : "w-64 p-4"
+        }`}
+      >
+        <div className={`mb-8 ${collapsed ? "px-0 text-center" : "px-4"}`}>
+          <h1 className="text-xl font-extrabold text-[var(--clay-black)] font-headline tracking-tight">
+            {collapsed ? "L" : "Labas"}
+          </h1>
+          {!collapsed && (
+            <p className="text-xs text-[var(--warm-charcoal)] uppercase tracking-widest font-semibold mt-1">
+              Exam Prep Portal
+            </p>
+          )}
+        </div>
+
+        <nav className="flex-1 space-y-1 w-full">
+          {navItems.map((item) => {
+            const isActive = location.pathname === item.to || location.pathname.startsWith(`${item.to}/`);
+            return (
+              <Link
+                key={item.to}
+                to={item.to}
+                className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all group clay-hover ${
+                  isActive
+                    ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] font-semibold clay-shadow"
+                    : "text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)]"
+                } ${collapsed ? "justify-center py-3 px-2" : "py-3 px-4"}`}
+                title={collapsed ? item.label : undefined}
+              >
+                <NavIcon name={item.icon} />
+                {!collapsed && <span className="text-sm font-medium">{item.label}</span>}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="mt-auto space-y-1 pt-4 border-t border-[var(--oat-border)] w-full">
+          {bottomItems.map((item) => {
+            const isActive = location.pathname === item.to;
+            return (
+              <Link
+                key={item.to}
+                to={item.to}
+                className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all clay-hover ${
+                  isActive
+                    ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] font-semibold clay-shadow"
+                    : "text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)]"
+                } ${collapsed ? "justify-center py-3 px-2" : "py-3 px-4"}`}
+                title={collapsed ? item.label : undefined}
+              >
+                <NavIcon name={item.icon} />
+                {!collapsed && <span className="text-sm font-medium">{item.label}</span>}
+              </Link>
+            );
+          })}
+          {isLoggedIn ? (
+            <button
+              onClick={() => authClient.signOut()}
+              className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all clay-hover text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)] w-full ${
+                collapsed ? "justify-center py-3 px-2" : "py-3 px-4 text-left"
+              }`}
+              title={collapsed ? "Keluar" : undefined}
+            >
+              <NavIcon name="logout" />
+              {!collapsed && <span className="text-sm font-medium">Keluar</span>}
+            </button>
+          ) : (
+            <Link
+              to="/login"
+              className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all clay-hover text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)] ${
+                collapsed ? "justify-center py-3 px-2" : "py-3 px-4"
+              }`}
+              title={collapsed ? "Masuk" : undefined}
+            >
+              <NavIcon name="login" />
+              {!collapsed && <span className="text-sm font-medium">Masuk</span>}
+            </Link>
+          )}
+        </div>
+      </aside>
+
+      {/* Floating toggle button (right edge of sidebar) */}
+      <button
+        onClick={toggle}
+        className="hidden md:flex absolute top-6 z-50 items-center justify-center w-10 h-10 rounded-full bg-[var(--pure-white)] border-2 border-[var(--oat-border)] shadow-md hover:bg-[var(--oat-light)] transition-colors text-[var(--warm-charcoal)] clay-hover"
+        title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        style={{ left: collapsed ? "16px" : "256px" }}
+      >
+        <span className="material-symbols-outlined text-lg">menu_open</span>
+      </button>
+
+      {/* Mobile bottom nav */}
+      <nav className="md:hidden fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-3 bg-[var(--warm-cream)]/90 backdrop-blur-xl border-t border-[var(--oat-border)] rounded-t-[var(--radius-xl)]">
+        {navItems.slice(0, 4).map((item) => {
+          const isActive = location.pathname === item.to;
+          return (
+            <Link
+              key={item.to}
+              to={item.to}
+              className={`flex flex-col items-center justify-center px-4 py-1.5 transition-all rounded-[var(--radius-lg)] ${
+                isActive
+                  ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                  : "text-[var(--warm-charcoal)]"
+              }`}
+            >
+              <NavIcon name={item.icon} />
+              <span className="text-[10px] font-medium uppercase tracking-wider mt-1">{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+    </>
+  );
+}

apps/web/src/components/sign-in-form.tsx

@@ -30,7 +30,7 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
         {
           onSuccess: () => {
             navigate({
-              to: "/dashboard",
+              to: "/",
             });
             toast.success("Sign in successful");
           },

apps/web/src/components/sign-up-form.tsx

@@ -32,7 +32,7 @@ export default function SignUpForm({ onSwitchToSignIn }: { onSwitchToSignIn: ()
         {
           onSuccess: () => {
             navigate({
-              to: "/dashboard",
+              to: "/",
             });
             toast.success("Sign up successful");
           },

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

@@ -0,0 +1,54 @@
+import { useState, useEffect, useCallback } from "react";
+import { encryptText, decryptText } from "@/lib/crypto";
+
+const STORAGE_KEY = "labas_api_key";
+
+export interface StoredApiKey {
+  provider: string;
+  baseUrl: string;
+  apiKey: string;
+  modelName: string;
+}
+
+export function useApiKey() {
+  const [storedKey, setStoredKey] = useState<StoredApiKey | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    loadKey();
+  }, []);
+
+  const loadKey = async () => {
+    try {
+      const encrypted = localStorage.getItem(STORAGE_KEY);
+      if (encrypted) {
+        const decrypted = await decryptText(encrypted);
+        setStoredKey(JSON.parse(decrypted));
+      }
+    } catch {
+      // Invalid or corrupted data
+      localStorage.removeItem(STORAGE_KEY);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const saveKey = useCallback(async (key: StoredApiKey) => {
+    const encrypted = await encryptText(JSON.stringify(key));
+    localStorage.setItem(STORAGE_KEY, encrypted);
+    setStoredKey(key);
+  }, []);
+
+  const removeKey = useCallback(() => {
+    localStorage.removeItem(STORAGE_KEY);
+    setStoredKey(null);
+  }, []);
+
+  return {
+    storedKey,
+    isLoading,
+    saveKey,
+    removeKey,
+    hasKey: !!storedKey,
+  };
+}

apps/web/src/hooks/use-sidebar.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from "react";
+
+const STORAGE_KEY = "labas_sidebar_collapsed";
+
+export function useSidebar() {
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return localStorage.getItem(STORAGE_KEY) === "true";
+  });
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, String(collapsed));
+  }, [collapsed]);
+
+  const toggle = () => setCollapsed((prev) => !prev);
+
+  return { collapsed, toggle };
+}

apps/web/src/lib/crypto.ts

@@ -0,0 +1,120 @@
+const DB_NAME = "labas-crypto";
+const STORE_NAME = "keys";
+const KEY_NAME = "labas-master-key";
+
+function openDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, 1);
+    request.onerror = () => reject(request.error);
+    request.onsuccess = () => resolve(request.result);
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+    };
+  });
+}
+
+async function getFromStore(db: IDBDatabase, key: string): Promise<Uint8Array | undefined> {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readonly");
+    const store = tx.objectStore(STORE_NAME);
+    const request = store.get(key);
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+async function putToStore(db: IDBDatabase, key: string, value: Uint8Array): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    const store = tx.objectStore(STORE_NAME);
+    const request = store.put(value, key);
+    request.onsuccess = () => resolve();
+    request.onerror = () => reject(request.error);
+  });
+}
+
+async function getOrCreateMasterKey(): Promise<CryptoKey> {
+  const db = await openDB();
+  const stored = await getFromStore(db, KEY_NAME);
+
+  if (stored) {
+    return crypto.subtle.importKey(
+      "raw",
+      stored.buffer as ArrayBuffer,
+      { name: "AES-GCM" },
+      false,
+      ["encrypt", "decrypt"],
+    );
+  }
+
+  const key = await crypto.subtle.generateKey(
+    { name: "AES-GCM", length: 256 },
+    true,
+    ["encrypt", "decrypt"],
+  );
+
+  const exported = await crypto.subtle.exportKey("raw", key);
+  await putToStore(db, KEY_NAME, new Uint8Array(exported));
+
+  return key;
+}
+
+interface EncryptedData {
+  iv: string;
+  data: string;
+}
+
+export async function encryptText(plaintext: string): Promise<string> {
+  const key = await getOrCreateMasterKey();
+  const iv = crypto.getRandomValues(new Uint8Array(12));
+  const encoded = new TextEncoder().encode(plaintext);
+
+  const ciphertext = await crypto.subtle.encrypt(
+    { name: "AES-GCM", iv },
+    key,
+    encoded,
+  );
+
+  const combined: EncryptedData = {
+    iv: arrayBufferToBase64(iv),
+    data: arrayBufferToBase64(ciphertext),
+  };
+
+  return JSON.stringify(combined);
+}
+
+export async function decryptText(encrypted: string): Promise<string> {
+  const key = await getOrCreateMasterKey();
+  const parsed: EncryptedData = JSON.parse(encrypted);
+  const iv = base64ToArrayBuffer(parsed.iv);
+  const ciphertext = base64ToArrayBuffer(parsed.data);
+
+  const decrypted = await crypto.subtle.decrypt(
+    { name: "AES-GCM", iv },
+    key,
+    ciphertext,
+  );
+
+  return new TextDecoder().decode(decrypted);
+}
+
+function arrayBufferToBase64(buffer: ArrayBuffer | Uint8Array): string {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  for (let i = 0; i < bytes.byteLength; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+
+function base64ToArrayBuffer(base64: string): ArrayBuffer {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes.buffer;
+}

apps/web/src/routeTree.gen.ts

@@ -0,0 +1,113 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as SettingsRouteImport } from './routes/settings'
+import { Route as LoginRouteImport } from './routes/login'
+import { Route as GenerateRouteImport } from './routes/generate'
+import { Route as IndexRouteImport } from './routes/index'
+
+const SettingsRoute = SettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const GenerateRoute = GenerateRouteImport.update({
+  id: '/generate',
+  path: '/generate',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/generate': typeof GenerateRoute
+  '/login': typeof LoginRoute
+  '/settings': typeof SettingsRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/generate': typeof GenerateRoute
+  '/login': typeof LoginRoute
+  '/settings': typeof SettingsRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/generate': typeof GenerateRoute
+  '/login': typeof LoginRoute
+  '/settings': typeof SettingsRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/generate' | '/login' | '/settings'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/generate' | '/login' | '/settings'
+  id: '__root__' | '/' | '/generate' | '/login' | '/settings'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  GenerateRoute: typeof GenerateRoute
+  LoginRoute: typeof LoginRoute
+  SettingsRoute: typeof SettingsRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/settings': {
+      id: '/settings'
+      path: '/settings'
+      fullPath: '/settings'
+      preLoaderRoute: typeof SettingsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/generate': {
+      id: '/generate'
+      path: '/generate'
+      fullPath: '/generate'
+      preLoaderRoute: typeof GenerateRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  GenerateRoute: GenerateRoute,
+  LoginRoute: LoginRoute,
+  SettingsRoute: SettingsRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

apps/web/src/routes/__root.tsx

@@ -4,8 +4,9 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { HeadContent, Outlet, createRootRouteWithContext } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 
-import Header from "@/components/header";
+import { Sidebar } from "@/components/sidebar";
 import { ThemeProvider } from "@/components/theme-provider";
+import { useSidebar } from "@/hooks/use-sidebar";
 import type { trpc } from "@/utils/trpc";
 
 import "../index.css";
@@ -19,36 +20,34 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
   component: RootComponent,
   head: () => ({
     meta: [
-      {
-        title: "labas",
-      },
-      {
-        name: "description",
-        content: "labas is a web application",
-      },
+      { title: "Labas — AI Exam Practice" },
+      { name: "description", content: "AI-powered multi-language test practice platform" },
     ],
     links: [
-      {
-        rel: "icon",
-        href: "/favicon.ico",
-      },
+      { rel: "icon", href: "/favicon.ico" },
+      { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" },
     ],
   }),
 });
 
 function RootComponent() {
+  const { collapsed } = useSidebar();
+
   return (
     <>
       <HeadContent />
       <ThemeProvider
         attribute="class"
-        defaultTheme="dark"
+        defaultTheme="light"
+        enableSystem
         disableTransitionOnChange
-        storageKey="vite-ui-theme"
+        storageKey="labas-theme"
       >
-        <div className="grid grid-rows-[auto_1fr] h-svh">
-          <Header />
-          <Outlet />
+        <div className="min-h-screen bg-background">
+          <Sidebar />
+          <main className={`min-h-screen transition-all duration-300 ${collapsed ? "md:ml-16" : "md:ml-64"}`}>
+            <Outlet />
+          </main>
         </div>
         <Toaster richColors />
       </ThemeProvider>

apps/web/src/routes/dashboard.tsx

@@ -1,33 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { createFileRoute, redirect } from "@tanstack/react-router";
-
-import { authClient } from "@/lib/auth-client";
-import { trpc } from "@/utils/trpc";
-
-export const Route = createFileRoute("/dashboard")({
-  component: RouteComponent,
-  beforeLoad: async () => {
-    const session = await authClient.getSession();
-    if (!session.data) {
-      redirect({
-        to: "/login",
-        throw: true,
-      });
-    }
-    return { session };
-  },
-});
-
-function RouteComponent() {
-  const { session } = Route.useRouteContext();
-
-  const privateData = useQuery(trpc.privateData.queryOptions());
-
-  return (
-    <div>
-      <h1>Dashboard</h1>
-      <p>Welcome {session.data?.user.name}</p>
-      <p>API: {privateData.data?.message}</p>
-    </div>
-  );
-}

apps/web/src/routes/generate.tsx

@@ -0,0 +1,484 @@
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+import { trpc } from "@/utils/trpc";
+import { useApiKey } from "@/hooks/use-api-key";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@labas/ui/components/card";
+import "flag-icons/css/flag-icons.min.css";
+import type { GenerationResult } from "@labas/ai";
+
+const EXAM_TYPES = [
+  { id: "IELTS", name: "IELTS Academic", code: "gb" },
+  { id: "TOEFL", name: "TOEFL iBT", code: "us" },
+  { id: "JLPT", name: "JLPT", code: "jp" },
+  { id: "HSK", name: "HSK", code: "cn" },
+  { id: "GOETHE", name: "Goethe-Zertifikat", code: "de" },
+];
+
+const SECTIONS = [
+  { id: "READING", name: "Reading", icon: "menu_book" },
+  { id: "WRITING", name: "Writing", icon: "edit_note" },
+];
+
+const FORMATS = [
+  { id: "multiple_choice", name: "Multiple Choice" },
+  { id: "true_false_not_given", name: "True / False / Not Given" },
+  { id: "fill_blank", name: "Fill in Blank" },
+  { id: "synonym", name: "Synonym / Vocabulary" },
+  { id: "grammar_in_context", name: "Grammar in Context" },
+  { id: "sentence_completion", name: "Sentence Completion" },
+  { id: "cloze", name: "Cloze Test" },
+  { id: "reference", name: "Reference (Pronoun)" },
+  { id: "author_view", name: "Author's View" },
+  { id: "matching_headings", name: "Matching Headings" },
+  { id: "kanji_reading", name: "Kanji Reading (JLPT)" },
+  { id: "particle_choice", name: "Particle Choice (JLPT)" },
+  { id: "article_case", name: "Article / Case (German)" },
+];
+
+const TOPICS = ["Science & Tech", "Business", "Sociology", "Arts", "History", "Environment", "Health", "Education"];
+const DIFFICULTIES = ["Beginner", "Intermediate", "Academic", "Expert"];
+
+export const Route = createFileRoute("/generate")({
+  component: RouteComponent,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
+});
+
+function MaterialIcon({ name, className = "" }: { name: string; className?: string }) {
+  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
+}
+
+function RouteComponent() {
+  const { storedKey, hasKey } = useApiKey();
+
+  const [examType, setExamType] = useState("IELTS");
+  const [section, setSection] = useState("READING");
+  const [selectedFormats, setSelectedFormats] = useState<string[]>(["multiple_choice"]);
+  const [difficulty, setDifficulty] = useState(2);
+  const [selectedTopics, setSelectedTopics] = useState<string[]>(["Science & Tech"]);
+  const [questionCount, setQuestionCount] = useState(5);
+  const [weaknessAlign, setWeaknessAlign] = useState(75);
+  const [result, setResult] = useState<GenerationResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const generate = useMutation({
+    ...trpc.ai.generate.mutationOptions(),
+    onSuccess: (data) => {
+      setResult(data);
+      setError(null);
+    },
+    onError: (err) => {
+      setError(err.message);
+      setResult(null);
+    },
+  });
+
+  const saveQuestions = useMutation({
+    ...trpc.ai.saveQuestions.mutationOptions(),
+    onSuccess: () => {
+      alert("Soal berhasil disimpan!");
+    },
+  });
+
+  const toggleFormat = (id: string) => {
+    setSelectedFormats((prev) =>
+      prev.includes(id) ? prev.filter((f) => f !== id) : [...prev, id],
+    );
+  };
+
+  const toggleTopic = (topic: string) => {
+    setSelectedTopics((prev) =>
+      prev.includes(topic) ? prev.filter((t) => t !== topic) : [...prev, topic],
+    );
+  };
+
+  const handleGenerate = () => {
+    if (!hasKey || !storedKey) {
+      setError("API key belum dikonfigurasi. Tambahkan di Settings.");
+      return;
+    }
+
+    generate.mutate({
+      examType: examType as any,
+      section: section as any,
+      formats: selectedFormats as any,
+      difficulty: difficulty + 1,
+      topics: selectedTopics,
+      questionCount,
+      mode: "quick",
+      apiKeyConfig: {
+        baseUrl: storedKey.baseUrl,
+        apiKey: storedKey.apiKey,
+        model: storedKey.modelName,
+      },
+    });
+  };
+
+  return (
+    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-7xl mx-auto bg-[var(--warm-cream)]">
+      {/* Header Section */}
+      <section className="flex flex-col gap-2 relative mb-10">
+        <div className="absolute -left-8 -top-8 w-64 h-64 ai-glow pointer-events-none opacity-50" />
+        <h1 className="text-4xl md:text-5xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+          AI Exam Generator
+        </h1>
+        <p className="text-lg text-[var(--warm-charcoal)] max-w-2xl leading-relaxed">
+          Generate soal latihan reading comprehension dengan AI. Gunakan API key sendiri untuk latihan tanpa batas.
+        </p>
+      </section>
+
+      {!hasKey && (
+        <div className="mb-8 p-4 rounded-[var(--radius-lg)] bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)] text-sm flex items-center gap-3 border-2 border-[var(--badge-blue-bg)]">
+          <MaterialIcon name="warning" />
+          <span>API key belum dikonfigurasi.</span>
+          <Link to="/settings" className="font-semibold underline">
+            Tambahkan di Settings →
+          </Link>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
+        {/* Configuration Panel (Left) */}
+        <div className="lg:col-span-8 flex flex-col gap-8">
+          {/* Exam Type */}
+          <div className="flex flex-col gap-4">
+            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Jenis Ujian</label>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+              {EXAM_TYPES.map((t) => (
+                <button
+                  key={t.id}
+                  onClick={() => setExamType(t.id)}
+                  className={`flex items-center gap-3 py-4 px-4 rounded-[var(--radius-lg)] border-2 transition-all text-sm font-semibold clay-hover ${
+                    examType === t.id
+                      ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+                      : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-[var(--oat-border)]"
+                  }`}
+                >
+                  <span className={`fi fi-${t.code} w-6 h-4 rounded-sm shadow-sm`} />
+                  {t.name}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Weakness Alignment */}
+          <div className="flex flex-col gap-4">
+            <div className="flex justify-between items-end">
+              <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Fokus Latihan</label>
+              <span className="text-sm font-medium text-[var(--matcha-800)] bg-[var(--matcha-300)] px-3 py-1 rounded-full">
+                Intelligent Focus
+              </span>
+            </div>
+            <div className="relative py-4">
+              <input
+                type="range"
+                min="0"
+                max="100"
+                value={weaknessAlign}
+                onChange={(e) => setWeaknessAlign(Number(e.target.value))}
+                className="w-full h-2 bg-[var(--warm-silver)] rounded-full appearance-none cursor-pointer accent-[var(--clay-black)]"
+              />
+              <div className="flex justify-between mt-4 text-xs font-label uppercase tracking-widest text-[var(--warm-charcoal)]">
+                <span>Soal Seimbang</span>
+                <span>Fokus Kelemahan</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Difficulty Tuning */}
+          <div className="flex flex-col gap-4">
+            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Tingkat Kesulitan</label>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+              {DIFFICULTIES.map((d, i) => (
+                <button
+                  key={d}
+                  onClick={() => setDifficulty(i)}
+                  className={`py-4 px-2 rounded-[var(--radius-lg)] text-sm font-semibold transition-all clay-hover ${
+                    difficulty === i
+                      ? "bg-[var(--clay-black)] text-[var(--pure-white)] clay-shadow"
+                      : "bg-[var(--pure-white)] text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] border-2 border-[var(--oat-border)]"
+                  }`}
+                >
+                  {d}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Module Selection */}
+          <div className="flex flex-col gap-4">
+            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Section</label>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {SECTIONS.map((s) => (
+                <div
+                  key={s.id}
+                  onClick={() => setSection(s.id)}
+                  className={`flex items-center justify-between p-5 rounded-[var(--radius-lg)] border-2 group cursor-pointer transition-all clay-hover ${
+                    section === s.id
+                      ? "bg-[var(--pure-white)] border-[var(--clay-black)] clay-shadow"
+                      : "bg-[var(--pure-white)] border-[var(--oat-border)] hover:bg-[var(--oat-light)]"
+                  }`}
+                >
+                  <div className="flex items-center gap-4">
+                    <MaterialIcon
+                      name={s.icon}
+                      className={`text-[var(--clay-black)] group-hover:scale-110 transition-transform ${section === s.id ? "text-[var(--clay-black)]" : ""}`}
+                    />
+                    <span className="font-semibold text-[var(--clay-black)]">{s.name}</span>
+                  </div>
+                  <input
+                    type="checkbox"
+                    checked={section === s.id}
+                    readOnly
+                    className="w-5 h-5 rounded border-[var(--oat-border)] text-[var(--clay-black)] focus:ring-[var(--clay-black)]"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Format Selection */}
+          <div className="flex flex-col gap-4">
+            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Format Soal</label>
+            <div className="flex flex-wrap gap-2">
+              {FORMATS.map((f) => (
+                <button
+                  key={f.id}
+                  onClick={() => toggleFormat(f.id)}
+                  className={`px-4 py-2.5 rounded-full text-sm font-medium flex items-center gap-2 cursor-pointer transition-all clay-hover ${
+                    selectedFormats.includes(f.id)
+                      ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
+                      : "bg-[var(--oat-light)] text-[var(--warm-charcoal)] hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)]"
+                  }`}
+                >
+                  {f.name}
+                  {selectedFormats.includes(f.id) && (
+                    <MaterialIcon name="close" className="text-sm" />
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Topic Focus */}
+          <div className="flex flex-col gap-4">
+            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Topik</label>
+            <div className="flex flex-wrap gap-2">
+              {selectedTopics.map((topic) => (
+                <span
+                  key={topic}
+                  onClick={() => toggleTopic(topic)}
+                  className="px-4 py-2 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] font-medium flex items-center gap-2 cursor-pointer transition-all hover:brightness-95 clay-hover"
+                >
+                  {topic} <MaterialIcon name="close" className="text-sm" />
+                </span>
+              ))}
+              {TOPICS.filter((t) => !selectedTopics.includes(t)).map((topic) => (
+                <button
+                  key={topic}
+                  onClick={() => toggleTopic(topic)}
+                  className="px-4 py-2 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] font-medium hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)] transition-all clay-hover"
+                >
+                  {topic}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Question Count */}
+          <div className="flex flex-col gap-4">
+            <label className="font-headline text-xl font-bold text-[var(--clay-black)]">Jumlah Soal: {questionCount}</label>
+            <input
+              type="range"
+              min={1}
+              max={20}
+              value={questionCount}
+              onChange={(e) => setQuestionCount(Number(e.target.value))}
+              className="w-full h-2 bg-[var(--warm-silver)] rounded-full appearance-none cursor-pointer accent-[var(--clay-black)]"
+            />
+          </div>
+        </div>
+
+        {/* Live Preview Card (Right) */}
+        <div className="lg:col-span-4 sticky top-8">
+          <Card className="bg-[var(--pure-white)] border-2 border-[var(--oat-border)] clay-shadow rounded-[var(--radius-xl)]">
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <MaterialIcon name="analytics" className="text-[var(--matcha-600)]" />
+                <CardTitle className="font-headline text-xl text-[var(--clay-black)]">Test Blueprint</CardTitle>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="flex justify-between items-center pb-4 border-b border-[var(--oat-border)]">
+                <span className="text-[var(--warm-charcoal)]">Estimasi Durasi</span>
+                <span className="font-bold text-[var(--clay-black)]">{questionCount * 2} Menit</span>
+              </div>
+              <div className="flex justify-between items-center pb-4 border-b border-[var(--oat-border)]">
+                <span className="text-[var(--warm-charcoal)]">Jumlah Soal</span>
+                <span className="font-bold text-[var(--clay-black)]">{questionCount} Soal</span>
+              </div>
+              <div className="flex justify-between items-center pb-4 border-b border-[var(--oat-border)]">
+                <span className="text-[var(--warm-charcoal)]">Format</span>
+                <span className="font-bold text-[var(--clay-black)]">{selectedFormats.length} Jenis</span>
+              </div>
+              <div className="flex justify-between items-center pb-4 border-b border-[var(--oat-border)]">
+                <span className="text-[var(--warm-charcoal)]">Ujian</span>
+                <span className="font-bold text-[var(--clay-black)]">
+                  {EXAM_TYPES.find((t) => t.id === examType)?.name}
+                </span>
+              </div>
+
+              {/* AI Confidence Score Orbit */}
+              <div className="bg-[var(--oat-light)] rounded-[var(--radius-lg)] p-6 flex flex-col items-center gap-4 relative overflow-hidden">
+                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--matcha-600)] to-transparent" />
+                <span className="text-xs font-label uppercase tracking-widest text-[var(--warm-charcoal)] font-bold">
+                  AI Confidence Score
+                </span>
+                <div className="relative flex items-center justify-center">
+                  <svg className="w-32 h-32 transform -rotate-90">
+                    <circle className="text-[var(--warm-silver)]" cx="64" cy="64" fill="transparent" r="56" stroke="currentColor" strokeWidth="8" />
+                    <circle
+                      className="text-[var(--matcha-600)]"
+                      cx="64"
+                      cy="64"
+                      fill="transparent"
+                      r="56"
+                      stroke="currentColor"
+                      strokeDasharray="351.85"
+                      strokeDashoffset={351.85 - (351.85 * (weaknessAlign / 100))}
+                      strokeWidth="8"
+                    />
+                  </svg>
+                  <span className="absolute text-3xl font-headline font-extrabold text-[var(--clay-black)]">{Math.round(weaknessAlign)}%</span>
+                </div>
+                <p className="text-[11px] text-center text-[var(--warm-charcoal)] px-2 leading-tight">
+                  Probabilitas tinggi untuk mengatasi blindspot linguistik utama.
+                </p>
+              </div>
+
+              {/* Primary CTA */}
+              <Button
+                className="w-full py-5 rounded-[var(--radius-lg)] bg-[var(--clay-black)] text-[var(--pure-white)] font-bold text-lg flex items-center justify-center gap-3 clay-shadow clay-hover hover:bg-[var(--warm-charcoal)] transition-all active:scale-95 h-auto"
+                onClick={handleGenerate}
+                disabled={generate.isPending || selectedFormats.length === 0 || !hasKey}
+              >
+                <MaterialIcon name="auto_awesome" className="group-hover:rotate-12 transition-transform" />
+                {generate.isPending ? "Generating..." : "Generate & Launch"}
+              </Button>
+
+              {error && (
+                <div className="p-4 rounded-[var(--radius-md)] bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)] text-sm border-2 border-[var(--badge-blue-bg)]">
+                  {error}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Results Section */}
+      {result && (
+        <div className="mt-16 space-y-6">
+          <div className="flex items-center justify-between">
+            <h2 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Hasil Generate</h2>
+            <Button
+              onClick={() =>
+                saveQuestions.mutate({
+                  examTypeId: examType,
+                  sectionTypeId: section,
+                  questions: result.questions,
+                  isPublic: false,
+                })
+              }
+              disabled={saveQuestions.isPending}
+              className="bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover"
+            >
+              {saveQuestions.isPending ? "Menyimpan..." : "Simpan ke Bank Soal"}
+            </Button>
+          </div>
+
+          <div className="text-sm text-[var(--warm-charcoal)] mb-4 font-mono">
+            Model: {result.meta.model} · Tokens: {result.meta.tokensUsed ?? "?"} · Waktu: {result.meta.durationMs}ms
+          </div>
+
+          {result.questions.map((q, idx) => (
+            <Card key={idx} className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <span className="bg-[var(--matcha-600)] text-[var(--pure-white)] w-8 h-8 flex items-center justify-center rounded-[var(--radius-md)] font-bold text-sm">
+                    {idx + 1}
+                  </span>
+                  <span className="text-sm font-bold text-[var(--matcha-600)] uppercase tracking-tighter">
+                    {q.format.replace(/_/g, " ")}
+                  </span>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="p-5 rounded-[var(--radius-lg)] bg-[var(--oat-light)] text-[var(--clay-black)] leading-relaxed whitespace-pre-wrap text-base">
+                  {q.passageText}
+                </div>
+                <p className="font-medium text-[var(--clay-black)] text-lg">{q.questionText}</p>
+                {"options" in q && q.options && (
+                  <div className="space-y-2">
+                    {q.options.map((opt) => (
+                      <label
+                        key={opt.key}
+                        className={`flex items-center p-4 rounded-[var(--radius-lg)] border-2 cursor-pointer transition-all clay-hover ${
+                          opt.key === q.correctAnswer
+                            ? "border-[var(--clay-black)] bg-[var(--oat-light)]"
+                            : "border-[var(--oat-border)] bg-[var(--oat-light)] hover:bg-[var(--matcha-300)]/30"
+                        }`}
+                      >
+                        <span className="w-5 h-5 rounded-full border-2 border-[var(--oat-border)] flex items-center justify-center mr-4">
+                          {opt.key === q.correctAnswer && (
+                            <span className="w-2.5 h-2.5 rounded-full bg-[var(--clay-black)]" />
+                          )}
+                        </span>
+                        <span className={`${opt.key === q.correctAnswer ? "font-semibold text-[var(--clay-black)]" : "text-[var(--clay-black)]"}`}>
+                          {opt.text}
+                        </span>
+                        {opt.key === q.correctAnswer && (
+                          <span className="ml-auto text-xs font-bold text-[var(--matcha-800)] bg-[var(--matcha-300)] px-2 py-1 rounded-full">
+                            Benar
+                          </span>
+                        )}
+                      </label>
+                    ))}
+                  </div>
+                )}
+                {!("options" in q) && (
+                  <div className="p-4 rounded-[var(--radius-md)] border-2 border-[var(--matcha-300)] bg-[var(--matcha-300)]/30 text-sm">
+                    <span className="font-semibold text-[var(--matcha-800)]">Jawaban: </span>
+                    <span className="text-[var(--matcha-800)]">{q.correctAnswer}</span>
+                  </div>
+                )}
+                <div className="text-sm text-[var(--warm-charcoal)]">
+                  <span className="font-medium text-[var(--clay-black)]">Penjelasan: </span>
+                  {q.explanation}
+                </div>
+                <div className="flex gap-2 flex-wrap">
+                  {q.skillTags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="px-3 py-1 rounded-full bg-[var(--oat-light)] text-xs font-medium text-[var(--warm-charcoal)]"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/routes/index.tsx

@@ -1,50 +1,156 @@
 import { useQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
-
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent } from "@labas/ui/components/card";
 
 export const Route = createFileRoute("/")({
   component: HomeComponent,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
 });
 
-const TITLE_TEXT = `
- ██████╗ ███████╗████████╗████████╗███████╗██████╗
- ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
- ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝
- ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗
- ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║
- ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝
-
- ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗
- ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
-    ██║       ███████╗   ██║   ███████║██║     █████╔╝
-    ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗
-    ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗
-    ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
- `;
+function MaterialIcon({ name, className = "text-xl" }: { name: string; className?: string }) {
+  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
+}
 
 function HomeComponent() {
-  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+  const { session } = Route.useRouteContext();
+  const privateData = useQuery(trpc.privateData.queryOptions());
 
   return (
-    <div className="container mx-auto max-w-3xl px-4 py-2">
-      <pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
-      <div className="grid gap-6">
-        <section className="rounded-lg border p-4">
-          <h2 className="mb-2 font-medium">API Status</h2>
-          <div className="flex items-center gap-2">
-            <div
-              className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
-            />
-            <span className="text-sm text-muted-foreground">
-              {healthCheck.isLoading
-                ? "Checking..."
-                : healthCheck.data
-                  ? "Connected"
-                  : "Disconnected"}
-            </span>
-          </div>
-        </section>
+    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-6xl mx-auto bg-[var(--warm-cream)]">
+      <section className="mb-10">
+        <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+          Labas
+        </h1>
+        <p className="text-lg text-[var(--warm-charcoal)] mt-2">
+          Halo, {session.data?.user.name ?? "Pengguna"}! Platform latihan ujian bahasa dengan AI.
+        </p>
+      </section>
+
+      {/* Quick Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
+        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-6">
+            <div className="flex items-center gap-4">
+              <div className="h-12 w-12 bg-[var(--matcha-300)] rounded-[var(--radius-lg)] flex items-center justify-center">
+                <MaterialIcon name="assignment" className="text-xl text-[var(--matcha-800)]" />
+              </div>
+              <div>
+                <p className="text-sm text-[var(--warm-charcoal)]">Soal Dikerjakan</p>
+                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">0</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-6">
+            <div className="flex items-center gap-4">
+              <div className="h-12 w-12 bg-[var(--slushie-500)] rounded-[var(--radius-lg)] flex items-center justify-center">
+                <MaterialIcon name="timer" className="text-xl text-[var(--clay-black)]" />
+              </div>
+              <div>
+                <p className="text-sm text-[var(--warm-charcoal)]">Waktu Latihan</p>
+                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">0 jam</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-6">
+            <div className="flex items-center gap-4">
+              <div className="h-12 w-12 bg-[var(--lemon-400)] rounded-[var(--radius-lg)] flex items-center justify-center">
+                <MaterialIcon name="percent" className="text-xl text-[var(--lemon-800)]" />
+              </div>
+              <div>
+                <p className="text-sm text-[var(--warm-charcoal)]">Akurasi Rata-rata</p>
+                <p className="text-2xl font-bold text-[var(--clay-black)] font-headline">-</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="flex flex-col md:flex-row gap-4 mb-10">
+        <Link to="/generate">
+          <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] h-11 px-6 clay-shadow clay-hover">
+            <MaterialIcon name="auto_awesome" />
+            <span className="ml-2">Generate Soal Baru</span>
+          </Button>
+        </Link>
+        <Link to="/settings">
+          <Button variant="outline" className="rounded-[var(--radius-lg)] h-11 px-6 border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] clay-hover">
+            <MaterialIcon name="key" />
+            <span className="ml-2">Atur API Key</span>
+          </Button>
+        </Link>
+      </div>
+
+      {/* Feature Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <Link to="/generate" className="block">
+          <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
+            <CardContent className="p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="h-10 w-10 bg-[var(--matcha-300)] rounded-[var(--radius-md)] flex items-center justify-center">
+                  <MaterialIcon name="auto_awesome" className="text-xl text-[var(--matcha-800)]" />
+                </div>
+                <h3 className="font-headline text-lg font-bold text-[var(--clay-black)]">AI Generator</h3>
+              </div>
+              <p className="text-sm text-[var(--warm-charcoal)]">
+                Generate soal dengan AI menggunakan API key sendiri. Dua mode: Quick dan Agentic.
+              </p>
+            </CardContent>
+          </Card>
+        </Link>
+
+        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-dashed border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full opacity-70">
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="h-10 w-10 bg-[var(--oat-light)] rounded-[var(--radius-md)] flex items-center justify-center">
+                <MaterialIcon name="database" className="text-xl text-[var(--warm-silver)]" />
+              </div>
+              <h3 className="font-headline text-lg font-bold text-[var(--warm-silver)]">Bank Soal</h3>
+            </div>
+            <p className="text-sm text-[var(--warm-silver)]">
+              Simpan, publikasikan, dan gunakan ulang soal. Segera hadir.
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-dashed border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full opacity-70">
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="h-10 w-10 bg-[var(--oat-light)] rounded-[var(--radius-md)] flex items-center justify-center">
+                <MaterialIcon name="analytics" className="text-xl text-[var(--warm-silver)]" />
+              </div>
+              <h3 className="font-headline text-lg font-bold text-[var(--warm-silver)]">Analytics</h3>
+            </div>
+            <p className="text-sm text-[var(--warm-silver)]">
+              Evaluasi per-section, identifikasi kelemahan. Segera hadir.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* API Status */}
+      <div className="mt-10 flex items-center gap-2 text-sm text-[var(--warm-charcoal)]">
+        <div className={`h-2 w-2 rounded-full ${privateData.data ? "bg-[var(--matcha-600)]" : "bg-[var(--pomegranate-400)]"}`} />
+        <span>
+          {privateData.isLoading
+            ? "Checking..."
+            : privateData.data
+              ? "Server Connected"
+              : "Server Disconnected"}
+        </span>
       </div>
     </div>
   );

apps/web/src/routes/settings.tsx

@@ -0,0 +1,184 @@
+import { useState } from "react";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+import { useApiKey } from "@/hooks/use-api-key";
+import { Button } from "@labas/ui/components/button";
+import { Input } from "@labas/ui/components/input";
+import { Label } from "@labas/ui/components/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
+
+export const Route = createFileRoute("/settings")({
+  component: RouteComponent,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      redirect({ to: "/login", throw: true });
+    }
+    return { session };
+  },
+});
+
+function MaterialIcon({ name }: { name: string }) {
+  return <span className="material-symbols-outlined text-xl">{name}</span>;
+}
+
+function RouteComponent() {
+  const { storedKey, isLoading, saveKey, removeKey, hasKey } = useApiKey();
+
+  const [provider, setProvider] = useState(storedKey?.provider ?? "openai");
+  const [baseUrl, setBaseUrl] = useState(storedKey?.baseUrl ?? "https://api.openai.com/v1");
+  const [apiKey, setApiKey] = useState("");
+  const [modelName, setModelName] = useState(storedKey?.modelName ?? "gpt-4o-mini");
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleSave = async () => {
+    if (!apiKey) return;
+    setIsSaving(true);
+    try {
+      await saveKey({ provider, baseUrl, apiKey, modelName });
+      setApiKey("");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-5xl mx-auto bg-[var(--warm-cream)]">
+      <section className="mb-10">
+        <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">Pengaturan</h1>
+        <p className="text-lg text-[var(--warm-charcoal)] mt-2">Kelola API key dan preferensi akun.</p>
+      </section>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
+        <div className="lg:col-span-7 space-y-8">
+          <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <MaterialIcon name="key" />
+                <CardTitle className="font-headline text-[var(--clay-black)]">
+                  {hasKey ? "Update API Key" : "Tambah API Key"}
+                </CardTitle>
+              </div>
+              <CardDescription className="text-[var(--warm-charcoal)]">
+                API key disimpan terenkripsi di browser (localStorage + IndexedDB). Server tidak pernah menyimpan key.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-5">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="provider" className="text-[var(--clay-black)]">Provider</Label>
+                  <select
+                    id="provider"
+                    className="flex h-10 w-full rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--clay-black)] focus-visible:ring-offset-2 text-[var(--clay-black)]"
+                    value={provider}
+                    onChange={(e) => setProvider(e.target.value)}
+                  >
+                    <option value="openai">OpenAI</option>
+                    <option value="anthropic">Anthropic</option>
+                    <option value="google">Google</option>
+                    <option value="openrouter">OpenRouter</option>
+                    <option value="groq">Groq</option>
+                    <option value="custom">Custom</option>
+                  </select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="model" className="text-[var(--clay-black)]">Model</Label>
+                  <Input
+                    id="model"
+                    value={modelName}
+                    onChange={(e) => setModelName(e.target.value)}
+                    placeholder="gpt-4o-mini"
+                    className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="baseUrl" className="text-[var(--clay-black)]">Base URL</Label>
+                <Input
+                  id="baseUrl"
+                  value={baseUrl}
+                  onChange={(e) => setBaseUrl(e.target.value)}
+                  placeholder="https://api.openai.com/v1"
+                  className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="apiKey" className="text-[var(--clay-black)]">
+                  {hasKey ? "API Key Baru (kosongkan jika tidak diubah)" : "API Key"}
+                </Label>
+                <Input
+                  id="apiKey"
+                  type="password"
+                  value={apiKey}
+                  onChange={(e) => setApiKey(e.target.value)}
+                  placeholder={hasKey ? "••••••••" : "sk-..."}
+                  className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)]"
+                />
+              </div>
+
+              <div className="flex gap-3">
+                <Button
+                  onClick={handleSave}
+                  disabled={(!apiKey && !hasKey) || isSaving}
+                  className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] h-11 clay-shadow clay-hover"
+                >
+                  {isSaving ? "Menyimpan..." : hasKey ? "Update Key" : "Simpan API Key"}
+                </Button>
+                {hasKey && (
+                  <Button
+                    variant="outline"
+                    onClick={removeKey}
+                    className="rounded-[var(--radius-lg)] h-11 border-2 border-[var(--oat-border)] text-[var(--pomegranate-400)] hover:bg-[var(--pomegranate-400)]/10 clay-hover"
+                  >
+                    Hapus Key
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="lg:col-span-5">
+          <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] sticky top-8">
+            <CardHeader>
+              <CardTitle className="font-headline text-[var(--clay-black)]">Status API Key</CardTitle>
+              <CardDescription className="text-[var(--warm-charcoal)]">Informasi penyimpanan key.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {isLoading ? (
+                <p className="text-[var(--warm-charcoal)]">Memuat...</p>
+              ) : hasKey ? (
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3 p-4 bg-[var(--matcha-300)] rounded-[var(--radius-lg)]">
+                    <MaterialIcon name="check_circle" />
+                    <div>
+                      <p className="font-medium text-[var(--matcha-800)]">Key Tersimpan</p>
+                      <p className="text-sm text-[var(--matcha-800)]/70">
+                        {storedKey?.provider} · {storedKey?.modelName}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="text-xs text-[var(--warm-charcoal)] space-y-1">
+                    <p>• Disimpan terenkripsi di localStorage</p>
+                    <p>• Key enkripsi disimpan di IndexedDB</p>
+                    <p>• Server tidak pernah menyimpan key</p>
+                  </div>
+                </div>
+              ) : (
+                <div className="text-center py-8">
+                  <MaterialIcon name="key_off" />
+                  <p className="text-[var(--warm-charcoal)] mt-2">Belum ada API key.</p>
+                  <p className="text-xs text-[var(--warm-charcoal)] mt-1">
+                    Tambahkan key untuk mulai generate soal.
+                  </p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/tsconfig.json

@@ -11,7 +11,9 @@
     "rootDirs": ["."],
     "paths": {
       "@/*": ["./src/*"],
-      "@labas/ui/*": ["../../packages/ui/src/*"]
+      "@labas/ui/*": ["../../packages/ui/src/*"],
+      "@labas/ai": ["../../packages/ai/src/index.ts"],
+      "@labas/ai/*": ["../../packages/ai/src/*.ts"]
     }
   }
 }

bun.lock

@@ -42,6 +42,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@hookform/resolvers": "^5.2.2",
+        "@labas/ai": "workspace:*",
         "@labas/api": "workspace:*",
         "@labas/auth": "workspace:*",
         "@labas/env": "workspace:*",
@@ -55,6 +56,7 @@
         "@trpc/tanstack-react-query": "^11.16.0",
         "better-auth": "catalog:",
         "dotenv": "catalog:",
+        "flag-icons": "^7.5.0",
         "lucide-react": "^1.8.0",
         "next-themes": "catalog:",
         "react": "^19.2.5",
@@ -79,15 +81,27 @@
         "vite": "^8.0.8",
       },
     },
+    "packages/ai": {
+      "name": "@labas/ai",
+      "dependencies": {
+        "zod": "catalog:",
+      },
+      "devDependencies": {
+        "@labas/config": "workspace:*",
+        "typescript": "catalog:",
+      },
+    },
     "packages/api": {
       "name": "@labas/api",
       "dependencies": {
+        "@labas/ai": "workspace:*",
         "@labas/auth": "workspace:*",
         "@labas/db": "workspace:*",
         "@labas/env": "workspace:*",
         "@trpc/client": "catalog:",
         "@trpc/server": "catalog:",
         "dotenv": "catalog:",
+        "drizzle-orm": "^0.45.1",
         "zod": "catalog:",
       },
       "devDependencies": {
@@ -542,6 +556,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@labas/ai": ["@labas/ai@workspace:packages/ai"],
+
     "@labas/api": ["@labas/api@workspace:packages/api"],
 
     "@labas/auth": ["@labas/auth@workspace:packages/auth"],
@@ -1036,6 +1052,8 @@
 
     "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=="],
 
+    "flag-icons": ["flag-icons@7.5.0", "", {}, "sha512-kd+MNXviFIg5hijH766tt+3x76ele1AXlo4zDdCxIvqWZhKt4T83bOtxUOOMlTx/EcFdUMH5yvQgYlFh1EqqFg=="],
+
     "for-each": ["for-each@0.3.5", "", { "dependencies": { "is-callable": "^1.2.7" } }, "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg=="],
 
     "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
@@ -1662,7 +1680,7 @@
 
     "tough-cookie": ["tough-cookie@6.0.1", "", { "dependencies": { "tldts": "^7.0.5" } }, "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw=="],
 
-    "tr46": ["tr46@1.0.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA=="],
+    "tr46": ["tr46@5.1.1", "", { "dependencies": { "punycode": "^2.3.1" } }, "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw=="],
 
     "tree-kill": ["tree-kill@1.2.2", "", { "bin": { "tree-kill": "cli.js" } }, "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="],
 
@@ -1744,11 +1762,11 @@
 
     "web-streams-polyfill": ["web-streams-polyfill@3.3.3", "", {}, "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="],
 
-    "webidl-conversions": ["webidl-conversions@4.0.2", "", {}, "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="],
+    "webidl-conversions": ["webidl-conversions@7.0.0", "", {}, "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="],
 
     "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
 
-    "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=="],
+    "whatwg-url": ["whatwg-url@14.2.0", "", { "dependencies": { "tr46": "^5.1.0", "webidl-conversions": "^7.0.0" } }, "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw=="],
 
     "which": ["which@4.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg=="],
 
@@ -1900,8 +1918,6 @@
 
     "micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
-    "mongodb-connection-string-url/whatwg-url": ["whatwg-url@14.2.0", "", { "dependencies": { "tr46": "^5.1.0", "webidl-conversions": "^7.0.0" } }, "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw=="],
-
     "npm-run-path/path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],
 
     "path-scurry/lru-cache": ["lru-cache@11.3.5", "", {}, "sha512-NxVFwLAnrd9i7KUBxC4DrUhmgjzOs+1Qm50D3oF1/oL+r1NpZ4gA7xvG0/zJ8evR7zIKn4vLf7qTNduWFtCrRw=="],
@@ -2018,10 +2034,6 @@
 
     "filelist/minimatch/brace-expansion": ["brace-expansion@2.1.0", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w=="],
 
-    "mongodb-connection-string-url/whatwg-url/tr46": ["tr46@5.1.1", "", { "dependencies": { "punycode": "^2.3.1" } }, "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw=="],
-
-    "mongodb-connection-string-url/whatwg-url/webidl-conversions": ["webidl-conversions@7.0.0", "", {}, "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="],
-
     "rolldown-plugin-dts/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@8.0.0-rc.3", "", {}, "sha512-AmwWFx1m8G/a5cXkxLxTiWl+YEoWuoFLUCwqMlNuWO1tqAYITQAbCRPUkyBHv1VOFgfjVOqEj6L3u15J5ZCzTA=="],
 
     "tsx/esbuild/@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.7", "", { "os": "aix", "cpu": "ppc64" }, "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg=="],
@@ -2076,6 +2088,8 @@
 
     "tsx/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.7", "", { "os": "win32", "cpu": "x64" }, "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg=="],
 
+    "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=="],
 
     "workbox-build/stringify-object/is-regexp": ["is-regexp@1.0.0", "", {}, "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA=="],
@@ -2092,6 +2106,10 @@
 
     "filelist/minimatch/brace-expansion/balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
+    "workbox-build/source-map/whatwg-url/tr46": ["tr46@1.0.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA=="],
+
+    "workbox-build/source-map/whatwg-url/webidl-conversions": ["webidl-conversions@4.0.2", "", {}, "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="],
+
     "yargs/string-width/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
   }
 }

packages/ai/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@labas/ai",
+  "type": "module",
+  "exports": {
+    ".": {
+      "default": "./src/index.ts"
+    },
+    "./schemas": {
+      "default": "./src/schemas.ts"
+    }
+  },
+  "dependencies": {
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@labas/config": "workspace:*",
+    "typescript": "catalog:"
+  }
+}

packages/ai/src/client.ts

@@ -0,0 +1,59 @@
+export interface ChatMessage {
+  role: "system" | "user" | "assistant";
+  content: string;
+}
+
+export interface ChatCompletionOptions {
+  messages: ChatMessage[];
+  model: string;
+  temperature?: number;
+  max_tokens?: number;
+  response_format?: { type: "json_object" };
+}
+
+export interface ChatCompletionResponse {
+  id: string;
+  choices: {
+    message: ChatMessage;
+    finish_reason: string;
+  }[];
+  usage?: {
+    prompt_tokens: number;
+    completion_tokens: number;
+    total_tokens: number;
+  };
+}
+
+export class OpenAICompatibleClient {
+  constructor(
+    private baseUrl: string,
+    private apiKey: string,
+  ) {}
+
+  async chatCompletion(opts: ChatCompletionOptions): Promise<ChatCompletionResponse> {
+    const url = `${this.baseUrl.replace(/\/$/, "")}/chat/completions`;
+    const body = {
+      model: opts.model,
+      messages: opts.messages,
+      temperature: opts.temperature ?? 0.7,
+      max_tokens: opts.max_tokens ?? 4096,
+      ...(opts.response_format ? { response_format: opts.response_format } : {}),
+    };
+
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${this.apiKey}`,
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(`OpenAI-compatible API error ${res.status}: ${text}`);
+    }
+
+    return res.json() as Promise<ChatCompletionResponse>;
+  }
+}

packages/ai/src/index.ts

@@ -0,0 +1,4 @@
+export { OpenAICompatibleClient } from "./client";
+export { generateQuestionsQuick } from "./pipeline";
+export { buildQuickModePrompt } from "./prompts";
+export * from "./schemas";

packages/ai/src/pipeline.ts

@@ -0,0 +1,85 @@
+import { OpenAICompatibleClient } from "./client";
+import { buildQuickModePrompt } from "./prompts";
+import {
+  questionSchema,
+  type GenerationInput,
+  type GenerationResult,
+} from "./schemas";
+
+export async function generateQuestionsQuick(
+  input: GenerationInput,
+): Promise<GenerationResult> {
+  const start = Date.now();
+  const client = new OpenAICompatibleClient(
+    input.apiKeyConfig.baseUrl,
+    input.apiKeyConfig.apiKey,
+  );
+
+  const prompt = buildQuickModePrompt(input);
+
+  const response = await client.chatCompletion({
+    model: input.apiKeyConfig.model,
+    messages: [
+      {
+        role: "system",
+        content:
+          "You are a precise exam question generator. You always return valid JSON. You never include markdown formatting around the JSON.",
+      },
+      { role: "user", content: prompt },
+    ],
+    temperature: 0.7,
+    max_tokens: 4096,
+    response_format: { type: "json_object" },
+  });
+
+  const content = response.choices[0]?.message.content;
+  if (!content) {
+    throw new Error("Empty response from AI");
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(content);
+  } catch {
+    // Sometimes LLM wraps in markdown — strip it
+    const cleaned = content
+      .replace(/^```json\s*/, "")
+      .replace(/```\s*$/, "")
+      .trim();
+    parsed = JSON.parse(cleaned);
+  }
+
+  if (!parsed || typeof parsed !== "object") {
+    throw new Error("Invalid JSON response from AI");
+  }
+
+  const raw = parsed as Record<string, unknown>;
+  if (!Array.isArray(raw.questions)) {
+    throw new Error("Missing 'questions' array in AI response");
+  }
+
+  const questions = raw.questions
+    .map((q: unknown) => {
+      try {
+        return questionSchema.parse(q);
+      } catch (e) {
+        console.warn("Question validation failed:", e);
+        return null;
+      }
+    })
+    .filter((q): q is NonNullable<typeof q> => q !== null);
+
+  if (questions.length === 0) {
+    throw new Error("No valid questions generated");
+  }
+
+  return {
+    questions,
+    meta: {
+      model: input.apiKeyConfig.model,
+      tokensUsed: response.usage?.total_tokens,
+      durationMs: Date.now() - start,
+      mode: "quick",
+    },
+  };
+}

packages/ai/src/prompts.ts

@@ -0,0 +1,174 @@
+import type { GenerationInput } from "./schemas";
+
+export function buildQuickModePrompt(input: GenerationInput): string {
+  const { examType, section, formats, difficulty, topics, questionCount } = input;
+
+  const formatDescriptions: Record<string, string> = {
+    multiple_choice: `{
+      "format": "multiple_choice",
+      "passageText": "...",
+      "questionText": "...",
+      "options": [{"key": "A", "text": "..."}, {"key": "B", "text": "..."}, ...],
+      "correctAnswer": "A",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["..."]
+    }`,
+    true_false_not_given: `{
+      "format": "true_false_not_given",
+      "passageText": "...",
+      "questionText": "...",
+      "correctAnswer": "TRUE" | "FALSE" | "NOT_GIVEN",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["..."]
+    }`,
+    fill_blank: `{
+      "format": "fill_blank",
+      "passageText": "...",
+      "questionText": "Fill in the blank: ...",
+      "correctAnswer": "exact text",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["..."]
+    }`,
+    synonym: `{
+      "format": "synonym",
+      "passageText": "...",
+      "questionText": "The word '___' in the passage is closest in meaning to:",
+      "options": [{"key": "A", "text": "..."}, ...],
+      "correctAnswer": "A",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["vocabulary", "synonym"]
+    }`,
+    grammar_in_context: `{
+      "format": "grammar_in_context",
+      "passageText": "...",
+      "questionText": "...",
+      "options": [{"key": "A", "text": "..."}, ...],
+      "correctAnswer": "A",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["grammar"]
+    }`,
+    sentence_completion: `{
+      "format": "sentence_completion",
+      "passageText": "...",
+      "questionText": "...",
+      "options": [{"key": "A", "text": "..."}, ...],
+      "correctAnswer": "A",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["..."]
+    }`,
+    cloze: `{
+      "format": "cloze",
+      "passageText": "...",
+      "questionText": "Fill each blank with the correct option:",
+      "options": [{"key": "A", "text": "..."}, ...],
+      "correctAnswer": "serialized mapping of blank index to option key",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["grammar", "vocabulary"]
+    }`,
+    reference: `{
+      "format": "reference",
+      "passageText": "...",
+      "questionText": "The word 'it' in paragraph X refers to:",
+      "options": [{"key": "A", "text": "..."}, ...],
+      "correctAnswer": "A",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["reference", "inference"]
+    }`,
+    author_view: `{
+      "format": "author_view",
+      "passageText": "...",
+      "questionText": "...",
+      "correctAnswer": "YES" | "NO" | "NOT_GIVEN",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["inference", "author_view"]
+    }`,
+    matching_headings: `{
+      "format": "matching_headings",
+      "passageText": "...",
+      "questionText": "Match each paragraph to a heading:",
+      "options": [{"key": "i", "text": "..."}, ...],
+      "correctAnswer": "serialized mapping of paragraph to heading key",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["main_idea", "matching"]
+    }`,
+    kanji_reading: `{
+      "format": "kanji_reading",
+      "passageText": "...",
+      "questionText": "How is the kanji '...' read in this context?",
+      "options": [{"key": "A", "text": "..."}, ...],
+      "correctAnswer": "A",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["kanji", "reading"]
+    }`,
+    particle_choice: `{
+      "format": "particle_choice",
+      "passageText": "...",
+      "questionText": "Which particle fits the blank?",
+      "options": [{"key": "A", "text": "..."}, ...],
+      "correctAnswer": "A",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["grammar", "particle"]
+    }`,
+    article_case: `{
+      "format": "article_case",
+      "passageText": "...",
+      "questionText": "Which article/case fits the blank?",
+      "options": [{"key": "A", "text": "..."}, ...],
+      "correctAnswer": "A",
+      "explanation": "...",
+      "difficulty": ${difficulty},
+      "skillTags": ["grammar", "article", "case"]
+    }`,
+  };
+
+  const formatExamples = formats
+    .map((f) => formatDescriptions[f] || formatDescriptions["multiple_choice"])
+    .join("\n\n---\n\n");
+
+  return `You are an expert exam question writer for ${examType} ${section.toLowerCase()} section.
+
+Generate ${questionCount} authentic, high-quality reading comprehension questions.
+
+EXAM: ${examType}
+SECTION: ${section}
+DIFFICULTY: ${difficulty}/5
+TOPICS: ${topics.join(", ")}
+
+INSTRUCTIONS:
+- The reading passage must be written in the target language of the exam (${examType === "JLPT" ? "Japanese" : examType === "HSK" ? "Chinese" : examType === "GOETHE" ? "German" : "English"}).
+- Passage length should be appropriate for the exam type and difficulty.
+- Each question must have:
+  * a reading passage (passageText)
+  * a clear question prompt (questionText)
+  * a correct answer (correctAnswer)
+  * an explanation (explanation)
+  * difficulty level (${difficulty})
+  * relevant skill tags (skillTags)
+- Questions should test real comprehension, not just surface-level recall.
+- For multiple choice: always provide 4 options labeled A, B, C, D.
+- Options must be plausible distractors — one clearly correct answer.
+
+OUTPUT FORMAT:
+Return ONLY a valid JSON object with this exact structure (no markdown code blocks, no extra text):
+
+{
+  "questions": [
+${formatExamples}
+  ]
+}
+
+You may reuse the same passage for multiple questions, or generate a new passage per question — whichever is more natural for the exam type.
+`;
+}

packages/ai/src/schemas.ts

@@ -0,0 +1,194 @@
+import { z } from "zod";
+
+// ── Shared Schemas ─────────────────────────────────────────
+
+export const examTypeSchema = z.enum(["IELTS", "TOEFL", "JLPT", "HSK", "GOETHE"]);
+export const sectionTypeSchema = z.enum(["READING", "WRITING", "LISTENING", "SPEAKING"]);
+
+export const questionFormatSchema = z.enum([
+  "multiple_choice",
+  "true_false_not_given",
+  "matching_headings",
+  "matching_information",
+  "fill_blank",
+  "synonym",
+  "grammar_in_context",
+  "sentence_completion",
+  "summary_completion",
+  "cloze",
+  "reference",
+  "author_view",
+  "kanji_reading",
+  "particle_choice",
+  "article_case",
+]);
+
+export const difficultySchema = z.number().int().min(1).max(5);
+
+export const aiKeyConfigSchema = z.object({
+  baseUrl: z.string().url(),
+  apiKey: z.string().min(1),
+  model: z.string().min(1),
+});
+
+// ── Question Option Schemas ────────────────────────────────
+
+export const multipleChoiceOptionSchema = z.object({
+  key: z.string(),
+  text: z.string(),
+});
+
+export const matchingPairSchema = z.object({
+  left: z.string(),
+  right: z.string(),
+});
+
+// ── Base Question Schema ───────────────────────────────────
+
+export const baseQuestionSchema = z.object({
+  format: questionFormatSchema,
+  passageText: z.string().min(50),
+  questionText: z.string().min(10),
+  correctAnswer: z.string(),
+  explanation: z.string(),
+  difficulty: difficultySchema,
+  skillTags: z.array(z.string()).min(1),
+});
+
+// ── Format-Specific Question Schemas ───────────────────────
+
+export const multipleChoiceQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("multiple_choice"),
+  options: z.array(multipleChoiceOptionSchema).min(2).max(6),
+  correctAnswer: z.string(), // key of the correct option
+});
+
+export const trueFalseQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("true_false_not_given"),
+  correctAnswer: z.enum(["TRUE", "FALSE", "NOT_GIVEN"]),
+});
+
+export const matchingHeadingsQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("matching_headings"),
+  options: z.array(multipleChoiceOptionSchema), // headings to match
+  correctAnswer: z.string(), // serialized mapping
+});
+
+export const matchingInformationQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("matching_information"),
+  options: z.array(multipleChoiceOptionSchema),
+  correctAnswer: z.string(),
+});
+
+export const fillBlankQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("fill_blank"),
+  correctAnswer: z.string(), // exact text to fill
+});
+
+export const synonymQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("synonym"),
+  options: z.array(multipleChoiceOptionSchema).min(2).max(6),
+  correctAnswer: z.string(), // key of synonym option
+});
+
+export const grammarInContextQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("grammar_in_context"),
+  options: z.array(multipleChoiceOptionSchema).min(2).max(6),
+  correctAnswer: z.string(),
+});
+
+export const sentenceCompletionQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("sentence_completion"),
+  options: z.array(multipleChoiceOptionSchema).min(2).max(6),
+  correctAnswer: z.string(),
+});
+
+export const summaryCompletionQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("summary_completion"),
+  options: z.array(multipleChoiceOptionSchema).min(2),
+  correctAnswer: z.string(), // serialized answers
+});
+
+export const clozeQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("cloze"),
+  options: z.array(multipleChoiceOptionSchema).min(2),
+  correctAnswer: z.string(), // serialized answers for each blank
+});
+
+export const referenceQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("reference"),
+  options: z.array(multipleChoiceOptionSchema).min(2).max(6),
+  correctAnswer: z.string(), // key of correct reference
+});
+
+export const authorViewQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("author_view"),
+  correctAnswer: z.enum(["YES", "NO", "NOT_GIVEN"]),
+});
+
+export const kanjiReadingQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("kanji_reading"),
+  options: z.array(multipleChoiceOptionSchema).min(2).max(6),
+  correctAnswer: z.string(),
+});
+
+export const particleChoiceQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("particle_choice"),
+  options: z.array(multipleChoiceOptionSchema).min(2).max(6),
+  correctAnswer: z.string(),
+});
+
+export const articleCaseQuestionSchema = baseQuestionSchema.extend({
+  format: z.literal("article_case"),
+  options: z.array(multipleChoiceOptionSchema).min(2).max(6),
+  correctAnswer: z.string(),
+});
+
+// ── Unified Question Schema ───────────────────���────────────
+
+export const questionSchema = z.discriminatedUnion("format", [
+  multipleChoiceQuestionSchema,
+  trueFalseQuestionSchema,
+  matchingHeadingsQuestionSchema,
+  matchingInformationQuestionSchema,
+  fillBlankQuestionSchema,
+  synonymQuestionSchema,
+  grammarInContextQuestionSchema,
+  sentenceCompletionQuestionSchema,
+  summaryCompletionQuestionSchema,
+  clozeQuestionSchema,
+  referenceQuestionSchema,
+  authorViewQuestionSchema,
+  kanjiReadingQuestionSchema,
+  particleChoiceQuestionSchema,
+  articleCaseQuestionSchema,
+]);
+
+export type Question = z.infer<typeof questionSchema>;
+
+// ── Generation Input / Output ──────────────────────────────
+
+export const generationInputSchema = z.object({
+  examType: examTypeSchema,
+  section: sectionTypeSchema,
+  formats: z.array(questionFormatSchema).min(1),
+  difficulty: difficultySchema,
+  topics: z.array(z.string()).min(1),
+  questionCount: z.number().int().min(1).max(20),
+  mode: z.enum(["quick", "agentic"]).default("quick"),
+  apiKeyConfig: aiKeyConfigSchema,
+});
+
+export type GenerationInput = z.infer<typeof generationInputSchema>;
+
+export const generationResultSchema = z.object({
+  questions: z.array(questionSchema),
+  meta: z.object({
+    model: z.string(),
+    tokensUsed: z.number().optional(),
+    durationMs: z.number(),
+    mode: z.enum(["quick", "agentic"]),
+  }),
+});
+
+export type GenerationResult = z.infer<typeof generationResultSchema>;

packages/api/package.json

@@ -11,12 +11,14 @@
   },
   "scripts": {},
   "dependencies": {
+    "@labas/ai": "workspace:*",
     "@labas/auth": "workspace:*",
     "@labas/db": "workspace:*",
     "@labas/env": "workspace:*",
     "@trpc/client": "catalog:",
     "@trpc/server": "catalog:",
     "dotenv": "catalog:",
+    "drizzle-orm": "^0.45.1",
     "zod": "catalog:"
   },
   "devDependencies": {

packages/api/src/routers/ai.ts

@@ -0,0 +1,50 @@
+import { z } from "zod";
+import { router, protectedProcedure } from "../index";
+import { generateQuestionsQuick } from "@labas/ai";
+import { generationInputSchema } from "@labas/ai/schemas";
+import { db } from "@labas/db";
+import { question } from "@labas/db";
+
+export const aiRouter = router({
+  generate: protectedProcedure
+    .input(generationInputSchema)
+    .mutation(async ({ input }) => {
+      const result = await generateQuestionsQuick(input);
+      return result;
+    }),
+
+  saveQuestions: protectedProcedure
+    .input(
+      z.object({
+        examTypeId: z.string(),
+        sectionTypeId: z.string(),
+        questions: z.array(z.any()),
+        isPublic: z.boolean().default(false),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const created = await db
+        .insert(question)
+        .values(
+          input.questions.map((q: any) => ({
+            examTypeId: input.examTypeId,
+            sectionTypeId: input.sectionTypeId,
+            format: q.format,
+            passageText: q.passageText,
+            questionText: q.questionText,
+            options: q.options ?? null,
+            correctAnswer: q.correctAnswer,
+            explanation: q.explanation,
+            difficulty: q.difficulty,
+            skillTags: q.skillTags,
+            source: "ai" as const,
+            aiModel: q.aiModel ?? null,
+            creatorUserId: ctx.session.user.id,
+            isPublic: input.isPublic,
+          })),
+        )
+        .returning();
+
+      return created;
+    }),
+});

packages/api/src/routers/index.ts

@@ -1,4 +1,7 @@
 import { protectedProcedure, publicProcedure, router } from "../index";
+import { aiRouter } from "./ai";
+import { questionRouter } from "./question";
+import { settingsRouter } from "./settings";
 
 export const appRouter = router({
   healthCheck: publicProcedure.query(() => {
@@ -10,5 +13,9 @@ export const appRouter = router({
       user: ctx.session.user,
     };
   }),
+  ai: aiRouter,
+  question: questionRouter,
+  settings: settingsRouter,
 });
+
 export type AppRouter = typeof appRouter;

packages/api/src/routers/question.ts

@@ -0,0 +1,98 @@
+import { z } from "zod";
+import { eq, and, desc } from "drizzle-orm";
+import { router, protectedProcedure, publicProcedure } from "../index";
+import { db } from "@labas/db";
+import { question } from "@labas/db";
+
+export const questionRouter = router({
+  list: publicProcedure
+    .input(
+      z
+        .object({
+          examTypeId: z.string().optional(),
+          sectionTypeId: z.string().optional(),
+          format: z.string().optional(),
+          difficulty: z.number().optional(),
+          isPublic: z.boolean().optional(),
+          search: z.string().optional(),
+          limit: z.number().min(1).max(50).default(20),
+          offset: z.number().min(0).default(0),
+        })
+        .optional(),
+    )
+    .query(async ({ ctx, input }) => {
+      const userId = ctx.session?.user.id;
+      const conditions = [];
+
+      if (input?.examTypeId) conditions.push(eq(question.examTypeId, input.examTypeId));
+      if (input?.sectionTypeId) conditions.push(eq(question.sectionTypeId, input.sectionTypeId));
+      if (input?.format) conditions.push(eq(question.format, input.format));
+      if (input?.difficulty) conditions.push(eq(question.difficulty, input.difficulty));
+
+      if (input?.isPublic !== undefined) {
+        conditions.push(eq(question.isPublic, input.isPublic));
+      } else if (!userId) {
+        conditions.push(eq(question.isPublic, true));
+      }
+
+      const where = conditions.length > 0 ? and(...conditions) : undefined;
+
+      const rows = await db
+        .select()
+        .from(question)
+        .where(where)
+        .orderBy(desc(question.createdAt))
+        .limit(input?.limit ?? 20)
+        .offset(input?.offset ?? 0);
+
+      return rows;
+    }),
+
+  getById: publicProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .query(async ({ input }) => {
+      const [row] = await db
+        .select()
+        .from(question)
+        .where(eq(question.id, input.id))
+        .limit(1);
+      return row ?? null;
+    }),
+
+  create: protectedProcedure
+    .input(
+      z.object({
+        examTypeId: z.string(),
+        sectionTypeId: z.string(),
+        format: z.string(),
+        passageText: z.string().min(1),
+        questionText: z.string().min(1),
+        options: z.any().optional(),
+        correctAnswer: z.string(),
+        explanation: z.string().optional(),
+        difficulty: z.number().min(1).max(5).default(3),
+        skillTags: z.array(z.string()).default([]),
+        isPublic: z.boolean().default(false),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const [row] = await db
+        .insert(question)
+        .values({
+          ...input,
+          source: "manual",
+          creatorUserId: ctx.session.user.id,
+        })
+        .returning();
+      return row;
+    }),
+
+  delete: protectedProcedure
+    .input(z.object({ id: z.string().uuid() }))
+    .mutation(async ({ ctx, input }) => {
+      await db
+        .delete(question)
+        .where(and(eq(question.id, input.id), eq(question.creatorUserId, ctx.session.user.id)));
+      return { success: true };
+    }),
+});

packages/api/src/routers/settings.ts

@@ -0,0 +1,13 @@
+import { router, protectedProcedure } from "../index";
+
+export const settingsRouter = router({
+  // Placeholder for future settings endpoints (profile, preferences, etc.)
+  getProfile: protectedProcedure.query(({ ctx }) => {
+    return {
+      id: ctx.session.user.id,
+      name: ctx.session.user.name,
+      email: ctx.session.user.email,
+      image: ctx.session.user.image,
+    };
+  }),
+});

packages/db/src/index.ts

@@ -8,3 +8,4 @@ export function createDb() {
 }
 
 export const db = createDb();
+export * from "./schema";

packages/db/src/migrations/0000_amazing_gamora.sql

@@ -0,0 +1,241 @@
+CREATE TABLE "answer" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"section_result_id" uuid NOT NULL,
+	"question_id" uuid NOT NULL,
+	"user_answer" text,
+	"is_correct" boolean,
+	"time_spent_sec" integer,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	CONSTRAINT "answer_unique_idx" UNIQUE("section_result_id","question_id")
+);
+--> statement-breakpoint
+CREATE TABLE "combo_package" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"title" text NOT NULL,
+	"description" text,
+	"creator_user_id" text NOT NULL,
+	"is_public" boolean DEFAULT false NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "combo_section" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"combo_id" uuid NOT NULL,
+	"source_package_id" uuid NOT NULL,
+	"source_section_id" uuid NOT NULL,
+	"order_index" integer DEFAULT 0 NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "exam_type" (
+	"id" text PRIMARY KEY NOT NULL,
+	"name" text NOT NULL,
+	"language" text NOT NULL,
+	"description" text
+);
+--> statement-breakpoint
+CREATE TABLE "package_section" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"package_id" uuid NOT NULL,
+	"section_type_id" text NOT NULL,
+	"title" text NOT NULL,
+	"order_index" integer DEFAULT 0 NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "question" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"exam_type_id" text NOT NULL,
+	"section_type_id" text NOT NULL,
+	"format" text NOT NULL,
+	"passage_text" text NOT NULL,
+	"question_text" text NOT NULL,
+	"options" jsonb,
+	"correct_answer" text NOT NULL,
+	"explanation" text,
+	"difficulty" integer DEFAULT 3 NOT NULL,
+	"skill_tags" text[] DEFAULT '{}',
+	"source" text DEFAULT 'manual' NOT NULL,
+	"ai_model" text,
+	"ai_prompt_used" text,
+	"creator_user_id" text NOT NULL,
+	"is_public" boolean DEFAULT false NOT NULL,
+	"usage_count" integer DEFAULT 0 NOT NULL,
+	"avg_rating" integer,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "question_rating" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"user_id" text NOT NULL,
+	"question_id" uuid NOT NULL,
+	"score" integer NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	CONSTRAINT "questionRating_unique_idx" UNIQUE("user_id","question_id")
+);
+--> statement-breakpoint
+CREATE TABLE "section_question" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"section_id" uuid NOT NULL,
+	"question_id" uuid NOT NULL,
+	"order_index" integer DEFAULT 0 NOT NULL,
+	CONSTRAINT "sectionQuestion_unique_idx" UNIQUE("section_id","question_id")
+);
+--> statement-breakpoint
+CREATE TABLE "section_result" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"attempt_id" uuid NOT NULL,
+	"section_type_id" text NOT NULL,
+	"score" integer,
+	"max_score" integer,
+	"time_spent_sec" integer,
+	"created_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "section_type" (
+	"id" text PRIMARY KEY NOT NULL,
+	"name" text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "test_attempt" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"user_id" text NOT NULL,
+	"package_id" uuid,
+	"combo_id" uuid,
+	"started_at" timestamp DEFAULT now() NOT NULL,
+	"finished_at" timestamp,
+	"total_score" integer,
+	"max_score" integer,
+	"status" text DEFAULT 'in_progress' NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "test_package" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"title" text NOT NULL,
+	"description" text,
+	"exam_type_id" text NOT NULL,
+	"creator_user_id" text NOT NULL,
+	"is_public" boolean DEFAULT false NOT NULL,
+	"total_questions" integer DEFAULT 0 NOT NULL,
+	"total_sections" integer DEFAULT 0 NOT NULL,
+	"estimated_duration_min" integer,
+	"usage_count" integer DEFAULT 0 NOT NULL,
+	"avg_rating" integer,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "user_api_key" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"user_id" text NOT NULL,
+	"provider" text DEFAULT 'openai' NOT NULL,
+	"base_url" text,
+	"api_key_encrypted" text NOT NULL,
+	"model_name" text DEFAULT 'gpt-4o-mini' NOT NULL,
+	"is_active" boolean DEFAULT true NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "account" (
+	"id" text PRIMARY KEY NOT NULL,
+	"account_id" text NOT NULL,
+	"provider_id" text NOT NULL,
+	"user_id" text NOT NULL,
+	"access_token" text,
+	"refresh_token" text,
+	"id_token" text,
+	"access_token_expires_at" timestamp,
+	"refresh_token_expires_at" timestamp,
+	"scope" text,
+	"password" text,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "session" (
+	"id" text PRIMARY KEY NOT NULL,
+	"expires_at" timestamp NOT NULL,
+	"token" text NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp NOT NULL,
+	"ip_address" text,
+	"user_agent" text,
+	"user_id" text NOT NULL,
+	CONSTRAINT "session_token_unique" UNIQUE("token")
+);
+--> statement-breakpoint
+CREATE TABLE "user" (
+	"id" text PRIMARY KEY NOT NULL,
+	"name" text NOT NULL,
+	"email" text NOT NULL,
+	"email_verified" boolean DEFAULT false NOT NULL,
+	"image" text,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp DEFAULT now() NOT NULL,
+	CONSTRAINT "user_email_unique" UNIQUE("email")
+);
+--> statement-breakpoint
+CREATE TABLE "verification" (
+	"id" text PRIMARY KEY NOT NULL,
+	"identifier" text NOT NULL,
+	"value" text NOT NULL,
+	"expires_at" timestamp NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "answer" ADD CONSTRAINT "answer_section_result_id_section_result_id_fk" FOREIGN KEY ("section_result_id") REFERENCES "public"."section_result"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "answer" ADD CONSTRAINT "answer_question_id_question_id_fk" FOREIGN KEY ("question_id") REFERENCES "public"."question"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "combo_package" ADD CONSTRAINT "combo_package_creator_user_id_user_id_fk" FOREIGN KEY ("creator_user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "combo_section" ADD CONSTRAINT "combo_section_combo_id_combo_package_id_fk" FOREIGN KEY ("combo_id") REFERENCES "public"."combo_package"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "combo_section" ADD CONSTRAINT "combo_section_source_package_id_test_package_id_fk" FOREIGN KEY ("source_package_id") REFERENCES "public"."test_package"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "combo_section" ADD CONSTRAINT "combo_section_source_section_id_package_section_id_fk" FOREIGN KEY ("source_section_id") REFERENCES "public"."package_section"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "package_section" ADD CONSTRAINT "package_section_package_id_test_package_id_fk" FOREIGN KEY ("package_id") REFERENCES "public"."test_package"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "package_section" ADD CONSTRAINT "package_section_section_type_id_section_type_id_fk" FOREIGN KEY ("section_type_id") REFERENCES "public"."section_type"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "question" ADD CONSTRAINT "question_exam_type_id_exam_type_id_fk" FOREIGN KEY ("exam_type_id") REFERENCES "public"."exam_type"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "question" ADD CONSTRAINT "question_section_type_id_section_type_id_fk" FOREIGN KEY ("section_type_id") REFERENCES "public"."section_type"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "question" ADD CONSTRAINT "question_creator_user_id_user_id_fk" FOREIGN KEY ("creator_user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "question_rating" ADD CONSTRAINT "question_rating_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "question_rating" ADD CONSTRAINT "question_rating_question_id_question_id_fk" FOREIGN KEY ("question_id") REFERENCES "public"."question"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "section_question" ADD CONSTRAINT "section_question_section_id_package_section_id_fk" FOREIGN KEY ("section_id") REFERENCES "public"."package_section"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "section_question" ADD CONSTRAINT "section_question_question_id_question_id_fk" FOREIGN KEY ("question_id") REFERENCES "public"."question"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "section_result" ADD CONSTRAINT "section_result_attempt_id_test_attempt_id_fk" FOREIGN KEY ("attempt_id") REFERENCES "public"."test_attempt"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "section_result" ADD CONSTRAINT "section_result_section_type_id_section_type_id_fk" FOREIGN KEY ("section_type_id") REFERENCES "public"."section_type"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "test_attempt" ADD CONSTRAINT "test_attempt_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "test_attempt" ADD CONSTRAINT "test_attempt_package_id_test_package_id_fk" FOREIGN KEY ("package_id") REFERENCES "public"."test_package"("id") ON DELETE set null ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "test_attempt" ADD CONSTRAINT "test_attempt_combo_id_combo_package_id_fk" FOREIGN KEY ("combo_id") REFERENCES "public"."combo_package"("id") ON DELETE set null ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "test_package" ADD CONSTRAINT "test_package_exam_type_id_exam_type_id_fk" FOREIGN KEY ("exam_type_id") REFERENCES "public"."exam_type"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "test_package" ADD CONSTRAINT "test_package_creator_user_id_user_id_fk" FOREIGN KEY ("creator_user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "user_api_key" ADD CONSTRAINT "user_api_key_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "account" ADD CONSTRAINT "account_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "session" ADD CONSTRAINT "session_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "answer_questionId_idx" ON "answer" USING btree ("question_id");--> statement-breakpoint
+CREATE INDEX "comboPackage_creatorUserId_idx" ON "combo_package" USING btree ("creator_user_id");--> statement-breakpoint
+CREATE INDEX "comboPackage_isPublic_idx" ON "combo_package" USING btree ("is_public");--> statement-breakpoint
+CREATE INDEX "comboSection_comboId_idx" ON "combo_section" USING btree ("combo_id");--> statement-breakpoint
+CREATE INDEX "comboSection_sourcePackageId_idx" ON "combo_section" USING btree ("source_package_id");--> statement-breakpoint
+CREATE INDEX "packageSection_packageId_idx" ON "package_section" USING btree ("package_id");--> statement-breakpoint
+CREATE INDEX "packageSection_sectionTypeId_idx" ON "package_section" USING btree ("section_type_id");--> statement-breakpoint
+CREATE INDEX "question_examTypeId_idx" ON "question" USING btree ("exam_type_id");--> statement-breakpoint
+CREATE INDEX "question_sectionTypeId_idx" ON "question" USING btree ("section_type_id");--> statement-breakpoint
+CREATE INDEX "question_creatorUserId_idx" ON "question" USING btree ("creator_user_id");--> statement-breakpoint
+CREATE INDEX "question_isPublic_idx" ON "question" USING btree ("is_public");--> statement-breakpoint
+CREATE INDEX "question_format_idx" ON "question" USING btree ("format");--> statement-breakpoint
+CREATE INDEX "question_difficulty_idx" ON "question" USING btree ("difficulty");--> statement-breakpoint
+CREATE INDEX "questionRating_questionId_idx" ON "question_rating" USING btree ("question_id");--> statement-breakpoint
+CREATE INDEX "sectionQuestion_sectionId_idx" ON "section_question" USING btree ("section_id");--> statement-breakpoint
+CREATE INDEX "sectionResult_attemptId_idx" ON "section_result" USING btree ("attempt_id");--> statement-breakpoint
+CREATE INDEX "testAttempt_userId_idx" ON "test_attempt" USING btree ("user_id");--> statement-breakpoint
+CREATE INDEX "testAttempt_packageId_idx" ON "test_attempt" USING btree ("package_id");--> statement-breakpoint
+CREATE INDEX "testAttempt_status_idx" ON "test_attempt" USING btree ("status");--> statement-breakpoint
+CREATE INDEX "testPackage_examTypeId_idx" ON "test_package" USING btree ("exam_type_id");--> statement-breakpoint
+CREATE INDEX "testPackage_creatorUserId_idx" ON "test_package" USING btree ("creator_user_id");--> statement-breakpoint
+CREATE INDEX "testPackage_isPublic_idx" ON "test_package" USING btree ("is_public");--> statement-breakpoint
+CREATE INDEX "userApiKey_userId_idx" ON "user_api_key" USING btree ("user_id");--> statement-breakpoint
+CREATE INDEX "userApiKey_isActive_idx" ON "user_api_key" USING btree ("is_active");--> statement-breakpoint
+CREATE INDEX "account_userId_idx" ON "account" USING btree ("user_id");--> statement-breakpoint
+CREATE INDEX "session_userId_idx" ON "session" USING btree ("user_id");--> statement-breakpoint
+CREATE INDEX "verification_identifier_idx" ON "verification" USING btree ("identifier");

packages/db/src/migrations/meta/0000_snapshot.json

@@ -0,0 +1,1887 @@
+{
+  "id": "96df5852-cd4e-4a9d-b27a-450f69a08263",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.answer": {
+      "name": "answer",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "section_result_id": {
+          "name": "section_result_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "question_id": {
+          "name": "question_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_answer": {
+          "name": "user_answer",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "is_correct": {
+          "name": "is_correct",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "time_spent_sec": {
+          "name": "time_spent_sec",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "answer_questionId_idx": {
+          "name": "answer_questionId_idx",
+          "columns": [
+            {
+              "expression": "question_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "answer_section_result_id_section_result_id_fk": {
+          "name": "answer_section_result_id_section_result_id_fk",
+          "tableFrom": "answer",
+          "tableTo": "section_result",
+          "columnsFrom": [
+            "section_result_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "answer_question_id_question_id_fk": {
+          "name": "answer_question_id_question_id_fk",
+          "tableFrom": "answer",
+          "tableTo": "question",
+          "columnsFrom": [
+            "question_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "answer_unique_idx": {
+          "name": "answer_unique_idx",
+          "nullsNotDistinct": false,
+          "columns": [
+            "section_result_id",
+            "question_id"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.combo_package": {
+      "name": "combo_package",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "creator_user_id": {
+          "name": "creator_user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "comboPackage_creatorUserId_idx": {
+          "name": "comboPackage_creatorUserId_idx",
+          "columns": [
+            {
+              "expression": "creator_user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "comboPackage_isPublic_idx": {
+          "name": "comboPackage_isPublic_idx",
+          "columns": [
+            {
+              "expression": "is_public",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "combo_package_creator_user_id_user_id_fk": {
+          "name": "combo_package_creator_user_id_user_id_fk",
+          "tableFrom": "combo_package",
+          "tableTo": "user",
+          "columnsFrom": [
+            "creator_user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.combo_section": {
+      "name": "combo_section",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "combo_id": {
+          "name": "combo_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "source_package_id": {
+          "name": "source_package_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "source_section_id": {
+          "name": "source_section_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "order_index": {
+          "name": "order_index",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        }
+      },
+      "indexes": {
+        "comboSection_comboId_idx": {
+          "name": "comboSection_comboId_idx",
+          "columns": [
+            {
+              "expression": "combo_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "comboSection_sourcePackageId_idx": {
+          "name": "comboSection_sourcePackageId_idx",
+          "columns": [
+            {
+              "expression": "source_package_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "combo_section_combo_id_combo_package_id_fk": {
+          "name": "combo_section_combo_id_combo_package_id_fk",
+          "tableFrom": "combo_section",
+          "tableTo": "combo_package",
+          "columnsFrom": [
+            "combo_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "combo_section_source_package_id_test_package_id_fk": {
+          "name": "combo_section_source_package_id_test_package_id_fk",
+          "tableFrom": "combo_section",
+          "tableTo": "test_package",
+          "columnsFrom": [
+            "source_package_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "combo_section_source_section_id_package_section_id_fk": {
+          "name": "combo_section_source_section_id_package_section_id_fk",
+          "tableFrom": "combo_section",
+          "tableTo": "package_section",
+          "columnsFrom": [
+            "source_section_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.exam_type": {
+      "name": "exam_type",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "language": {
+          "name": "language",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.package_section": {
+      "name": "package_section",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "package_id": {
+          "name": "package_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "section_type_id": {
+          "name": "section_type_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "order_index": {
+          "name": "order_index",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "packageSection_packageId_idx": {
+          "name": "packageSection_packageId_idx",
+          "columns": [
+            {
+              "expression": "package_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "packageSection_sectionTypeId_idx": {
+          "name": "packageSection_sectionTypeId_idx",
+          "columns": [
+            {
+              "expression": "section_type_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "package_section_package_id_test_package_id_fk": {
+          "name": "package_section_package_id_test_package_id_fk",
+          "tableFrom": "package_section",
+          "tableTo": "test_package",
+          "columnsFrom": [
+            "package_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "package_section_section_type_id_section_type_id_fk": {
+          "name": "package_section_section_type_id_section_type_id_fk",
+          "tableFrom": "package_section",
+          "tableTo": "section_type",
+          "columnsFrom": [
+            "section_type_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.question": {
+      "name": "question",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "exam_type_id": {
+          "name": "exam_type_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "section_type_id": {
+          "name": "section_type_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "format": {
+          "name": "format",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "passage_text": {
+          "name": "passage_text",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "question_text": {
+          "name": "question_text",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "options": {
+          "name": "options",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "correct_answer": {
+          "name": "correct_answer",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "explanation": {
+          "name": "explanation",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "difficulty": {
+          "name": "difficulty",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 3
+        },
+        "skill_tags": {
+          "name": "skill_tags",
+          "type": "text[]",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'{}'"
+        },
+        "source": {
+          "name": "source",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'manual'"
+        },
+        "ai_model": {
+          "name": "ai_model",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "ai_prompt_used": {
+          "name": "ai_prompt_used",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "creator_user_id": {
+          "name": "creator_user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "usage_count": {
+          "name": "usage_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "avg_rating": {
+          "name": "avg_rating",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "question_examTypeId_idx": {
+          "name": "question_examTypeId_idx",
+          "columns": [
+            {
+              "expression": "exam_type_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "question_sectionTypeId_idx": {
+          "name": "question_sectionTypeId_idx",
+          "columns": [
+            {
+              "expression": "section_type_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "question_creatorUserId_idx": {
+          "name": "question_creatorUserId_idx",
+          "columns": [
+            {
+              "expression": "creator_user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "question_isPublic_idx": {
+          "name": "question_isPublic_idx",
+          "columns": [
+            {
+              "expression": "is_public",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "question_format_idx": {
+          "name": "question_format_idx",
+          "columns": [
+            {
+              "expression": "format",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "question_difficulty_idx": {
+          "name": "question_difficulty_idx",
+          "columns": [
+            {
+              "expression": "difficulty",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "question_exam_type_id_exam_type_id_fk": {
+          "name": "question_exam_type_id_exam_type_id_fk",
+          "tableFrom": "question",
+          "tableTo": "exam_type",
+          "columnsFrom": [
+            "exam_type_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "question_section_type_id_section_type_id_fk": {
+          "name": "question_section_type_id_section_type_id_fk",
+          "tableFrom": "question",
+          "tableTo": "section_type",
+          "columnsFrom": [
+            "section_type_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "question_creator_user_id_user_id_fk": {
+          "name": "question_creator_user_id_user_id_fk",
+          "tableFrom": "question",
+          "tableTo": "user",
+          "columnsFrom": [
+            "creator_user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.question_rating": {
+      "name": "question_rating",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "question_id": {
+          "name": "question_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "score": {
+          "name": "score",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "questionRating_questionId_idx": {
+          "name": "questionRating_questionId_idx",
+          "columns": [
+            {
+              "expression": "question_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "question_rating_user_id_user_id_fk": {
+          "name": "question_rating_user_id_user_id_fk",
+          "tableFrom": "question_rating",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "question_rating_question_id_question_id_fk": {
+          "name": "question_rating_question_id_question_id_fk",
+          "tableFrom": "question_rating",
+          "tableTo": "question",
+          "columnsFrom": [
+            "question_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "questionRating_unique_idx": {
+          "name": "questionRating_unique_idx",
+          "nullsNotDistinct": false,
+          "columns": [
+            "user_id",
+            "question_id"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.section_question": {
+      "name": "section_question",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "question_id": {
+          "name": "question_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "order_index": {
+          "name": "order_index",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        }
+      },
+      "indexes": {
+        "sectionQuestion_sectionId_idx": {
+          "name": "sectionQuestion_sectionId_idx",
+          "columns": [
+            {
+              "expression": "section_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "section_question_section_id_package_section_id_fk": {
+          "name": "section_question_section_id_package_section_id_fk",
+          "tableFrom": "section_question",
+          "tableTo": "package_section",
+          "columnsFrom": [
+            "section_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_question_question_id_question_id_fk": {
+          "name": "section_question_question_id_question_id_fk",
+          "tableFrom": "section_question",
+          "tableTo": "question",
+          "columnsFrom": [
+            "question_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "sectionQuestion_unique_idx": {
+          "name": "sectionQuestion_unique_idx",
+          "nullsNotDistinct": false,
+          "columns": [
+            "section_id",
+            "question_id"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.section_result": {
+      "name": "section_result",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "attempt_id": {
+          "name": "attempt_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "section_type_id": {
+          "name": "section_type_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "score": {
+          "name": "score",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "max_score": {
+          "name": "max_score",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "time_spent_sec": {
+          "name": "time_spent_sec",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "sectionResult_attemptId_idx": {
+          "name": "sectionResult_attemptId_idx",
+          "columns": [
+            {
+              "expression": "attempt_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "section_result_attempt_id_test_attempt_id_fk": {
+          "name": "section_result_attempt_id_test_attempt_id_fk",
+          "tableFrom": "section_result",
+          "tableTo": "test_attempt",
+          "columnsFrom": [
+            "attempt_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "section_result_section_type_id_section_type_id_fk": {
+          "name": "section_result_section_type_id_section_type_id_fk",
+          "tableFrom": "section_result",
+          "tableTo": "section_type",
+          "columnsFrom": [
+            "section_type_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.section_type": {
+      "name": "section_type",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.test_attempt": {
+      "name": "test_attempt",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "package_id": {
+          "name": "package_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "combo_id": {
+          "name": "combo_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "started_at": {
+          "name": "started_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "finished_at": {
+          "name": "finished_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "total_score": {
+          "name": "total_score",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "max_score": {
+          "name": "max_score",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'in_progress'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "testAttempt_userId_idx": {
+          "name": "testAttempt_userId_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "testAttempt_packageId_idx": {
+          "name": "testAttempt_packageId_idx",
+          "columns": [
+            {
+              "expression": "package_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "testAttempt_status_idx": {
+          "name": "testAttempt_status_idx",
+          "columns": [
+            {
+              "expression": "status",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "test_attempt_user_id_user_id_fk": {
+          "name": "test_attempt_user_id_user_id_fk",
+          "tableFrom": "test_attempt",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "test_attempt_package_id_test_package_id_fk": {
+          "name": "test_attempt_package_id_test_package_id_fk",
+          "tableFrom": "test_attempt",
+          "tableTo": "test_package",
+          "columnsFrom": [
+            "package_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "test_attempt_combo_id_combo_package_id_fk": {
+          "name": "test_attempt_combo_id_combo_package_id_fk",
+          "tableFrom": "test_attempt",
+          "tableTo": "combo_package",
+          "columnsFrom": [
+            "combo_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.test_package": {
+      "name": "test_package",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "exam_type_id": {
+          "name": "exam_type_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "creator_user_id": {
+          "name": "creator_user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "total_questions": {
+          "name": "total_questions",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "total_sections": {
+          "name": "total_sections",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "estimated_duration_min": {
+          "name": "estimated_duration_min",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "usage_count": {
+          "name": "usage_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "avg_rating": {
+          "name": "avg_rating",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "testPackage_examTypeId_idx": {
+          "name": "testPackage_examTypeId_idx",
+          "columns": [
+            {
+              "expression": "exam_type_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "testPackage_creatorUserId_idx": {
+          "name": "testPackage_creatorUserId_idx",
+          "columns": [
+            {
+              "expression": "creator_user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "testPackage_isPublic_idx": {
+          "name": "testPackage_isPublic_idx",
+          "columns": [
+            {
+              "expression": "is_public",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "test_package_exam_type_id_exam_type_id_fk": {
+          "name": "test_package_exam_type_id_exam_type_id_fk",
+          "tableFrom": "test_package",
+          "tableTo": "exam_type",
+          "columnsFrom": [
+            "exam_type_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "test_package_creator_user_id_user_id_fk": {
+          "name": "test_package_creator_user_id_user_id_fk",
+          "tableFrom": "test_package",
+          "tableTo": "user",
+          "columnsFrom": [
+            "creator_user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user_api_key": {
+      "name": "user_api_key",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'openai'"
+        },
+        "base_url": {
+          "name": "base_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "api_key_encrypted": {
+          "name": "api_key_encrypted",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "model_name": {
+          "name": "model_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'gpt-4o-mini'"
+        },
+        "is_active": {
+          "name": "is_active",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "userApiKey_userId_idx": {
+          "name": "userApiKey_userId_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "userApiKey_isActive_idx": {
+          "name": "userApiKey_isActive_idx",
+          "columns": [
+            {
+              "expression": "is_active",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "user_api_key_user_id_user_id_fk": {
+          "name": "user_api_key_user_id_user_id_fk",
+          "tableFrom": "user_api_key",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.account": {
+      "name": "account",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "access_token_expires_at": {
+          "name": "access_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token_expires_at": {
+          "name": "refresh_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "account_userId_idx": {
+          "name": "account_userId_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "account_user_id_user_id_fk": {
+          "name": "account_user_id_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "ip_address": {
+          "name": "ip_address",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "session_userId_idx": {
+          "name": "session_userId_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "session_token_unique": {
+          "name": "session_token_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "token"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.verification": {
+      "name": "verification",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "verification_identifier_idx": {
+          "name": "verification_identifier_idx",
+          "columns": [
+            {
+              "expression": "identifier",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}

packages/db/src/migrations/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1777096566249,
+      "tag": "0000_amazing_gamora",
+      "breakpoints": true
+    }
+  ]
+}

packages/db/src/schema/app.ts

@@ -0,0 +1,429 @@
+import { relations } from "drizzle-orm";
+import {
+  pgTable,
+  text,
+  timestamp,
+  boolean,
+  integer,
+  index,
+  jsonb,
+  uuid,
+  unique,
+} from "drizzle-orm/pg-core";
+
+// ── Reference / Lookup Tables ──────────────────────────────
+
+export const examType = pgTable("exam_type", {
+  id: text("id").primaryKey(), // e.g. "IELTS", "TOEFL", "JLPT", "HSK", "GOETHE"
+  name: text("name").notNull(),
+  language: text("language").notNull(), // e.g. "English", "Japanese"
+  description: text("description"),
+});
+
+export const sectionType = pgTable("section_type", {
+  id: text("id").primaryKey(), // e.g. "READING", "WRITING", "LISTENING", "SPEAKING"
+  name: text("name").notNull(),
+});
+
+// ── Questions ──────────────────────────────────────────────
+
+export const question = pgTable(
+  "question",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    examTypeId: text("exam_type_id")
+      .notNull()
+      .references(() => examType.id, { onDelete: "cascade" }),
+    sectionTypeId: text("section_type_id")
+      .notNull()
+      .references(() => sectionType.id, { onDelete: "cascade" }),
+    // question format, e.g. "multiple_choice", "true_false_not_given", "matching", "fill_blank", "synonym", "cloze", "reference", "author_view", "sentence_completion", "summary_completion", "kanji_reading", "particle_choice", "article_case"
+    format: text("format").notNull(),
+    // the reading passage / context text
+    passageText: text("passage_text").notNull(),
+    // the actual question prompt
+    questionText: text("question_text").notNull(),
+    // array of options for multiple choice / matching
+    options: jsonb("options"),
+    // correct answer — could be an option key, text, or array for multiple correct
+    correctAnswer: text("correct_answer").notNull(),
+    // explanation shown after submission
+    explanation: text("explanation"),
+    // difficulty 1-5
+    difficulty: integer("difficulty").notNull().default(3),
+    // e.g. ["grammar", "vocabulary", "inference", "main_idea", "detail"]
+    skillTags: text("skill_tags").array().default([]),
+    source: text("source").notNull().default("manual"), // "ai" | "manual"
+    aiModel: text("ai_model"),
+    aiPromptUsed: text("ai_prompt_used"),
+    creatorUserId: text("creator_user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    isPublic: boolean("is_public").default(false).notNull(),
+    usageCount: integer("usage_count").default(0).notNull(),
+    avgRating: integer("avg_rating"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at")
+      .defaultNow()
+      .$onUpdate(() => new Date())
+      .notNull(),
+  },
+  (table) => [
+    index("question_examTypeId_idx").on(table.examTypeId),
+    index("question_sectionTypeId_idx").on(table.sectionTypeId),
+    index("question_creatorUserId_idx").on(table.creatorUserId),
+    index("question_isPublic_idx").on(table.isPublic),
+    index("question_format_idx").on(table.format),
+    index("question_difficulty_idx").on(table.difficulty),
+  ],
+);
+
+// ── Packages (Test Bundles) ────────────────────────────────
+
+export const testPackage = pgTable(
+  "test_package",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    title: text("title").notNull(),
+    description: text("description"),
+    examTypeId: text("exam_type_id")
+      .notNull()
+      .references(() => examType.id, { onDelete: "cascade" }),
+    creatorUserId: text("creator_user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    isPublic: boolean("is_public").default(false).notNull(),
+    totalQuestions: integer("total_questions").default(0).notNull(),
+    totalSections: integer("total_sections").default(0).notNull(),
+    estimatedDurationMin: integer("estimated_duration_min"),
+    usageCount: integer("usage_count").default(0).notNull(),
+    avgRating: integer("avg_rating"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at")
+      .defaultNow()
+      .$onUpdate(() => new Date())
+      .notNull(),
+  },
+  (table) => [
+    index("testPackage_examTypeId_idx").on(table.examTypeId),
+    index("testPackage_creatorUserId_idx").on(table.creatorUserId),
+    index("testPackage_isPublic_idx").on(table.isPublic),
+  ],
+);
+
+export const packageSection = pgTable(
+  "package_section",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    packageId: uuid("package_id")
+      .notNull()
+      .references(() => testPackage.id, { onDelete: "cascade" }),
+    sectionTypeId: text("section_type_id")
+      .notNull()
+      .references(() => sectionType.id, { onDelete: "cascade" }),
+    title: text("title").notNull(),
+    orderIndex: integer("order_index").notNull().default(0),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+  },
+  (table) => [
+    index("packageSection_packageId_idx").on(table.packageId),
+    index("packageSection_sectionTypeId_idx").on(table.sectionTypeId),
+  ],
+);
+
+export const sectionQuestion = pgTable(
+  "section_question",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    sectionId: uuid("section_id")
+      .notNull()
+      .references(() => packageSection.id, { onDelete: "cascade" }),
+    questionId: uuid("question_id")
+      .notNull()
+      .references(() => question.id, { onDelete: "cascade" }),
+    orderIndex: integer("order_index").notNull().default(0),
+  },
+  (table) => [
+    unique("sectionQuestion_unique_idx").on(table.sectionId, table.questionId),
+    index("sectionQuestion_sectionId_idx").on(table.sectionId),
+  ],
+);
+
+// ── Combo Packages ─────────────────────────────────────────
+
+export const comboPackage = pgTable(
+  "combo_package",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    title: text("title").notNull(),
+    description: text("description"),
+    creatorUserId: text("creator_user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    isPublic: boolean("is_public").default(false).notNull(),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at")
+      .defaultNow()
+      .$onUpdate(() => new Date())
+      .notNull(),
+  },
+  (table) => [
+    index("comboPackage_creatorUserId_idx").on(table.creatorUserId),
+    index("comboPackage_isPublic_idx").on(table.isPublic),
+  ],
+);
+
+export const comboSection = pgTable(
+  "combo_section",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    comboId: uuid("combo_id")
+      .notNull()
+      .references(() => comboPackage.id, { onDelete: "cascade" }),
+    sourcePackageId: uuid("source_package_id")
+      .notNull()
+      .references(() => testPackage.id, { onDelete: "cascade" }),
+    sourceSectionId: uuid("source_section_id")
+      .notNull()
+      .references(() => packageSection.id, { onDelete: "cascade" }),
+    orderIndex: integer("order_index").notNull().default(0),
+  },
+  (table) => [
+    index("comboSection_comboId_idx").on(table.comboId),
+    index("comboSection_sourcePackageId_idx").on(table.sourcePackageId),
+  ],
+);
+
+// ── Test Attempts & Results ────────────────────────────────
+
+export const testAttempt = pgTable(
+  "test_attempt",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    // could be either a package or a combo
+    packageId: uuid("package_id").references(() => testPackage.id, { onDelete: "set null" }),
+    comboId: uuid("combo_id").references(() => comboPackage.id, { onDelete: "set null" }),
+    startedAt: timestamp("started_at").defaultNow().notNull(),
+    finishedAt: timestamp("finished_at"),
+    totalScore: integer("total_score"),
+    maxScore: integer("max_score"),
+    status: text("status").notNull().default("in_progress"), // "in_progress" | "completed" | "abandoned"
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+  },
+  (table) => [
+    index("testAttempt_userId_idx").on(table.userId),
+    index("testAttempt_packageId_idx").on(table.packageId),
+    index("testAttempt_status_idx").on(table.status),
+  ],
+);
+
+export const sectionResult = pgTable(
+  "section_result",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    attemptId: uuid("attempt_id")
+      .notNull()
+      .references(() => testAttempt.id, { onDelete: "cascade" }),
+    sectionTypeId: text("section_type_id")
+      .notNull()
+      .references(() => sectionType.id, { onDelete: "cascade" }),
+    score: integer("score"),
+    maxScore: integer("max_score"),
+    timeSpentSec: integer("time_spent_sec"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+  },
+  (table) => [
+    index("sectionResult_attemptId_idx").on(table.attemptId),
+  ],
+);
+
+export const answer = pgTable(
+  "answer",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    sectionResultId: uuid("section_result_id")
+      .notNull()
+      .references(() => sectionResult.id, { onDelete: "cascade" }),
+    questionId: uuid("question_id")
+      .notNull()
+      .references(() => question.id, { onDelete: "cascade" }),
+    userAnswer: text("user_answer"),
+    isCorrect: boolean("is_correct"),
+    timeSpentSec: integer("time_spent_sec"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+  },
+  (table) => [
+    unique("answer_unique_idx").on(table.sectionResultId, table.questionId),
+    index("answer_questionId_idx").on(table.questionId),
+  ],
+);
+
+// ── Question Ratings ───────────────────────────────────────
+
+export const questionRating = pgTable(
+  "question_rating",
+  {
+    id: uuid("id").defaultRandom().primaryKey(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    questionId: uuid("question_id")
+      .notNull()
+      .references(() => question.id, { onDelete: "cascade" }),
+    score: integer("score").notNull(), // 1-5
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+  },
+  (table) => [
+    unique("questionRating_unique_idx").on(table.userId, table.questionId),
+    index("questionRating_questionId_idx").on(table.questionId),
+  ],
+);
+
+// ── Relations ──────────────────────────────────────────────
+
+// Need user from auth.ts for relations
+import { user } from "./auth";
+
+export const questionRelations = relations(question, ({ one, many }) => ({
+  examType: one(examType, {
+    fields: [question.examTypeId],
+    references: [examType.id],
+  }),
+  sectionType: one(sectionType, {
+    fields: [question.sectionTypeId],
+    references: [sectionType.id],
+  }),
+  creator: one(user, {
+    fields: [question.creatorUserId],
+    references: [user.id],
+  }),
+  sectionQuestions: many(sectionQuestion),
+  ratings: many(questionRating),
+  answers: many(answer),
+}));
+
+export const examTypeRelations = relations(examType, ({ many }) => ({
+  questions: many(question),
+  packages: many(testPackage),
+}));
+
+export const sectionTypeRelations = relations(sectionType, ({ many }) => ({
+  questions: many(question),
+  packageSections: many(packageSection),
+  sectionResults: many(sectionResult),
+}));
+
+export const testPackageRelations = relations(testPackage, ({ one, many }) => ({
+  examType: one(examType, {
+    fields: [testPackage.examTypeId],
+    references: [examType.id],
+  }),
+  creator: one(user, {
+    fields: [testPackage.creatorUserId],
+    references: [user.id],
+  }),
+  sections: many(packageSection),
+  comboSections: many(comboSection),
+  attempts: many(testAttempt),
+}));
+
+export const packageSectionRelations = relations(packageSection, ({ one, many }) => ({
+  package: one(testPackage, {
+    fields: [packageSection.packageId],
+    references: [testPackage.id],
+  }),
+  sectionType: one(sectionType, {
+    fields: [packageSection.sectionTypeId],
+    references: [sectionType.id],
+  }),
+  questions: many(sectionQuestion),
+  comboSections: many(comboSection),
+}));
+
+export const sectionQuestionRelations = relations(sectionQuestion, ({ one }) => ({
+  section: one(packageSection, {
+    fields: [sectionQuestion.sectionId],
+    references: [packageSection.id],
+  }),
+  question: one(question, {
+    fields: [sectionQuestion.questionId],
+    references: [question.id],
+  }),
+}));
+
+export const comboPackageRelations = relations(comboPackage, ({ one, many }) => ({
+  creator: one(user, {
+    fields: [comboPackage.creatorUserId],
+    references: [user.id],
+  }),
+  sections: many(comboSection),
+  attempts: many(testAttempt),
+}));
+
+export const comboSectionRelations = relations(comboSection, ({ one }) => ({
+  combo: one(comboPackage, {
+    fields: [comboSection.comboId],
+    references: [comboPackage.id],
+  }),
+  sourcePackage: one(testPackage, {
+    fields: [comboSection.sourcePackageId],
+    references: [testPackage.id],
+  }),
+  sourceSection: one(packageSection, {
+    fields: [comboSection.sourceSectionId],
+    references: [packageSection.id],
+  }),
+}));
+
+export const testAttemptRelations = relations(testAttempt, ({ one, many }) => ({
+  user: one(user, {
+    fields: [testAttempt.userId],
+    references: [user.id],
+  }),
+  package: one(testPackage, {
+    fields: [testAttempt.packageId],
+    references: [testPackage.id],
+  }),
+  combo: one(comboPackage, {
+    fields: [testAttempt.comboId],
+    references: [comboPackage.id],
+  }),
+  sectionResults: many(sectionResult),
+}));
+
+export const sectionResultRelations = relations(sectionResult, ({ one, many }) => ({
+  attempt: one(testAttempt, {
+    fields: [sectionResult.attemptId],
+    references: [testAttempt.id],
+  }),
+  sectionType: one(sectionType, {
+    fields: [sectionResult.sectionTypeId],
+    references: [sectionType.id],
+  }),
+  answers: many(answer),
+}));
+
+export const answerRelations = relations(answer, ({ one }) => ({
+  sectionResult: one(sectionResult, {
+    fields: [answer.sectionResultId],
+    references: [sectionResult.id],
+  }),
+  question: one(question, {
+    fields: [answer.questionId],
+    references: [question.id],
+  }),
+}));
+
+export const questionRatingRelations = relations(questionRating, ({ one }) => ({
+  user: one(user, {
+    fields: [questionRating.userId],
+    references: [user.id],
+  }),
+  question: one(question, {
+    fields: [questionRating.questionId],
+    references: [question.id],
+  }),
+}));

packages/db/src/schema/index.ts

@@ -1,2 +1,2 @@
 export * from "./auth";
-export {};
+export * from "./app";

packages/ui/src/styles/globals.css

@@ -1,120 +1,287 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
+
 @source "../../../apps/**/*.{ts,tsx}";
 @source "../**/*.{ts,tsx}";
 
 @custom-variant dark (&:is(.dark *));
 
+/* ── Clay-Inspired Design Tokens ────────────────────────── */
+
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.58 0.22 27);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  /* Primary */
+  --clay-black: #000000;
+  --pure-white: #ffffff;
+  --warm-cream: #faf9f7;
+
+  /* Swatch Palette */
+  --matcha-300: #84e7a5;
+  --matcha-600: #078a52;
+  --matcha-800: #02492a;
+  --slushie-500: #3bd3fd;
+  --slushie-800: #0089ad;
+  --lemon-400: #f8cc65;
+  --lemon-500: #fbbd41;
+  --lemon-700: #d08a11;
+  --lemon-800: #9d6a09;
+  --ube-300: #c1b0ff;
+  --ube-800: #43089f;
+  --ube-900: #32037d;
+  --pomegranate-400: #fc7981;
+  --blueberry-800: #01418d;
+  --dragonfruit-400: #e84393;
+
+  /* Neutral Scale (Warm) */
+  --warm-silver: #9f9b93;
+  --warm-charcoal: #55534e;
+  --dark-charcoal: #333333;
+
+  /* Surface & Border */
+  --oat-border: #dad4c8;
+  --oat-light: #eee9df;
+  --cool-border: #e6e8ec;
+  --dark-border: #525a69;
+  --light-frost: #eff1f3;
+
+  /* Badges */
+  --badge-blue-bg: #f0f8ff;
+  --badge-blue-text: #3859f9;
+  --focus-ring: rgb(20, 110, 245);
+
+  /* ── Semantic Mapping ─────────────────────────────────── */
+
+  --background: var(--warm-cream);
+  --foreground: var(--clay-black);
+  --card: var(--pure-white);
+  --card-foreground: var(--clay-black);
+  --popover: var(--pure-white);
+  --popover-foreground: var(--clay-black);
+  --primary: var(--clay-black);
+  --primary-foreground: var(--pure-white);
+  --secondary: var(--matcha-600);
+  --secondary-foreground: var(--pure-white);
+  --muted: var(--oat-light);
+  --muted-foreground: var(--warm-silver);
+  --accent: var(--slushie-500);
+  --accent-foreground: var(--clay-black);
+  --destructive: var(--pomegranate-400);
+  --destructive-foreground: var(--pure-white);
+  --border: var(--oat-border);
+  --input: var(--oat-border);
+  --ring: var(--focus-ring);
+
+  /* Surface tokens */
+  --surface: var(--warm-cream);
+  --surface-bright: var(--pure-white);
+  --surface-dim: var(--oat-light);
+  --surface-variant: var(--oat-light);
+  --surface-container: var(--pure-white);
+  --surface-container-low: var(--oat-light);
+  --surface-container-lowest: var(--pure-white);
+  --surface-container-high: var(--oat-border);
+  --surface-container-highest: var(--warm-silver);
+  --on-surface: var(--clay-black);
+  --on-surface-variant: var(--warm-charcoal);
+  --on-background: var(--clay-black);
+
+  /* Container tokens */
+  --primary-container: var(--blueberry-800);
+  --secondary-container: var(--matcha-300);
+  --tertiary-container: var(--ube-300);
+  --error-container: var(--badge-blue-bg);
+  --on-primary-container: var(--pure-white);
+  --on-secondary-container: var(--matcha-800);
+  --on-tertiary-container: var(--ube-900);
+  --on-error-container: var(--badge-blue-text);
+
+  /* Outline */
+  --outline: var(--warm-charcoal);
+  --outline-variant: var(--oat-border);
+  --inverse-surface: var(--clay-black);
+  --inverse-primary: var(--pure-white);
+  --inverse-on-surface: var(--warm-cream);
+
+  /* Fixed colors */
+  --primary-fixed: var(--oat-light);
+  --primary-fixed-dim: var(--oat-border);
+  --secondary-fixed: var(--matcha-300);
+  --secondary-fixed-dim: var(--matcha-600);
+  --tertiary-fixed: var(--ube-300);
+  --tertiary-fixed-dim: var(--ube-800);
+
+  /* Chart */
+  --chart-1: var(--matcha-600);
+  --chart-2: var(--slushie-500);
+  --chart-3: var(--lemon-500);
+  --chart-4: var(--ube-800);
+  --chart-5: var(--pomegranate-400);
+
+  /* Sidebar */
+  --sidebar: var(--oat-light);
+  --sidebar-foreground: var(--clay-black);
+  --sidebar-primary: var(--clay-black);
+  --sidebar-primary-foreground: var(--pure-white);
+  --sidebar-accent: var(--oat-border);
+  --sidebar-accent-foreground: var(--clay-black);
+  --sidebar-border: var(--oat-border);
+  --sidebar-ring: var(--focus-ring);
+
+  /* Radius: Clay scale */
+  --radius: 0.75rem;
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.87 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.371 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --background: #1a1917;
+  --foreground: var(--pure-white);
+  --card: #2a2927;
+  --card-foreground: var(--pure-white);
+  --popover: #2a2927;
+  --popover-foreground: var(--pure-white);
+  --primary: var(--pure-white);
+  --primary-foreground: var(--clay-black);
+  --secondary: var(--matcha-300);
+  --secondary-foreground: var(--clay-black);
+  --muted: #3a3937;
+  --muted-foreground: var(--warm-silver);
+  --border: #4a4947;
+  --input: #4a4947;
+  --ring: var(--slushie-500);
+  --surface: #1a1917;
+  --surface-container: #2a2927;
+  --surface-container-low: #222120;
+  --surface-container-high: #3a3937;
+  --on-surface: var(--pure-white);
+  --on-surface-variant: var(--warm-silver);
+  --primary-container: var(--slushie-800);
+  --secondary-container: var(--matcha-800);
+  --tertiary-container: var(--ube-900);
+  --on-primary-container: var(--clay-black);
+  --on-secondary-container: var(--matcha-300);
+  --on-tertiary-container: var(--ube-300);
+  --sidebar: #1a1917;
+  --sidebar-foreground: var(--pure-white);
+  --sidebar-primary: var(--slushie-500);
+  --sidebar-primary-foreground: var(--clay-black);
+  --sidebar-accent: #3a3937;
+  --sidebar-accent-foreground: var(--pure-white);
+  --sidebar-border: #4a4947;
 }
 
 @theme inline {
-  --font-sans: "Inter Variable", sans-serif;
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-headline: "Inter", system-ui, sans-serif;
+  --font-mono: "Space Mono", ui-monospace, monospace;
+
   --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Surface semantic tokens */
+  --color-surface: var(--surface);
+  --color-surface-bright: var(--surface-bright);
+  --color-surface-dim: var(--surface-dim);
+  --color-surface-variant: var(--surface-variant);
+  --color-surface-container: var(--surface-container);
+  --color-surface-container-low: var(--surface-container-low);
+  --color-surface-container-lowest: var(--surface-container-lowest);
+  --color-surface-container-high: var(--surface-container-high);
+  --color-surface-container-highest: var(--surface-container-highest);
+  --color-on-surface: var(--on-surface);
+  --color-on-surface-variant: var(--on-surface-variant);
+  --color-on-background: var(--on-background);
+
+  /* On-brand text */
+  --color-on-primary: var(--primary-foreground);
+  --color-on-secondary: var(--secondary-foreground);
+  --color-on-tertiary: var(--tertiary-foreground);
+  --color-on-error: var(--destructive-foreground);
+
+  /* M3 container tokens */
+  --color-primary-container: var(--primary-container);
+  --color-secondary-container: var(--secondary-container);
+  --color-tertiary-container: var(--tertiary-container);
+  --color-error-container: var(--error-container);
+  --color-on-primary-container: var(--on-primary-container);
+  --color-on-secondary-container: var(--on-secondary-container);
+  --color-on-tertiary-container: var(--on-tertiary-container);
+  --color-on-error-container: var(--on-error-container);
+
+  --color-outline: var(--outline);
+  --color-outline-variant: var(--outline-variant);
+  --color-inverse-surface: var(--inverse-surface);
+  --color-inverse-primary: var(--inverse-primary);
+  --color-inverse-on-surface: var(--inverse-on-surface);
+
+  /* Fixed colors */
+  --color-primary-fixed: var(--primary-fixed);
+  --color-primary-fixed-dim: var(--primary-fixed-dim);
+  --color-secondary-fixed: var(--secondary-fixed);
+  --color-secondary-fixed-dim: var(--secondary-fixed-dim);
+  --color-tertiary-fixed: var(--tertiary-fixed);
+  --color-tertiary-fixed-dim: var(--tertiary-fixed-dim);
+
+  /* Swatch colors */
+  --color-matcha-300: var(--matcha-300);
+  --color-matcha-600: var(--matcha-600);
+  --color-matcha-800: var(--matcha-800);
+  --color-slushie-500: var(--slushie-500);
+  --color-slushie-800: var(--slushie-800);
+  --color-lemon-400: var(--lemon-400);
+  --color-lemon-500: var(--lemon-500);
+  --color-lemon-700: var(--lemon-700);
+  --color-lemon-800: var(--lemon-800);
+  --color-ube-300: var(--ube-300);
+  --color-ube-800: var(--ube-800);
+  --color-ube-900: var(--ube-900);
+  --color-pomegranate-400: var(--pomegranate-400);
+  --color-blueberry-800: var(--blueberry-800);
+  --color-dragonfruit-400: var(--dragonfruit-400);
+  --color-oat-border: var(--oat-border);
+  --color-oat-light: var(--oat-light);
+  --color-warm-silver: var(--warm-silver);
+  --color-warm-charcoal: var(--warm-charcoal);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
   --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) + 8px);
+  --radius-2xl: calc(var(--radius) + 16px);
+  --radius-3xl: calc(var(--radius) + 24px);
+  --radius-4xl: calc(var(--radius) + 32px);
+  --radius-pill: 1584px;
 }
 
 @layer base {
@@ -122,9 +289,61 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply font-sans bg-background text-foreground;
+    @apply bg-background text-foreground font-sans antialiased;
   }
   html {
     @apply font-sans;
   }
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-headline);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+}
+
+/* ── Utility Classes ─────────────────────────────────────── */
+
+@layer utilities {
+  .font-headline {
+    font-family: var(--font-headline);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+  .font-body {
+    font-family: var(--font-sans);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .glass-panel {
+    background: rgba(250, 249, 247, 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+  .ai-glow {
+    background: radial-gradient(circle at 50% 50%, rgba(132, 231, 165, 0.15) 0%, transparent 70%);
+  }
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+  .clay-shadow {
+    box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px;
+  }
+  .clay-hover {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+  .clay-hover:hover {
+    transform: rotateZ(-2deg) translateY(-2px);
+    box-shadow: rgb(0,0,0) -4px 4px;
+  }
+  .uppercase-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.0675em;
+  }
 }

skills-lock.json

@@ -16,6 +16,21 @@
       "sourceType": "github",
       "computedHash": "2bc6cf38ec7b4a5778a43fabb3e87642c9897ad45e9eb42438b57fd2def6cca8"
     },
+    "tanstack-query-best-practices": {
+      "source": "deckardger/tanstack-agent-skills",
+      "sourceType": "github",
+      "computedHash": "21d2e8b7468a81d772b6527ad8ca178cc2f3f08af777bb9061333013ee88a0c9"
+    },
+    "tanstack-start-best-practices": {
+      "source": "deckardger/tanstack-agent-skills",
+      "sourceType": "github",
+      "computedHash": "8b073187405a10f9997158f9139a9664cc801595d2fe63d542a0bac9bf2152f5"
+    },
+    "to-prd": {
+      "source": "mattpocock/skills",
+      "sourceType": "github",
+      "computedHash": "8351452ad372ea4f839d3f7b951927b417851ffa49e7e6af28ea0f0ae111dca8"
+    },
     "turborepo": {
       "source": "vercel/turborepo",
       "sourceType": "github",