diff --git a/agent/src/index.ts b/agent/src/index.ts
index d16d1f28..fcb0320a 100644
--- a/agent/src/index.ts
+++ b/agent/src/index.ts
@@ -1,32 +1,32 @@
-import { Elysia } from "elysia";
-import { chatModule } from "./modules/chat";
-import { corsMiddleware } from "./middlewares/cors";
-import { errorMiddleware } from "./middlewares/error";
-import { loadConfig } from "./config";
-import { join } from "path";
+import { Elysia } from 'elysia'
+import { chatModule } from './modules/chat'
+import { corsMiddleware } from './middlewares/cors'
+import { errorMiddleware } from './middlewares/error'
+import { loadConfig } from './config'
+import { join } from 'path'
 
-const config = loadConfig("../config.toml");
+const config = loadConfig('../config.toml')
 
 export const getBraveConfig = () => {
   return {
-    apiKey: config.brave.api_key ?? "",
-    baseUrl: config.brave.base_url ?? "https://api.search.brave.com/res/v1/",
+    apiKey: config.brave.api_key ?? '',
+    baseUrl: config.brave.base_url ?? 'https://api.search.brave.com/res/v1/',
   }
 }
 
 export const getBaseUrl = () => {
-  let baseUrl = "";
+  let baseUrl = ''
   if (!baseUrl) {
-    baseUrl = "http://127.0.0.1";
+    baseUrl = 'http://127.0.0.1'
   }
   if (
-    typeof config.server.addr === "string" &&
-    config.server.addr.startsWith(":")
+    typeof config.server.addr === 'string' &&
+    config.server.addr.startsWith(':')
   ) {
-    baseUrl = `http://127.0.0.1${config.server.addr}`;
+    baseUrl = `http://127.0.0.1${config.server.addr}`
   }
-  return baseUrl;
-};
+  return baseUrl
+}
 
 export type AuthFetcher = (
   url: string,
@@ -34,18 +34,18 @@ export type AuthFetcher = (
 ) => Promise<Response>;
 export const createAuthFetcher = (bearer: string | undefined): AuthFetcher => {
   return async (url: string, options?: RequestInit) => {
-    const requestOptions = options ?? {};
-    const headers = new Headers(requestOptions.headers || {});
+    const requestOptions = options ?? {}
+    const headers = new Headers(requestOptions.headers || {})
     if (bearer) {
-      headers.set("Authorization", `Bearer ${bearer}`);
+      headers.set('Authorization', `Bearer ${bearer}`)
     }
 
     return await fetch(join(getBaseUrl(), url), {
       ...requestOptions,
       headers,
-    });
-  };
-};
+    })
+  }
+}
 
 const app = new Elysia()
   .use(corsMiddleware)
@@ -53,10 +53,10 @@ const app = new Elysia()
   .use(chatModule)
   .listen({
     port: config.agent_gateway.port ?? 8081,
-    hostname: config.agent_gateway.host ?? "127.0.0.1",
+    hostname: config.agent_gateway.host ?? '127.0.0.1',
     idleTimeout: 255, // max allowed by Bun, to accommodate long-running tool calls
-  });
+  })
 
 console.log(
   `Agent Gateway is running at ${app.server?.hostname}:${app.server?.port}`,
-);
+)
diff --git a/packages/cli/src/cli/stream.ts b/packages/cli/src/cli/stream.ts
index e9b1d94a..99c26b3f 100644
--- a/packages/cli/src/cli/stream.ts
+++ b/packages/cli/src/cli/stream.ts
@@ -272,10 +272,10 @@ const formatToolResult = (toolName: string, result: unknown) => {
     const r = unwrapToolResult(result)
     if (r) {
       if ('ok' in r) {
-        return chalk.dim(`  ╰─ `) + (r.ok ? chalk.green('✓ ok') : chalk.red('✗ failed'))
+        return chalk.dim('  ╰─ ') + (r.ok ? chalk.green('✓ ok') : chalk.red('✗ failed'))
       }
     }
-    return chalk.dim(`  ╰─ done`)
+    return chalk.dim('  ╰─ done')
   }
   return null
 }
diff --git a/packages/ui/src/components/badge/Badge.vue b/packages/ui/src/components/badge/Badge.vue
index f255e9cc..00e982a4 100644
--- a/packages/ui/src/components/badge/Badge.vue
+++ b/packages/ui/src/components/badge/Badge.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { BadgeVariants } from "."
-import { reactiveOmit } from "@vueuse/core"
-import { Primitive } from "reka-ui"
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { BadgeVariants } from '.'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
 import { cn } from '#/lib/utils'
-import { badgeVariants } from "."
+import { badgeVariants } from '.'
 
 const props = defineProps<PrimitiveProps & {
-  variant?: BadgeVariants["variant"]
-  class?: HTMLAttributes["class"]
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
 }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
diff --git a/packages/ui/src/components/breadcrumb/Breadcrumb.vue b/packages/ui/src/components/breadcrumb/Breadcrumb.vue
index c5be5f09..b99dcea4 100644
--- a/packages/ui/src/components/breadcrumb/Breadcrumb.vue
+++ b/packages/ui/src/components/breadcrumb/Breadcrumb.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue b/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
index ed242c1b..4279d841 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { MoreHorizontal } from "lucide-vue-next"
+import type { HTMLAttributes } from 'vue'
+import { MoreHorizontal } from 'lucide-vue-next'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue b/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue
index 8852aa2f..6751b188 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue b/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
index 40b8e8ef..d5984a44 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
-const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
-  as: "a",
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'a',
 })
 </script>
 
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbList.vue b/packages/ui/src/components/breadcrumb/BreadcrumbList.vue
index d39fa1af..e5c03320 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbList.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbList.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue b/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue
index 0307e669..5ed9d63f 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue b/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
index 3ec512ac..7e0b0062 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { ChevronRight } from "lucide-vue-next"
+import type { HTMLAttributes } from 'vue'
+import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/breadcrumb/index.ts b/packages/ui/src/components/breadcrumb/index.ts
index f4eafdc0..05909832 100644
--- a/packages/ui/src/components/breadcrumb/index.ts
+++ b/packages/ui/src/components/breadcrumb/index.ts
@@ -1,7 +1,7 @@
-export { default as Breadcrumb } from "./Breadcrumb.vue"
-export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
-export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
-export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
-export { default as BreadcrumbList } from "./BreadcrumbList.vue"
-export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
-export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
diff --git a/packages/ui/src/components/collapsible/Collapsible.vue b/packages/ui/src/components/collapsible/Collapsible.vue
index 70a94978..fc726dfe 100644
--- a/packages/ui/src/components/collapsible/Collapsible.vue
+++ b/packages/ui/src/components/collapsible/Collapsible.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui"
-import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui"
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<CollapsibleRootProps>()
 const emits = defineEmits<CollapsibleRootEmits>()
diff --git a/packages/ui/src/components/collapsible/CollapsibleContent.vue b/packages/ui/src/components/collapsible/CollapsibleContent.vue
index 8be0a113..918f8b5b 100644
--- a/packages/ui/src/components/collapsible/CollapsibleContent.vue
+++ b/packages/ui/src/components/collapsible/CollapsibleContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CollapsibleContentProps } from "reka-ui"
-import { CollapsibleContent } from "reka-ui"
+import type { CollapsibleContentProps } from 'reka-ui'
+import { CollapsibleContent } from 'reka-ui'
 
 const props = defineProps<CollapsibleContentProps>()
 </script>
diff --git a/packages/ui/src/components/collapsible/CollapsibleTrigger.vue b/packages/ui/src/components/collapsible/CollapsibleTrigger.vue
index 33bec783..ca6b60c8 100644
--- a/packages/ui/src/components/collapsible/CollapsibleTrigger.vue
+++ b/packages/ui/src/components/collapsible/CollapsibleTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CollapsibleTriggerProps } from "reka-ui"
-import { CollapsibleTrigger } from "reka-ui"
+import type { CollapsibleTriggerProps } from 'reka-ui'
+import { CollapsibleTrigger } from 'reka-ui'
 
 const props = defineProps<CollapsibleTriggerProps>()
 </script>
diff --git a/packages/ui/src/components/empty/Empty.vue b/packages/ui/src/components/empty/Empty.vue
index 55ece4f7..7416ddb4 100644
--- a/packages/ui/src/components/empty/Empty.vue
+++ b/packages/ui/src/components/empty/Empty.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/empty/EmptyContent.vue b/packages/ui/src/components/empty/EmptyContent.vue
index b0edf4ba..7528baa9 100644
--- a/packages/ui/src/components/empty/EmptyContent.vue
+++ b/packages/ui/src/components/empty/EmptyContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/empty/EmptyDescription.vue b/packages/ui/src/components/empty/EmptyDescription.vue
index 541b4301..6e8a206e 100644
--- a/packages/ui/src/components/empty/EmptyDescription.vue
+++ b/packages/ui/src/components/empty/EmptyDescription.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/empty/EmptyHeader.vue b/packages/ui/src/components/empty/EmptyHeader.vue
index 5f09b6fd..31348abd 100644
--- a/packages/ui/src/components/empty/EmptyHeader.vue
+++ b/packages/ui/src/components/empty/EmptyHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/empty/EmptyMedia.vue b/packages/ui/src/components/empty/EmptyMedia.vue
index f1ebcf3c..c926f9e0 100644
--- a/packages/ui/src/components/empty/EmptyMedia.vue
+++ b/packages/ui/src/components/empty/EmptyMedia.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { EmptyMediaVariants } from "."
+import type { HTMLAttributes } from 'vue'
+import type { EmptyMediaVariants } from '.'
 import { cn } from '#/lib/utils'
-import { emptyMediaVariants } from "."
+import { emptyMediaVariants } from '.'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  variant?: EmptyMediaVariants["variant"]
+  class?: HTMLAttributes['class']
+  variant?: EmptyMediaVariants['variant']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/empty/EmptyTitle.vue b/packages/ui/src/components/empty/EmptyTitle.vue
index 27f2c139..73b5640b 100644
--- a/packages/ui/src/components/empty/EmptyTitle.vue
+++ b/packages/ui/src/components/empty/EmptyTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/empty/index.ts b/packages/ui/src/components/empty/index.ts
index ce0c489f..c6b27584 100644
--- a/packages/ui/src/components/empty/index.ts
+++ b/packages/ui/src/components/empty/index.ts
@@ -1,24 +1,24 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
 
-export { default as Empty } from "./Empty.vue"
-export { default as EmptyContent } from "./EmptyContent.vue"
-export { default as EmptyDescription } from "./EmptyDescription.vue"
-export { default as EmptyHeader } from "./EmptyHeader.vue"
-export { default as EmptyMedia } from "./EmptyMedia.vue"
-export { default as EmptyTitle } from "./EmptyTitle.vue"
+export { default as Empty } from './Empty.vue'
+export { default as EmptyContent } from './EmptyContent.vue'
+export { default as EmptyDescription } from './EmptyDescription.vue'
+export { default as EmptyHeader } from './EmptyHeader.vue'
+export { default as EmptyMedia } from './EmptyMedia.vue'
+export { default as EmptyTitle } from './EmptyTitle.vue'
 
 export const emptyMediaVariants = cva(
-  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+        default: 'bg-transparent',
+        icon: 'bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*=\'size-\'])]:size-6',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   },
 )
diff --git a/packages/ui/src/components/form/FormControl.vue b/packages/ui/src/components/form/FormControl.vue
index b1bc4bfa..884fcb07 100644
--- a/packages/ui/src/components/form/FormControl.vue
+++ b/packages/ui/src/components/form/FormControl.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Slot } from "reka-ui"
-import { useFormField } from "./useFormField"
+import { Slot } from 'reka-ui'
+import { useFormField } from './useFormField'
 
 const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 </script>
diff --git a/packages/ui/src/components/form/FormDescription.vue b/packages/ui/src/components/form/FormDescription.vue
index b5a32558..1052e5a7 100644
--- a/packages/ui/src/components/form/FormDescription.vue
+++ b/packages/ui/src/components/form/FormDescription.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
-import { useFormField } from "./useFormField"
+import { useFormField } from './useFormField'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 
 const { formDescriptionId } = useFormField()
diff --git a/packages/ui/src/components/form/FormItem.vue b/packages/ui/src/components/form/FormItem.vue
index 18ceb6ac..79fc0ba0 100644
--- a/packages/ui/src/components/form/FormItem.vue
+++ b/packages/ui/src/components/form/FormItem.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { useId } from "reka-ui"
-import { provide } from "vue"
+import type { HTMLAttributes } from 'vue'
+import { useId } from 'reka-ui'
+import { provide } from 'vue'
 import { cn } from '#/lib/utils'
-import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 
 const id = useId()
diff --git a/packages/ui/src/components/form/FormLabel.vue b/packages/ui/src/components/form/FormLabel.vue
index 57eae984..23ef8737 100644
--- a/packages/ui/src/components/form/FormLabel.vue
+++ b/packages/ui/src/components/form/FormLabel.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { LabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
+import type { LabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 import { Label } from '#/components/label'
-import { useFormField } from "./useFormField"
+import { useFormField } from './useFormField'
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
 const { error, formItemId } = useFormField()
 </script>
diff --git a/packages/ui/src/components/form/FormMessage.vue b/packages/ui/src/components/form/FormMessage.vue
index 02290243..6bedf6e2 100644
--- a/packages/ui/src/components/form/FormMessage.vue
+++ b/packages/ui/src/components/form/FormMessage.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { ErrorMessage } from "vee-validate"
-import { toValue } from "vue"
+import type { HTMLAttributes } from 'vue'
+import { ErrorMessage } from 'vee-validate'
+import { toValue } from 'vue'
 import { cn } from '#/lib/utils'
-import { useFormField } from "./useFormField"
+import { useFormField } from './useFormField'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 
 const { name, formMessageId } = useFormField()
diff --git a/packages/ui/src/components/form/index.ts b/packages/ui/src/components/form/index.ts
index 1eb05f11..1a3be118 100644
--- a/packages/ui/src/components/form/index.ts
+++ b/packages/ui/src/components/form/index.ts
@@ -1,7 +1,7 @@
-export { default as FormControl } from "./FormControl.vue"
-export { default as FormDescription } from "./FormDescription.vue"
-export { default as FormItem } from "./FormItem.vue"
-export { default as FormLabel } from "./FormLabel.vue"
-export { default as FormMessage } from "./FormMessage.vue"
-export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
-export { Form, Field as FormField, FieldArray as FormFieldArray } from "vee-validate"
+export { default as FormControl } from './FormControl.vue'
+export { default as FormDescription } from './FormDescription.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'
diff --git a/packages/ui/src/components/form/injectionKeys.ts b/packages/ui/src/components/form/injectionKeys.ts
index 42542a96..b972d367 100644
--- a/packages/ui/src/components/form/injectionKeys.ts
+++ b/packages/ui/src/components/form/injectionKeys.ts
@@ -1,4 +1,4 @@
-import type { InjectionKey } from "vue"
+import type { InjectionKey } from 'vue'
 
 export const FORM_ITEM_INJECTION_KEY
   = Symbol() as InjectionKey<string>
diff --git a/packages/ui/src/components/form/useFormField.ts b/packages/ui/src/components/form/useFormField.ts
index 62d86c26..849b00f9 100644
--- a/packages/ui/src/components/form/useFormField.ts
+++ b/packages/ui/src/components/form/useFormField.ts
@@ -1,13 +1,13 @@
-import { FieldContextKey } from "vee-validate"
-import { computed, inject } from "vue"
-import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+import { FieldContextKey } from 'vee-validate'
+import { computed, inject } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
 export function useFormField() {
   const fieldContext = inject(FieldContextKey)
   const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
 
   if (!fieldContext)
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error('useFormField should be used within <FormField>')
 
   const { name, errorMessage: error, meta } = fieldContext
   const id = fieldItemContext
diff --git a/packages/ui/src/components/item/Item.vue b/packages/ui/src/components/item/Item.vue
index 71bc51ac..4af3a3cc 100644
--- a/packages/ui/src/components/item/Item.vue
+++ b/packages/ui/src/components/item/Item.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ItemVariants } from "."
-import { Primitive } from "reka-ui"
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { ItemVariants } from '.'
+import { Primitive } from 'reka-ui'
 import { cn } from '#/lib/utils'
-import { itemVariants } from "."
+import { itemVariants } from '.'
 
 const props = withDefaults(defineProps<PrimitiveProps & {
-  class?: HTMLAttributes["class"]
-  variant?: ItemVariants["variant"]
-  size?: ItemVariants["size"]
+  class?: HTMLAttributes['class']
+  variant?: ItemVariants['variant']
+  size?: ItemVariants['size']
 }>(), {
-  as: "div",
+  as: 'div',
 })
 </script>
 
diff --git a/packages/ui/src/components/item/ItemActions.vue b/packages/ui/src/components/item/ItemActions.vue
index 050d40c4..ad15a8ad 100644
--- a/packages/ui/src/components/item/ItemActions.vue
+++ b/packages/ui/src/components/item/ItemActions.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/item/ItemContent.vue b/packages/ui/src/components/item/ItemContent.vue
index f71aa4f8..90b1a137 100644
--- a/packages/ui/src/components/item/ItemContent.vue
+++ b/packages/ui/src/components/item/ItemContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/item/ItemDescription.vue b/packages/ui/src/components/item/ItemDescription.vue
index 1e485a98..153b2d16 100644
--- a/packages/ui/src/components/item/ItemDescription.vue
+++ b/packages/ui/src/components/item/ItemDescription.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/item/ItemFooter.vue b/packages/ui/src/components/item/ItemFooter.vue
index 1a0e35bc..3cf22ebb 100644
--- a/packages/ui/src/components/item/ItemFooter.vue
+++ b/packages/ui/src/components/item/ItemFooter.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/item/ItemGroup.vue b/packages/ui/src/components/item/ItemGroup.vue
index c500aaf1..46db6ea8 100644
--- a/packages/ui/src/components/item/ItemGroup.vue
+++ b/packages/ui/src/components/item/ItemGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/item/ItemHeader.vue b/packages/ui/src/components/item/ItemHeader.vue
index 8f2f8bd8..cc27dd05 100644
--- a/packages/ui/src/components/item/ItemHeader.vue
+++ b/packages/ui/src/components/item/ItemHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/item/ItemMedia.vue b/packages/ui/src/components/item/ItemMedia.vue
index 5d08f7d7..ec0f9d7a 100644
--- a/packages/ui/src/components/item/ItemMedia.vue
+++ b/packages/ui/src/components/item/ItemMedia.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { ItemMediaVariants } from "."
+import type { HTMLAttributes } from 'vue'
+import type { ItemMediaVariants } from '.'
 import { cn } from '#/lib/utils'
-import { itemMediaVariants } from "."
+import { itemMediaVariants } from '.'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  variant?: ItemMediaVariants["variant"]
+  class?: HTMLAttributes['class']
+  variant?: ItemMediaVariants['variant']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/item/ItemSeparator.vue b/packages/ui/src/components/item/ItemSeparator.vue
index 227d62b0..ed98a58d 100644
--- a/packages/ui/src/components/item/ItemSeparator.vue
+++ b/packages/ui/src/components/item/ItemSeparator.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
+import type { SeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 import { Separator } from '#/components/separator'
 
 const props = defineProps<
-  SeparatorProps & { class?: HTMLAttributes["class"] }
+  SeparatorProps & { class?: HTMLAttributes['class'] }
 >()
 </script>
 
diff --git a/packages/ui/src/components/item/ItemTitle.vue b/packages/ui/src/components/item/ItemTitle.vue
index b15a9445..60ddf43a 100644
--- a/packages/ui/src/components/item/ItemTitle.vue
+++ b/packages/ui/src/components/item/ItemTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/item/index.ts b/packages/ui/src/components/item/index.ts
index 948421d8..70605f11 100644
--- a/packages/ui/src/components/item/index.ts
+++ b/packages/ui/src/components/item/index.ts
@@ -1,51 +1,51 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
 
-export { default as Item } from "./Item.vue"
-export { default as ItemActions } from "./ItemActions.vue"
-export { default as ItemContent } from "./ItemContent.vue"
-export { default as ItemDescription } from "./ItemDescription.vue"
-export { default as ItemFooter } from "./ItemFooter.vue"
-export { default as ItemGroup } from "./ItemGroup.vue"
-export { default as ItemHeader } from "./ItemHeader.vue"
-export { default as ItemMedia } from "./ItemMedia.vue"
-export { default as ItemSeparator } from "./ItemSeparator.vue"
-export { default as ItemTitle } from "./ItemTitle.vue"
+export { default as Item } from './Item.vue'
+export { default as ItemActions } from './ItemActions.vue'
+export { default as ItemContent } from './ItemContent.vue'
+export { default as ItemDescription } from './ItemDescription.vue'
+export { default as ItemFooter } from './ItemFooter.vue'
+export { default as ItemGroup } from './ItemGroup.vue'
+export { default as ItemHeader } from './ItemHeader.vue'
+export { default as ItemMedia } from './ItemMedia.vue'
+export { default as ItemSeparator } from './ItemSeparator.vue'
+export { default as ItemTitle } from './ItemTitle.vue'
 
 export const itemVariants = cva(
-  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        outline: "border-border",
-        muted: "bg-muted/50",
+        default: 'bg-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50',
       },
       size: {
-        default: "p-4 gap-4 ",
-        sm: "py-3 px-4 gap-2.5",
+        default: 'p-4 gap-4 ',
+        sm: 'py-3 px-4 gap-2.5',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   },
 )
 
 export const itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        default: 'bg-transparent',
+        icon: 'size-8 border rounded-sm bg-muted [&_svg:not([class*=\'size-\'])]:size-4',
         image:
-          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
+          'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   },
 )
diff --git a/packages/ui/src/components/label/Label.vue b/packages/ui/src/components/label/Label.vue
index c3f0c6a1..0baea456 100644
--- a/packages/ui/src/components/label/Label.vue
+++ b/packages/ui/src/components/label/Label.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { LabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Label } from "reka-ui"
+import type { LabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Label } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
diff --git a/packages/ui/src/components/label/index.ts b/packages/ui/src/components/label/index.ts
index 036e35c3..572c2f01 100644
--- a/packages/ui/src/components/label/index.ts
+++ b/packages/ui/src/components/label/index.ts
@@ -1 +1 @@
-export { default as Label } from "./Label.vue"
+export { default as Label } from './Label.vue'
diff --git a/packages/ui/src/components/native-select/NativeSelect.vue b/packages/ui/src/components/native-select/NativeSelect.vue
index 70a0e8b7..869cd17b 100644
--- a/packages/ui/src/components/native-select/NativeSelect.vue
+++ b/packages/ui/src/components/native-select/NativeSelect.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import type { AcceptableValue } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit, useVModel } from "@vueuse/core"
-import { ChevronDownIcon } from "lucide-vue-next"
+import type { AcceptableValue } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit, useVModel } from '@vueuse/core'
+import { ChevronDownIcon } from 'lucide-vue-next'
 import { cn } from '#/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes['class'] }>()
 
 const emit = defineEmits<{
-  "update:modelValue": AcceptableValue
+  'update:modelValue': AcceptableValue
 }>()
 
-const modelValue = useVModel(props, "modelValue", emit, {
+const modelValue = useVModel(props, 'modelValue', emit, {
   passive: true,
-  defaultValue: "",
+  defaultValue: '',
 })
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
diff --git a/packages/ui/src/components/native-select/NativeSelectOptGroup.vue b/packages/ui/src/components/native-select/NativeSelectOptGroup.vue
index c21efe10..824d922a 100644
--- a/packages/ui/src/components/native-select/NativeSelectOptGroup.vue
+++ b/packages/ui/src/components/native-select/NativeSelectOptGroup.vue
@@ -2,14 +2,17 @@
 <!-- @strictTemplates true -->
 
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
+  <optgroup
+    data-slot="native-select-optgroup"
+    :class="cn('bg-popover text-popover-foreground', props.class)"
+  >
     <slot />
   </optgroup>
 </template>
diff --git a/packages/ui/src/components/native-select/NativeSelectOption.vue b/packages/ui/src/components/native-select/NativeSelectOption.vue
index d19488c1..3d023743 100644
--- a/packages/ui/src/components/native-select/NativeSelectOption.vue
+++ b/packages/ui/src/components/native-select/NativeSelectOption.vue
@@ -2,14 +2,17 @@
 <!-- @strictTemplates true -->
 
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
+  <option
+    data-slot="native-select-option"
+    :class="cn('bg-popover text-popover-foreground', props.class)"
+  >
     <slot />
   </option>
 </template>
diff --git a/packages/ui/src/components/native-select/index.ts b/packages/ui/src/components/native-select/index.ts
index 04e92c7e..1d422717 100644
--- a/packages/ui/src/components/native-select/index.ts
+++ b/packages/ui/src/components/native-select/index.ts
@@ -1,3 +1,3 @@
-export { default as NativeSelect } from "./NativeSelect.vue"
-export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue"
-export { default as NativeSelectOption } from "./NativeSelectOption.vue"
+export { default as NativeSelect } from './NativeSelect.vue'
+export { default as NativeSelectOptGroup } from './NativeSelectOptGroup.vue'
+export { default as NativeSelectOption } from './NativeSelectOption.vue'
diff --git a/packages/ui/src/components/pagination/Pagination.vue b/packages/ui/src/components/pagination/Pagination.vue
index 2f66673a..724cd785 100644
--- a/packages/ui/src/components/pagination/Pagination.vue
+++ b/packages/ui/src/components/pagination/Pagination.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { PaginationRootEmits, PaginationRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationRoot, useForwardPropsEmits } from "reka-ui"
+import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { PaginationRoot, useForwardPropsEmits } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<PaginationRootProps & {
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 const emits = defineEmits<PaginationRootEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
diff --git a/packages/ui/src/components/pagination/PaginationContent.vue b/packages/ui/src/components/pagination/PaginationContent.vue
index 6d9d53f3..ee9ca759 100644
--- a/packages/ui/src/components/pagination/PaginationContent.vue
+++ b/packages/ui/src/components/pagination/PaginationContent.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { PaginationListProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationList } from "reka-ui"
+import type { PaginationListProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { PaginationList } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<PaginationListProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<PaginationListProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
diff --git a/packages/ui/src/components/pagination/PaginationEllipsis.vue b/packages/ui/src/components/pagination/PaginationEllipsis.vue
index d9ffd4e4..526b01e1 100644
--- a/packages/ui/src/components/pagination/PaginationEllipsis.vue
+++ b/packages/ui/src/components/pagination/PaginationEllipsis.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { PaginationEllipsisProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { MoreHorizontal } from "lucide-vue-next"
-import { PaginationEllipsis } from "reka-ui"
+import type { PaginationEllipsisProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { MoreHorizontal } from 'lucide-vue-next'
+import { PaginationEllipsis } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
diff --git a/packages/ui/src/components/pagination/PaginationFirst.vue b/packages/ui/src/components/pagination/PaginationFirst.vue
index 62f0913c..0a721e43 100644
--- a/packages/ui/src/components/pagination/PaginationFirst.vue
+++ b/packages/ui/src/components/pagination/PaginationFirst.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { PaginationFirstProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
+import type { PaginationFirstProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from '#/components/button'
-import { reactiveOmit } from "@vueuse/core"
-import { ChevronLeftIcon } from "lucide-vue-next"
-import { PaginationFirst, useForwardProps } from "reka-ui"
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronLeftIcon } from 'lucide-vue-next'
+import { PaginationFirst, useForwardProps } from 'reka-ui'
 import { cn } from '#/lib/utils'
 import { buttonVariants } from '#/components/button'
 
 const props = withDefaults(defineProps<PaginationFirstProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
 }>(), {
-  size: "default",
+  size: 'default',
 })
 
-const delegatedProps = reactiveOmit(props, "class", "size")
+const delegatedProps = reactiveOmit(props, 'class', 'size')
 const forwarded = useForwardProps(delegatedProps)
 </script>
 
diff --git a/packages/ui/src/components/pagination/PaginationItem.vue b/packages/ui/src/components/pagination/PaginationItem.vue
index 35664efa..5598d34b 100644
--- a/packages/ui/src/components/pagination/PaginationItem.vue
+++ b/packages/ui/src/components/pagination/PaginationItem.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { PaginationListItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
+import type { PaginationListItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from '#/components/button'
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationListItem } from "reka-ui"
+import { reactiveOmit } from '@vueuse/core'
+import { PaginationListItem } from 'reka-ui'
 import { cn } from '#/lib/utils'
 import { buttonVariants } from '#/components/button'
 
 const props = withDefaults(defineProps<PaginationListItemProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
   isActive?: boolean
 }>(), {
-  size: "icon",
+  size: 'icon',
 })
 
-const delegatedProps = reactiveOmit(props, "class", "size", "isActive")
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'isActive')
 </script>
 
 <template>
diff --git a/packages/ui/src/components/pagination/PaginationLast.vue b/packages/ui/src/components/pagination/PaginationLast.vue
index ae2a5046..9099b940 100644
--- a/packages/ui/src/components/pagination/PaginationLast.vue
+++ b/packages/ui/src/components/pagination/PaginationLast.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { PaginationLastProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
+import type { PaginationLastProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from '#/components/button'
-import { reactiveOmit } from "@vueuse/core"
-import { ChevronRightIcon } from "lucide-vue-next"
-import { PaginationLast, useForwardProps } from "reka-ui"
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronRightIcon } from 'lucide-vue-next'
+import { PaginationLast, useForwardProps } from 'reka-ui'
 import { cn } from '#/lib/utils'
 import { buttonVariants } from '#/components/button'
 
 const props = withDefaults(defineProps<PaginationLastProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
 }>(), {
-  size: "default",
+  size: 'default',
 })
 
-const delegatedProps = reactiveOmit(props, "class", "size")
+const delegatedProps = reactiveOmit(props, 'class', 'size')
 const forwarded = useForwardProps(delegatedProps)
 </script>
 
diff --git a/packages/ui/src/components/pagination/PaginationNext.vue b/packages/ui/src/components/pagination/PaginationNext.vue
index 626a4db5..00cb10aa 100644
--- a/packages/ui/src/components/pagination/PaginationNext.vue
+++ b/packages/ui/src/components/pagination/PaginationNext.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { PaginationNextProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
+import type { PaginationNextProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from '#/components/button'
-import { reactiveOmit } from "@vueuse/core"
-import { ChevronRightIcon } from "lucide-vue-next"
-import { PaginationNext, useForwardProps } from "reka-ui"
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronRightIcon } from 'lucide-vue-next'
+import { PaginationNext, useForwardProps } from 'reka-ui'
 import { cn } from '#/lib/utils'
 import { buttonVariants } from '#/components/button'
 
 const props = withDefaults(defineProps<PaginationNextProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
 }>(), {
-  size: "default",
+  size: 'default',
 })
 
-const delegatedProps = reactiveOmit(props, "class", "size")
+const delegatedProps = reactiveOmit(props, 'class', 'size')
 const forwarded = useForwardProps(delegatedProps)
 </script>
 
diff --git a/packages/ui/src/components/pagination/PaginationPrevious.vue b/packages/ui/src/components/pagination/PaginationPrevious.vue
index e29b0bfc..5d48e363 100644
--- a/packages/ui/src/components/pagination/PaginationPrevious.vue
+++ b/packages/ui/src/components/pagination/PaginationPrevious.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { PaginationPrevProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
+import type { PaginationPrevProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from '#/components/button'
-import { reactiveOmit } from "@vueuse/core"
-import { ChevronLeftIcon } from "lucide-vue-next"
-import { PaginationPrev, useForwardProps } from "reka-ui"
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronLeftIcon } from 'lucide-vue-next'
+import { PaginationPrev, useForwardProps } from 'reka-ui'
 import { cn } from '#/lib/utils'
 import { buttonVariants } from '#/components/button'
 
 const props = withDefaults(defineProps<PaginationPrevProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
 }>(), {
-  size: "default",
+  size: 'default',
 })
 
-const delegatedProps = reactiveOmit(props, "class", "size")
+const delegatedProps = reactiveOmit(props, 'class', 'size')
 const forwarded = useForwardProps(delegatedProps)
 </script>
 
diff --git a/packages/ui/src/components/pagination/index.ts b/packages/ui/src/components/pagination/index.ts
index 51ae7fdd..8eba5fee 100644
--- a/packages/ui/src/components/pagination/index.ts
+++ b/packages/ui/src/components/pagination/index.ts
@@ -1,8 +1,8 @@
-export { default as Pagination } from "./Pagination.vue"
-export { default as PaginationContent } from "./PaginationContent.vue"
-export { default as PaginationEllipsis } from "./PaginationEllipsis.vue"
-export { default as PaginationFirst } from "./PaginationFirst.vue"
-export { default as PaginationItem } from "./PaginationItem.vue"
-export { default as PaginationLast } from "./PaginationLast.vue"
-export { default as PaginationNext } from "./PaginationNext.vue"
-export { default as PaginationPrevious } from "./PaginationPrevious.vue"
+export { default as Pagination } from './Pagination.vue'
+export { default as PaginationContent } from './PaginationContent.vue'
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
+export { default as PaginationFirst } from './PaginationFirst.vue'
+export { default as PaginationItem } from './PaginationItem.vue'
+export { default as PaginationLast } from './PaginationLast.vue'
+export { default as PaginationNext } from './PaginationNext.vue'
+export { default as PaginationPrevious } from './PaginationPrevious.vue'
diff --git a/packages/ui/src/components/popover/Popover.vue b/packages/ui/src/components/popover/Popover.vue
index 4efdb98a..a3fe9ac6 100644
--- a/packages/ui/src/components/popover/Popover.vue
+++ b/packages/ui/src/components/popover/Popover.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
-import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()
diff --git a/packages/ui/src/components/popover/PopoverAnchor.vue b/packages/ui/src/components/popover/PopoverAnchor.vue
index 49e01dbc..e96a1211 100644
--- a/packages/ui/src/components/popover/PopoverAnchor.vue
+++ b/packages/ui/src/components/popover/PopoverAnchor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverAnchorProps } from "reka-ui"
-import { PopoverAnchor } from "reka-ui"
+import type { PopoverAnchorProps } from 'reka-ui'
+import { PopoverAnchor } from 'reka-ui'
 
 const props = defineProps<PopoverAnchorProps>()
 </script>
diff --git a/packages/ui/src/components/popover/PopoverContent.vue b/packages/ui/src/components/popover/PopoverContent.vue
index 1c26ca4f..a4c57fb2 100644
--- a/packages/ui/src/components/popover/PopoverContent.vue
+++ b/packages/ui/src/components/popover/PopoverContent.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import {
   PopoverContent,
   PopoverPortal,
   useForwardPropsEmits,
-} from "reka-ui"
+} from 'reka-ui'
 import { cn } from '#/lib/utils'
 
 defineOptions({
@@ -14,15 +14,15 @@ defineOptions({
 })
 
 const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
   {
-    align: "center",
+    align: 'center',
     sideOffset: 4,
   },
 )
 const emits = defineEmits<PopoverContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
diff --git a/packages/ui/src/components/popover/PopoverTrigger.vue b/packages/ui/src/components/popover/PopoverTrigger.vue
index fd3b4974..0d410658 100644
--- a/packages/ui/src/components/popover/PopoverTrigger.vue
+++ b/packages/ui/src/components/popover/PopoverTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverTriggerProps } from "reka-ui"
-import { PopoverTrigger } from "reka-ui"
+import type { PopoverTriggerProps } from 'reka-ui'
+import { PopoverTrigger } from 'reka-ui'
 
 const props = defineProps<PopoverTriggerProps>()
 </script>
diff --git a/packages/ui/src/components/popover/index.ts b/packages/ui/src/components/popover/index.ts
index 66edf89f..d724e785 100644
--- a/packages/ui/src/components/popover/index.ts
+++ b/packages/ui/src/components/popover/index.ts
@@ -1,4 +1,4 @@
-export { default as Popover } from "./Popover.vue"
-export { default as PopoverAnchor } from "./PopoverAnchor.vue"
-export { default as PopoverContent } from "./PopoverContent.vue"
-export { default as PopoverTrigger } from "./PopoverTrigger.vue"
+export { default as Popover } from './Popover.vue'
+export { default as PopoverAnchor } from './PopoverAnchor.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
diff --git a/packages/ui/src/components/scroll-area/ScrollArea.vue b/packages/ui/src/components/scroll-area/ScrollArea.vue
index 70052e25..e565cacd 100644
--- a/packages/ui/src/components/scroll-area/ScrollArea.vue
+++ b/packages/ui/src/components/scroll-area/ScrollArea.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { ScrollAreaRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
+import type { ScrollAreaRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
   ScrollAreaViewport,
-} from "reka-ui"
+} from 'reka-ui'
 import { cn } from '#/lib/utils'
-import ScrollBar from "./ScrollBar.vue"
+import ScrollBar from './ScrollBar.vue'
 
-const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
diff --git a/packages/ui/src/components/scroll-area/ScrollBar.vue b/packages/ui/src/components/scroll-area/ScrollBar.vue
index 39ec80ff..0f31b8b3 100644
--- a/packages/ui/src/components/scroll-area/ScrollBar.vue
+++ b/packages/ui/src/components/scroll-area/ScrollBar.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ScrollAreaScrollbarProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui"
+import type { ScrollAreaScrollbarProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
-const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
-  orientation: "vertical",
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
 })
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
diff --git a/packages/ui/src/components/separator/Separator.vue b/packages/ui/src/components/separator/Separator.vue
index 9322edf5..cb8f026f 100644
--- a/packages/ui/src/components/separator/Separator.vue
+++ b/packages/ui/src/components/separator/Separator.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Separator } from "reka-ui"
+import type { SeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Separator } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
 const props = withDefaults(defineProps<
-  SeparatorProps & { class?: HTMLAttributes["class"] }
+  SeparatorProps & { class?: HTMLAttributes['class'] }
 >(), {
-  orientation: "horizontal",
+  orientation: 'horizontal',
   decorative: true,
 })
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
diff --git a/packages/ui/src/components/separator/index.ts b/packages/ui/src/components/separator/index.ts
index 44072873..2287bcb9 100644
--- a/packages/ui/src/components/separator/index.ts
+++ b/packages/ui/src/components/separator/index.ts
@@ -1 +1 @@
-export { default as Separator } from "./Separator.vue"
+export { default as Separator } from './Separator.vue'
diff --git a/packages/ui/src/components/table/Table.vue b/packages/ui/src/components/table/Table.vue
index e4a80d46..347aaa1a 100644
--- a/packages/ui/src/components/table/Table.vue
+++ b/packages/ui/src/components/table/Table.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <div data-slot="table-container" class="relative w-full overflow-auto">
-    <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
+  <div
+    data-slot="table-container"
+    class="relative w-full overflow-auto"
+  >
+    <table
+      data-slot="table"
+      :class="cn('w-full caption-bottom text-sm', props.class)"
+    >
       <slot />
     </table>
   </div>
diff --git a/packages/ui/src/components/table/TableBody.vue b/packages/ui/src/components/table/TableBody.vue
index 42e017d5..c9ccbaf7 100644
--- a/packages/ui/src/components/table/TableBody.vue
+++ b/packages/ui/src/components/table/TableBody.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/table/TableCaption.vue b/packages/ui/src/components/table/TableCaption.vue
index 233376ea..69c799e4 100644
--- a/packages/ui/src/components/table/TableCaption.vue
+++ b/packages/ui/src/components/table/TableCaption.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/table/TableCell.vue b/packages/ui/src/components/table/TableCell.vue
index aa750d4f..906e331f 100644
--- a/packages/ui/src/components/table/TableCell.vue
+++ b/packages/ui/src/components/table/TableCell.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/table/TableEmpty.vue b/packages/ui/src/components/table/TableEmpty.vue
index 7eeecf68..127d0cba 100644
--- a/packages/ui/src/components/table/TableEmpty.vue
+++ b/packages/ui/src/components/table/TableEmpty.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
 import { cn } from '#/lib/utils'
-import TableCell from "./TableCell.vue"
-import TableRow from "./TableRow.vue"
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
 
 const props = withDefaults(defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
   colspan?: number
 }>(), {
   colspan: 1,
 })
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
diff --git a/packages/ui/src/components/table/TableFooter.vue b/packages/ui/src/components/table/TableFooter.vue
index c8900d8a..f9dddfd9 100644
--- a/packages/ui/src/components/table/TableFooter.vue
+++ b/packages/ui/src/components/table/TableFooter.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/table/TableHead.vue b/packages/ui/src/components/table/TableHead.vue
index 23726136..cd32bc75 100644
--- a/packages/ui/src/components/table/TableHead.vue
+++ b/packages/ui/src/components/table/TableHead.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/table/TableHeader.vue b/packages/ui/src/components/table/TableHeader.vue
index 70c290a4..1f3ee6be 100644
--- a/packages/ui/src/components/table/TableHeader.vue
+++ b/packages/ui/src/components/table/TableHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/table/TableRow.vue b/packages/ui/src/components/table/TableRow.vue
index c723bea3..1d4bf11e 100644
--- a/packages/ui/src/components/table/TableRow.vue
+++ b/packages/ui/src/components/table/TableRow.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/ui/src/components/table/index.ts b/packages/ui/src/components/table/index.ts
index 3be308b5..2b4ce391 100644
--- a/packages/ui/src/components/table/index.ts
+++ b/packages/ui/src/components/table/index.ts
@@ -1,9 +1,9 @@
-export { default as Table } from "./Table.vue"
-export { default as TableBody } from "./TableBody.vue"
-export { default as TableCaption } from "./TableCaption.vue"
-export { default as TableCell } from "./TableCell.vue"
-export { default as TableEmpty } from "./TableEmpty.vue"
-export { default as TableFooter } from "./TableFooter.vue"
-export { default as TableHead } from "./TableHead.vue"
-export { default as TableHeader } from "./TableHeader.vue"
-export { default as TableRow } from "./TableRow.vue"
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'
diff --git a/packages/ui/src/components/table/utils.ts b/packages/ui/src/components/table/utils.ts
index 3d4fd12f..6ef7b325 100644
--- a/packages/ui/src/components/table/utils.ts
+++ b/packages/ui/src/components/table/utils.ts
@@ -1,7 +1,7 @@
-import type { Updater } from "@tanstack/vue-table"
+import type { Updater } from '@tanstack/vue-table'
 
-import type { Ref } from "vue"
-import { isFunction } from "@tanstack/vue-table"
+import type { Ref } from 'vue'
+import { isFunction } from '@tanstack/vue-table'
 
 export function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>) {
   ref.value = isFunction(updaterOrValue)
diff --git a/packages/ui/src/components/tags-input/TagsInput.vue b/packages/ui/src/components/tags-input/TagsInput.vue
index 27f1d8c3..65eaff81 100644
--- a/packages/ui/src/components/tags-input/TagsInput.vue
+++ b/packages/ui/src/components/tags-input/TagsInput.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import type { TagsInputRootEmits, TagsInputRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TagsInputRoot, useForwardPropsEmits } from "reka-ui"
+import type { TagsInputRootEmits, TagsInputRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TagsInputRoot, useForwardPropsEmits } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<TagsInputRootEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <TagsInputRoot
-    v-slot="slotProps" v-bind="forwarded" :class="cn(
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :class="cn(
       'flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
       'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
       'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
diff --git a/packages/ui/src/components/tags-input/TagsInputInput.vue b/packages/ui/src/components/tags-input/TagsInputInput.vue
index 7aae6098..fcf18a4c 100644
--- a/packages/ui/src/components/tags-input/TagsInputInput.vue
+++ b/packages/ui/src/components/tags-input/TagsInputInput.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
-import type { TagsInputInputProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TagsInputInput, useForwardProps } from "reka-ui"
+import type { TagsInputInputProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TagsInputInput, useForwardProps } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+  <TagsInputInput
+    v-bind="forwardedProps"
+    :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)"
+  />
 </template>
diff --git a/packages/ui/src/components/tags-input/TagsInputItem.vue b/packages/ui/src/components/tags-input/TagsInputItem.vue
index 36876e8d..f9533e62 100644
--- a/packages/ui/src/components/tags-input/TagsInputItem.vue
+++ b/packages/ui/src/components/tags-input/TagsInputItem.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
-import type { TagsInputItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
+import type { TagsInputItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
 
-import { reactiveOmit } from "@vueuse/core"
-import { TagsInputItem, useForwardProps } from "reka-ui"
+import { reactiveOmit } from '@vueuse/core'
+import { TagsInputItem, useForwardProps } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+  <TagsInputItem
+    v-bind="forwardedProps"
+    :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)"
+  >
     <slot />
   </TagsInputItem>
 </template>
diff --git a/packages/ui/src/components/tags-input/TagsInputItemDelete.vue b/packages/ui/src/components/tags-input/TagsInputItemDelete.vue
index ae5b1600..8ab4a5c3 100644
--- a/packages/ui/src/components/tags-input/TagsInputItemDelete.vue
+++ b/packages/ui/src/components/tags-input/TagsInputItemDelete.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
-import type { TagsInputItemDeleteProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { X } from "lucide-vue-next"
-import { TagsInputItemDelete, useForwardProps } from "reka-ui"
+import type { TagsInputItemDeleteProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import { TagsInputItemDelete, useForwardProps } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+  <TagsInputItemDelete
+    v-bind="forwardedProps"
+    :class="cn('flex rounded bg-transparent mr-1', props.class)"
+  >
     <slot>
       <X class="w-4 h-4" />
     </slot>
diff --git a/packages/ui/src/components/tags-input/TagsInputItemText.vue b/packages/ui/src/components/tags-input/TagsInputItemText.vue
index c591cede..40cbfcbc 100644
--- a/packages/ui/src/components/tags-input/TagsInputItemText.vue
+++ b/packages/ui/src/components/tags-input/TagsInputItemText.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
-import type { TagsInputItemTextProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TagsInputItemText, useForwardProps } from "reka-ui"
+import type { TagsInputItemTextProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TagsInputItemText, useForwardProps } from 'reka-ui'
 import { cn } from '#/lib/utils'
 
-const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class')
 
 const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+  <TagsInputItemText
+    v-bind="forwardedProps"
+    :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)"
+  />
 </template>
diff --git a/packages/ui/src/components/tags-input/index.ts b/packages/ui/src/components/tags-input/index.ts
index 8736692d..31305f34 100644
--- a/packages/ui/src/components/tags-input/index.ts
+++ b/packages/ui/src/components/tags-input/index.ts
@@ -1,5 +1,5 @@
-export { default as TagsInput } from "./TagsInput.vue"
-export { default as TagsInputInput } from "./TagsInputInput.vue"
-export { default as TagsInputItem } from "./TagsInputItem.vue"
-export { default as TagsInputItemDelete } from "./TagsInputItemDelete.vue"
-export { default as TagsInputItemText } from "./TagsInputItemText.vue"
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/packages/ui/src/components/text-generate-effect/index.ts b/packages/ui/src/components/text-generate-effect/index.ts
index ec07e3f0..dc113545 100644
--- a/packages/ui/src/components/text-generate-effect/index.ts
+++ b/packages/ui/src/components/text-generate-effect/index.ts
@@ -1 +1 @@
-export { default as TextGenerateEffect } from "./TextGenerateEffect.vue";
+export { default as TextGenerateEffect } from './TextGenerateEffect.vue'
diff --git a/packages/ui/src/components/toggle/Toggle.vue b/packages/ui/src/components/toggle/Toggle.vue
index 7c927289..cbaa4665 100644
--- a/packages/ui/src/components/toggle/Toggle.vue
+++ b/packages/ui/src/components/toggle/Toggle.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import type { ToggleEmits, ToggleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ToggleVariants } from "."
-import { reactiveOmit } from "@vueuse/core"
-import { Toggle, useForwardPropsEmits } from "reka-ui"
+import type { ToggleEmits, ToggleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { ToggleVariants } from '.'
+import { reactiveOmit } from '@vueuse/core'
+import { Toggle, useForwardPropsEmits } from 'reka-ui'
 import { cn } from '#/lib/utils'
-import { toggleVariants } from "."
+import { toggleVariants } from '.'
 
 const props = withDefaults(defineProps<ToggleProps & {
-  class?: HTMLAttributes["class"]
-  variant?: ToggleVariants["variant"]
-  size?: ToggleVariants["size"]
+  class?: HTMLAttributes['class']
+  variant?: ToggleVariants['variant']
+  size?: ToggleVariants['size']
 }>(), {
-  variant: "default",
-  size: "default",
+  variant: 'default',
+  size: 'default',
   disabled: false,
 })
 
 const emits = defineEmits<ToggleEmits>()
 
-const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
diff --git a/packages/ui/src/components/toggle/index.ts b/packages/ui/src/components/toggle/index.ts
index d873390e..a72b056f 100644
--- a/packages/ui/src/components/toggle/index.ts
+++ b/packages/ui/src/components/toggle/index.ts
@@ -1,26 +1,26 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
 
-export { default as Toggle } from "./Toggle.vue"
+export { default as Toggle } from './Toggle.vue'
 
 export const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap',
   {
     variants: {
       variant: {
-        default: "bg-transparent",
+        default: 'bg-transparent',
         outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   },
 )
diff --git a/packages/web/src/components/Sidebar/index.vue b/packages/web/src/components/Sidebar/index.vue
index 8e787ba1..2c349391 100644
--- a/packages/web/src/components/Sidebar/index.vue
+++ b/packages/web/src/components/Sidebar/index.vue
@@ -68,7 +68,7 @@ import { computed } from 'vue'
 import SvgIcon from '@jamescoyle/vue-icon'
 import { mdiRobot, mdiChatOutline, mdiCogBox } from '@mdi/js'
 import { useRouter,useRoute } from 'vue-router'
-import { useUserStore } from '@/store/User.ts'
+import { useUserStore } from '@/store/user'
 import i18n from '@/i18n'
 import { ref } from 'vue'
 
diff --git a/packages/web/src/components/AddPlatform/index.vue b/packages/web/src/components/add-platform/index.vue
similarity index 100%
rename from packages/web/src/components/AddPlatform/index.vue
rename to packages/web/src/components/add-platform/index.vue
diff --git a/packages/web/src/components/AddProvider/index.vue b/packages/web/src/components/add-provider/index.vue
similarity index 100%
rename from packages/web/src/components/AddProvider/index.vue
rename to packages/web/src/components/add-provider/index.vue
diff --git a/packages/web/src/components/ChatList/index.vue b/packages/web/src/components/chat-list/index.vue
similarity index 98%
rename from packages/web/src/components/ChatList/index.vue
rename to packages/web/src/components/chat-list/index.vue
index 479fbca2..ac20e9ff 100644
--- a/packages/web/src/components/ChatList/index.vue
+++ b/packages/web/src/components/chat-list/index.vue
@@ -24,7 +24,7 @@ import UserChat from './UserChat/index.vue'
 import RobotChat from './RobotChat/index.vue'
 import { inject, nextTick, ref, watch } from 'vue'
 import { useElementBounding } from '@vueuse/core'
-import { useChatList } from '@/store/ChatList'
+import { useChatList } from '@/store/chat-list'
 import { onBeforeRouteLeave } from 'vue-router'
 import { storeToRefs } from 'pinia'
 // 模拟一下数据
diff --git a/packages/web/src/components/ChatList/RobotChat/index.vue b/packages/web/src/components/chat-list/robot-chat/index.vue
similarity index 100%
rename from packages/web/src/components/ChatList/RobotChat/index.vue
rename to packages/web/src/components/chat-list/robot-chat/index.vue
diff --git a/packages/web/src/components/ChatList/UserChat/index.vue b/packages/web/src/components/chat-list/user-chat/index.vue
similarity index 100%
rename from packages/web/src/components/ChatList/UserChat/index.vue
rename to packages/web/src/components/chat-list/user-chat/index.vue
diff --git a/packages/web/src/components/CreateMCP/index.vue b/packages/web/src/components/create-mcp/index.vue
similarity index 100%
rename from packages/web/src/components/CreateMCP/index.vue
rename to packages/web/src/components/create-mcp/index.vue
diff --git a/packages/web/src/components/CreateModel/index.vue b/packages/web/src/components/create-model/index.vue
similarity index 100%
rename from packages/web/src/components/CreateModel/index.vue
rename to packages/web/src/components/create-model/index.vue
diff --git a/packages/web/src/components/DataTable/index.vue b/packages/web/src/components/data-table/index.vue
similarity index 100%
rename from packages/web/src/components/DataTable/index.vue
rename to packages/web/src/components/data-table/index.vue
diff --git a/packages/web/src/components/MainContainer/index.vue b/packages/web/src/components/main-container/index.vue
similarity index 100%
rename from packages/web/src/components/MainContainer/index.vue
rename to packages/web/src/components/main-container/index.vue
diff --git a/packages/web/src/pages/chat/index.vue b/packages/web/src/pages/chat/index.vue
index 817312c3..603083f3 100644
--- a/packages/web/src/pages/chat/index.vue
+++ b/packages/web/src/pages/chat/index.vue
@@ -54,13 +54,12 @@ import {
   ScrollArea,
   Textarea,
   Button,
-  TextGenerateEffect
 } from '@memoh/ui'
 import SvgIcon from '@jamescoyle/vue-icon'
 import { mdiSendOutline } from '@mdi/js'
-import ChatList from '@/components/ChatList/index.vue'
+import ChatList from '@/components/chat-list/index.vue'
 import { provide, ref } from 'vue'
-import { useChatList } from '@/store/ChatList'
+import { useChatList } from '@/store/chat-list'
 import { storeToRefs } from 'pinia'
 const chatSay = ref('')
 const curInputSay = ref('')
diff --git a/packages/web/src/pages/login/index.vue b/packages/web/src/pages/login/index.vue
index af4f0071..569f882f 100644
--- a/packages/web/src/pages/login/index.vue
+++ b/packages/web/src/pages/login/index.vue
@@ -108,7 +108,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import * as z from 'zod'
 import request from '@/utils/request'
-import { useUserStore } from '@/store/User.ts'
+import { useUserStore } from '@/store/user'
 import {  ref } from 'vue'
 import { toast } from 'vue-sonner'
 const router = useRouter()
diff --git a/packages/web/src/pages/mainSection/index.vue b/packages/web/src/pages/main-section/index.vue
similarity index 75%
rename from packages/web/src/pages/mainSection/index.vue
rename to packages/web/src/pages/main-section/index.vue
index 96f08f48..cc8b69ce 100644
--- a/packages/web/src/pages/mainSection/index.vue
+++ b/packages/web/src/pages/main-section/index.vue
@@ -13,8 +13,8 @@
 
 <script setup lang="ts">
 import MainLayout from '@/layout/mainLayout/index.vue'
-import SideBar from '@/components/Sidebar/index.vue'
-import MainContainer from '@/components/MainContainer/index.vue'
+import SideBar from '@/components/sidebar/index.vue'
+import MainContainer from '@/components/main-container/index.vue'
 import { provide,ref } from 'vue'
 
 
diff --git a/packages/web/src/pages/mcp/index.vue b/packages/web/src/pages/mcp/index.vue
index 10e8bdd0..ff784e1b 100644
--- a/packages/web/src/pages/mcp/index.vue
+++ b/packages/web/src/pages/mcp/index.vue
@@ -11,9 +11,9 @@
 <script setup lang="ts">
 import { useQuery,useMutation,useQueryCache } from '@pinia/colada'
 import request from '@/utils/request'
-import { watch, h, provide,ref, computed,reactive } from 'vue'
-import DataTable from '@/components/DataTable/index.vue'
-import CreateMCP from '@/components/CreateMCP/index.vue'
+import { h, provide,ref, computed } from 'vue'
+import DataTable from '@/components/data-table/index.vue'
+import CreateMCP from '@/components/create-mcp/index.vue'
 import { type ColumnDef } from '@tanstack/vue-table'
 import {
   Badge,
diff --git a/packages/web/src/pages/models/index.vue b/packages/web/src/pages/models/index.vue
index 531e2861..6812f032 100644
--- a/packages/web/src/pages/models/index.vue
+++ b/packages/web/src/pages/models/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // import type { Payment } from '@/components/columns'
 import { computed, ref, provide, watch, reactive } from 'vue'
-import modelSetting from './modelSetting.vue'
+import modelSetting from './model-setting.vue'
 import { useQuery, useQueryCache } from '@pinia/colada'
 import {
   ScrollArea,
@@ -33,7 +33,7 @@ import { mdiMagnify,mdiListBoxOutline } from '@mdi/js'
 import SvgIcon from '@jamescoyle/vue-icon'
 import request from '@/utils/request'
 import { type ProviderInfo } from '@memoh/shared'
-import AddProvider from '@/components/AddProvider/index.vue'
+import AddProvider from '@/components/add-provider/index.vue'
 import { clientType } from '@memoh/shared'
 
 const filterProvider = ref('')
diff --git a/packages/web/src/pages/models/modelSetting.vue b/packages/web/src/pages/models/model-setting.vue
similarity index 99%
rename from packages/web/src/pages/models/modelSetting.vue
rename to packages/web/src/pages/models/model-setting.vue
index 26fa9e88..092d4157 100644
--- a/packages/web/src/pages/models/modelSetting.vue
+++ b/packages/web/src/pages/models/model-setting.vue
@@ -268,7 +268,7 @@ import {
   SelectGroup,
   SelectItem
 } from '@memoh/ui'
-import CreateModel from '@/components/CreateModel/index.vue'
+import CreateModel from '@/components/create-model/index.vue'
 import { computed, inject, provide, reactive, ref, toRef, toValue, watch } from 'vue'
 import { type ProviderInfo } from '@memoh/shared'
 import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
diff --git a/packages/web/src/pages/platform/index.vue b/packages/web/src/pages/platform/index.vue
index 9d06d07e..2191a9a5 100644
--- a/packages/web/src/pages/platform/index.vue
+++ b/packages/web/src/pages/platform/index.vue
@@ -210,7 +210,7 @@
 import { useMutation, useQuery } from '@pinia/colada'
 import request from '@/utils/request'
 import { watch, h, provide, ref } from 'vue'
-import AddPlatform from '@/components/AddPlatform/index.vue'
+import AddPlatform from '@/components/add-platform/index.vue'
 import {Card,CardHeader,CardFooter,CardContent,CardTitle,Switch,Button, Badge } from '@memoh/ui'
 
 const open = ref(false)
diff --git a/packages/web/src/pages/settings/index.vue b/packages/web/src/pages/settings/index.vue
index 779b3caa..485111ca 100644
--- a/packages/web/src/pages/settings/index.vue
+++ b/packages/web/src/pages/settings/index.vue
@@ -218,7 +218,7 @@ import { toast } from 'vue-sonner'
 import i18n from '@/i18n'
 import { useColorMode } from '@vueuse/core'
 import { useRouter } from 'vue-router'
-import { useUserStore } from '../../store/User'
+import { useUserStore } from '../../store/user'
 const router=useRouter()
 
 const { exitLogin } = useUserStore()
diff --git a/packages/web/src/store/User.ts b/packages/web/src/store/User.ts
index 61f0dac9..34732070 100644
--- a/packages/web/src/store/User.ts
+++ b/packages/web/src/store/User.ts
@@ -1,56 +1,60 @@
 import { defineStore } from 'pinia'
-import { reactive,watch } from 'vue'
+import { reactive, watch } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 import { useRouter } from 'vue-router'
 
-
-type user={
-  'id': string,
-  'username': string,
-  'role': string,
-  'displayName': string
+export interface UserInfo {
+  id: string;
+  username: string;
+  role: string;
+  displayName: string;
 }
 
+export const useUserStore = defineStore(
+  'user',
+  () => {
+    const userInfo = reactive<UserInfo>({
+      id: '',
+      username: '',
+      role: '',
+      displayName: '',
+    })
 
-export const useUserStore = defineStore('user', () => {
-  const userInfo = reactive<user>({
-    'id': '',
-    'username': '',
-    'role': '',
-    'displayName': ''
-  })
+    const localToken = useLocalStorage('token', '')
 
-  const localToken=useLocalStorage('token','')
-  
-
-  const login = (userData: user,token:string) => {
-    localToken.value=token
-    for (const key of Object.keys(userData) as (keyof user)[]) {
-      userInfo[key] = userData[key]
+    const login = (userData: UserInfo, token: string) => {
+      localToken.value = token
+      for (const key of Object.keys(userData) as (keyof UserInfo)[]) {
+        userInfo[key] = userData[key]
+      }
     }
-  }
 
-  const exitLogin = () => {
-    localToken.value=''
-    for (const key of Object.keys(userInfo) as (keyof user)[]) {
-      userInfo[key]=''
+    const exitLogin = () => {
+      localToken.value = ''
+      for (const key of Object.keys(userInfo) as (keyof UserInfo)[]) {
+        userInfo[key as keyof UserInfo] = ''
+      }
     }
-  }
-  const router=useRouter()
-  watch(localToken, () => {
-   
-    if (!localToken.value) {
-      exitLogin()
-      router.replace({name:'Login'})
+    const router = useRouter()
+    watch(
+      localToken,
+      () => {
+        if (!localToken.value) {
+          exitLogin()
+          router.replace({ name: 'Login' })
+        }
+      },
+      {
+        immediate: true,
+      },
+    )
+    return {
+      userInfo,
+      login,
+      exitLogin,
     }
-  }, {
-    immediate: true
-  })
-  return {
-    userInfo,
-    login,
-    exitLogin
-  }
-}, {
-  persist:true
-})
+  },
+  {
+    persist: true,
+  },
+)
diff --git a/packages/web/src/store/ChatList.ts b/packages/web/src/store/chat-list.ts
similarity index 100%
rename from packages/web/src/store/ChatList.ts
rename to packages/web/src/store/chat-list.ts
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
index 48599a89..c4f52b90 100644
--- a/packages/web/vite.config.ts
+++ b/packages/web/vite.config.ts
@@ -17,10 +17,10 @@ export default defineConfig({
     port,
     host: '0.0.0.0',
     proxy: {
-      "/api": {
-        target: "http://localhost:8080",
+      '/api': {
+        target: 'http://localhost:8080',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, "")
+        rewrite: (path) => path.replace(/^\/api/, '')
       }
     },
   },
@@ -28,10 +28,10 @@ export default defineConfig({
     port,
     host: '0.0.0.0',
     proxy: {
-      "/api": {
-        target: "http://localhost:8080",
+      '/api': {
+        target: 'http://localhost:8080',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, "")
+        rewrite: (path) => path.replace(/^\/api/, '')
       }
     },
     allowedHosts: true,