diff --git a/original_Loader.vue b/original_Loader.vue
new file mode 100644
index 0000000..db1ca9e
Binary files /dev/null and b/original_Loader.vue differ
diff --git a/package-lock.json b/package-lock.json
index d2ca1d9..1d12624 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "crypto-js": "^4.2.0",
         "html2canvas": "^1.4.1",
         "less": "^4.2.0",
+        "marked": "^17.0.1",
         "naive-ui": "^2.34.4",
         "ndarray-pixels": "^3.1.0",
         "pinia": "^2.1.6",
@@ -4817,6 +4818,17 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/marked": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.1.tgz",
+      "integrity": "sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
diff --git a/package.json b/package.json
index dd07478..8f24a21 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "crypto-js": "^4.2.0",
     "html2canvas": "^1.4.1",
     "less": "^4.2.0",
+    "marked": "^17.0.1",
     "naive-ui": "^2.34.4",
     "ndarray-pixels": "^3.1.0",
     "pinia": "^2.1.6",
diff --git a/src/App.vue b/src/App.vue
index 5a65cbf..ae8f41e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@ const checkMobile = () => {
   return market.globalParams.isMobile
 }
 const isL2d = () => {
-  return market.route.name === 'visualiser'
+  return market.route.name === 'visualiser' || market.route.name === 'story-gen'
 }
 const isChibiMobile = () => {
   return checkMobile() && market.route.name === 'chibi'
diff --git a/src/components/common/Credits/Table.vue b/src/components/common/Credits/Table.vue
index 0ac160d..57cf0f2 100644
--- a/src/components/common/Credits/Table.vue
+++ b/src/components/common/Credits/Table.vue
@@ -54,4 +54,9 @@ const props = defineProps({
   background: #87ceeb;
   color: black;
 }
+
+.skyblue2 {
+  background: #52f8f2;
+  color: black;
+}
 </style>
diff --git a/src/components/common/Header/routes2Display.ts b/src/components/common/Header/routes2Display.ts
index f1ffac1..a83f143 100644
--- a/src/components/common/Header/routes2Display.ts
+++ b/src/components/common/Header/routes2Display.ts
@@ -24,6 +24,11 @@ export const ROUTES: route2DisplayInterface[] = [
     path: 'gallery',
     text: 'Gallery',
     mobile: true
+  },
+  {
+    path: 'story-gen',
+    text: 'Story/Roleplaying Generator',
+    mobile: true
   }
   // {
   //   path: 'tierlistmaker',
diff --git a/src/components/common/Spine/Loader.vue b/src/components/common/Spine/Loader.vue
index 3a83e38..ca02508 100644
--- a/src/components/common/Spine/Loader.vue
+++ b/src/components/common/Spine/Loader.vue
@@ -2,6 +2,7 @@
   <div
     id="player-container"
     :class="checkMobile() ? 'mobile' : 'computer'"
+    :style="{ visibility: market.live2d.isVisible ? 'visible' : 'hidden', opacity: market.live2d.isVisible ? 1 : 0 }"
   ></div>
 </template>
 
@@ -16,9 +17,18 @@ import spine41 from '@/utils/spine/spine-player4.1'
 
 import { globalParams, messagesEnum } from '@/utils/enum/globalParams'
 import type { AttachmentInterface, AttachmentItemColorInterface } from '@/utils/interfaces/live2d'
+import { animationMappings } from '@/utils/animationMappings'
+
+// Helper for debug logging
+const logDebug = (...args: any[]) => {
+  if (import.meta.env.DEV) {
+    console.log(...args)
+  }
+}
 
 let canvas: HTMLCanvasElement | null = null
 let spineCanvas: any = null
+let currentLoadId = 0 // Track active load requests
 const market = useMarket()
 
 // http://esotericsoftware.com/spine-player#Viewports
@@ -37,7 +47,123 @@ onMounted(() => {
 const SPINE_DEFAULT_MIX = 0.25
 let spinePlayer: any = null
 
+const resetAttachmentColors = (player: any) => {
+  if (!player?.animationState?.data?.skeletonData?.defaultSkin?.attachments) return
+
+  player.animationState.data.skeletonData.defaultSkin.attachments.forEach((a: any[]) => {
+    if (a) {
+      const keys = Object.keys(a)
+      if (keys !== null && keys !== undefined && keys.length > 0) {
+        keys.forEach((k: string) => {
+          a[k as any].color = {
+            r: 1,
+            g: 1,
+            b: 1,
+            a: 1
+          }
+        })
+      }
+    }
+  })
+}
+
+const resolveAnimation = (requested: string, available: string[]): string | null => {
+  logDebug(`[Loader] Resolving animation: '${requested}' against available:`, available)
+
+  if (!requested || requested === 'none') return null
+  if (available.includes(requested)) {
+    logDebug(`[Loader] Found exact match: ${requested}`)
+    return requested
+  }
+
+  const lowerRequested = requested.toLowerCase()
+
+  // Special handling for multi-stage anger (e.g. Chime)
+  const specialMappings = [
+    {
+      target: 'angry',
+      condition: (avail: string[]) => avail.filter((a) => a.toLowerCase().includes('angry')).length > 1,
+      triggers: ['irritated', 'bothered', 'grumpy', 'frustrated', 'annoyed', 'displeased']
+    },
+    {
+      target: 'angry_02',
+      condition: (avail: string[]) => avail.includes('angry_02'),
+      triggers: ['very angry', 'furious', 'rage', 'shouting', 'yelling', 'livid', 'outraged', 'irate', 'mad']
+    },
+    {
+      target: 'angry_03',
+      condition: (avail: string[]) => avail.includes('angry_03'),
+      triggers: ['stern', 'frown', 'slightly angry', 'serious', 'disapproving', 'cold', 'glaring']
+    }
+  ]
+
+  for (const { target, condition, triggers } of specialMappings) {
+    if (condition(available) && triggers.some((t) => lowerRequested.includes(t))) {
+      logDebug(`[Loader] Mapped '${requested}' to '${target}'`)
+      return target
+    }
+  }
+
+  // Direct fuzzy match
+  const directMatch = available.find((a) => a.toLowerCase().includes(lowerRequested))
+  if (directMatch) {
+    logDebug(`[Loader] Found direct fuzzy match: ${directMatch}`)
+    return directMatch
+  }
+
+  // Semantic mapping
+  for (const [targetAnim, triggers] of Object.entries(animationMappings)) {
+    // If requested animation contains the target name OR any of the triggers
+    if (lowerRequested.includes(targetAnim) || triggers.some((t) => lowerRequested.includes(t))) {
+
+      // Try to find the target animation in available
+      // exact match of targetAnim (fuzzy)...
+      let match = available.find((a) => a.toLowerCase().includes(targetAnim))
+      if (match) {
+        logDebug(`[Loader] Found semantic match for ${targetAnim} (base): ${match}`)
+        return match
+      }
+
+      // ...or match any of the triggers in available
+      for (const trigger of triggers) {
+        match = available.find((a) => a.toLowerCase().includes(trigger))
+        if (match) {
+          logDebug(`[Loader] Found semantic match for ${targetAnim} (trigger: ${trigger}): ${match}`)
+          return match
+        }
+      }
+    }
+  }
+
+  console.warn(`[Loader] No match found for animation: ${requested}`)
+  return null
+}
+
+watch(() => market.live2d.current_animation, (newAnim) => {
+  if (spinePlayer && newAnim) {
+    try {
+      const resolvedAnim = resolveAnimation(newAnim, market.live2d.animations)
+
+      if (resolvedAnim) {
+        spinePlayer.animationState.setAnimation(0, resolvedAnim, true)
+      } else {
+        console.warn(`Animation ${newAnim} not found and no fallback discovered.`)
+      }
+    } catch (e) {
+      console.error('Error setting animation:', e)
+    }
+  }
+})
+
 const spineLoader = () => {
+  if (!market.live2d.current_id) {
+    logDebug('[Loader] No current_id set, skipping load.')
+    return
+  }
+
+  currentLoadId++
+  const thisLoadId = currentLoadId
+
   const skelUrl = getPathing('skel')
   const request = new XMLHttpRequest()
 
@@ -45,6 +171,11 @@ const spineLoader = () => {
   request.open('GET', skelUrl, true)
   request.send()
   request.onloadend = () => {
+    if (thisLoadId !== currentLoadId) {
+      logDebug('[Loader] Ignoring stale load request')
+      return
+    }
+
     if (request.status !== 200) {
       console.error('Failed to load skel file:', request.statusText)
       return
@@ -85,6 +216,7 @@ const spineLoader = () => {
         atlasUrl: getPathing('atlas'),
         animation: getDefaultAnimation(),
         skin: market.live2d.getSkin(),
+        showControls: !market.live2d.hideUI && market.route.name !== 'story-gen',
         backgroundColor: '#00000000',
         alpha: true,
         premultipliedAlpha: true,
@@ -95,24 +227,42 @@ const spineLoader = () => {
         defaultMix: SPINE_DEFAULT_MIX,
         success: (player: any) => {
 
-          spineCanvas.animationState.data.skeletonData.defaultSkin.attachments.forEach((a: any[]) => {
-            if (a) {
-              const keys = Object.keys(a)
-              if (keys !== null && keys !== undefined && keys.length > 0) {
-                keys.forEach((k: string) => {
-                  a[k as any].color = {
-                    r: 1,
-                    g: 1,
-                    b: 1,
-                    a: 1
-                  }
-                })
-              }
-            }
-          })
-
           spinePlayer = player
+          resetAttachmentColors(player)
           market.live2d.attachments = player.animationState.data.skeletonData.defaultSkin.attachments
+          market.live2d.animations = player.animationState.data.skeletonData.animations.map((a: any) => a.name)
+
+          const currentAnim = market.live2d.current_animation
+          let resolvedAnim = resolveAnimation(currentAnim, market.live2d.animations)
+
+          if (!resolvedAnim) {
+            // Try default animation from config
+            resolvedAnim = resolveAnimation(player.config.animation, market.live2d.animations)
+          }
+
+          if (!resolvedAnim && market.live2d.animations.length > 0) {
+            // Fallback to first available animation
+            resolvedAnim = market.live2d.animations[0]
+            console.warn(`No valid animation found. Falling back to first available: ${resolvedAnim}`)
+          }
+
+          if (resolvedAnim) {
+            logDebug(`[Loader] Setting initial animation to: ${resolvedAnim} (Requested: ${currentAnim})`)
+            market.live2d.current_animation = resolvedAnim
+
+            // Force set animation with a slight delay to ensure player is ready
+            setTimeout(() => {
+              try {
+                player.animationState.setAnimation(0, resolvedAnim, true)
+                player.play()
+              } catch (e) {
+                console.error('[Loader] Failed to set animation in timeout', e)
+              }
+            }, 100)
+          } else {
+            console.error('[Loader] No animations available for this character.')
+          }
+
           market.live2d.triggerFinishedLoading()
           successfullyLoaded()
         },
@@ -156,7 +306,19 @@ const customSpineLoader = () => {
     defaultMix: SPINE_DEFAULT_MIX,
     success: (player: any) => {
       spinePlayer = player
+      resetAttachmentColors(player)
       market.live2d.attachments = player.animationState.data.skeletonData.defaultSkin.attachments
+      market.live2d.animations = player.animationState.data.skeletonData.animations.map((a: any) => a.name)
+
+      const currentAnim = market.live2d.current_animation
+      const hasAnim = market.live2d.animations.includes(currentAnim)
+
+      if (hasAnim) {
+        player.animationState.setAnimation(0, currentAnim, true)
+      } else {
+        market.live2d.current_animation = player.config.animation
+      }
+
       market.live2d.triggerFinishedLoading()
       successfullyLoaded()
       try {
@@ -307,7 +469,14 @@ watch(() => market.live2d.exportAnimationTimestamp, (newVal, oldVal) => {
 })
 
 watch(() => market.live2d.customLoad, () => {
-  spineCanvas.dispose()
+  if (spineCanvas) {
+    try {
+      spineCanvas.dispose()
+    } catch (e) {
+      console.warn('[Loader] Error disposing spineCanvas for customLoad:', e)
+    }
+    spineCanvas = null
+  }
   market.load.beginLoad()
   customSpineLoader()
   applyDefaultStyle2Canvas()
@@ -315,7 +484,8 @@ watch(() => market.live2d.customLoad, () => {
 
 watch(() => market.live2d.hideUI, () => {
   const controls = document.querySelector('.spine-player-controls') as HTMLElement
-  if (market.live2d.hideUI === false) {
+  if (!controls) return
+  if (market.live2d.hideUI === false && market.route.name !== 'story-gen') {
     controls.style.visibility = 'visible'
   } else {
     controls.style.visibility = 'hidden'
@@ -442,7 +612,14 @@ async function exportAnimationFrames(timestamp: number) {
 
 const loadSpineAfterWatcher = () => {
   if (market.live2d.canLoadSpine) {
-    spineCanvas.dispose()
+    if (spineCanvas) {
+      try {
+        spineCanvas.dispose()
+      } catch (e) {
+        console.warn('[Loader] Error disposing spineCanvas:', e)
+      }
+      spineCanvas = null
+    }
     market.load.beginLoad()
     spineLoader()
     applyDefaultStyle2Canvas()
@@ -531,8 +708,8 @@ document.addEventListener('mousemove', (e) => {
     const newX = e.clientX
     const newY = e.clientY
 
-    const stylel = parseInt(canvas.style.left.replaceAll('px', ''))
-    const stylet = parseInt(canvas.style.top.replaceAll('px', ''))
+    const stylel = parseInt(canvas.style.left.replace(/px/g, ''))
+    const stylet = parseInt(canvas.style.top.replace(/px/g, ''))
 
     if (newX !== oldX) {
       canvas.style.left = stylel + (newX - oldX) + 'px'
@@ -604,20 +781,43 @@ const checkIfAssetCanYap = () => {
     })
   }
   setYappable(yappable)
+
+  if (yappable && market.live2d.isYapping && market.live2d.yapEnabled) {
+    try {
+      spineCanvas.animationState.setAnimation(1, YAP_TRACK, true)
+    } catch (e) {
+      console.warn('Could not add yap track on load', e)
+    }
+  }
 }
 
 const setYappable = (bool: boolean) => {
   market.live2d.canYap = bool
-  market.live2d.isYapping = false
+  if (!bool) {
+    market.live2d.isYapping = false
+  }
 }
 
 watch(() => market.live2d.isYapping, (value) => {
+  if (!spineCanvas || !spineCanvas.animationState) return
+
+  logDebug(`[Loader] isYapping changed to: ${value}`)
 
-  if (value) {
-    spineCanvas.animationState.addAnimation(1, YAP_TRACK)
-    spineCanvas.animationState.setAnimation(1, YAP_TRACK, true)
+  // Only allow yapping if asset supports it AND user enabled it
+  if (value && market.live2d.canYap && market.live2d.yapEnabled) {
+    try {
+      logDebug('[Loader] Setting yap animation')
+      spineCanvas.animationState.setAnimation(1, YAP_TRACK, true)
+    } catch (e) {
+      console.warn('Could not add yap track', e)
+    }
   } else {
-    spineCanvas.animationState.tracks = [spineCanvas.animationState.tracks[0]]
+    try {
+      logDebug('[Loader] Clearing yap animation')
+      spineCanvas.animationState.setEmptyAnimation(1, 0)
+    } catch (e) {
+      console.warn('Could not clear yap track', e)
+    }
   }
 })
 
diff --git a/src/components/views/ChatInterface.vue b/src/components/views/ChatInterface.vue
new file mode 100644
index 0000000..ef961d9
--- /dev/null
+++ b/src/components/views/ChatInterface.vue
@@ -0,0 +1,2930 @@
+<template>
+  <div class="chat-interface">
+    <n-button class="settings-btn" circle @click="showSettings = true">
+      <template #icon>
+        <n-icon><Settings /></n-icon>
+      </template>
+    </n-button>
+
+    <n-button class="help-btn" circle @click="showGuide = true">
+      <template #icon>
+        <n-icon><Help /></n-icon>
+      </template>
+    </n-button>
+
+    <div class="chat-container">
+      <div class="chat-history" ref="chatHistoryRef">
+      <div v-for="(msg, index) in chatHistory" :key="index" :class="['message', msg.role]">
+        <div class="message-content" v-html="renderMarkdown(msg.content)"></div>
+        <div v-if="index === chatHistory.length - 1 && !isLoading && msg.role !== 'system'" class="message-actions">
+          <n-button size="tiny" circle type="error" @click="deleteLastMessage" title="Delete last message">
+            <template #icon><n-icon><TrashCan /></n-icon></template>
+          </n-button>
+        </div>
+      </div>
+      <div v-if="isLoading" class="message assistant">
+      <div class="message-content">...</div>
+      </div>
+      </div>
+
+      <div class="chat-input-area" style="gap: 6px;">
+      <n-input
+      v-model:value="userInput"
+      type="textarea"
+      :placeholder="apiKey ? 'Type your message...' : 'Please enter API Key in settings'"
+      :disabled="!apiKey"
+      :autosize="{ minRows: 1, maxRows: 4 }"
+      @keydown.enter.prevent="handleEnter"
+      />
+      <n-button type="primary" @click="sendMessage" :disabled="isLoading || !userInput.trim() || !apiKey">Send</n-button>
+      <n-button type="error" @click="stopGeneration" v-if="isLoading">Stop</n-button>
+      <n-button type="warning" @click="retryLastMessage" v-if="showRetry && !isLoading">Retry</n-button>
+      <n-button type="success" @click="nextAction" v-if="(waitingForNext || !isLoading) && chatHistory.length > 0">
+      {{ waitingForNext ? 'Next' : 'Continue' }}
+      </n-button>
+      </div>
+
+      <div class="session-controls" style="justify-content: flex-start; gap: 2px;">
+      <n-button
+      type="error"
+      size="small"
+      @click="saveSession"
+      :disabled="chatHistory.length === 0 || isLoading"
+      :style="{ opacity: (chatHistory.length === 0 || isLoading) ? 0.4 : 0.8, transition: 'opacity 0.15s' }"
+      >
+      <template #icon><n-icon><Save /></n-icon></template>
+      Save
+      </n-button>
+      <n-button type="warning" size="small" @click="triggerRestore" :disabled="isLoading" :style="{ marginLeft: '4px', opacity: isLoading ? 0.4 : 0.8, transition: 'opacity 0.15s' }">
+      <template #icon><n-icon><Upload /></n-icon></template>
+      Load
+      </n-button>
+      <n-button
+        type="error"
+        size="small"
+        @click="resetSession"
+        :disabled="isLoading || chatHistory.length === 0"
+        :style="{ marginLeft: '4px', opacity: (chatHistory.length === 0 || isLoading) ? 0.4 : 0.8, transition: 'opacity 0.15s' }"
+      >
+        <template #icon><n-icon><Reset /></n-icon></template>
+        Reset
+      </n-button>
+      </div>
+    </div>
+
+    <n-drawer v-model:show="showSettings" width="300" placement="right">
+      <n-drawer-content title="Settings">
+      <n-form>
+          <n-form-item label="API Provider">
+            <n-select v-model:value="apiProvider" :options="providerOptions" />
+          </n-form-item>
+
+          <n-form-item label="API Key">
+            <n-input v-model:value="apiKey" type="password" show-password-on="click" placeholder="Enter API Key" />
+          </n-form-item>
+          <n-alert type="info" style="margin-bottom: 12px" title="">
+            Your API key is stored locally in your browser's local storage, and it is never sent to Nikke-DB or any other server except the API provider when making requests.
+          </n-alert>
+          <n-alert type="warning" style="margin-bottom: 12px" title="">
+            Users are responsible for any possible cost using this functionality.
+          </n-alert>
+          <n-alert type="warning" style="margin-bottom: 12px" title="">
+            Web search may incur additional costs, even with free models. Please consult your API provider's pricing documentation.
+            <n-popover trigger="hover" placement="bottom" style="max-width: 300px">
+              <template #trigger>
+                <n-icon size="16" style="vertical-align: text-bottom; margin-left: 4px; cursor: help; color: #888">
+                  <Help />
+                </n-icon>
+              </template>
+              <div>
+                <p>In order to ensure a better quality experience, the model will search the Goddess of Victory: NIKKE Wikia to gather certain details regarding the characters that are part of the scene, such as how they address the Commander, their personality, etc.</p>
+                <p>Web search is used on the first turn and when new characters are introduced. The system minimizes searches to reduce costs.</p>
+                <p>It is strongly suggested to check your provider's documentation and model page for information regarding possible costs.</p>
+                <p>It is also recommended to select a limit on your API key to prevent unexpected charges.</p>
+              </div>
+            </n-popover>
+          </n-alert>
+          <n-form-item label="Model">
+            <n-select v-model:value="model" :options="modelOptions" />
+          </n-form-item>
+
+          <n-form-item>
+            <template #label>
+              Mode
+              <n-popover trigger="hover" placement="bottom">
+                <template #trigger>
+                  <n-icon size="16" style="vertical-align: text-bottom; margin-left: 4px; cursor: help; color: #888">
+                    <Help />
+                  </n-icon>
+                </template>
+                <div>
+                  <strong>Roleplay:</strong> Play as the Protagonist (the Commander). Your input in the chatbox is treated as dialogue. Wrap your text in [] for actions and to steer the story.<br><br>
+                  <strong>Story:</strong> Automatically generates a story based on your input. It is strongly recommended to enter the names of the characters you want in the scene and its setting in the first prompt. While the story is being played out, you can send more prompts to steer the narrative in the direction you want, or click 'Continue' to advance.
+                </div>
+              </n-popover>
+            </template>
+            <n-select v-model:value="mode" :options="modeOptions" />
+          </n-form-item>
+          <n-form-item>
+            <template #label>
+              Tokens Usage
+              <n-popover trigger="hover" placement="bottom">
+                <template #trigger>
+                  <n-icon size="16" style="vertical-align: text-bottom; margin-left: 4px; cursor: help; color: #888">
+                    <Help />
+                  </n-icon>
+                </template>
+                <div>
+                  Controls how often the story is summarized to save tokens. Will affect costs and speed.<br><br>Does not affect the Save and Load functionality.<br><br>
+                  <strong>Low:</strong> Summarizes every 10 turns. Cost-efficient.<br>
+                  <strong>Medium:</strong> Summarizes every 30 turns. Balanced.<br>
+                  <strong>High:</strong> Summarizes every 60 turns. Uses more tokens.<br>
+                  <strong>Goddess:</strong> Disables summarization and sends the full history to the model on every turn. This may result in higher costs and slower responses in time, but provides the best context for the AI.
+                </div>
+              </n-popover>
+            </template>
+            <n-select v-model:value="tokenUsage" :options="tokenUsageOptions" />
+          </n-form-item>
+
+          <n-form-item>
+            <template #label>
+              Playback
+              <n-popover trigger="hover" placement="bottom">
+                <template #trigger>
+                  <n-icon size="16" style="vertical-align: text-bottom; margin-left: 4px; cursor: help; color: #888">
+                    <Help />
+                  </n-icon>
+                </template>
+                <div>
+                  <strong>Auto:</strong> Advances automatically.<br>
+                  <strong>Manual:</strong> Click 'Next' to advance.
+                </div>
+              </n-popover>
+            </template>
+            <n-select v-model:value="playbackMode" :options="playbackOptions" />
+          </n-form-item>
+          <n-form-item>
+            <template #label>
+              Yap Mode
+              <n-popover trigger="hover" placement="bottom">
+                <template #trigger>
+                  <n-icon size="16" style="vertical-align: text-bottom; margin-left: 4px; cursor: help; color: #888">
+                    <Help />
+                  </n-icon>
+                </template>
+                <div>
+                  Enables lip-sync animation when characters speak.
+                </div>
+              </n-popover>
+            </template>
+            <n-switch v-model:value="market.live2d.yapEnabled" />
+          </n-form-item>
+
+          <n-form-item>
+            <template #label>
+              Text to Speech (EXPERIMENTAL)
+              <n-popover trigger="hover" placement="bottom">
+                <template #trigger>
+                  <n-icon size="16" style="vertical-align: text-bottom; margin-left: 4px; cursor: help; color: #888">
+                    <Help />
+                  </n-icon>
+                </template>
+                <div>
+                  Enables TTS using a local AllTalk instance.<br>
+                  Requires AllTalk running with XTTSv2.<br><br>
+                  Character voices must be in the AllTalk voices folder (e.g. "anis.wav").
+                </div>
+              </n-popover>
+            </template>
+            <n-switch v-model:value="ttsEnabled" />
+          </n-form-item>
+
+          <n-form-item label="AllTalk Endpoint" v-if="ttsEnabled">
+            <n-input v-model:value="ttsEndpoint" placeholder="http://localhost:7851" />
+          </n-form-item>
+        </n-form>
+      </n-drawer-content>
+    </n-drawer>
+
+    <input
+      type="file"
+      ref="fileInput"
+      style="display: none"
+      accept=".json"
+      @change="handleFileUpload"
+    />
+
+    <n-modal v-model:show="showGuide" :mask-closable="false" preset="card" title="Story/Roleplaying Generator Guide" style="width: 700px; max-width: 95vw;">
+      <div class="guide-content">
+        <p>In this section you can create interactive stories or roleplay scenarios with Nikke characters using your preferred AI LLM.</p>
+        
+        <h3>🔑 Getting Started</h3>
+        <ul>
+          <li><strong>API Key Required:</strong> You need an API key to use this feature. Currently supported providers: <strong>Perplexity</strong>, <strong>Google Gemini</strong>, and <strong>OpenRouter</strong>.</li>
+          <li><strong>Setup:</strong> Click the <strong>Settings (Gear Icon)</strong> to enter your API key and select a model.</li>
+          <li><strong>Privacy:</strong> Your API key is stored locally and sent only to the selected API provider. Stories and keys are never shared with Nikke-DB; check your provider's policy, as some may use data for training.</li>
+          <li><strong>Cost Warning:</strong> Please be aware of your API provider's pricing. Web search (enabled and mandatory for character accuracy) may incur additional costs, even for free models.</li>
+        </ul>
+
+        <h3>🎭 Modes</h3>
+        <ul>
+          <li><strong>Roleplay Mode:</strong> You play as the Commander. The AI controls the Nikkes.
+            <ul>
+              <li>Use <code>[brackets]</code> for actions or descriptions (e.g., <code>[I nod slowly]</code>).</li>
+              <li>Type normally for dialogue (e.g., <code>Good work today, Rapi.</code>).</li>
+            </ul>
+          </li>
+          <li><strong>Story Mode:</strong> You act as the director. The AI generates the narrative.
+            <ul>
+              <li><strong>Tip:</strong> In your first message, clearly state the <strong>Setting</strong> and <strong>Characters</strong> you want in the scene.</li>
+              <li>Example: <code>Scene: The Command Center. Characters: Rapi, Anis, Neon. They are discussing the next mission.</code></li>
+            </ul>
+          </li>
+        </ul>
+
+        <h3>✨ Features</h3>
+        <ul>
+          <li><strong>Yap Mode:</strong> When enabled in Settings, characters on screen will lip-sync to the generated text.</li>
+          <li><strong>Playback Control:</strong>
+            <ul>
+              <li><strong>Auto:</strong> The story advances automatically after each message, while giving you enough time to read through it.</li>
+              <li><strong>Manual:</strong> The story waits for you to click 'Next' or 'Continue'.</li>
+            </ul>
+          </li>
+          <li>If you don't like the last message, you can delete it by clicking the trash can icon on the left side of the message bubble. You can then write something different, or press <strong>Continue</strong>.</li>
+          <li>If you do not want to perform any action, simply press <strong>Continue</strong>.</li>
+          <li>You can <strong>Save</strong> and <strong>Load</strong> your session at any time.</li>
+        </ul>
+
+        <h3>💡 Tips</h3>
+        <ul>
+          <li>If you receive an error message, use the <strong>Retry</strong> button.</li>
+          <li>The quality of the session highly depends on the model that you have selected.</li>
+          <li>Be patient. Some providers/models may take a while to respond to the first prompt in particular.</li>
+          <li>Check your API usage regularly on your provider's dashboard, and set limits to prevent from overspending or being charged while using a free model.</li>
+        </ul>
+        
+        <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
+          <n-button type="primary" @click="closeGuide">Got it!</n-button>
+        </div>
+      </div>
+    </n-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
+import { useMarket } from '@/stores/market'
+import { Settings, Help, Save, Upload, TrashCan, Reset } from '@vicons/carbon'
+import { NIcon, NButton, NInput, NDrawer, NDrawerContent, NForm, NFormItem, NSelect, NSwitch, NPopover, NAlert, NModal } from 'naive-ui'
+import l2d from '@/utils/json/l2d.json'
+import characterHonorifics from '@/utils/json/honorifics.json'
+import { marked } from 'marked'
+import { animationMappings } from '@/utils/animationMappings'
+
+// Helper to get honorific with fallback to "Commander"
+const getHonorific = (characterName: string): string => {
+  return (characterHonorifics as Record<string, string>)[characterName] || 'Commander'
+}
+
+const market = useMarket()
+
+// Helper for debug logging
+const logDebug = (...args: any[]) => {
+  if (import.meta.env.DEV) {
+    console.log(...args)
+  }
+}
+
+// State
+const showSettings = ref(false)
+const showGuide = ref(false)
+const apiProvider = ref('perplexity')
+const apiKey = ref(localStorage.getItem('nikke_api_key') || '')
+const model = ref('sonar')
+const mode = ref('roleplay')
+const playbackMode = ref('auto')
+const ttsEnabled = ref(false)
+const ttsEndpoint = ref('http://localhost:7851')
+const userInput = ref('')
+const isLoading = ref(false)
+const isStopped = ref(false)
+const waitingForNext = ref(false)
+const showRetry = ref(false)
+const lastPrompt = ref('')
+const storySummary = ref('')
+const lastSummarizedIndex = ref(0)
+let nextActionResolver: (() => void) | null = null
+let yapTimeoutId: any = null
+const chatHistory = ref<{ role: string, content: string }[]>([])
+const characterProfiles = ref<Record<string, any>>({})
+const chatHistoryRef = ref<HTMLElement | null>(null)
+const fileInput = ref<HTMLInputElement | null>(null)
+const openRouterModels = ref<any[]>([])
+const isRestoring = ref(false)
+const tokenUsage = ref('medium')
+const needsJsonReminder = ref(false)
+const modelsWithoutJsonSupport = new Set<string>() // Track models that don't support json_object
+
+// Models/providers that have native web search in OpenRouter
+const NATIVE_SEARCH_PREFIXES = ['openai/', 'anthropic/', 'perplexity/', 'x-ai/']
+const hasNativeSearch = (modelId: string) => NATIVE_SEARCH_PREFIXES.some(prefix => modelId.startsWith(prefix))
+
+// Options
+const providerOptions = [
+  { label: 'Perplexity', value: 'perplexity' },
+  { label: 'Gemini', value: 'gemini' },
+  { label: 'OpenRouter', value: 'openrouter' }
+]
+
+const modelOptions = computed(() => {
+  if (apiProvider.value === 'perplexity') {
+    return [
+      { label: 'Sonar', value: 'sonar' },
+      { label: 'Sonar Pro', value: 'sonar-pro' },
+    ]
+  } else if (apiProvider.value === 'gemini') {
+    return [
+      { label: 'Gemini 2.5 Flash', value: 'gemini-2.5-flash' },
+      { label: 'Gemini 2.5 Pro', value: 'gemini-2.5-pro' },
+    ]
+  } else if (apiProvider.value === 'openrouter') {
+    return openRouterModels.value
+  }
+  return []
+})
+
+const modeOptions = [
+  { label: 'Roleplay Mode', value: 'roleplay' },
+  { label: 'Story Mode', value: 'story' }
+]
+
+const playbackOptions = [
+  { label: 'Auto', value: 'auto' },
+  { label: 'Manual', value: 'manual' }
+]
+
+const tokenUsageOptions = [
+  { label: 'Low (10 turns)', value: 'low' },
+  { label: 'Medium (30 turns)', value: 'medium' },
+  { label: 'High (60 turns)', value: 'high' },
+  { label: 'Goddess', value: 'goddess' }
+]
+
+// Watchers
+watch(apiKey, (newVal) => {
+  localStorage.setItem('nikke_api_key', newVal)
+})
+
+watch(mode, (newVal) => {
+  localStorage.setItem('nikke_mode', newVal)
+})
+
+watch(playbackMode, (newVal) => {
+  localStorage.setItem('nikke_playback_mode', newVal)
+})
+
+watch(ttsEnabled, (newVal) => {
+  localStorage.setItem('nikke_tts_enabled', String(newVal))
+})
+
+watch(ttsEndpoint, (newVal) => {
+  localStorage.setItem('nikke_tts_endpoint', newVal)
+})
+
+watch(model, (newVal) => {
+  if (newVal) localStorage.setItem('nikke_model', newVal)
+})
+
+watch(() => market.live2d.yapEnabled, (newVal) => {
+  localStorage.setItem('nikke_yap_enabled', String(newVal))
+})
+
+watch(apiProvider, async (newVal) => {
+  localStorage.setItem('nikke_api_provider', newVal)
+  
+  if (isRestoring.value) return
+
+  // Reset model when provider changes
+  if (apiProvider.value === 'perplexity') {
+    model.value = 'sonar'
+  } else if (apiProvider.value === 'gemini') {
+    model.value = 'gemini-2.5-flash'
+  } else if (apiProvider.value === 'openrouter') {
+    model.value = ''
+    await fetchOpenRouterModels()
+    if (openRouterModels.value.length > 0) {
+      model.value = openRouterModels.value[0].value
+    }
+  }
+})
+
+watch(tokenUsage, (newVal) => {
+  localStorage.setItem('nikke_token_usage', newVal)
+})
+
+const fetchOpenRouterModels = async () => {
+  try {
+    const response = await fetch('https://openrouter.ai/api/v1/models')
+    const data = await response.json()
+    let models = data.data
+    
+    openRouterModels.value = models.map((m: any) => {
+      const isFree = m.pricing.prompt === '0' && m.pricing.completion === '0'
+
+      return {
+        label: (isFree ? '[FREE] ' : '') + m.name,
+        value: m.id,
+        isFree: isFree,
+        style: isFree ? { color: '#18a058', fontWeight: 'bold' } : {}
+      }
+    }).sort((a: any, b: any) => {
+      if (a.isFree && !b.isFree) return -1
+      if (!a.isFree && b.isFree) return 1
+
+      return a.label.localeCompare(b.label)
+    })
+    
+  } catch (error) {
+    console.error('Failed to fetch OpenRouter models:', error)
+  }
+}
+
+const checkGuide = () => {
+  const seen = localStorage.getItem('chat-guide-seen')
+  if (!seen) {
+    showGuide.value = true
+  }
+}
+
+const closeGuide = () => {
+  showGuide.value = false
+  localStorage.setItem('chat-guide-seen', 'true')
+}
+
+const initializeSettings = async () => {
+  isRestoring.value = true
+  
+  // Load simple settings
+  const savedMode = localStorage.getItem('nikke_mode')
+  if (savedMode && modeOptions.some((m) => m.value === savedMode)) mode.value = savedMode
+  
+  const savedPlayback = localStorage.getItem('nikke_playback_mode')
+  if (savedPlayback && playbackOptions.some((p) => p.value === savedPlayback)) playbackMode.value = savedPlayback
+  
+  const savedYap = localStorage.getItem('nikke_yap_enabled')
+  if (savedYap !== null) market.live2d.yapEnabled = (savedYap === 'true')
+
+  const savedTts = localStorage.getItem('nikke_tts_enabled')
+  if (savedTts !== null) ttsEnabled.value = (savedTts === 'true')
+
+  const savedTtsEndpoint = localStorage.getItem('nikke_tts_endpoint')
+  if (savedTtsEndpoint) ttsEndpoint.value = savedTtsEndpoint
+
+  const savedTokenUsage = localStorage.getItem('nikke_token_usage')
+  if (savedTokenUsage && tokenUsageOptions.some((t) => t.value === savedTokenUsage)) tokenUsage.value = savedTokenUsage
+
+  // Load Provider and Model
+  const savedProvider = localStorage.getItem('nikke_api_provider')
+  const savedModel = localStorage.getItem('nikke_model')
+  
+  if (savedProvider && providerOptions.some((p) => p.value === savedProvider)) {
+    apiProvider.value = savedProvider
+    
+    if (savedProvider === 'openrouter') {
+      await fetchOpenRouterModels()
+    }
+    
+    // Validate and set model
+    let validModels: string[] = []
+
+    if (savedProvider === 'perplexity') {
+      validModels = ['sonar', 'sonar-pro']
+    } else if (savedProvider === 'gemini') {
+      validModels = ['gemini-2.5-flash', 'gemini-2.5-pro']
+    } else if (savedProvider === 'openrouter') {
+      validModels = openRouterModels.value.map((m) => m.value)
+    }
+    
+    if (savedModel && validModels.includes(savedModel)) {
+      model.value = savedModel
+    } else {
+      // Fallback to default if saved model is invalid
+      if (savedProvider === 'perplexity') model.value = 'sonar'
+      else if (savedProvider === 'gemini') model.value = 'gemini-2.5-flash'
+      else if (savedProvider === 'openrouter' && openRouterModels.value.length > 0) model.value = openRouterModels.value[0].value
+      
+      if (savedModel) {
+        console.warn(`Saved model '${savedModel}' is invalid or unavailable. Using default.`)
+      }
+    }
+  }
+  
+  isRestoring.value = false
+}
+
+const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+  if (chatHistory.value.length > 0) {
+    e.preventDefault()
+    e.returnValue = ''
+  }
+}
+
+onMounted(() => {
+  checkGuide()
+  initializeSettings()
+  window.addEventListener('beforeunload', handleBeforeUnload)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('beforeunload', handleBeforeUnload)
+})
+
+onBeforeRouteLeave((to, from) => {
+  if (chatHistory.value.length > 0) {
+    const confirmed = window.confirm('Are you sure you want to leave? All unsaved progress will be lost.')
+    if (!confirmed) {
+      return false
+    }
+  }
+})
+
+// Methods
+const deleteLastMessage = () => {
+  if (chatHistory.value.length > 0) {
+    chatHistory.value.pop()
+  }
+}
+
+const saveSession = () => {
+  const sessionData = {
+    chatHistory: chatHistory.value,
+    characterProfiles: characterProfiles.value,
+    storySummary: storySummary.value,
+    lastSummarizedIndex: lastSummarizedIndex.value,
+    mode: mode.value,
+    timestamp: new Date().toISOString(),
+    settings: {
+      apiProvider: apiProvider.value,
+      model: model.value,
+      playbackMode: playbackMode.value,
+      yapEnabled: market.live2d.yapEnabled,
+      ttsEnabled: ttsEnabled.value,
+      ttsEndpoint: ttsEndpoint.value,
+      tokenUsage: tokenUsage.value
+    }
+  }
+  
+  const blob = new Blob([JSON.stringify(sessionData, null, 2)], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  const now = new Date()
+  const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}_${String(now.getHours()).padStart(2, '0')}-${String(now.getMinutes()).padStart(2, '0')}`
+  a.download = `nikke-session-${timestamp}.json`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+const triggerRestore = () => {
+  fileInput.value?.click()
+}
+
+const handleFileUpload = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files.length > 0) {
+    const file = target.files[0]
+    const reader = new FileReader()
+    reader.onload = async (e) => {
+      try {
+        const content = e.target?.result as string
+        const data = JSON.parse(content)
+        
+        isRestoring.value = true
+
+        if (data.chatHistory && Array.isArray(data.chatHistory)) {
+          chatHistory.value = data.chatHistory
+        }
+        if (data.characterProfiles) {
+          characterProfiles.value = data.characterProfiles
+        }
+        if (data.storySummary) {
+          storySummary.value = data.storySummary
+        }
+        if (data.lastSummarizedIndex !== undefined) {
+          lastSummarizedIndex.value = data.lastSummarizedIndex
+        }
+        if (data.mode) {
+          mode.value = data.mode
+        }
+        
+        // Restore Settings
+        if (data.settings) {
+          // Restore simple settings
+          if (data.settings.playbackMode && playbackOptions.some((p) => p.value === data.settings.playbackMode)) {
+            playbackMode.value = data.settings.playbackMode
+          }
+          
+          if (typeof data.settings.yapEnabled === 'boolean') {
+            market.live2d.yapEnabled = data.settings.yapEnabled
+          }
+
+          if (typeof data.settings.ttsEnabled === 'boolean') {
+            ttsEnabled.value = data.settings.ttsEnabled
+          }
+          
+          if (data.settings.ttsEndpoint) {
+            ttsEndpoint.value = data.settings.ttsEndpoint
+          }
+
+          if (data.settings.tokenUsage && tokenUsageOptions.some((t) => t.value === data.settings.tokenUsage)) {
+            tokenUsage.value = data.settings.tokenUsage
+          }
+          
+          // Restore Provider and Model
+          const savedProvider = data.settings.apiProvider
+          const savedModel = data.settings.model
+          
+          if (savedProvider && providerOptions.some((p) => p.value === savedProvider)) {
+            apiProvider.value = savedProvider
+            
+            if (savedProvider === 'openrouter') {
+              await fetchOpenRouterModels()
+            }
+            
+            // Validate and set model
+            let validModels: string[] = []
+            if (savedProvider === 'perplexity') {
+              validModels = ['sonar', 'sonar-pro']
+            } else if (savedProvider === 'gemini') {
+              validModels = ['gemini-2.5-flash', 'gemini-2.5-pro']
+            } else if (savedProvider === 'openrouter') {
+              validModels = openRouterModels.value.map((m) => m.value)
+            }
+            
+            if (savedModel && validModels.includes(savedModel)) {
+              model.value = savedModel
+            } else {
+              // Fallback to default if saved model is invalid
+              if (savedProvider === 'perplexity') model.value = 'sonar'
+              else if (savedProvider === 'gemini') model.value = 'gemini-2.5-flash'
+              else if (savedProvider === 'openrouter' && openRouterModels.value.length > 0) model.value = openRouterModels.value[0].value
+              
+              if (savedModel) {
+                chatHistory.value.push({ role: 'system', content: `Warning: Saved model '${savedModel}' is invalid or unavailable. Using default.` })
+              }
+            }
+          }
+        }
+        
+        isRestoring.value = false
+
+        // Clear input value so same file can be selected again if needed
+        target.value = ''
+        
+        // Close settings
+        showSettings.value = false
+        
+        // Scroll to bottom
+        scrollToBottom()
+        
+        // Add system message to confirm restore
+        chatHistory.value.push({ role: 'system', content: 'Session restored successfully.' })
+        
+      } catch (error) {
+        console.error('Failed to parse session file:', error)
+        chatHistory.value.push({ role: 'system', content: 'Error: Failed to restore session. Invalid JSON file.' })
+        isRestoring.value = false
+      }
+    }
+    reader.readAsText(file)
+  }
+}
+
+const renderMarkdown = (text: string) => {
+  return marked(text)
+}
+
+const handleEnter = (e: KeyboardEvent) => {
+  if (!e.shiftKey) {
+    sendMessage()
+  }
+}
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (chatHistoryRef.value) {
+      chatHistoryRef.value.scrollTop = chatHistoryRef.value.scrollHeight
+    }
+  })
+}
+
+const sendMessage = async () => {
+  if (!userInput.value.trim() || isLoading.value) return
+
+  const text = userInput.value
+  userInput.value = ''
+  chatHistory.value.push({ role: 'user', content: text })
+  scrollToBottom()
+  isLoading.value = true
+  isStopped.value = false
+  showRetry.value = false
+  lastPrompt.value = text
+
+  let attempts = 0
+  const maxAttempts = 3
+  let success = false
+
+  while (attempts < maxAttempts && !success && !isStopped.value) {
+    attempts++
+    try {
+      const response = await callAI(attempts > 1)
+      if (!isStopped.value) {
+        await processAIResponse(response)
+        success = true
+      }
+    } catch (error: any) {
+      if (error.message === 'JSON_PARSE_ERROR' && attempts < maxAttempts) {
+        console.warn(`JSON parse error, retrying (${attempts}/${maxAttempts})...`)
+        continue
+      }
+
+      console.error('AI Error:', error)
+      let errorMessage = 'Error: Failed to get response from AI.'
+      showRetry.value = true
+
+      if (error.message === 'RATE_LIMITED') {
+        errorMessage = 'Error 429: Model is temporarily rate-limited. Please wait a moment and click Retry.'
+      } else if (error.message && error.message.includes('503')) {
+        errorMessage = 'Error 503: Model Overloaded. Please try again.'
+      } else if (error.message === 'JSON_PARSE_ERROR') {
+        errorMessage = 'Error: Failed to parse AI response after multiple attempts. Please try again.'
+      }
+      chatHistory.value.push({ role: 'system', content: errorMessage })
+      break
+    }
+  }
+
+  isLoading.value = false
+  scrollToBottom()
+}
+
+const retryLastMessage = async () => {
+  // Remove the last system error message
+  if (chatHistory.value.length > 0 && chatHistory.value[chatHistory.value.length - 1].role === 'system') {
+    chatHistory.value.pop()
+  }
+
+  scrollToBottom()
+  isLoading.value = true
+  isStopped.value = false
+  showRetry.value = false
+
+  let attempts = 0
+  const maxAttempts = 3
+  let success = false
+
+  while (attempts < maxAttempts && !success && !isStopped.value) {
+    attempts++
+    try {
+      const response = await callAI(attempts > 1)
+      if (!isStopped.value) {
+        await processAIResponse(response)
+        success = true
+      }
+    } catch (error: any) {
+      if (error.message === 'JSON_PARSE_ERROR' && attempts < maxAttempts) {
+        console.warn(`JSON parse error, retrying (${attempts}/${maxAttempts})...`)
+        continue
+      }
+
+      console.error('AI Error:', error)
+      let errorMessage = 'Error: Failed to get response from AI.'
+      showRetry.value = true
+
+      if (error.message === 'RATE_LIMITED') {
+        errorMessage = 'Error 429: Model is temporarily rate-limited. Please wait a moment and click Retry.'
+      } else if (error.message && error.message.includes('503')) {
+        errorMessage = 'Error 503: Model Overloaded. Please try again.'
+      } else if (error.message === 'JSON_PARSE_ERROR') {
+        errorMessage = 'Error: Failed to parse AI response after multiple attempts. Please try again.'
+      }
+      chatHistory.value.push({ role: 'system', content: errorMessage })
+      break
+    }
+  }
+
+  isLoading.value = false
+  scrollToBottom()
+}
+
+const stopGeneration = () => {
+  isStopped.value = true
+  isLoading.value = false
+
+  // If we are waiting for user input (Manual mode), cancel that wait so the loop can exit
+  if (waitingForNext.value && nextActionResolver) {
+    nextActionResolver()
+    nextActionResolver = null
+    waitingForNext.value = false
+  }
+}
+
+const nextAction = () => {
+  if (nextActionResolver) {
+    nextActionResolver()
+    nextActionResolver = null
+    waitingForNext.value = false
+  } else if (!isLoading.value) {
+    // If no action is pending, request continuation
+    continueStory()
+  }
+}
+
+const continueStory = async () => {
+  if (isLoading.value) return
+  
+  const text = mode.value === 'story' 
+    ? 'Continue the story with multiple dialogue exchanges and/or actions. Do not repeat previous events, dialogue or actions.' 
+    : '[Continue the roleplay with the characters responding and reacting, or the action moving forward. Do not repeat the last actions or dialogue.]'
+  // Don't add "Continue" to chat history to keep it clean, or add it as a system note?
+  // Let's add it as a user prompt but maybe hidden? Or just standard user prompt.
+  // For now, standard user prompt is fine to show intent.
+  chatHistory.value.push({ role: 'user', content: text })
+  scrollToBottom()
+  isLoading.value = true
+  isStopped.value = false
+  showRetry.value = false
+  lastPrompt.value = text
+
+  let attempts = 0
+  const maxAttempts = 3
+  let success = false
+
+  while (attempts < maxAttempts && !success && !isStopped.value) {
+    attempts++
+    try {
+      const response = await callAI(attempts > 1)
+      if (!isStopped.value) {
+        await processAIResponse(response)
+        success = true
+      }
+    } catch (error: any) {
+      if (error.message === 'JSON_PARSE_ERROR' && attempts < maxAttempts) {
+        console.warn(`JSON parse error, retrying (${attempts}/${maxAttempts})...`)
+        continue
+      }
+
+      console.error('AI Error:', error)
+      let errorMessage = 'Error: Failed to get response from AI.'
+      showRetry.value = true
+
+      if (error.message && error.message.includes('503')) {
+        errorMessage = 'Error 503: Model Overloaded. Please try again.'
+      } else if (error.message === 'JSON_PARSE_ERROR') {
+        errorMessage = 'Error: Failed to parse AI response after multiple attempts. Please try again.'
+      }
+      chatHistory.value.push({ role: 'system', content: errorMessage })
+      break
+    }
+  }
+
+  isLoading.value = false
+  scrollToBottom()
+}
+
+const callAI = async (isRetry: boolean = false): Promise<string> => {
+  // Determine if this is the first turn (web search needed for initial characters)
+  const isFirstTurn = chatHistory.value.filter((m) => m.role === 'user').length <= 1
+  const enableWebSearch = isFirstTurn
+  
+  logDebug(`[callAI] isFirstTurn: ${isFirstTurn}, enableWebSearch: ${enableWebSearch}`)
+  
+  const systemPrompt = generateSystemPrompt(enableWebSearch)
+  let retryInstruction = isRetry ? '\n\nSYSTEM ALERT: Your previous response was invalid JSON. You MUST output ONLY a JSON array. Do not use Markdown blocks. Do not add conversational text.' : ''
+  
+  if (needsJsonReminder.value) {
+      retryInstruction += `\n\nSYSTEM REMINDER: Please ensure your response is a valid JSON array. Do not include any conversational text outside the JSON.
+Example of correct format:
+[
+  { "text": "Neon waves excitedly.", "character": "c010", "animation": "happy", "speaking": false },
+  { "text": "Commander!", "character": "c010", "animation": "happy", "speaking": true },
+  { "text": "Anis sighs.", "character": "c011", "animation": "idle", "speaking": false },
+  { "text": "Not again...", "character": "c011", "animation": "sigh", "speaking": true }
+]`
+      needsJsonReminder.value = false
+  }
+  
+  // Add current context
+  const filteredAnimations = market.live2d.animations.filter((a) => 
+    a !== 'talk_start' && 
+    a !== 'talk_end' && 
+    a !== 'expression_0' && 
+    a !== 'action'
+  )
+  let contextMsg = `Current Character: ${market.live2d.current_id}. Available Animations: ${JSON.stringify(filteredAnimations)}`
+
+  // Optimization: Limit history to prevent token overflow
+  // Tumbling window: Summarize every X turns
+  
+  let historyLimit = 30
+  if (tokenUsage.value === 'low') historyLimit = 10
+  else if (tokenUsage.value === 'medium') historyLimit = 30
+  else if (tokenUsage.value === 'high') historyLimit = 60
+  else if (tokenUsage.value === 'goddess') historyLimit = 99999 // Effectively infinite
+
+  if (tokenUsage.value !== 'goddess') {
+     let userMsgCount = 0
+     // Count user messages in the unsummarized portion, excluding the current pending prompt
+     for (let i = lastSummarizedIndex.value; i < chatHistory.value.length - 1; i++) {
+       if (chatHistory.value[i].role === 'user') {
+         userMsgCount++
+       }
+     }
+
+     if (userMsgCount >= historyLimit) {
+       const endIndex = chatHistory.value.length - 1
+       const chunkToSummarize = chatHistory.value.slice(lastSummarizedIndex.value, endIndex)
+       logDebug(`[callAI] Summarizing ${chunkToSummarize.length} messages (Tumbling Window)...`)
+       await summarizeChunk(chunkToSummarize)
+       lastSummarizedIndex.value = endIndex
+     }
+  }
+
+  if (storySummary.value && tokenUsage.value !== 'goddess') {
+    contextMsg += `\n\nPREVIOUS STORY SUMMARY:\n${storySummary.value}`
+  }
+
+  let historyToSend = chatHistory.value
+  if (tokenUsage.value !== 'goddess') {
+    historyToSend = chatHistory.value.slice(lastSummarizedIndex.value)
+  }
+
+  // Build hidden honorifics instruction for first turn only
+  // This is injected into the first user message but NOT saved to history
+  const buildHonorificsReminder = (): string => {
+    if (!isFirstTurn) return ''
+    
+    // Get relevant honorifics from the characterHonorifics JSON
+    const knownNames = Object.keys(characterProfiles.value)
+    if (knownNames.length === 0) return ''
+    
+    const honorificExamples: string[] = []
+    for (const name of knownNames) {
+      const honorific = (characterHonorifics as Record<string, string>)[name]
+      if (honorific && honorific !== 'Commander') {
+        honorificExamples.push(`${name} calls the Commander "${honorific}"`)
+      }
+    }
+    
+    if (honorificExamples.length === 0) return ''
+    
+    return `\n\n[IMPORTANT REMINDER - HONORIFICS USAGE]
+The CHARACTER HONORIFICS table shows how each character addresses the COMMANDER ONLY.
+${honorificExamples.join('. ')}.
+These honorifics are EXCLUSIVE to the Commander - characters do NOT use these terms for other NIKKEs.
+For example, if Chime's honorific is "Rapscallion", she calls ONLY the Commander that, not other characters.
+When characters address each other, use their relationship-specific names from the KNOWN CHARACTER PROFILES.`
+  }
+
+  // Helper to inject honorifics reminder into the last user message (first turn only)
+  const injectHonorificsReminder = (messages: any[]): any[] => {
+    const reminder = buildHonorificsReminder()
+    if (!reminder) return messages
+    
+    // Find the last user message and append the reminder
+    const result = [...messages]
+    for (let i = result.length - 1; i >= 0; i--) {
+      if (result[i].role === 'user') {
+        result[i] = { ...result[i], content: result[i].content + reminder }
+        break
+      }
+    }
+    return result
+  }
+
+  let response: string
+
+  if (apiProvider.value === 'perplexity') {
+    // Perplexity: Merge context into system prompt
+    const fullSystemPrompt = `${systemPrompt}\n\n${contextMsg}${retryInstruction}`
+    
+    // Sanitize history for Perplexity (Strict alternation required)
+    // 1. Filter out system messages from history (we provide our own system prompt)
+    // 2. Merge consecutive messages of the same role
+    const rawHistory = historyToSend.filter((m) => m.role !== 'system')
+    const sanitizedHistory: any[] = []
+    
+    if (rawHistory.length > 0) {
+      let currentMsg = { role: rawHistory[0].role, content: rawHistory[0].content }
+      
+      for (let i = 1; i < rawHistory.length; i++) {
+        const msg = rawHistory[i]
+        if (msg.role === currentMsg.role) {
+          currentMsg.content += '\n\n' + msg.content
+        } else {
+          sanitizedHistory.push(currentMsg)
+          currentMsg = { role: msg.role, content: msg.content }
+        }
+      }
+      sanitizedHistory.push(currentMsg)
+    }
+
+    let messages = [
+      { role: 'system', content: fullSystemPrompt },
+      ...sanitizedHistory
+    ]
+    // Inject honorifics reminder for first turn (not saved to history)
+    messages = injectHonorificsReminder(messages)
+    logDebug('Sending to Perplexity:', messages)
+    response = await callPerplexity(messages, enableWebSearch)
+  } else if (apiProvider.value === 'gemini') {
+    // Gemini: Original behavior (context as separate message at end)
+    let messages = [
+      { role: 'system', content: systemPrompt },
+      ...historyToSend.map((m) => ({ role: m.role, content: m.content }))
+    ]
+    messages.push({
+      role: 'system',
+      content: contextMsg + retryInstruction
+    })
+    // Inject honorifics reminder for first turn (not saved to history)
+    messages = injectHonorificsReminder(messages)
+    logDebug('Sending to Gemini:', messages)
+    response = await callGemini(messages, enableWebSearch)
+  } else if (apiProvider.value === 'openrouter') {
+    // OpenRouter: Use standard OpenAI format with context in system prompt
+    const fullSystemPrompt = `${systemPrompt}\n\n${contextMsg}${retryInstruction}`
+    
+    let messages = [
+      { role: 'system', content: fullSystemPrompt },
+      ...historyToSend.map((m) => ({ role: m.role, content: m.content }))
+    ]
+    // Inject honorifics reminder for first turn (not saved to history)
+    messages = injectHonorificsReminder(messages)
+    logDebug('Sending to OpenRouter:', messages)
+    response = await callOpenRouter(messages, enableWebSearch)
+  } else {
+    throw new Error('Unknown API provider')
+  }
+
+  // Check if the model needs to search for new characters
+  const searchRequest = await checkForSearchRequest(response)
+  if (searchRequest && searchRequest.length > 0) {
+    logDebug('[callAI] Model requested search for characters:', searchRequest)
+    // Perform search for unknown characters
+    await searchForCharacters(searchRequest)
+    // Re-call the AI with updated character profiles (search disabled this time)
+    return await callAIWithoutSearch(isRetry)
+  }
+
+  return response
+}
+
+// Separate function to call AI without search (after character lookup)
+const callAIWithoutSearch = async (isRetry: boolean = false): Promise<string> => {
+  const systemPrompt = generateSystemPrompt(false)
+  let retryInstruction = isRetry ? '\n\nSYSTEM ALERT: Your previous response was invalid JSON. You MUST output ONLY a JSON array. Do not use Markdown blocks. Do not add conversational text.' : ''
+  
+  if (needsJsonReminder.value) {
+      retryInstruction += `\n\nSYSTEM REMINDER: Please ensure your response is a valid JSON array. Do not include any conversational text outside the JSON.
+Example of correct format:
+[
+  { "text": "Neon waves excitedly.", "character": "c010", "animation": "delight", "speaking": false },
+  { "text": "Commander!", "character": "c010", "animation": "delight", "speaking": true },
+  { "text": "Anis sighs.", "character": "c011", "animation": "no", "speaking": false },
+  { "text": "Not again...", "character": "c011", "animation": "no", "speaking": true }
+]`
+      needsJsonReminder.value = false
+  }
+  
+  const filteredAnimations = market.live2d.animations.filter((a) => 
+    a !== 'talk_start' && 
+    a !== 'talk_end' && 
+    a !== 'expression_0' && 
+    a !== 'action'
+  )
+  let contextMsg = `Current Character: ${market.live2d.current_id}. Available Animations: ${JSON.stringify(filteredAnimations)}`
+
+  // Optimization: Limit history to prevent token overflow
+  // Tumbling window: Summarize every X turns
+  
+  let historyLimit = 30
+  if (tokenUsage.value === 'low') historyLimit = 10
+  else if (tokenUsage.value === 'medium') historyLimit = 30
+  else if (tokenUsage.value === 'high') historyLimit = 60
+  else if (tokenUsage.value === 'goddess') historyLimit = 99999 // Effectively infinite
+
+  if (tokenUsage.value !== 'goddess') {
+     let userMsgCount = 0
+     // Count user messages in the unsummarized portion, excluding the current pending prompt
+     for (let i = lastSummarizedIndex.value; i < chatHistory.value.length - 1; i++) {
+       if (chatHistory.value[i].role === 'user') {
+         userMsgCount++
+       }
+     }
+
+     if (userMsgCount >= historyLimit) {
+       const endIndex = chatHistory.value.length - 1
+       const chunkToSummarize = chatHistory.value.slice(lastSummarizedIndex.value, endIndex)
+       logDebug(`[callAIWithoutSearch] Summarizing ${chunkToSummarize.length} messages (Tumbling Window)...`)
+       await summarizeChunk(chunkToSummarize)
+       lastSummarizedIndex.value = endIndex
+     }
+  }
+
+  if (storySummary.value && tokenUsage.value !== 'goddess') {
+    contextMsg += `\n\nPREVIOUS STORY SUMMARY:\n${storySummary.value}`
+  }
+
+  let historyToSend = chatHistory.value
+  if (tokenUsage.value !== 'goddess') {
+    historyToSend = chatHistory.value.slice(lastSummarizedIndex.value)
+  }
+
+  if (apiProvider.value === 'perplexity') {
+    const fullSystemPrompt = `${systemPrompt}\n\n${contextMsg}${retryInstruction}`
+    const rawHistory = historyToSend.filter((m) => m.role !== 'system')
+    const sanitizedHistory: any[] = []
+    
+    if (rawHistory.length > 0) {
+      let currentMsg = { role: rawHistory[0].role, content: rawHistory[0].content }
+      for (let i = 1; i < rawHistory.length; i++) {
+        const msg = rawHistory[i]
+        if (msg.role === currentMsg.role) {
+          currentMsg.content += '\n\n' + msg.content
+        } else {
+          sanitizedHistory.push(currentMsg)
+          currentMsg = { role: msg.role, content: msg.content }
+        }
+      }
+      sanitizedHistory.push(currentMsg)
+    }
+
+    const messages = [
+      { role: 'system', content: fullSystemPrompt },
+      ...sanitizedHistory
+    ]
+    return await callPerplexity(messages, false)
+  } else if (apiProvider.value === 'gemini') {
+    const messages = [
+      { role: 'system', content: systemPrompt },
+      ...historyToSend.map((m) => ({ role: m.role, content: m.content }))
+    ]
+    messages.push({ role: 'system', content: contextMsg + retryInstruction })
+    return await callGemini(messages, false)
+  } else if (apiProvider.value === 'openrouter') {
+    const fullSystemPrompt = `${systemPrompt}\n\n${contextMsg}${retryInstruction}`
+    const messages = [
+      { role: 'system', content: fullSystemPrompt },
+      ...historyToSend.map((m) => ({ role: m.role, content: m.content }))
+    ]
+    return await callOpenRouter(messages, false)
+  }
+  
+  throw new Error('Unknown API provider')
+}
+
+// Check if the AI response contains a search request for unknown characters
+const checkForSearchRequest = async (response: string): Promise<string[] | null> => {
+  try {
+    let jsonStr = response.replace(/```json\n?|\n?```/g, '').trim()
+    const start = jsonStr.indexOf('[')
+    const end = jsonStr.lastIndexOf(']')
+    
+    // Try array format first
+    if (start !== -1 && end !== -1) {
+      jsonStr = jsonStr.substring(start, end + 1)
+    }
+    
+    let data = JSON.parse(jsonStr)
+    if (!Array.isArray(data)) {
+      data = [data]
+    }
+    
+    // Look for needs_search field in any action
+    for (const action of data) {
+      if (action.needs_search && Array.isArray(action.needs_search) && action.needs_search.length > 0) {
+        // Filter out characters we already have profiles for
+        const unknownChars = action.needs_search.filter(
+          (name: string) => !characterProfiles.value[name]
+        )
+        if (unknownChars.length > 0) {
+          return unknownChars
+        }
+      }
+    }
+  } catch (e) {
+    // If parsing fails, no search request
+  }
+  return null
+}
+
+// Search for character information using web search
+const searchForCharacters = async (characterNames: string[]): Promise<void> => {
+  logDebug('[searchForCharacters] Searching for:', characterNames)
+  
+  // For Perplexity, search each character individually for better results
+  if (apiProvider.value === 'perplexity') {
+    await searchForCharactersPerplexity(characterNames)
+    return
+  }
+  
+  // For Gemini, use native search
+  if (apiProvider.value === 'gemini') {
+    await searchForCharactersWithNativeSearch(characterNames)
+    return
+  }
+  
+  // For OpenRouter, check if model has native search
+  if (apiProvider.value === 'openrouter') {
+    if (hasNativeSearch(model.value)) {
+      // Use native web search for OpenAI, Anthropic, Perplexity, xAI models
+      await searchForCharactersWithNativeSearch(characterNames)
+    } else {
+      // For models without native search (e.g., Claude via OpenRouter, DeepSeek, etc.)
+      // Fetch wiki pages directly and have the model summarize
+      await searchForCharactersViaWikiFetch(characterNames)
+    }
+    return
+  }
+}
+
+// Fetch wiki page content directly and have the model summarize it
+// Used for OpenRouter models that don't have native web search.
+// We are using a Cloudflare Worker proxy to avoid CORS issues.
+// Its code is open-sourced and available in the 
+const WIKI_PROXY_URL = 'https://nikke-wiki-proxy.rhysticone.workers.dev'
+
+const fetchWikiContent = async (characterName: string): Promise<string | null> => {
+  const wikiName = characterName.replace(/ /g, '_')
+  
+  try {
+    // Fetch the Story page via our Cloudflare Worker proxy
+    // The worker fetches only Description, Personality, and Backstory sections
+    const response = await fetch(`${WIKI_PROXY_URL}?page=${encodeURIComponent(wikiName + '/Story')}`)
+    const data = await response.json()
+    
+    // Check for errors
+    if (data.error) {
+      console.warn(`[fetchWikiContent] Wiki page not found for ${characterName}:`, data.error)
+      return null
+    }
+    
+    // Extract wikitext from parse response
+    const wikitext = data.parse?.wikitext?.['*']
+    if (!wikitext) {
+      console.warn(`[fetchWikiContent] No content found for ${characterName}`)
+      return null
+    }
+    
+    return wikitext
+  } catch (e) {
+    console.error(`[fetchWikiContent] Error fetching wiki for ${characterName}:`, e)
+    return null
+  }
+}
+
+// Clean up wikitext for the model
+const cleanWikiContent = (wikitext: string): string => {
+  let text = wikitext
+  // Remove wiki markup templates like {{...}}
+  text = text.replace(/\{\{[^}]*\}\}/g, '')
+  // Remove [[ ]] link markup but keep the text
+  text = text.replace(/\[\[(?:[^|\]]*\|)?([^\]]+)\]\]/g, '$1')
+  // Remove remaining brackets
+  text = text.replace(/\[|\]/g, '')
+  // Remove HTML comments
+  text = text.replace(/<!--[\s\S]*?-->/g, '')
+  // Remove section headers markup (== Header ==)
+  text = text.replace(/^=+\s*(.+?)\s*=+$/gm, '$1:')
+  // Clean up whitespace
+  text = text.replace(/\n{3,}/g, '\n\n')
+  text = text.replace(/\s+/g, ' ').trim()
+  // Limit length to avoid token limits
+  if (text.length > 4000) {
+    text = text.substring(0, 4000) + '...'
+  }
+  return text
+}
+
+// Search for characters by fetching wiki pages directly (for models without native search)
+const searchForCharactersViaWikiFetch = async (characterNames: string[]): Promise<void> => {
+  logDebug('[searchForCharactersViaWikiFetch] Fetching wiki pages for:', characterNames)
+  
+  for (const name of characterNames) {
+    if (characterProfiles.value[name]) continue
+    
+    const wikiContent = await fetchWikiContent(name)
+    if (!wikiContent) {
+      console.warn(`[searchForCharactersViaWikiFetch] No wiki content found for ${name}`)
+      continue
+    }
+    
+    const cleanedContent = cleanWikiContent(wikiContent)
+    logDebug(`[searchForCharactersViaWikiFetch] Fetched ${cleanedContent.length} chars for ${name}`)
+    
+    const summarizePrompt = `Based on the following wiki content about the NIKKE character "${name}", extract their character information.
+
+WIKI CONTENT:
+${cleanedContent}
+
+Extract the following information about "${name}":
+1. Personality traits - how they behave, their temperament
+2. Speech style - be DETAILED: how they talk, their tone, vocabulary level, any verbal quirks, accent patterns, or unique speech mannerisms
+3. Relationships with OTHER NIKKEs - what they call them and how they feel about them
+
+IMPORTANT: Do NOT include anything about the Commander - that is provided separately.
+
+Return ONLY a JSON object:
+{
+  "${name}": {
+    "personality": "Brief personality description from the wiki",
+    "speech_style": "Detailed description of how they speak - include tone, vocabulary, verbal quirks, accent, mannerisms, etc.",
+    "relationships": { "OtherNikkeName": "What they call them + dynamic" }
+  }
+}
+Do NOT include Commander in relationships.`
+
+    const messages = [
+      { role: 'system', content: 'You are a helpful assistant that extracts character information from wiki content and returns it in JSON format.' },
+      { role: 'user', content: summarizePrompt }
+    ]
+    
+    try {
+      // Call OpenRouter WITHOUT web search - we already have the content
+      const result = await callOpenRouter(messages, false)
+      
+      let jsonStr = result.replace(/```json\n?|\n?```/g, '').trim()
+      const start = jsonStr.indexOf('{')
+      const end = jsonStr.lastIndexOf('}')
+      if (start !== -1 && end !== -1) {
+        jsonStr = jsonStr.substring(start, end + 1)
+      }
+      
+      const profiles = JSON.parse(jsonStr)
+      
+      // Add character IDs
+      for (const charName of Object.keys(profiles)) {
+        const char = l2d.find((c) => c.name.toLowerCase() === charName.toLowerCase())
+        if (char) {
+          profiles[charName].id = char.id
+        }
+      }
+      
+      characterProfiles.value = { ...characterProfiles.value, ...profiles }
+      logDebug(`[searchForCharactersViaWikiFetch] Added profile for ${name}:`, profiles)
+    } catch (e) {
+      console.error(`[searchForCharactersViaWikiFetch] Failed to process ${name}:`, e)
+    }
+  }
+}
+
+// Search for characters using native web search (Gemini, OpenRouter with native search)
+const searchForCharactersWithNativeSearch = async (characterNames: string[]): Promise<void> => {
+  logDebug('[searchForCharactersWithNativeSearch] Searching for:', characterNames)
+  
+  for (const name of characterNames) {
+    if (characterProfiles.value[name]) continue
+
+    const wikiName = name.replace(/ /g, '_')
+    const storyUrl = `https://nikke-goddess-of-victory-international.fandom.com/wiki/${wikiName}/Story`
+
+    const searchPrompt = `Search for information about the character "${name}" from the mobile game NIKKE: Goddess of Victory.
+
+The character's wiki page is at: ${storyUrl}
+
+Find the following information:
+1. Personality traits - how they behave, their temperament
+2. Speech style - be DETAILED: how they talk, their tone, vocabulary level, any verbal quirks, accent patterns, or unique speech mannerisms
+3. Relationships with OTHER NIKKEs - what they call them and how they feel about them
+
+IMPORTANT: Do NOT include anything about the Commander - that is provided separately.
+
+Return ONLY a JSON object:
+{
+  "${name}": {
+    "personality": "Brief personality description",
+    "speech_style": "Detailed description of how they speak - include tone, vocabulary, verbal quirks, accent, mannerisms, etc.",
+    "relationships": { "OtherNikkeName": "What they call them + dynamic" }
+  }
+}
+Do NOT include Commander in relationships. If you cannot find information, use "Unknown".`
+
+    const messages = [
+      { role: 'system', content: 'You are a research assistant. Search for information about NIKKE: Goddess of Victory game characters and return what you find in JSON format.' },
+      { role: 'user', content: searchPrompt }
+    ]
+
+    let attempts = 0
+    const maxAttempts = 3
+    let success = false
+
+    while (attempts < maxAttempts && !success) {
+      attempts++
+      try {
+        let result: string
+        
+        if (apiProvider.value === 'gemini') {
+          result = await callGemini(messages, true)
+        } else {
+          result = await callOpenRouter(messages, true)
+        }
+        
+        let jsonStr = result.replace(/```json\n?|\n?```/g, '').trim()
+        const start = jsonStr.indexOf('{')
+        const end = jsonStr.lastIndexOf('}')
+        if (start !== -1 && end !== -1) {
+          jsonStr = jsonStr.substring(start, end + 1)
+        }
+        
+        const profiles = JSON.parse(jsonStr)
+        
+        for (const charName of Object.keys(profiles)) {
+          const char = l2d.find((c) => c.name.toLowerCase() === charName.toLowerCase())
+          if (char) {
+            profiles[charName].id = char.id
+          }
+        }
+        
+        characterProfiles.value = { ...characterProfiles.value, ...profiles }
+        logDebug(`[searchForCharactersWithNativeSearch] Added profile for ${name}:`, profiles)
+        success = true
+      } catch (e) {
+        console.error(`[searchForCharactersWithNativeSearch] Attempt ${attempts} failed for ${name}:`, e)
+        if (attempts < maxAttempts) {
+          await new Promise(resolve => setTimeout(resolve, 1000))
+        } else {
+          console.error(`[searchForCharactersWithNativeSearch] All attempts failed for ${name}.`)
+        }
+      }
+    }
+  }
+}
+
+// Perplexity-specific search: search each character individually for better results
+const searchForCharactersPerplexity = async (characterNames: string[]): Promise<void> => {
+  logDebug('[searchForCharactersPerplexity] Searching individually for:', characterNames)
+  
+  for (const name of characterNames) {
+    // Skip if we already have this character's profile
+    if (characterProfiles.value[name]) {
+      logDebug(`[searchForCharactersPerplexity] Skipping ${name} - already have profile`)
+      continue
+    }
+    
+    // Build the direct wiki URL for this character's Story page
+    // Replace spaces with underscores for wiki URL format
+    const wikiName = name.replace(/ /g, '_')
+    const storyUrl = `https://nikke-goddess-of-victory-international.fandom.com/wiki/${wikiName}/Story`
+    
+    // Search prompt pointing directly to the Story page for personality info
+    const searchPrompt = `Read this exact wiki page and extract information for NIKKE character "${name}":
+${storyUrl}
+
+Find the following information:
+1. Personality traits - how they behave, their temperament
+2. Speech style - be DETAILED: how they talk, their tone, vocabulary level, any verbal quirks, accent patterns, or unique speech mannerisms
+3. Relationships with OTHER NIKKEs - what they call them and how they feel about them
+
+IMPORTANT: Do NOT include anything about the Commander - that is provided separately.
+
+Only return information that is ACTUALLY on the wiki page.
+
+Return ONLY a JSON object:
+{
+  "${name}": {
+    "personality": "From the wiki page only",
+    "speech_style": "Detailed description of how they speak - include tone, vocabulary, verbal quirks, accent, mannerisms, etc.",
+    "relationships": { "OtherNikkeName": "What they call them + dynamic (e.g. 'Her Highness - deeply devoted')" }
+  }
+}
+
+Do NOT include Commander in relationships. If you cannot find information, use "Unknown".`
+
+    const messages = [
+      { role: 'system', content: 'You are a factual research assistant. You MUST only return information that is explicitly written on the wiki page. Do NOT hallucinate, guess, or embellish. If information is not found, say "Unknown".' },
+      { role: 'user', content: searchPrompt }
+    ]
+
+    try {
+      const result = await callPerplexity(messages, true, storyUrl)
+      
+      let jsonStr = result.replace(/```json\n?|\n?```/g, '').trim()
+      const start = jsonStr.indexOf('{')
+      const end = jsonStr.lastIndexOf('}')
+      if (start !== -1 && end !== -1) {
+        jsonStr = jsonStr.substring(start, end + 1)
+      }
+      
+      const profile = JSON.parse(jsonStr)
+      
+      // Add character ID
+      for (const charName of Object.keys(profile)) {
+        const char = l2d.find((c) => c.name.toLowerCase() === charName.toLowerCase())
+        if (char) {
+          profile[charName].id = char.id
+        }
+      }
+      
+      characterProfiles.value = { ...characterProfiles.value, ...profile }
+      logDebug(`[searchForCharactersPerplexity] Added profile for ${name}:`, profile)
+    } catch (e) {
+      console.error(`[searchForCharactersPerplexity] Failed to search for ${name}:`, e)
+      // Continue with other characters
+    }
+  }
+  
+  logDebug('[searchForCharactersPerplexity] Final profiles:', characterProfiles.value)
+}
+
+const generateSystemPrompt = (enableWebSearch: boolean) => {
+  const knownCharacterNames = Object.keys(characterProfiles.value)
+  
+  // Build a minimal character ID lookup for characters mentioned in profiles or current character
+  // This prevents massive token usage from including all 200+ characters
+  const relevantCharacterIds: string[] = []
+  const relevantCharacterNames: string[] = []
+  
+  // Add current character
+  if (market.live2d.current_id) {
+    const currentChar = l2d.find((c) => c.id === market.live2d.current_id)
+    if (currentChar) {
+      relevantCharacterIds.push(`${currentChar.name} = ${currentChar.id}`)
+      relevantCharacterNames.push(currentChar.name)
+    }
+  }
+  
+  // Add characters from profiles
+  for (const name of knownCharacterNames) {
+    const char = l2d.find((c) => c.name.toLowerCase() === name.toLowerCase())
+    if (char && !relevantCharacterIds.some((r) => r.includes(char.id))) {
+      relevantCharacterIds.push(`${char.name} = ${char.id}`)
+      relevantCharacterNames.push(char.name)
+    }
+  }
+  
+  // Build honorifics map for only relevant characters to save tokens
+  const relevantHonorifics: Record<string, string> = {}
+  for (const name of relevantCharacterNames) {
+    relevantHonorifics[name] = (characterHonorifics as Record<string, string>)[name] || 'Commander'
+  }
+  
+  let prompt = `You are the Game Master and Narrator for a Goddess of Victory: NIKKE roleplay.
+  
+  Mode: ${mode.value === 'roleplay' ? 'Roleplay Mode. The user plays as the Commander. You control all other characters.' : 'Story Mode. You narrate the scene based on user prompts. The user is an observer.'}
+  
+  CHARACTER HONORIFICS (How each character addresses the Commander - USE THESE EXACTLY):
+  ${Object.keys(relevantHonorifics).length > 0 ? JSON.stringify(relevantHonorifics, null, 2) : '(No characters loaded yet - honorifics will be provided once characters appear)'}
+  
+  HONORIFIC RULES:
+  - CRITICAL: When a character speaks TO the Commander, use their honorific from the list above.
+  - Example: Neon says "Master" not "Commander". Drake says "Moron" not "Commander".
+  - If a character is NOT in the honorifics list, default to "Commander".
+  - CRITICAL: These honorifics are EXCLUSIVE to addressing the Commander. When characters address EACH OTHER, use their relationship-specific titles (see KNOWN CHARACTER PROFILES).
+  - FAILURE to use the correct honorific is a critical error.
+  
+  CHARACTER RESEARCH:
+  ${enableWebSearch 
+    ? `Web search is ENABLED for this turn. You MUST use web search to research the characters involved:
+    - Search the NIKKE Wiki: https://nikke-goddess-of-victory-international.fandom.com/wiki/[CharacterName]/Story
+    - Find: Personality traits, speech patterns/voice, and how they address OTHER characters (not the Commander).
+    - DO NOT search for or store how they address the Commander - that is already provided in CHARACTER HONORIFICS above.
+    - Example: Chime speaks in archaic/royal language and calls Crown "Her Highness".
+    - Store what you find in the "memory" field (personality, speech_style, relationships only - NO honorifics for Commander).`
+    : `Web search is DISABLED. Use the KNOWN CHARACTER PROFILES below for personality and relationship info.
+    
+    *** IMPORTANT: NEW CHARACTER DETECTION ***
+    If a NEW character enters the scene who is NOT listed in KNOWN CHARACTER PROFILES below, you MUST:
+    1. Include "needs_search": ["CharacterName"] in your JSON response
+    2. The system will search for their personality/relationships and re-prompt you
+    3. Do NOT proceed with dialogue for that character until you have their profile
+    
+    Example: If Drake enters but is not in the profiles, respond with: { "needs_search": ["Drake"], "text": "Drake enters the room..." }`}
+  
+  - FAILURE to act according to personality (e.g. Chime accepting insults calmly) is a critical error.
+  - FAILURE to mimic the character's unique voice/tone (e.g. Chime's archaic/royal speech) is a critical error.
+  - IMPORTANT: Remember that the Commander is a man. Do not use neutral pronouns when characters address him.
+
+  You must output your response in JSON format ONLY. Do not include any text outside the JSON object.
+  
+  JSON Structure:
+  You can return a single object OR an array of objects to play out a scene.
+  [
+    {
+      "needs_search": ["CharacterName1", "CharacterName2"], // CRITICAL: Include this if ANY character in your response is NOT in KNOWN CHARACTER PROFILES. The system will search and re-prompt you.
+      "memory": { "CharacterName": { "relationships": { "OtherNikkeName": "How they address them + dynamic" }, "personality": "...", "speech_style": "..." } }, // Store personality and relationships with OTHER NIKKEs only. Do NOT include Commander - honorifics are in CHARACTER HONORIFICS above.
+            "text": "The dialogue or narration text to display to the user.",
+      "character": "The ID of the character to display on screen (e.g., c010). If no character change is needed, use 'current'. If no character should be shown, use 'none'.",
+      "animation": "The name of the animation to play (e.g., idle, happy, angry). Use 'idle' as default.",
+      "speaking": true/false, // Set to TRUE ONLY if the character is actually saying words. Set to FALSE for narration, internal thoughts, or descriptions of actions.
+      "duration": 2000 // Duration in milliseconds for the animation/speaking.
+    }
+  ]
+  
+  KNOWN CHARACTER PROFILES (Use these to maintain consistency - if a character is NOT here, use needs_search):
+  ${knownCharacterNames.length > 0 ? JSON.stringify(characterProfiles.value, null, 2) : '(None yet - this is the first turn, use web search to gather information)'}
+  
+  CHARACTER ID REFERENCE (Use these IDs in the "character" field):
+  ${relevantCharacterIds.length > 0 ? relevantCharacterIds.join(', ') : 'No characters loaded yet. Use the character NAME and the system will resolve it.'}
+  
+  Instructions:
+  - If the user uses [], it is a stage direction.
+  - CRITICAL: For the "character" field, use the character ID (e.g., "c010") from the CHARACTER ID REFERENCE above, or use the character's NAME if their ID is not listed. The system will resolve names to IDs.
+  - Choose the most appropriate character to show based on who is speaking or the focus of the scene.
+  - Choose animations that match the emotion.
+  - Check the "Available Animations" list provided in the context for the CURRENT character.
+  - If the character is the CURRENT one, you MUST pick an animation from that list.
+  - SUFFIX GUIDE: "_02" usually indicates HIGH intensity (e.g. furious, laughing), and "_03" usually indicates LOW intensity (e.g. annoyed, chuckling). Use these if they appear in the list and match the scene's intensity.
+  - If the character is NEW (not current), prefer using DESCRIPTIVE emotion words (e.g. 'furious', 'annoyed', 'gloom') instead of the generic category if you want to convey intensity. The system will map these to the best available animation (e.g. 'furious' -> 'angry_02').
+  - Do NOT use specific suffixes like '_02' for NEW characters. Use the descriptive word (e.g. 'furious') and let the system handle the mapping.
+  - If you are unsure, you can use descriptive terms like "very angry" or "furious", and the system will try to map them using these patterns: ${JSON.stringify(animationMappings)}.
+  - CRITICAL: Do NOT reset animations to 'idle' during narration steps if the character is still emotional. Only change the animation if the emotion changes or the character calms down.
+  - CRITICAL: If a character is performing an action described by the narrator, set 'character' to that character's ID, even if they are not speaking. Only use 'none' if NO character should be visible (e.g. scene transition, or focus on environment).
+  - CRITICAL: Set 'speaking' to FALSE if the text is narration (e.g. "Neon looks around nervously.") or internal thought.
+  - RULE OF THUMB: If the text does NOT contain quotation marks (" "), 'speaking' MUST be FALSE.
+  - Only set 'speaking' to TRUE if the text contains spoken dialogue inside quotation marks.
+  - CRITICAL: If the text contains BOTH narration and dialogue (e.g. 'She sighed. "Fine."'), you MUST split it into two separate steps in the array. Step 1: Narration (speaking: false). Step 2: Dialogue (speaking: true).
+  - CRITICAL: When a character speaks, you MUST set 'character' to that character's ID. Do NOT use 'current' when switching speakers.
+  - In Story Mode, you MUST generate a long, detailed sequence of actions (an array) to play out the scene fully, switching characters as they speak. Do not summarize. Write out the full dialogue.
+  - CRITICAL: Do NOT return a single large block of text. Split dialogue and narration into multiple small steps in the array to create a dynamic flow. Each step should be one sentence or one turn of dialogue.
+  - CRITICAL: Do NOT output numbered lists, outlines, plans, or thoughts. Output ONLY the JSON array. Do not include any text before or after the JSON.
+  - In Story Mode, use THIRD PERSON narration. Refer to the protagonist as "The Commander", NEVER as "you".
+  - In Story Mode, NEVER display the Commander sprite. Use 'character': 'none' when the Commander is speaking or acting.
+  - In Roleplay Mode, generate 1-3 turns of dialogue/action. If the conversation has stalled, introduce a new topic or event based on the character's personality.
+  - CRITICAL: If the user clicks "Continue", DO NOT repeat the last action. ADVANCE the plot or reaction. NEVER repeat the user's dialogue or the last character's dialogue. You must ALWAYS provide a NEW response or reaction.
+  - CRITICAL: Do not rephrase the previous turn. Move the story FORWARD.
+  - CRITICAL: If you are in Roleplay Mode, NEVER output dialogue that is identical or nearly identical to the User's previous input. You speak for the NPCs. Only perform actions for the user if explicitly instructed in [] or if it is missing from the user's input and absolutely necessary in a logic sense to proceed.
+  `
+  return prompt
+}
+
+const callOpenRouter = async (messages: any[], enableWebSearch: boolean = false, searchUrl?: string) => {
+  // Add a final user message to FORCE JSON output - models pay more attention to recent messages
+  const messagesWithEnforcement = [
+    ...messages,
+    { role: 'user', content: 'CRITICAL SYSTEM INSTRUCTION: You MUST respond with ONLY a JSON array. No prose, no markdown, no explanation. Start your response with [ and end with ]. Any non-JSON response is a critical failure. Output the JSON array NOW:' }
+  ]
+  
+  // Build web plugin configuration if web search is enabled
+  const buildWebPlugin = () => {
+    if (!enableWebSearch) return undefined
+    // Use default web plugin - Exa will search based on the prompt content
+    // For models with native search (OpenAI, Anthropic, etc.), this uses their built-in search
+    // For other models, it uses Exa search
+    return [{ id: 'web', max_results: 10 }]
+  }
+  
+  // Helper function to make the API call without json_object constraint
+  const callWithoutJsonFormat = async () => {
+    const requestBody: any = {
+      model: model.value,
+      messages: messagesWithEnforcement,
+      max_tokens: 8192
+    }
+    
+    const webPlugin = buildWebPlugin()
+    if (webPlugin) {
+      requestBody.plugins = webPlugin
+    }
+    
+    const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${apiKey.value}`,
+        'HTTP-Referer': window.location.href,
+        'X-Title': 'Nikke DB Story Gen',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(requestBody)
+    })
+    
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}))
+      console.error('OpenRouter API Error Details:', errorData)
+      
+      // Check for 429 rate limit error
+      if (response.status === 429 && errorData?.error?.message?.includes('is temporarily rate-limited upstream')) {
+        throw new Error('RATE_LIMITED')
+      }
+      
+      throw new Error(`OpenRouter API Error: ${response.status} ${JSON.stringify(errorData)}`)
+    }
+    
+    const data = await response.json()
+    return data.choices[0].message.content
+  }
+  
+  // If this model is known to not support json_object, skip directly to fallback
+  if (modelsWithoutJsonSupport.has(model.value)) {
+    return callWithoutJsonFormat()
+  }
+  
+  const requestBody: any = {
+    model: model.value,
+    messages: messagesWithEnforcement,
+    max_tokens: 8192,
+    // Force JSON output format
+    response_format: { type: 'json_object' },
+    // Require providers that actually support response_format
+    provider: {
+      require_parameters: true
+    }
+  }
+  
+  const webPlugin = buildWebPlugin()
+  if (webPlugin) {
+    requestBody.plugins = webPlugin
+  }
+  
+  const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${apiKey.value}`,
+      'HTTP-Referer': window.location.href,
+      'X-Title': 'Nikke DB Story Gen',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(requestBody)
+  })
+  
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}))
+    console.error('OpenRouter API Error Details:', errorData)
+    
+    // Check for 429 rate limit error
+    if (response.status === 429 && errorData?.error?.message?.includes('is temporarily rate-limited upstream')) {
+      throw new Error('RATE_LIMITED')
+    }
+    
+    // If error is 404 with exact "No endpoints found" message - model doesn't support json_object response format
+    // Remember this model and retry without response_format constraint (e.g., Claude models don't support it)
+    if (response.status === 404 && errorData?.error?.message?.includes('No endpoints found that can handle the requested parameters.')) {
+      console.warn(`Model ${model.value} does not support json_object response format, remembering and retrying without it...`)
+      modelsWithoutJsonSupport.add(model.value)
+      return callWithoutJsonFormat()
+    }
+    
+    throw new Error(`OpenRouter API Error: ${response.status} ${JSON.stringify(errorData)}`)
+  }
+  const data = await response.json()
+  return data.choices[0].message.content
+}
+
+const callPerplexity = async (messages: any[], enableWebSearch: boolean = false, searchUrl?: string) => {
+  const requestBody: any = {
+    model: model.value,
+    messages: messages
+  }
+  
+  if (enableWebSearch) {
+    // If a specific URL is provided, use the full subdomain for more targeted search
+    if (searchUrl) {
+      // Extract the subdomain from the URL (e.g., "nikke-goddess-of-victory-international.fandom.com")
+      const urlMatch = searchUrl.match(/https?:\/\/([^\/]+)/)
+      if (urlMatch) {
+        requestBody.search_domain_filter = [urlMatch[1]]
+      }
+    }
+    // No domain filter if no specific URL provided - let Perplexity search freely
+    requestBody.web_search_options = {
+      search_context_size: 'medium'
+    }
+  } else {
+    // Disable search completely using Perplexity's disable_search parameter
+    requestBody.disable_search = true
+  }
+  
+  const response = await fetch('https://api.perplexity.ai/chat/completions', {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${apiKey.value}`,
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(requestBody)
+  })
+  
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}))
+    console.error('Perplexity API Error Details:', errorData)
+    throw new Error(`Perplexity API Error: ${response.status} ${JSON.stringify(errorData)}`)
+  }
+  const data = await response.json()
+  return data.choices[0].message.content
+}
+
+const callGemini = async (messages: any[], enableWebSearch: boolean = false) => {
+  // Gemini API format is different, need to adapt
+  
+  // Check if we have a system message (first message with role 'system' or just need to treat first as system)
+  // If there's only one message, treat it as user content (no system instruction)
+  const hasSystemMessage = messages.length > 1 || messages[0]?.role === 'system'
+  
+  let contents: any[]
+  let systemMessage: any = null
+  
+  if (hasSystemMessage && messages.length > 1) {
+    // Extract system prompt (first message)
+    systemMessage = messages[0]
+    // Filter out system message and map the rest to Gemini format
+    contents = messages.slice(1).map((m) => ({
+      role: m.role === 'assistant' ? 'model' : 'user',
+      parts: [{ text: m.content }]
+    }))
+  } else {
+    // No system message, all messages are content
+    contents = messages.map((m) => ({
+      role: m.role === 'assistant' ? 'model' : 'user',
+      parts: [{ text: m.content }]
+    }))
+  }
+  
+  const url = `https://generativelanguage.googleapis.com/v1beta/models/${model.value}:generateContent?key=${apiKey.value}`
+  
+  const requestBody: any = {
+    contents: contents,
+    generationConfig: {
+      // responseMimeType: "application/json" // Incompatible with tools
+    }
+  }
+  
+  // Only add systemInstruction if we have a system message
+  if (systemMessage) {
+    requestBody.systemInstruction = {
+      parts: [{ text: systemMessage.content }]
+    }
+  }
+  
+  if (enableWebSearch) {
+    requestBody.tools = [{ googleSearch: {} }]
+  }
+  
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(requestBody)
+  })
+
+  if (!response.ok) {
+    const errorData = await response.json()
+    console.error('Gemini API Error Details:', errorData)
+    if (response.status === 503) {
+      throw new Error('Gemini API Error: 503 Service Unavailable')
+    }
+    throw new Error(`Gemini API Error: ${response.status} ${response.statusText}`)
+  }
+  const data = await response.json()
+  
+  // Handle various response formats from Gemini
+  if (!data.candidates || data.candidates.length === 0) {
+    console.error('Gemini returned no candidates:', data)
+    throw new Error('Gemini API Error: No candidates in response')
+  }
+  
+  const candidate = data.candidates[0]
+  if (!candidate.content || !candidate.content.parts || candidate.content.parts.length === 0) {
+    console.error('Gemini returned empty content:', candidate)
+    throw new Error('Gemini API Error: Empty content in response')
+  }
+  
+  // Find the text part (there might be other parts like function calls when using tools)
+  const textPart = candidate.content.parts.find((p: any) => p.text !== undefined)
+  if (!textPart) {
+    console.error('Gemini returned no text part:', candidate.content.parts)
+    throw new Error('Gemini API Error: No text in response')
+  }
+  
+  return textPart.text
+}
+
+const sanitizeActions = (actions: any[]) => {
+  const newActions: any[] = []
+  
+  // Helper to identify speaker labels
+  // Updated to handle cases where bold tags wrap the colon (e.g. **Name:**)
+  const isSpeakerLabel = (s: string) => /^\s*(?:\*\*)?[^*]+?(?:\*\*)?\s*:\s*(?:\*\*)?\s*$/.test(s)
+
+  for (const action of actions) {
+    if (!action.text || typeof action.text !== 'string') {
+      newActions.push(action)
+
+      continue
+    }
+
+    // Check if text contains quotes
+    // We look for standard quotes " and smart quotes “ ”
+    const hasQuotes = /["“”]/.test(action.text)
+    
+    if (!hasQuotes) {
+      // Case 1: No quotes at all.
+      
+      // Filter out standalone speaker labels
+      if (isSpeakerLabel(action.text)) {
+
+        continue
+      }
+
+      // If it was marked as speaking, only force to false if it looks like a stage direction
+      if (action.speaking) {
+        // Check for stage directions starting with *, (, or [
+        if (/^[\s]*[\[\(*]/.test(action.text)) {
+          action.speaking = false
+        }
+        // Otherwise, trust the AI's speaking flag even without quotes
+        // This handles cases where the AI forgets quotes around dialogue
+      }
+      newActions.push(action)
+
+      continue
+    }
+
+    // Case 2: Has quotes. We need to split.
+    // Regex to match quoted sections including the quotes
+    const splitRegex = /([“"][^”"]*[”"])/g
+    
+    const parts = action.text.split(splitRegex).filter((p: string) => p.trim().length > 0)
+    
+    if (parts.length === 0) {
+      newActions.push(action)
+
+      continue
+    }
+
+    // Helper to determine if a part is a quote
+    // Use [\s\S] to match any character including newlines
+    const isQuote = (s: string) => /^[“"][\s\S]*[”"]$/.test(s.trim())
+
+    // Merge trailing punctuation into previous part to avoid tiny separate messages
+    const mergedParts: { text: string, isQuoted: boolean, characterId: string }[] = []
+    let effectiveCharacterId = action.character
+    
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const quoted = isQuote(part)
+      
+      // Filter out standalone speaker labels (e.g. "**Anis:**")
+      // These are often artifacts from splitting "Name: Quote"
+     
+      if (isSpeakerLabel(part) && !quoted) {
+        continue
+      }
+
+      // If this part is just punctuation/space and we have a previous part, merge it
+      // This handles cases like: "Hello". -> "Hello" + .
+      if (mergedParts.length > 0 && !quoted && /^[.,;!?\s]+$/.test(part)) {
+        mergedParts[mergedParts.length - 1].text += part
+      } else {
+        mergedParts.push({ text: part, isQuoted: quoted, characterId: effectiveCharacterId })
+      }
+    }
+
+    for (const partObj of mergedParts) {
+      // Create new action
+      const newAction = { ...action, text: partObj.text, character: partObj.characterId }
+      
+      if (partObj.isQuoted) {
+        newAction.speaking = true
+      } else {
+        newAction.speaking = false
+      }
+      
+      // Remove fixed duration so it gets recalculated based on text length
+      if (newAction.duration) {
+        delete newAction.duration
+      }
+      
+      newActions.push(newAction)
+    }
+  }
+  
+  // Post-process: If a narration action (speaking=false) is followed by a dialogue action (speaking=true)
+  // for the same character, copy the animation from the narration to the dialogue.
+  // This ensures the emotion set during narration persists into the dialogue.
+  for (let i = 1; i < newActions.length; i++) {
+    const prev = newActions[i - 1]
+    const curr = newActions[i]
+    
+    // Check if same character, previous is narration, current is dialogue
+    if (prev.character && curr.character && 
+        prev.character === curr.character && 
+        prev.speaking === false && 
+        curr.speaking === true &&
+        prev.animation && prev.animation !== 'idle') {
+      // Copy the narration animation to the dialogue
+      curr.animation = prev.animation
+    }
+  }
+  
+  return newActions
+}
+
+const enrichActionsWithAnimations = async (actions: any[]): Promise<any[]> => {
+  logDebug('Enriching actions with animations...')
+  
+  const filteredAnimations = market.live2d.animations.filter((a) => 
+    a !== 'talk_start' && 
+    a !== 'talk_end' && 
+    a !== 'expression_0' && 
+    a !== 'action'
+  )
+  
+  const prompt = `
+  I have a sequence of story actions. I need you to assign the most appropriate animation/emotion to each action based on the text.
+  
+  Available Animations for Current Character (${market.live2d.current_id}): ${JSON.stringify(filteredAnimations)}
+  
+  Use this mapping guide to choose the correct intensity (e.g. 'angry_02' vs 'angry_03'):
+  ${JSON.stringify(animationMappings, null, 2)}
+  
+  IMPORTANT: If the text is in ALL CAPS (e.g. "STOP IT!"), you MUST assign a high-intensity 'angry' or 'surprise' animation (e.g. 'angry_02', 'shock').
+  
+  For other characters, use generic emotion names (e.g., happy, angry, sad, surprise, idle).
+  
+  Actions:
+  ${JSON.stringify(actions.map((a, i) => ({ index: i, text: a.text, character: a.character })), null, 2)}
+  
+  Return ONLY a JSON array of strings representing the animation name for each action in order.
+  Example: ["idle", "angry_02", "happy"]
+  `
+  
+  const messages = [{ role: 'user', content: prompt }]
+  
+  try {
+      let response: string
+      if (apiProvider.value === 'perplexity') {
+        response = await callPerplexity(messages, false)
+      } else if (apiProvider.value === 'gemini') {
+        response = await callGemini(messages, false)
+      } else if (apiProvider.value === 'openrouter') {
+        response = await callOpenRouter(messages, false)
+      } else {
+        return actions
+      }
+      
+      let jsonStr = response.replace(/```json\n?|\n?```/g, '').trim()
+      const start = jsonStr.indexOf('[')
+      const end = jsonStr.lastIndexOf(']')
+      if (start !== -1 && end !== -1) {
+        jsonStr = jsonStr.substring(start, end + 1)
+        const animations = JSON.parse(jsonStr)
+        
+        if (Array.isArray(animations) && animations.length === actions.length) {
+            return actions.map((action, index) => ({
+                ...action,
+                animation: animations[index]
+            }))
+        }
+      }
+  } catch (e) {
+      console.error('Failed to enrich animations via API, using local fallback', e)
+  }
+  
+  // Local fallback: use animationMappings to match keywords to animations
+  const availableAnimations = market.live2d.animations || []
+  return actions.map(action => {
+    const text = (action.text || '').toLowerCase()
+    let animation = 'idle'
+    
+    // Check for ALL CAPS (shouting/anger)
+    const originalText = action.text || ''
+    const capsWords = originalText.match(/\b[A-Z]{2,}\b/g)
+    const isShouting = capsWords && capsWords.length > 0
+    
+    if (isShouting) {
+      animation = availableAnimations.find((a: string) => a.includes('angry') || a.includes('shock')) || 'angry'
+    } else {
+      // Use animationMappings to find matching animation
+      for (const [animationType, keywords] of Object.entries(animationMappings)) {
+        const hasKeyword = keywords.some(keyword => text.includes(keyword.toLowerCase()))
+        if (hasKeyword) {
+          // Find the best available animation matching this type
+          const matchedAnim = availableAnimations.find((a: string) => a.includes(animationType))
+          if (matchedAnim) {
+            animation = matchedAnim
+          } else {
+            animation = animationType
+          }
+          break
+        }
+      }
+    }
+    
+    return { ...action, animation }
+  })
+}
+
+const splitNarration = (text: string): any[] => {
+  const actions: any[] = []
+  // Split into sentences, handling common punctuation. 
+  const sentences = text.match(/[^.!?]+[.!?]+["']?|[^.!?]+$/g)
+  
+  if (!sentences) {
+      return [{ text, character: 'none', animation: 'idle', speaking: false }]
+  }
+  
+  let currentAction: any = null
+  
+  for (const rawSentence of sentences) {
+    const sentence = rawSentence.trim()
+    if (!sentence) continue
+    
+    let foundCharId = null
+    
+    for (const char of l2d) {
+        const name = char.name
+        // Check for "Name " or "Name's" or "Name." or just "Name" at start
+        if (sentence.toLowerCase().startsWith(name.toLowerCase())) {
+            const nextChar = sentence.charAt(name.length)
+            if (!nextChar || /[\s'’.,!?]/.test(nextChar)) {
+                foundCharId = char.id
+                break
+            }
+        }
+    }
+    
+    if (foundCharId) {
+        if (currentAction) {
+            actions.push(currentAction)
+        }
+        currentAction = {
+            text: sentence,
+            character: foundCharId,
+            animation: 'idle',
+            speaking: false
+        }
+    } else {
+        if (currentAction) {
+            currentAction.text += ' ' + sentence
+        } else {
+            currentAction = {
+                text: sentence,
+                character: 'none', 
+                animation: 'idle',
+                speaking: false
+            }
+        }
+    }
+  }
+  
+  if (currentAction) {
+      actions.push(currentAction)
+  }
+  
+  return actions
+}
+
+const parseFallback = (text: string): any[] => {
+  const actions: any[] = []
+  // Remove bold markers to simplify regex matching
+  const cleanText = text.replace(/\*\*/g, '') 
+  
+  // Regex to find "Name: "Dialogue"" pattern
+  // Matches: Name (alphanumeric+spaces+dashes) followed by colon and quoted text
+  const regex = /([A-Za-z0-9\s\-\(\)]+):\s*(["“][\s\S]*?["”])/g
+  
+  let lastIndex = 0
+  let match
+  
+  while ((match = regex.exec(cleanText)) !== null) {
+    const fullMatch = match[0]
+    const name = match[1].trim()
+    const dialogue = match[2]
+    const index = match.index
+    
+    // 1. Narration (text before the speaker)
+    const narration = cleanText.substring(lastIndex, index).trim()
+    
+    // Resolve Character ID
+    let charId = 'current'
+    // Try exact match first
+    let charObj = l2d.find(c => c.name.toLowerCase() === name.toLowerCase())
+    // If not found, try partial match for names with spaces
+    if (!charObj) {
+       charObj = l2d.find(c => name.toLowerCase().includes(c.name.toLowerCase()) || c.name.toLowerCase().includes(name.toLowerCase()))
+    }
+    if (charObj) charId = charObj.id
+    
+    if (narration) {
+      const narrationActions = splitNarration(narration)
+      
+      // If the last narration action has 'none' character, it might belong to the upcoming speaker
+      if (narrationActions.length > 0) {
+          const lastAction = narrationActions[narrationActions.length - 1]
+          if (lastAction.character === 'none') {
+              lastAction.character = charId
+          }
+      }
+      
+      actions.push(...narrationActions)
+    }
+    
+    // 2. Dialogue
+    actions.push({
+      text: dialogue,
+      character: charId,
+      animation: 'idle',
+      speaking: true
+    })
+    
+    lastIndex = index + fullMatch.length
+  }
+  
+  // Trailing text
+  const trailing = cleanText.substring(lastIndex).trim()
+  if (trailing) {
+     actions.push(...splitNarration(trailing))
+  }
+  
+  return actions
+}
+
+const processAIResponse = async (responseStr: string) => {
+  logDebug('Raw AI Response:', responseStr)
+  
+  // Check for empty or too-short responses (model sometimes returns nothing)
+  if (!responseStr || responseStr.trim().length < 20) {
+    console.warn('Response too short or empty, triggering retry...')
+    throw new Error('JSON_PARSE_ERROR')
+  }
+  
+  let data: any[] = []
+  
+  try {
+    let jsonStr = responseStr
+    
+    // FIRST: Try to extract JSON from markdown code blocks (highest priority)
+    const jsonBlockMatch = responseStr.match(/```(?:json)?\s*([\s\S]*?)```/)
+    if (jsonBlockMatch) {
+      jsonStr = jsonBlockMatch[1].trim()
+    } else {
+      // Remove any stray markdown markers
+      jsonStr = responseStr.replace(/```json\n?|\n?```/g, '').trim()
+    }
+    
+    // Attempt to extract JSON structure (array or object) if mixed with text
+    const firstOpenBrace = jsonStr.indexOf('{')
+    const firstOpenBracket = jsonStr.indexOf('[')
+    
+    let start = -1
+    let end = -1
+    
+    // Determine if we should look for an array or an object based on which appears first
+    if (firstOpenBracket !== -1 && (firstOpenBrace === -1 || firstOpenBracket < firstOpenBrace)) {
+      start = firstOpenBracket
+      end = jsonStr.lastIndexOf(']')
+    } else if (firstOpenBrace !== -1) {
+      start = firstOpenBrace
+      end = jsonStr.lastIndexOf('}')
+    }
+
+    if (start !== -1 && end !== -1) {
+      jsonStr = jsonStr.substring(start, end + 1)
+    }
+
+    // Try to repair common JSON errors
+    const tryParseJSON = (str: string): any => {
+      // First attempt: parse as-is
+      try {
+        return JSON.parse(str)
+      } catch (e) {
+        // Repair attempt: fix unbalanced braces/brackets
+        let repaired = str
+        
+        // Count braces and brackets
+        const openBraces = (repaired.match(/{/g) || []).length
+        const closeBraces = (repaired.match(/}/g) || []).length
+        const openBrackets = (repaired.match(/\[/g) || []).length
+        const closeBrackets = (repaired.match(/]/g) || []).length
+        
+        // Add missing closing braces
+        if (openBraces > closeBraces) {
+          repaired += '}'.repeat(openBraces - closeBraces)
+        }
+        // Add missing closing brackets
+        if (openBrackets > closeBrackets) {
+          repaired += ']'.repeat(openBrackets - closeBrackets)
+        }
+        
+        // Try again with repaired string
+        try {
+          return JSON.parse(repaired)
+        } catch (e2) {
+          // If still failing, try removing the memory object entirely (it's optional)
+          const withoutMemory = str.replace(/"memory"\s*:\s*\{[^}]*(\{[^}]*\}[^}]*)*\}\s*,?/g, '')
+          try {
+            return JSON.parse(withoutMemory)
+          } catch (e3) {
+            throw e // Throw original error
+          }
+        }
+      }
+    }
+
+    data = tryParseJSON(jsonStr)
+    
+    if (!Array.isArray(data)) {
+      data = [data]
+    }
+
+    // Sanitize and split actions to ensure narration/dialogue separation
+    data = sanitizeActions(data)
+    
+  } catch (e) {
+    console.warn('JSON parse failed, attempting text fallback parsing...', e)
+    
+    try {
+      data = parseFallback(responseStr)
+      if (data.length === 0) {
+         throw new Error('Fallback parsing yielded no actions')
+      }
+      logDebug('Fallback parsing successful:', data)
+      
+      // Enrich with animations via AI
+      data = await enrichActionsWithAnimations(data)
+      
+      // Fallback was successful, but we should remind the model to use JSON next time
+      needsJsonReminder.value = true
+      
+    } catch (fallbackError) {
+      console.error('Failed to parse JSON response and Fallback failed', e, fallbackError)
+      throw new Error('JSON_PARSE_ERROR')
+    }
+  }
+
+  logDebug('Parsed Action Sequence:', data)
+
+  for (const action of data) {
+    if (isStopped.value) {
+      logDebug('Execution stopped by user.')
+      break
+    }
+    await executeAction(action)
+  }
+}
+
+const getCharacterName = (id: string): string | null => {
+  if (!id || id === 'none') return null
+  if (id === 'current') return getCharacterName(market.live2d.current_id)
+
+  const char = l2d.find((c) => c.id.toLowerCase() === id.toLowerCase() || c.name.toLowerCase() === id.toLowerCase())
+
+  return char ? char.name : id
+}
+
+const playTTS = async (text: string, characterName: string) => {
+  if (!ttsEnabled.value || !characterName) return
+
+  // Clean up character name to match filename
+  // Remove special chars, replace spaces with underscores
+  // e.g. "Anis: Sparkling Summer" -> "anis_sparkling_summer.wav"
+  const cleanName = characterName.toLowerCase().replace(/[^\w\s]/gi, '').replace(/\s+/g, '_')
+  const voiceFile = `${cleanName}.wav`
+  
+  logDebug(`[TTS] Requesting TTS for ${characterName} (${voiceFile})`)
+
+  try {
+    let baseUrl = ttsEndpoint.value
+    // Clean up the base URL to ensure we have the root (remove /v1, /api, trailing slashes)
+    baseUrl = baseUrl.replace(/\/$/, '').replace(/\/v1$/, '').replace(/\/api$/, '')
+    
+    // Handle CORS in dev mode by using Vite proxy
+    // This requires the proxy to be configured in vite.config.ts
+    if (import.meta.env.DEV && (baseUrl.includes('localhost:7851') || baseUrl.includes('127.0.0.1:7851'))) {
+        baseUrl = '/alltalk'
+    }
+
+    // Use Standard API via proxy (better support for custom filenames)
+    const url = `${baseUrl}/api/tts-generate`
+    
+    logDebug(`[TTS] Calling URL: ${url}`)
+
+    const params = new URLSearchParams()
+    params.append('text_input', text)
+    params.append('character_voice_gen', voiceFile)
+    params.append('narrator_enabled', 'false')
+    params.append('text_not_inside', 'character')
+    params.append('language', 'en')
+    params.append('output_file_name', 'nikke_tts_gen')
+    params.append('output_file_timestamp', 'true')
+    params.append('autoplay', 'false')
+    params.append('autoplay_volume', '0.8')
+    params.append('text_filtering', 'standard')
+
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: params
+    })
+
+    if (!response.ok) {
+       const errText = await response.text()
+       console.error(`[TTS] API Error: ${response.status} - ${errText}`)
+       return
+    }
+
+    const data = await response.json()
+    
+    if (data.status === 'generate-success' && data.output_file_url) {
+        // Construct audio URL using the same base (proxy or direct)
+        // data.output_file_url usually starts with /audio/
+        const audioUrl = `${baseUrl}${data.output_file_url}`
+        const audio = new Audio(audioUrl)
+        audio.volume = 1.0
+        
+        // Sync yapping with audio
+        audio.onplay = () => {
+            market.live2d.isYapping = true
+        }
+        audio.onended = () => {
+            market.live2d.isYapping = false
+        }
+        audio.onerror = () => {
+            market.live2d.isYapping = false
+        }
+        
+        audio.play().catch(e => {
+            console.error('[TTS] Playback failed:', e)
+            market.live2d.isYapping = false
+        })
+    }
+  } catch (e) {
+    console.error('[TTS] Error:', e)
+  }
+}
+
+const executeAction = async (data: any) => {
+  logDebug('Executing Action:', data)
+
+  // Always reset yapping state to ensure the watcher triggers for the new turn
+  market.live2d.isYapping = false
+  await new Promise((r) => setTimeout(r, 100))
+
+  // Log debug info
+  if (data.debug_info) {
+    logDebug('[AI Debug Info]:', data.debug_info)
+  }
+
+  if (data.memory) {
+    logDebug('[AI Memory Update]:', data.memory)
+    // Filter out any honorific fields and Commander from relationships - we use the static honorifics.json for those
+    const filteredMemory: Record<string, any> = {}
+    for (const [charName, profile] of Object.entries(data.memory)) {
+      if (typeof profile === 'object' && profile !== null) {
+        const { honorific_for_commander, honorific_to_commander, honorific, relationships, ...rest } = profile as any
+        
+        // Filter Commander out of relationships if present
+        let filteredRelationships = relationships
+        if (relationships && typeof relationships === 'object') {
+          const { Commander, commander, ...otherRelationships } = relationships
+          filteredRelationships = Object.keys(otherRelationships).length > 0 ? otherRelationships : undefined
+        }
+        
+        filteredMemory[charName] = {
+          ...rest,
+          ...(filteredRelationships && { relationships: filteredRelationships })
+        }
+      } else {
+        filteredMemory[charName] = profile
+      }
+    }
+    characterProfiles.value = { ...characterProfiles.value, ...filteredMemory }
+  }
+
+  // Resolve Character ID EARLY to ensure TTS gets the right name
+  let effectiveCharId = data.character
+  
+  // Handle 'current' character resolution and speaker detection
+  if (effectiveCharId === 'current') {
+      // Check for speaker override in text
+      const speakerMatch = data.text ? data.text.match(/^\s*(?:\*\*)?([^*]+?)(?:\*\*)?\s*:\s*/) : null
+      if (speakerMatch) {
+        const speakerName = speakerMatch[1].trim()
+        const charObj = l2d.find((c) => c.name.toLowerCase() === speakerName.toLowerCase())
+        if (charObj && charObj.id !== market.live2d.current_id) {
+             logDebug(`[Chat] Detected speaker '${speakerName}' in text. Switching from 'current' to: ${charObj.id}`)
+             effectiveCharId = charObj.id
+             // Update data.character so subsequent logic uses the new ID
+             data.character = effectiveCharId
+        } else {
+             effectiveCharId = market.live2d.current_id
+        }
+      } else {
+         effectiveCharId = market.live2d.current_id
+      }
+  }
+
+  // Add text to chat
+  if (data.text) {
+    let content = data.text
+      
+    // Add speaker name if speaking
+    if (data.speaking) {
+      let name = null
+        
+      if (effectiveCharId === 'none') {
+        // If character is explicitly none, it's likely the Commander in Story Mode
+        if (mode.value === 'story') {
+          name = 'Commander'
+        }
+      } else {
+        name = getCharacterName(effectiveCharId)
+      }
+
+      if (name) {
+        // Trigger TTS
+        if (ttsEnabled.value) {
+          playTTS(data.text, name)
+        }
+
+        // Check if the text already starts with the name to avoid duplication
+        // We check for "Name:", "**Name:**", "Name :", etc.
+        const escapedName = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        const namePattern = new RegExp(`^\\**${escapedName}\\**\\s*:`, 'i')
+        
+        // Also check for ANY bolded name at the start (e.g. "**Chime:**") to prevent double naming
+        // if the AI messed up the character ID but got the text right.
+        const anyNamePattern = /^\*\*[^*]+\*\*:/
+
+        if (!namePattern.test(content) && !anyNamePattern.test(content)) {
+          content = `**${name}:** ${content}`
+        }
+      }
+    }
+
+    chatHistory.value.push({ role: 'assistant', content: content })
+    scrollToBottom()
+  }
+
+  // Update Character
+  if (data.character) {
+    // Handle 'none' character
+    if (data.character === 'none') {
+      logDebug('[Chat] Hiding character sprite')
+      market.live2d.isVisible = false
+    } 
+    // Handle specific character switch (including resolved 'current')
+    else {
+      // Force 'none' if in Story Mode and character is Commander
+      if (mode.value === 'story' && (data.character.toLowerCase().includes('commander') || data.character === 'c000')) {
+        logDebug('[Chat] Hiding Commander sprite in Story Mode')
+        market.live2d.isVisible = false
+      } else {
+        // Find character object
+        // Case-insensitive search for name or ID
+        const charObj = l2d.find((c) => 
+          c.id.toLowerCase() === data.character.toLowerCase() || 
+            c.name.toLowerCase() === data.character.toLowerCase()
+        )
+          
+        if (charObj) {
+          // Ensure visible
+          logDebug('[Chat] Setting visibility to true')
+          market.live2d.isVisible = true
+            
+          // Check if character is already active to avoid unnecessary reload
+          if (charObj.id === market.live2d.current_id) {
+            logDebug(`[Chat] Character ${charObj.name} (${charObj.id}) is already active. Skipping reload.`)
+            // Force visibility update again just in case
+            market.live2d.isVisible = true
+          } else {
+            logDebug(`[Chat] Switching character to: ${data.character}`)
+            const previousLoadTime = market.live2d.finishedLoading
+            market.live2d.change_current_spine(charObj)
+              
+            // Wait for load to complete
+            logDebug('[Chat] Waiting for character load...')
+            await new Promise<void>((r) => {
+              const unwatch = watch(() => market.live2d.finishedLoading, (newVal) => {
+                if (newVal > previousLoadTime) {
+                  logDebug('[Chat] Character loaded.')
+                  unwatch()
+                  // Add a small delay to ensure the spine player is fully ready to accept new tracks
+                  setTimeout(r, 100)
+                }
+              })
+              // Safety timeout
+              setTimeout(() => {
+                unwatch()
+                r()
+              }, 10000)
+            })
+          }
+        } else {
+          console.warn(`[Chat] Character not found: ${data.character}`)
+        }
+      }
+    }
+  }
+    
+  // Play Animation
+  if (data.animation) {
+    logDebug(`[Chat] Requesting animation: ${data.animation}`)
+    market.live2d.current_animation = data.animation
+  }
+    
+  // Speaking
+  let calculatedYapDuration = 0
+  if (data.speaking && !ttsEnabled.value) {
+    logDebug('Starting yap')
+      
+    // Clear previous timeout if exists
+    if (yapTimeoutId) {
+      clearTimeout(yapTimeoutId)
+      yapTimeoutId = null
+    }
+      
+    market.live2d.isYapping = true
+      
+    // Calculate yap duration based on text length
+    // Approx 60ms per character + 300ms base (Slightly faster than reading speed for natural feel)
+    let yapDuration = 3000
+    if (data.text) {
+      yapDuration = Math.max(1000, data.text.length * 60 + 300)
+    } else if (data.duration) {
+      yapDuration = data.duration
+    }
+    calculatedYapDuration = yapDuration
+      
+    logDebug(`Yap duration calculated: ${yapDuration}ms`)
+      
+    // Auto-stop yap after calculated duration
+    yapTimeoutId = setTimeout(() => {
+      if (market.live2d.isYapping) {
+        logDebug('Auto-stopping yap based on text length')
+        market.live2d.isYapping = false
+      }
+      yapTimeoutId = null
+    }, yapDuration)
+  }
+
+  const duration = data.duration || 3000
+    
+  if (playbackMode.value === 'manual') {
+    logDebug('Waiting for user input (Manual Mode)')
+    waitingForNext.value = true
+    await new Promise<void>((r) => {
+      nextActionResolver = r
+    })
+    // Stop yapping when moving to next (just in case)
+    if (data.speaking) {
+      market.live2d.isYapping = false
+      if (yapTimeoutId) {
+        clearTimeout(yapTimeoutId)
+        yapTimeoutId = null
+      }
+    }
+  } else {
+    // Auto Mode
+    // If text is long, ensure we wait long enough to read it
+    let autoDuration = Math.max(duration, 2000)
+    if (data.text) {
+      // Reading speed approx 50ms per char + base
+      const readDuration = data.text.length * 50 + 1500
+      autoDuration = Math.max(autoDuration, readDuration)
+    }
+
+    // Ensure we wait at least 2 seconds after yapping finishes
+    if (data.speaking && calculatedYapDuration > 0) {
+      autoDuration = Math.max(autoDuration, calculatedYapDuration + 2000)
+    }
+      
+    logDebug(`Waiting for ${autoDuration}ms (Auto Mode)`)
+    await new Promise<void>((resolve) => {
+      setTimeout(() => {
+        if (data.speaking) {
+          logDebug('Stopping yap (Auto Mode transition)')
+          market.live2d.isYapping = false
+        }
+        resolve()
+      }, autoDuration)
+    })
+  }
+}
+
+const resetSession = () => {
+  if (chatHistory.value.length === 0) return
+  
+  const confirmed = window.confirm('Are you sure you want to reset the story? All unsaved progress will be lost.')
+  if (confirmed) {
+    chatHistory.value = []
+    characterProfiles.value = {}
+    storySummary.value = ''
+    lastSummarizedIndex.value = 0
+    lastPrompt.value = ''
+    market.live2d.isVisible = false
+  }
+}
+
+const summarizeChunk = async (messages: { role: string, content: string }[]) => {
+  if (messages.length === 0) return
+
+  const textToSummarize = messages.map(m => `${m.role}: ${m.content}`).join('\n\n')
+  const prompt = `Summarize the following story events concisely, focusing on key plot points and character developments. Do not lose important details.\n\n${textToSummarize}`
+
+  const systemMsg = { role: 'system', content: 'You are a helpful assistant that summarizes story events.' }
+  const userMsg = { role: 'user', content: prompt }
+  const msgs = [systemMsg, userMsg]
+
+  try {
+    let summary = ''
+    if (apiProvider.value === 'perplexity') {
+      summary = await callPerplexity(msgs, false)
+    } else if (apiProvider.value === 'gemini') {
+      summary = await callGemini(msgs, false)
+    } else if (apiProvider.value === 'openrouter') {
+      summary = await callOpenRouter(msgs, false)
+    }
+    
+    if (summary) {
+      if (storySummary.value) {
+        storySummary.value += '\n\n' + summary
+      } else {
+        storySummary.value = summary
+      }
+    }
+  } catch (e) {
+    console.error('Failed to summarize chunk:', e)
+  }
+}
+</script>
+
+<style scoped lang="less">
+.chat-interface {
+  position: absolute;
+  top: -15px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; // Let clicks pass through to visualizer
+  z-index: 1000;
+}
+
+.settings-btn {
+  position: absolute;
+  top: 150px;
+  right: 20px;
+  pointer-events: auto;
+  z-index: 1001;
+
+  @media (max-width: 768px) {
+    top: 150px;
+    right: 10px;
+  }
+}
+
+.help-btn {
+  position: absolute;
+  top: 150px;
+  right: 70px;
+  pointer-events: auto;
+  z-index: 1001;
+
+  @media (max-width: 768px) {
+    top: 150px;
+    right: 60px;
+  }
+}
+
+.chat-container {
+  position: absolute;
+  bottom: 20px;
+  left: 300px;
+  width: 400px;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 10px;
+  padding: 10px;
+  pointer-events: auto;
+  transition: opacity 0.3s;
+
+  @media (max-width: 768px) {
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
+    width: auto;
+    max-height: 50vh;
+  }
+}
+
+.chat-history {
+  flex: 1;
+  overflow-y: auto;
+  margin-bottom: 10px;
+  max-height: 400px;
+  
+  @media (max-width: 768px) {
+    max-height: none;
+  }
+
+  .message {
+    margin-bottom: 8px;
+    padding: 8px;
+    border-radius: 8px;
+    position: relative;
+    
+    &.user {
+      background: rgba(0, 123, 255, 0.5);
+      align-self: flex-end;
+      max-width: 85%;
+    }
+    
+    &.assistant {
+      background: rgba(255, 255, 255, 0.1);
+      max-width: 95%;
+    }
+    
+    &.system {
+      color: #ff4d4f;
+      font-size: 0.8em;
+    }
+    
+    .message-content {
+      color: white;
+      word-wrap: break-word;
+
+      :deep(img) {
+        max-width: 100%;
+        height: auto;
+      }
+    }
+
+    .message-actions {
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      opacity: 0.5;
+      transition: opacity 0.2s;
+      
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.chat-input-area {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+    
+    .n-input {
+      width: 100%;
+      order: 1;
+    }
+    
+    .n-button {
+      flex: 1;
+      order: 2;
+    }
+  }
+}
+
+.session-controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.guide-content {
+  padding: 20px;
+
+  h3 {
+    margin-top: 16px;
+    margin-bottom: 8px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  ul {
+    margin: 0;
+    padding-left: 20px;
+    list-style-type: disc;
+
+    li {
+      margin-bottom: 8px;
+    }
+  }
+
+  code {
+    background: rgba(128, 128, 128, 0.2);
+    padding: 2px 4px;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/src/components/views/Credits.vue b/src/components/views/Credits.vue
index 9ad5077..b00060f 100644
--- a/src/components/views/Credits.vue
+++ b/src/components/views/Credits.vue
@@ -35,6 +35,11 @@ onMounted(() => {
 const market = useMarket()
 
 const external: help[] = [
+  {
+    name: 'Rhystic1',
+    contribution: 'Story/Roleplaying Generator',
+    tier: 'skyblue2'
+  },
   {
     name: 'Bingle',
     contribution: 'Fixing favorite assets through Spine Pro.',
diff --git a/src/components/views/L2D.vue b/src/components/views/L2D.vue
index d354a87..df76949 100644
--- a/src/components/views/L2D.vue
+++ b/src/components/views/L2D.vue
@@ -13,9 +13,14 @@ import { theme } from '@/utils/enum/globalParams'
 import { onUnmounted } from 'vue'
 import WrapperPc from '@/components/common/Spine/WrapperPC.vue'
 import WrapperMobile from '@/components/common/Spine/WrapperMobile.vue'
+import { onMounted } from 'vue'
 
 const market = useMarket()
 
+if (!market.live2d.current_id) {
+  market.live2d.current_id = 'c010'
+}
+
 onUnmounted(() => {
   document.body.style.backgroundColor = theme.BACKGROUND_COLOR
 })
diff --git a/src/components/views/StoryGenerator.vue b/src/components/views/StoryGenerator.vue
new file mode 100644
index 0000000..c963488
--- /dev/null
+++ b/src/components/views/StoryGenerator.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="l2dGlobal">
+    <Loader />
+    <ChatInterface />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Loader from '@/components/common/Spine/Loader.vue'
+import ChatInterface from '@/components/views/ChatInterface.vue'
+import { theme } from '@/utils/enum/globalParams'
+import { onUnmounted } from 'vue'
+import { useMarket } from '@/stores/market'
+
+const market = useMarket()
+
+market.live2d.current_id = ''
+
+onUnmounted(() => {
+  document.body.style.backgroundColor = theme.BACKGROUND_COLOR
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index fb9f9da..11a67b4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ import Credits from '@/components/views/Credits.vue'
 import Tools from '@/components/views/Tools.vue'
 import Chibi from '@/components/views/Chibi.vue'
 import Gallery from '@/components/views/Gallery.vue'
+import StoryGenerator from '@/components/views/StoryGenerator.vue'
 import TierListMaker from '@/components/views/Tierlistmaker.vue'
 import HighAndLowQualityAssets from '@/components/views/notices/HighAndLowQualityAssets.vue'
 import AttachmentEditor from '@/components/views/notices/AttachmentEditor.vue'
@@ -65,6 +66,11 @@ const router = createRouter({
       name: 'gallery',
       component: Gallery
     },
+    {
+      path: '/story-gen',
+      name: 'story-gen',
+      component: StoryGenerator
+    },
     // {
     //   path: '/tierlistmaker',
     //   name: 'tierlistmaker',
diff --git a/src/stores/live2dStore.ts b/src/stores/live2dStore.ts
index 808d0da..a736828 100644
--- a/src/stores/live2dStore.ts
+++ b/src/stores/live2dStore.ts
@@ -17,8 +17,12 @@ export const useLive2dStore = defineStore('live2d', () => {
   const HQassets = ref(true)
   const canAssetTalk = ref(false)
   const canYap = ref(true)
+  const yapEnabled = ref(true)
   const isYapping = ref(false)
   const attachments = ref<AttachmentInterface[]>([])
+  const animations = ref<string[]>([])
+  const current_animation = ref<string>('idle')
+  const isVisible = ref(true)
   const updateAttachments = ref(0)
   const applyAttachments = ref(0)
   const selectionAttachments = ref<'select' | 'unselect'>('select')
@@ -313,8 +317,12 @@ export const useLive2dStore = defineStore('live2d', () => {
     HQassets,
     canAssetTalk,
     canYap,
+    yapEnabled,
     isYapping,
     attachments,
+    animations,
+    current_animation,
+    isVisible,
     updateAttachments,
     applyAttachments,
     triggerUpdateAttachments,
diff --git a/src/utils/animationMappings.ts b/src/utils/animationMappings.ts
new file mode 100644
index 0000000..41b2f25
--- /dev/null
+++ b/src/utils/animationMappings.ts
@@ -0,0 +1,30 @@
+export const animationMappings: Record<string, string[]> = {
+  'happy': [
+    'delight', 'joy', 'smile', 'laugh', 'excited', 'glee', 'grin', 'chuckle', 'giggle', 'smirk', 
+    'beam', 'radiant', 'happy', 'content', 'pleased', 'amused', 'cheerful', 'triumph'
+  ],
+  'cry': [
+    'cry', 'crying', 'weep', 'tears',
+  ],
+  'sad': [
+    // High intensity (sad) - actual sadness/very sad/almost crying
+    'depressed', 'sorrow', 'tear', 'gloom', 'worry', 'sobbing', 'devastated', 'heartbroken', 
+    'hurt', 'pain', 'agony', 'grief', 'mourn', 'sad', 'unhappy', 'melancholy', 
+    'despair', 'hopeless', 'anguish', 'misery',
+    // Low intensity (sad_02) - about to cry, watery eyes
+    'teary', 'upset', 'emotional', 'misty', 'choked up', 'pout', 'whine'
+  ],
+  'angry': [
+    // High intensity (angry_02)
+    'furious', 'rage', 'shouting', 'yelling', 'livid', 'outraged', 'irate', 'mad', 'fury', 
+    'anger', 'seethe', 'hiss', 'growl', 'snap', 'bitter', 'resent', 'hate', 'loathe', 'vengeful',
+    // Low intensity (angry_03)
+    'stern', 'frown', 'serious', 'disapproving', 'scowl', 'glare', 'cross',
+    // Medium intensity (angry)
+    'annoyed', 'irritated', 'bothered', 'grumpy', 'frustrated', 'groan', 'disgust'
+  ],
+  'surprise': ['shock', 'surprised', 'startle', 'gasp', 'wide-eyed', 'blink', 'stunned', 'amazed', 'astonished', 'aback', 'confused', 'puzzled'],
+  'shy': ['blush', 'embarrassed', 'shy', 'bashful', 'timid', 'stutter', 'stammer', 'fluster', 'nervous', 'anxious'],
+  'no': ['frowning', 'disapproval', 'skeptical', 'indifferent', 'unimpressed', 'shake head', 'deny', 'refuse', 'reject', 'doubt', 'sigh'],
+  'idle': ['stand', 'wait', 'default', 'calm', 'neutral']
+}
diff --git a/src/utils/interfaces/contributor.ts b/src/utils/interfaces/contributor.ts
index 8b45ca1..15b51b2 100644
--- a/src/utils/interfaces/contributor.ts
+++ b/src/utils/interfaces/contributor.ts
@@ -1,5 +1,5 @@
 export interface help {
   name: string
   contribution: string
-  tier: 'gold' | 'silver' | 'amethyst' | 'pink' | 'SELEKCJONER' | 'skyblue' | null
+  tier: string | null
 }
diff --git a/src/utils/json/honorifics.json b/src/utils/json/honorifics.json
new file mode 100644
index 0000000..d54c7be
--- /dev/null
+++ b/src/utils/json/honorifics.json
@@ -0,0 +1,127 @@
+{
+  "Emma": "Commander",
+  "Privaty": "Commander",
+  "Privaty: Unkind Maid": "Master",
+  "Signal": "Commander",
+  "Poli": "Commander",
+  "Miranda": "Commander",
+  "Brid": "Commander",
+  "Soline": "Commander",
+  "Diesel": "Commander",
+  "Vesti": "Commander",
+  "Eunhwa": "Weakling",
+  "Eunhwa: Tactical Upgrade": "Junior Blockhead",
+  "Guillotine": "Partner",
+  "Maiden": "Commander",
+  "D": "Commander",
+  "D: Killer Wife": "Honey",
+  "Helm": "Subordinate",
+  "Mast": "Captain",
+  "Mast: Romantic Maid": "Master Captain",
+  "Marciana": "Commander",
+  "Quiry": "Commander",
+  "Rapi": "Commander",
+  "Neon": "Master",
+  "Delta": "Commander",
+  "Anchor": "Captain",
+  "Anchor: Innocent Maid": "Master",
+  "Maxwell": "Cutie Pie",
+  "Yuni": "Commander",
+  "Liter": "Greenhorn",
+  "Julia": "Conductor",
+  "Centi": "Boss",
+  "Drake": "Moron",
+  "Crow": "Commander",
+  "Pepper": "Commander",
+  "Admi": "Commander",
+  "Jackal": "Commander",
+  "Laplace": "Birdie",
+  "Guilty": "Counselor",
+  "Sin": "Instructor",
+  "Quency": "Instructor",
+  "Epinel": "Coach",
+  "Naga": "Teacher",
+  "Tia": "Teacher",
+  "Mihara": "Commander",
+  "Anne": "Teacher",
+  "Ether": "No. 7",
+  "Sugar": "Partner",
+  "Exia": "Noob",
+  "Alice": "Rabbity",
+  "Blanc": "Pit Boss",
+  "Noir": "Pit Boss",
+  "Folkwang": "Coach",
+  "Sakura": "Commander-kun",
+  "Viper": "Honey",
+  "Cocoa": "Master",
+  "Soda": "Master",
+  "Biscuit": "Trainer",
+  "Rei": "Teacher",
+  "Aria": "Maestro",
+  "Noise": "Producer",
+  "Rumani": "Gym Rat",
+  "Papillon": "Honey",
+  "Scarlet": "My Lord",
+  "Dorothy": "Your Grace",
+  "Rapunzel": "Believer",
+  "Modernia": "Commander",
+  "Red Hood": "Handsome",
+  "Snow White": "Commander",
+  "Ludmilla": "Servant",
+  "Noah": "Impostor",
+  "Novel": "Watson",
+  "Harran": "Follower",
+  "Isabel": "Darling",
+  "Nihilister": "Human",
+  "Rupee": "Sweetie",
+  "Dolla": "Client",
+  "Belorta": "Old-Timer",
+  "Mica": "Old-Timer",
+  "Nero": "Scoops",
+  "Milk": "Pal",
+  "Tove": "Survivalist",
+  "Neve": "Burly Bear",
+  "Rouge": "Highroller",
+  "Frima": "You",
+  "Crown": "Advisor",
+  "Flora": "Blossom",
+  "Bready": "Bonne Bouche",
+  "Moran": "Cadet",
+  "Sora": "Captain",
+  "Cielo": "Captain",
+  "Sky": "Captain",
+  "Bay": "Coach",
+  "Clay": "Coach",
+  "Only One": "Daddy",
+  "Cecil": "Darling",
+  "Mori": "Evaluator",
+  "Nayuta": "Great Hero",
+  "Chatterbox": "Human",
+  "Liberalio": "Human",
+  "Behemoth": "Human",
+  "Mecha Shifty": "Human",
+  "Ade": "Master",
+  "Rosanna": "Mister",
+  "Phantom": "Monsieur",
+  "Crust": "Mr. Gourmand",
+  "Yulha": "Newbie",
+  "Jien": "No. 7",
+  "Cinderella": "Prince",
+  "Little Mermaid": "Prince",
+  "Chime": "Rapscallion",
+  "Yan": "Rookie",
+  "Trina": "Sun",
+  "Grave": "Superhuman",
+  "Einkk": "Sweetie",
+  "Ein": "Teacher",
+  "N102": "Teacher",
+  "Zwei": "Teacher",
+  "Ziz": "Young Man",
+  "Bahamut": "Young Man",
+  "Leona": "Zoo Keeper",
+  "Asuka: WILLE": "Lilin",
+  "Volume": "Manager",
+  "K": "Commander",
+  "Arcana": "Commander",
+  "Elegg": "Mr. Commander"
+}
diff --git a/src/utils/json/updateLog.json b/src/utils/json/updateLog.json
index d6fa4d9..96796ac 100644
--- a/src/utils/json/updateLog.json
+++ b/src/utils/json/updateLog.json
@@ -573,10 +573,14 @@
   },
   {
     "date": "November 22nd 2025",
-    "update": "Galley: Updated chapter and albums. added chapter 41 & 42, "
+    "update": "Galley: Updated chapter and albums. added chapter 41 & 42, goddess fall and blank ticket galleries"
   },
   {
     "date": "December 6th 2025",
     "update": "Live2d: Added christmas diesel, blanc, brid and bready"
+  },
+  {
+    "date": "December 6th 2025",
+    "update": "Added the Story/Roleplaying Generator feature. Developped entirely by Rhystic1 on GitHub."
   }
 ]
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 2fb21e9..1867a81 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,5 +11,14 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  server: {
+    proxy: {
+      '/alltalk': {
+        target: 'http://127.0.0.1:7851',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/alltalk/, '')
+      }
+    }
   }
 })