diff --git a/.github/workflows/build-and-test.yaml b/.github/workflows/build-and-test.yaml
index 579e1633..d6f1344a 100644
--- a/.github/workflows/build-and-test.yaml
+++ b/.github/workflows/build-and-test.yaml
@@ -66,11 +66,51 @@ jobs:
           pnpm run build
           pnpm test
       
-      - name: Build web
+      # Web previously ran `build` only, so its unit and e2e suites never
+      # gated a merge. Lint, typecheck and unit tests are fast and
+      # deterministic, so they block.
+      - name: Install web dependencies
         run: |
           cd web
           pnpm install
-          pnpm run build 
+
+      - name: Lint web
+        run: |
+          cd web
+          pnpm lint
+
+      - name: Typecheck web
+        run: |
+          cd web
+          pnpm typecheck
+
+      - name: Unit test web
+        run: |
+          cd web
+          pnpm test
+
+      - name: Build web
+        run: |
+          cd web
+          pnpm run build
+
+      # E2e is fully mocked (e2e/mock-api.ts intercepts every backend call),
+      # but it drives a real browser, so it is reported without blocking until
+      # it has proven stable across a few merges.
+      #
+      # TODO: remove continue-on-error once that is established. It is here to
+      # avoid wedging the merge queue on a browser flake, not because e2e
+      # failures are acceptable.
+      - name: Install Playwright browser
+        run: |
+          cd web
+          pnpm exec playwright install --with-deps chromium
+
+      - name: E2e test web (non-blocking for now)
+        continue-on-error: true
+        run: |
+          cd web
+          pnpm test:e2e
 
   build-and-test-android:
     name: Build and Test Android
diff --git a/api/src/auth/auth.service.ts b/api/src/auth/auth.service.ts
index 8b658f63..cb788f09 100644
--- a/api/src/auth/auth.service.ts
+++ b/api/src/auth/auth.service.ts
@@ -21,6 +21,12 @@ import {
   EmailVerificationDocument,
 } from './schemas/email-verification.schema'
 
+// For register and login, which hold the hash in memory before responding.
+export const withoutPassword = (user: UserDocument) => {
+  const { password, ...safe } = user.toObject()
+  return safe
+}
+
 @Injectable()
 export class AuthService {
   constructor(
@@ -39,7 +45,9 @@ export class AuthService {
   async login(userData: any) {
     await this.turnstileService.verify(userData.turnstileToken)
 
-    const user = await this.usersService.findOne({ email: userData.email })
+    const user = await this.usersService.findOneWithPassword({
+      email: userData.email,
+    })
     if (!user) {
       throw new HttpException(
         { error: 'Invalid credentials' },
@@ -60,7 +68,7 @@ export class AuthService {
     const payload = { email: user.email, sub: user._id }
     return {
       accessToken: this.jwtService.sign(payload),
-      user,
+      user: withoutPassword(user),
     }
   }
 
@@ -101,7 +109,7 @@ export class AuthService {
     const payload = { email: user.email, sub: user._id }
     return {
       accessToken: this.jwtService.sign(payload),
-      user,
+      user: withoutPassword(user),
     }
   }
 
@@ -140,7 +148,7 @@ export class AuthService {
 
     return {
       accessToken: this.jwtService.sign(payload),
-      user,
+      user: withoutPassword(user),
     }
   }
 
@@ -240,7 +248,9 @@ export class AuthService {
     input: { oldPassword: string; newPassword: string },
     user: UserDocument,
   ) {
-    const userToUpdate = await this.usersService.findOne({ _id: user._id })
+    const userToUpdate = await this.usersService.findOneWithPassword({
+      _id: user._id,
+    })
     if (!userToUpdate) {
       throw new HttpException({ error: 'User not found' }, HttpStatus.NOT_FOUND)
     }
diff --git a/api/src/auth/without-password.spec.ts b/api/src/auth/without-password.spec.ts
new file mode 100644
index 00000000..bc24b3ab
--- /dev/null
+++ b/api/src/auth/without-password.spec.ts
@@ -0,0 +1,41 @@
+import { withoutPassword } from './auth.service'
+import type { UserDocument } from '../users/schemas/user.schema'
+
+// Fake document: only toObject() matters to the helper.
+const doc = (fields: Record<string, unknown>) =>
+  ({ toObject: () => ({ ...fields }) }) as unknown as UserDocument
+
+describe('withoutPassword', () => {
+  it('removes the password hash', () => {
+    const safe = withoutPassword(
+      doc({ email: 'a@b.com', password: '$2a$10$hashedvalue' })
+    )
+
+    expect(safe).not.toHaveProperty('password')
+  })
+
+  it('keeps everything else the client needs', () => {
+    const safe = withoutPassword(
+      doc({
+        _id: 'u1',
+        email: 'a@b.com',
+        name: 'Ada',
+        role: 'regular',
+        password: '$2a$10$hashedvalue',
+      })
+    )
+
+    expect(safe).toEqual({
+      _id: 'u1',
+      email: 'a@b.com',
+      name: 'Ada',
+      role: 'regular',
+    })
+  })
+
+  it('is harmless when the hash was never loaded', () => {
+    const safe = withoutPassword(doc({ email: 'a@b.com' }))
+
+    expect(safe).toEqual({ email: 'a@b.com' })
+  })
+})
diff --git a/api/src/gateway/escape-regexp.spec.ts b/api/src/gateway/escape-regexp.spec.ts
new file mode 100644
index 00000000..56679bc2
--- /dev/null
+++ b/api/src/gateway/escape-regexp.spec.ts
@@ -0,0 +1,35 @@
+import { escapeRegExp } from './escape-regexp'
+
+describe('escapeRegExp', () => {
+  it('leaves plain text untouched', () => {
+    expect(escapeRegExp('hello world')).toBe('hello world')
+    expect(escapeRegExp('+14155550101')).toBe('\\+14155550101')
+  })
+
+  it('makes an unbalanced paren safe to compile', () => {
+    // Unescaped, `new RegExp('(')` throws and would fail the whole request.
+    expect(() => new RegExp(escapeRegExp('('))).not.toThrow()
+    expect(() => new RegExp(escapeRegExp('a)b['))).not.toThrow()
+  })
+
+  it('treats wildcards as literal characters', () => {
+    const pattern = new RegExp(escapeRegExp('.*'), 'i')
+    // A literal ".*" must not match arbitrary text.
+    expect(pattern.test('anything at all')).toBe(false)
+    expect(pattern.test('literally .* here')).toBe(true)
+  })
+
+  it('treats a dot as a dot, not "any character"', () => {
+    const pattern = new RegExp(escapeRegExp('a.c'), 'i')
+    expect(pattern.test('abc')).toBe(false)
+    expect(pattern.test('a.c')).toBe(true)
+  })
+
+  it('defuses a nested quantifier (ReDoS shape)', () => {
+    const pattern = new RegExp(escapeRegExp('(a+)+$'), 'i')
+    const start = Date.now()
+    pattern.test('a'.repeat(2000) + 'b')
+    // As a literal it is a plain substring scan, not catastrophic backtracking.
+    expect(Date.now() - start).toBeLessThan(100)
+  })
+})
diff --git a/api/src/gateway/escape-regexp.ts b/api/src/gateway/escape-regexp.ts
new file mode 100644
index 00000000..a45d74ce
--- /dev/null
+++ b/api/src/gateway/escape-regexp.ts
@@ -0,0 +1,11 @@
+/**
+ * Escape every regular-expression metacharacter in a string so it can be
+ * embedded in a RegExp as a literal.
+ *
+ * Search terms come straight from user input. Without this, "(" alone throws
+ * a SyntaxError and fails the request, "." matches any character instead of a
+ * dot, and a nested quantifier is a ReDoS vector.
+ */
+export function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
diff --git a/api/src/gateway/gateway.controller.ts b/api/src/gateway/gateway.controller.ts
index 0eab5a28..450c972d 100644
--- a/api/src/gateway/gateway.controller.ts
+++ b/api/src/gateway/gateway.controller.ts
@@ -160,8 +160,9 @@ export class GatewayController {
     const page = req.query.page ? parseInt(req.query.page, 10) : 1;
     const limit = req.query.limit ? Math.min(parseInt(req.query.limit, 10), 100) : 50;
     const type = req.query.type || '';
-    
-    const result = await this.gatewayService.getMessages(deviceId, type, page, limit);
+    const search = req.query.search || '';
+
+    const result = await this.gatewayService.getMessages(deviceId, type, page, limit, search);
     return result;
   }
 
diff --git a/api/src/gateway/gateway.service.spec.ts b/api/src/gateway/gateway.service.spec.ts
index 7f43cd83..45eeb8e0 100644
--- a/api/src/gateway/gateway.service.spec.ts
+++ b/api/src/gateway/gateway.service.spec.ts
@@ -802,6 +802,65 @@ describe('GatewayService', () => {
         HttpException,
       )
     })
+
+    it('should search across message body, recipient and sender', async () => {
+      await service.getMessages(mockDeviceId, '', 1, 10, 'alice')
+
+      const expectedQuery = {
+        device: mockDevice._id,
+        $or: [
+          { message: /alice/i },
+          { recipient: /alice/i },
+          { sender: /alice/i },
+        ],
+      }
+
+      expect(mockSmsModel.countDocuments).toHaveBeenCalledWith(expectedQuery)
+      expect(mockSmsModel.find).toHaveBeenCalledWith(
+        expectedQuery,
+        null,
+        expect.any(Object),
+      )
+    })
+
+    it('should combine search with the type filter', async () => {
+      await service.getMessages(mockDeviceId, 'sent', 1, 10, 'alice')
+
+      expect(mockSmsModel.find).toHaveBeenCalledWith(
+        expect.objectContaining({
+          device: mockDevice._id,
+          type: SMSType.SENT,
+          $or: expect.any(Array),
+        }),
+        null,
+        expect.any(Object),
+      )
+    })
+
+    it('should ignore an empty or whitespace-only search', async () => {
+      await service.getMessages(mockDeviceId, '', 1, 10, '   ')
+
+      expect(mockSmsModel.find).toHaveBeenCalledWith(
+        { device: mockDevice._id },
+        null,
+        expect.any(Object),
+      )
+    })
+
+    it('should escape regex metacharacters in the search term', async () => {
+      // Unescaped, this throws a SyntaxError and fails the request.
+      await expect(
+        service.getMessages(mockDeviceId, '', 1, 10, '('),
+      ).resolves.toBeDefined()
+
+      // A wildcard must be matched literally, not treated as "any character".
+      await service.getMessages(mockDeviceId, '', 1, 10, '.*')
+
+      const call = mockSmsModel.find.mock.calls.at(-1)
+      const messagePattern = call[0].$or[0].message as RegExp
+      expect(messagePattern.test('anything at all')).toBe(false)
+      expect(messagePattern.test('contains .* literally')).toBe(true)
+    })
   })
 
   describe('getStatsForUser', () => {
diff --git a/api/src/gateway/gateway.service.ts b/api/src/gateway/gateway.service.ts
index fe396c90..440ea60c 100644
--- a/api/src/gateway/gateway.service.ts
+++ b/api/src/gateway/gateway.service.ts
@@ -24,6 +24,7 @@ import { WebhookEvent } from '../webhook/webhook-event.enum'
 import { WebhookService } from '../webhook/webhook.service'
 import { BillingService } from '../billing/billing.service'
 import { SmsQueueService } from './queue/sms-queue.service'
+import { escapeRegExp } from './escape-regexp'
 
 @Injectable()
 export class GatewayService {
@@ -947,6 +948,7 @@ export class GatewayService {
     type = '',
     page = 1,
     limit = 50,
+    search = '',
   ): Promise<{ data: any[]; meta: any }> {
     const device = await this.deviceModel.findById(deviceId)
 
@@ -972,6 +974,19 @@ export class GatewayService {
       query.type = SMSType.RECEIVED
     }
 
+    // Free-text search across the message body and either party's number.
+    // The input is escaped before it reaches RegExp: an unescaped "(" throws
+    // and fails the request, and a crafted pattern is a ReDoS vector.
+    const trimmedSearch = search?.trim()
+    if (trimmedSearch) {
+      const pattern = new RegExp(escapeRegExp(trimmedSearch), 'i')
+      query.$or = [
+        { message: pattern },
+        { recipient: pattern },
+        { sender: pattern },
+      ]
+    }
+
     // Get total count for pagination metadata
     const total = await this.smsModel.countDocuments(query)
 
diff --git a/api/src/users/schemas/user.schema.spec.ts b/api/src/users/schemas/user.schema.spec.ts
new file mode 100644
index 00000000..dc07c12f
--- /dev/null
+++ b/api/src/users/schemas/user.schema.spec.ts
@@ -0,0 +1,14 @@
+import { UserSchema } from './user.schema'
+
+describe('User schema', () => {
+  it('never selects the password hash by default', () => {
+    expect(UserSchema.path('password').options.select).toBe(false)
+  })
+
+  it.each(['email', 'name', 'role', 'emailVerifiedAt'])(
+    'still returns %s by default',
+    (field) => {
+      expect(UserSchema.path(field).options.select).toBeUndefined()
+    }
+  )
+})
diff --git a/api/src/users/schemas/user.schema.ts b/api/src/users/schemas/user.schema.ts
index 66050f06..14dae2dd 100644
--- a/api/src/users/schemas/user.schema.ts
+++ b/api/src/users/schemas/user.schema.ts
@@ -23,7 +23,8 @@ export class User {
   @Prop({ type: String, trim: true })
   phone?: string
 
-  @Prop({ type: String })
+  // Never loaded unless a caller asks with .select('+password').
+  @Prop({ type: String, select: false })
   password: string
 
   @Prop({ type: String, default: UserRole.REGULAR })
diff --git a/api/src/users/users.service.ts b/api/src/users/users.service.ts
index 8678d69d..8550f449 100644
--- a/api/src/users/users.service.ts
+++ b/api/src/users/users.service.ts
@@ -18,6 +18,11 @@ export class UsersService {
     return await this.userModel.findOne(params)
   }
 
+  // Only for flows that verify a password. Never return this to a client.
+  async findOneWithPassword(params) {
+    return await this.userModel.findOne(params).select('+password')
+  }
+
   async findAll() {
     return await this.userModel.find()
   }
diff --git a/web/.env.example b/web/.env.example
index 23023d1c..ac555934 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -4,9 +4,10 @@ NEXT_PUBLIC_LATEST_APP_VERSION_CODE=17
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=
 NEXT_PUBLIC_TAWKTO_EMBED_URL=
 
-AUTH_SECRET= # https://generate-secret.vercel.app/32
-
-DATABASE_URL=mongodb://adminUser:adminPassword@textbee-db:27017/textbee?authSource=admin
+# Used by NextAuth (next-auth v4) to sign/verify the session JWT. Must match
+# the value read by proxy.ts (process.env.NEXTAUTH_SECRET).
+NEXTAUTH_SECRET= # https://generate-secret.vercel.app/32
+NEXTAUTH_URL=http://localhost:3000
 
 MAIL_HOST=
 MAIL_PORT=
diff --git a/web/.eslintrc.json b/web/.eslintrc.json
deleted file mode 100644
index d2a18faf..00000000
--- a/web/.eslintrc.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "react/no-unescaped-entities": "off"
-  }
-}
diff --git a/web/.gitignore b/web/.gitignore
index c574c9f1..bd43cb79 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -7,6 +7,9 @@
 
 # testing
 /coverage
+/test-results
+/playwright-report
+/playwright/.cache
 
 # next.js
 /.next/
diff --git a/web/app/(app)/(auth)/(components)/register-form.tsx b/web/app/(app)/(auth)/(components)/register-form.tsx
index 30f7928a..7c199d4e 100644
--- a/web/app/(app)/(auth)/(components)/register-form.tsx
+++ b/web/app/(app)/(auth)/(components)/register-form.tsx
@@ -36,12 +36,18 @@ const registerSchema = z.object({
     .min(1, { message: 'Please complete the bot verification' }),
 })
 
-type RegisterFormValues = z.infer<typeof registerSchema>
+// marketingOptIn is `.optional().default(true)`, so zod's input and output
+// types differ: optional going in, guaranteed coming out. The form holds the
+// input shape and the submit handler receives the output shape, which is what
+// useForm's third generic is for. Using z.infer (the output) for both made the
+// resolver unassignable.
+type RegisterFormInput = z.input<typeof registerSchema>
+type RegisterFormValues = z.output<typeof registerSchema>
 
 export default function RegisterForm() {
   const router = useRouter()
 
-  const form = useForm<RegisterFormValues>({
+  const form = useForm<RegisterFormInput, unknown, RegisterFormValues>({
     resolver: zodResolver(registerSchema),
     defaultValues: {
       name: '',
diff --git a/web/app/(app)/(auth)/(components)/request-password-reset-form.tsx b/web/app/(app)/(auth)/(components)/request-password-reset-form.tsx
index 24c80af2..371da5d4 100644
--- a/web/app/(app)/(auth)/(components)/request-password-reset-form.tsx
+++ b/web/app/(app)/(auth)/(components)/request-password-reset-form.tsx
@@ -100,7 +100,7 @@ export default function RequestPasswordResetForm() {
 
   return (
     <div className='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-muted'>
-      <Card className='w-[400px] shadow-lg'>
+      <Card className='w-full max-w-[400px] shadow-lg'>
         <CardHeader className='space-y-1'>
           <CardTitle className='text-2xl font-bold text-center'>
             Reset your password
diff --git a/web/app/(app)/(auth)/(components)/reset-password-form.tsx b/web/app/(app)/(auth)/(components)/reset-password-form.tsx
index 54ef108b..22ca41e5 100644
--- a/web/app/(app)/(auth)/(components)/reset-password-form.tsx
+++ b/web/app/(app)/(auth)/(components)/reset-password-form.tsx
@@ -82,7 +82,7 @@ export default function ResetPasswordForm({
 
   return (
     <div className='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-muted'>
-      <Card className='w-[400px] shadow-lg'>
+      <Card className='w-full max-w-[400px] shadow-lg'>
         <CardHeader className='space-y-1'>
           <CardTitle className='text-2xl font-bold text-center'>
             Reset your password
diff --git a/web/app/(app)/(auth)/layout.tsx b/web/app/(app)/(auth)/layout.tsx
index 48eacd27..b5311859 100644
--- a/web/app/(app)/(auth)/layout.tsx
+++ b/web/app/(app)/(auth)/layout.tsx
@@ -1,7 +1,16 @@
+import Footer from '@/components/shared/footer'
+
+// The footer is rendered per-section rather than in (app)/layout.tsx, because
+// the dashboard's fixed sidebar would otherwise overlap a full-width footer.
 export default function AuthLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
-  return <>{children}</>
+  return (
+    <>
+      {children}
+      <Footer />
+    </>
+  )
 }
diff --git a/web/app/(app)/(auth)/login/page.tsx b/web/app/(app)/(auth)/login/page.tsx
index 8daa396c..38c034cc 100644
--- a/web/app/(app)/(auth)/login/page.tsx
+++ b/web/app/(app)/(auth)/login/page.tsx
@@ -22,7 +22,7 @@ export default function LoginPage() {
 
   return (
     <div className='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-muted'>
-      <Card className='w-[400px] shadow-lg'>
+      <Card className='w-full max-w-[400px] shadow-lg'>
         <CardHeader className='space-y-1'>
           <CardTitle className='text-2xl font-bold text-center'>
             Welcome back
diff --git a/web/app/(app)/(auth)/register/page.tsx b/web/app/(app)/(auth)/register/page.tsx
index a63cbaa1..255e9294 100644
--- a/web/app/(app)/(auth)/register/page.tsx
+++ b/web/app/(app)/(auth)/register/page.tsx
@@ -21,7 +21,7 @@ export default function RegisterPage() {
 
   return (
     <div className='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-muted'>
-      <Card className='w-[450px] shadow-lg'>
+      <Card className='w-full max-w-[450px] shadow-lg'>
         <CardHeader className='space-y-1'>
           <CardTitle className='text-2xl font-bold text-center'>
             Create an account
diff --git a/web/app/(app)/(auth)/verify-email/page.tsx b/web/app/(app)/(auth)/verify-email/page.tsx
index 002b849e..1dd5be17 100644
--- a/web/app/(app)/(auth)/verify-email/page.tsx
+++ b/web/app/(app)/(auth)/verify-email/page.tsx
@@ -17,6 +17,7 @@ import { Loader2, CheckCircle, XCircle, Mail, ArrowRight } from 'lucide-react'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import httpBrowserClient from '@/lib/httpBrowserClient'
 import { ApiEndpoints } from '@/config/api'
+import { queryKeys } from '@/lib/api/query-keys'
 import { Routes } from '@/config/routes'
 
 // Reusable components
@@ -82,17 +83,22 @@ export default function VerifyEmailPage() {
   const [errorMessage, setErrorMessage] = useState<string>('')
 
   // Check user authentication and email verification status
-  const { 
-    data: whoAmIData, 
+  // Unwrapped to the user here rather than cached as the raw axios response.
+  // Every consumer of this endpoint now shares one key, so they must also
+  // share one cached shape.
+  const {
+    data: user,
     isPending: isCheckingAuth,
-    isError: isAuthError 
+    isError: isAuthError
   } = useQuery({
-    queryKey: ['whoAmI'],
-    queryFn: () => httpBrowserClient.get(ApiEndpoints.auth.whoAmI()),
+    queryKey: queryKeys.currentUser,
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.auth.whoAmI())
+        .then((res) => res.data?.data),
     retry: 1,
   })
 
-  const user = whoAmIData?.data?.data
   const isEmailVerified = !!user?.emailVerifiedAt
   const isLoggedIn = !isAuthError && !!user
 
@@ -313,7 +319,7 @@ export default function VerifyEmailPage() {
 
   return (
     <div className='flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900 p-4'>
-      <Card className='w-full max-w-md shadow-lg border-gray-200 dark:border-gray-800'>
+      <Card className='w-full max-w-md shadow-lg border-border'>
         {renderContent()}
       </Card>
     </div>
diff --git a/web/app/(app)/checkout/[planName]/page.tsx b/web/app/(app)/checkout/[planName]/page.tsx
index aa428626..4dc07f00 100644
--- a/web/app/(app)/checkout/[planName]/page.tsx
+++ b/web/app/(app)/checkout/[planName]/page.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import httpBrowserClient from '@/lib/httpBrowserClient'
 import { ApiEndpoints } from '@/config/api'
+import { apiErrorMessage } from '@/lib/utils/errorHandler'
 import { useSession } from 'next-auth/react'
 import { redirect } from 'next/navigation'
 import { Loader, CheckCircle, ArrowRight } from 'lucide-react'
@@ -19,7 +20,11 @@ interface PlanChangePreview {
 const formatPlan = (plan: string, interval: string) =>
   `${plan.charAt(0).toUpperCase() + plan.slice(1)} (${interval})`
 
-export default function CheckoutPage({ params }) {
+export default function CheckoutPage({
+  params,
+}: {
+  params: { planName: string }
+}) {
   const [error, setError] = useState<string | null>(null)
   const [planChange, setPlanChange] = useState<PlanChangePreview | null>(null)
   const [isConfirming, setIsConfirming] = useState(false)
@@ -60,8 +65,12 @@ export default function CheckoutPage({ params }) {
         if (retries > 0) {
           initiateCheckout(retries - 1)
         } else {
-          setError(error.response?.data?.message || 'Failed to create checkout session. Please try again or contact billing@textbee.dev.')
-          console.error(error.response?.data?.message)
+          const serverMessage = apiErrorMessage(error)
+          setError(
+            serverMessage ||
+              'Failed to create checkout session. Please try again or contact billing@textbee.dev.'
+          )
+          console.error(serverMessage)
         }
       }
     },
@@ -79,11 +88,12 @@ export default function CheckoutPage({ params }) {
     } catch (error) {
       // no auto-retry here: the request may have charged the card
       setPlanChange(null)
+      const serverMessage = apiErrorMessage(error)
       setError(
-        error.response?.data?.message ||
+        serverMessage ||
           'Failed to change your plan. Please try again or contact billing@textbee.dev.',
       )
-      console.error(error.response?.data?.message)
+      console.error(serverMessage)
       setIsConfirming(false)
     }
   }
diff --git a/web/app/(app)/checkout/layout.tsx b/web/app/(app)/checkout/layout.tsx
new file mode 100644
index 00000000..802af60a
--- /dev/null
+++ b/web/app/(app)/checkout/layout.tsx
@@ -0,0 +1,17 @@
+import Footer from '@/components/shared/footer'
+
+// A layout rather than an edit to the page: checkout renders several different
+// branches (confirming, processing, done) and each would otherwise need its
+// own footer.
+export default function CheckoutLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      {children}
+      <Footer />
+    </>
+  )
+}
diff --git a/web/app/(app)/contribute/layout.tsx b/web/app/(app)/contribute/layout.tsx
new file mode 100644
index 00000000..201ea895
--- /dev/null
+++ b/web/app/(app)/contribute/layout.tsx
@@ -0,0 +1,14 @@
+import Footer from '@/components/shared/footer'
+
+export default function ContributeLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      {children}
+      <Footer />
+    </>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/change-password-form.tsx b/web/app/(app)/dashboard/(components)/account/change-password-form.tsx
similarity index 68%
rename from web/app/(app)/dashboard/(components)/change-password-form.tsx
rename to web/app/(app)/dashboard/(components)/account/change-password-form.tsx
index 599f821b..29a59999 100644
--- a/web/app/(app)/dashboard/(components)/change-password-form.tsx
+++ b/web/app/(app)/dashboard/(components)/account/change-password-form.tsx
@@ -8,9 +8,7 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useToast } from '@/hooks/use-toast'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
-import { useMutation } from '@tanstack/react-query'
+import { useChangePassword } from '@/lib/api'
 import Link from 'next/link'
 import { Routes } from '@/config/routes'
 
@@ -20,9 +18,11 @@ const changePasswordSchema = z
     newPassword: z
       .string()
       .min(8, { message: 'Password must be at least 8 characters long' }),
+    // Matches newPassword's floor. At 4 a five-character confirmation failed
+    // with "Passwords must match" instead of the real length problem.
     confirmPassword: z
       .string()
-      .min(4, { message: 'Please confirm your password' }),
+      .min(1, { message: 'Please confirm your password' }),
   })
   .superRefine((data, ctx) => {
     if (data.newPassword !== data.confirmPassword) {
@@ -48,9 +48,7 @@ export default function ChangePasswordForm() {
     isPending: isChangingPassword,
     error: changePasswordError,
     isSuccess: isChangePasswordSuccess,
-  } = useMutation({
-    mutationFn: (data: ChangePasswordFormData) =>
-      httpBrowserClient.post(ApiEndpoints.auth.changePassword(), data),
+  } = useChangePassword({
     onSuccess: () => {
       toast({
         title: 'Password changed successfully!',
@@ -84,14 +82,30 @@ export default function ChangePasswordForm() {
       >
         <div className='space-y-2'>
           <Label htmlFor='oldPassword'>Old Password</Label>
+          {/* Without autoComplete, password managers cannot tell these three
+              boxes apart and fill the saved password into the wrong one. */}
           <Input
             id='oldPassword'
             type='password'
+            autoComplete='current-password'
+            aria-invalid={
+              Boolean(changePasswordForm.formState.errors.oldPassword) ||
+              undefined
+            }
+            aria-describedby={
+              changePasswordForm.formState.errors.oldPassword
+                ? 'oldPassword-error'
+                : undefined
+            }
             {...changePasswordForm.register('oldPassword')}
             placeholder='Enter your old password'
           />
           {changePasswordForm.formState.errors.oldPassword && (
-            <p className='text-sm text-destructive'>
+            <p
+              id='oldPassword-error'
+              role='alert'
+              className='text-sm text-destructive'
+            >
               {changePasswordForm.formState.errors.oldPassword.message}
             </p>
           )}
@@ -102,11 +116,25 @@ export default function ChangePasswordForm() {
           <Input
             id='newPassword'
             type='password'
+            autoComplete='new-password'
+            aria-invalid={
+              Boolean(changePasswordForm.formState.errors.newPassword) ||
+              undefined
+            }
+            aria-describedby={
+              changePasswordForm.formState.errors.newPassword
+                ? 'newPassword-error'
+                : undefined
+            }
             {...changePasswordForm.register('newPassword')}
             placeholder='Enter your new password'
           />
           {changePasswordForm.formState.errors.newPassword && (
-            <p className='text-sm text-destructive'>
+            <p
+              id='newPassword-error'
+              role='alert'
+              className='text-sm text-destructive'
+            >
               {changePasswordForm.formState.errors.newPassword.message}
             </p>
           )}
@@ -117,11 +145,25 @@ export default function ChangePasswordForm() {
           <Input
             id='confirmPassword'
             type='password'
+            autoComplete='new-password'
+            aria-invalid={
+              Boolean(changePasswordForm.formState.errors.confirmPassword) ||
+              undefined
+            }
+            aria-describedby={
+              changePasswordForm.formState.errors.confirmPassword
+                ? 'confirmPassword-error'
+                : undefined
+            }
             {...changePasswordForm.register('confirmPassword')}
-            placeholder='Enter your confirm password'
+            placeholder='Re-enter your new password'
           />
           {changePasswordForm.formState.errors.confirmPassword && (
-            <p className='text-sm text-destructive'>
+            <p
+              id='confirmPassword-error'
+              role='alert'
+              className='text-sm text-destructive'
+            >
               {changePasswordForm.formState.errors.confirmPassword.message}
             </p>
           )}
diff --git a/web/app/(app)/dashboard/(components)/delete-account-form.tsx b/web/app/(app)/dashboard/(components)/account/delete-account-form.tsx
similarity index 71%
rename from web/app/(app)/dashboard/(components)/delete-account-form.tsx
rename to web/app/(app)/dashboard/(components)/account/delete-account-form.tsx
index 04467bc9..987f69f7 100644
--- a/web/app/(app)/dashboard/(components)/delete-account-form.tsx
+++ b/web/app/(app)/dashboard/(components)/account/delete-account-form.tsx
@@ -9,7 +9,7 @@ import { AlertTriangle, Loader2 } from 'lucide-react'
 import { useToast } from '@/hooks/use-toast'
 import httpBrowserClient from '@/lib/httpBrowserClient'
 import { ApiEndpoints } from '@/config/api'
-import { useMutation, useQuery } from '@tanstack/react-query'
+import { useMutation } from '@tanstack/react-query'
 import {
   Dialog,
   DialogContent,
@@ -19,6 +19,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { useTurnstile } from '@/lib/turnstile'
+import { useCurrentUser } from '@/lib/api'
 
 export default function DeleteAccountForm() {
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
@@ -27,13 +28,7 @@ export default function DeleteAccountForm() {
   const [turnstileError, setTurnstileError] = useState<string | null>(null)
   const { toast } = useToast()
 
-  const { data: currentUser } = useQuery({
-    queryKey: ['currentUser'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.auth.whoAmI())
-        .then((res) => res.data?.data),
-  })
+  const { data: currentUser } = useCurrentUser()
 
   const {
     containerRef: turnstileRef,
@@ -120,60 +115,77 @@ export default function DeleteAccountForm() {
               <AlertTriangle className='h-5 w-5 text-destructive' />
               Delete Account
             </DialogTitle>
+            {/* Description holds prose only. The form controls used to live
+                inside it, and Radix points the dialog's aria-describedby here,
+                so opening the dialog read the labels, placeholders and all
+                back as one long description string. */}
             <DialogDescription className='pt-4'>
               <p className='mb-4'>
                 Are you sure you want to delete your account? This action:
               </p>
-              <ul className='list-disc list-inside space-y-2 mb-4'>
+              <ul className='list-disc list-inside space-y-2'>
                 <li>Cannot be undone</li>
                 <li>Will permanently delete all your data</li>
                 <li>Will cancel all active subscriptions</li>
                 <li>Will remove access to all services</li>
               </ul>
+            </DialogDescription>
+          </DialogHeader>
 
+          <div className='space-y-4'>
+            <div className='space-y-2'>
               <Label htmlFor='deleteReason'>Reason for deletion</Label>
+              {/* htmlFor pointed at an id this field never had, so the label
+                  was decorative and the textarea was announced unlabelled. */}
               <Textarea
-                className='my-2'
+                id='deleteReason'
                 placeholder='Enter your reason for deletion'
                 value={deleteReason}
                 onChange={(e) => setDeleteReason(e.target.value)}
               />
+            </div>
 
-              <p>Please type your email address to confirm:</p>
-
+            <div className='space-y-2'>
+              <Label htmlFor='deleteConfirmEmail'>
+                Type your email address to confirm
+              </Label>
               <Input
-                className='mt-2'
+                id='deleteConfirmEmail'
+                type='email'
+                autoComplete='off'
                 placeholder='Enter your email address'
                 value={deleteConfirmEmail}
                 onChange={(e) => setDeleteConfirmEmail(e.target.value)}
               />
+            </div>
 
-              <div className='mt-4 space-y-2'>
-                <div
-                  ref={turnstileRef}
-                  className='min-h-[65px] w-full flex justify-center'
-                />
-                {turnstileError && (
-                  <p className='text-sm text-destructive'>{turnstileError}</p>
-                )}
-              </div>
-
-              {requestAccountDeletionError && (
-                <p className='text-sm text-destructive'>
-                  {(requestAccountDeletionError as any).response?.data
-                    ?.message ||
-                    requestAccountDeletionError.message ||
-                    'Failed to submit account deletion request'}
+            <div className='space-y-2'>
+              <div
+                ref={turnstileRef}
+                className='min-h-[65px] w-full flex justify-center'
+              />
+              {turnstileError && (
+                <p role='alert' className='text-sm text-destructive'>
+                  {turnstileError}
                 </p>
               )}
+            </div>
+
+            {requestAccountDeletionError && (
+              <p role='alert' className='text-sm text-destructive'>
+                {(requestAccountDeletionError as any).response?.data?.message ||
+                  requestAccountDeletionError.message ||
+                  'Failed to submit account deletion request'}
+              </p>
+            )}
+
+            {isRequestAccountDeletionSuccess && (
+              <p role='status' className='text-sm text-green-500'>
+                Account deletion request submitted
+              </p>
+            )}
+          </div>
 
-              {isRequestAccountDeletionSuccess && (
-                <p className='text-sm text-green-500'>
-                  Account deletion request submitted
-                </p>
-              )}
-            </DialogDescription>
-          </DialogHeader>
           <DialogFooter className='gap-2 sm:gap-0'>
             <Button
               variant='outline'
diff --git a/web/app/(app)/dashboard/(components)/edit-profile-form.tsx b/web/app/(app)/dashboard/(components)/account/edit-profile-form.tsx
similarity index 91%
rename from web/app/(app)/dashboard/(components)/edit-profile-form.tsx
rename to web/app/(app)/dashboard/(components)/account/edit-profile-form.tsx
index effc81c2..a232b034 100644
--- a/web/app/(app)/dashboard/(components)/edit-profile-form.tsx
+++ b/web/app/(app)/dashboard/(components)/account/edit-profile-form.tsx
@@ -10,9 +10,7 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useToast } from '@/hooks/use-toast'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
-import { useMutation, useQuery } from '@tanstack/react-query'
+import { useCurrentUser, useUpdateProfile } from '@/lib/api'
 import { Spinner } from '@/components/ui/spinner'
 import { useSession } from 'next-auth/react'
 
@@ -35,13 +33,7 @@ export default function EditProfileForm() {
     data: currentUser,
     isLoading: isLoadingUser,
     refetch: refetchCurrentUser,
-  } = useQuery({
-    queryKey: ['currentUser'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.auth.whoAmI())
-        .then((res) => res.data?.data),
-  })
+  } = useCurrentUser()
 
   const updateProfileForm = useForm<UpdateProfileFormData>({
     resolver: zodResolver(updateProfileSchema),
@@ -61,9 +53,7 @@ export default function EditProfileForm() {
     isPending: isUpdatingProfile,
     error: updateProfileError,
     isSuccess: isUpdateProfileSuccess,
-  } = useMutation({
-    mutationFn: (data: UpdateProfileFormData) =>
-      httpBrowserClient.patch(ApiEndpoints.auth.updateProfile(), data),
+  } = useUpdateProfile({
     onSuccess: () => {
       refetchCurrentUser()
       toast({
diff --git a/web/app/(app)/dashboard/(components)/support-form.tsx b/web/app/(app)/dashboard/(components)/account/support-form.tsx
similarity index 100%
rename from web/app/(app)/dashboard/(components)/support-form.tsx
rename to web/app/(app)/dashboard/(components)/account/support-form.tsx
diff --git a/web/app/(app)/dashboard/(components)/account-deletion-alert.tsx b/web/app/(app)/dashboard/(components)/alerts/account-deletion-alert.tsx
similarity index 91%
rename from web/app/(app)/dashboard/(components)/account-deletion-alert.tsx
rename to web/app/(app)/dashboard/(components)/alerts/account-deletion-alert.tsx
index 49d5af3c..91ab61a6 100644
--- a/web/app/(app)/dashboard/(components)/account-deletion-alert.tsx
+++ b/web/app/(app)/dashboard/(components)/alerts/account-deletion-alert.tsx
@@ -2,6 +2,7 @@ import { Alert, AlertDescription } from '@/components/ui/alert'
 import { ApiEndpoints } from '@/config/api'
 import httpBrowserClient from '@/lib/httpBrowserClient'
 import { useQuery } from '@tanstack/react-query'
+import { queryKeys } from '@/lib/api/query-keys'
 import { AlertTriangle } from 'lucide-react'
 
 export default function AccountDeletionAlert() {
@@ -10,7 +11,7 @@ export default function AccountDeletionAlert() {
     isLoading: isLoadingUserData,
     error: userDataError,
   } = useQuery({
-    queryKey: ['whoAmI'],
+    queryKey: queryKeys.currentUser,
     queryFn: () =>
       httpBrowserClient
         .get(ApiEndpoints.auth.whoAmI())
@@ -37,7 +38,7 @@ export default function AccountDeletionAlert() {
   )
 
   return (
-    <Alert className='bg-gradient-to-r from-amber-600 to-red-600 text-white'>
+    <Alert className='bg-linear-to-r from-amber-600 to-red-600 text-white'>
       <AlertDescription className='flex items-center gap-2'>
         <AlertTriangle className='h-5 w-5 flex-shrink-0' />
         <div className='text-sm md:text-base'>
diff --git a/web/app/(app)/dashboard/(components)/past-due-billing-alert.tsx b/web/app/(app)/dashboard/(components)/alerts/past-due-billing-alert.tsx
similarity index 78%
rename from web/app/(app)/dashboard/(components)/past-due-billing-alert.tsx
rename to web/app/(app)/dashboard/(components)/alerts/past-due-billing-alert.tsx
index d9461242..6b27828f 100644
--- a/web/app/(app)/dashboard/(components)/past-due-billing-alert.tsx
+++ b/web/app/(app)/dashboard/(components)/alerts/past-due-billing-alert.tsx
@@ -2,29 +2,14 @@
 
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
-import { ApiEndpoints } from '@/config/api'
-import httpBrowserClient from '@/lib/httpBrowserClient'
 import { polarCustomerPortalRequestUrl } from '@/config/external-links'
-import { useQuery } from '@tanstack/react-query'
+import { useCurrentUser, useSubscription } from '@/lib/api'
 import { CreditCard, AlertTriangle } from 'lucide-react'
 import Link from 'next/link'
 
 export default function PastDueBillingAlert() {
-  const { data: currentSubscription, isLoading: subLoading } = useQuery({
-    queryKey: ['currentSubscription'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.billing.currentSubscription())
-        .then((res) => res.data),
-  })
-
-  const { data: currentUser, isLoading: userLoading } = useQuery({
-    queryKey: ['currentUser'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.auth.whoAmI())
-        .then((res) => res.data?.data),
-  })
+  const { data: currentSubscription, isLoading: subLoading } = useSubscription()
+  const { data: currentUser, isLoading: userLoading } = useCurrentUser()
 
   if (subLoading || userLoading || !currentSubscription || !currentUser) {
     return null
diff --git a/web/app/(app)/dashboard/(components)/upgrade-to-pro-alert.tsx b/web/app/(app)/dashboard/(components)/alerts/upgrade-to-pro-alert.tsx
similarity index 89%
rename from web/app/(app)/dashboard/(components)/upgrade-to-pro-alert.tsx
rename to web/app/(app)/dashboard/(components)/alerts/upgrade-to-pro-alert.tsx
index c098a3c7..e5cc9929 100644
--- a/web/app/(app)/dashboard/(components)/upgrade-to-pro-alert.tsx
+++ b/web/app/(app)/dashboard/(components)/alerts/upgrade-to-pro-alert.tsx
@@ -1,8 +1,6 @@
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
-import { ApiEndpoints } from '@/config/api'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { useQuery } from '@tanstack/react-query'
+import { useSubscription } from '@/lib/api'
 import Link from 'next/link'
 import { useMemo } from 'react'
 
@@ -25,13 +23,7 @@ export default function UpgradeToProAlert() {
     data: currentSubscription,
     isLoading: isLoadingSubscription,
     error: subscriptionError,
-  } = useQuery({
-    queryKey: ['currentSubscription'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.billing.currentSubscription())
-        .then((res) => res.data),
-  })
+  } = useSubscription()
 
   const monthlyUsagePercentage = currentSubscription?.usage?.monthlyUsagePercentage || 0
   const monthlyLimit = currentSubscription?.usage?.monthlyLimit || 0
@@ -40,7 +32,7 @@ export default function UpgradeToProAlert() {
   const alertConfig = useMemo(() => {
     if (monthlyUsagePercentage >= 100 ) {
       return {
-        bgColor: 'bg-gradient-to-r from-red-600 to-red-800',
+        bgColor: 'bg-linear-to-r from-red-600 to-red-800',
         message: "⚠️ Monthly limit exceeded! Your requests will be rejected until you upgrade.",
         subMessage: `You've used ${processedSmsLastMonth} of ${monthlyLimit} SMS this month.`,
         buttonText: "Upgrade Now!",
@@ -49,7 +41,7 @@ export default function UpgradeToProAlert() {
       }
     } else if (monthlyUsagePercentage >= 80) {
       return {
-        bgColor: 'bg-gradient-to-r from-orange-500 to-red-500',
+        bgColor: 'bg-linear-to-r from-orange-500 to-red-500',
         message: "⚠️ Approaching limit! Upgrade to Pro to avoid service interruption.",
         subMessage: `You've used ${monthlyUsagePercentage}% of your monthly SMS limit (${processedSmsLastMonth}/${monthlyLimit}).`,
         buttonText: "Upgrade Before Limit!",
@@ -100,11 +92,12 @@ export default function UpgradeToProAlert() {
         : "Unlock premium features, priority support, and advanced capabilities with Pro!"
       
       return {
-        bgColor: 'bg-gradient-to-r from-purple-500 to-pink-500',
+        bgColor: 'bg-linear-to-r from-brand-500 to-brand-600',
         message: ctaMessages[randomIndex],
         subMessage,
         buttonText: buttonTexts[randomIndex],
-        buttonColor: 'bg-red-500 text-white hover:bg-red-600 border-red-500',
+        buttonColor:
+          'bg-white text-brand-700 hover:bg-brand-50 border-transparent',
         urgency: 'normal'
       }
     }
@@ -126,14 +119,14 @@ export default function UpgradeToProAlert() {
     const scaleAlertConfig =
       monthlyUsagePercentage >= 100
         ? {
-            bgColor: 'bg-gradient-to-r from-red-600 to-red-800',
+            bgColor: 'bg-linear-to-r from-red-600 to-red-800',
             message: '⚠️ Monthly limit exceeded! Upgrade to Scale for 25,000 SMS/mo.',
             subMessage: `You've used ${processedSmsLastMonth} of ${monthlyLimit} SMS this month.`,
             buttonText: 'Upgrade to Scale!',
             buttonColor: 'bg-white text-red-600 hover:bg-red-50 hover:text-red-700 border-red-600',
           }
         : {
-            bgColor: 'bg-gradient-to-r from-orange-500 to-red-500',
+            bgColor: 'bg-linear-to-r from-orange-500 to-red-500',
             message: '⚠️ Approaching Pro limit! Scale up to 25,000 SMS/mo.',
             subMessage: `You've used ${monthlyUsagePercentage}% of your monthly SMS limit (${processedSmsLastMonth}/${monthlyLimit}).`,
             buttonText: 'Upgrade to Scale',
@@ -164,7 +157,7 @@ export default function UpgradeToProAlert() {
               variant='outline'
               size='sm'
               asChild
-              className='bg-orange-500 text-white hover:bg-orange-600 text-xs md:text-sm'
+              className='bg-brand-600 text-white hover:bg-brand-700 text-xs md:text-sm'
             >
               <Link href={'/#pricing'}>Learn More</Link>
             </Button>
@@ -201,7 +194,7 @@ export default function UpgradeToProAlert() {
               variant='outline'
               size='sm'
               asChild
-              className='bg-orange-500 text-white hover:bg-orange-600 text-xs md:text-sm'
+              className='bg-brand-600 text-white hover:bg-brand-700 text-xs md:text-sm'
             >
               <Link href={'/#pricing'}>Learn More</Link>
             </Button>
diff --git a/web/app/(app)/dashboard/(components)/verify-email-alert.tsx b/web/app/(app)/dashboard/(components)/alerts/verify-email-alert.tsx
similarity index 94%
rename from web/app/(app)/dashboard/(components)/verify-email-alert.tsx
rename to web/app/(app)/dashboard/(components)/alerts/verify-email-alert.tsx
index 04734191..c2913f45 100644
--- a/web/app/(app)/dashboard/(components)/verify-email-alert.tsx
+++ b/web/app/(app)/dashboard/(components)/alerts/verify-email-alert.tsx
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/button'
 import { ApiEndpoints } from '@/config/api'
 import httpBrowserClient from '@/lib/httpBrowserClient'
 import { useQuery } from '@tanstack/react-query'
+import { queryKeys } from '@/lib/api/query-keys'
 import Link from 'next/link'
 import { useMemo } from 'react'
 import { Mail, ShieldAlert } from 'lucide-react'
@@ -13,7 +14,7 @@ export default function VerifyEmailAlert() {
     isLoading: isLoadingUserData,
     error: userDataError,
   } = useQuery({
-    queryKey: ['whoAmI'],
+    queryKey: queryKeys.currentUser,
     queryFn: () =>
       httpBrowserClient
         .get(ApiEndpoints.auth.whoAmI())
@@ -61,7 +62,7 @@ export default function VerifyEmailAlert() {
   }
 
   return (
-    <Alert className='bg-gradient-to-r from-red-600 to-red-700 text-white'>
+    <Alert className='bg-linear-to-r from-red-600 to-red-700 text-white'>
       <AlertDescription className='flex flex-col sm:flex-row flex-wrap items-center gap-2 md:gap-4'>
         <span className='w-full sm:flex-1 text-center sm:text-left text-sm md:text-base font-medium flex items-center justify-center sm:justify-start gap-2'>
           <ShieldAlert className='h-5 w-5' />
diff --git a/web/app/(app)/dashboard/(components)/api-keys.tsx b/web/app/(app)/dashboard/(components)/api-keys/api-keys.tsx
similarity index 53%
rename from web/app/(app)/dashboard/(components)/api-keys.tsx
rename to web/app/(app)/dashboard/(components)/api-keys/api-keys.tsx
index ba5977b9..d7054a3b 100644
--- a/web/app/(app)/dashboard/(components)/api-keys.tsx
+++ b/web/app/(app)/dashboard/(components)/api-keys/api-keys.tsx
@@ -3,7 +3,6 @@
 import { useState, useRef } from 'react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
 import { Key, MoreVertical, Loader2, Plus, AlertTriangle } from 'lucide-react'
 import {
   Dialog,
@@ -21,28 +20,29 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { Input } from '@/components/ui/input'
 import { useToast } from '@/hooks/use-toast'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
+import {
+  useApiKeys,
+  useDeleteApiKey,
+  useRenameApiKey,
+  useRevokeApiKey,
+} from '@/lib/api'
+import type { ApiKey } from '@/lib/api/types'
 import { Skeleton } from '@/components/ui/skeleton'
+import EmptyState from '@/components/shared/empty-state'
+import ErrorState from '@/components/shared/error-state'
+import RelativeTime from '@/components/shared/relative-time'
 import GenerateApiKey, {
   type GenerateApiKeyHandle,
 } from './generate-api-key'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 
-type ApiKeyRow = {
-  _id: string
-  apiKey: string
-  name?: string
-  revokedAt?: string
-  createdAt: string
-  lastUsedAt?: string
-  usageCount?: number
-}
+// Was a local duplicate of the shared ApiKey type, which meant the list
+// callback annotated its rows as one type while the hook returned the other.
+// The two extra fields it carried now live on ApiKey itself.
+type ApiKeyRow = ApiKey
 
 export default function ApiKeys() {
   const addApiKeyRef = useRef<GenerateApiKeyHandle>(null)
-  const queryClient = useQueryClient()
 
   const [selectedKey, setSelectedKey] = useState<ApiKeyRow | null>(null)
   const [isRevokeDialogOpen, setIsRevokeDialogOpen] = useState(false)
@@ -60,103 +60,84 @@ export default function ApiKeys() {
     isPending,
     error,
     data: apiKeys,
-  } = useQuery({
-    queryKey: ['apiKeys', 'active'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.auth.listApiKeys('active'))
-        .then((res) => res.data),
-  })
+    refetch,
+  } = useApiKeys('active')
 
-  const {
-    data: revokedKeysData,
-    isPending: isRevokedPending,
-  } = useQuery({
-    queryKey: ['apiKeys', 'revoked'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.auth.listApiKeys('revoked'))
-        .then((res) => res.data),
-    enabled: isRevokedModalOpen,
-  })
+  const { data: revokedKeysData, isPending: isRevokedPending } = useApiKeys(
+    'revoked',
+    { enabled: isRevokedModalOpen }
+  )
 
-  const {
-    mutate: revokeApiKey,
-    isPending: isRevokingApiKey,
-    error: revokeApiKeyError,
-  } = useMutation({
-    mutationFn: (id: string) =>
-      httpBrowserClient.post(ApiEndpoints.auth.revokeApiKey(id)),
-    onSuccess: () => {
-      setIsRevokeDialogOpen(false)
-      toast({
-        title: `API key "${selectedKey?.apiKey}" has been revoked`,
-      })
-      void queryClient.invalidateQueries({ queryKey: ['apiKeys'] })
-    },
-    onError: () => {
-      toast({
-        variant: 'destructive',
-        title: 'Error revoking API key',
-        description: revokeApiKeyError?.message,
-      })
-    },
-  })
+  const { mutate: revokeApiKey, isPending: isRevokingApiKey } = useRevokeApiKey()
+  const { mutate: deleteRevokedApiKey, isPending: isDeletingRevokedApiKey } =
+    useDeleteApiKey()
+  const { mutate: renameApiKey, isPending: isRenamingApiKey } =
+    useRenameApiKey()
 
-  const {
-    mutate: deleteRevokedApiKey,
-    isPending: isDeletingRevokedApiKey,
-    error: deleteApiKeyError,
-  } = useMutation({
-    mutationFn: (id: string) =>
-      httpBrowserClient.delete(ApiEndpoints.auth.deleteApiKey(id)),
-    onSuccess: () => {
-      setIsConfirmDeleteRevokedOpen(false)
-      setRevokedKeyToDelete(null)
-      toast({
-        title: 'API key removed',
-      })
-      void queryClient.invalidateQueries({ queryKey: ['apiKeys'] })
-    },
-    onError: () => {
-      toast({
-        variant: 'destructive',
-        title: 'Error deleting API key',
-        description: deleteApiKeyError?.message,
-      })
-    },
-  })
-  const {
-    mutate: renameApiKey,
-    isPending: isRenamingApiKey,
-    error: renameApiKeyError,
-  } = useMutation({
-    mutationFn: ({ id, name }: { id: string; name: string }) =>
-      httpBrowserClient.patch(ApiEndpoints.auth.renameApiKey(id), { name }),
-    onSuccess: () => {
-      setIsRenameDialogOpen(false)
-      toast({
-        title: `API key renamed to "${newKeyName}"`,
-      })
-      void queryClient.invalidateQueries({ queryKey: ['apiKeys', 'active'] })
-    },
-    onError: () => {
-      toast({
-        variant: 'destructive',
-        title: 'Error renaming API key',
-        description: renameApiKeyError?.message,
-      })
-    },
-  })
+  const handleRevokeApiKey = (id: string) =>
+    revokeApiKey(id, {
+      onSuccess: () => {
+        setIsRevokeDialogOpen(false)
+        toast({ title: `API key "${selectedKey?.apiKey}" has been revoked` })
+      },
+      onError: (err) => {
+        toast({
+          variant: 'destructive',
+          title: 'Error revoking API key',
+          description: err?.message,
+        })
+      },
+    })
+
+  const handleDeleteRevokedApiKey = (id: string) =>
+    deleteRevokedApiKey(id, {
+      onSuccess: () => {
+        setIsConfirmDeleteRevokedOpen(false)
+        setRevokedKeyToDelete(null)
+        toast({ title: 'API key removed' })
+      },
+      onError: (err) => {
+        toast({
+          variant: 'destructive',
+          title: 'Error deleting API key',
+          description: err?.message,
+        })
+      },
+    })
+
+  const handleRenameApiKey = (id: string, name: string) =>
+    renameApiKey(
+      { id, name },
+      {
+        onSuccess: () => {
+          setIsRenameDialogOpen(false)
+          toast({ title: `API key renamed to "${newKeyName}"` })
+        },
+        onError: (err) => {
+          toast({
+            variant: 'destructive',
+            title: 'Error renaming API key',
+            description: err?.message,
+          })
+        },
+      }
+    )
 
-  const revokedList = revokedKeysData?.data as ApiKeyRow[] | undefined
+  const revokedList = revokedKeysData as ApiKeyRow[] | undefined
 
   return (
     <>
       <GenerateApiKey ref={addApiKeyRef} showTrigger={false} />
-      <Card>
+      <Card className='min-w-0 max-w-full'>
         <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-          <CardTitle className='text-lg'>API Keys</CardTitle>
+          <CardTitle className='text-lg'>
+            API Keys
+            {!isPending && !error && (
+              <span className='ml-2 text-sm font-normal text-muted-foreground'>
+                {apiKeys?.length ?? 0}
+              </span>
+            )}
+          </CardTitle>
           <div className='flex items-center gap-1'>
             <Button
               variant='ghost'
@@ -180,113 +161,110 @@ export default function ApiKeys() {
           <div className='space-y-2'>
             {isPending && (
               <>
+                {/* Mirrors the loaded row, so the list does not resize as it
+                    settles. */}
                 {[1, 2, 3].map((i) => (
-                  <Card key={i} className='border-0 shadow-none'>
-                    <CardContent className='flex items-center p-3'>
-                      <Skeleton className='h-6 w-6 mr-3' />
-                      <div className='flex-1'>
-                        <div className='flex items-center justify-between'>
-                          <Skeleton className='h-4 w-24' />
-                          <Skeleton className='h-4 w-16' />
-                        </div>
-                        <div className='flex items-center space-x-2 mt-1'>
-                          <Skeleton className='h-4 w-64' />
-                        </div>
-                        <div className='flex items-center mt-1 space-x-3'>
-                          <Skeleton className='h-3 w-32' />
-                          <Skeleton className='h-3 w-32' />
-                        </div>
-                      </div>
-                      <Skeleton className='h-6 w-6' />
-                    </CardContent>
-                  </Card>
+                  <div key={i} className='flex items-start gap-2.5 px-2 py-2'>
+                    <Skeleton className='mt-0.5 h-4 w-4 shrink-0 rounded' />
+                    <div className='min-w-0 flex-1 space-y-1'>
+                      <Skeleton className='h-4 w-28' />
+                      <Skeleton className='h-4 w-full max-w-[15rem]' />
+                      <Skeleton className='h-3 w-44' />
+                    </div>
+                    <Skeleton className='h-7 w-7 shrink-0 rounded-md' />
+                  </div>
                 ))}
               </>
             )}
 
             {error && (
-              <div className='flex justify-center items-center h-full'>
-                <div>Error: {error.message}</div>
-              </div>
+              <ErrorState
+                error={error}
+                title="Couldn't load your API keys"
+                icon={Key}
+                onRetry={() => refetch()}
+              />
             )}
 
-            {!isPending && !error && apiKeys?.data?.length === 0 && (
-              <div className='flex justify-center items-center h-full'>
-                <div>No API keys found</div>
-              </div>
+            {!isPending && !error && apiKeys?.length === 0 && (
+              <EmptyState
+                icon={Key}
+                title='No API keys found'
+                hint='Generate an API key to connect a device or call the API.'
+              />
             )}
 
-            {apiKeys?.data?.map((apiKey: ApiKeyRow) => (
-              <Card key={apiKey._id} className='border-0 shadow-none'>
-                <CardContent className='flex items-center p-3'>
-                  <Key className='h-6 w-6 mr-3' />
-                  <div className='flex-1'>
-                    <div className='flex items-center justify-between'>
-                      <h3 className='font-semibold text-sm'>
-                        {apiKey.name || 'API Key'}
-                      </h3>
-                      <Badge variant='default' className='text-xs'>
-                        Active
-                      </Badge>
-                    </div>
-                    <div className='flex items-center space-x-2 mt-1'>
-                      <code className='relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs'>
-                        {apiKey.apiKey}
-                      </code>
-                    </div>
-                    <div className='flex items-center mt-1 space-x-3 text-xs text-muted-foreground'>
-                      <div>
-                        Created at:{' '}
-                        {new Date(apiKey.createdAt).toLocaleString('en-US', {
-                          dateStyle: 'medium',
-                          timeStyle: 'short',
-                        })}
-                      </div>
-                      <div>
-                        Last used:{' '}
-                        {apiKey?.lastUsedAt && apiKey.usageCount
-                          ? new Date(apiKey.lastUsedAt).toLocaleString(
-                              'en-US',
-                              {
-                                dateStyle: 'medium',
-                                timeStyle: 'short',
-                              }
-                            )
-                          : 'Never'}
-                      </div>
-                    </div>
-                  </div>
-                  <div className=''>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant='ghost' size='icon' className='h-6 w-6'>
-                          <MoreVertical className='h-3 w-3' />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align='end'>
-                        <DropdownMenuItem
-                          onClick={() => {
-                            setSelectedKey(apiKey)
-                            setNewKeyName(apiKey.name || 'API Key')
-                            setIsRenameDialogOpen(true)
-                          }}
-                        >
-                          Rename
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          className='text-destructive'
-                          onClick={() => {
-                            setSelectedKey(apiKey)
-                            setIsRevokeDialogOpen(true)
-                          }}
-                        >
-                          Revoke
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+            {/* A plain row, not a nested Card. Each key used to render a Card
+                stripped of its border and shadow inside the outer Card, which
+                bought markup and padding for no visual result.
+
+                The per-row "Active" badge is gone too: this list only ever
+                holds active keys, revoked ones live behind their own dialog,
+                so the badge was on every row and distinguished nothing. */}
+            {apiKeys?.map((apiKey: ApiKeyRow) => (
+              <div
+                key={apiKey._id}
+                className='flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors hover:bg-muted/50'
+              >
+                <Key className='mt-0.5 h-4 w-4 shrink-0 text-muted-foreground' />
+                <div className='min-w-0 flex-1 space-y-1'>
+                  <div className='flex items-center gap-2'>
+                    <h3 className='truncate text-sm font-medium'>
+                      {apiKey.name || 'API Key'}
+                    </h3>
                   </div>
-                </CardContent>
-              </Card>
+                  {/* inline-block so the tinted background hugs the key
+                      instead of stretching into a full-width bar. */}
+                  <code className='inline-block max-w-full truncate rounded bg-muted px-1.5 py-0.5 align-middle font-mono text-xs text-muted-foreground'>
+                    {apiKey.apiKey}
+                  </code>
+                  <p className='text-xs text-muted-foreground'>
+                    Created <RelativeTime value={apiKey.createdAt} />
+                    <span className='mx-1.5 opacity-50'>·</span>
+                    Last used{' '}
+                    <RelativeTime
+                      value={
+                        apiKey?.lastUsedAt && apiKey.usageCount
+                          ? apiKey.lastUsedAt
+                          : null
+                      }
+                      fallback='never'
+                    />
+                  </p>
+                </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant='ghost'
+                      size='icon'
+                      className='h-7 w-7 shrink-0'
+                      aria-label='API key actions'
+                    >
+                      <MoreVertical className='h-3.5 w-3.5' />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align='end'>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        setSelectedKey(apiKey)
+                        setNewKeyName(apiKey.name || 'API Key')
+                        setIsRenameDialogOpen(true)
+                      }}
+                    >
+                      Rename
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      className='text-destructive'
+                      onClick={() => {
+                        setSelectedKey(apiKey)
+                        setIsRevokeDialogOpen(true)
+                      }}
+                    >
+                      Revoke
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
             ))}
           </div>
 
@@ -319,7 +297,7 @@ export default function ApiKeys() {
               </Button>
               <Button
                 variant='destructive'
-                onClick={() => revokeApiKey(selectedKey?._id)}
+                onClick={() => selectedKey?._id && handleRevokeApiKey(selectedKey._id)}
                 disabled={isRevokingApiKey}
               >
                 {isRevokingApiKey ? (
@@ -370,13 +348,7 @@ export default function ApiKeys() {
                       {k.apiKey}
                     </code>
                     <div className='text-xs text-muted-foreground mt-1'>
-                      Revoked{' '}
-                      {k.revokedAt
-                        ? new Date(k.revokedAt).toLocaleString('en-US', {
-                            dateStyle: 'medium',
-                            timeStyle: 'short',
-                          })
-                        : ''}
+                      Revoked <RelativeTime value={k.revokedAt} fallback='' />
                     </div>
                   </div>
                   <Button
@@ -425,7 +397,7 @@ export default function ApiKeys() {
                 variant='destructive'
                 onClick={() =>
                   revokedKeyToDelete &&
-                  deleteRevokedApiKey(revokedKeyToDelete._id)
+                  handleDeleteRevokedApiKey(revokedKeyToDelete._id)
                 }
                 disabled={isDeletingRevokedApiKey}
               >
@@ -462,10 +434,8 @@ export default function ApiKeys() {
               </Button>
               <Button
                 onClick={() =>
-                  renameApiKey({
-                    id: selectedKey?._id,
-                    name: newKeyName?.trim(),
-                  })
+                  selectedKey &&
+                  handleRenameApiKey(selectedKey._id, newKeyName.trim())
                 }
                 disabled={isRenamingApiKey || !newKeyName?.trim()}
               >
diff --git a/web/app/(app)/dashboard/(components)/generate-api-key.tsx b/web/app/(app)/dashboard/(components)/api-keys/generate-api-key.tsx
similarity index 80%
rename from web/app/(app)/dashboard/(components)/generate-api-key.tsx
rename to web/app/(app)/dashboard/(components)/api-keys/generate-api-key.tsx
index 1150c1a1..f75ac1ed 100644
--- a/web/app/(app)/dashboard/(components)/generate-api-key.tsx
+++ b/web/app/(app)/dashboard/(components)/api-keys/generate-api-key.tsx
@@ -7,11 +7,9 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Spinner } from '@/components/ui/spinner'
-import { ApiEndpoints } from '@/config/api'
 import { Routes } from '@/config/routes'
 import { useToast } from '@/hooks/use-toast'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useGenerateApiKey } from '@/lib/api'
 import { QrCode, Copy, Smartphone, Download, AlertTriangle } from 'lucide-react'
 import React, { forwardRef, useImperativeHandle, useState } from 'react'
 import QRCode from 'react-qr-code'
@@ -22,10 +20,20 @@ export type GenerateApiKeyHandle = {
 
 type GenerateApiKeyProps = {
   showTrigger?: boolean
+  // Lets a caller say "Generate another API key" where a key already exists.
+  triggerLabel?: string
+  triggerVariant?: 'default' | 'outline'
 }
 
 const GenerateApiKey = forwardRef<GenerateApiKeyHandle, GenerateApiKeyProps>(
-  function GenerateApiKey({ showTrigger = true }, ref) {
+  function GenerateApiKey(
+    {
+      showTrigger = true,
+      triggerLabel = 'Generate API Key',
+      triggerVariant = 'default',
+    },
+    ref
+  ) {
     const [isGenerateKeyModalOpen, setIsGenerateKeyModalOpen] = useState(false)
     const [isConfirmGenerateKeyModalOpen, setIsConfirmGenerateKeyModalOpen] =
       useState(false)
@@ -38,31 +46,25 @@ const GenerateApiKey = forwardRef<GenerateApiKeyHandle, GenerateApiKeyProps>(
       open: () => setIsConfirmGenerateKeyModalOpen(true),
     }))
 
-    const queryClient = useQueryClient()
-
     const {
       isPending: isGeneratingApiKey,
-      mutateAsync: generateApiKey,
+      mutateAsync: generateApiKeyMutation,
       data: generatedApiKey,
-    } = useMutation({
-      mutationKey: ['generate-api-key'],
-      onSuccess: () => {
-        setIsConfirmGenerateKeyModalOpen(false)
-        setIsGenerateKeyModalOpen(true)
-        queryClient.invalidateQueries({ queryKey: ['apiKeys', 'stats'] })
-        queryClient.refetchQueries({ queryKey: ['apiKeys', 'stats'] })
-        queryClient.invalidateQueries({ queryKey: ['devices'] })
-      },
-      mutationFn: () =>
-        httpBrowserClient
-          .post(ApiEndpoints.auth.generateApiKey())
-          .then((res) => res.data),
-    })
+    } = useGenerateApiKey()
+
+    const generateApiKey = () =>
+      generateApiKeyMutation(undefined, {
+        onSuccess: () => {
+          setIsConfirmGenerateKeyModalOpen(false)
+          setIsGenerateKeyModalOpen(true)
+        },
+      })
 
     const { toast } = useToast()
 
     const handleCopyKey = () => {
-      navigator.clipboard.writeText(generatedApiKey?.data)
+      if (!generatedApiKey?.data) return
+      navigator.clipboard.writeText(generatedApiKey.data)
       toast({
         title: 'API key copied to clipboard',
       })
@@ -71,9 +73,9 @@ const GenerateApiKey = forwardRef<GenerateApiKeyHandle, GenerateApiKeyProps>(
     return (
       <>
         {showTrigger ? (
-          <Button onClick={handleConfirmGenerateKey}>
+          <Button variant={triggerVariant} onClick={handleConfirmGenerateKey}>
             <QrCode className='mr-2 h-4 w-4' />
-            Generate API Key
+            {triggerLabel}
           </Button>
         ) : null}
 
@@ -85,13 +87,9 @@ const GenerateApiKey = forwardRef<GenerateApiKeyHandle, GenerateApiKeyProps>(
             <DialogHeader>
               <DialogTitle>Create new API Key</DialogTitle>
               <DialogDescription>
-                <div className='space-y-2 text-sm text-muted-foreground'>
-                  <p>
-                    By clicking generate, you will be able to view your API key.
-                    Make sure to save it before closing the modal as you will not
-                    be able to view it again.
-                  </p>
-                </div>
+                By clicking generate, you will be able to view your API key.
+                Make sure to save it before closing the modal as you will not be
+                able to view it again.
               </DialogDescription>
             </DialogHeader>
             <div className='flex flex-col space-y-4'>
@@ -136,7 +134,13 @@ const GenerateApiKey = forwardRef<GenerateApiKeyHandle, GenerateApiKeyProps>(
                   <code className='relative rounded bg-muted px-[0.5rem] py-[0.3rem] font-mono text-sm flex-1'>
                     {generatedApiKey?.data}
                   </code>
-                  <Button variant='outline' size='icon' onClick={handleCopyKey}>
+                  <Button
+                    variant='outline'
+                    size='icon'
+                    aria-label='Copy API key'
+                    title='Copy API key'
+                    onClick={handleCopyKey}
+                  >
                     <Copy className='h-4 w-4' />
                   </Button>
                 </div>
diff --git a/web/app/(app)/dashboard/(components)/billing/subscription-info.test.tsx b/web/app/(app)/dashboard/(components)/billing/subscription-info.test.tsx
new file mode 100644
index 00000000..034ff81e
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/billing/subscription-info.test.tsx
@@ -0,0 +1,229 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import SubscriptionInfo from './subscription-info'
+
+const useSubscription = vi.fn()
+const useCurrentUser = vi.fn()
+
+vi.mock('@/lib/api', () => ({
+  useSubscription: () => useSubscription(),
+  useCurrentUser: () => useCurrentUser(),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  useToast: () => ({ toast: vi.fn() }),
+}))
+
+// The payload billing.service.ts synthesises for a user with no subscription:
+// a plan and usage, and deliberately no status, amount or dates.
+const freeSubscription = {
+  plan: {
+    name: 'free',
+    dailyLimit: 50,
+    monthlyLimit: 300,
+    bulkSendLimit: 50,
+    deviceLimit: 1,
+  },
+  isActive: true,
+  usage: {
+    dailyLimit: 50,
+    monthlyLimit: 300,
+    bulkSendLimit: 50,
+    deviceLimit: 1,
+    processedSmsToday: 4,
+    processedSmsLastMonth: 40,
+    dailyRemaining: 46,
+    monthlyRemaining: 260,
+    dailyUsagePercentage: 8,
+    monthlyUsagePercentage: 13,
+  },
+}
+
+const proSubscription = {
+  plan: { name: 'Pro', dailyLimit: -1, monthlyLimit: 5000, deviceLimit: 5 },
+  usage: { monthlyLimit: 5000, processedSmsLastMonth: 500 },
+  status: 'active',
+  amount: 999,
+  currency: 'usd',
+  recurringInterval: 'month',
+  subscriptionStartDate: '2026-06-01T00:00:00.000Z',
+  currentPeriodEnd: '2026-08-01T00:00:00.000Z',
+}
+
+const setSubscription = (data: unknown) =>
+  useSubscription.mockReturnValue({ data, isLoading: false, error: null })
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  useCurrentUser.mockReturnValue({ data: { email: 'user@example.com' } })
+  setSubscription(proSubscription)
+})
+
+describe('SubscriptionInfo', () => {
+  describe('a free account', () => {
+    beforeEach(() => setSubscription(freeSubscription))
+
+    // The reported defect. A free user has no subscription, so the page was
+    // reading a payload with no status as a subscription whose status was
+    // unknown.
+    it('never says the status is Unknown', () => {
+      render(<SubscriptionInfo />)
+      expect(screen.queryByText('Unknown')).not.toBeInTheDocument()
+    })
+
+    it('names the plan and says there is nothing to pay', () => {
+      render(<SubscriptionInfo />)
+
+      expect(
+        screen.getByRole('heading', { name: 'Free' })
+      ).toBeInTheDocument()
+      expect(screen.getByText('$0')).toBeInTheDocument()
+      expect(screen.getByText(/nothing to pay/i)).toBeInTheDocument()
+    })
+
+    // Both dates were always "N/A" for a free account, which is noise, not
+    // information.
+    it('hides the billing dates it has no values for', () => {
+      render(<SubscriptionInfo />)
+
+      expect(screen.queryByText('Start date')).not.toBeInTheDocument()
+      expect(screen.queryByText('Next payment')).not.toBeInTheDocument()
+      expect(screen.queryByText('N/A')).not.toBeInTheDocument()
+    })
+
+    it('offers no customer portal, since there is nothing to manage', () => {
+      render(<SubscriptionInfo />)
+      expect(
+        screen.queryByRole('link', { name: /Manage subscription/i })
+      ).not.toBeInTheDocument()
+    })
+
+    it('sells the next tier up', () => {
+      render(<SubscriptionInfo />)
+      expect(
+        screen.getByRole('link', { name: /Upgrade to Pro/ })
+      ).toHaveAttribute('href', '/checkout/pro')
+    })
+
+    it('still shows the plan limits', () => {
+      render(<SubscriptionInfo />)
+      expect(screen.getByText('Daily')).toBeInTheDocument()
+      expect(screen.getByText('Last 30 days')).toBeInTheDocument()
+    })
+  })
+
+  describe('a Pro subscriber', () => {
+    it('shows the real status with a matching icon', () => {
+      render(<SubscriptionInfo />)
+      expect(screen.getByText('Active')).toBeInTheDocument()
+    })
+
+    it('shows the price actually charged', () => {
+      render(<SubscriptionInfo />)
+      expect(screen.getByText('$9.99')).toBeInTheDocument()
+      expect(screen.getByText(/monthly/)).toBeInTheDocument()
+    })
+
+    it('shows both billing dates', () => {
+      render(<SubscriptionInfo />)
+      expect(screen.getByText('Start date')).toBeInTheDocument()
+      expect(screen.getByText('Next payment')).toBeInTheDocument()
+    })
+
+    it('sells Scale, not Pro again', () => {
+      render(<SubscriptionInfo />)
+
+      expect(
+        screen.getByRole('link', { name: /Upgrade to Scale/ })
+      ).toHaveAttribute('href', '/checkout/scale')
+      expect(
+        screen.queryByRole('link', { name: /Upgrade to Pro/ })
+      ).not.toBeInTheDocument()
+    })
+
+    it('links the customer portal with the signed-in email', () => {
+      render(<SubscriptionInfo />)
+
+      const portal = screen.getByRole('link', { name: /Manage subscription/i })
+      expect(portal).toHaveAttribute(
+        'href',
+        expect.stringContaining('user%40example.com')
+      )
+      // window.opener would otherwise stay live on an external billing page.
+      expect(portal).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+  })
+
+  describe('a Scale subscriber', () => {
+    beforeEach(() =>
+      setSubscription({
+        plan: { name: 'Scale' },
+        status: 'active',
+        amount: 2999,
+        currency: 'usd',
+      })
+    )
+
+    it('is not sold a tier that does not exist', () => {
+      render(<SubscriptionInfo />)
+      expect(
+        screen.queryByRole('link', { name: /Upgrade to/ })
+      ).not.toBeInTheDocument()
+    })
+
+    it('can still reach the portal and the pricing page', () => {
+      render(<SubscriptionInfo />)
+      expect(
+        screen.getByRole('link', { name: /Manage subscription/i })
+      ).toBeInTheDocument()
+      expect(
+        screen.getByRole('link', { name: /Compare all plans/ })
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe('a past due subscriber', () => {
+    beforeEach(() =>
+      setSubscription({ ...proSubscription, status: 'past_due' })
+    )
+
+    // The pill used to hardcode a check mark, so bad news arrived with a tick
+    // next to it.
+    it('reports the real status rather than reassuring the user', () => {
+      render(<SubscriptionInfo />)
+
+      expect(screen.getByText('Past Due')).toBeInTheDocument()
+      expect(screen.queryByText('Active')).not.toBeInTheDocument()
+    })
+  })
+
+  // A paid plan whose payload genuinely lost its status is a different case
+  // from a free account, and must not be quietly reported as either Active or
+  // Free.
+  it('still says Unknown for a paid plan missing its status', () => {
+    setSubscription({ plan: { name: 'Pro' }, amount: 999, currency: 'usd' })
+    render(<SubscriptionInfo />)
+
+    expect(screen.getByText('Unknown')).toBeInTheDocument()
+  })
+
+  it('always offers the pricing page', () => {
+    setSubscription(freeSubscription)
+    render(<SubscriptionInfo />)
+
+    expect(
+      screen.getByRole('link', { name: /Compare all plans/ })
+    ).toHaveAttribute('href', 'https://textbee.dev/pricing')
+  })
+
+  it('renders an error state rather than an empty card', () => {
+    useSubscription.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      error: new Error('boom'),
+    })
+    render(<SubscriptionInfo />)
+
+    expect(screen.getByText(/Failed to load subscription/i)).toBeInTheDocument()
+  })
+})
diff --git a/web/app/(app)/dashboard/(components)/billing/subscription-info.tsx b/web/app/(app)/dashboard/(components)/billing/subscription-info.tsx
new file mode 100644
index 00000000..47d1f0ea
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/billing/subscription-info.tsx
@@ -0,0 +1,496 @@
+'use client'
+
+import { useEffect } from 'react'
+import {
+  ArrowRight,
+  Calendar,
+  ExternalLink,
+  Info,
+  Sparkles,
+  type LucideIcon,
+} from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
+import { useCurrentUser, useSubscription } from '@/lib/api'
+import type { SubscriptionStatus } from '@/lib/api/types'
+import {
+  formatLimit,
+  formatPrice,
+  formatDate,
+  getBillingInterval,
+  titleCaseStatus,
+} from '@/lib/format'
+import {
+  subscriptionStatusIcon,
+  subscriptionStatusTone,
+  usageMeterColor,
+} from '@/lib/status'
+import { deriveUsage } from '@/lib/usage'
+import { billingPriceLabel, deriveBillingState } from '@/lib/billing'
+import { formatPlanPrice } from '@/lib/plans'
+import { Routes } from '@/config/routes'
+import { polarCustomerPortalRequestUrl } from '@/config/external-links'
+import Link from 'next/link'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { useToast } from '@/hooks/use-toast'
+import { cn } from '@/lib/utils'
+
+type Meter = {
+  used: number
+  remaining: number
+  percentage: number
+  usedLabel: string
+  unlimited: boolean
+}
+
+// Icon arrives as a prop rather than being selected into a local, matching how
+// EmptyState and the dashboard Stat take theirs. Both the icon and the tone
+// come from the status, so the pill can no longer show a reassuring tick next
+// to bad news the way the hardcoded check mark did.
+function StatusPill({
+  status,
+  icon: Icon,
+}: {
+  status: SubscriptionStatus | null | undefined
+  icon: LucideIcon
+}) {
+  const tone = subscriptionStatusTone(status)
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-1 rounded-full px-2 py-0.5',
+        tone.bg
+      )}
+    >
+      <Icon className={cn('h-3 w-3', tone.text)} aria-hidden />
+      <span className={cn('text-xs font-medium', tone.text)}>
+        {/* Never assert "Active" for a payload that carried no status. */}
+        {titleCaseStatus(status) || 'Unknown'}
+      </span>
+    </div>
+  )
+}
+
+function DateTile({ label, value }: { label: string; value?: string }) {
+  return (
+    <div className='flex items-center gap-2 rounded-md border bg-muted/40 p-2.5'>
+      <Calendar className='h-3.5 w-3.5 flex-none text-primary' aria-hidden />
+      <div className='min-w-0'>
+        <p className='text-[11px] text-muted-foreground'>{label}</p>
+        <p className='truncate text-xs font-medium text-foreground'>
+          {formatDate(value)}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+type LimitTileProps = {
+  label: string
+  effectiveValue: number | null | undefined
+  planValue: number | null | undefined
+  isOverridden: boolean
+  planName?: string
+  tooltipUnit: string
+  unlimitedNote?: string
+  meter?: Meter
+}
+
+function LimitTile({
+  label,
+  effectiveValue,
+  planValue,
+  isOverridden,
+  planName,
+  tooltipUnit,
+  unlimitedNote,
+  meter,
+}: LimitTileProps) {
+  const isUnlimited = effectiveValue === -1
+  const meterColor = meter ? usageMeterColor(meter.percentage) : 'bg-green-500'
+
+  return (
+    <div
+      className={cn(
+        'rounded-md border p-2.5',
+        isOverridden
+          ? 'border-amber-500/30 bg-amber-500/5'
+          : 'bg-muted/40'
+      )}
+    >
+      <div className='flex items-center justify-between gap-1'>
+        <p className='text-xs text-muted-foreground'>{label}</p>
+        {isOverridden && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className='inline-flex cursor-default items-center gap-0.5 rounded-full border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-600 dark:text-amber-400'>
+                  <Sparkles className='h-2.5 w-2.5' aria-hidden />
+                  Custom
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p className='max-w-[220px]'>
+                  Custom limit set for your account by the textbee team.
+                  {planName
+                    ? ` Standard ${planName} plan limit: ${formatLimit(
+                        planValue
+                      )} ${tooltipUnit}.`
+                    : ''}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+
+      <div className='mt-0.5 flex items-baseline gap-1.5'>
+        <p className='text-sm font-semibold text-foreground'>
+          {formatLimit(effectiveValue)}
+        </p>
+        {isOverridden && (
+          <span className='text-xs text-muted-foreground line-through'>
+            {formatLimit(planValue)}
+          </span>
+        )}
+        {isUnlimited && unlimitedNote && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className='inline-flex items-center'>
+                  <Info className='h-3.5 w-3.5 cursor-pointer text-muted-foreground' />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{unlimitedNote}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+
+      {meter && !meter.unlimited && (
+        <div className='mt-1.5'>
+          <div className='h-1.5 w-full overflow-hidden rounded-full bg-muted'>
+            <div
+              className={cn('h-full rounded-full transition-all', meterColor)}
+              style={{
+                width: `${Math.min(Math.max(meter.percentage, 0), 100)}%`,
+              }}
+            />
+          </div>
+          <div className='mt-1 flex items-center justify-between gap-2 text-[10px] text-muted-foreground'>
+            <span>
+              {meter.used.toLocaleString()} {meter.usedLabel}
+            </span>
+            <span className='flex-none'>
+              {Math.max(meter.remaining, 0).toLocaleString()} left
+            </span>
+          </div>
+        </div>
+      )}
+      {meter && meter.unlimited && (
+        <p className='mt-1.5 text-[10px] text-muted-foreground'>
+          {meter.used.toLocaleString()} {meter.usedLabel}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default function SubscriptionInfo() {
+  const { toast } = useToast()
+
+  // the checkout page redirects here after an in-place plan change
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search)
+    if (searchParams.get('plan-change-success')) {
+      toast({
+        title: 'Plan updated',
+        description: 'Your subscription has been updated to the new plan.',
+      })
+      searchParams.delete('plan-change-success')
+      const query = searchParams.toString()
+      window.history.replaceState(
+        null,
+        '',
+        `${window.location.pathname}${query ? `?${query}` : ''}`,
+      )
+    }
+  }, [toast])
+
+  const {
+    data: currentSubscription,
+    isLoading: isLoadingSubscription,
+    error: subscriptionError,
+  } = useSubscription()
+
+  const { data: currentUser } = useCurrentUser()
+
+  if (isLoadingSubscription)
+    return (
+      <div className='flex h-full min-h-[200px] items-center justify-center'>
+        <Spinner size='sm' />
+      </div>
+    )
+
+  if (subscriptionError)
+    return (
+      <p className='text-sm text-destructive'>
+        Failed to load subscription information
+      </p>
+    )
+
+  const plan = currentSubscription?.plan
+  const usage = currentSubscription?.usage
+
+  const billing = deriveBillingState(currentSubscription)
+  const amount = billingPriceLabel(currentSubscription)
+
+  // Shared with the dashboard usage cards. This page used to derive the same
+  // numbers inline, which is exactly what deriveUsage exists to prevent: the
+  // helper clamps percentage to 0-100 and the inline copy did not, so the two
+  // screens could disagree about the same quota.
+  const { daily, monthly } = deriveUsage(currentSubscription)
+
+  const isOverridden = (
+    custom: number | null | undefined,
+    planValue: number | null | undefined
+  ) => custom != null && custom !== planValue
+
+  const limitTiles: LimitTileProps[] = [
+    {
+      label: 'Daily',
+      effectiveValue: usage?.dailyLimit ?? plan?.dailyLimit,
+      planValue: plan?.dailyLimit,
+      isOverridden: isOverridden(
+        currentSubscription?.customDailyLimit,
+        plan?.dailyLimit
+      ),
+      planName: billing.planName,
+      tooltipUnit: 'per day',
+      unlimitedNote: 'Unlimited (within monthly limit)',
+      meter: {
+        used: daily.used,
+        remaining: daily.remaining,
+        percentage: daily.percentage,
+        usedLabel: 'used today',
+        unlimited: daily.unlimited,
+      },
+    },
+    {
+      // "Last 30 days", not "Monthly": the backend counts from setMonth(-1),
+      // a rolling window. Calling it monthly led users who capped out late in
+      // the month to wait for a reset on the 1st that never comes.
+      label: 'Last 30 days',
+      effectiveValue: usage?.monthlyLimit ?? plan?.monthlyLimit,
+      planValue: plan?.monthlyLimit,
+      isOverridden: isOverridden(
+        currentSubscription?.customMonthlyLimit,
+        plan?.monthlyLimit
+      ),
+      planName: billing.planName,
+      tooltipUnit: 'per rolling 30 days',
+      unlimitedNote: 'Unlimited (within fair usage)',
+      meter: {
+        used: monthly.used,
+        remaining: monthly.remaining,
+        percentage: monthly.percentage,
+        usedLabel: 'used in the last 30 days',
+        unlimited: monthly.unlimited,
+      },
+    },
+    {
+      label: 'Bulk send',
+      effectiveValue: usage?.bulkSendLimit ?? plan?.bulkSendLimit,
+      planValue: plan?.bulkSendLimit,
+      isOverridden: isOverridden(
+        currentSubscription?.customBulkSendLimit,
+        plan?.bulkSendLimit
+      ),
+      planName: billing.planName,
+      tooltipUnit: 'per bulk send',
+      unlimitedNote: 'Unlimited (within monthly limit)',
+    },
+    {
+      label: 'Devices',
+      effectiveValue: usage?.deviceLimit ?? plan?.deviceLimit,
+      planValue: plan?.deviceLimit,
+      isOverridden: isOverridden(
+        currentSubscription?.customDeviceLimit,
+        plan?.deviceLimit
+      ),
+      planName: billing.planName,
+      tooltipUnit: 'devices',
+      unlimitedNote: 'Unlimited devices',
+    },
+  ]
+
+  const hasCustomLimits = limitTiles.some((tile) => tile.isOverridden)
+
+  return (
+    <div className='space-y-4'>
+      {/* Plan and billing identity. */}
+      <section className='rounded-lg border bg-card p-4 shadow-sm'>
+        <div className='flex flex-wrap items-start justify-between gap-3'>
+          <div className='min-w-0'>
+            <div className='flex flex-wrap items-center gap-2'>
+              <h3 className='text-lg font-bold text-foreground'>
+                {billing.planName}
+              </h3>
+              {hasCustomLimits && (
+                <Badge
+                  variant='outline'
+                  className='gap-1 border-amber-500/40 bg-amber-500/10 text-[10px] font-medium text-amber-600 dark:text-amber-400'
+                >
+                  <Sparkles className='h-3 w-3' aria-hidden />
+                  Custom limits
+                </Badge>
+              )}
+            </div>
+
+            <p className='mt-0.5 text-xs text-muted-foreground'>
+              {billing.isFree ? (
+                <>
+                  <span className='font-medium text-foreground'>
+                    {formatPlanPrice(0)}
+                  </span>{' '}
+                  / month. No subscription, nothing to pay.
+                </>
+              ) : amount != null ? (
+                <>
+                  <span className='font-medium text-foreground'>
+                    {formatPrice(amount, currentSubscription?.currency)}
+                  </span>
+                  {currentSubscription?.recurringInterval && (
+                    <>
+                      {' '}
+                      /{' '}
+                      {getBillingInterval(
+                        currentSubscription?.recurringInterval
+                      )}
+                    </>
+                  )}
+                </>
+              ) : (
+                'Current subscription'
+              )}
+            </p>
+          </div>
+
+          {/* A free account has no subscription, so it has no status. Showing
+              a pill here at all was what produced "Unknown" for every free
+              user. A real subscription still shows its true status, including
+              Unknown when the payload genuinely omits one. */}
+          {!billing.isFree && (
+            <StatusPill
+              status={billing.status}
+              icon={subscriptionStatusIcon(billing.status)}
+            />
+          )}
+        </div>
+
+        {billing.hasBillingDates && (
+          <div className='mt-3 grid grid-cols-1 gap-2.5 sm:grid-cols-2'>
+            <DateTile
+              label='Start date'
+              value={currentSubscription?.subscriptionStartDate}
+            />
+            <DateTile
+              label='Next payment'
+              value={currentSubscription?.currentPeriodEnd}
+            />
+          </div>
+        )}
+
+        <div className='mt-4 flex flex-wrap items-center gap-2'>
+          {billing.upgradeTier && (
+            <Button size='sm' asChild>
+              <Link href={`/checkout/${billing.upgradeTier.id}`}>
+                Upgrade to {billing.upgradeTier.name}
+                <ArrowRight className='ml-1 h-3.5 w-3.5' aria-hidden />
+              </Link>
+            </Button>
+          )}
+
+          {billing.canManageBilling && (
+            <Button size='sm' variant='outline' asChild>
+              <Link
+                href={polarCustomerPortalRequestUrl(currentUser?.email)}
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                Manage subscription
+                <ExternalLink className='ml-1 h-3.5 w-3.5' aria-hidden />
+              </Link>
+            </Button>
+          )}
+
+          {/* Same label as the onboarding plan picker, pointing at the same
+              page, so the two do not read as different destinations. */}
+          <Button
+            size='sm'
+            variant='link'
+            className='h-auto px-0 text-xs text-muted-foreground'
+            asChild
+          >
+            <a
+              href={`${Routes.landingPage}/pricing`}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              Compare all plans
+              <ExternalLink className='ml-1 h-3 w-3' aria-hidden />
+            </a>
+          </Button>
+        </div>
+      </section>
+
+      {/* Usage against the plan's limits. */}
+      <section className='rounded-lg border bg-card p-4 shadow-sm'>
+        <div className='mb-3 flex flex-wrap items-center justify-between gap-2'>
+          <div className='flex items-center gap-1'>
+            <h4 className='text-xs font-medium text-muted-foreground'>
+              Usage limits
+            </h4>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className='inline-flex items-center'>
+                    <Info className='h-3.5 w-3.5 cursor-pointer text-muted-foreground' />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className='max-w-[240px]'>
+                    SMS usage is measured on a rolling window, not your billing
+                    cycle. Daily usage resets at 00:00 UTC and monthly usage
+                    covers a rolling 30-day window. The start and next payment
+                    dates above are just your subscription start and renewal
+                    dates.
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+          {hasCustomLimits && (
+            <p className='text-[10px] text-amber-600 dark:text-amber-400'>
+              Custom values set for your account
+            </p>
+          )}
+        </div>
+
+        <div className='grid grid-cols-1 gap-2.5 sm:grid-cols-2'>
+          {limitTiles.map((tile) => (
+            <LimitTile key={tile.label} {...tile} />
+          ))}
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/billing/usage-summary.test.tsx b/web/app/(app)/dashboard/(components)/billing/usage-summary.test.tsx
new file mode 100644
index 00000000..58ce6bb0
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/billing/usage-summary.test.tsx
@@ -0,0 +1,91 @@
+import { describe, expect, it } from 'vitest'
+import { http, HttpResponse, type JsonBodyType } from 'msw'
+import { renderWithProviders, screen, waitFor } from '@/test/render'
+import { server } from '@/test/msw/server'
+import { API_BASE_URL, mockSubscription } from '@/test/fixtures'
+import UsageSummary from './usage-summary'
+
+// The dashboard must only show numbers the backend actually returns. These
+// guard the two ways that can go wrong: inventing a meter for an unlimited
+// plan, and failing to warn when a real limit is nearly spent.
+
+const subscriptionResponding = (subscription: JsonBodyType) =>
+  server.use(
+    http.get(`${API_BASE_URL}/billing/current-subscription`, () =>
+      HttpResponse.json(subscription)
+    )
+  )
+
+describe('UsageSummary', () => {
+  it('shows usage against the limit for a metered plan', async () => {
+    renderWithProviders(<UsageSummary />)
+
+    await waitFor(() => expect(screen.getByText('320')).toBeInTheDocument())
+    // 320 of 5000 sent today.
+    expect(screen.getByText('/ 5,000')).toBeInTheDocument()
+    expect(screen.getByText('4,680 remaining')).toBeInTheDocument()
+    expect(
+      screen.getByRole('progressbar', { name: /today usage/i })
+    ).toBeInTheDocument()
+  })
+
+  it('renders no progress bar for an unlimited plan', async () => {
+    subscriptionResponding({
+      ...mockSubscription,
+      plan: { ...mockSubscription.plan, dailyLimit: -1, monthlyLimit: -1 },
+      usage: {
+        ...mockSubscription.usage,
+        dailyLimit: -1,
+        monthlyLimit: -1,
+      },
+    })
+
+    renderWithProviders(<UsageSummary />)
+
+    await waitFor(() =>
+      expect(screen.getAllByText(/Unlimited on your plan/)).toHaveLength(2)
+    )
+    // A meter would be meaningless with no ceiling to measure against.
+    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
+  })
+
+  it('warns and offers an upgrade when close to the limit', async () => {
+    subscriptionResponding({
+      ...mockSubscription,
+      usage: {
+        ...mockSubscription.usage,
+        processedSmsToday: 4500,
+        dailyRemaining: 500,
+        dailyUsagePercentage: 90,
+      },
+    })
+
+    renderWithProviders(<UsageSummary />)
+
+    await waitFor(() =>
+      expect(screen.getByText('500 remaining')).toBeInTheDocument()
+    )
+    expect(screen.getByRole('link', { name: /upgrade/i })).toHaveAttribute(
+      'href',
+      '/dashboard/account/billing'
+    )
+  })
+
+  it('says the limit is reached rather than showing a remaining count', async () => {
+    subscriptionResponding({
+      ...mockSubscription,
+      usage: {
+        ...mockSubscription.usage,
+        processedSmsToday: 5000,
+        dailyRemaining: 0,
+        dailyUsagePercentage: 100,
+      },
+    })
+
+    renderWithProviders(<UsageSummary />)
+
+    await waitFor(() =>
+      expect(screen.getByText('Limit reached')).toBeInTheDocument()
+    )
+  })
+})
diff --git a/web/app/(app)/dashboard/(components)/billing/usage-summary.tsx b/web/app/(app)/dashboard/(components)/billing/usage-summary.tsx
new file mode 100644
index 00000000..06e5bea2
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/billing/usage-summary.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+import Link from 'next/link'
+import { ArrowRight, CalendarDays, Clock, Infinity as InfinityIcon } from 'lucide-react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useSubscription } from '@/lib/api'
+import { deriveUsage, type UsageWindow } from '@/lib/usage'
+import { cn } from '@/lib/utils'
+
+// The question a dashboard should answer first is "how much of my quota is
+// left", which the all-time counters could never answer. Every value here
+// comes from the subscription response; nothing is estimated.
+function UsageCard({
+  title,
+  window: usageWindow,
+  icon: Icon,
+  isLoading,
+}: {
+  title: string
+  window: UsageWindow
+  icon: typeof Clock
+  isLoading: boolean
+}) {
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className='space-y-3 p-5'>
+          <Skeleton className='h-4 w-24' />
+          <Skeleton className='h-7 w-32' />
+          <Skeleton className='h-1.5 w-full' />
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const { used, limit, remaining, percentage, unlimited, nearLimit, atLimit } =
+    usageWindow
+
+  return (
+    <Card>
+      <CardContent className='space-y-3 p-5'>
+        <div className='flex items-center justify-between'>
+          <p className='text-sm font-medium text-muted-foreground'>{title}</p>
+          <Icon className='h-4 w-4 text-muted-foreground' />
+        </div>
+
+        {unlimited ? (
+          <>
+            <div className='flex items-baseline gap-2'>
+              <span className='text-2xl font-bold'>
+                {used.toLocaleString()}
+              </span>
+              <span className='text-sm text-muted-foreground'>
+                message{used === 1 ? '' : 's'}
+              </span>
+            </div>
+            <p className='flex items-center gap-1.5 text-xs text-muted-foreground'>
+              <InfinityIcon className='h-3.5 w-3.5' />
+              Unlimited on your plan
+            </p>
+          </>
+        ) : (
+          <>
+            <div className='flex items-baseline gap-1.5'>
+              <span className='text-2xl font-bold'>
+                {used.toLocaleString()}
+              </span>
+              <span className='text-sm text-muted-foreground'>
+                / {limit?.toLocaleString() ?? '-'}
+              </span>
+            </div>
+
+            <div
+              className='h-1.5 w-full overflow-hidden rounded-full bg-muted'
+              role='progressbar'
+              aria-valuenow={percentage}
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-label={`${title} usage`}
+            >
+              <div
+                className={cn(
+                  'h-full rounded-full transition-[width] duration-300',
+                  atLimit
+                    ? 'bg-destructive'
+                    : nearLimit
+                      ? 'bg-amber-500'
+                      : 'bg-primary'
+                )}
+                style={{ width: `${percentage}%` }}
+              />
+            </div>
+
+            <div className='flex items-center justify-between gap-2'>
+              <p
+                className={cn(
+                  'text-xs',
+                  atLimit
+                    ? 'font-medium text-destructive'
+                    : nearLimit
+                      ? 'font-medium text-amber-600 dark:text-amber-500'
+                      : 'text-muted-foreground'
+                )}
+              >
+                {atLimit
+                  ? 'Limit reached'
+                  : `${remaining.toLocaleString()} remaining`}
+              </p>
+              {(nearLimit || atLimit) && (
+                <Link
+                  href='/dashboard/account/billing'
+                  className='inline-flex items-center gap-0.5 text-xs font-medium text-primary hover:underline'
+                >
+                  Upgrade
+                  <ArrowRight className='h-3 w-3' />
+                </Link>
+              )}
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function UsageSummary() {
+  const { data: subscription, isPending } = useSubscription()
+  const { daily, monthly } = deriveUsage(subscription)
+
+  return (
+    <div className='space-y-2'>
+      <div className='grid gap-4 sm:grid-cols-2'>
+        <UsageCard
+          title='Today'
+          window={daily}
+          icon={Clock}
+          isLoading={isPending}
+        />
+        {/* "Last 30 days", not "This month": the backend counts from
+            setMonth(-1), a rolling window, not the calendar month. */}
+        <UsageCard
+          title='Last 30 days'
+          window={monthly}
+          icon={CalendarDays}
+          isLoading={isPending}
+        />
+      </div>
+      {/* The quota counts every message on the account, inbound and outbound:
+          the backend counts SMS documents with no type filter. Saying "sent"
+          would understate what actually consumes the limit. */}
+      <p className='text-xs text-muted-foreground'>
+        Counts messages sent and received against your plan limit.
+      </p>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/black-friday-modal.tsx b/web/app/(app)/dashboard/(components)/black-friday-modal.tsx
deleted file mode 100644
index 9d2ed00f..00000000
--- a/web/app/(app)/dashboard/(components)/black-friday-modal.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import Link from 'next/link'
-import {
-    Dialog,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-    DialogFooter,
-    DialogDescription,
-} from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
-import { Badge } from '@/components/ui/badge'
-import { Copy, Check } from 'lucide-react'
-
-const STORAGE_KEYS = {
-    DISMISSED: 'black_friday_modal_dismissed',
-    LAST_SHOWN: 'black_friday_modal_last_shown',
-}
-
-const SHOW_INTERVAL = 6 * 60 * 60 * 1000 // 6 hours
-
-export default function BlackFridayModal() {
-    const [isOpen, setIsOpen] = useState(false)
-    const [copiedCode, setCopiedCode] = useState<string | null>(null)
-
-    const { data: currentSubscription, isLoading } = useQuery({
-        queryKey: ['currentSubscription'],
-        queryFn: () =>
-            httpBrowserClient
-                .get(ApiEndpoints.billing.currentSubscription())
-                .then((res) => res.data),
-    })
-
-    useEffect(() => {
-        if (isLoading || !currentSubscription) return
-
-        // Only show for free plan
-        if (currentSubscription?.plan?.name !== 'free') return
-
-        // Check if permanently dismissed
-        if (localStorage.getItem(STORAGE_KEYS.DISMISSED) === 'true') return
-
-        // Check last shown time
-        const lastShown = localStorage.getItem(STORAGE_KEYS.LAST_SHOWN)
-        const now = Date.now()
-        if (lastShown && now - parseInt(lastShown) < SHOW_INTERVAL) return
-
-        // Show modal
-        setIsOpen(true)
-    }, [currentSubscription, isLoading])
-
-    const handleDismiss = () => {
-        localStorage.setItem(STORAGE_KEYS.DISMISSED, 'true')
-        setIsOpen(false)
-    }
-
-    const handleRemindLater = () => {
-        localStorage.setItem(STORAGE_KEYS.LAST_SHOWN, Date.now().toString())
-        setIsOpen(false)
-    }
-
-    const copyCode = (code: string) => {
-        navigator.clipboard.writeText(code)
-        setCopiedCode(code)
-        setTimeout(() => setCopiedCode(null), 2000)
-    }
-
-    return (
-        <Dialog open={isOpen} onOpenChange={(open) => !open && handleRemindLater()}>
-            <DialogContent className="sm:max-w-xl border-2 border-purple-500/20 shadow-2xl shadow-purple-500/10">
-                <DialogHeader>
-                    <div className="mx-auto bg-gradient-to-r from-purple-600 to-pink-600 text-white text-xs font-bold px-3 py-1 rounded-full mb-2 animate-pulse">
-                        LIMITED TIME OFFER
-                    </div>
-                    <DialogTitle className="text-2xl font-bold text-center flex items-center justify-center gap-2">
-                        🔥 Black Friday Sale
-                    </DialogTitle>
-                    <DialogDescription className="text-center text-base">
-                        Upgrade to Pro and unlock the full potential of textbee.
-                    </DialogDescription>
-                </DialogHeader>
-
-                <div className="space-y-4 py-2">
-                    {/* Benefits List */}
-                    <div className="grid grid-cols-2 gap-2 text-sm">
-                        {[
-                            "Increased SMS limits",
-                            "No daily limits",
-                            "No bulk send limits",
-                            "Priority support",
-                        ].map((benefit, i) => (
-                            <div key={i} className="flex items-center gap-2">
-                                <div className="h-5 w-5 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0">
-                                    <Check className="h-3 w-3 text-green-600 dark:text-green-400" />
-                                </div>
-                                <span>{benefit}</span>
-                            </div>
-                        ))}
-                    </div>
-
-                    <div className="grid sm:grid-cols-2 gap-4">
-                        <div className="bg-muted p-4 rounded-lg space-y-3 flex flex-col justify-between">
-                            <div className="flex items-start justify-between">
-                                <div className="flex flex-col">
-                                    <span className="font-medium">Monthly Plan</span>
-                                    <div className="flex items-center gap-2 text-sm">
-                                        <span className="text-muted-foreground line-through">$9.99</span>
-                                        <span className="font-bold text-green-600">$5.99</span>
-                                    </div>
-                                </div>
-                                <Badge variant="secondary" className="bg-black text-white hover:bg-black/90">40% OFF</Badge>
-                            </div>
-                            <div className="flex items-center gap-2 bg-background p-2 rounded border border-dashed border-primary/50">
-                                <code className="flex-1 font-mono font-bold text-center text-primary text-sm">BLACKFRIDAY40</code>
-                                <Button size="icon" variant="ghost" className="h-8 w-8" onClick={() => copyCode('BLACKFRIDAY40')}>
-                                    {copiedCode === 'BLACKFRIDAY40' ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-                                </Button>
-                            </div>
-                        </div>
-
-                        <div className="relative bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/20 dark:to-pink-950/20 p-4 rounded-lg space-y-3 border border-purple-200 dark:border-purple-800 flex flex-col justify-between">
-                            <div className="absolute -top-3 right-4 bg-gradient-to-r from-amber-500 to-orange-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-sm">
-                                BEST VALUE
-                            </div>
-                            <div className="flex items-start justify-between">
-                                <div className="flex flex-col">
-                                    <span className="font-medium">Yearly Plan</span>
-                                    <div className="flex items-center gap-2 text-sm">
-                                        <span className="text-muted-foreground line-through">$99.90</span>
-                                        <span className="font-bold text-green-600">$49.90</span>
-                                    </div>
-                                </div>
-                                <Badge variant="secondary" className="bg-black text-white hover:bg-black/90">50% OFF</Badge>
-                            </div>
-                            <div className="flex items-center gap-2 bg-background p-2 rounded border border-dashed border-primary/50">
-                                <code className="flex-1 font-mono font-bold text-center text-primary text-sm">BLACKFRIDAY50</code>
-                                <Button size="icon" variant="ghost" className="h-8 w-8" onClick={() => copyCode('BLACKFRIDAY50')}>
-                                    {copiedCode === 'BLACKFRIDAY50' ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-                                </Button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <p className="text-xs text-center text-muted-foreground">
-                        Apply code at checkout to redeem.
-                    </p>
-                </div>
-
-                <DialogFooter className="flex-col sm:flex-col gap-2">
-                    <Button className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold h-11 shadow-lg shadow-purple-500/20" asChild>
-                        <Link href="/checkout/pro">
-                            Claim Offer Now
-                        </Link>
-                    </Button>
-                    <p className="text-[10px] text-center text-muted-foreground">
-                        Cancel anytime. Secure payment.
-                    </p>
-                    <div className="flex items-center justify-between w-full pt-1">
-                        <Button variant="ghost" size="sm" onClick={handleRemindLater} className="text-muted-foreground h-auto py-1">
-                            Remind me later
-                        </Button>
-                        <Button variant="ghost" size="sm" onClick={handleDismiss} className="text-muted-foreground hover:text-destructive h-auto py-1">
-                            Don't show again
-                        </Button>
-                    </div>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    )
-}
diff --git a/web/app/(app)/dashboard/(components)/bulk-send/bulk-csv.test.ts b/web/app/(app)/dashboard/(components)/bulk-send/bulk-csv.test.ts
new file mode 100644
index 00000000..809a217e
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/bulk-send/bulk-csv.test.ts
@@ -0,0 +1,197 @@
+import { describe, expect, it } from 'vitest'
+import Papa from 'papaparse'
+import {
+  buildRecipientPlan,
+  detectRecipientColumn,
+  extractTemplateVariables,
+  findUnknownVariables,
+  formatFileSize,
+  isPlausiblePhone,
+  normalizePhone,
+  renderTemplate,
+} from './bulk-csv'
+
+describe('detectRecipientColumn', () => {
+  it('finds the obvious column', () => {
+    expect(detectRecipientColumn(['name', 'phone', 'code'])).toBe('phone')
+  })
+
+  it('is case and separator insensitive', () => {
+    expect(detectRecipientColumn(['Name', 'Phone Number'])).toBe('Phone Number')
+    expect(detectRecipientColumn(['name', 'MSISDN'])).toBe('MSISDN')
+  })
+
+  it('prefers an exact match over a partial one', () => {
+    expect(detectRecipientColumn(['phone_type', 'phone'])).toBe('phone')
+  })
+
+  it('falls back to a partial match', () => {
+    expect(detectRecipientColumn(['customer_mobile_no'])).toBe(
+      'customer_mobile_no'
+    )
+  })
+
+  it('returns undefined when nothing looks like a phone column', () => {
+    expect(detectRecipientColumn(['name', 'city', 'total'])).toBeUndefined()
+  })
+
+  it('does not let short hints claim unrelated columns', () => {
+    // "to" must not match "total", "tel" must not match "hotel".
+    expect(detectRecipientColumn(['total', 'hotel', 'country'])).toBeUndefined()
+    // But an exact "to" column is still a valid recipient column.
+    expect(detectRecipientColumn(['to', 'body'])).toBe('to')
+  })
+})
+
+describe('normalizePhone', () => {
+  it('strips formatting but keeps a leading plus', () => {
+    expect(normalizePhone('+1 (415) 555-0101')).toBe('+14155550101')
+    expect(normalizePhone(' 415.555.0101 ')).toBe('4155550101')
+  })
+})
+
+describe('isPlausiblePhone', () => {
+  it('accepts common formats', () => {
+    expect(isPlausiblePhone('+14155550101')).toBe(true)
+    expect(isPlausiblePhone('+1 (415) 555-0101')).toBe(true)
+    expect(isPlausiblePhone('0911000001')).toBe(true)
+  })
+
+  it('rejects text, empties and impossible lengths', () => {
+    expect(isPlausiblePhone('not a number')).toBe(false)
+    expect(isPlausiblePhone('')).toBe(false)
+    expect(isPlausiblePhone('12345')).toBe(false)
+    expect(isPlausiblePhone('1234567890123456789')).toBe(false)
+  })
+})
+
+describe('buildRecipientPlan', () => {
+  const rows = [
+    { name: 'Alice', phone: '+14155550101' },
+    { name: 'Blank', phone: '' },
+    { name: 'Bob', phone: '+16475550187' },
+    { name: 'Junk', phone: 'call me' },
+    // Same number as Alice in a different format.
+    { name: 'Alice again', phone: '+1 (415) 555-0101' },
+  ]
+
+  it('keeps only rows that can actually receive a message', () => {
+    const plan = buildRecipientPlan(rows, 'phone')
+
+    expect(plan.valid.map((r) => r.raw)).toEqual([
+      '+14155550101',
+      '+16475550187',
+    ])
+    expect(plan.counts).toEqual({
+      total: 5,
+      valid: 2,
+      empty: 1,
+      invalid: 1,
+      duplicate: 1,
+    })
+  })
+
+  it('explains every exclusion against the user spreadsheet row number', () => {
+    const plan = buildRecipientPlan(rows, 'phone')
+
+    // Header is row 1, so the blank row is row 3 in the file.
+    expect(plan.excluded).toEqual([
+      { rowNumber: 3, raw: '', reason: 'empty' },
+      { rowNumber: 5, raw: 'call me', reason: 'invalid' },
+      { rowNumber: 6, raw: '+1 (415) 555-0101', reason: 'duplicate' },
+    ])
+  })
+
+  it('detects duplicates across differing formats', () => {
+    const plan = buildRecipientPlan(
+      [{ phone: '4155550101' }, { phone: '415-555-0101' }],
+      'phone'
+    )
+    expect(plan.counts.valid).toBe(1)
+    expect(plan.counts.duplicate).toBe(1)
+  })
+
+  it('carries the full row so templates can use other columns', () => {
+    const plan = buildRecipientPlan(rows, 'phone')
+    expect(plan.valid[0].data.name).toBe('Alice')
+  })
+})
+
+describe('templates', () => {
+  it('extracts variables regardless of spacing', () => {
+    expect(
+      extractTemplateVariables('Hi {{name}}, order {{ order_id }} confirmed')
+    ).toEqual(['name', 'order_id'])
+  })
+
+  it('deduplicates repeated variables', () => {
+    expect(extractTemplateVariables('{{ a }} and {{a}}')).toEqual(['a'])
+  })
+
+  it('flags variables the CSV cannot fill', () => {
+    expect(
+      findUnknownVariables('Hi {{ name }}, {{ nickname }}', ['name', 'phone'])
+    ).toEqual(['nickname'])
+  })
+
+  it('renders a row', () => {
+    expect(
+      renderTemplate('Hi {{ name }}, your order {{ order_id }} is confirmed.', {
+        name: 'Alice',
+        order_id: 'ORD-1042',
+      })
+    ).toBe('Hi Alice, your order ORD-1042 is confirmed.')
+  })
+
+  it('renders unknown or missing placeholders as empty', () => {
+    expect(renderTemplate('Hi {{ nickname }}!', { name: 'Alice' })).toBe('Hi !')
+  })
+})
+
+describe('formatFileSize', () => {
+  it('never shows raw bytes for large sizes', () => {
+    expect(formatFileSize(1024 * 1024)).toBe('1 MB')
+    expect(formatFileSize(512 * 1024)).toBe('512 KB')
+    expect(formatFileSize(900)).toBe('900 B')
+  })
+})
+
+// The upload step reads its column list straight from papaparse. These pin the
+// specific parser behaviour that made reading keys off the first data row
+// wrong, so a future refactor back to Object.keys(data[0]) fails here.
+describe('csv column extraction', () => {
+  const csv = 'name,phone,city\nAlice\nBob,+14155550101,Denver'
+
+  it('meta.fields keeps every header even when the first row is short', () => {
+    const parsed = Papa.parse<Record<string, string>>(csv, {
+      header: true,
+      skipEmptyLines: true,
+    })
+
+    expect(parsed.meta.fields).toEqual(['name', 'phone', 'city'])
+  })
+
+  it('the first data row does not list every header', () => {
+    const parsed = Papa.parse<Record<string, string>>(csv, {
+      header: true,
+      skipEmptyLines: true,
+    })
+
+    // This is the bug: papaparse only assigns keys for values present in the
+    // row, so a short first row silently hides real columns from the mapping
+    // dropdown and the phone column becomes unselectable.
+    expect(Object.keys(parsed.data[0])).toEqual(['name'])
+    expect(Object.keys(parsed.data[0])).not.toContain('phone')
+  })
+
+  it('still detects the phone column from the full header list', () => {
+    const parsed = Papa.parse<Record<string, string>>(csv, {
+      header: true,
+      skipEmptyLines: true,
+    })
+
+    expect(detectRecipientColumn(parsed.meta.fields ?? [])).toBe('phone')
+    // Whereas the short first row offers nothing to detect.
+    expect(detectRecipientColumn(Object.keys(parsed.data[0]))).toBeUndefined()
+  })
+})
diff --git a/web/app/(app)/dashboard/(components)/bulk-send/bulk-csv.ts b/web/app/(app)/dashboard/(components)/bulk-send/bulk-csv.ts
new file mode 100644
index 00000000..91428c3e
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/bulk-send/bulk-csv.ts
@@ -0,0 +1,182 @@
+// Pure CSV / template logic for bulk send. No React and no network, so the
+// rules that decide who actually receives a message are directly testable.
+
+import { isPlausiblePhone, normalizePhone } from '@/lib/sms'
+
+export type CsvRow = Record<string, string>
+
+export type RecipientRow = {
+  // 1-based row number as it appears in the user's file, so problems can be
+  // reported in terms of their spreadsheet.
+  rowNumber: number
+  raw: string
+  normalized: string
+  data: CsvRow
+}
+
+export type ExclusionReason = 'empty' | 'invalid' | 'duplicate'
+
+export type ExcludedRow = {
+  rowNumber: number
+  raw: string
+  reason: ExclusionReason
+}
+
+export type RecipientPlan = {
+  valid: RecipientRow[]
+  excluded: ExcludedRow[]
+  counts: {
+    total: number
+    valid: number
+    empty: number
+    invalid: number
+    duplicate: number
+  }
+}
+
+// Column names people actually use for a phone number, most specific first.
+const RECIPIENT_COLUMN_HINTS = [
+  'phone',
+  'phone_number',
+  'phonenumber',
+  'mobile',
+  'msisdn',
+  'recipient',
+  'number',
+  'cell',
+  'cellphone',
+  'contact',
+  'telephone',
+  'to',
+  'tel',
+]
+
+// Short hints are matched exactly only. Substring-matching "to" would claim a
+// "total" column, and "tel" would claim "hotel", silently texting the wrong
+// data.
+const EXACT_ONLY_HINTS = new Set(['to', 'tel', 'cell'])
+
+/**
+ * Guess which column holds the phone number.
+ *
+ * Exact matches win over partial ones so a file with both "phone" and
+ * "phone_type" picks "phone".
+ */
+export function detectRecipientColumn(columns: string[]): string | undefined {
+  const normalized = columns.map((c) => ({
+    original: c,
+    key: c.trim().toLowerCase().replace(/[\s-]+/g, '_'),
+  }))
+
+  for (const hint of RECIPIENT_COLUMN_HINTS) {
+    const exact = normalized.find((c) => c.key === hint)
+    if (exact) return exact.original
+  }
+
+  for (const hint of RECIPIENT_COLUMN_HINTS) {
+    if (EXACT_ONLY_HINTS.has(hint)) continue
+    const partial = normalized.find((c) => c.key.includes(hint))
+    if (partial) return partial.original
+  }
+
+  return undefined
+}
+
+/**
+ * Decide who actually receives a message.
+ *
+ * The previous implementation mapped every parsed row straight into the
+ * payload, so blank cells produced messages addressed to "" and duplicated
+ * rows were texted twice.
+ */
+export function buildRecipientPlan(
+  rows: CsvRow[],
+  column: string
+): RecipientPlan {
+  const valid: RecipientRow[] = []
+  const excluded: ExcludedRow[] = []
+  const seen = new Set<string>()
+
+  rows.forEach((row, index) => {
+    // +2: one for the header row, one for 1-based counting, so the number
+    // matches what the user sees in their spreadsheet.
+    const rowNumber = index + 2
+    const raw = (row[column] ?? '').trim()
+
+    if (!raw) {
+      excluded.push({ rowNumber, raw, reason: 'empty' })
+      return
+    }
+
+    if (!isPlausiblePhone(raw)) {
+      excluded.push({ rowNumber, raw, reason: 'invalid' })
+      return
+    }
+
+    const normalized = normalizePhone(raw)
+    if (seen.has(normalized)) {
+      excluded.push({ rowNumber, raw, reason: 'duplicate' })
+      return
+    }
+
+    seen.add(normalized)
+    valid.push({ rowNumber, raw, normalized, data: row })
+  })
+
+  return {
+    valid,
+    excluded,
+    counts: {
+      total: rows.length,
+      valid: valid.length,
+      empty: excluded.filter((e) => e.reason === 'empty').length,
+      invalid: excluded.filter((e) => e.reason === 'invalid').length,
+      duplicate: excluded.filter((e) => e.reason === 'duplicate').length,
+    },
+  }
+}
+
+/** Column placeholders present in a template, in order of first appearance. */
+export function extractTemplateVariables(template: string): string[] {
+  // Collected with exec rather than matchAll: the project targets ES5, where
+  // iterating a RegExp iterator needs downlevelIteration.
+  const pattern = /\{\{\s*([^}]+?)\s*\}\}/g
+  const found: string[] = []
+  let match: RegExpExecArray | null
+
+  while ((match = pattern.exec(template)) !== null) {
+    const name = match[1].trim()
+    if (found.indexOf(name) === -1) found.push(name)
+  }
+
+  return found
+}
+
+/** Variables the template references that the CSV does not provide. */
+export function findUnknownVariables(
+  template: string,
+  columns: string[]
+): string[] {
+  return extractTemplateVariables(template).filter((v) => !columns.includes(v))
+}
+
+/**
+ * Fill a template for one row. Unknown or empty placeholders collapse to an
+ * empty string, matching the previous behaviour, but callers can surface them
+ * up front with findUnknownVariables.
+ */
+export function renderTemplate(template: string, row: CsvRow): string {
+  return template.replace(/\{\{\s*([^}]+?)\s*\}\}/g, (_, key) => {
+    return row[String(key).trim()] ?? ''
+  })
+}
+
+/** Human-readable file size, so limits are not shown in raw bytes. */
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`
+  const mb = bytes / (1024 * 1024)
+  return `${Number.isInteger(mb) ? mb : mb.toFixed(1)} MB`
+}
+
+export { isPlausiblePhone, normalizePhone }
diff --git a/web/app/(app)/dashboard/(components)/bulk-send/constants.ts b/web/app/(app)/dashboard/(components)/bulk-send/constants.ts
new file mode 100644
index 00000000..2b1e11c4
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/bulk-send/constants.ts
@@ -0,0 +1,10 @@
+export const MAX_FILE_SIZE = 1024 * 1024 // 1 MB
+export const FALLBACK_MAX_ROWS = 50
+export const SAMPLE_CSV = '/samples/bulk-sms-sample.csv'
+export const PREVIEW_ROWS = 5
+
+export const REASON_LABEL: Record<string, string> = {
+  empty: 'no phone number',
+  invalid: 'not a valid phone number',
+  duplicate: 'duplicate number',
+}
diff --git a/web/app/(app)/dashboard/(components)/bulk-send/index.tsx b/web/app/(app)/dashboard/(components)/bulk-send/index.tsx
new file mode 100644
index 00000000..20a247c0
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/bulk-send/index.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { useBulkSend } from './use-bulk-send'
+import SuccessPanel from './success-panel'
+import UploadStep from './step-upload'
+import MapStep from './step-map'
+import ComposeStep from './step-compose'
+import ReviewStep from './step-review'
+
+export default function BulkSend() {
+  const bulk = useBulkSend()
+
+  if (bulk.isSuccess) return <SuccessPanel bulk={bulk} />
+
+  return (
+    <div className='space-y-4'>
+      <UploadStep bulk={bulk} />
+      <MapStep bulk={bulk} />
+      <ComposeStep bulk={bulk} />
+      <ReviewStep bulk={bulk} />
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/bulk-send/step-compose.tsx b/web/app/(app)/dashboard/(components)/bulk-send/step-compose.tsx
new file mode 100644
index 00000000..2d405957
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/bulk-send/step-compose.tsx
@@ -0,0 +1,136 @@
+'use client'
+
+import { AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import StepShell from './step-shell'
+import type { BulkSendState } from './use-bulk-send'
+
+export default function ComposeStep({ bulk }: { bulk: BulkSendState }) {
+  const {
+    columns,
+    template,
+    setTemplate,
+    deviceId,
+    setPreviewIndex,
+    templateRef,
+    plan,
+    unknownVariables,
+    safePreviewIndex,
+    previewRow,
+    previewMessage,
+    segments,
+    mapped,
+    composed,
+    insertVariable,
+  } = bulk
+
+  return (
+    <>
+      {/* 3. Compose */}
+      <StepShell
+        step={3}
+        title='Write your message'
+        description='Insert a column to personalise each message'
+        locked={!mapped || !deviceId}
+        complete={composed}
+      >
+        {columns.length > 0 && (
+          <div className='flex flex-wrap gap-1.5'>
+            {columns.map((c) => (
+              <button
+                key={c}
+                type='button'
+                onClick={() => insertVariable(c)}
+                className='rounded-md border border-border bg-muted/50 px-2 py-1 font-mono text-xs transition-colors hover:border-primary/50 hover:text-primary'
+              >
+                {`{{ ${c} }}`}
+              </button>
+            ))}
+          </div>
+        )}
+
+        <div className='space-y-1.5'>
+          <Label htmlFor='message-template'>Message template</Label>
+          <Textarea
+            id='message-template'
+            ref={templateRef}
+            value={template}
+            onChange={(e) => setTemplate(e.target.value)}
+            placeholder='Hi {{ name }}, your order {{ order_id }} is confirmed. Total: ${{ total }}. Thanks for shopping with us!'
+            className='min-h-28 font-mono text-sm'
+          />
+          <div className='flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground'>
+            <span>
+              {segments.length} characters, {segments.segments} segment
+              {segments.segments === 1 ? '' : 's'} ({segments.encoding})
+            </span>
+            {segments.segments > 1 && (
+              <span className='text-amber-600 dark:text-amber-500'>
+                Over {segments.perSegment} characters counts as multiple
+                messages
+              </span>
+            )}
+          </div>
+        </div>
+
+        {unknownVariables.length > 0 && (
+          <Alert variant='destructive'>
+            <AlertCircle className='h-4 w-4' />
+            <AlertTitle>Unknown column reference</AlertTitle>
+            <AlertDescription>
+              Your CSV has no column named{' '}
+              {unknownVariables.map((v) => `"${v}"`).join(', ')}. Those
+              placeholders will render as empty text.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {previewRow && template && (
+          <div className='space-y-2 rounded-lg border border-border bg-muted/30 p-3'>
+            <div className='flex items-center justify-between gap-2'>
+              <p className='text-xs font-medium text-muted-foreground'>
+                Preview for {previewRow.raw}
+              </p>
+              <div className='flex items-center gap-1'>
+                <Button
+                  variant='ghost'
+                  size='icon'
+                  className='h-6 w-6'
+                  aria-label='Previous recipient'
+                  disabled={safePreviewIndex === 0}
+                  onClick={() =>
+                    setPreviewIndex(Math.max(0, safePreviewIndex - 1))
+                  }
+                >
+                  <ChevronLeft className='h-3.5 w-3.5' />
+                </Button>
+                <span className='text-xs tabular-nums text-muted-foreground'>
+                  {safePreviewIndex + 1} / {plan.valid.length}
+                </span>
+                <Button
+                  variant='ghost'
+                  size='icon'
+                  className='h-6 w-6'
+                  aria-label='Next recipient'
+                  disabled={safePreviewIndex >= plan.valid.length - 1}
+                  onClick={() =>
+                    setPreviewIndex(
+                      Math.min(plan.valid.length - 1, safePreviewIndex + 1)
+                    )
+                  }
+                >
+                  <ChevronRight className='h-3.5 w-3.5' />
+                </Button>
+              </div>
+            </div>
+            <p className='whitespace-pre-wrap text-sm'>{previewMessage}</p>
+          </div>
+        )}
+      </StepShell>
+
+    </>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/bulk-send/step-map.tsx b/web/app/(app)/dashboard/(components)/bulk-send/step-map.tsx
new file mode 100644
index 00000000..86deed47
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/bulk-send/step-map.tsx
@@ -0,0 +1,154 @@
+'use client'
+
+import { AlertCircle } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { formatDeviceName } from '@/lib/utils'
+import StepShell from './step-shell'
+import type { BulkSendState } from './use-bulk-send'
+
+export default function MapStep({ bulk }: { bulk: BulkSendState }) {
+  const {
+    columns,
+    recipientColumn,
+    deviceId,
+    setDeviceId,
+    simSubscriptionId,
+    setSimSubscriptionId,
+    devices,
+    handleRecipientColumnChange,
+    plan,
+    availableSims,
+    hasFile,
+    mapped,
+  } = bulk
+
+  return (
+    <>
+      {/* 2. Map */}
+      <StepShell
+        step={2}
+        title='Choose the phone column and device'
+        description='We guess the phone column from your headers'
+        locked={!hasFile}
+        complete={mapped && Boolean(deviceId)}
+      >
+        <div className='grid gap-4 sm:grid-cols-2'>
+          <div className='space-y-1.5'>
+            <Label htmlFor='recipient-column'>Phone number column</Label>
+            <Select
+              value={recipientColumn}
+              onValueChange={handleRecipientColumnChange}
+            >
+              <SelectTrigger id='recipient-column'>
+                <SelectValue placeholder='Select a column' />
+              </SelectTrigger>
+              <SelectContent>
+                {columns.map((c) => (
+                  <SelectItem key={c} value={c}>
+                    {c}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-1.5'>
+            <Label htmlFor='device-select'>Send from</Label>
+            <Select
+              value={deviceId ?? ''}
+              onValueChange={(v) => {
+                setDeviceId(v)
+                setSimSubscriptionId(undefined)
+              }}
+            >
+              <SelectTrigger id='device-select'>
+                <SelectValue placeholder='Select a device' />
+              </SelectTrigger>
+              <SelectContent>
+                {devices?.map((device) => (
+                  <SelectItem
+                    key={device._id}
+                    value={device._id}
+                    disabled={!device.enabled}
+                  >
+                    {formatDeviceName(device)}
+                    {device.enabled ? '' : ' (disabled)'}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {availableSims.length > 1 && (
+            <div className='space-y-1.5'>
+              <Label htmlFor='sim-select'>SIM (optional)</Label>
+              <Select
+                value={simSubscriptionId?.toString() ?? ''}
+                onValueChange={(v) =>
+                  setSimSubscriptionId(v ? Number(v) : undefined)
+                }
+              >
+                <SelectTrigger id='sim-select'>
+                  <SelectValue placeholder='Default SIM' />
+                </SelectTrigger>
+                <SelectContent>
+                  {availableSims.map((sim: any) => (
+                    <SelectItem
+                      key={sim.subscriptionId}
+                      value={String(sim.subscriptionId)}
+                    >
+                      {sim.displayName || 'SIM'} ({sim.subscriptionId})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+        </div>
+
+        {plan.counts && (
+          <div className='flex flex-wrap gap-2 text-xs'>
+            <span className='rounded-full bg-green-100 px-2.5 py-1 font-medium text-green-800 dark:bg-green-900/30 dark:text-green-300'>
+              {plan.counts.valid.toLocaleString()} will receive a message
+            </span>
+            {plan.counts.empty > 0 && (
+              <span className='rounded-full bg-muted px-2.5 py-1 font-medium text-muted-foreground'>
+                {plan.counts.empty} with no number
+              </span>
+            )}
+            {plan.counts.invalid > 0 && (
+              <span className='rounded-full bg-amber-100 px-2.5 py-1 font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-300'>
+                {plan.counts.invalid} invalid
+              </span>
+            )}
+            {plan.counts.duplicate > 0 && (
+              <span className='rounded-full bg-amber-100 px-2.5 py-1 font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-300'>
+                {plan.counts.duplicate} duplicate
+              </span>
+            )}
+          </div>
+        )}
+
+        {recipientColumn && plan.valid.length === 0 && (
+          <Alert variant='destructive'>
+            <AlertCircle className='h-4 w-4' />
+            <AlertTitle>No usable phone numbers</AlertTitle>
+            <AlertDescription>
+              No row in "{recipientColumn}" holds a valid phone number. Pick a
+              different column.
+            </AlertDescription>
+          </Alert>
+        )}
+      </StepShell>
+
+    </>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/bulk-send/step-review.tsx b/web/app/(app)/dashboard/(components)/bulk-send/step-review.tsx
new file mode 100644
index 00000000..660381d2
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/bulk-send/step-review.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import { AlertCircle, Send } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
+import { RateLimitError } from '@/components/shared/rate-limit-error'
+import { formatError } from '@/lib/utils/errorHandler'
+import { formatDeviceName } from '@/lib/utils'
+import StepShell from './step-shell'
+import { REASON_LABEL } from './constants'
+import type { BulkSendState } from './use-bulk-send'
+
+export default function ReviewStep({ bulk }: { bulk: BulkSendState }) {
+  const {
+    plan,
+    selectedDevice,
+    composed,
+    sendBulk,
+    isSending,
+    sendError,
+  } = bulk
+
+  return (
+    <>
+      {/* 4. Review and send */}
+      <StepShell
+        step={4}
+        title='Review and send'
+        description='Nothing is sent until you confirm'
+        locked={!composed}
+      >
+        <div className='rounded-lg border border-border bg-muted/30 p-3 text-sm'>
+          <p>
+            Sending{' '}
+            <strong>{plan.valid.length.toLocaleString()} messages</strong> from{' '}
+            <strong>
+              {selectedDevice ? formatDeviceName(selectedDevice) : 'your device'}
+            </strong>
+            .
+          </p>
+          {plan.excluded.length > 0 && (
+            <details className='mt-2'>
+              <summary className='cursor-pointer text-xs text-muted-foreground hover:text-foreground'>
+                {plan.excluded.length} row
+                {plan.excluded.length === 1 ? '' : 's'} skipped
+              </summary>
+              <ul className='mt-2 space-y-1 text-xs text-muted-foreground'>
+                {plan.excluded.slice(0, 10).map((row) => (
+                  <li key={`${row.rowNumber}-${row.reason}`}>
+                    Row {row.rowNumber}
+                    {row.raw ? ` ("${row.raw}")` : ''}:{' '}
+                    {REASON_LABEL[row.reason]}
+                  </li>
+                ))}
+                {plan.excluded.length > 10 && (
+                  <li>and {plan.excluded.length - 10} more</li>
+                )}
+              </ul>
+            </details>
+          )}
+        </div>
+
+        {sendError &&
+          (() => {
+            const formatted = formatError(sendError)
+            if (formatted.isRateLimit) {
+              return (
+                <RateLimitError
+                  errorData={formatted.rateLimitData}
+                  variant='alert'
+                />
+              )
+            }
+            return (
+              <Alert variant='destructive'>
+                <AlertCircle className='h-4 w-4' />
+                <AlertTitle>Could not send</AlertTitle>
+                <AlertDescription>{formatted.message}</AlertDescription>
+              </Alert>
+            )
+          })()}
+
+        <Button
+          className='w-full'
+          disabled={!composed || isSending || plan.valid.length === 0}
+          onClick={() => sendBulk()}
+        >
+          {isSending ? (
+            <>
+              <Spinner size='sm' className='mr-2 text-white dark:text-black' />
+              Sending...
+            </>
+          ) : (
+            <>
+              <Send className='mr-2 h-4 w-4' />
+              Send {plan.valid.length.toLocaleString()} message
+              {plan.valid.length === 1 ? '' : 's'}
+            </>
+          )}
+        </Button>
+      </StepShell>
+    </>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/bulk-send/step-shell.tsx b/web/app/(app)/dashboard/(components)/bulk-send/step-shell.tsx
new file mode 100644
index 00000000..7abedbc6
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/bulk-send/step-shell.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+// A numbered step block. Locked steps are hidden from assistive tech and the
+// tab order via `inert`, unlike the previous implementation which used
+// `pointer-events-none` plus `opacity-50` and left the controls focusable.
+export default function StepShell({
+  step,
+  title,
+  description,
+  locked,
+  complete,
+  children,
+}: {
+  step: number
+  title: string
+  description?: string
+  locked?: boolean
+  complete?: boolean
+  children: ReactNode
+}) {
+  return (
+    <section
+      // `inert` is a boolean attribute; React 19 passes it through natively.
+      inert={locked || undefined}
+      aria-labelledby={`bulk-step-${step}-title`}
+      className={cn(
+        'rounded-xl border border-border bg-card p-4 transition-opacity sm:p-5',
+        locked && 'opacity-55'
+      )}
+    >
+      <div className='mb-4 flex items-start gap-3'>
+        <span
+          className={cn(
+            'flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold',
+            complete
+              ? 'bg-primary text-primary-foreground'
+              : locked
+                ? 'bg-muted text-muted-foreground'
+                : 'border-2 border-primary bg-background text-primary'
+          )}
+        >
+          {complete ? <Check className='h-3.5 w-3.5' /> : step}
+        </span>
+        <div className='min-w-0'>
+          <h3
+            id={`bulk-step-${step}-title`}
+            className='text-sm font-semibold leading-7'
+          >
+            {title}
+          </h3>
+          {description && (
+            <p className='text-xs text-muted-foreground'>{description}</p>
+          )}
+        </div>
+      </div>
+
+      <div className='space-y-4'>{children}</div>
+    </section>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/bulk-send/step-upload.tsx b/web/app/(app)/dashboard/(components)/bulk-send/step-upload.tsx
new file mode 100644
index 00000000..4229eb91
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/bulk-send/step-upload.tsx
@@ -0,0 +1,166 @@
+'use client'
+
+import {
+  AlertCircle,
+  Download,
+  FileSpreadsheet,
+  Upload,
+  X,
+} from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import StepShell from './step-shell'
+import { formatFileSize } from './bulk-csv'
+import { MAX_FILE_SIZE, PREVIEW_ROWS, SAMPLE_CSV } from './constants'
+import type { BulkSendState } from './use-bulk-send'
+
+export default function UploadStep({ bulk }: { bulk: BulkSendState }) {
+  const {
+    getRootProps,
+    getInputProps,
+    rows,
+    columns,
+    fileName,
+    fileError,
+    fileWarning,
+    maxRows,
+    resetFile,
+    rowCapExceeded,
+    isDragActive,
+    plan,
+    hasFile,
+  } = bulk
+
+  return (
+    <>
+      {/* 1. Upload */}
+      <StepShell
+        step={1}
+        title='Upload your CSV'
+        description='One row per recipient, with a header row'
+        complete={hasFile}
+      >
+        {hasFile ? (
+          <div className='space-y-3'>
+            <div className='flex items-center gap-3 rounded-lg border border-border bg-muted/40 px-3 py-2'>
+              <FileSpreadsheet className='h-4 w-4 shrink-0 text-primary' />
+              <div className='min-w-0 flex-1'>
+                <p className='truncate text-sm font-medium'>{fileName}</p>
+                <p className='text-xs text-muted-foreground'>
+                  {rows.length.toLocaleString()} rows, {columns.length} columns
+                </p>
+              </div>
+              <Button
+                variant='ghost'
+                size='icon'
+                onClick={resetFile}
+                aria-label='Remove file'
+              >
+                <X className='h-4 w-4' />
+              </Button>
+            </div>
+
+            {/* Show what was actually parsed, so a mis-delimited file is
+                obvious before anything is sent. */}
+            <div className='overflow-x-auto rounded-lg border border-border'>
+              <table className='w-full text-left text-xs'>
+                <thead className='bg-muted/50'>
+                  <tr>
+                    {columns.map((c) => (
+                      <th key={c} className='whitespace-nowrap px-3 py-2 font-medium'>
+                        {c}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className='divide-y divide-border'>
+                  {rows.slice(0, PREVIEW_ROWS).map((row, i) => (
+                    <tr key={i}>
+                      {columns.map((c) => (
+                        <td
+                          key={c}
+                          className='whitespace-nowrap px-3 py-1.5 text-muted-foreground'
+                        >
+                          {row[c] || '-'}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {rows.length > PREVIEW_ROWS && (
+              <p className='text-xs text-muted-foreground'>
+                Showing the first {PREVIEW_ROWS} of{' '}
+                {rows.length.toLocaleString()} rows.
+              </p>
+            )}
+          </div>
+        ) : (
+          <>
+            <div
+              {...getRootProps()}
+              className={cn(
+                'cursor-pointer rounded-lg border-2 border-dashed p-6 text-center transition-colors sm:p-8',
+                isDragActive
+                  ? 'border-primary bg-primary/5'
+                  : 'border-border hover:border-primary/50 hover:bg-muted/30'
+              )}
+            >
+              <input {...getInputProps()} />
+              <Upload className='mx-auto h-8 w-8 text-muted-foreground' />
+              <p className='mt-2 text-sm font-medium'>
+                Drop a CSV here, or tap to choose one
+              </p>
+              <p className='mt-1 text-xs text-muted-foreground'>
+                Up to {formatFileSize(MAX_FILE_SIZE)}
+                {maxRows !== undefined && maxRows !== Number.POSITIVE_INFINITY
+                  ? ` and ${maxRows.toLocaleString()} rows on your plan`
+                  : ''}
+              </p>
+            </div>
+
+            <a
+              href={SAMPLE_CSV}
+              download
+              className='inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline'
+            >
+              <Download className='h-3.5 w-3.5' />
+              Download a sample CSV
+            </a>
+          </>
+        )}
+
+        {fileError && (
+          <Alert variant='destructive'>
+            <AlertCircle className='h-4 w-4' />
+            <AlertTitle>That file could not be used</AlertTitle>
+            <AlertDescription>{fileError}</AlertDescription>
+          </Alert>
+        )}
+
+        {rowCapExceeded && (
+          <Alert variant='destructive'>
+            <AlertCircle className='h-4 w-4' />
+            <AlertTitle>That file is over your plan limit</AlertTitle>
+            <AlertDescription>
+              It has {rows.length.toLocaleString()} rows and your plan allows{' '}
+              {maxRows!.toLocaleString()} per bulk send. Remove the extra rows
+              or upgrade your plan.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {fileWarning && !fileError && (
+          <Alert>
+            <AlertCircle className='h-4 w-4' />
+            <AlertTitle>Some rows did not parse cleanly</AlertTitle>
+            <AlertDescription>{fileWarning}</AlertDescription>
+          </Alert>
+        )}
+      </StepShell>
+
+    </>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/bulk-send/success-panel.tsx b/web/app/(app)/dashboard/(components)/bulk-send/success-panel.tsx
new file mode 100644
index 00000000..652e1118
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/bulk-send/success-panel.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { CheckCircle2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import type { BulkSendState } from './use-bulk-send'
+
+export default function SuccessPanel({ bulk }: { bulk: BulkSendState }) {
+  const { plan, resetSend, resetFile, setTemplate } = bulk
+
+  return (
+      <div className='rounded-xl border border-border bg-card p-8 text-center'>
+        <div className='mx-auto mb-3 w-fit rounded-full bg-green-100 p-3 dark:bg-green-900/30'>
+          <CheckCircle2 className='h-6 w-6 text-green-600 dark:text-green-400' />
+        </div>
+        <h3 className='text-lg font-semibold'>
+          {plan.valid.length.toLocaleString()} message
+          {plan.valid.length === 1 ? '' : 's'} queued
+        </h3>
+        <p className='mt-1 text-sm text-muted-foreground'>
+          Delivery status appears in your message history as each one is sent.
+        </p>
+        <div className='mt-5 flex flex-wrap items-center justify-center gap-2'>
+          <Button asChild size='sm'>
+            <a href='/dashboard/messaging/history'>View message history</a>
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              resetSend()
+              resetFile()
+              setTemplate('')
+            }}
+          >
+            Send another batch
+          </Button>
+        </div>
+      </div>
+    )
+}
diff --git a/web/app/(app)/dashboard/(components)/bulk-send/use-bulk-send.ts b/web/app/(app)/dashboard/(components)/bulk-send/use-bulk-send.ts
new file mode 100644
index 00000000..fc55fdc3
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/bulk-send/use-bulk-send.ts
@@ -0,0 +1,282 @@
+'use client'
+
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { useDropzone, type FileRejection } from 'react-dropzone'
+import Papa from 'papaparse'
+import { useMutation } from '@tanstack/react-query'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { ApiEndpoints } from '@/config/api'
+import { useDevices, useSubscription } from '@/lib/api'
+import { getSegmentInfo } from '@/lib/sms'
+import {
+  buildRecipientPlan,
+  detectRecipientColumn,
+  extractTemplateVariables,
+  formatFileSize,
+  findUnknownVariables,
+  renderTemplate,
+  type CsvRow,
+} from './bulk-csv'
+import { FALLBACK_MAX_ROWS, MAX_FILE_SIZE } from './constants'
+
+// All bulk-send state in one place, mirroring get-started/use-onboarding.
+// The steps are presentation only and read this through a single prop.
+export function useBulkSend() {
+  const [rows, setRows] = useState<CsvRow[]>([])
+  const [columns, setColumns] = useState<string[]>([])
+  const [fileName, setFileName] = useState<string | null>(null)
+  const [recipientColumn, setRecipientColumn] = useState('')
+  const [template, setTemplate] = useState('')
+  const [deviceId, setDeviceId] = useState<string | null>(null)
+  const [simSubscriptionId, setSimSubscriptionId] = useState<number>()
+  const [previewIndex, setPreviewIndex] = useState(0)
+  const [fileError, setFileError] = useState<string | null>(null)
+  const [fileWarning, setFileWarning] = useState<string | null>(null)
+  const templateRef = useRef<HTMLTextAreaElement>(null)
+
+  const { data: devices } = useDevices()
+  const { data: subscription, isPending: subscriptionPending } =
+    useSubscription()
+
+  // Only enforce a row cap once the real limit is known. The old version
+  // defaulted to 50 while the subscription was still loading, so an unlimited
+  // plan could be told its file was too big.
+  const maxRows = useMemo(() => {
+    const limit =
+      subscription?.usage?.bulkSendLimit ?? subscription?.plan?.bulkSendLimit
+    if (subscriptionPending) return undefined
+    if (limit === -1) return Number.POSITIVE_INFINITY
+    return limit || FALLBACK_MAX_ROWS
+  }, [subscription, subscriptionPending])
+
+  const resetFile = () => {
+    setRows([])
+    setColumns([])
+    setFileName(null)
+    setRecipientColumn('')
+    setPreviewIndex(0)
+    setFileWarning(null)
+  }
+
+  // Derived rather than checked once at drop time. The subscription can still
+  // be loading when a file lands, in which case maxRows is undefined and the
+  // old imperative check was skipped entirely and never revisited, so an
+  // over-cap file sailed through on a limited plan.
+  const rowCapExceeded = maxRows !== undefined && rows.length > maxRows
+  const rowCapUnknown = rows.length > 0 && maxRows === undefined
+
+  const handleRecipientColumnChange = (value: string) => {
+    setRecipientColumn(value)
+    // plan.valid is rebuilt from the new column, so an index into the old
+    // list can point past the end of the new one.
+    setPreviewIndex(0)
+  }
+
+  const onDrop = useCallback((accepted: File[], rejections: FileRejection[]) => {
+    const file = accepted[0]
+
+    // react-dropzone still calls onDrop when every file was filtered out by
+    // `accept`, so returning silently here left a rejected drop with no
+    // feedback at all: nothing happened and nothing said why.
+    if (!file) {
+      const rejected = rejections[0]
+      if (rejected) {
+        setFileError(
+          rejections.length > 1
+            ? 'Please drop a single CSV file.'
+            : `"${rejected.file.name}" is not a CSV. Export your spreadsheet as CSV and try again.`
+        )
+      }
+      return
+    }
+
+    if (file.size > MAX_FILE_SIZE) {
+      setFileError(
+        `That file is ${formatFileSize(file.size)}. The limit is ${formatFileSize(MAX_FILE_SIZE)}.`
+      )
+      return
+    }
+
+    Papa.parse<CsvRow>(file, {
+      header: true,
+      skipEmptyLines: true,
+      complete: (results) => {
+        const parsed = (results.data ?? []).filter(Boolean)
+
+        if (parsed.length === 0) {
+          setFileError('That file has no rows. Check it has a header row.')
+          resetFile()
+          return
+        }
+
+        // Take the header papaparse actually parsed. Reading keys off the
+        // first data row instead loses every column that row happened to
+        // leave blank, because papaparse only assigns keys for values that
+        // are present.
+        const headers = (results.meta?.fields ?? []).filter(Boolean)
+
+        if (headers.length === 0) {
+          setFileError('That file has no header row, so columns cannot be mapped.')
+          resetFile()
+          return
+        }
+
+        setRows(parsed)
+        setColumns(headers)
+        setFileName(file.name)
+        setRecipientColumn(detectRecipientColumn(headers) ?? '')
+        setPreviewIndex(0)
+        setFileError(null)
+
+        // Row-level problems are reported here, not through `error`, which
+        // only fires on a fatal stream failure. A mis-delimited file parses
+        // "successfully" into one mangled column, so this is worth saying.
+        const problems = results.errors ?? []
+        setFileWarning(
+          problems.length > 0
+            ? `${problems.length} row${problems.length === 1 ? '' : 's'} did not parse cleanly (first problem on row ${
+                (problems[0].row ?? 0) + 1
+              }: ${problems[0].message}). Check the delimiter and quoting if the columns below look wrong.`
+            : null
+        )
+      },
+      error: () => setFileError('That file could not be read as CSV.'),
+    })
+  }, [])
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: { 'text/csv': ['.csv'] },
+    multiple: false,
+  })
+
+  const plan = useMemo(
+    () =>
+      recipientColumn
+        ? buildRecipientPlan(rows, recipientColumn)
+        : { valid: [], excluded: [], counts: null },
+    [rows, recipientColumn]
+  )
+
+  const unknownVariables = useMemo(
+    () => findUnknownVariables(template, columns),
+    [template, columns]
+  )
+
+  const selectedDevice = devices?.find((d) => d._id === deviceId)
+  const availableSims = Array.isArray((selectedDevice as any)?.simInfo?.sims)
+    ? (selectedDevice as any).simInfo.sims
+    : []
+
+  // Clamped, so the preview can never be stranded past the end of a shorter
+  // list. Anything that shrinks plan.valid (changing the phone column, most
+  // obviously) would otherwise hide the preview and disable its own Next
+  // button, leaving Previous as the only way back.
+  const safePreviewIndex = Math.min(
+    previewIndex,
+    Math.max(0, plan.valid.length - 1)
+  )
+  const previewRow = plan.valid[safePreviewIndex]
+  const previewMessage = previewRow
+    ? renderTemplate(template, previewRow.data)
+    : ''
+  // Counted from the rendered message, never the raw template: falling back to
+  // the template counts the literal "{{ name }}" placeholders and misstates
+  // the segment cost.
+  const segments = getSegmentInfo(previewMessage)
+
+  const hasFile = rows.length > 0
+  const mapped =
+    hasFile &&
+    !rowCapExceeded &&
+    !rowCapUnknown &&
+    Boolean(recipientColumn) &&
+    plan.valid.length > 0
+  const composed = mapped && template.trim().length > 0 && Boolean(deviceId)
+
+  const {
+    mutate: sendBulk,
+    isPending: isSending,
+    isSuccess,
+    error: sendError,
+    reset: resetSend,
+  } = useMutation({
+    mutationFn: async () => {
+      // Only rows that survived validation are sent. The previous version
+      // mapped every parsed row, including blanks and duplicates.
+      const messages = plan.valid.map((row) => ({
+        message: renderTemplate(template, row.data),
+        recipients: [row.raw],
+        ...(simSubscriptionId !== undefined && { simSubscriptionId }),
+      }))
+
+      return httpBrowserClient.post(
+        ApiEndpoints.gateway.sendBulkSMS(deviceId!),
+        { messageTemplate: template, messages }
+      )
+    },
+  })
+
+  const insertVariable = (column: string) => {
+    const el = templateRef.current
+    const token = `{{ ${column} }}`
+    if (!el) {
+      setTemplate((t) => t + token)
+      return
+    }
+    const start = el.selectionStart ?? template.length
+    const end = el.selectionEnd ?? template.length
+    const next = template.slice(0, start) + token + template.slice(end)
+    setTemplate(next)
+    requestAnimationFrame(() => {
+      el.focus()
+      el.setSelectionRange(start + token.length, start + token.length)
+    })
+  }
+
+  return {
+    rows,
+    columns,
+    fileName,
+    recipientColumn,
+    template,
+    setTemplate,
+    deviceId,
+    setDeviceId,
+    simSubscriptionId,
+    setSimSubscriptionId,
+    previewIndex,
+    setPreviewIndex,
+    fileError,
+    fileWarning,
+    templateRef,
+    devices,
+    maxRows,
+    resetFile,
+    rowCapExceeded,
+    rowCapUnknown,
+    handleRecipientColumnChange,
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    plan,
+    unknownVariables,
+    selectedDevice,
+    availableSims,
+    safePreviewIndex,
+    previewRow,
+    previewMessage,
+    segments,
+    hasFile,
+    mapped,
+    composed,
+    sendBulk,
+    isSending,
+    isSuccess,
+    sendError,
+    resetSend,
+    insertVariable,
+  }
+}
+
+export type BulkSendState = ReturnType<typeof useBulkSend>
diff --git a/web/app/(app)/dashboard/(components)/bulk-sms-send.tsx b/web/app/(app)/dashboard/(components)/bulk-sms-send.tsx
deleted file mode 100644
index 91224856..00000000
--- a/web/app/(app)/dashboard/(components)/bulk-sms-send.tsx
+++ /dev/null
@@ -1,425 +0,0 @@
-'use client'
-
-import { useState, useCallback, useMemo } from 'react'
-import { useDropzone } from 'react-dropzone'
-import Papa from 'papaparse'
-import { Upload, Send, AlertCircle, CheckCircle } from 'lucide-react'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-} from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { ApiEndpoints } from '@/config/api'
-import { useMutation, useQuery } from '@tanstack/react-query'
-import { Spinner } from '@/components/ui/spinner'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { formatError } from '@/lib/utils/errorHandler'
-import { RateLimitError } from '@/components/shared/rate-limit-error'
-import { formatDeviceName } from '@/lib/utils'
-
-const DEFAULT_MAX_FILE_SIZE = 1024 * 1024 // 1 MB
-const DEFAULT_MAX_ROWS = 50
-
-export default function BulkSMSSend() {
-  const [csvData, setCsvData] = useState<any[]>([])
-  const [columns, setColumns] = useState<string[]>([])
-  const [selectedColumn, setSelectedColumn] = useState<string>('')
-  const [messageTemplate, setMessageTemplate] = useState<string>('')
-  const [selectedRecipient, setSelectedRecipient] = useState<string>('')
-  const [error, setError] = useState<string | null>(null)
-
-  const {
-    data: currentSubscription,
-    isLoading: isLoadingSubscription,
-    error: subscriptionError,
-  } = useQuery({
-    queryKey: ['currentSubscription'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.billing.currentSubscription())
-        .then((res) => res.data),
-  })
-
-  const maxRows = useMemo(() => {
-    const effectiveBulkSendLimit =
-      currentSubscription?.usage?.bulkSendLimit ??
-      currentSubscription?.plan?.bulkSendLimit
-
-    if (effectiveBulkSendLimit == -1) {
-      return 9999
-    }
-
-    return effectiveBulkSendLimit || DEFAULT_MAX_ROWS
-  }, [currentSubscription])
-
-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    const file = acceptedFiles[0]
-    if (file.size > DEFAULT_MAX_FILE_SIZE) {
-      setError('File size exceeds 1 MB limit.')
-      return
-    }
-
-    Papa.parse(file, {
-      complete: (results) => {
-        if (results.data && results.data.length > 0) {
-          if (results.data.length > maxRows) {
-            setError(`CSV file exceeds ${maxRows} rows limit.`)
-            return
-          }
-          setCsvData(results.data as any[])
-          const headerRow = results.data[0] as Record<string, unknown>
-          setColumns(Object.keys(headerRow))
-          setError(null)
-        } else {
-          setError('CSV file is empty or invalid')
-          setCsvData([])
-          setColumns([])
-        }
-      },
-      header: true,
-      skipEmptyLines: true,
-    })
-  }, [maxRows])
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
-
-  const previewMessage = useMemo(() => {
-    if (!selectedRecipient || !messageTemplate) return ''
-    const recipient = csvData.find(
-      (row) => row[selectedColumn] === selectedRecipient
-    )
-    if (!recipient) return ''
-
-    return messageTemplate.replace(/\{\{\s*([^}]+)\s*\}\}/g, (_, key) => {
-      return recipient[key.trim()] || ''
-    })
-  }, [selectedRecipient, messageTemplate, csvData, selectedColumn])
-
-  const handleSendBulkSMS = async () => {
-    const messages = csvData.map((row) => ({
-      message: messageTemplate.replace(/\{\{\s*([^}]+)\s*\}\}/g, (_, key) => {
-        return row[key.trim()] || ''
-      }),
-      recipients: [row[selectedColumn]],
-      ...(selectedSimSubscriptionId !== undefined && {
-        simSubscriptionId: selectedSimSubscriptionId,
-      }),
-    }))
-    const payload = {
-      messageTemplate,
-      messages,
-    }
-    await httpBrowserClient.post(
-      ApiEndpoints.gateway.sendBulkSMS(selectedDeviceId),
-      payload
-    )
-  }
-
-  const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null)
-  const [selectedSimSubscriptionId, setSelectedSimSubscriptionId] = useState<
-    number | undefined
-  >(undefined)
-
-  const { data: devices } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.gateway.listDevices())
-        .then((res) => res.data),
-  })
-
-  const {
-    mutate: sendBulkSMS,
-    isPending: isSendingBulkSMS,
-    isSuccess: isSendingBulkSMSuccess,
-    isError: isSendingBulkSMSError,
-    error: sendingBulkSMSError,
-  } = useMutation({
-    mutationFn: handleSendBulkSMS,
-  })
-
-  const selectedDevice = devices?.data?.find(
-    (device) => device._id === selectedDeviceId
-  )
-
-  const availableSims =
-    selectedDevice?.simInfo?.sims &&
-    Array.isArray(selectedDevice.simInfo.sims) &&
-    selectedDevice.simInfo.sims.length > 0
-      ? selectedDevice.simInfo.sims
-      : []
-
-  const isStep2Disabled = csvData.length === 0
-  const isStep3Disabled = isStep2Disabled || !selectedColumn || !messageTemplate
-
-  return (
-    <div className='space-y-8'>
-      <Card>
-        <CardHeader>
-          <CardTitle>Send Bulk SMS</CardTitle>
-          <CardDescription>
-            Upload a CSV, configure your message, and send bulk SMS in 3 simple
-            steps.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className='space-y-8'>
-          <section>
-            <h2 className='text-lg font-semibold mb-2'>1. Upload CSV</h2>
-            <p className='text-sm text-gray-500 mb-4'>
-              Upload a CSV file (max {DEFAULT_MAX_FILE_SIZE} bytes, {maxRows}
-              rows) containing recipient information.
-            </p>
-            <div
-              {...getRootProps()}
-              className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
-                isDragActive
-                  ? 'border-primary bg-primary/10'
-                  : 'border-gray-300'
-              }`}
-            >
-              <input {...getInputProps()} accept='.csv' />
-              <Upload className='mx-auto h-12 w-12 text-gray-400' />
-              <p className='mt-2'>
-                Drag &amp; drop a CSV file here, or click to select one
-              </p>
-              <p className='text-sm text-gray-500 mt-1'>
-                Max file size: {DEFAULT_MAX_FILE_SIZE} bytes, Max rows:{' '}
-                {maxRows}
-              </p>
-            </div>
-            {error && (
-              <Alert variant='destructive' className='mt-4'>
-                <AlertCircle className='h-4 w-4' />
-                <AlertTitle>Error</AlertTitle>
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            )}
-            {csvData.length > 0 && (
-              <p className='mt-2 text-sm text-green-600'>
-                CSV uploaded successfully! {csvData.length} rows found.
-              </p>
-            )}
-          </section>
-
-          <section
-            className={isStep2Disabled ? 'opacity-50 pointer-events-none' : ''}
-          >
-            <h2 className='text-lg font-semibold mb-2'>2. Configure SMS</h2>
-            <p className='text-sm text-gray-500 mb-4'>
-              Select the recipient column and create your message template.
-            </p>
-
-            {/* select device to send SMS from   */}
-            <div>
-              <Label htmlFor='device-select'>Select Device</Label>
-              <Select
-                onValueChange={(value) => {
-                  setSelectedDeviceId(value)
-                  setSelectedSimSubscriptionId(undefined)
-                }}
-                value={selectedDeviceId}
-              >
-                <SelectTrigger id='device-select'>
-                  <SelectValue placeholder='Select a device' />
-                </SelectTrigger>
-                <SelectContent>
-                  {devices?.data?.map((device) => (
-                    <SelectItem
-                      key={device._id}
-                      value={device._id}
-                      disabled={!device.enabled}
-                    >
-                      {formatDeviceName(device)}{' '}
-                      {device.enabled ? '' : ' (disabled)'}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            {availableSims.length > 1 && (
-              <div>
-                <Label htmlFor='sim-select'>Select SIM (optional)</Label>
-                <Select
-                  onValueChange={(value) =>
-                    setSelectedSimSubscriptionId(
-                      value ? Number(value) : undefined
-                    )
-                  }
-                  value={selectedSimSubscriptionId?.toString()}
-                >
-                  <SelectTrigger id='sim-select'>
-                    <SelectValue placeholder='Select SIM (optional)' />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {availableSims.map((sim) => (
-                      <SelectItem
-                        key={sim.subscriptionId}
-                        value={sim.subscriptionId.toString()}
-                      >
-                        {sim.displayName || 'SIM'} ({sim.subscriptionId})
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            )}
-
-            <div className='space-y-4'>
-              <div>
-                <Label htmlFor='recipient-column'>
-                  Select Recipient Column
-                </Label>
-                <Select
-                  onValueChange={setSelectedColumn}
-                  value={selectedColumn}
-                  disabled={isStep2Disabled}
-                >
-                  <SelectTrigger id='recipient-column'>
-                    <SelectValue placeholder='Select a column' />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {columns.map((column) => (
-                      <SelectItem
-                        key={column}
-                        value={column || 'undefined-column'}
-                      >
-                        {column || 'Unnamed Column'}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div>
-                <Label htmlFor='message-template'>Message Template</Label>
-                <Textarea
-                  id='message-template'
-                  placeholder='Enter your message template here. Use {{ column_name }} for dynamic content.'
-                  value={messageTemplate}
-                  onChange={(e) => setMessageTemplate(e.target.value)}
-                  className='h-32'
-                  disabled={isStep2Disabled}
-                />
-              </div>
-            </div>
-          </section>
-
-          <section
-            className={isStep3Disabled ? 'opacity-50 pointer-events-none' : ''}
-          >
-            <h2 className='text-lg font-semibold mb-2'>3. Message Preview</h2>
-            <p className='text-sm text-gray-500 mb-4'>
-              Preview your message for a selected recipient before sending.
-            </p>
-            <div className='space-y-4'>
-              <div>
-                <Label htmlFor='preview-recipient'>
-                  Select Recipient for Preview
-                </Label>
-                <Select
-                  onValueChange={setSelectedRecipient}
-                  value={selectedRecipient}
-                  disabled={isStep3Disabled}
-                >
-                  <SelectTrigger id='preview-recipient'>
-                    <SelectValue placeholder='Select a recipient' />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {csvData
-                      .map((row, index) => {
-                        const value = row[selectedColumn]
-                        if (value) {
-                          return (
-                            <SelectItem key={`${value}-${index}`} value={value}>
-                              {value}
-                            </SelectItem>
-                          )
-                        }
-                        return null
-                      })
-                      .filter(Boolean)}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div>
-                <Label htmlFor='recipient-number'>Recipient Number</Label>
-                <Input
-                  id='recipient-number'
-                  value={selectedRecipient}
-                  disabled
-                  //   className='bg-gray-100'
-                />
-              </div>
-              <div>
-                <Label htmlFor='message-preview'>Message Preview</Label>
-                <Textarea
-                  id='message-preview'
-                  value={previewMessage}
-                  disabled
-                  className='p-4 rounded-md min-h-[100px] whitespace-pre-wrap'
-                />
-              </div>
-            </div>
-          </section>
-
-          {sendingBulkSMSError && (() => {
-            const formattedError = formatError(sendingBulkSMSError)
-            if (formattedError.isRateLimit) {
-              return (
-                <RateLimitError
-                  errorData={formattedError.rateLimitData}
-                  variant="alert"
-                  className="mt-4"
-                />
-              )
-            }
-            return (
-              <Alert variant='destructive' className='mt-4'>
-                <AlertCircle className='h-4 w-4' />
-                <AlertTitle>Error</AlertTitle>
-                <AlertDescription>
-                  {formattedError.message}
-                </AlertDescription>
-              </Alert>
-            )
-          })()}
-
-          {isSendingBulkSMSuccess && (
-            <Alert variant='default' className='mt-4'>
-              <CheckCircle className='h-4 w-4' />
-              <AlertTitle>Success</AlertTitle>
-              <AlertDescription>Bulk SMS sent successfully!</AlertDescription>
-            </Alert>
-          )}
-
-          <Button
-            className='w-full'
-            disabled={isStep3Disabled || isSendingBulkSMS}
-            onClick={() => sendBulkSMS()}
-          >
-            {isSendingBulkSMS ? (
-              <Spinner size='sm' className='text-white dark:text-black' />
-            ) : (
-              <Send className='mr-2 h-4 w-4' />
-            )}
-            {isSendingBulkSMS ? 'Sending...' : 'Send Bulk SMS'}
-          </Button>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/web/app/(app)/dashboard/(components)/community-alert.tsx b/web/app/(app)/dashboard/(components)/community-alert.tsx
deleted file mode 100644
index 5208e645..00000000
--- a/web/app/(app)/dashboard/(components)/community-alert.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Button } from '@/components/ui/button'
-import { ExternalLinks } from '@/config/external-links'
-import { Github, Heart, MessageSquare } from 'lucide-react'
-import Link from 'next/link'
-
-export default function CommunityAlert() {
-  return (
-    <Alert>
-      <AlertDescription className='flex flex-wrap items-center gap-2 md:gap-4'>
-        <span className='flex-1'>
-          Join our community and support the development!
-        </span>
-        <div className='flex flex-wrap gap-1 md:gap-2'>
-          <Button variant='outline' size='sm' asChild>
-            <Link href={ExternalLinks.github} target='_blank' prefetch={false}>
-              <Github className='mr-1 h-4 w-4' />
-              GitHub
-            </Link>
-          </Button>
-          <Button variant='outline' size='sm' asChild>
-            <Link href={ExternalLinks.patreon} target='_blank' prefetch={false}>
-              <Heart className='mr-1 h-4 w-4' />
-              Patreon
-            </Link>
-          </Button>
-          <Button variant='outline' size='sm' asChild>
-            <Link href={ExternalLinks.discord} target='_blank' prefetch={false}>
-              <MessageSquare className='mr-1 h-4 w-4' />
-              Discord
-            </Link>
-          </Button>
-        </div>
-      </AlertDescription>
-    </Alert>
-  )
-}
diff --git a/web/app/(app)/dashboard/(components)/community-links.tsx b/web/app/(app)/dashboard/(components)/community/community-links.tsx
similarity index 67%
rename from web/app/(app)/dashboard/(components)/community-links.tsx
rename to web/app/(app)/dashboard/(components)/community/community-links.tsx
index 34f0e898..e6b92a4e 100644
--- a/web/app/(app)/dashboard/(components)/community-links.tsx
+++ b/web/app/(app)/dashboard/(components)/community/community-links.tsx
@@ -3,7 +3,6 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import {
   Github,
-  Heart,
   MessageSquare,
   Linkedin,
   Twitter,
@@ -18,6 +17,7 @@ import { toast } from '@/hooks/use-toast'
 import {
   DialogHeader,
   DialogTitle,
+  DialogDescription,
   Dialog,
   DialogContent,
 } from '@/components/ui/dialog'
@@ -77,41 +77,7 @@ export default function CommunityLinks() {
 
   return (
     <>
-      <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-2'>
-        {/* <Card>
-        <CardHeader>
-          <CardTitle>One-time Donation</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className='text-sm text-muted-foreground mb-4'>
-            Support us with a one-time donation of your desired amount.
-          </p>
-          <Link href={ExternalLinks.polar} prefetch={false} target='_blank'>
-            <Button className='w-full' variant='destructive'>
-              <Heart className='mr-2 h-4 w-4' />
-              Donate Once
-            </Button>
-          </Link>
-        </CardContent>
-      </Card> */}
-
-        {/* <Card>
-        <CardHeader>
-          <CardTitle>Support on Patreon</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className='text-sm text-muted-foreground mb-4'>
-            Support the development by becoming a patron.
-          </p>
-          <Link href={ExternalLinks.patreon} prefetch={false} target='_blank'>
-            <Button className='w-full' variant='secondary'>
-              <Heart className='mr-2 h-4 w-4' />
-              Become a Patron
-            </Button>
-          </Link>
-        </CardContent>
-      </Card> */}
-
+      <div className='grid gap-4 md:grid-cols-2'>
         <Card>
           <CardHeader>
             <CardTitle>GitHub</CardTitle>
@@ -120,12 +86,12 @@ export default function CommunityLinks() {
             <p className='text-sm text-muted-foreground mb-4'>
               Check out our source code and contribute to the project.
             </p>
-            <Link href={ExternalLinks.github} prefetch={false} target='_blank'>
-              <Button className='w-full'>
+            <Button asChild className='w-full'>
+              <Link href={ExternalLinks.github} prefetch={false} target='_blank'>
                 <Github className='mr-2 h-4 w-4' />
                 View Source
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </CardContent>
         </Card>
 
@@ -137,12 +103,12 @@ export default function CommunityLinks() {
             <p className='text-sm text-muted-foreground mb-4'>
               Join our community for support and updates.
             </p>
-            <Link href={ExternalLinks.discord} prefetch={false} target='_blank'>
-              <Button className='w-full' variant='outline'>
+            <Button asChild className='w-full' variant='outline'>
+              <Link href={ExternalLinks.discord} prefetch={false} target='_blank'>
                 <MessageSquare className='mr-2 h-4 w-4' />
                 Join Discord
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </CardContent>
         </Card>
 
@@ -154,12 +120,12 @@ export default function CommunityLinks() {
             <p className='text-sm text-muted-foreground mb-4'>
               Follow us on X for the latest updates and announcements.
             </p>
-            <Link href={ExternalLinks.twitter} prefetch={false} target='_blank'>
-              <Button className='w-full' variant='outline'>
+            <Button asChild className='w-full' variant='outline'>
+              <Link href={ExternalLinks.twitter} prefetch={false} target='_blank'>
                 <Twitter className='mr-2 h-4 w-4' />
                 Follow on X
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </CardContent>
         </Card>
 
@@ -171,16 +137,12 @@ export default function CommunityLinks() {
             <p className='text-sm text-muted-foreground mb-4'>
               Connect with us on LinkedIn for updates and news.
             </p>
-            <Link
-              href={ExternalLinks.linkedin}
-              prefetch={false}
-              target='_blank'
-            >
-              <Button className='w-full' variant='outline'>
+            <Button asChild className='w-full' variant='outline'>
+              <Link href={ExternalLinks.linkedin} prefetch={false} target='_blank'>
                 <Linkedin className='mr-2 h-4 w-4' />
                 Connect on LinkedIn
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </CardContent>
         </Card>
         <Card>
@@ -203,38 +165,52 @@ export default function CommunityLinks() {
         </Card>
       </div>
       <Dialog open={socialOpen} onOpenChange={setSocialOpen}>
-        <DialogContent className='sm:max-w-[600px] min-w-[500px] text-base'>
+        <DialogContent className='sm:max-w-[600px] text-base'>
           <DialogHeader>
-            <DialogTitle className='text-primary mb-2 text-2xl font-bold'>
+            <DialogTitle className='text-primary mb-2 text-xl font-bold sm:text-2xl'>
               Share textbee.dev with Others
             </DialogTitle>
-            <p className='text-muted-foreground'>
+            {/* A bare <p> here left the dialog with no aria-describedby. */}
+            <DialogDescription>
               Help us grow by sharing textbee.dev with your friends and
-              colleagues!
-            </p>
+              colleagues.
+            </DialogDescription>
           </DialogHeader>
 
           <div className='flex flex-col gap-6 mt-4'>
             <div className='space-y-3'>
               <h3 className='text-lg font-semibold'>Choose your platform</h3>
-               <div className='grid grid-cols-4 gap-3 p-4 bg-muted/30 rounded-lg'>
-                 {socials.map(({ icon, name, url }) => (
-                   <button
-                     key={name}
-                     type='button'
-                     title={name}
-                     onClick={() => setCurrentUrl(url)}
-                     className={`${
-                       currentUrl === url
-                         ? 'ring-2 ring-primary bg-primary/10 shadow-lg'
-                         : 'hover:bg-card hover:shadow-md'
-                     } p-3 rounded-xl border bg-card/80 backdrop-blur-sm transition-all duration-200 hover:scale-105 group`}
-                   >
-                     <div className='w-10 h-10 mx-auto bg-white dark:bg-white rounded-lg p-1 shadow-sm group-hover:shadow-md transition-shadow'>
-                       <Image src={icon} alt={name} width={20} height={20} className='w-full h-full object-contain' />
-                     </div>
-                   </button>
-                 ))}
+              {/* Not an overflow fix: 7 platforms at grid-cols-4 did fit at
+                  375px, verified against the overflow guard. It just read
+                  badly, a 4 + 3 split with a stranded last row. Three columns
+                  on the smallest screens, then one clean row of seven. */}
+              <div className='grid grid-cols-3 gap-2 rounded-lg bg-muted/30 p-3 sm:grid-cols-7 sm:gap-3 sm:p-4'>
+                {socials.map(({ icon, name, url }) => (
+                  <button
+                    key={name}
+                    type='button'
+                    title={`Share on ${name}`}
+                    // Selection was signalled by a ring alone, which is colour
+                    // only. aria-pressed states it outright.
+                    aria-pressed={currentUrl === url}
+                    onClick={() => setCurrentUrl(url)}
+                    className={`${
+                      currentUrl === url
+                        ? 'ring-2 ring-primary bg-primary/10 shadow-lg'
+                        : 'hover:bg-card hover:border-primary/40 hover:shadow-md'
+                    } group rounded-xl border bg-card/80 p-2 backdrop-blur-sm transition-colors duration-150 sm:p-3`}
+                  >
+                    <div className='mx-auto h-9 w-9 rounded-lg bg-white p-1 shadow-sm transition-shadow group-hover:shadow-md dark:bg-white sm:h-10 sm:w-10'>
+                      <Image
+                        src={icon}
+                        alt={name}
+                        width={20}
+                        height={20}
+                        className='h-full w-full object-contain'
+                      />
+                    </div>
+                  </button>
+                ))}
               </div>
             </div>
 
@@ -259,7 +235,7 @@ export default function CommunityLinks() {
                   {copiedUrl === currentUrl ? 'Copied!' : 'Copy Link'}
                 </Button>
                 <Button
-                  onClick={() => window.open(currentUrl, '_blank')}
+                  onClick={() => window.open(currentUrl, '_blank', 'noopener,noreferrer')}
                   variant='outline'
                   className='flex-1'
                 >
diff --git a/web/app/(app)/dashboard/(components)/devices/add-device-dialog.tsx b/web/app/(app)/dashboard/(components)/devices/add-device-dialog.tsx
new file mode 100644
index 00000000..e510133d
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/devices/add-device-dialog.tsx
@@ -0,0 +1,112 @@
+'use client'
+
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import { ExternalLink } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Routes } from '@/config/routes'
+import GenerateApiKey, { type GenerateApiKeyHandle } from '../api-keys/generate-api-key'
+
+export type AddDeviceHandle = {
+  open: () => void
+}
+
+/**
+ * The full "add a device" flow: what to do first, then the API key and QR.
+ *
+ * Extracted from device-list so the dashboard quick action can use the same
+ * flow. That button opened the key-generation modal directly, which is
+ * confusing for a first-time user: it asks them to create an API key when
+ * what they wanted was to connect a phone, with no mention of installing the
+ * app or granting SMS permissions first.
+ */
+const AddDeviceDialog = forwardRef<AddDeviceHandle>(function AddDeviceDialog(
+  _props,
+  ref
+) {
+  const [instructionsOpen, setInstructionsOpen] = useState(false)
+  const apiKeyRef = useRef<GenerateApiKeyHandle>(null)
+
+  useImperativeHandle(ref, () => ({
+    open: () => setInstructionsOpen(true),
+  }))
+
+  return (
+    <>
+      <GenerateApiKey ref={apiKeyRef} showTrigger={false} />
+
+      <Dialog open={instructionsOpen} onOpenChange={setInstructionsOpen}>
+        <DialogContent className='sm:max-w-md'>
+          <DialogHeader>
+            <DialogTitle>Add a device</DialogTitle>
+            <DialogDescription className='text-left'>
+              Register a new device by scanning the QR code or pasting the API
+              key.
+            </DialogDescription>
+          </DialogHeader>
+          <ol className='list-decimal space-y-3 pl-5 text-left text-sm text-muted-foreground'>
+            <li>
+              Download textbee app from{' '}
+              <a
+                href={Routes.downloadAndroidApp}
+                target='_blank'
+                rel='noreferrer'
+                className='font-medium text-primary underline-offset-4 hover:underline'
+              >
+                {Routes.downloadAndroidApp}
+              </a>
+              , install it, and grant SMS permissions.
+            </li>
+            <li>
+              Tap Continue to create a new API key and get a QR code in the next
+              dialog. If you already have an active API key, you can paste it in
+              the app instead
+            </li>
+            <li>
+              Open the textbee.dev app and scan the QR code or paste the key
+              manually. Your device should appear in the list when the link
+              succeeds.
+            </li>
+          </ol>
+          <DialogFooter className='flex-col gap-2 sm:flex-row sm:justify-between'>
+            <Button variant='outline' size='sm' asChild>
+              <a href={Routes.quickstart} target='_blank' rel='noreferrer'>
+                Full guide
+                <ExternalLink className='ml-1 h-3 w-3' />
+              </a>
+            </Button>
+            <div className='flex w-full gap-2 sm:w-auto'>
+              <Button
+                variant='outline'
+                size='sm'
+                className='flex-1 sm:flex-none'
+                onClick={() => setInstructionsOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                size='sm'
+                className='flex-1 sm:flex-none'
+                onClick={() => {
+                  setInstructionsOpen(false)
+                  apiKeyRef.current?.open()
+                }}
+              >
+                Continue
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+})
+
+export default AddDeviceDialog
diff --git a/web/app/(app)/dashboard/(components)/device-list.tsx b/web/app/(app)/dashboard/(components)/devices/device-list.tsx
similarity index 66%
rename from web/app/(app)/dashboard/(components)/device-list.tsx
rename to web/app/(app)/dashboard/(components)/devices/device-list.tsx
index b562c766..8644323d 100644
--- a/web/app/(app)/dashboard/(components)/device-list.tsx
+++ b/web/app/(app)/dashboard/(components)/devices/device-list.tsx
@@ -5,8 +5,6 @@ import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import {
   Smartphone,
-  Battery,
-  Signal,
   Copy,
   Plus,
   ExternalLink,
@@ -16,10 +14,11 @@ import {
 } from 'lucide-react'
 import Link from 'next/link'
 import { useToast } from '@/hooks/use-toast'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
 import { Routes } from '@/config/routes'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useDeleteDevice, useDevices, useSubscription } from '@/lib/api'
+import EmptyState from '@/components/shared/empty-state'
+import ErrorState from '@/components/shared/error-state'
+import RelativeTime from '@/components/shared/relative-time'
 import { useRef, useState } from 'react'
 import {
   Dialog,
@@ -37,9 +36,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { formatDeviceName } from '@/lib/utils'
-import GenerateApiKey, {
-  type GenerateApiKeyHandle,
-} from './generate-api-key'
+import AddDeviceDialog, { type AddDeviceHandle } from './add-device-dialog'
 import {
   DeviceVersionCandidate,
   getDeviceVersionCode,
@@ -49,76 +46,50 @@ import {
 
 type DeviceRow = DeviceVersionCandidate & {
   createdAt: string
-  status?: string
   enabled?: boolean
 }
 
 export default function DeviceList() {
-  const addDeviceKeyRef = useRef<GenerateApiKeyHandle>(null)
-  const [addDeviceInstructionOpen, setAddDeviceInstructionOpen] =
-    useState(false)
+  const addDeviceRef = useRef<AddDeviceHandle>(null)
   const [devicePendingDelete, setDevicePendingDelete] =
     useState<DeviceRow | null>(null)
   const { toast } = useToast()
-  const queryClient = useQueryClient()
-  const {
-    isPending,
-    error,
-    data: devices,
-  } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.gateway.listDevices())
-        .then((res) => res.data),
-    // select: (res) => res.data,
-  })
+  const { isPending, error, data: devices, refetch } = useDevices()
 
-  const { data: currentSubscription } = useQuery({
-    queryKey: ['currentSubscription'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.billing.currentSubscription())
-        .then((res) => res.data),
-  })
+  const { data: currentSubscription } = useSubscription()
 
   // -1 (or missing) means unlimited; only enabled devices count toward the limit
   const deviceLimit = currentSubscription?.usage?.deviceLimit ?? -1
   const activeDeviceCount =
-    devices?.data?.filter((device) => device.enabled).length ?? 0
+    devices?.filter((device) => device.enabled).length ?? 0
   const isDeviceLimitReached =
     deviceLimit !== -1 && !isPending && activeDeviceCount >= deviceLimit
   const isApproachingDeviceLimit =
     deviceLimit >= 2 && !isPending && activeDeviceCount === deviceLimit - 1
 
-  const {
-    mutate: deleteDevice,
-    isPending: isDeletingDevice,
-  } = useMutation({
-    mutationFn: (id: string) =>
-      httpBrowserClient.delete(ApiEndpoints.gateway.deleteDevice(id)),
-    onSuccess: () => {
-      setDevicePendingDelete(null)
-      toast({
-        title: 'Device removed',
-      })
-      void queryClient.invalidateQueries({ queryKey: ['devices'] })
-    },
-    onError: (err: unknown) => {
-      const message =
-        err &&
-        typeof err === 'object' &&
-        'message' in err &&
-        typeof (err as { message: unknown }).message === 'string'
-          ? (err as { message: string }).message
-          : 'Something went wrong'
-      toast({
-        variant: 'destructive',
-        title: 'Error removing device',
-        description: message,
-      })
-    },
-  })
+  const { mutate: deleteDevice, isPending: isDeletingDevice } = useDeleteDevice()
+
+  const handleDeleteDevice = (id: string) =>
+    deleteDevice(id, {
+      onSuccess: () => {
+        setDevicePendingDelete(null)
+        toast({ title: 'Device removed' })
+      },
+      onError: (err: unknown) => {
+        const message =
+          err &&
+          typeof err === 'object' &&
+          'message' in err &&
+          typeof (err as { message: unknown }).message === 'string'
+            ? (err as { message: string }).message
+            : 'Something went wrong'
+        toast({
+          variant: 'destructive',
+          title: 'Error removing device',
+          description: message,
+        })
+      },
+    })
 
   const handleCopyId = (id: string) => {
     navigator.clipboard.writeText(id)
@@ -129,14 +100,21 @@ export default function DeviceList() {
 
   return (
     <>
-      <GenerateApiKey ref={addDeviceKeyRef} showTrigger={false} />
-      <Card>
+      <AddDeviceDialog ref={addDeviceRef} />
+      <Card className='min-w-0 max-w-full'>
         <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-          <CardTitle className='text-lg'>Registered Devices</CardTitle>
+          <CardTitle className='text-lg'>
+            Registered Devices
+            {!isPending && !error && (
+              <span className='ml-2 text-sm font-normal text-muted-foreground'>
+                {devices?.length ?? 0}
+              </span>
+            )}
+          </CardTitle>
           <Button
             variant='outline'
             size='sm'
-            onClick={() => setAddDeviceInstructionOpen(true)}
+            onClick={() => addDeviceRef.current?.open()}
           >
             <Plus className='mr-1 h-4 w-4' />
             Add device
@@ -211,18 +189,23 @@ export default function DeviceList() {
             )}
 
             {error && (
-              <div className='flex justify-center items-center h-full'>
-                <div>Error: {error.message}</div>
-              </div>
+              <ErrorState
+                error={error}
+                title="Couldn't load your devices"
+                icon={Smartphone}
+                onRetry={() => refetch()}
+              />
             )}
 
-            {!isPending && !error && devices?.data?.length === 0 && (
-              <div className='flex justify-center items-center h-full'>
-                <div>No devices found</div>
-              </div>
+            {!isPending && !error && devices?.length === 0 && (
+              <EmptyState
+                icon={Smartphone}
+                title='No devices found'
+                hint='Install the app on your phone and add it as a device to get started.'
+              />
             )}
 
-            {devices?.data?.map((device) => (
+            {devices?.map((device) => (
               <Card key={device._id} className='border-0 shadow-none'>
                 <CardContent className='flex items-center gap-1 p-3'>
                   <Smartphone className='h-6 w-6 mr-2 shrink-0' />
@@ -240,10 +223,12 @@ export default function DeviceList() {
                             Update available
                           </Badge>
                         )}
+                        {/* Colour and text now come from the same field. The
+                            variant used to key off device.status, which the
+                            API never sends, so an enabled device was styled
+                            identically to a disabled one. */}
                         <Badge
-                          variant={
-                            device.status === 'online' ? 'default' : 'secondary'
-                          }
+                          variant={device.enabled ? 'default' : 'secondary'}
                           className='text-xs'
                         >
                           {device.enabled ? 'Enabled' : 'Disabled'}
@@ -258,30 +243,24 @@ export default function DeviceList() {
                         variant='ghost'
                         size='icon'
                         className='h-6 w-6'
+                        aria-label='Copy device ID'
+                        title='Copy device ID'
                         onClick={() => handleCopyId(device._id)}
                       >
                         <Copy className='h-3 w-3' />
                       </Button>
                     </div>
+                    {/* No battery or signal indicators: the app does not
+                        report either, so they only ever rendered "unknown"
+                        and "-" next to a meaningful-looking icon. */}
                     <div className='flex items-center mt-1 space-x-3 text-xs text-muted-foreground'>
-                      <div className='flex items-center'>
-                        <Battery className='h-3 w-3 mr-1' />
-                        unknown
-                      </div>
-                      <div className='flex items-center'>
-                        <Signal className='h-3 w-3 mr-1' />-
-                      </div>
                       <div>
                         App version:{' '}
                         {getDeviceVersionCode(device as DeviceVersionCandidate) ??
                           'unknown'}
                       </div>
                       <div>
-                        Registered at:{' '}
-                        {new Date(device.createdAt).toLocaleString('en-US', {
-                          dateStyle: 'medium',
-                          timeStyle: 'short',
-                        })}
+                        Registered <RelativeTime value={device.createdAt} />
                       </div>
                     </div>
                     {isDeviceOutdated(device as DeviceVersionCandidate) && (
@@ -339,69 +318,6 @@ export default function DeviceList() {
       </CardContent>
       </Card>
 
-      <Dialog
-        open={addDeviceInstructionOpen}
-        onOpenChange={setAddDeviceInstructionOpen}
-      >
-        <DialogContent className='sm:max-w-md'>
-          <DialogHeader>
-            <DialogTitle>Add a device</DialogTitle>
-            <DialogDescription className='text-left'>
-              Register a new device by scanning the QR code or pasting the API key.
-            </DialogDescription>
-          </DialogHeader>
-          <ol className='list-decimal space-y-3 pl-5 text-left text-sm text-muted-foreground'>
-            <li>
-              Download textbee app from{' '}
-              <a
-                href={Routes.downloadAndroidApp}
-                target='_blank'
-                rel='noreferrer'
-                className='font-medium text-primary underline-offset-4 hover:underline'
-              >
-                {Routes.downloadAndroidApp}
-              </a>
-              , install it, and grant SMS permissions.
-            </li>
-            <li>
-              Tap Continue to create a new API key and get a QR
-              code in the next dialog. If you already have an active API key, you can paste it in the
-              app instead
-            </li>
-            <li>
-              Open the textbee.dev app and scan the QR code or paste the key manually. Your device should appear in the list when the link succeeds.
-            </li>
-          </ol>
-          <DialogFooter className='flex-col gap-2 sm:flex-row sm:justify-between'>
-            <Button variant='outline' size='sm' asChild>
-              <a href={Routes.quickstart} target='_blank' rel='noreferrer'>
-                Full guide
-                <ExternalLink className='ml-1 h-3 w-3' />
-              </a>
-            </Button>
-            <div className='flex w-full gap-2 sm:w-auto'>
-              <Button
-                variant='outline'
-                size='sm'
-                className='flex-1 sm:flex-none'
-                onClick={() => setAddDeviceInstructionOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button
-                size='sm'
-                className='flex-1 sm:flex-none'
-                onClick={() => {
-                  setAddDeviceInstructionOpen(false)
-                  addDeviceKeyRef.current?.open()
-                }}
-              >
-                Continue
-              </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
 
       <Dialog
         open={!!devicePendingDelete}
@@ -430,7 +346,7 @@ export default function DeviceList() {
               variant='destructive'
               onClick={() =>
                 devicePendingDelete &&
-                deleteDevice(devicePendingDelete._id)
+                handleDeleteDevice(devicePendingDelete._id)
               }
               disabled={isDeletingDevice}
             >
diff --git a/web/app/(app)/dashboard/(components)/update-app-helpers.ts b/web/app/(app)/dashboard/(components)/devices/update-app-helpers.ts
similarity index 100%
rename from web/app/(app)/dashboard/(components)/update-app-helpers.ts
rename to web/app/(app)/dashboard/(components)/devices/update-app-helpers.ts
diff --git a/web/app/(app)/dashboard/(components)/update-app-modal.tsx b/web/app/(app)/dashboard/(components)/devices/update-app-modal.tsx
similarity index 90%
rename from web/app/(app)/dashboard/(components)/update-app-modal.tsx
rename to web/app/(app)/dashboard/(components)/devices/update-app-modal.tsx
index 96955b94..e10ab4b2 100644
--- a/web/app/(app)/dashboard/(components)/update-app-modal.tsx
+++ b/web/app/(app)/dashboard/(components)/devices/update-app-modal.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import Link from 'next/link'
-import { useQuery } from '@tanstack/react-query'
+import { useDevices } from '@/lib/api'
 import { Download, Sparkles, Smartphone } from 'lucide-react'
 import {
   Dialog,
@@ -13,9 +13,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
-import { ApiEndpoints } from '@/config/api'
 import { Routes } from '@/config/routes'
-import httpBrowserClient from '@/lib/httpBrowserClient'
 import { formatDeviceName } from '@/lib/utils'
 import {
   DeviceVersionCandidate,
@@ -33,20 +31,11 @@ export default function UpdateAppModal() {
   const ignoreNextOpenChangeRef = useRef(false)
   const { isSnoozed } = useUpdatePromptSnooze()
 
-  const { data: devicesResponse, isLoading, error } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.gateway.listDevices())
-        .then((res) => res.data),
-  })
+  const { data: devices, isLoading, error } = useDevices()
 
   const outdatedDevices = useMemo(
-    () =>
-      getOutdatedDevices(
-        (devicesResponse?.data ?? []) as DeviceVersionCandidate[]
-      ),
-    [devicesResponse?.data]
+    () => getOutdatedDevices((devices ?? []) as DeviceVersionCandidate[]),
+    [devices]
   )
 
   const primaryOutdatedDevice = outdatedDevices[0]
diff --git a/web/app/(app)/dashboard/(components)/update-app-notification-bar.tsx b/web/app/(app)/dashboard/(components)/devices/update-app-notification-bar.tsx
similarity index 77%
rename from web/app/(app)/dashboard/(components)/update-app-notification-bar.tsx
rename to web/app/(app)/dashboard/(components)/devices/update-app-notification-bar.tsx
index 2c0ef148..667fcaeb 100644
--- a/web/app/(app)/dashboard/(components)/update-app-notification-bar.tsx
+++ b/web/app/(app)/dashboard/(components)/devices/update-app-notification-bar.tsx
@@ -2,13 +2,11 @@
 
 import { useMemo } from 'react'
 import Link from 'next/link'
-import { useQuery } from '@tanstack/react-query'
+import { useDevices } from '@/lib/api'
 import { ArrowUpRight, BellRing } from 'lucide-react'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
-import { ApiEndpoints } from '@/config/api'
 import { Routes } from '@/config/routes'
-import httpBrowserClient from '@/lib/httpBrowserClient'
 import { formatDeviceName } from '@/lib/utils'
 import {
   DeviceVersionCandidate,
@@ -18,20 +16,11 @@ import {
 } from './update-app-helpers'
 
 export default function UpdateAppNotificationBar() {
-  const { data: devicesResponse, isLoading, error } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.gateway.listDevices())
-        .then((res) => res.data),
-  })
+  const { data: devices, isLoading, error } = useDevices()
 
   const outdatedDevices = useMemo(
-    () =>
-      getOutdatedDevices(
-        (devicesResponse?.data ?? []) as DeviceVersionCandidate[]
-      ),
-    [devicesResponse?.data]
+    () => getOutdatedDevices((devices ?? []) as DeviceVersionCandidate[]),
+    [devices]
   )
 
   const primaryOutdatedDevice = outdatedDevices[0]
diff --git a/web/app/(app)/dashboard/(components)/get-started.tsx b/web/app/(app)/dashboard/(components)/get-started.tsx
deleted file mode 100644
index 51042c16..00000000
--- a/web/app/(app)/dashboard/(components)/get-started.tsx
+++ /dev/null
@@ -1,652 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import Link from 'next/link'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { Check, Download, ExternalLink, Lightbulb } from 'lucide-react'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { ApiEndpoints } from '@/config/api'
-import { Routes } from '@/config/routes'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { cn } from '@/lib/utils'
-import GenerateApiKey from './generate-api-key'
-import { Skeleton } from '@/components/ui/skeleton'
-
-type StatsShape = {
-  totalApiKeyCount?: number
-  totalDeviceCount?: number
-  totalSentSMSCount?: number
-}
-
-type UserShape = {
-  emailVerifiedAt?: string | Date | null
-  createdAt?: string | Date
-  onboarding?: {
-    completedAt?: string | Date | null
-    currentStepId?: string
-    skippedStepIds?: string[]
-  }
-}
-
-type SubShape = { plan?: { name?: string } } | null
-
-type StepDef = {
-  id: string
-  label: string
-  description: string
-  optional: boolean
-  checkDone: (
-    user: UserShape | undefined,
-    stats: StatsShape | undefined,
-    sub: SubShape,
-    skipped: string[],
-  ) => boolean
-}
-
-const STEPS: StepDef[] = [
-  {
-    id: 'verify_email',
-    label: 'Verify your email',
-    description: 'Required before you can send SMS.',
-    optional: false,
-    checkDone: (user) => !!user?.emailVerifiedAt,
-  },
-  {
-    id: 'download_app',
-    label: 'Download the Android app',
-    description: 'Install TextBee on your Android device.',
-    optional: true,
-    checkDone: (_u, stats, _s, skipped) =>
-      (stats?.totalDeviceCount ?? 0) > 0 || skipped.includes('download_app'),
-  },
-  {
-    id: 'api_key',
-    label: 'Generate an API key',
-    description: 'Used to connect your device or authenticate API calls.',
-    optional: false,
-    checkDone: (_u, stats) => (stats?.totalApiKeyCount ?? 0) > 0,
-  },
-  {
-    id: 'register_device',
-    label: 'Register your device',
-    description: 'Link your phone to your account by scanning a QR code.',
-    optional: false,
-    checkDone: (_u, stats) => (stats?.totalDeviceCount ?? 0) > 0,
-  },
-  {
-    id: 'choose_plan',
-    label: 'Choose your plan',
-    description: 'Pick the plan that fits your usage.',
-    optional: true,
-    checkDone: (_u, _stats, sub, skipped) =>
-      (sub?.plan?.name && sub.plan.name.toLowerCase() !== 'free') ||
-      skipped.includes('choose_plan'),
-  },
-  {
-    id: 'first_message',
-    label: 'Send your first message',
-    description: 'Send your first message from the dashboard.',
-    optional: false,
-    checkDone: (_u, stats) => (stats?.totalSentSMSCount ?? 0) > 0,
-  },
-]
-
-function GetStartedCardSkeleton() {
-  return (
-    <Card className='border-l-4 border-l-primary border border-primary/20 bg-gradient-to-br from-primary/10 to-background shadow-sm'>
-      <CardHeader className='pb-2'>
-        <div className='flex items-start justify-between gap-4'>
-          <div className='flex items-center gap-2'>
-            <Skeleton className='h-8 w-8 shrink-0 rounded-full' />
-            <div className='space-y-2'>
-              <Skeleton className='h-5 w-32' />
-              <Skeleton className='h-4 w-48' />
-            </div>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className='pt-2'>
-        <div className='space-y-0'>
-          {STEPS.map((step, index) => {
-            const isLast = index === STEPS.length - 1
-            return (
-              <div key={step.id} className='flex gap-3'>
-                <div className='flex w-9 shrink-0 flex-col items-center'>
-                  <Skeleton className='h-8 w-8 shrink-0 rounded-full' />
-                  {!isLast && (
-                    <div className='mt-1 min-h-[20px] w-0.5 flex-1 rounded-full bg-border/60' />
-                  )}
-                </div>
-                <div
-                  className={cn('min-w-0 flex-1 pb-6', isLast && 'pb-2')}
-                >
-                  <Skeleton
-                    className={cn('h-4 max-w-[220px]', index % 2 === 0 ? 'w-[85%]' : 'w-[70%]')}
-                  />
-                  <Skeleton className='mt-2 h-3 max-w-md w-full' />
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default function GetStartedCard() {
-  const queryClient = useQueryClient()
-  const autoCompletedRef = useRef(false)
-  const legacyAutoCompletedRef = useRef(false)
-  const [registerHelpOpen, setRegisterHelpOpen] = useState(false)
-  const [selectedStepId, setSelectedStepId] = useState<string | null>(null)
-
-  const { data: userData, isLoading: userLoading } = useQuery({
-    queryKey: ['whoAmI'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.auth.whoAmI())
-        .then((res) => res.data?.data as UserShape),
-    refetchInterval: (query) => {
-      const u = query.state.data as UserShape | undefined
-      return u?.onboarding?.completedAt ? false : 10_000
-    },
-  })
-
-  const { data: stats } = useQuery({
-    queryKey: ['stats'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.gateway.getStats())
-        .then((res) => res.data?.data as StatsShape),
-    refetchInterval: () => (userData?.onboarding?.completedAt ? false : 10_000),
-  })
-
-  const { data: currentSubscription, isLoading: subLoading } = useQuery({
-    queryKey: ['currentSubscription'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.billing.currentSubscription())
-        .then((res) => res.data as SubShape),
-    refetchInterval: () => (userData?.onboarding?.completedAt ? false : 10_000),
-  })
-
-  const { mutate: updateOnboarding, isPending: savingOnboarding } = useMutation({
-    mutationFn: (body: {
-      skipStepId?: string
-      complete?: boolean
-      currentStepId?: string
-    }) =>
-      httpBrowserClient
-        .patch(ApiEndpoints.auth.updateOnboarding(), body)
-        .then((r) => r.data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['whoAmI'] })
-      queryClient.invalidateQueries({ queryKey: ['stats'] })
-      queryClient.invalidateQueries({ queryKey: ['currentSubscription'] })
-    },
-  })
-
-  const skippedIds = useMemo(
-    () => userData?.onboarding?.skippedStepIds ?? [],
-    [userData?.onboarding?.skippedStepIds],
-  )
-
-  const stepStates = useMemo(
-    () =>
-      STEPS.map((s) => ({
-        ...s,
-        isDone: s.checkDone(
-          userData,
-          stats,
-          currentSubscription ?? null,
-          skippedIds,
-        ),
-      })),
-    [userData, stats, currentSubscription, skippedIds],
-  )
-
-  const doneCount = stepStates.filter((s) => s.isDone).length
-
-  const isFreePlan =
-    !currentSubscription?.plan?.name ||
-    currentSubscription.plan.name.toLowerCase() === 'free'
-
-  const canNavigateToStep = useCallback((stepId: string) => {
-    if (stepId === 'verify_email') return false
-    if (stepId === 'choose_plan') return isFreePlan
-    return true
-  }, [isFreePlan])
-
-  useEffect(() => {
-    if (selectedStepId) return
-    const persisted = userData?.onboarding?.currentStepId
-    if (persisted && stepStates.some((s) => s.id === persisted)) {
-      if (!canNavigateToStep(persisted)) return
-      setSelectedStepId(persisted)
-    }
-  }, [selectedStepId, userData?.onboarding?.currentStepId, stepStates, canNavigateToStep])
-
-  const activeStepId = useMemo(() => {
-    const firstIncomplete = stepStates.find((s) => !s.isDone)?.id
-    const candidate =
-      (selectedStepId && stepStates.some((s) => s.id === selectedStepId))
-        ? selectedStepId
-        : userData?.onboarding?.currentStepId
-
-    if (candidate && stepStates.some((s) => s.id === candidate)) {
-      if (!canNavigateToStep(candidate)) {
-        return firstIncomplete ?? STEPS[STEPS.length - 1].id
-      }
-      return candidate
-    }
-
-    return firstIncomplete ?? STEPS[STEPS.length - 1].id
-  }, [
-    stepStates,
-    userData?.onboarding?.currentStepId,
-    selectedStepId,
-    canNavigateToStep,
-  ])
-
-  useEffect(() => {
-    if (
-      !userData ||
-      stats === undefined ||
-      subLoading ||
-      autoCompletedRef.current
-    ) {
-      return
-    }
-    if (userData.onboarding?.completedAt) return
-
-    const allStepsDone = STEPS.every((step) =>
-      step.checkDone(
-        userData,
-        stats,
-        currentSubscription ?? null,
-        skippedIds,
-      ),
-    )
-
-    if (allStepsDone) {
-      autoCompletedRef.current = true
-      updateOnboarding({ complete: true })
-    }
-  }, [
-    userData,
-    stats,
-    currentSubscription,
-    skippedIds,
-    subLoading,
-    updateOnboarding,
-  ])
-
-  useEffect(() => {
-    if (!userData || stats === undefined || subLoading) return
-    if (legacyAutoCompletedRef.current) return
-    if (userData.onboarding?.completedAt) return
-
-    const createdAt = userData.createdAt ? new Date(userData.createdAt) : null
-    if (!createdAt || Number.isNaN(createdAt.getTime())) return
-
-    const cutoff = new Date('2026-01-01T00:00:00.000Z')
-    const isLegacy = createdAt < cutoff
-    if (!isLegacy) return
-
-    const hasDevice = (stats.totalDeviceCount ?? 0) >= 1
-    const hasApiKey = (stats.totalApiKeyCount ?? 0) >= 1
-    const hasSent = (stats.totalSentSMSCount ?? 0) >= 1
-    if (!hasDevice || !hasApiKey || !hasSent) return
-
-    legacyAutoCompletedRef.current = true
-    updateOnboarding({ complete: true })
-  }, [userData, stats, subLoading, updateOnboarding])
-
-  if (userLoading) {
-    return <GetStartedCardSkeleton />
-  }
-
-  if (userData?.onboarding?.completedAt) {
-    return null
-  }
-
-  const finishSetup = () => updateOnboarding({ complete: true })
-
-  return (
-    <>
-      <Card className='border-l-4 border-l-primary border border-primary/20 bg-gradient-to-br from-primary/10 to-background shadow-sm'>
-        <CardHeader className='pb-2'>
-          <div className='flex items-start justify-between gap-4'>
-            <div className='flex items-center gap-2'>
-              <div className='rounded-full bg-primary/20 p-1.5'>
-                <Lightbulb className='h-4 w-4 text-primary' />
-              </div>
-              <div>
-                <CardTitle className='text-lg'>Get Started</CardTitle>
-                <CardDescription className='mt-1'>
-                  {doneCount} of {STEPS.length} steps complete.
-                </CardDescription>
-              </div>
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent className='pt-2'>
-          <div className='space-y-0'>
-            {stepStates.map((step, index) => {
-              const isActive = step.id === activeStepId
-              const isLast = index === stepStates.length - 1
-              const lineActive =
-                stepStates[index].isDone &&
-                (index === stepStates.length - 1 ||
-                  stepStates[index + 1].isDone ||
-                  STEPS[index + 1]?.id === activeStepId)
-
-              const activeIndex = stepStates.findIndex((s) => s.id === activeStepId)
-              const canClickStep = canNavigateToStep(step.id)
-
-              return (
-                <div key={step.id} className='flex gap-3'>
-                  <div className='flex w-9 shrink-0 flex-col items-center'>
-                    <div
-                      className={cn(
-                        'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold',
-                        step.isDone &&
-                          'bg-primary text-primary-foreground shadow-sm',
-                        !step.isDone &&
-                          isActive &&
-                          'border-2 border-primary bg-background text-primary',
-                        !step.isDone &&
-                          !isActive &&
-                          'bg-muted text-muted-foreground',
-                      )}
-                    >
-                      {step.isDone ? (
-                        <Check className='h-4 w-4' strokeWidth={2.5} />
-                      ) : (
-                        index + 1
-                      )}
-                    </div>
-                    {!isLast && (
-                      <div
-                        className={cn(
-                          'mt-1 min-h-[20px] w-0.5 flex-1 rounded-full',
-                          lineActive ? 'bg-primary/50' : 'bg-border',
-                        )}
-                      />
-                    )}
-                  </div>
-                  <div className={cn('min-w-0 flex-1 pb-6', isLast && 'pb-2')}>
-                    <div className='flex flex-wrap items-center gap-2'>
-                      {canClickStep ? (
-                        <button
-                          type='button'
-                          className={cn(
-                            'text-left text-sm font-medium underline-offset-4 transition-colors hover:text-primary hover:underline',
-                            isActive || step.isDone
-                              ? 'text-foreground'
-                              : 'text-muted-foreground',
-                          )}
-                          onClick={() => {
-                            setSelectedStepId(step.id)
-                            updateOnboarding({ currentStepId: step.id })
-                          }}
-                        >
-                          {step.label}
-                        </button>
-                      ) : (
-                        <p
-                          className={cn(
-                            'text-sm font-medium',
-                            step.isDone || isActive
-                              ? 'text-foreground'
-                              : 'text-muted-foreground',
-                          )}
-                        >
-                          {step.label}
-                        </p>
-                      )}
-                      {/* {step.optional && (
-                        <Badge variant='secondary' className='text-[10px] font-normal'>
-                          Optional
-                        </Badge>
-                      )} */}
-                    </div>
-                    {isActive && (
-                      <>
-                        <p className='mt-1 text-sm text-muted-foreground'>
-                          {step.description}
-                        </p>
-                        <div className='mt-3 flex flex-wrap items-center gap-2'>
-                          {step.id === 'verify_email' && (
-                            <Button size='sm' asChild>
-                              <Link href={Routes.verifyEmail}>Verify email</Link>
-                            </Button>
-                          )}
-                          {step.id === 'download_app' && (
-                            <>
-                              <Button
-                                variant='outline'
-                                size='sm'
-                                onClick={() =>
-                                  window.open(Routes.downloadAndroidApp, '_blank')
-                                }
-                              >
-                                <Download className='h-4 w-4' />
-                                Download APK
-                              </Button>
-                              <Button
-                                variant='link'
-                                size='sm'
-                                className='h-auto px-2 text-muted-foreground'
-                                disabled={savingOnboarding}
-                                onClick={() =>
-                                  updateOnboarding({ skipStepId: 'download_app' })
-                                }
-                              >
-                                Skip →
-                              </Button>
-                            </>
-                          )}
-                          {step.id === 'api_key' && <GenerateApiKey />}
-                          {step.id === 'register_device' && (
-                            <Button
-                              variant='outline'
-                              size='sm'
-                              onClick={() => setRegisterHelpOpen(true)}
-                            >
-                              How to register
-                            </Button>
-                          )}
-                          {step.id === 'choose_plan' && (
-                            <>
-                              {subLoading ? (
-                                <div className='grid w-full gap-3 md:grid-cols-2'>
-                                  <Skeleton className='h-40 rounded-lg' />
-                                  <Skeleton className='h-40 rounded-lg' />
-                                </div>
-                              ) : (
-                                <div className='grid w-full gap-3 md:grid-cols-2'>
-                                  <Card className='border-border shadow-none'>
-                                    <CardHeader className='pb-2 pt-4'>
-                                      <CardTitle className='text-base'>Free</CardTitle>
-                                      <CardDescription>$0/month</CardDescription>
-                                    </CardHeader>
-                                    <CardContent className='space-y-2 pb-4 text-sm text-muted-foreground'>
-                                      <p className='flex gap-2'>
-                                        <Check className='mt-0.5 h-4 w-4 shrink-0 text-muted-foreground' />
-                                        1 device
-                                      </p>
-                                      <p className='flex gap-2'>
-                                        <Check className='mt-0.5 h-4 w-4 shrink-0 text-muted-foreground' />
-                                        50 SMS / day, 300 / month
-                                      </p>
-                                    </CardContent>
-                                    <CardFooter className='flex-col gap-2 pb-4 pt-0'>
-                                      <Button
-                                        variant='outline'
-                                        className='w-full'
-                                        disabled={savingOnboarding}
-                                        onClick={() =>
-                                          updateOnboarding({ skipStepId: 'choose_plan' })
-                                        }
-                                      >
-                                        Continue with Free
-                                      </Button>
-                                    </CardFooter>
-                                  </Card>
-                                  <Card className='relative border-2 border-primary shadow-md'>
-                                    <Badge className='absolute right-3 top-3 text-[10px]'>
-                                      Recommended
-                                    </Badge>
-                                    <CardHeader className='pb-2 pt-4 pr-14'>
-                                      <CardTitle className='text-base'>Pro</CardTitle>
-                                      <CardDescription>$10/month</CardDescription>
-                                    </CardHeader>
-                                    <CardContent className='space-y-2 pb-4 text-sm'>
-                                      <p className='flex gap-2 text-foreground'>
-                                        <Check className='mt-0.5 h-4 w-4 shrink-0 text-primary' />
-                                        Up to 5 devices
-                                      </p>
-                                      <p className='flex gap-2 text-foreground'>
-                                        <Check className='mt-0.5 h-4 w-4 shrink-0 text-primary' />
-                                        No daily limit
-                                      </p>
-                                      <p className='flex gap-2 text-foreground'>
-                                        <Check className='mt-0.5 h-4 w-4 shrink-0 text-primary' />
-                                        5,000 SMS / month
-                                      </p>
-                                      <p className='flex gap-2 text-foreground'>
-                                        <Check className='mt-0.5 h-4 w-4 shrink-0 text-primary' />
-                                        Priority support
-                                      </p>
-                                    </CardContent>
-                                    <CardFooter className='flex-col gap-2 pb-4 pt-0'>
-                                      <Button className='w-full' size='sm' asChild>
-                                        <Link href='/checkout/pro'>Upgrade to Pro</Link>
-                                      </Button>
-                                      <Button
-                                        variant='link'
-                                        size='sm'
-                                        className='h-auto text-xs text-muted-foreground'
-                                        asChild
-                                      >
-                                        <a
-                                          href={`${Routes.landingPage}/pricing`}
-                                          target='_blank'
-                                          rel='noreferrer'
-                                        >
-                                          Compare all plans
-                                          <ExternalLink className='ml-1 h-3 w-3' />
-                                        </a>
-                                      </Button>
-                                    </CardFooter>
-                                  </Card>
-                                </div>
-                              )}
-                              <Button
-                                variant='link'
-                                size='sm'
-                                className='h-auto px-0 text-muted-foreground'
-                                disabled={savingOnboarding}
-                                onClick={() =>
-                                  updateOnboarding({ skipStepId: 'choose_plan' })
-                                }
-                              >
-                                Skip for now →
-                              </Button>
-                            </>
-                          )}
-                          {step.id === 'first_message' && (
-                            <Button size='sm' asChild>
-                              <Link href='/dashboard/messaging'>Go to messaging</Link>
-                            </Button>
-                          )}
-                        </div>
-                      </>
-                    )}
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        </CardContent>
-        <CardFooter className='flex justify-end border-t border-border/60 pt-4'>
-          <Button
-            variant='ghost'
-            size='sm'
-            disabled={savingOnboarding}
-            onClick={finishSetup}
-          >
-            Finish setup
-          </Button>
-        </CardFooter>
-      </Card>
-
-      <Dialog open={registerHelpOpen} onOpenChange={setRegisterHelpOpen}>
-        <DialogContent className='sm:max-w-md'>
-          <DialogHeader>
-            <DialogTitle>Register your device</DialogTitle>
-            <DialogDescription>
-              Follow these steps to link your phone to your account.
-            </DialogDescription>
-          </DialogHeader>
-          <ol className='mt-2 list-decimal space-y-3 pl-5 text-sm text-muted-foreground'>
-            <li>
-              Generate an API key in the step above (if you have not already).
-            </li>
-            <li>
-              Download the TextBee Android app from{' '}
-              <a
-                href={Routes.downloadAndroidApp}
-                target='_blank'
-                rel='noreferrer'
-                className='font-medium text-primary underline-offset-4 hover:underline'
-              >
-                {Routes.downloadAndroidApp}
-              </a>
-              .
-            </li>
-            <li>Open the app and grant SMS permissions when prompted.</li>
-            <li>
-              In the app, register your device by scanning the QR code shown when you
-              generate an API key, or paste the key manually.
-            </li>
-            <li>
-              Your phone should appear under Registered Devices on this dashboard when
-              the link succeeds.
-            </li>
-          </ol>
-          <DialogFooter className='flex flex-col gap-2 sm:flex-row sm:justify-between'>
-            <Button variant='outline' size='sm' asChild>
-              <a href={Routes.quickstart} target='_blank' rel='noreferrer'>
-                View full guide
-                <ExternalLink className='ml-1 h-3 w-3' />
-              </a>
-            </Button>
-            <Button size='sm' onClick={() => setRegisterHelpOpen(false)}>
-              Close
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
diff --git a/web/app/(app)/dashboard/(components)/get-started/index.tsx b/web/app/(app)/dashboard/(components)/get-started/index.tsx
new file mode 100644
index 00000000..14fd0288
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started/index.tsx
@@ -0,0 +1,309 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import {
+  AlertCircle,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  PartyPopper,
+  RefreshCw,
+  Send,
+  Sparkles,
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+import GetStartedCardSkeleton from './skeleton'
+import StepActions from './step-actions'
+import { useOnboarding } from './use-onboarding'
+
+const MINIMIZED_KEY = 'textbee.onboarding.minimized'
+
+function encouragement(percent: number): string {
+  if (percent >= 100) return 'All steps complete!'
+  if (percent <= 33) return "You're about 3 minutes away from your first SMS"
+  if (percent <= 83) return 'Great progress, keep going'
+  return 'Almost there, one more step'
+}
+
+// Onboarding checklist card: the activation funnel. Fail-closed states, a
+// progress bar with momentum copy, one focused active step, self-serve device
+// registration, a completion celebration and a minimize-to-pill escape hatch.
+export default function GetStartedCard() {
+  const [minimized, setMinimized] = useState(false)
+  const {
+    status,
+    userData,
+    subLoading,
+    stepStates,
+    doneCount,
+    totalSteps,
+    progressPercent,
+    activeStepId,
+    canNavigateToStep,
+    selectStep,
+    updateOnboarding,
+    savingOnboarding,
+    retry,
+    dismissCelebration,
+  } = useOnboarding()
+
+  // localStorage is read after mount to stay SSR-safe.
+  useEffect(() => {
+    setMinimized(window.localStorage.getItem(MINIMIZED_KEY) === '1')
+  }, [])
+
+  const setMinimizedPersisted = (value: boolean) => {
+    setMinimized(value)
+    window.localStorage.setItem(MINIMIZED_KEY, value ? '1' : '0')
+  }
+
+  if (status === 'hidden') return null
+
+  if (status === 'loading') return <GetStartedCardSkeleton />
+
+  if (status === 'error') {
+    // Never render a checklist from missing data (it would show a verified
+    // user stuck on "Verify your email"); quiet retry row instead.
+    return (
+      <Card className='border-border'>
+        <CardContent className='flex flex-wrap items-center justify-between gap-3 py-4'>
+          <div className='flex items-center gap-2 text-sm text-muted-foreground'>
+            <AlertCircle className='h-4 w-4 shrink-0' />
+            Couldn't load your setup status.
+          </div>
+          <Button variant='outline' size='sm' onClick={retry}>
+            <RefreshCw className='h-3.5 w-3.5' />
+            Retry
+          </Button>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (status === 'celebrate') {
+    return (
+      <Card className='border-l-4 border-l-primary border border-primary/20 bg-linear-to-br from-primary/10 to-background animate-fade-in-up'>
+        <CardContent className='flex flex-col items-center gap-3 py-8 text-center'>
+          <div className='rounded-full bg-primary/15 p-3 animate-check-pop'>
+            <PartyPopper className='h-7 w-7 text-primary' />
+          </div>
+          <div>
+            <h3 className='text-lg font-bold'>You're all set!</h3>
+            <p className='mt-1 text-sm text-muted-foreground'>
+              Your SMS gateway is up and running.
+            </p>
+          </div>
+          <div className='flex flex-wrap items-center justify-center gap-2'>
+            <Button size='sm' asChild>
+              <Link href='/dashboard/messaging'>
+                <Send className='h-4 w-4' />
+                Send a message
+              </Link>
+            </Button>
+            <Button variant='ghost' size='sm' onClick={dismissCelebration}>
+              Dismiss
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  // Minimized: a slim resumable pill instead of the full card.
+  if (minimized) {
+    return (
+      <button
+        type='button'
+        onClick={() => setMinimizedPersisted(false)}
+        className='flex w-full items-center gap-3 rounded-xl border border-primary/20 bg-primary/5 px-4 py-2.5 text-left transition-colors hover:bg-primary/10'
+      >
+        <Sparkles className='h-4 w-4 shrink-0 text-primary' />
+        <span className='text-sm font-medium'>
+          Setup: {doneCount} of {totalSteps}
+        </span>
+        <span className='h-1.5 max-w-40 flex-1 overflow-hidden rounded-full bg-primary/15'>
+          <span
+            className='block h-full rounded-full bg-primary transition-[width] duration-300'
+            style={{ width: `${progressPercent}%` }}
+          />
+        </span>
+        <span className='ml-auto flex items-center gap-1 text-xs font-medium text-primary'>
+          Continue
+          <ChevronDown className='h-3.5 w-3.5' />
+        </span>
+      </button>
+    )
+  }
+
+  return (
+    <Card className='border-l-4 border-l-primary border border-primary/20 bg-linear-to-br from-primary/10 to-background shadow-sm animate-fade-in'>
+      <CardHeader className='pb-3'>
+        <div className='flex items-start justify-between gap-4'>
+          <div className='min-w-0'>
+            <h3 className='text-lg font-bold'>Get started</h3>
+            <p className='mt-0.5 text-sm text-muted-foreground'>
+              {encouragement(progressPercent)}
+            </p>
+          </div>
+          <div className='flex shrink-0 items-center gap-2'>
+            <span className='text-sm font-medium text-muted-foreground'>
+              {doneCount} of {totalSteps}
+            </span>
+            <Button
+              variant='ghost'
+              size='icon'
+              className='h-7 w-7'
+              onClick={() => setMinimizedPersisted(true)}
+              aria-label='Minimize setup checklist'
+            >
+              <ChevronUp className='h-4 w-4' />
+            </Button>
+          </div>
+        </div>
+        <div
+          className='mt-2 h-1.5 w-full overflow-hidden rounded-full bg-primary/15'
+          role='progressbar'
+          aria-valuenow={progressPercent}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-label='Setup progress'
+        >
+          <div
+            className='h-full rounded-full bg-primary transition-[width] duration-300'
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+      </CardHeader>
+      <CardContent className='pt-1'>
+        <div className='space-y-0'>
+          {stepStates.map((step, index) => {
+            const isActive = step.id === activeStepId
+            const isLast = index === stepStates.length - 1
+            const lineActive =
+              step.isDone &&
+              (isLast ||
+                stepStates[index + 1].isDone ||
+                stepStates[index + 1]?.id === activeStepId)
+            const canClickStep = canNavigateToStep(step.id)
+
+            return (
+              // No staggered entrance: this card polls every 10s, so a
+              // cascading per-row animation replays on any remount.
+              <div key={step.id} className='flex gap-3'>
+                <div className='flex w-9 shrink-0 flex-col items-center'>
+                  <div
+                    className={cn(
+                      'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold',
+                      step.isDone &&
+                        'bg-primary text-primary-foreground shadow-sm animate-check-pop',
+                      !step.isDone &&
+                        isActive &&
+                        'border-2 border-primary bg-background text-primary',
+                      !step.isDone &&
+                        !isActive &&
+                        'bg-muted text-muted-foreground'
+                    )}
+                  >
+                    {step.isDone ? (
+                      <Check className='h-4 w-4' strokeWidth={2.5} />
+                    ) : (
+                      index + 1
+                    )}
+                  </div>
+                  {!isLast && (
+                    <div
+                      className={cn(
+                        'mt-1 min-h-[16px] w-0.5 flex-1 rounded-full',
+                        lineActive ? 'bg-primary/50' : 'bg-border'
+                      )}
+                    />
+                  )}
+                </div>
+                <div
+                  className={cn(
+                    'min-w-0 flex-1',
+                    isActive ? 'pb-6' : 'pb-4',
+                    isLast && 'pb-2'
+                  )}
+                >
+                  <div className='flex flex-wrap items-center gap-2'>
+                    {canClickStep ? (
+                      <button
+                        type='button'
+                        className={cn(
+                          'text-left text-sm font-medium underline-offset-4 transition-colors hover:text-primary hover:underline',
+                          isActive || step.isDone
+                            ? 'text-foreground'
+                            : 'text-muted-foreground'
+                        )}
+                        onClick={() => {
+                          selectStep(step.id)
+                          updateOnboarding({ currentStepId: step.id })
+                        }}
+                      >
+                        {step.label}
+                      </button>
+                    ) : (
+                      <p
+                        className={cn(
+                          'text-sm font-medium',
+                          step.isDone || isActive
+                            ? 'text-foreground'
+                            : 'text-muted-foreground'
+                        )}
+                      >
+                        {step.label}
+                      </p>
+                    )}
+                    {!step.isDone && (
+                      <span className='rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground'>
+                        {step.timeEstimate}
+                      </span>
+                    )}
+                  </div>
+                  {/* Rendered whenever the step is selected, done or not. It
+                      used to require !isDone, so opening a completed step
+                      showed an empty row: someone who wanted to generate a
+                      replacement API key had no way back to that action. The
+                      tick stays; only the body comes back. */}
+                  {isActive && (
+                    <div className='animate-fade-in'>
+                      <p className='mt-1 text-sm text-muted-foreground'>
+                        {step.isDone
+                          ? step.doneDescription ?? step.description
+                          : step.description}
+                      </p>
+                      <div className='mt-3 flex flex-wrap items-center gap-2'>
+                        <StepActions
+                          stepId={step.id}
+                          isDone={step.isDone}
+                          isSaving={savingOnboarding}
+                          subLoading={subLoading}
+                          userEmail={userData?.email}
+                          onSkipStep={(id) => updateOnboarding({ skipStepId: id })}
+                        />
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </CardContent>
+      <CardFooter className='flex justify-end border-t border-border/60 pt-4'>
+        <Button
+          variant='ghost'
+          size='sm'
+          disabled={savingOnboarding}
+          onClick={() => updateOnboarding({ complete: true })}
+        >
+          Finish setup
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/get-started/inline-register-panel.tsx b/web/app/(app)/dashboard/(components)/get-started/inline-register-panel.tsx
new file mode 100644
index 00000000..30adc664
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started/inline-register-panel.tsx
@@ -0,0 +1,120 @@
+'use client'
+
+import { useState } from 'react'
+import QRCode from 'react-qr-code'
+import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
+import { toast } from '@/hooks/use-toast'
+import { useGenerateApiKey } from '@/lib/api'
+import { Routes } from '@/config/routes'
+import { Copy, QrCode } from 'lucide-react'
+import RegisterHelpDialog from './register-help-dialog'
+
+// Self-serve device registration inside the onboarding step: generate a key
+// and scan its QR right here, no dialog hop. The 10s onboarding poll flips the
+// step done the moment the device appears.
+export default function InlineRegisterPanel() {
+  const [helpOpen, setHelpOpen] = useState(false)
+
+  const {
+    mutate: generateApiKey,
+    isPending,
+    data: generated,
+  } = useGenerateApiKey()
+
+  const apiKey: string | undefined = generated?.data
+
+  const handleCopy = () => {
+    if (!apiKey) return
+    navigator.clipboard.writeText(apiKey)
+    toast({ title: 'API key copied to clipboard' })
+  }
+
+  return (
+    <div className='w-full rounded-lg border border-border bg-card p-4'>
+      <div className='flex flex-col gap-4 sm:flex-row'>
+        <ol className='flex-1 list-decimal space-y-2 pl-5 text-sm text-muted-foreground'>
+          <li>
+            Install the TextBee app on your Android phone from{' '}
+            <a
+              href={Routes.downloadAndroidApp}
+              target='_blank'
+              rel='noreferrer'
+              className='font-medium text-primary underline-offset-4 hover:underline'
+            >
+              textbee.dev/download
+            </a>
+            .
+          </li>
+          <li>Open the app and grant SMS permissions when prompted.</li>
+          <li>
+            {apiKey
+              ? 'Scan this QR code in the app (or paste the key manually).'
+              : 'Generate a key, then scan its QR code in the app.'}
+          </li>
+        </ol>
+
+        <div className='flex w-full flex-col items-center justify-center gap-3 sm:w-56'>
+          {apiKey ? (
+            <>
+              <div className='rounded-lg bg-white p-3 animate-fade-in'>
+                <QRCode value={apiKey} size={132} />
+              </div>
+              <div className='flex w-full items-center gap-2'>
+                <code className='min-w-0 flex-1 truncate rounded bg-muted px-2 py-1 font-mono text-xs'>
+                  {apiKey}
+                </code>
+                <Button
+                  variant='outline'
+                  size='icon'
+                  className='h-7 w-7 shrink-0'
+                  onClick={handleCopy}
+                  aria-label='Copy API key'
+                >
+                  <Copy className='h-3.5 w-3.5' />
+                </Button>
+              </div>
+              <p className='text-center text-[11px] text-muted-foreground'>
+                Save this key now; it won't be shown again.
+              </p>
+            </>
+          ) : (
+            <Button
+              size='sm'
+              onClick={() =>
+                generateApiKey(undefined, {
+                  onError: () =>
+                    toast({
+                      variant: 'destructive',
+                      title: 'Could not generate a key',
+                      description: 'Please try again.',
+                    }),
+                })
+              }
+              disabled={isPending}
+            >
+              {isPending ? (
+                <Spinner size='sm' className='mr-2' color='white' />
+              ) : (
+                <QrCode className='mr-2 h-4 w-4' />
+              )}
+              {isPending ? 'Generating…' : 'Generate key & show QR'}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className='mt-3 border-t border-border pt-2 text-right'>
+        <button
+          type='button'
+          onClick={() => setHelpOpen(true)}
+          className='text-xs text-muted-foreground underline-offset-4 hover:text-foreground hover:underline'
+        >
+          Need help?
+        </button>
+      </div>
+
+      <RegisterHelpDialog open={helpOpen} onOpenChange={setHelpOpen} />
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/get-started/onboarding-states.test.tsx b/web/app/(app)/dashboard/(components)/get-started/onboarding-states.test.tsx
new file mode 100644
index 00000000..eb2acc45
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started/onboarding-states.test.tsx
@@ -0,0 +1,129 @@
+import { describe, expect, it } from 'vitest'
+import { http, HttpResponse } from 'msw'
+import userEvent from '@testing-library/user-event'
+import { renderWithProviders, screen, waitFor } from '@/test/render'
+import { server } from '@/test/msw/server'
+import { API_BASE_URL, mockUser } from '@/test/fixtures'
+import GetStartedCard from './index'
+
+// Fail-closed policy: the checklist may only render from complete data. A
+// backend failure must never show a fresh user "stuck on Verify your email".
+
+describe('GetStartedCard states', () => {
+  it('renders the error card with retry when whoAmI fails (no checklist)', async () => {
+    server.use(
+      http.get(`${API_BASE_URL}/auth/who-am-i`, () =>
+        HttpResponse.json({ message: 'down' }, { status: 500 })
+      )
+    )
+
+    renderWithProviders(<GetStartedCard />)
+
+    await waitFor(() =>
+      expect(
+        screen.getByText(/Couldn't load your setup status/)
+      ).toBeInTheDocument()
+    )
+    expect(screen.getByRole('button', { name: /retry/i })).toBeInTheDocument()
+    // Never render steps computed from missing data.
+    expect(screen.queryByText('Verify your email')).not.toBeInTheDocument()
+  })
+
+  it('renders progress and the active step for a mid-funnel user', async () => {
+    server.use(
+      http.get(`${API_BASE_URL}/auth/who-am-i`, () =>
+        HttpResponse.json({
+          data: { ...mockUser, emailVerifiedAt: null, onboardingCompletedAt: null },
+        })
+      )
+    )
+
+    renderWithProviders(<GetStartedCard />)
+
+    // 5 of 6 done (only verify_email pending with the default fixtures).
+    await waitFor(() =>
+      expect(screen.getByText('5 of 6')).toBeInTheDocument()
+    )
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    // The active step is expanded with its inline resend action.
+    expect(screen.getByText('Verify your email')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: /resend email/i })
+    ).toBeInTheDocument()
+    // The user's email address is surfaced.
+    expect(screen.getByText(mockUser.email)).toBeInTheDocument()
+  })
+
+  it('shows full progress for an all-done user (before auto-complete lands)', async () => {
+    renderWithProviders(<GetStartedCard />)
+
+    await waitFor(() => expect(screen.getByText('6 of 6')).toBeInTheDocument())
+    expect(screen.getByText('All steps complete!')).toBeInTheDocument()
+  })
+
+  // Reopening a finished step used to render an empty row: the body was gated
+  // on the step NOT being done. Someone who wanted to replace a leaked or lost
+  // API key had no route back to that action from the checklist.
+  it('lets a completed API key step be reopened to generate another key', async () => {
+    const user = userEvent.setup()
+    renderWithProviders(<GetStartedCard />)
+
+    await waitFor(() => expect(screen.getByText('6 of 6')).toBeInTheDocument())
+
+    await user.click(screen.getByRole('button', { name: 'Generate an API key' }))
+
+    // The action is back, and says plainly that it makes an additional key.
+    expect(
+      await screen.findByRole('button', { name: /generate another api key/i })
+    ).toBeInTheDocument()
+    expect(screen.getByText(/You already have a key/)).toBeInTheDocument()
+  })
+
+  // The counterpart to the test above. Allowing a done step to stay selected
+  // must not break the original behaviour: if the step you are sitting on
+  // completes underneath you (the card polls), the selection should move on
+  // rather than stranding you on a finished step.
+  it('advances off a step that completes while you are sitting on it', async () => {
+    const user = userEvent.setup()
+    let apiKeyCount = 0
+    server.use(
+      http.get(`${API_BASE_URL}/gateway/stats`, () =>
+        HttpResponse.json({
+          data: {
+            totalSentSMSCount: 0,
+            totalReceivedSMSCount: 0,
+            totalDeviceCount: 0,
+            totalApiKeyCount: apiKeyCount,
+          },
+        })
+      )
+    )
+
+    renderWithProviders(<GetStartedCard />)
+
+    // Done with these stats: verify_email (fixture user is verified) and
+    // choose_plan (fixture subscription is a paid plan).
+    await waitFor(() => expect(screen.getByText('2 of 6')).toBeInTheDocument())
+
+    await user.click(screen.getByRole('button', { name: 'Generate an API key' }))
+    expect(
+      await screen.findByRole('button', { name: /^generate api key$/i })
+    ).toBeInTheDocument()
+
+    // The key now exists; the next poll completes the step under the user.
+    apiKeyCount = 3
+
+    await waitFor(
+      () => expect(screen.getByText('3 of 6')).toBeInTheDocument(),
+      { timeout: 15000 }
+    )
+
+    // The selection moved on rather than stranding the user on a finished
+    // step, so that step's action is no longer the one being offered.
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('button', { name: /^generate api key$/i })
+      ).not.toBeInTheDocument()
+    )
+  }, 20000)
+})
diff --git a/web/app/(app)/dashboard/(components)/get-started/plan-picker.test.tsx b/web/app/(app)/dashboard/(components)/get-started/plan-picker.test.tsx
new file mode 100644
index 00000000..c3a4aa3a
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started/plan-picker.test.tsx
@@ -0,0 +1,94 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import PlanPicker from './plan-picker'
+
+const useSubscription = vi.fn()
+
+vi.mock('@/lib/api', () => ({
+  useSubscription: () => useSubscription(),
+}))
+
+beforeEach(() => {
+  useSubscription.mockReturnValue({ data: { plan: { name: 'Free' } } })
+})
+
+describe('PlanPicker', () => {
+  const renderPicker = (
+    props?: Partial<React.ComponentProps<typeof PlanPicker>>
+  ) =>
+    render(
+      <PlanPicker isLoading={false} isSaving={false} onSkip={() => {}} {...props} />
+    )
+
+  // The picker hardcoded Free and Pro inline, so Scale was invisible here no
+  // matter what the pricing page offered.
+  it('offers every self-serve tier, including Scale', () => {
+    renderPicker()
+
+    // By heading, since "Free" is also the Free tier's price.
+    expect(
+      screen.getAllByRole('heading').map((h) => h.textContent)
+    ).toEqual(['Free', 'Pro', 'Scale'])
+  })
+
+  it('shows the marketing prices', () => {
+    renderPicker()
+
+    expect(screen.getByText('$9.99')).toBeInTheDocument()
+    expect(screen.getByText('$29.99')).toBeInTheDocument()
+  })
+
+  it('links each paid tier at its own checkout route', () => {
+    renderPicker()
+
+    expect(screen.getByRole('link', { name: /Upgrade to Pro/ })).toHaveAttribute(
+      'href',
+      '/checkout/pro'
+    )
+    expect(
+      screen.getByRole('link', { name: /Upgrade to Scale/ })
+    ).toHaveAttribute('href', '/checkout/scale')
+  })
+
+  it('marks the subscribed tier as current and does not sell it again', () => {
+    useSubscription.mockReturnValue({ data: { plan: { name: 'Pro' } } })
+    renderPicker()
+
+    expect(screen.getByText('Current')).toBeInTheDocument()
+    expect(
+      screen.queryByRole('link', { name: /Upgrade to Pro/ })
+    ).not.toBeInTheDocument()
+    // Other tiers stay available.
+    expect(
+      screen.getByRole('link', { name: /Upgrade to Scale/ })
+    ).toBeInTheDocument()
+  })
+
+  it('matches the current plan regardless of casing or padding', () => {
+    useSubscription.mockReturnValue({ data: { plan: { name: '  SCALE ' } } })
+    renderPicker()
+
+    expect(screen.getByText('Current')).toBeInTheDocument()
+    expect(
+      screen.queryByRole('link', { name: /Upgrade to Scale/ })
+    ).not.toBeInTheDocument()
+  })
+
+  it('renders without a subscription rather than blanking the step', () => {
+    useSubscription.mockReturnValue({ data: undefined })
+    renderPicker()
+
+    expect(screen.getByRole('heading', { name: 'Scale' })).toBeInTheDocument()
+    expect(screen.queryByText('Current')).not.toBeInTheDocument()
+  })
+
+  it('hides Skip once the step is done', () => {
+    renderPicker({ isDone: true })
+    expect(screen.queryByText(/Skip for now/)).not.toBeInTheDocument()
+  })
+
+  it('offers Skip while the step is unfinished', () => {
+    renderPicker({ isDone: false })
+    expect(screen.getByText(/Skip for now/)).toBeInTheDocument()
+  })
+})
diff --git a/web/app/(app)/dashboard/(components)/get-started/plan-picker.tsx b/web/app/(app)/dashboard/(components)/get-started/plan-picker.tsx
new file mode 100644
index 00000000..6528e921
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started/plan-picker.tsx
@@ -0,0 +1,196 @@
+'use client'
+
+import Link from 'next/link'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Check, ExternalLink } from 'lucide-react'
+import { Routes } from '@/config/routes'
+import { useSubscription } from '@/lib/api'
+import { PLAN_TIERS, formatPlanPrice, type PlanTier } from '@/lib/plans'
+import { cn } from '@/lib/utils'
+
+type PlanPickerProps = {
+  isLoading: boolean
+  isSaving: boolean
+  isDone?: boolean
+  onSkip: () => void
+}
+
+function PlanCard({
+  tier,
+  isCurrent,
+  isSaving,
+  onSkip,
+}: {
+  tier: PlanTier
+  isCurrent: boolean
+  isSaving: boolean
+  onSkip: () => void
+}) {
+  const free = tier.monthlyPrice <= 0
+  const highlight = tier.isPopular && !isCurrent
+
+  return (
+    <Card
+      className={cn(
+        'relative flex flex-col',
+        highlight
+          ? 'border-2 border-primary shadow-md'
+          : 'border-border shadow-none',
+        isCurrent && 'border-2 border-primary/40'
+      )}
+    >
+      {(highlight || isCurrent) && (
+        <Badge
+          variant={isCurrent ? 'secondary' : 'default'}
+          className='absolute right-3 top-3 text-[10px]'
+        >
+          {isCurrent ? 'Current' : 'Most popular'}
+        </Badge>
+      )}
+
+      <CardHeader className='pb-2 pr-24 pt-4'>
+        <CardTitle className='text-base'>{tier.name}</CardTitle>
+        <CardDescription>
+          <span className='text-foreground'>
+            {formatPlanPrice(tier.monthlyPrice)}
+          </span>
+          {' / month'}
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className='flex-1 pb-4'>
+        <ul className='space-y-1.5 text-sm'>
+          {tier.features.map((feature) => (
+            <li
+              key={feature}
+              className={cn(
+                'flex gap-2',
+                free ? 'text-muted-foreground' : 'text-foreground'
+              )}
+            >
+              <Check
+                className={cn(
+                  'mt-0.5 h-4 w-4 shrink-0',
+                  free ? 'text-muted-foreground' : 'text-primary'
+                )}
+                aria-hidden
+              />
+              {feature}
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+
+      <CardFooter className='pb-4 pt-0'>
+        {isCurrent ? (
+          <Button variant='outline' className='w-full' disabled>
+            Your current plan
+          </Button>
+        ) : free ? (
+          <Button
+            variant='outline'
+            className='w-full'
+            disabled={isSaving}
+            onClick={onSkip}
+          >
+            Continue with Free
+          </Button>
+        ) : (
+          <Button className='w-full' asChild>
+            <Link href={`/checkout/${tier.id}`}>Upgrade to {tier.name}</Link>
+          </Button>
+        )}
+      </CardFooter>
+    </Card>
+  )
+}
+
+/**
+ * Plan chooser for the "Choose your plan" onboarding step.
+ *
+ * Tiers come from lib/plans, which mirrors the marketing pricing page. The
+ * previous version hardcoded Free and Pro inline, so Scale never appeared
+ * here at all.
+ *
+ * Custom is intentionally left out: it is a talk-to-us tier with no
+ * self-serve checkout, and "Compare all plans" already links to it.
+ */
+export default function PlanPicker({
+  isLoading,
+  isSaving,
+  isDone = false,
+  onSkip,
+}: PlanPickerProps) {
+  const { data: subscription } = useSubscription()
+
+  // Only the current-plan badge needs the subscription, so this is the one
+  // thing worth waiting on.
+  if (isLoading) {
+    return (
+      <div className='grid w-full gap-3 sm:grid-cols-2 lg:grid-cols-3'>
+        <Skeleton className='h-64 rounded-lg' />
+        <Skeleton className='h-64 rounded-lg' />
+        <Skeleton className='h-64 rounded-lg' />
+      </div>
+    )
+  }
+
+  const currentPlan = subscription?.plan?.name?.trim().toLowerCase()
+
+  return (
+    <div className='w-full space-y-3'>
+      {/* Stacked on a phone, two up on a tablet, all three from lg. */}
+      <div className='grid w-full gap-3 sm:grid-cols-2 lg:grid-cols-3'>
+        {PLAN_TIERS.map((tier) => (
+          <PlanCard
+            key={tier.id}
+            tier={tier}
+            isCurrent={currentPlan === tier.id}
+            isSaving={isSaving}
+            onSkip={onSkip}
+          />
+        ))}
+      </div>
+
+      <div className='flex flex-wrap items-center gap-4'>
+        <Button
+          variant='link'
+          size='sm'
+          className='h-auto px-0 text-xs text-muted-foreground'
+          asChild
+        >
+          <a
+            href={`${Routes.landingPage}/pricing`}
+            target='_blank'
+            rel='noreferrer'
+          >
+            Compare all plans
+            <ExternalLink className='ml-1 h-3 w-3' />
+          </a>
+        </Button>
+        {/* Skipping a step that is already settled would mean nothing. */}
+        {!isDone && (
+          <Button
+            variant='link'
+            size='sm'
+            className='h-auto px-0 text-muted-foreground'
+            disabled={isSaving}
+            onClick={onSkip}
+          >
+            Skip for now →
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/get-started/register-help-dialog.tsx b/web/app/(app)/dashboard/(components)/get-started/register-help-dialog.tsx
new file mode 100644
index 00000000..3bea786e
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started/register-help-dialog.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { ExternalLink } from 'lucide-react'
+import { Routes } from '@/config/routes'
+
+type RegisterHelpDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+// Step-by-step instructions for linking a phone to the account.
+export default function RegisterHelpDialog({
+  open,
+  onOpenChange,
+}: RegisterHelpDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className='sm:max-w-md'>
+        <DialogHeader>
+          <DialogTitle>Register your device</DialogTitle>
+          <DialogDescription>
+            Follow these steps to link your phone to your account.
+          </DialogDescription>
+        </DialogHeader>
+        <ol className='mt-2 list-decimal space-y-3 pl-5 text-sm text-muted-foreground'>
+          <li>Generate an API key in the step above (if you have not already).</li>
+          <li>
+            Download the TextBee Android app from{' '}
+            <a
+              href={Routes.downloadAndroidApp}
+              target='_blank'
+              rel='noreferrer'
+              className='font-medium text-primary underline-offset-4 hover:underline'
+            >
+              {Routes.downloadAndroidApp}
+            </a>
+            .
+          </li>
+          <li>Open the app and grant SMS permissions when prompted.</li>
+          <li>
+            In the app, register your device by scanning the QR code shown when
+            you generate an API key, or paste the key manually.
+          </li>
+          <li>
+            Your phone should appear under Registered Devices on this dashboard
+            when the link succeeds.
+          </li>
+        </ol>
+        <DialogFooter className='flex flex-col gap-2 sm:flex-row sm:justify-between'>
+          <Button variant='outline' size='sm' asChild>
+            <a href={Routes.quickstart} target='_blank' rel='noreferrer'>
+              View full guide
+              <ExternalLink className='ml-1 h-3 w-3' />
+            </a>
+          </Button>
+          <Button size='sm' onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/get-started/skeleton.tsx b/web/app/(app)/dashboard/(components)/get-started/skeleton.tsx
new file mode 100644
index 00000000..4f9328bd
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started/skeleton.tsx
@@ -0,0 +1,19 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+
+// Compact loading placeholder (fixed low height): the checklist renders only
+// once real data arrives, so this must not dominate the page like the old
+// full-height 6-row skeleton did.
+export default function GetStartedCardSkeleton() {
+  return (
+    <Card className='border-l-4 border-l-primary/40 border border-primary/10'>
+      <CardContent className='flex h-[90px] flex-col justify-center gap-3 py-4'>
+        <div className='flex items-center justify-between'>
+          <Skeleton className='h-4 w-36' />
+          <Skeleton className='h-4 w-14' />
+        </div>
+        <Skeleton className='h-1.5 w-full rounded-full' />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/get-started/step-actions.tsx b/web/app/(app)/dashboard/(components)/get-started/step-actions.tsx
new file mode 100644
index 00000000..fecb58ad
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started/step-actions.tsx
@@ -0,0 +1,152 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useMutation } from '@tanstack/react-query'
+import { Button } from '@/components/ui/button'
+import { Download, MailCheck, Send } from 'lucide-react'
+import { toast } from '@/hooks/use-toast'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { ApiEndpoints } from '@/config/api'
+import { Routes } from '@/config/routes'
+import GenerateApiKey from '../api-keys/generate-api-key'
+import PlanPicker from './plan-picker'
+import InlineRegisterPanel from './inline-register-panel'
+
+const RESEND_COOLDOWN_SECONDS = 60
+
+// Inline "we sent a link to x@y.com" + resend with cooldown, so users don't
+// have to leave the checklist to nudge the verification email.
+function VerifyEmailActions({ email }: { email?: string }) {
+  const [cooldown, setCooldown] = useState(0)
+
+  useEffect(() => {
+    if (cooldown <= 0) return
+    const t = setInterval(() => setCooldown((c) => c - 1), 1000)
+    return () => clearInterval(t)
+  }, [cooldown])
+
+  const { mutate: resend, isPending } = useMutation({
+    mutationFn: () =>
+      httpBrowserClient.post(ApiEndpoints.auth.sendEmailVerificationEmail()),
+    onSuccess: () => {
+      setCooldown(RESEND_COOLDOWN_SECONDS)
+      toast({ title: 'Verification email sent', description: email })
+    },
+    onError: () => {
+      toast({
+        variant: 'destructive',
+        title: 'Could not send the email',
+        description: 'Please try again in a moment.',
+      })
+    },
+  })
+
+  return (
+    <div className='w-full space-y-2'>
+      {email && (
+        <p className='text-xs text-muted-foreground'>
+          We sent a verification link to{' '}
+          <span className='font-medium text-foreground'>{email}</span>. Check
+          your inbox (and spam).
+        </p>
+      )}
+      <div className='flex flex-wrap items-center gap-2'>
+        <Button size='sm' asChild>
+          <Link href={Routes.verifyEmail}>
+            <MailCheck className='h-4 w-4' />
+            Enter verification code
+          </Link>
+        </Button>
+        <Button
+          variant='outline'
+          size='sm'
+          disabled={isPending || cooldown > 0}
+          onClick={() => resend()}
+        >
+          {cooldown > 0 ? `Resend in ${cooldown}s` : 'Resend email'}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+type StepActionsProps = {
+  stepId: string
+  // A completed step can still be reopened. Its actions stay available (you
+  // may want a second device or a replacement key), but anything that only
+  // makes sense for an unfinished step, like Skip, is dropped.
+  isDone?: boolean
+  isSaving: boolean
+  subLoading: boolean
+  userEmail?: string
+  onSkipStep: (stepId: string) => void
+}
+
+// Call-to-action block for the currently selected onboarding step.
+export default function StepActions({
+  stepId,
+  isDone = false,
+  isSaving,
+  subLoading,
+  userEmail,
+  onSkipStep,
+}: StepActionsProps) {
+  switch (stepId) {
+    case 'verify_email':
+      return <VerifyEmailActions email={userEmail} />
+    case 'download_app':
+      return (
+        <>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => window.open(Routes.downloadAndroidApp, '_blank', 'noopener,noreferrer')}
+          >
+            <Download className='h-4 w-4' />
+            Download APK
+          </Button>
+          {!isDone && (
+            <Button
+              variant='link'
+              size='sm'
+              className='h-auto px-2 text-muted-foreground'
+              disabled={isSaving}
+              onClick={() => onSkipStep('download_app')}
+            >
+              Skip →
+            </Button>
+          )}
+        </>
+      )
+    case 'api_key':
+      return (
+        <GenerateApiKey
+          triggerLabel={isDone ? 'Generate another API key' : 'Generate API Key'}
+          triggerVariant={isDone ? 'outline' : 'default'}
+        />
+      )
+    case 'register_device':
+      return <InlineRegisterPanel />
+    case 'choose_plan':
+      return (
+        <PlanPicker
+          isLoading={subLoading}
+          isSaving={isSaving}
+          isDone={isDone}
+          onSkip={() => onSkipStep('choose_plan')}
+        />
+      )
+    case 'first_message':
+      return (
+        <Button size='sm' asChild>
+          <Link href='/dashboard/messaging'>
+            <Send className='h-4 w-4' />
+            Go to messaging
+          </Link>
+        </Button>
+      )
+    default:
+      return null
+  }
+}
diff --git a/web/app/(app)/dashboard/(components)/get-started/steps.test.ts b/web/app/(app)/dashboard/(components)/get-started/steps.test.ts
new file mode 100644
index 00000000..2c100f56
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started/steps.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest'
+import { STEPS, computeStepStates } from './steps'
+
+const byId = (id: string) => STEPS.find((s) => s.id === id)!
+
+describe('onboarding steps', () => {
+  it('verify_email is done only when the user has emailVerifiedAt', () => {
+    expect(byId('verify_email').checkDone({}, undefined, null, [])).toBe(false)
+    expect(
+      byId('verify_email').checkDone(
+        { emailVerifiedAt: '2026-01-01' },
+        undefined,
+        null,
+        []
+      )
+    ).toBe(true)
+  })
+
+  it('download_app is done with a device or when skipped', () => {
+    const step = byId('download_app')
+    expect(step.checkDone({}, { totalDeviceCount: 0 }, null, [])).toBe(false)
+    expect(step.checkDone({}, { totalDeviceCount: 1 }, null, [])).toBe(true)
+    expect(step.checkDone({}, { totalDeviceCount: 0 }, null, ['download_app'])).toBe(
+      true
+    )
+  })
+
+  it('choose_plan is done on a paid plan or when skipped', () => {
+    const step = byId('choose_plan')
+    expect(step.checkDone({}, undefined, { plan: { name: 'Free' } }, [])).toBe(false)
+    expect(step.checkDone({}, undefined, { plan: { name: 'Pro' } }, [])).toBe(true)
+    expect(step.checkDone({}, undefined, null, ['choose_plan'])).toBe(true)
+  })
+
+  it('api_key / register_device / first_message follow the stats counters', () => {
+    expect(byId('api_key').checkDone({}, { totalApiKeyCount: 1 }, null, [])).toBe(true)
+    expect(
+      byId('register_device').checkDone({}, { totalDeviceCount: 1 }, null, [])
+    ).toBe(true)
+    expect(
+      byId('first_message').checkDone({}, { totalSentSMSCount: 1 }, null, [])
+    ).toBe(true)
+  })
+
+  it('computeStepStates marks a fully-set-up paid user as all done', () => {
+    const states = computeStepStates(
+      { emailVerifiedAt: '2026-01-01' },
+      { totalApiKeyCount: 2, totalDeviceCount: 1, totalSentSMSCount: 10 },
+      { plan: { name: 'Pro' } },
+      []
+    )
+    expect(states.every((s) => s.isDone)).toBe(true)
+  })
+
+  it('computeStepStates marks a brand-new user as nothing done', () => {
+    const states = computeStepStates({}, {}, null, [])
+    expect(states.some((s) => s.isDone)).toBe(false)
+  })
+})
diff --git a/web/app/(app)/dashboard/(components)/get-started/steps.ts b/web/app/(app)/dashboard/(components)/get-started/steps.ts
new file mode 100644
index 00000000..7a270e5c
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started/steps.ts
@@ -0,0 +1,113 @@
+// Pure onboarding step definitions and completion logic for the Get Started
+// card. Kept free of React so the checkDone rules are unit-testable.
+
+export type StatsShape = {
+  totalApiKeyCount?: number
+  totalDeviceCount?: number
+  totalSentSMSCount?: number
+}
+
+export type UserShape = {
+  email?: string
+  emailVerifiedAt?: string | Date | null
+  createdAt?: string | Date
+  onboarding?: {
+    completedAt?: string | Date | null
+    currentStepId?: string
+    skippedStepIds?: string[]
+  }
+}
+
+export type SubShape = { plan?: { name?: string } } | null
+
+export type StepDef = {
+  id: string
+  label: string
+  description: string
+  // Shown instead of `description` when the step is already done and the user
+  // has reopened it, so the copy does not tell them to do what they have done.
+  doneDescription?: string
+  optional: boolean
+  // Shown as a small chip; sets expectations and reduces abandonment.
+  timeEstimate: string
+  checkDone: (
+    user: UserShape | undefined,
+    stats: StatsShape | undefined,
+    sub: SubShape,
+    skipped: string[]
+  ) => boolean
+}
+
+export const STEPS: StepDef[] = [
+  {
+    id: 'verify_email',
+    label: 'Verify your email',
+    description: 'Required before you can send SMS.',
+    optional: false,
+    timeEstimate: '~1 min',
+    checkDone: (user) => !!user?.emailVerifiedAt,
+  },
+  {
+    id: 'download_app',
+    label: 'Download the Android app',
+    description: 'Install TextBee on the Android phone that will send your SMS.',
+    doneDescription: 'Installed. Download it again if you are setting up another phone.',
+    optional: true,
+    timeEstimate: '~1 min',
+    checkDone: (_u, stats, _s, skipped) =>
+      (stats?.totalDeviceCount ?? 0) > 0 || skipped.includes('download_app'),
+  },
+  {
+    id: 'api_key',
+    label: 'Generate an API key',
+    description: 'Your key connects the app and authenticates API calls.',
+    doneDescription:
+      'You already have a key. Generate another if you need to replace it or set up a second device.',
+    optional: false,
+    timeEstimate: '~10 sec',
+    checkDone: (_u, stats) => (stats?.totalApiKeyCount ?? 0) > 0,
+  },
+  {
+    id: 'register_device',
+    label: 'Register your device',
+    description: 'Turn your phone into your SMS gateway: scan the QR code below with the TextBee app.',
+    doneDescription: 'Device registered. Register another the same way.',
+    optional: false,
+    timeEstimate: '~1 min',
+    checkDone: (_u, stats) => (stats?.totalDeviceCount ?? 0) > 0,
+  },
+  {
+    id: 'choose_plan',
+    label: 'Choose your plan',
+    description: 'Pick the plan that fits your usage.',
+    doneDescription: 'Your plan is set. Change it any time.',
+    optional: true,
+    timeEstimate: '~30 sec',
+    checkDone: (_u, _stats, sub, skipped) =>
+      (sub?.plan?.name && sub.plan.name.toLowerCase() !== 'free') ||
+      skipped.includes('choose_plan'),
+  },
+  {
+    id: 'first_message',
+    label: 'Send your first message',
+    description: 'The moment it all works: send an SMS from the dashboard.',
+    doneDescription: 'You have sent your first message. Send another any time.',
+    optional: false,
+    timeEstimate: '~30 sec',
+    checkDone: (_u, stats) => (stats?.totalSentSMSCount ?? 0) > 0,
+  },
+]
+
+export type StepState = StepDef & { isDone: boolean }
+
+export function computeStepStates(
+  user: UserShape | undefined,
+  stats: StatsShape | undefined,
+  sub: SubShape,
+  skipped: string[]
+): StepState[] {
+  return STEPS.map((s) => ({
+    ...s,
+    isDone: s.checkDone(user, stats, sub, skipped),
+  }))
+}
diff --git a/web/app/(app)/dashboard/(components)/get-started/use-onboarding.ts b/web/app/(app)/dashboard/(components)/get-started/use-onboarding.ts
new file mode 100644
index 00000000..d260ab33
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started/use-onboarding.ts
@@ -0,0 +1,254 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  useCurrentUser,
+  useGatewayStats,
+  useSubscription,
+  useUpdateOnboarding,
+} from '@/lib/api'
+import {
+  STEPS,
+  computeStepStates,
+  type StatsShape,
+  type SubShape,
+  type UserShape,
+} from './steps'
+
+// The card must never mislead: it renders the checklist only when all three
+// queries have succeeded ('ready'). Backend down -> 'error' (quiet retry row),
+// never a checklist computed from missing data that would show a verified
+// user stuck on "Verify your email".
+export type OnboardingStatus =
+  | 'loading'
+  | 'error'
+  | 'ready'
+  | 'hidden'
+  | 'celebrate'
+
+// Data + derived state for the onboarding card. Keys come from the shared
+// queryKeys factory so this hook shares caches and invalidations with the
+// other dashboard components. They were previously written out by hand, and
+// the user key was spelled ['whoAmI'] here while the typed useCurrentUser
+// hook used ['currentUser'], so the same endpoint was cached twice and
+// invalidating either one left the other stale.
+export function useOnboarding() {
+  const autoCompletedRef = useRef(false)
+  const legacyAutoCompletedRef = useRef(false)
+  const [selectedStepId, setSelectedStepId] = useState<string | null>(null)
+  // Set when completedAt flips during this session: show the success state
+  // once instead of unmounting the card mid-glance.
+  const [justCompleted, setJustCompleted] = useState(false)
+  const [celebrationDismissed, setCelebrationDismissed] = useState(false)
+  const prevCompletedAtRef = useRef<string | Date | null | undefined>(undefined)
+
+  // Polls until onboarding is finished, then stops. The three queries are the
+  // shared typed hooks, so the polling here also refreshes what the rest of
+  // the dashboard is reading rather than maintaining a parallel copy.
+  const userQuery = useCurrentUser({
+    refetchInterval: (query) =>
+      query.state.data?.onboarding?.completedAt ? false : 10_000,
+  })
+  const userData = userQuery.data
+
+  const statsQuery = useGatewayStats({
+    refetchInterval: () => (userData?.onboarding?.completedAt ? false : 10_000),
+  })
+  const stats = statsQuery.data
+
+  const subQuery = useSubscription({
+    refetchInterval: () => (userData?.onboarding?.completedAt ? false : 10_000),
+  })
+  const currentSubscription = subQuery.data
+  const subLoading = subQuery.isLoading
+
+  const { mutate: updateOnboarding, isPending: savingOnboarding } =
+    useUpdateOnboarding()
+
+  // Detect the incomplete -> complete transition for the celebration state.
+  useEffect(() => {
+    const completedAt = userData?.onboarding?.completedAt ?? null
+    const prev = prevCompletedAtRef.current
+    if (prev !== undefined && !prev && completedAt) {
+      setJustCompleted(true)
+    }
+    if (userData !== undefined) {
+      prevCompletedAtRef.current = completedAt
+    }
+  }, [userData])
+
+  const skippedIds = useMemo(
+    () => userData?.onboarding?.skippedStepIds ?? [],
+    [userData?.onboarding?.skippedStepIds]
+  )
+
+  const stepStates = useMemo(
+    () =>
+      computeStepStates(userData, stats, currentSubscription ?? null, skippedIds),
+    [userData, stats, currentSubscription, skippedIds]
+  )
+
+  const doneCount = stepStates.filter((s) => s.isDone).length
+  const progressPercent = Math.round((doneCount / STEPS.length) * 100)
+
+  const isFreePlan =
+    !currentSubscription?.plan?.name ||
+    currentSubscription.plan.name.toLowerCase() === 'free'
+
+  const canNavigateToStep = useCallback(
+    (stepId: string) => {
+      if (stepId === 'verify_email') return false
+      if (stepId === 'choose_plan') return isFreePlan
+      return true
+    },
+    [isFreePlan]
+  )
+
+  // Restore the persisted current step once, when navigable.
+  useEffect(() => {
+    if (selectedStepId) return
+    const persisted = userData?.onboarding?.currentStepId
+    if (persisted && stepStates.some((s) => s.id === persisted)) {
+      if (!canNavigateToStep(persisted)) return
+      setSelectedStepId(persisted)
+    }
+  }, [selectedStepId, userData?.onboarding?.currentStepId, stepStates, canNavigateToStep])
+
+  const activeStepId = useMemo(() => {
+    const firstIncomplete = stepStates.find((s) => !s.isDone)?.id
+    const candidate =
+      selectedStepId && stepStates.some((s) => s.id === selectedStepId)
+        ? selectedStepId
+        : userData?.onboarding?.currentStepId
+
+    if (candidate && stepStates.some((s) => s.id === candidate)) {
+      if (!canNavigateToStep(candidate)) {
+        return firstIncomplete ?? STEPS[STEPS.length - 1].id
+      }
+      return candidate
+    }
+
+    return firstIncomplete ?? STEPS[STEPS.length - 1].id
+  }, [stepStates, userData?.onboarding?.currentStepId, selectedStepId, canNavigateToStep])
+
+  // When the step you are sitting on gets completed (e.g. the poll detected a
+  // registered device), advance the selection to the next incomplete one.
+  //
+  // Only on that transition, though. This used to clear the selection whenever
+  // the selected step was done, which also meant deliberately opening an
+  // already-completed step deselected it on the very next render, so it looked
+  // like clicking it did nothing at all.
+  const selectionRef = useRef<{ id: string; isDone: boolean } | null>(null)
+  useEffect(() => {
+    if (!selectedStepId) {
+      selectionRef.current = null
+      return
+    }
+    const selected = stepStates.find((s) => s.id === selectedStepId)
+    if (!selected) return
+
+    const previous = selectionRef.current
+    selectionRef.current = { id: selectedStepId, isDone: selected.isDone }
+
+    const completedWhileSelected =
+      previous?.id === selectedStepId && !previous.isDone && selected.isDone
+    if (completedWhileSelected) {
+      setSelectedStepId(null)
+    }
+  }, [selectedStepId, stepStates])
+
+  // Auto-complete once every step reports done.
+  useEffect(() => {
+    if (!userData || stats === undefined || subLoading || autoCompletedRef.current) {
+      return
+    }
+    if (userData.onboarding?.completedAt) return
+
+    const allStepsDone = STEPS.every((step) =>
+      step.checkDone(userData, stats, currentSubscription ?? null, skippedIds)
+    )
+
+    if (allStepsDone) {
+      autoCompletedRef.current = true
+      updateOnboarding({ complete: true })
+    }
+  }, [userData, stats, currentSubscription, skippedIds, subLoading, updateOnboarding])
+
+  // Legacy accounts (created before 2026) that clearly already use the product
+  // get auto-completed without walking the checklist.
+  useEffect(() => {
+    if (!userData || stats === undefined || subLoading) return
+    if (legacyAutoCompletedRef.current) return
+    if (userData.onboarding?.completedAt) return
+
+    const createdAt = userData.createdAt ? new Date(userData.createdAt) : null
+    if (!createdAt || Number.isNaN(createdAt.getTime())) return
+
+    const cutoff = new Date('2026-01-01T00:00:00.000Z')
+    if (createdAt >= cutoff) return
+
+    const hasDevice = (stats.totalDeviceCount ?? 0) >= 1
+    const hasApiKey = (stats.totalApiKeyCount ?? 0) >= 1
+    const hasSent = (stats.totalSentSMSCount ?? 0) >= 1
+    if (!hasDevice || !hasApiKey || !hasSent) return
+
+    legacyAutoCompletedRef.current = true
+    updateOnboarding({ complete: true })
+  }, [userData, stats, subLoading, updateOnboarding])
+
+  const retry = useCallback(() => {
+    void userQuery.refetch()
+    void statsQuery.refetch()
+    void subQuery.refetch()
+  }, [userQuery, statsQuery, subQuery])
+
+  // Fail-closed status machine. Note: react-query keeps last-good data on
+  // background refetch failures, so an established card never flips to the
+  // error state from a flaky poll (data stays defined).
+  const status: OnboardingStatus = useMemo(() => {
+    const completedAt = userData?.onboarding?.completedAt
+    if (justCompleted && !celebrationDismissed) return 'celebrate'
+    if (completedAt) return 'hidden'
+    if (
+      (userQuery.isError && userData === undefined) ||
+      (statsQuery.isError && stats === undefined) ||
+      (subQuery.isError && currentSubscription === undefined)
+    ) {
+      return 'error'
+    }
+    if (
+      userData === undefined ||
+      stats === undefined ||
+      currentSubscription === undefined
+    ) {
+      return 'loading'
+    }
+    return 'ready'
+  }, [
+    justCompleted,
+    celebrationDismissed,
+    userData,
+    stats,
+    currentSubscription,
+    userQuery.isError,
+    statsQuery.isError,
+    subQuery.isError,
+  ])
+
+  return {
+    status,
+    userData,
+    subLoading,
+    stepStates,
+    doneCount,
+    totalSteps: STEPS.length,
+    progressPercent,
+    activeStepId,
+    canNavigateToStep,
+    selectStep: setSelectedStepId,
+    updateOnboarding,
+    savingOnboarding,
+    retry,
+    dismissCelebration: () => setCelebrationDismissed(true),
+  }
+}
diff --git a/web/app/(app)/dashboard/(components)/main-dashboard.tsx b/web/app/(app)/dashboard/(components)/main-dashboard.tsx
deleted file mode 100644
index b613b3f2..00000000
--- a/web/app/(app)/dashboard/(components)/main-dashboard.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client'
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-
-import { MessageSquare } from 'lucide-react'
-import { useState } from 'react'
-import Overview from './overview'
-import DeviceList from './device-list'
-import ApiKeys from './api-keys'
-import Messaging from './messaging'
-import WebhooksSection from './webhooks/webhooks-section'
-
-export default function DashboardOverview() {
-
-  const [currentTab, setCurrentTab] = useState('overview')
-
-  const handleTabChange = (value: string) => {
-    setCurrentTab(value)
-  }
-
-  return (
-    <Tabs
-      value={currentTab}
-      onValueChange={handleTabChange}
-      className='space-y-4'
-    >
-      <TabsList className='sticky top-[4rem] z-10 flex mx-auto max-w-md border-[1px] my-6 bg-brand-500 text-white '>
-        <TabsTrigger value='overview' className='flex-1'>
-          Overview
-        </TabsTrigger>
-        <TabsTrigger value='messaging' className='relative flex-1'>
-          <MessageSquare className='ml-2 h-4 w-4' />
-          <span className='mx-2'>Messaging</span>
-        </TabsTrigger>
-      </TabsList>
-
-      <TabsContent value='overview' className='space-y-4'>
-        <Overview />
-
-        <div className='grid gap-4 md:grid-cols-2'>
-          <DeviceList />
-          <ApiKeys />
-        </div>
-
-        <WebhooksSection />
-      </TabsContent>
-
-      <TabsContent value='messaging'>
-        <Messaging />
-      </TabsContent>
-    </Tabs>
-  )
-}
diff --git a/web/app/(app)/dashboard/(components)/message-history.tsx b/web/app/(app)/dashboard/(components)/message-history.tsx
deleted file mode 100644
index 995fa97d..00000000
--- a/web/app/(app)/dashboard/(components)/message-history.tsx
+++ /dev/null
@@ -1,1051 +0,0 @@
-'use client'
-
-import { useEffect, useState, useRef } from 'react'
-import { useQuery, useMutation } from '@tanstack/react-query'
-import { Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Skeleton } from '@/components/ui/skeleton'
-import {
-  Clock,
-  Reply,
-  ArrowUpRight,
-  ArrowDownLeft,
-  MessageSquare,
-  Check,
-  X,
-  Smartphone,
-  RefreshCw,
-  Timer,
-  Copy,
-  Trash2,
-} from 'lucide-react'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { ApiEndpoints } from '@/config/api'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { useForm, Controller } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { sendSmsSchema } from '@/lib/schemas'
-import type { SendSmsFormData } from '@/lib/schemas'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Badge } from '@/components/ui/badge'
-import { Spinner } from '@/components/ui/spinner'
-import { toast } from '@/hooks/use-toast'
-import { formatError } from '@/lib/utils/errorHandler'
-import { formatRateLimitMessageForToast } from '@/components/shared/rate-limit-error'
-import { formatDeviceName } from '@/lib/utils'
-
-
-// Helper function to format timestamps
-const formatTimestamp = (timestamp: string | null | undefined) => {
-  if (!timestamp) return 'N/A'
-  return new Date(timestamp).toLocaleString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit',
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  })
-}
-
-// Helper to get status color and icon
-const getStatusBadge = (status: string) => {
-  const normalizedStatus = status?.toLowerCase() || 'pending'
-  switch (normalizedStatus) {
-    case 'pending':
-      return {
-        color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
-        icon: <Timer className='h-3 w-3' />,
-        label: 'Pending',
-      }
-    case 'sent':
-      return {
-        color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
-        icon: <Check className='h-3 w-3' />,
-        label: 'Sent',
-      }
-    case 'delivered':
-      return {
-        color: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
-        icon: <Check className='h-3 w-3' />,
-        label: 'Delivered',
-      }
-    case 'failed':
-      return {
-        color: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
-        icon: <X className='h-3 w-3' />,
-        label: 'Failed',
-      }
-    default:
-      return {
-        color: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
-        icon: <Timer className='h-3 w-3' />,
-        label: normalizedStatus,
-      }
-  }
-}
-
-function ReplyDialog({ sms, onClose, open, onOpenChange }: { sms: any; onClose?: () => void; open: boolean; onOpenChange: (open: boolean) => void }) {
-
-  const {
-    mutate: sendSms,
-    isPending: isSendingSms,
-    isSuccess: isSendSmsSuccess,
-  } = useMutation({
-    mutationKey: ['send-sms'],
-    mutationFn: (data: SendSmsFormData) =>
-      httpBrowserClient.post(ApiEndpoints.gateway.sendSMS(data.deviceId), data),
-    onSuccess: () => {
-      toast({
-        title: 'SMS sent successfully!',
-      })
-      setTimeout(() => {
-        onOpenChange(false)
-        if (onClose) onClose()
-      }, 1500)
-    },
-    onError: (error: any) => {
-      const formattedError = formatError(error)
-      const description = formattedError.isRateLimit
-        ? formatRateLimitMessageForToast(formattedError.rateLimitData)
-        : formattedError.message || 'Please try again.'
-      toast({
-        title: 'Failed to send SMS.',
-        description,
-        variant: 'destructive',
-      })
-    },
-  })
-
-  const {
-    register,
-    control,
-    handleSubmit,
-    formState: { errors },
-    reset,
-  } = useForm<SendSmsFormData>({
-    resolver: zodResolver(sendSmsSchema),
-    defaultValues: {
-      deviceId: sms?.device?._id,
-      recipients: [sms.sender],
-      message: '',
-    },
-  })
-
-  const { data: devices } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () => httpBrowserClient.get(ApiEndpoints.gateway.listDevices()).then((res) => res.data),
-  })
-
-  useEffect(() => {
-    if (open) {
-      reset({
-        deviceId: sms?.device?._id,
-        recipients: [sms.sender],
-        message: '',
-      })
-    }
-  }, [open, sms, reset])
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className='sm:max-w-[500px]'>
-        <DialogHeader>
-          <DialogTitle className='flex items-center gap-2'>
-            <Reply className='h-5 w-5' />
-            Reply to {sms.sender}
-          </DialogTitle>
-          <DialogDescription>
-            Send a reply message to this sender.
-          </DialogDescription>
-        </DialogHeader>
-        <form
-          onSubmit={handleSubmit((data) => sendSms(data))}
-          className='space-y-4 mt-4'
-        >
-          <div className='space-y-4'>
-            <div>
-              <Controller
-                name='deviceId'
-                control={control}
-                render={({ field }) => (
-                  <Select
-                    onValueChange={field.onChange}
-                    value={field.value}
-                    defaultValue={sms?.device?._id}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder='Select a device' />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {devices?.data?.map((device: any) => (
-                        <SelectItem key={device._id} value={device._id}>
-                          {formatDeviceName(device)}{' '}
-                          {device.enabled ? '' : '(disabled)'}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-              />
-              {errors.deviceId && (
-                <p className='text-sm text-destructive mt-1'>
-                  {errors.deviceId.message}
-                </p>
-              )}
-            </div>
-            <div>
-              <Input
-                type='tel'
-                placeholder='Phone Number'
-                {...register('recipients.0')}
-              />
-              {errors.recipients?.[0] && (
-                <p className='text-sm text-destructive mt-1'>
-                  {errors.recipients[0].message}
-                </p>
-              )}
-            </div>
-            <div>
-              <Textarea
-                placeholder='Message'
-                {...register('message')}
-                rows={4}
-              />
-              {errors.message && (
-                <p className='text-sm text-destructive mt-1'>
-                  {errors.message.message}
-                </p>
-              )}
-            </div>
-          </div>
-          <div className='flex justify-end gap-2'>
-            <Button
-              type='button'
-              variant='outline'
-              onClick={() => onOpenChange(false)}
-            >
-              Cancel
-            </Button>
-            <Button type='submit' disabled={isSendingSms}>
-              {isSendingSms && (
-                <Spinner size='sm' className='mr-2' color='white' />
-              )}
-              {isSendingSms ? 'Sending...' : 'Send Reply'}
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function FollowUpDialog({ message, onClose, open, onOpenChange }: { message: any; onClose?: () => void; open: boolean; onOpenChange: (open: boolean) => void }) {
-  const {
-    mutate: sendSms,
-    isPending: isSendingSms,
-    isSuccess: isSendSmsSuccess,
-  } = useMutation({
-    mutationKey: ['send-sms'],
-    mutationFn: (data: SendSmsFormData) =>
-      httpBrowserClient.post(ApiEndpoints.gateway.sendSMS(data.deviceId), data),
-    onSuccess: () => {
-      toast({
-        title: 'Follow-up SMS sent successfully!',
-      })
-      setTimeout(() => {
-        onOpenChange(false)
-        if (onClose) onClose()
-      }, 1500)
-    },
-    onError: (error: any) => {
-      const formattedError = formatError(error)
-      const description = formattedError.isRateLimit
-        ? formatRateLimitMessageForToast(formattedError.rateLimitData)
-        : formattedError.message || 'Please try again.'
-      toast({
-        title: 'Failed to send follow-up SMS.',
-        description,
-        variant: 'destructive',
-      })
-    },
-  })
-
-  const {
-    register,
-    control,
-    handleSubmit,
-    formState: { errors },
-    reset,
-  } = useForm<SendSmsFormData>({
-    resolver: zodResolver(sendSmsSchema),
-    defaultValues: {
-      deviceId: message?.device?._id,
-      recipients: [
-        message.recipient ||
-        (message.recipients && message.recipients[0]) ||
-        '',
-      ],
-      message: '',
-    },
-  })
-
-  const { data: devices } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () => httpBrowserClient.get(ApiEndpoints.gateway.listDevices()).then((res) => res.data),
-  })
-
-  useEffect(() => {
-    if (open) {
-      reset({
-        deviceId: message?.device?._id,
-        recipients: [
-          message.recipient ||
-          (message.recipients && message.recipients[0]) ||
-          '',
-        ],
-        message: '',
-      })
-    }
-  }, [open, message, reset])
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className='sm:max-w-[500px]'>
-        <DialogHeader>
-          <DialogTitle className='flex items-center gap-2'>
-            <MessageSquare className='h-5 w-5' />
-            Follow Up with{' '}
-            {message.recipient ||
-              (message.recipients && message.recipients[0]) ||
-              'Recipient'}
-          </DialogTitle>
-          <DialogDescription>
-            Send a follow-up message to this recipient.
-          </DialogDescription>
-        </DialogHeader>
-        <form
-          onSubmit={handleSubmit((data) => sendSms(data))}
-          className='space-y-4 mt-4'
-        >
-          <div className='space-y-4'>
-            <div>
-              <Controller
-                name='deviceId'
-                control={control}
-                render={({ field }) => (
-                  <Select
-                    onValueChange={field.onChange}
-                    value={field.value}
-                    defaultValue={message?.device?._id}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder='Select a device' />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {devices?.data?.map((device: any) => (
-                        <SelectItem key={device._id} value={device._id}>
-                          {formatDeviceName(device)}{' '}
-                          {device.enabled ? '' : '(disabled)'}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-              />
-              {errors.deviceId && (
-                <p className='text-sm text-destructive mt-1'>
-                  {errors.deviceId.message}
-                </p>
-              )}
-            </div>
-            <div>
-              <Input
-                type='tel'
-                placeholder='Phone Number'
-                {...register('recipients.0')}
-              />
-              {errors.recipients?.[0] && (
-                <p className='text-sm text-destructive mt-1'>
-                  {errors.recipients[0].message}
-                </p>
-              )}
-            </div>
-            <div>
-              <Textarea
-                placeholder='Message'
-                {...register('message')}
-                rows={4}
-              />
-              {errors.message && (
-                <p className='text-sm text-destructive mt-1'>
-                  {errors.message.message}
-                </p>
-              )}
-            </div>
-          </div>
-          <div className='flex justify-end gap-2'>
-            <Button
-              type='button'
-              variant='outline'
-              onClick={() => onOpenChange(false)}
-            >
-              Cancel
-            </Button>
-            <Button type='submit' disabled={isSendingSms}>
-              {isSendingSms && (
-                <Spinner size='sm' className='mr-2' color='white' />
-              )}
-              {isSendingSms ? 'Sending...' : 'Send Follow Up'}
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-// New component for full SMS details
-function SmsDetailsDialog({
-  message,
-  open,
-  onOpenChange,
-}: {
-  message: any
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}) {
-  const [isReplyOpen, setIsReplyOpen] = useState(false)
-  const [isFollowUpOpen, setIsFollowUpOpen] = useState(false)
-
-  const statusBadge = getStatusBadge(message?.status)
-  const isSent = !!message?.recipient || (message?.recipients && message.recipients.length > 0)
-
-  const handleCopyMessage = () => {
-    if (message?.message) {
-      navigator.clipboard.writeText(message.message)
-      toast({
-        title: 'Message copied to clipboard!',
-      })
-    }
-  }
-
-  const handleReplyClick = () => {
-    onOpenChange(false)
-    setIsReplyOpen(true)
-  }
-
-  const handleFollowUpClick = () => {
-    onOpenChange(false)
-    setIsFollowUpOpen(true)
-  }
-
-  const handleReplyDialogClose = () => setIsReplyOpen(false)
-  const handleFollowUpDialogClose = () => setIsFollowUpOpen(false)
-
-  return (
-    <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="sm:max-w-[550px] p-6">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2 text-lg font-semibold">
-              <MessageSquare className="h-5 w-5 text-brand-500" />
-              SMS Details
-            </DialogTitle>
-            <DialogDescription>
-              Detailed information about this SMS message.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="mt-4 space-y-4 text-sm">
-            {/* Info Grid - labels 1/3, values 2/3 */}
-            <div className="grid grid-cols-[1fr_2fr] gap-x-6 gap-y-3">
-              <div className="font-medium text-muted-foreground">Direction</div>
-              <div className="flex items-center gap-1">
-                {isSent ? <ArrowUpRight className="h-4 w-4 text-brand-500" /> :
-                  <ArrowDownLeft className="h-4 w-4 text-green-500" />}
-                <span className="capitalize">{isSent ? 'Sent' : 'Received'}</span>
-              </div>
-
-              <div className="font-medium text-muted-foreground">Number</div>
-              <div>
-                {isSent ? message.recipient || message.recipients?.[0] || 'Unknown'
-                        : message.sender || 'Unknown'}
-              </div>
-
-              <div className="font-medium text-muted-foreground">Status</div>
-              <div>
-                <Badge variant="outline" className={`${statusBadge.color} flex items-center text-xs`}>
-                  {statusBadge.icon}
-                  {statusBadge.label}
-                </Badge>
-              </div>
-
-              <div className="font-medium text-muted-foreground">Date & Time</div>
-              <div>{formatTimestamp(isSent ? message.requestedAt : message.receivedAt)}</div>
-
-              <div className="font-medium text-muted-foreground">Device</div>
-              <div className="flex items-center gap-1">
-                <Smartphone className="h-3 w-3" />
-                {message.device?.brand || 'N/A'} {message.device?.model || ''}
-              </div>
-
-              {message.gatewayMessageId && (
-                <>
-                  <div className="font-medium text-muted-foreground">Gateway ID</div>
-                  <div className="font-mono text-xs break-all min-w-0">{message.gatewayMessageId}</div>
-                </>
-              )}
-            </div>
-
-            {/* Error details - full width, multi-line, contained */}
-            {(message.errorCode || message.errorMessage) && (
-              <div className="pt-3 border-t border-border space-y-2 min-w-0">
-                {message.errorCode && (
-                  <div className="min-w-0">
-                    <div className="font-medium text-muted-foreground mb-0.5">Error code</div>
-                    <div
-                      className="w-full min-w-0 max-h-24 overflow-y-auto overflow-x-hidden text-destructive text-sm break-words rounded p-2 bg-destructive/5"
-                      title={message.errorCode}
-                    >
-                      {message.errorCode}
-                    </div>
-                  </div>
-                )}
-                {message.errorMessage && (
-                  <div className="min-w-0">
-                    <div className="font-medium text-muted-foreground mb-0.5">Error message</div>
-                    <div
-                      className="w-full min-w-0 max-h-32 overflow-y-auto overflow-x-hidden text-destructive text-sm break-words rounded p-2 bg-destructive/5"
-                      title={message.errorMessage}
-                    >
-                      {message.errorMessage}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Message Body */}
-            <div className="pt-4 border-t border-border">
-              <h4 className="font-medium text-sm text-muted-foreground mb-1">Message Body</h4>
-              <div className="max-h-48 overflow-y-auto p-2 bg-gray-50 dark:bg-gray-900 rounded-md text-sm break-words">
-                {message.message}
-              </div>
-            </div>
-
-            {/* Action Buttons */}
-            <div className="flex flex-wrap gap-2 mt-4 pt-2 border-t border-border">
-              {!isSent && (
-                <Button variant="ghost" size="sm" className="gap-1" onClick={handleReplyClick}>
-                  <Reply className="h-4 w-4" />
-                  Reply
-                </Button>
-              )}
-              {isSent && (
-                <Button variant="ghost" size="sm" className="gap-1" onClick={handleFollowUpClick}>
-                  <MessageSquare className="h-4 w-4" />
-                  Follow Up
-                </Button>
-              )}
-              <Button variant="ghost" size="sm" className="gap-1" onClick={handleCopyMessage}>
-                <Copy className="h-4 w-4" />
-                Copy
-              </Button>
-              {/* Optional Delete */}
-              {/* <Button variant="ghost" size="sm" className="gap-1 text-destructive hover:bg-destructive/10">
-                <Trash2 className="h-4 w-4" />
-                Delete
-              </Button> */}
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {message && isReplyOpen && (
-        <ReplyDialog sms={message} open={isReplyOpen} onOpenChange={handleReplyDialogClose} />
-      )}
-      {message && isFollowUpOpen && (
-        <FollowUpDialog message={message} open={isFollowUpOpen} onOpenChange={handleFollowUpDialogClose} />
-      )}
-    </>
-  )
-}
-
-function MessageCard({ message, type, device, onSelectMessage }) {
-  const isSent = type === 'sent'
-
-  const formattedDate = formatTimestamp(
-    (isSent ? message.requestedAt : message.receivedAt) || message.createdAt
-  )
-  const statusBadge = getStatusBadge(message.status)
-
-  // Condition to show status badge based on device app version and message date
-  const shouldShowStatus = device?.appVersionCode >= 14 && new Date(message?.createdAt) > new Date('2025-06-05')
-
-  return (
-    <Card
-      className={`hover:bg-muted/50 transition-colors cursor-pointer max-w-sm md:max-w-none ${
-        isSent ? 'border-l-4 border-l-brand-500' : 'border-l-4 border-l-green-500'
-      }`}
-      onClick={() => onSelectMessage(message)}
-    >
-      <CardContent className='p-4'>
-        <div className='space-y-3'>
-          <div className='flex justify-between items-start'>
-            <div className='flex items-center gap-2'>
-              {isSent ? (
-                <div className='flex items-center text-brand-600 dark:text-brand-400 font-medium'>
-                  <ArrowUpRight className='h-4 w-4 mr-1' />
-                  <span>
-                    To:{' '}
-                    {message.recipient ||
-                      (message.recipients && message.recipients[0]) ||
-                      'Unknown'}
-                  </span>
-                </div>
-              ) : (
-                <div className='flex items-center text-green-600 dark:text-green-400 font-medium'>
-                  <ArrowDownLeft className='h-4 w-4 mr-1' />
-                  <span>From: {message.sender || 'Unknown'}</span>
-                </div>
-              )}
-            </div>
-            <div className='flex items-center gap-1 text-sm text-muted-foreground'>
-              <Clock className='h-3 w-3' />
-              <span>{formattedDate}</span>
-            </div>
-          </div>
-
-          <div className='flex gap-2'>
-            <p className='text-sm max-w-sm md:max-w-none line-clamp-2'>{message.message}</p>
-          </div>
-
-          <div className='flex justify-between items-center'>
-            {isSent && shouldShowStatus && (
-              <Badge variant='outline' className={`${statusBadge.color} flex items-center text-xs`}>
-                {statusBadge.icon}
-                {statusBadge.label}
-              </Badge>
-            )}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-function MessageCardSkeleton() {
-  return (
-    <Card className='hover:bg-muted/50 transition-colors max-w-sm md:max-w-none'>
-      <CardContent className='p-4'>
-        <div className='space-y-3'>
-          <div className='flex justify-between items-start'>
-            <Skeleton className='h-5 w-24' />
-            <Skeleton className='h-4 w-32' />
-          </div>
-          <Skeleton className='h-4 w-full' />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default function MessageHistory() {
-  const [selectedMessage, setSelectedMessage] = useState(null)
-  const [isDetailsDialogOpen, setIsDetailsDialogOpen] = useState(false)
-
-  const handleSelectMessage = (message: any) => {
-    setSelectedMessage(message)
-    setIsDetailsDialogOpen(true)
-  }
-
-  const {
-    data: devices,
-    isLoading: isLoadingDevices,
-    error: devicesError,
-  } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () => httpBrowserClient.get(ApiEndpoints.gateway.listDevices()).then((res) => res.data),
-  })
-
-  const [currentDevice, setCurrentDevice] = useState('')
-  const [messageType, setMessageType] = useState('all')
-  const [page, setPage] = useState(1)
-  const [limit, setLimit] = useState(20)
-  const [autoRefreshInterval, setAutoRefreshInterval] = useState(0)
-  const [isRefreshing, setIsRefreshing] = useState(false)
-  const refreshTimerRef = useRef<NodeJS.Timeout | null>(null)
-
-  useEffect(() => {
-    if (devices?.data?.length && !currentDevice) {
-      setCurrentDevice(devices.data[0]._id)
-    }
-  }, [devices, currentDevice])
-
-  const {
-    data: messagesResponse,
-    isLoading: isLoadingMessages,
-    error: messagesError,
-    refetch,
-  } = useQuery({
-    queryKey: ['messages-history', currentDevice, messageType, page, limit],
-    enabled: !!currentDevice,
-    queryFn: () =>
-      httpBrowserClient
-        .get(
-          `${ApiEndpoints.gateway.getMessages(
-            currentDevice
-          )}?type=${messageType}&page=${page}&limit=${limit}`
-        )
-        .then((res) => res.data),
-  })
-
-  const handleRefresh = async () => {
-    if (!currentDevice) return
-    setIsRefreshing(true)
-    await refetch()
-    setTimeout(() => setIsRefreshing(false), 500)
-  }
-
-  useEffect(() => {
-    if (refreshTimerRef.current) {
-      clearInterval(refreshTimerRef.current)
-      refreshTimerRef.current = null
-    }
-
-    if (autoRefreshInterval > 0 && currentDevice) {
-      refreshTimerRef.current = setInterval(() => {
-        refetch()
-        setIsRefreshing(true)
-        setTimeout(() => setIsRefreshing(false), 300)
-      }, autoRefreshInterval * 1000)
-    }
-
-    return () => {
-      if (refreshTimerRef.current) {
-        clearInterval(refreshTimerRef.current)
-      }
-    }
-  }, [autoRefreshInterval, currentDevice, messageType, page, limit, refetch])
-
-  const messages = messagesResponse?.data || []
-
-  const pagination = messagesResponse?.meta || {
-    page: 1,
-    limit: 20,
-    total: 0,
-    totalPages: 1,
-  }
-
-  const handleDeviceChange = (deviceId: string) => {
-    setCurrentDevice(deviceId)
-    setPage(1)
-  }
-
-  const handleMessageTypeChange = (type: string) => {
-    setMessageType(type)
-    setPage(1)
-  }
-
-  const handlePageChange = (newPage: number) => {
-    setPage(newPage)
-  }
-
-  if (isLoadingDevices)
-    return (
-      <div className='space-y-4'>
-        <Skeleton className='h-10 w-full' />
-        <div className='space-y-4'>
-          {[1, 2, 3].map((i) => (
-            <MessageCardSkeleton key={i} />
-          ))}
-        </div>
-      </div>
-    )
-
-  if (devicesError)
-    return (
-      <div className='flex justify-center items-center h-full'>
-        Error: {devicesError.message}
-      </div>
-    )
-
-  if (!devices?.data?.length)
-    return (
-      <div className='flex justify-center items-center h-full'>
-        No devices found
-      </div>
-    )
-
-  return (
-    <div className='space-y-4'>
-      <div className='bg-gradient-to-r from-brand-50 to-sky-50 dark:from-brand-950/30 dark:to-sky-950/30 rounded-lg shadow-sm border border-brand-100 dark:border-brand-800/50 p-4 mb-4'>
-        <div className='flex flex-col gap-4'>
-          <div className='flex flex-col sm:flex-row sm:items-center gap-3'>
-            <div className='flex-1'>
-              <div className='flex items-center gap-2 mb-1.5'>
-                <Smartphone className='h-3.5 w-3.5 text-brand-500' />
-                <h3 className='text-sm font-medium text-foreground'>Device</h3>
-              </div>
-              <Select value={currentDevice} onValueChange={handleDeviceChange}>
-                <SelectTrigger className='w-full bg-white/80 dark:bg-black/20 h-9 text-sm border-brand-200 dark:border-brand-800/70'>
-                  <SelectValue placeholder='Select a device' />
-                </SelectTrigger>
-                <SelectContent>
-                  {devices?.data?.map((device: any) => (
-                    <SelectItem key={device._id} value={device._id}>
-                      <div className='flex items-center gap-2'>
-                        <span className='font-medium'>
-                          {formatDeviceName(device)}
-                        </span>
-                        {!device.enabled && (
-                          <Badge
-                            variant='outline'
-                            className='ml-1 text-xs py-0 h-5'
-                          >
-                            Disabled
-                          </Badge>
-                        )}
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className='w-full sm:w-44'>
-              <div className='flex items-center gap-2 mb-1.5'>
-                <MessageSquare className='h-3.5 w-3.5 text-brand-500' />
-                <h3 className='text-sm font-medium text-foreground'>
-                  Message Type
-                </h3>
-              </div>
-              <Select
-                value={messageType}
-                onValueChange={handleMessageTypeChange}
-              >
-                <SelectTrigger className='w-full bg-white/80 dark:bg-black/20 h-9 text-sm border-brand-200 dark:border-brand-800/70'>
-                  <SelectValue placeholder='Message type' />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value='all'>
-                    <div className='flex items-center gap-1.5'>
-                      <div className='h-1.5 w-1.5 rounded-full bg-gray-500'></div>
-                      All Messages
-                    </div>
-                  </SelectItem>
-                  <SelectItem value='received'>
-                    <div className='flex items-center gap-1.5'>
-                      <div className='h-1.5 w-1.5 rounded-full bg-green-500'></div>
-                      Received
-                    </div>
-                  </SelectItem>
-                  <SelectItem value='sent'>
-                    <div className='flex items-center gap-1.5'>
-                      <div className='h-1.5 w-1.5 rounded-full bg-brand-500'></div>
-                      Sent
-                    </div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-
-          <div className='flex items-center justify-between gap-2 pt-2 mt-2 border-t border-brand-100 dark:border-brand-800/50'>
-            <div className='flex items-center gap-1.5'>
-              <Button
-                onClick={handleRefresh}
-                variant='ghost'
-                size='sm'
-                disabled={!currentDevice}
-                className='h-7 px-2 text-xs text-brand-700 dark:text-brand-300 hover:bg-brand-100 dark:hover:bg-brand-900/30'
-              >
-                <RefreshCw
-                  className={`h-3.5 w-3.5 mr-1 ${
-                    isRefreshing ? 'animate-spin' : ''
-                  }`}
-                />
-                Refresh Now
-              </Button>
-            </div>
-
-            <div className='flex items-center gap-1.5'>
-              <Timer className='h-3 w-3 text-brand-500' />
-              <span className='text-xs font-medium mr-1'>Auto Refresh:</span>
-              <div className='flex'>
-                {[
-                  { value: 0, label: 'Off' },
-                  { value: 15, label: '15s' },
-                  { value: 30, label: '30s' },
-                  { value: 60, label: '60s' },
-                ].map((interval) => (
-                  <Button
-                    key={interval.value}
-                    size='sm'
-                    variant='ghost'
-                    disabled={!currentDevice && interval.value > 0}
-                    className={`h-6 px-1.5 text-xs ${
-                      autoRefreshInterval === interval.value
-                        ? 'bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 font-medium'
-                        : 'text-muted-foreground hover:bg-brand-50 dark:hover:bg-brand-900/20'
-                    }`}
-                    onClick={() => setAutoRefreshInterval(interval.value)}
-                  >
-                    {interval.label}
-                  </Button>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {isLoadingMessages && (
-        <div className='space-y-4'>
-          {[1, 2, 3].map((i) => (
-            <MessageCardSkeleton key={i} />
-          ))}
-        </div>
-      )}
-
-      {messagesError && (
-        <div className='flex justify-center items-center h-full'>
-          Error: {messagesError.message}
-        </div>
-      )}
-
-      {!isLoadingMessages && messages.length === 0 && (
-        <div className='flex justify-center items-center h-full py-10'>
-          No messages found
-        </div>
-      )}
-
-      <div className='space-y-4'>
-        {messages?.map((message: any) => (
-          <MessageCard
-            key={message._id}
-            message={message}
-            type={message.sender ? 'received' : 'sent'}
-            device={devices?.data?.find((device: any) => device._id === currentDevice)}
-            onSelectMessage={handleSelectMessage}
-          />
-        ))}
-      </div>
-
-      {pagination.totalPages > 1 && (
-        <div className='flex justify-center mt-6 space-x-2'>
-          <Button
-            onClick={() => handlePageChange(Math.max(1, page - 1))}
-            disabled={page === 1}
-            variant={page === 1 ? 'ghost' : 'default'}
-          >
-            Previous
-          </Button>
-
-          <div className='flex flex-wrap items-center gap-2 justify-center sm:justify-start'>
-            {pagination.totalPages > 1 && (
-              <Button
-                onClick={() => handlePageChange(1)}
-                variant={page === 1 ? 'default' : 'ghost'}
-                size='icon'
-                className={`h-8 w-8 rounded-full ${
-                  page === 1
-                    ? 'bg-primary text-brand-foreground hover:bg-primary/90'
-                    : 'hover:bg-secondary'
-                }`}
-              >
-                1
-              </Button>
-            )}
-
-            {page > 4 && pagination.totalPages > 7 && (
-              <span className='px-1'>...</span>
-            )}
-
-            {Array.from(
-              { length: Math.min(6, pagination.totalPages - 2) },
-              (_, i) => {
-                let pageToShow
-                if (pagination.totalPages <= 8) {
-                  pageToShow = i + 2
-                } else if (page <= 4) {
-                  pageToShow = i + 2
-                } else if (page >= pagination.totalPages - 3) {
-                  pageToShow = pagination.totalPages - 7 + i
-                } else {
-                  pageToShow = page - 2 + i
-                }
-
-                if (pageToShow > 1 && pageToShow < pagination.totalPages) {
-                  return (
-                    <Button
-                      key={pageToShow}
-                      onClick={() => handlePageChange(pageToShow)}
-                      variant={page === pageToShow ? 'default' : 'ghost'}
-                      size='icon'
-                      className={`h-8 w-8 rounded-full ${
-                        page === pageToShow
-                          ? 'bg-primary text-brand-foreground hover:bg-primary/90'
-                          : 'hover:bg-secondary'
-                      }`}
-                    >
-                      {pageToShow}
-                    </Button>
-                  )
-                }
-                return null
-              }
-            )}
-
-            {page < pagination.totalPages - 3 && pagination.totalPages > 7 && (
-              <span className='px-1'>...</span>
-            )}
-
-            {pagination.totalPages > 1 && (
-              <Button
-                onClick={() => handlePageChange(pagination.totalPages)}
-                variant={page === pagination.totalPages ? 'default' : 'ghost'}
-                size='icon'
-                className={`h-8 w-8 rounded-full ${
-                  page === pagination.totalPages
-                    ? 'bg-primary text-brand-foreground hover:bg-primary/90'
-                    : 'hover:bg-secondary'
-                }`}
-              >
-                {pagination.totalPages}
-              </Button>
-            )}
-          </div>
-          <Button
-            onClick={() => handlePageChange(Math.min(pagination.totalPages, page + 1))}
-            disabled={page === pagination.totalPages}
-            variant={page === pagination.totalPages ? 'ghost' : 'default'}
-          >
-            Next
-          </Button>
-        </div>
-      )}
-      {selectedMessage && (
-        <SmsDetailsDialog
-          message={selectedMessage}
-          open={isDetailsDialogOpen}
-          onOpenChange={setIsDetailsDialogOpen}
-        />
-      )}
-    </div>
-  )
-}
diff --git a/web/app/(app)/dashboard/(components)/message-history/filters-bar.tsx b/web/app/(app)/dashboard/(components)/message-history/filters-bar.tsx
new file mode 100644
index 00000000..b886e146
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/message-history/filters-bar.tsx
@@ -0,0 +1,196 @@
+'use client'
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { RefreshCw, Search, Timer, X } from 'lucide-react'
+import { formatDeviceName, cn } from '@/lib/utils'
+import type { Device } from '@/lib/api'
+
+const AUTO_REFRESH_INTERVALS = [
+  { value: 0, label: 'Off' },
+  { value: 15, label: 'Every 15s' },
+  { value: 30, label: 'Every 30s' },
+  { value: 60, label: 'Every 60s' },
+]
+
+const TYPES = [
+  { value: 'all', label: 'All' },
+  { value: 'sent', label: 'Sent' },
+  { value: 'received', label: 'Received' },
+]
+
+type FiltersBarProps = {
+  devices: Device[]
+  currentDevice: string
+  onDeviceChange: (deviceId: string) => void
+  messageType: string
+  onMessageTypeChange: (type: string) => void
+  search: string
+  onSearchChange: (value: string) => void
+  onRefresh: () => void
+  isRefreshing: boolean
+  autoRefreshInterval: number
+  onAutoRefreshIntervalChange: (seconds: number) => void
+}
+
+// Collapsed from a tall labelled card into one compact bar, so messages are
+// visible without scrolling past the controls.
+export default function FiltersBar({
+  devices,
+  currentDevice,
+  onDeviceChange,
+  messageType,
+  onMessageTypeChange,
+  search,
+  onSearchChange,
+  onRefresh,
+  isRefreshing,
+  autoRefreshInterval,
+  onAutoRefreshIntervalChange,
+}: FiltersBarProps) {
+  const autoRefreshOn = autoRefreshInterval > 0
+
+  return (
+    <div className='space-y-3'>
+      <div className='flex flex-col gap-2 sm:flex-row sm:items-center'>
+        <div className='relative flex-1'>
+          <Search className='pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground' />
+          <Label htmlFor='message-search' className='sr-only'>
+            Search messages
+          </Label>
+          <Input
+            id='message-search'
+            type='search'
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+            placeholder='Search messages or numbers'
+            className='h-9 pl-9 pr-9'
+          />
+          {search && (
+            <Button
+              type='button'
+              variant='ghost'
+              size='icon'
+              aria-label='Clear search'
+              onClick={() => onSearchChange('')}
+              className='absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2'
+            >
+              <X className='h-3.5 w-3.5' />
+            </Button>
+          )}
+        </div>
+
+        <div className='flex items-center gap-2'>
+          <Label htmlFor='history-device' className='sr-only'>
+            Device
+          </Label>
+          <Select value={currentDevice} onValueChange={onDeviceChange}>
+            <SelectTrigger id='history-device' className='h-9 w-full sm:w-52'>
+              <SelectValue placeholder='Select a device' />
+            </SelectTrigger>
+            <SelectContent>
+              {devices.map((device) => (
+                <SelectItem key={device._id} value={device._id}>
+                  {formatDeviceName(device)}
+                  {device.enabled ? '' : ' (disabled)'}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Button
+            type='button'
+            variant='outline'
+            size='icon'
+            className='h-9 w-9 shrink-0'
+            onClick={onRefresh}
+            disabled={!currentDevice}
+            aria-label='Refresh messages'
+          >
+            <RefreshCw
+              className={cn('h-4 w-4', isRefreshing && 'animate-spin')}
+            />
+          </Button>
+
+          {/* Four inline interval buttons took a whole row for a setting that
+              is changed rarely. */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type='button'
+                variant='outline'
+                size='icon'
+                className={cn(
+                  'h-9 w-9 shrink-0',
+                  autoRefreshOn && 'text-primary'
+                )}
+                aria-label={
+                  autoRefreshOn
+                    ? `Auto refresh every ${autoRefreshInterval} seconds`
+                    : 'Auto refresh off'
+                }
+              >
+                <Timer className='h-4 w-4' />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align='end'>
+              <DropdownMenuLabel>Auto refresh</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {AUTO_REFRESH_INTERVALS.map((interval) => (
+                <DropdownMenuCheckboxItem
+                  key={interval.value}
+                  checked={autoRefreshInterval === interval.value}
+                  onCheckedChange={() =>
+                    onAutoRefreshIntervalChange(interval.value)
+                  }
+                >
+                  {interval.label}
+                </DropdownMenuCheckboxItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      <div
+        className='flex w-full gap-1 overflow-x-auto rounded-lg bg-muted p-1 sm:w-fit'
+        role='tablist'
+        aria-label='Message direction'
+      >
+        {TYPES.map((type) => (
+          <button
+            key={type.value}
+            type='button'
+            role='tab'
+            aria-selected={messageType === type.value}
+            onClick={() => onMessageTypeChange(type.value)}
+            className={cn(
+              'shrink-0 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+              messageType === type.value
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            {type.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/message-history/group.test.ts b/web/app/(app)/dashboard/(components)/message-history/group.test.ts
new file mode 100644
index 00000000..12f44793
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/message-history/group.test.ts
@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'vitest'
+import { groupMessagesByDay, messageDate, messageDirection } from './group'
+import type { SmsMessage } from './types'
+
+const msg = (over: Partial<SmsMessage>): SmsMessage =>
+  ({ _id: Math.random().toString(36), message: 'hi', ...over }) as SmsMessage
+
+// Built from local parts so day bucketing does not depend on the suite's TZ.
+const at = (daysAgo: number, hour = 12) => {
+  const d = new Date()
+  d.setDate(d.getDate() - daysAgo)
+  d.setHours(hour, 0, 0, 0)
+  return d.toISOString()
+}
+
+describe('messageDirection', () => {
+  it('uses the type the API returns', () => {
+    expect(messageDirection(msg({ type: 'received' }))).toBe('received')
+    expect(messageDirection(msg({ type: 'sent' }))).toBe('sent')
+  })
+
+  it('trusts type over the presence of a sender', () => {
+    // A sent row that happens to carry a sender must not flip to received.
+    expect(messageDirection(msg({ type: 'sent', sender: '+1415' }))).toBe('sent')
+  })
+
+  it('falls back to the sender check for rows written before type existed', () => {
+    expect(messageDirection(msg({ sender: '+1415' }))).toBe('received')
+    expect(messageDirection(msg({ recipient: '+1415' }))).toBe('sent')
+  })
+})
+
+describe('messageDate', () => {
+  it('prefers receivedAt, then requestedAt, then createdAt', () => {
+    const received = at(1)
+    const requested = at(2)
+    const created = at(3)
+
+    expect(messageDate(msg({ receivedAt: received, createdAt: created }))
+      ?.toISOString()).toBe(received)
+    expect(messageDate(msg({ requestedAt: requested, createdAt: created }))
+      ?.toISOString()).toBe(requested)
+    expect(messageDate(msg({ createdAt: created }))?.toISOString()).toBe(created)
+  })
+
+  it('returns null when there is no usable timestamp', () => {
+    expect(messageDate(msg({}))).toBeNull()
+    expect(messageDate(msg({ createdAt: 'nonsense' }))).toBeNull()
+  })
+})
+
+describe('groupMessagesByDay', () => {
+  it('returns nothing for an empty list', () => {
+    expect(groupMessagesByDay([])).toEqual([])
+  })
+
+  it('labels the current and previous day in words', () => {
+    const groups = groupMessagesByDay([
+      msg({ createdAt: at(0) }),
+      msg({ createdAt: at(1) }),
+    ])
+
+    expect(groups.map((g) => g.label)).toEqual(['Today', 'Yesterday'])
+  })
+
+  it('uses a date label for older days', () => {
+    const groups = groupMessagesByDay([msg({ createdAt: at(10) })])
+    expect(groups).toHaveLength(1)
+    expect(groups[0].label).not.toBe('Today')
+    expect(groups[0].label).not.toBe('Yesterday')
+    expect(groups[0].label).toMatch(/\d{1,2} \w{3} \d{4}/)
+  })
+
+  it('collects messages from the same day into one group', () => {
+    const groups = groupMessagesByDay([
+      msg({ createdAt: at(0, 9) }),
+      msg({ createdAt: at(0, 17) }),
+      msg({ createdAt: at(1, 9) }),
+    ])
+
+    expect(groups).toHaveLength(2)
+    expect(groups[0].messages).toHaveLength(2)
+    expect(groups[1].messages).toHaveLength(1)
+  })
+
+  it('separates messages either side of a day boundary', () => {
+    // Just before and just after local midnight are different days.
+    const groups = groupMessagesByDay([
+      msg({ createdAt: at(0, 0) }),
+      msg({ createdAt: at(1, 23) }),
+    ])
+    expect(groups).toHaveLength(2)
+  })
+
+  it('keeps undated messages instead of dropping them, sorted last', () => {
+    const groups = groupMessagesByDay([
+      msg({ _id: 'no-date' }),
+      msg({ _id: 'dated', createdAt: at(0) }),
+    ])
+
+    expect(groups.map((g) => g.label)).toEqual(['Today', 'Unknown date'])
+    expect(groups[1].messages[0]._id).toBe('no-date')
+  })
+
+  it('preserves the order the API returned within a day', () => {
+    const groups = groupMessagesByDay([
+      msg({ _id: 'first', createdAt: at(0, 18) }),
+      msg({ _id: 'second', createdAt: at(0, 9) }),
+    ])
+
+    expect(groups[0].messages.map((m) => m._id)).toEqual(['first', 'second'])
+  })
+})
diff --git a/web/app/(app)/dashboard/(components)/message-history/group.ts b/web/app/(app)/dashboard/(components)/message-history/group.ts
new file mode 100644
index 00000000..dc85681a
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/message-history/group.ts
@@ -0,0 +1,68 @@
+import { format, isToday, isValid, isYesterday } from 'date-fns'
+import type { SmsMessage } from './types'
+
+export type MessageDay = {
+  // Stable key for React and for tests: the calendar day in ISO form.
+  key: string
+  label: string
+  messages: SmsMessage[]
+}
+
+/** The timestamp that best represents when a message happened. */
+export function messageDate(message: SmsMessage): Date | null {
+  const raw =
+    message.receivedAt ?? message.requestedAt ?? message.createdAt ?? null
+  if (!raw) return null
+  const date = new Date(raw)
+  return isValid(date) ? date : null
+}
+
+/**
+ * Direction of a message.
+ *
+ * Prefer the `type` the API returns. The previous code inferred direction from
+ * whether `sender` was present, which is only a proxy, so that check is kept
+ * as a fallback for rows written before `type` existed.
+ */
+export function messageDirection(message: SmsMessage): 'sent' | 'received' {
+  if (message.type === 'sent' || message.type === 'received') return message.type
+  return message.sender ? 'received' : 'sent'
+}
+
+function dayLabel(date: Date): string {
+  if (isToday(date)) return 'Today'
+  if (isYesterday(date)) return 'Yesterday'
+  return format(date, 'd MMM yyyy')
+}
+
+/**
+ * Group messages under day headings, preserving the order they arrive in
+ * (the API already sorts newest first).
+ *
+ * Messages with no usable timestamp are grouped last under "Unknown date"
+ * rather than silently dropped.
+ */
+export function groupMessagesByDay(messages: SmsMessage[]): MessageDay[] {
+  const days: MessageDay[] = []
+  const byKey = new Map<string, MessageDay>()
+
+  for (const message of messages) {
+    const date = messageDate(message)
+    const key = date ? format(date, 'yyyy-MM-dd') : 'unknown'
+    const label = date ? dayLabel(date) : 'Unknown date'
+
+    let group = byKey.get(key)
+    if (!group) {
+      group = { key, label, messages: [] }
+      byKey.set(key, group)
+      days.push(group)
+    }
+    group.messages.push(message)
+  }
+
+  // Undated rows sink to the bottom; everything else keeps API order.
+  return [
+    ...days.filter((d) => d.key !== 'unknown'),
+    ...days.filter((d) => d.key === 'unknown'),
+  ]
+}
diff --git a/web/app/(app)/dashboard/(components)/message-history/index.tsx b/web/app/(app)/dashboard/(components)/message-history/index.tsx
new file mode 100644
index 00000000..346adece
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/message-history/index.tsx
@@ -0,0 +1,254 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { MessageSquare, SearchX, Smartphone } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useDeviceMessages, useDevices } from '@/lib/api'
+import FiltersBar from './filters-bar'
+import Pagination from '@/components/shared/numbered-pagination'
+import EmptyState from '@/components/shared/empty-state'
+import SmsDetailsDialog from './sms-details-dialog'
+import { MessageRow, MessageRowSkeleton } from './message-row'
+import { groupMessagesByDay } from './group'
+import type { MessagesPagination, SmsMessage } from './types'
+
+const SEARCH_DEBOUNCE_MS = 300
+
+// Container for the message-history screen: owns filter/pagination state and
+// data fetching; rendering is delegated to the focused subcomponents.
+export default function MessageHistory() {
+  const [selectedMessage, setSelectedMessage] = useState<SmsMessage | null>(null)
+  const [isDetailsDialogOpen, setIsDetailsDialogOpen] = useState(false)
+
+  // Derived, not synced through an effect: the selected device is whatever the
+  // user picked, otherwise the first one. An effect would render once with no
+  // device before correcting itself.
+  const [pickedDevice, setPickedDevice] = useState('')
+  const [messageType, setMessageType] = useState('all')
+  const [page, setPage] = useState(1)
+  const [limit] = useState(20)
+  const [autoRefreshInterval, setAutoRefreshInterval] = useState(0)
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const refreshTimerRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Two values: what is typed, and what has been committed to the query.
+  // Search is server-side, so it is debounced to avoid a request per keystroke.
+  const [searchInput, setSearchInput] = useState('')
+  const [search, setSearch] = useState('')
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSearch(searchInput.trim())
+      setPage(1)
+    }, SEARCH_DEBOUNCE_MS)
+    return () => clearTimeout(timer)
+  }, [searchInput])
+
+  const {
+    data: devices,
+    isLoading: isLoadingDevices,
+    error: devicesError,
+  } = useDevices()
+
+  const currentDevice = pickedDevice || devices?.[0]?._id || ''
+
+  const {
+    data: messagesResponse,
+    isLoading: isLoadingMessages,
+    error: messagesError,
+    refetch,
+  } = useDeviceMessages(currentDevice, {
+    type: messageType,
+    page,
+    limit,
+    search,
+  })
+
+  const handleRefresh = async () => {
+    if (!currentDevice) return
+    setIsRefreshing(true)
+    await refetch()
+    setTimeout(() => setIsRefreshing(false), 500)
+  }
+
+  useEffect(() => {
+    if (refreshTimerRef.current) {
+      clearInterval(refreshTimerRef.current)
+      refreshTimerRef.current = null
+    }
+
+    if (autoRefreshInterval > 0 && currentDevice) {
+      refreshTimerRef.current = setInterval(() => {
+        refetch()
+        setIsRefreshing(true)
+        setTimeout(() => setIsRefreshing(false), 300)
+      }, autoRefreshInterval * 1000)
+    }
+
+    return () => {
+      if (refreshTimerRef.current) {
+        clearInterval(refreshTimerRef.current)
+      }
+    }
+  }, [autoRefreshInterval, currentDevice, refetch])
+
+  const messages = (messagesResponse?.data ?? []) as SmsMessage[]
+  const pagination: MessagesPagination = {
+    page: messagesResponse?.meta?.page ?? 1,
+    limit: messagesResponse?.meta?.limit ?? limit,
+    total: messagesResponse?.meta?.total ?? 0,
+    totalPages: messagesResponse?.meta?.totalPages ?? 1,
+  }
+
+  const days = useMemo(() => groupMessagesByDay(messages), [messages])
+  const activeDevice = devices?.find((device) => device._id === currentDevice)
+
+  const handleSelectMessage = (message: SmsMessage) => {
+    setSelectedMessage(message)
+    setIsDetailsDialogOpen(true)
+  }
+
+  const handleDeviceChange = (deviceId: string) => {
+    setPickedDevice(deviceId)
+    setPage(1)
+  }
+
+  const handleMessageTypeChange = (type: string) => {
+    setMessageType(type)
+    setPage(1)
+  }
+
+  const clearSearch = () => setSearchInput('')
+
+  if (isLoadingDevices)
+    return (
+      <div className='space-y-4'>
+        <Skeleton className='h-9 w-full' />
+        <div className='rounded-xl border border-border'>
+          {[1, 2, 3, 4].map((i) => (
+            <MessageRowSkeleton key={i} />
+          ))}
+        </div>
+      </div>
+    )
+
+  if (devicesError)
+    return (
+      <div className='flex h-full items-center justify-center'>
+        Error: {devicesError.message}
+      </div>
+    )
+
+  if (!devices?.length)
+    return (
+      <EmptyState
+        icon={Smartphone}
+        title='No devices found'
+        hint='Register a device to start sending and receiving SMS.'
+      />
+    )
+
+  return (
+    <div className='space-y-4'>
+      <FiltersBar
+        devices={devices}
+        currentDevice={currentDevice}
+        onDeviceChange={handleDeviceChange}
+        messageType={messageType}
+        onMessageTypeChange={handleMessageTypeChange}
+        search={searchInput}
+        onSearchChange={setSearchInput}
+        onRefresh={handleRefresh}
+        isRefreshing={isRefreshing}
+        autoRefreshInterval={autoRefreshInterval}
+        onAutoRefreshIntervalChange={setAutoRefreshInterval}
+      />
+
+      {messagesError && (
+        <div className='flex h-full items-center justify-center'>
+          Error: {messagesError.message}
+        </div>
+      )}
+
+      {isLoadingMessages ? (
+        <div className='rounded-xl border border-border'>
+          {[1, 2, 3, 4].map((i) => (
+            <MessageRowSkeleton key={i} />
+          ))}
+        </div>
+      ) : !messagesError && messages.length === 0 ? (
+        // A search that found nothing is a different situation from a device
+        // that has never sent a message, and needs a different way out.
+        search ? (
+          <div className='rounded-xl border border-border'>
+            <EmptyState
+              icon={SearchX}
+              title={`No messages match "${search}"`}
+              hint='Try a different number or wording.'
+            />
+            <div className='flex justify-center pb-6'>
+              {/* Says what happens rather than repeating the label on the
+                  input's clear icon. */}
+              <Button variant='outline' size='sm' onClick={clearSearch}>
+                Show all messages
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className='rounded-xl border border-border'>
+            <EmptyState
+              icon={MessageSquare}
+              title='No messages yet'
+              hint='Messages sent or received by this device will appear here.'
+            />
+          </div>
+        )
+      ) : (
+        <div className='overflow-hidden rounded-xl border border-border'>
+          {days.map((day) => (
+            <section key={day.key}>
+              {/* Deliberately not sticky. On mobile it pinned to the same
+                  offset as the sticky search bar and landed on top of message
+                  rows, translucent, with text bleeding through. On desktop it
+                  covered rows scrolled beneath it and swallowed their clicks.
+                  A page holds 20 messages, so groups are short and a pinned
+                  header bought little in exchange for that. */}
+              <h3 className='border-b border-border bg-muted px-3 py-1.5 text-xs font-medium text-muted-foreground'>
+                {day.label}
+              </h3>
+              <div className='divide-y divide-border'>
+                {day.messages.map((message) => (
+                  <MessageRow
+                    key={message._id}
+                    message={message}
+                    device={activeDevice}
+                    onSelect={handleSelectMessage}
+                  />
+                ))}
+              </div>
+            </section>
+          ))}
+        </div>
+      )}
+
+      {/* A single page needs no pager. */}
+      {pagination.totalPages > 1 && (
+        <Pagination
+          page={page}
+          totalPages={pagination.totalPages}
+          onPageChange={setPage}
+        />
+      )}
+
+      {selectedMessage && (
+        <SmsDetailsDialog
+          message={selectedMessage}
+          fallbackDeviceId={currentDevice}
+          open={isDetailsDialogOpen}
+          onOpenChange={setIsDetailsDialogOpen}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/message-history/message-row.tsx b/web/app/(app)/dashboard/(components)/message-history/message-row.tsx
new file mode 100644
index 00000000..234dc9fd
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/message-history/message-row.tsx
@@ -0,0 +1,102 @@
+'use client'
+
+import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
+import { Skeleton } from '@/components/ui/skeleton'
+import RelativeTime from '@/components/shared/relative-time'
+import { cn } from '@/lib/utils'
+import { getStatusBadge } from './utils'
+import { messageDate, messageDirection } from './group'
+import type { Device } from '@/lib/api'
+import type { SmsMessage } from './types'
+
+type MessageRowProps = {
+  message: SmsMessage
+  device?: Device
+  onSelect: (message: SmsMessage) => void
+}
+
+// One list row rather than one bordered card per message: at 375px the cards
+// fitted three or four messages per screen. Rows are buttons so the list is
+// keyboard navigable, and stay tall enough to be a comfortable tap target.
+export function MessageRow({ message, device, onSelect }: MessageRowProps) {
+  const direction = messageDirection(message)
+  const isSent = direction === 'sent'
+  const badge = getStatusBadge(message.status)
+  const counterparty = isSent
+    ? message.recipient || message.recipients?.[0] || 'Unknown'
+    : message.sender || 'Unknown'
+
+  // Only devices on app version >= 14 report per-message status, and only for
+  // messages created after the rollout date.
+  const showStatus =
+    isSent &&
+    (device?.appVersionCode ?? 0) >= 14 &&
+    new Date(message?.createdAt ?? 0) > new Date('2025-06-05')
+
+  return (
+    <button
+      type='button'
+      onClick={() => onSelect(message)}
+      className='flex w-full items-start gap-3 px-3 py-3 text-left transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none'
+    >
+      <span
+        className={cn(
+          'mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full',
+          isSent
+            ? 'bg-primary/10 text-primary'
+            : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+        )}
+        aria-hidden
+      >
+        {isSent ? (
+          <ArrowUpRight className='h-3.5 w-3.5' />
+        ) : (
+          <ArrowDownLeft className='h-3.5 w-3.5' />
+        )}
+      </span>
+
+      <span className='min-w-0 flex-1'>
+        <span className='flex items-baseline justify-between gap-2'>
+          <span className='truncate text-sm font-medium'>
+            <span className='sr-only'>{isSent ? 'Sent to' : 'Received from'} </span>
+            {counterparty}
+          </span>
+          <span className='shrink-0 text-xs text-muted-foreground'>
+            <RelativeTime value={messageDate(message)} />
+          </span>
+        </span>
+
+        <span className='mt-0.5 line-clamp-2 block text-sm text-muted-foreground'>
+          {message.message}
+        </span>
+
+        {showStatus && (
+          <span
+            className={cn(
+              'mt-1.5 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium',
+              badge.color
+            )}
+          >
+            {badge.icon}
+            {badge.label}
+          </span>
+        )}
+      </span>
+    </button>
+  )
+}
+
+export function MessageRowSkeleton() {
+  return (
+    <div className='flex items-start gap-3 px-3 py-3'>
+      <Skeleton className='h-7 w-7 shrink-0 rounded-full' />
+      <div className='flex-1 space-y-2'>
+        <div className='flex justify-between gap-2'>
+          <Skeleton className='h-4 w-32' />
+          <Skeleton className='h-3 w-16' />
+        </div>
+        <Skeleton className='h-3 w-full max-w-sm' />
+      </div>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/message-history/sms-composer-dialog.tsx b/web/app/(app)/dashboard/(components)/message-history/sms-composer-dialog.tsx
new file mode 100644
index 00000000..3dcde6a4
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/message-history/sms-composer-dialog.tsx
@@ -0,0 +1,204 @@
+'use client'
+
+import { useEffect, type ComponentType } from 'react'
+import { useForm, Controller, useWatch } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { sendSmsSchema, type SendSmsFormData } from '@/lib/schemas'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+import { Spinner } from '@/components/ui/spinner'
+import { toast } from '@/hooks/use-toast'
+import { formatError } from '@/lib/utils/errorHandler'
+import { formatRateLimitMessageForToast } from '@/components/shared/rate-limit-error'
+import { formatDeviceName } from '@/lib/utils'
+import { useDevices, useSendSms } from '@/lib/api'
+import { getSegmentInfo } from '@/lib/sms'
+
+type SmsComposerDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onClose?: () => void
+  title: string
+  description: string
+  icon: ComponentType<{ className?: string }>
+  deviceId?: string
+  recipient?: string
+  submitLabel: string
+  successTitle: string
+  errorTitle: string
+}
+
+// Unified compose-and-send SMS dialog. Replaces the previously duplicated
+// ReplyDialog and FollowUpDialog, which differed only by copy and defaults.
+export default function SmsComposerDialog({
+  open,
+  onOpenChange,
+  onClose,
+  title,
+  description,
+  icon: Icon,
+  deviceId,
+  recipient,
+  submitLabel,
+  successTitle,
+  errorTitle,
+}: SmsComposerDialogProps) {
+  const { data: devices } = useDevices()
+  const { mutate: sendSms, isPending: isSendingSms } = useSendSms()
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<SendSmsFormData>({
+    resolver: zodResolver(sendSmsSchema),
+    defaultValues: {
+      deviceId,
+      recipients: [recipient ?? ''],
+      message: '',
+    },
+  })
+
+  useEffect(() => {
+    if (open) {
+      reset({ deviceId, recipients: [recipient ?? ''], message: '' })
+    }
+  }, [open, deviceId, recipient, reset])
+
+  const messageValue = useWatch({ control, name: 'message' }) ?? ''
+  const segments = getSegmentInfo(messageValue)
+
+  const onSubmit = (data: SendSmsFormData) =>
+    sendSms(data, {
+      onSuccess: () => {
+        toast({ title: successTitle })
+        setTimeout(() => {
+          onOpenChange(false)
+          onClose?.()
+        }, 1500)
+      },
+      onError: (error: unknown) => {
+        const formattedError = formatError(error)
+        const description = formattedError.isRateLimit
+          ? formatRateLimitMessageForToast(formattedError.rateLimitData)
+          : formattedError.message || 'Please try again.'
+        toast({ title: errorTitle, description, variant: 'destructive' })
+      },
+    })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className='sm:max-w-[500px]'>
+        <DialogHeader>
+          <DialogTitle className='flex items-center gap-2'>
+            <Icon className='h-5 w-5' />
+            {title}
+          </DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit(onSubmit)} className='space-y-4 mt-4'>
+          <div className='space-y-4'>
+            <div className='space-y-1.5'>
+              <Label htmlFor='composer-device'>Send from</Label>
+              <Controller
+                name='deviceId'
+                control={control}
+                render={({ field }) => (
+                  <Select
+                    onValueChange={field.onChange}
+                    value={field.value}
+                    defaultValue={deviceId}
+                  >
+                    <SelectTrigger id='composer-device'>
+                      <SelectValue placeholder='Select a device' />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {devices?.map((device) => (
+                        <SelectItem key={device._id} value={device._id}>
+                          {formatDeviceName(device)}{' '}
+                          {device.enabled ? '' : '(disabled)'}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              {errors.deviceId && (
+                <p className='text-sm text-destructive mt-1'>
+                  {errors.deviceId.message}
+                </p>
+              )}
+            </div>
+            <div className='space-y-1.5'>
+              {/* Real labels, not placeholder-as-label: a placeholder
+                  disappears on focus and is not reliably announced. */}
+              <Label htmlFor='composer-recipient'>To</Label>
+              <Input
+                id='composer-recipient'
+                type='tel'
+                placeholder='+14155550101'
+                {...register('recipients.0')}
+              />
+              {errors.recipients?.[0] && (
+                <p className='text-sm text-destructive mt-1'>
+                  {errors.recipients[0].message}
+                </p>
+              )}
+            </div>
+            <div className='space-y-1.5'>
+              <Label htmlFor='composer-message'>Message</Label>
+              <Textarea
+                id='composer-message'
+                placeholder='Type your message'
+                {...register('message')}
+                rows={4}
+              />
+              <p className='text-xs text-muted-foreground'>
+                {segments.length} characters, {segments.segments} segment
+                {segments.segments === 1 ? '' : 's'} ({segments.encoding})
+              </p>
+              {errors.message && (
+                <p className='text-sm text-destructive mt-1'>
+                  {errors.message.message}
+                </p>
+              )}
+            </div>
+          </div>
+          <div className='flex justify-end gap-2'>
+            <Button
+              type='button'
+              variant='outline'
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button type='submit' disabled={isSendingSms}>
+              {isSendingSms && (
+                <Spinner size='sm' className='mr-2' color='white' />
+              )}
+              {isSendingSms ? 'Sending...' : submitLabel}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/message-history/sms-details-dialog.tsx b/web/app/(app)/dashboard/(components)/message-history/sms-details-dialog.tsx
new file mode 100644
index 00000000..63cdd04a
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/message-history/sms-details-dialog.tsx
@@ -0,0 +1,219 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { ArrowDownLeft, ArrowUpRight, MessageSquare, Reply, Smartphone } from 'lucide-react'
+import { CopyButton } from '@/components/shared/copy-button'
+import { getStatusBadge } from './utils'
+import { messageDate, messageDirection } from './group'
+import { toExactLabel } from '@/components/shared/relative-time'
+import SmsComposerDialog from './sms-composer-dialog'
+import { cn } from '@/lib/utils'
+import type { SmsMessage } from './types'
+
+type SmsDetailsDialogProps = {
+  message: SmsMessage
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  // The device whose history is open. The messages endpoint populates
+  // `device`, but replying must still work if that is ever missing, otherwise
+  // the composer opens with no device selected and cannot send.
+  fallbackDeviceId?: string
+}
+
+// Ordered by what people open this for: the message itself first, then the
+// few facts that explain it. Copy actions sit next to the thing they copy,
+// rather than a single footer button whose target had to be inferred.
+export default function SmsDetailsDialog({
+  message,
+  open,
+  onOpenChange,
+  fallbackDeviceId,
+}: SmsDetailsDialogProps) {
+  const [isReplyOpen, setIsReplyOpen] = useState(false)
+  const [isFollowUpOpen, setIsFollowUpOpen] = useState(false)
+
+  const statusBadge = getStatusBadge(message?.status)
+  const isSent = messageDirection(message) === 'sent'
+  const counterparty = isSent
+    ? message.recipient || message.recipients?.[0] || 'Unknown'
+    : message.sender || 'Unknown'
+  const date = messageDate(message)
+  const composerDeviceId = message.device?._id || fallbackDeviceId
+  const deviceName = [message.device?.brand, message.device?.model]
+    .filter(Boolean)
+    .join(' ')
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className='sm:max-w-[540px]'>
+          {/* text-left overrides the primitive's mobile centring, which left
+              the title on the left and the date centred under it. */}
+          <DialogHeader className='pr-8 text-left'>
+            <DialogTitle className='flex items-center gap-2 text-base'>
+              <span
+                className={cn(
+                  'flex h-7 w-7 shrink-0 items-center justify-center rounded-full',
+                  isSent
+                    ? 'bg-primary/10 text-primary'
+                    : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                )}
+                aria-hidden
+              >
+                {isSent ? (
+                  <ArrowUpRight className='h-4 w-4' />
+                ) : (
+                  <ArrowDownLeft className='h-4 w-4' />
+                )}
+              </span>
+              <span className='min-w-0 truncate'>
+                {isSent ? 'To' : 'From'} {counterparty}
+              </span>
+              <CopyButton
+                value={counterparty}
+                label='Number'
+                className='h-7 w-7'
+              />
+            </DialogTitle>
+            {/* Exact time as text: the hover tooltip in the list is not
+                reachable on touch. */}
+            <DialogDescription>
+              {date ? toExactLabel(date) : 'Date unknown'}
+            </DialogDescription>
+          </DialogHeader>
+
+          {/* The message body leads: it is the reason this dialog is open. */}
+          <div className='relative'>
+            <div className='max-h-56 overflow-y-auto whitespace-pre-wrap break-words rounded-lg bg-muted p-3 pr-11 text-sm'>
+              {message.message}
+            </div>
+            <CopyButton
+              value={message.message ?? ''}
+              label='Message'
+              className='absolute right-1.5 top-1.5 h-7 w-7 bg-background/70 backdrop-blur hover:bg-background'
+            />
+          </div>
+
+          {/* Facts as chips rather than a label/value table: direction and
+              number were already in the header, so the table mostly repeated
+              itself. */}
+          <div className='flex flex-wrap items-center gap-2 text-xs'>
+            <span
+              className={cn(
+                'inline-flex items-center gap-1 rounded-full px-2 py-1 font-medium',
+                statusBadge.color
+              )}
+            >
+              {statusBadge.icon}
+              {statusBadge.label}
+            </span>
+
+            {deviceName && (
+              <span className='inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-muted-foreground'>
+                <Smartphone className='h-3 w-3' />
+                {deviceName}
+              </span>
+            )}
+
+            {message.gatewayMessageId && (
+              <span className='inline-flex min-w-0 items-center gap-1 rounded-full bg-muted py-0.5 pl-2.5 pr-0.5 text-muted-foreground'>
+                <span className='shrink-0'>ID</span>
+                <span className='truncate font-mono'>
+                  {message.gatewayMessageId}
+                </span>
+                <CopyButton
+                  value={message.gatewayMessageId}
+                  label='Gateway ID'
+                  className='h-6 w-6'
+                />
+              </span>
+            )}
+          </div>
+
+          {(message.errorCode || message.errorMessage) && (
+            <div className='space-y-1.5 rounded-lg border border-destructive/30 bg-destructive/5 p-3'>
+              <p className='text-sm font-medium text-destructive'>
+                Delivery failed
+              </p>
+              {message.errorCode && (
+                <p className='break-words text-xs text-destructive'>
+                  Code: {message.errorCode}
+                </p>
+              )}
+              {message.errorMessage && (
+                <p className='max-h-24 overflow-y-auto break-words text-xs text-destructive'>
+                  {message.errorMessage}
+                </p>
+              )}
+            </div>
+          )}
+
+          <div className='flex justify-end'>
+            {isSent ? (
+              <Button
+                size='sm'
+                className='w-full sm:w-auto'
+                onClick={() => {
+                  onOpenChange(false)
+                  setIsFollowUpOpen(true)
+                }}
+              >
+                <MessageSquare className='h-4 w-4' />
+                Follow up
+              </Button>
+            ) : (
+              <Button
+                size='sm'
+                className='w-full sm:w-auto'
+                onClick={() => {
+                  onOpenChange(false)
+                  setIsReplyOpen(true)
+                }}
+              >
+                <Reply className='h-4 w-4' />
+                Reply
+              </Button>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {isReplyOpen && (
+        <SmsComposerDialog
+          open={isReplyOpen}
+          onOpenChange={setIsReplyOpen}
+          title={`Reply to ${counterparty}`}
+          description='Send a reply to this sender.'
+          icon={Reply}
+          deviceId={composerDeviceId}
+          recipient={message.sender}
+          submitLabel='Send reply'
+          successTitle='Reply sent'
+          errorTitle='Could not send the reply'
+        />
+      )}
+      {isFollowUpOpen && (
+        <SmsComposerDialog
+          open={isFollowUpOpen}
+          onOpenChange={setIsFollowUpOpen}
+          title={`Follow up with ${counterparty}`}
+          description='Send another message to this recipient.'
+          icon={MessageSquare}
+          deviceId={composerDeviceId}
+          recipient={message.recipient || message.recipients?.[0] || ''}
+          submitLabel='Send follow up'
+          successTitle='Follow up sent'
+          errorTitle='Could not send the follow up'
+        />
+      )}
+    </>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/message-history/types.ts b/web/app/(app)/dashboard/(components)/message-history/types.ts
new file mode 100644
index 00000000..8e97acbb
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/message-history/types.ts
@@ -0,0 +1,29 @@
+import type { Device } from '@/lib/api'
+
+// Shape of a message row as returned by the device messages endpoint. Kept
+// permissive to match the backend payloads (sent and received rows differ).
+export type SmsMessage = {
+  _id: string
+  message?: string
+  status?: string
+  // Direction as recorded by the API (SMSType). Optional because rows written
+  // before it existed do not carry it.
+  type?: 'sent' | 'received'
+  sender?: string
+  recipient?: string
+  recipients?: string[]
+  requestedAt?: string
+  receivedAt?: string
+  createdAt?: string
+  gatewayMessageId?: string
+  errorCode?: string
+  errorMessage?: string
+  device?: Device
+}
+
+export type MessagesPagination = {
+  page: number
+  limit: number
+  total: number
+  totalPages: number
+}
diff --git a/web/app/(app)/dashboard/(components)/message-history/utils.tsx b/web/app/(app)/dashboard/(components)/message-history/utils.tsx
new file mode 100644
index 00000000..c63121bf
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/message-history/utils.tsx
@@ -0,0 +1,59 @@
+import { Check, Timer, X } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+// Shared helpers for the message-history screen.
+
+export function formatTimestamp(timestamp: string | null | undefined) {
+  if (!timestamp) return 'N/A'
+  return new Date(timestamp).toLocaleString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+}
+
+export type StatusBadge = {
+  color: string
+  icon: ReactNode
+  label: string
+}
+
+export function getStatusBadge(status: string | undefined): StatusBadge {
+  const normalizedStatus = status?.toLowerCase() || 'pending'
+  switch (normalizedStatus) {
+    case 'pending':
+      return {
+        color:
+          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
+        icon: <Timer className='h-3 w-3' />,
+        label: 'Pending',
+      }
+    case 'sent':
+      return {
+        color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
+        icon: <Check className='h-3 w-3' />,
+        label: 'Sent',
+      }
+    case 'delivered':
+      return {
+        color:
+          'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+        icon: <Check className='h-3 w-3' />,
+        label: 'Delivered',
+      }
+    case 'failed':
+      return {
+        color: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
+        icon: <X className='h-3 w-3' />,
+        label: 'Failed',
+      }
+    default:
+      return {
+        color: 'bg-muted text-muted-foreground',
+        icon: <Timer className='h-3 w-3' />,
+        label: normalizedStatus,
+      }
+  }
+}
diff --git a/web/app/(app)/dashboard/(components)/messaging.tsx b/web/app/(app)/dashboard/(components)/messaging.tsx
deleted file mode 100644
index db8f1549..00000000
--- a/web/app/(app)/dashboard/(components)/messaging.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import SendSms from './send-sms'
-import MessageHistory from './message-history'
-import BulkSMSSend from './bulk-sms-send'
-
-export default function Messaging() {
-  const [currentTab, setCurrentTab] = useState('send')
-
-  const handleTabChange = (value: string) => {
-    setCurrentTab(value)
-  }
-
-  return (
-    <div className='grid gap-6 w-full max-w-sm md:max-w-3xl'>
-      <Tabs
-        value={currentTab}
-        onValueChange={handleTabChange}
-        className='space-y-4'
-      >
-        <TabsList className='flex'>
-          <TabsTrigger value='send' className='flex-1'>
-            Send
-          </TabsTrigger>
-          <TabsTrigger value='bulk-send' className='flex-1'>
-            Bulk Send{' '}
-          </TabsTrigger>
-          <TabsTrigger value='history' className='flex-1'>
-            History
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value='send' className='space-y-4'>
-          <SendSms />
-        </TabsContent>
-
-        <TabsContent value='bulk-send' className='space-y-4'>
-          <div className='grid gap-6 w-full'>
-            <BulkSMSSend />
-          </div>
-        </TabsContent>
-
-        <TabsContent value='history' className='space-y-4'>
-          <MessageHistory />
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}
diff --git a/web/app/(app)/dashboard/(components)/nav-items.ts b/web/app/(app)/dashboard/(components)/nav-items.ts
new file mode 100644
index 00000000..7b7c1b0d
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/nav-items.ts
@@ -0,0 +1,37 @@
+import {
+  LayoutDashboard,
+  MessageSquareText,
+  Webhook,
+  Users,
+  UserCircle,
+  type LucideIcon,
+} from 'lucide-react'
+
+export type NavItem = {
+  href: string
+  label: string
+  icon: LucideIcon
+  // The mobile tab bar caps at 4 items (375px width); items marked
+  // mobileHidden appear only in the desktop sidebar and the command palette.
+  mobileHidden?: boolean
+}
+
+// Primary dashboard navigation, shared by the desktop sidebar, the mobile tab
+// bar, and the command palette so they never drift out of sync.
+export const navItems: NavItem[] = [
+  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
+  { href: '/dashboard/messaging', label: 'Messaging', icon: MessageSquareText },
+  { href: '/dashboard/webhooks', label: 'Webhooks', icon: Webhook, mobileHidden: true },
+  { href: '/dashboard/community', label: 'Community', icon: Users },
+  { href: '/dashboard/account', label: 'Account', icon: UserCircle },
+]
+
+export const mobileNavItems = navItems.filter((item) => !item.mobileHidden)
+
+// /dashboard must match exactly; deeper routes match by prefix so nested pages
+// keep their parent highlighted.
+export function isNavItemActive(href: string, pathname: string): boolean {
+  return href === '/dashboard'
+    ? pathname === href
+    : pathname === href || pathname.startsWith(`${href}/`) || pathname.startsWith(href)
+}
diff --git a/web/app/(app)/dashboard/(components)/overview.tsx b/web/app/(app)/dashboard/(components)/overview.tsx
index eec5f196..7fdc3f69 100644
--- a/web/app/(app)/dashboard/(components)/overview.tsx
+++ b/web/app/(app)/dashboard/(components)/overview.tsx
@@ -1,74 +1,94 @@
 'use client'
 
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { BarChart3, Smartphone, Key, MessageSquare, TrendingUp } from 'lucide-react'
+import { Card, CardContent } from '@/components/ui/card'
+import { BarChart3, Smartphone, Key, MessageSquare } from 'lucide-react'
 import GetStartedCard from './get-started'
-import { ApiEndpoints } from '@/config/api'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { useQuery } from '@tanstack/react-query'
+import UsageSummary from './billing/usage-summary'
+import { useApiKeys, useDevices, useGatewayStats } from '@/lib/api'
 import { Skeleton } from '@/components/ui/skeleton'
-// import GetStartedCard from "@/components/get-started-card";
 
-export const StatCard = ({ title, value, icon: Icon, description }) => {
+// Compact all-time totals. Deliberately no trend indicators: the stats
+// endpoint returns running totals with no time window, so there is nothing to
+// compare against and any arrow would be invented.
+function Stat({
+  label,
+  value,
+  caption,
+  icon: Icon,
+}: {
+  label: string
+  value: string | number | undefined
+  caption: string
+  icon: typeof MessageSquare
+}) {
   return (
-    <Card className="overflow-hidden transition-all hover:shadow-md">
-      <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-        <CardTitle className='text-sm font-medium'>{title}</CardTitle>
-        <div className="rounded-full bg-primary/10 p-2">
-          <Icon className='h-4 w-4 text-primary' />
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className='text-2xl font-bold'>
-          {value !== undefined ? value : <Skeleton className='h-6 w-16' />}
+    <div className='flex items-center gap-3 px-4 py-3'>
+      <div className='rounded-full bg-primary/10 p-2'>
+        <Icon className='h-4 w-4 text-primary' />
+      </div>
+      <div className='min-w-0'>
+        <div className='text-lg font-bold leading-tight'>
+          {value !== undefined ? value : <Skeleton className='h-5 w-12' />}
         </div>
-        <p className='text-xs text-muted-foreground mt-1 flex items-center'>
-          {description}
-          {value !== undefined && <TrendingUp className="ml-1 h-3 w-3 text-green-500" />}
+        <p className='truncate text-xs text-muted-foreground'>
+          {label}
+          {caption && <span className='ml-1 opacity-70'>{caption}</span>}
         </p>
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   )
 }
 
-export default function Overview() {
-  const { data: stats } = useQuery({
-    queryKey: ['stats'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.gateway.getStats())
-        .then((res) => res.data?.data),
-  })
+export function Totals() {
+  const { data: stats } = useGatewayStats()
+  const { data: devices } = useDevices()
+  const { data: apiKeys } = useApiKeys('active')
+
+  // The stats endpoint counts every device, enabled or not, so "enabled" has
+  // to be derived from the device list we already fetch.
+  const enabledDevices = devices?.filter((d) => d.enabled).length
+  const totalDevices = devices?.length ?? stats?.totalDeviceCount
 
   return (
-    <div className='space-y-6'>
-      <GetStartedCard />
-      <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4'>
-        <StatCard
-          title='Total SMS Sent'
+    <Card className='overflow-hidden'>
+      <CardContent className='grid grid-cols-1 divide-y divide-border p-0 sm:grid-cols-2 lg:grid-cols-4'>
+        <Stat
+          label='SMS sent'
+          caption='all time'
           value={stats?.totalSentSMSCount?.toLocaleString()}
           icon={MessageSquare}
-          description='Since last year'
         />
-        <StatCard
-          title='Active Devices'
-          value={stats?.totalDeviceCount}
+        <Stat
+          label='SMS received'
+          caption='all time'
+          value={stats?.totalReceivedSMSCount?.toLocaleString()}
+          icon={BarChart3}
+        />
+        <Stat
+          label='Devices'
+          caption={
+            enabledDevices !== undefined ? `${enabledDevices} enabled` : ''
+          }
+          value={totalDevices}
           icon={Smartphone}
-          description='Connected now'
         />
-        <StatCard
-          title='API Keys'
-          value={stats?.totalApiKeyCount}
+        <Stat
+          label='API keys'
+          caption='active'
+          value={apiKeys?.length ?? stats?.totalApiKeyCount}
           icon={Key}
-          description='Active keys'
         />
-        <StatCard
-          title='SMS Received'
-          value={stats?.totalReceivedSMSCount?.toLocaleString()}
-          icon={BarChart3}
-          description='Since last year'
-        />
-      </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function Overview() {
+  return (
+    <div className='space-y-6'>
+      <GetStartedCard />
+      <UsageSummary />
+      <Totals />
     </div>
   )
 }
diff --git a/web/app/(app)/dashboard/(components)/search/command-menu.tsx b/web/app/(app)/dashboard/(components)/search/command-menu.tsx
new file mode 100644
index 00000000..e953c2ac
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/search/command-menu.tsx
@@ -0,0 +1,141 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { signOut } from 'next-auth/react'
+import { useTheme } from 'next-themes'
+import { ArrowUpRight, Laptop, LogOut, Moon, Sun } from 'lucide-react'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command'
+import { Routes } from '@/config/routes'
+import { searchEntries, searchGroupOrder } from './search-registry'
+
+// Cmd/Ctrl+K palette. Open state is owned by the dashboard layout so the same
+// dialog can be opened from the sidebar trigger (desktop) or the header
+// trigger (mobile).
+export default function CommandMenu({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const router = useRouter()
+  const { setTheme } = useTheme()
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        onOpenChange(!open)
+      }
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [open, onOpenChange])
+
+  const go = (href: string, external?: boolean) => {
+    onOpenChange(false)
+    if (external) {
+      window.open(href, '_blank', 'noopener,noreferrer')
+      return
+    }
+    router.push(href)
+  }
+
+  return (
+    <CommandDialog open={open} onOpenChange={onOpenChange}>
+      <CommandInput placeholder='Search pages, settings and actions…' />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+
+        {searchGroupOrder.map((group) => {
+          const entries = searchEntries.filter((e) => e.group === group)
+          if (entries.length === 0) return null
+
+          return (
+            <CommandGroup key={group} heading={group}>
+              {entries.map((entry) => (
+                <CommandItem
+                  key={entry.href}
+                  value={entry.label}
+                  keywords={entry.keywords}
+                  onSelect={() => go(entry.href, entry.external)}
+                >
+                  <entry.icon className='mr-2 h-4 w-4 shrink-0' />
+                  <span>{entry.label}</span>
+                  {entry.description && (
+                    <span className='ml-2 truncate text-xs text-muted-foreground'>
+                      {entry.description}
+                    </span>
+                  )}
+                  {entry.external && (
+                    <ArrowUpRight className='ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground' />
+                  )}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          )
+        })}
+
+        <CommandSeparator />
+
+        <CommandGroup heading='Actions'>
+          {/* The theme control lives in the desktop sidebar, so the palette is
+              how mobile users reach it. */}
+          <CommandItem
+            value='Light theme'
+            keywords={['theme', 'light', 'appearance', 'bright']}
+            onSelect={() => {
+              onOpenChange(false)
+              setTheme('light')
+            }}
+          >
+            <Sun className='mr-2 h-4 w-4' />
+            Light theme
+          </CommandItem>
+          <CommandItem
+            value='Dark theme'
+            keywords={['theme', 'dark', 'appearance', 'night']}
+            onSelect={() => {
+              onOpenChange(false)
+              setTheme('dark')
+            }}
+          >
+            <Moon className='mr-2 h-4 w-4' />
+            Dark theme
+          </CommandItem>
+          <CommandItem
+            value='System theme'
+            keywords={['theme', 'system', 'auto', 'appearance']}
+            onSelect={() => {
+              onOpenChange(false)
+              setTheme('system')
+            }}
+          >
+            <Laptop className='mr-2 h-4 w-4' />
+            System theme
+          </CommandItem>
+          <CommandItem
+            value='Log out'
+            keywords={['logout', 'sign out', 'exit', 'leave']}
+            onSelect={() => {
+              onOpenChange(false)
+              signOut({ callbackUrl: Routes.login })
+            }}
+          >
+            <LogOut className='mr-2 h-4 w-4' />
+            Log out
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/search/search-registry.test.ts b/web/app/(app)/dashboard/(components)/search/search-registry.test.ts
new file mode 100644
index 00000000..f88fa8e7
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/search/search-registry.test.ts
@@ -0,0 +1,120 @@
+import { describe, expect, it } from 'vitest'
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { join } from 'node:path'
+import { searchEntries, searchGroupOrder } from './search-registry'
+
+const DASHBOARD_DIR = join(process.cwd(), 'app', '(app)', 'dashboard')
+
+// Routes that exist only to redirect elsewhere. They have no content of their
+// own, so the destination is what belongs in search.
+const REDIRECT_ONLY = new Set([
+  '/dashboard/account',
+  '/dashboard/account/change-password',
+  '/dashboard/account/edit-profile',
+  '/dashboard/account/get-support',
+  '/dashboard/account/delete-account',
+])
+
+// Walk the App Router tree and derive the route for every page.tsx, skipping
+// (group) segments the way Next does.
+function collectRoutes(dir: string, route = '/dashboard'): string[] {
+  const routes: string[] = []
+
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry)
+
+    if (statSync(full).isDirectory()) {
+      // Route groups like (components) do not contribute a path segment, and
+      // (components) holds implementation files rather than routes.
+      const isGroup = entry.startsWith('(') && entry.endsWith(')')
+      routes.push(...collectRoutes(full, isGroup ? route : `${route}/${entry}`))
+      continue
+    }
+
+    if (entry === 'page.tsx') routes.push(route)
+  }
+
+  return routes
+}
+
+function isRedirectOnly(route: string): boolean {
+  return REDIRECT_ONLY.has(route)
+}
+
+describe('search registry', () => {
+  const hrefs = new Set(searchEntries.map((e) => e.href))
+
+  it('covers every dashboard page that is not a pure redirect', () => {
+    const routes = collectRoutes(DASHBOARD_DIR).filter((r) => !isRedirectOnly(r))
+    const missing = routes.filter((r) => !hrefs.has(r))
+
+    expect(
+      missing,
+      `these routes exist but are not searchable, add them to search-registry.ts: ${missing.join(', ')}`
+    ).toEqual([])
+  })
+
+  it('does not list redirect-only routes', () => {
+    const listedRedirects = [...hrefs].filter(isRedirectOnly)
+    expect(listedRedirects).toEqual([])
+  })
+
+  it('has unique hrefs', () => {
+    expect(hrefs.size).toBe(searchEntries.length)
+  })
+
+  it('gives every entry enough keywords to be findable', () => {
+    for (const entry of searchEntries) {
+      expect(
+        entry.keywords.length,
+        `${entry.label} needs at least 3 keywords`
+      ).toBeGreaterThanOrEqual(3)
+    }
+  })
+
+  it('only uses groups that the palette renders', () => {
+    for (const entry of searchEntries) {
+      expect(searchGroupOrder).toContain(entry.group)
+    }
+  })
+
+  it('marks off-site destinations as external', () => {
+    for (const entry of searchEntries) {
+      const isAbsolute = entry.href.startsWith('http')
+      expect(
+        Boolean(entry.external),
+        `${entry.label} href is ${entry.href}`
+      ).toBe(isAbsolute)
+    }
+  })
+
+  it('finds bulk send by the words a user would actually type', () => {
+    const bulk = searchEntries.find(
+      (e) => e.href === '/dashboard/messaging/bulk'
+    )
+    expect(bulk).toBeDefined()
+    for (const term of ['csv', 'import', 'campaign', 'spreadsheet']) {
+      expect(bulk!.keywords).toContain(term)
+    }
+  })
+
+  it('finds billing by invoice and quota wording', () => {
+    const billing = searchEntries.find(
+      (e) => e.href === '/dashboard/account/billing'
+    )
+    expect(billing).toBeDefined()
+    for (const term of ['invoice', 'quota', 'upgrade', 'cancel']) {
+      expect(billing!.keywords).toContain(term)
+    }
+  })
+})
+
+describe('search registry source', () => {
+  it('is referenced by the command palette', () => {
+    const palette = readFileSync(
+      join(__dirname, 'command-menu.tsx'),
+      'utf8'
+    )
+    expect(palette).toContain('search-registry')
+  })
+})
diff --git a/web/app/(app)/dashboard/(components)/search/search-registry.ts b/web/app/(app)/dashboard/(components)/search/search-registry.ts
new file mode 100644
index 00000000..dd3df02f
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/search/search-registry.ts
@@ -0,0 +1,360 @@
+import {
+  Activity,
+  BookOpen,
+  Code2,
+  CreditCard,
+  Download,
+  Heart,
+  History,
+  LayoutDashboard,
+  LifeBuoy,
+  ListChecks,
+  Send,
+  Shield,
+  Upload,
+  UserCircle,
+  Users,
+  Webhook,
+  type LucideIcon,
+} from 'lucide-react'
+import { Routes } from '@/config/routes'
+
+export type SearchGroup =
+  | 'Overview'
+  | 'Messaging'
+  | 'Webhooks'
+  | 'Account'
+  | 'Resources'
+
+export type SearchEntry = {
+  href: string
+  label: string
+  group: SearchGroup
+  icon: LucideIcon
+  // Muted secondary line, so a result explains itself.
+  description?: string
+  // Matched by cmdk in addition to the label. These are the words people
+  // actually type ("csv", "invoice", "password"), not the words we chose for
+  // the nav, so search works without the user knowing our information
+  // architecture.
+  keywords: string[]
+  external?: boolean
+}
+
+export const searchEntries: SearchEntry[] = [
+  {
+    href: '/dashboard',
+    label: 'Dashboard',
+    group: 'Overview',
+    icon: LayoutDashboard,
+    description: 'Usage, activity and devices',
+    keywords: [
+      'home',
+      'overview',
+      'stats',
+      'usage',
+      'quota',
+      'limit',
+      'activity',
+      'devices',
+      'summary',
+      'start',
+    ],
+  },
+  {
+    href: '/dashboard/messaging',
+    label: 'Send SMS',
+    group: 'Messaging',
+    icon: Send,
+    description: 'Compose a message to one or more recipients',
+    keywords: [
+      'send',
+      'sms',
+      'message',
+      'text',
+      'compose',
+      'new message',
+      'single',
+      'write',
+      'reply',
+    ],
+  },
+  {
+    href: '/dashboard/messaging/bulk',
+    label: 'Bulk send',
+    group: 'Messaging',
+    icon: Upload,
+    description: 'Upload a CSV and send from a template',
+    keywords: [
+      'bulk',
+      'csv',
+      'import',
+      'upload',
+      'campaign',
+      'mass',
+      'batch',
+      'many',
+      'broadcast',
+      'spreadsheet',
+      'excel',
+      'template',
+      'blast',
+    ],
+  },
+  {
+    href: '/dashboard/messaging/history',
+    label: 'Message history',
+    group: 'Messaging',
+    icon: History,
+    description: 'Sent and received messages',
+    keywords: [
+      'history',
+      'sent',
+      'received',
+      'inbox',
+      'outbox',
+      'log',
+      'logs',
+      'delivery',
+      'delivered',
+      'failed',
+      'status',
+      'search messages',
+      'conversation',
+    ],
+  },
+  {
+    href: '/dashboard/messaging/api-guide',
+    label: 'API guide',
+    group: 'Messaging',
+    icon: Code2,
+    description: 'Integrate textbee into your app',
+    keywords: [
+      'api',
+      'docs',
+      'documentation',
+      'curl',
+      'code',
+      'integration',
+      'rest',
+      'endpoint',
+      'sdk',
+      'example',
+      'developer',
+      'reference',
+    ],
+  },
+  {
+    href: '/dashboard/webhooks',
+    label: 'Webhooks',
+    group: 'Webhooks',
+    icon: Webhook,
+    description: 'Get notified at your endpoints on SMS events',
+    keywords: [
+      'webhook',
+      'subscription',
+      'endpoint',
+      'callback',
+      'events',
+      'notify',
+      'notification',
+      'integrate',
+      'url',
+    ],
+  },
+  {
+    href: '/dashboard/webhooks/deliveries',
+    label: 'Webhook deliveries',
+    group: 'Webhooks',
+    icon: ListChecks,
+    description: 'Delivery attempts and failures',
+    keywords: [
+      'deliveries',
+      'delivery',
+      'logs',
+      'failed',
+      'failures',
+      'retry',
+      'history',
+      'payload',
+      'attempts',
+      'debug',
+    ],
+  },
+  {
+    href: '/dashboard/community',
+    label: 'Community',
+    group: 'Overview',
+    icon: Users,
+    description: 'Discord, GitHub and socials',
+    keywords: [
+      'community',
+      'discord',
+      'github',
+      'help',
+      'chat',
+      'social',
+      'forum',
+      'twitter',
+    ],
+  },
+  {
+    href: '/dashboard/account/billing',
+    label: 'Billing & plan',
+    group: 'Account',
+    icon: CreditCard,
+    description: 'Subscription, usage limits and upgrades',
+    keywords: [
+      'billing',
+      'plan',
+      'subscription',
+      'upgrade',
+      'downgrade',
+      'pro',
+      'free',
+      'invoice',
+      'receipt',
+      'payment',
+      'card',
+      'price',
+      'pricing',
+      'quota',
+      'limit',
+      'cancel',
+      'renew',
+      'refund',
+    ],
+  },
+  {
+    href: '/dashboard/account/profile',
+    label: 'Profile',
+    group: 'Account',
+    icon: UserCircle,
+    description: 'Your name, email and avatar',
+    keywords: [
+      'profile',
+      'name',
+      'email',
+      'avatar',
+      'photo',
+      'personal',
+      'edit account',
+      'details',
+    ],
+  },
+  {
+    href: '/dashboard/account/security',
+    label: 'Security',
+    group: 'Account',
+    icon: Shield,
+    description: 'Password and account deletion',
+    keywords: [
+      'password',
+      'change password',
+      'reset password',
+      'security',
+      'delete account',
+      'close account',
+      'danger',
+      'danger zone',
+      '2fa',
+      'login',
+    ],
+  },
+  {
+    href: '/dashboard/account/support',
+    label: 'Support',
+    group: 'Account',
+    icon: LifeBuoy,
+    description: 'Get help from the team',
+    keywords: [
+      'support',
+      'contact',
+      'help',
+      'ticket',
+      'issue',
+      'bug',
+      'problem',
+      'question',
+      'email us',
+      'feedback',
+    ],
+  },
+
+  // External destinations. These open in a new tab rather than routing.
+  {
+    href: Routes.downloadAndroidApp,
+    label: 'Download Android app',
+    group: 'Resources',
+    icon: Download,
+    external: true,
+    keywords: [
+      'apk',
+      'install',
+      'download',
+      'phone',
+      'android',
+      'app',
+      'mobile',
+      'device',
+    ],
+  },
+  {
+    href: Routes.quickstart,
+    label: 'Quick start',
+    group: 'Resources',
+    icon: BookOpen,
+    external: true,
+    keywords: [
+      'getting started',
+      'setup',
+      'tutorial',
+      'onboarding',
+      'guide',
+      'how to',
+      'first steps',
+    ],
+  },
+  {
+    href: Routes.statusPage,
+    label: 'System status',
+    group: 'Resources',
+    icon: Activity,
+    external: true,
+    keywords: [
+      'status',
+      'uptime',
+      'incident',
+      'down',
+      'outage',
+      'health',
+      'downtime',
+    ],
+  },
+  {
+    href: Routes.contribute,
+    label: 'Contribute',
+    group: 'Resources',
+    icon: Heart,
+    external: true,
+    keywords: [
+      'contribute',
+      'sponsor',
+      'donate',
+      'github',
+      'open source',
+      'support the project',
+      'star',
+    ],
+  },
+]
+
+// Rendering order for the palette's group headings.
+export const searchGroupOrder: SearchGroup[] = [
+  'Overview',
+  'Messaging',
+  'Webhooks',
+  'Account',
+  'Resources',
+]
+
diff --git a/web/app/(app)/dashboard/(components)/search/search-trigger.tsx b/web/app/(app)/dashboard/(components)/search/search-trigger.tsx
new file mode 100644
index 00000000..d45b4593
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/search/search-trigger.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import { Search } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+// Split out from the palette itself so the same open-state can be triggered
+// from the sidebar (desktop) and the header (mobile). Previously the trigger
+// and dialog were one component living inside the `hidden md:flex` sidebar,
+// which meant mobile had no way to search at all.
+export default function SearchTrigger({
+  onOpen,
+  variant = 'full',
+  className,
+}: {
+  onOpen: () => void
+  variant?: 'full' | 'icon'
+  className?: string
+}) {
+  if (variant === 'icon') {
+    return (
+      <button
+        type='button'
+        onClick={onOpen}
+        aria-label='Search'
+        className={cn(
+          'inline-flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
+          className
+        )}
+      >
+        <Search className='h-5 w-5' />
+      </button>
+    )
+  }
+
+  return (
+    <button
+      type='button'
+      onClick={onOpen}
+      className={cn(
+        'inline-flex w-full items-center gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted',
+        className
+      )}
+    >
+      <Search className='h-4 w-4' />
+      <span className='flex-1 text-left'>Search…</span>
+      <kbd className='pointer-events-none hidden select-none items-center gap-1 rounded border bg-background px-1.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex'>
+        ⌘K
+      </kbd>
+    </button>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/send-sms.tsx b/web/app/(app)/dashboard/(components)/send-sms.tsx
deleted file mode 100644
index 83531e81..00000000
--- a/web/app/(app)/dashboard/(components)/send-sms.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { sendSmsSchema } from '@/lib/schemas'
-import type { SendSmsFormData } from '@/lib/schemas'
-import { MessageSquare, Send, Plus, X, UserCircle, Check } from 'lucide-react'
-import { useToast } from '@/hooks/use-toast'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
-import { useMutation, useQuery } from '@tanstack/react-query'
-import { Spinner } from '@/components/ui/spinner'
-import { formatError } from '@/lib/utils/errorHandler'
-import { RateLimitError } from '@/components/shared/rate-limit-error'
-import { formatDeviceName } from '@/lib/utils'
-
-export default function SendSms() {
-  const { data: devices, isLoading: isLoadingDevices } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.gateway.listDevices())
-        .then((res) => res.data),
-  })
-
-  const {
-    mutate: sendSms,
-    isPending: isSendingSms,
-    error: sendSmsError,
-    isSuccess: isSendSmsSuccess,
-  } = useMutation({
-    mutationKey: ['send-sms'],
-    mutationFn: (data: SendSmsFormData) =>
-      httpBrowserClient.post(ApiEndpoints.gateway.sendSMS(data.deviceId), data),
-  })
-
-  const { toast } = useToast()
-  const {
-    register,
-    control,
-    handleSubmit,
-    setValue,
-    formState: { errors },
-  } = useForm<SendSmsFormData>({
-    resolver: zodResolver(sendSmsSchema),
-    defaultValues: {
-      deviceId:
-        devices?.data?.length === 1 ? devices?.data?.[0]?._id : undefined,
-      recipients: [''],
-      message: '',
-    },
-  })
-
-  const { fields, append, remove } = useFieldArray({
-    control,
-    // @ts-expect-error
-    name: 'recipients',
-  })
-
-  const selectedDeviceId = useWatch({
-    control,
-    name: 'deviceId',
-  })
-
-  const selectedDevice = devices?.data?.find(
-    (device) => device._id === selectedDeviceId
-  )
-
-  const availableSims =
-    selectedDevice?.simInfo?.sims &&
-    Array.isArray(selectedDevice.simInfo.sims) &&
-    selectedDevice.simInfo.sims.length > 0
-      ? selectedDevice.simInfo.sims
-      : []
-
-  useEffect(() => {
-    if (selectedDeviceId) {
-      setValue('simSubscriptionId', undefined)
-    }
-  }, [selectedDeviceId, setValue])
-
-  return (
-    <div>
-      <Card>
-        <CardHeader>
-          <div className='flex items-center gap-2'>
-            <MessageSquare className='h-5 w-5' />
-            <CardTitle>Send SMS</CardTitle>
-          </div>
-          <CardDescription>Send a message to any recipient(s)</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form
-            onSubmit={(e) => handleSubmit((data) => sendSms(data))(e)}
-            className='space-y-4'
-          >
-            <div className='space-y-4'>
-              <div>
-                <Controller
-                  name='deviceId'
-                  control={control}
-                  render={({ field }) => (
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <SelectTrigger>
-                        <SelectValue placeholder='Select a device' />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {devices?.data?.map((device) => (
-                          <SelectItem
-                            key={device._id}
-                            value={device._id}
-                            disabled={!device.enabled}
-                          >
-                            {formatDeviceName(device)}{' '}
-                            {device.enabled ? '' : '(disabled)'}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-                {errors.deviceId && (
-                  <p className='text-sm text-destructive mt-1'>
-                    {errors.deviceId.message}
-                  </p>
-                )}
-              </div>
-
-              {availableSims.length > 1 && (
-                <div>
-                  <Controller
-                    name='simSubscriptionId'
-                    control={control}
-                    render={({ field }) => (
-                      <Select
-                        onValueChange={(value) =>
-                          field.onChange(Number(value))
-                        }
-                        value={field.value?.toString()}
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder='Select SIM (optional)' />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {availableSims.map((sim) => (
-                            <SelectItem
-                              key={sim.subscriptionId}
-                              value={sim.subscriptionId.toString()}
-                            >
-                              {sim.displayName || 'SIM'} ({sim.subscriptionId})
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    )}
-                  />
-                  {errors.simSubscriptionId && (
-                    <p className='text-sm text-destructive mt-1'>
-                      {errors.simSubscriptionId.message}
-                    </p>
-                  )}
-                </div>
-              )}
-
-              <div className='space-y-2'>
-                {fields.map((field, index) => (
-                  <div key={field.id}>
-                    <div className='flex gap-2'>
-                      <Input
-                        type='tel'
-                        placeholder='Phone Number'
-                        {...register(`recipients.${index}`)}
-                      />
-                      <Button
-                        type='button'
-                        variant='ghost'
-                        size='icon'
-                        onClick={() => remove(index)}
-                        disabled={index === 0 && fields?.length === 1}
-                      >
-                        <X className='h-4 w-4' />
-                      </Button>
-                    </div>
-                    {errors.recipients?.[index] && (
-                      <p className='text-sm text-destructive'>
-                        {errors.recipients[index].message}
-                      </p>
-                    )}
-                  </div>
-                ))}
-                <Button
-                  type='button'
-                  variant='outline'
-                  size='sm'
-                  onClick={() => append('')}
-                  className='w-full'
-                >
-                  <Plus className='h-4 w-4 mr-2' />
-                  Add Recipient
-                </Button>
-
-                {errors.recipients && (
-                  <p className='text-sm text-destructive'>
-                    {errors.recipients.message}
-                  </p>
-                )}
-
-                {errors.recipients?.root && (
-                  <p className='text-sm text-destructive'>
-                    {errors.recipients.root.message}
-                  </p>
-                )}
-              </div>
-
-              <div>
-                <Textarea
-                  placeholder='Message'
-                  {...register('message')}
-                  rows={4}
-                />
-                {errors.message && (
-                  <p className='text-sm text-destructive mt-1'>
-                    {errors.message.message}
-                  </p>
-                )}
-              </div>
-            </div>
-            {sendSmsError && (() => {
-              const formattedError = formatError(sendSmsError)
-              if (formattedError.isRateLimit) {
-                return (
-                  <RateLimitError
-                    errorData={formattedError.rateLimitData}
-                    variant="inline"
-                  />
-                )
-              }
-              return (
-                <div className='flex items-center gap-2 text-destructive'>
-                  <p>Error sending SMS: {formattedError.message}</p>
-                  <X className='h-5 w-5' />
-                </div>
-              )
-            })()}
-
-            {isSendSmsSuccess && (
-              <div className='flex items-center gap-2'>
-                <p>SMS sent successfully!</p>
-                <Check className='h-5 w-5' />
-              </div>
-            )}
-
-            <Button type='submit' disabled={isSendingSms} className='w-full'>
-              {isSendingSms && (
-                <Spinner size='sm' className='mr-2' color='white' />
-              )}
-              {isSendingSms ? 'Sending...' : 'Send Message'}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/web/app/(app)/dashboard/(components)/send-sms/index.tsx b/web/app/(app)/dashboard/(components)/send-sms/index.tsx
new file mode 100644
index 00000000..a0e103d6
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/send-sms/index.tsx
@@ -0,0 +1,282 @@
+'use client'
+
+import { useEffect } from 'react'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Spinner } from '@/components/ui/spinner'
+import { useForm, Controller, useWatch } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { sendSmsSchema, type SendSmsFormData } from '@/lib/schemas'
+import { AlertCircle, CheckCircle2, MessageSquare, Send } from 'lucide-react'
+import { formatError } from '@/lib/utils/errorHandler'
+import { RateLimitError } from '@/components/shared/rate-limit-error'
+import { formatDeviceName } from '@/lib/utils'
+import { useDevices, useSendSms } from '@/lib/api'
+import { getSegmentInfo } from '@/lib/sms'
+import RecipientInput from './recipient-input'
+
+export default function SendSms() {
+  // Typed hook rather than a raw useQuery(['devices']) reading devices.data:
+  // that shared cache key with a different unwrapped shape is what caused the
+  // devices?.filter crash previously.
+  const { data: devices, isPending: devicesPending } = useDevices()
+  const {
+    mutate: sendSms,
+    isPending: isSendingSms,
+    error: sendSmsError,
+    isSuccess,
+    reset: resetSend,
+  } = useSendSms()
+
+  const {
+    control,
+    register,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm<SendSmsFormData>({
+    resolver: zodResolver(sendSmsSchema),
+    defaultValues: { deviceId: undefined, recipients: [], message: '' },
+  })
+
+  const recipients = useWatch({ control, name: 'recipients' }) ?? []
+  const message = useWatch({ control, name: 'message' }) ?? ''
+  const selectedDeviceId = useWatch({ control, name: 'deviceId' })
+
+  const enabledDevices = devices?.filter((device) => device.enabled) ?? []
+  // A primitive, so the effect below does not re-run on every render just
+  // because filter() returns a new array.
+  const soleDeviceId =
+    enabledDevices.length === 1 ? enabledDevices[0]._id : undefined
+
+  // Preselect the only usable device once devices have loaded. This used to be
+  // computed in defaultValues, which react-hook-form reads once on mount while
+  // the query is still pending, so the auto-select never actually happened.
+  useEffect(() => {
+    if (!selectedDeviceId && soleDeviceId) {
+      setValue('deviceId', soleDeviceId)
+    }
+  }, [selectedDeviceId, soleDeviceId, setValue])
+
+  const selectedDevice = devices?.find((d) => d._id === selectedDeviceId)
+  const availableSims = Array.isArray((selectedDevice as any)?.simInfo?.sims)
+    ? (selectedDevice as any).simInfo.sims
+    : []
+
+  const segments = getSegmentInfo(message)
+
+  const onSubmit = (data: SendSmsFormData) =>
+    sendSms(data, {
+      onSuccess: () => {
+        // Reset so the next message starts clean, keeping the chosen device.
+        reset({
+          deviceId: data.deviceId,
+          recipients: [],
+          message: '',
+        })
+      },
+    })
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className='flex items-center gap-2'>
+          <MessageSquare className='h-5 w-5 text-primary' />
+          <CardTitle>Send SMS</CardTitle>
+        </div>
+        <CardDescription>
+          Send a message from one of your connected devices.
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className='space-y-5'>
+          <div className='space-y-1.5'>
+            <Label htmlFor='sms-device'>Send from</Label>
+            <Controller
+              name='deviceId'
+              control={control}
+              render={({ field }) => (
+                <Select onValueChange={field.onChange} value={field.value ?? ''}>
+                  <SelectTrigger id='sms-device'>
+                    <SelectValue
+                      placeholder={
+                        devicesPending ? 'Loading devices...' : 'Select a device'
+                      }
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {devices?.map((device) => (
+                      <SelectItem
+                        key={device._id}
+                        value={device._id}
+                        disabled={!device.enabled}
+                      >
+                        {formatDeviceName(device)}
+                        {device.enabled ? '' : ' (disabled)'}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+            {errors.deviceId && (
+              <p className='text-sm text-destructive'>
+                {errors.deviceId.message}
+              </p>
+            )}
+          </div>
+
+          {availableSims.length > 1 && (
+            <div className='space-y-1.5'>
+              <Label htmlFor='sms-sim'>SIM (optional)</Label>
+              <Controller
+                name='simSubscriptionId'
+                control={control}
+                render={({ field }) => (
+                  <Select
+                    onValueChange={(value) => field.onChange(Number(value))}
+                    value={field.value?.toString() ?? ''}
+                  >
+                    <SelectTrigger id='sms-sim'>
+                      <SelectValue placeholder='Default SIM' />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {availableSims.map((sim: any) => (
+                        <SelectItem
+                          key={sim.subscriptionId}
+                          value={String(sim.subscriptionId)}
+                        >
+                          {sim.displayName || 'SIM'} ({sim.subscriptionId})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+            </div>
+          )}
+
+          <Controller
+            name='recipients'
+            control={control}
+            render={({ field }) => (
+              <RecipientInput
+                recipients={field.value ?? []}
+                onChange={field.onChange}
+                error={
+                  errors.recipients?.message ??
+                  errors.recipients?.root?.message ??
+                  (Array.isArray(errors.recipients)
+                    ? errors.recipients.find(Boolean)?.message
+                    : undefined)
+                }
+              />
+            )}
+          />
+
+          <div className='space-y-1.5'>
+            <Label htmlFor='sms-message'>Message</Label>
+            <Textarea
+              id='sms-message'
+              placeholder='Type your message'
+              rows={5}
+              {...register('message')}
+            />
+            <div className='flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground'>
+              <span>
+                {segments.length} characters, {segments.segments} segment
+                {segments.segments === 1 ? '' : 's'} ({segments.encoding})
+              </span>
+              {segments.segments > 1 && (
+                <span className='text-amber-600 dark:text-amber-500'>
+                  Over {segments.perSegment} characters counts as multiple
+                  messages
+                </span>
+              )}
+            </div>
+            {errors.message && (
+              <p className='text-sm text-destructive'>
+                {errors.message.message}
+              </p>
+            )}
+          </div>
+
+          {sendSmsError &&
+            (() => {
+              const formatted = formatError(sendSmsError)
+              if (formatted.isRateLimit) {
+                return (
+                  <RateLimitError
+                    errorData={formatted.rateLimitData}
+                    variant='alert'
+                  />
+                )
+              }
+              return (
+                <Alert variant='destructive'>
+                  <AlertCircle className='h-4 w-4' />
+                  <AlertTitle>Could not send</AlertTitle>
+                  <AlertDescription>{formatted.message}</AlertDescription>
+                </Alert>
+              )
+            })()}
+
+          {isSuccess && (
+            <Alert>
+              <CheckCircle2 className='h-4 w-4' />
+              <AlertTitle>Message sent</AlertTitle>
+              <AlertDescription>
+                Delivery status appears in your message history.
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <Button
+            type='submit'
+            className='w-full'
+            // Also disabled while devices load: submitting first showed
+            // "Required" on the device field, which then auto-filled a moment
+            // later, leaving a stale error next to a populated field.
+            disabled={isSendingSms || devicesPending}
+            onClick={() => {
+              // Clear a previous result so the alert reflects this attempt.
+              if (isSuccess || sendSmsError) resetSend()
+            }}
+          >
+            {isSendingSms ? (
+              <>
+                <Spinner size='sm' className='mr-2' color='white' />
+                Sending...
+              </>
+            ) : (
+              <>
+                <Send className='h-4 w-4' />
+                {recipients.length > 1
+                  ? `Send to ${recipients.length} recipients`
+                  : 'Send message'}
+              </>
+            )}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/send-sms/recipient-input.tsx b/web/app/(app)/dashboard/(components)/send-sms/recipient-input.tsx
new file mode 100644
index 00000000..76c03683
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/send-sms/recipient-input.tsx
@@ -0,0 +1,131 @@
+'use client'
+
+import { useState, type KeyboardEvent } from 'react'
+import { X } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { isPlausiblePhone, normalizePhone } from '@/lib/sms'
+import { cn } from '@/lib/utils'
+
+// Numbers commit on Enter, comma or blur, and paste splits on separators, so a
+// list copied from a spreadsheet becomes chips in one action. Replaces a
+// growing stack of full-width inputs, each with its own remove button.
+export default function RecipientInput({
+  recipients,
+  onChange,
+  error,
+}: {
+  recipients: string[]
+  onChange: (next: string[]) => void
+  error?: string
+}) {
+  const [draft, setDraft] = useState('')
+  const [localError, setLocalError] = useState<string | null>(null)
+
+  const commit = (raw: string): boolean => {
+    // Split only on unambiguous separators first. Splitting on whitespace up
+    // front would shred "+1 (415) 555-0101" into three fragments, since spaces
+    // are also formatting inside a single number.
+    const candidates = raw
+      .split(/[,;\n]+/)
+      .map((v) => v.trim())
+      .filter(Boolean)
+      .flatMap((token) =>
+        // Only a token that cannot be one number gets split on whitespace,
+        // which is how "+14155550101 +16475550187" becomes two chips.
+        isPlausiblePhone(token) ? [token] : token.split(/\s+/).filter(Boolean)
+      )
+
+    if (candidates.length === 0) return true
+
+    const accepted: string[] = []
+    for (const candidate of candidates) {
+      if (!isPlausiblePhone(candidate)) {
+        setLocalError(`"${candidate}" does not look like a phone number`)
+        return false
+      }
+      // The API schema accepts digits with an optional leading plus, so
+      // formatting is stripped before the value reaches the form.
+      const normalized = normalizePhone(candidate)
+      if (!recipients.includes(normalized) && !accepted.includes(normalized)) {
+        accepted.push(normalized)
+      }
+    }
+
+    setLocalError(null)
+    if (accepted.length) onChange([...recipients, ...accepted])
+    return true
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' || event.key === ',') {
+      event.preventDefault()
+      if (commit(draft)) setDraft('')
+      return
+    }
+    // Backspace on an empty field removes the last chip, as in every other
+    // token input people have used.
+    if (event.key === 'Backspace' && draft === '' && recipients.length > 0) {
+      onChange(recipients.slice(0, -1))
+    }
+  }
+
+  const remove = (value: string) =>
+    onChange(recipients.filter((r) => r !== value))
+
+  const shownError = localError ?? error
+
+  return (
+    <div className='space-y-1.5'>
+      <Label htmlFor='sms-recipient'>To</Label>
+
+      {recipients.length > 0 && (
+        <ul className='flex flex-wrap gap-1.5'>
+          {recipients.map((recipient) => (
+            <li key={recipient}>
+              <span className='inline-flex items-center gap-1 rounded-full bg-muted py-1 pl-2.5 pr-1 text-sm'>
+                {recipient}
+                <button
+                  type='button'
+                  onClick={() => remove(recipient)}
+                  aria-label={`Remove ${recipient}`}
+                  className='rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-background hover:text-foreground'
+                >
+                  <X className='h-3 w-3' />
+                </button>
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <Input
+        id='sms-recipient'
+        type='tel'
+        inputMode='tel'
+        value={draft}
+        onChange={(e) => {
+          setDraft(e.target.value)
+          if (localError) setLocalError(null)
+        }}
+        onKeyDown={handleKeyDown}
+        // Commit on blur too: people type a number then click Send, and losing
+        // it silently would be the worst possible outcome.
+        onBlur={() => {
+          if (commit(draft)) setDraft('')
+        }}
+        placeholder={
+          recipients.length ? 'Add another number' : '+14155550101'
+        }
+        aria-describedby='sms-recipient-hint'
+        className={cn(shownError && 'border-destructive')}
+      />
+
+      <p id='sms-recipient-hint' className='text-xs text-muted-foreground'>
+        Press Enter or comma to add. Paste a list to add several at once.
+      </p>
+
+      {shownError && <p className='text-sm text-destructive'>{shownError}</p>}
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/subscription-info.tsx b/web/app/(app)/dashboard/(components)/subscription-info.tsx
deleted file mode 100644
index 97885ba9..00000000
--- a/web/app/(app)/dashboard/(components)/subscription-info.tsx
+++ /dev/null
@@ -1,490 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import { Calendar, Check, Info, Sparkles } from 'lucide-react'
-import { Badge } from '@/components/ui/badge'
-import { Spinner } from '@/components/ui/spinner'
-import { useQuery } from '@tanstack/react-query'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
-import { polarCustomerPortalRequestUrl } from '@/config/external-links'
-import Link from 'next/link'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { useToast } from '@/hooks/use-toast'
-import { cn } from '@/lib/utils'
-
-const formatLimit = (value: number | null | undefined) => {
-  if (value === -1) return 'Unlimited'
-  if (value == null) return '0'
-  return value.toLocaleString()
-}
-
-type Meter = {
-  used: number
-  remaining: number
-  percentage: number
-  usedLabel: string
-  unlimited: boolean
-}
-
-type LimitTileProps = {
-  label: string
-  effectiveValue: number | null | undefined
-  planValue: number | null | undefined
-  isOverridden: boolean
-  planName?: string
-  tooltipUnit: string
-  unlimitedNote?: string
-  meter?: Meter
-}
-
-function LimitTile({
-  label,
-  effectiveValue,
-  planValue,
-  isOverridden,
-  planName,
-  tooltipUnit,
-  unlimitedNote,
-  meter,
-}: LimitTileProps) {
-  const isUnlimited = effectiveValue === -1
-  const meterColor =
-    meter && meter.percentage >= 100
-      ? 'bg-red-500'
-      : meter && meter.percentage >= 80
-      ? 'bg-amber-500'
-      : 'bg-green-500'
-
-  return (
-    <div
-      className={cn(
-        'p-2 rounded-md',
-        isOverridden
-          ? 'bg-amber-500/5 ring-1 ring-amber-500/30'
-          : 'bg-gray-50 dark:bg-gray-700/50'
-      )}
-    >
-      <div className='flex items-center justify-between gap-1'>
-        <p className='text-xs text-gray-500 dark:text-gray-400'>{label}</p>
-        {isOverridden && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span className='inline-flex items-center gap-0.5 rounded-full border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-600 dark:text-amber-400 cursor-default'>
-                  <Sparkles className='h-2.5 w-2.5' />
-                  Custom
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p className='max-w-[220px]'>
-                  Custom limit set for your account by the textbee team.
-                  {planName
-                    ? ` Standard ${planName} plan limit: ${formatLimit(
-                        planValue
-                      )} ${tooltipUnit}.`
-                    : ''}
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        )}
-      </div>
-
-      <div className='mt-0.5 flex items-baseline gap-1.5'>
-        <p className='text-sm font-semibold text-gray-900 dark:text-white'>
-          {formatLimit(effectiveValue)}
-        </p>
-        {isOverridden && (
-          <span className='text-xs text-gray-400 dark:text-gray-500 line-through'>
-            {formatLimit(planValue)}
-          </span>
-        )}
-        {isUnlimited && unlimitedNote && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span className='inline-flex items-center'>
-                  <Info className='h-3.5 w-3.5 text-gray-400 cursor-pointer' />
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>{unlimitedNote}</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        )}
-      </div>
-
-      {meter && !meter.unlimited && (
-        <div className='mt-1.5'>
-          <div className='h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700'>
-            <div
-              className={cn('h-full rounded-full transition-all', meterColor)}
-              style={{ width: `${Math.min(Math.max(meter.percentage, 0), 100)}%` }}
-            />
-          </div>
-          <div className='mt-1 flex items-center justify-between text-[10px] text-gray-500 dark:text-gray-400'>
-            <span>
-              {meter.used.toLocaleString()} {meter.usedLabel}
-            </span>
-            <span>{Math.max(meter.remaining, 0).toLocaleString()} left</span>
-          </div>
-        </div>
-      )}
-      {meter && meter.unlimited && (
-        <p className='mt-1.5 text-[10px] text-gray-500 dark:text-gray-400'>
-          {meter.used.toLocaleString()} {meter.usedLabel}
-        </p>
-      )}
-    </div>
-  )
-}
-
-export default function SubscriptionInfo() {
-  const { toast } = useToast()
-
-  // the checkout page redirects here after an in-place plan change
-  useEffect(() => {
-    const searchParams = new URLSearchParams(window.location.search)
-    if (searchParams.get('plan-change-success')) {
-      toast({
-        title: 'Plan updated',
-        description: 'Your subscription has been updated to the new plan.',
-      })
-      searchParams.delete('plan-change-success')
-      const query = searchParams.toString()
-      window.history.replaceState(
-        null,
-        '',
-        `${window.location.pathname}${query ? `?${query}` : ''}`,
-      )
-    }
-  }, [toast])
-  const {
-    data: currentSubscription,
-    isLoading: isLoadingSubscription,
-    error: subscriptionError,
-  } = useQuery({
-    queryKey: ['currentSubscription'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.billing.currentSubscription())
-        .then((res) => res.data),
-  })
-
-  const { data: currentUser } = useQuery({
-    queryKey: ['currentUser'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.auth.whoAmI())
-        .then((res) => res.data?.data),
-  })
-
-  // Format price with currency symbol
-  const formatPrice = (
-    amount: number | null | undefined,
-    currency: string | null | undefined
-  ) => {
-    if (amount == null || currency == null) return 'Free'
-
-    const formatter = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: currency.toUpperCase() || 'USD',
-      minimumFractionDigits: 2,
-    })
-
-    return formatter.format(amount / 100)
-  }
-
-  const getBillingInterval = (interval: string | null | undefined) => {
-    if (!interval) return ''
-    return interval.toLowerCase() === 'month' ? 'monthly' : 'yearly'
-  }
-
-  if (isLoadingSubscription)
-    return (
-      <div className='flex justify-center items-center h-full min-h-[200px]'>
-        <Spinner size='sm' />
-      </div>
-    )
-
-  if (subscriptionError)
-    return (
-      <p className='text-sm text-destructive'>
-        Failed to load subscription information
-      </p>
-    )
-
-  const plan = currentSubscription?.plan
-  const usage = currentSubscription?.usage
-  const planName = plan?.name || 'Free'
-
-  const isOverridden = (
-    custom: number | null | undefined,
-    planValue: number | null | undefined
-  ) => custom != null && custom !== planValue
-
-  const limitTiles: LimitTileProps[] = [
-    {
-      label: 'Daily',
-      effectiveValue: usage?.dailyLimit ?? plan?.dailyLimit,
-      planValue: plan?.dailyLimit,
-      isOverridden: isOverridden(
-        currentSubscription?.customDailyLimit,
-        plan?.dailyLimit
-      ),
-      planName,
-      tooltipUnit: 'per day',
-      unlimitedNote: 'Unlimited (within monthly limit)',
-      meter: {
-        used: usage?.processedSmsToday ?? 0,
-        remaining: usage?.dailyRemaining ?? 0,
-        percentage: usage?.dailyUsagePercentage ?? 0,
-        usedLabel: 'used today',
-        unlimited: (usage?.dailyLimit ?? plan?.dailyLimit) === -1,
-      },
-    },
-    {
-      label: 'Monthly',
-      effectiveValue: usage?.monthlyLimit ?? plan?.monthlyLimit,
-      planValue: plan?.monthlyLimit,
-      isOverridden: isOverridden(
-        currentSubscription?.customMonthlyLimit,
-        plan?.monthlyLimit
-      ),
-      planName,
-      tooltipUnit: 'per month',
-      unlimitedNote: 'Unlimited (within fair usage)',
-      meter: {
-        used: usage?.processedSmsLastMonth ?? 0,
-        remaining: usage?.monthlyRemaining ?? 0,
-        percentage: usage?.monthlyUsagePercentage ?? 0,
-        usedLabel: 'used this month',
-        unlimited: (usage?.monthlyLimit ?? plan?.monthlyLimit) === -1,
-      },
-    },
-    {
-      label: 'Bulk send',
-      effectiveValue: usage?.bulkSendLimit ?? plan?.bulkSendLimit,
-      planValue: plan?.bulkSendLimit,
-      isOverridden: isOverridden(
-        currentSubscription?.customBulkSendLimit,
-        plan?.bulkSendLimit
-      ),
-      planName,
-      tooltipUnit: 'per bulk send',
-      unlimitedNote: 'Unlimited (within monthly limit)',
-    },
-    {
-      label: 'Devices',
-      effectiveValue: usage?.deviceLimit ?? plan?.deviceLimit,
-      planValue: plan?.deviceLimit,
-      isOverridden: isOverridden(
-        currentSubscription?.customDeviceLimit,
-        plan?.deviceLimit
-      ),
-      planName,
-      tooltipUnit: 'devices',
-      unlimitedNote: 'Unlimited devices',
-    },
-  ]
-
-  const hasCustomLimits = limitTiles.some((tile) => tile.isOverridden)
-
-  return (
-    <div className='bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 border rounded-lg shadow p-4'>
-      <div className='flex items-center justify-between mb-4'>
-        <div>
-          <div className='flex items-center gap-2 flex-wrap'>
-            <h3 className='text-lg font-bold text-gray-900 dark:text-white'>
-              {plan?.name || 'Free Plan'}
-            </h3>
-            {hasCustomLimits && (
-              <Badge
-                variant='outline'
-                className='gap-1 border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-400 text-[10px] font-medium'
-              >
-                <Sparkles className='h-3 w-3' />
-                Custom limits
-              </Badge>
-            )}
-          </div>
-          <div className='flex items-center gap-2'>
-            <p className='text-xs text-gray-500 dark:text-gray-400'>
-              Current subscription
-            </p>
-            {currentSubscription?.amount > 0 && (
-              <Badge variant='outline' className='text-xs font-medium'>
-                {formatPrice(
-                  currentSubscription?.amount,
-                  currentSubscription?.currency
-                )}
-                {currentSubscription?.recurringInterval && (
-                  <span className='ml-1'>
-                    /{' '}
-                    {getBillingInterval(currentSubscription?.recurringInterval)}
-                  </span>
-                )}
-              </Badge>
-            )}
-          </div>
-        </div>
-        <div
-          className={`flex items-center px-2 py-0.5 rounded-full ${
-            currentSubscription?.status === 'active'
-              ? 'bg-green-50 dark:bg-green-900/30'
-              : currentSubscription?.status === 'past_due'
-              ? 'bg-amber-50 dark:bg-amber-900/30'
-              : 'bg-gray-50 dark:bg-gray-800/50'
-          }`}
-        >
-          <Check
-            className={`h-3 w-3 mr-1 ${
-              currentSubscription?.status === 'active'
-                ? 'text-green-600 dark:text-green-400'
-                : currentSubscription?.status === 'past_due'
-                ? 'text-amber-600 dark:text-amber-400'
-                : 'text-gray-600 dark:text-gray-400'
-            }`}
-          />
-          <span
-            className={`text-xs font-medium ${
-              currentSubscription?.status === 'active'
-                ? 'text-green-600 dark:text-green-400'
-                : currentSubscription?.status === 'past_due'
-                ? 'text-amber-600 dark:text-amber-400'
-                : 'text-gray-600 dark:text-gray-400'
-            }`}
-          >
-            {currentSubscription?.status
-              ? currentSubscription.status
-                  .split('_')
-                  .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-                  .join(' ')
-              : 'Active'}
-          </span>
-        </div>
-      </div>
-
-      <div className='grid grid-cols-2 gap-2.5 mb-4'>
-        <div className='flex items-center space-x-2 bg-white dark:bg-gray-800 p-2.5 rounded-md shadow-sm'>
-          <Calendar className='h-3.5 w-3.5 text-brand-600 dark:text-brand-400 flex-none' />
-          <div>
-            <p className='text-[11px] text-gray-500 dark:text-gray-400'>
-              Start Date
-            </p>
-            <p className='text-xs font-medium text-gray-900 dark:text-white'>
-              {currentSubscription?.subscriptionStartDate
-                ? new Date(
-                    currentSubscription?.subscriptionStartDate
-                  ).toLocaleDateString('en-US', {
-                    month: 'short',
-                    day: 'numeric',
-                    year: 'numeric',
-                  })
-                : 'N/A'}
-            </p>
-          </div>
-        </div>
-
-        <div className='flex items-center space-x-2 bg-white dark:bg-gray-800 p-2.5 rounded-md shadow-sm'>
-          <Calendar className='h-3.5 w-3.5 text-brand-600 dark:text-brand-400 flex-none' />
-          <div>
-            <p className='text-[11px] text-gray-500 dark:text-gray-400'>
-              Next Payment
-            </p>
-            <p className='text-xs font-medium text-gray-900 dark:text-white'>
-              {currentSubscription?.currentPeriodEnd
-                ? new Date(
-                    currentSubscription?.currentPeriodEnd
-                  ).toLocaleDateString('en-US', {
-                    month: 'short',
-                    day: 'numeric',
-                    year: 'numeric',
-                  })
-                : 'N/A'}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className='bg-white dark:bg-gray-800 p-3 rounded-md shadow-sm mb-4'>
-        <div className='flex items-center justify-between mb-2.5'>
-          <div className='flex items-center gap-1'>
-            <p className='text-xs text-gray-500 dark:text-gray-400 font-medium'>
-              Usage Limits
-            </p>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className='inline-flex items-center'>
-                    <Info className='h-3.5 w-3.5 text-gray-400 cursor-pointer' />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p className='max-w-[240px]'>
-                    SMS usage is measured on a rolling window, not your billing
-                    cycle. Daily usage resets at 00:00 UTC and monthly usage
-                    covers a rolling 30-day window. The Start Date and Next
-                    Payment above are just your subscription start and renewal
-                    dates.
-                  </p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </div>
-          {hasCustomLimits && (
-            <p className='text-[10px] text-amber-600 dark:text-amber-400'>
-              Custom values set for your account
-            </p>
-          )}
-        </div>
-        <div className='grid grid-cols-2 gap-2.5'>
-          {limitTiles.map((tile) => (
-            <LimitTile key={tile.label} {...tile} />
-          ))}
-        </div>
-      </div>
-
-      <div className='flex justify-end gap-2 flex-wrap'>
-        {(!currentSubscription?.plan?.name ||
-          currentSubscription?.plan?.name?.toLowerCase() === 'free') ? (
-          <Link
-            href='/checkout/pro'
-            className='text-xs font-medium text-white bg-brand-600 hover:bg-brand-700 px-3 py-1.5 rounded-md transition-colors'
-          >
-            Upgrade to Pro →
-          </Link>
-        ) : currentSubscription?.plan?.name?.toLowerCase() === 'pro' ? (
-          <>
-            <Link
-              href='/checkout/scale'
-              className='text-xs font-medium text-white bg-teal-600 hover:bg-teal-700 px-3 py-1.5 rounded-md transition-colors'
-            >
-              Upgrade to Scale →
-            </Link>
-            <Link
-              href={polarCustomerPortalRequestUrl(currentUser?.email)}
-              className='text-xs font-medium text-white bg-brand-600 hover:bg-brand-700 px-3 py-1.5 rounded-md transition-colors'
-            >
-              Manage Subscription →
-            </Link>
-          </>
-        ) : (
-          <Link
-            href={polarCustomerPortalRequestUrl(currentUser?.email)}
-            className='text-xs font-medium text-white bg-brand-600 hover:bg-brand-700 px-3 py-1.5 rounded-md transition-colors'
-          >
-            Manage Subscription →
-          </Link>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/web/app/(app)/dashboard/(components)/webhooks-history.tsx b/web/app/(app)/dashboard/(components)/webhooks-history.tsx
deleted file mode 100644
index fb3f6df9..00000000
--- a/web/app/(app)/dashboard/(components)/webhooks-history.tsx
+++ /dev/null
@@ -1,578 +0,0 @@
-'use client'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Skeleton } from '@/components/ui/skeleton'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import { ApiEndpoints } from '@/config/api'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { useQuery } from '@tanstack/react-query'
-import {
-  ArrowDownLeft,
-  ArrowUpRight,
-  Clock,
-  Ellipsis,
-  MessageSquare,
-  Smartphone,
-  Webhook,
-} from 'lucide-react'
-import React, { useEffect, useRef, useState } from 'react'
-import ProductClient from '../webhooks/(components)/webhook-table'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { Badge } from '@/components/ui/badge'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import { Calendar } from 'lucide-react'
-import { truncate } from 'fs'
-import { formatDeviceName } from '@/lib/utils'
-
-const WebhooksHistory = () => {
-  const {
-    data: devices,
-    isLoading: isLoadingDevices,
-    error: devicesError,
-  } = useQuery({
-    queryKey: ['devices'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.gateway.listDevices())
-        .then((res) => res.data),
-  })
-
-  const { data: webhooks, isLoading: isLoadingWebhooks } = useQuery({
-    queryKey: ['webhooks'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.gateway.getWebhooks())
-        .then((res) => res.data),
-  })
-
-  const [currentDevice, setCurrentDevice] = useState('all')
-  const [currentWebhook, setCurrentWebhook] = useState('all')
-  const [eventType, setEventType] = useState('all')
-  const [status, setStatus] = useState('all')
-  const [dateRange, setDateRange] = useState<any>('90')
-  const [openCal, setOpenCal] = useState(false)
-  const [dateQuery, setDateQuery] = useState<{ start: string; end: string }>({
-    start: '',
-    end: '',
-  })
-  const [page, setPage] = useState(1)
-  const [limit, setLimit] = useState(10)
-  const [isLoading, setIsLoading] = useState(false)
-
-  useEffect(() => {
-    if (devices?.data?.length && currentDevice === 'all') {
-    }
-  }, [devices, currentDevice])
-
-  const {
-    data: webhookNotifications,
-    isLoading: isLoadingNotifications,
-    error: webhookNotificationsError,
-    refetch,
-  } = useQuery({
-    queryKey: [
-      'webhook-notification',
-      eventType,
-      page,
-      limit,
-      currentDevice,
-      currentWebhook,
-      status,
-    ],
-    enabled: true,
-    queryFn: () =>
-      httpBrowserClient
-        .get(
-          `${ApiEndpoints.gateway.getWebhookNotifications()}?eventType=${eventType === 'all' ? '' : eventType}&page=${page}&limit=${limit}&status=${status === 'all' ? '' : status}&start=${
-            dateQuery.start
-          }&end=${dateQuery.end}&deviceId=${
-            currentDevice === 'all' ? '' : currentDevice
-          }&webhookSubscriptionId=${
-            currentWebhook === 'all' ? '' : currentWebhook
-          }`
-        )
-        .then((res) => res.data),
-  })
-
-  const totalPages = webhookNotifications?.data?.meta?.totalPages
-  const handlePageChange = (currentPage: number) => {
-    setPage(currentPage)
-  }
-  const handleMessageTypeChange = (type: string) => {
-    setEventType(type)
-    setPage(1)
-  }
-  const handleStatusChange = (status: string) => {
-    setStatus(status)
-    setPage(1)
-  }
-  const handleDateRangeChange = (range: string) => {
-    const end = new Date() // today
-    const start = new Date()
-
-    switch (range) {
-      case '7':
-        start.setDate(end.getDate() - 7)
-        break
-      case '30':
-        start.setDate(end.getDate() - 30)
-        break
-      case '90':
-        start.setDate(end.getDate() - 90)
-        break
-      case '90_months':
-        start.setMonth(end.getMonth() - 3)
-        break
-      case '180':
-        start.setMonth(end.getMonth() - 6)
-        break
-      case '365':
-        start.setMonth(end.getMonth() - 12)
-        break
-      case 'custom':
-        setDateQuery({ start: '', end: '' })
-        setDateRange('custom')
-        setOpenCal(true)
-        return
-    }
-
-    setDateQuery({ start: start.toISOString(), end: end.toISOString() })
-    setDateRange(range)
-    setPage(1)
-  }
-
-  const handleDeviceChange = (deviceId: string) => {
-    setCurrentDevice(deviceId)
-    setPage(1)
-  }
-
-  const handleWebhookChange = (webhookId: string) => {
-    setCurrentWebhook(webhookId)
-    setPage(1)
-  }
-
-  const message_events = [
-    'MESSAGE_RECEIVED',
-    'MESSAGE_SENT',
-    'MESSAGE_DELIVERED',
-    'MESSAGE_FAILED',
-    'UNKNOWN_STATE',
-  ]
-  return (
-    <div className="flex flex-col gap-y-4">
-      <div className="bg-gradient-to-r from-brand-50 to-sky-50 dark:from-brand-950/30 dark:to-sky-950/30 rounded-lg shadow-sm border border-brand-100 dark:border-brand-800/50 p-4 mb-4">
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-            <div className="">
-              <div className="flex items-center gap-2 mb-1.5">
-                <Smartphone className="h-3.5 w-3.5 text-brand-500" />
-                <h3 className="text-sm font-medium text-foreground">Device</h3>
-              </div>
-              <Select value={currentDevice} onValueChange={handleDeviceChange}>
-                <SelectTrigger className="w-full bg-white/80 dark:bg-black/20 h-9 text-sm border-brand-200 dark:border-brand-800/70">
-                  <SelectValue placeholder="Select a device" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem key="all" value="all">
-                    All devices
-                  </SelectItem>
-                  {devices?.data?.map((device) => (
-                    <SelectItem key={device._id} value={device._id}>
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium">
-                          {formatDeviceName(device)}
-                        </span>
-                        {!device.enabled && (
-                          <Badge
-                            variant="outline"
-                            className="ml-1 text-xs py-0 h-5"
-                          >
-                            Disabled
-                          </Badge>
-                        )}
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="w-full sm:w-56">
-              <div className="flex items-center gap-2 mb-1.5">
-                <Webhook className="h-3.5 w-3.5 text-brand-500" />
-                <h3 className="text-sm font-medium text-foreground">Webhook</h3>
-              </div>
-              <Select
-                value={currentWebhook}
-                onValueChange={handleWebhookChange}
-              >
-                <SelectTrigger className="w-full bg-white/80 dark:bg-black/20 h-9 text-sm border-brand-200 dark:border-brand-800/70">
-                  <SelectValue placeholder="Select a webhook" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem key="all" value="all">
-                    All webhooks
-                  </SelectItem>
-                  {webhooks?.data?.map((webhook: any) => (
-                    <SelectItem key={webhook._id} value={webhook._id}>
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium truncate max-w-[180px]">
-                          {webhook.name?.trim() || webhook.deliveryUrl}
-                        </span>
-                        {!webhook.isActive && (
-                          <Badge
-                            variant="outline"
-                            className="ml-1 text-xs py-0 h-5"
-                          >
-                            Inactive
-                          </Badge>
-                        )}
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="w-full sm:w-44">
-              <div className="flex items-center gap-2 mb-1.5">
-                <MessageSquare className="h-3.5 w-3.5 text-brand-500" />
-                <h3 className="text-sm font-medium text-foreground">
-                  Event Type
-                </h3>
-              </div>
-              <Select value={eventType} onValueChange={handleMessageTypeChange}>
-                <SelectTrigger className="w-full bg-white/80 dark:bg-black/20 h-9 text-sm border-brand-200 dark:border-brand-800/70">
-                  <SelectValue placeholder="Message type" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">
-                    <div className="flex items-center gap-1.5">
-                      <div className="h-1.5 w-1.5 rounded-full bg-gray-500" />
-                      All Events
-                    </div>
-                  </SelectItem>
-                    {message_events.map((event, index) => (
-                        <SelectItem value={event} key={event}>
-                    <div className="flex items-center gap-1.5">
-                      <div className="h-1.5 w-1.5 rounded-full bg-gray-500" />
-                      {event}
-                    </div>
-                  </SelectItem>
-                      ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="w-full sm:w-44">
-              <div className="flex items-center gap-2 mb-1.5">
-                <MessageSquare className="h-3.5 w-3.5 text-brand-500" />
-                <h3 className="text-sm font-medium text-foreground">Status</h3>
-              </div>
-              {/* status(delivered, pending, failed, retrying) */}
-              <Select value={status} onValueChange={handleStatusChange}>
-                <SelectTrigger className="w-full bg-white/80 dark:bg-black/20 h-9 text-sm border-brand-200 dark:border-brand-800/70">
-                  <SelectValue placeholder="Status" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">
-                    <div className="flex items-center gap-1.5">
-                      <div className="h-1.5 w-1.5 rounded-full bg-gray-500" />
-                      All
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="delivered">
-                    <div className="flex items-center gap-1.5">
-                      <div className="h-1.5 w-1.5 rounded-full bg-green-500" />
-                      Delivered
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="pending">
-                    <div className="flex items-center gap-1.5">
-                      <div className="h-1.5 w-1.5 rounded-full bg-brand-500" />
-                      Pending
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="failed">
-                    <div className="flex items-center gap-1.5">
-                      <div className="h-1.5 w-1.5 rounded-full bg-red-500" />
-                      Failed
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="retrying">
-                    <div className="flex items-center gap-1.5">
-                      <div className="h-1.5 w-1.5 rounded-full bg-gray-500" />
-                      Retrying
-                    </div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="w-full sm:w-44">
-              <div className="flex items-center gap-2 mb-1.5">
-                <MessageSquare className="h-3.5 w-3.5 text-brand-500" />
-                <h3 className="text-sm font-medium text-foreground">
-                  Date Range
-                </h3>{' '}
-              </div>
-              <Select value={dateRange} onValueChange={handleDateRangeChange}>
-                <SelectTrigger className="w-full bg-white/80 dark:bg-black/20 h-9 text-sm border-brand-200 dark:border-brand-800/70">
-                  <SelectValue placeholder="Date Range" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="7">
-                    <div className="flex items-center gap-1.5">Last 7 Days</div>
-                  </SelectItem>
-                  <SelectItem value="30">
-                    <div className="flex items-center gap-1.5">
-                      Last 30 Days
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="90">
-                    <div className="flex items-center gap-1.5">
-                      Last 90 Days
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="90_months">
-                    <div className="flex items-center gap-1.5">
-                      Last 3 Months
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="180">
-                    <div className="flex items-center gap-1.5">
-                      Last 6 Months
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="365">
-                    <div className="flex items-center gap-1.5">
-                      Last 12 Months
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="custom">
-                    <div className="flex items-center gap-1.5">Custom</div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-          
-          <Popover open={openCal} onOpenChange={setOpenCal}>
-            <PopoverContent className="p-4 w-64">
-              <div className="flex flex-col gap-3">
-                <div>
-                  <label
-                    className="block text-xs mb-1"
-                    htmlFor="start-date"
-                  >
-                    Start Date
-                  </label>
-                  <input
-                    id="start-date"
-                    type="date"
-                    className="w-full border rounded px-2 py-1 text-sm"
-                    value={dateQuery.start ? dateQuery.start.split('T')[0] : ''}
-                    onChange={(e) =>
-                      setDateQuery({
-                        ...dateQuery,
-                        start: e.target.value ? new Date(e.target.value).toISOString() : '',
-                      })
-                    }
-                  />
-                </div>
-                <div>
-                  <label
-                    className="block text-xs mb-1"
-                    htmlFor="end-date"
-                  >
-                    End Date
-                  </label>
-                  <input
-                    id="end-date"
-                    type="date"
-                    className="w-full border rounded px-2 py-1 text-sm"
-                    value={dateQuery.end ? dateQuery.end.split('T')[0] : ''}
-                    onChange={(e) =>
-                      setDateQuery({
-                        ...dateQuery,
-                        end: e.target.value ? new Date(e.target.value).toISOString() : '',
-                      })
-                    }
-                  />
-                </div>
-                <div className="flex gap-2">
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => {
-                      setOpenCal(false)
-                      setDateRange('90')
-                      const end = new Date()
-                      const start = new Date()
-                      start.setDate(end.getDate() - 90)
-                      setDateQuery({ start: start.toISOString(), end: end.toISOString() })
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    size="sm"
-                    onClick={() => {
-                      setPage(1)
-                      setOpenCal(false)
-                      refetch()
-                    }}
-                    disabled={!dateQuery.start || !dateQuery.end}
-                  >
-                    Apply
-                  </Button>
-                </div>
-              </div>
-            </PopoverContent>
-          </Popover>
-
-          {isLoadingNotifications || isLoading ? (
-            <ProductClient data={[]} isLoading={true} />
-          ) : (
-            <ProductClient
-              data={webhookNotifications?.data?.data || []}
-              isLoading={false}
-              status={status}
-            />
-          )}
-          <div className="flex justify-end gap-x-3">
-            {totalPages > 1 && (
-              <div className="flex justify-center mt-6 space-x-2">
-                <Button
-                  onClick={() => handlePageChange(Math.max(1, page - 1))}
-                  disabled={page === 1 || isLoading || isLoadingNotifications}
-                  variant={page === 1 ? 'ghost' : 'default'}
-                >
-                  Previous
-                </Button>
-
-                <div className="flex flex-wrap items-center gap-2 justify-center sm:justify-start">
-                  
-                  {totalPages > 1 && (
-                    <Button
-                      onClick={() => handlePageChange(1)}
-                      variant={page === 1 ? 'default' : 'ghost'}
-                      size="icon"
-                      className={`h-8 w-8 rounded-full ${
-                        page === 1
-                          ? 'bg-primary text-brand-foreground hover:bg-primary/90'
-                          : 'hover:bg-secondary'
-                      }`}
-                    >
-                      1
-                    </Button>
-                  )}
-
-                  {/* Ellipsis if needed */}
-                  {page > 4 && totalPages > 7 && (
-                    <span className="px-1">...</span>
-                  )}
-
-                  
-                  {Array.from(
-                    {
-                      length: Math.min(6, totalPages - 2),
-                    },
-                    (_, i) => {
-                      let pageToShow: number
-
-                      if (totalPages <= 8) {
-                        // If we have 8 or fewer pages, show pages 2 through 7 (or fewer)
-                        pageToShow = i + 2
-                      } else if (page <= 4) {
-                        // Near the start
-                        pageToShow = i + 2
-                      } else if (page >= totalPages - 3) {
-                        // Near the end
-                        pageToShow = totalPages - 7 + i
-                      } else {
-                        // Middle - center around current page
-                        pageToShow = page - 2 + i
-                      }
-
-                      // Ensure page is within bounds and not the first or last page
-                      if (pageToShow > 1 && pageToShow < totalPages) {
-                        return (
-                          <Button
-                            key={pageToShow}
-                            onClick={() => handlePageChange(pageToShow)}
-                            variant={page === pageToShow ? 'default' : 'ghost'}
-                            size="icon"
-                            className={`h-8 w-8 rounded-full ${
-                              page === pageToShow
-                                ? 'bg-primary text-brand-foreground hover:bg-primary/90'
-                                : 'hover:bg-secondary'
-                            }`}
-                          >
-                            {pageToShow}
-                          </Button>
-                        )
-                      }
-                      return null
-                    }
-                  )}
-
-                  {/* Ellipsis if needed */}
-                  {page < totalPages - 3 && totalPages > 7 && (
-                    <span className="px-1">...</span>
-                  )}
-
-                  {/* Last page */}
-                  {totalPages > 1 && (
-                    <Button
-                      onClick={() => handlePageChange(totalPages)}
-                      variant={page === totalPages ? 'default' : 'ghost'}
-                      size="icon"
-                      className={`h-8 w-8 rounded-full ${
-                        page === totalPages
-                          ? 'bg-primary text-brand-foreground hover:bg-primary/90'
-                          : 'hover:bg-secondary'
-                      }`}
-                    >
-                      {totalPages}
-                    </Button>
-                  )}
-                </div>
-
-                <Button
-                  onClick={() =>
-                    handlePageChange(Math.min(totalPages, page + 1))
-                  }
-                  disabled={
-                    page === totalPages || isLoading || isLoadingNotifications
-                  }
-                  variant={page === totalPages ? 'ghost' : 'default'}
-                >
-                  Next
-                </Button>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default WebhooksHistory
diff --git a/web/app/(app)/dashboard/webhooks/(components)/data-table.tsx b/web/app/(app)/dashboard/(components)/webhooks-history/data-table.tsx
similarity index 98%
rename from web/app/(app)/dashboard/webhooks/(components)/data-table.tsx
rename to web/app/(app)/dashboard/(components)/webhooks-history/data-table.tsx
index 67458389..b6fc45c6 100644
--- a/web/app/(app)/dashboard/webhooks/(components)/data-table.tsx
+++ b/web/app/(app)/dashboard/(components)/webhooks-history/data-table.tsx
@@ -20,7 +20,7 @@ import {
 } from '@/components/ui/table'
 import React from 'react'
 import { Skeleton } from '@/components/ui/skeleton'
-import { WebhookPayloadModal } from './webhook-payload-modal' // Import your modal
+import { WebhookPayloadModal } from './payload-modal'
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
diff --git a/web/app/(app)/dashboard/webhooks/(components)/webhook-table.tsx b/web/app/(app)/dashboard/(components)/webhooks-history/deliveries-table.tsx
similarity index 79%
rename from web/app/(app)/dashboard/webhooks/(components)/webhook-table.tsx
rename to web/app/(app)/dashboard/(components)/webhooks-history/deliveries-table.tsx
index 0184209c..f8b24bd1 100644
--- a/web/app/(app)/dashboard/webhooks/(components)/webhook-table.tsx
+++ b/web/app/(app)/dashboard/(components)/webhooks-history/deliveries-table.tsx
@@ -1,5 +1,4 @@
 'use client'
-import { useParams, useRouter } from 'next/navigation'
 
 import { Button } from '@/components/ui/button'
 import { DataTable } from './data-table'
@@ -7,13 +6,21 @@ import type { ColumnDef } from '@tanstack/react-table'
 import { format } from 'date-fns'
 import { Eye } from 'lucide-react'
 
-interface ProductClientProps {
+// This interface was declared but never applied to the component, which
+// destructured its props untyped, so none of it was enforced. isLoading and
+// status were missing from it too.
+interface WebhookDeliveriesTableProps {
   data: ProductColumns[]
+  isLoading?: boolean
+  status?: string
 }
 
 export type ProductColumns = {
   event?: string
-  deviceName?: string
+  // buildDeviceLabel returns two lines (brand/model plus SMS id) when it has
+  // both, and the Device cell already renders that array case. The type said
+  // string, so the shape the code actually produces was never described here.
+  deviceName?: string | string[]
   webhookEvent?: string
   deliveryUrl?: string
   webhookSubscription?: {
@@ -100,10 +107,11 @@ const buildDeviceLabel = (d: any): string | string[] => {
   return 'Unknown device'
 }
 
-const ProductClient = ({ data, isLoading, status = 'delivered' }) => {
-  const { storeId } = useParams()
-  const router = useRouter()
-
+const WebhookDeliveriesTable = ({
+  data,
+  isLoading = false,
+  status = 'delivered',
+}: WebhookDeliveriesTableProps) => {
   const formatted = data.map((d) => ({
     ...d,
     deviceName: buildDeviceLabel(d),
@@ -124,4 +132,4 @@ const ProductClient = ({ data, isLoading, status = 'delivered' }) => {
   )
 }
 
-export default ProductClient
+export default WebhookDeliveriesTable
diff --git a/web/app/(app)/dashboard/(components)/webhooks-history/filters.tsx b/web/app/(app)/dashboard/(components)/webhooks-history/filters.tsx
new file mode 100644
index 00000000..3579926c
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/webhooks-history/filters.tsx
@@ -0,0 +1,263 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Popover,
+  PopoverContent,
+} from '@/components/ui/popover'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { MessageSquare, Smartphone, Webhook } from 'lucide-react'
+import { formatDeviceName } from '@/lib/utils'
+import type { Device, WebhookSubscription } from '@/lib/api'
+import {
+  DATE_RANGE_PRESETS,
+  MESSAGE_EVENTS,
+  type WebhookHistoryFilters,
+} from './use-filters'
+
+function FilterField({
+  icon: Icon,
+  label,
+  className,
+  children,
+}: {
+  icon: typeof Smartphone
+  label: string
+  className?: string
+  children: ReactNode
+}) {
+  return (
+    <div className={className}>
+      <div className='flex items-center gap-2 mb-1.5'>
+        <Icon className='h-3.5 w-3.5 text-primary' />
+        <h3 className='text-sm font-medium text-foreground'>{label}</h3>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+const STATUS_OPTIONS = [
+  { value: 'all', label: 'All', dot: 'bg-muted-foreground' },
+  { value: 'delivered', label: 'Delivered', dot: 'bg-green-500' },
+  { value: 'pending', label: 'Pending', dot: 'bg-brand-500' },
+  { value: 'failed', label: 'Failed', dot: 'bg-red-500' },
+  { value: 'retrying', label: 'Retrying', dot: 'bg-muted-foreground' },
+]
+
+type FiltersProps = {
+  filters: WebhookHistoryFilters
+  devices: Device[]
+  webhooks: WebhookSubscription[]
+}
+
+// Filter row for the webhook delivery history (device, webhook, event type,
+// status, date range with a custom-range popover).
+export default function Filters({ filters, devices, webhooks }: FiltersProps) {
+  const {
+    currentDevice,
+    currentWebhook,
+    eventType,
+    status,
+    dateRange,
+    openCal,
+    setOpenCal,
+    dateQuery,
+    setDateQuery,
+    handleDeviceChange,
+    handleWebhookChange,
+    handleEventTypeChange,
+    handleStatusChange,
+    handleDateRangeChange,
+    cancelCustomRange,
+    applyCustomRange,
+  } = filters
+
+  return (
+    <>
+      <div className='flex flex-col sm:flex-row sm:items-center gap-3 flex-wrap'>
+        <FilterField icon={Smartphone} label='Device'>
+          <Select value={currentDevice} onValueChange={handleDeviceChange}>
+            <SelectTrigger className='w-full h-9 text-sm'>
+              <SelectValue placeholder='Select a device' />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem key='all' value='all'>
+                All devices
+              </SelectItem>
+              {devices.map((device) => (
+                <SelectItem key={device._id} value={device._id}>
+                  <div className='flex items-center gap-2'>
+                    <span className='font-medium'>{formatDeviceName(device)}</span>
+                    {!device.enabled && (
+                      <Badge variant='outline' className='ml-1 text-xs py-0 h-5'>
+                        Disabled
+                      </Badge>
+                    )}
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </FilterField>
+
+        <FilterField icon={Webhook} label='Webhook' className='w-full sm:w-56'>
+          <Select value={currentWebhook} onValueChange={handleWebhookChange}>
+            <SelectTrigger className='w-full h-9 text-sm'>
+              <SelectValue placeholder='Select a webhook' />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem key='all' value='all'>
+                All webhooks
+              </SelectItem>
+              {webhooks.map((webhook) => (
+                <SelectItem key={webhook._id} value={webhook._id}>
+                  <div className='flex items-center gap-2'>
+                    <span className='font-medium truncate max-w-[180px]'>
+                      {webhook.name?.trim() || webhook.deliveryUrl}
+                    </span>
+                    {!webhook.isActive && (
+                      <Badge variant='outline' className='ml-1 text-xs py-0 h-5'>
+                        Inactive
+                      </Badge>
+                    )}
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </FilterField>
+
+        <FilterField
+          icon={MessageSquare}
+          label='Event Type'
+          className='w-full sm:w-44'
+        >
+          <Select value={eventType} onValueChange={handleEventTypeChange}>
+            <SelectTrigger className='w-full h-9 text-sm'>
+              <SelectValue placeholder='Message type' />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value='all'>
+                <div className='flex items-center gap-1.5'>
+                  <div className='h-1.5 w-1.5 rounded-full bg-muted-foreground' />
+                  All Events
+                </div>
+              </SelectItem>
+              {MESSAGE_EVENTS.map((event) => (
+                <SelectItem value={event} key={event}>
+                  <div className='flex items-center gap-1.5'>
+                    <div className='h-1.5 w-1.5 rounded-full bg-muted-foreground' />
+                    {event}
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </FilterField>
+
+        <FilterField icon={MessageSquare} label='Status' className='w-full sm:w-44'>
+          <Select value={status} onValueChange={handleStatusChange}>
+            <SelectTrigger className='w-full h-9 text-sm'>
+              <SelectValue placeholder='Status' />
+            </SelectTrigger>
+            <SelectContent>
+              {STATUS_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  <div className='flex items-center gap-1.5'>
+                    <div className={`h-1.5 w-1.5 rounded-full ${opt.dot}`} />
+                    {opt.label}
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </FilterField>
+
+        <FilterField
+          icon={MessageSquare}
+          label='Date Range'
+          className='w-full sm:w-44'
+        >
+          <Select value={dateRange} onValueChange={handleDateRangeChange}>
+            <SelectTrigger className='w-full h-9 text-sm'>
+              <SelectValue placeholder='Date Range' />
+            </SelectTrigger>
+            <SelectContent>
+              {DATE_RANGE_PRESETS.map((preset) => (
+                <SelectItem key={preset.value} value={preset.value}>
+                  {preset.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </FilterField>
+      </div>
+
+      <Popover open={openCal} onOpenChange={setOpenCal}>
+        <PopoverContent className='p-4 w-64'>
+          <div className='flex flex-col gap-3'>
+            <div>
+              <label className='block text-xs mb-1' htmlFor='start-date'>
+                Start Date
+              </label>
+              <input
+                id='start-date'
+                type='date'
+                className='w-full border rounded px-2 py-1 text-sm'
+                value={dateQuery.start ? dateQuery.start.split('T')[0] : ''}
+                onChange={(e) =>
+                  setDateQuery({
+                    ...dateQuery,
+                    start: e.target.value
+                      ? new Date(e.target.value).toISOString()
+                      : '',
+                  })
+                }
+              />
+            </div>
+            <div>
+              <label className='block text-xs mb-1' htmlFor='end-date'>
+                End Date
+              </label>
+              <input
+                id='end-date'
+                type='date'
+                className='w-full border rounded px-2 py-1 text-sm'
+                value={dateQuery.end ? dateQuery.end.split('T')[0] : ''}
+                onChange={(e) =>
+                  setDateQuery({
+                    ...dateQuery,
+                    end: e.target.value
+                      ? new Date(e.target.value).toISOString()
+                      : '',
+                  })
+                }
+              />
+            </div>
+            <div className='flex gap-2'>
+              <Button size='sm' variant='outline' onClick={cancelCustomRange}>
+                Cancel
+              </Button>
+              <Button
+                size='sm'
+                onClick={applyCustomRange}
+                disabled={!dateQuery.start || !dateQuery.end}
+              >
+                Apply
+              </Button>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/webhooks-history/index.tsx b/web/app/(app)/dashboard/(components)/webhooks-history/index.tsx
new file mode 100644
index 00000000..3a391991
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/webhooks-history/index.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import WebhookDeliveriesTable from './deliveries-table'
+import NumberedPagination from '@/components/shared/numbered-pagination'
+import {
+  useDevices,
+  useWebhookNotifications,
+  useWebhooks,
+} from '@/lib/api'
+import Filters from './filters'
+import { useWebhookHistoryFilters } from './use-filters'
+
+// Container for the webhook delivery history: owns filter state via the
+// use-filters hook and hands rendering to Filters + the notifications table.
+export default function WebhooksHistory() {
+  const filters = useWebhookHistoryFilters()
+  const {
+    currentDevice,
+    currentWebhook,
+    eventType,
+    status,
+    dateQuery,
+    page,
+    setPage,
+    limit,
+  } = filters
+
+  const { data: devices } = useDevices()
+  const { data: webhooks } = useWebhooks()
+
+  const { data: webhookNotifications, isLoading: isLoadingNotifications } =
+    useWebhookNotifications({
+      eventType: eventType === 'all' ? '' : eventType,
+      status: status === 'all' ? '' : status,
+      deviceId: currentDevice === 'all' ? '' : currentDevice,
+      webhookSubscriptionId: currentWebhook === 'all' ? '' : currentWebhook,
+      start: dateQuery.start,
+      end: dateQuery.end,
+      page,
+      limit,
+    })
+
+  const totalPages = webhookNotifications?.data?.meta?.totalPages ?? 1
+
+  return (
+    <div className='flex flex-col gap-y-4'>
+      <div className='bg-card rounded-lg shadow-sm border border-border p-4 mb-4'>
+        <div className='flex flex-col gap-4'>
+          <Filters
+            filters={filters}
+            devices={devices ?? []}
+            webhooks={webhooks ?? []}
+          />
+
+          {isLoadingNotifications ? (
+            <WebhookDeliveriesTable data={[]} isLoading={true} />
+          ) : (
+            <WebhookDeliveriesTable
+              data={webhookNotifications?.data?.data || []}
+              isLoading={false}
+              status={status}
+            />
+          )}
+
+          <NumberedPagination
+            page={page}
+            totalPages={totalPages}
+            onPageChange={setPage}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/webhooks/(components)/webhook-payload-modal.tsx b/web/app/(app)/dashboard/(components)/webhooks-history/payload-modal.tsx
similarity index 100%
rename from web/app/(app)/dashboard/webhooks/(components)/webhook-payload-modal.tsx
rename to web/app/(app)/dashboard/(components)/webhooks-history/payload-modal.tsx
diff --git a/web/app/(app)/dashboard/(components)/webhooks-history/use-filters.ts b/web/app/(app)/dashboard/(components)/webhooks-history/use-filters.ts
new file mode 100644
index 00000000..eac82249
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/webhooks-history/use-filters.ts
@@ -0,0 +1,133 @@
+'use client'
+
+import { useState } from 'react'
+
+export const MESSAGE_EVENTS = [
+  'MESSAGE_RECEIVED',
+  'MESSAGE_SENT',
+  'MESSAGE_DELIVERED',
+  'MESSAGE_FAILED',
+  'UNKNOWN_STATE',
+]
+
+export const DATE_RANGE_PRESETS = [
+  { value: '7', label: 'Last 7 Days' },
+  { value: '30', label: 'Last 30 Days' },
+  { value: '90', label: 'Last 90 Days' },
+  { value: '90_months', label: 'Last 3 Months' },
+  { value: '180', label: 'Last 6 Months' },
+  { value: '365', label: 'Last 12 Months' },
+  { value: 'custom', label: 'Custom' },
+]
+
+function presetToRange(range: string): { start: string; end: string } {
+  const end = new Date()
+  const start = new Date()
+  switch (range) {
+    case '7':
+      start.setDate(end.getDate() - 7)
+      break
+    case '30':
+      start.setDate(end.getDate() - 30)
+      break
+    case '90':
+      start.setDate(end.getDate() - 90)
+      break
+    case '90_months':
+      start.setMonth(end.getMonth() - 3)
+      break
+    case '180':
+      start.setMonth(end.getMonth() - 6)
+      break
+    case '365':
+      start.setMonth(end.getMonth() - 12)
+      break
+  }
+  return { start: start.toISOString(), end: end.toISOString() }
+}
+
+// Filter state for the webhook notifications history: device, webhook, event
+// type, delivery status, preset/custom date range, and pagination page reset.
+export function useWebhookHistoryFilters() {
+  const [currentDevice, setCurrentDevice] = useState('all')
+  const [currentWebhook, setCurrentWebhook] = useState('all')
+  const [eventType, setEventType] = useState('all')
+  const [status, setStatus] = useState('all')
+  const [dateRange, setDateRange] = useState('90')
+  const [openCal, setOpenCal] = useState(false)
+  const [dateQuery, setDateQuery] = useState<{ start: string; end: string }>({
+    start: '',
+    end: '',
+  })
+  const [page, setPage] = useState(1)
+  const [limit] = useState(10)
+
+  const resetPage = () => setPage(1)
+
+  const handleDeviceChange = (deviceId: string) => {
+    setCurrentDevice(deviceId)
+    resetPage()
+  }
+
+  const handleWebhookChange = (webhookId: string) => {
+    setCurrentWebhook(webhookId)
+    resetPage()
+  }
+
+  const handleEventTypeChange = (type: string) => {
+    setEventType(type)
+    resetPage()
+  }
+
+  const handleStatusChange = (next: string) => {
+    setStatus(next)
+    resetPage()
+  }
+
+  const handleDateRangeChange = (range: string) => {
+    if (range === 'custom') {
+      setDateQuery({ start: '', end: '' })
+      setDateRange('custom')
+      setOpenCal(true)
+      return
+    }
+    setDateQuery(presetToRange(range))
+    setDateRange(range)
+    resetPage()
+  }
+
+  const cancelCustomRange = () => {
+    setOpenCal(false)
+    setDateRange('90')
+    setDateQuery(presetToRange('90'))
+  }
+
+  const applyCustomRange = () => {
+    resetPage()
+    setOpenCal(false)
+  }
+
+  return {
+    currentDevice,
+    currentWebhook,
+    eventType,
+    status,
+    dateRange,
+    openCal,
+    setOpenCal,
+    dateQuery,
+    setDateQuery,
+    page,
+    setPage,
+    limit,
+    handleDeviceChange,
+    handleWebhookChange,
+    handleEventTypeChange,
+    handleStatusChange,
+    handleDateRangeChange,
+    cancelCustomRange,
+    applyCustomRange,
+  }
+}
+
+export type WebhookHistoryFilters = ReturnType<typeof useWebhookHistoryFilters>
diff --git a/web/app/(app)/dashboard/(components)/webhooks/create-webhook-dialog.tsx b/web/app/(app)/dashboard/(components)/webhooks/create-webhook-dialog.tsx
index 425e2f13..07265036 100644
--- a/web/app/(app)/dashboard/(components)/webhooks/create-webhook-dialog.tsx
+++ b/web/app/(app)/dashboard/(components)/webhooks/create-webhook-dialog.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useEffect } from 'react'
 import {
   Dialog,
   DialogContent,
@@ -36,10 +37,9 @@ import * as z from 'zod'
 import { v4 as uuidv4 } from 'uuid'
 import { WebhookData } from '@/lib/types'
 import { WEBHOOK_EVENTS } from '@/lib/constants'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
 import { useToast } from '@/hooks/use-toast'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useCreateWebhook } from '@/lib/api'
+import { apiErrorMessage } from '@/lib/utils/errorHandler'
 
 const formSchema = z.object({
   name: z
@@ -52,6 +52,12 @@ const formSchema = z.object({
   signingSecret: z.string().min(1, { message: 'Signing secret is required' }),
 })
 
+// isActive is `.default(true)`, so zod's input type has it optional while the
+// output type has it guaranteed. The form holds the input shape; the submit
+// handler receives the output shape.
+type WebhookFormInput = z.input<typeof formSchema>
+type WebhookFormValues = z.output<typeof formSchema>
+
 interface CreateWebhookDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -62,51 +68,56 @@ export function CreateWebhookDialog({
   onOpenChange,
 }: CreateWebhookDialogProps) {
   const { toast } = useToast()
-  const queryClient = useQueryClient()
 
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: '',
-      deliveryUrl: '',
-      events: [WEBHOOK_EVENTS.MESSAGE_RECEIVED],
-      isActive: true,
-      signingSecret: uuidv4(),
-    },
+  // Built fresh on each call rather than inlined into defaultValues. The
+  // dialog is mounted for the whole session, so defaultValues was evaluated
+  // exactly once and a bare form.reset() restored that same object: every
+  // webhook created in one session ended up sharing a single signing secret,
+  // which defeats the point of per-endpoint verification.
+  const buildDefaults = (): WebhookFormInput => ({
+    name: '',
+    deliveryUrl: '',
+    events: [WEBHOOK_EVENTS.MESSAGE_RECEIVED],
+    isActive: true,
+    signingSecret: uuidv4(),
   })
 
-  const createWebhookMutation = useMutation({
-    mutationFn: (values: z.infer<typeof formSchema>) => {
-      const payload = {
-        ...values,
-        name: values.name?.trim() ? values.name.trim() : undefined,
-      }
-      return httpBrowserClient.post(
-        ApiEndpoints.gateway.createWebhook(),
-        payload,
-      )
-    },
-    onSuccess: () => {
-      toast({
-        title: 'Success',
-        description: 'Webhook created successfully',
-      })
-      queryClient.invalidateQueries({ queryKey: ['webhooks'] })
-      onOpenChange(false)
-      form.reset()
-    },
-    onError: (error: any) => {
-      toast({
-        title: 'Error',
-        description:
-          error?.response?.data?.message || 'Failed to create webhook',
-        variant: 'destructive',
-      })
-    },
+  const form = useForm<WebhookFormInput, unknown, WebhookFormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: buildDefaults(),
   })
 
-  const onSubmit = (values: z.infer<typeof formSchema>) => {
-    createWebhookMutation.mutate(values)
+  // Reopening the dialog must not reuse the previous secret either, including
+  // after a cancel.
+  useEffect(() => {
+    if (open) form.reset(buildDefaults())
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
+  const createWebhookMutation = useCreateWebhook()
+
+  const onSubmit = (values: WebhookFormValues) => {
+    const payload = {
+      ...values,
+      name: values.name?.trim() ? values.name.trim() : undefined,
+    }
+    createWebhookMutation.mutate(payload, {
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Webhook created successfully',
+        })
+        onOpenChange(false)
+        form.reset(buildDefaults())
+      },
+      onError: (error) => {
+        toast({
+          title: 'Error',
+          description: apiErrorMessage(error) || 'Failed to create webhook',
+          variant: 'destructive',
+        })
+      },
+    })
   }
 
   const message_events = [
diff --git a/web/app/(app)/dashboard/(components)/webhooks/delete-webhook-button.tsx b/web/app/(app)/dashboard/(components)/webhooks/delete-webhook-button.tsx
index 82811424..e9160b16 100644
--- a/web/app/(app)/dashboard/(components)/webhooks/delete-webhook-button.tsx
+++ b/web/app/(app)/dashboard/(components)/webhooks/delete-webhook-button.tsx
@@ -14,9 +14,8 @@ import {
 import { Button } from '@/components/ui/button'
 import { Trash2 } from 'lucide-react'
 import { useState } from 'react'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
+import { useDeleteWebhook } from '@/lib/api'
+import { apiErrorMessage } from '@/lib/utils/errorHandler'
 import { useToast } from '@/hooks/use-toast'
 
 interface DeleteWebhookButtonProps {
@@ -31,32 +30,30 @@ export function DeleteWebhookButton({
   onDeleted,
 }: DeleteWebhookButtonProps) {
   const [open, setOpen] = useState(false)
-  const queryClient = useQueryClient()
   const { toast } = useToast()
 
-  const { mutate: deleteWebhook, isPending } = useMutation({
-    mutationFn: () =>
-      httpBrowserClient.delete(ApiEndpoints.gateway.deleteWebhook(webhookId)),
-    onSuccess: () => {
-      toast({
-        title: 'Webhook deleted',
-        description: webhookLabel
-          ? `"${webhookLabel}" has been removed.`
-          : 'The webhook has been removed.',
-      })
-      queryClient.invalidateQueries({ queryKey: ['webhooks'] })
-      setOpen(false)
-      onDeleted?.()
-    },
-    onError: (error: any) => {
-      toast({
-        title: 'Error',
-        description:
-          error?.response?.data?.message || 'Failed to delete webhook',
-        variant: 'destructive',
-      })
-    },
-  })
+  const { mutate: deleteWebhook, isPending } = useDeleteWebhook(webhookId)
+
+  const confirmDelete = () =>
+    deleteWebhook(undefined, {
+      onSuccess: () => {
+        toast({
+          title: 'Webhook deleted',
+          description: webhookLabel
+            ? `"${webhookLabel}" has been removed.`
+            : 'The webhook has been removed.',
+        })
+        setOpen(false)
+        onDeleted?.()
+      },
+      onError: (error) => {
+        toast({
+          title: 'Error',
+          description: apiErrorMessage(error) || 'Failed to delete webhook',
+          variant: 'destructive',
+        })
+      },
+    })
 
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
@@ -81,7 +78,7 @@ export function DeleteWebhookButton({
           <AlertDialogAction
             onClick={(e) => {
               e.preventDefault()
-              deleteWebhook()
+              confirmDelete()
             }}
             disabled={isPending}
             className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
diff --git a/web/app/(app)/dashboard/(components)/webhooks/edit-webhook-dialog.tsx b/web/app/(app)/dashboard/(components)/webhooks/edit-webhook-dialog.tsx
index e8ba6901..414144e5 100644
--- a/web/app/(app)/dashboard/(components)/webhooks/edit-webhook-dialog.tsx
+++ b/web/app/(app)/dashboard/(components)/webhooks/edit-webhook-dialog.tsx
@@ -25,10 +25,9 @@ import * as z from 'zod'
 import { v4 as uuidv4 } from 'uuid'
 import { WebhookData } from '@/lib/types'
 import { WEBHOOK_EVENTS } from '@/lib/constants'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
 import { useToast } from '@/hooks/use-toast'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useUpdateWebhook } from '@/lib/api'
+import { apiErrorMessage } from '@/lib/utils/errorHandler'
 import {
   Popover,
   PopoverContent,
@@ -53,6 +52,12 @@ const formSchema = z.object({
   signingSecret: z.string().min(1, { message: 'Signing secret is required' }),
 })
 
+// isActive is `.default(true)`, so zod's input type has it optional while the
+// output type has it guaranteed. The form holds the input shape; the submit
+// handler receives the output shape.
+type WebhookFormInput = z.input<typeof formSchema>
+type WebhookFormValues = z.output<typeof formSchema>
+
 interface EditWebhookDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -64,10 +69,9 @@ export function EditWebhookDialog({
   onOpenChange,
   webhook,
 }: EditWebhookDialogProps) {
-  const queryClient = useQueryClient()
   const { toast } = useToast()
 
-  const form = useForm<z.infer<typeof formSchema>>({
+  const form = useForm<WebhookFormInput, unknown, WebhookFormValues>({
     resolver: zodResolver(formSchema),
     values: {
       name: webhook.name ?? '',
@@ -78,38 +82,29 @@ export function EditWebhookDialog({
     },
   })
 
-  const { mutate: updateWebhook, isPending } = useMutation({
-    mutationFn: async (values: z.infer<typeof formSchema>) => {
-      const payload = {
-        ...values,
-        name: values.name?.trim() ? values.name.trim() : '',
-      }
-      return httpBrowserClient.patch(
-        ApiEndpoints.gateway.updateWebhook(webhook._id),
-        payload,
-      )
-    },
-    onSuccess: () => {
-      toast({
-        title: 'Success',
-        description: 'Webhook updated successfully',
-      })
-      // Invalidate and refetch webhooks list
-      queryClient.invalidateQueries({ queryKey: ['webhooks'] })
-      onOpenChange(false)
-    },
-    onError: (error: any) => {
-      toast({
-        title: 'Error',
-        description:
-          error?.response?.data?.message || 'Failed to update webhook',
-        variant: 'destructive',
-      })
-    },
-  })
+  const { mutate: updateWebhook, isPending } = useUpdateWebhook(webhook._id)
 
-  const onSubmit = (values: z.infer<typeof formSchema>) => {
-    updateWebhook(values)
+  const onSubmit = (values: WebhookFormValues) => {
+    const payload = {
+      ...values,
+      name: values.name?.trim() ? values.name.trim() : '',
+    }
+    updateWebhook(payload, {
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Webhook updated successfully',
+        })
+        onOpenChange(false)
+      },
+      onError: (error) => {
+        toast({
+          title: 'Error',
+          description: apiErrorMessage(error) || 'Failed to update webhook',
+          variant: 'destructive',
+        })
+      },
+    })
   }
 
   const message_events = [
diff --git a/web/app/(app)/dashboard/(components)/webhooks/webhook-card.tsx b/web/app/(app)/dashboard/(components)/webhooks/webhook-card.tsx
index 7316b329..8e2fbb60 100644
--- a/web/app/(app)/dashboard/(components)/webhooks/webhook-card.tsx
+++ b/web/app/(app)/dashboard/(components)/webhooks/webhook-card.tsx
@@ -9,9 +9,7 @@ import { useState } from 'react'
 import { useToast } from '@/hooks/use-toast'
 import { CopyButton } from '@/components/shared/copy-button'
 import { WebhookData } from '@/lib/types'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
-import { useQueryClient } from '@tanstack/react-query'
+import { useUpdateWebhook } from '@/lib/api'
 import {
   Collapsible,
   CollapsibleContent,
@@ -33,39 +31,32 @@ export function WebhookCard({
   defaultOpen = false,
 }: WebhookCardProps) {
   const { toast } = useToast()
-  const [isLoading, setIsLoading] = useState(false)
-  const queryClient = useQueryClient()
   const [showSecret, setShowSecret] = useState(false)
   const [open, setOpen] = useState(defaultOpen)
 
-  const handleToggle = async (checked: boolean) => {
-    setIsLoading(true)
-    try {
-      await httpBrowserClient.patch(
-        ApiEndpoints.gateway.updateWebhook(webhook._id),
-        { isActive: checked },
-      )
-
-      await queryClient.invalidateQueries({
-        queryKey: ['webhooks'],
-      })
+  const { mutate: updateWebhook, isPending: isLoading } = useUpdateWebhook(
+    webhook._id
+  )
 
-      toast({
-        title: `Webhook ${checked ? 'enabled' : 'disabled'}`,
-        description: `Webhook notifications are now ${
-          checked ? 'enabled' : 'disabled'
-        }.`,
-      })
-    } catch (error) {
-      toast({
-        title: 'Error',
-        description: `Failed to ${checked ? 'enable' : 'disable'} webhook`,
-        variant: 'destructive',
-      })
-    } finally {
-      setIsLoading(false)
-    }
-  }
+  const handleToggle = (checked: boolean) =>
+    updateWebhook(
+      { isActive: checked },
+      {
+        onSuccess: () =>
+          toast({
+            title: `Webhook ${checked ? 'enabled' : 'disabled'}`,
+            description: `Webhook notifications are now ${
+              checked ? 'enabled' : 'disabled'
+            }.`,
+          }),
+        onError: () =>
+          toast({
+            title: 'Error',
+            description: `Failed to ${checked ? 'enable' : 'disable'} webhook`,
+            variant: 'destructive',
+          }),
+      }
+    )
 
   const maskSecret = (secret: string) => {
     if (!secret) return ''
diff --git a/web/app/(app)/dashboard/(components)/webhooks/webhooks-section.tsx b/web/app/(app)/dashboard/(components)/webhooks/webhooks-section.tsx
index 558a8df2..00747bbd 100644
--- a/web/app/(app)/dashboard/(components)/webhooks/webhooks-section.tsx
+++ b/web/app/(app)/dashboard/(components)/webhooks/webhooks-section.tsx
@@ -1,9 +1,11 @@
 'use client'
 
 import { Button } from '@/components/ui/button'
-import { Bell, PlusCircle, Webhook } from 'lucide-react'
+import { PlusCircle, Webhook } from 'lucide-react'
+import ErrorState from '@/components/shared/error-state'
 import { useState } from 'react'
 import { WebhookData } from '@/lib/types'
+import { queryKeys } from '@/lib/api/query-keys'
 import { WebhookCard } from './webhook-card'
 import { WebhookDocs } from './webhook-docs'
 import { CreateWebhookDialog } from './create-webhook-dialog'
@@ -12,7 +14,6 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import httpBrowserClient from '@/lib/httpBrowserClient'
 import { ApiEndpoints } from '@/config/api'
 import { Skeleton } from '@/components/ui/skeleton'
-import { useRouter } from 'next/navigation'
 
 function WebhookRowSkeleton() {
   return (
@@ -35,7 +36,6 @@ const MAX_WEBHOOKS_PER_USER = 5
 export default function WebhooksSection() {
   const [createDialogOpen, setCreateDialogOpen] = useState(false)
   const [editDialogOpen, setEditDialogOpen] = useState(false)
-  const navigator = useRouter()
   const [selectedWebhook, setSelectedWebhook] = useState<WebhookData | null>(
     null,
   )
@@ -45,14 +45,19 @@ export default function WebhooksSection() {
     data: webhooks,
     isLoading,
     error,
+    refetch,
   } = useQuery({
-    queryKey: ['webhooks'],
+    queryKey: queryKeys.webhooks,
     queryFn: () =>
       httpBrowserClient
         .get(ApiEndpoints.gateway.getWebhooks())
-        .then((res) => res.data),
+        .then((res) => res.data as { data: WebhookData[] }),
   })
 
+  // The list was previously read as `webhooks?.data?.length > 0`, which
+  // compares undefined against 0 while the query is still in flight.
+  const webhookList = webhooks?.data ?? []
+
   const handleCreateClick = () => {
     setCreateDialogOpen(true)
   }
@@ -66,47 +71,32 @@ export default function WebhooksSection() {
   const reachedLimit = webhookCount >= MAX_WEBHOOKS_PER_USER
 
   return (
-    <div className='container mx-auto py-4 sm:py-6 px-4 sm:px-6'>
-      <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4 sm:mb-6'>
-        <div>
-          <h1 className='text-xl sm:text-2xl font-bold flex flex-wrap items-center gap-2'>
-            <Webhook className='h-5 w-5 sm:h-6 sm:w-6' />
-            Webhooks
-            {!isLoading && webhookCount > 0 && (
-              <span className='text-sm font-normal text-muted-foreground'>
-                ({webhookCount}/{MAX_WEBHOOKS_PER_USER})
-              </span>
-            )}
-          </h1>
-          <p className='text-sm text-muted-foreground mt-1.5'>
-            Manage webhook notifications for your SMS events. You can configure
-            up to {MAX_WEBHOOKS_PER_USER} webhooks.
-          </p>
-        </div>
-        <div className='flex gap-x-4'>
-          <Button
-            onClick={handleCreateClick}
-            disabled={reachedLimit || isLoading}
-            variant='default'
-            className='w-full sm:w-auto'
-            title={
-              reachedLimit
-                ? `You have reached the maximum of ${MAX_WEBHOOKS_PER_USER} webhooks. Delete one to add a new one.`
-                : undefined
-            }
-          >
-            <PlusCircle className='mr-2 h-4 w-4' />
-            Create Webhook
-          </Button>
-          <Button
-            onClick={() => navigator.push('/dashboard/webhooks')}
-            variant='default'
-            className='w-full sm:w-auto'
-          >
-            <Bell className='mr-2 h-4 w-4' />
-            Notification Deliveries
-          </Button>
-        </div>
+    <div>
+      {/* Section title and the Deliveries view are owned by the webhooks
+          layout (route tabs); this header only carries count + actions. */}
+      <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4 sm:mb-6'>
+        <p className='text-sm text-muted-foreground'>
+          Receive real-time notifications for SMS events.{' '}
+          {!isLoading && (
+            <span className='font-medium text-foreground'>
+              {webhookCount}/{MAX_WEBHOOKS_PER_USER} configured
+            </span>
+          )}
+        </p>
+        <Button
+          onClick={handleCreateClick}
+          disabled={reachedLimit || isLoading}
+          variant='default'
+          className='w-full sm:w-auto'
+          title={
+            reachedLimit
+              ? `You have reached the maximum of ${MAX_WEBHOOKS_PER_USER} webhooks. Delete one to add a new one.`
+              : undefined
+          }
+        >
+          <PlusCircle className='mr-2 h-4 w-4' />
+          Create Webhook
+        </Button>
       </div>
 
       <div className='grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-8'>
@@ -120,17 +110,20 @@ export default function WebhooksSection() {
               <WebhookRowSkeleton />
             </div>
           ) : error ? (
-            <div className='rounded-lg border border-destructive/50 p-4 text-destructive'>
-              Error: {error.message}
-            </div>
-          ) : webhooks?.data?.length > 0 ? (
+            <ErrorState
+              error={error}
+              title="Couldn't load your webhooks"
+              icon={Webhook}
+              onRetry={() => refetch()}
+            />
+          ) : webhookList.length > 0 ? (
             <div className='rounded-md border divide-y bg-card overflow-hidden'>
-              {webhooks.data.map((webhook) => (
+              {webhookList.map((webhook) => (
                 <WebhookCard
                   key={webhook._id}
                   webhook={webhook}
                   onEdit={() => handleEditClick(webhook)}
-                  defaultOpen={webhooks.data.length === 1}
+                  defaultOpen={webhookList.length === 1}
                 />
               ))}
             </div>
diff --git a/web/app/(app)/dashboard/account/billing/page.tsx b/web/app/(app)/dashboard/account/billing/page.tsx
new file mode 100644
index 00000000..32068d72
--- /dev/null
+++ b/web/app/(app)/dashboard/account/billing/page.tsx
@@ -0,0 +1,10 @@
+import SubscriptionInfo from '../../(components)/billing/subscription-info'
+
+// Billing & plan: current subscription, usage limits and plan CTAs.
+export default function BillingPage() {
+  return (
+    <div className='max-w-2xl'>
+      <SubscriptionInfo />
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/account/change-password/page.tsx b/web/app/(app)/dashboard/account/change-password/page.tsx
index bcc558ff..05a6e98e 100644
--- a/web/app/(app)/dashboard/account/change-password/page.tsx
+++ b/web/app/(app)/dashboard/account/change-password/page.tsx
@@ -1,29 +1,6 @@
-import { ShieldIcon } from 'lucide-react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import ChangePasswordForm from '../../(components)/change-password-form'
+import { redirect } from 'next/navigation'
 
+// Legacy route: password management now lives in Account > Security.
 export default function ChangePasswordPage() {
-  return (
-    <div className='flex-1 space-y-6 p-6 md:p-8'>
-      <div className='space-y-1'>
-        <div className='flex items-center space-x-2'>
-          <ShieldIcon className='h-6 w-6 text-primary' />
-          <h2 className='text-3xl font-bold tracking-tight'>Change Password</h2>
-        </div>
-        <p className='text-muted-foreground'>Update your account password</p>
-      </div>
-
-      <div className='max-w-2xl'>
-        <Card>
-          <CardHeader>
-            <CardTitle>Password Security</CardTitle>
-            <CardDescription>Change your password to keep your account secure</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ChangePasswordForm />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-} 
\ No newline at end of file
+  redirect('/dashboard/account/security')
+}
diff --git a/web/app/(app)/dashboard/account/delete-account/page.tsx b/web/app/(app)/dashboard/account/delete-account/page.tsx
index bd8be6e4..cb1c75ae 100644
--- a/web/app/(app)/dashboard/account/delete-account/page.tsx
+++ b/web/app/(app)/dashboard/account/delete-account/page.tsx
@@ -1,34 +1,6 @@
-import { AlertTriangleIcon } from 'lucide-react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import DeleteAccountForm from '../../(components)/delete-account-form'
+import { redirect } from 'next/navigation'
 
-export default function DangerZonePage() {
-  return (
-    <div className='flex-1 space-y-6 p-6 md:p-8'>
-      <div className='space-y-1'>
-        <div className='flex items-center space-x-2'>
-          <AlertTriangleIcon className='h-6 w-6 text-destructive' />
-          <h2 className='text-3xl font-bold tracking-tight'>Danger Zone</h2>
-        </div>
-        <p className='text-muted-foreground'>Manage critical account actions</p>
-      </div>
-
-      <div className='max-w-2xl'>
-        <Card className='border-destructive/50'>
-          <CardHeader>
-            <div className='flex items-center gap-2 text-destructive'>
-              <AlertTriangleIcon className='h-5 w-5' />
-              <CardTitle>Delete Account</CardTitle>
-            </div>
-            <CardDescription>
-              Permanently delete your account and all associated data
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <DeleteAccountForm />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-} 
\ No newline at end of file
+// Legacy route: account deletion now lives in Account > Security (danger zone).
+export default function DeleteAccountPage() {
+  redirect('/dashboard/account/security')
+}
diff --git a/web/app/(app)/dashboard/account/edit-profile/page.tsx b/web/app/(app)/dashboard/account/edit-profile/page.tsx
index 76c6f7e9..351a6988 100644
--- a/web/app/(app)/dashboard/account/edit-profile/page.tsx
+++ b/web/app/(app)/dashboard/account/edit-profile/page.tsx
@@ -1,29 +1,6 @@
-import { UserIcon } from 'lucide-react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import EditProfileForm from '../../(components)/edit-profile-form'
+import { redirect } from 'next/navigation'
 
+// Legacy route: profile editing now lives in the merged account settings.
 export default function EditProfilePage() {
-  return (
-    <div className='flex-1 space-y-6 p-6 md:p-8'>
-      <div className='space-y-1'>
-        <div className='flex items-center space-x-2'>
-          <UserIcon className='h-6 w-6 text-primary' />
-          <h2 className='text-3xl font-bold tracking-tight'>Edit Profile</h2>
-        </div>
-        <p className='text-muted-foreground'>Update your profile information</p>
-      </div>
-
-      <div className='max-w-2xl'>
-        <Card>
-          <CardHeader>
-            <CardTitle>Profile Information</CardTitle>
-            <CardDescription>Update your personal details</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <EditProfileForm />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-} 
\ No newline at end of file
+  redirect('/dashboard/account/profile')
+}
diff --git a/web/app/(app)/dashboard/account/get-support/page.tsx b/web/app/(app)/dashboard/account/get-support/page.tsx
index e40df961..a64cc7f3 100644
--- a/web/app/(app)/dashboard/account/get-support/page.tsx
+++ b/web/app/(app)/dashboard/account/get-support/page.tsx
@@ -1,29 +1,6 @@
-import { MessageSquareIcon } from 'lucide-react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import SupportForm from '../../(components)/support-form'
+import { redirect } from 'next/navigation'
 
+// Legacy route: support now lives in Account > Support.
 export default function GetSupportPage() {
-  return (
-    <div className='flex-1 space-y-6 p-6 md:p-8'>
-      <div className='space-y-1'>
-        <div className='flex items-center space-x-2'>
-          <MessageSquareIcon className='h-6 w-6 text-primary' />
-          <h2 className='text-3xl font-bold tracking-tight'>Get Support</h2>
-        </div>
-        <p className='text-muted-foreground'>Contact our support team for assistance</p>
-      </div>
-
-      <div className='max-w-2xl'>
-        <Card>
-          <CardHeader>
-            <CardTitle>Contact Support</CardTitle>
-            <CardDescription>Fill out the form below and we'll get back to you as soon as possible.</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <SupportForm />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-} 
\ No newline at end of file
+  redirect('/dashboard/account/support')
+}
diff --git a/web/app/(app)/dashboard/account/layout.tsx b/web/app/(app)/dashboard/account/layout.tsx
new file mode 100644
index 00000000..7769a1ff
--- /dev/null
+++ b/web/app/(app)/dashboard/account/layout.tsx
@@ -0,0 +1,31 @@
+import type { PropsWithChildren } from 'react'
+import { UserIcon } from 'lucide-react'
+import RouteTabs from '@/components/shared/route-tabs'
+import PageHeader from '@/components/shared/page-header'
+
+// Account is one settings experience: sections are route-based tabs (same
+// interaction grammar as messaging/webhooks), Billing first since the
+// subscription is the most-visited account content.
+export default function AccountLayout({ children }: PropsWithChildren) {
+  return (
+    <div className='flex-1 p-4 sm:p-6 md:p-8'>
+      <PageHeader
+        icon={UserIcon}
+        title='Account'
+        description='Manage your subscription, profile and security'
+      />
+
+      <RouteTabs
+        className='mb-6'
+        tabs={[
+          { href: '/dashboard/account/billing', label: 'Billing & plan' },
+          { href: '/dashboard/account/profile', label: 'Profile' },
+          { href: '/dashboard/account/security', label: 'Security' },
+          { href: '/dashboard/account/support', label: 'Support' },
+        ]}
+      />
+
+      {children}
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/account/page.tsx b/web/app/(app)/dashboard/account/page.tsx
index 70c94dec..ea89cdbf 100644
--- a/web/app/(app)/dashboard/account/page.tsx
+++ b/web/app/(app)/dashboard/account/page.tsx
@@ -1,95 +1,6 @@
-import { UserIcon, PencilIcon, KeyIcon, AlertTriangleIcon, MessageSquareIcon } from 'lucide-react'
-import SubscriptionInfo from '../(components)/subscription-info'
-import { Button } from '@/components/ui/button'
-import Link from 'next/link'
+import { redirect } from 'next/navigation'
 
+// Account is a settings section with subroutes; Billing is the default view.
 export default function AccountPage() {
-  return (
-    <div className='flex-1 space-y-6 p-6 md:p-8'>
-      <div className='space-y-1'>
-        <div className='flex items-center space-x-2'>
-          <UserIcon className='h-6 w-6 text-primary' />
-          <h2 className='text-3xl font-bold tracking-tight'>Account</h2>
-        </div>
-        <p className='text-muted-foreground'>Manage your account settings and preferences</p>
-      </div>
-
-      <div className='grid grid-cols-1 lg:grid-cols-2 gap-6'>
-        {/* Left column - Subscription Information */}
-        <div className='space-y-4'>
-          <h3 className='text-lg font-semibold'>Subscription Information</h3>
-          <SubscriptionInfo />
-        </div>
-
-        {/* Right column - Account Management */}
-        <div className='space-y-6'>
-          <div className='space-y-4'>
-            <h3 className='text-lg font-semibold'>Account Management</h3>
-            
-            <div className='grid gap-4'>
-              <Link href="/dashboard/account/edit-profile">
-                <Button variant="outline" className="w-full justify-start h-auto py-3">
-                  <div className='flex items-center'>
-                    <div className='bg-primary/10 p-2 rounded-full mr-3'>
-                      <PencilIcon className='h-5 w-5 text-primary' />
-                    </div>
-                    <div className='text-left'>
-                      <div className='font-medium'>Edit Profile</div>
-                      <div className='text-sm text-muted-foreground'>Update your personal information</div>
-                    </div>
-                  </div>
-                </Button>
-              </Link>
-              
-              <Link href="/dashboard/account/change-password">
-                <Button variant="outline" className="w-full justify-start h-auto py-3">
-                  <div className='flex items-center'>
-                    <div className='bg-primary/10 p-2 rounded-full mr-3'>
-                      <KeyIcon className='h-5 w-5 text-primary' />
-                    </div>
-                    <div className='text-left'>
-                      <div className='font-medium'>Change Password</div>
-                      <div className='text-sm text-muted-foreground'>Update your account password</div>
-                    </div>
-                  </div>
-                </Button>
-              </Link>
-              
-              <Link href="/dashboard/account/get-support">
-                <Button variant="outline" className="w-full justify-start h-auto py-3">
-                  <div className='flex items-center'>
-                    <div className='bg-primary/10 p-2 rounded-full mr-3'>
-                      <MessageSquareIcon className='h-5 w-5 text-primary' />
-                    </div>
-                    <div className='text-left'>
-                      <div className='font-medium'>Get Support</div>
-                      <div className='text-sm text-muted-foreground'>Contact our support team for assistance</div>
-                    </div>
-                  </div>
-                </Button>
-              </Link>
-            </div>
-          </div>
-          
-          <div className='space-y-4 pt-4 border-t'>
-            <h3 className='text-lg font-semibold text-destructive'>Danger Zone</h3>
-            
-            <Link href="/dashboard/account/delete-account">
-              <Button variant="outline" className="w-full justify-start h-auto py-3 border-destructive/30">
-                <div className='flex items-center'>
-                  <div className='bg-destructive/10 p-2 rounded-full mr-3'>
-                    <AlertTriangleIcon className='h-5 w-5 text-destructive' />
-                  </div>
-                  <div className='text-left'>
-                    <div className='font-medium text-destructive'>Delete Account</div>
-                    <div className='text-sm text-muted-foreground'>Permanently delete your account</div>
-                  </div>
-                </div>
-              </Button>
-            </Link>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
+  redirect('/dashboard/account/billing')
 }
diff --git a/web/app/(app)/dashboard/account/profile/page.tsx b/web/app/(app)/dashboard/account/profile/page.tsx
new file mode 100644
index 00000000..01e4a4bc
--- /dev/null
+++ b/web/app/(app)/dashboard/account/profile/page.tsx
@@ -0,0 +1,24 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import EditProfileForm from '../../(components)/account/edit-profile-form'
+
+export default function ProfilePage() {
+  return (
+    <div className='max-w-2xl'>
+      <Card>
+        <CardHeader>
+          <CardTitle>Profile Information</CardTitle>
+          <CardDescription>Update your personal details</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <EditProfileForm />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/account/security/page.tsx b/web/app/(app)/dashboard/account/security/page.tsx
new file mode 100644
index 00000000..8c2afffe
--- /dev/null
+++ b/web/app/(app)/dashboard/account/security/page.tsx
@@ -0,0 +1,50 @@
+import { AlertTriangleIcon } from 'lucide-react'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import ChangePasswordForm from '../../(components)/account/change-password-form'
+import DeleteAccountForm from '../../(components)/account/delete-account-form'
+
+// Security: password management, with account deletion in a clearly separated
+// destructive card so the two actions can never be confused.
+export default function SecurityPage() {
+  return (
+    <div className='max-w-2xl space-y-8'>
+      <Card>
+        <CardHeader>
+          <CardTitle>Password</CardTitle>
+          <CardDescription>
+            Change your password to keep your account secure
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChangePasswordForm />
+        </CardContent>
+      </Card>
+
+      <div className='space-y-3'>
+        <h3 className='text-sm font-semibold uppercase tracking-wide text-destructive'>
+          Danger zone
+        </h3>
+        <Card className='border-destructive/50'>
+          <CardHeader>
+            <div className='flex items-center gap-2 text-destructive'>
+              <AlertTriangleIcon className='h-5 w-5' />
+              <CardTitle>Delete Account</CardTitle>
+            </div>
+            <CardDescription>
+              Permanently delete your account and all associated data
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <DeleteAccountForm />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/account/support/page.tsx b/web/app/(app)/dashboard/account/support/page.tsx
new file mode 100644
index 00000000..3d218b1e
--- /dev/null
+++ b/web/app/(app)/dashboard/account/support/page.tsx
@@ -0,0 +1,27 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import SupportForm from '../../(components)/account/support-form'
+
+export default function SupportPage() {
+  return (
+    <div className='max-w-2xl'>
+      <Card>
+        <CardHeader>
+          <CardTitle>Contact Support</CardTitle>
+          <CardDescription>
+            Fill out the form below and we'll get back to you as soon as
+            possible.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <SupportForm />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/community/page.tsx b/web/app/(app)/dashboard/community/page.tsx
index 67633207..020a6e30 100644
--- a/web/app/(app)/dashboard/community/page.tsx
+++ b/web/app/(app)/dashboard/community/page.tsx
@@ -1,20 +1,19 @@
 import { UsersIcon } from 'lucide-react'
-import CommunityLinks from '../(components)/community-links'
+import PageHeader from '@/components/shared/page-header'
+import CommunityLinks from '../(components)/community/community-links'
 
 export default function CommunityPage() {
   return (
-    <div className='flex-1 space-y-6 p-6 md:p-8'>
-      <div className='space-y-1'>
-        <div className='flex items-center space-x-2'>
-          <UsersIcon className='h-6 w-6 text-primary' />
-          <h2 className='text-3xl font-bold tracking-tight'>Community</h2>
-        </div>
-        <p className='text-muted-foreground'>Connect with other users and find support</p>
-      </div>
-
-      <div className=''>
-        <CommunityLinks />
-      </div>
+    // p-4 on mobile, matching every other dashboard section. This page was the
+    // only one still starting at p-6, and the only one absent from the 375px
+    // overflow guard, which is presumably how it was missed.
+    <div className='flex-1 space-y-6 p-4 sm:p-6 md:p-8'>
+      <PageHeader
+        icon={UsersIcon}
+        title='Community'
+        description='Connect with other users and find support'
+      />
+      <CommunityLinks />
     </div>
   )
 }
diff --git a/web/app/(app)/dashboard/layout.tsx b/web/app/(app)/dashboard/layout.tsx
index 4a357cca..975447f3 100644
--- a/web/app/(app)/dashboard/layout.tsx
+++ b/web/app/(app)/dashboard/layout.tsx
@@ -1,15 +1,26 @@
 'use client'
 
-import { Home, MessageSquareText, UserCircle, Users } from 'lucide-react'
+import { useState } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import AccountDeletionAlert from './(components)/account-deletion-alert'
-import UpgradeToProAlert from './(components)/upgrade-to-pro-alert'
-import UpdateAppModal from './(components)/update-app-modal'
-import UpdateAppNotificationBar from './(components)/update-app-notification-bar'
-import VerifyEmailAlert from './(components)/verify-email-alert'
-import PastDueBillingAlert from './(components)/past-due-billing-alert'
+import AccountDeletionAlert from './(components)/alerts/account-deletion-alert'
+import UpgradeToProAlert from './(components)/alerts/upgrade-to-pro-alert'
+import UpdateAppModal from './(components)/devices/update-app-modal'
+import UpdateAppNotificationBar from './(components)/devices/update-app-notification-bar'
+import VerifyEmailAlert from './(components)/alerts/verify-email-alert'
+import PastDueBillingAlert from './(components)/alerts/past-due-billing-alert'
 import { SurveyModal } from '@/components/shared/survey-modal'
+import Footer from '@/components/shared/footer'
+import ThemeToggle from '@/components/shared/theme-toggle'
+import CommandMenu from './(components)/search/command-menu'
+import SearchTrigger from './(components)/search/search-trigger'
+import {
+  isNavItemActive,
+  mobileNavItems,
+  navItems,
+  type NavItem,
+} from './(components)/nav-items'
+import { cn } from '@/lib/utils'
 
 export default function DashboardLayout({
   children,
@@ -17,157 +28,144 @@ export default function DashboardLayout({
   children: React.ReactNode
 }) {
   const pathname = usePathname()
+  // Owned here, not inside the palette, so both the sidebar trigger (desktop)
+  // and the floating trigger (mobile) open the same dialog.
+  const [searchOpen, setSearchOpen] = useState(false)
 
   return (
-    <div className='flex min-h-screen flex-col md:flex-row'>
-      {/* Sidebar for desktop */}
-      <aside className='hidden md:flex flex-col fixed top-[20%] left-0 w-24 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg z-10 rounded-r-lg'>
-        <nav className='flex flex-col justify-center items-center h-full py-3 space-y-4'>
-          <NavItem
-            href='/dashboard'
-            icon={<Home className='h-6 w-6 stroke-[1.5]' />}
-            label='Dashboard'
-            isActive={pathname === '/dashboard'}
-          />
-          <NavItem
-            href='/dashboard/messaging'
-            icon={<MessageSquareText className='h-6 w-6 stroke-[1.5]' />}
-            label='Messaging'
-            isActive={pathname === '/dashboard/messaging'}
-          />
-          <NavItem
-            href='/dashboard/community'
-            icon={<Users className='h-6 w-6 stroke-[1.5]' />}
-            label='Community'
-            isActive={pathname === '/dashboard/community'}
-          />
-          <NavItem
-            href='/dashboard/account'
-            icon={<UserCircle className='h-6 w-6 stroke-[1.5]' />}
-            label='Account'
-            isActive={pathname === '/dashboard/account'}
-          />
-        </nav>
+    <div className='min-h-[calc(100vh-3.5rem)]'>
+      {/* Visible only on focus. Without it, keyboard users tab through the
+          whole sidebar on every page before reaching the content. */}
+      <a
+        href='#main-content'
+        className='sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:shadow-lg focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'
+      >
+        Skip to content
+      </a>
+      <CommandMenu open={searchOpen} onOpenChange={setSearchOpen} />
+
+      {/* Desktop sidebar, sits below the sticky app header (h-14). */}
+      <aside className='fixed inset-y-0 left-0 top-14 z-30 hidden w-60 flex-col border-r border-border bg-card md:flex'>
+        <div className='flex-1 overflow-y-auto px-3 py-4'>
+          <div className='mb-4'>
+            <SearchTrigger onOpen={() => setSearchOpen(true)} />
+          </div>
+          {/* Distinct labels: several nav landmarks on one page are otherwise
+              indistinguishable in a screen reader's landmark list. */}
+          <nav className='flex flex-col gap-1' aria-label='Main'>
+            {navItems.map((item) => (
+              <SidebarLink
+                key={item.href}
+                item={item}
+                isActive={isNavItemActive(item.href, pathname)}
+              />
+            ))}
+          </nav>
+        </div>
+        <div className='space-y-3 border-t border-border px-4 py-3'>
+          <p className='text-xs text-muted-foreground'>
+            Need help?{' '}
+            <a
+              href='https://textbee.dev/quickstart'
+              target='_blank'
+              rel='noreferrer'
+              className='font-medium text-primary hover:underline'
+            >
+              Quick start
+            </a>
+          </p>
+          <ThemeToggle />
+        </div>
       </aside>
 
-      {/* Main content with left padding to account for fixed sidebar */}
-      <main className='flex-1 min-w-0 overflow-auto md:ml-24'>
-        <div className='space-y-2 p-4'>
+      {/* Main content, offset for the fixed sidebar on desktop. */}
+      <div className='md:pl-60'>
+        {/* The desktop search trigger lives in the sidebar, which is hidden on
+            mobile. A labelled bar beats an icon here: search is how mobile
+            reaches Webhooks and every subroute the 4-item tab bar omits. */}
+        <div className='sticky top-14 z-20 border-b border-border bg-background/95 px-4 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/80 md:hidden'>
+          <SearchTrigger onOpen={() => setSearchOpen(true)} />
+        </div>
+
+        <div className='space-y-2 p-4 pb-0'>
           <UpdateAppNotificationBar />
           <VerifyEmailAlert />
           <PastDueBillingAlert />
           <AccountDeletionAlert />
           <UpgradeToProAlert />
-          {/* <BlackFridayModal /> */}
         </div>
-        {children}
-      </main>
+        <main id='main-content' tabIndex={-1}>
+          {children}
+        </main>
+        {/* Inside the sidebar-offset column so the fixed sidebar cannot paint
+            over it, and padded clear of the fixed mobile tab bar. */}
+        <div className='pb-20 pt-8 md:pb-0'>
+          <Footer />
+        </div>
+      </div>
 
-      {/* Bottom navigation for mobile */}
-      <nav className='md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg z-10'>
-        <div className='flex items-center justify-around h-16'>
-          <MobileNavItem
-            href='/dashboard'
-            icon={<Home className='h-5 w-5 stroke-[1.5]' />}
-            label='Dashboard'
-            isActive={pathname === '/dashboard'}
-          />
-          <MobileNavItem
-            href='/dashboard/messaging'
-            icon={<MessageSquareText className='h-5 w-5 stroke-[1.5]' />}
-            label='Messaging'
-            isActive={pathname === '/dashboard/messaging'}
-          />
-          <MobileNavItem
-            href='/dashboard/community'
-            icon={<Users className='h-5 w-5 stroke-[1.5]' />}
-            label='Community'
-            isActive={pathname === '/dashboard/community'}
-          />
-          <MobileNavItem
-            href='/dashboard/account'
-            icon={<UserCircle className='h-5 w-5 stroke-[1.5]' />}
-            label='Account'
-            isActive={pathname === '/dashboard/account'}
-          />
+      {/* Mobile bottom tab bar (max 4 items; the rest are desktop/palette only). */}
+      <nav
+        aria-label='Primary (mobile)'
+        className='fixed inset-x-0 bottom-0 z-40 border-t border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/80 md:hidden'
+      >
+        <div className='flex h-16 items-center justify-around'>
+          {mobileNavItems.map((item) => (
+            <MobileNavLink
+              key={item.href}
+              item={item}
+              isActive={isNavItemActive(item.href, pathname)}
+            />
+          ))}
         </div>
       </nav>
 
-      {/* Bottom padding for mobile to account for the fixed navigation */}
-      <div className='h-16 md:hidden'></div>
-
       <SurveyModal />
       <UpdateAppModal />
     </div>
   )
 }
 
-// Desktop navigation item
-function NavItem({
-  href,
-  icon,
-  label,
-  isActive,
-}: {
-  href: string
-  icon: React.ReactNode
-  label: string
-  isActive: boolean
-}) {
+function SidebarLink({ item, isActive }: { item: NavItem; isActive: boolean }) {
+  const Icon = item.icon
   return (
     <Link
-      href={href}
-      prefetch={true}
-      className={`flex flex-col items-center p-2 rounded-md transition-colors w-20 ${isActive
-        ? 'border border-brand-500 dark:border-brand-400 bg-brand-100/20 dark:bg-brand-900/10 text-brand-600 dark:text-brand-400'
-        : 'text-gray-700 dark:text-gray-200 hover:bg-brand-100/20 dark:hover:bg-brand-900/10 hover:text-brand-600 dark:hover:text-brand-400'
-        }`}
+      href={item.href}
+      prefetch
+      aria-current={isActive ? 'page' : undefined}
+      className={cn(
+        'group flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+        isActive
+          ? 'bg-primary/10 text-primary'
+          : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+      )}
     >
-      <span
-        className={
-          isActive
-            ? 'text-brand-600 dark:text-brand-400 mb-1'
-            : 'text-gray-600 dark:text-gray-300 mb-1'
-        }
-      >
-        {icon}
-      </span>
-      <span className='font-medium text-xs'>{label}</span>
+      <Icon className='h-[18px] w-[18px] shrink-0 stroke-[1.75]' />
+      <span>{item.label}</span>
     </Link>
   )
 }
 
-// Mobile navigation item
-function MobileNavItem({
-  href,
-  icon,
-  label,
+function MobileNavLink({
+  item,
   isActive,
 }: {
-  href: string
-  icon: React.ReactNode
-  label: string
+  item: NavItem
   isActive: boolean
 }) {
+  const Icon = item.icon
   return (
     <Link
-      href={href}
-      prefetch={true}
-      className={`flex flex-col items-center justify-center p-2 rounded-md w-[23%] ${isActive
-        ? 'border border-brand-500 dark:border-brand-400 bg-brand-100/20 dark:bg-brand-900/10 text-brand-600 dark:text-brand-400'
-        : 'text-gray-700 dark:text-gray-300 hover:text-brand-600 dark:hover:text-brand-400'
-        }`}
+      href={item.href}
+      prefetch
+      aria-current={isActive ? 'page' : undefined}
+      className={cn(
+        'flex flex-1 flex-col items-center justify-center gap-1 py-2 text-[11px] font-medium transition-colors',
+        isActive ? 'text-primary' : 'text-muted-foreground hover:text-foreground'
+      )}
     >
-      <span
-        className={
-          isActive
-            ? 'text-brand-600 dark:text-brand-400'
-            : 'text-gray-600 dark:text-gray-300'
-        }
-      >
-        {icon}
-      </span>
-      <span className='text-xs mt-1'>{label}</span>
+      <Icon className='h-5 w-5 stroke-[1.75]' />
+      <span>{item.label}</span>
     </Link>
   )
 }
diff --git a/web/app/(app)/dashboard/messaging/(components)/api-guide.tsx b/web/app/(app)/dashboard/messaging/(components)/api-guide.tsx
deleted file mode 100644
index 5251ee7e..00000000
--- a/web/app/(app)/dashboard/messaging/(components)/api-guide.tsx
+++ /dev/null
@@ -1,420 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Code, Terminal, Check, Copy, ArrowRight, ExternalLink, ChevronDown, ChevronUp } from 'lucide-react'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../../../../components/ui/collapsible'
-import SyntaxHighlighter from 'react-syntax-highlighter'
-import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import Link from 'next/link'
-
-export default function ApiGuide() {
-  const [activeTab, setActiveTab] = useState('send-sms')
-  const [activeLangTab, setActiveLangTab] = useState('node')
-  const [copiedIndex, setCopiedIndex] = useState(-1)
-  const [isOpen, setIsOpen] = useState(false)
-
-  const handleCopy = (index: number, code: string) => {
-    navigator.clipboard.writeText(code)
-    setCopiedIndex(index)
-    setTimeout(() => setCopiedIndex(-1), 2000)
-  }
-
-  const apiEndpoints = [
-    {
-      id: 'send-sms',
-      title: 'Send SMS',
-      description: 'Send SMS messages to one or more recipients',
-      endpoint: '/api/v1/gateway/devices/:id/send-sms',
-      badge: { color: 'green', text: 'POST' },
-      request: {
-        node: {
-          language: 'javascript',
-          code: `import axios from 'axios'
-
-const BASE_URL = 'https://api.textbee.dev/api/v1'
-const API_KEY = 'YOUR_API_KEY'
-const DEVICE_ID = 'YOUR_DEVICE_ID'
-
-const response = await axios.post(
-  \`\${BASE_URL}/gateway/devices/\${DEVICE_ID}/send-sms\`,
-  {
-    recipients: [ '+1234567890' ],
-    message: 'Hello from TextBee!'
-  },
-  { headers: { 'x-api-key': API_KEY } }
-)
-
-console.log(response.data)`
-        },
-        python: {
-          language: 'python',
-          code: `import requests
-
-BASE_URL = 'https://api.textbee.dev/api/v1'
-API_KEY = 'YOUR_API_KEY'
-DEVICE_ID = 'YOUR_DEVICE_ID'
-
-response = requests.post(
-  f'{BASE_URL}/gateway/devices/{DEVICE_ID}/send-sms',
-  json={
-    'recipients': ['+1234567890'],
-    'message': 'Hello from TextBee!'
-  },
-  headers={'x-api-key': API_KEY}
-)
-
-print(response.json())`
-        },
-        curl: {
-          language: 'bash',
-          code: `curl -X POST "https://api.textbee.dev/api/v1/gateway/devices/YOUR_DEVICE_ID/send-sms" \\
-  -H 'x-api-key: YOUR_API_KEY' \\
-  -H 'Content-Type: application/json' \\
-  -d '{
-    "recipients": [ "+1234567890" ],
-    "message": "Hello from TextBee!"
-  }'`
-        }
-      },
-      response: {
-        language: 'json',
-        code: `{
-  "data": {
-    "_id": "sms_1234567890",
-    "message": "Hello from TextBee!",
-    "recipients": ["+1234567890"],
-    "status": "PENDING",
-    "createdAt": "2023-09-15T14:23:45Z"
-  }
-}`
-      }
-    },
-    {
-      id: 'get-sms',
-      title: 'Get SMS by ID',
-      description: 'Retrieve details and status of a specific SMS message',
-      endpoint: '/api/v1/gateway/devices/:id/sms/:smsId',
-      badge: { color: 'blue', text: 'GET' },
-      request: {
-        node: {
-          language: 'javascript',
-          code: `import axios from 'axios'
-
-const BASE_URL = 'https://api.textbee.dev/api/v1'
-const API_KEY = 'YOUR_API_KEY'
-const DEVICE_ID = 'YOUR_DEVICE_ID'
-const SMS_ID = 'YOUR_SMS_ID'
-
-const response = await axios.get(
-  \`\${BASE_URL}/gateway/devices/\${DEVICE_ID}/sms/\${SMS_ID}\`,
-  { headers: { 'x-api-key': API_KEY } }
-)
-
-console.log(response.data)`
-        },
-        python: {
-          language: 'python',
-          code: `import requests
-
-BASE_URL = 'https://api.textbee.dev/api/v1'
-API_KEY = 'YOUR_API_KEY'
-DEVICE_ID = 'YOUR_DEVICE_ID'
-SMS_ID = 'YOUR_SMS_ID'
-
-response = requests.get(
-  f'{BASE_URL}/gateway/devices/{DEVICE_ID}/sms/{SMS_ID}',
-  headers={'x-api-key': API_KEY}
-)
-
-print(response.json())`
-        },
-        curl: {
-          language: 'bash',
-          code: `curl -X GET "https://api.textbee.dev/api/v1/gateway/devices/YOUR_DEVICE_ID/sms/YOUR_SMS_ID" \\
-  -H 'x-api-key: YOUR_API_KEY'`
-        }
-      },
-      response: {
-        language: 'json',
-        code: `{
-  "data": {
-    "_id": "sms_1234567890",
-    "message": "Hello from TextBee!",
-    "recipient": "+1234567890",
-    "status": "DELIVERED",
-    "sentAt": "2023-09-15T14:23:45Z",
-    "deliveredAt": "2023-09-15T14:23:48Z"
-  }
-}`
-      }
-    },
-    {
-      id: 'get-batch',
-      title: 'Get SMS Batch',
-      description: 'Retrieve details and status of a batch of SMS messages',
-      endpoint: '/api/v1/gateway/devices/:id/sms-batch/:batchId',
-      badge: { color: 'blue', text: 'GET' },
-      request: {
-        node: {
-          language: 'javascript',
-          code: `import axios from 'axios'
-
-const BASE_URL = 'https://api.textbee.dev/api/v1'
-const API_KEY = 'YOUR_API_KEY'
-const DEVICE_ID = 'YOUR_DEVICE_ID'
-const BATCH_ID = 'YOUR_BATCH_ID'
-
-const response = await axios.get(
-  \`\${BASE_URL}/gateway/devices/\${DEVICE_ID}/sms-batch/\${BATCH_ID}\`,
-  { headers: { 'x-api-key': API_KEY } }
-)
-
-console.log(response.data)`
-        },
-        python: {
-          language: 'python',
-          code: `import requests
-
-BASE_URL = 'https://api.textbee.dev/api/v1'
-API_KEY = 'YOUR_API_KEY'
-DEVICE_ID = 'YOUR_DEVICE_ID'
-BATCH_ID = 'YOUR_BATCH_ID'
-
-response = requests.get(
-  f'{BASE_URL}/gateway/devices/{DEVICE_ID}/sms-batch/{BATCH_ID}',
-  headers={'x-api-key': API_KEY}
-)
-
-print(response.json())`
-        },
-        curl: {
-          language: 'bash',
-          code: `curl -X GET "https://api.textbee.dev/api/v1/gateway/devices/YOUR_DEVICE_ID/sms-batch/YOUR_BATCH_ID" \\
-  -H 'x-api-key: YOUR_API_KEY'`
-        }
-      },
-      response: {
-        language: 'json',
-        code: `{
-  "data": {
-    "batch": {
-      "_id": "batch_9876543210",
-      "createdAt": "2023-09-15T14:23:45Z"
-    },
-    "messages": [
-      {
-        "_id": "sms_1234567890",
-        "recipient": "+1234567890",
-        "message": "Hello from TextBee!",
-        "status": "DELIVERED",
-        "sentAt": "2023-09-15T14:23:45Z",
-        "deliveredAt": "2023-09-15T14:23:48Z",
-      },
-      {
-        "_id": "sms_0987654321",
-        "recipient": "+0987654321",
-        "message": "Hello from TextBee!",
-        "status": "SENT",
-        "sentAt": "2023-09-15T14:23:45Z",
-        "deliveredAt": null
-      },{
-        "_id": "sms_0987654321",
-        "recipient": "+0987654321",
-        "message": "Hello from TextBee!",
-        "status": "FAILED",
-        "sentAt": null,
-        "deliveredAt": null,
-        "failedAt": "2023-09-15T14:23:45Z",
-        "errorCode": "1234567890",
-        "errorMessage": "Generic error"
-      }
-
-    ]
-  }
-}`
-      }
-    }
-  ]
-
-  return (
-    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-full">
-      <div className="border rounded-lg p-4 bg-card">
-        <CollapsibleTrigger asChild>
-          <div className="flex items-center justify-between cursor-pointer">
-            <div className="flex items-center gap-2">
-              <Code className="h-5 w-5 text-primary" />
-              <h3 className="text-xl font-semibold">API Documentation</h3>
-            </div>
-            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-              {isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-            </Button>
-          </div>
-        </CollapsibleTrigger>
-        
-        <CollapsibleContent className="mt-4">
-          <div className="flex items-center justify-between mb-4">
-            <p className="text-sm text-muted-foreground">Integrate SMS capabilities into your applications</p>
-            <Link href="https://api.textbee.dev/" target="_blank">
-              <Button variant="outline" size="sm" className="flex items-center gap-1">
-                <ExternalLink className="h-4 w-4" />
-                <span>Full API Docs</span>
-              </Button>
-            </Link>
-          </div>
-
-          <Tabs value={activeTab} onValueChange={setActiveTab}>
-            <TabsList className="grid grid-cols-3 mb-4">
-              {apiEndpoints.map((endpoint) => (
-                <TabsTrigger key={endpoint.id} value={endpoint.id}>
-                  {endpoint.title}
-                </TabsTrigger>
-              ))}
-            </TabsList>
-
-            {apiEndpoints.map((endpoint) => (
-              <TabsContent key={endpoint.id} value={endpoint.id}>
-                <Card>
-                  <CardHeader>
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <CardTitle>{endpoint.title}</CardTitle>
-                        <CardDescription>{endpoint.description}</CardDescription>
-                      </div>
-                      <Badge 
-                        variant="outline" 
-                        className={`
-                          ${endpoint.badge.color === 'green' 
-                            ? 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800' 
-                            : 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800'
-                          }
-                        `}
-                      >
-                        {endpoint.badge.text} {endpoint.endpoint}
-                      </Badge>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="space-y-6">
-                    {/* Request Examples */}
-                    <div className="space-y-2">
-                      <div className="flex items-center">
-                        <h4 className="text-sm font-medium">Request</h4>
-                        <div className="ml-auto">
-                          <Tabs value={activeLangTab} onValueChange={setActiveLangTab}>
-                            <TabsList>
-                              <TabsTrigger value="node" className="flex items-center gap-1">
-                                <Code className="h-3.5 w-3.5" />
-                                <span>Node.js</span>
-                              </TabsTrigger>
-                              <TabsTrigger value="python" className="flex items-center gap-1">
-                                <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="currentColor">
-                                  <path d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z" />
-                                </svg>
-                                <span>Python</span>
-                              </TabsTrigger>
-                              <TabsTrigger value="curl" className="flex items-center gap-1">
-                                <Terminal className="h-3.5 w-3.5" />
-                                <span>cURL</span>
-                              </TabsTrigger>
-                            </TabsList>
-                          </Tabs>
-                        </div>
-                      </div>
-                      
-                      <div className="relative">
-                        {Object.entries(endpoint.request).map(([lang, data], index) => {
-                          const codeIndex = apiEndpoints.indexOf(endpoint) * 10 + index
-                          return (
-                            <div key={lang} className={lang === activeLangTab ? 'block' : 'hidden'}>
-                              <div className="absolute top-2 right-2 z-10">
-                                <Button
-                                  variant="ghost"
-                                  size="sm"
-                                  className="h-8 w-8 p-0 bg-slate-800/20 hover:bg-slate-800/30 dark:bg-white/10 dark:hover:bg-white/20 rounded-md"
-                                  onClick={() => handleCopy(codeIndex, data.code)}
-                                >
-                                  {copiedIndex === codeIndex ? (
-                                    <Check className="h-4 w-4 text-green-500" />
-                                  ) : (
-                                    <Copy className="h-4 w-4" />
-                                  )}
-                                </Button>
-                              </div>
-                              <SyntaxHighlighter
-                                language={data.language}
-                                showLineNumbers={data.language !== 'bash'}
-                                style={dark}
-                                customStyle={{
-                                  borderRadius: '0.5rem',
-                                  padding: '1.5rem',
-                                  fontSize: '0.875rem',
-                                  lineHeight: '1.5',
-                                  backgroundColor: '#1e293b', // slate-800
-                                }}
-                              >
-                                {data.code}
-                              </SyntaxHighlighter>
-                            </div>
-                          )
-                        })}
-                      </div>
-                    </div>
-
-                    {/* Response Example */}
-                    <div className="space-y-2">
-                      <h4 className="text-sm font-medium">Response</h4>
-                      <div className="relative">
-                        <div className="absolute top-2 right-2 z-10">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-8 w-8 p-0 bg-slate-800/20 hover:bg-slate-800/30 dark:bg-white/10 dark:hover:bg-white/20 rounded-md"
-                            onClick={() => handleCopy(apiEndpoints.indexOf(endpoint) * 100, endpoint.response.code)}
-                          >
-                            {copiedIndex === apiEndpoints.indexOf(endpoint) * 100 ? (
-                              <Check className="h-4 w-4 text-green-500" />
-                            ) : (
-                              <Copy className="h-4 w-4" />
-                            )}
-                          </Button>
-                        </div>
-                        <SyntaxHighlighter
-                          language={endpoint.response.language}
-                          showLineNumbers={true}
-                          style={dark}
-                          customStyle={{
-                            borderRadius: '0.5rem',
-                            padding: '1.5rem',
-                            fontSize: '0.875rem',
-                            lineHeight: '1.5',
-                            backgroundColor: '#1e293b', // slate-800
-                          }}
-                        >
-                          {endpoint.response.code}
-                        </SyntaxHighlighter>
-                      </div>
-                    </div>
-                  </CardContent>
-                  <CardFooter className="border-t pt-6 flex justify-between">
-                    <p className="text-sm text-muted-foreground">
-                      For more details, see the full API documentation.
-                    </p>
-                    <Link href={`https://api.textbee.dev/#${endpoint.id}`} target="_blank">
-                      <Button size="sm" variant="outline">
-                        View Details
-                        <ArrowRight className="ml-2 h-4 w-4" />
-                      </Button>
-                    </Link>
-                  </CardFooter>
-                </Card>
-              </TabsContent>
-            ))}
-          </Tabs>
-        </CollapsibleContent>
-      </div>
-    </Collapsible>
-  )
-} 
\ No newline at end of file
diff --git a/web/app/(app)/dashboard/messaging/(components)/api-guide/code-block.tsx b/web/app/(app)/dashboard/messaging/(components)/api-guide/code-block.tsx
new file mode 100644
index 00000000..d008b814
--- /dev/null
+++ b/web/app/(app)/dashboard/messaging/(components)/api-guide/code-block.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { useState } from 'react'
+import { useTheme } from 'next-themes'
+import { Check, Copy } from 'lucide-react'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+// The previous guide hardcoded a dark slate background regardless of theme, so
+// code blocks were the only dark thing on a light page.
+export default function CodeBlock({
+  code,
+  language,
+  className,
+}: {
+  code: string
+  language: string
+  className?: string
+}) {
+  const { resolvedTheme } = useTheme()
+  const [copied, setCopied] = useState(false)
+
+  // resolvedTheme is undefined on the server and on the first client render,
+  // so both produce the light style and hydration matches. next-themes then
+  // updates it, which is an ordinary post-hydration state change. Verified
+  // against a console sweep, which catches hydration warnings.
+  const isDark = resolvedTheme === 'dark'
+
+  const copy = async () => {
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className={cn('group relative', className)}>
+      <Button
+        type='button'
+        variant='ghost'
+        size='icon'
+        onClick={copy}
+        aria-label={copied ? 'Copied' : 'Copy code'}
+        className='absolute right-2 top-2 z-10 h-7 w-7 bg-background/70 backdrop-blur hover:bg-background'
+      >
+        {copied ? (
+          <Check className='h-3.5 w-3.5 text-green-600 dark:text-green-400' />
+        ) : (
+          <Copy className='h-3.5 w-3.5' />
+        )}
+      </Button>
+
+      <SyntaxHighlighter
+        language={language}
+        style={isDark ? oneDark : oneLight}
+        customStyle={{
+          margin: 0,
+          borderRadius: '0.5rem',
+          padding: '1rem',
+          paddingRight: '2.75rem',
+          fontSize: '0.8125rem',
+          lineHeight: 1.6,
+          // Long lines scroll inside the block rather than widening the page.
+          overflowX: 'auto',
+          maxWidth: '100%',
+        }}
+        codeTagProps={{ style: { fontFamily: 'var(--font-mono, ui-monospace, monospace)' } }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/messaging/(components)/api-guide/index.tsx b/web/app/(app)/dashboard/messaging/(components)/api-guide/index.tsx
new file mode 100644
index 00000000..562bc2ff
--- /dev/null
+++ b/web/app/(app)/dashboard/messaging/(components)/api-guide/index.tsx
@@ -0,0 +1,243 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import Link from 'next/link'
+import {
+  AlertCircle,
+  ExternalLink,
+  KeyRound,
+  Smartphone,
+  Webhook,
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { useDevices } from '@/lib/api'
+import { formatDeviceName, cn } from '@/lib/utils'
+import CodeBlock from './code-block'
+import {
+  API_BASE_URL,
+  buildEndpoints,
+  LANGUAGES,
+  type LanguageId,
+} from './snippets'
+
+// This is a full page, so nothing is collapsed. The previous version rendered
+// a collapsed accordion that defaulted to closed, which meant navigating to
+// /messaging/api-guide showed an apparently empty page.
+export default function ApiGuide() {
+  const { data: devices } = useDevices()
+  const [language, setLanguage] = useState<LanguageId>('curl')
+  const [deviceId, setDeviceId] = useState<string>('')
+
+  const enabledDevices = devices?.filter((d) => d.enabled) ?? []
+  const selectedDeviceId =
+    deviceId || enabledDevices[0]?._id || devices?.[0]?._id || ''
+  const hasDevice = Boolean(selectedDeviceId)
+
+  const endpoints = useMemo(
+    () => buildEndpoints(selectedDeviceId),
+    [selectedDeviceId]
+  )
+
+  const highlight =
+    LANGUAGES.find((l) => l.id === language)?.highlight ?? 'bash'
+
+  return (
+    <div className='space-y-8'>
+      {/* Getting started */}
+      <section className='space-y-4'>
+        <div className='space-y-1'>
+          <h3 className='text-lg font-semibold'>Before you start</h3>
+          <p className='text-sm text-muted-foreground'>
+            Every request needs an API key in the{' '}
+            <code className='rounded bg-muted px-1 py-0.5 font-mono text-xs'>
+              x-api-key
+            </code>{' '}
+            header, and the id of the device that will send the message.
+          </p>
+        </div>
+
+        <div className='grid gap-3 sm:grid-cols-2'>
+          <div className='rounded-lg border border-border bg-card p-4'>
+            <div className='mb-2 flex items-center gap-2'>
+              <KeyRound className='h-4 w-4 text-primary' />
+              <p className='text-sm font-medium'>API key</p>
+            </div>
+            <p className='mb-3 text-xs text-muted-foreground'>
+              Keys are shown once, when created. Store yours as an environment
+              variable rather than pasting it into source.
+            </p>
+            <Button asChild variant='outline' size='sm'>
+              <Link href='/dashboard'>Manage API keys</Link>
+            </Button>
+          </div>
+
+          <div className='rounded-lg border border-border bg-card p-4'>
+            <div className='mb-2 flex items-center gap-2'>
+              <Smartphone className='h-4 w-4 text-primary' />
+              <p className='text-sm font-medium'>Device</p>
+            </div>
+            {hasDevice ? (
+              <>
+                <p className='mb-2 text-xs text-muted-foreground'>
+                  Samples below use this device's real id, so they run as soon
+                  as you add your key.
+                </p>
+                <Label htmlFor='api-guide-device' className='sr-only'>
+                  Device for code samples
+                </Label>
+                <Select
+                  value={selectedDeviceId}
+                  onValueChange={(v) => setDeviceId(v)}
+                >
+                  <SelectTrigger id='api-guide-device' className='h-8 text-xs'>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {devices?.map((device) => (
+                      <SelectItem key={device._id} value={device._id}>
+                        {formatDeviceName(device)}
+                        {device.enabled ? '' : ' (disabled)'}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </>
+            ) : (
+              <>
+                <p className='mb-3 text-xs text-muted-foreground'>
+                  Register a device and the samples below will use its real id
+                  automatically.
+                </p>
+                <Button asChild variant='outline' size='sm'>
+                  <Link href='/dashboard'>Add a device</Link>
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className='space-y-1.5'>
+          <p className='text-sm font-medium'>Base URL</p>
+          <CodeBlock code={API_BASE_URL} language='bash' />
+        </div>
+
+        {!hasDevice && (
+          <Alert>
+            <AlertCircle className='h-4 w-4' />
+            <AlertTitle>Samples use a placeholder device id</AlertTitle>
+            <AlertDescription>
+              You have no device registered yet, so the examples show
+              YOUR_DEVICE_ID. Register one and they will fill in
+              automatically.
+            </AlertDescription>
+          </Alert>
+        )}
+      </section>
+
+      {/* Language picker, applies to every endpoint below. */}
+      <div className='sticky top-14 z-10 -mx-1 bg-background/95 px-1 py-2 backdrop-blur md:top-0'>
+        <div
+          className='flex gap-1 overflow-x-auto rounded-lg bg-muted p-1'
+          role='tablist'
+          aria-label='Code language'
+        >
+          {LANGUAGES.map((lang) => (
+            <button
+              key={lang.id}
+              type='button'
+              role='tab'
+              aria-selected={language === lang.id}
+              onClick={() => setLanguage(lang.id)}
+              className={cn(
+                'shrink-0 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+                language === lang.id
+                  ? 'bg-background text-foreground shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+            >
+              {lang.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Endpoints */}
+      <div className='space-y-8'>
+        {endpoints.map((endpoint) => (
+          <section
+            key={endpoint.id}
+            id={endpoint.id}
+            className='scroll-mt-24 space-y-3'
+          >
+            <div className='space-y-1'>
+              <h3 className='text-lg font-semibold'>{endpoint.title}</h3>
+              <p className='text-sm text-muted-foreground'>{endpoint.blurb}</p>
+            </div>
+
+            <div className='flex flex-wrap items-center gap-2'>
+              <span
+                className={cn(
+                  'rounded px-1.5 py-0.5 font-mono text-[11px] font-semibold',
+                  endpoint.method === 'POST'
+                    ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
+                    : 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
+                )}
+              >
+                {endpoint.method}
+              </span>
+              <code className='min-w-0 break-all rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground'>
+                {endpoint.path}
+              </code>
+            </div>
+
+            <CodeBlock
+              code={endpoint.samples[language]}
+              language={highlight}
+            />
+
+            <details className='group'>
+              <summary className='cursor-pointer text-xs font-medium text-muted-foreground hover:text-foreground'>
+                Example response
+              </summary>
+              <div className='mt-2'>
+                <CodeBlock code={endpoint.response} language='json' />
+              </div>
+            </details>
+          </section>
+        ))}
+      </div>
+
+      {/* Where to go next */}
+      <section className='rounded-lg border border-border bg-muted/30 p-4'>
+        <h3 className='text-sm font-semibold'>Next steps</h3>
+        <div className='mt-3 flex flex-wrap gap-2'>
+          <Button asChild variant='outline' size='sm'>
+            <Link href='/dashboard/webhooks'>
+              <Webhook className='h-3.5 w-3.5' />
+              Receive events with webhooks
+            </Link>
+          </Button>
+          <Button asChild variant='outline' size='sm'>
+            <a
+              href='https://api.textbee.dev/'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <ExternalLink className='h-3.5 w-3.5' />
+              Full API reference
+            </a>
+          </Button>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/messaging/(components)/api-guide/snippets.ts b/web/app/(app)/dashboard/messaging/(components)/api-guide/snippets.ts
new file mode 100644
index 00000000..ea1670ca
--- /dev/null
+++ b/web/app/(app)/dashboard/messaging/(components)/api-guide/snippets.ts
@@ -0,0 +1,387 @@
+// Code samples for the API guide.
+//
+// Every snippet is generated from the user's real device id, so what they copy
+// is runnable after pasting one API key. The previous guide always printed
+// YOUR_DEVICE_ID, which meant nothing on the page could be run as-is.
+
+export const API_BASE_URL = 'https://api.textbee.dev/api/v1'
+
+export type LanguageId = 'curl' | 'node' | 'python' | 'php' | 'go'
+
+export const LANGUAGES: { id: LanguageId; label: string; highlight: string }[] =
+  [
+    { id: 'curl', label: 'cURL', highlight: 'bash' },
+    { id: 'node', label: 'Node.js', highlight: 'javascript' },
+    { id: 'python', label: 'Python', highlight: 'python' },
+    { id: 'php', label: 'PHP', highlight: 'php' },
+    { id: 'go', label: 'Go', highlight: 'go' },
+  ]
+
+export type EndpointId =
+  | 'send-sms'
+  | 'send-bulk'
+  | 'received'
+  | 'message-status'
+
+export type Endpoint = {
+  id: EndpointId
+  title: string
+  blurb: string
+  method: 'GET' | 'POST'
+  path: string
+  samples: Record<LanguageId, string>
+  response: string
+}
+
+const PLACEHOLDER_DEVICE = 'YOUR_DEVICE_ID'
+
+export function buildEndpoints(deviceId?: string): Endpoint[] {
+  const id = deviceId || PLACEHOLDER_DEVICE
+
+  return [
+    {
+      id: 'send-sms',
+      title: 'Send an SMS',
+      blurb: 'Send one message to one or more recipients.',
+      method: 'POST',
+      path: `/gateway/devices/${id}/send-sms`,
+      samples: {
+        curl: `curl -X POST "${API_BASE_URL}/gateway/devices/${id}/send-sms" \\
+  -H "x-api-key: $TEXTBEE_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "recipients": ["+14155550101"],
+    "message": "Hello from textbee"
+  }'`,
+        node: `const res = await fetch(
+  '${API_BASE_URL}/gateway/devices/${id}/send-sms',
+  {
+    method: 'POST',
+    headers: {
+      'x-api-key': process.env.TEXTBEE_API_KEY,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      recipients: ['+14155550101'],
+      message: 'Hello from textbee',
+    }),
+  }
+)
+
+console.log(await res.json())`,
+        python: `import os, requests
+
+res = requests.post(
+    '${API_BASE_URL}/gateway/devices/${id}/send-sms',
+    headers={'x-api-key': os.environ['TEXTBEE_API_KEY']},
+    json={
+        'recipients': ['+14155550101'],
+        'message': 'Hello from textbee',
+    },
+)
+
+print(res.json())`,
+        php: `<?php
+$ch = curl_init('${API_BASE_URL}/gateway/devices/${id}/send-sms');
+
+curl_setopt_array($ch, [
+    CURLOPT_POST => true,
+    CURLOPT_RETURNTRANSFER => true,
+    CURLOPT_HTTPHEADER => [
+        'x-api-key: ' . getenv('TEXTBEE_API_KEY'),
+        'Content-Type: application/json',
+    ],
+    CURLOPT_POSTFIELDS => json_encode([
+        'recipients' => ['+14155550101'],
+        'message' => 'Hello from textbee',
+    ]),
+]);
+
+echo curl_exec($ch);`,
+        go: `package main
+
+import (
+	"bytes"
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+)
+
+func main() {
+	body := []byte(\`{"recipients":["+14155550101"],"message":"Hello from textbee"}\`)
+
+	req, _ := http.NewRequest("POST",
+		"${API_BASE_URL}/gateway/devices/${id}/send-sms",
+		bytes.NewBuffer(body))
+	req.Header.Set("x-api-key", os.Getenv("TEXTBEE_API_KEY"))
+	req.Header.Set("Content-Type", "application/json")
+
+	res, err := http.DefaultClient.Do(req)
+	if err != nil {
+		panic(err)
+	}
+	defer res.Body.Close()
+
+	out, _ := io.ReadAll(res.Body)
+	fmt.Println(string(out))
+}`,
+      },
+      response: `{
+  "data": {
+    "success": true,
+    "message": "Message queued for delivery",
+    "smsBatchId": "665f1c2a9b1e4a0012ab34cd"
+  }
+}`,
+    },
+    {
+      id: 'send-bulk',
+      title: 'Send messages in bulk',
+      blurb: 'Send different messages to different recipients in one request.',
+      method: 'POST',
+      path: `/gateway/devices/${id}/send-bulk-sms`,
+      samples: {
+        curl: `curl -X POST "${API_BASE_URL}/gateway/devices/${id}/send-bulk-sms" \\
+  -H "x-api-key: $TEXTBEE_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "messages": [
+      { "recipients": ["+14155550101"], "message": "Hi Alice" },
+      { "recipients": ["+16475550187"], "message": "Hi Bob" }
+    ]
+  }'`,
+        node: `const res = await fetch(
+  '${API_BASE_URL}/gateway/devices/${id}/send-bulk-sms',
+  {
+    method: 'POST',
+    headers: {
+      'x-api-key': process.env.TEXTBEE_API_KEY,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      messages: [
+        { recipients: ['+14155550101'], message: 'Hi Alice' },
+        { recipients: ['+16475550187'], message: 'Hi Bob' },
+      ],
+    }),
+  }
+)
+
+console.log(await res.json())`,
+        python: `import os, requests
+
+res = requests.post(
+    '${API_BASE_URL}/gateway/devices/${id}/send-bulk-sms',
+    headers={'x-api-key': os.environ['TEXTBEE_API_KEY']},
+    json={
+        'messages': [
+            {'recipients': ['+14155550101'], 'message': 'Hi Alice'},
+            {'recipients': ['+16475550187'], 'message': 'Hi Bob'},
+        ],
+    },
+)
+
+print(res.json())`,
+        php: `<?php
+$ch = curl_init('${API_BASE_URL}/gateway/devices/${id}/send-bulk-sms');
+
+curl_setopt_array($ch, [
+    CURLOPT_POST => true,
+    CURLOPT_RETURNTRANSFER => true,
+    CURLOPT_HTTPHEADER => [
+        'x-api-key: ' . getenv('TEXTBEE_API_KEY'),
+        'Content-Type: application/json',
+    ],
+    CURLOPT_POSTFIELDS => json_encode([
+        'messages' => [
+            ['recipients' => ['+14155550101'], 'message' => 'Hi Alice'],
+            ['recipients' => ['+16475550187'], 'message' => 'Hi Bob'],
+        ],
+    ]),
+]);
+
+echo curl_exec($ch);`,
+        go: `package main
+
+import (
+	"bytes"
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+)
+
+func main() {
+	body := []byte(\`{"messages":[
+		{"recipients":["+14155550101"],"message":"Hi Alice"},
+		{"recipients":["+16475550187"],"message":"Hi Bob"}
+	]}\`)
+
+	req, _ := http.NewRequest("POST",
+		"${API_BASE_URL}/gateway/devices/${id}/send-bulk-sms",
+		bytes.NewBuffer(body))
+	req.Header.Set("x-api-key", os.Getenv("TEXTBEE_API_KEY"))
+	req.Header.Set("Content-Type", "application/json")
+
+	res, _ := http.DefaultClient.Do(req)
+	defer res.Body.Close()
+
+	out, _ := io.ReadAll(res.Body)
+	fmt.Println(string(out))
+}`,
+      },
+      response: `{
+  "data": {
+    "success": true,
+    "smsBatchId": "665f1c2a9b1e4a0012ab34cd",
+    "recipientCount": 2
+  }
+}`,
+    },
+    {
+      id: 'received',
+      title: 'Read received messages',
+      blurb: 'Poll for SMS your device has received.',
+      method: 'GET',
+      path: `/gateway/devices/${id}/get-received-sms`,
+      samples: {
+        curl: `curl "${API_BASE_URL}/gateway/devices/${id}/get-received-sms" \\
+  -H "x-api-key: $TEXTBEE_API_KEY"`,
+        node: `const res = await fetch(
+  '${API_BASE_URL}/gateway/devices/${id}/get-received-sms',
+  { headers: { 'x-api-key': process.env.TEXTBEE_API_KEY } }
+)
+
+console.log(await res.json())`,
+        python: `import os, requests
+
+res = requests.get(
+    '${API_BASE_URL}/gateway/devices/${id}/get-received-sms',
+    headers={'x-api-key': os.environ['TEXTBEE_API_KEY']},
+)
+
+print(res.json())`,
+        php: `<?php
+$ch = curl_init('${API_BASE_URL}/gateway/devices/${id}/get-received-sms');
+
+curl_setopt_array($ch, [
+    CURLOPT_RETURNTRANSFER => true,
+    CURLOPT_HTTPHEADER => ['x-api-key: ' . getenv('TEXTBEE_API_KEY')],
+]);
+
+echo curl_exec($ch);`,
+        go: `package main
+
+import (
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+)
+
+func main() {
+	req, _ := http.NewRequest("GET",
+		"${API_BASE_URL}/gateway/devices/${id}/get-received-sms", nil)
+	req.Header.Set("x-api-key", os.Getenv("TEXTBEE_API_KEY"))
+
+	res, _ := http.DefaultClient.Do(req)
+	defer res.Body.Close()
+
+	out, _ := io.ReadAll(res.Body)
+	fmt.Println(string(out))
+}`,
+      },
+      response: `{
+  "data": [
+    {
+      "_id": "665f1c2a9b1e4a0012ab34ce",
+      "sender": "+14155550101",
+      "message": "Reply from a customer",
+      "type": "received",
+      "status": "received",
+      "receivedAt": "2026-07-18T09:14:22.000Z"
+    }
+  ]
+}`,
+    },
+    {
+      id: 'message-status',
+      title: 'Check message history',
+      blurb: 'List messages for a device with their delivery status.',
+      method: 'GET',
+      path: `/gateway/devices/${id}/messages`,
+      samples: {
+        curl: `curl "${API_BASE_URL}/gateway/devices/${id}/messages?page=1&limit=20" \\
+  -H "x-api-key: $TEXTBEE_API_KEY"`,
+        node: `const url = new URL(
+  '${API_BASE_URL}/gateway/devices/${id}/messages'
+)
+url.searchParams.set('page', '1')
+url.searchParams.set('limit', '20')
+
+const res = await fetch(url, {
+  headers: { 'x-api-key': process.env.TEXTBEE_API_KEY },
+})
+
+console.log(await res.json())`,
+        python: `import os, requests
+
+res = requests.get(
+    '${API_BASE_URL}/gateway/devices/${id}/messages',
+    headers={'x-api-key': os.environ['TEXTBEE_API_KEY']},
+    params={'page': 1, 'limit': 20},
+)
+
+print(res.json())`,
+        php: `<?php
+$url = '${API_BASE_URL}/gateway/devices/${id}/messages?page=1&limit=20';
+$ch = curl_init($url);
+
+curl_setopt_array($ch, [
+    CURLOPT_RETURNTRANSFER => true,
+    CURLOPT_HTTPHEADER => ['x-api-key: ' . getenv('TEXTBEE_API_KEY')],
+]);
+
+echo curl_exec($ch);`,
+        go: `package main
+
+import (
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+)
+
+func main() {
+	req, _ := http.NewRequest("GET",
+		"${API_BASE_URL}/gateway/devices/${id}/messages?page=1&limit=20", nil)
+	req.Header.Set("x-api-key", os.Getenv("TEXTBEE_API_KEY"))
+
+	res, _ := http.DefaultClient.Do(req)
+	defer res.Body.Close()
+
+	out, _ := io.ReadAll(res.Body)
+	fmt.Println(string(out))
+}`,
+      },
+      // Status values match the SMS schema: pending, dispatched, sent,
+      // delivered, failed, unknown, received.
+      response: `{
+  "data": [
+    {
+      "_id": "665f1c2a9b1e4a0012ab34cd",
+      "recipient": "+14155550101",
+      "message": "Hello from textbee",
+      "type": "sent",
+      "status": "delivered",
+      "requestedAt": "2026-07-18T09:12:00.000Z",
+      "sentAt": "2026-07-18T09:12:03.000Z",
+      "deliveredAt": "2026-07-18T09:12:07.000Z"
+    }
+  ],
+  "meta": { "page": 1, "limit": 20, "total": 1, "totalPages": 1 }
+}`,
+    },
+  ]
+}
diff --git a/web/app/(app)/dashboard/messaging/api-guide/page.tsx b/web/app/(app)/dashboard/messaging/api-guide/page.tsx
new file mode 100644
index 00000000..0a7bfeba
--- /dev/null
+++ b/web/app/(app)/dashboard/messaging/api-guide/page.tsx
@@ -0,0 +1,5 @@
+import ApiGuide from '../(components)/api-guide'
+
+export default function ApiGuidePage() {
+  return <ApiGuide />
+}
diff --git a/web/app/(app)/dashboard/messaging/bulk/page.tsx b/web/app/(app)/dashboard/messaging/bulk/page.tsx
new file mode 100644
index 00000000..8043da56
--- /dev/null
+++ b/web/app/(app)/dashboard/messaging/bulk/page.tsx
@@ -0,0 +1,5 @@
+import BulkSend from '../../(components)/bulk-send'
+
+export default function BulkSendPage() {
+  return <BulkSend />
+}
diff --git a/web/app/(app)/dashboard/messaging/history/page.tsx b/web/app/(app)/dashboard/messaging/history/page.tsx
new file mode 100644
index 00000000..4a2c2abc
--- /dev/null
+++ b/web/app/(app)/dashboard/messaging/history/page.tsx
@@ -0,0 +1,5 @@
+import MessageHistory from '../../(components)/message-history'
+
+export default function MessageHistoryPage() {
+  return <MessageHistory />
+}
diff --git a/web/app/(app)/dashboard/messaging/layout.tsx b/web/app/(app)/dashboard/messaging/layout.tsx
new file mode 100644
index 00000000..28e999da
--- /dev/null
+++ b/web/app/(app)/dashboard/messaging/layout.tsx
@@ -0,0 +1,37 @@
+import type { PropsWithChildren } from 'react'
+import { MessageSquareTextIcon } from 'lucide-react'
+import RouteTabs from '@/components/shared/route-tabs'
+import PageHeader from '@/components/shared/page-header'
+
+// Messaging section shell: shared header + route-based tabs, so the active
+// tab survives refresh and every view has a shareable URL.
+//
+// The content column is defined once here rather than per page. Each subroute
+// used to set its own width (Send xl, Bulk 3xl, API 4xl, History none), so the
+// layout jumped every time you changed tab, and the header and tabs ran wider
+// than the content beneath them.
+export default function MessagingLayout({ children }: PropsWithChildren) {
+  return (
+    <div className='flex-1 p-4 sm:p-6 md:p-8'>
+      <div className='w-full max-w-3xl'>
+        <PageHeader
+          icon={MessageSquareTextIcon}
+          title='Messaging'
+          description='Send messages and view your SMS history'
+        />
+
+        <RouteTabs
+          className='mb-6'
+          tabs={[
+            { href: '/dashboard/messaging', label: 'Send', exact: true },
+            { href: '/dashboard/messaging/bulk', label: 'Bulk Send' },
+            { href: '/dashboard/messaging/history', label: 'History' },
+            { href: '/dashboard/messaging/api-guide', label: 'API' },
+          ]}
+        />
+
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/messaging/page.tsx b/web/app/(app)/dashboard/messaging/page.tsx
index d3acdf8e..93ffc71c 100644
--- a/web/app/(app)/dashboard/messaging/page.tsx
+++ b/web/app/(app)/dashboard/messaging/page.tsx
@@ -1,31 +1,6 @@
-'use client'
+import SendSms from '../(components)/send-sms'
 
-import { MessageSquareTextIcon } from 'lucide-react'
-import Messaging from '../(components)/messaging'
-import ApiGuide from './(components)/api-guide'
-
-export default function MessagingPage() {
-  return (
-    <div className='flex-1 p-6 md:p-8'>
-      <div className='space-y-1 mb-6'>
-        <div className='flex items-center space-x-2'>
-          <MessageSquareTextIcon className='h-6 w-6 text-primary' />
-          <h2 className='text-3xl font-bold tracking-tight'>Messaging</h2>
-        </div>
-        <p className='text-muted-foreground'>
-          Send messages and view your SMS history
-        </p>
-      </div>
-
-      <div className='grid grid-cols-1 lg:grid-cols-2 gap-8'>
-        <div>
-          <Messaging />
-        </div>
-
-        <div>
-          <ApiGuide />
-        </div>
-      </div>
-    </div>
-  )
+// Width comes from the messaging layout, so every tab shares one column.
+export default function SendPage() {
+  return <SendSms />
 }
diff --git a/web/app/(app)/dashboard/page.tsx b/web/app/(app)/dashboard/page.tsx
index e802acce..415e523b 100644
--- a/web/app/(app)/dashboard/page.tsx
+++ b/web/app/(app)/dashboard/page.tsx
@@ -1,35 +1,121 @@
 'use client'
 
-import DeviceList from './(components)/device-list'
-import WebhooksSection from './(components)/webhooks/webhooks-section'
-import Overview from './(components)/overview'
-import ApiKeys from './(components)/api-keys'
+import { useRef } from 'react'
+import Link from 'next/link'
 import { useSession } from 'next-auth/react'
-import { HomeIcon, ArrowUpRightIcon } from 'lucide-react'
+import {
+  ArrowRight,
+  ArrowUpRightIcon,
+  KeyRound,
+  Plus,
+  Send,
+  Webhook,
+} from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import DeviceList from './(components)/devices/device-list'
+import Overview from './(components)/overview'
+import ApiKeys from './(components)/api-keys/api-keys'
+import GenerateApiKey, {
+  type GenerateApiKeyHandle,
+} from './(components)/api-keys/generate-api-key'
+import AddDeviceDialog, {
+  type AddDeviceHandle,
+} from './(components)/devices/add-device-dialog'
+import { useWebhooks } from '@/lib/api'
+
+// Compact path to webhooks: it left the mobile tab bar and its management
+// section moved to /dashboard/webhooks, so Home keeps a discoverable link.
+function WebhooksSummaryRow() {
+  const { data: webhooks } = useWebhooks()
+  const activeCount = webhooks?.filter((w) => w.isActive).length ?? 0
+
+  return (
+    <Link
+      href='/dashboard/webhooks'
+      className='group flex items-center gap-3 rounded-xl border border-border bg-card px-4 py-3 shadow-sm transition-colors hover:bg-muted/50'
+    >
+      <div className='rounded-full bg-primary/10 p-2'>
+        <Webhook className='h-4 w-4 text-primary' />
+      </div>
+      <div className='min-w-0 flex-1'>
+        <p className='text-sm font-medium'>Webhooks</p>
+        <p className='truncate text-xs text-muted-foreground'>
+          {activeCount > 0
+            ? `${activeCount} active webhook${activeCount === 1 ? '' : 's'}`
+            : 'Get notified at your endpoints when SMS events happen'}
+        </p>
+      </div>
+      <ArrowRight className='h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5' />
+    </Link>
+  )
+}
 
 export default function DashboardPage() {
   const { data: session } = useSession()
+  const apiKeyFlowRef = useRef<GenerateApiKeyHandle>(null)
+  const addDeviceRef = useRef<AddDeviceHandle>(null)
 
   return (
-    <div className='flex-1 space-y-6 p-6 md:p-8'>
-      <div className='space-y-1'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center space-x-2'>
-            <HomeIcon className='h-6 w-6 text-primary' />
-            <h2 className='text-3xl font-bold tracking-tight'>Dashboard</h2>
-          </div>
-          <Button variant="outline" size="sm" onClick={() => window.open('https://textbee.dev/quickstart', '_blank')}>
-            <ArrowUpRightIcon className="mr-2 h-4 w-4" />
+    <div className='flex-1 space-y-6 p-4 sm:p-6 md:p-8'>
+      {/* Two separate flows on purpose. "Add device" walks through installing
+          the app and granting permissions before it ever mentions an API key,
+          matching the button in the Registered Devices card. "New API key"
+          goes straight to key generation, which is what that phrasing asks
+          for. Previously both opened the key modal, so a new user who clicked
+          Add device was handed an API key with no explanation. */}
+      <AddDeviceDialog ref={addDeviceRef} />
+      <GenerateApiKey ref={apiKeyFlowRef} showTrigger={false} />
+
+      <div className='flex flex-col gap-4 md:flex-row md:items-end md:justify-between'>
+        <div className='space-y-1'>
+          <h2 className='text-2xl sm:text-3xl font-bold tracking-tight'>
+            Welcome back, {session?.user?.name?.split(' ')[0] || 'there'}
+          </h2>
+          <p className='text-muted-foreground'>
+            Here's what's happening with your SMS gateway
+          </p>
+        </div>
+
+        <div className='flex flex-wrap items-center gap-2'>
+          <Button asChild size='sm'>
+            <Link href='/dashboard/messaging'>
+              <Send className='h-4 w-4' />
+              Send SMS
+            </Link>
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => addDeviceRef.current?.open()}
+          >
+            <Plus className='h-4 w-4' />
+            Add device
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => apiKeyFlowRef.current?.open()}
+          >
+            <KeyRound className='h-4 w-4' />
+            New API key
+          </Button>
+          <Button
+            variant='ghost'
+            size='sm'
+            onClick={() => window.open(
+                'https://textbee.dev/quickstart',
+                '_blank',
+                'noopener,noreferrer'
+              )}
+          >
+            <ArrowUpRightIcon className='h-4 w-4' />
             Quick Start
           </Button>
         </div>
-        <p className='text-muted-foreground'>
-          Welcome back, {session?.user?.name || 'User'}
-        </p>
       </div>
 
       <div className='space-y-6'>
+        {/* Onboarding, quota usage, then all-time totals. */}
         <Overview />
 
         <div className='grid gap-6 md:grid-cols-2'>
@@ -37,7 +123,7 @@ export default function DashboardPage() {
           <ApiKeys />
         </div>
 
-        <WebhooksSection />
+        <WebhooksSummaryRow />
       </div>
     </div>
   )
diff --git a/web/app/(app)/dashboard/webhooks/deliveries/page.tsx b/web/app/(app)/dashboard/webhooks/deliveries/page.tsx
new file mode 100644
index 00000000..780f2437
--- /dev/null
+++ b/web/app/(app)/dashboard/webhooks/deliveries/page.tsx
@@ -0,0 +1,6 @@
+import WebhooksHistory from '../../(components)/webhooks-history'
+
+// Delivery history for webhook notifications.
+export default function WebhookDeliveriesPage() {
+  return <WebhooksHistory />
+}
diff --git a/web/app/(app)/dashboard/webhooks/layout.tsx b/web/app/(app)/dashboard/webhooks/layout.tsx
new file mode 100644
index 00000000..42b373fa
--- /dev/null
+++ b/web/app/(app)/dashboard/webhooks/layout.tsx
@@ -0,0 +1,28 @@
+import type { PropsWithChildren } from 'react'
+import { Webhook } from 'lucide-react'
+import RouteTabs from '@/components/shared/route-tabs'
+import PageHeader from '@/components/shared/page-header'
+
+// Webhooks section shell: subscriptions management and delivery history are
+// route-based tabs, so the active view survives refresh.
+export default function WebhooksLayout({ children }: PropsWithChildren) {
+  return (
+    <div className='flex-1 p-4 sm:p-6 md:p-8'>
+      <PageHeader
+        icon={Webhook}
+        title='Webhooks'
+        description='Get notified at your endpoints when SMS events happen'
+      />
+
+      <RouteTabs
+        className='mb-6'
+        tabs={[
+          { href: '/dashboard/webhooks', label: 'Webhooks', exact: true },
+          { href: '/dashboard/webhooks/deliveries', label: 'Deliveries' },
+        ]}
+      />
+
+      {children}
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/webhooks/page.tsx b/web/app/(app)/dashboard/webhooks/page.tsx
index 72ddb573..5ac4d332 100644
--- a/web/app/(app)/dashboard/webhooks/page.tsx
+++ b/web/app/(app)/dashboard/webhooks/page.tsx
@@ -1,23 +1,6 @@
-'use client'
+import WebhooksSection from '../(components)/webhooks/webhooks-section'
 
-import { MessageSquareTextIcon } from 'lucide-react'
-import WebhooksHistory from '../(components)/webhooks-history'
-
-export default function MessagingPage() {
-  return (
-    <div className="flex-1 p-6 md:p-8">
-      <div className="space-y-1 mb-6">
-        <div className="flex items-center space-x-2">
-          <MessageSquareTextIcon className="h-6 w-6 text-primary" />
-          <h2 className="text-3xl font-bold tracking-tight">
-            Webhook Notification Delivery History
-          </h2>
-        </div>
-      </div>
-
-      <div className="">
-        <WebhooksHistory />
-      </div>
-    </div>
-  )
+// Webhook subscriptions management (moved here from the dashboard home).
+export default function WebhooksPage() {
+  return <WebhooksSection />
 }
diff --git a/web/app/(app)/layout-wrapper.tsx b/web/app/(app)/layout-wrapper.tsx
deleted file mode 100644
index 4bba136a..00000000
--- a/web/app/(app)/layout-wrapper.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-'use client'
-
-import { GoogleOAuthProvider } from '@react-oauth/google'
-import { SessionProvider } from 'next-auth/react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
-import { useEffect } from 'react'
-import { usePathname, useRouter } from 'next/navigation'
-import { Routes } from '@/config/routes'
-import { ThemeProvider } from 'next-themes'
-
-export default function LayoutWrapper({ session, children }) {
-  const router = useRouter()
-  const pathname = usePathname()
-
-  // log the user out if token has expired
-  useEffect(() => {
-    if (session && session.user && !pathname.includes(Routes.logout)) {
-      httpBrowserClient
-        .get(ApiEndpoints.auth.whoAmI())
-        .then((response) => {
-          // token is still valid
-          // TODO: if name has changed, update session
-        })
-        .catch((error) => {
-          if (error.response?.status === 401) {
-            // token has expired
-            router.push(Routes.logout)
-          }
-        })
-    }
-  }, [pathname, router, session])
-
-  const queryClient = new QueryClient()
-
-  return (
-    <>
-      <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
-        <SessionProvider session={session}>
-          <QueryClientProvider client={queryClient}>
-            <GoogleOAuthProvider
-              clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
-            >
-              {children}
-            </GoogleOAuthProvider>
-          </QueryClientProvider>
-        </SessionProvider>
-      </ThemeProvider>
-    </>
-  )
-}
diff --git a/web/app/(app)/layout.tsx b/web/app/(app)/layout.tsx
index 5dda0b87..8749e846 100644
--- a/web/app/(app)/layout.tsx
+++ b/web/app/(app)/layout.tsx
@@ -3,25 +3,24 @@ import '@/styles/main.css'
 import { authOptions } from '@/lib/auth'
 import { getServerSession, Session } from 'next-auth'
 import AppHeader from '@/components/shared/app-header'
-import LayoutWrapper from './layout-wrapper'
+import Providers from './providers'
 import Analytics from '@/components/shared/analytics'
 import { Toaster } from '@/components/ui/toaster'
-import Footer from '@/components/shared/footer'
 import SupportHQWidget from '@/components/shared/support-hq-widget'
 
 export default async function RootLayout({ children }: PropsWithChildren) {
   const session: Session | null = await getServerSession(authOptions as any)
 
   return (
-    <>
-      <LayoutWrapper session={session}>
-        <AppHeader session={session} />
-        <main className='min-h-[80vh]'>{children}</main>
-        <Analytics user={session?.user} />
-        <Footer />
-        <SupportHQWidget />
-        <Toaster />
-      </LayoutWrapper>
-    </>
+    <Providers session={session}>
+      <AppHeader session={session} />
+      {/* No <Footer /> here: the dashboard's sidebar is fixed-position, so a
+          full-width footer at this level gets painted over on its left edge.
+          Each section renders the footer inside its own content column. */}
+      <main className='min-h-[80vh]'>{children}</main>
+      <Analytics user={session?.user} />
+      <SupportHQWidget />
+      <Toaster />
+    </Providers>
   )
 }
diff --git a/web/app/(app)/providers.tsx b/web/app/(app)/providers.tsx
new file mode 100644
index 00000000..0c1d1b64
--- /dev/null
+++ b/web/app/(app)/providers.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { GoogleOAuthProvider } from '@react-oauth/google'
+import { SessionProvider } from 'next-auth/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState, type PropsWithChildren } from 'react'
+import type { Session } from 'next-auth'
+
+// Client-side provider tree for the app. The QueryClient is created once via
+// useState so it is stable across re-renders (previously a new client was
+// constructed on every render, throwing away the cache). Session expiry is
+// handled globally by a 401 response interceptor in httpBrowserClient, so there
+// is no longer a per-navigation whoAmI check here.
+export default function Providers({
+  session,
+  children,
+}: PropsWithChildren<{ session: Session | null }>) {
+  const [queryClient] = useState(() => new QueryClient())
+
+  // ThemeProvider lives in the root layout (app/theme-provider.tsx) so its
+  // pre-paint script is not re-rendered on client navigation.
+  return (
+    <SessionProvider session={session}>
+      <QueryClientProvider client={queryClient}>
+        <GoogleOAuthProvider
+          clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID ?? ''}
+        >
+          {children}
+        </GoogleOAuthProvider>
+      </QueryClientProvider>
+    </SessionProvider>
+  )
+}
diff --git a/web/app/download/page.tsx b/web/app/download/page.tsx
index 89680276..5fa77a55 100644
--- a/web/app/download/page.tsx
+++ b/web/app/download/page.tsx
@@ -137,10 +137,10 @@ export default function DownloadPage() {
           <div className='inline-flex items-center rounded-full border px-3 py-1 text-sm bg-brand-50 dark:bg-brand-950 border-brand-200 dark:border-brand-800 text-brand-700 dark:text-brand-300 mb-4'>
             <Download className='h-3.5 w-3.5 mr-2' /> Download TextBee
           </div>
-          <h1 className='text-4xl font-bold tracking-tight text-gray-900 dark:text-white'>
+          <h1 className='text-4xl font-bold tracking-tight text-foreground'>
             Download TextBee App
           </h1>
-          <p className='mt-4 text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto'>
+          <p className='mt-4 text-xl text-muted-foreground max-w-2xl mx-auto'>
             Transform your Android device into a powerful SMS gateway with our
             easy-to-use application.
           </p>
@@ -148,7 +148,7 @@ export default function DownloadPage() {
 
         {/* Latest release section */}
         <div className='mb-16'>
-          <div className='bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden'>
+          <div className='bg-card rounded-xl shadow-lg border border-border overflow-hidden'>
             <div className='p-6 sm:p-8'>
               <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6'>
                 <div>
@@ -169,11 +169,11 @@ export default function DownloadPage() {
                   {loading ? (
                     <Skeleton className='h-8 w-48' />
                   ) : error ? (
-                    <h2 className='text-2xl font-bold text-gray-900 dark:text-white'>
+                    <h2 className='text-2xl font-bold text-foreground'>
                       TextBee App
                     </h2>
                   ) : (
-                    <h2 className='text-2xl font-bold text-gray-900 dark:text-white'>
+                    <h2 className='text-2xl font-bold text-foreground'>
                       {latestRelease?.name || 'TextBee App'}
                     </h2>
                   )}
@@ -213,7 +213,7 @@ export default function DownloadPage() {
                 <div className='text-red-500 dark:text-red-400'>{error}</div>
               ) : latestRelease ? (
                 <>
-                  <div className='flex flex-wrap gap-4 mb-6 text-sm text-gray-600 dark:text-gray-400'>
+                  <div className='flex flex-wrap gap-4 mb-6 text-sm text-muted-foreground'>
                     <div className='flex items-center'>
                       <Tag className='h-4 w-4 mr-1' />
                       <span>Version: {latestRelease.tag_name}</span>
@@ -252,7 +252,7 @@ export default function DownloadPage() {
                       return (
                         <>
                           {description && (
-                            <div className='text-gray-700 dark:text-gray-300'>
+                            <div className='text-foreground'>
                               {description.split('\n').map((line, i) => (
                                 <p key={i} className='mb-2'>
                                   {line}
@@ -263,10 +263,10 @@ export default function DownloadPage() {
 
                           {changelog.length > 0 && (
                             <div>
-                              <h3 className='text-lg font-semibold mb-2 text-gray-900 dark:text-white'>
+                              <h3 className='text-lg font-semibold mb-2 text-foreground'>
                                 What's New:
                               </h3>
-                              <ul className='space-y-1 list-disc pl-5 text-gray-600 dark:text-gray-400'>
+                              <ul className='space-y-1 list-disc pl-5 text-muted-foreground'>
                                 {changelog.map((item, i) => (
                                   <li key={i}>{item}</li>
                                 ))}
@@ -278,7 +278,7 @@ export default function DownloadPage() {
                     })()}
                   </div>
 
-                  <div className='mt-6 pt-6 border-t border-gray-200 dark:border-gray-700'>
+                  <div className='mt-6 pt-6 border-t border-border'>
                     <div className='flex flex-col sm:flex-row sm:items-center gap-4'>
                       <Button variant='outline' size='sm' asChild>
                         <Link
@@ -290,14 +290,14 @@ export default function DownloadPage() {
                           View on GitHub
                         </Link>
                       </Button>
-                      <div className='text-sm text-gray-500 dark:text-gray-400'>
+                      <div className='text-sm text-muted-foreground'>
                         Compatible with Android 7.0+ devices.
                       </div>
                     </div>
                   </div>
                 </>
               ) : (
-                <div className='text-gray-600 dark:text-gray-400'>
+                <div className='text-muted-foreground'>
                   No releases available at this time.
                 </div>
               )}
@@ -308,14 +308,14 @@ export default function DownloadPage() {
         {/* All releases section */}
         <div>
           <div className='flex items-center justify-between mb-6'>
-            <h2 className='text-2xl font-bold text-gray-900 dark:text-white'>
+            <h2 className='text-2xl font-bold text-foreground'>
               All Releases
             </h2>
             <Button
               variant='outline'
               size='sm'
               asChild
-              className='text-gray-600 dark:text-gray-400'
+              className='text-muted-foreground'
             >
               <Link
                 href='https://github.com/vernu/textbee/releases'
@@ -333,7 +333,7 @@ export default function DownloadPage() {
               {[1, 2, 3].map((i) => (
                 <div
                   key={i}
-                  className='bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4'
+                  className='bg-card rounded-lg border border-border p-4'
                 >
                   <Skeleton className='h-6 w-48 mb-4' />
                   <Skeleton className='h-4 w-full mb-2' />
@@ -342,16 +342,16 @@ export default function DownloadPage() {
               ))}
             </div>
           ) : error ? (
-            <div className='bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6'>
+            <div className='bg-card rounded-lg border border-border p-6'>
               <div className='text-red-500 dark:text-red-400'>{error}</div>
             </div>
           ) : releases.length === 0 ? (
-            <div className='bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 text-center'>
+            <div className='bg-card rounded-lg border border-border p-6 text-center'>
               <PackageOpen className='h-12 w-12 mx-auto text-gray-400 mb-4' />
-              <h3 className='text-lg font-medium text-gray-900 dark:text-white mb-2'>
+              <h3 className='text-lg font-medium text-foreground mb-2'>
                 No Releases Found
               </h3>
-              <p className='text-gray-600 dark:text-gray-400'>
+              <p className='text-muted-foreground'>
                 There are no releases available at this time.
               </p>
             </div>
@@ -361,12 +361,12 @@ export default function DownloadPage() {
                 <AccordionItem
                   key={release.id}
                   value={release.id.toString()}
-                  className='bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden'
+                  className='bg-card rounded-lg border border-border overflow-hidden'
                 >
                   <AccordionTrigger className='px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors'>
                     <div className='flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 text-left'>
                       <div className='flex items-center gap-2'>
-                        <h3 className='text-lg font-semibold text-gray-900 dark:text-white'>
+                        <h3 className='text-lg font-semibold text-foreground'>
                           {release.name || release.tag_name}
                         </h3>
                         {release.id === latestRelease?.id && (
@@ -383,7 +383,7 @@ export default function DownloadPage() {
                           </Badge>
                         )}
                       </div>
-                      <div className='text-sm text-gray-500 dark:text-gray-400'>
+                      <div className='text-sm text-muted-foreground'>
                         Released on {formatDate(release.published_at)}
                       </div>
                     </div>
@@ -398,7 +398,7 @@ export default function DownloadPage() {
                         return (
                           <>
                             {description && (
-                              <div className='text-gray-700 dark:text-gray-300'>
+                              <div className='text-foreground'>
                                 {description.split('\n').map((line, i) => (
                                   <p key={i} className='mb-2'>
                                     {line}
@@ -409,10 +409,10 @@ export default function DownloadPage() {
 
                             {changelog.length > 0 && (
                               <div>
-                                <h4 className='text-base font-medium mb-2 text-gray-900 dark:text-white'>
+                                <h4 className='text-base font-medium mb-2 text-foreground'>
                                   Changes:
                                 </h4>
-                                <ul className='space-y-1 list-disc pl-5 text-gray-600 dark:text-gray-400'>
+                                <ul className='space-y-1 list-disc pl-5 text-muted-foreground'>
                                   {changelog.map((item, i) => (
                                     <li key={i}>{item}</li>
                                   ))}
@@ -425,8 +425,8 @@ export default function DownloadPage() {
 
                       {/* Download assets */}
                       {release.assets.length > 0 && (
-                        <div className='mt-4 pt-4 border-t border-gray-200 dark:border-gray-700'>
-                          <h4 className='text-base font-medium mb-3 text-gray-900 dark:text-white'>
+                        <div className='mt-4 pt-4 border-t border-border'>
+                          <h4 className='text-base font-medium mb-3 text-foreground'>
                             Downloads:
                           </h4>
                           <div className='space-y-2'>
@@ -436,16 +436,16 @@ export default function DownloadPage() {
                                 className='flex flex-col sm:flex-row sm:items-center justify-between gap-2 p-3 bg-gray-50 dark:bg-gray-900 rounded-md'
                               >
                                 <div className='flex items-center'>
-                                  <FileDown className='h-4 w-4 text-gray-500 dark:text-gray-400 mr-2' />
-                                  <span className='text-sm text-gray-700 dark:text-gray-300'>
+                                  <FileDown className='h-4 w-4 text-muted-foreground mr-2' />
+                                  <span className='text-sm text-foreground'>
                                     {asset.name}
                                   </span>
                                 </div>
                                 <div className='flex items-center gap-4'>
-                                  <span className='text-xs text-gray-500 dark:text-gray-400'>
+                                  <span className='text-xs text-muted-foreground'>
                                     {formatFileSize(asset.size)}
                                   </span>
-                                  <span className='text-xs text-gray-500 dark:text-gray-400'>
+                                  <span className='text-xs text-muted-foreground'>
                                     <Download className='inline h-3 w-3 mr-1' />
                                     {asset.download_count.toLocaleString()}
                                   </span>
@@ -475,7 +475,7 @@ export default function DownloadPage() {
                         <Button
                           variant='ghost'
                           size='sm'
-                          className='text-gray-600 dark:text-gray-400'
+                          className='text-muted-foreground'
                           asChild
                         >
                           <Link
@@ -497,14 +497,14 @@ export default function DownloadPage() {
         </div>
 
         {/* Requirements section */}
-        <div className='mt-16 bg-gray-50 dark:bg-gray-900 rounded-xl p-6 sm:p-8 border border-gray-200 dark:border-gray-700'>
+        <div className='mt-16 bg-gray-50 dark:bg-gray-900 rounded-xl p-6 sm:p-8 border border-border'>
           <div className='flex items-start'>
-            <Info className='h-5 w-5 text-brand-600 dark:text-brand-400 mt-0.5 mr-3 flex-shrink-0' />
+            <Info className='h-5 w-5 text-primary mt-0.5 mr-3 flex-shrink-0' />
             <div>
-              <h3 className='text-lg font-semibold text-gray-900 dark:text-white mb-2'>
+              <h3 className='text-lg font-semibold text-foreground mb-2'>
                 System Requirements
               </h3>
-              <ul className='space-y-2 text-gray-600 dark:text-gray-400'>
+              <ul className='space-y-2 text-muted-foreground'>
                 <li className='flex items-start'>
                   <Check className='h-5 w-5 text-green-500 mr-2 mt-0.5 flex-shrink-0' />
                   <span>Android 7.0 (Nougat) or higher</span>
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 46964aef..c09505f3 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,12 +1,14 @@
 import { PropsWithChildren } from 'react'
 import '@/styles/main.css'
 import { Metadata } from 'next'
-import Footer from '@/components/shared/footer'
-import { Toaster } from '@/components/ui/toaster'
-import Analytics from '@/components/shared/analytics'
-import { Session } from 'next-auth'
-import { getServerSession } from 'next-auth'
-import { authOptions } from '@/lib/auth'
+import { Inter } from 'next/font/google'
+import ThemeProvider from './theme-provider'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+})
 
 export const metadata: Metadata = {
   title: 'textbee.dev - sms gateway - dashboard',
@@ -16,9 +18,18 @@ export const metadata: Metadata = {
 
 export default async function RootLayout({ children }: PropsWithChildren) {
   return (
-    <html lang='en'>
-      <body>
-        <main>{children}</main>
+    <html lang='en' suppressHydrationWarning className={inter.variable}>
+      {/* No <main> here: the (app) layout renders its own, and nesting
+          <main> inside <main> is invalid HTML. */}
+      <body className='font-sans antialiased'>
+        <ThemeProvider
+          attribute='class'
+          defaultTheme='system'
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   )
diff --git a/web/app/theme-provider.tsx b/web/app/theme-provider.tsx
new file mode 100644
index 00000000..55140fc8
--- /dev/null
+++ b/web/app/theme-provider.tsx
@@ -0,0 +1,15 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ComponentProps } from 'react'
+
+// next-themes injects a small inline script to set the theme before paint.
+// It must live in the ROOT layout so that script is part of the initial SSR
+// document and is never re-rendered during client navigation (re-rendering a
+// <script> on the client triggers a React warning and a hydration mismatch).
+export default function ThemeProvider({
+  children,
+  ...props
+}: ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/web/components.json b/web/components.json
index 34d1db9b..49e0f5ee 100644
--- a/web/components.json
+++ b/web/components.json
@@ -4,7 +4,7 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "styles/main.css",
     "baseColor": "gray",
     "cssVariables": true,
diff --git a/web/components/ErrorBoundary.tsx b/web/components/ErrorBoundary.tsx
index 12e46156..6bfc0ffd 100644
--- a/web/components/ErrorBoundary.tsx
+++ b/web/components/ErrorBoundary.tsx
@@ -15,12 +15,12 @@ export default class ErrorBoundary extends Component<
 > {
   state = { hasError: false }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(error: unknown): ErrorBoundaryState {
     console.log(error)
     return { hasError: true }
   }
 
-  componentDidCatch(error, errorInfo) {
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     console.log(error, errorInfo)
   }
 
diff --git a/web/components/shared/analytics.tsx b/web/components/shared/analytics.tsx
index faedea0a..51b57c66 100644
--- a/web/components/shared/analytics.tsx
+++ b/web/components/shared/analytics.tsx
@@ -2,7 +2,10 @@
 
 import Script from 'next/script'
 
-const Analytics = ({ user }) => {
+// Only the email is read, to tag the Clarity session.
+type AnalyticsProps = { user?: { email?: string | null } | null }
+
+const Analytics = ({ user }: AnalyticsProps) => {
   return (
     <>
       {/* Global Site Tag (gtag.js) - Google Analytics  */}
diff --git a/web/components/shared/app-header.tsx b/web/components/shared/app-header.tsx
index fc9e9ddb..921236bd 100644
--- a/web/components/shared/app-header.tsx
+++ b/web/components/shared/app-header.tsx
@@ -14,13 +14,17 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
-import { Menu, LogOut, LayoutDashboard, MessageSquarePlus } from 'lucide-react'
+import { Menu, LogOut, LayoutDashboard } from 'lucide-react'
 import { signOut } from 'next-auth/react'
 import { Routes } from '@/config/routes'
-import ThemeToggle from './theme-toggle'
 import { Session } from 'next-auth'
 
-export default function AppHeader({ session }: { session: Session }) {
+// Deliberately minimal: identity and brand only. Navigation lives in the
+// sidebar (desktop) and the bottom tab bar (mobile), search in the command
+// palette, and the theme control in the sidebar footer.
+// Nullable: the root layout renders this for signed-out visitors too, and the
+// body already guards with session?.user throughout.
+export default function AppHeader({ session }: { session: Session | null }) {
   const router = useRouter()
 
   const handleLogout = () => {
@@ -28,39 +32,34 @@ export default function AppHeader({ session }: { session: Session }) {
     router.push(Routes.login)
   }
 
-  const isAuthenticated = useMemo(
-    () => session?.user,
-    [session?.user]
-  )
+  const isAuthenticated = useMemo(() => session?.user, [session?.user])
 
   const AuthenticatedMenu = () => (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='ghost' className='relative h-8 w-8 rounded-full'>
+        <Button variant='ghost' className='relative h-8 gap-2 px-1.5'>
           <Avatar className='h-8 w-8'>
             <AvatarImage
-              src={session.user?.avatar}
-              alt={session.user?.name}
+              src={session?.user?.avatar ?? undefined}
+              alt={session?.user?.name ?? undefined}
             />
-            <AvatarFallback>
-              {session.user?.name?.charAt(0)}
-            </AvatarFallback>
+            <AvatarFallback>{session?.user?.name?.charAt(0)}</AvatarFallback>
           </Avatar>
-          <div className='hidden md:block'>
-            {session.user?.name?.split(' ')[0]}
-          </div>
+          <span className='hidden text-sm font-medium md:block'>
+            {session?.user?.name?.split(' ')[0]}
+          </span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className='w-56' align='end' forceMount>
         <DropdownMenuItem className='flex flex-col items-start'>
-          <div className='font-medium'>{session.user?.name}</div>
+          <div className='font-medium'>{session?.user?.name}</div>
           <div className='text-xs text-muted-foreground'>
-            {session.user?.email}
+            {session?.user?.email}
           </div>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem asChild>
-          <Link href={Routes.dashboard} className='w-full flex items-center'>
+          <Link href={Routes.dashboard} className='flex w-full items-center'>
             <LayoutDashboard className='mr-2 h-4 w-4' />
             <span>Dashboard</span>
           </Link>
@@ -73,7 +72,9 @@ export default function AppHeader({ session }: { session: Session }) {
     </DropdownMenu>
   )
 
-  const MobileMenu = () => (
+  // Only unauthenticated visitors need a sheet: signed-in users already have
+  // the bottom tab bar for navigation and the avatar menu for identity.
+  const SignedOutMobileMenu = () => (
     <Sheet>
       <SheetTrigger asChild>
         <Button variant='ghost' className='md:hidden' size='icon'>
@@ -82,63 +83,16 @@ export default function AppHeader({ session }: { session: Session }) {
         </Button>
       </SheetTrigger>
       <SheetContent side='right' className='w-[300px] sm:w-[400px]'>
-        <nav className='flex flex-col gap-4'>
-          {isAuthenticated ? (
-            <>
-              <div className='flex items-center gap-2 py-2'>
-                <Avatar className='h-8 w-8'>
-                  <AvatarImage
-                    src={session.user?.avatar}
-                    alt={session.user?.name}
-                  />
-                  <AvatarFallback>
-                    {session.user?.name?.charAt(0)}
-                  </AvatarFallback>
-                </Avatar>
-                <div>
-                  <div className='font-medium'>{session.user?.name}</div>
-                  <div className='text-xs text-muted-foreground'>
-                    {session.user?.email}
-                  </div>
-                </div>
-              </div>
-              <Link
-                href={Routes.dashboard}
-                className='flex items-center gap-2 py-2'
-              >
-                <LayoutDashboard className='h-4 w-4' />
-                Dashboard
-              </Link>
-              <Link
-                href={Routes.contribute}
-                className='flex items-center gap-2 py-2'
-              >
-                <MessageSquarePlus className='h-4 w-4' />
-                Contribute
-              </Link>
-              <Button
-                onClick={handleLogout}
-                variant='ghost'
-                className='justify-start text-red-600'
-              >
-                <LogOut className='mr-2 h-4 w-4' />
-                Log out
-              </Button>
-            </>
-          ) : (
-            <>
-              <Button asChild variant='ghost' className='justify-start'>
-                <Link href={Routes.login}>Log in</Link>
-              </Button>
-              <Button
-                asChild
-                color='primary'
-                className='bg-primary hover:bg-primary/90 text-white rounded-full'
-              >
-                <Link href={Routes.register}>Get started</Link>
-              </Button>
-            </>
-          )}
+        <nav aria-label='Account' className='flex flex-col gap-4'>
+          <Button asChild variant='ghost' className='justify-start'>
+            <Link href={Routes.login}>Log in</Link>
+          </Button>
+          <Button
+            asChild
+            className='rounded-full bg-primary text-white hover:bg-primary/90'
+          >
+            <Link href={Routes.register}>Get started</Link>
+          </Button>
         </nav>
       </SheetContent>
     </Sheet>
@@ -146,56 +100,42 @@ export default function AppHeader({ session }: { session: Session }) {
 
   return (
     <header className='sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60'>
-      <div className='container flex h-14 items-center'>
-        <div className='mr-4 flex'>
-          <Link
-            className='flex items-center space-x-2'
-            href={Routes.landingPage}
-          >
-            <Image
-              src='/images/logo.png'
-              alt='textbee Logo'
-              width={24}
-              height={24}
-              className='h-6 w-6 bg-white rounded-full'
-            />
-            <span className='font-bold'>
-              text<span className='text-primary'>bee</span>
-              <span className='text-xs align-center text-gray-500 dark:text-gray-400'>
-                .dev
-              </span>
+      <div className='flex h-14 items-center gap-2 px-4'>
+        <Link className='flex items-center space-x-2' href={Routes.landingPage}>
+          <Image
+            src='/images/logo.png'
+            alt='textbee Logo'
+            width={24}
+            height={24}
+            className='h-6 w-6 rounded-full bg-white'
+          />
+          <span className='font-bold'>
+            text<span className='text-primary'>bee</span>
+            <span className='align-center text-xs text-muted-foreground'>
+              .dev
             </span>
-          </Link>
-        </div>
-        <div className='flex flex-1 items-center justify-end space-x-2'>
-          <nav className='flex items-center space-x-6'>
-            <ThemeToggle />
-            <Link
-              href={Routes.contribute}
-              className='items-center gap-2 pr-8 hidden md:block'
-            >
-              <Button variant='outline' className='px-4 py-2 text-sm'>
-                Contribute
-              </Button>
-            </Link>
+          </span>
+        </Link>
 
-            {isAuthenticated ? (
-              <AuthenticatedMenu />
-            ) : (
+        <div className='flex flex-1 items-center justify-end gap-2'>
+          {isAuthenticated ? (
+            <AuthenticatedMenu />
+          ) : (
+            <>
               <div className='hidden md:flex md:items-center md:gap-2'>
                 <Button asChild variant='ghost'>
                   <Link href={Routes.login}>Log in</Link>
                 </Button>
                 <Button
                   asChild
-                  className='bg-primary hover:bg-primary/90 text-white rounded-full'
+                  className='rounded-full bg-primary text-white hover:bg-primary/90'
                 >
                   <Link href={Routes.register}>Get started</Link>
                 </Button>
               </div>
-            )}
-            <MobileMenu />
-          </nav>
+              <SignedOutMobileMenu />
+            </>
+          )}
         </div>
       </div>
     </header>
diff --git a/web/components/shared/contribute-modal.tsx b/web/components/shared/contribute-modal.tsx
index c75732e9..0b58230a 100644
--- a/web/components/shared/contribute-modal.tsx
+++ b/web/components/shared/contribute-modal.tsx
@@ -25,9 +25,7 @@ import Link from 'next/link'
 import { ExternalLinks } from '@/config/external-links'
 import { CRYPTO_ADDRESSES } from '@/lib/constants'
 import Image from 'next/image'
-import { ApiEndpoints } from '@/config/api'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { useQuery } from '@tanstack/react-query'
+import { useCurrentUser, useSubscription } from '@/lib/api'
 
 // Add constants for localStorage and timing
 const STORAGE_KEYS = {
@@ -53,25 +51,13 @@ export function ContributeModal() {
     data: currentSubscription,
     isLoading: isLoadingSubscription,
     error: subscriptionError,
-  } = useQuery({
-    queryKey: ['currentSubscription'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.billing.currentSubscription())
-        .then((res) => res.data),
-  })
+  } = useSubscription()
 
   const {
     data: currentUser,
     isLoading: isLoadingUser,
     error: currentUserError,
-  } = useQuery({
-    queryKey: ['currentUser'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.auth.whoAmI())
-        .then((res) => res.data?.data),
-  })
+  } = useCurrentUser()
 
   useEffect(() => {
     const checkAndShowModal = () => {
diff --git a/web/components/shared/copy-button.tsx b/web/components/shared/copy-button.tsx
index d8ef6f38..b53062d8 100644
--- a/web/components/shared/copy-button.tsx
+++ b/web/components/shared/copy-button.tsx
@@ -1,50 +1,57 @@
-"use client";
+'use client'
 
-import { Button } from "@/components/ui/button";
-import { Check, Copy } from "lucide-react";
-import { useState } from "react";
-import { useToast } from "@/hooks/use-toast";
+import { Button } from '@/components/ui/button'
+import { Check, Copy } from 'lucide-react'
+import { useState } from 'react'
+import { useToast } from '@/hooks/use-toast'
+import { cn } from '@/lib/utils'
 
 interface CopyButtonProps {
-  value: string;
-  label: string;
-  className?: string;
+  value: string
+  /** What is being copied, e.g. "Message". Names the button for assistive tech. */
+  label: string
+  className?: string
 }
 
 export function CopyButton({ value, label, className }: CopyButtonProps) {
-  const [copied, setCopied] = useState(false);
-  const { toast } = useToast();
+  const [copied, setCopied] = useState(false)
+  const { toast } = useToast()
 
   const copyToClipboard = async () => {
     try {
-      await navigator.clipboard.writeText(value);
-      setCopied(true);
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
       toast({
-        title: "Copied!",
+        title: 'Copied!',
         description: `${label} copied to clipboard`,
-      });
-      setTimeout(() => setCopied(false), 2000);
+      })
+      setTimeout(() => setCopied(false), 2000)
     } catch (err) {
       toast({
-        title: "Failed to copy",
-        description: "Please try again",
-        variant: "destructive",
-      });
+        title: 'Failed to copy',
+        description: 'Please try again',
+        variant: 'destructive',
+      })
     }
-  };
+  }
 
   return (
     <Button
-      variant="ghost"
-      size="icon"
-      className={className}
+      type='button'
+      variant='ghost'
+      size='icon'
+      // Icon-only buttons carried no accessible name, so several of them in
+      // one view were indistinguishable to a screen reader.
+      aria-label={`Copy ${label.toLowerCase()}`}
+      title={`Copy ${label.toLowerCase()}`}
+      className={cn('shrink-0', className)}
       onClick={copyToClipboard}
     >
       {copied ? (
-        <Check className="h-4 w-4 text-green-500" />
+        <Check className='h-4 w-4 text-green-600 dark:text-green-400' />
       ) : (
-        <Copy className="h-4 w-4" />
+        <Copy className='h-4 w-4' />
       )}
     </Button>
-  );
-}
\ No newline at end of file
+  )
+}
diff --git a/web/components/shared/empty-state.tsx b/web/components/shared/empty-state.tsx
new file mode 100644
index 00000000..2c53fdc9
--- /dev/null
+++ b/web/components/shared/empty-state.tsx
@@ -0,0 +1,20 @@
+import type { ComponentType } from 'react'
+
+type EmptyStateProps = {
+  icon: ComponentType<{ className?: string }>
+  title: string
+  hint?: string
+}
+
+// Shared empty-state placeholder: icon in a muted circle, title, optional hint.
+export default function EmptyState({ icon: Icon, title, hint }: EmptyStateProps) {
+  return (
+    <div className='flex flex-col items-center justify-center gap-2 py-12 text-center'>
+      <div className='rounded-full bg-muted p-3'>
+        <Icon className='h-6 w-6 text-muted-foreground' />
+      </div>
+      <p className='text-sm font-medium text-foreground'>{title}</p>
+      {hint && <p className='text-xs text-muted-foreground'>{hint}</p>}
+    </div>
+  )
+}
diff --git a/web/components/shared/error-state.tsx b/web/components/shared/error-state.tsx
new file mode 100644
index 00000000..52bf5822
--- /dev/null
+++ b/web/components/shared/error-state.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import type { ComponentType } from 'react'
+import { AlertCircle, RefreshCw } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { formatError } from '@/lib/utils/errorHandler'
+
+type ErrorStateProps = {
+  error: unknown
+  title?: string
+  onRetry?: () => void
+  icon?: ComponentType<{ className?: string }>
+}
+
+/**
+ * Shared error placeholder, the counterpart to EmptyState.
+ *
+ * Several sections rendered a bare `Error: {error.message}` with no styling
+ * and no way to recover, which put raw transport strings like "Request failed
+ * with status code 500" in front of users. formatError already knows how to
+ * turn an axios rejection into something readable, including rate limits, so
+ * this routes everything through it.
+ */
+export default function ErrorState({
+  error,
+  title = 'Something went wrong',
+  onRetry,
+  icon: Icon = AlertCircle,
+}: ErrorStateProps) {
+  const { message } = formatError(error)
+
+  return (
+    <div
+      role='alert'
+      className='flex flex-col items-center justify-center gap-2 py-12 text-center'
+    >
+      <div className='rounded-full bg-destructive/10 p-3'>
+        <Icon className='h-6 w-6 text-destructive' />
+      </div>
+      <p className='text-sm font-medium text-foreground'>{title}</p>
+      <p className='max-w-sm text-xs text-muted-foreground'>{message}</p>
+      {onRetry && (
+        <Button variant='outline' size='sm' className='mt-2' onClick={onRetry}>
+          <RefreshCw className='mr-1.5 h-3.5 w-3.5' />
+          Try again
+        </Button>
+      )}
+    </div>
+  )
+}
diff --git a/web/components/shared/footer.tsx b/web/components/shared/footer.tsx
index b4e63cb9..b0d0f995 100644
--- a/web/components/shared/footer.tsx
+++ b/web/components/shared/footer.tsx
@@ -1,76 +1,68 @@
-import { ExternalLinks } from '@/config/external-links'
 import { Routes } from '@/config/routes'
-import { MessageSquarePlus, Activity } from 'lucide-react'
+import { Activity } from 'lucide-react'
 import Link from 'next/link'
 import Image from 'next/image'
 
+// A logged-in user is already converted, so the app footer stays a single slim
+// bar rather than the marketing site's multi-column link farm. It borrows that
+// footer's visual language (muted surface, muted-to-foreground link hovers,
+// green status pill) so the two still read as one product.
+const links = [
+  { label: 'Quick start', href: Routes.quickstart },
+  { label: 'Download app', href: Routes.downloadAndroidApp },
+  { label: 'Contribute', href: Routes.contribute },
+  { label: 'Privacy', href: Routes.privacyPolicy },
+  { label: 'Terms', href: Routes.termsOfService },
+  { label: 'Refund', href: Routes.refundPolicy },
+]
+
+const linkClass =
+  'text-sm text-muted-foreground transition-colors hover:text-foreground'
+
 export default function Footer() {
   return (
-    <footer className='border-t py-6  bg-gray-50 dark:bg-muted'>
-      <div className='container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row'>
-        <div className='flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0'>
+    <footer className='border-t border-border bg-muted/30'>
+      {/* Left-aligned on mobile: centred links in a single column read as a
+          ragged stack with no common edge to scan down. */}
+      <div className='mx-auto flex max-w-7xl flex-col items-start gap-4 px-4 py-6 sm:items-center sm:px-6 md:flex-row md:justify-between lg:px-8'>
+        <div className='flex items-center gap-2'>
           <Image
             src='/images/logo.png'
-            alt='textbee Logo'
-            width={24}
-            height={24}
-            className='h-6 w-6 bg-white rounded-full'
+            alt='textbee logo'
+            width={20}
+            height={20}
+            className='h-5 w-5 rounded-full bg-white'
           />
-          <p className='text-center text-sm leading-loose md:text-left'>
-            © {new Date().getFullYear()} All rights reserved
-          </p>
+          <span className='text-sm text-muted-foreground'>
+            © {new Date().getFullYear()} textbee.dev
+          </span>
         </div>
-        <nav className='flex gap-4 sm:gap-6 flex-col md:flex-row items-center'>
-          <Link
-            className='text-sm font-medium hover:text-brand-500'
-            href={Routes.landingPage}
-          >
-            Home
-          </Link>
-          <Link
-            className='text-sm font-medium hover:text-brand-500'
-            href={Routes.dashboard}
-          >
-            Dashboard
-          </Link>
-          <Link
-            className='text-sm font-medium hover:text-brand-500'
-            href={Routes.downloadAndroidApp}
-          >
-            Download App
-          </Link>
-          <Link
-            className='text-sm font-medium hover:text-brand-500'
-            href={Routes.contribute}
-            target='_blank'
-          >
-            Contribute
-          </Link>
+
+        {/* Stacked on mobile: wrapped inline links produced a ragged two-line
+            block that was hard to scan and gave small tap targets. */}
+        <nav
+          aria-label='Footer'
+          className='flex w-full flex-col items-start gap-3 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:justify-center sm:gap-x-5 sm:gap-y-2'
+        >
+          {links.map((link) => (
+            <Link
+              key={link.label}
+              href={link.href}
+              target='_blank'
+              rel='noopener noreferrer'
+              className={linkClass}
+            >
+              {link.label}
+            </Link>
+          ))}
           <Link
-            className='text-sm font-medium group flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-50 hover:bg-green-100 dark:bg-green-900/20 dark:hover:bg-green-900/30 transition-colors'
             href={Routes.statusPage}
             target='_blank'
+            rel='nofollow noopener noreferrer'
+            className='inline-flex items-center gap-1.5 rounded-full bg-green-50 px-2.5 py-1 text-sm font-medium text-green-700 transition-colors hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 dark:hover:bg-green-900/30'
           >
-            <Activity className='h-3.5 w-3.5 text-green-500 group-hover:animate-pulse' />
-            <span className='text-green-700 dark:text-green-400'>Status</span>
-          </Link>
-          <Link
-            className='text-sm font-medium hover:text-brand-500'
-            href={Routes.privacyPolicy}
-          >
-            Privacy Policy
-          </Link>
-          <Link
-            className='text-sm font-medium hover:text-brand-500'
-            href={Routes.termsOfService}
-          >
-            Terms of Service
-          </Link>
-          <Link
-            className='text-sm font-medium hover:text-brand-500'
-            href={Routes.refundPolicy}
-          >
-            Refund Policy
+            <Activity className='h-3.5 w-3.5 text-green-500' />
+            Status
           </Link>
         </nav>
       </div>
diff --git a/web/components/shared/join-community-modal.tsx b/web/components/shared/join-community-modal.tsx
index dd1f4741..df2a4e00 100644
--- a/web/components/shared/join-community-modal.tsx
+++ b/web/components/shared/join-community-modal.tsx
@@ -82,7 +82,7 @@ export const JoinCommunityModal = () => {
           <Button
             variant='default'
             onClick={() => {
-              window.open(ExternalLinks.discord, '_blank')
+              window.open(ExternalLinks.discord, '_blank', 'noopener,noreferrer')
               handleJoined()
             }}
             className='gap-2'
diff --git a/web/components/shared/numbered-pagination.tsx b/web/components/shared/numbered-pagination.tsx
new file mode 100644
index 00000000..365f5eef
--- /dev/null
+++ b/web/components/shared/numbered-pagination.tsx
@@ -0,0 +1,110 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+
+type PaginationProps = {
+  page: number
+  totalPages: number
+  onPageChange: (page: number) => void
+}
+
+function PageButton({
+  page,
+  isActive,
+  onClick,
+}: {
+  page: number
+  isActive: boolean
+  onClick: () => void
+}) {
+  return (
+    <Button
+      onClick={onClick}
+      variant={isActive ? 'default' : 'ghost'}
+      size='icon'
+      className={`h-8 w-8 rounded-full ${
+        isActive
+          ? 'bg-primary text-brand-foreground hover:bg-primary/90'
+          : 'hover:bg-secondary'
+      }`}
+    >
+      {page}
+    </Button>
+  )
+}
+
+// Numbered pagination with first/last anchors and ellipsis for long ranges.
+export default function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+}: PaginationProps) {
+  if (totalPages <= 1) return null
+
+  // Middle window: up to 6 pages between the pinned first and last buttons.
+  const middlePages: number[] = []
+  for (let i = 0; i < Math.min(6, totalPages - 2); i++) {
+    let pageToShow: number
+    if (totalPages <= 8) {
+      pageToShow = i + 2
+    } else if (page <= 4) {
+      pageToShow = i + 2
+    } else if (page >= totalPages - 3) {
+      pageToShow = totalPages - 7 + i
+    } else {
+      pageToShow = page - 2 + i
+    }
+    if (pageToShow > 1 && pageToShow < totalPages) {
+      middlePages.push(pageToShow)
+    }
+  }
+
+  return (
+    <div className='flex justify-center mt-6 space-x-2'>
+      <Button
+        onClick={() => onPageChange(Math.max(1, page - 1))}
+        disabled={page === 1}
+        variant={page === 1 ? 'ghost' : 'default'}
+      >
+        Previous
+      </Button>
+
+      <div className='flex flex-wrap items-center gap-2 justify-center sm:justify-start'>
+        <PageButton
+          page={1}
+          isActive={page === 1}
+          onClick={() => onPageChange(1)}
+        />
+
+        {page > 4 && totalPages > 7 && <span className='px-1'>...</span>}
+
+        {middlePages.map((p) => (
+          <PageButton
+            key={p}
+            page={p}
+            isActive={page === p}
+            onClick={() => onPageChange(p)}
+          />
+        ))}
+
+        {page < totalPages - 3 && totalPages > 7 && (
+          <span className='px-1'>...</span>
+        )}
+
+        <PageButton
+          page={totalPages}
+          isActive={page === totalPages}
+          onClick={() => onPageChange(totalPages)}
+        />
+      </div>
+
+      <Button
+        onClick={() => onPageChange(Math.min(totalPages, page + 1))}
+        disabled={page === totalPages}
+        variant={page === totalPages ? 'ghost' : 'default'}
+      >
+        Next
+      </Button>
+    </div>
+  )
+}
diff --git a/web/components/shared/page-header.tsx b/web/components/shared/page-header.tsx
new file mode 100644
index 00000000..a3a5b50d
--- /dev/null
+++ b/web/components/shared/page-header.tsx
@@ -0,0 +1,40 @@
+import type { ComponentType, ReactNode } from 'react'
+
+type PageHeaderProps = {
+  title: string
+  description?: string
+  icon?: ComponentType<{ className?: string }>
+  actions?: ReactNode
+}
+
+/**
+ * Section heading shared by the dashboard's route layouts.
+ *
+ * The same icon plus heading plus description block was written out four
+ * times, and community/page.tsx had drifted: it kept an unconditional
+ * text-3xl and no mobile padding step while every other section had moved to
+ * a responsive size. One definition makes that class of drift impossible.
+ */
+export default function PageHeader({
+  title,
+  description,
+  icon: Icon,
+  actions,
+}: PageHeaderProps) {
+  return (
+    <div className='mb-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between'>
+      <div className='space-y-1'>
+        <div className='flex items-center space-x-2'>
+          {Icon && <Icon className='h-6 w-6 text-primary' />}
+          <h2 className='text-2xl font-bold tracking-tight sm:text-3xl'>
+            {title}
+          </h2>
+        </div>
+        {description && (
+          <p className='text-muted-foreground'>{description}</p>
+        )}
+      </div>
+      {actions}
+    </div>
+  )
+}
diff --git a/web/components/shared/relative-time.test.tsx b/web/components/shared/relative-time.test.tsx
new file mode 100644
index 00000000..707fcc30
--- /dev/null
+++ b/web/components/shared/relative-time.test.tsx
@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import RelativeTime, { toExactLabel, toRelativeLabel } from './relative-time'
+
+const NOW = new Date('2026-07-18T12:00:00.000Z')
+const ago = (ms: number) => new Date(NOW.getTime() - ms)
+
+const SECOND = 1000
+const MINUTE = 60 * SECOND
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+
+describe('toRelativeLabel', () => {
+  it('collapses anything under a minute to "Just now"', () => {
+    expect(toRelativeLabel(ago(0), NOW)).toBe('Just now')
+    expect(toRelativeLabel(ago(45 * SECOND), NOW)).toBe('Just now')
+  })
+
+  it('is strict, so it does not say "about"', () => {
+    // formatDistanceToNow would render "about 3 minutes ago".
+    expect(toRelativeLabel(ago(3 * MINUTE), NOW)).not.toContain('about')
+  })
+})
+
+// The pure helper takes an explicit `now`, but the component reads the real
+// clock, so its inputs must be relative to the real clock too. Anchoring them
+// to the fixed NOW above made these pass only on that one calendar day: a
+// value 7 days before 2026-07-18 is 8 days before 2026-07-19.
+const realAgo = (ms: number) => new Date(Date.now() - ms)
+
+describe('RelativeTime', () => {
+  it('renders a relative label for a past date', () => {
+    render(<RelativeTime value={realAgo(7 * DAY)} />)
+    expect(screen.getByText('7 days ago')).toBeInTheDocument()
+  })
+
+  it('exposes the machine-readable timestamp on a <time> element', () => {
+    const value = realAgo(2 * DAY)
+    const { container } = render(<RelativeTime value={value} />)
+    const el = container.querySelector('time')
+    expect(el).toBeInTheDocument()
+    expect(el).toHaveAttribute('dateTime', value.toISOString())
+  })
+
+  it('is reachable by keyboard so the exact time is not hover-only', () => {
+    const { container } = render(<RelativeTime value={realAgo(DAY)} />)
+    expect(container.querySelector('time')).toHaveAttribute('tabindex', '0')
+  })
+
+  it('renders the fallback for a null value', () => {
+    render(<RelativeTime value={null} fallback='Never' />)
+    expect(screen.getByText('Never')).toBeInTheDocument()
+    expect(document.querySelector('time')).toBeNull()
+  })
+
+  it('renders the fallback for an unparseable value rather than "Invalid Date"', () => {
+    render(<RelativeTime value='not-a-date' fallback='Unknown' />)
+    expect(screen.getByText('Unknown')).toBeInTheDocument()
+  })
+
+  it('formats the exact label with both date and time', () => {
+    // Constructed from parts so the assertion does not depend on the TZ the
+    // suite happens to run in.
+    const date = new Date(2023, 4, 18, 13, 42)
+    expect(toExactLabel(date)).toBe('May 18, 2023 at 1:42 PM')
+  })
+})
diff --git a/web/components/shared/relative-time.tsx b/web/components/shared/relative-time.tsx
new file mode 100644
index 00000000..26f26242
--- /dev/null
+++ b/web/components/shared/relative-time.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import { format, formatDistanceToNowStrict, isValid } from 'date-fns'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
+
+// Anything under this reads as "Just now" rather than "34 seconds ago".
+const JUST_NOW_MS = 60 * 1000
+
+export function toRelativeLabel(date: Date, now: Date = new Date()): string {
+  if (now.getTime() - date.getTime() < JUST_NOW_MS) return 'Just now'
+  // Strict, so it says "3 minutes ago" instead of "about 3 minutes ago".
+  return formatDistanceToNowStrict(date, { addSuffix: true })
+}
+
+export function toExactLabel(date: Date): string {
+  return format(date, "MMM d, yyyy 'at' h:mm a")
+}
+
+/**
+ * A timestamp shown as "7 days ago", with the exact date and time on hover.
+ *
+ * Long absolute timestamps ("May 18, 2023, 1:42 PM") wrapped and dominated the
+ * device and API key cards at mobile widths. Formatting is delegated to
+ * date-fns; the only local rule is the "Just now" threshold.
+ */
+export default function RelativeTime({
+  value,
+  fallback = '-',
+  className,
+}: {
+  value: string | number | Date | null | undefined
+  fallback?: string
+  className?: string
+}) {
+  if (value === null || value === undefined || value === '') {
+    return <span className={className}>{fallback}</span>
+  }
+
+  const date = value instanceof Date ? value : new Date(value)
+  if (!isValid(date)) {
+    return <span className={className}>{fallback}</span>
+  }
+
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          {/* A real <time> keeps the machine-readable value in the DOM, and
+              tabIndex means keyboard users can reach the exact timestamp too. */}
+          <time
+            dateTime={date.toISOString()}
+            tabIndex={0}
+            className={cn(
+              'cursor-default underline decoration-dotted underline-offset-2',
+              className
+            )}
+          >
+            {toRelativeLabel(date)}
+          </time>
+        </TooltipTrigger>
+        <TooltipContent>{toExactLabel(date)}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
diff --git a/web/components/shared/route-tabs.tsx b/web/components/shared/route-tabs.tsx
new file mode 100644
index 00000000..2b6361ad
--- /dev/null
+++ b/web/components/shared/route-tabs.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+
+export type RouteTab = {
+  href: string
+  label: string
+  // Exact-match only (used for index routes like /dashboard/messaging so they
+  // don't stay active on sibling subroutes).
+  exact?: boolean
+}
+
+function isTabActive(tab: RouteTab, pathname: string): boolean {
+  if (tab.exact) return pathname === tab.href
+  return pathname === tab.href || pathname.startsWith(`${tab.href}/`)
+}
+
+// Link-based segmented control: tabs are real routes, so the active tab
+// survives refresh and deep links are shareable. Mobile: horizontally
+// scrollable pills; the active pill scrolls into view on load.
+export default function RouteTabs({
+  tabs,
+  className,
+}: {
+  tabs: RouteTab[]
+  className?: string
+}) {
+  const pathname = usePathname()
+  const activeRef = useRef<HTMLAnchorElement | null>(null)
+
+  useEffect(() => {
+    // Deep links must land with the selected pill visible on small screens.
+    activeRef.current?.scrollIntoView({
+      block: 'nearest',
+      inline: 'center',
+    })
+  }, [pathname])
+
+  return (
+    <nav
+      className={cn(
+        'flex gap-1 overflow-x-auto rounded-lg bg-muted p-1',
+        'scrollbar-none w-full sm:w-fit',
+        className
+      )}
+      aria-label='Section navigation'
+    >
+      {tabs.map((tab) => {
+        const active = isTabActive(tab, pathname)
+        return (
+          <Link
+            key={tab.href}
+            href={tab.href}
+            ref={active ? activeRef : undefined}
+            aria-current={active ? 'page' : undefined}
+            className={cn(
+              'shrink-0 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+              active
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            {tab.label}
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}
diff --git a/web/components/shared/survey-modal.tsx b/web/components/shared/survey-modal.tsx
index 00b07a7b..5a95c1c2 100644
--- a/web/components/shared/survey-modal.tsx
+++ b/web/components/shared/survey-modal.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { useQuery } from '@tanstack/react-query'
 import {
   Dialog,
   DialogContent,
@@ -10,8 +9,7 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
-import httpBrowserClient from '@/lib/httpBrowserClient'
-import { ApiEndpoints } from '@/config/api'
+import { useCurrentUser } from '@/lib/api'
 
 const STORAGE_KEYS = {
   LAST_SHOWN: 'survey_modal_last_shown',
@@ -28,13 +26,7 @@ export const SurveyModal = () => {
     data: currentUser,
     isLoading: isLoadingUser,
     error: currentUserError,
-  } = useQuery({
-    queryKey: ['currentUser'],
-    queryFn: () =>
-      httpBrowserClient
-        .get(ApiEndpoints.auth.whoAmI())
-        .then((res) => res.data?.data),
-  })
+  } = useCurrentUser()
 
   useEffect(() => {
     const checkAndShowModal = () => {
diff --git a/web/components/shared/theme-toggle.tsx b/web/components/shared/theme-toggle.tsx
index eb1a9574..628090c6 100644
--- a/web/components/shared/theme-toggle.tsx
+++ b/web/components/shared/theme-toggle.tsx
@@ -1,41 +1,54 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
-import { Button } from '@/components/ui/button'
 import { Sun, Moon, Laptop } from 'lucide-react'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
 
+const options = [
+  { value: 'light', label: 'Light', icon: Sun },
+  { value: 'dark', label: 'Dark', icon: Moon },
+  { value: 'system', label: 'System', icon: Laptop },
+] as const
+
+// Three-way segmented control. It lives in the sidebar footer rather than the
+// top bar, where it has room to show all three states at once instead of
+// hiding them behind a dropdown.
 export default function ThemeToggle() {
   const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  // The active theme is unknown during SSR, so selection is only rendered
+  // after mount to avoid a hydration mismatch.
+  useEffect(() => setMounted(true), [])
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon'>
-          <Sun className='h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
-          <Moon className='absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
-          <span className='sr-only'>Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align='end'>
-        <DropdownMenuItem onClick={() => setTheme('light')}>
-          <Sun className='mr-2 h-4 w-4' />
-          <span>Light</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
-          <Moon className='mr-2 h-4 w-4' />
-          <span>Dark</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
-          <Laptop className='mr-2 h-4 w-4' />
-          <span>System</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <div
+      className='flex items-center gap-0.5 rounded-lg bg-muted p-0.5'
+      role='group'
+      aria-label='Color theme'
+    >
+      {options.map(({ value, label, icon: Icon }) => {
+        const active = mounted && theme === value
+        return (
+          <button
+            key={value}
+            type='button'
+            onClick={() => setTheme(value)}
+            aria-label={label}
+            aria-pressed={active}
+            title={label}
+            className={cn(
+              'flex flex-1 items-center justify-center rounded-md py-1.5 transition-colors',
+              active
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            <Icon className='h-4 w-4' />
+          </button>
+        )
+      })}
+    </div>
   )
 }
diff --git a/web/components/ui/__tests__/button.test.tsx b/web/components/ui/__tests__/button.test.tsx
new file mode 100644
index 00000000..71269553
--- /dev/null
+++ b/web/components/ui/__tests__/button.test.tsx
@@ -0,0 +1,35 @@
+import { describe, expect, it, vi } from 'vitest'
+import { Button } from '@/components/ui/button'
+import { render, screen, userEvent } from '@/test/render'
+
+describe('Button', () => {
+  it('renders its children', () => {
+    render(<Button>Send SMS</Button>)
+    expect(screen.getByRole('button', { name: 'Send SMS' })).toBeInTheDocument()
+  })
+
+  it('applies the destructive variant classes', () => {
+    render(<Button variant='destructive'>Delete</Button>)
+    expect(screen.getByRole('button', { name: 'Delete' })).toHaveClass(
+      'bg-destructive'
+    )
+  })
+
+  it('fires onClick when pressed', async () => {
+    const onClick = vi.fn()
+    render(<Button onClick={onClick}>Click</Button>)
+    await userEvent.click(screen.getByRole('button', { name: 'Click' }))
+    expect(onClick).toHaveBeenCalledOnce()
+  })
+
+  it('does not fire onClick when disabled', async () => {
+    const onClick = vi.fn()
+    render(
+      <Button disabled onClick={onClick}>
+        Disabled
+      </Button>
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Disabled' }))
+    expect(onClick).not.toHaveBeenCalled()
+  })
+})
diff --git a/web/components/ui/alert-dialog.tsx b/web/components/ui/alert-dialog.tsx
index 57760f2e..bf504e5e 100644
--- a/web/components/ui/alert-dialog.tsx
+++ b/web/components/ui/alert-dialog.tsx
@@ -36,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 sm:rounded-lg",
         className
       )}
       {...props}
diff --git a/web/components/ui/button.tsx b/web/components/ui/button.tsx
index 0843f3fd..16df6ea4 100644
--- a/web/components/ui/button.tsx
+++ b/web/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition active:scale-[0.98] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/web/components/ui/card.tsx b/web/components/ui/card.tsx
index 77e9fb78..1d20a12f 100644
--- a/web/components/ui/card.tsx
+++ b/web/components/ui/card.tsx
@@ -42,10 +42,12 @@ const CardTitle = React.forwardRef<
 CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  // A div (not <p>) so descriptions may contain block content without
+  // producing invalid <p> nesting and hydration errors.
+  <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
diff --git a/web/components/ui/dialog.tsx b/web/components/ui/dialog.tsx
index 95b0d38a..a40c17e3 100644
--- a/web/components/ui/dialog.tsx
+++ b/web/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 sm:rounded-lg",
         className
       )}
       {...props}
@@ -97,14 +97,19 @@ const DialogTitle = React.forwardRef<
 DialogTitle.displayName = DialogPrimitive.Title.displayName
 
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
+  // Rendered as a div rather than Radix's default <p> so descriptions can
+  // contain block content (paragraphs, lists) without invalid HTML nesting.
+  // asChild keeps the aria-describedby wiring intact.
+  <DialogPrimitive.Description asChild>
+    <div
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  </DialogPrimitive.Description>
 ))
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
diff --git a/web/config/routes.ts b/web/config/routes.ts
index ac0f3c94..fdc4bc4b 100644
--- a/web/config/routes.ts
+++ b/web/config/routes.ts
@@ -1,6 +1,6 @@
 export const Routes = {
   landingPage: 'https://textbee.dev',
-  contribute: '/contribute',
+  contribute: 'https://textbee.dev/contribute',
   useCases: 'https://textbee.dev/use-cases',
   quickstart: 'https://textbee.dev/quickstart',
   login: '/login',
diff --git a/web/e2e/account.spec.ts b/web/e2e/account.spec.ts
new file mode 100644
index 00000000..b4ccd09d
--- /dev/null
+++ b/web/e2e/account.spec.ts
@@ -0,0 +1,161 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+import { mockFreeSubscription } from '../test/fixtures'
+
+test.describe('account settings (mocked API, no real backend)', () => {
+  test('/dashboard/account redirects to billing and shows the subscription', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/account')
+
+    await expect(page).toHaveURL(/\/dashboard\/account\/billing/)
+    const nav = page.getByRole('navigation', { name: 'Section navigation' })
+    await expect(
+      nav.getByRole('link', { name: 'Billing & plan' })
+    ).toHaveAttribute('aria-current', 'page')
+    // Mocked subscription plan name renders.
+    await expect(page.getByRole('heading', { name: 'Pro' })).toBeVisible()
+  })
+
+  test('a subscriber sees their status, price and the next tier up', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/account/billing')
+
+    await expect(page.getByText('Active')).toBeVisible()
+    await expect(page.getByText('$9.99')).toBeVisible()
+    await expect(
+      page.getByRole('link', { name: /Upgrade to Scale/ })
+    ).toBeVisible()
+    await expect(
+      page.getByRole('link', { name: /Manage subscription/i })
+    ).toBeVisible()
+  })
+
+  // A free user has no subscription, so the payload carries no status. The
+  // page used to read that as a subscription whose status was unknown and
+  // told them so, alongside two "N/A" billing dates.
+  test('a free user is never told their status is unknown', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page, { subscription: mockFreeSubscription })
+    await page.goto('/dashboard/account/billing')
+
+    await expect(page.getByRole('heading', { name: 'Free' })).toBeVisible()
+    await expect(page.getByText('Unknown')).toHaveCount(0)
+    await expect(page.getByText('N/A')).toHaveCount(0)
+    await expect(page.getByText('Start date')).toHaveCount(0)
+
+    // Sold the next tier, not offered a portal for a subscription they do not
+    // have.
+    await expect(
+      page.getByRole('link', { name: /Upgrade to Pro/ })
+    ).toBeVisible()
+    await expect(
+      page.getByRole('link', { name: /Manage subscription/i })
+    ).toHaveCount(0)
+  })
+
+  test('the pricing page is reachable from billing on any plan', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page, { subscription: mockFreeSubscription })
+    await page.goto('/dashboard/account/billing')
+
+    await expect(
+      page.getByRole('link', { name: /Compare all plans/ })
+    ).toHaveAttribute('href', 'https://textbee.dev/pricing')
+  })
+
+  // Password managers key off autoComplete to tell the three password boxes
+  // apart. Without it they fill the saved password into the wrong field.
+  test('password fields declare their autocomplete roles', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/account/security')
+
+    await expect(page.getByLabel('Old Password')).toHaveAttribute(
+      'autocomplete',
+      'current-password'
+    )
+    await expect(page.getByLabel('New Password')).toHaveAttribute(
+      'autocomplete',
+      'new-password'
+    )
+    await expect(page.getByLabel('Confirm Password')).toHaveAttribute(
+      'autocomplete',
+      'new-password'
+    )
+  })
+
+  // The most destructive action in the app had a label pointing at an id that
+  // did not exist and an email field with no label at all.
+  test('the delete-account fields are reachable by their labels', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/account/security')
+
+    await page.getByRole('button', { name: 'Delete Account' }).click()
+    const dialog = page.getByRole('dialog')
+
+    await dialog.getByLabel('Reason for deletion').fill('Testing labels')
+    await dialog
+      .getByLabel('Type your email address to confirm')
+      .fill('test@example.com')
+
+    await expect(dialog.getByLabel('Reason for deletion')).toHaveValue(
+      'Testing labels'
+    )
+  })
+
+  test('security deep link survives refresh and separates the danger zone', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/account/security')
+
+    const nav = page.getByRole('navigation', { name: 'Section navigation' })
+    await expect(nav.getByRole('link', { name: 'Security' })).toHaveAttribute(
+      'aria-current',
+      'page'
+    )
+    await expect(page.getByText('Password', { exact: true })).toBeVisible()
+    await expect(page.getByText('Danger zone')).toBeVisible()
+    await expect(
+      page.getByRole('heading', { name: 'Delete Account' })
+    ).toBeVisible()
+  })
+
+  test('legacy routes redirect into the merged settings', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+
+    await page.goto('/dashboard/account/change-password')
+    await expect(page).toHaveURL(/\/dashboard\/account\/security/)
+
+    await page.goto('/dashboard/account/edit-profile')
+    await expect(page).toHaveURL(/\/dashboard\/account\/profile/)
+  })
+})
diff --git a/web/e2e/api-guide.spec.ts b/web/e2e/api-guide.spec.ts
new file mode 100644
index 00000000..e0107f64
--- /dev/null
+++ b/web/e2e/api-guide.spec.ts
@@ -0,0 +1,86 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+import { mockDevices } from '../test/fixtures'
+
+test.describe('api guide (mocked API, no real backend)', () => {
+  test('shows content immediately, not a collapsed accordion', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/api-guide')
+
+    // The old guide rendered a collapsed panel that defaulted to closed, so
+    // this dedicated page looked empty until you found the chevron.
+    await expect(
+      page.getByRole('heading', { name: 'Send an SMS' })
+    ).toBeVisible()
+    await expect(
+      page.getByRole('heading', { name: 'Send messages in bulk' })
+    ).toBeVisible()
+    await expect(
+      page.getByRole('heading', { name: 'Read received messages' })
+    ).toBeVisible()
+  })
+
+  test('samples use the real device id so they are runnable', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/api-guide')
+
+    // Fixtures: first device id. The old guide always printed YOUR_DEVICE_ID.
+    const deviceId = mockDevices[0]._id
+    await expect(page.getByText(deviceId, { exact: false }).first()).toBeVisible()
+    await expect(page.getByText('YOUR_DEVICE_ID')).toHaveCount(0)
+  })
+
+  test('switching language swaps every sample', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/api-guide')
+
+    // cURL is the default.
+    await expect(page.getByText('curl -X POST').first()).toBeVisible()
+
+    await page.getByRole('tab', { name: 'Python' }).click()
+    await expect(page.getByText('import os, requests').first()).toBeVisible()
+    await expect(page.getByText('curl -X POST')).toHaveCount(0)
+
+    await page.getByRole('tab', { name: 'Go' }).click()
+    await expect(page.getByText('package main').first()).toBeVisible()
+  })
+
+  test('code can be copied', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await context.grantPermissions(['clipboard-read', 'clipboard-write'])
+    await page.goto('/dashboard/messaging/api-guide')
+
+    await page.getByRole('button', { name: 'Copy code' }).first().click()
+
+    const clipboard = await page.evaluate(() =>
+      navigator.clipboard.readText()
+    )
+    expect(clipboard).toContain('api.textbee.dev')
+  })
+
+  test('does not scroll sideways at 375px', async ({ page, context }) => {
+    await page.setViewportSize({ width: 375, height: 800 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/api-guide')
+    await page.waitForLoadState('networkidle')
+
+    // Code blocks are the classic way to widen a mobile page.
+    const { scrollWidth, innerWidth } = await page.evaluate(() => ({
+      scrollWidth: document.documentElement.scrollWidth,
+      innerWidth: window.innerWidth,
+    }))
+    expect(scrollWidth).toBeLessThanOrEqual(innerWidth)
+  })
+})
diff --git a/web/e2e/bulk-send.spec.ts b/web/e2e/bulk-send.spec.ts
new file mode 100644
index 00000000..57e8072b
--- /dev/null
+++ b/web/e2e/bulk-send.spec.ts
@@ -0,0 +1,203 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+
+// The defect this guards: the previous implementation mapped every parsed row
+// into the payload, so blank cells produced messages addressed to "" and the
+// same number appearing twice was texted twice.
+
+const CSV_WITH_PROBLEM_ROWS = [
+  'name,phone,order_id,total',
+  'Alice Johnson,+14155550101,ORD-1042,49.99',
+  'No Number,,ORD-1043,10.00',
+  'Bob Martinez,+16475550187,ORD-1044,128.50',
+  'Junk Row,call me later,ORD-1045,5.00',
+  'Alice Again,+1 (415) 555-0101,ORD-1046,20.00',
+].join('\n')
+
+async function uploadCsv(page: import('@playwright/test').Page, csv: string) {
+  await page.locator('input[type="file"]').setInputFiles({
+    name: 'recipients.csv',
+    mimeType: 'text/csv',
+    buffer: Buffer.from(csv),
+  })
+}
+
+// Keyboard selection rather than clicking the option: the Radix popper can
+// render outside the viewport on a short page, which made the click flaky.
+async function selectDevice(page: import('@playwright/test').Page) {
+  // Fixtures: Google Pixel 8 is the enabled device.
+  await page.getByLabel('Send from').press('Enter')
+  await page.getByRole('option', { name: /Google Pixel 8/ }).press('Enter')
+  await expect(page.getByLabel('Send from')).toContainText('Google Pixel 8')
+}
+
+test.describe('bulk send (mocked API, no real backend)', () => {
+  test('sends only valid, deduplicated recipients', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+
+    // Capture what the app actually posts to the gateway.
+    let payload: any = null
+    await page.route('**/api/v1/gateway/devices/*/send-bulk-sms', (route) => {
+      payload = route.request().postDataJSON()
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ data: { success: true } }),
+      })
+    })
+
+    await page.goto('/dashboard/messaging/bulk')
+
+    await uploadCsv(page, CSV_WITH_PROBLEM_ROWS)
+
+    // Parse summary and auto-detected phone column.
+    await expect(page.getByText('5 rows, 4 columns')).toBeVisible()
+    await expect(page.getByText('2 will receive a message')).toBeVisible()
+    await expect(page.getByText('1 with no number')).toBeVisible()
+    await expect(page.getByText('1 invalid')).toBeVisible()
+    await expect(page.getByText('1 duplicate')).toBeVisible()
+
+    await selectDevice(page)
+
+    await page
+      .getByLabel('Message template')
+      .fill('Hi {{ name }}, order {{ order_id }} confirmed.')
+
+    await page.getByRole('button', { name: /send 2 messages/i }).click()
+
+    await expect(page.getByText('2 messages queued')).toBeVisible()
+
+    // The payload is the real assertion.
+    expect(payload).not.toBeNull()
+    expect(payload.messages).toHaveLength(2)
+
+    const recipients = payload.messages.flatMap((m: any) => m.recipients)
+    expect(recipients).toEqual(['+14155550101', '+16475550187'])
+    // No empty recipient may ever be sent.
+    expect(recipients.some((r: string) => !r || !r.trim())).toBe(false)
+
+    // Template interpolation actually happened per row.
+    expect(payload.messages[0].message).toBe(
+      'Hi Alice Johnson, order ORD-1042 confirmed.'
+    )
+  })
+
+  test('offers a downloadable sample CSV', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/bulk')
+
+    const link = page.getByRole('link', { name: /download a sample csv/i })
+    await expect(link).toBeVisible()
+    await expect(link).toHaveAttribute('download', '')
+
+    // The file must actually be served, not just linked.
+    const response = await page.request.get('/samples/bulk-sms-sample.csv')
+    expect(response.status()).toBe(200)
+    const body = await response.text()
+    expect(body).toContain('name,phone,order_id,total')
+    expect(body).toContain('+14155550101')
+  })
+
+  test('states the file size limit in human terms', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/bulk')
+
+    // The old copy printed the raw byte count ("max 1048576 bytes").
+    await expect(page.getByText('1048576')).toHaveCount(0)
+    await expect(page.getByText(/Up to 1 MB/)).toBeVisible()
+  })
+
+  test('the parsed-CSV table does not widen the page at 375px', async ({
+    page,
+    context,
+  }) => {
+    await page.setViewportSize({ width: 375, height: 800 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/bulk')
+
+    // A wide table is the obvious way to reintroduce the sideways-scroll bug,
+    // and it only exists once a file has been parsed.
+    await uploadCsv(page, CSV_WITH_PROBLEM_ROWS)
+    await expect(page.getByText('5 rows, 4 columns')).toBeVisible()
+
+    const { scrollWidth, innerWidth } = await page.evaluate(() => ({
+      scrollWidth: document.documentElement.scrollWidth,
+      innerWidth: window.innerWidth,
+    }))
+    expect(scrollWidth).toBeLessThanOrEqual(innerWidth)
+  })
+
+  test('warns when the template references a missing column', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/bulk')
+
+    await uploadCsv(page, CSV_WITH_PROBLEM_ROWS)
+    await selectDevice(page)
+
+    await page.getByLabel('Message template').fill('Hi {{ nickname }}')
+
+    await expect(page.getByText(/Unknown column reference/)).toBeVisible()
+    await expect(page.getByText(/no column named "nickname"/)).toBeVisible()
+  })
+
+  // The columns used to be read off the first parsed row rather than the
+  // header. papaparse only assigns keys for values actually present, so a
+  // short first row made every column after it vanish: the phone column could
+  // not be selected and the whole file was unusable.
+  test('keeps every column when the first data row is short', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/bulk')
+
+    await uploadCsv(
+      page,
+      [
+        'name,phone,order_id',
+        'Missing Everything Else',
+        'Bob Martinez,+16475550187,ORD-1044',
+      ].join('\n')
+    )
+
+    await expect(page.getByText('2 rows, 3 columns')).toBeVisible()
+
+    // The real proof: the phone column was still detected and mapped, which is
+    // impossible if the column list came from that first row.
+    await expect(page.getByLabel('Phone number column')).toContainText('phone')
+    await expect(page.getByText('1 will receive a message')).toBeVisible()
+  })
+
+  test('explains why a non-CSV file was rejected', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/bulk')
+
+    // Rejected drops used to return silently, so nothing happened and nothing
+    // said why.
+    await page.locator('input[type="file"]').setInputFiles({
+      name: 'contacts.xlsx',
+      mimeType:
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      buffer: Buffer.from('not a csv'),
+    })
+
+    await expect(page.getByText(/is not a CSV/)).toBeVisible()
+  })
+})
diff --git a/web/e2e/chrome.spec.ts b/web/e2e/chrome.spec.ts
new file mode 100644
index 00000000..40bea71b
--- /dev/null
+++ b/web/e2e/chrome.spec.ts
@@ -0,0 +1,143 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+
+// Guards for the app chrome: the footer used to be rendered above the
+// dashboard's fixed sidebar, so the sidebar painted over its left edge, and the
+// fixed mobile tab bar covered its bottom edge.
+
+test.describe('app chrome (mocked API, no real backend)', () => {
+  test('desktop: sidebar does not overlap the footer', async ({
+    page,
+    context,
+  }) => {
+    await page.setViewportSize({ width: 1280, height: 900 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    const footer = page.locator('footer')
+    await expect(footer).toBeVisible()
+
+    const sidebar = page.locator('aside')
+    const footerBox = await footer.boundingBox()
+    const sidebarBox = await sidebar.boundingBox()
+
+    expect(footerBox, 'footer must have a layout box').not.toBeNull()
+    expect(sidebarBox, 'sidebar must have a layout box').not.toBeNull()
+
+    // The footer must start where the sidebar ends, not underneath it.
+    expect(
+      footerBox!.x,
+      'footer must start at or after the sidebar right edge'
+    ).toBeGreaterThanOrEqual(sidebarBox!.x + sidebarBox!.width - 1)
+  })
+
+  test('mobile: bottom tab bar does not cover the footer', async ({
+    page,
+    context,
+  }) => {
+    await page.setViewportSize({ width: 375, height: 800 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    // Scroll to the very bottom so the footer is in view.
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight))
+
+    const footer = page.locator('footer')
+    await expect(footer).toBeVisible()
+
+    const footerBox = await footer.boundingBox()
+    const tabBarBox = await page.locator('nav.fixed').first().boundingBox()
+
+    expect(footerBox, 'footer must have a layout box').not.toBeNull()
+    expect(tabBarBox, 'mobile tab bar must have a layout box').not.toBeNull()
+
+    // The footer's last pixel must sit above the tab bar's first pixel.
+    expect(
+      footerBox!.y + footerBox!.height,
+      'footer bottom must clear the fixed tab bar'
+    ).toBeLessThanOrEqual(tabBarBox!.y + 1)
+  })
+
+  test('mobile: footer links stack vertically', async ({ page, context }) => {
+    await page.setViewportSize({ width: 375, height: 800 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    const links = page.locator('footer nav a')
+    const count = await links.count()
+    expect(count).toBeGreaterThan(2)
+
+    // Stacked means every link sits on its own row, so each y is distinct.
+    const ys: number[] = []
+    for (let i = 0; i < count; i += 1) {
+      const box = await links.nth(i).boundingBox()
+      expect(box).not.toBeNull()
+      ys.push(Math.round(box!.y))
+    }
+    expect(new Set(ys).size, 'each footer link should be on its own row').toBe(
+      count
+    )
+  })
+
+  test('desktop: footer links share rows instead of stacking', async ({
+    page,
+    context,
+  }) => {
+    await page.setViewportSize({ width: 1280, height: 900 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+    // Text metrics decide wrapping, so wait for fonts before measuring.
+    await page.evaluate(() => document.fonts.ready)
+
+    const links = page.locator('footer nav a')
+    const count = await links.count()
+
+    const ys: number[] = []
+    for (let i = 0; i < count; i += 1) {
+      const box = await links.nth(i).boundingBox()
+      ys.push(Math.round(box!.y))
+    }
+
+    // The row layout wraps by design, so the guarantee is "not one per row",
+    // not "exactly one row": asserting a single row made this flaky whenever
+    // font metrics pushed a link onto a second line.
+    expect(new Set(ys).size).toBeLessThan(count)
+  })
+
+  test('top bar is reduced to brand and account', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    const header = page.locator('header')
+    await expect(
+      header.getByRole('link', { name: /contribute/i })
+    ).toHaveCount(0)
+    await expect(header.getByRole('button', { name: 'Toggle theme' })).toHaveCount(
+      0
+    )
+  })
+
+  test('theme control lives in the sidebar', async ({ page, context }) => {
+    await page.setViewportSize({ width: 1280, height: 900 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    const themeGroup = page
+      .locator('aside')
+      .getByRole('group', { name: 'Color theme' })
+    await expect(themeGroup).toBeVisible()
+
+    await themeGroup.getByRole('button', { name: 'Dark' }).click()
+    await expect(page.locator('html')).toHaveClass(/dark/)
+
+    await themeGroup.getByRole('button', { name: 'Light' }).click()
+    await expect(page.locator('html')).not.toHaveClass(/dark/)
+  })
+})
diff --git a/web/e2e/dashboard.spec.ts b/web/e2e/dashboard.spec.ts
new file mode 100644
index 00000000..980d1e27
--- /dev/null
+++ b/web/e2e/dashboard.spec.ts
@@ -0,0 +1,176 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+
+test.describe('dashboard (mocked API, no real backend)', () => {
+  test('redirects unauthenticated users to login', async ({ page }) => {
+    await mockApi(page)
+    await page.goto('/dashboard')
+    await expect(page).toHaveURL(/\/login/)
+  })
+
+  test('redirects authenticated users away from login', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/login')
+    await expect(page).toHaveURL(/\/dashboard/)
+  })
+
+  test('renders the dashboard with mocked data for an authenticated user', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+
+    await page.goto('/dashboard')
+
+    await expect(
+      page.getByRole('heading', { name: 'Welcome back, Test', level: 2 })
+    ).toBeVisible()
+    // Quick actions row.
+    await expect(page.getByRole('link', { name: 'Send SMS' })).toBeVisible()
+    // Total SMS sent stat from the mocked gateway stats fixture (12,840).
+    await expect(page.getByText('12,840')).toBeVisible()
+    // Onboarding card shows its progress bar (all 6 steps done in fixtures).
+    await expect(
+      page.getByRole('progressbar', { name: 'Setup progress' })
+    ).toBeVisible()
+    await expect(page.getByText('6 of 6')).toBeVisible()
+    // Webhooks summary row keeps a mobile path to /dashboard/webhooks
+    // (fixtures have 1 active webhook).
+    await expect(
+      page.getByRole('link', { name: /active webhook/ })
+    ).toBeVisible()
+  })
+
+  // "Add device" used to open the API key modal directly from the header,
+  // handing a first-time user a key with no mention of installing the app or
+  // granting SMS permissions. Both entry points now share one flow.
+  for (const entry of [
+    { name: 'header quick action', nth: 0 },
+    { name: 'devices card', nth: 1 },
+  ]) {
+    test(`add device from the ${entry.name} explains the steps first`, async ({
+      page,
+      context,
+    }) => {
+      await authenticate(context)
+      await mockApi(page)
+      await page.goto('/dashboard')
+
+      await page
+        .getByRole('button', { name: 'Add device' })
+        .nth(entry.nth)
+        .click()
+
+      const dialog = page.getByRole('dialog')
+      await expect(
+        dialog.getByRole('heading', { name: 'Add a device' })
+      ).toBeVisible()
+      // The prerequisites a key modal never mentioned.
+      await expect(dialog.getByText(/grant SMS permissions/)).toBeVisible()
+
+      // Key generation is still reachable, just no longer the first thing.
+      await expect(
+        dialog.getByRole('heading', { name: 'Create new API Key' })
+      ).toHaveCount(0)
+      await dialog.getByRole('button', { name: 'Continue' }).click()
+      await expect(
+        page.getByRole('heading', { name: 'Create new API Key' })
+      ).toBeVisible()
+    })
+  }
+
+  test('new API key still goes straight to key generation', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    // That button asks for a key, so device instructions would be noise.
+    await page.getByRole('button', { name: 'New API key' }).click()
+    await expect(
+      page.getByRole('heading', { name: 'Create new API Key' })
+    ).toBeVisible()
+  })
+
+  // These sections used to render a bare "Error: Request failed with status
+  // code 500" with no styling and no way to recover.
+  test('a failed devices request explains itself and offers a retry', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+
+    // Held failing rather than failing once: react-query retries a failed
+    // query several times before surfacing an error, so a single failure would
+    // recover on its own and the error state would never render.
+    let failDevices = true
+    await page.route('**/api/v1/gateway/devices', (route) => {
+      if (route.request().method() !== 'GET' || !failDevices)
+        return route.fallback()
+      return route.fulfill({
+        status: 500,
+        contentType: 'application/json',
+        body: JSON.stringify({ message: 'Devices are temporarily unavailable' }),
+      })
+    })
+
+    await page.goto('/dashboard')
+
+    // Generous: the retries back off before the error is shown.
+    await expect(page.getByText("Couldn't load your devices")).toBeVisible({
+      timeout: 30000,
+    })
+    // The server's message, not the axios transport string.
+    await expect(
+      page.getByText('Devices are temporarily unavailable')
+    ).toBeVisible()
+    await expect(page.getByText(/Request failed with status code/)).toHaveCount(
+      0
+    )
+
+    failDevices = false
+    await page.getByRole('button', { name: 'Try again' }).click()
+    await expect(page.getByText("Couldn't load your devices")).toHaveCount(0)
+  })
+
+  test('leads with real quota usage, not invented trends', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    // Daily and monthly windows straight from the subscription fixture:
+    // 320 of 5,000 today, 18,450 of 100,000 this month.
+    await expect(
+      page.getByRole('progressbar', { name: 'Today usage' })
+    ).toBeVisible()
+    await expect(
+      page.getByRole('progressbar', { name: 'Last 30 days usage' })
+    ).toBeVisible()
+    await expect(page.getByText('/ 5,000')).toBeVisible()
+    await expect(page.getByText('4,680 remaining')).toBeVisible()
+
+    // The quota counts inbound messages too (the backend counts SMS documents
+    // with no type filter), so the label must not claim these are only sends.
+    await expect(
+      page.getByText(/Counts messages sent and received/)
+    ).toBeVisible()
+
+    // The old page decorated every stat with a green trend arrow and captioned
+    // all-time totals "Since last year". Nothing computed either.
+    await expect(page.getByText('Since last year')).toHaveCount(0)
+    await expect(page.getByText('Connected now')).toHaveCount(0)
+  })
+
+})
diff --git a/web/e2e/message-history.spec.ts b/web/e2e/message-history.spec.ts
new file mode 100644
index 00000000..27242745
--- /dev/null
+++ b/web/e2e/message-history.spec.ts
@@ -0,0 +1,271 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+
+test.describe('message history (mocked API, no real backend)', () => {
+  test('groups messages under day headings', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/history')
+
+    // Fixtures: one message 2h old, one 30h old.
+    await expect(page.getByRole('heading', { name: 'Today' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Yesterday' })).toBeVisible()
+    await expect(page.getByText('Hello from textbee')).toBeVisible()
+    await expect(page.getByText('Reply from a customer')).toBeVisible()
+  })
+
+  // Checked at both widths: the mobile break was a header pinned to the same
+  // offset as the search bar, and the desktop one was a header covering rows
+  // and swallowing their clicks.
+  for (const viewport of [
+    { name: 'mobile', width: 390, height: 700 },
+    { name: 'desktop', width: 1280, height: 800 },
+  ]) {
+    test(`day headers never overlap message rows on ${viewport.name}`, async ({
+      page,
+      context,
+    }) => {
+      await page.setViewportSize({
+        width: viewport.width,
+        height: viewport.height,
+      })
+      await authenticate(context)
+      await mockApi(page)
+
+      // Enough messages across several days to force scrolling.
+      const at = (days: number, hours: number) =>
+        new Date(Date.now() - days * 86400000 - hours * 3600000).toISOString()
+      await page.route('**/api/v1/gateway/devices/*/messages*', (route) =>
+        route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            data: Array.from({ length: 12 }).map((_, i) => ({
+              _id: `m${i}`,
+              sender: `+2519403617${40 + i}`,
+              message: 'A message long enough to wrap onto a second line here',
+              status: 'received',
+              type: 'received',
+              receivedAt: at(Math.floor(i / 3), i),
+              createdAt: at(Math.floor(i / 3), i),
+            })),
+            meta: { total: 12, page: 1, limit: 20, totalPages: 1 },
+          }),
+        })
+      )
+
+      await page.goto('/dashboard/messaging/history')
+      await expect(page.getByRole('heading', { name: 'Today' })).toBeVisible()
+      await page.evaluate(() => window.scrollTo(0, 420))
+
+      const headers = await page.locator('h3').all()
+      const rows = await page.getByRole('button', { name: /\+2519/ }).all()
+
+      for (const header of headers) {
+        const hb = await header.boundingBox()
+        if (!hb) continue
+        for (const row of rows) {
+          const rb = await row.boundingBox()
+          if (!rb) continue
+          const overlap =
+            Math.min(hb.y + hb.height, rb.y + rb.height) - Math.max(hb.y, rb.y)
+          expect(
+            overlap,
+            'a day header must not cover a message row'
+          ).toBeLessThanOrEqual(1)
+        }
+      }
+
+      // A covering header also swallowed the row's click, so the row must
+      // still be clickable after scrolling.
+      await page.getByRole('button', { name: /\+2519/ }).first().click()
+      await expect(page.getByRole('dialog')).toBeVisible()
+    })
+  }
+
+  test('search is sent to the server, not applied to the loaded page', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+
+    const requested: string[] = []
+    // fallback(), not continue(): continue() would send the request to the
+    // network instead of chaining to the mockApi handler registered earlier.
+    await page.route('**/api/v1/gateway/devices/*/messages*', (route) => {
+      requested.push(route.request().url())
+      return route.fallback()
+    })
+
+    await page.goto('/dashboard/messaging/history')
+    await expect(page.getByText('Hello from textbee')).toBeVisible()
+
+    await page.getByLabel('Search messages').fill('customer')
+
+    // The whole point of the backend param: a request must carry the term, so
+    // results come from all history rather than the 20 rows already loaded.
+    await expect
+      .poll(() => requested.some((url) => url.includes('search=customer')), {
+        message: 'a request carrying search=customer should be issued',
+      })
+      .toBe(true)
+  })
+
+  test('debounces so typing does not fire a request per keystroke', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+
+    let searchRequests = 0
+    await page.route('**/api/v1/gateway/devices/*/messages*', (route) => {
+      if (route.request().url().includes('search=')) searchRequests += 1
+      return route.fallback()
+    })
+
+    await page.goto('/dashboard/messaging/history')
+    await expect(page.getByText('Hello from textbee')).toBeVisible()
+
+    // Type quickly; a naive implementation would fire one request per letter.
+    await page.getByLabel('Search messages').pressSequentially('customer', {
+      delay: 20,
+    })
+    await page.waitForTimeout(700)
+
+    expect(searchRequests).toBeGreaterThan(0)
+    expect(searchRequests).toBeLessThan(4)
+  })
+
+  test('offers a way out when a search matches nothing', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+
+    await page.route('**/api/v1/gateway/devices/*/messages*', (route) => {
+      if (route.request().url().includes('search=')) {
+        return route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            data: [],
+            meta: { total: 0, page: 1, limit: 20, totalPages: 0 },
+          }),
+        })
+      }
+      return route.fallback()
+    })
+
+    await page.goto('/dashboard/messaging/history')
+    await page.getByLabel('Search messages').fill('zzzznothing')
+
+    await expect(page.getByText(/No messages match/)).toBeVisible()
+    await page.getByRole('button', { name: 'Show all messages' }).click()
+
+    // Clearing restores the unfiltered list.
+    await expect(page.getByText('Hello from textbee')).toBeVisible()
+  })
+
+  test('a row opens the details dialog with the message body', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/history')
+
+    await page.getByRole('button', { name: /Hello from textbee/ }).click()
+
+    const dialog = page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+    await expect(dialog.getByText('Hello from textbee')).toBeVisible()
+    // Exact timestamp is text here, since the list tooltip is hover-only.
+    await expect(dialog.getByText(/\d{4} at \d{1,2}:\d{2}/)).toBeVisible()
+  })
+
+  test('each detail field copies its own value', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await context.grantPermissions(['clipboard-read', 'clipboard-write'])
+
+    await page.route('**/api/v1/gateway/devices/*/messages*', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          data: [
+            {
+              _id: 'copy_1',
+              recipient: '+15557654321',
+              message: 'Copy me exactly',
+              status: 'delivered',
+              type: 'sent',
+              gatewayMessageId: '665f1c2a9b1e4a0012ab34cd',
+              device: { _id: 'device_1', brand: 'Google', model: 'Pixel 8' },
+              requestedAt: new Date().toISOString(),
+              createdAt: new Date().toISOString(),
+            },
+          ],
+          meta: { total: 1, page: 1, limit: 20, totalPages: 1 },
+        }),
+      })
+    )
+
+    await page.goto('/dashboard/messaging/history')
+    await page.getByRole('button', { name: /Copy me exactly/ }).click()
+
+    const dialog = page.getByRole('dialog')
+    const read = () => page.evaluate(() => navigator.clipboard.readText())
+
+    // One button per field, each named for what it copies, replacing a single
+    // footer "Copy text" whose target had to be inferred.
+    await dialog.getByRole('button', { name: 'Copy number' }).click()
+    expect(await read()).toBe('+15557654321')
+
+    await dialog.getByRole('button', { name: 'Copy message' }).click()
+    expect(await read()).toBe('Copy me exactly')
+
+    await dialog.getByRole('button', { name: 'Copy gateway ID' }).click()
+    expect(await read()).toBe('665f1c2a9b1e4a0012ab34cd')
+  })
+
+  test('replying from a received message keeps a device selected', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging/history')
+
+    await page.getByRole('button', { name: /Reply from a customer/ }).click()
+    await page.getByRole('button', { name: 'Reply' }).click()
+
+    // Without a device the composer cannot send, so this must never be empty.
+    await expect(page.getByLabel('Send from')).toContainText('Pixel 8')
+    await expect(page.getByLabel('To', { exact: true })).toHaveValue(
+      '+15551234567'
+    )
+  })
+
+  test('filters by direction', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+
+    const requested: string[] = []
+    await page.route('**/api/v1/gateway/devices/*/messages*', (route) => {
+      requested.push(route.request().url())
+      return route.fallback()
+    })
+
+    await page.goto('/dashboard/messaging/history')
+    await page.getByRole('tab', { name: 'Received' }).click()
+
+    await expect
+      .poll(() => requested.some((url) => url.includes('type=received')))
+      .toBe(true)
+  })
+})
diff --git a/web/e2e/messaging.spec.ts b/web/e2e/messaging.spec.ts
new file mode 100644
index 00000000..b2b79fde
--- /dev/null
+++ b/web/e2e/messaging.spec.ts
@@ -0,0 +1,124 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+
+test.describe('messaging (mocked API, no real backend)', () => {
+  test('renders the send view with route tabs', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging')
+
+    await expect(
+      page.getByRole('heading', { name: 'Messaging', level: 2 })
+    ).toBeVisible()
+    // Route tabs are links now.
+    const nav = page.getByRole('navigation', { name: 'Section navigation' })
+    await expect(nav.getByRole('link', { name: 'Send', exact: true })).toBeVisible()
+    await expect(nav.getByRole('link', { name: 'History' })).toBeVisible()
+    // Send is the active tab on the index route.
+    await expect(
+      nav.getByRole('link', { name: 'Send', exact: true })
+    ).toHaveAttribute('aria-current', 'page')
+  })
+
+  test('history tab navigates to its own URL and renders mocked messages', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging')
+
+    await page
+      .getByRole('navigation', { name: 'Section navigation' })
+      .getByRole('link', { name: 'History' })
+      .click()
+
+    await expect(page).toHaveURL(/\/dashboard\/messaging\/history/)
+    await expect(page.getByText('Hello from textbee')).toBeVisible()
+  })
+
+  test('history deep link survives refresh (route-based tabs)', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+
+    // Load the subroute directly: this is the refresh-survival guarantee.
+    await page.goto('/dashboard/messaging/history')
+
+    const nav = page.getByRole('navigation', { name: 'Section navigation' })
+    await expect(nav.getByRole('link', { name: 'History' })).toHaveAttribute(
+      'aria-current',
+      'page'
+    )
+    await expect(page.getByText('Hello from textbee')).toBeVisible()
+    // Never fell through to an error boundary.
+    await expect(page.getByText('This page couldn')).toHaveCount(0)
+  })
+
+  test('every tab renders in the same content column', async ({
+    page,
+    context,
+  }) => {
+    await page.setViewportSize({ width: 1440, height: 900 })
+    await authenticate(context)
+    await mockApi(page)
+
+    // Each subroute used to set its own width (Send xl, Bulk 3xl, API 4xl,
+    // History none), so the layout jumped on every tab change.
+    const columns: Record<string, number> = {}
+    let available = 0
+    for (const path of [
+      '/dashboard/messaging',
+      '/dashboard/messaging/bulk',
+      '/dashboard/messaging/history',
+      '/dashboard/messaging/api-guide',
+    ]) {
+      await page.goto(path)
+      await expect(
+        page.getByRole('navigation', { name: 'Section navigation' })
+      ).toBeVisible()
+
+      // Measure the view rendered beneath the tabs, not the layout column.
+      // The column is identical on every tab by construction, so measuring it
+      // cannot detect a page that re-constrains its own content.
+      const measured = await page.evaluate(() => {
+        const nav = document.querySelector(
+          'nav[aria-label="Section navigation"]'
+        )
+        const content = nav!.nextElementSibling as HTMLElement
+        const parent = nav!.parentElement!.parentElement!
+        const style = getComputedStyle(parent)
+        return {
+          content: Math.round(content.getBoundingClientRect().width),
+          // Content width, with the parent's padding subtracted. Using the
+          // border box would include that padding, so an unconstrained
+          // full-width column would still measure as narrower than its parent.
+          available: Math.round(
+            parent.clientWidth -
+              parseFloat(style.paddingLeft) -
+              parseFloat(style.paddingRight)
+          ),
+        }
+      })
+      columns[path] = measured.content
+      available = measured.available
+    }
+
+    const widths = Object.values(columns)
+    expect(
+      new Set(widths).size,
+      `tabs should share one column width, got ${JSON.stringify(columns)}`
+    ).toBe(1)
+
+    // Compared against the space actually available, not the viewport:
+    // dropping the constraint makes every tab equally full-bleed, which would
+    // otherwise satisfy the equality check above.
+    expect(
+      widths[0],
+      'the column should be constrained, not stretched to fill'
+    ).toBeLessThan(available)
+  })
+})
diff --git a/web/e2e/mobile-overflow.spec.ts b/web/e2e/mobile-overflow.spec.ts
new file mode 100644
index 00000000..88b167ab
--- /dev/null
+++ b/web/e2e/mobile-overflow.spec.ts
@@ -0,0 +1,76 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+
+// Regression guard for mobile horizontal overflow: at 375px no page may be
+// wider than the viewport (the bug showed a blank strip when scrolling right).
+// document.scrollingElement covers the page; body scrollWidth catches clipped
+// overflow introduced inside the layout.
+
+const AUTHED_PAGES = [
+  '/dashboard',
+  '/dashboard/messaging',
+  '/dashboard/messaging/bulk',
+  '/dashboard/messaging/history',
+  '/dashboard/messaging/api-guide',
+  '/dashboard/webhooks',
+  '/dashboard/webhooks/deliveries',
+  '/dashboard/account',
+  '/dashboard/account/profile',
+  '/dashboard/account/security',
+  '/dashboard/account/support',
+  // Community was the only section missing from this list, and also the only
+  // one that never got the mobile padding pass. Those two facts are related.
+  '/dashboard/community',
+]
+
+async function expectNoHorizontalScroll(page: import('@playwright/test').Page) {
+  const { scrollWidth, innerWidth } = await page.evaluate(() => ({
+    scrollWidth: document.documentElement.scrollWidth,
+    innerWidth: window.innerWidth,
+  }))
+  expect(scrollWidth, 'page must not scroll sideways at 375px').toBeLessThanOrEqual(
+    innerWidth
+  )
+}
+
+test.describe('no horizontal overflow at 375px (mocked API)', () => {
+  test.use({ viewport: { width: 375, height: 800 } })
+
+  for (const path of AUTHED_PAGES) {
+    test(`authed page ${path}`, async ({ page, context }) => {
+      await authenticate(context)
+      await mockApi(page)
+      await page.goto(path)
+      await page.waitForLoadState('networkidle')
+      await expectNoHorizontalScroll(page)
+    })
+  }
+
+  // The tightest grid in the app only exists inside a dialog, so a guard that
+  // never opens one cannot see it.
+  test('community share dialog fits at 375px', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/community')
+
+    await page.getByRole('button', { name: /Share textbee\.dev/ }).click()
+    const dialog = page.getByRole('dialog')
+    await expect(dialog.getByText('Choose your platform')).toBeVisible()
+
+    await expectNoHorizontalScroll(page)
+
+    // The dialog itself must not overflow its own box either.
+    const overflows = await dialog.evaluate(
+      (el) => el.scrollWidth > el.clientWidth + 1
+    )
+    expect(overflows, 'share dialog must not scroll sideways').toBe(false)
+  })
+
+  test('login page', async ({ page }) => {
+    await mockApi(page)
+    await page.goto('/login')
+    await page.waitForLoadState('networkidle')
+    await expectNoHorizontalScroll(page)
+  })
+})
diff --git a/web/e2e/mock-api.ts b/web/e2e/mock-api.ts
new file mode 100644
index 00000000..c4c72b34
--- /dev/null
+++ b/web/e2e/mock-api.ts
@@ -0,0 +1,50 @@
+import type { Page, Route } from '@playwright/test'
+import {
+  mockApiKeys,
+  mockBillingPlans,
+  mockDevices,
+  mockMessages,
+  mockStats,
+  mockSubscription,
+  mockUser,
+  mockWebhookNotifications,
+  mockWebhooks,
+} from '../test/fixtures'
+
+const json = (route: Route, body: unknown, status = 200) =>
+  route.fulfill({
+    status,
+    contentType: 'application/json',
+    body: JSON.stringify(body),
+  })
+
+// Intercept EVERY call to the backend (`/api/v1/**`) and serve fixtures. Because
+// the app is pointed at a backend host that nothing listens on, this guarantees
+// no request ever reaches a real backend during e2e.
+export type MockApiOverrides = {
+  /** Serve a different subscription payload, e.g. the free-user shape. */
+  subscription?: unknown
+}
+
+export async function mockApi(page: Page, overrides: MockApiOverrides = {}) {
+  await page.route('**/api/v1/**', (route) => {
+    const path = new URL(route.request().url()).pathname.replace('/api/v1', '')
+
+    if (path === '/auth/who-am-i') return json(route, { data: mockUser })
+    if (path === '/billing/current-subscription')
+      return json(route, overrides.subscription ?? mockSubscription)
+    if (path === '/billing/plans') return json(route, { data: mockBillingPlans })
+    if (path === '/gateway/devices') return json(route, { data: mockDevices })
+    if (path === '/gateway/stats') return json(route, { data: mockStats })
+    if (path === '/webhooks') return json(route, { data: mockWebhooks })
+    if (path === '/webhooks/notifications')
+      return json(route, mockWebhookNotifications)
+    if (path === '/auth/api-keys') return json(route, { data: mockApiKeys })
+    if (/\/gateway\/devices\/[^/]+\/(messages|get-received-sms)/.test(path))
+      return json(route, mockMessages)
+
+    // Any unmapped backend call still gets a benign mocked response so the test
+    // cannot fall through to a real backend.
+    return json(route, { data: [] })
+  })
+}
diff --git a/web/e2e/search.spec.ts b/web/e2e/search.spec.ts
new file mode 100644
index 00000000..9270e6a8
--- /dev/null
+++ b/web/e2e/search.spec.ts
@@ -0,0 +1,84 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+
+// Search must find pages by the words a user thinks in, not by our nav labels,
+// and it must be reachable on mobile (the trigger used to live only in the
+// desktop-only sidebar).
+
+test.describe('command palette search (mocked API, no real backend)', () => {
+  test('desktop: keyword search reaches a subroute the sidebar does not list', async ({
+    page,
+    context,
+  }) => {
+    await page.setViewportSize({ width: 1280, height: 900 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    await page.getByRole('button', { name: /search/i }).first().click()
+
+    // "csv" appears nowhere in the label "Bulk send"; it matches via keywords.
+    await page.getByPlaceholder(/search pages/i).fill('csv')
+    await page.getByRole('option', { name: /bulk send/i }).click()
+
+    await expect(page).toHaveURL(/\/dashboard\/messaging\/bulk/)
+  })
+
+  test('desktop: business wording finds billing', async ({ page, context }) => {
+    await page.setViewportSize({ width: 1280, height: 900 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    await page.getByRole('button', { name: /search/i }).first().click()
+    await page.getByPlaceholder(/search pages/i).fill('invoice')
+    await page.getByRole('option', { name: /billing/i }).click()
+
+    await expect(page).toHaveURL(/\/dashboard\/account\/billing/)
+  })
+
+  test('mobile: search is reachable and reaches webhooks', async ({
+    page,
+    context,
+  }) => {
+    await page.setViewportSize({ width: 375, height: 800 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    // Webhooks is deliberately absent from the 4-item mobile tab bar, so
+    // search is the mobile path to it.
+    await page.getByRole('button', { name: /search/i }).first().click()
+    await page.getByPlaceholder(/search pages/i).fill('callback')
+    await page.getByRole('option', { name: /^webhooks/i }).first().click()
+
+    await expect(page).toHaveURL(/\/dashboard\/webhooks/)
+  })
+
+  test('keyboard shortcut opens the palette', async ({ page, context }) => {
+    await page.setViewportSize({ width: 1280, height: 900 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    await page.keyboard.press('ControlOrMeta+k')
+    await expect(page.getByPlaceholder(/search pages/i)).toBeVisible()
+  })
+
+  test('theme can be changed from the palette (the mobile path)', async ({
+    page,
+    context,
+  }) => {
+    await page.setViewportSize({ width: 375, height: 800 })
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard')
+
+    await page.getByRole('button', { name: /search/i }).first().click()
+    await page.getByPlaceholder(/search pages/i).fill('dark')
+    await page.getByRole('option', { name: /dark theme/i }).click()
+
+    await expect(page.locator('html')).toHaveClass(/dark/)
+  })
+})
diff --git a/web/e2e/send-sms.spec.ts b/web/e2e/send-sms.spec.ts
new file mode 100644
index 00000000..0ccf406a
--- /dev/null
+++ b/web/e2e/send-sms.spec.ts
@@ -0,0 +1,168 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+
+async function captureSend(page: import('@playwright/test').Page) {
+  const payloads: any[] = []
+  await page.route('**/api/v1/gateway/devices/*/send-sms', (route) => {
+    payloads.push(route.request().postDataJSON())
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ data: { success: true } }),
+    })
+  })
+  return payloads
+}
+
+test.describe('send sms (mocked API, no real backend)', () => {
+  test('commits recipients as chips and posts exactly those numbers', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    const payloads = await captureSend(page)
+
+    await page.goto('/dashboard/messaging')
+
+    const to = page.getByLabel('To', { exact: true })
+    await to.fill('+1 (415) 555-0101')
+    await to.press('Enter')
+    await to.fill('+16475550187')
+    await to.press('Enter')
+
+    // Both are chips now, each removable.
+    await expect(
+      page.getByRole('button', { name: 'Remove +14155550101' })
+    ).toBeVisible()
+    await expect(
+      page.getByRole('button', { name: 'Remove +16475550187' })
+    ).toBeVisible()
+
+    await page.getByLabel('Message').fill('Hello from the send page')
+    await page.getByRole('button', { name: /Send to 2 recipients/ }).click()
+
+    await expect(page.getByText('Message sent')).toBeVisible()
+    expect(payloads).toHaveLength(1)
+    // Formatting is stripped, because the API schema accepts digits with an
+    // optional leading plus.
+    expect(payloads[0].recipients).toEqual(['+14155550101', '+16475550187'])
+    expect(payloads[0].message).toBe('Hello from the send page')
+  })
+
+  test('splits a pasted list into separate chips', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging')
+
+    await page
+      .getByLabel('To', { exact: true })
+      .fill('+14155550101, +16475550187 +12065550142')
+    await page.getByLabel('To', { exact: true }).press('Enter')
+
+    for (const number of ['+14155550101', '+16475550187', '+12065550142']) {
+      await expect(
+        page.getByRole('button', { name: `Remove ${number}` })
+      ).toBeVisible()
+    }
+  })
+
+  test('keeps a spaced number whole instead of shredding it', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging')
+
+    // Spaces are formatting inside one number here, not separators.
+    const to = page.getByLabel('To', { exact: true })
+    await to.fill('+1 415 555 0101')
+    await to.press('Enter')
+
+    await expect(
+      page.getByRole('button', { name: 'Remove +14155550101' })
+    ).toBeVisible()
+    // Exactly one chip, not four fragments.
+    await expect(page.getByRole('button', { name: /^Remove/ })).toHaveCount(1)
+  })
+
+  test('rejects a number that cannot be dialled', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging')
+
+    const to = page.getByLabel('To', { exact: true })
+    await to.fill('not a number')
+    await to.press('Enter')
+
+    await expect(
+      page.getByText(/does not look like a phone number/)
+    ).toBeVisible()
+  })
+
+  test('does not silently drop a number typed but not committed', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    const payloads = await captureSend(page)
+
+    await page.goto('/dashboard/messaging')
+
+    // Type a number then go straight to the message without pressing Enter.
+    await page.getByLabel('To', { exact: true }).fill('+14155550101')
+    await page.getByLabel('Message').fill('Committed on blur')
+    await page.getByRole('button', { name: /Send message/ }).click()
+
+    await expect(page.getByText('Message sent')).toBeVisible()
+    expect(payloads[0].recipients).toEqual(['+14155550101'])
+  })
+
+  test('preselects the only enabled device', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging')
+
+    // Fixtures have one enabled device (Pixel 8) and one disabled. The old
+    // implementation computed this in defaultValues before devices loaded, so
+    // it never preselected anything.
+    await expect(page.getByLabel('Send from')).toContainText('Pixel 8')
+  })
+
+  test('counts SMS segments', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/messaging')
+
+    await page.getByLabel('Message').fill('a'.repeat(161))
+    await expect(page.getByText(/161 characters, 2 segments/)).toBeVisible()
+  })
+
+  test('clears the form after a successful send', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await captureSend(page)
+
+    await page.goto('/dashboard/messaging')
+    const to = page.getByLabel('To', { exact: true })
+    await to.fill('+14155550101')
+    await to.press('Enter')
+    await page.getByLabel('Message').fill('One off')
+    await page.getByRole('button', { name: /Send message/ }).click()
+
+    await expect(page.getByText('Message sent')).toBeVisible()
+    await expect(page.getByLabel('Message')).toHaveValue('')
+    await expect(
+      page.getByRole('button', { name: 'Remove +14155550101' })
+    ).toHaveCount(0)
+    // The device stays selected, since the next message usually goes out the
+    // same way.
+    await expect(page.getByLabel('Send from')).toContainText('Pixel 8')
+  })
+})
diff --git a/web/e2e/session.ts b/web/e2e/session.ts
new file mode 100644
index 00000000..bd7083c7
--- /dev/null
+++ b/web/e2e/session.ts
@@ -0,0 +1,58 @@
+import type { BrowserContext } from '@playwright/test'
+import { encode } from 'next-auth/jwt'
+import { TEST_AUTH_SECRET } from '../playwright.config'
+import { mockUser, TEST_ACCESS_TOKEN } from '../test/fixtures'
+
+// NextAuth v4 default session cookie name over http (non-secure).
+const SESSION_COOKIE = 'next-auth.session-token'
+
+// Two modals can open unprompted over the dashboard: the survey modal (on a
+// Math.random() coin flip) and the update-app prompt (whenever a mocked device
+// reports an old app version). A Radix dialog marks the rest of the page
+// aria-hidden while open, so whenever either fired, every getByRole query on
+// that page found nothing and a random test failed. Seeding their dismissal
+// flags suppresses both deterministically.
+//
+// Tests that want to assert on these modals should clear the flags themselves.
+async function suppressInterruptingModals(context: BrowserContext) {
+  await context.addInitScript(() => {
+    window.localStorage.setItem('survey_modal_has_submitted', 'true')
+    // Snooze far enough out that the prompt stays closed for the run.
+    window.localStorage.setItem(
+      'update_app_prompt_snooze_until',
+      String(Date.now() + 365 * 24 * 60 * 60 * 1000)
+    )
+  })
+}
+
+// Mint a valid NextAuth JWT session cookie so middleware's getToken() accepts
+// the request and the app treats us as authenticated, without ever running the
+// real login flow or contacting a backend.
+export async function authenticate(context: BrowserContext) {
+  await suppressInterruptingModals(context)
+
+  const token = await encode({
+    token: {
+      sub: mockUser.id,
+      id: mockUser.id,
+      name: mockUser.name,
+      email: mockUser.email,
+      phone: mockUser.phone,
+      role: mockUser.role,
+      accessToken: TEST_ACCESS_TOKEN,
+    },
+    secret: TEST_AUTH_SECRET,
+  })
+
+  await context.addCookies([
+    {
+      name: SESSION_COOKIE,
+      value: token,
+      domain: 'localhost',
+      path: '/',
+      httpOnly: true,
+      sameSite: 'Lax',
+      expires: Math.floor(Date.now() / 1000) + 60 * 60,
+    },
+  ])
+}
diff --git a/web/e2e/webhooks.spec.ts b/web/e2e/webhooks.spec.ts
new file mode 100644
index 00000000..ee38a86d
--- /dev/null
+++ b/web/e2e/webhooks.spec.ts
@@ -0,0 +1,90 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+
+test.describe('webhooks (mocked API, no real backend)', () => {
+  test('subscriptions view renders with route tabs and mocked webhook', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/webhooks')
+
+    await expect(
+      page.getByRole('heading', { name: 'Webhooks', level: 2 })
+    ).toBeVisible()
+    const nav = page.getByRole('navigation', { name: 'Section navigation' })
+    await expect(
+      nav.getByRole('link', { name: 'Webhooks', exact: true })
+    ).toHaveAttribute('aria-current', 'page')
+    // Mocked webhook subscription from the fixtures.
+    await expect(
+      page.getByText('https://example.com/webhooks/textbee').first()
+    ).toBeVisible()
+  })
+
+  // The dialog stays mounted for the whole session, so its defaultValues (and
+  // the uuid inside them) were evaluated exactly once. A bare form.reset()
+  // then restored that same secret, and every webhook created in one session
+  // shared it. Compromising one endpoint's secret would expose them all.
+  test('each created webhook gets its own signing secret', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+
+    const secrets: string[] = []
+    await page.route('**/api/v1/webhooks', (route) => {
+      if (route.request().method() !== 'POST') return route.fallback()
+      secrets.push(route.request().postDataJSON()?.signingSecret)
+      return route.fulfill({
+        status: 201,
+        contentType: 'application/json',
+        body: JSON.stringify({ data: { _id: `wh_${secrets.length}` } }),
+      })
+    })
+
+    await page.goto('/dashboard/webhooks')
+
+    for (const url of [
+      'https://example.com/hook-one',
+      'https://example.com/hook-two',
+    ]) {
+      await page.getByRole('button', { name: 'Create Webhook' }).first().click()
+      const dialog = page.getByRole('dialog')
+      await expect(dialog.getByText('Create Webhook')).toBeVisible()
+      await dialog.getByLabel('Delivery URL').fill(url)
+      await dialog.getByRole('button', { name: 'Create' }).click()
+      await expect(dialog).toBeHidden()
+    }
+
+    expect(secrets).toHaveLength(2)
+    expect(secrets[0]).toBeTruthy()
+    expect(secrets[1]).not.toBe(secrets[0])
+  })
+
+  test('deliveries deep link renders filters (refresh survival)', async ({
+    page,
+    context,
+  }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await page.goto('/dashboard/webhooks/deliveries')
+
+    const nav = page.getByRole('navigation', { name: 'Section navigation' })
+    await expect(nav.getByRole('link', { name: 'Deliveries' })).toHaveAttribute(
+      'aria-current',
+      'page'
+    )
+    await expect(
+      page.getByRole('heading', { name: 'Device', exact: true })
+    ).toBeVisible()
+    await expect(
+      page.getByRole('heading', { name: 'Date Range', exact: true })
+    ).toBeVisible()
+    // Never fell through to an error boundary.
+    await expect(page.getByText('This page couldn')).toHaveCount(0)
+  })
+})
diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
new file mode 100644
index 00000000..01ac2b2d
--- /dev/null
+++ b/web/eslint.config.mjs
@@ -0,0 +1,32 @@
+import nextCoreWebVitals from 'eslint-config-next/core-web-vitals'
+
+// Next 16 removed `next lint`; eslint-config-next now ships a native ESLint 9
+// flat config, so we spread it directly (this replaces the old .eslintrc.json).
+const eslintConfig = [
+  ...nextCoreWebVitals,
+  {
+    rules: {
+      'react/no-unescaped-entities': 'off',
+      // Next 16 enables the newer react-hooks (v6) compiler-adjacent rules by
+      // default. They flag working-but-non-optimal patterns across this
+      // pre-existing codebase, so keep them advisory (warn) rather than
+      // blocking; tighten to error as components are refactored.
+      'react-hooks/set-state-in-effect': 'warn',
+      'react-hooks/purity': 'warn',
+      'react-hooks/static-components': 'warn',
+      'react-hooks/refs': 'warn',
+      'react-hooks/immutability': 'warn',
+      'react-hooks/incompatible-library': 'warn',
+    },
+  },
+  {
+    ignores: [
+      '.next/**',
+      'node_modules/**',
+      'test-results/**',
+      'playwright-report/**',
+    ],
+  },
+]
+
+export default eslintConfig
diff --git a/web/lib/api/cache-invalidation.test.tsx b/web/lib/api/cache-invalidation.test.tsx
new file mode 100644
index 00000000..7c5bfe34
--- /dev/null
+++ b/web/lib/api/cache-invalidation.test.tsx
@@ -0,0 +1,113 @@
+import { describe, expect, it, beforeEach } from 'vitest'
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { http, HttpResponse } from 'msw'
+import { QueryClient } from '@tanstack/react-query'
+import { server } from '@/test/msw/server'
+import { TestProviders } from '@/test/render'
+import { API_BASE_URL, mockUser } from '@/test/fixtures'
+import { ApiEndpoints } from '@/config/api'
+import { queryKeys } from './query-keys'
+import VerifyEmailAlert from '@/app/(app)/dashboard/(components)/alerts/verify-email-alert'
+import GenerateApiKey from '@/app/(app)/dashboard/(components)/api-keys/generate-api-key'
+
+const url = (path: string) => `${API_BASE_URL}${path.split('?')[0]}`
+
+/**
+ * These cover cache bugs that are invisible on inspection: the code looks
+ * correct at every individual call site, and only the relationship between
+ * sites is wrong. Both shipped to production.
+ */
+describe('cache invalidation', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    // Not makeTestQueryClient: it sets gcTime 0, which collects any cache
+    // entry the moment it has no observer, so priming a cache to assert it
+    // gets invalidated would never survive to be asserted on.
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    })
+  })
+
+  const renderWith = (ui: React.ReactElement) =>
+    render(<TestProviders queryClient={queryClient}>{ui}</TestProviders>)
+
+  // /auth/who-am-i used to be cached under two keys, ['whoAmI'] and
+  // ['currentUser'], so invalidating one left the other serving stale data.
+  // A user who verified their email still saw the "verify your email" banner,
+  // because the code that refreshed the user used the other key.
+  it('one invalidation refreshes every consumer of the current user', async () => {
+    let verified = false
+    server.use(
+      http.get(url(ApiEndpoints.auth.whoAmI()), () =>
+        HttpResponse.json({
+          data: {
+            ...mockUser,
+            emailVerifiedAt: verified ? new Date().toISOString() : null,
+          },
+        })
+      )
+    )
+
+    const { container } = renderWith(<VerifyEmailAlert />)
+    // Selected by href, not by label: the banner picks its CTA text at random
+    // from five variants, so a text matcher here would be flaky.
+    const banner = () => container.querySelector('a[href="/verify-email"]')
+
+    // Unverified: the banner is up.
+    await waitFor(() => expect(banner()).toBeInTheDocument())
+
+    // The user verifies elsewhere, and something invalidates the user query
+    // using the canonical key.
+    verified = true
+    await queryClient.invalidateQueries({ queryKey: queryKeys.currentUser })
+
+    // The banner must notice. Under the two-key split it never did.
+    await waitFor(() => expect(banner()).toBeNull())
+  })
+
+  // The generate handler invalidated ['apiKeys', 'stats'], a key no query uses.
+  // react-query matches by prefix, so it matched neither the key list
+  // (['apiKeys', 'active']) nor the dashboard stats (['stats']): generating a
+  // key refreshed nothing at all.
+  it('generating an API key refreshes both the key list and the stats', async () => {
+    server.use(
+      http.post(url(ApiEndpoints.auth.generateApiKey()), () =>
+        HttpResponse.json({ data: 'new-api-key' })
+      )
+    )
+
+    // Prime the two caches a new key must invalidate.
+    queryClient.setQueryData(queryKeys.apiKeys('active'), { data: [] })
+    queryClient.setQueryData(queryKeys.stats, { totalApiKeyCount: 0 })
+
+    renderWith(<GenerateApiKey />)
+
+    // The trigger and the dialog's confirm button carry the same label, so the
+    // confirm has to be scoped to the dialog.
+    await userEvent.click(
+      screen.getByRole('button', { name: /Generate API Key/i })
+    )
+    const confirmDialog = await screen.findByRole('dialog', {
+      name: /Create new API Key/i,
+    })
+    await userEvent.click(
+      within(confirmDialog).getByRole('button', { name: /Generate API Key/i })
+    )
+
+    await waitFor(() => {
+      expect(
+        queryClient.getQueryState(queryKeys.apiKeys('active'))?.isInvalidated,
+        'the API key list must be invalidated'
+      ).toBe(true)
+      expect(
+        queryClient.getQueryState(queryKeys.stats)?.isInvalidated,
+        'the dashboard stats must be invalidated'
+      ).toBe(true)
+    })
+  })
+})
diff --git a/web/lib/api/hooks.test.tsx b/web/lib/api/hooks.test.tsx
new file mode 100644
index 00000000..d1115d62
--- /dev/null
+++ b/web/lib/api/hooks.test.tsx
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { renderHook, waitFor } from '@testing-library/react'
+import { TestProviders } from '@/test/render'
+import { mockDevices, mockSubscription, mockUser } from '@/test/fixtures'
+import { useCurrentUser, useDevices, useSubscription } from './hooks'
+
+// Verifies the typed hooks talk to the mocked API and unwrap the various
+// response envelopes correctly. No real backend is contacted (MSW).
+const wrapper = TestProviders
+
+describe('data hooks', () => {
+  it('useCurrentUser unwraps res.data.data', async () => {
+    const { result } = renderHook(() => useCurrentUser(), { wrapper })
+    await waitFor(() => expect(result.current.isSuccess).toBe(true))
+    expect(result.current.data?.email).toBe(mockUser.email)
+  })
+
+  it('useSubscription returns the raw body', async () => {
+    const { result } = renderHook(() => useSubscription(), { wrapper })
+    await waitFor(() => expect(result.current.isSuccess).toBe(true))
+    expect(result.current.data?.plan?.name).toBe(mockSubscription.plan.name)
+  })
+
+  it('useDevices unwraps to the device array', async () => {
+    const { result } = renderHook(() => useDevices(), { wrapper })
+    await waitFor(() => expect(result.current.isSuccess).toBe(true))
+    expect(result.current.data).toHaveLength(mockDevices.length)
+    expect(result.current.data?.[0]._id).toBe(mockDevices[0]._id)
+  })
+})
diff --git a/web/lib/api/hooks.ts b/web/lib/api/hooks.ts
new file mode 100644
index 00000000..e015cfa4
--- /dev/null
+++ b/web/lib/api/hooks.ts
@@ -0,0 +1,425 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseMutationOptions,
+  type UseQueryOptions,
+} from '@tanstack/react-query'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { ApiEndpoints } from '@/config/api'
+import { queryKeys } from './query-keys'
+import type {
+  ApiKey,
+  ApiKeyStatusFilter,
+  Device,
+  GatewayStats,
+  Plan,
+  Subscription,
+  User,
+  WebhookNotification,
+  WebhookSubscription,
+} from './types'
+
+// Most endpoints wrap their payload as { data: ... }; a few (subscription)
+// return the object directly. These helpers keep the unwrapping in one place.
+const unwrapData = <T>(res: { data: { data: T } }) => res.data.data
+const unwrapBody = <T>(res: { data: T }) => res.data
+
+type QueryOpts<T> = Omit<UseQueryOptions<T>, 'queryKey' | 'queryFn'>
+
+// List endpoints return { data: T[] }. Legacy (not-yet-migrated) components
+// cache that raw envelope under the same query key, so these hooks must keep
+// the raw shape in the cache and unwrap per-observer via `select` to avoid a
+// cache-shape collision on shared keys like ['devices'] and ['webhooks'].
+type ListEnvelope<T> = { data: T[] }
+type ListQueryOpts<T> = Omit<
+  UseQueryOptions<ListEnvelope<T>, Error, T[]>,
+  'queryKey' | 'queryFn' | 'select'
+>
+const selectList = <T>(raw: ListEnvelope<T> | undefined): T[] => raw?.data ?? []
+
+type MutationOpts<TData, TVars> = Omit<
+  UseMutationOptions<TData, Error, TVars>,
+  'mutationFn'
+>
+
+// ---------- account ----------
+
+export function useCurrentUser(options?: QueryOpts<User>) {
+  return useQuery({
+    queryKey: queryKeys.currentUser,
+    queryFn: () =>
+      httpBrowserClient.get(ApiEndpoints.auth.whoAmI()).then(unwrapData<User>),
+    ...options,
+  })
+}
+
+// ---------- billing ----------
+
+export function useSubscription(options?: QueryOpts<Subscription>) {
+  return useQuery({
+    queryKey: queryKeys.subscription,
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.billing.currentSubscription())
+        .then(unwrapBody<Subscription>),
+    ...options,
+  })
+}
+
+export function useBillingPlans(options?: ListQueryOpts<Plan>) {
+  return useQuery({
+    queryKey: queryKeys.billingPlans,
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.billing.plans())
+        .then((r) => r.data as ListEnvelope<Plan>),
+    select: selectList<Plan>,
+    ...options,
+  })
+}
+
+// ---------- gateway ----------
+
+export function useGatewayStats(options?: QueryOpts<GatewayStats>) {
+  return useQuery({
+    queryKey: queryKeys.stats,
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.gateway.getStats())
+        .then(unwrapData<GatewayStats>),
+    ...options,
+  })
+}
+
+export function useDevices(options?: ListQueryOpts<Device>) {
+  return useQuery({
+    queryKey: queryKeys.devices,
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.gateway.listDevices())
+        .then((r) => r.data as ListEnvelope<Device>),
+    select: selectList<Device>,
+    ...options,
+  })
+}
+
+export function useDeleteDevice() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) =>
+      httpBrowserClient.delete(ApiEndpoints.gateway.deleteDevice(id)),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.devices })
+    },
+  })
+}
+
+// ---------- api keys ----------
+
+export function useApiKeys(
+  status: ApiKeyStatusFilter = 'active',
+  options?: ListQueryOpts<ApiKey>
+) {
+  return useQuery({
+    queryKey: queryKeys.apiKeys(status),
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.auth.listApiKeys(status))
+        .then((r) => r.data as ListEnvelope<ApiKey>),
+    select: selectList<ApiKey>,
+    ...options,
+  })
+}
+
+export function useRevokeApiKey() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) =>
+      httpBrowserClient.post(ApiEndpoints.auth.revokeApiKey(id)),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.apiKeysAll })
+    },
+  })
+}
+
+export function useDeleteApiKey() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) =>
+      httpBrowserClient.delete(ApiEndpoints.auth.deleteApiKey(id)),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.apiKeysAll })
+    },
+  })
+}
+
+export function useRenameApiKey() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, name }: { id: string; name: string }) =>
+      httpBrowserClient.patch(ApiEndpoints.auth.renameApiKey(id), { name }),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.apiKeysAll })
+    },
+  })
+}
+
+// A new key changes the list, the dashboard counts and the device pairing
+// state, so all three refresh together.
+export function useGenerateApiKey() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: () =>
+      httpBrowserClient
+        .post(ApiEndpoints.auth.generateApiKey())
+        .then((res) => res.data as { data: string }),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.apiKeysAll })
+      void queryClient.invalidateQueries({ queryKey: queryKeys.stats })
+      void queryClient.invalidateQueries({ queryKey: queryKeys.devices })
+    },
+  })
+}
+
+// ---------- account ----------
+
+export type UpdateProfilePayload = { name?: string; phone?: string }
+
+export function useUpdateProfile(
+  options?: MutationOpts<unknown, UpdateProfilePayload>
+) {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (data: UpdateProfilePayload) =>
+      httpBrowserClient.patch(ApiEndpoints.auth.updateProfile(), data),
+    ...options,
+    // Composed, not overridden: a caller passing onSuccess must not silently
+    // drop the invalidation this hook exists to guarantee.
+    onSuccess: (...args) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.currentUser })
+      options?.onSuccess?.(...args)
+    },
+  })
+}
+
+export type ChangePasswordPayload = {
+  oldPassword: string
+  newPassword: string
+  confirmPassword?: string
+}
+
+export function useChangePassword(
+  options?: MutationOpts<unknown, ChangePasswordPayload>
+) {
+  return useMutation({
+    mutationFn: (data: ChangePasswordPayload) =>
+      httpBrowserClient.post(ApiEndpoints.auth.changePassword(), data),
+    ...options,
+  })
+}
+
+export function useSendEmailVerification() {
+  return useMutation({
+    mutationFn: () =>
+      httpBrowserClient.post(ApiEndpoints.auth.sendEmailVerificationEmail()),
+  })
+}
+
+export function useVerifyEmail() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (payload: { userId: string; verificationCode: string }) =>
+      httpBrowserClient.post(ApiEndpoints.auth.verifyEmail(), payload),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.currentUser })
+    },
+  })
+}
+
+export type UpdateOnboardingPayload = {
+  skipStepId?: string
+  complete?: boolean
+  currentStepId?: string
+}
+
+export function useUpdateOnboarding() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (body: UpdateOnboardingPayload) =>
+      httpBrowserClient
+        .patch(ApiEndpoints.auth.updateOnboarding(), body)
+        .then((r) => r.data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.currentUser })
+      void queryClient.invalidateQueries({ queryKey: queryKeys.stats })
+      void queryClient.invalidateQueries({ queryKey: queryKeys.subscription })
+    },
+  })
+}
+
+// ---------- webhooks ----------
+
+export function useWebhooks(options?: ListQueryOpts<WebhookSubscription>) {
+  return useQuery({
+    queryKey: queryKeys.webhooks,
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.gateway.getWebhooks())
+        .then((r) => r.data as ListEnvelope<WebhookSubscription>),
+    select: selectList<WebhookSubscription>,
+    ...options,
+  })
+}
+
+export type WebhookInput = {
+  name?: string
+  deliveryUrl: string
+  events: string[]
+  isActive: boolean
+  signingSecret: string
+}
+
+// All four webhook mutations invalidate the same list, so the key lives here
+// once rather than being retyped in each dialog.
+const invalidateWebhooks = (queryClient: ReturnType<typeof useQueryClient>) =>
+  void queryClient.invalidateQueries({ queryKey: queryKeys.webhooks })
+
+export function useCreateWebhook() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (values: WebhookInput) =>
+      httpBrowserClient.post(ApiEndpoints.gateway.createWebhook(), values),
+    onSuccess: () => invalidateWebhooks(queryClient),
+  })
+}
+
+export function useUpdateWebhook(id: string) {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (values: Partial<WebhookInput>) =>
+      httpBrowserClient.patch(ApiEndpoints.gateway.updateWebhook(id), values),
+    onSuccess: () => invalidateWebhooks(queryClient),
+  })
+}
+
+export function useDeleteWebhook(id: string) {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: () =>
+      httpBrowserClient.delete(ApiEndpoints.gateway.deleteWebhook(id)),
+    onSuccess: () => invalidateWebhooks(queryClient),
+  })
+}
+
+export type WebhookNotificationFilters = {
+  eventType?: string
+  status?: string
+  deviceId?: string
+  webhookSubscriptionId?: string
+  start?: string
+  end?: string
+  page?: number
+  limit?: number
+}
+
+// Raw body: { data: { data: rows[], meta: { totalPages, ... } } }
+export type WebhookNotificationsEnvelope = {
+  data?: {
+    data?: WebhookNotification[]
+    meta?: { totalPages?: number; total?: number }
+  }
+}
+
+export function useWebhookNotifications(filters: WebhookNotificationFilters) {
+  const {
+    eventType = '',
+    status = '',
+    deviceId = '',
+    webhookSubscriptionId = '',
+    start = '',
+    end = '',
+    page = 1,
+    limit = 10,
+  } = filters
+  return useQuery({
+    queryKey: [
+      'webhook-notification',
+      eventType,
+      page,
+      limit,
+      deviceId,
+      webhookSubscriptionId,
+      status,
+    ],
+    queryFn: () =>
+      httpBrowserClient
+        .get(
+          `${ApiEndpoints.gateway.getWebhookNotifications()}?eventType=${eventType}&page=${page}&limit=${limit}&status=${status}&start=${start}&end=${end}&deviceId=${deviceId}&webhookSubscriptionId=${webhookSubscriptionId}`
+        )
+        .then(unwrapBody<WebhookNotificationsEnvelope>),
+  })
+}
+
+// ---------- messaging ----------
+
+// Matches the zod-inferred SendSmsFormData shape; validation happens via the
+// schema before the payload reaches here.
+export type SendSmsPayload = {
+  // Required: it goes into the request path, so an absent one would POST to
+  // /gateway/devices/undefined/send-sms. Both callers validate it first.
+  deviceId: string
+  recipients?: string[]
+  message?: string
+  simSubscriptionId?: number
+}
+
+export function useSendSms() {
+  return useMutation({
+    mutationKey: ['send-sms'],
+    mutationFn: (data: SendSmsPayload) =>
+      httpBrowserClient.post(ApiEndpoints.gateway.sendSMS(data.deviceId), data),
+  })
+}
+
+export type DeviceMessagesParams = {
+  type?: string
+  page?: number
+  limit?: number
+  search?: string
+}
+
+export type DeviceMessagesEnvelope = {
+  data: unknown[]
+  meta?: { page?: number; limit?: number; total?: number; totalPages?: number }
+}
+
+// Returns the raw { data, meta } message-history envelope for a device.
+// `search` is handled server-side (gateway getMessages matches it against the
+// message body, recipient and sender), so it searches all of a device's
+// history rather than only the page already loaded.
+export function useDeviceMessages(
+  deviceId: string,
+  params: DeviceMessagesParams = {},
+  options?: QueryOpts<DeviceMessagesEnvelope>
+) {
+  const { type = 'all', page = 1, limit = 20, search = '' } = params
+  return useQuery({
+    // search joins the key so each term caches separately.
+    queryKey: queryKeys.deviceMessages(deviceId, { type, page, limit, search }),
+    enabled: !!deviceId,
+    queryFn: () => {
+      const query = new URLSearchParams({
+        type,
+        page: String(page),
+        limit: String(limit),
+      })
+      if (search) query.set('search', search)
+
+      return httpBrowserClient
+        .get(`${ApiEndpoints.gateway.getMessages(deviceId)}?${query}`)
+        .then(unwrapBody<DeviceMessagesEnvelope>)
+    },
+    ...options,
+  })
+}
diff --git a/web/lib/api/index.ts b/web/lib/api/index.ts
new file mode 100644
index 00000000..ec5c605c
--- /dev/null
+++ b/web/lib/api/index.ts
@@ -0,0 +1,3 @@
+export * from './types'
+export * from './query-keys'
+export * from './hooks'
diff --git a/web/lib/api/query-keys.ts b/web/lib/api/query-keys.ts
new file mode 100644
index 00000000..06ef38be
--- /dev/null
+++ b/web/lib/api/query-keys.ts
@@ -0,0 +1,25 @@
+import type { ApiKeyStatusFilter } from './types'
+
+// Single source of truth for react-query cache keys. Values intentionally match
+// the ad-hoc string keys used across the app before this refactor (e.g.
+// ['devices'], ['currentSubscription'], ['apiKeys', 'active']) so migrated and
+// not-yet-migrated components still share the same cache entries.
+export const queryKeys = {
+  currentUser: ['currentUser'] as const,
+  subscription: ['currentSubscription'] as const,
+  stats: ['stats'] as const,
+  devices: ['devices'] as const,
+  webhooks: ['webhooks'] as const,
+  billingPlans: ['billingPlans'] as const,
+  apiKeys: (status: ApiKeyStatusFilter = 'active') =>
+    ['apiKeys', status] as const,
+  // Prefix covering every apiKeys list regardless of status filter. Use this
+  // to invalidate: a new or revoked key changes the active, revoked and all
+  // lists at once, and invalidating only apiKeys('active') leaves the other
+  // two serving stale data.
+  apiKeysAll: ['apiKeys'] as const,
+  deviceMessages: (deviceId: string, filters?: Record<string, unknown>) =>
+    filters
+      ? (['messages', deviceId, filters] as const)
+      : (['messages', deviceId] as const),
+}
diff --git a/web/lib/api/types.ts b/web/lib/api/types.ts
new file mode 100644
index 00000000..8b05408b
--- /dev/null
+++ b/web/lib/api/types.ts
@@ -0,0 +1,139 @@
+// Shared response types for the backend API. Kept permissive (most fields
+// optional) to match the loosely-typed backend payloads and the project's
+// non-strict TS config, while still giving components real autocomplete.
+
+export interface User {
+  _id?: string
+  id?: string
+  name?: string
+  email?: string
+  phone?: string
+  role?: string
+  avatar?: string | null
+  emailVerifiedAt?: string | null
+  onboardingCompletedAt?: string | null
+  // Set when the user asks for deletion, which starts a 7-day window. Real
+  // field on the user schema, and read by the account-deletion banner, but it
+  // was missing from this type.
+  accountDeletionRequestedAt?: string | null
+  createdAt?: string
+  // Drives the onboarding checklist. Structurally compatible with the
+  // UserShape that get-started/steps.ts takes, so useCurrentUser can feed it.
+  onboarding?: {
+    completedAt?: string | null
+    currentStepId?: string
+    skippedStepIds?: string[]
+  }
+}
+
+export interface GatewayStats {
+  totalSentSMSCount?: number
+  totalReceivedSMSCount?: number
+  totalDeviceCount?: number
+  totalApiKeyCount?: number
+}
+
+export interface Device {
+  _id: string
+  brand?: string
+  model?: string
+  enabled?: boolean
+  // No `status` field: the Device schema has none and the API never sends one,
+  // so `device.status === 'online'` was always false and every device rendered
+  // with the muted "inactive" badge even while enabled and working.
+  //
+  // The device does report real telemetry through its heartbeat (battery,
+  // network type, last heartbeat, SIM details) which the API stores and
+  // returns. It is deliberately not modelled here yet: surfacing it is a
+  // feature, not a fix, and belongs in its own change.
+  appVersionCode?: number
+  createdAt?: string
+}
+
+export interface ApiKey {
+  _id: string
+  apiKey: string
+  name?: string
+  status?: 'active' | 'revoked'
+  lastUsedAt?: string | null
+  createdAt?: string
+  revokedAt?: string
+  usageCount?: number
+}
+
+export interface Plan {
+  name?: string
+  dailyLimit?: number
+  monthlyLimit?: number
+  bulkSendLimit?: number
+  deviceLimit?: number
+  // Prices are in cents and live on the plan as monthlyPrice/yearlyPrice.
+  // This type previously declared amount/currency/recurringInterval, which the
+  // plans endpoint has never sent: those belong to Subscription, populated
+  // from the payment provider. Anything reading plan.amount silently saw
+  // undefined and rendered a paid plan as free.
+  monthlyPrice?: number
+  yearlyPrice?: number
+  isActive?: boolean
+}
+
+export interface SubscriptionUsage {
+  dailyLimit?: number
+  monthlyLimit?: number
+  bulkSendLimit?: number
+  deviceLimit?: number
+  processedSmsToday?: number
+  processedSmsLastMonth?: number
+  dailyRemaining?: number
+  monthlyRemaining?: number
+  dailyUsagePercentage?: number
+  monthlyUsagePercentage?: number
+}
+
+export type SubscriptionStatus = 'active' | 'past_due' | 'canceled' | string
+
+export interface Subscription {
+  plan?: Plan
+  usage?: SubscriptionUsage
+  status?: SubscriptionStatus
+  amount?: number
+  currency?: string
+  recurringInterval?: string
+  subscriptionStartDate?: string
+  currentPeriodEnd?: string
+  customDailyLimit?: number | null
+  customMonthlyLimit?: number | null
+  customBulkSendLimit?: number | null
+  customDeviceLimit?: number | null
+}
+
+export type ApiKeyStatusFilter = 'active' | 'revoked' | 'all'
+
+/**
+ * One webhook delivery attempt, as the notifications endpoint returns it.
+ *
+ * Previously typed as `unknown[]` on the envelope, which meant the deliveries
+ * table received `unknown[]` and its own row type went unchecked.
+ */
+export interface WebhookNotification {
+  _id?: string
+  event?: string
+  webhookEvent?: string
+  deliveryUrl?: string
+  webhookSubscription?: { deliveryUrl: string }
+  createdAt?: string
+  status: string
+  computedStatus?: string
+  deviceData?: { brand?: string; model?: string }
+  smsData?: { _id?: string }
+  payload?: unknown
+}
+
+export interface WebhookSubscription {
+  _id: string
+  name?: string
+  deliveryUrl?: string
+  events?: string[]
+  isActive?: boolean
+  createdAt?: string
+}
diff --git a/web/lib/auth.ts b/web/lib/auth.ts
index d5a3835d..ae2e2740 100644
--- a/web/lib/auth.ts
+++ b/web/lib/auth.ts
@@ -1,6 +1,6 @@
 import CredentialsProvider from 'next-auth/providers/credentials'
 import { httpServerClient } from './httpServerClient'
-import { DefaultSession } from 'next-auth'
+import type { DefaultSession, NextAuthOptions } from 'next-auth'
 import { ApiEndpoints } from '@/config/api'
 import { Routes } from '@/config/routes'
 
@@ -17,13 +17,29 @@ declare module 'next-auth' {
   }
 
   interface User {
+    // The backend returns Mongo documents, so the id arrives as _id and is
+    // copied onto the token below.
+    _id?: string
+    role?: string
     phone?: string
     avatar?: string
     accessToken?: string
   }
 }
 
-export const authOptions = {
+// The jwt/session callbacks read and write these, so the token has to declare
+// them or every callback parameter falls back to an implicit any.
+declare module 'next-auth/jwt' {
+  interface JWT {
+    id?: string
+    role?: string
+    phone?: string
+    avatar?: string
+    accessToken?: string
+  }
+}
+
+export const authOptions: NextAuthOptions = {
   providers: [
     CredentialsProvider({
       id: 'email-password-login',
@@ -34,6 +50,10 @@ export const authOptions = {
         turnstileToken: { label: 'Turnstile Token', type: 'text' },
       },
       async authorize(credentials) {
+        // NextAuth can invoke authorize with no credentials at all. There is
+        // nothing to authenticate in that case, so refuse rather than posting
+        // undefined fields to the login endpoint.
+        if (!credentials) return null
         const { email, password, turnstileToken } = credentials
         try {
           const res = await httpServerClient.post(ApiEndpoints.auth.login(), {
@@ -67,6 +87,7 @@ export const authOptions = {
         turnstileToken: { label: 'Turnstile Token', type: 'text' },
       },
       async authorize(credentials) {
+        if (!credentials) return null
         const { email, password, name, phone, turnstileToken } = credentials
         try {
           const res = await httpServerClient.post(
@@ -100,6 +121,7 @@ export const authOptions = {
         idToken: { label: 'idToken', type: 'text' },
       },
       async authorize(credentials) {
+        if (!credentials) return null
         const { idToken } = credentials
         try {
           const res = await httpServerClient.post(
diff --git a/web/lib/billing.test.ts b/web/lib/billing.test.ts
new file mode 100644
index 00000000..3a7657fe
--- /dev/null
+++ b/web/lib/billing.test.ts
@@ -0,0 +1,122 @@
+import { describe, expect, it } from 'vitest'
+import { billingPriceLabel, deriveBillingState } from './billing'
+
+// The exact shape billing.service.ts synthesises when findOne turns up no
+// subscription: a plan and usage, no status, no amount, no dates.
+const freePayload = {
+  plan: { name: 'free', dailyLimit: 50, monthlyLimit: 300 },
+  isActive: true,
+  usage: { processedSmsToday: 3 },
+}
+
+const proPayload = {
+  plan: { name: 'Pro' },
+  status: 'active',
+  amount: 999,
+  currency: 'usd',
+  recurringInterval: 'month',
+  subscriptionStartDate: '2026-06-01T00:00:00.000Z',
+  currentPeriodEnd: '2026-08-01T00:00:00.000Z',
+}
+
+describe('deriveBillingState', () => {
+  // The defect this helper exists for: a free user was shown "Unknown".
+  it('reads the no-subscription payload as Free, not as unknown', () => {
+    const state = deriveBillingState(freePayload)
+
+    expect(state.isFree).toBe(true)
+    expect(state.status).toBeUndefined()
+    expect(state.planName).toBe('Free')
+  })
+
+  it('treats a missing subscription entirely as Free', () => {
+    expect(deriveBillingState(undefined).isFree).toBe(true)
+    expect(deriveBillingState({}).isFree).toBe(true)
+  })
+
+  // Absence of a status means "no subscription". A status that is absent from
+  // a payload that clearly IS a paid plan is a different thing, and must not
+  // be quietly downgraded to Free.
+  it('does not flatten a paid plan with a missing status into Free', () => {
+    const state = deriveBillingState({ plan: { name: 'Pro' } })
+
+    expect(state.isFree).toBe(false)
+    expect(state.planName).toBe('Pro')
+  })
+
+  it('reads a real subscription without changing its status', () => {
+    const state = deriveBillingState(proPayload)
+
+    expect(state.isFree).toBe(false)
+    expect(state.status).toBe('active')
+    expect(state.planName).toBe('Pro')
+  })
+
+  it('uses the marketing casing rather than whatever the DB stored', () => {
+    expect(deriveBillingState(freePayload).planName).toBe('Free')
+    expect(deriveBillingState({ plan: { name: '  SCALE ' } }).planName).toBe(
+      'Scale'
+    )
+  })
+
+  describe('upgradeTier', () => {
+    it('sells Pro to a free user', () => {
+      expect(deriveBillingState(freePayload).upgradeTier?.id).toBe('pro')
+    })
+
+    it('sells Scale to a Pro user', () => {
+      expect(deriveBillingState(proPayload).upgradeTier?.id).toBe('scale')
+    })
+
+    it('sells nothing at the top of the ladder', () => {
+      const state = deriveBillingState({
+        plan: { name: 'Scale' },
+        status: 'active',
+      })
+      expect(state.upgradeTier).toBeUndefined()
+    })
+
+    // A bespoke arrangement is not on the self-serve ladder, so pushing it up
+    // one rung would be wrong in both directions.
+    it('sells nothing for an unrecognised plan', () => {
+      const state = deriveBillingState({
+        plan: { name: 'Enterprise' },
+        status: 'active',
+      })
+      expect(state.upgradeTier).toBeUndefined()
+      expect(state.planName).toBe('Enterprise')
+    })
+  })
+
+  describe('hasBillingDates', () => {
+    it('is false for a free account, which has no dates to show', () => {
+      expect(deriveBillingState(freePayload).hasBillingDates).toBe(false)
+    })
+
+    it('is true once a subscription carries a date', () => {
+      expect(deriveBillingState(proPayload).hasBillingDates).toBe(true)
+    })
+  })
+
+  describe('canManageBilling', () => {
+    it('is false for a free account with nothing to manage', () => {
+      expect(deriveBillingState(freePayload).canManageBilling).toBe(false)
+    })
+
+    it('is true for a subscriber', () => {
+      expect(deriveBillingState(proPayload).canManageBilling).toBe(true)
+    })
+  })
+})
+
+describe('billingPriceLabel', () => {
+  it('returns the amount for a paying customer', () => {
+    expect(billingPriceLabel(proPayload)).toBe(999)
+  })
+
+  it('returns nothing when there is no charge', () => {
+    expect(billingPriceLabel(freePayload)).toBeNull()
+    expect(billingPriceLabel({ amount: 0 })).toBeNull()
+    expect(billingPriceLabel(undefined)).toBeNull()
+  })
+})
diff --git a/web/lib/billing.ts b/web/lib/billing.ts
new file mode 100644
index 00000000..dd8ea5ab
--- /dev/null
+++ b/web/lib/billing.ts
@@ -0,0 +1,77 @@
+import type { Subscription, SubscriptionStatus } from '@/lib/api/types'
+import { PLAN_TIERS, findPlanTier, type PlanTier } from '@/lib/plans'
+
+export type BillingState = {
+  /** Display name for the current plan. Always populated. */
+  planName: string
+  /** The matching marketing tier, when the plan is one of ours. */
+  tier: PlanTier | undefined
+  /** True when the user has no subscription record at all. */
+  isFree: boolean
+  /** Present only for a real subscription. */
+  status: SubscriptionStatus | undefined
+  /** The tier to sell next, or undefined at the top of the ladder. */
+  upgradeTier: PlanTier | undefined
+  /** Whether a start/renewal date exists worth rendering. */
+  hasBillingDates: boolean
+  /** Whether the customer portal applies to this account. */
+  canManageBilling: boolean
+}
+
+/**
+ * Interpret a /billing/current-subscription payload.
+ *
+ * The endpoint answers in two different shapes. A subscriber gets the
+ * Subscription document, which always carries a `status` because the schema
+ * requires one. A user with no subscription gets a synthesised
+ * `{ plan, isActive, usage }` with no status, no amount and no dates.
+ *
+ * The billing page used to read that second shape as a subscription with
+ * missing fields, so every free user was told their status was "Unknown" and
+ * shown two "N/A" billing dates. Absence of a status is not an unknown status:
+ * it means there is nothing to have a status.
+ *
+ * A paid plan name arriving without a status is still genuinely unknown, and
+ * is reported that way rather than being flattened into Free.
+ */
+export function deriveBillingState(
+  subscription: Subscription | undefined
+): BillingState {
+  const rawName = subscription?.plan?.name
+  const normalized = rawName?.trim().toLowerCase()
+  const tier = findPlanTier(rawName)
+  const status = subscription?.status
+
+  const isFree = !status && (!normalized || normalized === 'free')
+
+  // An unrecognised plan name (a bespoke or enterprise arrangement) has no
+  // place on the self-serve ladder, so it gets no upgrade CTA.
+  const currentIndex = tier ? PLAN_TIERS.indexOf(tier) : isFree ? 0 : -1
+  const upgradeTier =
+    currentIndex >= 0 ? PLAN_TIERS[currentIndex + 1] : undefined
+
+  return {
+    planName: tier?.name ?? rawName?.trim() ?? 'Free',
+    tier,
+    isFree,
+    status,
+    upgradeTier,
+    hasBillingDates: Boolean(
+      subscription?.subscriptionStartDate || subscription?.currentPeriodEnd
+    ),
+    canManageBilling: !isFree,
+  }
+}
+
+/**
+ * Price badge text for the plan header, or null when there is no charge to
+ * show. Free accounts carry no amount, and rendering "Free" next to a plan
+ * already named Free just says the same thing twice.
+ */
+export function billingPriceLabel(
+  subscription: Subscription | undefined
+): number | null {
+  const amount = subscription?.amount
+  if (amount == null || amount <= 0) return null
+  return amount
+}
diff --git a/web/lib/format.test.ts b/web/lib/format.test.ts
new file mode 100644
index 00000000..af4e33ab
--- /dev/null
+++ b/web/lib/format.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest'
+import {
+  formatDate,
+  formatLimit,
+  formatPrice,
+  getBillingInterval,
+  titleCaseStatus,
+} from './format'
+
+describe('formatLimit', () => {
+  it('renders -1 as Unlimited', () => {
+    expect(formatLimit(-1)).toBe('Unlimited')
+  })
+  it('renders null/undefined as 0', () => {
+    expect(formatLimit(null)).toBe('0')
+    expect(formatLimit(undefined)).toBe('0')
+  })
+  it('thousands-separates numbers', () => {
+    expect(formatLimit(100000)).toBe('100,000')
+  })
+})
+
+describe('formatPrice', () => {
+  it('formats cents into a currency string', () => {
+    expect(formatPrice(1900, 'usd')).toBe('$19.00')
+  })
+  it('returns Free only when there is no amount', () => {
+    expect(formatPrice(null, null)).toBe('Free')
+  })
+
+  // A real amount with a missing currency used to render as "Free", which put
+  // the badge "Free / monthly" in front of paying customers.
+  it('falls back to USD rather than claiming a paid plan is free', () => {
+    expect(formatPrice(1900, null)).toBe('$19.00')
+    expect(formatPrice(1900, '')).toBe('$19.00')
+  })
+})
+
+describe('getBillingInterval', () => {
+  it('maps month to monthly and anything else to yearly', () => {
+    expect(getBillingInterval('month')).toBe('monthly')
+    expect(getBillingInterval('year')).toBe('yearly')
+    expect(getBillingInterval(null)).toBe('')
+  })
+})
+
+describe('formatDate', () => {
+  it('returns N/A for empty values', () => {
+    expect(formatDate(null)).toBe('N/A')
+    expect(formatDate(undefined)).toBe('N/A')
+  })
+  it('formats an ISO date', () => {
+    expect(formatDate('2026-08-01T00:00:00.000Z')).toMatch(/2026/)
+  })
+})
+
+describe('titleCaseStatus', () => {
+  it('title-cases underscore separated statuses', () => {
+    expect(titleCaseStatus('past_due')).toBe('Past Due')
+    expect(titleCaseStatus('active')).toBe('Active')
+    expect(titleCaseStatus(null)).toBe('')
+  })
+})
diff --git a/web/lib/format.ts b/web/lib/format.ts
new file mode 100644
index 00000000..dfb9c8d5
--- /dev/null
+++ b/web/lib/format.ts
@@ -0,0 +1,50 @@
+// Shared formatting helpers. These were previously duplicated inline across
+// subscription-info, device-list, overview and others.
+
+// A plan limit of -1 means unlimited; null/undefined render as 0.
+export function formatLimit(value: number | null | undefined): string {
+  if (value === -1) return 'Unlimited'
+  if (value == null) return '0'
+  return value.toLocaleString()
+}
+
+// Amounts come from the backend in minor units (cents). Null amount = Free.
+export function formatPrice(
+  amount: number | null | undefined,
+  currency: string | null | undefined
+): string {
+  // Only a missing amount means free. A missing currency used to fall through
+  // to "Free" as well, so a paying customer whose payload omitted the currency
+  // was shown the badge "Free / monthly" on their own billing page.
+  if (amount == null) return 'Free'
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currency?.toUpperCase() || 'USD',
+    minimumFractionDigits: 2,
+  }).format(amount / 100)
+}
+
+export function getBillingInterval(
+  interval: string | null | undefined
+): string {
+  if (!interval) return ''
+  return interval.toLowerCase() === 'month' ? 'monthly' : 'yearly'
+}
+
+export function formatDate(value: string | number | Date | null | undefined) {
+  if (!value) return 'N/A'
+  return new Date(value).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+// "past_due" -> "Past Due"
+export function titleCaseStatus(status: string | null | undefined): string {
+  if (!status) return ''
+  return status
+    .split('_')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
diff --git a/web/lib/httpBrowserClient.ts b/web/lib/httpBrowserClient.ts
index 7dfce1c7..b906cd01 100644
--- a/web/lib/httpBrowserClient.ts
+++ b/web/lib/httpBrowserClient.ts
@@ -35,4 +35,24 @@ httpBrowserClient.interceptors.request.use(async (config) => {
   return config
 })
 
+// Global session-expiry handling: any 401 from the API means the stored token
+// is no longer valid, so send the user to logout. This replaces the previous
+// per-navigation whoAmI check in the layout wrapper.
+httpBrowserClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (
+      typeof window !== 'undefined' &&
+      error?.response?.status === 401
+    ) {
+      const { pathname } = window.location
+      if (!pathname.includes('/logout') && !pathname.includes('/login')) {
+        sessionCache = null
+        window.location.href = '/logout'
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
 export default httpBrowserClient
diff --git a/web/lib/plans.test.ts b/web/lib/plans.test.ts
new file mode 100644
index 00000000..614ffdf5
--- /dev/null
+++ b/web/lib/plans.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+import { PLAN_TIERS, findPlanTier, formatPlanPrice } from './plans'
+
+// These values mirror the marketing pricing page. They are pinned here so that
+// if the two drift apart, this fails instead of quietly showing a customer a
+// price we do not charge.
+describe('PLAN_TIERS', () => {
+  it('matches the marketing pricing page', () => {
+    expect(
+      PLAN_TIERS.map((t) => [t.id, t.monthlyPrice, t.yearlyPrice])
+    ).toEqual([
+      ['free', 0, undefined],
+      ['pro', 9.99, 99.99],
+      ['scale', 29.99, 299.99],
+    ])
+  })
+
+  it('offers the three self-serve tiers, Scale included', () => {
+    expect(PLAN_TIERS.map((t) => t.name)).toEqual(['Free', 'Pro', 'Scale'])
+  })
+
+  it('highlights exactly one tier', () => {
+    expect(PLAN_TIERS.filter((t) => t.isPopular)).toHaveLength(1)
+    expect(PLAN_TIERS.find((t) => t.isPopular)?.id).toBe('pro')
+  })
+
+  it('gives every tier features to show', () => {
+    for (const tier of PLAN_TIERS) {
+      expect(tier.features.length).toBeGreaterThan(0)
+      expect(tier.description).not.toBe('')
+    }
+  })
+
+  // The id doubles as the /checkout/{id} segment, so it has to stay
+  // URL-clean.
+  it('uses lowercase ids safe for the checkout route', () => {
+    for (const tier of PLAN_TIERS) {
+      expect(tier.id).toMatch(/^[a-z][a-z0-9-]*$/)
+    }
+  })
+})
+
+describe('formatPlanPrice', () => {
+  // "$0" not "Free", so the price does not just repeat the tier name above it.
+  it('renders the free tier as a price', () => {
+    expect(formatPlanPrice(0)).toBe('$0')
+  })
+
+  it('always shows cents on a paid plan', () => {
+    expect(formatPlanPrice(9.99)).toBe('$9.99')
+    expect(formatPlanPrice(30)).toBe('$30.00')
+  })
+})
+
+describe('findPlanTier', () => {
+  it('is forgiving about casing and whitespace', () => {
+    expect(findPlanTier('Pro')?.id).toBe('pro')
+    expect(findPlanTier('  SCALE ')?.id).toBe('scale')
+  })
+
+  it('returns nothing for an unknown or missing name', () => {
+    expect(findPlanTier('enterprise')).toBeUndefined()
+    expect(findPlanTier(undefined)).toBeUndefined()
+    expect(findPlanTier(null)).toBeUndefined()
+    expect(findPlanTier('')).toBeUndefined()
+  })
+})
diff --git a/web/lib/plans.ts b/web/lib/plans.ts
new file mode 100644
index 00000000..69a247c3
--- /dev/null
+++ b/web/lib/plans.ts
@@ -0,0 +1,94 @@
+/**
+ * Plan definitions for the dashboard, mirroring the marketing site's pricing
+ * section (textbee-marketing pricing-section.tsx).
+ *
+ * Deliberately static rather than fetched. The billing plans endpoint returns
+ * raw Plan documents with limits and cents, not the customer-facing copy, and
+ * an environment whose plans collection is empty left the onboarding step
+ * showing "plans could not be loaded" with nothing to choose. Pricing is
+ * marketing copy, so it comes from the same place the pricing page does.
+ *
+ * If the marketing pricing changes, change it here too. plans.test.ts pins the
+ * values so a silent drift shows up as a failing test rather than a wrong
+ * price in front of a customer.
+ */
+
+export type PlanTier = {
+  /** Matches the checkout route segment: /checkout/{id}. */
+  id: string
+  name: string
+  description: string
+  monthlyPrice: number
+  yearlyPrice?: number
+  features: string[]
+  /** The tier the picker highlights. */
+  isPopular?: boolean
+}
+
+export const PLAN_TIERS: PlanTier[] = [
+  {
+    id: 'free',
+    name: 'Free',
+    description: 'Get started with basic SMS gateway features',
+    monthlyPrice: 0,
+    features: [
+      'Send and receive SMS Messages',
+      'Register 1 active device',
+      'Max 50 messages per day',
+      'Up to 300 messages per month',
+      'Up to 50 recipients in bulk',
+      'Webhook notifications',
+      'Basic support',
+    ],
+  },
+  {
+    id: 'pro',
+    name: 'Pro',
+    description: 'For growing projects that send every day',
+    monthlyPrice: 9.99,
+    yearlyPrice: 99.99,
+    isPopular: true,
+    features: [
+      'Everything in Free plan',
+      'Register up to 5 active devices',
+      'Unlimited daily messages',
+      'Up to 5,000 messages per month',
+      'No bulk SMS recipient limits',
+      'Message templates with variables',
+      'Priority support',
+    ],
+  },
+  {
+    id: 'scale',
+    name: 'Scale',
+    description: 'For higher volume and more devices',
+    monthlyPrice: 29.99,
+    yearlyPrice: 299.99,
+    features: [
+      'Everything in Pro plan',
+      'Register up to 15 active devices',
+      'Unlimited daily messages',
+      'Up to 25,000 messages per month',
+      'No bulk SMS recipient limits',
+      'Message templates with variables',
+      'Priority support',
+    ],
+  },
+]
+
+/**
+ * Prices are dollar amounts here, not the cents the API deals in.
+ *
+ * Free renders as "$0" rather than "Free" so it does not simply repeat the
+ * tier name directly above it, matching how the pricing page reads.
+ */
+export function formatPlanPrice(price: number): string {
+  if (price <= 0) return '$0'
+  return `$${price.toFixed(2)}`
+}
+
+export function findPlanTier(name: string | undefined | null) {
+  if (!name) return undefined
+  const key = name.trim().toLowerCase()
+  return PLAN_TIERS.find((tier) => tier.id === key)
+}
diff --git a/web/lib/sms.test.ts b/web/lib/sms.test.ts
new file mode 100644
index 00000000..2f1bf442
--- /dev/null
+++ b/web/lib/sms.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+import { getSegmentInfo, isGsm7 } from './sms'
+
+// Moved here from bulk-send/bulk-csv.test.ts when the segment helpers became
+// shared by the send page, bulk send and the reply composer.
+
+describe('isGsm7', () => {
+  it('accepts the basic latin alphabet', () => {
+    expect(isGsm7('Hello there 123')).toBe(true)
+  })
+
+  it('rejects characters that force UCS-2', () => {
+    expect(isGsm7('Hello 😀')).toBe(false)
+    expect(isGsm7('日本語')).toBe(false)
+  })
+})
+
+describe('getSegmentInfo', () => {
+  it('counts a short GSM-7 message as one segment', () => {
+    const info = getSegmentInfo('Hello there')
+    expect(info).toMatchObject({ segments: 1, encoding: 'GSM-7', perSegment: 160 })
+  })
+
+  it('treats an empty message as zero segments', () => {
+    expect(getSegmentInfo('').segments).toBe(0)
+  })
+
+  it('splits past 160 GSM-7 characters', () => {
+    expect(getSegmentInfo('a'.repeat(160)).segments).toBe(1)
+    expect(getSegmentInfo('a'.repeat(161)).segments).toBe(2)
+    expect(getSegmentInfo('a'.repeat(306)).segments).toBe(2)
+    expect(getSegmentInfo('a'.repeat(307)).segments).toBe(3)
+  })
+
+  it('drops to UCS-2 limits when a character needs it', () => {
+    const info = getSegmentInfo('Hello 😀')
+    expect(info.encoding).toBe('UCS-2')
+    expect(info.perSegment).toBe(70)
+  })
+
+  it('splits UCS-2 past 70 characters', () => {
+    expect(getSegmentInfo(`😀${'a'.repeat(70)}`).segments).toBe(2)
+  })
+})
diff --git a/web/lib/sms.ts b/web/lib/sms.ts
new file mode 100644
index 00000000..825ae17d
--- /dev/null
+++ b/web/lib/sms.ts
@@ -0,0 +1,74 @@
+// SMS encoding helpers, shared by the send page, the bulk send flow and the
+// reply composer so all three report segment counts identically.
+
+export type SegmentInfo = {
+  length: number
+  segments: number
+  perSegment: number
+  // GSM-7 fits more per segment than UCS-2, which is needed for non-Latin
+  // characters and most emoji.
+  encoding: 'GSM-7' | 'UCS-2'
+}
+
+// Characters representable in the GSM 03.38 alphabet.
+const GSM_7_CHARS =
+  "@£$¥èéùìòÇ\nØø\rÅåΔ_ΦΓΛΩΠΨΣΘΞÆæßÉ !\"#¤%&'()*+,-./0123456789:;<=>?¡ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÑܧ¿abcdefghijklmnopqrstuvwxyzäöñüà"
+const GSM_7_EXTENDED = '^{}\\[~]|€'
+
+export function isGsm7(text: string): boolean {
+  for (let i = 0; i < text.length; i += 1) {
+    const char = text.charAt(i)
+    if (GSM_7_CHARS.indexOf(char) === -1 && GSM_7_EXTENDED.indexOf(char) === -1) {
+      return false
+    }
+  }
+  return true
+}
+
+/** Segment count for a message, so a user is not surprised by cost. */
+export function getSegmentInfo(text: string): SegmentInfo {
+  const gsm = isGsm7(text)
+  const encoding = gsm ? 'GSM-7' : 'UCS-2'
+  const single = gsm ? 160 : 70
+  const multi = gsm ? 153 : 67
+  const length = text.length
+
+  if (length === 0) {
+    return { length: 0, segments: 0, perSegment: single, encoding }
+  }
+  if (length <= single) {
+    return { length, segments: 1, perSegment: single, encoding }
+  }
+  return {
+    length,
+    segments: Math.ceil(length / multi),
+    perSegment: multi,
+    encoding,
+  }
+}
+
+/**
+ * Strip formatting so "+1 (415) 555-0101" and "+14155550101" are recognised as
+ * the same recipient for duplicate detection.
+ */
+export function normalizePhone(value: string): string {
+  const trimmed = value.trim()
+  const hasPlus = trimmed.startsWith('+')
+  const digits = trimmed.replace(/\D/g, '')
+  return hasPlus ? `+${digits}` : digits
+}
+
+/**
+ * Permissive validity check. The gateway is the real authority on whether a
+ * number can be reached, so this only rejects input that cannot possibly be a
+ * phone number, rather than enforcing a strict E.164 shape that would block
+ * legitimate local formats.
+ */
+export function isPlausiblePhone(value: string): boolean {
+  const normalized = normalizePhone(value)
+  const digits = normalized.replace(/\D/g, '')
+  if (digits.length < 7 || digits.length > 15) return false
+  // Reject anything carrying characters that are neither digits, separators,
+  // nor a leading plus.
+  return /^\+?[\d\s()./-]+$/.test(value.trim())
+}
diff --git a/web/lib/status.test.ts b/web/lib/status.test.ts
new file mode 100644
index 00000000..4dcad578
--- /dev/null
+++ b/web/lib/status.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+import { AlertTriangle, Check, CircleHelp, XCircle } from 'lucide-react'
+import {
+  subscriptionStatusIcon,
+  subscriptionStatusTone,
+  usageMeterColor,
+} from './status'
+
+// The billing card used to hardcode a check mark next to whatever the status
+// text said, so a past_due or canceled subscriber was reassured with a tick at
+// exactly the moment they needed a warning.
+describe('subscriptionStatusIcon', () => {
+  it('only shows a check for an active subscription', () => {
+    expect(subscriptionStatusIcon('active')).toBe(Check)
+  })
+
+  it('warns rather than reassures when something is wrong', () => {
+    expect(subscriptionStatusIcon('past_due')).toBe(AlertTriangle)
+    expect(subscriptionStatusIcon('canceled')).toBe(XCircle)
+  })
+
+  it('does not claim health for an unknown or missing status', () => {
+    expect(subscriptionStatusIcon(undefined)).toBe(CircleHelp)
+    expect(subscriptionStatusIcon(null)).toBe(CircleHelp)
+    expect(subscriptionStatusIcon('something_new')).toBe(CircleHelp)
+  })
+})
+
+describe('subscriptionStatusTone', () => {
+  it('keeps tone and icon agreeing about severity', () => {
+    expect(subscriptionStatusTone('active').text).toContain('green')
+    expect(subscriptionStatusTone('past_due').text).toContain('amber')
+    expect(subscriptionStatusTone(undefined).text).toBe('text-muted-foreground')
+  })
+})
+
+describe('usageMeterColor', () => {
+  it('escalates with usage', () => {
+    expect(usageMeterColor(0)).toBe('bg-green-500')
+    expect(usageMeterColor(79)).toBe('bg-green-500')
+    expect(usageMeterColor(80)).toBe('bg-amber-500')
+    expect(usageMeterColor(100)).toBe('bg-red-500')
+  })
+})
diff --git a/web/lib/status.ts b/web/lib/status.ts
new file mode 100644
index 00000000..0e508600
--- /dev/null
+++ b/web/lib/status.ts
@@ -0,0 +1,67 @@
+import {
+  AlertTriangle,
+  Check,
+  CircleHelp,
+  XCircle,
+  type LucideIcon,
+} from 'lucide-react'
+import type { SubscriptionStatus } from '@/lib/api/types'
+
+// Subscription status colors, previously repeated across subscription-info's
+// badge, icon and text. Returns semantic tone classes for text + background.
+export type StatusTone = {
+  text: string
+  bg: string
+}
+
+export function subscriptionStatusTone(
+  status: SubscriptionStatus | null | undefined
+): StatusTone {
+  switch (status) {
+    case 'active':
+      return {
+        text: 'text-green-600 dark:text-green-400',
+        bg: 'bg-green-50 dark:bg-green-900/30',
+      }
+    case 'past_due':
+      return {
+        text: 'text-amber-600 dark:text-amber-400',
+        bg: 'bg-amber-50 dark:bg-amber-900/30',
+      }
+    default:
+      return {
+        text: 'text-muted-foreground',
+        bg: 'bg-muted',
+      }
+  }
+}
+
+/**
+ * Icon for a subscription status.
+ *
+ * Picked from the status for the same reason the tone is: the billing card
+ * used to hardcode a check mark, so a past_due or canceled subscriber was
+ * shown a tick next to the bad news, at exactly the moment they needed a
+ * warning instead.
+ */
+export function subscriptionStatusIcon(
+  status: SubscriptionStatus | null | undefined
+): LucideIcon {
+  switch (status) {
+    case 'active':
+      return Check
+    case 'past_due':
+      return AlertTriangle
+    case 'canceled':
+      return XCircle
+    default:
+      return CircleHelp
+  }
+}
+
+// Usage meter color by percentage: green under 80, amber 80-99, red at 100+.
+export function usageMeterColor(percentage: number): string {
+  if (percentage >= 100) return 'bg-red-500'
+  if (percentage >= 80) return 'bg-amber-500'
+  return 'bg-green-500'
+}
diff --git a/web/lib/turnstile.ts b/web/lib/turnstile.ts
index 92751faa..9bd0095a 100644
--- a/web/lib/turnstile.ts
+++ b/web/lib/turnstile.ts
@@ -71,7 +71,8 @@ type UseTurnstileOptions = {
 }
 
 type UseTurnstileResult = {
-  containerRef: RefObject<HTMLDivElement>
+  // Nullable: useRef starts at null and only holds the node once mounted.
+  containerRef: RefObject<HTMLDivElement | null>
   token: string
   error: string | null
   isReady: boolean
diff --git a/web/lib/types.ts b/web/lib/types.ts
index 74fe3b89..b32edc30 100644
--- a/web/lib/types.ts
+++ b/web/lib/types.ts
@@ -1,5 +1,7 @@
 export interface WebhookData {
-  _id?: string
+  // Required: it goes into the update and delete request paths, so an absent
+  // one would PATCH /webhooks/undefined. Anything the API returns has one.
+  _id: string
   name?: string
   deliveryUrl: string
   events: string[]
diff --git a/web/lib/usage.test.ts b/web/lib/usage.test.ts
new file mode 100644
index 00000000..d2e38d31
--- /dev/null
+++ b/web/lib/usage.test.ts
@@ -0,0 +1,85 @@
+import { describe, expect, it } from 'vitest'
+import { deriveUsage, UNLIMITED } from './usage'
+
+describe('deriveUsage', () => {
+  it('reads the daily and monthly windows from usage', () => {
+    const { daily, monthly } = deriveUsage({
+      plan: { dailyLimit: 500, monthlyLimit: 5000 },
+      usage: {
+        dailyLimit: 500,
+        monthlyLimit: 5000,
+        processedSmsToday: 47,
+        processedSmsLastMonth: 1204,
+        dailyRemaining: 453,
+        monthlyRemaining: 3796,
+        dailyUsagePercentage: 9,
+        monthlyUsagePercentage: 24,
+      },
+    })
+
+    expect(daily.used).toBe(47)
+    expect(daily.limit).toBe(500)
+    expect(daily.remaining).toBe(453)
+    expect(daily.percentage).toBe(9)
+    expect(daily.unlimited).toBe(false)
+
+    expect(monthly.used).toBe(1204)
+    expect(monthly.percentage).toBe(24)
+  })
+
+  it('treats -1 as unlimited and suppresses the percentage', () => {
+    const { daily } = deriveUsage({
+      plan: { dailyLimit: UNLIMITED },
+      usage: { dailyLimit: UNLIMITED, processedSmsToday: 900 },
+    })
+
+    expect(daily.unlimited).toBe(true)
+    expect(daily.percentage).toBe(0)
+    expect(daily.nearLimit).toBe(false)
+    expect(daily.atLimit).toBe(false)
+    // Usage is still reported, there is just nothing to measure it against.
+    expect(daily.used).toBe(900)
+  })
+
+  it('prefers usage limits over plan limits (custom overrides)', () => {
+    const { daily } = deriveUsage({
+      plan: { dailyLimit: 50 },
+      usage: { dailyLimit: 5000, processedSmsToday: 100 },
+    })
+
+    expect(daily.limit).toBe(5000)
+  })
+
+  it('flags the near-limit threshold', () => {
+    const { daily } = deriveUsage({
+      usage: { dailyLimit: 100, processedSmsToday: 85, dailyUsagePercentage: 85 },
+    })
+
+    expect(daily.nearLimit).toBe(true)
+    expect(daily.atLimit).toBe(false)
+  })
+
+  it('flags being at the limit and clamps an over-100 percentage', () => {
+    // Happens when a limit is lowered mid-period.
+    const { daily } = deriveUsage({
+      usage: {
+        dailyLimit: 100,
+        processedSmsToday: 150,
+        dailyUsagePercentage: 150,
+      },
+    })
+
+    expect(daily.percentage).toBe(100)
+    expect(daily.atLimit).toBe(true)
+    expect(daily.nearLimit).toBe(false)
+  })
+
+  it('is safe on an undefined subscription', () => {
+    const { daily, monthly } = deriveUsage(undefined)
+
+    expect(daily.used).toBe(0)
+    expect(daily.limit).toBeUndefined()
+    expect(daily.unlimited).toBe(false)
+    expect(monthly.used).toBe(0)
+  })
+})
diff --git a/web/lib/usage.ts b/web/lib/usage.ts
new file mode 100644
index 00000000..d85d89d7
--- /dev/null
+++ b/web/lib/usage.ts
@@ -0,0 +1,67 @@
+import type { Subscription } from '@/lib/api/types'
+
+// The backend uses -1 to mean "no limit".
+export const UNLIMITED = -1
+
+export type UsageWindow = {
+  used: number
+  limit: number | undefined
+  remaining: number
+  // 0-100, clamped. Meaningless when unlimited.
+  percentage: number
+  unlimited: boolean
+  // True once the user is close enough to the limit to warrant a nudge.
+  nearLimit: boolean
+  atLimit: boolean
+}
+
+export const NEAR_LIMIT_PERCENT = 80
+
+function buildWindow(
+  used: number | undefined,
+  limit: number | undefined,
+  remaining: number | undefined,
+  percentage: number | undefined
+): UsageWindow {
+  const unlimited = limit === UNLIMITED
+  // The backend reports percentage directly, but it is only meaningful for a
+  // real limit and can exceed 100 when a limit was lowered mid-period.
+  const pct = unlimited ? 0 : Math.min(100, Math.max(0, percentage ?? 0))
+
+  return {
+    used: used ?? 0,
+    limit,
+    remaining: remaining ?? 0,
+    percentage: pct,
+    unlimited,
+    nearLimit: !unlimited && pct >= NEAR_LIMIT_PERCENT && pct < 100,
+    atLimit: !unlimited && pct >= 100,
+  }
+}
+
+/**
+ * Derive the daily and monthly send windows from a subscription.
+ *
+ * Shared by the dashboard usage cards and the billing page so the two can
+ * never disagree about how much quota is left. `usage` values win over `plan`
+ * values because they already account for per-account custom overrides.
+ */
+export function deriveUsage(subscription: Subscription | undefined) {
+  const plan = subscription?.plan
+  const usage = subscription?.usage
+
+  return {
+    daily: buildWindow(
+      usage?.processedSmsToday,
+      usage?.dailyLimit ?? plan?.dailyLimit,
+      usage?.dailyRemaining,
+      usage?.dailyUsagePercentage
+    ),
+    monthly: buildWindow(
+      usage?.processedSmsLastMonth,
+      usage?.monthlyLimit ?? plan?.monthlyLimit,
+      usage?.monthlyRemaining,
+      usage?.monthlyUsagePercentage
+    ),
+  }
+}
diff --git a/web/lib/utils.ts b/web/lib/utils.ts
index 19cd16c2..263ec126 100644
--- a/web/lib/utils.ts
+++ b/web/lib/utils.ts
@@ -11,11 +11,11 @@ export function cn(...inputs: ClassValue[]) {
  * @returns Formatted string like "Brand Model" or "Brand Model (Custom Name)"
  */
 export function formatDeviceName(device: {
-  brand: string
-  model: string
+  brand?: string
+  model?: string
   name?: string | null
 }): string {
-  const baseName = `${device.brand} ${device.model}`
+  const baseName = `${device.brand ?? ''} ${device.model ?? ''}`.trim()
   
   if (device.name && device.name.trim() !== '' && device.name !== baseName) {
     return `${baseName} (${device.name})`
diff --git a/web/lib/utils/errorHandler.ts b/web/lib/utils/errorHandler.ts
index 2a78388b..bab99e8f 100644
--- a/web/lib/utils/errorHandler.ts
+++ b/web/lib/utils/errorHandler.ts
@@ -76,6 +76,18 @@ export function formatError(error: unknown): FormattedError {
   }
 }
 
+/**
+ * The `message` an API error carried, or undefined if it had none.
+ *
+ * Distinct from formatError, which always substitutes a generic message.
+ * Use this where the caller has its own fallback copy worth preserving, and
+ * needs to know whether the server actually said anything.
+ */
+export function apiErrorMessage(error: unknown): string | undefined {
+  const data = (error as AxiosError<{ message?: string }>)?.response?.data
+  return data?.message
+}
+
 /**
  * Checks if an error is a rate limit (429) error
  */
diff --git a/web/next-env.d.ts b/web/next-env.d.ts
index 40c3d680..c4b7818f 100644
--- a/web/next-env.d.ts
+++ b/web/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/web/next.config.js b/web/next.config.js
index 240eddd2..8674ff47 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -1,10 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  i18n: {
-    locales: ['en-US'],
-    defaultLocale: 'en-US',
-  },
   output: 'standalone',
 
   async redirects() {
diff --git a/web/package.json b/web/package.json
index 2447442e..71db927e 100644
--- a/web/package.json
+++ b/web/package.json
@@ -7,70 +7,86 @@
     "build": "next build",
     "vercel-build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.1",
-    "@radix-ui/react-accordion": "^1.2.1",
-    "@radix-ui/react-alert-dialog": "^1.1.4",
-    "@radix-ui/react-avatar": "^1.1.1",
-    "@radix-ui/react-checkbox": "^1.1.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-navigation-menu": "^1.2.1",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-scroll-area": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-toast": "^1.2.2",
-    "@radix-ui/react-tooltip": "^1.1.6",
+    "@hookform/resolvers": "^5.4.0",
+    "@radix-ui/react-accordion": "^1.2.16",
+    "@radix-ui/react-alert-dialog": "^1.1.19",
+    "@radix-ui/react-avatar": "^1.2.2",
+    "@radix-ui/react-checkbox": "^1.3.7",
+    "@radix-ui/react-collapsible": "^1.1.16",
+    "@radix-ui/react-dialog": "^1.1.19",
+    "@radix-ui/react-dropdown-menu": "^2.1.20",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.11",
+    "@radix-ui/react-navigation-menu": "^1.2.18",
+    "@radix-ui/react-popover": "^1.1.19",
+    "@radix-ui/react-scroll-area": "^1.2.14",
+    "@radix-ui/react-select": "^2.3.3",
+    "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-switch": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.1.17",
+    "@radix-ui/react-toast": "^1.2.19",
+    "@radix-ui/react-tooltip": "^1.2.12",
     "@react-oauth/google": "^0.12.1",
-    "@tanstack/react-query": "^5.61.0",
+    "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-table": "^8.21.3",
-    "axios": "^1.8.2",
-    "class-variance-authority": "^0.7.0",
+    "axios": "^1.18.1",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
-    "lucide-react": "^0.453.0",
-    "next": "14.2.26",
-    "next-auth": "^4.24.10",
-    "next-themes": "^0.4.3",
-    "papaparse": "^5.4.1",
-    "prisma": "^5.22.0",
-    "react": "^18.2.0",
-    "react-day-picker": "^9.9.0",
-    "react-dom": "^18.2.0",
-    "react-dropzone": "^14.3.5",
-    "react-hook-form": "^7.53.1",
-    "react-qr-code": "^2.0.12",
+    "date-fns": "^4.4.0",
+    "lucide-react": "^0.577.0",
+    "next": "16.2.10",
+    "next-auth": "^4.24.14",
+    "next-themes": "^0.4.6",
+    "papaparse": "^5.5.4",
+    "react": "^19.2.0",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.0",
+    "react-dropzone": "^15.0.0",
+    "react-hook-form": "^7.81.0",
+    "react-qr-code": "^2.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "sharp": "^0.34.2",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7",
-    "uuid": "^11.0.3",
-    "zod": "^3.23.8"
+    "tailwind-merge": "^3.6.0",
+    "uuid": "^14.0.1",
+    "zod": "^3.25.76"
   },
   "engines": {
     "node": ">=18.17.0"
   },
   "devDependencies": {
-    "@types/node": "20.11.5",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
-    "autoprefixer": "^10.4.20",
-    "eslint": "8.56.0",
-    "eslint-config-next": "14.1.0",
+    "@eslint/eslintrc": "^3.3.6",
+    "@playwright/test": "^1.49.1",
+    "@tailwindcss/postcss": "^4.3.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^20.11.5",
+    "@types/papaparse": "^5.5.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.8",
+    "eslint": "^9.17.0",
+    "eslint-config-next": "16.2.10",
+    "jsdom": "^25.0.1",
+    "msw": "^2.7.0",
     "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14",
-    "typescript": "5.3.3"
+    "tailwindcss": "^4.3.2",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
   }
 }
\ No newline at end of file
diff --git a/web/playwright.config.ts b/web/playwright.config.ts
new file mode 100644
index 00000000..a8e4ee2b
--- /dev/null
+++ b/web/playwright.config.ts
@@ -0,0 +1,48 @@
+import { defineConfig, devices } from '@playwright/test'
+
+// E2e runs the real Next app but every backend call is intercepted with mocked
+// fixtures (see e2e/mock-api.ts). No real backend is ever contacted. The dev
+// server is started with a fixed test secret so we can mint a valid NextAuth
+// session cookie in tests.
+export const TEST_AUTH_SECRET = 'e2e-test-secret-do-not-use-in-prod'
+const PORT = 3100
+export const BASE_URL = `http://localhost:${PORT}`
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? 'github' : 'list',
+  // Headroom for pages that server-redirect, hydrate, then settle several
+  // intercepted API calls while workers share one server.
+  expect: { timeout: 10_000 },
+  use: {
+    baseURL: BASE_URL,
+    trace: 'on-first-retry',
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+  ],
+  webServer: {
+    // Production build, not `next dev`. The dev server compiles routes on
+    // demand, so parallel workers hitting cold routes paid a multi-second
+    // first-compile cost and timed out at random. Which tests failed varied
+    // run to run. `next start` serves prebuilt routes, so the suite is
+    // deterministic.
+    command: 'pnpm build && pnpm start',
+    url: BASE_URL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 240_000,
+    env: {
+      PORT: String(PORT),
+      NEXTAUTH_URL: BASE_URL,
+      NEXTAUTH_SECRET: TEST_AUTH_SECRET,
+      // Point the app at a backend host that only exists to be intercepted.
+      NEXT_PUBLIC_API_BASE_URL: 'http://localhost:3999/api/v1',
+      NEXT_PUBLIC_GOOGLE_CLIENT_ID: 'e2e-google-client-id',
+      NEXT_PUBLIC_TURNSTILE_SITE_KEY: '1x00000000000000000000AA',
+    },
+  },
+})
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 3cbeb2fd..150d683a 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -9,177 +9,207 @@ importers:
   .:
     dependencies:
       '@hookform/resolvers':
-        specifier: ^3.9.1
-        version: 3.9.1(react-hook-form@7.53.1(react@18.2.0))
+        specifier: ^5.4.0
+        version: 5.4.0(react-hook-form@7.81.0(react@19.2.7))
       '@radix-ui/react-accordion':
-        specifier: ^1.2.1
-        version: 1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.2.16
+        version: 1.2.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-alert-dialog':
-        specifier: ^1.1.4
-        version: 1.1.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.1.19
+        version: 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-avatar':
-        specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.2.2
+        version: 1.2.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-checkbox':
-        specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.3.7
+        version: 1.3.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-collapsible':
-        specifier: ^1.1.11
-        version: 1.1.11(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.1.16
+        version: 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-dialog':
-        specifier: ^1.1.2
-        version: 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.1.19
+        version: 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-dropdown-menu':
-        specifier: ^2.1.2
-        version: 2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^2.1.20
+        version: 2.1.20(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-icons':
-        specifier: ^1.3.0
-        version: 1.3.0(react@18.2.0)
+        specifier: ^1.3.2
+        version: 1.3.2(react@19.2.7)
       '@radix-ui/react-label':
-        specifier: ^2.1.0
-        version: 2.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^2.1.11
+        version: 2.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-navigation-menu':
-        specifier: ^1.2.1
-        version: 1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.2.18
+        version: 1.2.18(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-popover':
-        specifier: ^1.1.15
-        version: 1.1.15(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.1.19
+        version: 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-scroll-area':
-        specifier: ^1.2.1
-        version: 1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.2.14
+        version: 1.2.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-select':
-        specifier: ^2.1.2
-        version: 2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-separator':
-        specifier: ^1.1.7
-        version: 1.1.7(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^2.3.3
+        version: 2.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-slot':
-        specifier: ^1.1.0
-        version: 1.1.0(@types/react@18.2.48)(react@18.2.0)
+        specifier: ^1.3.0
+        version: 1.3.0(@types/react@19.2.17)(react@19.2.7)
       '@radix-ui/react-switch':
-        specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.3.3
+        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-tabs':
-        specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.1.17
+        version: 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-toast':
-        specifier: ^1.2.2
-        version: 1.2.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.2.19
+        version: 1.2.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@radix-ui/react-tooltip':
-        specifier: ^1.1.6
-        version: 1.1.6(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^1.2.12
+        version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@react-oauth/google':
         specifier: ^0.12.1
-        version: 0.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 0.12.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@tanstack/react-query':
-        specifier: ^5.61.0
-        version: 5.61.0(react@18.2.0)
+        specifier: ^5.101.2
+        version: 5.101.2(react@19.2.7)
       '@tanstack/react-table':
         specifier: ^8.21.3
-        version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 8.21.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       axios:
-        specifier: ^1.8.2
-        version: 1.8.2
+        specifier: ^1.18.1
+        version: 1.18.1
       class-variance-authority:
-        specifier: ^0.7.0
-        version: 0.7.0
+        specifier: ^0.7.1
+        version: 0.7.1
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
       cmdk:
         specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       date-fns:
-        specifier: ^4.1.0
-        version: 4.1.0
+        specifier: ^4.4.0
+        version: 4.4.0
       lucide-react:
-        specifier: ^0.453.0
-        version: 0.453.0(react@18.2.0)
+        specifier: ^0.577.0
+        version: 0.577.0(react@19.2.7)
       next:
-        specifier: 14.2.26
-        version: 14.2.26(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 16.2.10
+        version: 16.2.10(@babel/core@7.29.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       next-auth:
-        specifier: ^4.24.10
-        version: 4.24.10(next@14.2.26(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(nodemailer@6.9.16)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^4.24.14
+        version: 4.24.14(next@16.2.10(@babel/core@7.29.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       next-themes:
-        specifier: ^0.4.3
-        version: 0.4.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       papaparse:
-        specifier: ^5.4.1
-        version: 5.4.1
-      prisma:
-        specifier: ^5.22.0
-        version: 5.22.0
+        specifier: ^5.5.4
+        version: 5.5.4
       react:
-        specifier: ^18.2.0
-        version: 18.2.0
+        specifier: ^19.2.0
+        version: 19.2.7
       react-day-picker:
-        specifier: ^9.9.0
-        version: 9.9.0(react@18.2.0)
+        specifier: ^9.14.0
+        version: 9.14.0(react@19.2.7)
       react-dom:
-        specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
+        specifier: ^19.2.0
+        version: 19.2.7(react@19.2.7)
       react-dropzone:
-        specifier: ^14.3.5
-        version: 14.3.5(react@18.2.0)
+        specifier: ^15.0.0
+        version: 15.0.0(react@19.2.7)
       react-hook-form:
-        specifier: ^7.53.1
-        version: 7.53.1(react@18.2.0)
+        specifier: ^7.81.0
+        version: 7.81.0(react@19.2.7)
       react-qr-code:
-        specifier: ^2.0.12
-        version: 2.0.12(react@18.2.0)
+        specifier: ^2.2.0
+        version: 2.2.0(react@19.2.7)
       react-syntax-highlighter:
         specifier: ^15.5.0
-        version: 15.5.0(react@18.2.0)
+        version: 15.5.0(react@19.2.7)
       sharp:
         specifier: ^0.34.2
         version: 0.34.2
       tailwind-merge:
-        specifier: ^2.5.4
-        version: 2.5.4
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.14)
+        specifier: ^3.6.0
+        version: 3.6.0
       uuid:
-        specifier: ^11.0.3
-        version: 11.0.3
+        specifier: ^14.0.1
+        version: 14.0.1
       zod:
-        specifier: ^3.23.8
-        version: 3.23.8
+        specifier: ^3.25.76
+        version: 3.25.76
     devDependencies:
+      '@eslint/eslintrc':
+        specifier: ^3.3.6
+        version: 3.3.6
+      '@playwright/test':
+        specifier: ^1.49.1
+        version: 1.61.1
+      '@tailwindcss/postcss':
+        specifier: ^4.3.2
+        version: 4.3.2
+      '@testing-library/jest-dom':
+        specifier: ^6.6.3
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.1.0
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@testing-library/user-event':
+        specifier: ^14.5.2
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/node':
-        specifier: 20.11.5
+        specifier: ^20.11.5
         version: 20.11.5
+      '@types/papaparse':
+        specifier: ^5.5.2
+        version: 5.5.2
       '@types/react':
-        specifier: 18.2.48
-        version: 18.2.48
+        specifier: ^19.2.0
+        version: 19.2.17
       '@types/react-dom':
-        specifier: 18.2.18
-        version: 18.2.18
+        specifier: ^19.2.0
+        version: 19.2.3(@types/react@19.2.17)
+      '@types/react-syntax-highlighter':
+        specifier: ^15.5.13
+        version: 15.5.13
       '@typescript-eslint/eslint-plugin':
-        specifier: ^6.19.0
-        version: 6.19.0(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0)(typescript@5.3.3)
+        specifier: ^8.18.0
+        version: 8.63.0(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
       '@typescript-eslint/parser':
-        specifier: ^6.19.0
-        version: 6.19.0(eslint@8.56.0)(typescript@5.3.3)
-      autoprefixer:
-        specifier: ^10.4.20
-        version: 10.4.20(postcss@8.4.47)
+        specifier: ^8.18.0
+        version: 8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
+      '@vitejs/plugin-react':
+        specifier: ^4.3.4
+        version: 4.7.0(vite@5.4.21(@types/node@20.11.5)(lightningcss@1.32.0))
+      '@vitest/coverage-v8':
+        specifier: ^2.1.8
+        version: 2.1.9(vitest@2.1.9(@types/node@20.11.5)(jsdom@25.0.1)(lightningcss@1.32.0)(msw@2.15.0(@types/node@20.11.5)(typescript@5.9.3)))
       eslint:
-        specifier: 8.56.0
-        version: 8.56.0
+        specifier: ^9.17.0
+        version: 9.39.5(jiti@2.7.0)
       eslint-config-next:
-        specifier: 14.1.0
-        version: 14.1.0(eslint@8.56.0)(typescript@5.3.3)
+        specifier: 16.2.10
+        version: 16.2.10(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
+      jsdom:
+        specifier: ^25.0.1
+        version: 25.0.1
+      msw:
+        specifier: ^2.7.0
+        version: 2.15.0(@types/node@20.11.5)(typescript@5.9.3)
       postcss:
         specifier: ^8.4.47
         version: 8.4.47
       tailwindcss:
-        specifier: ^3.4.14
-        version: 3.4.14
+        specifier: ^4.3.2
+        version: 4.3.2
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
       typescript:
-        specifier: 5.3.3
-        version: 5.3.3
+        specifier: ^5.7.2
+        version: 5.9.3
+      vitest:
+        specifier: ^2.1.8
+        version: 2.1.9(@types/node@20.11.5)(jsdom@25.0.1)(lightningcss@1.32.0)(msw@2.15.0(@types/node@20.11.5)(typescript@5.9.3))
 
 packages:
 
@@ -187,70 +217,370 @@ packages:
     resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
     engines: {node: '>=0.10.0'}
 
+  '@adobe/css-tools@4.5.0':
+    resolution: {integrity: sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==}
+
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
+  '@asamuzakjp/css-color@3.2.0':
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.7':
+    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.7':
+    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-transform-react-jsx-self@7.29.7':
+    resolution: {integrity: sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.29.7':
+    resolution: {integrity: sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/runtime@7.23.8':
     resolution: {integrity: sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==}
     engines: {node: '>=6.9.0'}
 
-  '@date-fns/tz@1.4.1':
-    resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.7':
+    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@bcoe/v8-coverage@0.2.3':
+    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
+  '@date-fns/tz@1.5.0':
+    resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==}
+
+  '@emnapi/runtime@1.11.2':
+    resolution: {integrity: sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==}
 
   '@emnapi/runtime@1.4.3':
     resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
 
-  '@eslint-community/eslint-utils@4.4.0':
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.21.5':
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.21.5':
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.21.5':
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.21.5':
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.21.5':
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.21.5':
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.21.5':
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.21.5':
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.21.5':
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.21.5':
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.21.5':
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.21.5':
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.21.5':
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.21.5':
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.21.5':
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/sunos-x64@0.21.5':
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.21.5':
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.21.5':
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.10.0':
-    resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/eslintrc@2.1.4':
-    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@eslint/config-array@0.21.2':
+    resolution: {integrity: sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@8.56.0':
-    resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@eslint/config-helpers@0.4.2':
+    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.17.0':
+    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.6':
+    resolution: {integrity: sha512-l2Ul9PrHsPCKcEY/ac7VgFj9D80C7S68sOKc618SyHDPK36s1XcFebXY0iTzUVn4Yq+YbwvSnDmCz9yxjX+QrA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.39.5':
+    resolution: {integrity: sha512-QywQuszQh77pIXCsq998c8hbhSTI/azTty1Z6N53dmAudKHhy573j3yvRLsX2BSp8YpLtoCEG8E9DJe+8zUh4A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@floating-ui/core@1.6.8':
-    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@floating-ui/dom@1.6.12':
-    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
+  '@eslint/plugin-kit@0.4.1':
+    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@floating-ui/react-dom@2.1.2':
-    resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/react-dom@2.1.8':
+    resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  '@floating-ui/utils@0.2.8':
-    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
-  '@hookform/resolvers@3.9.1':
-    resolution: {integrity: sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==}
+  '@hookform/resolvers@5.4.0':
+    resolution: {integrity: sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==}
     peerDependencies:
-      react-hook-form: ^7.0.0
+      react-hook-form: ^7.55.0
+
+  '@humanfs/core@0.19.2':
+    resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.8':
+    resolution: {integrity: sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==}
+    engines: {node: '>=18.18.0'}
 
-  '@humanwhocodes/config-array@0.11.14':
-    resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
-    engines: {node: '>=10.10.0'}
-    deprecated: Use @eslint/config-array instead
+  '@humanfs/types@0.15.0':
+    resolution: {integrity: sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==}
+    engines: {node: '>=18.18.0'}
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
 
-  '@humanwhocodes/object-schema@2.0.2':
-    resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
-    deprecated: Use @eslint/object-schema instead
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
+    engines: {node: '>=18'}
 
   '@img/sharp-darwin-arm64@0.34.2':
     resolution: {integrity: sha512-OfXHZPppddivUJnqyKoi5YVeHRkkNE2zUFT2gbpKxp/JZCFYEYubnMg+gOp6lWfasPrTS+KPosKqdI+ELYVDtg==}
@@ -258,194 +588,376 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@img/sharp-darwin-arm64@0.34.5':
+    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@img/sharp-darwin-x64@0.34.2':
     resolution: {integrity: sha512-dYvWqmjU9VxqXmjEtjmvHnGqF8GrVjM2Epj9rJ6BUIXvk8slvNDJbhGFvIoXzkDhrJC2jUxNLz/GUjjvSzfw+g==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [darwin]
 
+  '@img/sharp-darwin-x64@0.34.5':
+    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@img/sharp-libvips-darwin-arm64@1.1.0':
     resolution: {integrity: sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==}
     cpu: [arm64]
     os: [darwin]
 
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+    cpu: [arm64]
+    os: [darwin]
+
   '@img/sharp-libvips-darwin-x64@1.1.0':
     resolution: {integrity: sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==}
     cpu: [x64]
     os: [darwin]
 
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+    cpu: [x64]
+    os: [darwin]
+
   '@img/sharp-libvips-linux-arm64@1.1.0':
     resolution: {integrity: sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==}
     cpu: [arm64]
     os: [linux]
 
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+    cpu: [arm64]
+    os: [linux]
+
   '@img/sharp-libvips-linux-arm@1.1.0':
     resolution: {integrity: sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==}
     cpu: [arm]
     os: [linux]
 
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+    cpu: [arm]
+    os: [linux]
+
   '@img/sharp-libvips-linux-ppc64@1.1.0':
     resolution: {integrity: sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ==}
     cpu: [ppc64]
     os: [linux]
 
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
+    cpu: [riscv64]
+    os: [linux]
+
   '@img/sharp-libvips-linux-s390x@1.1.0':
     resolution: {integrity: sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==}
     cpu: [s390x]
     os: [linux]
 
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
+    cpu: [s390x]
+    os: [linux]
+
   '@img/sharp-libvips-linux-x64@1.1.0':
     resolution: {integrity: sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==}
     cpu: [x64]
     os: [linux]
 
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+    cpu: [x64]
+    os: [linux]
+
   '@img/sharp-libvips-linuxmusl-arm64@1.1.0':
     resolution: {integrity: sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==}
     cpu: [arm64]
     os: [linux]
 
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+    cpu: [arm64]
+    os: [linux]
+
   '@img/sharp-libvips-linuxmusl-x64@1.1.0':
     resolution: {integrity: sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==}
     cpu: [x64]
     os: [linux]
 
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+    cpu: [x64]
+    os: [linux]
+
   '@img/sharp-linux-arm64@0.34.2':
     resolution: {integrity: sha512-D8n8wgWmPDakc83LORcfJepdOSN6MvWNzzz2ux0MnIbOqdieRZwVYY32zxVx+IFUT8er5KPcyU3XXsn+GzG/0Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
 
+  '@img/sharp-linux-arm64@0.34.5':
+    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@img/sharp-linux-arm@0.34.2':
     resolution: {integrity: sha512-0DZzkvuEOqQUP9mo2kjjKNok5AmnOr1jB2XYjkaoNRwpAYMDzRmAqUIa1nRi58S2WswqSfPOWLNOr0FDT3H5RQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
 
+  '@img/sharp-linux-arm@0.34.5':
+    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [riscv64]
+    os: [linux]
+
   '@img/sharp-linux-s390x@0.34.2':
     resolution: {integrity: sha512-EGZ1xwhBI7dNISwxjChqBGELCWMGDvmxZXKjQRuqMrakhO8QoMgqCrdjnAqJq/CScxfRn+Bb7suXBElKQpPDiw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
 
+  '@img/sharp-linux-s390x@0.34.5':
+    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
   '@img/sharp-linux-x64@0.34.2':
     resolution: {integrity: sha512-sD7J+h5nFLMMmOXYH4DD9UtSNBD05tWSSdWAcEyzqW8Cn5UxXvsHAxmxSesYUsTOBmUnjtxghKDl15EvfqLFbQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
 
+  '@img/sharp-linux-x64@0.34.5':
+    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
   '@img/sharp-linuxmusl-arm64@0.34.2':
     resolution: {integrity: sha512-NEE2vQ6wcxYav1/A22OOxoSOGiKnNmDzCYFOZ949xFmrWZOVII1Bp3NqVVpvj+3UeHMFyN5eP/V5hzViQ5CZNA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
 
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@img/sharp-linuxmusl-x64@0.34.2':
     resolution: {integrity: sha512-DOYMrDm5E6/8bm/yQLCWyuDJwUnlevR8xtF8bs+gjZ7cyUNYXiSf/E8Kp0Ss5xasIaXSHzb888V1BE4i1hFhAA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
 
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
   '@img/sharp-wasm32@0.34.2':
     resolution: {integrity: sha512-/VI4mdlJ9zkaq53MbIG6rZY+QRN3MLbR6usYlgITEzi4Rpx5S6LFKsycOQjkOGmqTNmkIdLjEvooFKwww6OpdQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [wasm32]
 
+  '@img/sharp-wasm32@0.34.5':
+    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
   '@img/sharp-win32-arm64@0.34.2':
     resolution: {integrity: sha512-cfP/r9FdS63VA5k0xiqaNaEoGxBg9k7uE+RQGzuK9fHt7jib4zAVVseR9LsE4gJcNWgT6APKMNnCcnyOtmSEUQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [win32]
 
+  '@img/sharp-win32-arm64@0.34.5':
+    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@img/sharp-win32-ia32@0.34.2':
     resolution: {integrity: sha512-QLjGGvAbj0X/FXl8n1WbtQ6iVBpWU7JO94u/P2M4a8CFYsvQi4GW2mRy/JqkRx0qpBzaOdKJKw8uc930EX2AHw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ia32]
     os: [win32]
 
+  '@img/sharp-win32-ia32@0.34.5':
+    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
   '@img/sharp-win32-x64@0.34.2':
     resolution: {integrity: sha512-aUdT6zEYtDKCaxkofmmJDJYGCf0+pJg3eU9/oBuqvEeoB9dKI6ZLc/1iLJCTuJQDO4ptntAlkUmHgGjyuobZbw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [win32]
 
-  '@isaacs/cliui@8.0.2':
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
-
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
-    engines: {node: '>=6.0.0'}
+  '@img/sharp-win32-x64@0.34.5':
+    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
 
-  '@jridgewell/resolve-uri@3.1.2':
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
-    engines: {node: '>=6.0.0'}
+  '@inquirer/ansi@2.0.7':
+    resolution: {integrity: sha512-3eTuUO1vH2cZm2ZKHeQxnOqlTi9EfZDGgIe3BL3I4u+rJHocr9Fz86M4fjYABPvFnQG/gGK551HqDiIcETwU6Q==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
 
-  '@jridgewell/set-array@1.2.1':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+  '@inquirer/confirm@6.1.1':
+    resolution: {integrity: sha512-eb8DBZcz/2qHWQda4rk2JiQk5h9QV/cVHi1yjt0f69WFZMRFn0sJTye3EAP8icut8UDMjQPsaH5KbcOogefrFQ==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@11.2.1':
+    resolution: {integrity: sha512-Qd6GJT1yVyrZZCfN8W2qKF5ApmqryXRhRKCuip8h01x2w/esJQ2XIYc6f9abMIHgKQdBfFTSOdbHRLAhuM09UA==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@2.0.7':
+    resolution: {integrity: sha512-aJ8TBPOGB6f/2qziPfElISTCEd5XOYTFckA2SGjhNmiKzfK/u4ot3v0DUzGVdUnKjN10EqnnEPck36BkyfLnJw==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+
+  '@inquirer/type@4.0.7':
+    resolution: {integrity: sha512-t28inv14nMQ1PhKpsJPY+kEs/c00qzeCOS2gTNRyTjG5d6qsVA2fItxW4hkvGZ5lvanGLdtCzVIx5dwdRpN1+g==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@istanbuljs/schema@0.1.6':
+    resolution: {integrity: sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw==}
+    engines: {node: '>=8'}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/gen-mapping@0.3.5':
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
 
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
-  '@next/env@14.2.26':
-    resolution: {integrity: sha512-vO//GJ/YBco+H7xdQhzJxF7ub3SUwft76jwaeOyVVQFHCi5DCnkP16WHB+JBylo4vOKPoZBlR94Z8xBxNBdNJA==}
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@mswjs/interceptors@0.41.9':
+    resolution: {integrity: sha512-VVPPgHyQ6ShqnrmDWuxjmUIsO9gWyOZFmuOfLd9LfBGQJwZfy0gvv9pbHSJuoFNIYC7ZDX9aoFwowjcdSC4E8w==}
+    engines: {node: '>=18'}
+
+  '@next/env@16.2.10':
+    resolution: {integrity: sha512-zLPxg9M0MEHmygpj5OuxjQ+vHMiy/K7cSp74G8ecYolmgUWw0RwN02tF56npup/+qaI8JB97hQgS/r2Hb6QwVA==}
 
-  '@next/eslint-plugin-next@14.1.0':
-    resolution: {integrity: sha512-x4FavbNEeXx/baD/zC/SdrvkjSby8nBn8KcCREqk6UuwvwoAPZmaV8TFCAuo/cpovBRTIY67mHhe86MQQm/68Q==}
+  '@next/eslint-plugin-next@16.2.10':
+    resolution: {integrity: sha512-Gs8D2m21VnJeFo9qvYIIqJH94frWerWYu41BprU1pLtRVF7PCQNLiFZZ3fG+iPuj3K83Cwv/rt+msLOy8Qgu3Q==}
 
-  '@next/swc-darwin-arm64@14.2.26':
-    resolution: {integrity: sha512-zDJY8gsKEseGAxG+C2hTMT0w9Nk9N1Sk1qV7vXYz9MEiyRoF5ogQX2+vplyUMIfygnjn9/A04I6yrUTRTuRiyQ==}
+  '@next/swc-darwin-arm64@16.2.10':
+    resolution: {integrity: sha512-v9IdJCa0H0mbo+8z5zwUpOk1Vj7RjkcI5uNYf5Ws1y6szf/p3Mzl9hLaST8SCt6L9h8NGnruZcd2+o0NTNwDhA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@14.2.26':
-    resolution: {integrity: sha512-U0adH5ryLfmTDkahLwG9sUQG2L0a9rYux8crQeC92rPhi3jGQEY47nByQHrVrt3prZigadwj/2HZ1LUUimuSbg==}
+  '@next/swc-darwin-x64@16.2.10':
+    resolution: {integrity: sha512-17IS0jJRViROGmA9uGdNR8VPJpfbnaVG7E9qhso5jDLkmyd0lSDORWxbcKINzcFqzZqGwGtMSnrFRxBpuUYjLQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@14.2.26':
-    resolution: {integrity: sha512-SINMl1I7UhfHGM7SoRiw0AbwnLEMUnJ/3XXVmhyptzriHbWvPPbbm0OEVG24uUKhuS1t0nvN/DBvm5kz6ZIqpg==}
+  '@next/swc-linux-arm64-gnu@16.2.10':
+    resolution: {integrity: sha512-GRQRsRtuciNJvB54AvvuQTiq0oZtFwa1owQqtZD8wwnGpM2L39MV22kpI72YSXLKIyY40LC66EiLFv4PiicXxg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@14.2.26':
-    resolution: {integrity: sha512-s6JaezoyJK2DxrwHWxLWtJKlqKqTdi/zaYigDXUJ/gmx/72CrzdVZfMvUc6VqnZ7YEvRijvYo+0o4Z9DencduA==}
+  '@next/swc-linux-arm64-musl@16.2.10':
+    resolution: {integrity: sha512-zkN9MQYS7UQBro+FnISUq1itaQjXI9xqISzuQ+2bc921NcJ1x4yPCqrn77tVN6/dOOXaaWVX3k6/bR07pPwK+A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@14.2.26':
-    resolution: {integrity: sha512-FEXeUQi8/pLr/XI0hKbe0tgbLmHFRhgXOUiPScz2hk0hSmbGiU8aUqVslj/6C6KA38RzXnWoJXo4FMo6aBxjzg==}
+  '@next/swc-linux-x64-gnu@16.2.10':
+    resolution: {integrity: sha512-iCVJnwvrPYECvA6WM/7+oo+OiTvedIKLxtCLAZP4xZR3nXa1zmzZyLPbYCmWvpd4CvMYF1EMTafd0ii3DygLvA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@14.2.26':
-    resolution: {integrity: sha512-BUsomaO4d2DuXhXhgQCVt2jjX4B4/Thts8nDoIruEJkhE5ifeQFtvW5c9JkdOtYvE5p2G0hcwQ0UbRaQmQwaVg==}
+  '@next/swc-linux-x64-musl@16.2.10':
+    resolution: {integrity: sha512-ov2g4H0dHY9bPoOU83m91hWT7Iq5qy13bUnyyshLU3HGR1Ownn0X9QpmDPc5iIUaahTp7f7LeGAhV4DSFtackw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@14.2.26':
-    resolution: {integrity: sha512-5auwsMVzT7wbB2CZXQxDctpWbdEnEW/e66DyXO1DcgHxIyhP06awu+rHKshZE+lPLIGiwtjo7bsyeuubewwxMw==}
+  '@next/swc-win32-arm64-msvc@16.2.10':
+    resolution: {integrity: sha512-DwAnhLX76HQiFFQNgWlcK+JzlnD1rZ+UK/WY0ZMI/deXpvgnesjNYrqcfo1JzBuz4Kf7o3brIBL0glI1junatA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-ia32-msvc@14.2.26':
-    resolution: {integrity: sha512-GQWg/Vbz9zUGi9X80lOeGsz1rMH/MtFO/XqigDznhhhTfDlDoynCM6982mPCbSlxJ/aveZcKtTlwfAjwhyxDpg==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@next/swc-win32-x64-msvc@14.2.26':
-    resolution: {integrity: sha512-2rdB3T1/Gp7bv1eQTTm9d1Y1sv9UuJ2LAwOE0Pe2prHKe32UNscj7YS13fRB37d0GAiGNR+Y7ZcW8YjDI8Ns0w==}
+  '@next/swc-win32-x64-msvc@16.2.10':
+    resolution: {integrity: sha512-0JXq3b85Jk9Jg4ntLUbXSPvoDw3gpZou7twuKdoFG2jOw635v7+IiXfTaa0TxVMyx78pUjnrVYwLgjKfX4e6/A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -462,6 +974,18 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@open-draft/deferred-promise@2.2.0':
+    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
+
+  '@open-draft/deferred-promise@3.0.0':
+    resolution: {integrity: sha512-XW375UK8/9SqUVNVa6M0yEy8+iTi4QN5VZ7aZuRFQmy76LRwI9wy5F4YIBU6T+eTe2/DNDo8tqu8RHlwLHM6RA==}
+
+  '@open-draft/logger@0.3.0':
+    resolution: {integrity: sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==}
+
+  '@open-draft/until@2.1.0':
+    resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
+
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
@@ -473,38 +997,19 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@prisma/debug@5.22.0':
-    resolution: {integrity: sha512-AUt44v3YJeggO2ZU5BkXI7M4hu9BF2zzH2iF2V5pyXT/lRTyWiElZ7It+bRH1EshoMRxHgpYg4VB6rCM+mG5jQ==}
-
-  '@prisma/engines-version@5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2':
-    resolution: {integrity: sha512-2PTmxFR2yHW/eB3uqWtcgRcgAbG1rwG9ZriSvQw+nnb7c4uCr3RAcGMb6/zfE88SKlC1Nj2ziUvc96Z379mHgQ==}
-
-  '@prisma/engines@5.22.0':
-    resolution: {integrity: sha512-UNjfslWhAt06kVL3CjkuYpHAWSO6L4kDCVPegV6itt7nD1kSJavd3vhgAEhjglLJJKEdJ7oIqDJ+yHk6qO8gPA==}
-
-  '@prisma/fetch-engine@5.22.0':
-    resolution: {integrity: sha512-bkrD/Mc2fSvkQBV5EpoFcZ87AvOgDxbG99488a5cexp5Ccny+UM6MAe/UFkUC0wLYD9+9befNOqGiIJhhq+HbA==}
-
-  '@prisma/get-platform@5.22.0':
-    resolution: {integrity: sha512-pHhpQdr1UPFpt+zFfnPazhulaZYCUqeIcPpJViYoq9R+D/yw4fjE+CtnsnKzPYm0ddUbeXUzjGVGIRVgPDCk4Q==}
-
-  '@radix-ui/number@1.1.0':
-    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
-
-  '@radix-ui/primitive@1.1.0':
-    resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
-
-  '@radix-ui/primitive@1.1.1':
-    resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
+  '@playwright/test@1.61.1':
+    resolution: {integrity: sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  '@radix-ui/primitive@1.1.2':
-    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+  '@radix-ui/number@1.1.2':
+    resolution: {integrity: sha512-ceTwaxc4I5IOi97DgCotl3pqiyRGvffcc0oOsE2dQYaJOFIDsDt4VWG6xEbg1QePv9QWausCEIppud/tJ1wNig==}
 
-  '@radix-ui/primitive@1.1.3':
-    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+  '@radix-ui/primitive@1.1.5':
+    resolution: {integrity: sha512-d86WIWFYNtGA0H/d8exstrTRTp7eWJYlYJbtNofxr/3ljupZYn6EFDG/Qgu/0Kc8v7yMUxySagqJsL1+PdYjWg==}
 
-  '@radix-ui/react-accordion@1.2.1':
-    resolution: {integrity: sha512-bg/l7l5QzUjgsh8kjwDFommzAshnUsuVMV5NM56QVCm+7ZckYdd9P/ExR8xG/Oup0OajVxNLaHJ1tb8mXk+nzQ==}
+  '@radix-ui/react-accordion@1.2.16':
+    resolution: {integrity: sha512-BpZJNmetujnGgUI6OX0jEhEmlA46WPqgub8Rv09Kyquwd0cc1ndMKpiPYCjmBU6KSSRPAMtgLpEoZSG/tdNIWQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -516,8 +1021,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-alert-dialog@1.1.4':
-    resolution: {integrity: sha512-A6Kh23qZDLy3PSU4bh2UJZznOrUdHImIXqF8YtUa6CN73f8EOO9XlXSCd9IHyPvIquTaa/kwaSWzZTtUvgXVGw==}
+  '@radix-ui/react-alert-dialog@1.1.19':
+    resolution: {integrity: sha512-FA7n1f6D/DwGE0+AWxiY5LacNbbExQuEgMubeG06idEaH+mSLuf9dp/qBNqOnvbTQ+4gZ2ue1RATF1Ub91Mg5g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -529,8 +1034,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-arrow@1.1.0':
-    resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==}
+  '@radix-ui/react-arrow@1.1.11':
+    resolution: {integrity: sha512-Kdil9BB1rIFC/khmf4hC35bn8701AJcizTU7G7cUbEbk5XqqbjDuHW60uUfKqO5WojjZcbAW51Q7P0hRmMLw8A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -542,8 +1047,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-arrow@1.1.1':
-    resolution: {integrity: sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==}
+  '@radix-ui/react-avatar@1.2.2':
+    resolution: {integrity: sha512-sST0qh8GzOB7besQ3tMLWLyngnRuSk0gc/Hm+667KYKQFCt6Y6ZXv25WlqM7dIDK54ULCh5+CHmk4LIolzfz+A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -555,8 +1060,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-arrow@1.1.7':
-    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+  '@radix-ui/react-checkbox@1.3.7':
+    resolution: {integrity: sha512-JroKHfQBfh+fDuzpPsBC+pESkhuq8ql4hljTguz8MWnS35cISr3d/Jhl9kYrB44FlDtxCArYdDvTx+BSsJ64rQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -568,8 +1073,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-avatar@1.1.1':
-    resolution: {integrity: sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==}
+  '@radix-ui/react-collapsible@1.1.16':
+    resolution: {integrity: sha512-opfXRe6nnzyGmCDPx+l1Aqo/RbqWtQal2FnsBqF9hhePp6j0LsRoBaRxcMOlTv+uYTJVtWYZKg9t9wTe+BA/ZA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -581,8 +1086,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-checkbox@1.1.2':
-    resolution: {integrity: sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==}
+  '@radix-ui/react-collection@1.1.12':
+    resolution: {integrity: sha512-nb67INpE0IahJKN7EYPp9m9YGwYeKlnzxT3MwXVkgCskaSJia97kG4T0ywpjNUSSnoJk/uvk12V8vbrEHEj+/Q==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -594,34 +1099,26 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-collapsible@1.1.1':
-    resolution: {integrity: sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==}
+  '@radix-ui/react-compose-refs@1.1.3':
+    resolution: {integrity: sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-collapsible@1.1.11':
-    resolution: {integrity: sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==}
+  '@radix-ui/react-context@1.2.0':
+    resolution: {integrity: sha512-fOE+JtN9rygNZkCnHRBEP0TAvLldlhyOxMsbwFvTP4nAs+nBmfnna+o/Zski2wkmY1YMrFC0aSzsHoLY47iLrg==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-collection@1.1.0':
-    resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
+  '@radix-ui/react-dialog@1.1.19':
+    resolution: {integrity: sha512-+HhbN2+YtkRgVirjZ2afMeutQRuGOrdkWR5+EFC58SJojGmtyNQwYzgi6tHBpOxvFHefMtPeHdgtjz0BOGxFQg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -633,75 +1130,17 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-compose-refs@1.1.0':
-    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-compose-refs@1.1.1':
-    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-compose-refs@1.1.2':
-    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-context@1.1.0':
-    resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-context@1.1.1':
-    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-context@1.1.2':
-    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-dialog@1.1.15':
-    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+  '@radix-ui/react-direction@1.1.2':
+    resolution: {integrity: sha512-C3vFhbyi4SW3PmbAi6Awpu4OzJtd0MxGurvSsYtr7p7nM8RNB3VAF3CUmnp2j50knpkrRcB7+ycVXzgLgF6yNA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-dialog@1.1.2':
-    resolution: {integrity: sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==}
+  '@radix-ui/react-dismissable-layer@1.1.15':
+    resolution: {integrity: sha512-b0XaRlzn2QKuo10XyNgi2DAJDf5XC9d1nD3FJcuvCjbR7+4Ad28zmZsLsqx+hvDEzMnRuZaZxZm9gYObV6RmRA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -713,8 +1152,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dialog@1.1.4':
-    resolution: {integrity: sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA==}
+  '@radix-ui/react-dropdown-menu@2.1.20':
+    resolution: {integrity: sha512-slfm+rRaZRuQBvHq60lXvSVUPhid0IPtjSZzIuUlWZMUs01iYZNlGS3mJgRD3ChLQVBAYlKiL/tFyWGX+dz8Xw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -726,8 +1165,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-direction@1.1.0':
-    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+  '@radix-ui/react-focus-guards@1.1.4':
+    resolution: {integrity: sha512-cot/aB/mOm0IYVYTTmQcEEK1M48lZWi8FlYe5nDPQQ8NYZUlXEFgncJ9p2Kzer3RKSrY7cTTpEMLZKNo9QoP5Q==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -735,8 +1174,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-dismissable-layer@1.1.1':
-    resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==}
+  '@radix-ui/react-focus-scope@1.1.12':
+    resolution: {integrity: sha512-jjk/lqTeNL0azUx5ZYzVrl4NgaDIrdzTNE4mABV9yBFI7FQqN7pIgzV1bTleUezP2QiTGA1BFTqY8MegDgWX9A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -748,34 +1187,22 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dismissable-layer@1.1.11':
-    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+  '@radix-ui/react-icons@1.3.2':
+    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
 
-  '@radix-ui/react-dismissable-layer@1.1.3':
-    resolution: {integrity: sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==}
+  '@radix-ui/react-id@1.1.2':
+    resolution: {integrity: sha512-orBC88futVpqCmhX1p4cvquNHsELQ+w+vBJnuj3ftETI5bJb0bZn3Tqu3SWN2IOcPycTnMGnhwoermvISt72sA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-dropdown-menu@2.1.2':
-    resolution: {integrity: sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==}
+  '@radix-ui/react-label@2.1.11':
+    resolution: {integrity: sha512-3PKvDDxOn62k0oV1n4QtNtD2vpu+zYjXR7ojLBPaO6SPvhy53yg0vAmgNeBQeJW5rV3dffoRG+HYfLBZuzw0CQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -787,26 +1214,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-focus-guards@1.1.1':
-    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-focus-guards@1.1.3':
-    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-focus-scope@1.1.0':
-    resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==}
+  '@radix-ui/react-menu@2.1.20':
+    resolution: {integrity: sha512-VsUrXxFe9d2ScbZF0fR/oPR1+qjyeLs5p0jzG8h90puMoA9bq4SirYlXbE+USRg9Q2qTeJSFNqjw2nts8jJe4w==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -818,8 +1227,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-focus-scope@1.1.1':
-    resolution: {integrity: sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==}
+  '@radix-ui/react-navigation-menu@1.2.18':
+    resolution: {integrity: sha512-K9HiuxZ6xCwSaHcIuUpxyhy4w5gpwzWjh9dHTSbMN3Ix4qAyVObS9RlU3zMycb0PO3v9Tpk0BXMwWvXOUbVXew==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -831,8 +1240,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-focus-scope@1.1.7':
-    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+  '@radix-ui/react-popover@1.1.19':
+    resolution: {integrity: sha512-jkrTdQVxnIB8fpn0NyyxW9CTB5aCXZZelVz5z+Xmii6g5WxMqS3fInNslZ63puP39+Puu4jYohUK31y3dT87gQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -844,31 +1253,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-icons@1.3.0':
-    resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
-    peerDependencies:
-      react: ^16.x || ^17.x || ^18.x
-
-  '@radix-ui/react-id@1.1.0':
-    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-id@1.1.1':
-    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-label@2.1.0':
-    resolution: {integrity: sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==}
+  '@radix-ui/react-popper@1.3.3':
+    resolution: {integrity: sha512-mS7dGpyjv6b+gsDjLF7e0ia1W4Im1B1hSCy2yuXlHuvnZxHKagfDaobt/KAKt27EpZMit2pss8eJBVyVjEWM+g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -880,8 +1266,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-menu@2.1.2':
-    resolution: {integrity: sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==}
+  '@radix-ui/react-portal@1.1.13':
+    resolution: {integrity: sha512-z3oXfmaHLJTF1wktbjgD6cn9jiEbq3WSondB10LIuIt2m2Ym4iJlrW04/euMwENDdWDdE7z+OuY7Qyp1YpRSwA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -893,8 +1279,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-navigation-menu@1.2.1':
-    resolution: {integrity: sha512-egDo0yJD2IK8L17gC82vptkvW1jLeni1VuqCyzY727dSJdk5cDjINomouLoNk8RVF7g2aNIfENKWL4UzeU9c8Q==}
+  '@radix-ui/react-presence@1.1.7':
+    resolution: {integrity: sha512-zBZ4QM5XG3JRanDmqXYf3MD6th4AFXFmgU6KNMFzUaV6F3uw9I5/zjMUvFriSEn5ewo1nxuibvyxJdmLlDcslA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -906,8 +1292,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popover@1.1.15':
-    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
+  '@radix-ui/react-primitive@2.1.7':
+    resolution: {integrity: sha512-bC3NiwsprbxKjuon9l7X6BUTw7FPVzEYaL92MPEY5SCd/9hUTPXVFtVwRix7778wtRsVao+zE062gL79FZleeQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -919,8 +1305,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popper@1.2.0':
-    resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
+  '@radix-ui/react-roving-focus@1.1.15':
+    resolution: {integrity: sha512-40svmmugfM3mUN7VUDGVE1tQGOhyi8enlGD0CNJEcMM36C1f71PKM21DFgNHUfem0XnA+d8H8oN3Z9ZpJjSslg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -932,8 +1318,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popper@1.2.1':
-    resolution: {integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==}
+  '@radix-ui/react-scroll-area@1.2.14':
+    resolution: {integrity: sha512-bBODCWZK7JTbQLHs0uIP4f73wIWatakK4OS33UzkR1x897wu0PuO658a3f+6P2GEGyDzGYMuHRatMVoAk9WZTw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -945,8 +1331,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-popper@1.2.8':
-    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+  '@radix-ui/react-select@2.3.3':
+    resolution: {integrity: sha512-L5RQTXz6Anxsf9CCv+pTgiAsUpyVj7rJxsGtmhFaEOJ++cVfXucv4qWfsIO0AIB4NAhi3yovWGVMKKS1Xf1Wrg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -958,21 +1344,17 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-portal@1.1.2':
-    resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
+  '@radix-ui/react-slot@1.3.0':
+    resolution: {integrity: sha512-MojKku4U/miO8Av4Dkb+ctMAQx7JmY96LmtDQlAarCRtd7rN52QCSzBF+XAvr5S6coSVj9HEPBgHAHKEJVk/WA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-portal@1.1.3':
-    resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==}
+  '@radix-ui/react-switch@1.3.3':
+    resolution: {integrity: sha512-1+mlB4/lxJfk5tgJ4g+R5mUCbRpPE1T9+UsEyeLYbGgMtwiMgmuTnfKz4Mw1nHALHjuwyxw4MLd4cSHn6pNSlQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -984,8 +1366,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-portal@1.1.9':
-    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+  '@radix-ui/react-tabs@1.1.17':
+    resolution: {integrity: sha512-nRyXnrAVCwjeXcHbvEbLS6ndbTeKHG1RqCP4A8Gw5L4cemDzPXdD8rAmr6wet0v57R69wGvuIIsFjHSVkZiMzQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -997,8 +1379,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-presence@1.1.1':
-    resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
+  '@radix-ui/react-toast@1.2.19':
+    resolution: {integrity: sha512-SxfVZfVOibWKWdkf0Xx1awW2d09fQu4V4PXDY1j5hi4MVf7MWdJZqTBJMa1KWtOr1S6GGtCk02nniZ0Iia+dHw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1010,8 +1392,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-presence@1.1.2':
-    resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
+  '@radix-ui/react-tooltip@1.2.12':
+    resolution: {integrity: sha512-U3HoftgWnmla78vzQbLvKKb7bUYJxoiiqYFzp1wu/TBMyDqMZSuCl3aRICsD6EfVEwcJD2mumGDGUXLFVqQHKA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1023,112 +1405,80 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-presence@1.1.4':
-    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
+  '@radix-ui/react-use-callback-ref@1.1.2':
+    resolution: {integrity: sha512-xCso9j1/u8sEgP1RNHjFrXJLApL8LiqOkI1R4ywuN00rxWdYg4oQXuwKLS3i0j5NWLromUD27/4nlxj2UFVvIw==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-presence@1.1.5':
-    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+  '@radix-ui/react-use-controllable-state@1.2.3':
+    resolution: {integrity: sha512-PLzC90MS+ReootmjC597dvopoelpZ8Q61HJkDXZSExitIq7PL55vHNnesAHwguHK0aPfBnpdNzQtv1uliaqQrA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-primitive@2.0.0':
-    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
+  '@radix-ui/react-use-effect-event@0.0.3':
+    resolution: {integrity: sha512-6c8ZqvPTWILEKnyVkP53EGRCcpnJiKTC21sS/6R1GF5xKyHJJWQEPfkqlcgUkdRQivd6tb23abUwe4ngWmY0JA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-primitive@2.0.1':
-    resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==}
+  '@radix-ui/react-use-is-hydrated@0.1.1':
+    resolution: {integrity: sha512-qwOiz4Tjo8CNnrOLAYUMXeZwDzXgXpvK4TKQPmWLECM9XoWvA6+0Z2/7Ag3A4ivjS4ovbLJPbskkxioFyBhr8A==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-primitive@2.1.3':
-    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+  '@radix-ui/react-use-layout-effect@1.1.2':
+    resolution: {integrity: sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-roving-focus@1.1.0':
-    resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
+  '@radix-ui/react-use-previous@1.1.2':
+    resolution: {integrity: sha512-IGBQPtRFdhN6MQ8dbegVmBq1LVZluya3F1jWY+puIcQC3MHctRwTDSBWCkL/3ZcnMJLTMJ++Z+ktmvg0F89iCw==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-scroll-area@1.2.1':
-    resolution: {integrity: sha512-FnM1fHfCtEZ1JkyfH/1oMiTcFBQvHKl4vD9WnpwkLgtF+UmnXMCad6ECPTaAjcDjam+ndOEJWgHyKDGNteWSHw==}
+  '@radix-ui/react-use-rect@1.1.2':
+    resolution: {integrity: sha512-d8a+bBY/FxikNPlgJJoaBHZX+zKVbWHYJGTLnLvveQgFSTntkGdEKv3JDtHrMS0DNYpllz2nRsTLGLKYttbpmw==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-select@2.1.2':
-    resolution: {integrity: sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==}
+  '@radix-ui/react-use-size@1.1.2':
+    resolution: {integrity: sha512-giWQp+4mxjBPt4KZ0MmyuykFNWfbDxKt4x+fPkRYmgRFJSbCZFzUglvMb/Kjn38tm10YP4ufiQZDx3zna4LU6w==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-separator@1.1.7':
-    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+  '@radix-ui/react-visually-hidden@1.2.7':
+    resolution: {integrity: sha512-1wNZBggTDK3GRuuQ6nP4k2yi7a6l7I5qbMPbZcRsrGsGVead/f/d5FhEzUvqFs0bcrDLx7n1zKQ3JvLR6whaaw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1140,263 +1490,249 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-slot@1.1.0':
-    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@radix-ui/rect@1.1.2':
+    resolution: {integrity: sha512-xnXE7wG13PI+cxieVssYXlQJuYVRhH9NBoxt3KNwzghDIA69GMm7d4wXRouHIYjE+KvS6U/MsMO73NdS2MH9ZA==}
 
-  '@radix-ui/react-slot@1.1.1':
-    resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==}
+  '@react-oauth/google@0.12.1':
+    resolution: {integrity: sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
 
-  '@radix-ui/react-slot@1.2.3':
-    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rolldown/pluginutils@1.0.0-beta.27':
+    resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
-  '@radix-ui/react-switch@1.1.1':
-    resolution: {integrity: sha512-diPqDDoBcZPSicYoMWdWx+bCPuTRH4QSp9J+65IvtdS0Kuzt67bI6n32vCj8q6NZmYW/ah+2orOtMwcX5eQwIg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-android-arm-eabi@4.62.2':
+    resolution: {integrity: sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg==}
+    cpu: [arm]
+    os: [android]
 
-  '@radix-ui/react-tabs@1.1.1':
-    resolution: {integrity: sha512-3GBUDmP2DvzmtYLMsHmpA1GtR46ZDZ+OreXM/N+kkQJOPIgytFWWTfDQmBQKBvaFS0Vno0FktdbVzN28KGrMdw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-android-arm64@4.62.2':
+    resolution: {integrity: sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw==}
+    cpu: [arm64]
+    os: [android]
 
-  '@radix-ui/react-toast@1.2.2':
-    resolution: {integrity: sha512-Z6pqSzmAP/bFJoqMAston4eSNa+ud44NSZTiZUmUen+IOZ5nBY8kzuU5WDBVyFXPtcW6yUalOHsxM/BP6Sv8ww==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-darwin-arm64@4.62.2':
+    resolution: {integrity: sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A==}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@radix-ui/react-tooltip@1.1.6':
-    resolution: {integrity: sha512-TLB5D8QLExS1uDn7+wH/bjEmRurNMTzNrtq7IjaS4kjion9NtzsTGkvR5+i7yc9q01Pi2KMM2cN3f8UG4IvvXA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-darwin-x64@4.62.2':
+    resolution: {integrity: sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA==}
+    cpu: [x64]
+    os: [darwin]
 
-  '@radix-ui/react-use-callback-ref@1.1.0':
-    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-freebsd-arm64@4.62.2':
+    resolution: {integrity: sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw==}
+    cpu: [arm64]
+    os: [freebsd]
 
-  '@radix-ui/react-use-callback-ref@1.1.1':
-    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-freebsd-x64@4.62.2':
+    resolution: {integrity: sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg==}
+    cpu: [x64]
+    os: [freebsd]
 
-  '@radix-ui/react-use-controllable-state@1.1.0':
-    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.2':
+    resolution: {integrity: sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg==}
+    cpu: [arm]
+    os: [linux]
 
-  '@radix-ui/react-use-controllable-state@1.2.2':
-    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-arm-musleabihf@4.62.2':
+    resolution: {integrity: sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA==}
+    cpu: [arm]
+    os: [linux]
 
-  '@radix-ui/react-use-effect-event@0.0.2':
-    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-arm64-gnu@4.62.2':
+    resolution: {integrity: sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@radix-ui/react-use-escape-keydown@1.1.0':
-    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-arm64-musl@4.62.2':
+    resolution: {integrity: sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@radix-ui/react-use-escape-keydown@1.1.1':
-    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-loong64-gnu@4.62.2':
+    resolution: {integrity: sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg==}
+    cpu: [loong64]
+    os: [linux]
 
-  '@radix-ui/react-use-layout-effect@1.1.0':
-    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-loong64-musl@4.62.2':
+    resolution: {integrity: sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ==}
+    cpu: [loong64]
+    os: [linux]
 
-  '@radix-ui/react-use-layout-effect@1.1.1':
-    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-ppc64-gnu@4.62.2':
+    resolution: {integrity: sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A==}
+    cpu: [ppc64]
+    os: [linux]
 
-  '@radix-ui/react-use-previous@1.1.0':
-    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-ppc64-musl@4.62.2':
+    resolution: {integrity: sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w==}
+    cpu: [ppc64]
+    os: [linux]
 
-  '@radix-ui/react-use-rect@1.1.0':
-    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-riscv64-gnu@4.62.2':
+    resolution: {integrity: sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg==}
+    cpu: [riscv64]
+    os: [linux]
 
-  '@radix-ui/react-use-rect@1.1.1':
-    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-riscv64-musl@4.62.2':
+    resolution: {integrity: sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q==}
+    cpu: [riscv64]
+    os: [linux]
 
-  '@radix-ui/react-use-size@1.1.0':
-    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-s390x-gnu@4.62.2':
+    resolution: {integrity: sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg==}
+    cpu: [s390x]
+    os: [linux]
 
-  '@radix-ui/react-use-size@1.1.1':
-    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  '@rollup/rollup-linux-x64-gnu@4.62.2':
+    resolution: {integrity: sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A==}
+    cpu: [x64]
+    os: [linux]
 
-  '@radix-ui/react-visually-hidden@1.1.0':
-    resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-linux-x64-musl@4.62.2':
+    resolution: {integrity: sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg==}
+    cpu: [x64]
+    os: [linux]
 
-  '@radix-ui/react-visually-hidden@1.1.1':
-    resolution: {integrity: sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rollup/rollup-openbsd-x64@4.62.2':
+    resolution: {integrity: sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg==}
+    cpu: [x64]
+    os: [openbsd]
 
-  '@radix-ui/rect@1.1.0':
-    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+  '@rollup/rollup-openharmony-arm64@4.62.2':
+    resolution: {integrity: sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA==}
+    cpu: [arm64]
+    os: [openharmony]
 
-  '@radix-ui/rect@1.1.1':
-    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+  '@rollup/rollup-win32-arm64-msvc@4.62.2':
+    resolution: {integrity: sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg==}
+    cpu: [arm64]
+    os: [win32]
 
-  '@react-oauth/google@0.12.1':
-    resolution: {integrity: sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
+  '@rollup/rollup-win32-ia32-msvc@4.62.2':
+    resolution: {integrity: sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.62.2':
+    resolution: {integrity: sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.62.2':
+    resolution: {integrity: sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@tabby_ai/hijri-converter@1.0.5':
+    resolution: {integrity: sha512-r5bClKrcIusDoo049dSL8CawnHR6mRdDwhlQuIgZRNty68q0x8k3Lf1BtPAMxRf/GgnHBnIO4ujd3+GQdLWzxQ==}
+    engines: {node: '>=16.0.0'}
+
+  '@tailwindcss/node@4.3.2':
+    resolution: {integrity: sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.2':
+    resolution: {integrity: sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.2':
+    resolution: {integrity: sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.2':
+    resolution: {integrity: sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.2':
+    resolution: {integrity: sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.2':
+    resolution: {integrity: sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
 
-  '@rushstack/eslint-patch@1.7.0':
-    resolution: {integrity: sha512-Jh4t/593gxs0lJZ/z3NnasKlplXT2f+4y/LZYuaKZW5KAaiVFL/fThhs+17EbUd53jUVJ0QudYCBGbN/psvaqg==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.2':
+    resolution: {integrity: sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
 
-  '@swc/counter@0.1.3':
-    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.2':
+    resolution: {integrity: sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.2':
+    resolution: {integrity: sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
 
-  '@swc/helpers@0.5.5':
-    resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
+  '@tailwindcss/oxide-linux-x64-musl@4.3.2':
+    resolution: {integrity: sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
 
-  '@tanstack/query-core@5.60.6':
-    resolution: {integrity: sha512-tI+k0KyCo1EBJ54vxK1kY24LWj673ujTydCZmzEZKAew4NqZzTaVQJEuaG1qKj2M03kUHN46rchLRd+TxVq/zQ==}
+  '@tailwindcss/oxide-wasm32-wasi@4.3.2':
+    resolution: {integrity: sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.2':
+    resolution: {integrity: sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
 
-  '@tanstack/react-query@5.61.0':
-    resolution: {integrity: sha512-SBzV27XAeCRBOQ8QcC94w2H1Md0+LI0gTWwc3qRJoaGuewKn5FNW4LSqwPFJZVEItfhMfGT7RpZuSFXjTi12pQ==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.2':
+    resolution: {integrity: sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.2':
+    resolution: {integrity: sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.3.2':
+    resolution: {integrity: sha512-rjVWYCa7Ngbi5AarT6k8TkxUG3Wl1QKzHdIZVsjZSzf36Jmo2IKZt/NHRAwly8oDkbBOH0YTu+CHuf9jPxMc+g==}
+
+  '@tanstack/query-core@5.101.2':
+    resolution: {integrity: sha512-hH5MLoJhF7KaIGd7q3xTXGXvslI+GYlM1Z/35aSHHWaCJWB7XvTSHYuV3eM7tw+aE0mT/xMro4M4Q9rCGHT0lw==}
+
+  '@tanstack/react-query@5.101.2':
+    resolution: {integrity: sha512-seDkr6kzGzX1okaaTtZPtgA688CDPlXUz1C6xSg0ESqn04Vuc8tlrYms1s3de+znBqhPVxFRfpAfUf+6XvfPWg==}
     peerDependencies:
       react: ^18 || ^19
 
@@ -1411,6 +1747,53 @@ packages:
     resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
     engines: {node: '>=12'}
 
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react@16.3.2':
+    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
   '@types/hast@2.3.10':
     resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
 
@@ -1423,97 +1806,152 @@ packages:
   '@types/node@20.11.5':
     resolution: {integrity: sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==}
 
-  '@types/prop-types@15.7.11':
-    resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
+  '@types/papaparse@5.5.2':
+    resolution: {integrity: sha512-gFnFp/JMzLHCwRf7tQHrNnfhN4eYBVYYI897CGX4MY1tzY9l2aLkVyx2IlKZ/SAqDbB3I1AOZW5gTMGGsqWliA==}
 
-  '@types/react-dom@18.2.18':
-    resolution: {integrity: sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==}
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react-syntax-highlighter@15.5.13':
+    resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}
 
-  '@types/react@18.2.48':
-    resolution: {integrity: sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==}
+  '@types/react@19.2.17':
+    resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}
 
-  '@types/scheduler@0.16.8':
-    resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
+  '@types/set-cookie-parser@2.4.10':
+    resolution: {integrity: sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw==}
 
-  '@types/semver@7.5.6':
-    resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
+  '@types/statuses@2.0.6':
+    resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
 
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
-  '@typescript-eslint/eslint-plugin@6.19.0':
-    resolution: {integrity: sha512-DUCUkQNklCQYnrBSSikjVChdc84/vMPDQSgJTHBZ64G9bA9w0Crc0rd2diujKbTdp6w2J47qkeHQLoi0rpLCdg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/eslint-plugin@8.63.0':
+    resolution: {integrity: sha512-rvwSgqT+DHpWdzfSzPatRLm02a0GlESt++9iy3hLCDY4BgkaLcl8LBi9Yh7XGFBpwcBE/K3024QuXWTpbz4FfQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      '@typescript-eslint/parser': ^8.63.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/parser@6.19.0':
-    resolution: {integrity: sha512-1DyBLG5SH7PYCd00QlroiW60YJ4rWMuUGa/JBV0iZuqi4l4IK3twKPq5ZkEebmGqRjXWVgsUzfd3+nZveewgow==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/parser@8.63.0':
+    resolution: {integrity: sha512-gwh4gvvlaVDKKxyfxMG+Gnu1u9X0OQBwyGLkbwB65dIzBKnxeRiJlNFqlI3zwVhNXJIs6qV7mlFCn/BIajlVig==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/project-service@8.63.0':
+    resolution: {integrity: sha512-e5dh0/UI0ok53AlZ5wRkXCB32z/f2jUZqPR/ygAw5WYaSw8j9EoJWlS7wQjr/dmOaqWjnPIn2m+HhVPCMWGZVQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/scope-manager@6.19.0':
-    resolution: {integrity: sha512-dO1XMhV2ehBI6QN8Ufi7I10wmUovmLU0Oru3n5LVlM2JuzB4M+dVphCPLkVpKvGij2j/pHBWuJ9piuXx+BhzxQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/scope-manager@8.63.0':
+    resolution: {integrity: sha512-uUyfMWCnDSN8bCpcrY8nGP2BLkQ9Xn0GsipcONcpIDWhwhO4ZSyHvyS14U3X75mzxWxL3I2UZIrenTzdzcJO8A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/type-utils@6.19.0':
-    resolution: {integrity: sha512-mcvS6WSWbjiSxKCwBcXtOM5pRkPQ6kcDds/juxcy/727IQr3xMEcwr/YLHW2A2+Fp5ql6khjbKBzOyjuPqGi/w==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@typescript-eslint/tsconfig-utils@8.63.0':
+    resolution: {integrity: sha512-sUAbkulqBAsncKnbRP3+7CtQFRKicexnj7ZwNC6ddCR7EmrXvjvdCYMJbUIqMd6lwoEriZjwLo08aS5tSjVMHg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/type-utils@8.63.0':
+    resolution: {integrity: sha512-Nzzh/OGxVCOjObjaj1CQF2RUasyYy2Jfuh+zZ3PjLzG2fYRriAiZLib9UKtO+CpQAS3YHiAS+ckZDclwqI1TPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/types@8.63.0':
+    resolution: {integrity: sha512-xyLtl9DUBBFrcJS4x2pIqGLH68/tC2uOa4Z7pUteW09D3bXnnXUom4dyPikzWgB7llmIc1zoeI3aoUdC4rPK/Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.63.0':
+    resolution: {integrity: sha512-ygBkU+B7ex5UI/gKhaqexWev79uISfIv7XQCRNYO/jmD8rGLPyWLAb3KMRT6nd8Gt9bmUBi9+iX6tBdYfOY81Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/utils@8.63.0':
+    resolution: {integrity: sha512-fUKaeAvrTuQg/Tgt3nliAUSZHJM6DlCcfyEmxCvlX8kieWSStBX+5O5Fnidtc3i2JrH+9c/GL4RY2iasd/GPTA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/visitor-keys@8.63.0':
+    resolution: {integrity: sha512-UexrHGnGTpbuQHct2ExOc2ZcFbGUS9FOesCxxqdBGcpI1BxYu/LZ6U8Aq6/72XtF/qRBk9nhuGHFJIXXMhPMdw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@vitejs/plugin-react@4.7.0':
+    resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+
+  '@vitest/coverage-v8@2.1.9':
+    resolution: {integrity: sha512-Z2cOr0ksM00MpEfyVE8KXIYPEcBFxdbLSs56L8PO0QQMxt/6bDj45uQfxoc96v05KW3clk7vvgP0qfDit9DmfQ==}
+    peerDependencies:
+      '@vitest/browser': 2.1.9
+      vitest: 2.1.9
     peerDependenciesMeta:
-      typescript:
+      '@vitest/browser':
         optional: true
 
-  '@typescript-eslint/types@6.19.0':
-    resolution: {integrity: sha512-lFviGV/vYhOy3m8BJ/nAKoAyNhInTdXpftonhWle66XHAtT1ouBlkjL496b5H5hb8dWXHwtypTqgtb/DEa+j5A==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@vitest/expect@2.1.9':
+    resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
 
-  '@typescript-eslint/typescript-estree@6.19.0':
-    resolution: {integrity: sha512-o/zefXIbbLBZ8YJ51NlkSAt2BamrK6XOmuxSR3hynMIzzyMY33KuJ9vuMdFSXW+H0tVvdF9qBPTHA91HDb4BIQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@vitest/mocker@2.1.9':
+    resolution: {integrity: sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==}
     peerDependencies:
-      typescript: '*'
+      msw: ^2.4.9
+      vite: ^5.0.0
     peerDependenciesMeta:
-      typescript:
+      msw:
+        optional: true
+      vite:
         optional: true
 
-  '@typescript-eslint/utils@6.19.0':
-    resolution: {integrity: sha512-QR41YXySiuN++/dC9UArYOg4X86OAYP83OWTewpVx5ct1IZhjjgTLocj7QNxGhWoTqknsgpl7L+hGygCO+sdYw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
+  '@vitest/pretty-format@2.1.9':
+    resolution: {integrity: sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==}
 
-  '@typescript-eslint/visitor-keys@6.19.0':
-    resolution: {integrity: sha512-hZaUCORLgubBvtGpp1JEFEazcuEdfxta9j4iUwdSAr7mEsYYAp3EAUyCZk3VEEqGj6W+AV4uWyrDGtrlawAsgQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@vitest/runner@2.1.9':
+    resolution: {integrity: sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==}
 
-  '@ungap/structured-clone@1.2.0':
-    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+  '@vitest/snapshot@2.1.9':
+    resolution: {integrity: sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==}
+
+  '@vitest/spy@2.1.9':
+    resolution: {integrity: sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==}
+
+  '@vitest/utils@2.1.9':
+    resolution: {integrity: sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==}
 
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn@8.11.3:
-    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
+  acorn@8.17.0:
+    resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ajv@6.15.0:
+    resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==}
 
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
@@ -1527,27 +1965,17 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
   ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-hidden@1.2.3:
-    resolution: {integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==}
-    engines: {node: '>=10'}
-
   aria-hidden@1.2.6:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
@@ -1555,42 +1983,64 @@ packages:
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
   array-buffer-byte-length@1.0.0:
     resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
 
-  array-includes@3.1.7:
-    resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
 
-  array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
+  array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.findlast@1.2.5:
+    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
+    engines: {node: '>= 0.4'}
 
-  array.prototype.findlastindex@1.2.3:
-    resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
+  array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
     engines: {node: '>= 0.4'}
 
   array.prototype.flat@1.3.2:
     resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
     engines: {node: '>= 0.4'}
 
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
+
   array.prototype.flatmap@1.3.2:
     resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
     engines: {node: '>= 0.4'}
 
-  array.prototype.tosorted@1.1.2:
-    resolution: {integrity: sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==}
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.tosorted@1.1.4:
+    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
+    engines: {node: '>= 0.4'}
 
   arraybuffer.prototype.slice@1.0.2:
     resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
     engines: {node: '>= 0.4'}
 
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
   ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
-  asynciterator.prototype@1.0.0:
-    resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==}
-
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
@@ -1598,39 +2048,46 @@ packages:
     resolution: {integrity: sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==}
     engines: {node: '>=4'}
 
-  autoprefixer@10.4.20:
-    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-
   available-typed-arrays@1.0.5:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
     engines: {node: '>= 0.4'}
 
-  axe-core@4.7.0:
-    resolution: {integrity: sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==}
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
+  axe-core@4.12.1:
+    resolution: {integrity: sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==}
     engines: {node: '>=4'}
 
-  axios@1.8.2:
-    resolution: {integrity: sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==}
+  axios@1.18.1:
+    resolution: {integrity: sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==}
 
-  axobject-query@3.2.1:
-    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  baseline-browser-mapping@2.10.42:
+    resolution: {integrity: sha512-c/jurFrDLyui7o1J86yLkRu4LMsTYcBohveus7/I2Hzdn9KIP2bdJPTue/lR1KH46enoPbD77GKeSYNdyPoD3Q==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
 
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
-  brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+  brace-expansion@2.1.2:
+    resolution: {integrity: sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA==}
+
+  brace-expansion@5.0.7:
+    resolution: {integrity: sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==}
+    engines: {node: 18 || 20 || >=22}
 
   braces@3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
@@ -1641,9 +2098,9 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
 
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
@@ -1652,17 +2109,25 @@ packages:
   call-bind@1.0.5:
     resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==}
 
+  call-bind@1.0.9:
+    resolution: {integrity: sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   caniuse-lite@1.0.30001671:
     resolution: {integrity: sha512-jocyVaSSfXg2faluE6hrWkMgDOiULBMca4QLtDT39hw1YxaIPHWc1CcTCKkPmHgGH6tKji6ZNbMSmUAvENf2/A==}
 
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -1676,19 +2141,23 @@ packages:
   character-reference-invalid@1.1.4:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
 
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
 
-  class-variance-authority@0.7.0:
-    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
 
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
-  clsx@2.0.0:
-    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
-    engines: {node: '>=6'}
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
 
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
@@ -1721,37 +2190,62 @@ packages:
   comma-separated-tokens@1.0.8:
     resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
   cookie@0.7.2:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
-  csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
   damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+
   date-fns-jalali@4.1.0-0:
     resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
 
-  date-fns@4.1.0:
-    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+  date-fns@4.4.0:
+    resolution: {integrity: sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==}
 
   debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
@@ -1770,6 +2264,22 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -1777,6 +2287,10 @@ packages:
     resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==}
     engines: {node: '>= 0.4'}
 
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
   define-properties@1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
@@ -1793,26 +2307,22 @@ packages:
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
-  detect-node-es@1.1.0:
-    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
-
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
-  dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
 
-  doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
@@ -1834,10 +2344,26 @@ packages:
     resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
     engines: {node: '>=10.13.0'}
 
+  enhanced-resolve@5.21.6:
+    resolution: {integrity: sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==}
+    engines: {node: '>=10.13.0'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  es-abstract-get@1.0.0:
+    resolution: {integrity: sha512-6PMWXpdhshVvFp+FoWYs1EvG1Nj0tvk0dZM+XcK0xMEM1czRVcP6ohqPWHy6qPagSpC8j4+p89WXlT+xXJs/fg==}
+    engines: {node: '>= 0.4'}
+
   es-abstract@1.22.3:
     resolution: {integrity: sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==}
     engines: {node: '>= 0.4'}
 
+  es-abstract@1.24.2:
+    resolution: {integrity: sha512-2FpH9Q5i2RRwyEP1AylXe6nYLR5OhaJTZwmlcP0dL/+JCbgg7yyEo/sEK6HeGZRf3dFpWwThaRHVApXSkW3xeg==}
+    engines: {node: '>= 0.4'}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -1846,13 +2372,21 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-iterator-helpers@1.0.15:
-    resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==}
+  es-iterator-helpers@1.4.0:
+    resolution: {integrity: sha512-c/A0P0oxkACDc+cKWw8evLXK83oBKgn0qPOqCYT4x9uolpCIJAcYvJC9QYKNDRPsTeGyCrQ326jrvgZWdCdK5Q==}
+    engines: {node: '>= 0.4'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
 
+  es-object-atoms@1.1.2:
+    resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==}
+    engines: {node: '>= 0.4'}
+
   es-set-tostringtag@2.1.0:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
@@ -1860,10 +2394,23 @@ packages:
   es-shim-unscopables@1.0.2:
     resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
 
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
+
   es-to-primitive@1.2.1:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
 
+  es-to-primitive@1.3.4:
+    resolution: {integrity: sha512-yPDz7wqpg1/mmHLmS3tcfTfbw5f1eryXvyghYBffGdERwe+mV7ZcWzTR8LR17Kvqt3qfPurjlonmnq3MKXIOXw==}
+    engines: {node: '>= 0.4'}
+
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -1872,10 +2419,10 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  eslint-config-next@14.1.0:
-    resolution: {integrity: sha512-SBX2ed7DoRFXC6CQSLc/SbLY9Ut6HxNB2wPTcoIWjUMd7aF7O/SIE7111L8FdZ9TXsNV4pulUDnfthpyPtbFUg==}
+  eslint-config-next@16.2.10:
+    resolution: {integrity: sha512-HSybLOY0QKf39i4FWUqPN0xWiNDi6A6UqJmZtgDkS3zMqjXTqULvj/sueXx3cdCG0mVG+qH6k5/qdegklH1d1w==}
     peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0
+      eslint: '>=9.0.0'
       typescript: '>=3.3.1'
     peerDependenciesMeta:
       typescript:
@@ -1891,6 +2438,27 @@ packages:
       eslint: '*'
       eslint-plugin-import: '*'
 
+  eslint-module-utils@2.14.0:
+    resolution: {integrity: sha512-W2WCRZ9Dqntd+2u8jJcVMV2PKulc6RdLgUUoh/yQr3uB6lo/ZOeGx11sv60/8S4QFFKNslAlWhr9u0Ef7ZW6Ig==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+
   eslint-module-utils@2.8.0:
     resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
     engines: {node: '>=4'}
@@ -1912,51 +2480,63 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
 
-  eslint-plugin-import@2.29.1:
-    resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
+  eslint-plugin-import@2.32.0:
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
     engines: {node: '>=4'}
     peerDependencies:
       '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
     peerDependenciesMeta:
       '@typescript-eslint/parser':
         optional: true
 
-  eslint-plugin-jsx-a11y@6.8.0:
-    resolution: {integrity: sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==}
+  eslint-plugin-jsx-a11y@6.10.2:
+    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
     engines: {node: '>=4.0'}
     peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
 
-  eslint-plugin-react-hooks@4.6.0:
-    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
-    engines: {node: '>=10'}
+  eslint-plugin-react-hooks@7.1.1:
+    resolution: {integrity: sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==}
+    engines: {node: '>=18'}
     peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0
 
-  eslint-plugin-react@7.33.2:
-    resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
+  eslint-plugin-react@7.37.5:
+    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
     engines: {node: '>=4'}
     peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
-  eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint@8.56.0:
-    resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@9.39.5:
+    resolution: {integrity: sha512-DgZS62aPLXKlnxILS/AYCoRvHaZeXceIzlXPkkGGzJWSow1aEk0lbTlxUSlyjC8jcaKxAdOnTDz+o1JFSBsyjw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
 
-  espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   esquery@1.5.0:
     resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
@@ -1970,13 +2550,24 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  expect-type@1.4.0:
+    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
+    engines: {node: '>=12.0.0'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+
   fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -1987,15 +2578,33 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-string-truncated-width@3.0.3:
+    resolution: {integrity: sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==}
+
+  fast-string-width@3.0.2:
+    resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
+
+  fast-wrap-ansi@0.2.2:
+    resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
+
   fastq@1.16.0:
     resolution: {integrity: sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==}
 
   fault@1.0.4:
     resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
 
-  file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
 
   file-selector@2.1.2:
     resolution: {integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==}
@@ -2009,15 +2618,15 @@ packages:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
 
-  flat-cache@3.2.0:
-    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
 
   flatted@3.2.9:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
 
-  follow-redirects@1.15.9:
-    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+  follow-redirects@1.16.0:
+    resolution: {integrity: sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==}
     engines: {node: '>=4.0'}
     peerDependencies:
       debug: '*'
@@ -2028,6 +2637,10 @@ packages:
   for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
 
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
   foreground-child@3.1.1:
     resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
     engines: {node: '>=14'}
@@ -2036,15 +2649,18 @@ packages:
     resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
     engines: {node: '>= 6'}
 
+  form-data@4.0.6:
+    resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
+    engines: {node: '>= 6'}
+
   format@0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
 
-  fraction.js@4.3.7:
-    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
-
-  fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
 
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
@@ -2058,11 +2674,20 @@ packages:
     resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
     engines: {node: '>= 0.4'}
 
+  function.prototype.name@1.2.0:
+    resolution: {integrity: sha512-jObKIik1P2QjPHP5nz5BaOtUlfgS0fWo8IUByNXkM+o+02sJOi94em77GwJKQSJ3gfPHdgzLNrHc1uokV4P/ew==}
+    engines: {node: '>= 0.4'}
+
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
-  get-intrinsic@1.2.2:
-    resolution: {integrity: sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==}
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
 
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
@@ -2080,6 +2705,10 @@ packages:
     resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
     engines: {node: '>= 0.4'}
 
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
   get-tsconfig@4.7.2:
     resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==}
 
@@ -2091,29 +2720,26 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob@10.3.10:
-    resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  glob@10.5.0:
+    resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
-  glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
 
-  globals@13.24.0:
-    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
-    engines: {node: '>=8'}
+  globals@16.4.0:
+    resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
+    engines: {node: '>=18'}
 
   globalthis@1.0.3:
     resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
     engines: {node: '>= 0.4'}
 
-  globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-
-  gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
 
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
@@ -2122,8 +2748,9 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+  graphql@16.14.2:
+    resolution: {integrity: sha512-Chq1s4CY7jmh8gO2qvLIJyfCDIN+EHLFW/9iShnp1z8FjBQMoodWP1kDC36VAMXXIvAjj4ARa7ntfAV2BrjsbA==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
 
   has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
@@ -2135,12 +2762,15 @@ packages:
   has-property-descriptors@1.0.1:
     resolution: {integrity: sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==}
 
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
   has-proto@1.0.1:
     resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
     engines: {node: '>= 0.4'}
 
-  has-symbols@1.0.3:
-    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
     engines: {node: '>= 0.4'}
 
   has-symbols@1.1.0:
@@ -2159,19 +2789,59 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
+    engines: {node: '>= 0.4'}
+
   hast-util-parse-selector@2.2.5:
     resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
 
   hastscript@6.0.0:
     resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
 
+  headers-polyfill@5.0.1:
+    resolution: {integrity: sha512-1TJ6Fih/b8h5TIcv+1+Hw0PDQWJTKDKzFZzcKOiW1wJza3XoAQlkCuXLbymPYB8+ZQyw8mHvdw560e8zVFIWyA==}
+
+  hermes-estree@0.25.1:
+    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
+
+  hermes-parser@0.25.1:
+    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
+
   highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
 
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
   ignore@5.3.0:
     resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
     engines: {node: '>= 4'}
 
+  ignore@7.0.6:
+    resolution: {integrity: sha512-BAg6QkE8W+TuQLrrw0Ugr7HegXduRuuj8/ti2kSOc+jz1dmx8/WNcjr6XGnq5YpDWxFwwaavqD0+jIUOKelTsw==}
+    engines: {node: '>= 4'}
+
   import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -2180,19 +2850,17 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
-  inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
-
-  inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
 
   internal-slot@1.0.6:
     resolution: {integrity: sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==}
     engines: {node: '>= 0.4'}
 
-  invariant@2.2.4:
-    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
 
   is-alphabetical@1.0.4:
     resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
@@ -2203,6 +2871,10 @@ packages:
   is-array-buffer@3.0.2:
     resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
 
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
   is-arrayish@0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
 
@@ -2213,34 +2885,55 @@ packages:
   is-bigint@1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
 
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
 
   is-boolean-object@1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
     engines: {node: '>= 0.4'}
 
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
   is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
 
-  is-core-module@2.13.1:
-    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+  is-core-module@2.13.1:
+    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+
+  is-core-module@2.16.2:
+    resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
 
   is-date-object@1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
     engines: {node: '>= 0.4'}
 
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
   is-decimal@1.0.4:
     resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
 
+  is-document.all@1.0.0:
+    resolution: {integrity: sha512-+XSoyS05OdBbhFuELhgTCpFNHkpBOJqtsZfUFFpe5QTw+9Sjbh8zitxhQkYAo6wV7e1Vb8cAPvpCk9jGam/82g==}
+    engines: {node: '>= 0.4'}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  is-finalizationregistry@1.0.2:
-    resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
 
   is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
@@ -2257,55 +2950,93 @@ packages:
   is-hexadecimal@1.0.4:
     resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
 
-  is-map@2.0.2:
-    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
 
   is-negative-zero@2.0.2:
     resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
     engines: {node: '>= 0.4'}
 
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
+  is-node-process@1.2.0:
+    resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
+
   is-number-object@1.0.7:
     resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
     engines: {node: '>= 0.4'}
 
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
   is-regex@1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
 
-  is-set@2.0.2:
-    resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
 
   is-shared-array-buffer@1.0.2:
     resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
 
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
   is-string@1.0.7:
     resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
     engines: {node: '>= 0.4'}
 
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
   is-symbol@1.0.4:
     resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
     engines: {node: '>= 0.4'}
 
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
   is-typed-array@1.1.12:
     resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
     engines: {node: '>= 0.4'}
 
-  is-weakmap@2.0.1:
-    resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
 
   is-weakref@1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
 
-  is-weakset@2.0.2:
-    resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
 
   isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
@@ -2313,15 +3044,31 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  iterator.prototype@1.1.2:
-    resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
 
-  jackspeak@2.3.6:
-    resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
-    engines: {node: '>=14'}
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-source-maps@5.0.6:
+    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.2.0:
+    resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
+    engines: {node: '>=8'}
+
+  iterator.prototype@1.1.5:
+    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
+    engines: {node: '>= 0.4'}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  jiti@1.21.6:
-    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
 
   jose@4.15.9:
@@ -2330,8 +3077,22 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+  js-yaml@4.3.0:
+    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
+    hasBin: true
+
+  jsdom@25.0.1:
+    resolution: {integrity: sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^2.11.2
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
     hasBin: true
 
   json-buffer@3.0.1:
@@ -2347,6 +3108,11 @@ packages:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
 
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -2365,16 +3131,75 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
-  lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
 
-  lilconfig@3.1.2:
-    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
-    engines: {node: '>=14'}
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
 
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
@@ -2387,21 +3212,40 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
   lowlight@1.20.0:
     resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
 
-  lru-cache@10.1.0:
-    resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==}
-    engines: {node: 14 || >=16.14}
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
   lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
-  lucide-react@0.453.0:
-    resolution: {integrity: sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==}
+  lucide-react@0.577.0:
+    resolution: {integrity: sha512-4LjoFv2eEPwYDPg/CUdBJQSDfPyzXCRrVW1X7jrx/trgxnxkHFjnVZINbzvzxjN70dxychOfg+FTYwBiS3pQ5A==}
     peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  magicast@0.3.5:
+    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
 
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
@@ -2423,18 +3267,29 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
+  minimatch@10.2.5:
+    resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
+    engines: {node: 18 || 20 || >=22}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
-  minimatch@9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+  minimatch@3.1.5:
+    resolution: {integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==}
+
+  minimatch@9.0.9:
+    resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==}
     engines: {node: '>=16 || 14 >=14.17'}
 
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  minipass@7.0.4:
-    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
+  minipass@7.1.3:
+    resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
 
   ms@2.1.2:
@@ -2443,8 +3298,24 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+  msw@2.15.0:
+    resolution: {integrity: sha512-2wQAmKkQKxRuXvYJxVhPGG0wZNBQyD06oJvxqw90XqLvptdqxdlHrFUfEteKkpaNORX3Xzc+HtEl/q0nfmN2wQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      typescript: '>= 4.8.x'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  mute-stream@3.0.0:
+    resolution: {integrity: sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  nanoid@3.3.15:
+    resolution: {integrity: sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
 
   nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
@@ -2454,58 +3325,52 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  next-auth@4.24.10:
-    resolution: {integrity: sha512-8NGqiRO1GXBcVfV8tbbGcUgQkAGsX4GRzzXXea4lDikAsJtD5KiEY34bfhUOjHLvr6rT6afpcxw2H8EZqOV6aQ==}
+  next-auth@4.24.14:
+    resolution: {integrity: sha512-YRz6xFDXKUwiXSMMChbrBEWyFktZ1qZXEgeSHQQ3nsy08B4c/xLk6REeutRsIFwkjY/1+ShHnu07DN3JeJguig==}
     peerDependencies:
-      '@auth/core': 0.34.2
-      next: ^12.2.5 || ^13 || ^14 || ^15
-      nodemailer: ^6.6.5
-      react: ^17.0.2 || ^18
-      react-dom: ^17.0.2 || ^18
+      '@auth/core': 0.34.3
+      next: ^12.2.5 || ^13 || ^14 || ^15 || ^16
+      nodemailer: ^7.0.7
+      react: ^17.0.2 || ^18 || ^19
+      react-dom: ^17.0.2 || ^18 || ^19
     peerDependenciesMeta:
       '@auth/core':
         optional: true
       nodemailer:
         optional: true
 
-  next-themes@0.4.3:
-    resolution: {integrity: sha512-nG84VPkTdUHR2YeD89YchvV4I9RbiMAql3GiLEQlPvq1ioaqPaIReK+yMRdg/zgiXws620qS1rU30TiWmmG9lA==}
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  next@14.2.26:
-    resolution: {integrity: sha512-b81XSLihMwCfwiUVRRja3LphLo4uBBMZEzBBWMaISbKTwOmq3wPknIETy/8000tr7Gq4WmbuFYPS7jOYIf+ZJw==}
-    engines: {node: '>=18.17.0'}
+  next@16.2.10:
+    resolution: {integrity: sha512-2som5AVXb3kE6Yjine3/mNbBayYF58eguBWIVVUdr1y/L426xyVEgYxgBG+1QC34P2x5E+tcDup6XkuOAX3dCA==}
+    engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
-      '@playwright/test': ^1.41.2
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      '@playwright/test': ^1.51.1
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
       sass: ^1.3.0
     peerDependenciesMeta:
       '@opentelemetry/api':
         optional: true
       '@playwright/test':
         optional: true
+      babel-plugin-react-compiler:
+        optional: true
       sass:
         optional: true
 
   node-releases@2.0.18:
     resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
 
-  nodemailer@6.9.16:
-    resolution: {integrity: sha512-psAuZdTIRN08HKVd/E8ObdV6NO7NTBY3KsC30F7M4H1OnmLCUNaS56FpYxyb26zWLSyYF9Ozch9KYHhHegsiOQ==}
-    engines: {node: '>=6.0.0'}
-
-  normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-
-  normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
+  nwsapi@2.2.24:
+    resolution: {integrity: sha512-7YRhZ3jS45LwmSCT4b2sVFHt/WuovaktDU07QrtOBY2PXskss5a9jfmR9jptyumwXST+rFjrmppMY1KT/yn35A==}
 
   oauth@0.9.15:
     resolution: {integrity: sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==}
@@ -2518,13 +3383,13 @@ packages:
     resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
     engines: {node: '>= 6'}
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
 
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
   object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
@@ -2533,38 +3398,44 @@ packages:
     resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
     engines: {node: '>= 0.4'}
 
-  object.entries@1.1.7:
-    resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==}
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
-  object.fromentries@2.0.7:
-    resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
+  object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
     engines: {node: '>= 0.4'}
 
-  object.groupby@1.0.1:
-    resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
 
-  object.hasown@1.1.3:
-    resolution: {integrity: sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==}
+  object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
 
-  object.values@1.1.7:
-    resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
-  oidc-token-hash@5.0.3:
-    resolution: {integrity: sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==}
+  oidc-token-hash@5.2.0:
+    resolution: {integrity: sha512-6gj2m8cJZ+iSW8bm0FXdGF0YhIQbKrfP4yWTNzxc31U6MOjfEmB1rHvlYvxI1B7t7BCi1F2vYTT6YhtQRG4hxw==}
     engines: {node: ^10.13.0 || >=12.0.0}
 
-  once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-
-  openid-client@5.7.0:
-    resolution: {integrity: sha512-4GCCGZt1i2kTHpwvaC/sCpTpQqDnBzDzuJcJMbH+y1Q5qI8U8RBvoSh28svarXszZHR5BAMXbJPX1PGPRE3VOA==}
+  openid-client@5.7.1:
+    resolution: {integrity: sha512-jDBPgSVfTnkIh71Hg9pRvtJc6wTwqjRkN88+gCFtYWrlP4Yx2Dsrow8uPi3qLr/aeymPF3o2+dS+wOpglK04ew==}
 
   optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
 
+  outvariant@1.4.3:
+    resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
+
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -2573,8 +3444,11 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  papaparse@5.4.1:
-    resolution: {integrity: sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==}
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  papaparse@5.5.4:
+    resolution: {integrity: sha512-SwzWD9gl/ElwYLCI0nUja1mFJzjq2D8ziShfNBa7zCHzkOozeOGDwHWQ+tvCzEZcewecWZ5U7kUopDnG+DFYEQ==}
 
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
@@ -2583,14 +3457,13 @@ packages:
   parse-entities@2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
 
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
-  path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -2598,16 +3471,19 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  path-scurry@1.10.1:
-    resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
 
-  path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
 
-  picocolors@1.0.0:
-    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
 
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
@@ -2616,50 +3492,23 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
-  pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
+  picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
+    engines: {node: '>=12'}
 
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
+  playwright-core@1.61.1:
+    resolution: {integrity: sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
+  playwright@1.61.1:
+    resolution: {integrity: sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
 
   postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
@@ -2669,26 +3518,34 @@ packages:
     resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.16:
+    resolution: {integrity: sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==}
+    engines: {node: ^10 || ^12 || >=14}
+
   preact-render-to-string@5.2.6:
     resolution: {integrity: sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==}
     peerDependencies:
       preact: '>=10'
 
-  preact@10.24.3:
-    resolution: {integrity: sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==}
+  preact@10.29.7:
+    resolution: {integrity: sha512-DCHYrK/B10yUD3ZjLfhZ3WIE/9Vf9VFUODcRE2dRomTYDpJk6z6L9wecSfhfE6M9ZTHUdyQkoC46arIDhEV84Q==}
+    peerDependencies:
+      preact-render-to-string: '>=5'
+    peerDependenciesMeta:
+      preact-render-to-string:
+        optional: true
 
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
   pretty-format@3.8.0:
     resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
 
-  prisma@5.22.0:
-    resolution: {integrity: sha512-vtpjW3XuYCSnMsNVBjLMNkTj6OZbudcPPTPYHqX0CJfpcdWciI1dM8uHETwmDxxiqEwCIE6WvXucWUetJgfu/A==}
-    engines: {node: '>=16.13'}
-    hasBin: true
-
   prismjs@1.27.0:
     resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
     engines: {node: '>=6'}
@@ -2703,38 +3560,39 @@ packages:
   property-information@5.6.0:
     resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
 
-  proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+  proxy-from-env@2.1.0:
+    resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
+    engines: {node: '>=10'}
 
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  qr.js@0.0.0:
-    resolution: {integrity: sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==}
+  qrcode-generator@2.0.4:
+    resolution: {integrity: sha512-mZSiP6RnbHl4xL2Ap5HfkjLnmxfKcPWpWe/c+5XxCuetEenqmNFf1FH/ftXPCtFG5/TDobjsjz6sSNL0Sr8Z9g==}
 
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  react-day-picker@9.9.0:
-    resolution: {integrity: sha512-NtkJbuX6cl/VaGNb3sVVhmMA6LSMnL5G3xNL+61IyoZj0mUZFWTg4hmj7PHjIQ8MXN9dHWhUHFoJWG6y60DKSg==}
+  react-day-picker@9.14.0:
+    resolution: {integrity: sha512-tBaoDWjPwe0M5pGrum4H0SR6Lyk+BO9oHnp9JbKpGKW2mlraNPgP9BMfsg5pWpwrssARmeqk7YBl2oXutZTaHA==}
     engines: {node: '>=18'}
     peerDependencies:
       react: '>=16.8.0'
 
-  react-dom@18.2.0:
-    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+  react-dom@19.2.7:
+    resolution: {integrity: sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: ^19.2.7
 
-  react-dropzone@14.3.5:
-    resolution: {integrity: sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==}
+  react-dropzone@15.0.0:
+    resolution: {integrity: sha512-lGjYV/EoqEjEWPnmiSvH4v5IoIAwQM2W4Z1C0Q/Pw2xD0eVzKPS359BQTUMum+1fa0kH2nrKjuavmTPOGhpLPg==}
     engines: {node: '>= 10.13'}
     peerDependencies:
       react: '>= 16.8 || 18.0.0'
 
-  react-hook-form@7.53.1:
-    resolution: {integrity: sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==}
+  react-hook-form@7.81.0:
+    resolution: {integrity: sha512-ocbmr2p5KBMoAfj4WCUvped33lVi1Kd5DuDUvQDnB6VEAacOjPI/jMbtDdbhco4y9ct4xUuCmMY0b/C9L0QHjw==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
@@ -2742,24 +3600,17 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
-  react-qr-code@2.0.12:
-    resolution: {integrity: sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==}
-    peerDependencies:
-      react: ^16.x || ^17.x || ^18.x
-      react-native-svg: '*'
-    peerDependenciesMeta:
-      react-native-svg:
-        optional: true
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-remove-scroll-bar@2.3.6:
-    resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
-    engines: {node: '>=10'}
+  react-qr-code@2.2.0:
+    resolution: {integrity: sha512-e5nS0UUN22K3Nf8KBRUzemfdJ6OmnN5w+kbnj1lvJaol9RyVRFeGl05bCkxSN2ZegbLxjjYjX1+mmAoX9+fAhw==}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: '*'
+
+  react-refresh@0.17.0:
+    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
+    engines: {node: '>=0.10.0'}
 
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
@@ -2771,28 +3622,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-remove-scroll@2.6.0:
-    resolution: {integrity: sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-remove-scroll@2.6.2:
-    resolution: {integrity: sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-remove-scroll@2.7.1:
-    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': '*'
@@ -2801,16 +3632,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-style-singleton@2.2.1:
-    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
@@ -2826,19 +3647,16 @@ packages:
     peerDependencies:
       react: '>= 0.14.0'
 
-  react@18.2.0:
-    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+  react@19.2.7:
+    resolution: {integrity: sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==}
     engines: {node: '>=0.10.0'}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
 
-  reflect.getprototypeof@1.0.4:
-    resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
 
   refractor@3.6.0:
@@ -2851,6 +3669,14 @@ packages:
     resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
     engines: {node: '>= 0.4'}
 
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -2866,15 +3692,24 @@ packages:
     resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
     hasBin: true
 
+  rettime@0.11.11:
+    resolution: {integrity: sha512-ILJRqVWBCTlg9r42fFgwVZx1gnFAcQF8mRoMkbgQfIrjEDf9nbBFDFx00oloOa+Q869FUtaYDXZvEfnecQSCoQ==}
+
   reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
+  rollup@4.62.2:
+    resolution: {integrity: sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rrweb-cssom@0.7.1:
+    resolution: {integrity: sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==}
+
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -2882,39 +3717,77 @@ packages:
     resolution: {integrity: sha512-ZdQ0Jeb9Ofti4hbt5lX3T2JcAamT9hfzYU1MNB+z/jaEbB6wfFfPIR/zEORmZqobkCCJhSjodobH6WHNmJ97dg==}
     engines: {node: '>=0.4'}
 
+  safe-array-concat@1.1.4:
+    resolution: {integrity: sha512-wtZlHyOje6OZTGqAoaDKxFkgRtkF9CnHAVnCHKfuj200wAgL+bSJhdsCD2l0Qx/2ekEXjPWcyKkfGb5CPboslg==}
+    engines: {node: '>=0.4'}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
   safe-regex-test@1.0.2:
     resolution: {integrity: sha512-83S9w6eFq12BBIJYvjMux6/dkirb8+4zJRA9cxNBVb7Wq5fJBW+Xze48WqR8pxua7bDuAaaAxtVVd4Idjp1dBQ==}
     engines: {node: '>= 0.4'}
 
-  scheduler@0.23.0:
-    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
     engines: {node: '>=10'}
     hasBin: true
 
+  set-cookie-parser@3.1.2:
+    resolution: {integrity: sha512-5/r/lTwbJ3zQ+qwdUFZYeRNqda7P5HD8zQKqlSjdGt1/S0cjLAphHusj4Y58ahDtWn/g32xrIS58/ikOvwl0Lw==}
+
   set-function-length@1.2.0:
     resolution: {integrity: sha512-4DBHDoyHlM1IRPGYcoxexgh67y4ueR53FKV1yyxwFMY7aCqcN/38M1+SwZ/qJQ8iLv7+ck385ot4CcisOAPT9w==}
     engines: {node: '>= 0.4'}
 
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
   set-function-name@2.0.1:
     resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
     engines: {node: '>= 0.4'}
 
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
   sharp@0.34.2:
     resolution: {integrity: sha512-lszvBmB9QURERtyKT2bNmsgxXK0ShJrL/fvqlonCo7e6xBF8nT8xU6pW+PMIbLsz0RxQk3rgH9kd8UmvOzlMJg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
+  sharp@0.34.5:
+    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -2923,9 +3796,28 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  side-channel-list@1.0.1:
+    resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
   side-channel@1.0.4:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
 
+  side-channel@1.1.1:
+    resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==}
+    engines: {node: '>= 0.4'}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -2933,10 +3825,6 @@ packages:
   simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
 
-  slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -2944,9 +3832,22 @@ packages:
   space-separated-tokens@1.1.5:
     resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
 
-  streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
+  strict-event-emitter@0.5.1:
+    resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
 
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
@@ -2956,19 +3857,39 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
-  string.prototype.matchall@4.0.10:
-    resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
+  string.prototype.includes@2.0.1:
+    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+
+  string.prototype.trim@1.2.11:
+    resolution: {integrity: sha512-PwvK7BU+CMTJGYQCTZb5RWXIML92lftJLhQz1tBzgKiqGxJaMlBAa48POXaNAC2s4y8jr3EFqrkF9+44neS46w==}
+    engines: {node: '>= 0.4'}
 
   string.prototype.trim@1.2.8:
     resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
     engines: {node: '>= 0.4'}
 
+  string.prototype.trimend@1.0.10:
+    resolution: {integrity: sha512-2+3aDAOmPTmuFwjDnmJG2ctEkQKVki7vOSqaxkv42Mowj1V6PnvuwFCRrR5lChUux1TBskPjfkeTOhqczDMxTw==}
+    engines: {node: '>= 0.4'}
+
   string.prototype.trimend@1.0.7:
     resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==}
 
   string.prototype.trimstart@1.0.7:
     resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==}
 
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -2981,28 +3902,27 @@ packages:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  styled-jsx@5.1.1:
-    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
       '@babel/core': '*'
       babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
     peerDependenciesMeta:
       '@babel/core':
         optional: true
       babel-plugin-macros:
         optional: true
 
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -3011,89 +3931,162 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  tailwind-merge@2.5.4:
-    resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==}
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
-  tailwindcss-animate@1.0.7:
-    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
 
-  tailwindcss@3.4.14:
-    resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+
+  tailwindcss@4.3.2:
+    resolution: {integrity: sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==}
 
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
 
-  text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
+  test-exclude@7.0.2:
+    resolution: {integrity: sha512-u9E6A+ZDYdp7a4WnarkXPZOx8Ilz46+kby6p1yZ8zsGTz9gYa6FIS7lj2oezzNKmtdyyJNNmmXDppga5GB7kSw==}
+    engines: {node: '>=18'}
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
 
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@1.2.0:
+    resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@3.0.2:
+    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
+    engines: {node: '>=14.0.0'}
+
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts-core@7.4.8:
+    resolution: {integrity: sha512-c1P7u0EhACHj7lPy4MJm8iTFEU8+nB0LCtddH0fhP7noaVoXAqafMtOOeX+ulpuPBqnrRgRhw494RICT3mbhnw==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
+  tldts@7.4.8:
+    resolution: {integrity: sha512-htwgN/8KRB3z3vnC0BOETVh2m499g5GmyTK9Wq5JBLX3FNz6tSBveAd+fQhzy9hkjif8vy2jwDMR1sGhLtZl2A==}
+    hasBin: true
 
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
-  ts-api-utils@1.0.3:
-    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
-    engines: {node: '>=16.13.0'}
-    peerDependencies:
-      typescript: '>=4.2.0'
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
+  tough-cookie@6.0.2:
+    resolution: {integrity: sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==}
+    engines: {node: '>=16'}
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
+  ts-api-utils@2.5.0:
+    resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
 
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
-  tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
+  type-fest@5.8.0:
+    resolution: {integrity: sha512-YGYEVz3Fm5iy/AybuA0oyNFq7H4CgQNfRp/qfe8nurE1kuCeNm3/vfm9X4Mtl+qLyaKJUh5xrFZwogr41SMjYA==}
+    engines: {node: '>=20'}
 
   typed-array-buffer@1.0.0:
     resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
     engines: {node: '>= 0.4'}
 
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
   typed-array-byte-length@1.0.0:
     resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
     engines: {node: '>= 0.4'}
 
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
   typed-array-byte-offset@1.0.0:
     resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
     engines: {node: '>= 0.4'}
 
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
   typed-array-length@1.0.4:
     resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
 
-  typescript@5.3.3:
-    resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
+  typed-array-length@1.0.8:
+    resolution: {integrity: sha512-phPGCwqr2+Qo0fwniCE8e4pKnGu/yFb5nD5Y8bf0EEeiI5GklnACYA9GFy/DrAeRrKHXvHn+1SUsOWgJp6RO+g==}
+    engines: {node: '>= 0.4'}
+
+  typescript-eslint@8.63.0:
+    resolution: {integrity: sha512-xgwXyzG4sK9ALkBxbyGkTMMOS+imnW65iPhxCQMK83KhxyoDNW7l+IDqEf9vMdoUidHpOoS967RCq4eMiTexwQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
   unbox-primitive@1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
 
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
+  until-async@3.0.2:
+    resolution: {integrity: sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==}
+
   update-browserslist-db@1.1.1:
     resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
@@ -3103,16 +4096,6 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  use-callback-ref@1.3.1:
-    resolution: {integrity: sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   use-callback-ref@1.3.3:
     resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
     engines: {node: '>=10'}
@@ -3123,16 +4106,6 @@ packages:
       '@types/react':
         optional: true
 
-  use-sidecar@1.1.2:
-    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   use-sidecar@1.1.3:
     resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
@@ -3143,36 +4116,130 @@ packages:
       '@types/react':
         optional: true
 
-  util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-
-  uuid@11.0.3:
-    resolution: {integrity: sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==}
+  uuid@14.0.1:
+    resolution: {integrity: sha512-6ZxzVpzDXDa3bJWaHilVayA+BH/1zmxCJoVgvmqJnid/gPoKHxUrS/aC/T6LGQtNHT+XHG9fXPJB4d+IrU30Ew==}
     hasBin: true
 
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
+    hasBin: true
+
+  vite-node@2.1.9:
+    resolution: {integrity: sha512-AM9aQ/IPrW/6ENLQg3AGY4K1N2TGZdR5e4gu/MmmR2xR3Ll1+dib+nook92g4TV3PXVyeyxdWwtaCAiUL0hMxA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+
+  vite@5.4.21:
+    resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
+  vitest@2.1.9:
+    resolution: {integrity: sha512-MSmPM9REYqDGBI8439mA4mWhV5sKmDlBKWIYbA3lRb2PTHACE0mgKwA8yQ2xq9vxDTuk4iPrECBAEW2aoFXY0Q==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 2.1.9
+      '@vitest/ui': 2.1.9
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
 
   which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
 
-  which-builtin-type@1.1.3:
-    resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==}
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
     engines: {node: '>= 0.4'}
 
-  which-collection@1.0.1:
-    resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
 
   which-typed-array@1.1.13:
     resolution: {integrity: sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==}
     engines: {node: '>= 0.4'}
 
+  which-typed-array@1.1.22:
+    resolution: {integrity: sha512-fvO4ExWMFsqyhG3AiPAObMuY1lxaqgYcxbc49CNdWDDECOJNgQyvsOWVwbZc+qf3rzRtxojBK+CMEv0Ld5CYpw==}
+    engines: {node: '>= 0.4'}
+
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -3181,182 +4248,594 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
-  wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+  ws@8.21.0:
+    resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
   xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
-  yaml@2.6.0:
-    resolution: {integrity: sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==}
-    engines: {node: '>= 14'}
-    hasBin: true
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.3:
+    resolution: {integrity: sha512-GZtjxm/J/4TSxuL3FNYjCmLktBTnIw/rVmKSIyKeYAZpmJB2ig9VauCC5xsa82GNKVKDAqpOn3KVzNt0zmrU0g==}
+    engines: {node: '>=12'}
 
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  zod@3.23.8:
-    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
+  zod-validation-error@4.0.2:
+    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^3.25.0 || ^4.0.0
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+  zod@4.4.3:
+    resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
 snapshots:
 
   '@aashutoshrathi/word-wrap@1.2.6': {}
 
+  '@adobe/css-tools@4.5.0': {}
+
   '@alloc/quick-lru@5.2.0': {}
 
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@asamuzakjp/css-color@3.2.0':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.7': {}
+
+  '@babel/core@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helpers': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.7':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.29.7':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.24.2
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-module-imports@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.29.7': {}
+
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/helper-validator-option@7.29.7': {}
+
+  '@babel/helpers@7.29.7':
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/plugin-transform-react-jsx-self@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-react-jsx-source@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
   '@babel/runtime@7.23.8':
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@date-fns/tz@1.4.1': {}
+  '@babel/runtime@7.29.7': {}
+
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/traverse@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@bcoe/v8-coverage@0.2.3': {}
+
+  '@csstools/color-helpers@5.1.0': {}
+
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
+  '@date-fns/tz@1.5.0': {}
+
+  '@emnapi/runtime@1.11.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
 
   '@emnapi/runtime@1.4.3':
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@8.56.0)':
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm@0.21.5':
+    optional: true
+
+  '@esbuild/android-x64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-s390x@0.21.5':
+    optional: true
+
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.5(jiti@2.7.0))':
     dependencies:
-      eslint: 8.56.0
+      eslint: 9.39.5(jiti@2.7.0)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.10.0': {}
+  '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/eslintrc@2.1.4':
+  '@eslint/config-array@0.21.2':
     dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 9.6.1
-      globals: 13.24.0
+      '@eslint/object-schema': 2.1.7
+      debug: 4.4.3
+      minimatch: 3.1.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.4.2':
+    dependencies:
+      '@eslint/core': 0.17.0
+
+  '@eslint/core@0.17.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.6':
+    dependencies:
+      ajv: 6.15.0
+      debug: 4.4.3
+      espree: 10.4.0
+      globals: 14.0.0
       ignore: 5.3.0
       import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
+      js-yaml: 4.3.0
+      minimatch: 3.1.5
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@8.56.0': {}
+  '@eslint/js@9.39.5': {}
+
+  '@eslint/object-schema@2.1.7': {}
 
-  '@floating-ui/core@1.6.8':
+  '@eslint/plugin-kit@0.4.1':
     dependencies:
-      '@floating-ui/utils': 0.2.8
+      '@eslint/core': 0.17.0
+      levn: 0.4.1
+
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/react-dom@2.1.8(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  '@floating-ui/utils@0.2.11': {}
 
-  '@floating-ui/dom@1.6.12':
+  '@hookform/resolvers@5.4.0(react-hook-form@7.81.0(react@19.2.7))':
     dependencies:
-      '@floating-ui/core': 1.6.8
-      '@floating-ui/utils': 0.2.8
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.81.0(react@19.2.7)
 
-  '@floating-ui/react-dom@2.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@humanfs/core@0.19.2':
     dependencies:
-      '@floating-ui/dom': 1.6.12
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@humanfs/types': 0.15.0
 
-  '@floating-ui/utils@0.2.8': {}
-
-  '@hookform/resolvers@3.9.1(react-hook-form@7.53.1(react@18.2.0))':
+  '@humanfs/node@0.16.8':
     dependencies:
-      react-hook-form: 7.53.1(react@18.2.0)
+      '@humanfs/core': 0.19.2
+      '@humanfs/types': 0.15.0
+      '@humanwhocodes/retry': 0.4.3
 
-  '@humanwhocodes/config-array@0.11.14':
-    dependencies:
-      '@humanwhocodes/object-schema': 2.0.2
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
+  '@humanfs/types@0.15.0': {}
 
   '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@humanwhocodes/object-schema@2.0.2': {}
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@img/colour@1.1.0':
+    optional: true
 
   '@img/sharp-darwin-arm64@0.34.2':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.1.0
     optional: true
 
+  '@img/sharp-darwin-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+    optional: true
+
   '@img/sharp-darwin-x64@0.34.2':
     optionalDependencies:
       '@img/sharp-libvips-darwin-x64': 1.1.0
     optional: true
 
+  '@img/sharp-darwin-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+    optional: true
+
   '@img/sharp-libvips-darwin-arm64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    optional: true
+
   '@img/sharp-libvips-darwin-x64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    optional: true
+
   '@img/sharp-libvips-linux-arm64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    optional: true
+
   '@img/sharp-libvips-linux-arm@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    optional: true
+
   '@img/sharp-libvips-linux-ppc64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    optional: true
+
   '@img/sharp-libvips-linux-s390x@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    optional: true
+
   '@img/sharp-libvips-linux-x64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    optional: true
+
   '@img/sharp-libvips-linuxmusl-arm64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    optional: true
+
   '@img/sharp-libvips-linuxmusl-x64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    optional: true
+
   '@img/sharp-linux-arm64@0.34.2':
     optionalDependencies:
       '@img/sharp-libvips-linux-arm64': 1.1.0
     optional: true
 
+  '@img/sharp-linux-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+    optional: true
+
   '@img/sharp-linux-arm@0.34.2':
     optionalDependencies:
       '@img/sharp-libvips-linux-arm': 1.1.0
     optional: true
 
+  '@img/sharp-linux-arm@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+    optional: true
+
   '@img/sharp-linux-s390x@0.34.2':
     optionalDependencies:
       '@img/sharp-libvips-linux-s390x': 1.1.0
     optional: true
 
+  '@img/sharp-linux-s390x@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+    optional: true
+
   '@img/sharp-linux-x64@0.34.2':
     optionalDependencies:
       '@img/sharp-libvips-linux-x64': 1.1.0
     optional: true
 
+  '@img/sharp-linux-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.4
+    optional: true
+
   '@img/sharp-linuxmusl-arm64@0.34.2':
     optionalDependencies:
       '@img/sharp-libvips-linuxmusl-arm64': 1.1.0
     optional: true
 
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+    optional: true
+
   '@img/sharp-linuxmusl-x64@0.34.2':
     optionalDependencies:
       '@img/sharp-libvips-linuxmusl-x64': 1.1.0
     optional: true
 
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+    optional: true
+
   '@img/sharp-wasm32@0.34.2':
     dependencies:
       '@emnapi/runtime': 1.4.3
     optional: true
 
+  '@img/sharp-wasm32@0.34.5':
+    dependencies:
+      '@emnapi/runtime': 1.11.2
+    optional: true
+
   '@img/sharp-win32-arm64@0.34.2':
     optional: true
 
+  '@img/sharp-win32-arm64@0.34.5':
+    optional: true
+
   '@img/sharp-win32-ia32@0.34.2':
     optional: true
 
+  '@img/sharp-win32-ia32@0.34.5':
+    optional: true
+
   '@img/sharp-win32-x64@0.34.2':
     optional: true
 
+  '@img/sharp-win32-x64@0.34.5':
+    optional: true
+
+  '@inquirer/ansi@2.0.7': {}
+
+  '@inquirer/confirm@6.1.1(@types/node@20.11.5)':
+    dependencies:
+      '@inquirer/core': 11.2.1(@types/node@20.11.5)
+      '@inquirer/type': 4.0.7(@types/node@20.11.5)
+    optionalDependencies:
+      '@types/node': 20.11.5
+
+  '@inquirer/core@11.2.1(@types/node@20.11.5)':
+    dependencies:
+      '@inquirer/ansi': 2.0.7
+      '@inquirer/figures': 2.0.7
+      '@inquirer/type': 4.0.7(@types/node@20.11.5)
+      cli-width: 4.1.0
+      fast-wrap-ansi: 0.2.2
+      mute-stream: 3.0.0
+      signal-exit: 4.1.0
+    optionalDependencies:
+      '@types/node': 20.11.5
+
+  '@inquirer/figures@2.0.7': {}
+
+  '@inquirer/type@4.0.7(@types/node@20.11.5)':
+    optionalDependencies:
+      '@types/node': 20.11.5
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -3366,54 +4845,79 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
+  '@istanbuljs/schema@0.1.6': {}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.31
+
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/set-array@1.2.1': {}
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
   '@jridgewell/trace-mapping@0.3.25':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@next/env@14.2.26': {}
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@next/eslint-plugin-next@14.1.0':
+  '@mswjs/interceptors@0.41.9':
     dependencies:
-      glob: 10.3.10
+      '@open-draft/deferred-promise': 2.2.0
+      '@open-draft/logger': 0.3.0
+      '@open-draft/until': 2.1.0
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      strict-event-emitter: 0.5.1
 
-  '@next/swc-darwin-arm64@14.2.26':
-    optional: true
+  '@next/env@16.2.10': {}
+
+  '@next/eslint-plugin-next@16.2.10':
+    dependencies:
+      fast-glob: 3.3.1
 
-  '@next/swc-darwin-x64@14.2.26':
+  '@next/swc-darwin-arm64@16.2.10':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@14.2.26':
+  '@next/swc-darwin-x64@16.2.10':
     optional: true
 
-  '@next/swc-linux-arm64-musl@14.2.26':
+  '@next/swc-linux-arm64-gnu@16.2.10':
     optional: true
 
-  '@next/swc-linux-x64-gnu@14.2.26':
+  '@next/swc-linux-arm64-musl@16.2.10':
     optional: true
 
-  '@next/swc-linux-x64-musl@14.2.26':
+  '@next/swc-linux-x64-gnu@16.2.10':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@14.2.26':
+  '@next/swc-linux-x64-musl@16.2.10':
     optional: true
 
-  '@next/swc-win32-ia32-msvc@14.2.26':
+  '@next/swc-win32-arm64-msvc@16.2.10':
     optional: true
 
-  '@next/swc-win32-x64-msvc@14.2.26':
+  '@next/swc-win32-x64-msvc@16.2.10':
     optional: true
 
   '@nodelib/fs.scandir@2.1.5':
@@ -3428,6 +4932,17 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.16.0
 
+  '@open-draft/deferred-promise@2.2.0': {}
+
+  '@open-draft/deferred-promise@3.0.0': {}
+
+  '@open-draft/logger@0.3.0':
+    dependencies:
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+
+  '@open-draft/until@2.1.0': {}
+
   '@opentelemetry/api@1.9.0':
     optional: true
 
@@ -3436,931 +4951,774 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@prisma/debug@5.22.0': {}
-
-  '@prisma/engines-version@5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2': {}
-
-  '@prisma/engines@5.22.0':
-    dependencies:
-      '@prisma/debug': 5.22.0
-      '@prisma/engines-version': 5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2
-      '@prisma/fetch-engine': 5.22.0
-      '@prisma/get-platform': 5.22.0
-
-  '@prisma/fetch-engine@5.22.0':
-    dependencies:
-      '@prisma/debug': 5.22.0
-      '@prisma/engines-version': 5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2
-      '@prisma/get-platform': 5.22.0
-
-  '@prisma/get-platform@5.22.0':
+  '@playwright/test@1.61.1':
     dependencies:
-      '@prisma/debug': 5.22.0
+      playwright: 1.61.1
 
-  '@radix-ui/number@1.1.0': {}
+  '@radix-ui/number@1.1.2': {}
 
-  '@radix-ui/primitive@1.1.0': {}
+  '@radix-ui/primitive@1.1.5': {}
 
-  '@radix-ui/primitive@1.1.1': {}
-
-  '@radix-ui/primitive@1.1.2': {}
-
-  '@radix-ui/primitive@1.1.3': {}
-
-  '@radix-ui/react-accordion@1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-accordion@1.2.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collapsible': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-collapsible': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-collection': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-direction': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-alert-dialog@1.1.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dialog': 1.1.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-alert-dialog@1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dialog': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-arrow@1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-arrow@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-arrow@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-avatar@1.2.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-is-hydrated': 0.1.1(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-checkbox@1.3.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-previous': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-size': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-collapsible@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-avatar@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-collection@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-checkbox@1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-collapsible@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-collapsible@1.1.11(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-collection@1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-compose-refs@1.1.3(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-compose-refs@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+  '@radix-ui/react-context@1.2.0(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      react: 18.2.0
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-dialog@1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dismissable-layer': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-focus-guards': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-focus-scope': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-portal': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      aria-hidden: 1.2.6
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-compose-refs@1.1.1(@types/react@18.2.48)(react@18.2.0)':
+  '@radix-ui/react-direction@1.1.2(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      react: 18.2.0
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.2.48)(react@18.2.0)':
+  '@radix-ui/react-dismissable-layer@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      react: 18.2.0
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-effect-event': 0.0.3(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-dropdown-menu@2.1.20(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-menu': 2.1.20(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-context@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+  '@radix-ui/react-focus-guards@1.1.4(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      react: 18.2.0
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-context@1.1.1(@types/react@18.2.48)(react@18.2.0)':
+  '@radix-ui/react-focus-scope@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      react: 18.2.0
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-context@1.1.2(@types/react@18.2.48)(react@18.2.0)':
+  '@radix-ui/react-icons@1.3.2(react@19.2.7)':
     dependencies:
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
-
-  '@radix-ui/react-dialog@1.1.15(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.48)(react@18.2.0)
-      aria-hidden: 1.2.6
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.7.1(@types/react@18.2.48)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-dialog@1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.6.0(@types/react@18.2.48)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-dialog@1.1.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.6.2(@types/react@18.2.48)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      react: 19.2.7
 
-  '@radix-ui/react-direction@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+  '@radix-ui/react-id@1.1.2(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      react: 18.2.0
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-dismissable-layer@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-label@2.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-menu@2.1.20(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-collection': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-direction': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dismissable-layer': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-focus-guards': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-focus-scope': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-popper': 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-portal': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-roving-focus': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      aria-hidden: 1.2.6
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-dismissable-layer@1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-navigation-menu@1.2.18(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-collection': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-direction': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dismissable-layer': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-previous': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-visually-hidden': 1.2.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-dropdown-menu@2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-menu': 2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-popover@1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dismissable-layer': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-focus-guards': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-focus-scope': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-popper': 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-portal': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      aria-hidden: 1.2.6
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-focus-guards@1.1.1(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-popper@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-arrow': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-rect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-size': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/rect': 1.1.2
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-focus-guards@1.1.3(@types/react@18.2.48)(react@18.2.0)':
+  '@radix-ui/react-portal@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      react: 18.2.0
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-focus-scope@1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-presence@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-focus-scope@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-primitive@2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-roving-focus@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-collection': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-direction': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-is-hydrated': 0.1.1(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-icons@1.3.0(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-
-  '@radix-ui/react-id@1.1.0(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-scroll-area@1.2.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/number': 1.1.2
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-direction': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-
-  '@radix-ui/react-id@1.1.1(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-select@2.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/number': 1.1.2
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-collection': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-direction': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dismissable-layer': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-focus-guards': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-focus-scope': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-popper': 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-portal': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-previous': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-visually-hidden': 1.2.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      aria-hidden: 1.2.6
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-label@2.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-slot@1.3.0(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-menu@2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.6.0(@types/react@18.2.48)(react@18.2.0)
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-switch@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-previous': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-size': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-navigation-menu@1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-tabs@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-direction': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-roving-focus': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-popover@1.1.15(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.48)(react@18.2.0)
-      aria-hidden: 1.2.6
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.7.1(@types/react@18.2.48)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-popper@1.2.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-arrow': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-rect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/rect': 1.1.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-toast@1.2.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-collection': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dismissable-layer': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-portal': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-visually-hidden': 1.2.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-popper@1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-arrow': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-rect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/rect': 1.1.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-tooltip@1.2.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dismissable-layer': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-popper': 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-portal': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-visually-hidden': 1.2.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-popper@1.2.8(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/rect': 1.1.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-portal@1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-callback-ref@1.1.2(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-portal@1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-controllable-state@1.2.3(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-use-effect-event': 0.0.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-effect-event@0.0.3(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-presence@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-is-hydrated@0.1.1(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-presence@1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-layout-effect@1.1.2(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-presence@1.1.4(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-previous@1.1.2(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-presence@1.1.5(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-rect@1.1.2(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/rect': 1.1.2
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-use-size@1.1.2(@types/react@19.2.17)(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
 
-  '@radix-ui/react-primitive@2.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-visually-hidden@1.2.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-slot': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-scroll-area@1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.0
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-select@2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.0
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.6.0(@types/react@18.2.48)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+  '@radix-ui/rect@1.1.2': {}
 
-  '@radix-ui/react-separator@1.1.7(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-oauth/google@0.12.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
 
-  '@radix-ui/react-slot@1.1.0(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+  '@rolldown/pluginutils@1.0.0-beta.27': {}
 
-  '@radix-ui/react-slot@1.1.1(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+  '@rollup/rollup-android-arm-eabi@4.62.2':
+    optional: true
 
-  '@radix-ui/react-slot@1.2.3(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
-
-  '@radix-ui/react-switch@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-tabs@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-toast@1.2.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.0
-      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
-
-  '@radix-ui/react-tooltip@1.1.6(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.1
-      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+  '@rollup/rollup-android-arm64@4.62.2':
+    optional: true
 
-  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+  '@rollup/rollup-darwin-arm64@4.62.2':
+    optional: true
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+  '@rollup/rollup-darwin-x64@4.62.2':
+    optional: true
 
-  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+  '@rollup/rollup-freebsd-arm64@4.62.2':
+    optional: true
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+  '@rollup/rollup-freebsd-x64@4.62.2':
+    optional: true
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.2':
+    optional: true
 
-  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+  '@rollup/rollup-linux-arm-musleabihf@4.62.2':
+    optional: true
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+  '@rollup/rollup-linux-arm64-gnu@4.62.2':
+    optional: true
 
-  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+  '@rollup/rollup-linux-arm64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.62.2':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.62.2':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.62.2':
+    optional: true
+
+  '@rtsao/scc@1.1.0': {}
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.2.48)(react@18.2.0)':
+  '@standard-schema/utils@0.3.0': {}
+
+  '@swc/helpers@0.5.15':
     dependencies:
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+      tslib: 2.8.1
+
+  '@tabby_ai/hijri-converter@1.0.5': {}
 
-  '@radix-ui/react-use-previous@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+  '@tailwindcss/node@4.3.2':
     dependencies:
-      react: 18.2.0
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.21.6
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.2
+
+  '@tailwindcss/oxide-android-arm64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.2':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.2':
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@tailwindcss/oxide-android-arm64': 4.3.2
+      '@tailwindcss/oxide-darwin-arm64': 4.3.2
+      '@tailwindcss/oxide-darwin-x64': 4.3.2
+      '@tailwindcss/oxide-freebsd-x64': 4.3.2
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.2
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.2
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.2
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.2
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.2
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.2
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.2
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.2
+
+  '@tailwindcss/postcss@4.3.2':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.3.2
+      '@tailwindcss/oxide': 4.3.2
+      postcss: 8.5.16
+      tailwindcss: 4.3.2
 
-  '@radix-ui/react-use-rect@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+  '@tanstack/query-core@5.101.2': {}
+
+  '@tanstack/react-query@5.101.2(react@19.2.7)':
     dependencies:
-      '@radix-ui/rect': 1.1.0
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+      '@tanstack/query-core': 5.101.2
+      react: 19.2.7
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@18.2.48)(react@18.2.0)':
+  '@tanstack/react-table@8.21.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@radix-ui/rect': 1.1.1
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+      '@tanstack/table-core': 8.21.3
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
 
-  '@radix-ui/react-use-size@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+  '@tanstack/table-core@8.21.3': {}
+
+  '@testing-library/dom@10.4.1':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+      '@babel/code-frame': 7.29.7
+      '@babel/runtime': 7.29.7
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@18.2.48)(react@18.2.0)':
+  '@testing-library/jest-dom@6.9.1':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.48
+      '@adobe/css-tools': 4.5.0
+      aria-query: 5.3.0
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
 
-  '@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@babel/runtime': 7.23.8
+      '@testing-library/dom': 10.4.1
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-visually-hidden@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      '@types/react-dom': 18.2.18
+      '@testing-library/dom': 10.4.1
 
-  '@radix-ui/rect@1.1.0': {}
+  '@types/aria-query@5.0.4': {}
 
-  '@radix-ui/rect@1.1.1': {}
-
-  '@react-oauth/google@0.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@types/babel__core@7.20.5':
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
-  '@rushstack/eslint-patch@1.7.0': {}
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
 
-  '@swc/counter@0.1.3': {}
-
-  '@swc/helpers@0.5.5':
+  '@types/babel__generator@7.27.0':
     dependencies:
-      '@swc/counter': 0.1.3
-      tslib: 2.8.1
+      '@babel/types': 7.29.7
 
-  '@tanstack/query-core@5.60.6': {}
-
-  '@tanstack/react-query@5.61.0(react@18.2.0)':
+  '@types/babel__template@7.4.4':
     dependencies:
-      '@tanstack/query-core': 5.60.6
-      react: 18.2.0
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
 
-  '@tanstack/react-table@8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@types/babel__traverse@7.28.0':
     dependencies:
-      '@tanstack/table-core': 8.21.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@babel/types': 7.29.7
 
-  '@tanstack/table-core@8.21.3': {}
+  '@types/estree@1.0.9': {}
 
   '@types/hast@2.3.10':
     dependencies:
@@ -4374,119 +5732,207 @@ snapshots:
     dependencies:
       undici-types: 5.26.5
 
-  '@types/prop-types@15.7.11': {}
+  '@types/papaparse@5.5.2':
+    dependencies:
+      '@types/node': 20.11.5
+
+  '@types/react-dom@19.2.3(@types/react@19.2.17)':
+    dependencies:
+      '@types/react': 19.2.17
 
-  '@types/react-dom@18.2.18':
+  '@types/react-syntax-highlighter@15.5.13':
     dependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
 
-  '@types/react@18.2.48':
+  '@types/react@19.2.17':
     dependencies:
-      '@types/prop-types': 15.7.11
-      '@types/scheduler': 0.16.8
-      csstype: 3.1.3
+      csstype: 3.2.3
 
-  '@types/scheduler@0.16.8': {}
+  '@types/set-cookie-parser@2.4.10':
+    dependencies:
+      '@types/node': 20.11.5
 
-  '@types/semver@7.5.6': {}
+  '@types/statuses@2.0.6': {}
 
   '@types/unist@2.0.10': {}
 
-  '@typescript-eslint/eslint-plugin@6.19.0(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0)(typescript@5.3.3)':
+  '@typescript-eslint/eslint-plugin@8.63.0(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/scope-manager': 6.19.0
-      '@typescript-eslint/type-utils': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/utils': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/visitor-keys': 6.19.0
-      debug: 4.3.4
-      eslint: 8.56.0
-      graphemer: 1.4.0
-      ignore: 5.3.0
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.63.0
+      '@typescript-eslint/type-utils': 8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.63.0
+      eslint: 9.39.5(jiti@2.7.0)
+      ignore: 7.0.6
       natural-compare: 1.4.0
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.3.3)
-    optionalDependencies:
-      typescript: 5.3.3
+      ts-api-utils: 2.5.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3)':
+  '@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 6.19.0
-      '@typescript-eslint/types': 6.19.0
-      '@typescript-eslint/typescript-estree': 6.19.0(typescript@5.3.3)
-      '@typescript-eslint/visitor-keys': 6.19.0
-      debug: 4.3.4
-      eslint: 8.56.0
-    optionalDependencies:
-      typescript: 5.3.3
+      '@typescript-eslint/scope-manager': 8.63.0
+      '@typescript-eslint/types': 8.63.0
+      '@typescript-eslint/typescript-estree': 8.63.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.63.0
+      debug: 4.4.3
+      eslint: 9.39.5(jiti@2.7.0)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.63.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.63.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.63.0
+      debug: 4.4.3
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@6.19.0':
+  '@typescript-eslint/scope-manager@8.63.0':
     dependencies:
-      '@typescript-eslint/types': 6.19.0
-      '@typescript-eslint/visitor-keys': 6.19.0
+      '@typescript-eslint/types': 8.63.0
+      '@typescript-eslint/visitor-keys': 8.63.0
 
-  '@typescript-eslint/type-utils@6.19.0(eslint@8.56.0)(typescript@5.3.3)':
+  '@typescript-eslint/tsconfig-utils@8.63.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.19.0(typescript@5.3.3)
-      '@typescript-eslint/utils': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
-      debug: 4.3.4
-      eslint: 8.56.0
-      ts-api-utils: 1.0.3(typescript@5.3.3)
-    optionalDependencies:
-      typescript: 5.3.3
+      typescript: 5.9.3
+
+  '@typescript-eslint/type-utils@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.63.0
+      '@typescript-eslint/typescript-estree': 8.63.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.5(jiti@2.7.0)
+      ts-api-utils: 2.5.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@6.19.0': {}
+  '@typescript-eslint/types@8.63.0': {}
 
-  '@typescript-eslint/typescript-estree@6.19.0(typescript@5.3.3)':
+  '@typescript-eslint/typescript-estree@8.63.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/types': 6.19.0
-      '@typescript-eslint/visitor-keys': 6.19.0
-      debug: 4.3.4
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 9.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.3.3)
-    optionalDependencies:
-      typescript: 5.3.3
+      '@typescript-eslint/project-service': 8.63.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.63.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.63.0
+      '@typescript-eslint/visitor-keys': 8.63.0
+      debug: 4.4.3
+      minimatch: 10.2.5
+      semver: 7.8.5
+      tinyglobby: 0.2.17
+      ts-api-utils: 2.5.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@6.19.0(eslint@8.56.0)(typescript@5.3.3)':
+  '@typescript-eslint/utils@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
-      '@types/json-schema': 7.0.15
-      '@types/semver': 7.5.6
-      '@typescript-eslint/scope-manager': 6.19.0
-      '@typescript-eslint/types': 6.19.0
-      '@typescript-eslint/typescript-estree': 6.19.0(typescript@5.3.3)
-      eslint: 8.56.0
-      semver: 7.5.4
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.5(jiti@2.7.0))
+      '@typescript-eslint/scope-manager': 8.63.0
+      '@typescript-eslint/types': 8.63.0
+      '@typescript-eslint/typescript-estree': 8.63.0(typescript@5.9.3)
+      eslint: 9.39.5(jiti@2.7.0)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
-      - typescript
 
-  '@typescript-eslint/visitor-keys@6.19.0':
+  '@typescript-eslint/visitor-keys@8.63.0':
     dependencies:
-      '@typescript-eslint/types': 6.19.0
-      eslint-visitor-keys: 3.4.3
+      '@typescript-eslint/types': 8.63.0
+      eslint-visitor-keys: 5.0.1
+
+  '@vitejs/plugin-react@4.7.0(vite@5.4.21(@types/node@20.11.5)(lightningcss@1.32.0))':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/plugin-transform-react-jsx-self': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-jsx-source': 7.29.7(@babel/core@7.29.7)
+      '@rolldown/pluginutils': 1.0.0-beta.27
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.17.0
+      vite: 5.4.21(@types/node@20.11.5)(lightningcss@1.32.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/coverage-v8@2.1.9(vitest@2.1.9(@types/node@20.11.5)(jsdom@25.0.1)(lightningcss@1.32.0)(msw@2.15.0(@types/node@20.11.5)(typescript@5.9.3)))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 0.2.3
+      debug: 4.4.3
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.2.0
+      magic-string: 0.30.21
+      magicast: 0.3.5
+      std-env: 3.10.0
+      test-exclude: 7.0.2
+      tinyrainbow: 1.2.0
+      vitest: 2.1.9(@types/node@20.11.5)(jsdom@25.0.1)(lightningcss@1.32.0)(msw@2.15.0(@types/node@20.11.5)(typescript@5.9.3))
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/expect@2.1.9':
+    dependencies:
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.3.3
+      tinyrainbow: 1.2.0
+
+  '@vitest/mocker@2.1.9(msw@2.15.0(@types/node@20.11.5)(typescript@5.9.3))(vite@5.4.21(@types/node@20.11.5)(lightningcss@1.32.0))':
+    dependencies:
+      '@vitest/spy': 2.1.9
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      msw: 2.15.0(@types/node@20.11.5)(typescript@5.9.3)
+      vite: 5.4.21(@types/node@20.11.5)(lightningcss@1.32.0)
+
+  '@vitest/pretty-format@2.1.9':
+    dependencies:
+      tinyrainbow: 1.2.0
+
+  '@vitest/runner@2.1.9':
+    dependencies:
+      '@vitest/utils': 2.1.9
+      pathe: 1.1.2
+
+  '@vitest/snapshot@2.1.9':
+    dependencies:
+      '@vitest/pretty-format': 2.1.9
+      magic-string: 0.30.21
+      pathe: 1.1.2
+
+  '@vitest/spy@2.1.9':
+    dependencies:
+      tinyspy: 3.0.2
+
+  '@vitest/utils@2.1.9':
+    dependencies:
+      '@vitest/pretty-format': 2.1.9
+      loupe: 3.2.1
+      tinyrainbow: 1.2.0
+
+  acorn-jsx@5.3.2(acorn@8.17.0):
+    dependencies:
+      acorn: 8.17.0
 
-  '@ungap/structured-clone@1.2.0': {}
+  acorn@8.17.0: {}
 
-  acorn-jsx@5.3.2(acorn@8.11.3):
+  agent-base@6.0.2:
     dependencies:
-      acorn: 8.11.3
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
 
-  acorn@8.11.3: {}
+  agent-base@7.1.4: {}
 
-  ajv@6.12.6:
+  ajv@6.15.0:
     dependencies:
       fast-deep-equal: 3.1.3
       fast-json-stable-stringify: 2.1.0
@@ -4501,23 +5947,12 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
-  ansi-styles@6.2.1: {}
-
-  any-promise@1.3.0: {}
-
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
+  ansi-styles@5.2.0: {}
 
-  arg@5.0.2: {}
+  ansi-styles@6.2.1: {}
 
   argparse@2.0.1: {}
 
-  aria-hidden@1.2.3:
-    dependencies:
-      tslib: 2.6.2
-
   aria-hidden@1.2.6:
     dependencies:
       tslib: 2.8.1
@@ -4526,28 +5961,47 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  aria-query@5.3.2: {}
+
   array-buffer-byte-length@1.0.0:
     dependencies:
       call-bind: 1.0.5
       is-array-buffer: 3.0.2
 
-  array-includes@3.1.7:
+  array-buffer-byte-length@1.0.2:
     dependencies:
-      call-bind: 1.0.5
-      define-properties: 1.2.1
-      es-abstract: 1.22.3
-      get-intrinsic: 1.2.2
-      is-string: 1.0.7
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
 
-  array-union@2.1.0: {}
+  array-includes@3.1.9:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
 
-  array.prototype.findlastindex@1.2.3:
+  array.prototype.findlast@1.2.5:
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.9
       define-properties: 1.2.1
-      es-abstract: 1.22.3
+      es-abstract: 1.24.2
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
       es-shim-unscopables: 1.0.2
-      get-intrinsic: 1.2.2
+
+  array.prototype.findlastindex@1.2.6:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
 
   array.prototype.flat@1.3.2:
     dependencies:
@@ -4556,6 +6010,13 @@ snapshots:
       es-abstract: 1.22.3
       es-shim-unscopables: 1.0.2
 
+  array.prototype.flat@1.3.3:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-shim-unscopables: 1.0.2
+
   array.prototype.flatmap@1.3.2:
     dependencies:
       call-bind: 1.0.5
@@ -4563,13 +6024,20 @@ snapshots:
       es-abstract: 1.22.3
       es-shim-unscopables: 1.0.2
 
-  array.prototype.tosorted@1.1.2:
+  array.prototype.flatmap@1.3.3:
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.9
       define-properties: 1.2.1
-      es-abstract: 1.22.3
+      es-abstract: 1.24.2
+      es-shim-unscopables: 1.0.2
+
+  array.prototype.tosorted@1.1.4:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-errors: 1.3.0
       es-shim-unscopables: 1.0.2
-      get-intrinsic: 1.2.2
 
   arraybuffer.prototype.slice@1.0.2:
     dependencies:
@@ -4581,55 +6049,63 @@ snapshots:
       is-array-buffer: 3.0.2
       is-shared-array-buffer: 1.0.2
 
-  ast-types-flow@0.0.8: {}
-
-  asynciterator.prototype@1.0.0:
+  arraybuffer.prototype.slice@1.0.4:
     dependencies:
-      has-symbols: 1.0.3
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
+  assertion-error@2.0.1: {}
+
+  ast-types-flow@0.0.8: {}
 
   asynckit@0.4.0: {}
 
   attr-accept@2.2.5: {}
 
-  autoprefixer@10.4.20(postcss@8.4.47):
-    dependencies:
-      browserslist: 4.24.2
-      caniuse-lite: 1.0.30001671
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.1.1
-      postcss: 8.4.47
-      postcss-value-parser: 4.2.0
-
   available-typed-arrays@1.0.5: {}
 
-  axe-core@4.7.0: {}
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  axe-core@4.12.1: {}
 
-  axios@1.8.2:
+  axios@1.18.1:
     dependencies:
-      follow-redirects: 1.15.9
-      form-data: 4.0.2
-      proxy-from-env: 1.1.0
+      follow-redirects: 1.16.0
+      form-data: 4.0.6
+      https-proxy-agent: 5.0.1
+      proxy-from-env: 2.1.0
     transitivePeerDependencies:
       - debug
+      - supports-color
 
-  axobject-query@3.2.1:
-    dependencies:
-      dequal: 2.0.3
+  axobject-query@4.1.0: {}
 
   balanced-match@1.0.2: {}
 
-  binary-extensions@2.3.0: {}
+  balanced-match@4.0.4: {}
+
+  baseline-browser-mapping@2.10.42: {}
 
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
       concat-map: 0.0.1
 
-  brace-expansion@2.0.1:
+  brace-expansion@2.1.2:
     dependencies:
       balanced-match: 1.0.2
 
+  brace-expansion@5.0.7:
+    dependencies:
+      balanced-match: 4.0.4
+
   braces@3.0.2:
     dependencies:
       fill-range: 7.0.1
@@ -4641,9 +6117,7 @@ snapshots:
       node-releases: 2.0.18
       update-browserslist-db: 1.1.1(browserslist@4.24.2)
 
-  busboy@1.6.0:
-    dependencies:
-      streamsearch: 1.1.0
+  cac@6.7.14: {}
 
   call-bind-apply-helpers@1.0.2:
     dependencies:
@@ -4656,12 +6130,30 @@ snapshots:
       get-intrinsic: 1.3.0
       set-function-length: 1.2.0
 
-  callsites@3.1.0: {}
+  call-bind@1.0.9:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
 
-  camelcase-css@2.0.1: {}
+  callsites@3.1.0: {}
 
   caniuse-lite@1.0.30001671: {}
 
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -4673,36 +6165,32 @@ snapshots:
 
   character-reference-invalid@1.1.4: {}
 
-  chokidar@3.6.0:
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.2
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
+  check-error@2.1.3: {}
 
-  class-variance-authority@0.7.0:
+  class-variance-authority@0.7.1:
     dependencies:
-      clsx: 2.0.0
+      clsx: 2.1.1
+
+  cli-width@4.1.0: {}
 
   client-only@0.0.1: {}
 
-  clsx@2.0.0: {}
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
 
   clsx@2.1.1: {}
 
-  cmdk@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.2.48)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-dialog': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
@@ -4729,27 +6217,63 @@ snapshots:
 
   comma-separated-tokens@1.0.8: {}
 
-  commander@4.1.1: {}
-
   concat-map@0.0.1: {}
 
+  convert-source-map@2.0.0: {}
+
   cookie@0.7.2: {}
 
+  cookie@1.1.1: {}
+
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
 
-  cssesc@3.0.0: {}
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
 
-  csstype@3.1.3: {}
+  css.escape@1.5.1: {}
+
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+
+  csstype@3.2.3: {}
 
   damerau-levenshtein@1.0.8: {}
 
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
   date-fns-jalali@4.1.0-0: {}
 
-  date-fns@4.1.0: {}
+  date-fns@4.4.0: {}
 
   debug@3.2.7:
     dependencies:
@@ -4759,18 +6283,32 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js@10.6.0: {}
+
+  deep-eql@5.0.2: {}
+
   deep-is@0.1.4: {}
 
   define-data-property@1.1.1:
     dependencies:
       get-intrinsic: 1.3.0
       gopd: 1.2.0
-      has-property-descriptors: 1.0.1
+      has-property-descriptors: 1.0.2
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
 
   define-properties@1.2.1:
     dependencies:
       define-data-property: 1.1.1
-      has-property-descriptors: 1.0.1
+      has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
   delayed-stream@1.0.0: {}
@@ -4779,23 +6317,17 @@ snapshots:
 
   detect-libc@2.0.4: {}
 
-  detect-node-es@1.1.0: {}
-
-  didyoumean@1.2.2: {}
+  detect-libc@2.1.2: {}
 
-  dir-glob@3.0.1:
-    dependencies:
-      path-type: 4.0.0
-
-  dlv@1.1.3: {}
+  detect-node-es@1.1.0: {}
 
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
 
-  doctrine@3.0.0:
-    dependencies:
-      esutils: 2.0.3
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
 
   dunder-proto@1.0.1:
     dependencies:
@@ -4816,6 +6348,20 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.2.1
 
+  enhanced-resolve@5.21.6:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
+  entities@6.0.1: {}
+
+  es-abstract-get@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.2
+      is-callable: 1.2.7
+      object-inspect: 1.13.4
+
   es-abstract@1.22.3:
     dependencies:
       array-buffer-byte-length: 1.0.0
@@ -4828,10 +6374,10 @@ snapshots:
       get-intrinsic: 1.3.0
       get-symbol-description: 1.0.0
       globalthis: 1.0.3
-      gopd: 1.0.1
+      gopd: 1.2.0
       has-property-descriptors: 1.0.1
       has-proto: 1.0.1
-      has-symbols: 1.0.3
+      has-symbols: 1.1.0
       hasown: 2.0.2
       internal-slot: 1.0.6
       is-array-buffer: 3.0.2
@@ -4858,31 +6404,96 @@ snapshots:
       unbox-primitive: 1.0.2
       which-typed-array: 1.1.13
 
+  es-abstract@1.24.2:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.4
+      function.prototype.name: 1.2.0
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.4
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.11
+      string.prototype.trimend: 1.0.10
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.8
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.22
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
-  es-iterator-helpers@1.0.15:
+  es-iterator-helpers@1.4.0:
     dependencies:
-      asynciterator.prototype: 1.0.0
-      call-bind: 1.0.5
+      call-bind: 1.0.9
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.22.3
+      es-abstract: 1.24.2
+      es-errors: 1.3.0
       es-set-tostringtag: 2.1.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.2
-      globalthis: 1.0.3
-      has-property-descriptors: 1.0.1
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.6
-      iterator.prototype: 1.1.2
-      safe-array-concat: 1.1.0
+      get-intrinsic: 1.3.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      iterator.prototype: 1.1.5
+      math-intrinsics: 1.1.0
+
+  es-module-lexer@1.7.0: {}
 
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
 
+  es-object-atoms@1.1.2:
+    dependencies:
+      es-errors: 1.3.0
+
   es-set-tostringtag@2.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -4894,31 +6505,71 @@ snapshots:
     dependencies:
       hasown: 2.0.2
 
+  es-shim-unscopables@1.1.0:
+    dependencies:
+      hasown: 2.0.2
+
   es-to-primitive@1.2.1:
     dependencies:
       is-callable: 1.2.7
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
+  es-to-primitive@1.3.4:
+    dependencies:
+      es-abstract-get: 1.0.0
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
+  esbuild@0.21.5:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
+
   escalade@3.2.0: {}
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-config-next@14.1.0(eslint@8.56.0)(typescript@5.3.3):
+  eslint-config-next@16.2.10(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3):
     dependencies:
-      '@next/eslint-plugin-next': 14.1.0
-      '@rushstack/eslint-patch': 1.7.0
-      '@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
-      eslint: 8.56.0
+      '@next/eslint-plugin-next': 16.2.10
+      eslint: 9.39.5(jiti@2.7.0)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.56.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
-      eslint-plugin-jsx-a11y: 6.8.0(eslint@8.56.0)
-      eslint-plugin-react: 7.33.2(eslint@8.56.0)
-      eslint-plugin-react-hooks: 4.6.0(eslint@8.56.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0)(eslint@9.39.5(jiti@2.7.0))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.39.5(jiti@2.7.0))
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.5(jiti@2.7.0))
+      eslint-plugin-react: 7.37.5(eslint@9.39.5(jiti@2.7.0))
+      eslint-plugin-react-hooks: 7.1.1(eslint@9.39.5(jiti@2.7.0))
+      globals: 16.4.0
+      typescript-eslint: 8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
     optionalDependencies:
-      typescript: 5.3.3
+      typescript: 5.9.3
     transitivePeerDependencies:
+      - '@typescript-eslint/parser'
       - eslint-import-resolver-webpack
       - supports-color
 
@@ -4930,13 +6581,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.56.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0)(eslint@9.39.5(jiti@2.7.0)):
     dependencies:
-      debug: 4.3.4
+      debug: 4.4.3
       enhanced-resolve: 5.15.0
-      eslint: 8.56.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
+      eslint: 9.39.5(jiti@2.7.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.39.5(jiti@2.7.0))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.39.5(jiti@2.7.0))
       fast-glob: 3.3.2
       get-tsconfig: 4.7.2
       is-core-module: 2.13.1
@@ -4947,143 +6598,166 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
+  eslint-module-utils@2.14.0(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.39.5(jiti@2.7.0)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
-      eslint: 8.56.0
+      '@typescript-eslint/parser': 8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
+      eslint: 9.39.5(jiti@2.7.0)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.56.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0)(eslint@9.39.5(jiti@2.7.0))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.39.5(jiti@2.7.0)):
     dependencies:
-      array-includes: 3.1.7
-      array.prototype.findlastindex: 1.2.3
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
+      eslint: 9.39.5(jiti@2.7.0)
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.32.0)(eslint@9.39.5(jiti@2.7.0))
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.39.5(jiti@2.7.0)):
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 8.56.0
+      eslint: 9.39.5(jiti@2.7.0)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
-      hasown: 2.0.0
-      is-core-module: 2.13.1
+      eslint-module-utils: 2.14.0(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.39.5(jiti@2.7.0))
+      hasown: 2.0.2
+      is-core-module: 2.16.2
       is-glob: 4.0.3
       minimatch: 3.1.2
-      object.fromentries: 2.0.7
-      object.groupby: 1.0.1
-      object.values: 1.1.7
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.1
       semver: 6.3.1
+      string.prototype.trimend: 1.0.10
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 6.19.0(eslint@8.56.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jsx-a11y@6.8.0(eslint@8.56.0):
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.5(jiti@2.7.0)):
     dependencies:
-      '@babel/runtime': 7.23.8
-      aria-query: 5.3.0
-      array-includes: 3.1.7
+      aria-query: 5.3.2
+      array-includes: 3.1.9
       array.prototype.flatmap: 1.3.2
       ast-types-flow: 0.0.8
-      axe-core: 4.7.0
-      axobject-query: 3.2.1
+      axe-core: 4.12.1
+      axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
-      es-iterator-helpers: 1.0.15
-      eslint: 8.56.0
-      hasown: 2.0.0
+      eslint: 9.39.5(jiti@2.7.0)
+      hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
       minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-
-  eslint-plugin-react-hooks@4.6.0(eslint@8.56.0):
-    dependencies:
-      eslint: 8.56.0
+      object.fromentries: 2.0.8
+      safe-regex-test: 1.1.0
+      string.prototype.includes: 2.0.1
+
+  eslint-plugin-react-hooks@7.1.1(eslint@9.39.5(jiti@2.7.0)):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.7
+      eslint: 9.39.5(jiti@2.7.0)
+      hermes-parser: 0.25.1
+      zod: 4.4.3
+      zod-validation-error: 4.0.2(zod@4.4.3)
+    transitivePeerDependencies:
+      - supports-color
 
-  eslint-plugin-react@7.33.2(eslint@8.56.0):
+  eslint-plugin-react@7.37.5(eslint@9.39.5(jiti@2.7.0)):
     dependencies:
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      array.prototype.tosorted: 1.1.2
+      array-includes: 3.1.9
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.3
+      array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
-      es-iterator-helpers: 1.0.15
-      eslint: 8.56.0
+      es-iterator-helpers: 1.4.0
+      eslint: 9.39.5(jiti@2.7.0)
       estraverse: 5.3.0
+      hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-      object.hasown: 1.1.3
-      object.values: 1.1.7
+      object.entries: 1.1.9
+      object.fromentries: 2.0.8
+      object.values: 1.2.1
       prop-types: 15.8.1
       resolve: 2.0.0-next.5
       semver: 6.3.1
-      string.prototype.matchall: 4.0.10
+      string.prototype.matchall: 4.0.12
+      string.prototype.repeat: 1.0.0
 
-  eslint-scope@7.2.2:
+  eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint@8.56.0:
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint-visitor-keys@5.0.1: {}
+
+  eslint@9.39.5(jiti@2.7.0):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
-      '@eslint-community/regexpp': 4.10.0
-      '@eslint/eslintrc': 2.1.4
-      '@eslint/js': 8.56.0
-      '@humanwhocodes/config-array': 0.11.14
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.5(jiti@2.7.0))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.2
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
+      '@eslint/eslintrc': 3.3.6
+      '@eslint/js': 9.39.5
+      '@eslint/plugin-kit': 0.4.1
+      '@humanfs/node': 0.16.8
       '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.2.0
-      ajv: 6.12.6
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.9
+      ajv: 6.15.0
       chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
-      doctrine: 3.0.0
+      cross-spawn: 7.0.6
+      debug: 4.4.3
       escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
       esquery: 1.5.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
+      file-entry-cache: 8.0.0
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.24.0
-      graphemer: 1.4.0
       ignore: 5.3.0
       imurmurhash: 0.1.4
       is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.0
       json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
       lodash.merge: 4.6.2
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       natural-compare: 1.4.0
       optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
+    optionalDependencies:
+      jiti: 2.7.0
     transitivePeerDependencies:
       - supports-color
 
-  espree@9.6.1:
+  espree@10.4.0:
     dependencies:
-      acorn: 8.11.3
-      acorn-jsx: 5.3.2(acorn@8.11.3)
-      eslint-visitor-keys: 3.4.3
+      acorn: 8.17.0
+      acorn-jsx: 5.3.2(acorn@8.17.0)
+      eslint-visitor-keys: 4.2.1
 
   esquery@1.5.0:
     dependencies:
@@ -5095,10 +6769,24 @@ snapshots:
 
   estraverse@5.3.0: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
   esutils@2.0.3: {}
 
+  expect-type@1.4.0: {}
+
   fast-deep-equal@3.1.3: {}
 
+  fast-glob@3.3.1:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+
   fast-glob@3.3.2:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -5111,6 +6799,16 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
+  fast-string-truncated-width@3.0.3: {}
+
+  fast-string-width@3.0.2:
+    dependencies:
+      fast-string-truncated-width: 3.0.3
+
+  fast-wrap-ansi@0.2.2:
+    dependencies:
+      fast-string-width: 3.0.2
+
   fastq@1.16.0:
     dependencies:
       reusify: 1.0.4
@@ -5119,9 +6817,13 @@ snapshots:
     dependencies:
       format: 0.2.2
 
-  file-entry-cache@6.0.1:
+  fdir@6.5.0(picomatch@4.0.5):
+    optionalDependencies:
+      picomatch: 4.0.5
+
+  file-entry-cache@8.0.0:
     dependencies:
-      flat-cache: 3.2.0
+      flat-cache: 4.0.1
 
   file-selector@2.1.2:
     dependencies:
@@ -5136,20 +6838,23 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  flat-cache@3.2.0:
+  flat-cache@4.0.1:
     dependencies:
       flatted: 3.2.9
       keyv: 4.5.4
-      rimraf: 3.0.2
 
   flatted@3.2.9: {}
 
-  follow-redirects@1.15.9: {}
+  follow-redirects@1.16.0: {}
 
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
 
+  for-each@0.3.5:
+    dependencies:
+      is-callable: 1.2.7
+
   foreground-child@3.1.1:
     dependencies:
       cross-spawn: 7.0.3
@@ -5162,11 +6867,18 @@ snapshots:
       es-set-tostringtag: 2.1.0
       mime-types: 2.1.35
 
-  format@0.2.2: {}
+  form-data@4.0.6:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.4
+      mime-types: 2.1.35
 
-  fraction.js@4.3.7: {}
+  format@0.2.2: {}
 
-  fs.realpath@1.0.0: {}
+  fsevents@2.3.2:
+    optional: true
 
   fsevents@2.3.3:
     optional: true
@@ -5180,14 +6892,23 @@ snapshots:
       es-abstract: 1.22.3
       functions-have-names: 1.2.3
 
+  function.prototype.name@1.2.0:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+      hasown: 2.0.4
+      is-callable: 1.2.7
+      is-document.all: 1.0.0
+
   functions-have-names@1.2.3: {}
 
-  get-intrinsic@1.2.2:
-    dependencies:
-      function-bind: 1.1.2
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      hasown: 2.0.2
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
 
   get-intrinsic@1.3.0:
     dependencies:
@@ -5214,6 +6935,12 @@ snapshots:
       call-bind: 1.0.5
       get-intrinsic: 1.3.0
 
+  get-symbol-description@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+
   get-tsconfig@4.7.2:
     dependencies:
       resolve-pkg-maps: 1.0.0
@@ -5226,49 +6953,33 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob@10.3.10:
+  glob@10.5.0:
     dependencies:
       foreground-child: 3.1.1
-      jackspeak: 2.3.6
-      minimatch: 9.0.3
-      minipass: 7.0.4
-      path-scurry: 1.10.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.9
+      minipass: 7.1.3
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
 
-  glob@7.2.3:
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
+  globals@14.0.0: {}
 
-  globals@13.24.0:
-    dependencies:
-      type-fest: 0.20.2
+  globals@16.4.0: {}
 
   globalthis@1.0.3:
     dependencies:
       define-properties: 1.2.1
 
-  globby@11.1.0:
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.2
-      ignore: 5.3.0
-      merge2: 1.4.1
-      slash: 3.0.0
-
-  gopd@1.0.1:
+  globalthis@1.0.4:
     dependencies:
-      get-intrinsic: 1.3.0
+      define-properties: 1.2.1
+      gopd: 1.2.0
 
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
 
-  graphemer@1.4.0: {}
+  graphql@16.14.2: {}
 
   has-bigints@1.0.2: {}
 
@@ -5276,11 +6987,17 @@ snapshots:
 
   has-property-descriptors@1.0.1:
     dependencies:
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.3.0
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
 
   has-proto@1.0.1: {}
 
-  has-symbols@1.0.3: {}
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
 
   has-symbols@1.1.0: {}
 
@@ -5296,6 +7013,10 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hasown@2.0.4:
+    dependencies:
+      function-bind: 1.1.2
+
   hast-util-parse-selector@2.2.5: {}
 
   hastscript@6.0.0:
@@ -5306,10 +7027,54 @@ snapshots:
       property-information: 5.6.0
       space-separated-tokens: 1.1.5
 
+  headers-polyfill@5.0.1:
+    dependencies:
+      '@types/set-cookie-parser': 2.4.10
+      set-cookie-parser: 3.1.2
+
+  hermes-estree@0.25.1: {}
+
+  hermes-parser@0.25.1:
+    dependencies:
+      hermes-estree: 0.25.1
+
   highlight.js@10.7.3: {}
 
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+
+  html-escaper@2.0.2: {}
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
   ignore@5.3.0: {}
 
+  ignore@7.0.6: {}
+
   import-fresh@3.3.0:
     dependencies:
       parent-module: 1.0.1
@@ -5317,22 +7082,19 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
-  inflight@1.0.6:
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-
-  inherits@2.0.4: {}
+  indent-string@4.0.0: {}
 
   internal-slot@1.0.6:
     dependencies:
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.3.0
       hasown: 2.0.2
       side-channel: 1.0.4
 
-  invariant@2.2.4:
+  internal-slot@1.1.0:
     dependencies:
-      loose-envify: 1.4.0
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.1
 
   is-alphabetical@1.0.4: {}
 
@@ -5347,6 +7109,12 @@ snapshots:
       get-intrinsic: 1.3.0
       is-typed-array: 1.1.12
 
+  is-array-buffer@3.0.5:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
   is-arrayish@0.3.2: {}
 
   is-async-function@2.0.0:
@@ -5357,32 +7125,56 @@ snapshots:
     dependencies:
       has-bigints: 1.0.2
 
-  is-binary-path@2.1.0:
+  is-bigint@1.1.0:
     dependencies:
-      binary-extensions: 2.3.0
+      has-bigints: 1.0.2
 
   is-boolean-object@1.1.2:
     dependencies:
       call-bind: 1.0.5
       has-tostringtag: 1.0.2
 
+  is-boolean-object@1.2.2:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
   is-callable@1.2.7: {}
 
   is-core-module@2.13.1:
     dependencies:
       hasown: 2.0.0
 
+  is-core-module@2.16.2:
+    dependencies:
+      hasown: 2.0.4
+
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+
   is-date-object@1.0.5:
     dependencies:
       has-tostringtag: 1.0.2
 
+  is-date-object@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
   is-decimal@1.0.4: {}
 
+  is-document.all@1.0.0:
+    dependencies:
+      call-bound: 1.0.4
+
   is-extglob@2.1.1: {}
 
-  is-finalizationregistry@1.0.2:
+  is-finalizationregistry@1.1.1:
     dependencies:
-      call-bind: 1.0.5
+      call-bound: 1.0.4
 
   is-fullwidth-code-point@3.0.0: {}
 
@@ -5396,80 +7188,171 @@ snapshots:
 
   is-hexadecimal@1.0.4: {}
 
-  is-map@2.0.2: {}
+  is-map@2.0.3: {}
 
   is-negative-zero@2.0.2: {}
 
+  is-negative-zero@2.0.3: {}
+
+  is-node-process@1.2.0: {}
+
   is-number-object@1.0.7:
     dependencies:
       has-tostringtag: 1.0.2
 
+  is-number-object@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
   is-number@7.0.0: {}
 
-  is-path-inside@3.0.3: {}
+  is-potential-custom-element-name@1.0.1: {}
 
   is-regex@1.1.4:
     dependencies:
       call-bind: 1.0.5
       has-tostringtag: 1.0.2
 
-  is-set@2.0.2: {}
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-set@2.0.3: {}
 
   is-shared-array-buffer@1.0.2:
     dependencies:
       call-bind: 1.0.5
 
+  is-shared-array-buffer@1.0.4:
+    dependencies:
+      call-bound: 1.0.4
+
   is-string@1.0.7:
     dependencies:
       has-tostringtag: 1.0.2
 
+  is-string@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
   is-symbol@1.0.4:
     dependencies:
       has-symbols: 1.1.0
 
+  is-symbol@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+
   is-typed-array@1.1.12:
     dependencies:
       which-typed-array: 1.1.13
 
-  is-weakmap@2.0.1: {}
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.22
+
+  is-weakmap@2.0.2: {}
 
   is-weakref@1.0.2:
     dependencies:
       call-bind: 1.0.5
 
-  is-weakset@2.0.2:
+  is-weakref@1.1.1:
     dependencies:
-      call-bind: 1.0.5
+      call-bound: 1.0.4
+
+  is-weakset@2.0.4:
+    dependencies:
+      call-bound: 1.0.4
       get-intrinsic: 1.3.0
 
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
 
-  iterator.prototype@1.1.2:
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-report@3.0.1:
     dependencies:
-      define-properties: 1.2.1
-      get-intrinsic: 1.2.2
-      has-symbols: 1.0.3
-      reflect.getprototypeof: 1.0.4
-      set-function-name: 2.0.1
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-lib-source-maps@5.0.6:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      debug: 4.4.3
+      istanbul-lib-coverage: 3.2.2
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-reports@3.2.0:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
+  iterator.prototype@1.1.5:
+    dependencies:
+      define-data-property: 1.1.4
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      has-symbols: 1.1.0
+      set-function-name: 2.0.2
 
-  jackspeak@2.3.6:
+  jackspeak@3.4.3:
     dependencies:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jiti@1.21.6: {}
+  jiti@2.7.0: {}
 
   jose@4.15.9: {}
 
   js-tokens@4.0.0: {}
 
-  js-yaml@4.1.0:
+  js-yaml@4.3.0:
     dependencies:
       argparse: 2.0.1
 
+  jsdom@25.0.1:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      form-data: 4.0.2
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.24
+      parse5: 7.3.0
+      rrweb-cssom: 0.7.1
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.21.0
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  jsesc@3.1.0: {}
+
   json-buffer@3.0.1: {}
 
   json-schema-traverse@0.4.1: {}
@@ -5480,12 +7363,14 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
+  json5@2.2.3: {}
+
   jsx-ast-utils@3.3.5:
     dependencies:
-      array-includes: 3.1.7
+      array-includes: 3.1.9
       array.prototype.flat: 1.3.2
       object.assign: 4.1.5
-      object.values: 1.1.7
+      object.values: 1.2.1
 
   keyv@4.5.4:
     dependencies:
@@ -5502,11 +7387,54 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  lilconfig@2.1.0: {}
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
 
-  lilconfig@3.1.2: {}
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
 
-  lines-and-columns@1.2.4: {}
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
 
   locate-path@6.0.0:
     dependencies:
@@ -5518,20 +7446,42 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  loupe@3.2.1: {}
+
   lowlight@1.20.0:
     dependencies:
       fault: 1.0.4
       highlight.js: 10.7.3
 
-  lru-cache@10.1.0: {}
+  lru-cache@10.4.3: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
 
   lru-cache@6.0.0:
     dependencies:
       yallist: 4.0.0
 
-  lucide-react@0.453.0(react@18.2.0):
+  lucide-react@0.577.0(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+
+  lz-string@1.5.0: {}
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  magicast@0.3.5:
     dependencies:
-      react: 18.2.0
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      source-map-js: 1.2.1
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.7.2
 
   math-intrinsics@1.1.0: {}
 
@@ -5548,88 +7498,114 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
+  min-indent@1.0.1: {}
+
+  minimatch@10.2.5:
+    dependencies:
+      brace-expansion: 5.0.7
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
 
-  minimatch@9.0.3:
+  minimatch@3.1.5:
+    dependencies:
+      brace-expansion: 1.1.11
+
+  minimatch@9.0.9:
     dependencies:
-      brace-expansion: 2.0.1
+      brace-expansion: 2.1.2
 
   minimist@1.2.8: {}
 
-  minipass@7.0.4: {}
+  minipass@7.1.3: {}
 
   ms@2.1.2: {}
 
   ms@2.1.3: {}
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
+  msw@2.15.0(@types/node@20.11.5)(typescript@5.9.3):
+    dependencies:
+      '@inquirer/confirm': 6.1.1(@types/node@20.11.5)
+      '@mswjs/interceptors': 0.41.9
+      '@open-draft/deferred-promise': 3.0.0
+      '@types/statuses': 2.0.6
+      cookie: 1.1.1
+      graphql: 16.14.2
+      headers-polyfill: 5.0.1
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      path-to-regexp: 6.3.0
+      picocolors: 1.1.1
+      rettime: 0.11.11
+      statuses: 2.0.2
+      strict-event-emitter: 0.5.1
+      tough-cookie: 6.0.2
+      type-fest: 5.8.0
+      until-async: 3.0.2
+      yargs: 17.7.3
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/node'
+
+  mute-stream@3.0.0: {}
+
+  nanoid@3.3.15: {}
 
   nanoid@3.3.7: {}
 
   natural-compare@1.4.0: {}
 
-  next-auth@4.24.10(next@14.2.26(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(nodemailer@6.9.16)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next-auth@4.24.14(next@16.2.10(@babel/core@7.29.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.29.7
       '@panva/hkdf': 1.2.1
       cookie: 0.7.2
       jose: 4.15.9
-      next: 14.2.26(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      next: 16.2.10(@babel/core@7.29.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       oauth: 0.9.15
-      openid-client: 5.7.0
-      preact: 10.24.3
-      preact-render-to-string: 5.2.6(preact@10.24.3)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      openid-client: 5.7.1
+      preact: 10.29.7(preact-render-to-string@5.2.6)
+      preact-render-to-string: 5.2.6(preact@10.29.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
       uuid: 8.3.2
-    optionalDependencies:
-      nodemailer: 6.9.16
 
-  next-themes@0.4.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next-themes@0.4.6(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
 
-  next@14.2.26(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next@16.2.10(@babel/core@7.29.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.61.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
-      '@next/env': 14.2.26
-      '@swc/helpers': 0.5.5
-      busboy: 1.6.0
+      '@next/env': 16.2.10
+      '@swc/helpers': 0.5.15
+      baseline-browser-mapping: 2.10.42
       caniuse-lite: 1.0.30001671
-      graceful-fs: 4.2.11
       postcss: 8.4.31
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(react@18.2.0)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      styled-jsx: 5.1.6(@babel/core@7.29.7)(react@19.2.7)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 14.2.26
-      '@next/swc-darwin-x64': 14.2.26
-      '@next/swc-linux-arm64-gnu': 14.2.26
-      '@next/swc-linux-arm64-musl': 14.2.26
-      '@next/swc-linux-x64-gnu': 14.2.26
-      '@next/swc-linux-x64-musl': 14.2.26
-      '@next/swc-win32-arm64-msvc': 14.2.26
-      '@next/swc-win32-ia32-msvc': 14.2.26
-      '@next/swc-win32-x64-msvc': 14.2.26
+      '@next/swc-darwin-arm64': 16.2.10
+      '@next/swc-darwin-x64': 16.2.10
+      '@next/swc-linux-arm64-gnu': 16.2.10
+      '@next/swc-linux-arm64-musl': 16.2.10
+      '@next/swc-linux-x64-gnu': 16.2.10
+      '@next/swc-linux-x64-musl': 16.2.10
+      '@next/swc-win32-arm64-msvc': 16.2.10
+      '@next/swc-win32-x64-msvc': 16.2.10
       '@opentelemetry/api': 1.9.0
+      '@playwright/test': 1.61.1
+      sharp: 0.34.5
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
 
   node-releases@2.0.18: {}
 
-  nodemailer@6.9.16:
-    optional: true
-
-  normalize-path@3.0.0: {}
-
-  normalize-range@0.1.2: {}
+  nwsapi@2.2.24: {}
 
   oauth@0.9.15: {}
 
@@ -5637,61 +7613,63 @@ snapshots:
 
   object-hash@2.2.0: {}
 
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.1: {}
 
+  object-inspect@1.13.4: {}
+
   object-keys@1.1.1: {}
 
   object.assign@4.1.5:
     dependencies:
       call-bind: 1.0.5
       define-properties: 1.2.1
-      has-symbols: 1.0.3
+      has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  object.entries@1.1.7:
+  object.assign@4.1.7:
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.9
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.22.3
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
 
-  object.fromentries@2.0.7:
+  object.entries@1.1.9:
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.9
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.22.3
+      es-object-atoms: 1.1.1
 
-  object.groupby@1.0.1:
+  object.fromentries@2.0.8:
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.9
       define-properties: 1.2.1
-      es-abstract: 1.22.3
-      get-intrinsic: 1.2.2
+      es-abstract: 1.24.2
+      es-object-atoms: 1.1.1
 
-  object.hasown@1.1.3:
+  object.groupby@1.0.3:
     dependencies:
+      call-bind: 1.0.9
       define-properties: 1.2.1
-      es-abstract: 1.22.3
+      es-abstract: 1.24.2
 
-  object.values@1.1.7:
+  object.values@1.2.1:
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.9
+      call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.22.3
-
-  oidc-token-hash@5.0.3: {}
+      es-object-atoms: 1.1.1
 
-  once@1.4.0:
-    dependencies:
-      wrappy: 1.0.2
+  oidc-token-hash@5.2.0: {}
 
-  openid-client@5.7.0:
+  openid-client@5.7.1:
     dependencies:
       jose: 4.15.9
       lru-cache: 6.0.0
       object-hash: 2.2.0
-      oidc-token-hash: 5.0.3
+      oidc-token-hash: 5.2.0
 
   optionator@0.9.3:
     dependencies:
@@ -5702,6 +7680,14 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  outvariant@1.4.3: {}
+
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -5710,7 +7696,9 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  papaparse@5.4.1: {}
+  package-json-from-dist@1.0.1: {}
+
+  papaparse@5.5.4: {}
 
   parent-module@1.0.1:
     dependencies:
@@ -5725,61 +7713,42 @@ snapshots:
       is-decimal: 1.0.4
       is-hexadecimal: 1.0.4
 
-  path-exists@4.0.0: {}
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
 
-  path-is-absolute@1.0.1: {}
+  path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
 
   path-parse@1.0.7: {}
 
-  path-scurry@1.10.1:
+  path-scurry@1.11.1:
     dependencies:
-      lru-cache: 10.1.0
-      minipass: 7.0.4
+      lru-cache: 10.4.3
+      minipass: 7.1.3
 
-  path-type@4.0.0: {}
+  path-to-regexp@6.3.0: {}
 
-  picocolors@1.0.0: {}
+  pathe@1.1.2: {}
 
-  picocolors@1.1.1: {}
-
-  picomatch@2.3.1: {}
+  pathval@2.0.1: {}
 
-  pify@2.3.0: {}
+  picocolors@1.1.1: {}
 
-  pirates@4.0.6: {}
+  picomatch@2.3.1: {}
 
-  postcss-import@15.1.0(postcss@8.4.47):
-    dependencies:
-      postcss: 8.4.47
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
+  picomatch@4.0.5: {}
 
-  postcss-js@4.0.1(postcss@8.4.47):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.47
+  playwright-core@1.61.1: {}
 
-  postcss-load-config@4.0.2(postcss@8.4.47):
+  playwright@1.61.1:
     dependencies:
-      lilconfig: 3.1.2
-      yaml: 2.6.0
+      playwright-core: 1.61.1
     optionalDependencies:
-      postcss: 8.4.47
-
-  postcss-nested@6.2.0(postcss@8.4.47):
-    dependencies:
-      postcss: 8.4.47
-      postcss-selector-parser: 6.1.2
-
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
+      fsevents: 2.3.2
 
-  postcss-value-parser@4.2.0: {}
+  possible-typed-array-names@1.1.0: {}
 
   postcss@8.4.31:
     dependencies:
@@ -5793,22 +7762,30 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  preact-render-to-string@5.2.6(preact@10.24.3):
+  postcss@8.5.16:
+    dependencies:
+      nanoid: 3.3.15
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  preact-render-to-string@5.2.6(preact@10.29.7):
     dependencies:
-      preact: 10.24.3
+      preact: 10.29.7(preact-render-to-string@5.2.6)
       pretty-format: 3.8.0
 
-  preact@10.24.3: {}
+  preact@10.29.7(preact-render-to-string@5.2.6):
+    optionalDependencies:
+      preact-render-to-string: 5.2.6(preact@10.29.7)
 
   prelude-ls@1.2.1: {}
 
-  pretty-format@3.8.0: {}
-
-  prisma@5.22.0:
+  pretty-format@27.5.1:
     dependencies:
-      '@prisma/engines': 5.22.0
-    optionalDependencies:
-      fsevents: 2.3.3
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
+  pretty-format@3.8.0: {}
 
   prismjs@1.27.0: {}
 
@@ -5824,141 +7801,103 @@ snapshots:
     dependencies:
       xtend: 4.0.2
 
-  proxy-from-env@1.1.0: {}
+  proxy-from-env@2.1.0: {}
 
   punycode@2.3.1: {}
 
-  qr.js@0.0.0: {}
+  qrcode-generator@2.0.4: {}
 
   queue-microtask@1.2.3: {}
 
-  react-day-picker@9.9.0(react@18.2.0):
+  react-day-picker@9.14.0(react@19.2.7):
     dependencies:
-      '@date-fns/tz': 1.4.1
-      date-fns: 4.1.0
+      '@date-fns/tz': 1.5.0
+      '@tabby_ai/hijri-converter': 1.0.5
+      date-fns: 4.4.0
       date-fns-jalali: 4.1.0-0
-      react: 18.2.0
+      react: 19.2.7
 
-  react-dom@18.2.0(react@18.2.0):
+  react-dom@19.2.7(react@19.2.7):
     dependencies:
-      loose-envify: 1.4.0
-      react: 18.2.0
-      scheduler: 0.23.0
+      react: 19.2.7
+      scheduler: 0.27.0
 
-  react-dropzone@14.3.5(react@18.2.0):
+  react-dropzone@15.0.0(react@19.2.7):
     dependencies:
       attr-accept: 2.2.5
       file-selector: 2.1.2
       prop-types: 15.8.1
-      react: 18.2.0
+      react: 19.2.7
 
-  react-hook-form@7.53.1(react@18.2.0):
+  react-hook-form@7.81.0(react@19.2.7):
     dependencies:
-      react: 18.2.0
+      react: 19.2.7
 
   react-is@16.13.1: {}
 
-  react-qr-code@2.0.12(react@18.2.0):
-    dependencies:
-      prop-types: 15.8.1
-      qr.js: 0.0.0
-      react: 18.2.0
-
-  react-remove-scroll-bar@2.3.6(@types/react@18.2.48)(react@18.2.0):
-    dependencies:
-      react: 18.2.0
-      react-style-singleton: 2.2.1(@types/react@18.2.48)(react@18.2.0)
-      tslib: 2.6.2
-    optionalDependencies:
-      '@types/react': 18.2.48
+  react-is@17.0.2: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@18.2.48)(react@18.2.0):
+  react-qr-code@2.2.0(react@19.2.7):
     dependencies:
-      react: 18.2.0
-      react-style-singleton: 2.2.3(@types/react@18.2.48)(react@18.2.0)
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 18.2.48
+      prop-types: 15.8.1
+      qrcode-generator: 2.0.4
+      react: 19.2.7
 
-  react-remove-scroll@2.6.0(@types/react@18.2.48)(react@18.2.0):
-    dependencies:
-      react: 18.2.0
-      react-remove-scroll-bar: 2.3.6(@types/react@18.2.48)(react@18.2.0)
-      react-style-singleton: 2.2.1(@types/react@18.2.48)(react@18.2.0)
-      tslib: 2.6.2
-      use-callback-ref: 1.3.1(@types/react@18.2.48)(react@18.2.0)
-      use-sidecar: 1.1.2(@types/react@18.2.48)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
+  react-refresh@0.17.0: {}
 
-  react-remove-scroll@2.6.2(@types/react@18.2.48)(react@18.2.0):
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.17)(react@19.2.7):
     dependencies:
-      react: 18.2.0
-      react-remove-scroll-bar: 2.3.8(@types/react@18.2.48)(react@18.2.0)
-      react-style-singleton: 2.2.1(@types/react@18.2.48)(react@18.2.0)
+      react: 19.2.7
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.7)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@18.2.48)(react@18.2.0)
-      use-sidecar: 1.1.2(@types/react@18.2.48)(react@18.2.0)
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
 
-  react-remove-scroll@2.7.1(@types/react@18.2.48)(react@18.2.0):
+  react-remove-scroll@2.7.2(@types/react@19.2.17)(react@19.2.7):
     dependencies:
-      react: 18.2.0
-      react-remove-scroll-bar: 2.3.8(@types/react@18.2.48)(react@18.2.0)
-      react-style-singleton: 2.2.3(@types/react@18.2.48)(react@18.2.0)
+      react: 19.2.7
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.17)(react@19.2.7)
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.7)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@18.2.48)(react@18.2.0)
-      use-sidecar: 1.1.3(@types/react@18.2.48)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-
-  react-style-singleton@2.2.1(@types/react@18.2.48)(react@18.2.0):
-    dependencies:
-      get-nonce: 1.0.1
-      invariant: 2.2.4
-      react: 18.2.0
-      tslib: 2.6.2
+      use-callback-ref: 1.3.3(@types/react@19.2.17)(react@19.2.7)
+      use-sidecar: 1.1.3(@types/react@19.2.17)(react@19.2.7)
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
 
-  react-style-singleton@2.2.3(@types/react@18.2.48)(react@18.2.0):
+  react-style-singleton@2.2.3(@types/react@19.2.17)(react@19.2.7):
     dependencies:
       get-nonce: 1.0.1
-      react: 18.2.0
+      react: 19.2.7
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
 
-  react-syntax-highlighter@15.5.0(react@18.2.0):
+  react-syntax-highlighter@15.5.0(react@19.2.7):
     dependencies:
       '@babel/runtime': 7.23.8
       highlight.js: 10.7.3
       lowlight: 1.20.0
       prismjs: 1.29.0
-      react: 18.2.0
+      react: 19.2.7
       refractor: 3.6.0
 
-  react@18.2.0:
-    dependencies:
-      loose-envify: 1.4.0
-
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
+  react@19.2.7: {}
 
-  readdirp@3.6.0:
+  redent@3.0.0:
     dependencies:
-      picomatch: 2.3.1
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
 
-  reflect.getprototypeof@1.0.4:
+  reflect.getprototypeof@1.0.10:
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.9
       define-properties: 1.2.1
-      es-abstract: 1.22.3
+      es-abstract: 1.24.2
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
-      globalthis: 1.0.3
-      which-builtin-type: 1.1.3
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
 
   refractor@3.6.0:
     dependencies:
@@ -5974,6 +7913,17 @@ snapshots:
       define-properties: 1.2.1
       set-function-name: 2.0.1
 
+  regexp.prototype.flags@1.5.4:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      set-function-name: 2.0.2
+
+  require-directory@2.1.1: {}
+
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -5990,11 +7940,44 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  rettime@0.11.11: {}
+
   reusify@1.0.4: {}
 
-  rimraf@3.0.2:
+  rollup@4.62.2:
     dependencies:
-      glob: 7.2.3
+      '@types/estree': 1.0.9
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.62.2
+      '@rollup/rollup-android-arm64': 4.62.2
+      '@rollup/rollup-darwin-arm64': 4.62.2
+      '@rollup/rollup-darwin-x64': 4.62.2
+      '@rollup/rollup-freebsd-arm64': 4.62.2
+      '@rollup/rollup-freebsd-x64': 4.62.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.62.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.62.2
+      '@rollup/rollup-linux-arm64-gnu': 4.62.2
+      '@rollup/rollup-linux-arm64-musl': 4.62.2
+      '@rollup/rollup-linux-loong64-gnu': 4.62.2
+      '@rollup/rollup-linux-loong64-musl': 4.62.2
+      '@rollup/rollup-linux-ppc64-gnu': 4.62.2
+      '@rollup/rollup-linux-ppc64-musl': 4.62.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.62.2
+      '@rollup/rollup-linux-riscv64-musl': 4.62.2
+      '@rollup/rollup-linux-s390x-gnu': 4.62.2
+      '@rollup/rollup-linux-x64-gnu': 4.62.2
+      '@rollup/rollup-linux-x64-musl': 4.62.2
+      '@rollup/rollup-openbsd-x64': 4.62.2
+      '@rollup/rollup-openharmony-arm64': 4.62.2
+      '@rollup/rollup-win32-arm64-msvc': 4.62.2
+      '@rollup/rollup-win32-ia32-msvc': 4.62.2
+      '@rollup/rollup-win32-x64-gnu': 4.62.2
+      '@rollup/rollup-win32-x64-msvc': 4.62.2
+      fsevents: 2.3.3
+
+  rrweb-cssom@0.7.1: {}
+
+  rrweb-cssom@0.8.0: {}
 
   run-parallel@1.2.0:
     dependencies:
@@ -6003,8 +7986,21 @@ snapshots:
   safe-array-concat@1.1.0:
     dependencies:
       call-bind: 1.0.5
-      get-intrinsic: 1.2.2
-      has-symbols: 1.0.3
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-array-concat@1.1.4:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
       isarray: 2.0.5
 
   safe-regex-test@1.0.2:
@@ -6013,18 +8009,28 @@ snapshots:
       get-intrinsic: 1.3.0
       is-regex: 1.1.4
 
-  scheduler@0.23.0:
+  safe-regex-test@1.1.0:
     dependencies:
-      loose-envify: 1.4.0
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
 
-  semver@6.3.1: {}
+  safer-buffer@2.1.2: {}
 
-  semver@7.5.4:
+  saxes@6.0.0:
     dependencies:
-      lru-cache: 6.0.0
+      xmlchars: 2.2.0
+
+  scheduler@0.27.0: {}
+
+  semver@6.3.1: {}
 
   semver@7.7.2: {}
 
+  semver@7.8.5: {}
+
+  set-cookie-parser@3.1.2: {}
+
   set-function-length@1.2.0:
     dependencies:
       define-data-property: 1.1.1
@@ -6033,12 +8039,34 @@ snapshots:
       gopd: 1.2.0
       has-property-descriptors: 1.0.1
 
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
   set-function-name@2.0.1:
     dependencies:
       define-data-property: 1.1.1
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.1
 
+  set-function-name@2.0.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+
   sharp@0.34.2:
     dependencies:
       color: 4.2.3
@@ -6067,31 +8095,102 @@ snapshots:
       '@img/sharp-win32-ia32': 0.34.2
       '@img/sharp-win32-x64': 0.34.2
 
+  sharp@0.34.5:
+    dependencies:
+      '@img/colour': 1.1.0
+      detect-libc: 2.1.2
+      semver: 7.8.5
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.5
+      '@img/sharp-darwin-x64': 0.34.5
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+      '@img/sharp-libvips-linux-arm': 1.2.4
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+      '@img/sharp-libvips-linux-x64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      '@img/sharp-linux-arm': 0.34.5
+      '@img/sharp-linux-arm64': 0.34.5
+      '@img/sharp-linux-ppc64': 0.34.5
+      '@img/sharp-linux-riscv64': 0.34.5
+      '@img/sharp-linux-s390x': 0.34.5
+      '@img/sharp-linux-x64': 0.34.5
+      '@img/sharp-linuxmusl-arm64': 0.34.5
+      '@img/sharp-linuxmusl-x64': 0.34.5
+      '@img/sharp-wasm32': 0.34.5
+      '@img/sharp-win32-arm64': 0.34.5
+      '@img/sharp-win32-ia32': 0.34.5
+      '@img/sharp-win32-x64': 0.34.5
+    optional: true
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
   shebang-regex@3.0.0: {}
 
+  side-channel-list@1.0.1:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
   side-channel@1.0.4:
     dependencies:
       call-bind: 1.0.5
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.3.0
       object-inspect: 1.13.1
 
+  side-channel@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.1
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  siginfo@2.0.0: {}
+
   signal-exit@4.1.0: {}
 
   simple-swizzle@0.2.2:
     dependencies:
       is-arrayish: 0.3.2
 
-  slash@3.0.0: {}
-
   source-map-js@1.2.1: {}
 
   space-separated-tokens@1.1.5: {}
 
-  streamsearch@1.1.0: {}
+  stackback@0.0.2: {}
+
+  statuses@2.0.2: {}
+
+  std-env@3.10.0: {}
+
+  stop-iteration-iterator@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
+
+  strict-event-emitter@0.5.1: {}
 
   string-width@4.2.3:
     dependencies:
@@ -6105,17 +8204,43 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
 
-  string.prototype.matchall@4.0.10:
+  string.prototype.includes@2.0.1:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+
+  string.prototype.matchall@4.0.12:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      regexp.prototype.flags: 1.5.4
+      set-function-name: 2.0.2
+      side-channel: 1.1.1
+
+  string.prototype.repeat@1.0.0:
     dependencies:
-      call-bind: 1.0.5
       define-properties: 1.2.1
       es-abstract: 1.22.3
-      get-intrinsic: 1.2.2
-      has-symbols: 1.0.3
-      internal-slot: 1.0.6
-      regexp.prototype.flags: 1.5.1
-      set-function-name: 2.0.1
-      side-channel: 1.0.4
+
+  string.prototype.trim@1.2.11:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-object-atoms: 1.1.2
+      has-property-descriptors: 1.0.2
+      safe-regex-test: 1.1.0
 
   string.prototype.trim@1.2.8:
     dependencies:
@@ -6123,6 +8248,13 @@ snapshots:
       define-properties: 1.2.1
       es-abstract: 1.22.3
 
+  string.prototype.trimend@1.0.10:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.2
+
   string.prototype.trimend@1.0.7:
     dependencies:
       call-bind: 1.0.5
@@ -6135,6 +8267,12 @@ snapshots:
       define-properties: 1.2.1
       es-abstract: 1.22.3
 
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -6145,22 +8283,18 @@ snapshots:
 
   strip-bom@3.0.0: {}
 
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
   strip-json-comments@3.1.1: {}
 
-  styled-jsx@5.1.1(react@18.2.0):
+  styled-jsx@5.1.6(@babel/core@7.29.7)(react@19.2.7):
     dependencies:
       client-only: 0.0.1
-      react: 18.2.0
-
-  sucrase@3.35.0:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
-      commander: 4.1.1
-      glob: 10.3.10
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
+      react: 19.2.7
+    optionalDependencies:
+      '@babel/core': 7.29.7
 
   supports-color@7.2.0:
     dependencies:
@@ -6168,60 +8302,70 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  tailwind-merge@2.5.4: {}
+  symbol-tree@3.2.4: {}
+
+  tagged-tag@1.0.0: {}
+
+  tailwind-merge@3.6.0: {}
+
+  tailwindcss@4.3.2: {}
+
+  tapable@2.2.1: {}
+
+  tapable@2.3.3: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.14):
+  test-exclude@7.0.2:
     dependencies:
-      tailwindcss: 3.4.14
+      '@istanbuljs/schema': 0.1.6
+      glob: 10.5.0
+      minimatch: 10.2.5
+
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.2: {}
 
-  tailwindcss@3.4.14:
+  tinyglobby@0.2.17:
     dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 2.1.0
-      micromatch: 4.0.5
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.47
-      postcss-import: 15.1.0(postcss@8.4.47)
-      postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)
-      postcss-nested: 6.2.0(postcss@8.4.47)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
 
-  tapable@2.2.1: {}
+  tinypool@1.1.1: {}
+
+  tinyrainbow@1.2.0: {}
+
+  tinyspy@3.0.2: {}
+
+  tldts-core@6.1.86: {}
 
-  text-table@0.2.0: {}
+  tldts-core@7.4.8: {}
 
-  thenify-all@1.6.0:
+  tldts@6.1.86:
     dependencies:
-      thenify: 3.3.1
+      tldts-core: 6.1.86
 
-  thenify@3.3.1:
+  tldts@7.4.8:
     dependencies:
-      any-promise: 1.3.0
+      tldts-core: 7.4.8
 
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
 
-  ts-api-utils@1.0.3(typescript@5.3.3):
+  tough-cookie@5.1.2:
     dependencies:
-      typescript: 5.3.3
+      tldts: 6.1.86
 
-  ts-interface-checker@0.1.13: {}
+  tough-cookie@6.0.2:
+    dependencies:
+      tldts: 7.4.8
+
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+
+  ts-api-utils@2.5.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
 
   tsconfig-paths@3.15.0:
     dependencies:
@@ -6230,15 +8374,17 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
-  tslib@2.6.2: {}
-
   tslib@2.8.1: {}
 
+  tw-animate-css@1.4.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
 
-  type-fest@0.20.2: {}
+  type-fest@5.8.0:
+    dependencies:
+      tagged-tag: 1.0.0
 
   typed-array-buffer@1.0.0:
     dependencies:
@@ -6246,6 +8392,12 @@ snapshots:
       get-intrinsic: 1.3.0
       is-typed-array: 1.1.12
 
+  typed-array-buffer@1.0.3:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+
   typed-array-byte-length@1.0.0:
     dependencies:
       call-bind: 1.0.5
@@ -6253,6 +8405,14 @@ snapshots:
       has-proto: 1.0.1
       is-typed-array: 1.1.12
 
+  typed-array-byte-length@1.0.3:
+    dependencies:
+      call-bind: 1.0.9
+      for-each: 0.3.3
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+
   typed-array-byte-offset@1.0.0:
     dependencies:
       available-typed-arrays: 1.0.5
@@ -6261,23 +8421,62 @@ snapshots:
       has-proto: 1.0.1
       is-typed-array: 1.1.12
 
+  typed-array-byte-offset@1.0.4:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.9
+      for-each: 0.3.3
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+
   typed-array-length@1.0.4:
     dependencies:
       call-bind: 1.0.5
       for-each: 0.3.3
       is-typed-array: 1.1.12
 
-  typescript@5.3.3: {}
+  typed-array-length@1.0.8:
+    dependencies:
+      call-bind: 1.0.9
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
+  typescript-eslint@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.63.0(@typescript-eslint/parser@8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.63.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.63.0(eslint@9.39.5(jiti@2.7.0))(typescript@5.9.3)
+      eslint: 9.39.5(jiti@2.7.0)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.9.3: {}
 
   unbox-primitive@1.0.2:
     dependencies:
       call-bind: 1.0.5
       has-bigints: 1.0.2
-      has-symbols: 1.0.3
+      has-symbols: 1.1.0
       which-boxed-primitive: 1.0.2
 
+  unbox-primitive@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.0.2
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
   undici-types@5.26.5: {}
 
+  until-async@3.0.2: {}
+
   update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
       browserslist: 4.24.2
@@ -6288,41 +8487,105 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  use-callback-ref@1.3.1(@types/react@18.2.48)(react@18.2.0):
+  use-callback-ref@1.3.3(@types/react@19.2.17)(react@19.2.7):
     dependencies:
-      react: 18.2.0
-      tslib: 2.6.2
+      react: 19.2.7
+      tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
 
-  use-callback-ref@1.3.3(@types/react@18.2.48)(react@18.2.0):
+  use-sidecar@1.1.3(@types/react@19.2.17)(react@19.2.7):
     dependencies:
-      react: 18.2.0
+      detect-node-es: 1.1.0
+      react: 19.2.7
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/react': 19.2.17
+
+  uuid@14.0.1: {}
+
+  uuid@8.3.2: {}
 
-  use-sidecar@1.1.2(@types/react@18.2.48)(react@18.2.0):
+  vite-node@2.1.9(@types/node@20.11.5)(lightningcss@1.32.0):
     dependencies:
-      detect-node-es: 1.1.0
-      react: 18.2.0
-      tslib: 2.6.2
-    optionalDependencies:
-      '@types/react': 18.2.48
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 1.1.2
+      vite: 5.4.21(@types/node@20.11.5)(lightningcss@1.32.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
 
-  use-sidecar@1.1.3(@types/react@18.2.48)(react@18.2.0):
+  vite@5.4.21(@types/node@20.11.5)(lightningcss@1.32.0):
     dependencies:
-      detect-node-es: 1.1.0
-      react: 18.2.0
-      tslib: 2.8.1
+      esbuild: 0.21.5
+      postcss: 8.4.47
+      rollup: 4.62.2
+    optionalDependencies:
+      '@types/node': 20.11.5
+      fsevents: 2.3.3
+      lightningcss: 1.32.0
+
+  vitest@2.1.9(@types/node@20.11.5)(jsdom@25.0.1)(lightningcss@1.32.0)(msw@2.15.0(@types/node@20.11.5)(typescript@5.9.3)):
+    dependencies:
+      '@vitest/expect': 2.1.9
+      '@vitest/mocker': 2.1.9(msw@2.15.0(@types/node@20.11.5)(typescript@5.9.3))(vite@5.4.21(@types/node@20.11.5)(lightningcss@1.32.0))
+      '@vitest/pretty-format': 2.1.9
+      '@vitest/runner': 2.1.9
+      '@vitest/snapshot': 2.1.9
+      '@vitest/spy': 2.1.9
+      '@vitest/utils': 2.1.9
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.4.0
+      magic-string: 0.30.21
+      pathe: 1.1.2
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinypool: 1.1.1
+      tinyrainbow: 1.2.0
+      vite: 5.4.21(@types/node@20.11.5)(lightningcss@1.32.0)
+      vite-node: 2.1.9(@types/node@20.11.5)(lightningcss@1.32.0)
+      why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/react': 18.2.48
+      '@types/node': 20.11.5
+      jsdom: 25.0.1
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  webidl-conversions@7.0.0: {}
 
-  util-deprecate@1.0.2: {}
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
 
-  uuid@11.0.3: {}
+  whatwg-mimetype@4.0.0: {}
 
-  uuid@8.3.2: {}
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
 
   which-boxed-primitive@1.0.2:
     dependencies:
@@ -6332,40 +8595,64 @@ snapshots:
       is-string: 1.0.7
       is-symbol: 1.0.4
 
-  which-builtin-type@1.1.3:
+  which-boxed-primitive@1.1.1:
     dependencies:
-      function.prototype.name: 1.1.6
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
+
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.2.0
       has-tostringtag: 1.0.2
       is-async-function: 2.0.0
-      is-date-object: 1.0.5
-      is-finalizationregistry: 1.0.2
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
       is-generator-function: 1.0.10
-      is-regex: 1.1.4
-      is-weakref: 1.0.2
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
       isarray: 2.0.5
-      which-boxed-primitive: 1.0.2
-      which-collection: 1.0.1
-      which-typed-array: 1.1.13
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.22
 
-  which-collection@1.0.1:
+  which-collection@1.0.2:
     dependencies:
-      is-map: 2.0.2
-      is-set: 2.0.2
-      is-weakmap: 2.0.1
-      is-weakset: 2.0.2
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.4
 
   which-typed-array@1.1.13:
     dependencies:
       available-typed-arrays: 1.0.5
       call-bind: 1.0.5
       for-each: 0.3.3
-      gopd: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
+  which-typed-array@1.1.22:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
       has-tostringtag: 1.0.2
 
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -6378,14 +8665,38 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.1.0
 
-  wrappy@1.0.2: {}
+  ws@8.21.0: {}
+
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
 
   xtend@4.0.2: {}
 
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
   yallist@4.0.0: {}
 
-  yaml@2.6.0: {}
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.3:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
 
   yocto-queue@0.1.0: {}
 
-  zod@3.23.8: {}
+  zod-validation-error@4.0.2(zod@4.4.3):
+    dependencies:
+      zod: 4.4.3
+
+  zod@3.25.76: {}
+
+  zod@4.4.3: {}
diff --git a/web/postcss.config.js b/web/postcss.config.js
index 33ad091d..52b9b4ba 100644
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }
diff --git a/web/middleware.ts b/web/proxy.ts
similarity index 90%
rename from web/middleware.ts
rename to web/proxy.ts
index 4e7d443a..4a6f70eb 100644
--- a/web/middleware.ts
+++ b/web/proxy.ts
@@ -3,7 +3,9 @@ import type { NextRequest } from 'next/server'
 import { getToken } from 'next-auth/jwt'
 import { Routes } from './config/routes'
 
-export async function middleware(request: NextRequest) {
+// Next 16 renamed the "middleware" convention to "proxy". This guards the
+// dashboard: authenticated routing based on the NextAuth session token.
+export async function proxy(request: NextRequest) {
   // Extract token using the secret for session-based authentication
   const token = await getToken({
     req: request,
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
index bf4e815d..85e75e76 100644
Binary files a/web/public/favicon.ico and b/web/public/favicon.ico differ
diff --git a/web/public/images/logo.png b/web/public/images/logo.png
index 88eb2522..3f369978 100644
Binary files a/web/public/images/logo.png and b/web/public/images/logo.png differ
diff --git a/web/public/samples/bulk-sms-sample.csv b/web/public/samples/bulk-sms-sample.csv
new file mode 100644
index 00000000..b5b3700e
--- /dev/null
+++ b/web/public/samples/bulk-sms-sample.csv
@@ -0,0 +1,4 @@
+name,phone,order_id,total
+Alice Johnson,+14155550101,ORD-1042,49.99
+Bob Martinez,+16475550187,ORD-1043,128.50
+Dana Chen,+12065550142,ORD-1044,32.00
diff --git a/web/styles/main.css b/web/styles/main.css
index a8ab8216..4e5adae6 100644
--- a/web/styles/main.css
+++ b/web/styles/main.css
@@ -1,66 +1,219 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
-    --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
-    --primary: 38 92% 44%;
-    --brand-foreground: 210 20% 98%;
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --ring: 224 71.4% 4.1%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+/* Tailwind v4 dark mode driven by a `.dark` class (set by next-themes). */
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * Map the shadcn HSL design tokens (defined in :root / .dark below) to Tailwind
+ * v4 theme colors so utilities like bg-background, text-muted-foreground,
+ * border-border, bg-primary and the brand-* ramp keep working.
+ *
+ * Rebrand: the primary accent is now a warm modern orange (#EA580C,
+ * hsl(21 90% 48%)) and the brand-* ramp is the matching orange scale.
+ */
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--brand-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-brand-foreground: hsl(var(--brand-foreground));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  /* Warm modern orange ramp (Tailwind orange), 600 is the primary accent. */
+  --color-brand-50: #fff7ed;
+  --color-brand-100: #ffedd5;
+  --color-brand-200: #fed7aa;
+  --color-brand-300: #fdba74;
+  --color-brand-400: #fb923c;
+  --color-brand-500: #f97316;
+  --color-brand-600: #ea580c;
+  --color-brand-700: #c2410c;
+  --color-brand-800: #9a3412;
+  --color-brand-900: #7c2d12;
+  --color-brand-950: #431407;
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
+    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  /* Entrance motion is deliberately barely perceptible: it should soften a
+     state change, never announce itself. */
+  --animate-fade-in: fade-in 0.15s ease-out both;
+  --animate-fade-in-up: fade-in-up 0.2s ease-out both;
+  --animate-check-pop: check-pop 0.2s ease-out both;
+}
+
+@keyframes check-pop {
+  0% {
+    transform: scale(0.92);
+    opacity: 0.6;
+  }
+  60% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
   }
-  .dark {
-    --background: 0 0% 15%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 15%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 15%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 38 92% 44%;
-    --brand-foreground: 0 0% 15%;
-    --secondary: 0 0% 25%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 25%;
-    --muted-foreground: 0 0% 65%;
-    --accent: 0 0% 25%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 0 0% 25%;
-    --input: 0 0% 25%;
-    --ring: 0 0% 83%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
   }
 }
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222 47% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  /* #EA580C */
+  --primary: 21 90% 48%;
+  --brand-foreground: 0 0% 100%;
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --accent: 24 100% 97%;
+  --accent-foreground: 21 90% 40%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+  --ring: 21 90% 48%;
+  --chart-1: 21 90% 48%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 262 52% 55%;
+  --radius: 0.625rem;
+}
+
+.dark {
+  /* Layered neutrals: background sits below cards for depth. */
+  --background: 0 0% 9%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 12%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 12%;
+  --popover-foreground: 0 0% 98%;
+  /* #EA580C */
+  --primary: 21 90% 48%;
+  --brand-foreground: 0 0% 100%;
+  --secondary: 0 0% 16%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 64%;
+  --accent: 22 60% 16%;
+  --accent-foreground: 24 95% 80%;
+  --destructive: 0 62.8% 45%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 0 0% 20%;
+  --input: 0 0% 22%;
+  --ring: 21 90% 52%;
+  --chart-1: 21 90% 52%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+}
+
+/*
+ * v4 no longer applies a default border color, and defaults many borders to
+ * currentColor. Keep the app's existing behavior of using the border token.
+ */
 @layer base {
   * {
-    @apply border-border;
+    border-color: hsl(var(--border));
   }
   body {
-    @apply bg-background text-foreground;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    /* Safety net: an oversized element must never widen the page sideways. */
+    overflow-x: clip;
   }
-}
\ No newline at end of file
+}
+
+/* Respect users who prefer reduced motion. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
deleted file mode 100644
index 1b7c7163..00000000
--- a/web/tailwind.config.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ['class'],
-  content: [
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-
-    // Or if using `src` directory:
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--brand-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          1: 'hsl(var(--chart-1))',
-          2: 'hsl(var(--chart-2))',
-          3: 'hsl(var(--chart-3))',
-          4: 'hsl(var(--chart-4))',
-          5: 'hsl(var(--chart-5))',
-        },
-        brand: {
-          50: '#FFFBEB',
-          100: '#FEF3C7',
-          200: '#FDE68A',
-          300: '#FCD34D',
-          400: '#FBBF24',
-          500: '#D97706',
-          600: '#B45309',
-          700: '#92400E',
-          800: '#78350F',
-          900: '#451A03',
-          950: '#2C0D02',
-        },
-      },
-      keyframes: {
-        'accordion-down': {
-          from: {
-            height: '0',
-          },
-          to: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-        },
-        'accordion-up': {
-          from: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-          to: {
-            height: '0',
-          },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-}
diff --git a/web/test/README.md b/web/test/README.md
new file mode 100644
index 00000000..765f53d4
--- /dev/null
+++ b/web/test/README.md
@@ -0,0 +1,40 @@
+# Testing
+
+The web app has two test layers. **Both run against mocked API data. Tests must never point at a real backend.**
+
+## Unit / component tests (Vitest + React Testing Library + MSW)
+
+- Runner: [Vitest](https://vitest.dev) with jsdom.
+- API mocking: [MSW](https://mswjs.io) node server (`test/msw/server.ts`) with handlers in `test/msw/handlers.ts`. Unhandled requests **throw** (`onUnhandledRequest: 'error'`), so a test can never silently reach a live backend.
+- Render helper: `test/render.tsx` exposes `renderWithProviders` / `render`, which wrap components in the app providers (react-query with retries off, a mock `SessionProvider`). Import `render`, `screen`, `userEvent` from `@/test/render`.
+- Fixtures: `test/fixtures.ts` is the single source of truth for mocked API data, shared with the e2e layer.
+
+Commands:
+
+```bash
+pnpm test          # run once
+pnpm test:watch    # watch mode
+pnpm coverage      # with coverage report
+```
+
+Place tests next to the code as `*.test.tsx` or under `__tests__/`.
+
+## End-to-end tests (Playwright)
+
+- Runner: [Playwright](https://playwright.dev), specs in `e2e/`.
+- The real Next dev server boots on port 3100 with a fixed `NEXTAUTH_SECRET` and a backend URL (`localhost:3999`) that nothing listens on.
+- `e2e/mock-api.ts` intercepts **every** `/api/v1/**` request and serves the shared fixtures, so no request can reach a real backend.
+- `e2e/session.ts` mints a valid NextAuth session cookie so tests run authenticated without the real login flow.
+
+Commands:
+
+```bash
+pnpm test:e2e      # headless
+pnpm test:e2e:ui   # interactive UI
+```
+
+First-time setup downloads the browser: `pnpm exec playwright install chromium`.
+
+## The rule
+
+If a new screen calls a new endpoint, add a handler in `test/msw/handlers.ts` and a branch in `e2e/mock-api.ts`, both backed by a fixture in `test/fixtures.ts`. Never let a test hit the network.
diff --git a/web/test/fixtures.ts b/web/test/fixtures.ts
new file mode 100644
index 00000000..0545d041
--- /dev/null
+++ b/web/test/fixtures.ts
@@ -0,0 +1,211 @@
+// Shared, framework-agnostic API fixtures used by BOTH the MSW node server
+// (unit/component tests) and the Playwright route-interception layer (e2e).
+// These mirror the response envelopes the real backend returns, as consumed
+// across the dashboard components. Tests must never hit a live backend, so
+// these are the single source of truth for mocked API data.
+
+export const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001/api/v1'
+
+export const TEST_ACCESS_TOKEN = 'test-access-token'
+
+export const mockUser = {
+  _id: 'user_test_1',
+  id: 'user_test_1',
+  name: 'Test User',
+  email: 'test.user@example.com',
+  phone: '+15551234567',
+  role: 'user',
+  avatar: null,
+  emailVerifiedAt: new Date('2026-01-01T00:00:00.000Z').toISOString(),
+  onboardingCompletedAt: new Date('2026-01-01T00:00:00.000Z').toISOString(),
+}
+
+export const mockStats = {
+  totalSentSMSCount: 12840,
+  totalReceivedSMSCount: 3120,
+  totalDeviceCount: 2,
+  totalApiKeyCount: 3,
+}
+
+export const mockSubscription = {
+  plan: {
+    name: 'Pro',
+    dailyLimit: 5000,
+    monthlyLimit: 100000,
+    bulkSendLimit: 1000,
+    deviceLimit: 5,
+  },
+  usage: {
+    dailyLimit: 5000,
+    monthlyLimit: 100000,
+    bulkSendLimit: 1000,
+    deviceLimit: 5,
+    processedSmsToday: 320,
+    processedSmsLastMonth: 18450,
+    dailyRemaining: 4680,
+    monthlyRemaining: 81550,
+    dailyUsagePercentage: 6.4,
+    monthlyUsagePercentage: 18.45,
+  },
+  status: 'active',
+  // Cents, and it must match the Pro price on the pricing page. This fixture
+  // previously said 1900, a price we do not charge.
+  amount: 999,
+  currency: 'usd',
+  recurringInterval: 'month',
+  subscriptionStartDate: new Date('2026-06-01T00:00:00.000Z').toISOString(),
+  currentPeriodEnd: new Date('2026-08-01T00:00:00.000Z').toISOString(),
+  customDailyLimit: null,
+  customMonthlyLimit: null,
+  customBulkSendLimit: null,
+  customDeviceLimit: null,
+}
+
+// What /billing/current-subscription actually returns for a user with no
+// subscription record: billing.service.ts synthesises this from the free plan.
+// There is deliberately no status, no amount and no dates, because there is no
+// subscription for them to belong to.
+export const mockFreeSubscription = {
+  plan: {
+    name: 'free',
+    dailyLimit: 50,
+    monthlyLimit: 300,
+    bulkSendLimit: 50,
+    deviceLimit: 1,
+  },
+  isActive: true,
+  usage: {
+    dailyLimit: 50,
+    monthlyLimit: 300,
+    bulkSendLimit: 50,
+    deviceLimit: 1,
+    processedSmsToday: 4,
+    processedSmsLastMonth: 40,
+    dailyRemaining: 46,
+    monthlyRemaining: 260,
+    dailyUsagePercentage: 8,
+    monthlyUsagePercentage: 13,
+  },
+}
+
+export const mockDevices = [
+  {
+    _id: 'device_1',
+    brand: 'Google',
+    model: 'Pixel 8',
+    enabled: true,
+    batteryLevel: 82,
+    appVersionCode: 17,
+    createdAt: new Date('2026-05-10T00:00:00.000Z').toISOString(),
+  },
+  {
+    _id: 'device_2',
+    brand: 'Samsung',
+    model: 'Galaxy S23',
+    enabled: false,
+    batteryLevel: 40,
+    appVersionCode: 16,
+    createdAt: new Date('2026-05-20T00:00:00.000Z').toISOString(),
+  },
+]
+
+export const mockApiKeys = [
+  {
+    _id: 'key_1',
+    apiKey: 'tb_live_abcd1234',
+    name: 'Production',
+    status: 'active',
+    lastUsedAt: new Date('2026-07-09T00:00:00.000Z').toISOString(),
+    createdAt: new Date('2026-05-01T00:00:00.000Z').toISOString(),
+  },
+]
+
+export const mockWebhooks = [
+  {
+    _id: 'wh_1',
+    deliveryUrl: 'https://example.com/webhooks/textbee',
+    events: ['message.received'],
+    isActive: true,
+    createdAt: new Date('2026-06-15T00:00:00.000Z').toISOString(),
+  },
+]
+
+export const mockWebhookNotifications = { data: [], total: 0 }
+
+// The real endpoint populates `device` (select: _id brand model buildId
+// enabled), so the fixtures carry it too: replying reads message.device._id,
+// and without it the mocked path would not exercise what production does.
+// Anchored to local midnight rather than "N hours ago": a message 2 hours old
+// falls on the previous day when the suite runs just after midnight, which
+// made the Today/Yesterday grouping assertions depend on the wall clock.
+const startOfToday = () => {
+  const d = new Date()
+  d.setHours(0, 0, 0, 0)
+  return d.getTime()
+}
+// Now is always today and never in the future.
+const todayIso = () => new Date().toISOString()
+// An hour before local midnight is always yesterday.
+const yesterdayIso = () => new Date(startOfToday() - 60 * 60 * 1000).toISOString()
+
+export const mockMessages = {
+  data: [
+    {
+      _id: 'msg_1',
+      recipient: '+15557654321',
+      message: 'Hello from textbee',
+      status: 'sent',
+      type: 'sent',
+      device: { _id: 'device_1', brand: 'Google', model: 'Pixel 8' },
+      requestedAt: todayIso(),
+      createdAt: todayIso(),
+    },
+    {
+      _id: 'msg_2',
+      sender: '+15551234567',
+      message: 'Reply from a customer',
+      status: 'received',
+      type: 'received',
+      device: { _id: 'device_1', brand: 'Google', model: 'Pixel 8' },
+      receivedAt: yesterdayIso(),
+      createdAt: yesterdayIso(),
+    },
+  ],
+  meta: { total: 2, page: 1, limit: 20, totalPages: 1 },
+}
+
+// Shaped like the real /billing/plans response, which returns Plan documents:
+// monthlyPrice in cents plus the limits, and no currency or amount. The old
+// fixture used amount/currency, fields that endpoint has never sent, so a
+// component reading them looked correct in tests and rendered every paid plan
+// as free in production.
+export const mockBillingPlans = [
+  {
+    name: 'Free',
+    monthlyPrice: 0,
+    dailyLimit: 50,
+    monthlyLimit: 500,
+    bulkSendLimit: 50,
+    deviceLimit: 1,
+    isActive: true,
+  },
+  {
+    name: 'Pro',
+    monthlyPrice: 1900,
+    dailyLimit: 5000,
+    monthlyLimit: 100000,
+    bulkSendLimit: 500,
+    deviceLimit: 5,
+    isActive: true,
+  },
+  {
+    name: 'Scale',
+    monthlyPrice: 4900,
+    dailyLimit: -1,
+    monthlyLimit: -1,
+    bulkSendLimit: 2000,
+    deviceLimit: -1,
+    isActive: true,
+  },
+]
diff --git a/web/test/msw/handlers.test.ts b/web/test/msw/handlers.test.ts
new file mode 100644
index 00000000..20b5dd61
--- /dev/null
+++ b/web/test/msw/handlers.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { ApiEndpoints } from '@/config/api'
+import { mockStats, mockSubscription, mockUser } from '../fixtures'
+
+// Sanity checks that the MSW layer intercepts the real axios client the app
+// uses, so every later data-layer test is trustworthy. No real backend runs.
+describe('MSW mocked API', () => {
+  it('returns the mocked current user for whoAmI', async () => {
+    const res = await httpBrowserClient.get(ApiEndpoints.auth.whoAmI())
+    expect(res.data.data.email).toBe(mockUser.email)
+  })
+
+  it('returns the mocked subscription', async () => {
+    const res = await httpBrowserClient.get(
+      ApiEndpoints.billing.currentSubscription()
+    )
+    expect(res.data.plan.name).toBe(mockSubscription.plan.name)
+    expect(res.data.status).toBe('active')
+  })
+
+  it('returns mocked gateway stats', async () => {
+    const res = await httpBrowserClient.get(ApiEndpoints.gateway.getStats())
+    expect(res.data.data.totalSentSMSCount).toBe(mockStats.totalSentSMSCount)
+  })
+})
diff --git a/web/test/msw/handlers.ts b/web/test/msw/handlers.ts
new file mode 100644
index 00000000..fa5d164e
--- /dev/null
+++ b/web/test/msw/handlers.ts
@@ -0,0 +1,79 @@
+import { http, HttpResponse, type JsonBodyType } from 'msw'
+import { ApiEndpoints } from '@/config/api'
+import {
+  API_BASE_URL,
+  mockApiKeys,
+  mockBillingPlans,
+  mockDevices,
+  mockMessages,
+  mockStats,
+  mockSubscription,
+  mockUser,
+  mockWebhookNotifications,
+  mockWebhooks,
+  TEST_ACCESS_TOKEN,
+} from '../fixtures'
+
+// Build an absolute URL for an ApiEndpoints path so MSW can match the
+// axios baseURL-prefixed requests the app issues.
+const url = (path: string) => `${API_BASE_URL}${path.split('?')[0]}`
+
+// Envelope helpers matching the real API's response shapes.
+const dataEnvelope = (data: JsonBodyType) => HttpResponse.json({ data })
+const raw = (body: JsonBodyType) => HttpResponse.json(body)
+
+export const handlers = [
+  // --- auth ---
+  http.get(url(ApiEndpoints.auth.whoAmI()), () => dataEnvelope(mockUser)),
+  http.post(url(ApiEndpoints.auth.login()), () =>
+    dataEnvelope({ user: mockUser, accessToken: TEST_ACCESS_TOKEN })
+  ),
+  http.post(url(ApiEndpoints.auth.register()), () =>
+    dataEnvelope({ user: mockUser, accessToken: TEST_ACCESS_TOKEN })
+  ),
+  http.post(url(ApiEndpoints.auth.signInWithGoogle()), () =>
+    dataEnvelope({ user: mockUser, accessToken: TEST_ACCESS_TOKEN })
+  ),
+  http.get(url(ApiEndpoints.auth.listApiKeys()), () =>
+    dataEnvelope(mockApiKeys)
+  ),
+  http.post(url('/auth/api-keys'), () =>
+    dataEnvelope({ ...mockApiKeys[0], apiKey: 'tb_live_new0000' })
+  ),
+  http.patch(url(ApiEndpoints.auth.updateOnboarding()), () =>
+    dataEnvelope({})
+  ),
+  http.post(url(ApiEndpoints.auth.sendEmailVerificationEmail()), () =>
+    dataEnvelope({})
+  ),
+
+  // --- gateway ---
+  http.get(url(ApiEndpoints.gateway.listDevices()), () =>
+    dataEnvelope(mockDevices)
+  ),
+  http.get(url(ApiEndpoints.gateway.getStats()), () =>
+    dataEnvelope(mockStats)
+  ),
+  http.get(url(ApiEndpoints.gateway.getWebhooks()), () =>
+    dataEnvelope(mockWebhooks)
+  ),
+  http.get(url(ApiEndpoints.gateway.getWebhookNotifications()), () =>
+    raw(mockWebhookNotifications)
+  ),
+
+  // --- billing ---
+  http.get(url(ApiEndpoints.billing.currentSubscription()), () =>
+    raw(mockSubscription)
+  ),
+  http.get(url(ApiEndpoints.billing.plans()), () =>
+    dataEnvelope(mockBillingPlans)
+  ),
+
+  // Per-device message history (id is dynamic).
+  http.get(`${API_BASE_URL}/gateway/devices/:id/messages`, () =>
+    raw(mockMessages)
+  ),
+  http.get(`${API_BASE_URL}/gateway/devices/:id/get-received-sms`, () =>
+    raw(mockMessages)
+  ),
+]
diff --git a/web/test/msw/server.ts b/web/test/msw/server.ts
new file mode 100644
index 00000000..c5ecf298
--- /dev/null
+++ b/web/test/msw/server.ts
@@ -0,0 +1,7 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+// Single MSW server for all unit/component tests. Any request that is NOT
+// matched by a handler throws, which enforces the rule that tests never reach
+// a real backend.
+export const server = setupServer(...handlers)
diff --git a/web/test/render.tsx b/web/test/render.tsx
new file mode 100644
index 00000000..68240056
--- /dev/null
+++ b/web/test/render.tsx
@@ -0,0 +1,73 @@
+import { ReactElement, ReactNode } from 'react'
+import { render, RenderOptions } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { SessionProvider } from 'next-auth/react'
+import type { Session } from 'next-auth'
+import { TEST_ACCESS_TOKEN, mockUser } from './fixtures'
+
+export const mockSession: Session = {
+  user: {
+    id: mockUser.id,
+    name: mockUser.name,
+    email: mockUser.email,
+    phone: mockUser.phone,
+    role: mockUser.role,
+    avatar: mockUser.avatar ?? undefined,
+    accessToken: TEST_ACCESS_TOKEN,
+  },
+  expires: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+}
+
+// A fresh QueryClient per render with retries disabled so failing queries
+// surface immediately instead of retrying during tests.
+export function makeTestQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: { retry: false, gcTime: 0 },
+      mutations: { retry: false },
+    },
+  })
+}
+
+type ProvidersProps = {
+  children: ReactNode
+  session?: Session | null
+  queryClient?: QueryClient
+}
+
+export function TestProviders({
+  children,
+  session = mockSession,
+  queryClient,
+}: ProvidersProps) {
+  const client = queryClient ?? makeTestQueryClient()
+  return (
+    <SessionProvider session={session}>
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    </SessionProvider>
+  )
+}
+
+type CustomRenderOptions = Omit<RenderOptions, 'wrapper'> & {
+  session?: Session | null
+  queryClient?: QueryClient
+}
+
+// Custom render that wraps a UI in the app's providers. Use this instead of
+// RTL's render for any component that reads the session or react-query.
+export function renderWithProviders(
+  ui: ReactElement,
+  { session, queryClient, ...options }: CustomRenderOptions = {}
+) {
+  return render(ui, {
+    wrapper: ({ children }) => (
+      <TestProviders session={session} queryClient={queryClient}>
+        {children}
+      </TestProviders>
+    ),
+    ...options,
+  })
+}
+
+export * from '@testing-library/react'
+export { default as userEvent } from '@testing-library/user-event'
diff --git a/web/test/setup.ts b/web/test/setup.ts
new file mode 100644
index 00000000..c280596d
--- /dev/null
+++ b/web/test/setup.ts
@@ -0,0 +1,58 @@
+import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@testing-library/react'
+import { afterAll, afterEach, beforeAll, vi } from 'vitest'
+import { server } from './msw/server'
+
+// The axios browser client's interceptor calls next-auth's getSession(), which
+// would otherwise trigger a real /api/auth/session fetch. Mock it so the
+// interceptor can attach the Bearer token without any network access.
+const hoisted = vi.hoisted(() => ({ accessToken: 'test-access-token' }))
+vi.mock('next-auth/react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('next-auth/react')>()
+  return {
+    ...actual,
+    getSession: async () => ({
+      user: {
+        id: 'user_test_1',
+        name: 'Test User',
+        email: 'test.user@example.com',
+        accessToken: hoisted.accessToken,
+      },
+      expires: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+    }),
+  }
+})
+
+// Fail loudly on any request that is not explicitly mocked. This guarantees a
+// test can never silently fall through to a real backend.
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
+afterEach(() => {
+  cleanup()
+  server.resetHandlers()
+})
+afterAll(() => server.close())
+
+// jsdom lacks these browser APIs that Radix UI / next-themes rely on.
+if (!window.matchMedia) {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }))
+}
+
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+window.ResizeObserver = window.ResizeObserver || (ResizeObserverMock as any)
+
+if (!window.HTMLElement.prototype.scrollIntoView) {
+  window.HTMLElement.prototype.scrollIntoView = vi.fn()
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 89ef8a01..d1dbdd9d 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,30 +1,43 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     },
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
         "name": "next"
       }
-    ],
-    "strictNullChecks": false,
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/web/vitest.config.ts b/web/vitest.config.ts
new file mode 100644
index 00000000..804f7b77
--- /dev/null
+++ b/web/vitest.config.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import path from 'node:path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    // Mirror the tsconfig "@/*" -> "./*" path alias.
+    alias: { '@': path.resolve(__dirname, './') },
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./test/setup.ts'],
+    // Unit/component tests only. Playwright specs live in ./e2e and run separately.
+    include: ['**/*.{test,spec}.{ts,tsx}'],
+    exclude: ['node_modules', '.next', 'e2e', 'test-results', 'playwright-report'],
+    env: {
+      NEXT_PUBLIC_API_BASE_URL: 'http://localhost:3001/api/v1',
+    },
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'html'],
+      include: ['app/**', 'components/**', 'lib/**', 'hooks/**'],
+      exclude: ['**/*.d.ts', 'test/**', 'e2e/**'],
+    },
+  },
+})