@codingfactory/socialkit-vue 0.3.1 → 0.5.0

package/src/stores/discussion.ts

@@ -0,0 +1,2249 @@
+/**
+ * Generic discussion store factory for SocialKit-powered frontends.
+ */
+
+import { isAxiosError } from 'axios'
+import { defineStore } from 'pinia'
+import { onScopeDispose, ref } from 'vue'
+import type {
+  CreateReplyInput,
+  CreateThreadInput,
+  DiscussionCategorySummary,
+  DiscussionStoreConfig,
+  DiscussionTag,
+  QuoteResponse,
+  Reply,
+  SaveDraftOptions,
+  Space,
+  SpaceMembership,
+  SpaceThreadSort,
+  Thread,
+  UpdateThreadInput,
+} from '../types/discussion.js'
+
+interface ThreadSearchIndexRow {
+  id: string
+  title: string
+  slug?: string | null
+  author_id?: string | null
+  author_name?: string | null
+  author_handle?: string | null
+  space_id?: string | null
+  space_name?: string | null
+  space_slug?: string | null
+  status?: 'open' | 'locked' | 'archived' | null
+  is_pinned?: boolean | null
+  replies_count?: number | null
+  views_count?: number | null
+  created_at?: string | null
+  updated_at?: string | null
+}
+
+interface ThreadSearchPayload {
+  results?: ThreadSearchIndexRow[]
+}
+
+interface ThreadSearchResponseBody extends ThreadSearchPayload {
+  data?: ThreadSearchPayload
+}
+
+interface ReplyReactionRealtimePayload {
+  reply_id?: string
+  thread_id?: string
+  user_id?: string
+  kind?: string
+  action?: string
+}
+
+interface SpaceMembershipRealtimePayload {
+  space_id?: string
+  member_count?: number
+  actor_id?: string
+  is_member?: boolean
+}
+
+interface LocalReactionEchoMarker {
+  kind: 'like' | 'dislike'
+  action: 'added' | 'removed'
+  expiresAt: number
+}
+
+type UnknownRecord = Record<string, unknown>
+
+function isRecord(value: unknown): value is UnknownRecord {
+  return typeof value === 'object' && value !== null
+}
+
+function getStringValue(source: unknown, key: string): string | null {
+  if (!isRecord(source)) {
+    return null
+  }
+
+  const candidate = source[key]
+  return typeof candidate === 'string' ? candidate : null
+}
+
+function toRecord(value: unknown): UnknownRecord | null {
+  return isRecord(value) ? value : null
+}
+
+function getErrorResponseData(error: unknown): UnknownRecord | null {
+  if (!isAxiosError(error)) {
+    return null
+  }
+
+  return toRecord(error.response?.data)
+}
+
+function getErrorMessage(error: unknown, fallback: string): string {
+  if (isAxiosError(error)) {
+    const responseData = getErrorResponseData(error)
+    const message = typeof responseData?.message === 'string' && responseData.message.trim().length > 0
+      ? responseData.message
+      : null
+
+    if (message) {
+      return message
+    }
+  }
+
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message
+  }
+
+  return fallback
+}
+
+function getThreadsFromPayload(payload: unknown): Thread[] {
+  if (!isRecord(payload)) {
+    return []
+  }
+
+  const topLevelItems = payload.items
+  if (Array.isArray(topLevelItems)) {
+    return topLevelItems as Thread[]
+  }
+
+  const dataPayload = payload.data
+  if (Array.isArray(dataPayload)) {
+    return dataPayload as Thread[]
+  }
+
+  if (!isRecord(dataPayload)) {
+    return []
+  }
+
+  const nestedItems = dataPayload.items
+  if (Array.isArray(nestedItems)) {
+    return nestedItems as Thread[]
+  }
+
+  return []
+}
+
+function getThreadNextCursorFromPayload(payload: unknown): string | null {
+  if (!isRecord(payload)) {
+    return null
+  }
+
+  const topLevelCursor = getStringValue(payload, 'next_cursor')
+  if (topLevelCursor) {
+    return topLevelCursor
+  }
+
+  const topLevelMeta = payload.meta
+  const topLevelMetaCursor = getStringValue(topLevelMeta, 'next_cursor')
+  if (topLevelMetaCursor) {
+    return topLevelMetaCursor
+  }
+
+  if (isRecord(topLevelMeta)) {
+    const topLevelMetaPaginationCursor = getStringValue(topLevelMeta.pagination, 'next_cursor')
+    if (topLevelMetaPaginationCursor) {
+      return topLevelMetaPaginationCursor
+    }
+  }
+
+  const dataPayload = payload.data
+  if (!isRecord(dataPayload)) {
+    return null
+  }
+
+  const nestedCursor = getStringValue(dataPayload, 'next_cursor')
+  if (nestedCursor) {
+    return nestedCursor
+  }
+
+  const nestedMeta = dataPayload.meta
+  const nestedMetaCursor = getStringValue(nestedMeta, 'next_cursor')
+  if (nestedMetaCursor) {
+    return nestedMetaCursor
+  }
+
+  if (isRecord(nestedMeta)) {
+    const nestedMetaPaginationCursor = getStringValue(nestedMeta.pagination, 'next_cursor')
+    if (nestedMetaPaginationCursor) {
+      return nestedMetaPaginationCursor
+    }
+  }
+
+  return getStringValue(dataPayload.pagination, 'next_cursor')
+}
+
+function isTransientThreadListError(error: unknown): boolean {
+  if (!isAxiosError(error)) {
+    return false
+  }
+
+  const status = error.response?.status
+
+  return status === 502 || status === 503 || status === 504
+}
+
+export type DiscussionStoreReturn = ReturnType<ReturnType<typeof createDiscussionStoreDefinition>>
+
+export function createDiscussionStoreDefinition(config: DiscussionStoreConfig) {
+  const {
+    client,
+    getCurrentUserId,
+    getEcho,
+    onEchoReconnected,
+    createLoadingState,
+    logger = console,
+    storeId = 'discussion',
+  } = config
+
+  return defineStore(storeId, () => {
+    const spaces = ref<Space[]>([])
+    const spaceTree = ref<Space[]>([])
+    const currentSpace = ref<Space | null>(null)
+    const spaceMemberships = ref<Record<string, SpaceMembership>>({})
+    const spaceMembershipLoading = ref<Record<string, boolean>>({})
+    const threads = ref<Thread[]>([])
+    const currentThread = ref<Thread | null>(null)
+    const replies = ref<Reply[]>([])
+
+    const spacesLoadingState = createLoadingState()
+    const threadsLoadingState = createLoadingState()
+    const repliesLoadingState = createLoadingState()
+
+    const loading = ref(false)
+    const error = ref<string | null>(null)
+    const nextCursor = ref<string | null>(null)
+    const repliesNextCursor = ref<string | null>(null)
+
+    const latestSpaceSlug = ref<string | null>(null)
+    const latestThreadId = ref<string | null>(null)
+
+    let activeSpaceChannel: string | null = null
+    let activeThreadChannel: string | null = null
+
+    const locallyCreatedReplyIds = new Set<string>()
+    const pendingReplyCreations = new Map<string, number>()
+    const realtimeCountedReplyIds = new Set<string>()
+    const hiddenOpeningReplyCountByThread = new Map<string, number>()
+    const pendingLocalReactionToggles = new Map<string, number>()
+    const pendingLocalReactionEchoes = new Map<string, LocalReactionEchoMarker>()
+
+    function getThreadActivityTimestamp(thread: Thread): number {
+      const candidate = thread.last_activity_at || thread.created_at
+      const parsed = Date.parse(candidate)
+
+      if (Number.isNaN(parsed)) {
+        return 0
+      }
+
+      return parsed
+    }
+
+    function sortThreadsForList(items: Thread[]): Thread[] {
+      return items
+        .map((thread, index) => ({ thread, index }))
+        .sort((a, b) => {
+          if (a.thread.is_pinned !== b.thread.is_pinned) {
+            return a.thread.is_pinned ? -1 : 1
+          }
+
+          const aTime = getThreadActivityTimestamp(a.thread)
+          const bTime = getThreadActivityTimestamp(b.thread)
+
+          if (aTime !== bTime) {
+            return bTime - aTime
+          }
+
+          return a.index - b.index
+        })
+        .map(({ thread }) => thread)
+    }
+
+    function applyThreadListSorting(): void {
+      threads.value = sortThreadsForList(threads.value)
+    }
+
+    function normalizeThreadReplyCount(thread: Thread): Thread {
+      const rawReplyCount = Number.isFinite(thread.reply_count)
+        ? Math.max(0, Math.floor(thread.reply_count))
+        : 0
+      const hasOpeningPostBody = typeof thread.body === 'string' && thread.body.trim().length > 0
+
+      if (!hasOpeningPostBody || rawReplyCount === 0) {
+        if (rawReplyCount === thread.reply_count) {
+          return thread
+        }
+
+        return {
+          ...thread,
+          reply_count: rawReplyCount,
+        }
+      }
+
+      return {
+        ...thread,
+        reply_count: Math.max(0, rawReplyCount - 1),
+      }
+    }
+
+    function mergeUniqueById<TItem extends { id: string }>(
+      existingItems: TItem[],
+      incomingItems: TItem[]
+    ): TItem[] {
+      const mergedItems = [...existingItems]
+      const indexById = new Map<string, number>()
+
+      mergedItems.forEach((item, index) => {
+        indexById.set(item.id, index)
+      })
+
+      incomingItems.forEach((item) => {
+        const existingIndex = indexById.get(item.id)
+        if (existingIndex === undefined) {
+          indexById.set(item.id, mergedItems.length)
+          mergedItems.push(item)
+          return
+        }
+
+        mergedItems[existingIndex] = item
+      })
+
+      return mergedItems
+    }
+
+    function extractResponsePayload(responseData: unknown): unknown {
+      const responseRecord = toRecord(responseData)
+      if (!responseRecord) {
+        return responseData
+      }
+
+      return Object.prototype.hasOwnProperty.call(responseRecord, 'data')
+        ? responseRecord.data
+        : responseData
+    }
+
+    function getDefaultMemberCount(spaceId: string): number {
+      if (currentSpace.value?.id === spaceId) {
+        return currentSpace.value.meta?.member_count ?? 0
+      }
+
+      const matchedSpace = spaces.value.find((space) => space.id === spaceId)
+      if (matchedSpace) {
+        return matchedSpace.meta?.member_count ?? 0
+      }
+
+      return 0
+    }
+
+    function normalizeMembershipResponse(spaceId: string, payload: unknown): SpaceMembership {
+      const payloadRecord = toRecord(payload)
+      const payloadSpaceId = typeof payloadRecord?.space_id === 'string' && payloadRecord.space_id.length > 0
+        ? payloadRecord.space_id
+        : spaceId
+
+      const payloadIsMember = payloadRecord?.is_member
+      const isMember = typeof payloadIsMember === 'boolean'
+        ? payloadIsMember
+        : false
+
+      const payloadMemberCount = payloadRecord?.member_count
+      const fallbackMemberCount = getDefaultMemberCount(spaceId)
+      const memberCount = typeof payloadMemberCount === 'number'
+        ? Math.max(0, Math.floor(payloadMemberCount))
+        : fallbackMemberCount
+
+      return {
+        space_id: payloadSpaceId,
+        is_member: isMember,
+        member_count: memberCount,
+      }
+    }
+
+    function setSpaceMembershipLoading(spaceId: string, isLoading: boolean): void {
+      spaceMembershipLoading.value = {
+        ...spaceMembershipLoading.value,
+        [spaceId]: isLoading,
+      }
+    }
+
+    function updateSpaceMemberCount(spaceId: string, memberCount: number): void {
+      if (currentSpace.value?.id === spaceId) {
+        currentSpace.value = {
+          ...currentSpace.value,
+          meta: {
+            ...(currentSpace.value.meta ?? {}),
+            member_count: memberCount,
+          },
+        }
+      }
+
+      spaces.value = spaces.value.map((space) => {
+        if (space.id !== spaceId) {
+          return space
+        }
+
+        return {
+          ...space,
+          meta: {
+            ...(space.meta ?? {}),
+            member_count: memberCount,
+          },
+        }
+      })
+
+      const updateTreeNodes = (nodes: Space[]): Space[] => {
+        return nodes.map((node) => {
+          const nextChildren = node.children && node.children.length > 0
+            ? updateTreeNodes(node.children)
+            : node.children
+
+        if (node.id !== spaceId) {
+          return nextChildren === node.children
+            ? node
+            : {
+                ...node,
+                ...(nextChildren ? { children: nextChildren } : {}),
+              }
+        }
+
+          return {
+            ...node,
+            meta: {
+              ...(node.meta ?? {}),
+              member_count: memberCount,
+            },
+            ...(nextChildren ? { children: nextChildren } : {}),
+          }
+        })
+      }
+
+      spaceTree.value = updateTreeNodes(spaceTree.value)
+    }
+
+    function setSpaceMembership(spaceId: string, membership: SpaceMembership): void {
+      spaceMemberships.value = {
+        ...spaceMemberships.value,
+        [spaceId]: membership,
+      }
+
+      updateSpaceMemberCount(spaceId, membership.member_count)
+    }
+
+    function getSpaceMembership(spaceId: string): SpaceMembership | null {
+      return spaceMemberships.value[spaceId] ?? null
+    }
+
+    function syncThreadReplyCount(threadId: string, replyCount: number): void {
+      if (currentThread.value?.id === threadId) {
+        currentThread.value = {
+          ...currentThread.value,
+          reply_count: replyCount,
+        }
+      }
+
+      const threadIndex = threads.value.findIndex((thread) => thread.id === threadId)
+      if (threadIndex < 0) {
+        return
+      }
+
+      const thread = threads.value[threadIndex]
+      if (!thread) {
+        return
+      }
+
+      threads.value[threadIndex] = {
+        ...thread,
+        reply_count: replyCount,
+      }
+    }
+
+    const draftTypes = {
+      THREAD: 'thread',
+      REPLY: 'reply',
+    } as const
+
+    function flattenTree(tree: Space[]): Space[] {
+      const result: Space[] = []
+
+      function walk(nodes: Space[]): void {
+        for (const node of nodes) {
+          result.push(node)
+          if (node.children && node.children.length > 0) {
+            walk(node.children)
+          }
+        }
+      }
+
+      walk(tree)
+      return result
+    }
+
+    function rootSpaces(): Space[] {
+      return spaceTree.value.filter((space) => (space.depth ?? 0) === 0)
+    }
+
+    function leafSpaces(): Space[] {
+      return spaces.value.filter((space) => space.is_leaf !== false)
+    }
+
+    async function loadSpaces(): Promise<unknown> {
+      spacesLoadingState.setLoading(true)
+      loading.value = true
+      error.value = null
+
+      try {
+        const response = await client.get<unknown>('/v1/discussion/spaces?tree=1')
+        const responseData = toRecord(response.data)
+        const treeData = Array.isArray(responseData?.items)
+          ? responseData.items as Space[]
+          : Array.isArray(responseData?.data)
+            ? responseData.data as Space[]
+            : []
+
+        spaceTree.value = treeData
+        spaces.value = flattenTree(treeData)
+
+        if (treeData.length === 0) {
+          spacesLoadingState.setEmpty(true)
+        }
+
+        return response.data
+      } catch (err) {
+        logger.error('Failed to load spaces:', err)
+        const errorMessage = getErrorMessage(err, 'Failed to load discussion spaces')
+        spacesLoadingState.setError(new Error(errorMessage))
+        error.value = errorMessage
+        throw err
+      } finally {
+        spacesLoadingState.setLoading(false)
+        loading.value = false
+      }
+    }
+
+    async function loadSpaceDetail(
+      slug: string,
+      options?: { signal?: AbortSignal }
+    ): Promise<Space | null> {
+      latestSpaceSlug.value = slug
+
+      try {
+        const response = await client.get<unknown>(`/v1/discussion/spaces/${slug}/detail`, {
+          ...(options?.signal ? { signal: options.signal } : {}),
+        })
+
+        if (latestSpaceSlug.value !== slug) {
+          return null
+        }
+
+        const responseData = toRecord(response.data)
+        const spaceData = (responseData?.data ?? null) as Space | null
+        if (spaceData) {
+          currentSpace.value = spaceData
+        }
+
+        return spaceData
+      } catch (err) {
+        if (options?.signal?.aborted || latestSpaceSlug.value !== slug) {
+          return null
+        }
+
+        if (isAxiosError(err) && err.response?.status === 404) {
+          currentSpace.value = null
+          return null
+        }
+
+        logger.error('Failed to load space detail:', err)
+        throw err
+      }
+    }
+
+    async function loadSpaceMembership(spaceId: string): Promise<SpaceMembership | null> {
+      if (!getCurrentUserId()) {
+        return null
+      }
+
+      setSpaceMembershipLoading(spaceId, true)
+
+      try {
+        const response = await client.get<unknown>(`/v1/discussion/spaces/${spaceId}/membership`)
+        const membership = normalizeMembershipResponse(
+          spaceId,
+          extractResponsePayload(response.data)
+        )
+
+        setSpaceMembership(spaceId, membership)
+
+        return membership
+      } catch (err) {
+        logger.error('Failed to load space membership:', err)
+        throw err
+      } finally {
+        setSpaceMembershipLoading(spaceId, false)
+      }
+    }
+
+    async function mutateSpaceMembership(
+      spaceId: string,
+      action: 'join' | 'leave'
+    ): Promise<SpaceMembership> {
+      if (!getCurrentUserId()) {
+        throw new Error('You must be signed in to manage space membership.')
+      }
+
+      setSpaceMembershipLoading(spaceId, true)
+
+      try {
+        const response = action === 'join'
+          ? await client.post<unknown>(`/v1/discussion/spaces/${spaceId}/join`)
+          : await client.delete<unknown>(`/v1/discussion/spaces/${spaceId}/leave`)
+
+        const membership = normalizeMembershipResponse(
+          spaceId,
+          extractResponsePayload(response.data)
+        )
+
+        setSpaceMembership(spaceId, membership)
+
+        return membership
+      } catch (err) {
+        logger.error(`Failed to ${action} space membership:`, err)
+        throw err
+      } finally {
+        setSpaceMembershipLoading(spaceId, false)
+      }
+    }
+
+    async function joinSpace(spaceId: string): Promise<SpaceMembership> {
+      return mutateSpaceMembership(spaceId, 'join')
+    }
+
+    async function leaveSpace(spaceId: string): Promise<SpaceMembership> {
+      return mutateSpaceMembership(spaceId, 'leave')
+    }
+
+    async function loadThreads(
+      spaceSlug: string,
+      cursor?: string,
+      options?: { signal?: AbortSignal; sort?: SpaceThreadSort }
+    ): Promise<unknown> {
+      if (!cursor || latestSpaceSlug.value === null) {
+        latestSpaceSlug.value = spaceSlug
+      }
+
+      threadsLoadingState.setLoading(true)
+      loading.value = true
+      error.value = null
+
+      let isStale = false
+
+      try {
+        const queryParams = new URLSearchParams()
+        if (cursor) {
+          queryParams.set('cursor', cursor)
+        }
+        if (options?.sort) {
+          queryParams.set('sort', options.sort)
+        }
+
+        const queryString = queryParams.toString()
+        const url = `/v1/discussion/spaces/${spaceSlug}/threads${queryString.length > 0 ? `?${queryString}` : ''}`
+        const requestConfig = {
+          ...(options?.signal ? { signal: options.signal } : {}),
+        }
+
+        let response: Awaited<ReturnType<typeof client.get<unknown>>>
+
+        try {
+          response = await client.get<unknown>(url, requestConfig)
+        } catch (requestError) {
+          if (!isTransientThreadListError(requestError) || options?.signal?.aborted) {
+            throw requestError
+          }
+
+          response = await client.get<unknown>(url, requestConfig)
+        }
+
+        if (latestSpaceSlug.value !== spaceSlug) {
+          isStale = true
+          return response.data
+        }
+
+        const newThreads = getThreadsFromPayload(response.data).map((thread) => normalizeThreadReplyCount(thread))
+
+        if (cursor) {
+          threads.value = mergeUniqueById(threads.value, newThreads)
+          applyThreadListSorting()
+        } else {
+          threads.value = newThreads
+          applyThreadListSorting()
+
+          if (newThreads.length === 0) {
+            threadsLoadingState.setEmpty(true)
+          }
+        }
+
+        nextCursor.value = getThreadNextCursorFromPayload(response.data)
+
+        if (!currentSpace.value || currentSpace.value.slug !== spaceSlug) {
+          currentSpace.value = spaces.value.find((space) => space.slug === spaceSlug) ?? null
+        }
+
+        if (currentSpace.value?.id) {
+          subscribeToSpaceRealtime(currentSpace.value.id)
+        }
+
+        return response.data
+      } catch (err) {
+        if (options?.signal?.aborted || latestSpaceSlug.value !== spaceSlug) {
+          isStale = true
+          return undefined
+        }
+
+        if (isAxiosError(err) && err.response?.status === 404) {
+          const responseData = getErrorResponseData(err)
+          const candidateMessage = responseData?.message
+          const normalizedMessage = typeof candidateMessage === 'string' && candidateMessage.trim().length > 0
+            ? candidateMessage
+            : 'Space not found'
+          const notFoundMessage = normalizedMessage.toLowerCase().includes('space not found')
+            ? normalizedMessage
+            : 'Space not found'
+          threadsLoadingState.setError(new Error(notFoundMessage))
+          error.value = notFoundMessage
+          currentSpace.value = null
+          return undefined
+        }
+
+        logger.error('Failed to load threads:', err)
+        const errorMessage = getErrorMessage(err, 'Failed to load discussion threads')
+        threadsLoadingState.setError(new Error(errorMessage))
+        error.value = errorMessage
+        throw err
+      } finally {
+        if (!isStale) {
+          threadsLoadingState.setLoading(false)
+          loading.value = false
+        }
+      }
+    }
+
+    function isValidUUID(uuid: string): boolean {
+      if (!uuid || typeof uuid !== 'string') {
+        return false
+      }
+
+      const uuidV4Regex = /^[0-9a-f]{8}-[0-9a-f]{4}-[4][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
+      const ulidRegex = /^[0-9A-HJKMNP-TV-Z]{26}$/i
+      const orderedUuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+
+      return uuidV4Regex.test(uuid) || ulidRegex.test(uuid) || orderedUuidRegex.test(uuid)
+    }
+
+    async function loadThread(spaceSlug: string, threadId: string): Promise<Thread | null> {
+      latestThreadId.value = threadId
+
+      cleanupRealtimeChannels()
+      loading.value = true
+      error.value = null
+
+      if (!threadId) {
+        error.value = 'Missing thread identifier'
+        loading.value = false
+        return null
+      }
+
+      if (!isValidUUID(threadId)) {
+        error.value = 'Invalid thread identifier format'
+        loading.value = false
+        return null
+      }
+
+      let isStale = false
+
+      try {
+        const response = await client.get<unknown>(`/v1/discussion/threads/${threadId}`)
+
+        if (latestThreadId.value !== threadId) {
+          isStale = true
+          return null
+        }
+
+        const responseData = toRecord(response.data)
+        const threadPayload = responseData?.data ?? response.data ?? null
+        let threadData: Thread | null = null
+
+        const threadRecord = toRecord(threadPayload)
+        if (threadRecord) {
+          const metaRecord = toRecord(threadRecord.meta)
+          const metaViews = metaRecord?.views
+          const hasNumericMetaViews = typeof metaViews === 'number' && Number.isFinite(metaViews)
+          const legacyViewsCount = threadRecord.views_count
+          const hasLegacyViewsCount = typeof legacyViewsCount === 'number' && Number.isFinite(legacyViewsCount)
+
+          if (!hasNumericMetaViews && hasLegacyViewsCount) {
+            const normalizedViews = Math.max(0, Math.floor(legacyViewsCount))
+            threadData = {
+              ...(threadRecord as unknown as Thread),
+              meta: {
+                ...(metaRecord ?? {}),
+                views: normalizedViews,
+              },
+            }
+          } else {
+            threadData = threadRecord as unknown as Thread
+          }
+        }
+
+        if (threadData && !isValidUUID(threadData.id)) {
+          logger.error('Backend returned invalid thread ID:', threadData.id)
+          error.value = 'Invalid thread data received'
+          return null
+        }
+
+        currentThread.value = threadData ? normalizeThreadReplyCount(threadData) : null
+
+        if (threadData?.space_id) {
+          subscribeToSpaceRealtime(threadData.space_id)
+        }
+
+        if (threadData?.id) {
+          subscribeToThreadRealtime(threadData.id)
+        }
+
+        if (spaceSlug && (!currentSpace.value || currentSpace.value.slug !== spaceSlug)) {
+          currentSpace.value = spaces.value.find((space) => space.slug === spaceSlug) ?? null
+          if (!spaces.value.length) {
+            await loadSpaces()
+            currentSpace.value = spaces.value.find((space) => space.slug === spaceSlug) ?? null
+          }
+        }
+
+        return currentThread.value
+      } catch (err) {
+        if (latestThreadId.value !== threadId) {
+          isStale = true
+          return null
+        }
+
+        const errorResponseData = getErrorResponseData(err)
+        const isNotFoundError = isAxiosError(err) && err.response?.status === 404
+        const isDeletedThreadError = isAxiosError(err)
+          && err.response?.status === 410
+          && errorResponseData?.code === 'THREAD_DELETED'
+
+        if (!isNotFoundError && !isDeletedThreadError) {
+          logger.error('Failed to load thread:', err)
+        }
+
+        if (isNotFoundError) {
+          error.value = 'Thread not found or has been deleted'
+        } else if (isDeletedThreadError) {
+          error.value = 'Thread deleted'
+        } else if (isAxiosError(err) && err.response?.status === 403) {
+          error.value = 'You do not have permission to view this thread'
+        } else {
+          error.value = getErrorMessage(err, 'Failed to load thread')
+        }
+
+        throw err
+      } finally {
+        if (!isStale) {
+          loading.value = false
+        }
+      }
+    }
+
+    async function loadReplies(
+      threadId: string,
+      cursor?: string,
+      sortBy: 'best' | 'top' | 'new' | 'controversial' = 'best'
+    ): Promise<unknown> {
+      if (latestThreadId.value === null) {
+        latestThreadId.value = threadId
+      }
+
+      loading.value = true
+      error.value = null
+
+      let isStale = false
+
+      try {
+        const queryParts: string[] = []
+        if (cursor) {
+          queryParts.push(`cursor=${encodeURIComponent(cursor)}`)
+        }
+        queryParts.push(`sort=${encodeURIComponent(sortBy)}`)
+        queryParts.push('format=tree')
+        queryParts.push('flatten=1')
+
+        const queryString = queryParts.length > 0 ? `?${queryParts.join('&')}` : ''
+        const response = await client.get<unknown>(`/v1/discussion/threads/${threadId}/replies${queryString}`)
+
+        if (latestThreadId.value !== threadId) {
+          isStale = true
+          return undefined
+        }
+
+        const responseData = toRecord(response.data)
+        const loadedReplyBatch = Array.isArray(responseData?.items)
+          ? responseData.items as Reply[]
+          : Array.isArray(responseData?.data)
+            ? responseData.data as Reply[]
+            : []
+        let openingRepliesFilteredInBatch = 0
+
+        const filterOpeningReplies = (batch: Reply[]): Reply[] => {
+          const thread = currentThread.value
+          if (!thread?.body || !thread.author_id) {
+            return batch
+          }
+
+          const threadCreatedMs = new Date(thread.created_at).getTime()
+          return batch.filter((reply) => {
+            const replyCreatedMs = new Date(reply.created_at).getTime()
+            const isOpeningPost = reply.author_id === thread.author_id
+              && reply.body === thread.body
+              && Math.abs(replyCreatedMs - threadCreatedMs) < 5000
+
+            if (isOpeningPost) {
+              openingRepliesFilteredInBatch += 1
+            }
+
+            return !isOpeningPost
+          })
+        }
+
+        const filteredReplyBatch = filterOpeningReplies(loadedReplyBatch)
+
+        if (cursor) {
+          replies.value = mergeUniqueById(replies.value, filteredReplyBatch)
+        } else {
+          replies.value = filteredReplyBatch
+          hiddenOpeningReplyCountByThread.set(threadId, openingRepliesFilteredInBatch)
+          subscribeToThreadRealtime(threadId)
+        }
+
+        if (cursor && openingRepliesFilteredInBatch > 0) {
+          const existingCount = hiddenOpeningReplyCountByThread.get(threadId) ?? 0
+          hiddenOpeningReplyCountByThread.set(threadId, existingCount + openingRepliesFilteredInBatch)
+        }
+
+        const responseMeta = toRecord(responseData?.meta)
+        const responseNextCursor = typeof responseData?.next_cursor === 'string'
+          ? responseData.next_cursor
+          : typeof responseMeta?.next_cursor === 'string'
+            ? responseMeta.next_cursor
+            : null
+        const replyTotalFromMeta = responseMeta?.total
+        const hiddenOpeningReplyCount = hiddenOpeningReplyCountByThread.get(threadId) ?? 0
+        const normalizedReplyCount = !responseNextCursor
+          ? replies.value.length
+          : typeof replyTotalFromMeta === 'number'
+            ? Math.max(0, Math.floor(replyTotalFromMeta) - hiddenOpeningReplyCount)
+            : replies.value.length
+
+        syncThreadReplyCount(threadId, normalizedReplyCount)
+        repliesNextCursor.value = responseNextCursor
+
+        return response.data
+      } catch (err) {
+        if (latestThreadId.value !== threadId) {
+          isStale = true
+          return undefined
+        }
+
+        logger.error('Failed to load replies:', err)
+        error.value = getErrorMessage(err, 'Failed to load replies')
+        throw err
+      } finally {
+        if (!isStale) {
+          loading.value = false
+        }
+      }
+    }
+
+    async function createThread(spaceSlug: string, input: CreateThreadInput): Promise<unknown> {
+      cleanupRealtimeChannels()
+      loading.value = true
+      error.value = null
+
+      try {
+        const response = await client.post<unknown>(`/v1/discussion/spaces/${spaceSlug}/threads`, {
+          title: input.title,
+          body: input.body,
+          audience: input.audience || 'public',
+          ...(input.media_ids?.length ? { media_ids: input.media_ids } : {}),
+          ...(input.tags?.length ? { tags: input.tags } : {}),
+        })
+
+        const responseData = toRecord(response.data)
+        const newThread = (responseData?.data ?? null) as Thread | null
+        const normalizedNewThread = newThread ? normalizeThreadReplyCount(newThread) : null
+
+        if (normalizedNewThread) {
+          threads.value.unshift(normalizedNewThread)
+          applyThreadListSorting()
+        }
+
+        if (normalizedNewThread?.space_id) {
+          subscribeToSpaceRealtime(normalizedNewThread.space_id)
+        }
+
+        return response.data
+      } catch (err) {
+        logger.error('Failed to create thread:', err)
+        error.value = getErrorMessage(err, 'Failed to create thread')
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    async function loadTagCategories(query = ''): Promise<DiscussionTag[]> {
+      loading.value = true
+      error.value = null
+
+      try {
+        const normalizedQuery = query.trim()
+        const encodedQuery = normalizedQuery.length > 0 ? `?q=${encodeURIComponent(normalizedQuery)}` : ''
+        const response = await client.get<unknown>(`/v1/discussion/categories${encodedQuery}`)
+        const responseData = toRecord(response.data)
+        const items = Array.isArray(responseData?.items)
+          ? responseData.items
+          : Array.isArray(responseData?.data)
+            ? responseData.data
+            : []
+
+        return items
+          .filter((item): item is UnknownRecord => isRecord(item))
+          .map((item) => {
+            const id = typeof item.id === 'string' ? item.id : ''
+            const slug = typeof item.slug === 'string' ? item.slug : ''
+            const label = typeof item.label === 'string' ? item.label : ''
+            const threadCount = typeof item.thread_count === 'number' ? item.thread_count : undefined
+
+            return {
+              id,
+              slug,
+              label,
+              ...(threadCount !== undefined ? { thread_count: threadCount } : {}),
+            }
+          })
+          .filter((item) => item.id !== '' && item.slug !== '' && item.label !== '')
+      } catch (err) {
+        logger.error('Failed to load thread tag categories:', err)
+        error.value = getErrorMessage(err, 'Failed to load tag suggestions')
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    function cleanupRealtimeChannels(): void {
+      const echo = getEcho()
+      if (!echo) {
+        activeSpaceChannel = null
+        activeThreadChannel = null
+        return
+      }
+
+      if (activeSpaceChannel) {
+        echo.leave(activeSpaceChannel)
+        activeSpaceChannel = null
+      }
+
+      if (activeThreadChannel) {
+        echo.leave(activeThreadChannel)
+        activeThreadChannel = null
+      }
+
+      realtimeCountedReplyIds.clear()
+    }
+
+    function isSlowModeActiveError(err: unknown): boolean {
+      if (isAxiosError(err) && err.response?.status === 429) {
+        return getErrorResponseData(err)?.code === 'SLOW_MODE_ACTIVE'
+      }
+
+      if (!err || typeof err !== 'object' || !('response' in err)) {
+        return false
+      }
+
+      const response = (err as { response?: { status?: unknown; data?: unknown } }).response
+      if (response?.status !== 429) {
+        return false
+      }
+
+      const responseData = toRecord(response.data)
+      return responseData?.code === 'SLOW_MODE_ACTIVE'
+    }
+
+    function isNetworkError(err: unknown): boolean {
+      if (!isAxiosError(err)) {
+        return false
+      }
+
+      if (err.code === 'ERR_NETWORK') {
+        return true
+      }
+
+      return err.message === 'Network Error' && !err.response
+    }
+
+    async function createReply(threadId: string, input: CreateReplyInput): Promise<unknown> {
+      pendingReplyCreations.set(threadId, (pendingReplyCreations.get(threadId) ?? 0) + 1)
+
+      try {
+        const response = await client.post<unknown>(`/v1/discussion/threads/${threadId}/replies`, {
+          body: input.body,
+          parent_reply_id: input.parent_id,
+          ...(input.quoted_reply_id ? { quoted_reply_id: input.quoted_reply_id } : {}),
+          ...(input.media_ids?.length ? { media_ids: input.media_ids } : {}),
+        })
+
+        const responseData = toRecord(response.data)
+        const newReply = (responseData?.data ?? null) as Reply | null
+
+        if (newReply?.id) {
+          locallyCreatedReplyIds.add(newReply.id)
+        }
+
+        let didInsertReply = false
+
+        if (newReply) {
+          const existingReplyIndex = replies.value.findIndex((reply) => reply.id === newReply.id)
+
+          if (existingReplyIndex !== -1) {
+            const existingReply = replies.value[existingReplyIndex]
+            if (existingReply) {
+              replies.value[existingReplyIndex] = {
+                ...existingReply,
+                ...newReply,
+              }
+            }
+          } else if (input.parent_id) {
+            const parentIndex = replies.value.findIndex((reply) => reply.id === input.parent_id)
+            if (parentIndex !== -1) {
+              const parent = replies.value[parentIndex]
+              const parentDepth = parent?.depth ?? parent?.display_depth ?? 0
+              newReply.depth = parentDepth + 1
+              newReply.display_depth = parentDepth + 1
+              newReply.parent_reply_id = input.parent_id
+
+              let insertIndex = parentIndex + 1
+              while (insertIndex < replies.value.length) {
+                const reply = replies.value[insertIndex]
+                const replyDepth = reply?.depth ?? reply?.display_depth ?? 0
+                if (replyDepth <= parentDepth) {
+                  break
+                }
+                insertIndex += 1
+              }
+
+              replies.value.splice(insertIndex, 0, newReply)
+              didInsertReply = true
+
+              if (parent) {
+                parent.reply_count = (parent.reply_count ?? 0) + 1
+                parent.children_count = (parent.children_count ?? 0) + 1
+              }
+            } else {
+              replies.value.push(newReply)
+              didInsertReply = true
+            }
+          } else {
+            newReply.depth = 0
+            newReply.display_depth = 0
+            replies.value.push(newReply)
+            didInsertReply = true
+          }
+        }
+
+        if (didInsertReply && currentThread.value?.id === threadId) {
+          currentThread.value.reply_count += 1
+        }
+
+        const thread = threads.value.find((candidate) => candidate.id === threadId)
+        if (thread) {
+          if (didInsertReply) {
+            thread.reply_count += 1
+          } else if (currentThread.value?.id === threadId) {
+            thread.reply_count = Math.max(thread.reply_count, currentThread.value.reply_count)
+          }
+          thread.last_activity_at = new Date().toISOString()
+        }
+
+        subscribeToThreadRealtime(threadId)
+
+        return response.data
+      } catch (err) {
+        if (!isSlowModeActiveError(err) && !isNetworkError(err)) {
+          logger.error('Failed to create reply:', err)
+        }
+        throw err
+      } finally {
+        const remaining = (pendingReplyCreations.get(threadId) ?? 1) - 1
+        if (remaining <= 0) {
+          pendingReplyCreations.delete(threadId)
+        } else {
+          pendingReplyCreations.set(threadId, remaining)
+        }
+      }
+    }
+
+    function subscribeToSpaceRealtime(spaceId: string): void {
+      const echo = getEcho()
+      if (!echo) {
+        return
+      }
+
+      const channelName = `discussions.space.${spaceId}`
+
+      if (activeSpaceChannel === channelName) {
+        return
+      }
+
+      if (activeSpaceChannel) {
+        echo.leave(activeSpaceChannel)
+      }
+
+      activeSpaceChannel = channelName
+
+      echo.private(channelName)
+        .listen('.Discussion.ThreadCreated', (payload: unknown) => {
+          handleRealtimeThreadCreated(payload as Thread | null | undefined)
+        })
+        .listen('.Discussion.ReplyCreated', (payload: unknown) => {
+          handleRealtimeReplySummary(payload as Reply | null | undefined)
+        })
+        .listen('.Discussion.SpaceMembershipUpdated', (payload: unknown) => {
+          handleRealtimeSpaceMembershipUpdated(payload as SpaceMembershipRealtimePayload | null | undefined)
+        })
+    }
+
+    function subscribeToThreadRealtime(threadId: string): void {
+      const echo = getEcho()
+      if (!echo) {
+        return
+      }
+
+      const channelName = `discussions.thread.${threadId}`
+
+      if (activeThreadChannel === channelName) {
+        return
+      }
+
+      if (activeThreadChannel) {
+        echo.leave(activeThreadChannel)
+      }
+
+      activeThreadChannel = channelName
+
+      echo.private(channelName)
+        .listen('.Discussion.ReplyCreated', (payload: unknown) => {
+          handleRealtimeReplyDetail(payload as Reply | null | undefined)
+        })
+        .listen('.Discussion.ReplyReactionToggled', (payload: unknown) => {
+          handleRealtimeReplyReaction(payload as ReplyReactionRealtimePayload | null | undefined)
+        })
+    }
+
+    function handleRealtimeThreadCreated(payload: Thread | null | undefined): void {
+      if (!payload?.id) {
+        return
+      }
+
+      if (currentSpace.value && payload.space_id !== currentSpace.value.id) {
+        return
+      }
+
+      const exists = threads.value.some((thread) => thread.id === payload.id)
+      if (!exists) {
+        threads.value.unshift(payload)
+      } else {
+        threads.value = threads.value.map((thread) => (
+          thread.id === payload.id ? { ...thread, ...payload } : thread
+        ))
+      }
+
+      applyThreadListSorting()
+    }
+
+    function handleRealtimeReplySummary(payload: Reply | null | undefined): void {
+      if (!payload?.thread_id) {
+        return
+      }
+
+      const isLocalReply = payload.id ? locallyCreatedReplyIds.has(payload.id) : false
+      if (isLocalReply) {
+        locallyCreatedReplyIds.delete(payload.id)
+        return
+      }
+
+      const pendingCount = pendingReplyCreations.get(payload.thread_id) ?? 0
+      if (pendingCount > 0 && payload.id && payload.author_id) {
+        if (payload.author_id === getCurrentUserId()) {
+          locallyCreatedReplyIds.add(payload.id)
+          return
+        }
+      }
+
+      const thread = threads.value.find((candidate) => candidate.id === payload.thread_id)
+      const currentThreadForReply = currentThread.value?.id === payload.thread_id
+        ? currentThread.value
+        : null
+      const hasExistingProjection = Boolean(thread || currentThreadForReply)
+
+      if (payload.is_initial_reply === true && hasExistingProjection) {
+        const activityAt = payload.created_at ?? new Date().toISOString()
+
+        if (thread) {
+          thread.last_activity_at = activityAt
+        }
+
+        if (currentThreadForReply) {
+          currentThreadForReply.last_activity_at = activityAt
+        }
+
+        return
+      }
+
+      if (thread) {
+        thread.reply_count = (thread.reply_count || 0) + 1
+        thread.last_activity_at = payload.created_at ?? new Date().toISOString()
+      }
+
+      if (currentThreadForReply) {
+        if (payload.id && !realtimeCountedReplyIds.has(payload.id)) {
+          realtimeCountedReplyIds.add(payload.id)
+          currentThreadForReply.reply_count = (currentThreadForReply.reply_count || 0) + 1
+        }
+        currentThreadForReply.last_activity_at = payload.created_at ?? new Date().toISOString()
+      }
+    }
+
+    function handleRealtimeReplyDetail(payload: Reply | null | undefined): void {
+      if (!payload?.id || !payload.thread_id) {
+        return
+      }
+
+      if (currentThread.value?.id !== payload.thread_id) {
+        return
+      }
+
+      if (payload.is_initial_reply === true) {
+        if (currentThread.value) {
+          currentThread.value.last_activity_at = payload.created_at ?? new Date().toISOString()
+        }
+        return
+      }
+
+      const normalizedPayload: Reply = (() => {
+        const normalized: Reply = { ...payload }
+
+        const quotedReplyId = normalized.quoted_reply_id
+        const hasQuotedReplyId = typeof quotedReplyId === 'string' && quotedReplyId.trim().length > 0
+        if (!hasQuotedReplyId) {
+          normalized.quoted_reply_id = null
+          normalized.quoted_reply = null
+          normalized.quote_data = null
+        }
+
+        return normalized
+      })()
+
+      const already = replies.value.some((reply) => reply.id === payload.id)
+      if (!already) {
+        replies.value.push(normalizedPayload)
+
+        if (currentThread.value && payload.id && !realtimeCountedReplyIds.has(payload.id)) {
+          realtimeCountedReplyIds.add(payload.id)
+          currentThread.value.reply_count = (currentThread.value.reply_count || 0) + 1
+          currentThread.value.last_activity_at = payload.created_at ?? new Date().toISOString()
+        }
+      }
+    }
+
+    function handleRealtimeReplyReaction(payload: ReplyReactionRealtimePayload | null | undefined): void {
+      if (!payload?.reply_id || !payload.thread_id || !payload.user_id) {
+        return
+      }
+
+      if (currentThread.value?.id !== payload.thread_id) {
+        return
+      }
+
+      const action = payload.action === 'added' || payload.action === 'removed'
+        ? payload.action
+        : null
+      const kind = payload.kind === 'like' || payload.kind === 'dislike'
+        ? payload.kind
+        : null
+
+      if (!action || !kind) {
+        return
+      }
+
+      const reply = replies.value.find((item) => item.id === payload.reply_id)
+      if (!reply) {
+        return
+      }
+
+      const currentUserId = getCurrentUserId()
+      const localPendingCount = pendingLocalReactionToggles.get(payload.reply_id) ?? 0
+      const localEchoMarker = pendingLocalReactionEchoes.get(payload.reply_id)
+      const now = Date.now()
+
+      if (localEchoMarker && localEchoMarker.expiresAt <= now) {
+        pendingLocalReactionEchoes.delete(payload.reply_id)
+      }
+
+      const hasMatchingEchoMarker = localEchoMarker !== undefined
+        && localEchoMarker.expiresAt > now
+        && localEchoMarker.kind === kind
+        && localEchoMarker.action === action
+      const isLocalEcho = localPendingCount > 0
+        && currentUserId !== null
+        && payload.user_id === currentUserId
+
+      if (currentUserId !== null && payload.user_id === currentUserId && (isLocalEcho || hasMatchingEchoMarker)) {
+        if (hasMatchingEchoMarker) {
+          pendingLocalReactionEchoes.delete(payload.reply_id)
+        }
+        return
+      }
+
+      if (action === 'added') {
+        if (kind === 'like') {
+          reply.likes_count = (reply.likes_count ?? 0) + 1
+        } else {
+          reply.dislikes_count = (reply.dislikes_count ?? 0) + 1
+        }
+      } else if (kind === 'like') {
+        reply.likes_count = Math.max(0, (reply.likes_count ?? 0) - 1)
+      } else {
+        reply.dislikes_count = Math.max(0, (reply.dislikes_count ?? 0) - 1)
+      }
+
+      if (payload.user_id !== currentUserId) {
+        return
+      }
+
+      const currentKind = resolveReactionKind(reply.user_reaction)
+      if (action === 'added') {
+        reply.user_reaction = kind
+        return
+      }
+
+      if (currentKind === kind) {
+        reply.user_reaction = null
+      }
+    }
+
+    function handleRealtimeSpaceMembershipUpdated(
+      payload: SpaceMembershipRealtimePayload | null | undefined
+    ): void {
+      const spaceId = typeof payload?.space_id === 'string' && payload.space_id.length > 0
+        ? payload.space_id
+        : null
+      const memberCount = typeof payload?.member_count === 'number'
+        ? Math.max(0, Math.floor(payload.member_count))
+        : null
+
+      if (!spaceId || memberCount === null) {
+        return
+      }
+
+      const existingMembership = getSpaceMembership(spaceId)
+      const actorId = typeof payload?.actor_id === 'string' && payload.actor_id.length > 0
+        ? payload.actor_id
+        : null
+      const payloadIsMember = typeof payload?.is_member === 'boolean'
+        ? payload.is_member
+        : null
+      const isCurrentUserActor = actorId !== null && actorId === getCurrentUserId()
+
+      if (!existingMembership && !isCurrentUserActor) {
+        updateSpaceMemberCount(spaceId, memberCount)
+        return
+      }
+
+      const resolvedIsMember = payloadIsMember !== null && isCurrentUserActor
+        ? payloadIsMember
+        : existingMembership?.is_member ?? false
+
+      setSpaceMembership(spaceId, {
+        space_id: spaceId,
+        is_member: resolvedIsMember,
+        member_count: memberCount,
+      })
+    }
+
+    async function subscribeToThread(threadId: string): Promise<unknown> {
+      try {
+        const response = await client.post<unknown>(`/v1/discussion/threads/${threadId}/subscribe`)
+        return response.data
+      } catch (err) {
+        logger.error('Failed to subscribe:', err)
+        throw err
+      }
+    }
+
+    async function unsubscribeFromThread(threadId: string): Promise<unknown> {
+      try {
+        const response = await client.delete<unknown>(`/v1/discussion/threads/${threadId}/subscribe`)
+        return response.data
+      } catch (err) {
+        logger.error('Failed to unsubscribe:', err)
+        throw err
+      }
+    }
+
+    async function searchThreads(query: string, spaceSlug?: string): Promise<unknown> {
+      loading.value = true
+      error.value = null
+
+      try {
+        const params = new URLSearchParams({ q: query })
+        if (spaceSlug) {
+          params.append('space', spaceSlug)
+        }
+
+        const response = await client.get<unknown>(`/v1/discussion/search/threads?${params.toString()}`)
+        return response.data
+      } catch (err) {
+        logger.error('Failed to search threads:', err)
+        error.value = getErrorMessage(err, 'Failed to search')
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    async function searchThreadsInSpace(query: string, spaceId: string): Promise<Thread[]> {
+      const normalizedQuery = query.trim()
+      if (normalizedQuery.length < 2) {
+        return []
+      }
+
+      loading.value = true
+      error.value = null
+
+      try {
+        const response = await client.post<ThreadSearchResponseBody>('/v1/discussion/search', {
+          query: normalizedQuery,
+          space_id: spaceId,
+          sort_by: 'relevance',
+          limit: 50,
+        })
+
+        const rows = extractThreadSearchRows(response.data)
+        if (rows.length > 0) {
+          return rows.map((row) => mapSearchRowToThread(row, spaceId))
+        }
+
+        return filterLoadedThreadsByQuery(normalizedQuery, spaceId)
+      } catch (err) {
+        logger.error('Failed to search threads in space:', err)
+        error.value = isAxiosError(err)
+          ? err.response?.data?.message ?? 'Failed to search threads'
+          : 'Failed to search threads'
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    async function searchThreadsGlobally(query: string): Promise<Thread[]> {
+      const normalizedQuery = query.trim()
+      if (normalizedQuery.length < 2) {
+        return []
+      }
+
+      loading.value = true
+      error.value = null
+
+      try {
+        const response = await client.post<ThreadSearchResponseBody>('/v1/discussion/search', {
+          query: normalizedQuery,
+          sort_by: 'relevance',
+          limit: 50,
+        })
+
+        return extractThreadSearchRows(response.data).map((row) => mapSearchRowToThread(row))
+      } catch (err) {
+        logger.error('Failed to search threads globally:', err)
+        error.value = isAxiosError(err)
+          ? err.response?.data?.message ?? 'Failed to search threads'
+          : 'Failed to search threads'
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    function mapSearchRowToThread(row: ThreadSearchIndexRow, fallbackSpaceId?: string): Thread {
+      const nowIso = new Date().toISOString()
+
+      const thread: Thread = {
+        id: row.id,
+        space_id: row.space_id ?? fallbackSpaceId ?? '',
+        author_id: row.author_id ?? '',
+        title: row.title,
+        audience: 'public',
+        status: row.status ?? 'open',
+        is_pinned: Boolean(row.is_pinned),
+        reply_count: row.replies_count ?? 0,
+        last_activity_at: row.updated_at ?? row.created_at ?? nowIso,
+        created_at: row.created_at ?? nowIso,
+        meta: {
+          views: row.views_count ?? 0,
+        },
+        author: {
+          id: row.author_id ?? '',
+          name: row.author_name ?? 'Anonymous',
+          handle: row.author_handle ?? '',
+        },
+      }
+
+      if (typeof row.slug === 'string') {
+        thread.slug = row.slug
+      }
+
+      return thread
+    }
+
+    function extractThreadSearchRows(responseBody: ThreadSearchResponseBody): ThreadSearchIndexRow[] {
+      const nestedResults = responseBody.data?.results
+      if (Array.isArray(nestedResults)) {
+        return nestedResults
+      }
+
+      const topLevelResults = responseBody.results
+      if (Array.isArray(topLevelResults)) {
+        return topLevelResults
+      }
+
+      return []
+    }
+
+    function filterLoadedThreadsByQuery(query: string, spaceId: string): Thread[] {
+      const normalizedTerms = query
+        .toLowerCase()
+        .split(/\s+/)
+        .map((term) => term.trim())
+        .filter((term) => term.length > 0)
+
+      if (normalizedTerms.length === 0) {
+        return []
+      }
+
+      return threads.value.filter((thread) => {
+        if (thread.space_id !== spaceId) {
+          return false
+        }
+
+        const title = thread.title.toLowerCase()
+        const body = thread.body?.toLowerCase() ?? ''
+
+        return normalizedTerms.every((term) => title.includes(term) || body.includes(term))
+      })
+    }
+
+    function featuredSpaces(): Space[] {
+      return spaces.value.filter((space) => space.meta?.is_featured)
+    }
+
+    async function setThreadPinned(threadId: string, pinned: boolean): Promise<void> {
+      loading.value = true
+      error.value = null
+
+      try {
+        await client.post(`/v1/discussion/threads/${threadId}/pin`, { pinned })
+
+        if (currentThread.value?.id === threadId && currentThread.value) {
+          currentThread.value = { ...currentThread.value, is_pinned: pinned }
+        }
+
+        const thread = threads.value.find((candidate) => candidate.id === threadId)
+        if (thread) {
+          thread.is_pinned = pinned
+        }
+
+        applyThreadListSorting()
+      } catch (err) {
+        logger.error('Failed to update pinned status:', err)
+        error.value = getErrorMessage(err, 'Failed to update pinned status')
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    async function setThreadLocked(threadId: string, locked: boolean): Promise<void> {
+      loading.value = true
+      error.value = null
+
+      try {
+        await client.post(`/v1/discussion/threads/${threadId}/lock`, { locked })
+        const nextStatus: Thread['status'] = locked ? 'locked' : 'open'
+
+        if (currentThread.value?.id === threadId && currentThread.value) {
+          currentThread.value = { ...currentThread.value, status: nextStatus }
+        }
+
+        const thread = threads.value.find((candidate) => candidate.id === threadId)
+        if (thread) {
+          thread.status = nextStatus
+        }
+      } catch (err) {
+        logger.error('Failed to update locked status:', err)
+        error.value = getErrorMessage(err, 'Failed to update locked status')
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    async function moveThread(threadId: string, toSpaceSlug: string): Promise<void> {
+      loading.value = true
+      error.value = null
+
+      try {
+        const response = await client.post<unknown>(`/v1/discussion/threads/${threadId}/move`, {
+          to_space_slug: toSpaceSlug,
+        })
+
+        const responseData = toRecord(response.data)
+        const movedThread = (responseData?.data ?? null) as Thread | null
+        const destinationSpace = spaces.value.find((space) => space.slug === toSpaceSlug)
+
+        if (currentThread.value?.id === threadId && currentThread.value) {
+          currentThread.value = {
+            ...currentThread.value,
+            ...(movedThread ?? {}),
+            ...(destinationSpace ? { space_id: destinationSpace.id } : {}),
+          }
+        }
+
+        const currentSpaceSlug = currentSpace.value?.slug ?? null
+        if (currentSpaceSlug && currentSpaceSlug !== toSpaceSlug) {
+          threads.value = threads.value.filter((thread) => thread.id !== threadId)
+        } else {
+          const threadIndex = threads.value.findIndex((thread) => thread.id === threadId)
+          if (threadIndex > -1) {
+            const existingThread = threads.value[threadIndex]
+            if (!existingThread) {
+              return
+            }
+
+            threads.value[threadIndex] = {
+              ...existingThread,
+              ...(movedThread ?? {}),
+              ...(destinationSpace ? { space_id: destinationSpace.id } : {}),
+            }
+          }
+        }
+
+        applyThreadListSorting()
+      } catch (err) {
+        logger.error('Failed to move thread:', err)
+        error.value = getErrorMessage(err, 'Failed to move thread')
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    async function updateThread(threadId: string, updates: UpdateThreadInput): Promise<unknown> {
+      loading.value = true
+      error.value = null
+
+      try {
+        const response = await client.patch<unknown>(`/v1/discussion/threads/${threadId}`, {
+          ...updates,
+          ...(updates.media_ids ? { media_ids: updates.media_ids } : {}),
+        })
+
+        const responseData = toRecord(response.data)
+        const updatedThread = toRecord(responseData?.data)
+
+        if (currentThread.value?.id === threadId && updatedThread) {
+          currentThread.value = { ...currentThread.value, ...(updatedThread as Partial<Thread>) }
+        }
+
+        const threadIndex = threads.value.findIndex((thread) => thread.id === threadId)
+        if (threadIndex > -1 && updatedThread) {
+          const existingThread = threads.value[threadIndex]
+          if (existingThread) {
+            threads.value[threadIndex] = {
+              ...existingThread,
+              ...(updatedThread as Partial<Thread>),
+            }
+          }
+        }
+
+        return response.data
+      } catch (err) {
+        logger.error('Failed to update thread:', err)
+        error.value = getErrorMessage(err, 'Failed to update thread')
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    async function deleteThread(threadId: string): Promise<unknown> {
+      loading.value = true
+      error.value = null
+
+      try {
+        const response = await client.delete<unknown>(`/v1/discussion/threads/${threadId}`)
+
+        threads.value = threads.value.filter((thread) => thread.id !== threadId)
+
+        if (currentThread.value?.id === threadId) {
+          currentThread.value = null
+        }
+
+        return response.data
+      } catch (err) {
+        logger.error('Failed to delete thread:', err)
+        error.value = getErrorMessage(err, 'Failed to delete thread')
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    async function restoreThread(threadId: string): Promise<Thread> {
+      loading.value = true
+      error.value = null
+
+      try {
+        const response = await client.post<unknown>(`/v1/discussion/threads/${threadId}/restore`)
+        const responseData = toRecord(response.data)
+        const restoredThread = (responseData?.data ?? null) as Thread | null
+
+        if (restoredThread) {
+          const threadIndex = threads.value.findIndex((thread) => thread.id === threadId)
+          if (threadIndex > -1) {
+            const existingThread = threads.value[threadIndex]
+            if (existingThread) {
+              threads.value[threadIndex] = {
+                ...existingThread,
+                ...restoredThread,
+                deleted_at: null,
+              }
+            }
+          } else {
+            threads.value.unshift({
+              ...restoredThread,
+              deleted_at: null,
+            })
+          }
+
+          applyThreadListSorting()
+          currentThread.value = {
+            ...restoredThread,
+            deleted_at: null,
+          }
+        }
+
+        if (!restoredThread) {
+          throw new Error('Restore request succeeded without thread payload')
+        }
+
+        return restoredThread
+      } catch (err) {
+        logger.error('Failed to restore thread:', err)
+        error.value = getErrorMessage(err, 'Failed to restore thread')
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    async function deleteReply(replyId: string): Promise<void> {
+      loading.value = true
+      error.value = null
+
+      const replyIndex = replies.value.findIndex((reply) => reply.id === replyId)
+      const replyToRestore = replyIndex >= 0 ? replies.value[replyIndex] ?? null : null
+      const targetThreadId = replyToRestore?.thread_id ?? currentThread.value?.id ?? null
+      const threadListIndex = targetThreadId
+        ? threads.value.findIndex((thread) => thread.id === targetThreadId)
+        : -1
+      const previousCurrentThreadReplyCount = currentThread.value?.reply_count
+      const previousThreadReplyCount = threadListIndex >= 0
+        ? threads.value[threadListIndex]?.reply_count
+        : undefined
+
+      if (replyIndex >= 0) {
+        replies.value.splice(replyIndex, 1)
+      }
+
+      if (currentThread.value && typeof currentThread.value.reply_count === 'number') {
+        currentThread.value = {
+          ...currentThread.value,
+          reply_count: Math.max(0, currentThread.value.reply_count - 1),
+        }
+      }
+
+      if (threadListIndex >= 0) {
+        const thread = threads.value[threadListIndex]
+        if (thread && typeof thread.reply_count === 'number') {
+          threads.value[threadListIndex] = {
+            ...thread,
+            reply_count: Math.max(0, thread.reply_count - 1),
+          }
+        }
+      }
+
+      try {
+        await client.delete(`/v1/discussion/replies/${replyId}`)
+      } catch (err) {
+        if (replyToRestore && replyIndex >= 0) {
+          const boundedIndex = Math.min(replyIndex, replies.value.length)
+          replies.value.splice(boundedIndex, 0, replyToRestore)
+        }
+
+        if (currentThread.value && typeof previousCurrentThreadReplyCount === 'number') {
+          currentThread.value = {
+            ...currentThread.value,
+            reply_count: previousCurrentThreadReplyCount,
+          }
+        }
+
+        if (threadListIndex >= 0 && typeof previousThreadReplyCount === 'number') {
+          const thread = threads.value[threadListIndex]
+          if (thread) {
+            threads.value[threadListIndex] = {
+              ...thread,
+              reply_count: previousThreadReplyCount,
+            }
+          }
+        }
+
+        logger.error('Failed to delete reply:', err)
+        error.value = getErrorMessage(err, 'Failed to delete reply')
+        throw err
+      } finally {
+        loading.value = false
+      }
+    }
+
+    async function updateReply(replyId: string, body: string): Promise<Reply> {
+      const reply = replies.value.find((candidate) => candidate.id === replyId)
+      const prevBody = reply?.body ?? ''
+
+      if (reply) {
+        reply.body = body
+        reply.updated_at = new Date().toISOString()
+      }
+
+      try {
+        const response = await client.patch<unknown>(`/v1/discussion/replies/${replyId}`, { body })
+        const responseData = toRecord(response.data)
+        const updated = (responseData?.data ?? null) as Reply | null
+
+        if (!updated) {
+          throw new Error('Reply update succeeded without a reply payload')
+        }
+
+        if (reply) {
+          reply.body = updated.body
+          reply.updated_at = updated.updated_at
+        }
+
+        return updated
+      } catch (err) {
+        if (reply) {
+          reply.body = prevBody
+        }
+        logger.error('Failed to update reply:', err)
+        throw err
+      }
+    }
+
+    function resolveReactionKind(reaction: Reply['user_reaction']): string | null {
+      if (!reaction) {
+        return null
+      }
+      if (typeof reaction === 'string') {
+        return reaction
+      }
+      if (typeof reaction === 'object' && 'kind' in reaction && typeof reaction.kind === 'string') {
+        return reaction.kind
+      }
+      return null
+    }
+
+    async function toggleReplyReaction(replyId: string, kind: string): Promise<void> {
+      const reply = replies.value.find((candidate) => candidate.id === replyId)
+      if (!reply) {
+        return
+      }
+
+      pendingLocalReactionToggles.set(replyId, (pendingLocalReactionToggles.get(replyId) ?? 0) + 1)
+
+      const prevReactionRaw = reply.user_reaction ?? null
+      const prevLikes = reply.likes_count ?? 0
+      const prevDislikes = reply.dislikes_count ?? 0
+      const prevKind = resolveReactionKind(prevReactionRaw)
+
+      if (kind === 'none') {
+        if (prevKind === 'like') {
+          reply.likes_count = Math.max(0, prevLikes - 1)
+        } else if (prevKind === 'dislike') {
+          reply.dislikes_count = Math.max(0, prevDislikes - 1)
+        }
+        reply.user_reaction = null
+      } else {
+        if (prevKind === 'like') {
+          reply.likes_count = Math.max(0, prevLikes - 1)
+        } else if (prevKind === 'dislike') {
+          reply.dislikes_count = Math.max(0, prevDislikes - 1)
+        }
+
+        if (kind === 'like') {
+          reply.likes_count = (reply.likes_count ?? 0) + 1
+        } else if (kind === 'dislike') {
+          reply.dislikes_count = (reply.dislikes_count ?? 0) + 1
+        }
+        reply.user_reaction = kind
+      }
+
+      const apiKind = kind === 'none' ? prevKind : kind
+      if (apiKind === 'like' || apiKind === 'dislike') {
+        const echoAction: 'added' | 'removed' = kind === 'none' ? 'removed' : 'added'
+        pendingLocalReactionEchoes.set(replyId, {
+          kind: apiKind,
+          action: echoAction,
+          expiresAt: Date.now() + 5000,
+        })
+      } else {
+        pendingLocalReactionEchoes.delete(replyId)
+      }
+
+      try {
+        await client.post('/v1/reactions/toggle', {
+          target_type: 'reply',
+          target_id: replyId,
+          kind: apiKind,
+        })
+      } catch (err) {
+        reply.likes_count = prevLikes
+        reply.dislikes_count = prevDislikes
+        reply.user_reaction = prevReactionRaw
+        pendingLocalReactionEchoes.delete(replyId)
+        logger.error('Failed to toggle reaction:', err)
+      } finally {
+        const remaining = (pendingLocalReactionToggles.get(replyId) ?? 1) - 1
+        if (remaining <= 0) {
+          pendingLocalReactionToggles.delete(replyId)
+        } else {
+          pendingLocalReactionToggles.set(replyId, remaining)
+        }
+      }
+    }
+
+    function getCategories(): DiscussionCategorySummary[] {
+      const categories = new Map<string, DiscussionCategorySummary>()
+
+      spaces.value.forEach((space) => {
+        const category = space.meta?.category || space.name.split(' ')[0] || 'Uncategorized'
+        const existingCategory = categories.get(category)
+
+        if (existingCategory) {
+          existingCategory.count += 1
+          return
+        }
+
+        categories.set(category, {
+          name: category,
+          count: 1,
+          ...(space.meta?.icon ? { icon: space.meta.icon } : {}),
+          ...(space.meta?.color ? { color: space.meta.color } : {}),
+        })
+      })
+
+      return Array.from(categories.values())
+    }
+
+    async function saveDraft(
+      type: string,
+      id: string,
+      content: string,
+      options?: SaveDraftOptions
+    ): Promise<unknown> {
+      try {
+        const response = await client.post<unknown>('/v1/editor/drafts/save', {
+          type,
+          id,
+          title: options?.title,
+          content,
+          metadata: options?.metadata,
+          format: options?.format ?? 'markdown',
+        })
+        return response.data
+      } catch (draftError) {
+        logger.error('Failed to save draft:', draftError)
+        throw draftError
+      }
+    }
+
+    async function getDraft(type: string, id: string): Promise<unknown> {
+      try {
+        const response = await client.get<unknown>('/v1/editor/drafts/check', {
+          params: { type, id },
+        })
+        const responseData = toRecord(response.data)
+        return responseData?.data ?? null
+      } catch (draftError) {
+        if (isAxiosError(draftError) && draftError.response?.status === 404) {
+          return null
+        }
+        logger.error('Failed to get draft:', draftError)
+        return null
+      }
+    }
+
+    async function clearDraft(type: string, id: string): Promise<void> {
+      try {
+        await client.delete('/v1/editor/drafts/delete', {
+          params: { type, id },
+        })
+      } catch (draftError) {
+        if (isAxiosError(draftError) && draftError.response?.status === 404) {
+          return
+        }
+        logger.error('Failed to clear draft:', draftError)
+      }
+    }
+
+    function generateThreadDraftId(spaceSlug: string): string {
+      return `${spaceSlug}-new`
+    }
+
+    function generateReplyDraftId(threadId: string): string {
+      return `${threadId}-reply`
+    }
+
+    function setError(message: string | null): void {
+      error.value = message
+    }
+
+    const stopListeningToEchoReconnect = onEchoReconnected(() => {
+      const savedSpace = activeSpaceChannel
+      const savedThread = activeThreadChannel
+
+      activeSpaceChannel = null
+      activeThreadChannel = null
+
+      if (savedSpace) {
+        const spaceId = savedSpace.replace('discussions.space.', '')
+        subscribeToSpaceRealtime(spaceId)
+      }
+
+      if (savedThread) {
+        const threadId = savedThread.replace('discussions.thread.', '')
+        subscribeToThreadRealtime(threadId)
+      }
+    })
+
+    onScopeDispose(() => {
+      if (typeof stopListeningToEchoReconnect === 'function') {
+        stopListeningToEchoReconnect()
+      }
+      cleanupRealtimeChannels()
+    })
+
+    async function fetchQuote(replyId: string): Promise<QuoteResponse> {
+      const reply = replies.value.find((candidate) => candidate.id === replyId)
+      const selectedText = reply?.body ?? ''
+
+      const response = await client.post<unknown>(`/v1/discussion/replies/${replyId}/quote`, {
+        selected_text: selectedText.slice(0, 1000),
+      })
+
+      const responseData = toRecord(response.data)
+      return (responseData?.data ?? {}) as QuoteResponse
+    }
+
+    return {
+      spaces,
+      spaceTree,
+      currentSpace,
+      spaceMemberships,
+      spaceMembershipLoading,
+      cleanupRealtimeChannels,
+      threads,
+      currentThread,
+      replies,
+      loading,
+      error,
+      nextCursor,
+      repliesNextCursor,
+      spacesLoadingState,
+      threadsLoadingState,
+      repliesLoadingState,
+      loadSpaces,
+      loadSpaceDetail,
+      loadSpaceMembership,
+      joinSpace,
+      leaveSpace,
+      getSpaceMembership,
+      flattenTree,
+      rootSpaces,
+      leafSpaces,
+      loadThreads,
+      loadThread,
+      loadReplies,
+      createThread,
+      loadTagCategories,
+      createReply,
+      fetchQuote,
+      subscribeToThread,
+      unsubscribeFromThread,
+      searchThreads,
+      searchThreadsInSpace,
+      searchThreadsGlobally,
+      featuredSpaces,
+      getCategories,
+      setThreadPinned,
+      setThreadLocked,
+      moveThread,
+      updateThread,
+      deleteThread,
+      restoreThread,
+      deleteReply,
+      updateReply,
+      toggleReplyReaction,
+      draftTypes,
+      saveDraft,
+      getDraft,
+      clearDraft,
+      generateThreadDraftId,
+      generateReplyDraftId,
+      setError,
+    }
+  })
+}