POST로 SSE를 받고 Zustand를 둘로 나눈 실시간 채팅 구조

// 브라우저 표준 EventSource: GET만 가능
const es = new EventSource('/api/messages?content=hello');
// ❌ body를 보낼 수 없다
// ❌ 커스텀 헤더(Authorization)를 설정할 수 없다

// frontend/src/lib/sse.ts: POST 기반 SSE 클라이언트 (발췌)
export function sendMessageSSE(
  sessionId: string,
  content: string,
  onEvent: SSECallback,
  mentionedCharacter?: string,
  forceAdvanceEvent?: boolean,
  onStreamEnd?: (reason: SSEStreamEndReason, status?: number) => void,
): AbortController {
  const controller = new AbortController();
  const body: Record<string, string | boolean> = { content };
  // ... mentionedCharacter, forceAdvanceEvent 는 있을 때만 싣는다

  (async () => {
    const headers: Record<string, string> = { 'Content-Type': 'application/json', ...(await getClientHeaders()) };
    const tokenGetter = getTokenGetter();
    if (tokenGetter) {
      const token = await tokenGetter();
      if (token) headers['Authorization'] = `Bearer ${token}`;
    }
    const cid = getClientId();
    if (cid) headers['X-Client-Id'] = cid; // 동기화 방송에서 보낸 기기를 빼는 데 쓴다

    let res: Response;
    try {
      res = await fetch(`${apiUrl}/sessions/${sessionId}/messages`, {
        method: 'POST',
        headers,
        body: JSON.stringify(body),
        signal: controller.signal,
      });
    } catch (err) {
      onStreamEnd?.((err as Error).name === 'AbortError' ? 'aborted' : 'fetch_error');
      return;
    }

    if (!res.ok || !res.body) {
      // 스트림이 아예 열리지 않은 실패는 상태 코드가 유일한 단서다 (429 = 한도 소진)
      onStreamEnd?.('fetch_error', res.status);
      return;
    }

    const reader = res.body.getReader();
    const decoder = new TextDecoder();
    let buffer = '';

    try {
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split('\n');
        buffer = lines.pop() || '';

        let currentEvent = 'message';
        for (const line of lines) {
          if (line.startsWith('event: ')) {
            currentEvent = line.slice(7).trim();
          } else if (line.startsWith('data: ')) {
            try {
              onEvent(currentEvent, JSON.parse(line.slice(6)));
            } catch {
              // 형식이 잘못된 데이터 건너뜀
            }
          }
        }
      }
      onStreamEnd?.('stream_closed');
    } catch (err) {
      onStreamEnd?.((err as Error).name === 'AbortError' ? 'aborted' : 'stream_closed');
    }
  })();

  return controller;
}

// packages/shared/src/sse-events.ts (메시지 전송 스트림에 쓰는 것만 발췌)
export const SSE_EVENTS = {
  NARRATION: 'narration',
  DIALOGUE: 'dialogue',
  SCENE_TRANSITION: 'scene_transition',
  AFFINITY_DELTA: 'intimacy_delta',
  LOCATION_CHANGE: 'location_change',
  CONVERSATION_PAUSE: 'conversation_pause',
  /** 턴이 끝난 뒤 캐릭터마다 고른 컷. done 앞에 온다 */
  DIALOGUE_CUT: 'dialogue_cut',
  DONE: 'done',
  ERROR: 'error',
  // ... 제작자 테스트 세션용 디버그, 기기 간 동기화(sync_*), 세션 공유(share_*) 이벤트
} as const;

// frontend/src/stores/chatStore.ts: dialogue_cut 핸들러
} else if (event === SSE_EVENTS.DIALOGUE_CUT) {
  // 턴이 끝난 뒤 도착하는 컷: 이번 턴의 lineIndex 번째 대사에 붙인다
  const d = data as { character: string; lineIndex: number; image: DialogueCut };
  set((state) => {
    const turnIds = new Set(state._currentTurnAiMsgIds);
    let seen = -1;
    const index = state.messages.findIndex(
      (m) => turnIds.has(m.id) && m.type === 'dialogue' && ++seen === d.lineIndex,
    );
    if (index === -1 || state.messages[index].character !== d.character) return {};
    const messages = [...state.messages];
    messages[index] = { ...messages[index], image: d.image, cutArrivedLive: true };
    return { messages };
  });
}

chatStore       턴 생명주기 (메시지 배열, SSE 연결, 기기 간 동기화 구독, 유휴 넛지)
chatUIStore     화면 상태 (패널·모달 토글, 되감기 대상, 표시 모드, 호감도 점수와 레벨업 연출)

// frontend/src/stores/chatStore.ts: 상태 인터페이스 (발췌)
interface ChatState {
  sessionId: string;
  messages: DisplayMessage[];
  isLoading: boolean;
  suggestions: string[];
  respondingCharacter: string | null;
  /** CHILD_SEXUAL 확정으로 이 세션이 잠겼다. true 가 되면 새로고침 전까지 유지한다 */
  safetyLocked: boolean;

  // Internal refs (non-reactive, not subscribed by UI)
  _abortController: AbortController | null;
  _currentUserMsgId: string | null;
  _currentTurnAiMsgIds: string[];
  _syncCleanup: (() => void) | null;
  _embedded: boolean;

  sendMessage: (content: string, mentionedCharacter?: string, forceAdvanceEvent?: boolean) => void;
  rewind: (messageId: string) => Promise<string>;
  cancel: () => void;
  reset: () => void;
  // ...
}

// frontend/src/stores/chatUIStore.ts: 상태 인터페이스 (발췌)
interface ChatUIState {
  sidebarOpen: boolean;
  rewindTargetId: string | null;
  selectedCharacter: Character | null;
  displayMode: DisplayMode; // 'messenger' | 'visual-novel'
  insufficientGemsOpen: boolean;
  affinityScore: number;
  levelUpInfo: { prevLevel: number; newLevel: number; score: number; levelName: string } | null;

  openSidebar: () => void;
  setRewindTargetId: (id: string | null) => void;
  setAffinityScore: (score: number, delta?: number) => void;
  // ... 모두 단순 set() 호출
}

// frontend/src/stores/chatStore.ts: 모듈 레벨 카운터
let msgIdCounter = 0;
function nextId(prefix: string) {
  return `${prefix}-${Date.now()}-${++msgIdCounter}`;
}

// frontend/src/stores/chatStore.ts: _processDone 의 캐시 처리 (발췌)
import { queryClient } from '@/lib/queryClient';
import { queryKeys, invalidateGemDerived } from '@/lib/queries';

if (typeof doneData.gems === 'number') {
  queryClient.setQueryData(queryKeys.gems.balance, {
    balance: doneData.gems,
    updatedAt: new Date().toISOString(),
  });
  invalidateGemDerived(queryClient); // 만료 예정·거래 내역은 다시 읽는다
}

queryClient.invalidateQueries({ queryKey: queryKeys.history(state.sessionId) });
if (doneData.memoryCreated) {
  queryClient.invalidateQueries({ queryKey: queryKeys.memories(state.sessionId) });
}

// frontend/src/lib/queries.ts: 쿼리 키 팩토리 (발췌)
export const queryKeys = {
  affinity: (characterId: string) => ['affinity', characterId] as const,
  gems: {
    balance: ['gems', 'balance'] as const,
    transactionsAll: ['gems', 'transactions'] as const,
    // ...
  },
  history: (sessionId: string) => ['history', sessionId] as const,
  memories: (sessionId: string) => ['memories', sessionId] as const,
  // ...
};

// frontend/src/stores/chatStore.ts: 취소와 정리 (발췌)
cancel: () => {
  get()._abortController?.abort();
  set({ isLoading: false, _abortController: null });
},

reset: () => {
  const { _abortController, _syncCleanup } = get();
  _abortController?.abort(); // 진행 중인 스트림 정리
  _syncCleanup?.();          // 기기 간 동기화 구독 정리
  get().clearIdleTimer();
  set({ /* 모든 상태 초기화 */ });
},

// frontend/src/stores/chatStore.ts
// 현재 턴의 유저 메시지 + 이번 스트림에서 도착한 AI 메시지만 제거 (이전 턴은 건드리지 않음)
function removeCurrentTurnMessages(
  messages: DisplayMessage[],
  userMsgId: string | null,
  aiMsgIds: string[],
): DisplayMessage[] {
  const aiIdSet = new Set(aiMsgIds);
  return messages.filter((m) => m.id !== userMsgId && !aiIdSet.has(m.id));
}

// sendMessage 의 SSE 콜백 안
if (errorData.code === SSE_ERROR_CODES.AI_GENERATION_FAILED) {
  set((state) => ({
    messages: removeCurrentTurnMessages(state.messages, state._currentUserMsgId, state._currentTurnAiMsgIds),
  }));
  restoreInput(); // 보낸 문장을 입력창에 되돌린다
  // ... 토스트, 환불됐으면 invalidateGemHoldings(queryClient)
  return;
}

// frontend/src/stores/chatStore.ts: sendMessage 의 onStreamEnd (발췌)
(reason, status) => {
  if (reason === 'aborted') return;
  if (!get().isLoading) return; // done 이나 error 가 이미 정리했다

  // DONE/ERROR 이벤트 없이 스트림이 끊김 → 이번 턴 메시지 제거 후 복구
  set((state) => ({
    messages: removeCurrentTurnMessages(state.messages, state._currentUserMsgId, state._currentTurnAiMsgIds),
    isLoading: false,
    respondingCharacter: null,
    _abortController: null,
    _currentUserMsgId: null,
    _currentTurnAiMsgIds: [],
  }));
  restoreInput();

  // 서버 상태와 동기화
  queryClient.invalidateQueries({ queryKey: queryKeys.history(sessionId) });
  invalidateGemHoldings(queryClient);
  // 429 는 스트림이 열리기 전에 끊긴 것이라 error 이벤트가 오지 않는다: 상태 코드로 문구를 고른다
}

// frontend/src/stores/chatStore.ts: INSUFFICIENT_GEMS 분기 (발췌)
import('@/stores/chatUIStore').then(({ useChatUIStore }) => {
  useChatUIStore.getState().showInsufficientGems(
    { required: errorData.required ?? getGemCost(GemTransactionReason.CHAT_MESSAGE) ?? 0, current: errorData.current ?? 0 },
    { sessionId, content, mentionedCharacter, forceAdvanceEvent }, // 출석 젬을 받은 뒤 한 번 다시 보낸다
  );
});