diff --git a/docs/app/components/content/AssistantDemo.vue b/docs/app/components/content/AssistantDemo.vue
index db6f2ec45..32fff5a4c 100644
--- a/docs/app/components/content/AssistantDemo.vue
+++ b/docs/app/components/content/AssistantDemo.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Chat } from '@ai-sdk/vue'
-import { DefaultChatTransport } from 'ai'
+import { DefaultChatTransport, isToolUIPart, isTextUIPart, getToolName } from 'ai'
+import { isToolStreaming } from '@nuxt/ui/utils/ai'
+import AssistantComark from '../../../../layer/modules/assistant/runtime/components/AssistantComark'
 
 const config = useRuntimeConfig()
 const { t, locale } = useDocusI18n()
@@ -35,34 +37,22 @@ const chat = isEnabled.value
     })
   : null
 
-const lastMessage = computed(() => chat?.messages.at(-1))
-const showThinking = computed(() =>
-  chat?.status === 'streaming'
-  && lastMessage.value?.role === 'assistant'
-  && !lastMessage.value?.parts?.some((p: { type: string }) => p.type === 'text'),
-)
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function getMessageToolCalls(message: any) {
-  if (!message?.parts) return []
-  return message.parts
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    .filter((p: any) => p.type === 'data-tool-calls')
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    .flatMap((p: any) => p.data?.tools || [])
-}
-
-function handleSubmit(event?: Event) {
-  event?.preventDefault()
+function getToolText(part: Parameters<typeof getToolName>[0]) {
+  const toolName = getToolName(part)
+  const input = (part as { input?: Record<string, string> }).input
+  const verb = part.state === 'output-available' ? 'Searched' : 'Searching'
+  const readVerb = part.state === 'output-available' ? 'Read' : 'Reading'
 
-  if (!input.value.trim() || !chat) {
-    return
-  }
+  return {
+    'list-pages': `${verb} pages`,
+    'get-page': `${readVerb} ${input?.path || '...'}`,
+  }[toolName] || `${verb} ${toolName}`
+}
 
-  chat.sendMessage({
-    text: input.value,
-  })
+function handleSubmit() {
+  if (!input.value.trim() || !chat) return
 
+  chat.sendMessage({ text: input.value })
   input.value = ''
 }
 
@@ -90,7 +80,7 @@ function resetChat() {
         >
           <div class="size-10 rounded-full bg-primary/10 flex items-center justify-center mb-3">
             <UIcon
-              name="i-lucide-sparkles"
+              name="i-custom:ai"
               class="size-5 text-primary"
             />
           </div>
@@ -119,26 +109,31 @@ function resetChat() {
           :ui="{ indicator: '*:bg-accented', root: 'h-auto!' }"
           class="px-4 py-4"
         >
+          <template #indicator>
+            <UChatTool
+              icon="i-lucide-brain"
+              text="Thinking..."
+              streaming
+            />
+          </template>
+
           <template #content="{ message }">
-            <div class="flex flex-col gap-2">
-              <AssistantLoading
-                v-if="message.role === 'assistant' && (getMessageToolCalls(message).length > 0 || (showThinking && message.id === lastMessage?.id))"
-                :tool-calls="getMessageToolCalls(message)"
-                :is-loading="showThinking && message.id === lastMessage?.id"
+            <template
+              v-for="(part, index) in message.parts"
+              :key="`${message.id}-${part.type}-${index}`"
+            >
+              <AssistantComark
+                v-if="isTextUIPart(part) && part.text"
+                :markdown="part.text"
               />
-              <template
-                v-for="(part, index) in message.parts"
-                :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`"
-              >
-                <MDCCached
-                  v-if="part.type === 'text' && part.text"
-                  :value="part.text"
-                  :cache-key="`demo-${message.id}-${index}`"
-                  :parser-options="{ highlight: false }"
-                  class="*:first:mt-0 *:last:mb-0"
-                />
-              </template>
-            </div>
+
+              <UChatTool
+                v-else-if="isToolUIPart(part)"
+                :text="getToolText(part)"
+                :icon="getToolName(part) === 'get-page' ? 'i-lucide-file-text' : 'i-lucide-search'"
+                :streaming="isToolStreaming(part)"
+              />
+            </template>
           </template>
         </UChatMessages>
       </template>
@@ -160,41 +155,36 @@ function resetChat() {
     </div>
 
     <div class="p-3">
-      <form
-        class="flex items-center gap-2"
-        @submit.prevent="handleSubmit"
+      <UChatPrompt
+        v-model="input"
+        :disabled="!isEnabled"
+        :placeholder="t('assistant.askAnything')"
+        variant="subtle"
+        size="sm"
+        @submit="handleSubmit"
       >
-        <UInput
-          v-model="input"
-          :disabled="!isEnabled"
-          :placeholder="t('assistant.askAnything')"
-          size="sm"
-          class="flex-1"
-          :ui="{
-            base: 'bg-elevated',
-          }"
-          @keydown.enter.exact.prevent="handleSubmit"
-        />
-        <div class="flex items-center gap-1">
-          <UButton
-            v-if="chat?.messages.length"
-            icon="i-lucide-trash-2"
-            color="neutral"
-            variant="ghost"
-            size="xs"
-            :disabled="!isEnabled"
-            @click="resetChat"
-          />
-          <UButton
-            type="submit"
-            icon="i-lucide-arrow-up"
-            color="primary"
-            size="xs"
-            :disabled="!isEnabled || !input.trim() || chat?.status === 'streaming'"
-            :loading="chat?.status === 'streaming'"
-          />
-        </div>
-      </form>
+        <template #footer>
+          <div class="ml-auto flex items-center gap-2">
+            <UButton
+              v-if="chat?.messages.length"
+              icon="i-lucide-trash-2"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              :disabled="!isEnabled"
+              @click="resetChat"
+            />
+
+            <UChatPromptSubmit
+              size="xs"
+              :status="chat?.status || 'ready'"
+              :disabled="!isEnabled || (chat?.status === 'ready' && !input.trim())"
+              @stop="chat?.stop()"
+              @reload="chat?.regenerate()"
+            />
+          </div>
+        </template>
+      </UChatPrompt>
     </div>
   </div>
 </template>
diff --git a/docs/content/en/1.getting-started/3.installation.md b/docs/content/en/1.getting-started/3.installation.md
index ae31231f9..c8172627e 100644
--- a/docs/content/en/1.getting-started/3.installation.md
+++ b/docs/content/en/1.getting-started/3.installation.md
@@ -56,6 +56,7 @@ npx skills add https://docus.dev
 ```
 
 This skill helps you create documentation faster by providing your AI assistant with:
+
 - Best practices for writing documentation with Docus
 - MDC component usage and ready-to-use templates
 - Writing guidelines and content structure patterns
diff --git a/docs/package.json b/docs/package.json
index 2c9f23aae..bc5492555 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,6 +8,8 @@
   },
   "dependencies": {
     "@nuxt/ui": "^4.7.1",
+    "@ai-sdk/vue": "3.0.141",
+    "ai": "6.0.141",
     "@nuxtjs/i18n": "^10.2.4",
     "@vercel/analytics": "^2.0.1",
     "@vercel/speed-insights": "^2.0.0",
diff --git a/layer/app/app.vue b/layer/app/app.vue
index 8726c3874..ad5a3ddc1 100644
--- a/layer/app/app.vue
+++ b/layer/app/app.vue
@@ -10,7 +10,7 @@ const { seo } = appConfig
 const { forced: forcedColorMode } = useDocusColorMode()
 const site = useSiteConfig()
 const { locale, locales, isEnabled, switchLocalePath } = useDocusI18n()
-const { isEnabled: isAssistantEnabled, panelWidth: assistantPanelWidth, shouldPushContent } = useAssistant()
+const { isEnabled: isAssistantEnabled } = useAssistant()
 
 const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
 const lang = computed(() => nuxtUiLocale.value.code)
@@ -67,28 +67,31 @@ const { subNavigationMode } = useSubNavigation(navigation)
   <UApp :locale="nuxtUiLocale">
     <NuxtLoadingIndicator color="var(--ui-primary)" />
 
-    <div
-      :class="['transition-[margin-right] duration-200 ease-linear will-change-[margin-right]', { 'docus-sub-header': subNavigationMode === 'header' }]"
-      :style="{ marginRight: shouldPushContent ? `${assistantPanelWidth}px` : '0' }"
-    >
-      <AppHeader v-if="$route.meta.header !== false" />
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
-      <AppFooter v-if="$route.meta.footer !== false" />
-    </div>
+    <div class="flex">
+      <div
+        class="flex-1 min-w-0"
+        :class="{ 'docus-sub-header': subNavigationMode === 'header' }"
+      >
+        <AppHeader v-if="$route.meta.header !== false" />
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+        <AppFooter v-if="$route.meta.footer !== false" />
+
+        <ClientOnly>
+          <LazyUContentSearch
+            :files="files"
+            :navigation="navigation"
+            :color-mode="!forcedColorMode"
+          />
+          <LazyAssistantFloatingInput v-if="isAssistantEnabled" />
+        </ClientOnly>
+      </div>
 
-    <ClientOnly>
-      <LazyUContentSearch
-        :files="files"
-        :navigation="navigation"
-        :color-mode="!forcedColorMode"
-      />
-      <template v-if="isAssistantEnabled">
+      <ClientOnly v-if="isAssistantEnabled">
         <LazyAssistantPanel />
-        <LazyAssistantFloatingInput />
-      </template>
-    </ClientOnly>
+      </ClientOnly>
+    </div>
   </UApp>
 </template>
 
diff --git a/layer/app/components/docs/DocsAsideRight.vue b/layer/app/components/docs/DocsAsideRight.vue
index 47d30c2ca..ecb5b716f 100644
--- a/layer/app/components/docs/DocsAsideRight.vue
+++ b/layer/app/components/docs/DocsAsideRight.vue
@@ -8,7 +8,6 @@ const props = defineProps<{
 
 const links = computed(() => props.page?.body?.toc?.links || [])
 
-const { shouldPushContent: shouldHideToc } = useAssistant()
 const { subNavigationMode } = useSubNavigation()
 const appConfig = useAppConfig()
 const { t } = useDocusI18n()
@@ -19,7 +18,7 @@ const contentTocVariants = useUIConfig('contentToc')
 <template>
   <div>
     <UContentToc
-      v-if="links.length && !shouldHideToc"
+      v-if="links.length"
       :highlight="contentTocVariants.highlight ?? true"
       :highlight-color="contentTocVariants.highlightColor"
       :highlight-variant="contentTocVariants.highlightVariant"
diff --git a/layer/app/components/docs/DocsAsideRightBottom.vue b/layer/app/components/docs/DocsAsideRightBottom.vue
index 9e9856753..ae2acd16d 100644
--- a/layer/app/components/docs/DocsAsideRightBottom.vue
+++ b/layer/app/components/docs/DocsAsideRightBottom.vue
@@ -4,10 +4,10 @@ const route = useRoute()
 const pageUrl = route.path
 const appConfig = useAppConfig()
 const { t } = useDocusI18n()
-const { isEnabled, open } = useAssistant()
+const { isEnabled, isStudioExpanded, open } = useAssistant()
 
 const showExplainWithAi = computed(() => {
-  return isEnabled.value && appConfig.assistant?.explainWithAi !== false
+  return isEnabled.value && appConfig.assistant?.explainWithAi !== false && !isStudioExpanded.value
 })
 
 const explainIcon = computed(() => appConfig.assistant?.icons?.explain || 'i-lucide-brain')
diff --git a/layer/app/pages/[[lang]]/[...slug].vue b/layer/app/pages/[[lang]]/[...slug].vue
index ca4198e0f..e1d21eec6 100644
--- a/layer/app/pages/[[lang]]/[...slug].vue
+++ b/layer/app/pages/[[lang]]/[...slug].vue
@@ -9,10 +9,9 @@ definePageMeta({
 
 const route = useRoute()
 const { locale, isEnabled, t } = useDocusI18n()
+const { isOpen } = useAssistant()
 const appConfig = useAppConfig()
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
-const { shouldPushContent: shouldHideToc } = useAssistant()
-
 const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')
 
 const [{ data: page }, { data: surround }] = await Promise.all([
@@ -75,8 +74,10 @@ addPrerenderPath(`/raw${route.path}.md`)
 <template>
   <UPage
     v-if="page"
-    :key="`page-${shouldHideToc}`"
-    :ui="{ root: 'lg:grid-cols-12', center: 'lg:col-span-9', right: 'lg:col-span-3' }"
+    :ui="isOpen ? {
+      center: 'lg:col-span-10',
+      right: 'lg:col-span-0',
+    } : undefined"
   >
     <UPageHeader
       :title="page.title"
diff --git a/layer/modules/assistant/index.ts b/layer/modules/assistant/index.ts
index f3c19aa4e..c34578b56 100644
--- a/layer/modules/assistant/index.ts
+++ b/layer/modules/assistant/index.ts
@@ -33,6 +33,9 @@ export default defineNuxtModule<AssistantModuleOptions>({
   meta: {
     name: 'assistant',
   },
+  moduleDependencies: {
+    '@comark/nuxt': {},
+  },
   setup(_options, nuxt) {
     const legacyOptions = nuxt.options.assistant
     if (legacyOptions && Object.keys(legacyOptions).length > 0) {
@@ -63,8 +66,6 @@ export default defineNuxtModule<AssistantModuleOptions>({
       'AssistantChat',
       'AssistantPanel',
       'AssistantFloatingInput',
-      'AssistantLoading',
-      'AssistantMatrix',
     ]
 
     components.forEach(name =>
@@ -88,7 +89,7 @@ export default defineNuxtModule<AssistantModuleOptions>({
       model: options.model,
     }
 
-    const routePath = options.apiPath.replace(/^\//, '')
+    const routePath = options.apiPath!.replace(/^\//, '')
     addServerHandler({
       route: `/${routePath}`,
       handler: resolve('./runtime/server/api/search'),
diff --git a/layer/modules/assistant/runtime/components/AssistantChat.vue b/layer/modules/assistant/runtime/components/AssistantChat.vue
index cc5131874..d3d9e2b01 100644
--- a/layer/modules/assistant/runtime/components/AssistantChat.vue
+++ b/layer/modules/assistant/runtime/components/AssistantChat.vue
@@ -2,7 +2,7 @@
 import { useDocusI18n } from '../../../../app/composables/useDocusI18n'
 
 const appConfig = useAppConfig()
-const { toggle } = useAssistant()
+const { toggle, isStudioExpanded } = useAssistant()
 const { t } = useDocusI18n()
 
 const tooltipText = computed(() => t('assistant.tooltip'))
@@ -10,7 +10,10 @@ const triggerIcon = computed(() => appConfig.assistant?.icons?.trigger || 'i-cus
 </script>
 
 <template>
-  <UTooltip :text="tooltipText">
+  <UTooltip
+    v-if="!isStudioExpanded"
+    :text="tooltipText"
+  >
     <UButton
       :icon="triggerIcon"
       color="neutral"
diff --git a/layer/modules/assistant/runtime/components/AssistantComark.ts b/layer/modules/assistant/runtime/components/AssistantComark.ts
new file mode 100644
index 000000000..eefba10aa
--- /dev/null
+++ b/layer/modules/assistant/runtime/components/AssistantComark.ts
@@ -0,0 +1,9 @@
+import highlight from '@comark/nuxt/plugins/highlight'
+
+export default defineComarkComponent({
+  name: 'AssistantComark',
+  plugins: [
+    highlight(),
+  ],
+  class: '*:first:mt-0 *:last:mb-0',
+})
diff --git a/layer/modules/assistant/runtime/components/AssistantFloatingInput.vue b/layer/modules/assistant/runtime/components/AssistantFloatingInput.vue
index 5a37592e4..9ca982338 100644
--- a/layer/modules/assistant/runtime/components/AssistantFloatingInput.vue
+++ b/layer/modules/assistant/runtime/components/AssistantFloatingInput.vue
@@ -4,7 +4,7 @@ import { useDocusI18n } from '../../../../app/composables/useDocusI18n'
 
 const route = useRoute()
 const appConfig = useAppConfig()
-const { open, isOpen } = useAssistant()
+const { open, isOpen, isStudioExpanded } = useAssistant()
 const { t } = useDocusI18n()
 const input = ref('')
 const isVisible = ref(true)
@@ -54,7 +54,7 @@ function onEscape() {
 <template>
   <AnimatePresence>
     <motion.div
-      v-if="isFloatingInputEnabled && isDocsRoute && isVisible && !isOpen"
+      v-if="isFloatingInputEnabled && isDocsRoute && isVisible && !isOpen && !isStudioExpanded"
       key="floating-input"
       :initial="{ y: 20, opacity: 0 }"
       :animate="{ y: 0, opacity: 1 }"
diff --git a/layer/modules/assistant/runtime/components/AssistantIndicator.vue b/layer/modules/assistant/runtime/components/AssistantIndicator.vue
new file mode 100644
index 000000000..fb5fe1206
--- /dev/null
+++ b/layer/modules/assistant/runtime/components/AssistantIndicator.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+const size = 4
+const dotSize = 2
+const gap = 2
+const totalDots = size * size
+
+const patterns = [
+  [[0], [1], [2], [3], [7], [11], [15], [14], [13], [12], [8], [4], [5], [6], [10], [9]],
+  [[0, 4, 8, 12], [1, 5, 9, 13], [2, 6, 10, 14], [3, 7, 11, 15]],
+  [[5, 6, 9, 10], [1, 4, 7, 8, 11, 14], [0, 3, 12, 15], [1, 4, 7, 8, 11, 14], [5, 6, 9, 10]],
+  [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]],
+  [[0], [3], [15], [12]],
+  [[5, 6, 9, 10], [1, 2, 4, 7, 8, 11, 13, 14], [0, 3, 12, 15]],
+  [[0], [1], [2], [3], [7], [6], [5], [4], [8], [9], [10], [11], [15], [14], [13], [12]],
+  [[0], [1, 4], [2, 5, 8], [3, 6, 9, 12], [7, 10, 13], [11, 14], [15]],
+]
+
+const activeDots = ref<Set<number>>(new Set())
+let patternIndex = 0
+let stepIndex = 0
+
+function nextStep() {
+  const pattern = patterns[patternIndex]
+  if (!pattern) return
+
+  activeDots.value = new Set(pattern[stepIndex])
+  stepIndex++
+
+  if (stepIndex >= pattern.length) {
+    stepIndex = 0
+    patternIndex = (patternIndex + 1) % patterns.length
+  }
+}
+
+const statusMessages = ['Thinking...', 'Searching...', 'Reading...', 'Analyzing...']
+const currentIndex = ref(0)
+const displayedText = ref(statusMessages[0]!)
+const chars = 'abcdefghijklmnopqrstuvwxyz'
+
+function scramble(from: string, to: string) {
+  const maxLength = Math.max(from.length, to.length)
+  let frame = 0
+  const totalFrames = 15
+
+  const step = () => {
+    frame++
+    let result = ''
+    const progress = (frame / totalFrames) * maxLength
+
+    for (let i = 0; i < maxLength; i++) {
+      if (i < progress - 2) {
+        result += to[i] || ''
+      }
+      else if (i < progress) {
+        result += chars[Math.floor(Math.random() * chars.length)]
+      }
+      else {
+        result += from[i] || ''
+      }
+    }
+
+    displayedText.value = result
+
+    if (frame < totalFrames) {
+      requestAnimationFrame(step)
+    }
+    else {
+      displayedText.value = to
+    }
+  }
+
+  requestAnimationFrame(step)
+}
+
+let matrixInterval: ReturnType<typeof setInterval> | undefined
+let textInterval: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  nextStep()
+  matrixInterval = setInterval(nextStep, 120)
+  textInterval = setInterval(() => {
+    const prev = displayedText.value
+    currentIndex.value = (currentIndex.value + 1) % statusMessages.length
+    scramble(prev, statusMessages[currentIndex.value]!)
+  }, 3500)
+})
+
+onUnmounted(() => {
+  clearInterval(matrixInterval)
+  clearInterval(textInterval)
+})
+</script>
+
+<template>
+  <div class="flex items-center text-xs text-muted overflow-hidden">
+    <div
+      class="shrink-0 mr-2 grid"
+      :style="{
+        gridTemplateColumns: `repeat(${size}, 1fr)`,
+        gap: `${gap}px`,
+        width: `${size * dotSize + (size - 1) * gap}px`,
+        height: `${size * dotSize + (size - 1) * gap}px`,
+      }"
+    >
+      <span
+        v-for="i in totalDots"
+        :key="i"
+        class="rounded-[0.5px] bg-current transition-opacity duration-100"
+        :class="activeDots.has(i - 1) ? 'opacity-100' : 'opacity-20'"
+        :style="{ width: `${dotSize}px`, height: `${dotSize}px` }"
+      />
+    </div>
+
+    <UChatShimmer :text="displayedText" class="font-mono tracking-tight" />
+  </div>
+</template>
diff --git a/layer/modules/assistant/runtime/components/AssistantLoading.vue b/layer/modules/assistant/runtime/components/AssistantLoading.vue
deleted file mode 100644
index 2524cd24e..000000000
--- a/layer/modules/assistant/runtime/components/AssistantLoading.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<script setup lang="ts">
-import { motion } from 'motion-v'
-import { useDocusI18n } from '../../../../app/composables/useDocusI18n'
-
-interface ToolCall {
-  toolCallId: string
-  toolName: string
-  args: Record<string, unknown>
-}
-
-const props = defineProps<{
-  text?: string
-  toolCalls?: ToolCall[]
-  isLoading?: boolean
-}>()
-
-const { t } = useDocusI18n()
-
-const messages = computed(() => [
-  t('assistant.loading.searching'),
-  t('assistant.loading.reading'),
-  t('assistant.loading.analyzing'),
-  t('assistant.loading.finding'),
-])
-
-const finishedMessage = computed(() => t('assistant.loading.finished'))
-
-const currentIndex = ref(0)
-const targetText = computed(() => {
-  if (!props.isLoading) {
-    return finishedMessage.value
-  }
-  return props.text || messages.value[currentIndex.value]
-})
-const displayedText = ref(targetText.value)
-
-const chars = 'abcdefghijklmnopqrstuvwxyz'
-
-function scrambleText(from: string, to: string) {
-  const maxLength = Math.max(from.length, to.length)
-  let frame = 0
-  const totalFrames = 15
-
-  const animate = () => {
-    frame++
-    let result = ''
-
-    for (let i = 0; i < maxLength; i++) {
-      const progress = frame / totalFrames
-      const charProgress = progress * maxLength
-
-      if (i < charProgress - 2) {
-        result += to[i] || ''
-      }
-      else if (i < charProgress) {
-        result += chars[Math.floor(Math.random() * chars.length)]
-      }
-      else {
-        result += from[i] || ''
-      }
-    }
-
-    displayedText.value = result
-
-    if (frame < totalFrames) {
-      requestAnimationFrame(animate)
-    }
-    else {
-      displayedText.value = to
-    }
-  }
-
-  requestAnimationFrame(animate)
-}
-
-let textInterval: ReturnType<typeof setInterval> | null = null
-
-watch(targetText, (newText, oldText) => {
-  if (newText !== oldText && newText && oldText) {
-    scrambleText(oldText, newText)
-  }
-})
-
-// Stop text rotation when loading finishes
-watch(() => props.isLoading, (isLoading) => {
-  if (!isLoading && textInterval) {
-    clearInterval(textInterval)
-    textInterval = null
-  }
-})
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function getToolLabel(toolName: string, args: any) {
-  const path = args?.path || ''
-
-  if (toolName === 'list-pages') {
-    return t('assistant.toolListPages')
-  }
-
-  if (toolName === 'get-page') {
-    return `${t('assistant.toolReadPage')} ${path || '...'}`
-  }
-
-  return toolName
-}
-
-onMounted(() => {
-  // Text rotation only when loading
-  if (!props.text && props.isLoading) {
-    textInterval = setInterval(() => {
-      currentIndex.value = (currentIndex.value + 1) % messages.value.length
-    }, 3500)
-  }
-})
-
-onUnmounted(() => {
-  if (textInterval) clearInterval(textInterval)
-})
-</script>
-
-<template>
-  <div class="flex flex-col gap-2">
-    <!-- Main loader with matrix and text -->
-    <div class="flex items-center text-xs text-muted overflow-hidden">
-      <motion.div
-        v-if="isLoading"
-        :initial="{ opacity: 1, width: 'auto' }"
-        :exit="{ opacity: 0, width: 0 }"
-        :transition="{ duration: 0.2 }"
-        class="shrink-0 mr-2"
-      >
-        <AssistantMatrix />
-      </motion.div>
-      <motion.span
-        :animate="{ x: 0 }"
-        :transition="{ duration: 0.2 }"
-        class="font-mono tracking-tight"
-      >
-        {{ displayedText }}
-      </motion.span>
-    </div>
-
-    <!-- Tool calls displayed below -->
-    <div
-      v-if="toolCalls?.length"
-      class="flex flex-col gap-1"
-      :class="isLoading ? 'pl-[22px]' : 'pl-0'"
-    >
-      <motion.div
-        v-for="tool in toolCalls"
-        :key="`${tool.toolCallId}-${JSON.stringify(tool.args)}`"
-        :initial="{ opacity: 0, x: -4 }"
-        :animate="{ opacity: 1, x: 0 }"
-        :transition="{ duration: 0.15 }"
-        class="flex items-center gap-1.5"
-      >
-        <span class="size-1 rounded-full bg-current opacity-40" />
-        <span class="text-[11px] text-dimmed truncate max-w-[200px]">
-          {{ getToolLabel(tool.toolName, tool.args) }}
-        </span>
-      </motion.div>
-    </div>
-  </div>
-</template>
diff --git a/layer/modules/assistant/runtime/components/AssistantMatrix.vue b/layer/modules/assistant/runtime/components/AssistantMatrix.vue
deleted file mode 100644
index 3d256095e..000000000
--- a/layer/modules/assistant/runtime/components/AssistantMatrix.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  size?: number
-  dotSize?: number
-  gap?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 4,
-  dotSize: 2,
-  gap: 2,
-})
-
-const totalDots = computed(() => props.size * props.size)
-const activeDots = ref<Set<number>>(new Set())
-
-// Patterns for 4x4 grid (indices 0-15)
-// Grid layout:
-//  0  1  2  3
-//  4  5  6  7
-//  8  9 10 11
-// 12 13 14 15
-const patterns = [
-  // Spiral inward
-  [[0], [1], [2], [3], [7], [11], [15], [14], [13], [12], [8], [4], [5], [6], [10], [9]],
-  // Wave horizontal
-  [[0, 4, 8, 12], [1, 5, 9, 13], [2, 6, 10, 14], [3, 7, 11, 15]],
-  // Diamond pulse
-  [[5, 6, 9, 10], [1, 4, 7, 8, 11, 14], [0, 3, 12, 15], [1, 4, 7, 8, 11, 14], [5, 6, 9, 10]],
-  // Loading bar
-  [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]],
-  // Corners rotate
-  [[0], [3], [15], [12]],
-  // Cross pulse
-  [[5, 6, 9, 10], [1, 2, 4, 7, 8, 11, 13, 14], [0, 3, 12, 15]],
-  // Snake
-  [[0], [1], [2], [3], [7], [6], [5], [4], [8], [9], [10], [11], [15], [14], [13], [12]],
-  // Diagonal wave
-  [[0], [1, 4], [2, 5, 8], [3, 6, 9, 12], [7, 10, 13], [11, 14], [15]],
-]
-
-let patternIndex = 0
-let stepIndex = 0
-let interval: ReturnType<typeof setInterval> | null = null
-
-function nextStep() {
-  const pattern = patterns[patternIndex]
-  if (!pattern) return
-
-  activeDots.value = new Set(pattern[stepIndex])
-  stepIndex++
-
-  if (stepIndex >= pattern.length) {
-    stepIndex = 0
-    patternIndex = (patternIndex + 1) % patterns.length
-  }
-}
-
-const gridStyle = computed(() => ({
-  display: 'grid',
-  gridTemplateColumns: `repeat(${props.size}, 1fr)`,
-  gap: `${props.gap}px`,
-  width: `${props.size * props.dotSize + (props.size - 1) * props.gap}px`,
-  height: `${props.size * props.dotSize + (props.size - 1) * props.gap}px`,
-}))
-
-const dotStyle = computed(() => ({
-  width: `${props.dotSize}px`,
-  height: `${props.dotSize}px`,
-}))
-
-onMounted(() => {
-  interval = setInterval(nextStep, 120)
-  nextStep()
-})
-
-onUnmounted(() => {
-  if (interval) clearInterval(interval)
-})
-</script>
-
-<template>
-  <div :style="gridStyle">
-    <span
-      v-for="i in totalDots"
-      :key="i"
-      class="rounded-[0.5px] bg-current transition-opacity duration-100"
-      :class="activeDots.has(i - 1) ? 'opacity-100' : 'opacity-20'"
-      :style="dotStyle"
-    />
-  </div>
-</template>
diff --git a/layer/modules/assistant/runtime/components/AssistantPanel.vue b/layer/modules/assistant/runtime/components/AssistantPanel.vue
index b3385fdb3..efe9e21e1 100644
--- a/layer/modules/assistant/runtime/components/AssistantPanel.vue
+++ b/layer/modules/assistant/runtime/components/AssistantPanel.vue
@@ -1,42 +1,47 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
-import type { UIMessage } from 'ai'
+import type { ToolUIPart, DynamicToolUIPart } from 'ai'
+import { DefaultChatTransport, isToolUIPart, isReasoningUIPart, isTextUIPart, getToolName } from 'ai'
 import { Chat } from '@ai-sdk/vue'
-import { DefaultChatTransport } from 'ai'
-import { createReusableTemplate } from '@vueuse/core'
+import { isReasoningStreaming, isToolStreaming } from '@nuxt/ui/utils/ai'
 import { useDocusI18n } from '../../../../app/composables/useDocusI18n'
+import AssistantComark from './AssistantComark'
+import AssistantIndicator from './AssistantIndicator.vue'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const components: Record<string, any> = {
-  pre: defineAsyncComponent(() => import('./AssistantPreStream.vue')),
-}
-
-const [DefineChatContent, ReuseChatContent] = createReusableTemplate<{ showExpandButton?: boolean }>()
-
-const { isOpen, isExpanded, isMobile, panelWidth, toggleExpanded, messages, pendingMessage, clearPending, faqQuestions } = useAssistant()
+const { isOpen, isStudioExpanded, messages, faqQuestions } = useAssistant()
 const config = useRuntimeConfig()
 const toast = useToast()
 const { t } = useDocusI18n()
 const input = ref('')
 
+const open = computed({
+  get: () => isOpen.value && !isStudioExpanded.value,
+  set: (value) => {
+    if (!isStudioExpanded.value) {
+      isOpen.value = value
+    }
+  },
+})
+
 const displayTitle = computed(() => t('assistant.title'))
 const displayPlaceholder = computed(() => t('assistant.placeholder'))
 
+let _skipSync = false
+
 const chat = new Chat({
   messages: messages.value,
   transport: new DefaultChatTransport({
     api: (config.app?.baseURL.replace(/\/$/, '') || '') + config.public.assistant.apiPath,
   }),
   onError: (error: Error) => {
-    const message = (() => {
+    let message = error.message
+    if (typeof message === 'string' && message[0] === '{') {
       try {
-        const parsed = JSON.parse(error.message)
-        return parsed?.message || error.message
+        message = JSON.parse(message).message || message
       }
       catch {
-        return error.message
+        // keep original on malformed JSON
       }
-    })()
+    }
 
     toast.add({
       description: message,
@@ -46,284 +51,289 @@ const chat = new Chat({
     })
   },
   onFinish: () => {
+    _skipSync = true
     messages.value = chat.messages
+    nextTick(() => {
+      _skipSync = false
+    })
   },
 })
 
-watch(pendingMessage, (message: string | undefined) => {
-  if (message) {
-    if (messages.value.length === 0 && chat.messages.length > 0) {
-      chat.messages.length = 0
-    }
-    chat.sendMessage({
-      text: message,
-    })
-    clearPending()
-  }
-}, { immediate: true })
+watch(messages, (newMessages) => {
+  if (_skipSync) return
 
-watch(messages, (newMessages: UIMessage[]) => {
-  if (newMessages.length === 0 && chat.messages.length > 0) {
-    chat.messages.length = 0
+  chat.messages = newMessages
+  if (chat.lastMessage?.role === 'user') {
+    chat.regenerate()
   }
-}, { deep: true })
-
-const lastMessage = computed(() => chat.messages.at(-1))
-const showThinking = computed(() =>
-  chat.status === 'streaming'
-  && lastMessage.value?.role === 'assistant'
-  && !lastMessage.value?.parts?.some((p: { type: string }) => p.type === 'text'),
-)
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function getMessageToolCalls(message: any) {
-  if (!message?.parts) return []
-  return message.parts
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    .filter((p: any) => p.type === 'data-tool-calls')
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    .flatMap((p: any) => p.data?.tools || [])
+})
+
+const canClear = computed(() => messages.value.length > 0)
+
+type ToolPart = ToolUIPart | DynamicToolUIPart
+type ToolState = ToolPart['state']
+
+function getToolMessage(state: ToolState, toolName: string, input: Record<string, string | undefined>) {
+  const searchVerb = state === 'output-available' ? 'Searched' : 'Searching'
+  const readVerb = state === 'output-available' ? 'Read' : 'Reading'
+
+  return {
+    'list-pages': `${searchVerb} pages`,
+    'get-page': `${readVerb} ${input.path || '...'}`,
+  }[toolName] || `${searchVerb} ${toolName}`
+}
+
+function getToolText(part: ToolPart) {
+  return getToolMessage(part.state, getToolName(part), (part.input || {}) as Record<string, string | undefined>)
 }
 
-function handleSubmit(event?: Event) {
-  event?.preventDefault()
+function getToolIcon(part: ToolPart): string {
+  const toolName = getToolName(part)
 
-  if (!input.value.trim()) {
-    return
+  return {
+    'get-page': 'i-lucide-file-text',
+  }[toolName] || 'i-lucide-search'
+}
+
+function getToolOutput(part: ToolPart): string | undefined {
+  if (part.state !== 'output-available' || !part.output) return undefined
+
+  const output = part.output as Record<string, unknown>
+
+  if (getToolName(part) === 'list-pages') {
+    const content = (output.content ?? output) as Array<{ text?: string }> | string
+    if (typeof content === 'string') return content
+    return content
+      ?.map(c => c.text)
+      .filter(Boolean)
+      .join('\n') || undefined
+  }
+
+  if (getToolName(part) === 'get-page') {
+    const content = (output.content ?? output) as Array<{ text?: string }> | string
+    if (typeof content === 'string') {
+      return content.length > 500 ? `${content.slice(0, 500)}…` : content
+    }
+    const text = content?.map(c => c.text).filter(Boolean).join('\n') || ''
+    return text.length > 500 ? `${text.slice(0, 500)}…` : text || undefined
   }
 
-  chat.sendMessage({
-    text: input.value,
-  })
+  return JSON.stringify(output, null, 2).slice(0, 500)
+}
 
+function onSubmit() {
+  if (!input.value.trim()) return
+
+  chat.sendMessage({ text: input.value })
   input.value = ''
 }
 
 function askQuestion(question: string) {
-  chat.sendMessage({
-    text: question,
-  })
+  input.value = question
+  onSubmit()
 }
 
-function resetChat() {
-  chat.stop()
+function clearMessages() {
+  if (chat.status === 'streaming') {
+    chat.stop()
+  }
   messages.value = []
-  chat.messages.length = 0
+  chat.messages = []
 }
 
-onMounted(() => {
-  if (pendingMessage.value) {
-    chat.sendMessage({
-      text: pendingMessage.value,
-    })
-    clearPending()
-  }
-  else if (chat.lastMessage?.role === 'user') {
-    chat.regenerate()
-  }
+defineShortcuts({
+  meta_i: {
+    handler: () => {
+      open.value = !open.value
+    },
+    usingInput: true,
+  },
 })
 </script>
 
 <template>
-  <DefineChatContent v-slot="{ showExpandButton = true }">
-    <div class="flex h-full flex-col">
-      <div class="flex h-16 shrink-0 items-center justify-between border-b border-default px-4">
-        <span class="font-medium text-highlighted">{{ displayTitle }}</span>
-        <div class="flex items-center gap-1">
-          <UTooltip
-            v-if="showExpandButton"
-            :text="isExpanded ? t('assistant.collapse') : t('assistant.expand')"
-          >
-            <UButton
-              :icon="isExpanded ? 'i-lucide-minimize-2' : 'i-lucide-maximize-2'"
-              color="neutral"
-              variant="ghost"
-              size="sm"
-              class="text-muted hover:text-highlighted"
-              @click="toggleExpanded"
-            />
-          </UTooltip>
-          <UTooltip
-            v-if="chat.messages.length > 0"
-            :text="t('assistant.clearChat')"
+  <USidebar
+    v-model:open="open"
+    side="right"
+    :title="displayTitle"
+    rail
+    :style="{ '--sidebar-width': '24rem' }"
+    :ui="{ footer: 'p-0', actions: 'gap-0.5', container: '!left-auto' }"
+  >
+    <template #actions>
+      <UTooltip
+        v-if="canClear"
+        :text="t('assistant.clearChat')"
+      >
+        <UButton
+          icon="i-lucide-list-x"
+          color="neutral"
+          variant="ghost"
+          @click="clearMessages"
+        />
+      </UTooltip>
+    </template>
+
+    <template #close>
+      <UTooltip
+        :text="t('assistant.close')"
+        :kbds="['meta', 'i']"
+      >
+        <UButton
+          icon="i-lucide-panel-right-close"
+          color="neutral"
+          variant="ghost"
+          aria-label="Close"
+          @click="open = false"
+        />
+      </UTooltip>
+    </template>
+
+    <UTheme
+      :ui="{
+        prose: {
+          p: { base: 'my-2 text-sm/6' },
+          li: { base: 'my-0.5 text-sm/6' },
+          ul: { base: 'my-2' },
+          ol: { base: 'my-2' },
+          h1: { base: 'text-xl mb-4' },
+          h2: { base: 'text-lg mt-6 mb-3' },
+          h3: { base: 'text-base mt-4 mb-2' },
+          h4: { base: 'text-sm mt-3 mb-1.5' },
+          code: { base: 'text-xs' },
+          pre: { root: 'my-2', base: 'text-xs/5' },
+          table: { root: 'my-2' },
+          hr: { base: 'my-4' },
+        },
+      }"
+    >
+      <UChatMessages
+        v-if="chat.messages.length"
+        should-auto-scroll
+        :messages="chat.messages"
+        :status="chat.status"
+        compact
+        class="px-0 gap-2"
+        :user="{ ui: { container: 'max-w-full' } }"
+      >
+        <template #indicator>
+          <AssistantIndicator />
+        </template>
+
+        <template #content="{ message }">
+          <template
+            v-for="(part, index) in message.parts"
+            :key="`${message.id}-${part.type}-${index}`"
           >
-            <UButton
-              icon="i-lucide-trash-2"
-              color="neutral"
-              variant="ghost"
-              size="sm"
-              class="text-muted hover:text-highlighted"
-              @click="resetChat"
-            />
-          </UTooltip>
-          <UTooltip :text="t('assistant.close')">
-            <UButton
-              icon="i-lucide-x"
-              color="neutral"
-              variant="ghost"
-              size="sm"
-              class="text-muted hover:text-highlighted"
-              @click="isOpen = false"
-            />
-          </UTooltip>
-        </div>
-      </div>
+            <UChatReasoning
+              v-if="isReasoningUIPart(part)"
+              :text="part.text"
+              :streaming="isReasoningStreaming(message, index, chat)"
+              icon="i-lucide-brain"
+            >
+              <AssistantComark
+                :markdown="part.text"
+                :streaming="isReasoningStreaming(message, index, chat)"
+              />
+            </UChatReasoning>
 
-      <div class="min-h-0 flex-1 overflow-y-auto">
-        <UChatMessages
-          v-if="chat.messages.length > 0"
-          :messages="chat.messages"
-          compact
-          :status="chat.status"
-          :user="{ ui: { content: 'text-sm' } }"
-          :ui="{ indicator: '*:bg-accented', root: 'h-auto!' }"
-          class="px-4 py-4"
-        >
-          <template #content="{ message }">
-            <div class="flex flex-col gap-2">
-              <AssistantLoading
-                v-if="message.role === 'assistant' && (getMessageToolCalls(message).length > 0 || (showThinking && message.id === lastMessage?.id))"
-                :tool-calls="getMessageToolCalls(message)"
-                :is-loading="showThinking && message.id === lastMessage?.id"
+            <template v-else-if="isTextUIPart(part) && part.text.length > 0">
+              <AssistantComark
+                v-if="message.role === 'assistant'"
+                :markdown="part.text"
+                :streaming="isReasoningStreaming(message, index, chat)"
               />
-              <template
-                v-for="(part, index) in message.parts"
-                :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`"
+              <p
+                v-else-if="message.role === 'user'"
+                class="whitespace-pre-wrap text-sm/6"
               >
-                <MDCCached
-                  v-if="part.type === 'text' && part.text"
-                  :value="part.text"
-                  :cache-key="`${message.id}-${index}`"
-                  :components="components"
-                  :parser-options="{ highlight: false }"
-                  class="*:first:mt-0 *:last:mb-0"
-                />
-              </template>
-            </div>
+                {{ part.text }}
+              </p>
+            </template>
+
+            <UChatTool
+              v-else-if="isToolUIPart(part)"
+              :text="getToolText(part)"
+              :icon="getToolIcon(part)"
+              :streaming="isToolStreaming(part)"
+              chevron="leading"
+            >
+              <pre
+                v-if="getToolOutput(part)"
+                class="text-xs text-dimmed whitespace-pre-wrap"
+                v-text="getToolOutput(part)"
+              />
+            </UChatTool>
           </template>
-        </UChatMessages>
+        </template>
+      </UChatMessages>
 
+      <div v-else>
         <div
-          v-else
-          class="p-4"
+          v-if="!faqQuestions?.length"
+          class="flex h-full flex-col items-center justify-center py-12 text-center"
         >
-          <div
-            v-if="!faqQuestions?.length"
-            class="flex h-full flex-col items-center justify-center py-12 text-center"
-          >
-            <div class="mb-4 flex size-12 items-center justify-center rounded-full bg-primary/10">
-              <UIcon
-                name="i-lucide-message-circle-question"
-                class="size-6 text-primary"
-              />
-            </div>
-            <h3 class="mb-2 text-base font-medium text-highlighted">
-              {{ t('assistant.askMeAnything') }}
-            </h3>
-            <p class="max-w-xs text-sm text-muted">
-              {{ t('assistant.askMeAnythingDescription') }}
-            </p>
+          <div class="mb-4 flex size-12 items-center justify-center rounded-full bg-primary/10">
+            <UIcon
+              name="i-lucide-message-circle-question"
+              class="size-6 text-primary"
+            />
           </div>
-
-          <template v-else>
-            <p class="mb-4 text-sm font-medium text-muted">
-              {{ t('assistant.faq') }}
-            </p>
-
-            <div class="flex flex-col gap-5">
-              <div
-                v-for="category in faqQuestions"
-                :key="category.category"
-                class="flex flex-col gap-1.5"
-              >
-                <h4 class="text-xs font-medium uppercase tracking-wide text-dimmed">
-                  {{ category.category }}
-                </h4>
-                <div class="flex flex-col">
-                  <button
-                    v-for="question in category.items"
-                    :key="question"
-                    class="py-1.5 text-left text-sm text-muted transition-colors hover:text-highlighted"
-                    @click="askQuestion(question)"
-                  >
-                    {{ question }}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </template>
+          <h3 class="mb-2 text-base font-medium text-highlighted">
+            {{ t('assistant.askMeAnything') }}
+          </h3>
+          <p class="max-w-xs text-sm text-muted">
+            {{ t('assistant.askMeAnythingDescription') }}
+          </p>
         </div>
-      </div>
 
-      <div class="w-full shrink-0 p-3">
-        <UChatPrompt
-          v-model="input"
-          :rows="2"
-          :placeholder="displayPlaceholder"
-          maxlength="1000"
-          :ui="{
-            root: 'shadow-none!',
-            body: '*:p-0! *:rounded-none! *:text-base!',
-          }"
-          @submit="handleSubmit"
-        >
-          <template #footer>
-            <div class="flex items-center gap-1 text-xs text-muted">
-              <span>{{ t('assistant.lineBreak') }}</span>
-              <UKbd
-                size="sm"
-                value="shift"
-              />
-              <UKbd
-                size="sm"
-                value="enter"
-              />
-            </div>
-            <UChatPromptSubmit
-              class="ml-auto"
-              size="xs"
-              :status="chat.status"
-              @stop="chat.stop()"
-              @reload="chat.regenerate()"
+        <template v-else>
+          <div class="flex flex-col gap-6">
+            <UPageLinks
+              v-for="category in faqQuestions"
+              :key="category.category"
+              :title="category.category"
+              :links="category.items.map(item => ({ label: item, onClick: () => askQuestion(item) }))"
             />
-          </template>
-        </UChatPrompt>
-        <div class="mt-1 flex text-xs text-dimmed items-center justify-between">
-          <span>{{ t('assistant.chatCleared') }}</span>
-          <span>
-            {{ input.length }}/1000
-          </span>
-        </div>
+          </div>
+        </template>
       </div>
-    </div>
-  </DefineChatContent>
-
-  <aside
-    v-if="!isMobile"
-    class="left-auto! fixed top-0 z-50 h-dvh overflow-hidden border-l border-default bg-default/95 backdrop-blur-xl transition-[right,width] duration-200 ease-linear will-change-[right,width]"
-    :style="{
-      width: `${panelWidth}px`,
-      right: isOpen ? '0' : `-${panelWidth}px`,
-    }"
-  >
-    <div
-      class="h-full transition-[width] duration-200 ease-linear"
-      :style="{ width: `${panelWidth}px` }"
-    >
-      <ReuseChatContent :show-expand-button="true" />
-    </div>
-  </aside>
+    </UTheme>
 
-  <USlideover
-    v-else
-    v-model:open="isOpen"
-    side="right"
-    :ui="{
-      content: 'ring-0 bg-default',
-    }"
-  >
-    <template #content>
-      <ReuseChatContent :show-expand-button="false" />
+    <template #footer>
+      <UChatPrompt
+        v-model="input"
+        :error="chat.error"
+        :placeholder="displayPlaceholder"
+        variant="naked"
+        size="sm"
+        autofocus
+        :ui="{ base: 'px-0' }"
+        class="px-4"
+        @submit="onSubmit"
+      >
+        <template #footer>
+          <div class="flex items-center gap-1.5 text-xs text-dimmed">
+            <span>{{ t('assistant.lineBreak') }}</span>
+            <UKbd
+              size="sm"
+              value="shift"
+            />
+            <UKbd
+              size="sm"
+              value="enter"
+            />
+          </div>
+
+          <UChatPromptSubmit
+            size="sm"
+            :status="chat.status"
+            :disabled="chat.status === 'ready' && !input.trim()"
+            @stop="chat.stop()"
+            @reload="chat.regenerate()"
+          />
+        </template>
+      </UChatPrompt>
     </template>
-  </USlideover>
+  </USidebar>
 </template>
diff --git a/layer/modules/assistant/runtime/composables/useAssistant.ts b/layer/modules/assistant/runtime/composables/useAssistant.ts
index bdcf419de..7c40d8d54 100644
--- a/layer/modules/assistant/runtime/composables/useAssistant.ts
+++ b/layer/modules/assistant/runtime/composables/useAssistant.ts
@@ -1,7 +1,7 @@
 import type { UIMessage } from 'ai'
-import { useAppConfig, useRuntimeConfig, useState } from '#imports'
-import { useMediaQuery } from '@vueuse/core'
-import { computed } from 'vue'
+import { useAppConfig, useRuntimeConfig } from '#imports'
+import { createSharedComposable, useLocalStorage } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 import type { FaqCategory, FaqQuestions, LocalizedFaqQuestions } from '../types'
 
 function normalizeFaqQuestions(questions: FaqQuestions): FaqCategory[] {
@@ -19,10 +19,7 @@ function normalizeFaqQuestions(questions: FaqQuestions): FaqCategory[] {
   return questions as FaqCategory[]
 }
 
-const PANEL_WIDTH_COMPACT = 360
-const PANEL_WIDTH_EXPANDED = 520
-
-export function useAssistant() {
+export const useAssistant = createSharedComposable(() => {
   const config = useRuntimeConfig()
   const appConfig = useAppConfig()
   const assistantRuntimeConfig = config.public.assistant as { enabled?: boolean } | undefined
@@ -30,26 +27,37 @@ export function useAssistant() {
   const docusRuntimeConfig = appConfig.docus as { locale?: string } | undefined
   const isEnabled = computed(() => assistantRuntimeConfig?.enabled ?? false)
 
-  const isOpen = useState('assistant-open', () => false)
-  const isExpanded = useState('assistant-expanded', () => false)
-  const messages = useState<UIMessage[]>('assistant-messages', () => [])
-  const pendingMessage = useState<string | undefined>('assistant-pending', () => undefined)
+  const storageOpen = useLocalStorage('assistant-open', false)
+  const messages = useLocalStorage<UIMessage[]>('assistant-messages', [])
+
+  const isOpen = ref(false)
+  const isStudioExpanded = ref(false)
 
-  const isMobile = useMediaQuery('(max-width: 767px)')
-  const panelWidth = computed(() => isExpanded.value ? PANEL_WIDTH_EXPANDED : PANEL_WIDTH_COMPACT)
-  const shouldPushContent = computed(() => !isMobile.value && isOpen.value)
+  onNuxtReady(() => {
+    nextTick(() => {
+      isOpen.value = storageOpen.value
+    })
+
+    isStudioExpanded.value = document.body.hasAttribute('data-expand-sidebar')
+    const observer = new MutationObserver(() => {
+      isStudioExpanded.value = document.body.hasAttribute('data-expand-sidebar')
+    })
+    observer.observe(document.body, { attributes: true, attributeFilter: ['data-expand-sidebar'] })
+  })
+
+  watch(isOpen, (value) => {
+    storageOpen.value = value
+  })
 
   const faqQuestions = computed<FaqCategory[]>(() => {
     const faqConfig = assistantConfig?.faqQuestions
     if (!faqConfig) return []
 
-    // Check if it's a localized object (has locale keys like 'en', 'fr')
     if (!Array.isArray(faqConfig)) {
       const localizedConfig = faqConfig as LocalizedFaqQuestions
       const currentLocale = docusRuntimeConfig?.locale || 'en'
       const defaultLocale = config.public.i18n?.defaultLocale || 'en'
 
-      // Try current locale, then default locale, then first available
       const questions = localizedConfig[currentLocale]
         || localizedConfig[defaultLocale]
         || Object.values(localizedConfig)[0]
@@ -61,51 +69,39 @@ export function useAssistant() {
   })
 
   function open(initialMessage?: string, clearPrevious = false) {
+    if (isStudioExpanded.value) return
+
     if (clearPrevious) {
       messages.value = []
     }
 
     if (initialMessage) {
-      pendingMessage.value = initialMessage
+      messages.value = [...messages.value, {
+        id: String(Date.now()),
+        role: 'user' as const,
+        parts: [{ type: 'text' as const, text: initialMessage }],
+      }]
     }
     isOpen.value = true
   }
 
-  function clearPending() {
-    pendingMessage.value = undefined
-  }
-
   function close() {
     isOpen.value = false
   }
 
   function toggle() {
+    if (isStudioExpanded.value) return
     isOpen.value = !isOpen.value
   }
 
-  function clearMessages() {
-    messages.value = []
-  }
-
-  function toggleExpanded() {
-    isExpanded.value = !isExpanded.value
-  }
-
   return {
     isEnabled,
     isOpen,
-    isExpanded,
-    isMobile,
-    panelWidth,
-    shouldPushContent,
+    isStudioExpanded,
     messages,
-    pendingMessage,
     faqQuestions,
     open,
-    clearPending,
     close,
     toggle,
-    toggleExpanded,
-    clearMessages,
   }
-}
+})
diff --git a/layer/modules/assistant/runtime/server/api/search.ts b/layer/modules/assistant/runtime/server/api/search.ts
index f16ebce75..106054c5a 100644
--- a/layer/modules/assistant/runtime/server/api/search.ts
+++ b/layer/modules/assistant/runtime/server/api/search.ts
@@ -1,5 +1,5 @@
-import { streamText, convertToModelMessages, createUIMessageStream, createUIMessageStreamResponse } from 'ai'
-import type { UIMessageStreamWriter, ToolCallPart, ToolSet } from 'ai'
+import { streamText, convertToModelMessages } from 'ai'
+import type { ToolSet } from 'ai'
 import { createMCPClient } from '@ai-sdk/mcp'
 import type { H3Event } from 'h3'
 
@@ -23,11 +23,10 @@ function createLocalFetch(event: H3Event): typeof fetch {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function stopWhenResponseComplete({ steps }: { steps: any[] }): boolean {
+function stopWhenResponseComplete({ steps }: { steps: { text?: string, toolCalls?: unknown[] }[] }): boolean {
   const lastStep = steps.at(-1)
   if (!lastStep) return false
 
-  // Primary condition: stop when model gives a text response without tool calls
   const hasText = Boolean(lastStep.text && lastStep.text.trim().length > 0)
   const hasNoToolCalls = !lastStep.toolCalls || lastStep.toolCalls.length === 0
 
@@ -57,7 +56,7 @@ function getSystemPrompt(siteName: string) {
 
 **Links and exploration:**
 - Tool results include a \`url\` for each page — prefer markdown links \`[label](url)\` so users can open the doc in one click
-- When it helps, add extra links (related pages, “read more”, side topics) — make the answer easy to dig into, not a wall of text
+- When it helps, add extra links (related pages, "read more", side topics) — make the answer easy to dig into, not a wall of text
 - Stick to URLs from tool results (\`url\` / \`path\`) so links stay valid
 
 **FORMATTING RULES (CRITICAL):**
@@ -85,6 +84,9 @@ export default defineEventHandler(async (event) => {
   const isExternalUrl = mcpServer.startsWith('http://') || mcpServer.startsWith('https://')
   const baseURL = config.app?.baseURL?.replace(/\/$/, '') || ''
 
+  const abortController = new AbortController()
+  event.node.req.on('close', () => abortController.abort())
+
   let transport: Parameters<typeof createMCPClient>[0]['transport']
   if (isExternalUrl) {
     transport = {
@@ -109,41 +111,19 @@ export default defineEventHandler(async (event) => {
   const httpClient = await createMCPClient({ transport })
   const mcpTools = await httpClient.tools()
 
-  const stream = createUIMessageStream({
-    execute: async ({ writer }: { writer: UIMessageStreamWriter }) => {
-      const modelMessages = await convertToModelMessages(messages)
-      const result = streamText({
-        model: config.assistant.model,
-        maxOutputTokens: 4000,
-        maxRetries: 2,
-        stopWhen: stopWhenResponseComplete,
-        system: getSystemPrompt(siteName),
-        messages: modelMessages,
-        tools: mcpTools as ToolSet,
-        onStepFinish: ({ toolCalls }: { toolCalls: ToolCallPart[] }) => {
-          if (toolCalls.length === 0) return
-          writer.write({
-            id: toolCalls[0]?.toolCallId,
-            type: 'data-tool-calls',
-            data: {
-              tools: toolCalls.map((tc: ToolCallPart) => {
-                const args = 'args' in tc ? tc.args : 'input' in tc ? tc.input : {}
-                return {
-                  toolName: tc.toolName,
-                  toolCallId: tc.toolCallId,
-                  args,
-                }
-              }),
-            },
-          })
-        },
-      })
-      writer.merge(result.toUIMessageStream())
-    },
-    onFinish: async () => {
-      await httpClient.close()
-    },
-  })
-
-  return createUIMessageStreamResponse({ stream })
+  const closeMcp = () => event.waitUntil(httpClient.close())
+
+  return streamText({
+    model: config.assistant.model,
+    maxOutputTokens: 4000,
+    maxRetries: 2,
+    abortSignal: abortController.signal,
+    stopWhen: stopWhenResponseComplete,
+    system: getSystemPrompt(siteName),
+    messages: await convertToModelMessages(messages),
+    tools: mcpTools as ToolSet,
+    onFinish: closeMcp,
+    onAbort: closeMcp,
+    onError: closeMcp,
+  }).toUIMessageStreamResponse()
 })
diff --git a/layer/modules/css.ts b/layer/modules/css.ts
index 0328bb524..b25892c45 100644
--- a/layer/modules/css.ts
+++ b/layer/modules/css.ts
@@ -43,6 +43,14 @@ export default defineNuxtModule({
 @source "../../app.config.ts";
 @source "${assistantDir.replace(/\\/g, '/')}/**/*";
 
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
 :root {
   --ui-container: 90rem;
 }
diff --git a/layer/package.json b/layer/package.json
index cf5b9d0f0..6ff9d4532 100644
--- a/layer/package.json
+++ b/layer/package.json
@@ -26,6 +26,7 @@
     "@ai-sdk/gateway": "^3.0.104",
     "@ai-sdk/mcp": "^1.0.36",
     "@ai-sdk/vue": "3.0.168",
+    "@comark/nuxt": "^0.2.0",
     "@iconify-json/lucide": "^1.2.102",
     "@iconify-json/simple-icons": "^1.2.79",
     "@iconify-json/vscode-icons": "^1.2.45",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cfdec61a9..da5bb2d0e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,6 +78,9 @@ importers:
 
   docs:
     dependencies:
+      '@ai-sdk/vue':
+        specifier: 3.0.141
+        version: 3.0.141(vue@3.5.31(typescript@6.0.3))(zod@4.3.6)
       '@nuxt/ui':
         specifier: ^4.7.1
         version: 4.7.1(@internationalized/date@3.12.0)(@internationalized/number@3.6.5)(@nuxt/content@3.13.0(better-sqlite3@12.8.0)(magicast@0.5.2))(@tiptap/extensions@3.22.4(@tiptap/core@3.22.4(@tiptap/pm@3.22.4))(@tiptap/pm@3.22.4))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.7)(y-protocols@1.0.7(yjs@13.6.30))(yjs@13.6.30))(change-case@5.4.4)(db0@0.3.4(better-sqlite3@12.8.0))(embla-carousel@8.6.0)(ioredis@5.10.1)(magicast@0.5.2)(tailwindcss@4.2.4)(typescript@6.0.3)(vite@7.3.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-router@5.0.4(@vue/compiler-sfc@3.5.32)(vue@3.5.31(typescript@6.0.3)))(vue@3.5.31(typescript@6.0.3))(yjs@13.6.30)(zod@4.3.6)
@@ -90,6 +93,9 @@ importers:
       '@vercel/speed-insights':
         specifier: ^2.0.0
         version: 2.0.0(nuxt@4.4.2(@babel/core@7.29.0)(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@parcel/watcher@2.5.6)(@types/node@25.6.0)(@vue/compiler-sfc@3.5.32)(better-sqlite3@12.8.0)(db0@0.3.4(better-sqlite3@12.8.0))(eslint@10.2.1(jiti@2.6.1))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(meow@13.2.0)(optionator@0.9.4)(rollup-plugin-visualizer@7.0.1(rollup@4.60.1))(rollup@4.60.1)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.3)(vite@7.3.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-tsc@3.2.7(typescript@6.0.3))(yaml@2.8.3))(vue@3.5.31(typescript@6.0.3))
+      ai:
+        specifier: 6.0.141
+        version: 6.0.141(zod@4.3.6)
       docus:
         specifier: workspace:*
         version: link:../layer
@@ -114,6 +120,9 @@ importers:
       '@ai-sdk/vue':
         specifier: 3.0.168
         version: 3.0.168(vue@3.5.31(typescript@6.0.3))(zod@4.3.6)
+      '@comark/nuxt':
+        specifier: ^0.2.0
+        version: 0.2.1(@types/markdown-it@14.1.2)(magicast@0.5.2)(markdown-it@14.1.1)(nuxt@4.4.2(@babel/core@7.29.0)(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@parcel/watcher@2.5.6)(@types/node@25.6.0)(@vue/compiler-sfc@3.5.32)(better-sqlite3@12.8.0)(db0@0.3.4(better-sqlite3@12.8.0))(eslint@10.2.1(jiti@2.6.1))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(meow@13.2.0)(optionator@0.9.4)(rollup-plugin-visualizer@7.0.1(rollup@4.60.1))(rollup@4.60.1)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.3)(vite@7.3.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-tsc@3.2.7(typescript@6.0.3))(yaml@2.8.3))(shiki@4.0.2)(vue@3.5.31(typescript@6.0.3))
       '@iconify-json/lucide':
         specifier: ^1.2.102
         version: 1.2.102
@@ -228,12 +237,24 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/gateway@3.0.83':
+    resolution: {integrity: sha512-LvlWujbSdEkTBXBLFtF7GS6riXdHhH0O+DpDrCaNQvXeHmSF2jKsOg7JWXiCgygAHM5cWFAO3JYmZp83DjiuBQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/mcp@1.0.36':
     resolution: {integrity: sha512-THQKwlknp7OU2ViLPfIU7W01XvDRM2eqH+4UULQgP64AopnwI9mGqqJeGIx2l/pxUu9yIDQtW9YtYM8kHm2CQg==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/provider-utils@4.0.21':
+    resolution: {integrity: sha512-MtFUYI1/8mgDvRmaBDjbLJPFFrMG777AvSgyIFQtZHIMzm88R/12vYBBpnk7pfiWLFE1DSZzY4WDYzGbKAcmiw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/provider-utils@4.0.23':
     resolution: {integrity: sha512-z8GlDaCmRSDlqkMF2f4/RFgWxdarvIbyuk+m6WXT1LYgsnGiXRJGTD2Z1+SDl3LqtFuRtGX1aghYvQLoHL/9pg==}
     engines: {node: '>=18'}
@@ -244,6 +265,12 @@ packages:
     resolution: {integrity: sha512-oGMAgGoQdBXbZqNG0Ze56CHjDZ1IDYOwGYxYjO5KLSlz5HiNQ9udIXsPZ61VWaHGZ5XW/jyjmr6t2xz2jGVwbQ==}
     engines: {node: '>=18'}
 
+  '@ai-sdk/vue@3.0.141':
+    resolution: {integrity: sha512-Q5oyZVLvJ7XTHk9NRDJ/mNlvGZbBjB7eezROLBZ1uofaS5Mb4L0McBjFLNX2xYYBmcpKZi8ZqNkNoVmkyb2KzQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      vue: ^3.3.4
+
   '@ai-sdk/vue@3.0.168':
     resolution: {integrity: sha512-HO9s+ufO6h7aDpayAFNkokeLlipUn2zr5UkTojwwy8pdJqh7JYZ56GK6IirHUGzZIr87gbdGIuegQIf5U/XHEQ==}
     engines: {node: '>=18'}
@@ -412,6 +439,32 @@ packages:
   '@colordx/core@5.0.0':
     resolution: {integrity: sha512-twwxohWH8hWWh5ZJ5z6ZNn/JyMrq08K+NzxXKVGTpH+XmMPDAYYzqvszc3OPhYhqqxmfnbCSa/YHcS7pCnChmw==}
 
+  '@comark/markdown-it@0.3.4':
+    resolution: {integrity: sha512-btB+klvBi08qRZGeSLbykfD2ROxhLLQJ4+uDI7FjL560ztlzTtBlGmqe6zP49mW/Yp9y39kSWeRS46iEFpGa0w==}
+    peerDependencies:
+      '@types/markdown-it': '*'
+      markdown-it: ^14.0.0
+
+  '@comark/nuxt@0.2.1':
+    resolution: {integrity: sha512-cluseC8YBC/+toX47LTDXCBEOpk1KAJYiK/Vyc6sZ4Q+ct0fG/q74dT2jVoEsR1es8JNmCUzEFSmnuuI8AOCfA==}
+    peerDependencies:
+      nuxt: ^3.0.0
+
+  '@comark/vue@0.2.1':
+    resolution: {integrity: sha512-MOwPsBBrTN1rKb9P5s3Vrj5SKqdHZ5PU16PgCscZLZFbL1Qt/MoRCHr0gwmA8ijrk6C5dih65Xr5BSNdTITGEA==}
+    peerDependencies:
+      beautiful-mermaid: ^1.1.3
+      katex: ^0.16.33
+      shiki: ^4.0.0
+      vue: ^3.5.0
+    peerDependenciesMeta:
+      beautiful-mermaid:
+        optional: true
+      katex:
+        optional: true
+      shiki:
+        optional: true
+
   '@conventional-changelog/git-client@2.6.0':
     resolution: {integrity: sha512-T+uPDciKf0/ioNNDpMGc8FDsehJClZP0yR3Q5MN6wE/Y/1QZ7F+80OgznnTCOlMEG4AV0LvH2UJi3C/nBnaBUg==}
     engines: {node: '>=18'}
@@ -3232,9 +3285,18 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
@@ -3467,6 +3529,10 @@ packages:
     engines: {node: '>=20'}
     hasBin: true
 
+  '@vercel/oidc@3.1.0':
+    resolution: {integrity: sha512-Fw28YZpRnA3cAHHDlkt7xQHiJ0fcL+NRcIqsocZQUSmbzeIKRpwttJjik5ZGanXP+vlA4SbTg+AbA3bP363l+w==}
+    engines: {node: '>= 20'}
+
   '@vercel/oidc@3.2.0':
     resolution: {integrity: sha512-UycprH3T6n3jH0k44NHMa7pnFHGu/N05MjojYr+Mc6I7obkoLIJujSWwin1pCvdy/eOxrI/l3uDLQsmcrOb4ug==}
     engines: {node: '>= 20'}
@@ -3714,6 +3780,12 @@ packages:
     resolution: {integrity: sha512-QT8i0hCz6C/KQ+KTAbSNwCHDGdmUJl2tp2ZpNlGSWCfhUNVbYG2WLE3MdZGBAgXPV4GAvjGMxo+C1hroyxmZEg==}
     engines: {node: '>= 14'}
 
+  ai@6.0.141:
+    resolution: {integrity: sha512-+GomGQWaId3xN0wcugUW/H7xMMaFkID2PiS7K/Wugj45G3efv0BXhQ3psRZoQVoRbOpdNoUqcK/KTB+FR4h6qg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   ai@6.0.168:
     resolution: {integrity: sha512-2HqCJuO+1V2aV7vfYs5LFEUfxbkGX+5oa54q/gCCTL7KLTdbxcCu5D7TdLA5kwsrs3Szgjah9q6D9tpjHM3hUQ==}
     engines: {node: '>=18'}
@@ -4115,6 +4187,20 @@ packages:
   colortranslator@5.0.0:
     resolution: {integrity: sha512-Z3UPUKasUVDFCDYAjP2fmlVRf1jFHJv1izAmPjiOa0OCIw1W7iC8PZ2GsoDa8uZv+mKyWopxxStT9q05+27h7w==}
 
+  comark@0.2.1:
+    resolution: {integrity: sha512-DBc24O/utr7p0TPqxZwm7fsZPmA+2y3ZOrOaXF9Wk3YhETzz7lzN294epUjGEEXkPOxOs8G8RZOPbLCg3bY0Ag==}
+    peerDependencies:
+      beautiful-mermaid: ^1.1.3
+      katex: ^0.16.33
+      shiki: ^4.0.0
+    peerDependenciesMeta:
+      beautiful-mermaid:
+        optional: true
+      katex:
+        optional: true
+      shiki:
+        optional: true
+
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
@@ -4437,16 +4523,32 @@ packages:
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
+  dom-serializer@3.0.0:
+    resolution: {integrity: sha512-x+9D6nkC8tdXOQUS32egtZpZFLP90+HBZmWjuT920srbJvD/zPgFB9t4k3pEhlw5BQrXStQtRc1Y1zuriXk+Nw==}
+    engines: {node: '>=20.19.0'}
+
   domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
+  domelementtype@3.0.0:
+    resolution: {integrity: sha512-umCQid3jKbDmVjx8jGaW7uUykm4DEUeyV21hPxNMo2nV955DhUThwqyOIDtreepP31hl84X7G5U9ZfsWvIB3Pg==}
+    engines: {node: '>=20.19.0'}
+
   domhandler@5.0.3:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  domhandler@6.0.1:
+    resolution: {integrity: sha512-gYzvtM72ZtxQO0T048kd6HWSbbGCNOUwcnfQ01cqIJ4X2IYKFFHZ5mKvrQETcFXxsRObZulDaKmy//R7TPtsBg==}
+    engines: {node: '>=20.19.0'}
+
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
+  domutils@4.0.2:
+    resolution: {integrity: sha512-qI4JLRKnSzqFqr7hAlS5xQDusBCjKSEG4t4+7aNrIQMHBcsC2TGEhuyABJdYkgSewL57PNLYEiibY2iPKhKpaA==}
+    engines: {node: '>=20.19.0'}
+
   dot-prop@10.1.0:
     resolution: {integrity: sha512-MVUtAugQMOff5RnBy2d9N31iG0lNwg1qAoAOn7pOK5wf94WIaE3My2p3uwTQuvS2AcqchkcR3bHByjaM0mmi7Q==}
     engines: {node: '>=20'}
@@ -4567,6 +4669,10 @@ packages:
     resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
     engines: {node: '>=0.12'}
 
+  entities@8.0.0:
+    resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
+    engines: {node: '>=20.19.0'}
+
   error-stack-parser-es@1.0.5:
     resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
 
@@ -5195,6 +5301,10 @@ packages:
   htmlparser2@10.1.0:
     resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
 
+  htmlparser2@12.0.0:
+    resolution: {integrity: sha512-Tz7u1i95/g2x2jz81+x0FBVhBhY5aRTvD3tXXdFaljuNdzDLJ8UGNRrTcj2cgQvAg3iW/h77Fz15nLW0L0CrZw==}
+    engines: {node: '>=20.19.0'}
+
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
@@ -5616,6 +5726,9 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
   linkifyjs@4.3.2:
     resolution: {integrity: sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==}
 
@@ -5713,6 +5826,13 @@ packages:
   magicast@0.5.2:
     resolution: {integrity: sha512-E3ZJh4J3S9KfwdjZhe2afj6R9lGIN5Pher1pF39UGrXRqq/VDaGVIGN13BjHd2u8B61hArAGOnso7nBOouW3TQ==}
 
+  markdown-exit@1.0.0-beta.9:
+    resolution: {integrity: sha512-5tzrMKMF367amyBly131vm6eGuWRL2DjBqWaFmPzPbLyuxP0XOmyyyroOAIXuBAMF/3kZbbfqOxvW/SotqKqbQ==}
+
+  markdown-it@14.1.1:
+    resolution: {integrity: sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==}
+    hasBin: true
+
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
@@ -5770,6 +5890,9 @@ packages:
   mdn-data@2.27.1:
     resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
 
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
   media-typer@1.1.0:
     resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
     engines: {node: '>= 0.8'}
@@ -6682,6 +6805,10 @@ packages:
   pump@3.0.4:
     resolution: {integrity: sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -7405,6 +7532,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.6.3:
     resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
 
@@ -8026,6 +8156,13 @@ snapshots:
       '@vercel/oidc': 3.2.0
       zod: 4.3.6
 
+  '@ai-sdk/gateway@3.0.83(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.21(zod@4.3.6)
+      '@vercel/oidc': 3.1.0
+      zod: 4.3.6
+
   '@ai-sdk/mcp@1.0.36(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider': 3.0.8
@@ -8033,6 +8170,13 @@ snapshots:
       pkce-challenge: 5.0.1
       zod: 4.3.6
 
+  '@ai-sdk/provider-utils@4.0.21(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.8
+      '@standard-schema/spec': 1.1.0
+      eventsource-parser: 3.0.6
+      zod: 4.3.6
+
   '@ai-sdk/provider-utils@4.0.23(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider': 3.0.8
@@ -8044,6 +8188,15 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
+  '@ai-sdk/vue@3.0.141(vue@3.5.31(typescript@6.0.3))(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider-utils': 4.0.21(zod@4.3.6)
+      ai: 6.0.141(zod@4.3.6)
+      swrv: 1.2.0(vue@3.5.31(typescript@6.0.3))
+      vue: 3.5.31(typescript@6.0.3)
+    transitivePeerDependencies:
+      - zod
+
   '@ai-sdk/vue@3.0.168(vue@3.5.31(typescript@6.0.3))(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
@@ -8257,6 +8410,37 @@ snapshots:
 
   '@colordx/core@5.0.0': {}
 
+  '@comark/markdown-it@0.3.4(@types/markdown-it@14.1.2)(markdown-it@14.1.1)':
+    dependencies:
+      '@types/markdown-it': 14.1.2
+      js-yaml: 4.1.1
+      markdown-it: 14.1.1
+
+  '@comark/nuxt@0.2.1(@types/markdown-it@14.1.2)(magicast@0.5.2)(markdown-it@14.1.1)(nuxt@4.4.2(@babel/core@7.29.0)(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@parcel/watcher@2.5.6)(@types/node@25.6.0)(@vue/compiler-sfc@3.5.32)(better-sqlite3@12.8.0)(db0@0.3.4(better-sqlite3@12.8.0))(eslint@10.2.1(jiti@2.6.1))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(meow@13.2.0)(optionator@0.9.4)(rollup-plugin-visualizer@7.0.1(rollup@4.60.1))(rollup@4.60.1)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.3)(vite@7.3.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-tsc@3.2.7(typescript@6.0.3))(yaml@2.8.3))(shiki@4.0.2)(vue@3.5.31(typescript@6.0.3))':
+    dependencies:
+      '@comark/vue': 0.2.1(@types/markdown-it@14.1.2)(markdown-it@14.1.1)(shiki@4.0.2)(vue@3.5.31(typescript@6.0.3))
+      '@nuxt/kit': 4.4.2(magicast@0.5.2)
+      comark: 0.2.1(@types/markdown-it@14.1.2)(markdown-it@14.1.1)(shiki@4.0.2)
+      nuxt: 4.4.2(@babel/core@7.29.0)(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@parcel/watcher@2.5.6)(@types/node@25.6.0)(@vue/compiler-sfc@3.5.32)(better-sqlite3@12.8.0)(db0@0.3.4(better-sqlite3@12.8.0))(eslint@10.2.1(jiti@2.6.1))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(meow@13.2.0)(optionator@0.9.4)(rollup-plugin-visualizer@7.0.1(rollup@4.60.1))(rollup@4.60.1)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.3)(vite@7.3.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-tsc@3.2.7(typescript@6.0.3))(yaml@2.8.3)
+    transitivePeerDependencies:
+      - '@types/markdown-it'
+      - beautiful-mermaid
+      - katex
+      - magicast
+      - markdown-it
+      - shiki
+      - vue
+
+  '@comark/vue@0.2.1(@types/markdown-it@14.1.2)(markdown-it@14.1.1)(shiki@4.0.2)(vue@3.5.31(typescript@6.0.3))':
+    dependencies:
+      comark: 0.2.1(@types/markdown-it@14.1.2)(markdown-it@14.1.1)(shiki@4.0.2)
+      vue: 3.5.31(typescript@6.0.3)
+    optionalDependencies:
+      shiki: 4.0.2
+    transitivePeerDependencies:
+      - '@types/markdown-it'
+      - markdown-it
+
   '@conventional-changelog/git-client@2.6.0(conventional-commits-filter@5.0.0)(conventional-commits-parser@6.4.0)':
     dependencies:
       '@simple-libs/child-process-utils': 1.0.2
@@ -10995,10 +11179,19 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/linkify-it@5.0.0': {}
+
+  '@types/markdown-it@14.1.2':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/mdurl@2.0.0': {}
+
   '@types/ms@2.1.0': {}
 
   '@types/node@25.6.0':
@@ -11203,6 +11396,8 @@ snapshots:
       - rollup
       - supports-color
 
+  '@vercel/oidc@3.1.0': {}
+
   '@vercel/oidc@3.2.0': {}
 
   '@vercel/speed-insights@2.0.0(nuxt@4.4.2(@babel/core@7.29.0)(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@parcel/watcher@2.5.6)(@types/node@25.6.0)(@vue/compiler-sfc@3.5.32)(better-sqlite3@12.8.0)(db0@0.3.4(better-sqlite3@12.8.0))(eslint@10.2.1(jiti@2.6.1))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.2)(meow@13.2.0)(optionator@0.9.4)(rollup-plugin-visualizer@7.0.1(rollup@4.60.1))(rollup@4.60.1)(terser@5.46.1)(tsx@4.21.0)(typescript@6.0.3)(vite@7.3.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue-tsc@3.2.7(typescript@6.0.3))(yaml@2.8.3))(vue@3.5.31(typescript@6.0.3))':
@@ -11474,6 +11669,14 @@ snapshots:
 
   agent-base@8.0.0: {}
 
+  ai@6.0.141(zod@4.3.6):
+    dependencies:
+      '@ai-sdk/gateway': 3.0.83(zod@4.3.6)
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.21(zod@4.3.6)
+      '@opentelemetry/api': 1.9.0
+      zod: 4.3.6
+
   ai@6.0.168(zod@4.3.6):
     dependencies:
       '@ai-sdk/gateway': 3.0.104(zod@4.3.6)
@@ -11892,6 +12095,19 @@ snapshots:
 
   colortranslator@5.0.0: {}
 
+  comark@0.2.1(@types/markdown-it@14.1.2)(markdown-it@14.1.1)(shiki@4.0.2):
+    dependencies:
+      '@comark/markdown-it': 0.3.4(@types/markdown-it@14.1.2)(markdown-it@14.1.1)
+      entities: 8.0.0
+      htmlparser2: 12.0.0
+      js-yaml: 4.1.1
+      markdown-exit: 1.0.0-beta.9
+    optionalDependencies:
+      shiki: 4.0.2
+    transitivePeerDependencies:
+      - '@types/markdown-it'
+      - markdown-it
+
   comma-separated-tokens@2.0.3: {}
 
   commander@11.1.0: {}
@@ -12186,18 +12402,36 @@ snapshots:
       domhandler: 5.0.3
       entities: 4.5.0
 
+  dom-serializer@3.0.0:
+    dependencies:
+      domelementtype: 3.0.0
+      domhandler: 6.0.1
+      entities: 8.0.0
+
   domelementtype@2.3.0: {}
 
+  domelementtype@3.0.0: {}
+
   domhandler@5.0.3:
     dependencies:
       domelementtype: 2.3.0
 
+  domhandler@6.0.1:
+    dependencies:
+      domelementtype: 3.0.0
+
   domutils@3.2.2:
     dependencies:
       dom-serializer: 2.0.0
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
+  domutils@4.0.2:
+    dependencies:
+      dom-serializer: 3.0.0
+      domelementtype: 3.0.0
+      domhandler: 6.0.1
+
   dot-prop@10.1.0:
     dependencies:
       type-fest: 5.5.0
@@ -12305,6 +12539,8 @@ snapshots:
 
   entities@7.0.1: {}
 
+  entities@8.0.0: {}
+
   error-stack-parser-es@1.0.5: {}
 
   errx@0.1.0: {}
@@ -13178,6 +13414,13 @@ snapshots:
       domutils: 3.2.2
       entities: 7.0.1
 
+  htmlparser2@12.0.0:
+    dependencies:
+      domelementtype: 3.0.0
+      domhandler: 6.0.1
+      domutils: 4.0.2
+      entities: 8.0.0
+
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -13571,6 +13814,10 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   linkifyjs@4.3.2: {}
 
   listhen@1.9.0:
@@ -13677,6 +13924,25 @@ snapshots:
       '@babel/types': 7.29.0
       source-map-js: 1.2.1
 
+  markdown-exit@1.0.0-beta.9:
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+      entities: 7.0.1
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
+  markdown-it@14.1.1:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   markdown-table@3.0.4: {}
 
   marked@17.0.5: {}
@@ -13803,6 +14069,8 @@ snapshots:
 
   mdn-data@2.27.1: {}
 
+  mdurl@2.0.0: {}
+
   media-typer@1.1.0: {}
 
   meow@13.2.0: {}
@@ -15270,6 +15538,8 @@ snapshots:
       end-of-stream: 1.4.5
       once: 1.4.0
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.1: {}
 
   qs@6.15.0:
@@ -16194,6 +16464,8 @@ snapshots:
 
   typescript@6.0.3: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.6.3: {}
 
   uglify-js@3.19.3: