diff --git a/.gitignore b/.gitignore
index 1999b4ac7..bbb1e2038 100644
--- a/.gitignore
+++ b/.gitignore
@@ -134,3 +134,5 @@ apps/stage-tamagotchi/electron.vite.config.*.mjs
 
 # Tools - Obsidian
 .obsidian/
+
+docs/ai/context/verifications/
diff --git a/apps/server/src/app.ts b/apps/server/src/app.ts
index c3caa5ade..72a91526b 100644
--- a/apps/server/src/app.ts
+++ b/apps/server/src/app.ts
@@ -63,6 +63,7 @@ import { createRequestLogService } from './services/request-log'
 import { createStripeService } from './services/stripe'
 import { createUserDeletionService } from './services/user-deletion'
 import { ApiError, createInternalError, createUnauthorizedError } from './utils/error'
+import { nanoid } from './utils/id'
 import { getTrustedOrigin } from './utils/origin'
 
 interface AppDeps {
@@ -113,7 +114,12 @@ export async function buildApp(deps: AppDeps) {
 
   // WebSocket setup — must be registered BEFORE bodyLimit middleware
   const { injectWebSocket, upgradeWebSocket } = createNodeWebSocket({ app })
-  const chatWsSetup = createChatWsHandlers(deps.chatService, deps.redis, deps.otel?.engagement ?? null)
+  // Per-process stable id used by the chat-ws sub callback to skip echoes of
+  // its own publishes. Falls back to a random nanoid when ops do not provide
+  // SERVER_INSTANCE_ID, which is fine because we only need uniqueness across
+  // simultaneously-running api instances, not across restarts.
+  const instanceId = process.env.SERVER_INSTANCE_ID || nanoid()
+  const chatWsSetup = createChatWsHandlers(deps.chatService, deps.redis, instanceId, deps.otel?.engagement ?? null)
 
   app.get('/ws/chat', upgradeWebSocket(async (c) => {
     const token = c.req.query('token')
diff --git a/apps/server/src/routes/chat-ws/index.ts b/apps/server/src/routes/chat-ws/index.ts
index ad115babe..737800a64 100644
--- a/apps/server/src/routes/chat-ws/index.ts
+++ b/apps/server/src/routes/chat-ws/index.ts
@@ -52,6 +52,7 @@ function broadcastToLocalDevices(userId: string, excludeCtx: HonoWsInvocableEven
 export function createChatWsHandlers(
   chatService: ChatService,
   redis: Redis,
+  instanceId: string,
   metrics?: EngagementMetrics | null,
 ) {
   // TODO: Separate connection lifecycle, cross-instance broadcast, and RPC orchestration into smaller modules.
@@ -62,8 +63,16 @@ export function createChatWsHandlers(
   sub.on('message', (_channel: string, message: string) => {
     try {
       const data = parseChatBroadcastMessage(message)
-      // Deliver to all local connections of this user (no excludeCtx since the
-      // sender is on a different instance)
+      // Skip messages we ourselves published. ioredis pub/sub delivers to
+      // every subscriber, including the publishing connection — without
+      // this filter the publisher's local peers would receive each message
+      // twice (once via in-process broadcastToLocalDevices, once via the
+      // sub callback) and the sender's own ctx would receive an unwanted
+      // echo.
+      if (data.originInstanceId === instanceId)
+        return
+      // Cross-instance delivery: hand off to local peers of this user.
+      // No excludeCtx because the sender lives on a different instance.
       broadcastToLocalDevices(data.userId, null, newMessages, data.payload)
     }
     catch (err) {
@@ -92,7 +101,7 @@ export function createChatWsHandlers(
   /** Publish a broadcast message so other instances can deliver it. */
   function publishBroadcast(userId: string, payload: Parameters<typeof createChatBroadcastMessage>[1]) {
     const channel = userChatBroadcastRedisKey(userId)
-    const message = createChatBroadcastMessage(userId, payload)
+    const message = createChatBroadcastMessage(userId, payload, instanceId)
     redis.publish(channel, JSON.stringify(message)).catch((err) => {
       log.withError(err).error('Failed to publish broadcast message')
     })
diff --git a/apps/server/src/utils/chat-broadcast.ts b/apps/server/src/utils/chat-broadcast.ts
index fbb4d91fe..98d851a37 100644
--- a/apps/server/src/utils/chat-broadcast.ts
+++ b/apps/server/src/utils/chat-broadcast.ts
@@ -8,6 +8,16 @@ export interface ChatBroadcastPayload {
 export interface ChatBroadcastMessage {
   userId: string
   payload: ChatBroadcastPayload
+  /**
+   * Stable identifier of the api instance that published this broadcast.
+   *
+   * The subscribing instance compares it with its own instance id and skips
+   * delivery to local peers when they match — the publisher already
+   * delivered locally via `broadcastToLocalDevices` and re-delivering would
+   * echo every message twice on the originating instance (and once extra on
+   * the sender's own ctx).
+   */
+  originInstanceId: string
 }
 
 function assertNonEmptyString(value: unknown, fieldName: string): string {
@@ -24,9 +34,26 @@ function assertFiniteNumber(value: unknown, fieldName: string): number {
   return value
 }
 
+/**
+ * Build a normalized chat broadcast message ready for `redis.publish`.
+ *
+ * Use when:
+ * - The chat-ws route has just persisted new messages and needs to fan them
+ *   out to other api instances over the user's pub/sub channel.
+ *
+ * Expects:
+ * - `originInstanceId` is the publisher's stable instance id (env or nanoid
+ *   fallback). It must be non-empty so the echo-skip filter on the
+ *   subscriber side is reliable.
+ *
+ * Returns:
+ * - The validated message object; callers `JSON.stringify` it before
+ *   `redis.publish`.
+ */
 export function createChatBroadcastMessage(
   userId: string,
   payload: ChatBroadcastPayload,
+  originInstanceId: string,
 ): ChatBroadcastMessage {
   return {
     userId: assertNonEmptyString(userId, 'chat broadcast userId'),
@@ -36,9 +63,24 @@ export function createChatBroadcastMessage(
       fromSeq: assertFiniteNumber(payload.fromSeq, 'chat broadcast payload.fromSeq'),
       toSeq: assertFiniteNumber(payload.toSeq, 'chat broadcast payload.toSeq'),
     },
+    originInstanceId: assertNonEmptyString(originInstanceId, 'chat broadcast originInstanceId'),
   }
 }
 
+/**
+ * Parse a raw redis pub/sub message back into a validated broadcast message.
+ *
+ * Use when:
+ * - A subscribing api instance received a message and needs to decide
+ *   whether to deliver it to local peers.
+ *
+ * Expects:
+ * - The raw message is JSON produced by `createChatBroadcastMessage`.
+ *
+ * Returns:
+ * - A fully validated `ChatBroadcastMessage`. Throws on schema violations so
+ *   bad messages do not silently corrupt the local registry.
+ */
 export function parseChatBroadcastMessage(raw: string): ChatBroadcastMessage {
   let parsed: unknown
   try {
@@ -67,6 +109,7 @@ export function parseChatBroadcastMessage(raw: string): ChatBroadcastMessage {
       fromSeq: assertFiniteNumber(payloadRecord.fromSeq, 'chat broadcast payload.fromSeq'),
       toSeq: assertFiniteNumber(payloadRecord.toSeq, 'chat broadcast payload.toSeq'),
     },
+    assertNonEmptyString(message.originInstanceId, 'chat broadcast originInstanceId'),
   )
 }
 
diff --git a/apps/server/src/utils/tests/chat-broadcast.test.ts b/apps/server/src/utils/tests/chat-broadcast.test.ts
index 56867113d..ee7d1ae9f 100644
--- a/apps/server/src/utils/tests/chat-broadcast.test.ts
+++ b/apps/server/src/utils/tests/chat-broadcast.test.ts
@@ -9,7 +9,7 @@ describe('chat broadcast utils', () => {
       messages: [{ id: 'msg-1' }],
       fromSeq: 3,
       toSeq: 4,
-    })).toEqual({
+    }, 'instance-A')).toEqual({
       userId: 'user-1',
       payload: {
         chatId: 'chat-1',
@@ -17,6 +17,7 @@ describe('chat broadcast utils', () => {
         fromSeq: 3,
         toSeq: 4,
       },
+      originInstanceId: 'instance-A',
     })
   })
 
@@ -26,7 +27,14 @@ describe('chat broadcast utils', () => {
       messages: [],
       fromSeq: 1,
       toSeq: 1,
-    })).toThrow('chat broadcast userId must be a non-empty string')
+    }, 'instance-A')).toThrow('chat broadcast userId must be a non-empty string')
+
+    expect(() => createChatBroadcastMessage('user-1', {
+      chatId: 'chat-1',
+      messages: [],
+      fromSeq: 1,
+      toSeq: 1,
+    }, '')).toThrow('chat broadcast originInstanceId must be a non-empty string')
   })
 
   it('parses a valid broadcast message payload', () => {
@@ -38,6 +46,7 @@ describe('chat broadcast utils', () => {
         fromSeq: 9,
         toSeq: 12,
       },
+      originInstanceId: 'instance-B',
     }))).toEqual({
       userId: 'user-2',
       payload: {
@@ -46,6 +55,7 @@ describe('chat broadcast utils', () => {
         fromSeq: 9,
         toSeq: 12,
       },
+      originInstanceId: 'instance-B',
     })
   })
 
@@ -59,6 +69,7 @@ describe('chat broadcast utils', () => {
         fromSeq: 1,
         toSeq: 1,
       },
+      originInstanceId: 'instance-A',
     }))).toThrow('chat broadcast userId must be a non-empty string')
     expect(() => parseChatBroadcastMessage(JSON.stringify({
       userId: 'user-1',
@@ -68,6 +79,31 @@ describe('chat broadcast utils', () => {
         fromSeq: 1,
         toSeq: 1,
       },
+      originInstanceId: 'instance-A',
     }))).toThrow('chat broadcast payload.messages must be an array')
+
+    // commit 88744602f — chat broadcast loopback echoes
+    //
+    // ROOT CAUSE:
+    //
+    // Earlier broadcast messages did not carry originInstanceId, so the
+    // sub callback could not distinguish "this came from another instance"
+    // from "this came from us via redis loopback". Without it the sender's
+    // own peers received every message twice (once from in-process fanout,
+    // once from the sub callback re-delivering the publish).
+    //
+    // We fixed this by requiring originInstanceId on every wire message and
+    // having the sub callback compare against its own instanceId before
+    // delivering. The parse step rejects messages missing it so a stale
+    // publisher cannot bypass the dedup.
+    expect(() => parseChatBroadcastMessage(JSON.stringify({
+      userId: 'user-1',
+      payload: {
+        chatId: 'chat-1',
+        messages: [],
+        fromSeq: 1,
+        toSeq: 1,
+      },
+    }))).toThrow('chat broadcast originInstanceId must be a non-empty string')
   })
 })
diff --git a/packages/i18n/src/locales/en/stage.yaml b/packages/i18n/src/locales/en/stage.yaml
index ad01945c0..5af4fee49 100644
--- a/packages/i18n/src/locales/en/stage.yaml
+++ b/packages/i18n/src/locales/en/stage.yaml
@@ -7,6 +7,13 @@ chat:
       core-system: Core System
       you: You
   reasoning: Reasoning
+  sessions:
+    title: Conversations
+    new: + New
+    empty: No conversations yet
+    cloud-badge: Synced to cloud
+    new-chat-fallback: New chat
+    delete: Delete conversation
 message: Say something...
 send-mode:
   title: Send key
diff --git a/packages/i18n/src/locales/zh-Hans/stage.yaml b/packages/i18n/src/locales/zh-Hans/stage.yaml
index 5c36bd90c..c8ab21b30 100644
--- a/packages/i18n/src/locales/zh-Hans/stage.yaml
+++ b/packages/i18n/src/locales/zh-Hans/stage.yaml
@@ -7,6 +7,13 @@ chat:
       core-system: 核心系统
       you: 你
   reasoning: 思考
+  sessions:
+    title: 会话
+    new: + 新建
+    empty: 还没有会话
+    cloud-badge: 已同步到云端
+    new-chat-fallback: 新会话
+    delete: 删除会话
 message: 说点什么...
 send-mode:
   title: 发送键值
diff --git a/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue b/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
index d52f28848..35040119c 100644
--- a/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
+++ b/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
@@ -4,6 +4,7 @@ import type { ChatProvider } from '@xsai-ext/providers/utils'
 
 import { useThreeViewControl } from '@proj-airi/stage-ui-three'
 import { ChatHistory, HearingConfigDialog } from '@proj-airi/stage-ui/components'
+import { ChatSessionsDrawer } from '@proj-airi/stage-ui/components/scenarios/chat'
 import { useAudioAnalyzer } from '@proj-airi/stage-ui/composables'
 import { useAudioContext } from '@proj-airi/stage-ui/stores/audio'
 import { useChatOrchestratorStore } from '@proj-airi/stage-ui/stores/chat'
@@ -45,6 +46,7 @@ function handleDeleteMessage(index: number) {
 const messageInput = ref('')
 const isComposing = ref(false)
 const backgroundDialogOpen = ref(false)
+const sessionsDrawerOpen = ref(false)
 
 const screenSafeArea = useScreenSafeArea()
 const providersStore = useProvidersStore()
@@ -173,6 +175,16 @@ onMounted(() => {
       <div translate-y="[-100%]" absolute right-0 px-3 pb-3 font-sans>
         <div flex="~ col" gap-1>
           <ActionAbout />
+          <button
+            border="2 solid neutral-100/60 dark:neutral-800/30"
+            bg="neutral-50/70 dark:neutral-800/70"
+            w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md
+            title="Conversations"
+            @click="sessionsDrawerOpen = true"
+          >
+            <div i-solar:chat-line-bold-duotone size-5 text="neutral-500 dark:neutral-400" />
+          </button>
+          <ChatSessionsDrawer v-model="sessionsDrawerOpen" />
           <HearingConfigDialog
             v-model:show="hearingDialogOpen"
             v-model:enabled="enabled"
diff --git a/packages/stage-layouts/src/components/Widgets/ChatArea.vue b/packages/stage-layouts/src/components/Widgets/ChatArea.vue
index d5f9a42b0..301c3e43d 100644
--- a/packages/stage-layouts/src/components/Widgets/ChatArea.vue
+++ b/packages/stage-layouts/src/components/Widgets/ChatArea.vue
@@ -3,6 +3,7 @@ import type { ChatProvider } from '@xsai-ext/providers/utils'
 
 import { errorMessageFrom } from '@moeru/std'
 import { isStageTamagotchi } from '@proj-airi/stage-shared'
+import { ChatSessionsDrawer } from '@proj-airi/stage-ui/components/scenarios/chat'
 import { useAudioAnalyzer } from '@proj-airi/stage-ui/composables'
 import { useAudioContext } from '@proj-airi/stage-ui/stores/audio'
 import { useChatOrchestratorStore } from '@proj-airi/stage-ui/stores/chat'
@@ -22,6 +23,7 @@ import IndicatorMicVolume from './IndicatorMicVolume.vue'
 
 const messageInput = ref('')
 const hearingPopoverOpen = ref(false)
+const sessionsDrawerOpen = ref(false)
 const isComposing = ref(false)
 const isListening = ref(false) // Transcription listening state (separate from microphone enabled)
 const DOUBLE_ENTER_INTERVAL_MS = 300
@@ -483,6 +485,20 @@ watch(sendMode, () => {
       <div
         absolute bottom-2 left-2 z-10 flex items-center gap-2
       >
+        <!-- Conversations drawer trigger -->
+        <button
+          :class="[
+            'h-8 w-8 flex items-center justify-center rounded-md outline-none transition-all duration-200 active:scale-95',
+            'text-lg text-neutral-500 dark:text-neutral-400',
+          ]"
+          title="Conversations"
+          @click="sessionsDrawerOpen = true"
+        >
+          <div class="i-solar:chat-line-bold-duotone h-5 w-5" />
+        </button>
+
+        <ChatSessionsDrawer v-model="sessionsDrawerOpen" />
+
         <DropdownMenuRoot>
           <DropdownMenuTrigger as-child>
             <button
diff --git a/packages/stage-ui/package.json b/packages/stage-ui/package.json
index 8c3c57980..35d0a4de7 100644
--- a/packages/stage-ui/package.json
+++ b/packages/stage-ui/package.json
@@ -17,6 +17,7 @@
   },
   "exports": {
     ".": "./src/components/index.ts",
+    "./components/scenarios/chat": "./src/components/scenarios/chat/index.ts",
     "./components/scenarios/settings/model-settings": "./src/components/scenarios/settings/model-settings/index.ts",
     "./components/scenes": "./src/components/scenes/index.ts",
     "./components/*": "./src/components/*.ts",
@@ -83,6 +84,7 @@
     "@proj-airi/model-driver-lipsync": "workspace:^",
     "@proj-airi/pipelines-audio": "workspace:^",
     "@proj-airi/server-sdk": "workspace:^",
+    "@proj-airi/server-sdk-shared": "workspace:^",
     "@proj-airi/stage-shared": "workspace:^",
     "@proj-airi/stage-ui-live2d": "workspace:^",
     "@proj-airi/stage-ui-three": "workspace:^",
diff --git a/packages/stage-ui/src/components/scenarios/chat/components/sessions-drawer.vue b/packages/stage-ui/src/components/scenarios/chat/components/sessions-drawer.vue
new file mode 100644
index 000000000..4ed168a14
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/chat/components/sessions-drawer.vue
@@ -0,0 +1,360 @@
+<script setup lang="ts">
+import type { ChatSessionMeta } from '../../../../types/chat-session'
+
+import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from 'reka-ui'
+import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle } from 'vaul-vue'
+import { computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useBreakpoints } from '../../../../composables/use-breakpoints'
+import { extractMessageText } from '../../../../libs/chat-sync'
+import { useAuthStore } from '../../../../stores/auth'
+import { useChatSessionStore } from '../../../../stores/chat/session-store'
+import { useAiriCardStore } from '../../../../stores/modules/airi-card'
+
+/**
+ * Bottom-sheet (mobile) / centered-modal (desktop) UI surface that lists every
+ * chat session belonging to the current user, lets the user switch between
+ * them, and start a fresh session for the active character.
+ *
+ * Use when:
+ * - The user is on a stage page and wants to browse / switch conversations.
+ *   Mounted once near the global ChatArea so any input bar can flip the
+ *   `v-model` open.
+ *
+ * Expects:
+ * - `useChatSessionStore` is initialized — `sessionMetas` and `activeSessionId`
+ *   drive the list, and switching calls `setActiveSession` / `createSession`.
+ *
+ * Returns:
+ * - A scrollable list. List items render the session title (or first user
+ *   message preview as a fallback), a cloud-sync badge, and a relative
+ *   updatedAt timestamp.
+ */
+
+const showDialog = defineModel({ type: Boolean, default: false, required: false })
+
+const { isDesktop } = useBreakpoints()
+const screenSafeArea = useScreenSafeArea()
+const { t } = useI18n()
+
+const chatSession = useChatSessionStore()
+const { sessionMetas, sessionMessages, activeSessionId } = storeToRefs(chatSession)
+const { activeCardId } = storeToRefs(useAiriCardStore())
+const { userId } = storeToRefs(useAuthStore())
+
+useResizeObserver(document.documentElement, () => screenSafeArea.update())
+onMounted(() => screenSafeArea.update())
+
+interface SessionRow {
+  meta: ChatSessionMeta
+  preview: string
+  isActive: boolean
+  updatedAtLabel: string
+}
+
+/**
+ * Sessions visible in the drawer. Filters by the currently effective user
+ * (`userId.value || 'local'`) so:
+ * - Anonymous users see their local-only sessions (previously hidden by a
+ *   blanket `userId !== 'local'` filter).
+ * - After an account swap, the previously signed-in user's sessions stay
+ *   hidden until ensureActiveSessionForCharacter rehydrates the new tenant
+ *   (the session-store also clears in-memory state on user change as a
+ *   defense in depth).
+ */
+const ownedSessions = computed(() => {
+  const effectiveUserId = userId.value || 'local'
+  return Object.values(sessionMetas.value).filter(meta => meta.userId === effectiveUserId)
+})
+
+/**
+ * Pull a 1-line preview from the first non-system message; falls back to the
+ * stored title or a generic placeholder when nothing readable is available.
+ *
+ * Before:
+ * - messages: [system, { role: 'user', content: 'Tell me about the moon today' }, ...]
+ *
+ * After:
+ * - "Tell me about the moon today"
+ */
+function previewFor(meta: ChatSessionMeta): string {
+  if (meta.title)
+    return meta.title
+
+  const messages = sessionMessages.value[meta.sessionId] ?? []
+  for (const message of messages) {
+    if (message.role === 'system')
+      continue
+    const trimmed = extractMessageText(message).replace(/\s+/g, ' ').trim()
+    if (trimmed)
+      return trimmed.length > 80 ? `${trimmed.slice(0, 80)}…` : trimmed
+  }
+
+  return t('stage.chat.sessions.new-chat-fallback')
+}
+
+const RELATIVE_UNITS: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+  ['year', 31_536_000_000],
+  ['month', 2_592_000_000],
+  ['week', 604_800_000],
+  ['day', 86_400_000],
+  ['hour', 3_600_000],
+  ['minute', 60_000],
+]
+
+/**
+ * Format an epoch ms timestamp as a coarse relative label like "3 minutes ago".
+ *
+ * Before:
+ * - Date.now() - 5 * 60 * 1000
+ *
+ * After:
+ * - "5 minutes ago"
+ */
+function formatUpdatedAt(ts: number): string {
+  const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+  const delta = ts - Date.now()
+  const abs = Math.abs(delta)
+  for (const [unit, ms] of RELATIVE_UNITS) {
+    if (abs >= ms) {
+      const value = Math.round(delta / ms)
+      return formatter.format(value, unit)
+    }
+  }
+  return formatter.format(0, 'second')
+}
+
+const rows = computed<SessionRow[]>(() => {
+  const list = ownedSessions.value
+    .map<SessionRow>(meta => ({
+      meta,
+      preview: previewFor(meta),
+      isActive: meta.sessionId === activeSessionId.value,
+      updatedAtLabel: formatUpdatedAt(meta.updatedAt),
+    }))
+  // Most-recent first; the active session usually ends up at the top after a
+  // fresh send because `persistSession` bumps `updatedAt`.
+  list.sort((a, b) => b.meta.updatedAt - a.meta.updatedAt)
+  return list
+})
+
+async function selectSession(sessionId: string) {
+  chatSession.setActiveSession(sessionId)
+  showDialog.value = false
+}
+
+async function startNewSession() {
+  const characterId = activeCardId.value || 'default'
+  await chatSession.createSession(characterId, { setActive: true })
+  showDialog.value = false
+}
+
+async function deleteRow(event: Event, sessionId: string) {
+  // Stop the parent button's click — otherwise we'd switch into the session
+  // we are about to remove and immediately need a fallback.
+  event.stopPropagation()
+  await chatSession.deleteSession(sessionId)
+}
+
+// Per-open generation counter. The batch loadSession loop checks this before
+// each batch so closing the drawer mid-load aborts cleanly instead of
+// continuing to hydrate sessions the user has navigated away from. Without
+// this, a session deleted from outside while the batch was running could be
+// re-added to `loadedSessions` as a phantom entry.
+let openGeneration = 0
+
+// Re-render relative timestamps + hydrate non-active session messages when
+// the drawer opens so each row can show a real preview instead of the
+// fallback. `loadSession` is idempotent (`loadedSessions` set), so reopening
+// the drawer is cheap.
+watch(showDialog, async (open) => {
+  if (!open)
+    return
+  openGeneration += 1
+  const myGeneration = openGeneration
+  // Touch `rows` first so reactive labels reflect a fresh `Date.now()`.
+  void rows.value
+  const knownSessionIds = ownedSessions.value.map(meta => meta.sessionId)
+  // Bounded concurrency keeps a long history list from spawning a hundred
+  // simultaneous IndexedDB transactions; 4 in flight is plenty for a list
+  // that the user is about to scroll.
+  const batchSize = 4
+  for (let i = 0; i < knownSessionIds.length; i += batchSize) {
+    if (myGeneration !== openGeneration || !showDialog.value)
+      return
+    await Promise.all(knownSessionIds.slice(i, i + batchSize).map(id => chatSession.loadSession(id)))
+  }
+})
+</script>
+
+<template>
+  <DialogRoot v-if="isDesktop" :open="showDialog" @update:open="value => showDialog = value">
+    <slot name="trigger" />
+    <DialogPortal>
+      <DialogOverlay
+        :class="[
+          'fixed inset-0 z-[9999] bg-black/50 backdrop-blur-sm',
+          'data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn',
+        ]"
+      />
+      <DialogContent
+        :class="[
+          'fixed left-1/2 top-1/2 z-[9999] max-h-[80dvh] max-w-md w-[92dvw] transform overflow-hidden rounded-2xl bg-white/95 shadow-xl outline-none backdrop-blur-md scrollbar-none -translate-x-1/2 -translate-y-1/2 data-[state=closed]:animate-contentHide data-[state=open]:animate-contentShow dark:bg-neutral-900/90',
+        ]"
+      >
+        <div :class="['flex flex-col h-full max-h-[80dvh]']">
+          <div :class="['flex items-center justify-between px-5 pt-5 pb-3']">
+            <DialogTitle :class="['text-base font-medium text-neutral-700 dark:text-neutral-200']">
+              {{ t('stage.chat.sessions.title') }}
+            </DialogTitle>
+            <button
+              :class="[
+                'rounded-lg px-3 py-1.5 text-xs font-medium',
+                'bg-primary-100/60 text-primary-700 dark:bg-primary-900/40 dark:text-primary-200',
+                'hover:bg-primary-200/70 dark:hover:bg-primary-800/50',
+                'transition-colors',
+              ]"
+              @click="startNewSession"
+            >
+              {{ t('stage.chat.sessions.new') }}
+            </button>
+          </div>
+          <div :class="['flex-1 overflow-y-auto px-2 pb-4']">
+            <div v-if="rows.length === 0" :class="['p-6 text-center text-sm text-neutral-500 dark:text-neutral-400']">
+              {{ t('stage.chat.sessions.empty') }}
+            </div>
+            <div
+              v-for="row in rows"
+              :key="row.meta.sessionId"
+              :class="[
+                'group relative w-full rounded-xl mb-1',
+                'transition-colors',
+                row.isActive
+                  ? 'bg-primary-100/70 dark:bg-primary-900/40'
+                  : 'hover:bg-neutral-100/80 dark:hover:bg-neutral-800/60',
+              ]"
+            >
+              <button
+                :class="['w-full text-left px-3 py-2.5 outline-none flex flex-col gap-1']"
+                @click="selectSession(row.meta.sessionId)"
+              >
+                <div :class="['flex items-center gap-2 text-sm font-medium text-neutral-700 dark:text-neutral-200']">
+                  <span :class="['truncate flex-1']">{{ row.preview }}</span>
+                  <span
+                    v-if="row.meta.cloudChatId"
+                    :class="['shrink-0 text-[10px] uppercase tracking-wide rounded px-1.5 py-0.5', 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-300']"
+                    :title="t('stage.chat.sessions.cloud-badge')"
+                  >
+                    cloud
+                  </span>
+                  <!-- placeholder for trash icon to reserve hit space -->
+                  <span :class="['w-7']" />
+                </div>
+                <div :class="['text-[11px] text-neutral-500 dark:text-neutral-400']">
+                  {{ row.updatedAtLabel }}
+                </div>
+              </button>
+              <button
+                :class="[
+                  'absolute right-2 top-2 h-7 w-7 flex items-center justify-center rounded-md',
+                  'opacity-0 group-hover:opacity-100 focus:opacity-100',
+                  'text-neutral-400 hover:text-red-500 hover:bg-red-500/10',
+                  'transition-opacity duration-150',
+                ]"
+                :title="t('stage.chat.sessions.delete')"
+                @click="deleteRow($event, row.meta.sessionId)"
+              >
+                <div class="i-solar:trash-bin-trash-bold-duotone h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+  <DrawerRoot v-else :open="showDialog" should-scale-background @update:open="value => showDialog = value">
+    <DrawerPortal>
+      <DrawerOverlay :class="['fixed inset-0']" />
+      <DrawerContent
+        :class="[
+          'fixed bottom-0 left-0 right-0 z-1000',
+          'mt-20 px-2 pt-3',
+          'flex flex-col',
+          'h-full max-h-[85%]',
+          'rounded-t-[32px] outline-none backdrop-blur-md',
+          'bg-neutral-50/95 dark:bg-neutral-900/95',
+        ]"
+        :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }"
+      >
+        <DrawerHandle :class="['[div&]:bg-neutral-400 [div&]:dark:bg-neutral-600']" />
+        <div :class="['flex items-center justify-between px-4 pt-3 pb-2']">
+          <DrawerTitle :class="['text-base font-medium text-neutral-700 dark:text-neutral-200']">
+            {{ t('stage.chat.sessions.title') }}
+          </DrawerTitle>
+          <button
+            :class="[
+              'rounded-lg px-3 py-1.5 text-xs font-medium',
+              'bg-primary-100/60 text-primary-700 dark:bg-primary-900/40 dark:text-primary-200',
+              'hover:bg-primary-200/70 dark:hover:bg-primary-800/50',
+              'transition-colors',
+            ]"
+            @click="startNewSession"
+          >
+            {{ t('stage.chat.sessions.new') }}
+          </button>
+        </div>
+        <div :class="['flex-1 overflow-y-auto px-2 pb-2']">
+          <div v-if="rows.length === 0" :class="['p-6 text-center text-sm text-neutral-500 dark:text-neutral-400']">
+            {{ t('stage.chat.sessions.empty') }}
+          </div>
+          <div
+            v-for="row in rows"
+            :key="row.meta.sessionId"
+            :class="[
+              'group relative w-full rounded-xl mb-1',
+              'transition-colors',
+              row.isActive
+                ? 'bg-primary-100/70 dark:bg-primary-900/40'
+                : 'hover:bg-neutral-100/80 dark:hover:bg-neutral-800/60',
+            ]"
+          >
+            <button
+              :class="['w-full text-left px-3 py-3 outline-none flex flex-col gap-1']"
+              @click="selectSession(row.meta.sessionId)"
+            >
+              <div :class="['flex items-center gap-2 text-sm font-medium text-neutral-700 dark:text-neutral-200']">
+                <span :class="['truncate flex-1']">{{ row.preview }}</span>
+                <span
+                  v-if="row.meta.cloudChatId"
+                  :class="['shrink-0 text-[10px] uppercase tracking-wide rounded px-1.5 py-0.5', 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-300']"
+                  :title="t('stage.chat.sessions.cloud-badge')"
+                >
+                  cloud
+                </span>
+                <span :class="['w-7']" />
+              </div>
+              <div :class="['text-[11px] text-neutral-500 dark:text-neutral-400']">
+                {{ row.updatedAtLabel }}
+              </div>
+            </button>
+            <button
+              :class="[
+                'absolute right-2 top-2 h-7 w-7 flex items-center justify-center rounded-md',
+                'opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100',
+                'text-neutral-400 hover:text-red-500 hover:bg-red-500/10',
+                'transition-opacity duration-150',
+              ]"
+              :title="t('stage.chat.sessions.delete')"
+              @click="deleteRow($event, row.meta.sessionId)"
+            >
+              <div class="i-solar:trash-bin-trash-bold-duotone h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
+</template>
diff --git a/packages/stage-ui/src/components/scenarios/chat/index.ts b/packages/stage-ui/src/components/scenarios/chat/index.ts
index 892f15445..682a3580d 100644
--- a/packages/stage-ui/src/components/scenarios/chat/index.ts
+++ b/packages/stage-ui/src/components/scenarios/chat/index.ts
@@ -2,6 +2,7 @@ export { ChatActionMenu } from './components/action-menu'
 export { default as ChatAssistantItem } from './components/assistant-item.vue'
 export { default as ChatErrorItem } from './components/error-item.vue'
 export { default as ChatHistory } from './components/history.vue'
+export { default as ChatSessionsDrawer } from './components/sessions-drawer.vue'
 export { createToolResultError, normalizeToolResultText } from './components/tool-call-display'
 export type { ChatToolCallRendererProps, ChatToolCallRendererRegistry } from './components/tool-call-renderer'
 export { default as ChatUserItem } from './components/user-item.vue'
diff --git a/packages/stage-ui/src/database/repos/chat-sessions.repo.test.ts b/packages/stage-ui/src/database/repos/chat-sessions.repo.test.ts
new file mode 100644
index 000000000..69e4d95bf
--- /dev/null
+++ b/packages/stage-ui/src/database/repos/chat-sessions.repo.test.ts
@@ -0,0 +1,189 @@
+import memoryDriver from 'unstorage/drivers/memory'
+
+import { createStorage } from 'unstorage'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// Replace the IDB-backed storage with an in-memory driver for tests; the
+// repo's behavior is identical regardless of the underlying driver.
+vi.mock('../storage', () => ({
+  storage: createStorage({ driver: memoryDriver() }),
+}))
+
+const { chatSessionsRepo } = await import('./chat-sessions.repo')
+const { storage } = await import('../storage')
+
+beforeEach(async () => {
+  await storage.clear()
+})
+
+describe('chatSessionsRepo.tombstones', () => {
+  /**
+   * @example
+   * Initial fetch on a fresh user → empty array, never undefined / null.
+   */
+  it('returns an empty array for a user with no tombstones', async () => {
+    expect(await chatSessionsRepo.getTombstones('user-1')).toEqual([])
+  })
+
+  /**
+   * @example
+   * Add same id twice → only one entry. Critical for an offline-then-online
+   * delete flow where the same DELETE may be queued multiple times.
+   */
+  it('addTombstone is idempotent on the same cloudChatId', async () => {
+    await chatSessionsRepo.addTombstone('user-1', 'chat-a')
+    await chatSessionsRepo.addTombstone('user-1', 'chat-a')
+    expect(await chatSessionsRepo.getTombstones('user-1')).toEqual(['chat-a'])
+  })
+
+  /**
+   * @example
+   * removeTombstones drops only the listed ids; others stay.
+   */
+  it('removeTombstones drops only the named ids', async () => {
+    await chatSessionsRepo.addTombstone('user-1', 'a')
+    await chatSessionsRepo.addTombstone('user-1', 'b')
+    await chatSessionsRepo.addTombstone('user-1', 'c')
+    await chatSessionsRepo.removeTombstones('user-1', ['a', 'c'])
+    expect(await chatSessionsRepo.getTombstones('user-1')).toEqual(['b'])
+  })
+
+  /**
+   * @example
+   * Tombstones are scoped per user — clearing one user's tombstones must
+   * not touch another's.
+   */
+  it('isolates tombstones per user', async () => {
+    await chatSessionsRepo.addTombstone('user-1', 'a')
+    await chatSessionsRepo.addTombstone('user-2', 'a')
+    await chatSessionsRepo.removeTombstones('user-1', ['a'])
+    expect(await chatSessionsRepo.getTombstones('user-1')).toEqual([])
+    expect(await chatSessionsRepo.getTombstones('user-2')).toEqual(['a'])
+  })
+})
+
+describe('chatSessionsRepo.outbox', () => {
+  function makeEntry(partial: Partial<Parameters<typeof chatSessionsRepo.enqueueOutbox>[1]> & { messageId: string }): Parameters<typeof chatSessionsRepo.enqueueOutbox>[1] {
+    return {
+      messageId: partial.messageId,
+      sessionId: partial.sessionId ?? 'session-1',
+      cloudChatId: partial.cloudChatId,
+      role: partial.role ?? 'user',
+      content: partial.content ?? 'hello',
+      attempts: partial.attempts ?? 0,
+      lastError: partial.lastError,
+      queuedAt: partial.queuedAt ?? 1,
+    }
+  }
+
+  /**
+   * @example
+   * Empty outbox returns [] (never null / undefined).
+   */
+  it('returns an empty array for a user with no outbox entries', async () => {
+    expect(await chatSessionsRepo.getOutbox('user-1')).toEqual([])
+  })
+
+  /**
+   * @example
+   * Two distinct messages → two entries, in enqueue order.
+   */
+  it('preserves enqueue order for distinct messages', async () => {
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm1', queuedAt: 1 }))
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm2', queuedAt: 2 }))
+    const entries = await chatSessionsRepo.getOutbox('user-1')
+    expect(entries.map(e => e.messageId)).toEqual(['m1', 'm2'])
+  })
+
+  /**
+   * @example
+   * Re-enqueueing the same messageId overwrites in place — a flap between
+   * online and offline that calls pushMessageToCloud twice for the same
+   * message must not duplicate the row in IDB.
+   */
+  it('enqueueOutbox is idempotent on messageId — overwrites in place', async () => {
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm1', content: 'first' }))
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm1', content: 'second' }))
+    const entries = await chatSessionsRepo.getOutbox('user-1')
+    expect(entries.length).toBe(1)
+    expect(entries[0].content).toBe('second')
+  })
+
+  /**
+   * @example
+   * dequeueOutbox drops only the named ids.
+   */
+  it('dequeueOutbox drops only the named ids', async () => {
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm1' }))
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm2' }))
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm3' }))
+    await chatSessionsRepo.dequeueOutbox('user-1', ['m1', 'm3'])
+    const entries = await chatSessionsRepo.getOutbox('user-1')
+    expect(entries.map(e => e.messageId)).toEqual(['m2'])
+  })
+
+  /**
+   * @example
+   * updateOutboxEntries bumps attempts and lastError without touching the
+   * other fields (content, role, queuedAt). This is the "send failed,
+   * retry on next drain" path.
+   */
+  it('updateOutboxEntries patches attempts + lastError in place', async () => {
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm1', content: 'hello', queuedAt: 1 }))
+    await chatSessionsRepo.updateOutboxEntries('user-1', [{ messageId: 'm1', attempts: 3, lastError: 'HTTP 500' }])
+    const entries = await chatSessionsRepo.getOutbox('user-1')
+    expect(entries[0].attempts).toBe(3)
+    expect(entries[0].lastError).toBe('HTTP 500')
+    expect(entries[0].content).toBe('hello')
+    expect(entries[0].queuedAt).toBe(1)
+  })
+
+  /**
+   * @example
+   * dropOutboxForSession drops every entry for a session — used when the
+   * session is deleted locally (no point pushing messages to a deleted chat).
+   */
+  it('dropOutboxForSession removes entries scoped to a sessionId', async () => {
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm1', sessionId: 's1' }))
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm2', sessionId: 's1' }))
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm3', sessionId: 's2' }))
+    await chatSessionsRepo.dropOutboxForSession('user-1', 's1')
+    const entries = await chatSessionsRepo.getOutbox('user-1')
+    expect(entries.map(e => e.messageId)).toEqual(['m3'])
+  })
+
+  /**
+   * @example
+   * Outboxes are scoped per user — touching one must not affect another.
+   */
+  it('isolates outboxes per user', async () => {
+    await chatSessionsRepo.enqueueOutbox('user-1', makeEntry({ messageId: 'm1' }))
+    await chatSessionsRepo.enqueueOutbox('user-2', makeEntry({ messageId: 'm1' }))
+    await chatSessionsRepo.dequeueOutbox('user-1', ['m1'])
+    expect(await chatSessionsRepo.getOutbox('user-1')).toEqual([])
+    expect((await chatSessionsRepo.getOutbox('user-2')).length).toBe(1)
+  })
+})
+
+describe('chatSessionsRepo.clear', () => {
+  /**
+   * @example
+   * clear() removes index, sessions, tombstones AND outbox for the user.
+   */
+  it('removes index + sessions + tombstones + outbox for the user', async () => {
+    await chatSessionsRepo.saveIndex({
+      userId: 'user-1',
+      characters: { 'char-a': { activeSessionId: 's1', sessions: { s1: { sessionId: 's1', userId: 'user-1', characterId: 'char-a', createdAt: 0, updatedAt: 0 } } } },
+    })
+    await chatSessionsRepo.saveSession('s1', { meta: { sessionId: 's1', userId: 'user-1', characterId: 'char-a', createdAt: 0, updatedAt: 0 }, messages: [] })
+    await chatSessionsRepo.addTombstone('user-1', 'cloud-a')
+    await chatSessionsRepo.enqueueOutbox('user-1', { messageId: 'm1', sessionId: 's1', role: 'user', content: 'hi', attempts: 0, queuedAt: 0 })
+
+    await chatSessionsRepo.clear('user-1')
+
+    expect(await chatSessionsRepo.getIndex('user-1')).toBeNull()
+    expect(await chatSessionsRepo.getSession('s1')).toBeNull()
+    expect(await chatSessionsRepo.getTombstones('user-1')).toEqual([])
+    expect(await chatSessionsRepo.getOutbox('user-1')).toEqual([])
+  })
+})
diff --git a/packages/stage-ui/src/database/repos/chat-sessions.repo.ts b/packages/stage-ui/src/database/repos/chat-sessions.repo.ts
index cc2cf5e84..afc59d5b9 100644
--- a/packages/stage-ui/src/database/repos/chat-sessions.repo.ts
+++ b/packages/stage-ui/src/database/repos/chat-sessions.repo.ts
@@ -2,6 +2,29 @@ import type { ChatSessionRecord, ChatSessionsIndex } from '../../types/chat-sess
 
 import { storage } from '../storage'
 
+const tombstoneKey = (userId: string) => `local:chat/tombstones/${userId}`
+const outboxKey = (userId: string) => `local:chat/outbox/${userId}`
+
+/**
+ * Pending cloud send. Persisted in IDB so a tab close / reload / offline
+ * window does not drop messages the user has already typed locally.
+ *
+ * `cloudChatId` is captured snapshot-style at enqueue time when known;
+ * when absent (session not yet reconciled), drain looks it up from the
+ * live `sessionMetas` ref and skips the entry until the mapping lands.
+ */
+export interface ChatSendOutboxEntry {
+  /** Stable id matching the local message; reused on every retry so the server can dedup. */
+  messageId: string
+  sessionId: string
+  cloudChatId?: string
+  role: 'user' | 'assistant'
+  content: string
+  attempts: number
+  lastError?: string
+  queuedAt: number
+}
+
 export const chatSessionsRepo = {
   async getIndex(userId: string) {
     const key = `local:chat/index/${userId}`
@@ -28,6 +51,100 @@ export const chatSessionsRepo = {
     await storage.removeItem(`local:chat/sessions/${sessionId}`)
   },
 
+  /**
+   * Cloud-delete tombstones. When a user deletes a session offline (or before
+   * the fire-and-forget DELETE response arrives) the cloud row may still be
+   * present on the server's next `listChats`. Without these tombstones the
+   * reconcile `adopt` branch would re-import the row and the deleted session
+   * would visibly reappear.
+   *
+   * Stored as a flat array of `cloudChatId`s per user, keyed independently of
+   * the index so the data survives index rewrites.
+   */
+  async getTombstones(userId: string): Promise<string[]> {
+    const stored = await storage.getItemRaw<string[]>(tombstoneKey(userId))
+    return stored ?? []
+  },
+
+  async addTombstone(userId: string, cloudChatId: string) {
+    const current = await this.getTombstones(userId)
+    if (current.includes(cloudChatId))
+      return
+    current.push(cloudChatId)
+    await storage.setItemRaw(tombstoneKey(userId), current)
+  },
+
+  async removeTombstones(userId: string, cloudChatIds: string[]) {
+    if (cloudChatIds.length === 0)
+      return
+    const current = await this.getTombstones(userId)
+    const drop = new Set(cloudChatIds)
+    const next = current.filter(id => !drop.has(id))
+    if (next.length === current.length)
+      return
+    await storage.setItemRaw(tombstoneKey(userId), next)
+  },
+
+  /**
+   * Outbox of message sends pending cloud delivery. Drained on every
+   * reconcile + WS-open. Survives tab close / reload — the whole point
+   * of the outbox is to never lose a write that landed locally but
+   * never made it to the server.
+   */
+  async getOutbox(userId: string): Promise<ChatSendOutboxEntry[]> {
+    const stored = await storage.getItemRaw<ChatSendOutboxEntry[]>(outboxKey(userId))
+    return stored ?? []
+  },
+
+  async enqueueOutbox(userId: string, entry: ChatSendOutboxEntry) {
+    const current = await this.getOutbox(userId)
+    // Idempotent on messageId — re-queue overwrites in place rather than
+    // duplicating, so a flap between online/offline doesn't multiply rows.
+    const existingIndex = current.findIndex(e => e.messageId === entry.messageId)
+    if (existingIndex >= 0)
+      current[existingIndex] = entry
+    else
+      current.push(entry)
+    await storage.setItemRaw(outboxKey(userId), current)
+  },
+
+  async dequeueOutbox(userId: string, messageIds: string[]) {
+    if (messageIds.length === 0)
+      return
+    const current = await this.getOutbox(userId)
+    const drop = new Set(messageIds)
+    const next = current.filter(e => !drop.has(e.messageId))
+    if (next.length === current.length)
+      return
+    await storage.setItemRaw(outboxKey(userId), next)
+  },
+
+  async updateOutboxEntries(userId: string, updates: Array<Pick<ChatSendOutboxEntry, 'messageId' | 'attempts' | 'lastError'>>) {
+    if (updates.length === 0)
+      return
+    const current = await this.getOutbox(userId)
+    const byId = new Map(updates.map(u => [u.messageId, u]))
+    let changed = false
+    const next = current.map((entry) => {
+      const update = byId.get(entry.messageId)
+      if (!update)
+        return entry
+      changed = true
+      return { ...entry, attempts: update.attempts, lastError: update.lastError }
+    })
+    if (changed)
+      await storage.setItemRaw(outboxKey(userId), next)
+  },
+
+  /** Remove every outbox entry for a session. Called when the session is deleted locally. */
+  async dropOutboxForSession(userId: string, sessionId: string) {
+    const current = await this.getOutbox(userId)
+    const next = current.filter(e => e.sessionId !== sessionId)
+    if (next.length === current.length)
+      return
+    await storage.setItemRaw(outboxKey(userId), next)
+  },
+
   async clear(userId: string) {
     const index = await this.getIndex(userId)
     if (index) {
@@ -38,5 +155,7 @@ export const chatSessionsRepo = {
       }
       await storage.removeItem(`local:chat/index/${userId}`)
     }
+    await storage.removeItem(tombstoneKey(userId))
+    await storage.removeItem(outboxKey(userId))
   },
 }
diff --git a/packages/stage-ui/src/libs/chat-sync/cloud-mapper.test.ts b/packages/stage-ui/src/libs/chat-sync/cloud-mapper.test.ts
new file mode 100644
index 000000000..bd8b825e0
--- /dev/null
+++ b/packages/stage-ui/src/libs/chat-sync/cloud-mapper.test.ts
@@ -0,0 +1,367 @@
+import type { ChatSessionMeta } from '../../types/chat-session'
+import type { CloudChatMapper, RemoteChat } from './cloud-mapper'
+
+import { describe, expect, it, vi } from 'vitest'
+
+import { applyCreateActions, createCloudChatMapper, reconcileLocalAndRemote } from './cloud-mapper'
+
+function makeMeta(partial: Partial<ChatSessionMeta>): ChatSessionMeta {
+  return {
+    sessionId: partial.sessionId ?? 'session-x',
+    userId: partial.userId ?? 'user-1',
+    characterId: partial.characterId ?? 'char-1',
+    createdAt: partial.createdAt ?? 0,
+    updatedAt: partial.updatedAt ?? 0,
+    ...partial,
+  }
+}
+
+function makeRemote(partial: Partial<RemoteChat>): RemoteChat {
+  return {
+    id: partial.id ?? 'chat-1',
+    type: partial.type ?? 'bot',
+    title: partial.title ?? null,
+    createdAt: partial.createdAt ?? '2026-01-01T00:00:00.000Z',
+    updatedAt: partial.updatedAt ?? '2026-01-01T00:00:00.000Z',
+  }
+}
+
+describe('reconcileLocalAndRemote', () => {
+  /**
+   * @example
+   * Local has session "abc" with no cloudChatId; remote has chat "abc".
+   * Expected: claim binds them; create / adopt are empty.
+   */
+  it('claims a remote chat with the same id as an unmapped local session', () => {
+    const plan = reconcileLocalAndRemote(
+      [makeMeta({ sessionId: 'abc' })],
+      [makeRemote({ id: 'abc' })],
+    )
+    expect(plan.claim).toEqual([{ sessionId: 'abc', cloudChatId: 'abc' }])
+    expect(plan.create).toEqual([])
+    expect(plan.adopt).toEqual([])
+  })
+
+  /**
+   * @example
+   * Local session "abc" with no cloudChatId, no remote chat.
+   * Expected: create one POST per session, with characterId carried through.
+   */
+  it('schedules a create when no remote match exists for an unmapped local session', () => {
+    const plan = reconcileLocalAndRemote(
+      [makeMeta({ sessionId: 'abc', characterId: 'char-42' })],
+      [],
+    )
+    expect(plan.claim).toEqual([])
+    expect(plan.create).toEqual([{ sessionId: 'abc', characterId: 'char-42' }])
+    expect(plan.adopt).toEqual([])
+  })
+
+  /**
+   * @example
+   * Remote chat "xyz" exists, local has nothing.
+   * Expected: adopt list contains it.
+   */
+  it('adopts remote chats that have no local mapping', () => {
+    const remote = makeRemote({ id: 'xyz' })
+    const plan = reconcileLocalAndRemote([], [remote])
+    expect(plan.adopt).toEqual([remote])
+    expect(plan.claim).toEqual([])
+    expect(plan.create).toEqual([])
+  })
+
+  /**
+   * @example
+   * Local already has cloudChatId === remote.id; nothing to do.
+   */
+  it('skips already-mapped sessions on both sides', () => {
+    const plan = reconcileLocalAndRemote(
+      [makeMeta({ sessionId: 'abc', cloudChatId: 'abc' })],
+      [makeRemote({ id: 'abc' })],
+    )
+    expect(plan.claim).toEqual([])
+    expect(plan.create).toEqual([])
+    expect(plan.adopt).toEqual([])
+  })
+
+  /**
+   * @example
+   * Mixed: one to claim, one to create, one to adopt — all in one pass.
+   */
+  it('handles mixed claim / create / adopt in a single plan', () => {
+    const plan = reconcileLocalAndRemote(
+      [
+        makeMeta({ sessionId: 's1' }), // matches remote r1 → claim
+        makeMeta({ sessionId: 's2', characterId: 'c2' }), // no remote → create
+      ],
+      [
+        makeRemote({ id: 's1' }),
+        makeRemote({ id: 'r3' }), // no local → adopt
+      ],
+    )
+    expect(plan.claim).toEqual([{ sessionId: 's1', cloudChatId: 's1' }])
+    expect(plan.create).toEqual([{ sessionId: 's2', characterId: 'c2' }])
+    expect(plan.adopt.map(r => r.id)).toEqual(['r3'])
+  })
+
+  /**
+   * @example
+   * Local has cloudChatId pointing at remote that disappeared (server-side
+   * deletion). The local mapping is preserved instead of being silently
+   * dropped — the user keeps reading their own messages locally.
+   */
+  it('keeps stale cloud mapping when the remote chat is gone', () => {
+    const plan = reconcileLocalAndRemote(
+      [makeMeta({ sessionId: 'abc', cloudChatId: 'gone' })],
+      [],
+    )
+    expect(plan.claim).toEqual([])
+    expect(plan.create).toEqual([])
+    expect(plan.adopt).toEqual([])
+  })
+
+  /**
+   * @example
+   * A remote chat that is *both* claimed (its id matches an unmapped local
+   * session) and present in the remote list must NOT also appear in adopt —
+   * otherwise the same chat would be both claimed AND adopted, creating
+   * duplicate local sessions for it.
+   */
+  it('does not double-count a chat that appears in claim and the remote list', () => {
+    const plan = reconcileLocalAndRemote(
+      [makeMeta({ sessionId: 'abc' })],
+      [makeRemote({ id: 'abc' })],
+    )
+    expect(plan.claim).toEqual([{ sessionId: 'abc', cloudChatId: 'abc' }])
+    expect(plan.adopt).toEqual([])
+  })
+})
+
+function jsonResponse(body: unknown, init: { status?: number, statusText?: string } = {}): Response {
+  return new Response(JSON.stringify(body), {
+    status: init.status ?? 200,
+    statusText: init.statusText ?? 'OK',
+    headers: { 'Content-Type': 'application/json' },
+  })
+}
+
+function emptyResponse(init: { status?: number, statusText?: string } = {}): Response {
+  return new Response(null, {
+    status: init.status ?? 204,
+    statusText: init.statusText ?? 'No Content',
+  })
+}
+
+describe('createCloudChatMapper.listChats', () => {
+  /**
+   * @example
+   * 200 with `{ chats: [...] }` body → returns chats array.
+   */
+  it('returns the chats array on 2xx', async () => {
+    const fetchMock = vi.fn(async () => jsonResponse({
+      chats: [{ id: 'a', type: 'bot', title: null, createdAt: '2026-01-01', updatedAt: '2026-01-01' }],
+    }))
+    const mapper = createCloudChatMapper({ serverUrl: 'https://api.example.com', fetch: fetchMock as unknown as typeof fetch })
+    const chats = await mapper.listChats()
+    expect(chats.map(c => c.id)).toEqual(['a'])
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://api.example.com/api/v1/chats',
+      expect.objectContaining({ method: 'GET' }),
+    )
+  })
+
+  /**
+   * @example
+   * Server schema drift: `chats` is `null` instead of an array. Without
+   * boundary validation this would feed `null.length` down into reconcile.
+   */
+  it('rejects malformed responses on 2xx via schema validation', async () => {
+    const fetchMock = vi.fn(async () => jsonResponse({ chats: null }))
+    const mapper = createCloudChatMapper({ serverUrl: 'https://api.example.com', fetch: fetchMock as unknown as typeof fetch })
+    await expect(mapper.listChats()).rejects.toThrow()
+  })
+
+  /**
+   * @example
+   * 401 with a JSON body → error message includes the body's `message`.
+   */
+  it('throws with body-derived detail on non-2xx JSON errors', async () => {
+    const fetchMock = vi.fn(async () => jsonResponse({ message: 'token expired' }, { status: 401, statusText: 'Unauthorized' }))
+    const mapper = createCloudChatMapper({ serverUrl: 'https://api.example.com', fetch: fetchMock as unknown as typeof fetch })
+    await expect(mapper.listChats()).rejects.toThrow(/HTTP 401: token expired/)
+  })
+
+  /**
+   * @example
+   * Non-2xx with non-JSON body falls back to statusText. The previous
+   * implementation duplicated this logic in `deleteChat`; the unified path
+   * still has to keep it working.
+   */
+  it('falls back to statusText when the error body is not JSON', async () => {
+    const fetchMock = vi.fn(async () => new Response('<html>oops</html>', {
+      status: 502,
+      statusText: 'Bad Gateway',
+      headers: { 'Content-Type': 'text/html' },
+    }))
+    const mapper = createCloudChatMapper({ serverUrl: 'https://api.example.com', fetch: fetchMock as unknown as typeof fetch })
+    await expect(mapper.listChats()).rejects.toThrow(/HTTP 502: Bad Gateway/)
+  })
+})
+
+describe('createCloudChatMapper.createChat', () => {
+  /**
+   * @example
+   * Happy path: 201 with the created chat body.
+   */
+  it('returns the created chat on 2xx', async () => {
+    const fetchMock = vi.fn(async () => jsonResponse({
+      id: 'minted',
+      type: 'bot',
+      title: null,
+      createdAt: '2026-01-01',
+      updatedAt: '2026-01-01',
+    }, { status: 201, statusText: 'Created' }))
+    const mapper = createCloudChatMapper({ serverUrl: 'https://api.example.com', fetch: fetchMock as unknown as typeof fetch })
+    const chat = await mapper.createChat({ id: 'minted', type: 'bot' })
+    expect(chat.id).toBe('minted')
+  })
+
+  /**
+   * @example
+   * Idempotent retry path: server returned 409 because a previous attempt
+   * already landed but its response was lost in transit. The mapper
+   * follows up with a listChats and returns the existing record so the
+   * caller does not re-fail on a transient network blip.
+   */
+  it('treats 409 as a successful claim by re-fetching the existing chat', async () => {
+    const fetchMock = vi.fn()
+      .mockResolvedValueOnce(jsonResponse({ message: 'already exists' }, { status: 409, statusText: 'Conflict' }))
+      .mockResolvedValueOnce(jsonResponse({
+        chats: [{ id: 'minted', type: 'bot', title: null, createdAt: '2026-01-01', updatedAt: '2026-01-01' }],
+      }))
+    const mapper = createCloudChatMapper({ serverUrl: 'https://api.example.com', fetch: fetchMock as unknown as typeof fetch })
+    const chat = await mapper.createChat({ id: 'minted', type: 'bot' })
+    expect(chat.id).toBe('minted')
+    expect(fetchMock).toHaveBeenCalledTimes(2)
+  })
+
+  /**
+   * @example
+   * 409 without an id (server auto-generates) cannot be turned into an
+   * idempotent claim — there is no client-known id to look up. Surface the
+   * error so the caller can retry or escalate.
+   */
+  it('does not attempt 409 idempotency without a client-supplied id', async () => {
+    const fetchMock = vi.fn(async () => jsonResponse({ message: 'conflict' }, { status: 409, statusText: 'Conflict' }))
+    const mapper = createCloudChatMapper({ serverUrl: 'https://api.example.com', fetch: fetchMock as unknown as typeof fetch })
+    await expect(mapper.createChat({ type: 'bot' })).rejects.toThrow(/HTTP 409/)
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('createCloudChatMapper.deleteChat', () => {
+  /**
+   * @example
+   * 204 No Content → resolves silently.
+   */
+  it('resolves on 2xx', async () => {
+    const fetchMock = vi.fn(async () => emptyResponse())
+    const mapper = createCloudChatMapper({ serverUrl: 'https://api.example.com', fetch: fetchMock as unknown as typeof fetch })
+    await expect(mapper.deleteChat('abc')).resolves.toBeUndefined()
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://api.example.com/api/v1/chats/abc',
+      expect.objectContaining({ method: 'DELETE' }),
+    )
+  })
+
+  /**
+   * @example
+   * Chat ids are URL-encoded so an id containing slashes or spaces does not
+   * smuggle path segments past the server.
+   */
+  it('encodes chat ids in the path', async () => {
+    const fetchMock = vi.fn(async () => emptyResponse())
+    const mapper = createCloudChatMapper({ serverUrl: 'https://api.example.com', fetch: fetchMock as unknown as typeof fetch })
+    await mapper.deleteChat('a/b c')
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://api.example.com/api/v1/chats/a%2Fb%20c',
+      expect.objectContaining({ method: 'DELETE' }),
+    )
+  })
+
+  /**
+   * @example
+   * 500 surfaces with the JSON body's message; non-JSON bodies fall back
+   * to statusText.
+   */
+  it('throws on non-2xx with structured detail', async () => {
+    const fetchMock = vi.fn(async () => jsonResponse({ error: 'kaboom' }, { status: 500, statusText: 'Internal' }))
+    const mapper = createCloudChatMapper({ serverUrl: 'https://api.example.com', fetch: fetchMock as unknown as typeof fetch })
+    await expect(mapper.deleteChat('abc')).rejects.toThrow(/HTTP 500: kaboom/)
+  })
+})
+
+describe('applyCreateActions', () => {
+  /**
+   * @example
+   * All actions succeed; results carry cloudChatId.
+   */
+  it('returns one cloudChatId entry per successful create', async () => {
+    const mapper: CloudChatMapper = {
+      listChats: async () => [],
+      createChat: async input => ({ id: input.id!, type: 'bot', title: null, createdAt: '', updatedAt: '' }),
+      deleteChat: async () => {},
+    }
+    const results = await applyCreateActions(mapper, [
+      { sessionId: 's1', characterId: 'c1' },
+      { sessionId: 's2', characterId: 'c2' },
+    ])
+    expect(results).toEqual([
+      { sessionId: 's1', cloudChatId: 's1' },
+      { sessionId: 's2', cloudChatId: 's2' },
+    ])
+  })
+
+  /**
+   * @example
+   * Partial failure: one createChat throws, the rest succeed. The error
+   * entry carries `error` instead of `cloudChatId`; failures do not abort
+   * the run.
+   */
+  it('records partial failures without aborting the run', async () => {
+    const mapper: CloudChatMapper = {
+      listChats: async () => [],
+      createChat: async (input) => {
+        if (input.id === 's2')
+          throw new Error('boom')
+        return { id: input.id!, type: 'bot', title: null, createdAt: '', updatedAt: '' }
+      },
+      deleteChat: async () => {},
+    }
+    const results = await applyCreateActions(mapper, [
+      { sessionId: 's1', characterId: 'c1' },
+      { sessionId: 's2', characterId: 'c2' },
+      { sessionId: 's3', characterId: 'c3' },
+    ])
+    expect(results).toEqual([
+      { sessionId: 's1', cloudChatId: 's1' },
+      { sessionId: 's2', error: 'boom' },
+      { sessionId: 's3', cloudChatId: 's3' },
+    ])
+  })
+
+  /**
+   * @example
+   * Empty actions list → empty results, no createChat calls.
+   */
+  it('returns an empty array on empty input', async () => {
+    const createChat = vi.fn()
+    const mapper: CloudChatMapper = {
+      listChats: async () => [],
+      createChat: createChat as unknown as CloudChatMapper['createChat'],
+      deleteChat: async () => {},
+    }
+    expect(await applyCreateActions(mapper, [])).toEqual([])
+    expect(createChat).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/stage-ui/src/libs/chat-sync/cloud-mapper.ts b/packages/stage-ui/src/libs/chat-sync/cloud-mapper.ts
new file mode 100644
index 000000000..0b71a5d24
--- /dev/null
+++ b/packages/stage-ui/src/libs/chat-sync/cloud-mapper.ts
@@ -0,0 +1,314 @@
+import type { ChatSessionMeta } from '../../types/chat-session'
+
+import { errorMessageFrom } from '@moeru/std'
+
+import * as v from 'valibot'
+
+const REMOTE_CHAT_TYPES = ['private', 'bot', 'group', 'channel'] as const
+
+const RemoteChatSchema = v.object({
+  id: v.pipe(v.string(), v.minLength(1)),
+  type: v.picklist(REMOTE_CHAT_TYPES),
+  title: v.nullable(v.string()),
+  createdAt: v.string(),
+  updatedAt: v.string(),
+})
+
+const ListChatsResponseSchema = v.object({
+  chats: v.array(RemoteChatSchema),
+})
+
+/** Minimal shape of a chat returned by `GET /api/v1/chats`. */
+export type RemoteChat = v.InferOutput<typeof RemoteChatSchema>
+
+export interface CreateRemoteChatInput {
+  id?: string
+  type?: 'private' | 'bot' | 'group' | 'channel'
+  title?: string
+  members?: Array<{
+    type: 'user' | 'character' | 'bot'
+    userId?: string
+    characterId?: string
+  }>
+}
+
+export interface CreateCloudChatMapperOptions {
+  /** Base server URL, e.g. `https://api.airi.build`. */
+  serverUrl: string
+  /**
+   * Fetch implementation. Production callers MUST pass `authedFetch` from
+   * `libs/auth-fetch` so 401 responses trigger the single-flight token
+   * refresh + retry — matching every other REST surface in stage-ui.
+   * The default is the bare `globalThis.fetch` so tests in non-DOM
+   * environments (Node) don't pull `auth-fetch` (which transitively reads
+   * `window.location`).
+   *
+   * @default globalThis.fetch
+   */
+  fetch?: typeof fetch
+  /**
+   * Per-request timeout in ms. A hung `listChats` would otherwise hold the
+   * reconcile reentrance guard forever (`cloudReconcileTask` never settles).
+   *
+   * @default 10_000
+   */
+  requestTimeoutMs?: number
+}
+
+export interface CloudChatMapper {
+  /** GET /api/v1/chats — returns the full list for the current user. */
+  listChats: () => Promise<RemoteChat[]>
+  /**
+   * POST /api/v1/chats — server may auto-generate id if not provided. A
+   * 409 Conflict (id already exists) is treated as an idempotent claim and
+   * the existing remote chat is returned.
+   */
+  createChat: (input: CreateRemoteChatInput) => Promise<RemoteChat>
+  /**
+   * DELETE /api/v1/chats/:id — server soft-deletes the chat. Other devices
+   * stop seeing it on next `listChats`; live ones won't get a push event in
+   * v1 (no chat:deleted broadcast yet) but their local mapping persists
+   * harmlessly until the user manually closes that session.
+   */
+  deleteChat: (chatId: string) => Promise<void>
+}
+
+interface ApiErrorBody {
+  error?: string
+  message?: string
+}
+
+async function readErrorDetail(res: Response): Promise<string> {
+  try {
+    const body = await res.json() as ApiErrorBody
+    return body.message ?? body.error ?? res.statusText
+  }
+  catch {
+    // Non-JSON body — keep statusText.
+    return res.statusText
+  }
+}
+
+async function readJsonOrThrow<T>(res: Response, schema: v.BaseSchema<unknown, T, v.BaseIssue<unknown>>): Promise<T> {
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status}: ${await readErrorDetail(res)}`)
+  }
+  // External boundary: validate the success shape too. A server schema drift
+  // would otherwise feed a structurally broken object into `reconcileLocalAndRemote`.
+  const raw: unknown = await res.json()
+  return v.parse(schema, raw)
+}
+
+async function throwOnError(res: Response): Promise<void> {
+  if (res.ok)
+    return
+  throw new Error(`HTTP ${res.status}: ${await readErrorDetail(res)}`)
+}
+
+/**
+ * Build a thin REST client over `/api/v1/chats` for cloud reconcile use cases.
+ *
+ * Use when:
+ * - The session store needs to mirror local sessions to the server `chats`
+ *   table (initial reconcile, creating cloud chats for new local sessions).
+ *
+ * Expects:
+ * - Auth is handled by `authedFetch` (the default `fetch` implementation),
+ *   which reads `getAuthToken()` directly and refreshes on 401. 401 responses
+ *   that survive the refresh cycle surface as `Error('HTTP 401: ...')`.
+ *
+ * Returns:
+ * - A handle exposing `listChats`, `createChat` (with idempotent 409
+ *   handling), and `deleteChat`. All throw on non-2xx outside the documented
+ *   idempotency window.
+ */
+export function createCloudChatMapper(options: CreateCloudChatMapperOptions): CloudChatMapper {
+  const fetchImpl = options.fetch ?? globalThis.fetch.bind(globalThis)
+  const requestTimeoutMs = options.requestTimeoutMs ?? 10_000
+
+  function endpoint(path: string): string {
+    const url = new URL(options.serverUrl)
+    url.pathname = url.pathname.replace(/\/+$/, '') + path
+    return url.toString()
+  }
+
+  function jsonHeaders(): Record<string, string> {
+    // authedFetch attaches `Authorization`; we only need to declare the body
+    // content type for write methods.
+    return { 'Content-Type': 'application/json' }
+  }
+
+  function timeoutSignal(): AbortSignal {
+    // AbortSignal.timeout is in Node 17.3+ and every modern browser the
+    // project targets (see Vue 3 / Vite baseline). No polyfill needed.
+    return AbortSignal.timeout(requestTimeoutMs)
+  }
+
+  return {
+    async listChats() {
+      const res = await fetchImpl(endpoint('/api/v1/chats'), {
+        method: 'GET',
+        signal: timeoutSignal(),
+      })
+      const body = await readJsonOrThrow(res, ListChatsResponseSchema)
+      return body.chats
+    },
+    async createChat(input) {
+      const res = await fetchImpl(endpoint('/api/v1/chats'), {
+        method: 'POST',
+        headers: jsonHeaders(),
+        body: JSON.stringify(input),
+        signal: timeoutSignal(),
+      })
+      // 409 is treated as a successful claim: a previous attempt landed on
+      // the server but its response was lost in transit, so the retry should
+      // not error out and it should not double-create. Re-fetch the existing
+      // record so the caller still gets a `RemoteChat` shape back.
+      if (res.status === 409 && input.id) {
+        const allRes = await fetchImpl(endpoint('/api/v1/chats'), {
+          method: 'GET',
+          signal: timeoutSignal(),
+        })
+        const all = await readJsonOrThrow(allRes, ListChatsResponseSchema)
+        const found = all.chats.find(chat => chat.id === input.id)
+        if (found)
+          return found
+        // 409 with no matching record → server inconsistency; surface the
+        // original error rather than pretending it succeeded.
+      }
+      return await readJsonOrThrow(res, RemoteChatSchema)
+    },
+    async deleteChat(chatId) {
+      const res = await fetchImpl(endpoint(`/api/v1/chats/${encodeURIComponent(chatId)}`), {
+        method: 'DELETE',
+        signal: timeoutSignal(),
+      })
+      await throwOnError(res)
+    },
+  }
+}
+
+/**
+ * Result of a reconcile decision over local sessions and remote chats.
+ *
+ * Outcomes per session:
+ * - `claim`: local session has no `cloudChatId`, but a remote chat with the
+ *   same id (we adopted that convention when creating sessions before) or
+ *   matching membership exists; bind to it.
+ * - `create`: local session has no `cloudChatId` and no remote match; need to
+ *   POST `/api/v1/chats` to mint a chat for it.
+ * - `adopt`: remote chat exists with no local session at all; need to create
+ *   a local session shell so future `pullMessages` can populate it.
+ */
+export interface ReconcilePlan {
+  claim: Array<{ sessionId: string, cloudChatId: string }>
+  create: Array<{ sessionId: string, characterId: string }>
+  adopt: RemoteChat[]
+}
+
+/**
+ * Pure reconcile decision over local sessions and remote chats.
+ *
+ * Use when:
+ * - Login completes and the session-store wants a single deterministic plan
+ *   instead of interleaving REST calls with mutations.
+ *
+ * Expects:
+ * - `localSessions` is the full list of meta records owned by the current
+ *   user. Sessions whose `userId` is `'local'` (anonymous) MUST be filtered
+ *   out by the caller before reconcile — they are not cloud-eligible.
+ *
+ * Returns:
+ * - A plan of three lists. The caller applies them in any order; `create`
+ *   actions need the network, `claim` / `adopt` are pure store mutations.
+ */
+export function reconcileLocalAndRemote(
+  localSessions: ChatSessionMeta[],
+  remoteChats: RemoteChat[],
+): ReconcilePlan {
+  const remoteById = new Map<string, RemoteChat>()
+  for (const chat of remoteChats)
+    remoteById.set(chat.id, chat)
+
+  const localByCloudId = new Map<string, ChatSessionMeta>()
+  for (const meta of localSessions) {
+    if (meta.cloudChatId)
+      localByCloudId.set(meta.cloudChatId, meta)
+  }
+
+  const claim: ReconcilePlan['claim'] = []
+  const create: ReconcilePlan['create'] = []
+  const claimedRemoteIds = new Set<string>()
+
+  for (const meta of localSessions) {
+    if (meta.cloudChatId) {
+      // Already mapped; nothing to do unless the remote chat disappeared.
+      // We keep the mapping anyway so messages do not lose their place.
+      continue
+    }
+
+    // Convention from session creation: local sessionId is a nanoid the
+    // server is willing to accept verbatim as the chat id when the local
+    // session was created post-login. If a remote chat with the same id
+    // exists we adopt it instead of double-creating.
+    const remote = remoteById.get(meta.sessionId)
+    if (remote) {
+      claim.push({ sessionId: meta.sessionId, cloudChatId: remote.id })
+      claimedRemoteIds.add(remote.id)
+      continue
+    }
+
+    create.push({ sessionId: meta.sessionId, characterId: meta.characterId })
+  }
+
+  const adopt: RemoteChat[] = []
+  for (const chat of remoteChats) {
+    if (localByCloudId.has(chat.id))
+      continue
+    if (claimedRemoteIds.has(chat.id))
+      continue
+    adopt.push(chat)
+  }
+
+  return { claim, create, adopt }
+}
+
+/**
+ * Run `createChat` for every entry in the plan in parallel, collecting
+ * successes and failures. Failures do not abort the run — the caller decides
+ * whether to retry next time.
+ *
+ * Use when:
+ * - Applying a `ReconcilePlan.create` list against the network. The v1
+ *   workload (a few sessions queued from offline use) is small enough that
+ *   `Promise.all` is fine; a hand-rolled bounded pool would be premature.
+ *
+ * Expects:
+ * - `mapper.createChat` handles its own 409-as-claim idempotency, so this
+ *   function can treat each result as either success or terminal failure.
+ *
+ * Returns:
+ * - One result entry per input action, in input order. Each entry has either
+ *   `cloudChatId` (success) or `error` (failure with message). Never both.
+ */
+export async function applyCreateActions(
+  mapper: CloudChatMapper,
+  actions: ReconcilePlan['create'],
+): Promise<Array<{ sessionId: string, cloudChatId?: string, error?: string }>> {
+  return await Promise.all(actions.map(async (action) => {
+    try {
+      const remote = await mapper.createChat({
+        // Reuse local sessionId as cloud chat id so subsequent reconciles
+        // can claim instead of create — even if a different device beats
+        // us to the punch.
+        id: action.sessionId,
+        type: 'bot',
+        members: [{ type: 'character', characterId: action.characterId }],
+      })
+      return { sessionId: action.sessionId, cloudChatId: remote.id }
+    }
+    catch (err) {
+      return { sessionId: action.sessionId, error: errorMessageFrom(err) ?? 'unknown' }
+    }
+  }))
+}
diff --git a/packages/stage-ui/src/libs/chat-sync/index.ts b/packages/stage-ui/src/libs/chat-sync/index.ts
new file mode 100644
index 000000000..56daf4ada
--- /dev/null
+++ b/packages/stage-ui/src/libs/chat-sync/index.ts
@@ -0,0 +1,23 @@
+export type {
+  CloudChatMapper,
+  CreateCloudChatMapperOptions,
+  CreateRemoteChatInput,
+  ReconcilePlan,
+  RemoteChat,
+} from './cloud-mapper'
+export {
+  applyCreateActions,
+  createCloudChatMapper,
+  reconcileLocalAndRemote,
+} from './cloud-mapper'
+
+export type { CloudMergeResult } from './wire-message'
+export {
+  extractMessageText,
+  isCloudSyncableMessage,
+  mergeCloudMessagesIntoLocal,
+  wireMessageToLocal,
+} from './wire-message'
+
+export type { ChatWsClient, ChatWsStatus, ChatWsUnsubscribe, CreateChatWsClientOptions } from './ws-client'
+export { createChatWsClient } from './ws-client'
diff --git a/packages/stage-ui/src/libs/chat-sync/pending-tracker.test.ts b/packages/stage-ui/src/libs/chat-sync/pending-tracker.test.ts
new file mode 100644
index 000000000..429837b19
--- /dev/null
+++ b/packages/stage-ui/src/libs/chat-sync/pending-tracker.test.ts
@@ -0,0 +1,139 @@
+import { describe, expect, it } from 'vitest'
+
+import { createPendingTracker } from './pending-tracker'
+
+describe('createPendingTracker', () => {
+  /**
+   * @example
+   * Tracked promise resolves normally → forwarded value, set drains to 0.
+   */
+  it('passes through resolution of the underlying promise', async () => {
+    const tracker = createPendingTracker()
+    const tracked = tracker.track(Promise.resolve(42))
+    expect(tracker.size()).toBe(1)
+    expect(await tracked).toBe(42)
+    // Microtask flush — settle removes from set
+    await Promise.resolve()
+    expect(tracker.size()).toBe(0)
+  })
+
+  /**
+   * @example
+   * Tracked promise rejects normally → forwarded error, set drains to 0.
+   */
+  it('passes through rejection of the underlying promise', async () => {
+    const tracker = createPendingTracker()
+    const original = new Error('original')
+    const tracked = tracker.track(Promise.reject(original))
+    await expect(tracked).rejects.toBe(original)
+    expect(tracker.size()).toBe(0)
+  })
+
+  /**
+   * @example
+   * The R-01 / JFR-001 P0 contract: in-flight RPC promise must reject when
+   * the tracker is drained — a hung eventa invoke would otherwise leave the
+   * caller waiting forever after socket disconnect.
+   */
+  it('rejects pending promises with the drainAll error before they settle', async () => {
+    const tracker = createPendingTracker()
+    let resolveOuter: (v: number) => void = () => {}
+    const neverResolves = new Promise<number>((resolve) => {
+      resolveOuter = resolve
+    })
+    const tracked = tracker.track(neverResolves)
+    expect(tracker.size()).toBe(1)
+
+    const cancelError = new Error('chat-ws: rpc cancelled')
+    tracker.drainAll(cancelError)
+
+    await expect(tracked).rejects.toBe(cancelError)
+    expect(tracker.size()).toBe(0)
+
+    // Even if the underlying promise settles later, the tracked promise
+    // already settled with the drain error and must not change state.
+    resolveOuter(99)
+    await Promise.resolve()
+    expect(tracker.size()).toBe(0)
+  })
+
+  /**
+   * @example
+   * drainAll over multiple in-flight tracks rejects every one of them with
+   * the same error. The chat-ws disposeContext fires once and must clear
+   * every queued sendMessages/pullMessages call simultaneously.
+   */
+  it('drainAll rejects every in-flight tracked promise', async () => {
+    const tracker = createPendingTracker()
+    const promises = [
+      tracker.track(new Promise<number>(() => {})),
+      tracker.track(new Promise<number>(() => {})),
+      tracker.track(new Promise<number>(() => {})),
+    ]
+    expect(tracker.size()).toBe(3)
+
+    const cancelError = new Error('drain')
+    tracker.drainAll(cancelError)
+
+    for (const p of promises) {
+      await expect(p).rejects.toBe(cancelError)
+    }
+    expect(tracker.size()).toBe(0)
+  })
+
+  /**
+   * @example
+   * drainAll on an empty tracker is a no-op (no throw, no work).
+   */
+  it('drainAll is a safe no-op when nothing is pending', () => {
+    const tracker = createPendingTracker()
+    expect(() => tracker.drainAll(new Error('unused'))).not.toThrow()
+    expect(tracker.size()).toBe(0)
+  })
+
+  /**
+   * @example
+   * Drain → fresh track works again — the tracker is reusable across
+   * dispose/reconnect cycles.
+   */
+  it('is reusable after drainAll — new tracks succeed normally', async () => {
+    const tracker = createPendingTracker()
+    // Pin a `.catch` on the cycle-1 tracked promise so the drain rejection
+    // is observed; otherwise vitest reports it as an unhandled rejection.
+    const cycle1 = tracker.track(new Promise<number>(() => {}))
+    cycle1.catch(() => {})
+    tracker.drainAll(new Error('cycle 1 dispose'))
+    expect(tracker.size()).toBe(0)
+
+    const fresh = tracker.track(Promise.resolve('reconnected'))
+    expect(tracker.size()).toBe(1)
+    expect(await fresh).toBe('reconnected')
+  })
+
+  /**
+   * @example
+   * After drainAll, a tracked promise that subsequently rejects must not
+   * cause an unhandled-rejection (we already settled with the drain error).
+   * If the wrapper accidentally re-rejected we'd see "uncaught (in promise)"
+   * spam from real eventa invokes that fail on disposed contexts.
+   */
+  it('does not re-reject a tracked promise after drainAll', async () => {
+    const tracker = createPendingTracker()
+    let rejectOuter: (e: Error) => void = () => {}
+    const eventualReject = new Promise<number>((_, reject) => {
+      rejectOuter = reject
+    })
+    const tracked = tracker.track(eventualReject)
+    tracker.drainAll(new Error('drain'))
+    await expect(tracked).rejects.toThrow('drain')
+
+    // Now make the underlying promise reject. The tracked wrapper already
+    // settled — this should NOT surface as an unhandled rejection.
+    rejectOuter(new Error('late underlying'))
+    // Attach a catch so the underlying promise's rejection is observed (and
+    // the test doesn't fail on unhandled-rejection in strict environments).
+    eventualReject.catch(() => {})
+    await Promise.resolve()
+    expect(tracker.size()).toBe(0)
+  })
+})
diff --git a/packages/stage-ui/src/libs/chat-sync/pending-tracker.ts b/packages/stage-ui/src/libs/chat-sync/pending-tracker.ts
new file mode 100644
index 000000000..fd987e7a5
--- /dev/null
+++ b/packages/stage-ui/src/libs/chat-sync/pending-tracker.ts
@@ -0,0 +1,86 @@
+/**
+ * Pending-promise tracker that lets a holder cancel every in-flight promise
+ * with a single `drainAll(error)`. Built for the chat-ws RPC layer where
+ * `eventa@0.3.0`'s `defineInvoke` stores promise resolvers in a closure-
+ * scoped Map with no public flush API — disposing the WS context does NOT
+ * settle the pending invokes, leaving callers hanging. We wrap every
+ * RPC invoke in `track()` so `drainAll()` from disposeContext can reject
+ * them with a concrete error.
+ *
+ * Use when:
+ * - You have an external promise source you cannot abort directly, and
+ *   you need a way to surface a hard cancellation to all in-flight callers
+ *   when the underlying transport tears down.
+ *
+ * Expects:
+ * - Wrapped promises eventually settle on their own (success or external
+ *   reject). The tracker only adds an alternative early-reject path.
+ *
+ * Returns:
+ * - `track(promise)` — wraps and returns a new promise that races between
+ *   the original outcome and a `drainAll` cancel.
+ * - `drainAll(error)` — settles every currently-pending tracked promise
+ *   with the given error and clears the set.
+ * - `size()` — current count of in-flight tracked promises (testing /
+ *   reactive surfacing).
+ */
+export interface PendingTracker {
+  track: <T>(promise: Promise<T>) => Promise<T>
+  drainAll: (error: Error) => void
+  size: () => number
+}
+
+export function createPendingTracker(): PendingTracker {
+  const pending = new Set<(err: Error) => void>()
+
+  function track<T>(promise: Promise<T>): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+      let settled = false
+      const rejectIfPending = (err: Error) => {
+        if (settled)
+          return
+        settled = true
+        pending.delete(rejectIfPending)
+        reject(err)
+      }
+      pending.add(rejectIfPending)
+      promise.then(
+        (value) => {
+          if (settled)
+            return
+          settled = true
+          pending.delete(rejectIfPending)
+          resolve(value)
+        },
+        (err) => {
+          if (settled)
+            return
+          settled = true
+          pending.delete(rejectIfPending)
+          reject(err)
+        },
+      )
+    })
+  }
+
+  function drainAll(error: Error) {
+    if (pending.size === 0)
+      return
+    // Snapshot first because the reject callback removes itself from the
+    // set as a side effect; iterating directly would skip entries.
+    const snapshot = Array.from(pending)
+    pending.clear()
+    for (const reject of snapshot) {
+      try {
+        reject(error)
+      }
+      catch {}
+    }
+  }
+
+  return {
+    track,
+    drainAll,
+    size: () => pending.size,
+  }
+}
diff --git a/packages/stage-ui/src/libs/chat-sync/wire-message.test.ts b/packages/stage-ui/src/libs/chat-sync/wire-message.test.ts
new file mode 100644
index 000000000..a65390ca7
--- /dev/null
+++ b/packages/stage-ui/src/libs/chat-sync/wire-message.test.ts
@@ -0,0 +1,267 @@
+import type { ChatAssistantMessage, ChatHistoryItem } from '@proj-airi/core-agent'
+import type { WireMessage } from '@proj-airi/server-sdk-shared'
+
+import { describe, expect, it } from 'vitest'
+
+import { extractMessageText, isCloudSyncableMessage, mergeCloudMessagesIntoLocal, wireMessageToLocal } from './wire-message'
+
+function makeWire(partial: Partial<WireMessage> & Pick<WireMessage, 'id' | 'seq'>): WireMessage {
+  return {
+    chatId: partial.chatId ?? 'chat-1',
+    senderId: partial.senderId ?? null,
+    role: partial.role ?? 'assistant',
+    content: partial.content ?? '',
+    createdAt: partial.createdAt ?? 0,
+    updatedAt: partial.updatedAt ?? 0,
+    ...partial,
+  }
+}
+
+describe('extractMessageText', () => {
+  /**
+   * @example
+   * User message with plain string content → returns the string verbatim.
+   */
+  it('returns the string content of user / system messages directly', () => {
+    expect(extractMessageText({ role: 'user', content: 'hi there' })).toBe('hi there')
+    expect(extractMessageText({ role: 'system', content: 'system prompt' })).toBe('system prompt')
+  })
+
+  /**
+   * @example
+   * Assistant message built from streaming has a slices array; we prefer it
+   * over the legacy `content` string because slices carry the live transcript.
+   */
+  it('joins assistant text slices when present', () => {
+    const assistant: ChatAssistantMessage = {
+      role: 'assistant',
+      content: 'old',
+      slices: [
+        { type: 'text', text: 'hello ' },
+        { type: 'text', text: 'world' },
+      ],
+      tool_results: [],
+    }
+    expect(extractMessageText(assistant)).toBe('hello world')
+  })
+
+  /**
+   * @example
+   * User message with multimodal parts → only the text parts come back.
+   */
+  it('flattens content arrays into their text parts only', () => {
+    const userWithImage: ChatHistoryItem = {
+      role: 'user',
+      content: [
+        { type: 'text', text: 'look at this:' },
+        { type: 'image_url', image_url: { url: 'data:image/png;base64,...' } } as never,
+      ],
+    }
+    expect(extractMessageText(userWithImage)).toBe('look at this:')
+  })
+})
+
+describe('isCloudSyncableMessage', () => {
+  /**
+   * @example
+   * v1 limitation: tool_call exchanges, system prompts, and per-device runtime
+   * errors stay local. The server's wire schema does not represent tool_call_id;
+   * system prompts are recomputed on every device from settings; error
+   * messages describe a per-device runtime failure that is meaningless to
+   * other devices and gets rejected by the server's role validator.
+   */
+  it('accepts only user / assistant; rejects tool / system / error', () => {
+    expect(isCloudSyncableMessage({ role: 'tool', content: 'x', tool_call_id: 't' } as ChatHistoryItem)).toBe(false)
+    expect(isCloudSyncableMessage({ role: 'system', content: 'x' })).toBe(false)
+    expect(isCloudSyncableMessage({ role: 'error', content: 'x' })).toBe(false)
+    expect(isCloudSyncableMessage({ role: 'user', content: 'x' })).toBe(true)
+    expect(isCloudSyncableMessage({ role: 'assistant', content: 'x', slices: [], tool_results: [] })).toBe(true)
+  })
+})
+
+describe('wireMessageToLocal', () => {
+  /**
+   * @example
+   * Server pushes an assistant wire message; local shape needs slices and
+   * tool_results placeholders so downstream UI invariants hold.
+   */
+  it('synthesizes assistant slices + empty tool_results from a wire message', () => {
+    const wire: WireMessage = {
+      id: 'm1',
+      chatId: 'c1',
+      senderId: null,
+      role: 'assistant',
+      content: 'reply',
+      seq: 7,
+      createdAt: 1730000000000,
+      updatedAt: 1730000000000,
+    }
+    const local = wireMessageToLocal(wire) as ChatAssistantMessage
+    expect(local.role).toBe('assistant')
+    expect(local.content).toBe('reply')
+    expect(local.slices).toEqual([{ type: 'text', text: 'reply' }])
+    expect(local.tool_results).toEqual([])
+    expect((local as ChatHistoryItem).id).toBe('m1')
+    expect((local as ChatHistoryItem).createdAt).toBe(1730000000000)
+  })
+
+  /**
+   * @example
+   * Empty content should yield an empty slices array, not a slice with empty
+   * text — that would produce a confusing UI bubble.
+   */
+  it('produces empty slices for assistant wire messages with empty content', () => {
+    const wire: WireMessage = {
+      id: 'm-empty',
+      chatId: 'c1',
+      senderId: null,
+      role: 'assistant',
+      content: '',
+      seq: 1,
+      createdAt: 0,
+      updatedAt: 0,
+    }
+    const local = wireMessageToLocal(wire) as ChatAssistantMessage
+    expect(local.slices).toEqual([])
+  })
+
+  /**
+   * @example
+   * Tool wire messages cannot reconstruct tool_call_id; we emit an error
+   * placeholder so the user sees something rather than a silent drop.
+   */
+  it('downgrades tool wire messages to error placeholders', () => {
+    const wire: WireMessage = {
+      id: 'm-tool',
+      chatId: 'c1',
+      senderId: null,
+      role: 'tool',
+      content: '',
+      seq: 1,
+      createdAt: 0,
+      updatedAt: 0,
+    }
+    const local = wireMessageToLocal(wire)
+    expect(local.role).toBe('error')
+    expect(local.content).toContain('tool message')
+  })
+})
+
+describe('mergeCloudMessagesIntoLocal', () => {
+  /**
+   * @example
+   * Server pushes a message that the local sender just wrote. The local
+   * version is preserved (dedup by id) and only the seq cursor advances.
+   */
+  it('drops echoes of locally-authored messages by id, keeps cursor in sync', () => {
+    const localUser: ChatHistoryItem = { role: 'user', content: 'hi', id: 'm1', createdAt: 0 }
+    const result = mergeCloudMessagesIntoLocal(
+      [localUser],
+      0,
+      {
+        messages: [makeWire({ id: 'm1', role: 'user', content: 'hi', seq: 5 })],
+        toSeq: 5,
+      },
+    )
+    expect(result.dirty).toBe(true)
+    expect(result.maxSeq).toBe(5)
+    // Echo deduped: the message list reference is the same, no duplicate.
+    expect(result.messages.length).toBe(1)
+    expect(result.messages[0]).toBe(localUser)
+  })
+
+  /**
+   * @example
+   * Pull returns messages we have not seen — append in the order received,
+   * mark dirty, and bump cursor.
+   */
+  it('appends genuinely new wire messages to the end of the list', () => {
+    const localUser: ChatHistoryItem = { role: 'user', content: 'hi', id: 'm1', createdAt: 0 }
+    const result = mergeCloudMessagesIntoLocal(
+      [localUser],
+      5,
+      {
+        messages: [
+          makeWire({ id: 'm2', role: 'assistant', content: 'hello', seq: 6 }),
+          makeWire({ id: 'm3', role: 'assistant', content: 'world', seq: 7 }),
+        ],
+        toSeq: 7,
+      },
+    )
+    expect(result.dirty).toBe(true)
+    expect(result.maxSeq).toBe(7)
+    expect(result.messages.map(m => m.id)).toEqual(['m1', 'm2', 'm3'])
+  })
+
+  /**
+   * @example
+   * No payload messages, but server reports a higher cursor (e.g. server-side
+   * deletion). We still mark dirty so the cursor persists and avoid pulling
+   * the same range again next time.
+   */
+  it('honours toSeq when no new messages arrive', () => {
+    const result = mergeCloudMessagesIntoLocal(
+      [{ role: 'user', content: 'hi', id: 'm1', createdAt: 0 }],
+      5,
+      { messages: [], toSeq: 9 },
+    )
+    expect(result.dirty).toBe(true)
+    expect(result.maxSeq).toBe(9)
+  })
+
+  /**
+   * @example
+   * Idempotent re-pull. Nothing to do, return the input untouched.
+   */
+  it('returns the original list reference when there is nothing to do', () => {
+    const messages: ChatHistoryItem[] = [{ role: 'user', content: 'hi', id: 'm1', createdAt: 0 }]
+    const result = mergeCloudMessagesIntoLocal(messages, 5, { messages: [], toSeq: 5 })
+    expect(result.dirty).toBe(false)
+    expect(result.messages).toBe(messages)
+    expect(result.maxSeq).toBe(5)
+  })
+
+  /**
+   * @example
+   * Reconnect catchup: a `newMessages` push fires before our `pullMessages`
+   * resolves. Both events carry the same wire message; the second merge
+   * must be a no-op (same id, same seq).
+   */
+  it('handles overlapping pull + push without duplication', () => {
+    const initial: ChatHistoryItem[] = [{ role: 'user', content: 'hi', id: 'm1', createdAt: 0 }]
+    const wireMessages = [makeWire({ id: 'm2', role: 'assistant', content: 'reply', seq: 6 })]
+
+    const afterPush = mergeCloudMessagesIntoLocal(initial, 5, { messages: wireMessages, toSeq: 6 })
+    expect(afterPush.messages.map(m => m.id)).toEqual(['m1', 'm2'])
+
+    // Same payload arriving again via pullMessages → no-op.
+    const afterPull = mergeCloudMessagesIntoLocal(afterPush.messages, afterPush.maxSeq, { messages: wireMessages, toSeq: 6 })
+    expect(afterPull.dirty).toBe(false)
+    expect(afterPull.messages).toBe(afterPush.messages)
+  })
+
+  /**
+   * @example
+   * Server pagination boundaries (or pub/sub interleave) can deliver a
+   * payload whose messages are not in seq order. The merge must sort them
+   * before appending so the in-memory list stays monotonic — without the
+   * sort, a list reordered once stays permanently misordered because the
+   * cursor still advances and subsequent pulls do not re-fix it.
+   */
+  it('sorts incoming wire messages by seq before appending', () => {
+    const result = mergeCloudMessagesIntoLocal(
+      [],
+      0,
+      {
+        messages: [
+          makeWire({ id: 'm3', seq: 9 }),
+          makeWire({ id: 'm1', seq: 7 }),
+          makeWire({ id: 'm2', seq: 8 }),
+        ],
+        toSeq: 9,
+      },
+    )
+    expect(result.messages.map(m => m.id)).toEqual(['m1', 'm2', 'm3'])
+    expect(result.maxSeq).toBe(9)
+  })
+})
diff --git a/packages/stage-ui/src/libs/chat-sync/wire-message.ts b/packages/stage-ui/src/libs/chat-sync/wire-message.ts
new file mode 100644
index 000000000..fb0dd7027
--- /dev/null
+++ b/packages/stage-ui/src/libs/chat-sync/wire-message.ts
@@ -0,0 +1,215 @@
+import type { ChatAssistantMessage, ChatHistoryItem } from '@proj-airi/core-agent'
+import type { NewMessagesPayload, WireMessage } from '@proj-airi/server-sdk-shared'
+
+/**
+ * Extract a plain-text payload from a local `ChatHistoryItem` for upload.
+ *
+ * Use when:
+ * - Pushing a message via `sendMessages` RPC. The server schema for v1 only
+ *   accepts a string `content` field — slices and tool calls cannot round-trip
+ *   yet.
+ *
+ * Expects:
+ * - Tool-result and tool-call slices are dropped silently. If you need full
+ *   fidelity, wait until the server-side schema grows structured content.
+ *
+ * Returns:
+ * - The first text slice for assistant messages with slice arrays; otherwise
+ *   the message's stringified content. Empty string when nothing extractable.
+ */
+export function extractMessageText(message: ChatHistoryItem): string {
+  if (message.role === 'assistant') {
+    // The discriminated union narrows `message` to a shape that includes
+    // `slices`; reading via the narrowed alias keeps tsc happy without an
+    // `as` cast.
+    const assistant: ChatAssistantMessage = message
+    if (Array.isArray(assistant.slices) && assistant.slices.length > 0) {
+      const text = assistant.slices
+        .filter((slice): slice is { type: 'text', text: string } => slice.type === 'text')
+        .map(slice => slice.text)
+        .join('')
+      if (text)
+        return text
+    }
+  }
+  if (typeof message.content === 'string')
+    return message.content
+  if (Array.isArray(message.content)) {
+    return message.content
+      .map((part) => {
+        if (typeof part === 'string')
+          return part
+        if (part && typeof part === 'object' && 'type' in part && part.type === 'text' && 'text' in part)
+          return String(part.text ?? '')
+        return ''
+      })
+      .join('')
+  }
+  return ''
+}
+
+/**
+ * Decide whether a local message should be mirrored to the cloud.
+ *
+ * Use when:
+ * - Filtering messages right before `sendMessages`. Tool call / tool result
+ *   exchanges are intentionally not synced in v1; system prompts also stay
+ *   local since they are recomputed from settings on every device.
+ *
+ * Expects:
+ * - The caller has already validated the message has an `id`.
+ *
+ * Returns:
+ * - `true` when the message is one of `user` / `assistant`. `tool` / `system`
+ *   / `error` roles are filtered out — error messages are local-only since
+ *   they describe a per-device runtime failure, not a server-acknowledged turn.
+ */
+export function isCloudSyncableMessage(message: ChatHistoryItem): boolean {
+  if (message.role === 'tool')
+    return false
+  if (message.role === 'system')
+    return false
+  if (message.role === 'error')
+    return false
+  return true
+}
+
+/**
+ * Convert a server `WireMessage` into a local `ChatHistoryItem`.
+ *
+ * Before:
+ * - { id, role: 'assistant', content: 'hi', seq: 7, ... }
+ *
+ * After:
+ * - { id, role: 'assistant', content: 'hi', slices: [{type:'text', text:'hi'}], tool_results: [], createdAt }
+ *
+ * Use when:
+ * - Merging messages received via `pullMessages` or `newMessages` into the
+ *   local session store. The local shape carries assistant-specific fields
+ *   that the wire format does not, so we synthesize minimal placeholders
+ *   for them.
+ */
+export function wireMessageToLocal(wire: WireMessage): ChatHistoryItem {
+  // Server wire format only stores plain text content; we recreate the
+  // local shape with empty tool_results / slices so downstream UI code can
+  // assume the invariants documented in core-agent's ChatAssistantMessage.
+  switch (wire.role) {
+    case 'assistant': {
+      const assistant: ChatAssistantMessage = {
+        role: 'assistant',
+        content: wire.content,
+        slices: wire.content ? [{ type: 'text', text: wire.content }] : [],
+        tool_results: [],
+      }
+      return Object.assign(assistant, {
+        id: wire.id,
+        createdAt: wire.createdAt,
+      })
+    }
+    case 'user':
+      return {
+        role: 'user',
+        content: wire.content,
+        id: wire.id,
+        createdAt: wire.createdAt,
+      }
+    case 'system':
+      return {
+        role: 'system',
+        content: wire.content,
+        id: wire.id,
+        createdAt: wire.createdAt,
+      }
+    case 'error':
+      return {
+        role: 'error',
+        content: wire.content,
+        id: wire.id,
+        createdAt: wire.createdAt,
+      }
+    case 'tool':
+      // Tool messages require a `tool_call_id` we cannot reconstruct from
+      // the wire format; surface as an error message so the UI shows
+      // *something* instead of dropping silently.
+      return {
+        role: 'error',
+        content: wire.content || '[tool message: cannot reconstruct without tool_call_id]',
+        id: wire.id,
+        createdAt: wire.createdAt,
+      }
+  }
+}
+
+export interface CloudMergeResult {
+  /** Merged message list (returns the original reference when nothing changed). */
+  messages: ChatHistoryItem[]
+  /** Highest seq seen, including the input cursor. */
+  maxSeq: number
+  /** True when either `messages` or `maxSeq` differs from the input. */
+  dirty: boolean
+}
+
+/**
+ * Merge a `newMessages` / `pullMessages` payload into a local message list.
+ *
+ * Use when:
+ * - The chat session store receives an authoritative server payload
+ *   (push or pull) and needs to update its in-memory list and `cloudMaxSeq`
+ *   cursor without losing local-only fields on existing rows.
+ *
+ * Expects:
+ * - `currentMessages` is the live list. Wire messages whose id already
+ *   exists locally are dropped (the local copy is preserved because it may
+ *   carry slices/tool_results that the wire format cannot represent).
+ * - `currentMaxSeq` is the cursor previously stored on the session meta;
+ *   `0` for the very first merge.
+ * - `payload.messages` may arrive out of seq order (server pagination
+ *   boundaries, pub/sub interleave). New messages are appended in seq order
+ *   so the in-memory list stays monotonic.
+ *
+ * Returns:
+ * - `messages` — the new array (same reference if no-op).
+ * - `maxSeq` — the cursor to write back to meta.
+ * - `dirty` — whether the caller should persist.
+ */
+export function mergeCloudMessagesIntoLocal(
+  currentMessages: ChatHistoryItem[],
+  currentMaxSeq: number,
+  payload: Pick<NewMessagesPayload, 'messages'> & { toSeq?: number },
+): CloudMergeResult {
+  const knownIds = new Set<string>()
+  for (const message of currentMessages) {
+    if (message.id)
+      knownIds.add(message.id)
+  }
+
+  // Sort incoming messages by seq before appending so that out-of-order
+  // delivery does not produce a permanently-misordered local list. Cloning
+  // the array first keeps callers safe from mutation.
+  const sortedWire = [...payload.messages].sort((a, b) => a.seq - b.seq)
+
+  const additions: ChatHistoryItem[] = []
+  let maxSeq = currentMaxSeq
+  for (const wire of sortedWire) {
+    if (wire.seq > maxSeq)
+      maxSeq = wire.seq
+    if (knownIds.has(wire.id))
+      continue
+    additions.push(wireMessageToLocal(wire))
+  }
+
+  // The server may report a higher seq than the highest message in the
+  // payload (e.g. when messages were redacted upstream). Honour it.
+  if (typeof payload.toSeq === 'number' && payload.toSeq > maxSeq)
+    maxSeq = payload.toSeq
+
+  if (additions.length === 0 && maxSeq === currentMaxSeq) {
+    return { messages: currentMessages, maxSeq: currentMaxSeq, dirty: false }
+  }
+
+  const messages = additions.length > 0
+    ? [...currentMessages, ...additions]
+    : currentMessages
+
+  return { messages, maxSeq, dirty: true }
+}
diff --git a/packages/stage-ui/src/libs/chat-sync/ws-client.test.ts b/packages/stage-ui/src/libs/chat-sync/ws-client.test.ts
new file mode 100644
index 000000000..e4ff8c791
--- /dev/null
+++ b/packages/stage-ui/src/libs/chat-sync/ws-client.test.ts
@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest'
+
+import { buildChatWsUrl, computeReconnectDelay, mapStatus } from './ws-client'
+
+describe('buildChatWsUrl', () => {
+  /**
+   * @example
+   * "https://api.example.com" + "abc" → "wss://api.example.com/ws/chat?token=abc"
+   */
+  it('upgrades https → wss and appends /ws/chat with token query', () => {
+    expect(buildChatWsUrl('https://api.example.com', 'abc')).toBe('wss://api.example.com/ws/chat?token=abc')
+  })
+
+  /**
+   * @example
+   * "http://localhost:3000" + "tok" → "ws://localhost:3000/ws/chat?token=tok"
+   */
+  it('upgrades http → ws on plain origins', () => {
+    expect(buildChatWsUrl('http://localhost:3000', 'tok')).toBe('ws://localhost:3000/ws/chat?token=tok')
+  })
+
+  /**
+   * @example
+   * Trailing slashes on the server URL must not double up the path.
+   */
+  it('normalizes trailing slashes', () => {
+    expect(buildChatWsUrl('https://api.example.com/', 'a')).toBe('wss://api.example.com/ws/chat?token=a')
+    expect(buildChatWsUrl('https://api.example.com//', 'a')).toBe('wss://api.example.com/ws/chat?token=a')
+  })
+
+  /**
+   * @example
+   * URL-unsafe token characters get percent-encoded by URLSearchParams.
+   */
+  it('encodes tokens safely', () => {
+    expect(buildChatWsUrl('https://api.example.com', 'a b+c=')).toBe('wss://api.example.com/ws/chat?token=a+b%2Bc%3D')
+  })
+})
+
+describe('computeReconnectDelay', () => {
+  /**
+   * @example
+   * First retry (retries=1) with base=1000 should land in [500, 1000) — never
+   * sub-50ms (the regression we're guarding against was 0..1000 uniform).
+   */
+  it('floors the first retry at 50% of the base delay', () => {
+    for (let i = 0; i < 200; i += 1) {
+      const delay = computeReconnectDelay(1, 1000, 30_000)
+      expect(delay).toBeGreaterThanOrEqual(500)
+      expect(delay).toBeLessThan(1000)
+    }
+  })
+
+  /**
+   * @example
+   * Exponential growth across retries until ceiling kicks in.
+   */
+  it('doubles per retry up to the ceiling', () => {
+    // retries=10 on base=1000 maxes out at 30_000 (cap). Bounds: [15000, 30000).
+    for (let i = 0; i < 50; i += 1) {
+      const delay = computeReconnectDelay(10, 1000, 30_000)
+      expect(delay).toBeGreaterThanOrEqual(15_000)
+      expect(delay).toBeLessThan(30_000)
+    }
+  })
+
+  /**
+   * @example
+   * retries=0 (the call signature accepts it even though VueUse starts at 1)
+   * should not produce a negative or NaN delay.
+   */
+  it('clamps retries=0 to the base window', () => {
+    const delay = computeReconnectDelay(0, 1000, 30_000)
+    expect(delay).toBeGreaterThanOrEqual(500)
+    expect(delay).toBeLessThan(1000)
+  })
+})
+
+describe('mapStatus', () => {
+  /**
+   * @example
+   * VueUse OPEN → chat-sync open; the `enabled` flag does not influence open.
+   */
+  it('maps OPEN to open regardless of enabled', () => {
+    expect(mapStatus('OPEN', true)).toBe('open')
+    expect(mapStatus('OPEN', false)).toBe('open')
+  })
+
+  /**
+   * @example
+   * VueUse CONNECTING → connecting; same independence from enabled.
+   */
+  it('maps CONNECTING to connecting regardless of enabled', () => {
+    expect(mapStatus('CONNECTING', true)).toBe('connecting')
+    expect(mapStatus('CONNECTING', false)).toBe('connecting')
+  })
+
+  /**
+   * @example
+   * The split between `idle` and `closed` is the whole reason the function
+   * exists: when the user has never connected (or explicitly disconnected),
+   * report `idle` so UI banners do not flash a "reconnecting…" state.
+   */
+  it('distinguishes closed (auto-reconnect pending) from idle (user intent off)', () => {
+    expect(mapStatus('CLOSED', true)).toBe('closed')
+    expect(mapStatus('CLOSED', false)).toBe('idle')
+  })
+})
diff --git a/packages/stage-ui/src/libs/chat-sync/ws-client.ts b/packages/stage-ui/src/libs/chat-sync/ws-client.ts
new file mode 100644
index 000000000..f20579af8
--- /dev/null
+++ b/packages/stage-ui/src/libs/chat-sync/ws-client.ts
@@ -0,0 +1,359 @@
+import type { NewMessagesPayload, PullMessagesRequest, PullMessagesResponse, SendMessagesRequest, SendMessagesResponse } from '@proj-airi/server-sdk-shared'
+
+import { defineInvoke } from '@moeru/eventa'
+import { createContext as createWsContext, wsErrorEvent } from '@moeru/eventa/adapters/websocket/native'
+import { errorMessageFrom } from '@moeru/std'
+import { newMessages, pullMessages, sendMessages } from '@proj-airi/server-sdk-shared'
+import { useWebSocket } from '@vueuse/core'
+import { computed, ref, shallowRef, watch } from 'vue'
+
+import * as v from 'valibot'
+
+import { createPendingTracker } from './pending-tracker'
+
+const RECONNECT_BASE_MS = 1000
+const RECONNECT_MAX_MS = 30_000
+const RECONNECT_RETRIES = -1
+
+// NOTICE:
+// The native ws adapter's context type is not directly exported from
+// `@moeru/eventa/adapters/websocket/native`; use the inferred return type so
+// `ctx.on` / `ctx.emit` overloads stay accurate.
+// Source: @moeru/eventa@0.3.0 — adapter exports only `createContext` and the
+// event constants.
+// Removal condition: the adapter exports a public `EventContext` type.
+type WsEventContext = ReturnType<typeof createWsContext>['context']
+
+const NewMessagesPayloadSchema = v.object({
+  chatId: v.pipe(v.string(), v.minLength(1)),
+  fromSeq: v.number(),
+  toSeq: v.number(),
+  messages: v.array(v.object({
+    id: v.pipe(v.string(), v.minLength(1)),
+    chatId: v.pipe(v.string(), v.minLength(1)),
+    senderId: v.nullable(v.string()),
+    role: v.picklist(['system', 'user', 'assistant', 'tool', 'error']),
+    content: v.string(),
+    seq: v.number(),
+    createdAt: v.number(),
+    updatedAt: v.number(),
+  })),
+})
+
+/**
+ * WebSocket connection lifecycle states surfaced to the chat-sync layer.
+ *
+ * - `idle`: never connected, or `disconnect()` was called and we are not
+ *   trying to reconnect.
+ * - `connecting`: WebSocket handshake in flight (initial or reconnect attempt).
+ * - `open`: socket open and `wsConnectedEvent` fired.
+ * - `closed`: lost the socket; auto-reconnect may bring it back to `connecting`.
+ */
+export type ChatWsStatus = 'idle' | 'connecting' | 'open' | 'closed'
+
+/**
+ * Disposer returned by `onNewMessages` / `onStatusChange`. Calling it removes
+ * the listener; safe to call multiple times.
+ */
+export type ChatWsUnsubscribe = () => void
+
+export interface CreateChatWsClientOptions {
+  /**
+   * Base server URL, e.g. `https://api.airi.build`. The client appends
+   * `/ws/chat?token=<jwt>` to build the WebSocket URL.
+   */
+  serverUrl: string
+  /**
+   * Resolves the current bearer token at connect/reconnect time. Returning
+   * `null` skips connecting (the user is not authenticated).
+   */
+  getToken: () => string | null
+}
+
+export interface ChatWsClient {
+  /** Current connection status. Useful for UI banners. */
+  status: () => ChatWsStatus
+  /** Connect (or reconnect with the latest token). No-op if already open. */
+  connect: () => void
+  /** Close the socket and stop auto-reconnect until the next `connect()`. The handle is reusable. */
+  disconnect: () => void
+  /** Permanently dispose the client (stops the status watcher). After `destroy()` the handle is unusable. */
+  destroy: () => void
+  /** RPC: push messages to a chat. Rejects if disconnected mid-flight. */
+  sendMessages: (req: SendMessagesRequest) => Promise<SendMessagesResponse>
+  /** RPC: pull messages newer than `afterSeq`. Rejects if disconnected mid-flight. */
+  pullMessages: (req: PullMessagesRequest) => Promise<PullMessagesResponse>
+  /**
+   * Subscribe to inbound `newMessages` push. The handler fires for every
+   * authenticated push, including potential echoes of the local sender — the
+   * caller MUST dedup by message id.
+   */
+  onNewMessages: (handler: (payload: NewMessagesPayload) => void) => ChatWsUnsubscribe
+  /** Subscribe to status transitions for UI / catchup orchestration. */
+  onStatusChange: (handler: (status: ChatWsStatus) => void) => ChatWsUnsubscribe
+}
+
+/**
+ * Build the `/ws/chat?token=<jwt>` URL from a base server URL.
+ *
+ * Before:
+ * - "https://api.airi.build", token="abc"
+ *
+ * After:
+ * - "wss://api.airi.build/ws/chat?token=abc"
+ *
+ * @internal
+ */
+export function buildChatWsUrl(serverUrl: string, token: string): string {
+  // Use URL parsing instead of string concat so trailing slashes / paths in
+  // serverUrl are normalized cleanly.
+  const url = new URL(serverUrl)
+  url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
+  url.pathname = `${url.pathname.replace(/\/+$/, '')}/ws/chat`
+  url.searchParams.set('token', token)
+  return url.toString()
+}
+
+/**
+ * Compute exponential reconnect delay with bounded jitter.
+ *
+ * Math context: VueUse's autoReconnect supplies `retries` starting at 1 for
+ * the first reconnect. The minimum 50% floor keeps the immediate retry from
+ * firing in <50ms (a 0..exp uniform jitter previously could fire at ~0ms,
+ * producing reconnect storms across many tabs against a hard-down server).
+ *
+ * @internal
+ */
+export function computeReconnectDelay(retries: number, baseMs: number, maxMs: number): number {
+  const exp = Math.min(maxMs, baseMs * 2 ** Math.max(0, retries - 1))
+  // 50% floor + 50% jitter window; total range is [exp/2, exp).
+  return Math.floor(exp * 0.5 + Math.random() * exp * 0.5)
+}
+
+/**
+ * Map VueUse's 3-state status onto the chat-sync 4-state machine.
+ *
+ * VueUse exposes `OPEN | CONNECTING | CLOSED`. Chat-sync needs to distinguish
+ * "never connected / explicitly disconnected" (`idle`) from "lost the socket
+ * and auto-reconnect is pending" (`closed`). The caller tracks the user
+ * intent via `enabled`; here we just translate the transport state.
+ *
+ * @internal
+ */
+export function mapStatus(vue: 'OPEN' | 'CONNECTING' | 'CLOSED', enabled: boolean): ChatWsStatus {
+  if (vue === 'OPEN')
+    return 'open'
+  if (vue === 'CONNECTING')
+    return 'connecting'
+  return enabled ? 'closed' : 'idle'
+}
+
+/**
+ * Create a chat-sync WebSocket client backed by VueUse's `useWebSocket` plus
+ * eventa's native ws adapter for the eventa context that handles RPC and
+ * outbound subscription routing.
+ *
+ * Use when:
+ * - The user is signed in and the chat store wants real-time sync.
+ *
+ * Expects:
+ * - `serverUrl` includes scheme (https/http). Token must be a valid JWT;
+ *   401s during the WebSocket upgrade close the socket immediately and the
+ *   auto-reconnect loop will keep retrying with whatever `getToken()`
+ *   returns next.
+ *
+ * Returns:
+ * - A handle exposing connect/disconnect/destroy, RPC functions, and event
+ *   hooks. RPC closures resolve the live `EventContext` per invocation so a
+ *   reconnect-induced context swap is transparent. In-flight RPCs reject on
+ *   disconnect with `chat-ws: rpc cancelled` so callers do not hang
+ *   indefinitely (eventa@0.3.0 does not flush its internal pending maps when
+ *   the underlying context is disposed; we wrap each invoke in a race).
+ */
+export function createChatWsClient(options: CreateChatWsClientOptions): ChatWsClient {
+  // `enabled` mirrors user intent: connect() flips on, disconnect() flips off.
+  // The url ref returns `undefined` when disabled, which makes useWebSocket
+  // close cleanly without firing the auto-reconnect loop.
+  const enabled = ref(false)
+  const urlRef = computed<string | undefined>(() => {
+    if (!enabled.value)
+      return undefined
+    const token = options.getToken()
+    if (!token)
+      return undefined
+    return buildChatWsUrl(options.serverUrl, token)
+  })
+
+  // The eventa context is rebuilt on every `onConnected` so RPC + push
+  // listeners survive a reconnect by re-binding to the fresh ws.
+  const context = shallowRef<WsEventContext | undefined>(undefined)
+  const contextDisposers: Array<() => void> = []
+  const newMessagesHandlers = new Set<(payload: NewMessagesPayload) => void>()
+  const statusHandlers = new Set<(status: ChatWsStatus) => void>()
+
+  // Pending RPC reject callbacks — drained on context disposal so callers
+  // do not hang waiting for a response that will never arrive.
+  // NOTICE:
+  // eventa@0.3.0 stores per-invoke promise resolvers in a closure-scoped Map
+  // and registers per-RPC ctx.on listeners on the live context. Disposing
+  // the context detaches the underlying socket but does not drain those
+  // resolvers. We wrap each invoke call in a `PendingTracker` that the
+  // disposeContext can flush.
+  // Source: @moeru/eventa@0.3.0 dist/src-Bb-vxm5k.mjs:62-99 — `defineInvoke`'s
+  // `mInvokeIdPromiseResolvers / mInvokeIdPromiseRejectors`.
+  // Removal condition: when eventa exposes a public flush/dispose API on the
+  // invoke handle, drop this wrapper.
+  const pendingRpcs = createPendingTracker()
+
+  function notifyStatus(next: ChatWsStatus) {
+    // Surface every transition in console so v1 reconnect / reconcile traces
+    // are greppable; quieter console levels (warn/error) suppress this.
+    console.info('[chat-ws] status →', next)
+    for (const handler of statusHandlers) {
+      try {
+        handler(next)
+      }
+      catch (err) {
+        // Listener errors must not poison the status pipeline.
+        console.warn('[chat-ws] status handler threw:', errorMessageFrom(err))
+      }
+    }
+  }
+
+  function disposeContext() {
+    while (contextDisposers.length > 0) {
+      const dispose = contextDisposers.pop()!
+      try {
+        dispose()
+      }
+      catch {}
+    }
+    context.value = undefined
+
+    // Reject every in-flight RPC so callers do not hang on a context that
+    // is now detached from any live socket.
+    pendingRpcs.drainAll(new Error('chat-ws: rpc cancelled (socket disconnected)'))
+  }
+
+  function attachContextListeners(ctx: WsEventContext) {
+    contextDisposers.push(ctx.on(newMessages, (event) => {
+      // External boundary: validate the wire payload before fanning it out.
+      // A malformed server push would otherwise flow unchecked into every
+      // subscriber and into `mergeCloudMessagesIntoSession`.
+      const result = v.safeParse(NewMessagesPayloadSchema, event.body)
+      if (!result.success) {
+        console.warn('[chat-ws] dropped malformed newMessages payload:', result.issues[0]?.message)
+        return
+      }
+      const payload = result.output
+      for (const handler of newMessagesHandlers) {
+        try {
+          handler(payload)
+        }
+        catch (err) {
+          // Same isolation principle as notifyStatus: one bad listener should
+          // not silently drop messages for the rest.
+          console.warn('[chat-ws] newMessages handler threw:', errorMessageFrom(err))
+        }
+      }
+    }))
+
+    contextDisposers.push(ctx.on(wsErrorEvent, (event) => {
+      console.warn('[chat-ws] socket error:', event.body)
+    }))
+  }
+
+  // The url-as-ref form lets useWebSocket reconnect when `urlRef` changes
+  // (token rotation, disconnect intent). VueUse internally compares the
+  // value and reopens; passing `undefined` cleanly closes any open socket.
+  const ws = useWebSocket<string>(urlRef, {
+    immediate: false,
+    autoClose: true,
+    autoReconnect: {
+      retries: RECONNECT_RETRIES,
+      delay: r => computeReconnectDelay(r, RECONNECT_BASE_MS, RECONNECT_MAX_MS),
+    },
+    onConnected(rawWs) {
+      const created = createWsContext(rawWs)
+      context.value = created.context
+      attachContextListeners(created.context)
+    },
+    onDisconnected() {
+      disposeContext()
+    },
+    onError(_rawWs, event) {
+      console.warn('[chat-ws] ws error event:', event)
+    },
+  })
+
+  // Translate VueUse's 3-state status into our 4-state machine and fan it
+  // out to the orchestrator. The chat store creates this inside a Pinia
+  // setup, which gives us a parent effect scope for `watch` to attach to.
+  // NOTICE:
+  // We intentionally do NOT stop this watcher in `disconnect()`; previous
+  // behavior killed it permanently and any caller that did `disconnect()`
+  // followed by `connect()` silently stopped receiving status events. The
+  // watcher is idle while the socket is closed, so leaving it attached
+  // costs nothing. Use `destroy()` for terminal cleanup.
+  const stopStatusWatch = watch(
+    [ws.status, enabled],
+    ([rawStatus, isEnabled]) => notifyStatus(mapStatus(rawStatus, isEnabled)),
+    { immediate: true },
+  )
+
+  function getContext(): WsEventContext {
+    if (!context.value)
+      throw new Error('chat-ws not connected')
+    return context.value
+  }
+
+  // We pass a function so each invoke resolves the *current* context. After
+  // a reconnect, `context` is rebuilt; a captured reference would point at a
+  // disposed context and the invoke would hang waiting for a response that
+  // never arrives (see pendingRpcRejects NOTICE for the dispose-flush story).
+  const invokeSendMessages = defineInvoke(getContext, sendMessages)
+  const invokePullMessages = defineInvoke(getContext, pullMessages)
+
+  return {
+    status: () => mapStatus(ws.status.value, enabled.value),
+    connect() {
+      if (enabled.value && ws.status.value === 'OPEN')
+        return
+      enabled.value = true
+      // urlRef will recompute and useWebSocket reopens; if it was already
+      // closed by a previous disconnect, call open() to nudge it.
+      if (ws.status.value === 'CLOSED')
+        ws.open()
+    },
+    disconnect() {
+      // Flip intent off first so the autoReconnect loop won't fight us, then
+      // ask VueUse to close. urlRef is now `undefined` which makes any
+      // future automatic open() a no-op until connect() is called again.
+      // Status watcher stays attached so callers can disconnect/connect on
+      // the same handle.
+      enabled.value = false
+      ws.close()
+      disposeContext()
+    },
+    destroy() {
+      enabled.value = false
+      ws.close()
+      disposeContext()
+      stopStatusWatch()
+    },
+    sendMessages: req => pendingRpcs.track(invokeSendMessages(req)),
+    pullMessages: req => pendingRpcs.track(invokePullMessages(req)),
+    onNewMessages(handler) {
+      newMessagesHandlers.add(handler)
+      return () => {
+        newMessagesHandlers.delete(handler)
+      }
+    },
+    onStatusChange(handler) {
+      statusHandlers.add(handler)
+      return () => {
+        statusHandlers.delete(handler)
+      }
+    },
+  }
+}
diff --git a/packages/stage-ui/src/stores/chat.contract.test.ts b/packages/stage-ui/src/stores/chat.contract.test.ts
index 6326ddec9..13bee6b05 100644
--- a/packages/stage-ui/src/stores/chat.contract.test.ts
+++ b/packages/stage-ui/src/stores/chat.contract.test.ts
@@ -134,6 +134,9 @@ vi.mock('./chat/session-store', () => ({
     persistSessionMessages: persistSessionMessagesMock,
     getSessionGeneration: () => currentGeneration,
     forkSession: forkSessionMock,
+    // Cloud sync surface used by `chat.ts performSend`. Mocked as a no-op so
+    // the orchestrator contract tests do not need a real WS / cloud mapper.
+    pushMessageToCloud: vi.fn().mockResolvedValue(undefined),
   }),
 }))
 
diff --git a/packages/stage-ui/src/stores/chat.ts b/packages/stage-ui/src/stores/chat.ts
index f3b9bd4cf..6e804e2d0 100644
--- a/packages/stage-ui/src/stores/chat.ts
+++ b/packages/stage-ui/src/stores/chat.ts
@@ -15,6 +15,7 @@ import { useAnalytics } from '../composables'
 import { useLlmmarkerParser } from '../composables/llm-marker-parser'
 import { categorizeResponse, createStreamingCategorizer } from '../composables/response-categoriser'
 import { activeTurnSpan, startSpan } from '../composables/use-io-tracer'
+import { extractMessageText, isCloudSyncableMessage } from '../libs/chat-sync'
 import { formatContextPromptText } from './chat/context-prompt'
 import { createMinecraftContext } from './chat/context-providers'
 import { useChatContextStore } from './chat/context-store'
@@ -248,12 +249,24 @@ export const useChatOrchestratorStore = defineStore('chat-orchestrator', () => {
       if (shouldAbort())
         return
 
-      chatSession.appendSessionMessage(sessionId, {
-        role: 'user',
+      const userMessageId = nanoid()
+      const userMessage = {
+        role: 'user' as const,
         content: finalContent,
         createdAt: sendingCreatedAt,
-        id: nanoid(),
-      })
+        id: userMessageId,
+      }
+      chatSession.appendSessionMessage(sessionId, userMessage)
+      // Cloud sync v1: only the raw text part round-trips; image attachments
+      // and other non-text parts stay local. The session-store guard handles
+      // anonymous / unmapped sessions and offline state.
+      if (isCloudSyncableMessage(userMessage)) {
+        void chatSession.pushMessageToCloud(sessionId, {
+          id: userMessageId,
+          role: 'user',
+          content: sendingMessage,
+        })
+      }
       const sessionMessagesForSend = chatSession.getSessionMessages(sessionId)
 
       // --------------------------------
@@ -518,7 +531,15 @@ export const useChatOrchestratorStore = defineStore('chat-orchestrator', () => {
       await parser.end()
 
       if (!isStaleGeneration() && buildingMessage.slices.length > 0) {
-        chatSession.appendSessionMessage(sessionId, toRaw(buildingMessage))
+        const finalAssistant = toRaw(buildingMessage)
+        chatSession.appendSessionMessage(sessionId, finalAssistant)
+        if (isCloudSyncableMessage(finalAssistant) && finalAssistant.id) {
+          void chatSession.pushMessageToCloud(sessionId, {
+            id: finalAssistant.id,
+            role: 'assistant',
+            content: extractMessageText(finalAssistant),
+          })
+        }
       }
 
       await hooks.emitStreamEndHooks(streamingMessageContext)
diff --git a/packages/stage-ui/src/stores/chat/data-store.ts b/packages/stage-ui/src/stores/chat/data-store.ts
index f1486f001..914e0c3e7 100644
--- a/packages/stage-ui/src/stores/chat/data-store.ts
+++ b/packages/stage-ui/src/stores/chat/data-store.ts
@@ -2,6 +2,8 @@ import type { SystemMessage } from '@xsai/shared-chat'
 
 import type { ChatHistoryItem } from '../../types/chat'
 
+import { cloneDeep } from 'es-toolkit'
+
 export interface ChatDataAccess {
   getActiveSessionId: () => string
   setActiveSessionId: (sessionId: string) => void
@@ -28,15 +30,6 @@ export interface ChatDataStore {
 }
 
 export function createChatDataStore(access: ChatDataAccess): ChatDataStore {
-  function cloneDeep<T>(value: T): T {
-    try {
-      return structuredClone(value)
-    }
-    catch {
-      return JSON.parse(JSON.stringify(value)) as T
-    }
-  }
-
   function ensureGeneration(sessionId: string) {
     const generations = access.getGenerations()
     if (generations[sessionId] === undefined)
diff --git a/packages/stage-ui/src/stores/chat/session-store.test.ts b/packages/stage-ui/src/stores/chat/session-store.test.ts
new file mode 100644
index 000000000..36437c7fb
--- /dev/null
+++ b/packages/stage-ui/src/stores/chat/session-store.test.ts
@@ -0,0 +1,296 @@
+import type { ChatSessionMeta, ChatSessionRecord, ChatSessionsIndex } from '../../types/chat-session'
+
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+// Refs the store reads through the mocked `useAuthStore` / `useAiriCardStore`.
+// Tests mutate these to simulate auth and card swaps.
+const userIdRef = ref<string>('local')
+const activeCardIdRef = ref<string>('default')
+const systemPromptRef = ref<string>('')
+
+const getIndexMock = vi.fn<(uid: string) => Promise<ChatSessionsIndex | null>>()
+const saveIndexMock = vi.fn<(idx: ChatSessionsIndex) => Promise<void>>()
+const getSessionMock = vi.fn<(id: string) => Promise<ChatSessionRecord | null>>()
+const saveSessionMock = vi.fn<(id: string, rec: ChatSessionRecord) => Promise<void>>()
+const deleteSessionRepoMock = vi.fn<(id: string) => Promise<void>>()
+const getOutboxMock = vi.fn<(uid: string) => Promise<any[]>>()
+const dropOutboxForSessionMock = vi.fn<(uid: string, id: string) => Promise<void>>()
+const getTombstonesMock = vi.fn<(uid: string) => Promise<string[]>>()
+const removeTombstonesMock = vi.fn<(uid: string, ids: string[]) => Promise<void>>()
+
+vi.mock('pinia', async () => {
+  const actual = await vi.importActual<typeof import('pinia')>('pinia')
+  return {
+    ...actual,
+    storeToRefs: (store: any) => store,
+  }
+})
+
+vi.mock('../auth', () => ({
+  useAuthStore: () => ({ userId: userIdRef }),
+}))
+
+vi.mock('../modules/airi-card', () => ({
+  useAiriCardStore: () => ({
+    activeCardId: activeCardIdRef,
+    systemPrompt: systemPromptRef,
+  }),
+}))
+
+vi.mock('../../database/repos/chat-sessions.repo', () => ({
+  chatSessionsRepo: {
+    getIndex: (uid: string) => getIndexMock(uid),
+    saveIndex: (idx: ChatSessionsIndex) => saveIndexMock(idx),
+    getSession: (id: string) => getSessionMock(id),
+    saveSession: (id: string, rec: ChatSessionRecord) => saveSessionMock(id, rec),
+    deleteSession: (id: string) => deleteSessionRepoMock(id),
+    getOutbox: (uid: string) => getOutboxMock(uid),
+    enqueueOutbox: vi.fn().mockResolvedValue(undefined),
+    dequeueOutbox: vi.fn().mockResolvedValue(undefined),
+    updateOutboxEntries: vi.fn().mockResolvedValue(undefined),
+    dropOutboxForSession: (uid: string, id: string) => dropOutboxForSessionMock(uid, id),
+    getTombstones: (uid: string) => getTombstonesMock(uid),
+    addTombstone: vi.fn().mockResolvedValue(undefined),
+    removeTombstones: (uid: string, ids: string[]) => removeTombstonesMock(uid, ids),
+  },
+}))
+
+vi.mock('../../libs/auth', () => ({
+  getAuthToken: vi.fn().mockResolvedValue('test-token'),
+}))
+
+vi.mock('../../libs/auth-fetch', () => ({
+  authedFetch: vi.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve({}) }),
+}))
+
+vi.mock('../../libs/server', () => ({
+  SERVER_URL: 'http://test',
+}))
+
+// Inert chat-sync surface. The store doesn't drive any cloud writes in these
+// tests (anonymous user for one, deferred index for the other), so noops are
+// sufficient. We keep `extractMessageText` realistic so message previews work.
+vi.mock('../../libs/chat-sync', () => ({
+  applyCreateActions: vi.fn().mockResolvedValue([]),
+  reconcileLocalAndRemote: vi.fn().mockReturnValue({ adopt: [], claim: [], create: [] }),
+  createCloudChatMapper: () => ({
+    listChats: vi.fn().mockResolvedValue([]),
+    deleteChat: vi.fn().mockResolvedValue(undefined),
+  }),
+  createChatWsClient: () => ({
+    status: () => 'idle' as const,
+    connect: vi.fn(),
+    disconnect: vi.fn(),
+    destroy: vi.fn(),
+    sendMessages: vi.fn().mockResolvedValue({ ok: true }),
+    pullMessages: vi.fn().mockResolvedValue({ messages: [], maxSeq: 0 }),
+    onNewMessages: () => () => {},
+    onStatusChange: () => () => {},
+  }),
+  extractMessageText: (m: any) => (typeof m?.content === 'string' ? m.content : ''),
+  isCloudSyncableMessage: () => false,
+  mergeCloudMessagesIntoLocal: () => ({ dirty: false, messages: [], maxSeq: 0 }),
+}))
+
+const { useChatSessionStore } = await import('./session-store')
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  userIdRef.value = 'local'
+  activeCardIdRef.value = 'default'
+  systemPromptRef.value = ''
+
+  getIndexMock.mockReset().mockResolvedValue(null)
+  saveIndexMock.mockReset().mockResolvedValue(undefined)
+  getSessionMock.mockReset().mockResolvedValue(null)
+  saveSessionMock.mockReset().mockResolvedValue(undefined)
+  deleteSessionRepoMock.mockReset().mockResolvedValue(undefined)
+  getOutboxMock.mockReset().mockResolvedValue([])
+  dropOutboxForSessionMock.mockReset().mockResolvedValue(undefined)
+  getTombstonesMock.mockReset().mockResolvedValue([])
+  removeTombstonesMock.mockReset().mockResolvedValue(undefined)
+})
+
+async function flushMicrotasks(rounds = 8) {
+  for (let i = 0; i < rounds; i++)
+    await Promise.resolve()
+}
+
+describe('chat-session-store · user swap during in-flight ensureActiveSessionForCharacter', () => {
+  // ROOT CAUSE:
+  //
+  // ensureActiveSessionForCharacter caches `ensureActivePromise` for singleflight
+  // and the IIFE captures `currentUserId` at start. When `userId` flips A → B
+  // mid-flight:
+  //   1. The userId watcher calls clearInMemoryState (resets sessionMetas /
+  //      index / activeSessionId), but does NOT reset `ensureActivePromise`.
+  //   2. A's IIFE eventually resumes after its awaited IDB read completes and
+  //      writes A's session record back into the now-empty B state — leak.
+  //   3. Any subsequent ensureActiveSessionForCharacter call (e.g. from the
+  //      [userId, activeCardId] watcher) returns A's stale promise instead of
+  //      starting a fresh hydrate for B — B silently sees no sessions.
+  //
+  // We fix this by:
+  //   - bumping an `ensureActiveEpoch` and nulling `ensureActivePromise` in
+  //     `clearInMemoryState`,
+  //   - re-checking the captured epoch after each await inside the IIFE,
+  //   - re-checking `sessionMetas[sessionId]` inside `loadSession` so the
+  //     post-IDB write does not resurrect cleared state,
+  //   - triggering a fresh hydrate from the userId watcher itself so the new
+  //     user actually loads.
+  it('runs a fresh hydrate for the new user and discards the stale write from the old user', async () => {
+    const aSessionMeta: ChatSessionMeta = {
+      sessionId: 'sess-A',
+      userId: 'A',
+      characterId: 'default',
+      createdAt: 1,
+      updatedAt: 1,
+    }
+    const aIndex: ChatSessionsIndex = {
+      userId: 'A',
+      characters: {
+        default: {
+          activeSessionId: 'sess-A',
+          sessions: { 'sess-A': aSessionMeta },
+        },
+      },
+    }
+    const bSessionMeta: ChatSessionMeta = {
+      sessionId: 'sess-B',
+      userId: 'B',
+      characterId: 'default',
+      createdAt: 2,
+      updatedAt: 2,
+    }
+    const bIndex: ChatSessionsIndex = {
+      userId: 'B',
+      characters: {
+        default: {
+          activeSessionId: 'sess-B',
+          sessions: { 'sess-B': bSessionMeta },
+        },
+      },
+    }
+
+    let resolveASessionGet: ((rec: ChatSessionRecord | null) => void) | undefined
+    getIndexMock.mockImplementation((uid: string) => {
+      if (uid === 'A')
+        return Promise.resolve(aIndex)
+      if (uid === 'B')
+        return Promise.resolve(bIndex)
+      return Promise.resolve(null)
+    })
+    getSessionMock.mockImplementation((id: string) => {
+      // A's session getSession is the slow await we use to hold the IIFE open
+      // until after the user swap fires.
+      if (id === 'sess-A') {
+        return new Promise<ChatSessionRecord | null>((resolve) => {
+          resolveASessionGet = resolve
+        })
+      }
+      if (id === 'sess-B')
+        return Promise.resolve({ meta: bSessionMeta, messages: [] })
+      return Promise.resolve(null)
+    })
+
+    userIdRef.value = 'A'
+    const store = useChatSessionStore()
+
+    // Kick off initialize; it will await ensureActiveSessionForCharacter, which
+    // will await loadSession('sess-A') → getSession('sess-A') (deferred).
+    const initPromise = store.initialize()
+    await flushMicrotasks()
+
+    // Sanity: A's getSession was reached and is parked.
+    expect(getSessionMock).toHaveBeenCalledWith('sess-A')
+    expect(resolveASessionGet).toBeDefined()
+
+    // Auth swap mid-flight.
+    userIdRef.value = 'B'
+    await nextTick()
+    await flushMicrotasks()
+
+    // Resolve A's IDB read AFTER the swap. With the bug, A's IIFE writes
+    // sess-A back into the cleared sessionMetas.
+    resolveASessionGet!({ meta: aSessionMeta, messages: [] })
+    await initPromise.catch(() => {})
+    await flushMicrotasks()
+
+    // B's hydrate must have fired — without the fix, the [userId, activeCardId]
+    // watcher returned the stale A promise and B never loaded.
+    expect(getIndexMock).toHaveBeenCalledWith('B')
+    expect(store.sessionMetas['sess-B']).toBeDefined()
+
+    // A's data must NOT have leaked into B's state.
+    expect(store.sessionMetas['sess-A']).toBeUndefined()
+  })
+})
+
+describe('chat-session-store · loadSession vs concurrent deleteSession', () => {
+  // ROOT CAUSE:
+  //
+  // loadSession kicks off `chatSessionsRepo.getSession(id)` and writes the
+  // returned record back into reactive state on resolve. If `deleteSession(id)`
+  // runs synchronously between the getSession() call and its resolution, the
+  // post-await `sessionMetas.value[sessionId] = stored.meta` write resurrects
+  // the deleted entry — and `loadedSessions.add(id)` then short-circuits every
+  // future loadSession retry, locking the resurrection in.
+  //
+  // The drawer's batch loadSession + per-row trash button is the production
+  // path that hits this race.
+  //
+  // We fix this by re-checking `sessionMetas.value[sessionId]` inside
+  // loadSession after the await; if the session is gone, skip the write-back
+  // and skip `loadedSessions.add` so a subsequent (legitimate) load can retry.
+  it('does not resurrect a session deleted while loadSession was awaiting IDB', async () => {
+    const meta: ChatSessionMeta = {
+      sessionId: 'sess-1',
+      userId: 'local',
+      characterId: 'default',
+      createdAt: 1,
+      updatedAt: 1,
+    }
+
+    let resolveGet: ((rec: ChatSessionRecord | null) => void) | undefined
+    getSessionMock.mockImplementation((id: string) => {
+      if (id === 'sess-1') {
+        return new Promise<ChatSessionRecord | null>((resolve) => {
+          resolveGet = resolve
+        })
+      }
+      return Promise.resolve(null)
+    })
+
+    userIdRef.value = 'local'
+    const store = useChatSessionStore()
+
+    // Inject sess-1 into sessionMetas without going through createSession
+    // (which would also pre-mark it loaded and short-circuit our test).
+    store.applyRemoteSnapshot({
+      activeSessionId: '',
+      sessionMessages: {},
+      sessionMetas: { 'sess-1': meta },
+      index: null,
+    })
+    expect(store.sessionMetas['sess-1']).toBeDefined()
+
+    // Start loadSession (don't await). getSession is now pending.
+    const loadPromise = store.loadSession('sess-1')
+    await flushMicrotasks()
+    expect(resolveGet).toBeDefined()
+
+    // Delete the session. In-memory clear is synchronous; IDB delete enqueues.
+    await store.deleteSession('sess-1')
+    expect(store.sessionMetas['sess-1']).toBeUndefined()
+
+    // Resolve getSession with the stale stored record.
+    resolveGet!({ meta, messages: [{ role: 'user', content: 'hi', id: 'm1' } as any] })
+    await loadPromise
+    await flushMicrotasks()
+
+    // Without the fix, sess-1 reappears here.
+    expect(store.sessionMetas['sess-1']).toBeUndefined()
+  })
+})
diff --git a/packages/stage-ui/src/stores/chat/session-store.ts b/packages/stage-ui/src/stores/chat/session-store.ts
index e5e796e07..33c3c98c0 100644
--- a/packages/stage-ui/src/stores/chat/session-store.ts
+++ b/packages/stage-ui/src/stores/chat/session-store.ts
@@ -1,15 +1,52 @@
+import type { MessageRole, NewMessagesPayload } from '@proj-airi/server-sdk-shared'
+
+import type { ChatSendOutboxEntry } from '../../database/repos/chat-sessions.repo'
+import type { ChatWsClient, CloudChatMapper } from '../../libs/chat-sync'
 import type { ChatHistoryItem } from '../../types/chat'
 import type { ChatSessionMeta, ChatSessionRecord, ChatSessionsExport, ChatSessionsIndex } from '../../types/chat-session'
 
+import { errorMessageFrom } from '@moeru/std'
+import { cloneDeep } from 'es-toolkit'
 import { nanoid } from 'nanoid'
 import { defineStore, storeToRefs } from 'pinia'
 import { computed, ref, watch } from 'vue'
 
 import { chatSessionsRepo } from '../../database/repos/chat-sessions.repo'
+import { getAuthToken } from '../../libs/auth'
+import { authedFetch } from '../../libs/auth-fetch'
+import {
+  applyCreateActions,
+  createChatWsClient,
+  createCloudChatMapper,
+  extractMessageText,
+  isCloudSyncableMessage,
+  mergeCloudMessagesIntoLocal,
+  reconcileLocalAndRemote,
+} from '../../libs/chat-sync'
+import { SERVER_URL } from '../../libs/server'
 import { useAuthStore } from '../auth'
 import { useAiriCardStore } from '../modules/airi-card'
 import { mergeLoadedSessionMessages } from './session-message-merge'
 
+/**
+ * Roles that are eligible to push to the cloud. Wire schema accepts more,
+ *  but our v1 contract only round-trips authored turns.
+ */
+type CloudSyncableRole = Extract<MessageRole, 'user' | 'assistant'>
+
+/** Payload shape consumed by `mergeCloudMessagesIntoSession`. */
+interface CloudMergePayload {
+  messages: NewMessagesPayload['messages']
+  toSeq?: number
+}
+
+/**
+ * Max retry attempts before an outbox entry is treated as terminally failed.
+ * Failed entries stay in IDB so the user can see them in `outboxPendingCount`
+ * and so a future schema migration / manual replay can recover them.
+ */
+const OUTBOX_MAX_ATTEMPTS = 5
+
 export const useChatSessionStore = defineStore('chat-session', () => {
   const { userId } = storeToRefs(useAuthStore())
   const { activeCardId, systemPrompt } = storeToRefs(useAiriCardStore())
@@ -24,11 +61,42 @@ export const useChatSessionStore = defineStore('chat-session', () => {
   const isReady = computed(() => ready.value)
   const initializing = ref(false)
   let initializePromise: Promise<void> | null = null
+  let ensureActivePromise: Promise<void> | null = null
+  // Bumped by `clearInMemoryState` (user swap / teardown). The
+  // `ensureActiveSessionForCharacter` IIFE captures this at call time and
+  // bails after every await once it changes, so a stale hydrate from the
+  // previous user cannot write its index/session back into the cleared
+  // state once the swap has happened.
+  let ensureActiveEpoch = 0
 
   let persistQueue = Promise.resolve()
   const loadedSessions = new Set<string>()
   const loadingSessions = new Map<string, Promise<void>>()
 
+  // Cloud sync state. The WS client is constructed lazily so anonymous
+  // (`userId === 'local'`) users never open a socket. `cloudSyncReady` is a
+  // UI-facing readiness flag (true after a successful reconcile); it does
+  // NOT gate `pushMessageToCloud`, which writes to the outbox and lets
+  // reconnect catch up — that way the very first message in a session does
+  // not get dropped while reconcile completes.
+  const cloudSyncReady = ref(false)
+  /**
+   * Number of message sends + tombstone deletes waiting on cloud delivery.
+   * Reactive so a UI banner can surface "N messages syncing" / "K failed".
+   */
+  const outboxPendingCount = ref(0)
+  let wsClient: ChatWsClient | undefined
+  let cloudMapper: CloudChatMapper | undefined
+  let cloudReconcileTask: Promise<void> | undefined
+  let pendingReconcile = false
+  // Incremented on every teardown / user swap. Long-running reconcile IIFEs
+  // capture the epoch at start and bail after every await once it changes,
+  // so account-A mutations cannot land on account-B state after a sign-out.
+  let reconcileEpoch = 0
+  // Single-flight guard for outbox drain so concurrent `reconcile end` +
+  // `pushMessageToCloud post-enqueue` triggers don't double-send.
+  let outboxDrainTask: Promise<void> | undefined
+
   // I know this nu uh, better than loading all language on rehypeShiki
   const codeBlockSystemPrompt = '- For any programming code block, always specify the programming language that supported on @shikijs/rehype on the rendered markdown, eg. ```python ... ```\n'
   const mathSyntaxSystemPrompt = '- For any math equation, use LaTeX format, eg: $ x^3 $, always escape dollar sign outside math equation\n'
@@ -41,18 +109,35 @@ export const useChatSessionStore = defineStore('chat-session', () => {
     return activeCardId.value || 'default'
   }
 
-  function enqueuePersist(task: () => Promise<void>) {
-    persistQueue = persistQueue.then(task, task)
-    return persistQueue
+  function getCloudMapper(): CloudChatMapper {
+    if (!cloudMapper) {
+      // authedFetch handles 401 → token-refresh → retry transparently, so
+      // reconcile / DELETE survive expired tokens without bouncing through
+      // a full WS reconnect cycle.
+      cloudMapper = createCloudChatMapper({ serverUrl: SERVER_URL, fetch: authedFetch })
+    }
+    return cloudMapper
   }
 
-  function cloneDeep<T>(value: T): T {
-    try {
-      return structuredClone(value)
-    }
-    catch {
-      return JSON.parse(JSON.stringify(value)) as T
-    }
+  /**
+   * Append a write task to the persist queue. Tasks always run sequentially
+   * regardless of whether prior tasks rejected — but rejections propagate to
+   * the awaiting caller AND are surfaced via console for debugging. The
+   * previous `then(task, task)` form silently swallowed prior rejections by
+   * running the next task as the rejection handler, which masked IDB
+   * failures from the cloud-sync cursor tracking that depends on them.
+   */
+  function enqueuePersist<T>(task: () => Promise<T>): Promise<T> {
+    const next = persistQueue.then(task)
+    // Keep the queue alive after a rejection but log it so silent IDB
+    // failures (quota, corruption) surface during dev.
+    persistQueue = next.then(
+      () => undefined,
+      (err) => {
+        console.warn('[chat-session] persist task failed:', errorMessageFrom(err))
+      },
+    )
+    return next
   }
 
   function snapshotMessages(messages: ChatHistoryItem[]) {
@@ -104,6 +189,19 @@ export const useChatSessionStore = defineStore('chat-session', () => {
       userId: currentUserId,
       characters: {},
     }
+    // Hydrate `sessionMetas` from the index so consumers like the sessions
+    // drawer can list every owned session without having to `loadSession`
+    // each one (which would pull every messages payload from IndexedDB).
+    // Existing entries win to preserve any in-memory mutations the store
+    // performed before the index landed.
+    if (index.value) {
+      for (const character of Object.values(index.value.characters)) {
+        for (const [sessionId, meta] of Object.entries(character.sessions)) {
+          if (!sessionMetas.value[sessionId])
+            sessionMetas.value[sessionId] = meta
+        }
+      }
+    }
   }
 
   function getCharacterIndex(characterId: string) {
@@ -174,6 +272,24 @@ export const useChatSessionStore = defineStore('chat-session', () => {
     ])
   }
 
+  /**
+   * Hydrate a single session's messages from IDB into memory. Idempotent —
+   * subsequent calls for the same id are no-ops.
+   *
+   * Use when:
+   * - The drawer is opening, the user is switching to a session, or any
+   *   caller needs the full message list (not just the meta record).
+   *
+   * Expects:
+   * - `sessionId` exists either in `sessionMetas` or in IDB.
+   *
+   * Returns:
+   * - Resolves once the session is in memory. On IDB error, removes the id
+   *   from the loading map so subsequent calls can retry rather than wedge
+   *   on a stale promise. Errors are intentionally not rethrown — the
+   *   failing session is simply absent from local state and the next
+   *   loadSession call will retry.
+   */
   async function loadSession(sessionId: string) {
     if (loadedSessions.has(sessionId)) {
       return
@@ -184,26 +300,73 @@ export const useChatSessionStore = defineStore('chat-session', () => {
     }
 
     const loadPromise = (async () => {
-      const stored = await chatSessionsRepo.getSession(sessionId)
-      if (stored) {
-        const currentMessages = sessionMessages.value[sessionId] ?? []
-        const mergedMessages = mergeLoadedSessionMessages(stored.messages, currentMessages)
+      try {
+        const stored = await chatSessionsRepo.getSession(sessionId)
+        // Re-check existence: `deleteSession` (or `clearInMemoryState` on a
+        // user swap) may have run while we were awaiting IDB. Without this
+        // guard, the post-await write resurrects the deleted entry and
+        // `loadedSessions.add` then short-circuits every future legitimate
+        // load — locking the resurrection in. The drawer's batch
+        // loadSession + per-row trash button hits this race in production.
+        if (!sessionMetas.value[sessionId])
+          return
+        if (stored) {
+          const currentMessages = sessionMessages.value[sessionId] ?? []
+          const mergedMessages = mergeLoadedSessionMessages(stored.messages, currentMessages)
 
-        sessionMetas.value[sessionId] = stored.meta
-        replaceSessionMessages(sessionId, mergedMessages, { persist: false })
-        ensureGeneration(sessionId)
+          sessionMetas.value[sessionId] = stored.meta
+          replaceSessionMessages(sessionId, mergedMessages, { persist: false })
+          ensureGeneration(sessionId)
 
-        if (mergedMessages !== stored.messages)
-          await persistSession(sessionId)
+          if (mergedMessages !== stored.messages)
+            await persistSession(sessionId)
+        }
+        loadedSessions.add(sessionId)
+
+        // Cloud gap fill: when the session is mapped to a cloud chat, ask
+        // the server for everything past our highest known seq. Best
+        // effort — failures are logged inside pullCloudMessages and the
+        // local view stays usable.
+        const meta = sessionMetas.value[sessionId]
+        if (meta?.cloudChatId)
+          await pullCloudMessages(sessionId)
+      }
+      catch (err) {
+        // Do NOT add to loadedSessions on failure — the next call should
+        // retry rather than fast-return on stale "already loaded" state.
+        console.warn('[chat-session] loadSession failed for', sessionId, errorMessageFrom(err))
       }
-      loadedSessions.add(sessionId)
     })()
 
     loadingSessions.set(sessionId, loadPromise)
-    await loadPromise
-    loadingSessions.delete(sessionId)
+    try {
+      await loadPromise
+    }
+    finally {
+      // Always drain the loading map so a transient failure does not leave
+      // a permanent wedge entry.
+      loadingSessions.delete(sessionId)
+    }
   }
 
+  /**
+   * Mint a new session for `characterId`, optionally seeding it with messages
+   * and / or a title. Persists the new session and its index entry, then
+   * (when signed in) kicks off a fire-and-forget cloud reconcile so the new
+   * session gets a `cloudChatId` before the first message lands.
+   *
+   * Use when:
+   * - The drawer's "+ New" button fires, the active card changes and the
+   *   user has no session for that card yet, or `forkSession` needs a new
+   *   destination.
+   *
+   * Expects:
+   * - The store is initialized (or being initialized via `initialize()`).
+   *
+   * Returns:
+   * - The new session id. When `setActive` is not `false` the session is
+   *   also made the active one.
+   */
   async function createSession(characterId: string, options?: { setActive?: boolean, messages?: ChatHistoryItem[], title?: string }) {
     const currentUserId = getCurrentUserId()
     const sessionId = nanoid()
@@ -243,30 +406,725 @@ export const useChatSessionStore = defineStore('chat-session', () => {
     if (options?.setActive !== false)
       activeSessionId.value = sessionId
 
+    // Fire-and-forget cloud reconcile so the freshly-minted session gets a
+    // `cloudChatId` (POST /api/v1/chats) before the user types into it.
+    // Reentrant: `reconcileCloudSessions` itself guards on `cloudReconcileTask`
+    // so concurrent triggers collapse to a single in-flight task.
+    if (currentUserId !== 'local')
+      void reconcileCloudSessions()
+
     return sessionId
   }
 
-  async function ensureActiveSessionForCharacter() {
+  /**
+   * Permanently remove a session from the local index + IDB and, when the
+   * session is cloud-mapped and the user is signed in, soft-delete the
+   * server chat via `DELETE /api/v1/chats/:id`.
+   *
+   * Use when:
+   * - The user explicitly chooses "delete" from the sessions drawer.
+   *
+   * Expects:
+   * - The caller does not need to pre-confirm: this method is destructive.
+   *   When the deleted session is the active one, the store falls back to
+   *   another session for the same character or creates a fresh one.
+   *
+   * Returns:
+   * - Resolves once both local state and (if applicable) the remote DELETE
+   *   call have settled. Cloud failures are swallowed with a console.warn —
+   *   the local removal goes through either way so the user does not see
+   *   a "ghost" session after the click. A tombstone is written so the
+   *   reconcile `adopt` branch will not re-import the row on next login.
+   */
+  async function deleteSession(sessionId: string) {
+    const meta = sessionMetas.value[sessionId]
+    if (!meta)
+      return
+
+    const wasActive = activeSessionId.value === sessionId
+    const characterId = meta.characterId
+    const cloudChatId = meta.cloudChatId
     const currentUserId = getCurrentUserId()
-    const characterId = getCurrentCharacterId()
+    const isCloudUser = currentUserId !== 'local'
 
-    if (!index.value || index.value.userId !== currentUserId)
-      await loadIndexForUser(currentUserId)
+    // ROOT CAUSE:
+    //
+    // If we awaited the cloud DELETE before mutating in-memory state, any
+    // other code path firing a `persistSession` during that await would
+    // snapshot the index *with the doomed entry still in it* and write that
+    // snapshot to IDB. The user then sees the row reappear after a reload.
+    //
+    // Old behavior: await mapper.deleteChat → mutate → persist; the
+    // overlapping persistSession races us and wins.
+    //
+    // We fixed this by performing every in-memory and IDB mutation
+    // synchronously up front, then firing the cloud DELETE as
+    // fire-and-forget. Persistence races now read the post-deletion state.
+    delete sessionMetas.value[sessionId]
+    delete sessionMessages.value[sessionId]
+    delete sessionGenerations.value[sessionId]
+    loadedSessions.delete(sessionId)
+    loadingSessions.delete(sessionId)
 
-    const characterIndex = getCharacterIndex(characterId)
-    if (!characterIndex) {
-      await createSession(characterId)
-      return
+    if (index.value) {
+      const characterIndex = index.value.characters[characterId]
+      if (characterIndex) {
+        delete characterIndex.sessions[sessionId]
+        if (characterIndex.activeSessionId === sessionId)
+          characterIndex.activeSessionId = ''
+      }
     }
 
-    if (!characterIndex.activeSessionId) {
-      await createSession(characterId)
-      return
+    await enqueuePersist(() => chatSessionsRepo.deleteSession(sessionId))
+    // Drop any pending outbox sends for this session — pushing messages
+    // to a deleted chat is wasted work and may surface as a server-side
+    // 404/410 next time we drain.
+    if (isCloudUser)
+      await enqueuePersist(() => chatSessionsRepo.dropOutboxForSession(currentUserId, sessionId))
+    await persistIndex()
+    await refreshOutboxPendingCount()
+
+    if (cloudChatId && isCloudUser) {
+      // Tombstone first: even if the cloud DELETE never reaches the server
+      // (offline, transient 5xx), the next reconcile will see the cloudChatId
+      // here and skip the adopt branch — preventing the ghost-session bug
+      // where the server still has the row and re-creates the local mapping.
+      // The reconcile-driven `drainTombstones` retries failed DELETEs.
+      await enqueuePersist(() => chatSessionsRepo.addTombstone(currentUserId, cloudChatId))
+      getCloudMapper().deleteChat(cloudChatId).then(
+        async () => {
+          // Server confirmed the delete; reconcile will not see this id again,
+          // so we can drop the tombstone.
+          await enqueuePersist(() => chatSessionsRepo.removeTombstones(currentUserId, [cloudChatId]))
+        },
+        (err) => {
+          console.warn('[chat-sync] DELETE /api/v1/chats failed for', sessionId, errorMessageFrom(err))
+        },
+      )
     }
 
-    activeSessionId.value = characterIndex.activeSessionId
-    await loadSession(characterIndex.activeSessionId)
-    ensureSession(characterIndex.activeSessionId)
+    // If the deleted session was active, pick another for the same
+    // character or mint a fresh one so the chat surface never lands on an
+    // empty void.
+    if (wasActive) {
+      const characterIndex = index.value?.characters[characterId]
+      const fallbackId = characterIndex
+        ? Object.keys(characterIndex.sessions).find(id => sessionMetas.value[id])
+        : undefined
+      if (fallbackId) {
+        activeSessionId.value = fallbackId
+        if (characterIndex)
+          characterIndex.activeSessionId = fallbackId
+        await loadSession(fallbackId)
+        await persistIndex()
+      }
+      else {
+        await createSession(characterId, { setActive: true })
+      }
+    }
+  }
+
+  /**
+   * Load the per-user index, pick (or mint) the active session for the
+   * current character, and hydrate it into memory. Reentrant: concurrent
+   * callers share a single in-flight promise so a rapid `[userId, characterId]`
+   * change burst does not produce duplicate sessions.
+   */
+  async function ensureActiveSessionForCharacter(): Promise<void> {
+    if (ensureActivePromise)
+      return ensureActivePromise
+    const myEpoch = ensureActiveEpoch
+    const isStaleEpoch = () => myEpoch !== ensureActiveEpoch
+    ensureActivePromise = (async () => {
+      const currentUserId = getCurrentUserId()
+      const characterId = getCurrentCharacterId()
+
+      if (!index.value || index.value.userId !== currentUserId)
+        await loadIndexForUser(currentUserId)
+      if (isStaleEpoch())
+        return
+
+      const characterIndex = getCharacterIndex(characterId)
+      if (!characterIndex) {
+        await createSession(characterId)
+        return
+      }
+
+      if (!characterIndex.activeSessionId) {
+        await createSession(characterId)
+        return
+      }
+
+      activeSessionId.value = characterIndex.activeSessionId
+      await loadSession(characterIndex.activeSessionId)
+      if (isStaleEpoch())
+        return
+      ensureSession(characterIndex.activeSessionId)
+    })()
+    try {
+      await ensureActivePromise
+    }
+    finally {
+      // Only release the slot if we still own it. A user swap mid-flight
+      // bumps the epoch and `clearInMemoryState` already nulled the slot —
+      // a fresh hydrate may now own it and unconditional null would clobber
+      // the new owner.
+      if (myEpoch === ensureActiveEpoch)
+        ensureActivePromise = null
+    }
+  }
+
+  /**
+   * Lookup local sessionId from a cloud chatId.
+   *
+   * Used when receiving `newMessages` push events that only carry `chatId`.
+   * Returns `undefined` if the chat is not yet mapped to a local session.
+   */
+  function findSessionIdByCloudChatId(cloudChatId: string): string | undefined {
+    for (const meta of Object.values(sessionMetas.value)) {
+      if (meta.cloudChatId === cloudChatId)
+        return meta.sessionId
+    }
+    return undefined
+  }
+
+  /**
+   * Merge cloud-sourced messages into a local session, deduping by id and
+   * advancing `cloudMaxSeq`. Locally-authored versions of the same id are
+   * preserved (their slices / tool calls carry richer content than the wire
+   * format) — only truly new ids are appended.
+   *
+   * Persistence is queued through the existing `persistSession` pipeline.
+   */
+  function mergeCloudMessagesIntoSession(sessionId: string, payload: CloudMergePayload) {
+    const meta = sessionMetas.value[sessionId]
+    if (!meta)
+      return
+
+    const current = sessionMessages.value[sessionId] ?? []
+    const merged = mergeCloudMessagesIntoLocal(current, meta.cloudMaxSeq ?? 0, payload)
+    if (!merged.dirty)
+      return
+
+    sessionMessages.value[sessionId] = merged.messages
+    sessionMetas.value[sessionId] = { ...meta, cloudMaxSeq: merged.maxSeq }
+    void persistSession(sessionId)
+  }
+
+  /**
+   * Pull-and-merge gap fill for a single session. Safe to call multiple
+   * times; uses `meta.cloudMaxSeq` as the cursor.
+   */
+  async function pullCloudMessages(sessionId: string) {
+    if (!wsClient || wsClient.status() !== 'open')
+      return
+    const meta = sessionMetas.value[sessionId]
+    if (!meta?.cloudChatId)
+      return
+
+    try {
+      const result = await wsClient.pullMessages({
+        chatId: meta.cloudChatId,
+        afterSeq: meta.cloudMaxSeq ?? 0,
+      })
+      mergeCloudMessagesIntoSession(sessionId, {
+        messages: result.messages,
+        toSeq: result.seq,
+      })
+    }
+    catch (err) {
+      console.warn('[chat-sync] pullMessages failed for', sessionId, errorMessageFrom(err))
+    }
+  }
+
+  /**
+   * Reconcile local sessions against the server `chats` table. Called after
+   * the local index loads and after every successful (re)connect.
+   *
+   * - Local sessions without a `cloudChatId` either claim a remote chat with
+   *   the same id or trigger `POST /api/v1/chats` to mint one.
+   * - Remote chats that have no local mapping are adopted as empty-shell
+   *   sessions; their messages are pulled lazily on first `loadSession`.
+   * - Remote chats whose id is in the user's tombstone set are skipped — the
+   *   user already deleted them locally and the server-side soft-delete may
+   *   not have committed yet.
+   *
+   * Reentrant: a single in-flight task is shared across concurrent callers.
+   * If a new "open" event fires while a reconcile is running, a follow-up
+   * pass is scheduled in `finally` so catch-up pulls do not get lost.
+   */
+  async function reconcileCloudSessions(): Promise<void> {
+    if (cloudReconcileTask) {
+      pendingReconcile = true
+      return cloudReconcileTask
+    }
+
+    const myEpoch = reconcileEpoch
+    const isStaleEpoch = () => myEpoch !== reconcileEpoch
+
+    cloudReconcileTask = (async () => {
+      const currentUserId = getCurrentUserId()
+      if (currentUserId === 'local') {
+        console.info('[chat-sync] reconcile skipped: anonymous user')
+        return
+      }
+
+      console.info('[chat-sync] reconcile start', { userId: currentUserId, serverUrl: SERVER_URL })
+      const mapper = getCloudMapper()
+
+      let remoteChats
+      try {
+        remoteChats = await mapper.listChats()
+      }
+      catch (err) {
+        console.warn('[chat-sync] listChats failed; skipping reconcile this round:', errorMessageFrom(err))
+        return
+      }
+      if (isStaleEpoch())
+        return
+      console.info('[chat-sync] listChats →', remoteChats.length, 'remote chats')
+
+      // Snapshot local metas owned by this user. Anonymous-era sessions are
+      // not promoted to the cloud automatically — the user can re-open them
+      // after signing in and the server is unaware of them.
+      const localOwnedMetas = Object.values(sessionMetas.value).filter(meta => meta.userId === currentUserId)
+      const plan = reconcileLocalAndRemote(localOwnedMetas, remoteChats)
+
+      // Tombstones: drop adopt entries for chats the user already deleted.
+      // The server's soft-delete may not have committed yet (offline DELETE
+      // path), so we still need to remember "do not re-adopt this id".
+      const tombstones = await chatSessionsRepo.getTombstones(currentUserId)
+      if (isStaleEpoch())
+        return
+      if (tombstones.length > 0) {
+        const tombstoneSet = new Set(tombstones)
+        plan.adopt = plan.adopt.filter(chat => !tombstoneSet.has(chat.id))
+        // Server-confirmed deletions: any tombstone that no longer appears
+        // in the remote list can be cleared.
+        const remoteIds = new Set(remoteChats.map(chat => chat.id))
+        const stale = tombstones.filter(id => !remoteIds.has(id))
+        if (stale.length > 0)
+          await enqueuePersist(() => chatSessionsRepo.removeTombstones(currentUserId, stale))
+      }
+
+      if (isStaleEpoch())
+        return
+
+      // claim: remote chat already exists with the same id; just bind.
+      for (const action of plan.claim) {
+        const meta = sessionMetas.value[action.sessionId]
+        if (!meta)
+          continue
+        sessionMetas.value[action.sessionId] = { ...meta, cloudChatId: action.cloudChatId }
+        void persistSession(action.sessionId)
+      }
+
+      // create: POST /api/v1/chats and bind. Mapper handles 409-as-claim.
+      const createResults = await applyCreateActions(mapper, plan.create)
+      if (isStaleEpoch())
+        return
+      for (const result of createResults) {
+        if (!result.cloudChatId)
+          continue
+        const meta = sessionMetas.value[result.sessionId]
+        if (!meta)
+          continue
+        sessionMetas.value[result.sessionId] = { ...meta, cloudChatId: result.cloudChatId }
+        void persistSession(result.sessionId)
+
+        // Enqueue every pre-existing local syncable message into the
+        // outbox so anonymous-era messages and turns typed during the
+        // connect handshake make it server-side. The post-reconcile
+        // `drainOutbox` will batch-send them. Idempotent: enqueueOutbox
+        // overwrites by messageId so re-running reconcile doesn't
+        // multiply rows.
+        const localMessages = sessionMessages.value[result.sessionId] ?? []
+        for (const message of localMessages) {
+          if (!message.id || !isCloudSyncableMessage(message))
+            continue
+          const text = extractMessageText(message)
+          if (!text)
+            continue
+          await enqueuePersist(() => chatSessionsRepo.enqueueOutbox(currentUserId, {
+            messageId: message.id!,
+            sessionId: result.sessionId,
+            cloudChatId: result.cloudChatId,
+            role: message.role as CloudSyncableRole,
+            content: text,
+            attempts: 0,
+            queuedAt: Date.now(),
+          }))
+        }
+      }
+
+      // adopt: remote-only chats become empty local sessions. Messages get
+      // pulled the first time the user opens them via `loadSession`.
+      for (const remote of plan.adopt) {
+        if (sessionMetas.value[remote.id])
+          continue
+        const now = Date.now()
+        const adoptedMeta: ChatSessionMeta = {
+          sessionId: remote.id,
+          userId: currentUserId,
+          characterId: 'default',
+          title: remote.title ?? undefined,
+          createdAt: new Date(remote.createdAt).getTime() || now,
+          updatedAt: new Date(remote.updatedAt).getTime() || now,
+          cloudChatId: remote.id,
+        }
+        sessionMetas.value[remote.id] = adoptedMeta
+        sessionMessages.value[remote.id] = [generateInitialMessage()]
+        ensureGeneration(remote.id)
+
+        if (!index.value)
+          index.value = { userId: currentUserId, characters: {} }
+        const characterIndex = index.value.characters[adoptedMeta.characterId] ?? {
+          activeSessionId: '',
+          sessions: {},
+        }
+        characterIndex.sessions[remote.id] = adoptedMeta
+        index.value.characters[adoptedMeta.characterId] = characterIndex
+
+        // Snapshot the messages array — without a clone the subsequent
+        // pullCloudMessages would mutate the same reference the queued
+        // saveSession is about to read, and the IDB write would be
+        // last-writer-wins on stale state.
+        const adoptedMessagesSnapshot = snapshotMessages(sessionMessages.value[remote.id])
+        await enqueuePersist(() => chatSessionsRepo.saveSession(remote.id, {
+          meta: adoptedMeta,
+          messages: adoptedMessagesSnapshot,
+        }))
+      }
+      if (isStaleEpoch())
+        return
+      await persistIndex()
+
+      // After reconcile, fan out a catch-up pull for every session that has
+      // a cloudChatId now (claimed + created + previously-mapped). This
+      // closes the window between offline writes on other devices and the
+      // moment the WS push begins delivering live updates.
+      const cloudMappedIds = Object.values(sessionMetas.value)
+        .filter(meta => meta.cloudChatId)
+        .map(meta => meta.sessionId)
+      await Promise.all(cloudMappedIds.map(sessionId => pullCloudMessages(sessionId)))
+      if (isStaleEpoch())
+        return
+
+      // Drain pending writes after pull so the local view is fully synced
+      // both directions. drainOutbox + drainTombstones are independent so
+      // run in parallel; both are best-effort and log their own failures.
+      await Promise.all([drainOutbox(), drainTombstones()])
+      if (isStaleEpoch())
+        return
+
+      cloudSyncReady.value = true
+    })().finally(() => {
+      cloudReconcileTask = undefined
+      // A second 'open' event fired while we were running — schedule a
+      // follow-up so its catch-up window is not lost. Skip if the epoch
+      // changed (auth swap teardown will fire the next reconcile itself).
+      if (pendingReconcile && !isStaleEpoch()) {
+        pendingReconcile = false
+        void reconcileCloudSessions()
+      }
+      else {
+        pendingReconcile = false
+      }
+    })
+
+    return cloudReconcileTask
+  }
+
+  /**
+   * Lazy WS client + push handler setup. Reentrant; subsequent calls are
+   * no-ops while the existing client is open. Called from `initialize` and
+   * from the auth `watch`.
+   */
+  function ensureCloudWsClient() {
+    if (getCurrentUserId() === 'local') {
+      console.info('[chat-sync] WS skipped: anonymous user')
+      return
+    }
+    if (wsClient)
+      return
+
+    console.info('[chat-sync] creating WS client →', SERVER_URL)
+    wsClient = createChatWsClient({
+      serverUrl: SERVER_URL,
+      getToken: getAuthToken,
+    })
+
+    wsClient.onNewMessages((payload) => {
+      const sessionId = findSessionIdByCloudChatId(payload.chatId)
+      if (!sessionId) {
+        // Not yet mapped — likely a chat created on another device that
+        // has not been reconciled here yet. Trigger one to adopt it.
+        void reconcileCloudSessions()
+        return
+      }
+      mergeCloudMessagesIntoSession(sessionId, payload)
+    })
+
+    wsClient.onStatusChange((status) => {
+      if (status === 'open') {
+        // Reconcile on every open so reconnects after offline windows
+        // trigger a catch-up pullMessages for every mapped session.
+        void reconcileCloudSessions()
+      }
+      else if (status === 'closed' || status === 'idle') {
+        cloudSyncReady.value = false
+      }
+    })
+
+    // VueUse `useWebSocket` makes connect synchronous (it just flips the
+    // url-driven autoConnect on); failures surface via the status watcher
+    // above and the auto-reconnect loop, not as a rejected promise.
+    wsClient.connect()
+  }
+
+  function teardownCloudWsClient() {
+    cloudSyncReady.value = false
+    cloudReconcileTask = undefined
+    pendingReconcile = false
+    // Invalidate any in-flight reconcile IIFE so its post-await mutations
+    // do not land on the next user's state.
+    reconcileEpoch += 1
+    if (wsClient) {
+      wsClient.destroy()
+      wsClient = undefined
+    }
+    cloudMapper = undefined
+  }
+
+  /**
+   * Drop every in-memory session for the current user. Used when the auth
+   *  user changes — we must NOT keep account A's sessions visible (or
+   *  exportable) when account B signs in. The next ensureActiveSessionForCharacter
+   *  pass rehydrates from IDB for the new user.
+   */
+  function clearInMemoryState() {
+    // Invalidate any in-flight `ensureActiveSessionForCharacter` IIFE so its
+    // post-await writes do not land on the next user's state, and free the
+    // singleflight slot so the post-swap rehydrate can start a fresh IIFE
+    // for the new user.
+    ensureActiveEpoch += 1
+    ensureActivePromise = null
+    sessionMessages.value = {}
+    sessionMetas.value = {}
+    sessionGenerations.value = {}
+    loadedSessions.clear()
+    loadingSessions.clear()
+    index.value = null
+    activeSessionId.value = ''
+    cloudSyncReady.value = false
+    // outbox count reflects the prior user; reset to 0 — the next user's
+    // refreshOutboxPendingCount fires from initialize() once they hydrate.
+    outboxPendingCount.value = 0
+  }
+
+  /**
+   * Refresh the reactive `outboxPendingCount` from IDB. Called after every
+   * enqueue / dequeue / drain so UI banners stay in sync with reality.
+   */
+  async function refreshOutboxPendingCount() {
+    const userId = getCurrentUserId()
+    if (userId === 'local') {
+      outboxPendingCount.value = 0
+      return
+    }
+    const entries = await chatSessionsRepo.getOutbox(userId)
+    outboxPendingCount.value = entries.length
+  }
+
+  /**
+   * Ship a single message up to the cloud (eventually).
+   *
+   * Local-first contract: this method ALWAYS persists the send to the IDB
+   * outbox first, then attempts an opportunistic WS dispatch. Failures
+   * (offline, WS dropped, server 5xx) leave the entry in the outbox; the
+   * next `drainOutbox` (fired on every reconcile / WS-open) retries it.
+   *
+   * Use when:
+   * - The chat orchestrator has just appended a user / assistant turn
+   *   locally and wants the server to mirror it for cross-device delivery.
+   *
+   * Expects:
+   * - `message.role` is one of the cloud-syncable roles (`user` /
+   *   `assistant`). Tool / system / error roles are rejected by
+   *   `isCloudSyncableMessage` upstream and should not reach this function.
+   * - The session's `cloudChatId` may be undefined at call time (freshly-
+   *   minted local session pre-reconcile). The outbox holds the entry
+   *   until reconcile binds the cloudChatId, then `drainOutbox` pushes it.
+   *
+   * Returns:
+   * - Resolves after the IDB outbox write lands. The caller does not
+   *   need to await the network round-trip — failed sends are retried
+   *   transparently. UI consumers can watch `outboxPendingCount` to
+   *   surface "X syncing".
+   */
+  async function pushMessageToCloud(sessionId: string, message: { id: string, role: CloudSyncableRole, content: string }) {
+    const userId = getCurrentUserId()
+    if (userId === 'local')
+      return
+
+    const entry: ChatSendOutboxEntry = {
+      messageId: message.id,
+      sessionId,
+      cloudChatId: sessionMetas.value[sessionId]?.cloudChatId,
+      role: message.role,
+      content: message.content,
+      attempts: 0,
+      queuedAt: Date.now(),
+    }
+    await enqueuePersist(() => chatSessionsRepo.enqueueOutbox(userId, entry))
+    await refreshOutboxPendingCount()
+
+    // Opportunistic immediate send. Skip if WS not open or cloudChatId not
+    // yet bound — drainOutbox will pick it up on the next reconcile.
+    if (!wsClient || wsClient.status() !== 'open')
+      return
+    if (!entry.cloudChatId)
+      return
+
+    try {
+      await wsClient.sendMessages({
+        chatId: entry.cloudChatId,
+        messages: [{ id: entry.messageId, role: entry.role, content: entry.content }],
+      })
+      await enqueuePersist(() => chatSessionsRepo.dequeueOutbox(userId, [entry.messageId]))
+      await refreshOutboxPendingCount()
+    }
+    catch (err) {
+      const errMsg = errorMessageFrom(err) ?? 'unknown'
+      console.warn('[chat-sync] sendMessages failed for', sessionId, errMsg)
+      await enqueuePersist(() => chatSessionsRepo.updateOutboxEntries(userId, [{
+        messageId: entry.messageId,
+        attempts: 1,
+        lastError: errMsg,
+      }]))
+    }
+  }
+
+  /**
+   * Drain every outbox entry for the current user via batched
+   * `sendMessages` calls (one per session). Idempotent and safe to call
+   * concurrently — a single-flight guard collapses overlapping triggers.
+   *
+   * Drain ordering: entries are grouped by sessionId, sorted by `queuedAt`
+   * within each session, and sent in a single batch per session. Server
+   * accepts client-supplied message ids so retries are idempotent.
+   *
+   * Entries whose session has no `cloudChatId` yet are skipped (they will
+   * land in the next reconcile pass once create / claim binds the id).
+   *
+   * Entries hitting `OUTBOX_MAX_ATTEMPTS` stay in the outbox so the user
+   * can see them via `outboxPendingCount`. They are NOT dropped silently.
+   */
+  async function drainOutbox(): Promise<void> {
+    if (outboxDrainTask)
+      return outboxDrainTask
+    outboxDrainTask = (async () => {
+      const userId = getCurrentUserId()
+      if (userId === 'local')
+        return
+      if (!wsClient || wsClient.status() !== 'open')
+        return
+
+      const entries = await chatSessionsRepo.getOutbox(userId)
+      if (entries.length === 0)
+        return
+
+      // Group by sessionId for batched dispatch; preserve queuedAt order
+      // within each session so user-then-assistant turns stay ordered.
+      const bySession = new Map<string, ChatSendOutboxEntry[]>()
+      for (const entry of entries) {
+        if (entry.attempts >= OUTBOX_MAX_ATTEMPTS)
+          continue
+        const list = bySession.get(entry.sessionId) ?? []
+        list.push(entry)
+        bySession.set(entry.sessionId, list)
+      }
+
+      const succeededIds: string[] = []
+      const failedUpdates: Array<Pick<ChatSendOutboxEntry, 'messageId' | 'attempts' | 'lastError'>> = []
+
+      for (const [sessionId, sessionEntries] of bySession) {
+        const meta = sessionMetas.value[sessionId]
+        const cloudChatId = meta?.cloudChatId
+        if (!cloudChatId)
+          continue
+        if (!wsClient || wsClient.status() !== 'open')
+          break
+
+        sessionEntries.sort((a, b) => a.queuedAt - b.queuedAt)
+        try {
+          await wsClient.sendMessages({
+            chatId: cloudChatId,
+            messages: sessionEntries.map(e => ({ id: e.messageId, role: e.role, content: e.content })),
+          })
+          succeededIds.push(...sessionEntries.map(e => e.messageId))
+        }
+        catch (err) {
+          const errMsg = errorMessageFrom(err) ?? 'unknown'
+          console.warn('[chat-sync] outbox drain failed for', sessionId, errMsg)
+          for (const entry of sessionEntries) {
+            failedUpdates.push({
+              messageId: entry.messageId,
+              attempts: entry.attempts + 1,
+              lastError: errMsg,
+            })
+          }
+        }
+      }
+
+      if (succeededIds.length > 0)
+        await enqueuePersist(() => chatSessionsRepo.dequeueOutbox(userId, succeededIds))
+      if (failedUpdates.length > 0)
+        await enqueuePersist(() => chatSessionsRepo.updateOutboxEntries(userId, failedUpdates))
+      await refreshOutboxPendingCount()
+    })().finally(() => {
+      outboxDrainTask = undefined
+    })
+    return outboxDrainTask
+  }
+
+  /**
+   * Retry every pending tombstone DELETE for the current user. Called from
+   * `reconcileCloudSessions` so a sign-back-in after an offline-delete
+   * window finishes the soft-delete server-side instead of leaving the
+   * row indefinitely (the local tombstone alone only blocks re-adoption).
+   *
+   * 404 from the server is treated as success — the row is already gone,
+   * we just missed the original response.
+   */
+  async function drainTombstones(): Promise<void> {
+    const userId = getCurrentUserId()
+    if (userId === 'local')
+      return
+
+    const tombstones = await chatSessionsRepo.getTombstones(userId)
+    if (tombstones.length === 0)
+      return
+
+    const mapper = getCloudMapper()
+    const succeeded: string[] = []
+    for (const cloudChatId of tombstones) {
+      try {
+        await mapper.deleteChat(cloudChatId)
+        succeeded.push(cloudChatId)
+      }
+      catch (err) {
+        const msg = errorMessageFrom(err) ?? ''
+        // 404 = server already cleared it, treat as success so the
+        // tombstone gets dropped instead of retried forever.
+        if (msg.includes('HTTP 404'))
+          succeeded.push(cloudChatId)
+        else
+          console.warn('[chat-sync] tombstone drain failed for', cloudChatId, msg)
+      }
+    }
+    if (succeeded.length > 0)
+      await enqueuePersist(() => chatSessionsRepo.removeTombstones(userId, succeeded))
   }
 
   async function initialize() {
@@ -280,6 +1138,11 @@ export const useChatSessionStore = defineStore('chat-session', () => {
     initializePromise = (async () => {
       await ensureActiveSessionForCharacter()
       ready.value = true
+      // Surface any outbox left over from a previous session (closed tab
+      // mid-send) before the WS even opens. The drain itself runs after
+      // reconcile completes, but the count is observable immediately.
+      await refreshOutboxPendingCount()
+      ensureCloudWsClient()
     })()
 
     try {
@@ -503,6 +1366,30 @@ export const useChatSessionStore = defineStore('chat-session', () => {
     void ensureActiveSessionForCharacter()
   })
 
+  // Auth toggles drive cloud WS lifecycle independently of activeCardId so
+  // a card swap inside a single session does not bounce the socket. The
+  // critical invariant: when the auth user changes, every piece of in-memory
+  // state from the previous user must be cleared BEFORE the new user's WS
+  // and reconcile fire. Otherwise the previous user's sessionMetas would
+  // leak into the new user's drawer, exports, and (worst) into the cloud
+  // reconcile's `localOwnedMetas` snapshot.
+  watch(userId, (next) => {
+    teardownCloudWsClient()
+    clearInMemoryState()
+    if (next && next !== 'local') {
+      ensureCloudWsClient()
+    }
+    // Rehydrate for the new user. We trigger here (instead of relying on the
+    // `[userId, activeCardId]` watcher) because that watcher gates on
+    // `ready.value` — if the swap happens while initialize() is still
+    // awaiting the prior user's hydrate, the gated trigger is dropped and
+    // the new user silently sees no sessions. `clearInMemoryState` already
+    // bumped `ensureActiveEpoch` and freed the singleflight slot, so this
+    // call starts a fresh IIFE that runs alongside (and is unaffected by)
+    // any in-flight stale hydrate.
+    void ensureActiveSessionForCharacter()
+  })
+
   return {
     ready,
     isReady,
@@ -532,5 +1419,12 @@ export const useChatSessionStore = defineStore('chat-session', () => {
     forkSession,
     exportSessions,
     importSessions,
+    createSession,
+    loadSession,
+    deleteSession,
+
+    cloudSyncReady,
+    outboxPendingCount,
+    pushMessageToCloud,
   }
 })
diff --git a/packages/stage-ui/src/stores/exports.contract.test.ts b/packages/stage-ui/src/stores/exports.contract.test.ts
index 525abb4b3..7cd359e24 100644
--- a/packages/stage-ui/src/stores/exports.contract.test.ts
+++ b/packages/stage-ui/src/stores/exports.contract.test.ts
@@ -23,6 +23,7 @@ describe('stage-ui exports contract', () => {
       '.',
       './components',
       './components/*',
+      './components/scenarios/chat',
       './components/scenarios/settings/model-settings',
       './components/scenes',
       './composables',
diff --git a/packages/stage-ui/src/types/chat-session.ts b/packages/stage-ui/src/types/chat-session.ts
index 1e81d9776..9de64de30 100644
--- a/packages/stage-ui/src/types/chat-session.ts
+++ b/packages/stage-ui/src/types/chat-session.ts
@@ -7,6 +7,20 @@ export interface ChatSessionMeta {
   title?: string
   createdAt: number
   updatedAt: number
+  /**
+   * Cloud chat id assigned by the server once this session is mirrored to the
+   * `chats` table. Set during cloud reconcile, persisted across reloads. When
+   * absent the session is local-only.
+   */
+  cloudChatId?: string
+  /**
+   * Highest server-assigned `seq` we have already merged into local messages
+   * for this session. Used as `afterSeq` when calling `pullMessages`. Stays
+   * undefined for local-only sessions.
+   *
+   * @default undefined
+   */
+  cloudMaxSeq?: number
 }
 
 export interface ChatSessionRecord {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index edc241fe7..0f85875f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3179,6 +3179,9 @@ importers:
       '@proj-airi/server-sdk':
         specifier: workspace:^
         version: link:../server-sdk
+      '@proj-airi/server-sdk-shared':
+        specifier: workspace:^
+        version: link:../server-sdk-shared
       '@proj-airi/stage-shared':
         specifier: workspace:^
         version: link:../stage-shared