import { AppstoreOutlined, CheckOutlined, CloseOutlined, CopyOutlined, DeleteOutlined, DownOutlined, EditOutlined, EyeInvisibleOutlined, EyeOutlined, FileTextOutlined, FilterOutlined, FullscreenOutlined, LeftOutlined, PlusOutlined, ReloadOutlined, RightOutlined, SearchOutlined, SendOutlined, SettingOutlined, ThunderboltOutlined, UpOutlined } from '@ant-design/icons';
import { Alert, App, Button, Checkbox, Drawer, Dropdown, Input, Modal, Select, Spin, Tabs, Tag, Typography, type MenuProps } from 'antd';
import type { TextAreaRef } from 'antd/es/input/TextArea';
import { Suspense, lazy, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ClipboardEvent, type FocusEvent, type KeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react';
import { createPortal } from 'react-dom';
import { useParams } from 'react-router-dom';
import { FullscreenPreviewModal } from '../../../components/previewer';
import { BaseballTicketBayPlayAppView } from '../../../views/play/apps/baseball-ticket-bay/BaseballTicketBayPlayAppView';
import { EReaderAppView } from '../../../views/play/apps/e-reader/EReaderAppView';
import {
  findReadyPlayAppEntryById,
  getReadyPlayAppEntries,
  getSupportedPlayAppEnvironments,
  isPlayAppSupportedInEnvironment,
  type PlayAppEntry,
  type PlayAppEnvironment,
} from '../../../views/play/apps/apps/appsRegistry';
import { PhotoPuzzleAppView } from '../../../views/play/apps/photo-puzzle/PhotoPuzzleAppView';
import { PhotoPrismAppView } from '../../../views/play/apps/photoprism/PhotoPrismAppView';
import { TetrisAppView } from '../../../views/play/apps/tetris/TetrisAppView';
import { TheQuestAppView } from '../../../views/play/apps/the-quest/TheQuestAppView';
import { SharedResourceManagementPage } from '../SharedResourceManagementPage';
import { SharedAppSettingsPage } from '../SharedAppSettingsPage';
import { TokenSettingManagementPage } from '../TokenSettingManagementPage';
import { ServerCommandPage } from '../../../features/serverCommand';
import { fetchServerCommands } from '../../../features/serverCommand/api';
import type { ServerCommandItem } from '../../../features/serverCommand/types';
import { saveAppConfigToServer, setStoredAppConfig, useAppConfig } from '../appConfig';
import { useChatTypeRegistry } from '../chatTypeAccess';
import {
  resolveChatRoomContextSettings,
  resolveChatTypeDefaultContextIds,
  upsertChatRoomContextSettings,
  useChatContextSettingsRegistry,
} from '../chatContextSettingsAccess';
import { ChatPromptCard, buildPromptTargetSignature, type PromptDraftSelection, type PromptSubmitPayload } from '../mainChatPanel/ChatPromptCard';
import { ChatPreviewBody, type ChatPreviewTarget } from '../mainChatPanel/ChatPreviewBody';
import {
  cancelChatShareRequest,
  ChatApiError,
  clearChatShareConversationRoom,
  completeChatShareManualBadge,
  fetchChatShareSnapshot,
  getStoredChatShareAccessPin,
  resolveChatWebSocketUrl,
  retryChatShareRequest,
  saveChatShareRoomSettings,
  setStoredChatShareAccessPin,
  submitChatShareMessage,
  submitChatSharePrompt,
  uploadChatShareComposerFile,
  type ChatShareSnapshot,
} from '../mainChatPanel/chatUtils';
import { extractAttachmentPreviewUrls, extractChatMessageParts } from '../mainChatPanel/messageParts';
import { stripHiddenPreviewTags } from '../mainChatPanel/previewMarkers';
import { extractPreviewItems, type PreviewItem } from '../mainChatPanel/previewItems';
import { buildChatPath, buildPlayAppPath } from '../routes';
import type { PreviewKind } from '../mainChatPanel/previewKind';
import { normalizeChatResourceUrl } from '../mainChatPanel/chatResourceUrl';
import type { ChatComposerAttachment, ChatConversationRequest, ChatMessage, ChatMessagePart, ChatServerEvent } from '../mainChatPanel/types';
import { isPromptResolved } from '../mainChatPanel/promptState';
import { sendClientNotification, shouldFallbackToLocalNotification, showLocalClientNotification } from '../notificationApi';
import { copyTextToClipboard } from '../../../utils/clipboard';
import { applyViewportCssVars } from '../viewportCssVars';
import { createInstallManifestObjectUrl, swapInstallDocumentMetadata } from '../pwa/installManifest';
import { getSavedNotificationDeviceId } from '../notificationIdentity';
import { ensureWebPushSubscriptionRegistered, syncExistingWebPushSubscriptionRegistration } from '../webPushRegistration';
import '../mainChatPanel/styles/MainChatPanel.conversation.css';
import '../mainChatPanel/styles/MainChatPanel.preview-runtime.css';
import './ChatSharePage.css';

const { Paragraph, Text, Title } = Typography;

const CHAT_API_RESOURCE_ROUTE_PREFIX = '/api/chat/resources/';
const CHAT_PUBLIC_ROUTE_PREFIX = '/.codex_chat/';
const CHAT_PUBLIC_DOT_CODEX_PREFIX = '/public/.codex_chat/';
const RESOURCE_MANAGER_PREVIEW_ROUTE_PREFIX = '/api/resource-manager/preview/';
const RESOURCE_MANAGER_ROOT_PREFIX = 'resource/';
const SHARE_COMPOSER_VIEWPORT_COMPACT_THRESHOLD_PX = 24;
const SHARE_ACCESS_PIN_MAX_LENGTH = 4;
const SHARE_PROCESSING_CLOCK_INTERVAL_MS = 60 * 1000;
const SHARE_TOKEN_USAGE_CLOCK_INTERVAL_MS = 1000;
const SHARE_EXPIRY_CLOCK_INTERVAL_MS = 60 * 1000;
const SHARE_IMMEDIATE_SEND_PINNED_STORAGE_KEY = 'codex-live-share-immediate-send-pinned-by-token';
const SHARE_IMMEDIATE_SEND_TOGGLE_HOLD_MS = 1000;
const SHARE_ACCESS_PIN_PROMPT_TTL_OPTIONS = [
  { value: 'always', label: '매번 묻기', minutes: 0 },
  { value: '5', label: '5분 유지', minutes: 5 },
  { value: '30', label: '30분 유지', minutes: 30 },
  { value: '60', label: '1시간 유지', minutes: 60 },
  { value: '180', label: '3시간 유지', minutes: 180 },
  { value: '1440', label: '24시간 유지', minutes: 1440 },
] as const;

type SharePreviewFetchError = Error & { status?: number };

type ShareRequestCardMode = 'question-only' | 'answer-only' | 'full';

type ShareRenderedMessage = {
  visibleText: string;
  promptParts: Extract<ChatMessagePart, { type: 'prompt' }>[];
  diffBlocks: string[];
};

type ShareMessageRenderPayload = ShareRenderedMessage & {
  previewItems: PreviewItem[];
};

type ShareExpandMode = 'latest' | 'pending' | 'all';
type PendingSharePromptSelection = PromptDraftSelection & {
  status: 'draft' | 'submitted';
};
type ShareProgramTarget = {
  key: string;
  label: string;
  url: string;
  kind: PreviewKind;
  meta?: string;
  appId?: string;
};
type ShareAppEnvironment = PlayAppEnvironment;
type ShareSearchResult = {
  key: string;
  title: string;
  description: string;
  category: 'request' | 'response' | 'resource' | 'activity';
  icon?: ReactNode;
  usageBadge?: string | null;
  requestId?: string;
  resource?: ShareProgramTarget | null;
  appEntry?: PlayAppEntry | null;
  scrollTarget?: {
    type: 'request' | 'activity' | 'response' | 'prompt';
    value: string;
  };
};
type ShareSearchPanelMode = 'all' | 'apps';
type ShareWorkServerVersionStatus = 'latest' | 'unknown' | 'update-available' | 'build-required';
type ClientNotificationPermissionState = 'unsupported' | 'default' | 'granted' | 'denied';
type ShareNotificationStatusTone = 'success' | 'warning' | 'default';
type ShareNotificationClientStatus = {
  roomLabel: string;
  appLabel: string;
  permissionLabel: string;
  registrationLabel: string;
  summaryLabel: string;
  tone: ShareNotificationStatusTone;
};

const LazyTextMemoWidget = lazy(async () => {
  const module = await import('../../../widgets/text-memo-widget');
  return { default: module.TextMemoWidget };
});

function normalizeAccessPinInput(value: string) {
  return value.replace(/\D+/gu, '').slice(0, SHARE_ACCESS_PIN_MAX_LENGTH);
}

function resolveShareConversationRequestSortKey(request: ChatConversationRequest) {
  const userMessageId = typeof request.userMessageId === 'number' && Number.isFinite(request.userMessageId)
    ? request.userMessageId
    : null;

  if (userMessageId != null) {
    return userMessageId;
  }

  const responseMessageId = typeof request.responseMessageId === 'number' && Number.isFinite(request.responseMessageId)
    ? request.responseMessageId
    : null;

  if (responseMessageId != null) {
    return responseMessageId;
  }

  const createdAt = Date.parse(request.createdAt?.trim() ?? '');
  return Number.isFinite(createdAt) ? createdAt : null;
}

function compareShareConversationRequests(left: ChatConversationRequest, right: ChatConversationRequest) {
  const leftSortKey = resolveShareConversationRequestSortKey(left);
  const rightSortKey = resolveShareConversationRequestSortKey(right);

  if (leftSortKey != null && rightSortKey != null && leftSortKey !== rightSortKey) {
    return leftSortKey - rightSortKey;
  }

  const leftCreatedAt = Date.parse(left.createdAt?.trim() ?? '');
  const rightCreatedAt = Date.parse(right.createdAt?.trim() ?? '');
  if (Number.isFinite(leftCreatedAt) && Number.isFinite(rightCreatedAt) && leftCreatedAt !== rightCreatedAt) {
    return leftCreatedAt - rightCreatedAt;
  }

  return left.requestId.localeCompare(right.requestId, 'ko');
}

function isSnapshotDeferrableFocusTarget(target: EventTarget | null) {
  if (!(target instanceof HTMLElement)) {
    return false;
  }

  const tagName = target.tagName.toLowerCase();
  if (tagName === 'textarea') {
    return true;
  }

  if (tagName === 'input') {
    const inputType = target.getAttribute('type')?.toLowerCase() ?? 'text';
    return !['button', 'checkbox', 'file', 'hidden', 'radio', 'range', 'reset', 'submit'].includes(inputType);
  }

  return target.isContentEditable;
}

function resolveAccessPinPromptTtlMinutes(value?: number | null) {
  if (value == null) {
    return 0;
  }

  return Number.isFinite(value) ? Math.max(0, Number(value)) : 0;
}

function resolveAccessPinPromptTtlOptionValue(value?: number | null) {
  const normalizedValue = resolveAccessPinPromptTtlMinutes(value);
  return SHARE_ACCESS_PIN_PROMPT_TTL_OPTIONS.find((item) => item.minutes === normalizedValue)?.value ?? 'always';
}

function resolveAccessPinPromptTtlLabel(value?: number | null) {
  const option = SHARE_ACCESS_PIN_PROMPT_TTL_OPTIONS.find((item) => item.minutes === resolveAccessPinPromptTtlMinutes(value));
  return option?.label ?? '매번 묻기';
}

function parseAccessPinPromptTtlOptionValue(value: string) {
  const matchedOption = SHARE_ACCESS_PIN_PROMPT_TTL_OPTIONS.find((item) => item.value === value);
  return matchedOption?.minutes ?? null;
}

function readStoredShareImmediateSendPinnedByToken() {
  if (typeof window === 'undefined') {
    return {} as Record<string, boolean>;
  }

  try {
    const raw = window.localStorage.getItem(SHARE_IMMEDIATE_SEND_PINNED_STORAGE_KEY);

    if (!raw) {
      return {} as Record<string, boolean>;
    }

    const parsed = JSON.parse(raw) as Record<string, unknown>;

    return Object.entries(parsed).reduce<Record<string, boolean>>((result, [token, isPinned]) => {
      const normalizedToken = String(token ?? '').trim();

      if (normalizedToken && typeof isPinned === 'boolean') {
        result[normalizedToken] = isPinned;
      }

      return result;
    }, {});
  } catch {
    return {} as Record<string, boolean>;
  }
}

function writeStoredShareImmediateSendPinnedByToken(nextMap: Record<string, boolean>) {
  if (typeof window === 'undefined') {
    return;
  }

  const normalizedMap = Object.entries(nextMap).reduce<Record<string, boolean>>((result, [token, isPinned]) => {
    const normalizedToken = String(token ?? '').trim();

    if (normalizedToken && typeof isPinned === 'boolean') {
      result[normalizedToken] = isPinned;
    }

    return result;
  }, {});

  window.localStorage.setItem(SHARE_IMMEDIATE_SEND_PINNED_STORAGE_KEY, JSON.stringify(normalizedMap));
}

function getClientNotificationPermission(): ClientNotificationPermissionState {
  if (
    typeof window === 'undefined'
    || typeof Notification === 'undefined'
    || typeof navigator === 'undefined'
    || !('serviceWorker' in navigator)
    || !('PushManager' in window)
  ) {
    return 'unsupported';
  }

  if (Notification.permission === 'granted') {
    return 'granted';
  }

  if (Notification.permission === 'denied') {
    return 'denied';
  }

  return 'default';
}

function hasSecureOrigin() {
  if (typeof window === 'undefined') {
    return false;
  }

  return window.isSecureContext || window.location.hostname === 'localhost';
}

function isStandaloneDisplayMode() {
  if (typeof window === 'undefined') {
    return false;
  }

  return (
    window.matchMedia?.('(display-mode: standalone)').matches === true ||
    (window.navigator as Navigator & { standalone?: boolean }).standalone === true
  );
}

function isAppleMobileDevice() {
  if (typeof navigator === 'undefined') {
    return false;
  }

  return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}

async function getPushServiceWorkerRegistration() {
  if (typeof navigator === 'undefined' || !('serviceWorker' in navigator)) {
    return null;
  }

  const resolveUsableRegistration = async (registration: ServiceWorkerRegistration | null | undefined) => {
    if (!registration) {
      return null;
    }

    if (registration.active || registration.waiting) {
      return registration;
    }

    const installingWorker = registration.installing;

    if (!installingWorker) {
      return registration;
    }

    await new Promise<void>((resolve) => {
      let completed = false;

      const finish = () => {
        if (completed) {
          return;
        }

        completed = true;
        window.clearTimeout(timeoutId);
        installingWorker.removeEventListener('statechange', onStateChange);
        resolve();
      };

      const onStateChange = () => {
        if (
          installingWorker.state === 'activated'
          || installingWorker.state === 'installed'
          || Boolean(registration.active)
          || Boolean(registration.waiting)
        ) {
          finish();
        }
      };

      const timeoutId = window.setTimeout(finish, 5000);
      installingWorker.addEventListener('statechange', onStateChange);
      onStateChange();
    });

    return registration.active || registration.waiting ? registration : registration;
  };

  const existing = await navigator.serviceWorker.getRegistration();

  if (existing) {
    return (await resolveUsableRegistration(existing)) ?? existing;
  }

  const scoped = await navigator.serviceWorker.getRegistration('/');

  if (scoped) {
    return (await resolveUsableRegistration(scoped)) ?? scoped;
  }

  const knownRegistrations = await navigator.serviceWorker.getRegistrations();

  for (const registration of knownRegistrations) {
    const usableRegistration = await resolveUsableRegistration(registration);

    if (usableRegistration) {
      return usableRegistration;
    }
  }

  const serviceWorkerUrl = import.meta.env.DEV ? '/dev-sw.js?dev-sw' : '/sw.js';
  const resolvedServiceWorkerUrl =
    typeof window !== 'undefined' ? new URL(serviceWorkerUrl, window.location.href).toString() : serviceWorkerUrl;

  try {
    const registration = import.meta.env.DEV
      ? await navigator.serviceWorker.register(resolvedServiceWorkerUrl, { type: 'module', scope: '/', updateViaCache: 'none' })
        .catch(() => navigator.serviceWorker.register(resolvedServiceWorkerUrl, { scope: '/', updateViaCache: 'none' }))
      : await navigator.serviceWorker.register(resolvedServiceWorkerUrl);
    const usableRegistration = await resolveUsableRegistration(registration);

    if (usableRegistration) {
      return usableRegistration;
    }
  } catch {
    // Fall through to ready/getRegistrations checks below.
  }

  try {
    const readyRegistration = await Promise.race([
      navigator.serviceWorker.ready,
      new Promise<null>((resolve) => {
        window.setTimeout(() => resolve(null), 5000);
      }),
    ]);

    if (readyRegistration) {
      return (await resolveUsableRegistration(readyRegistration)) ?? readyRegistration;
    }
  } catch {
    // Ignore and try known registrations one more time.
  }

  const latestRegistrations = await navigator.serviceWorker.getRegistrations();

  for (const registration of latestRegistrations) {
    const usableRegistration = await resolveUsableRegistration(registration);

    if (usableRegistration) {
      return usableRegistration;
    }
  }

  return null;
}

function getClientNotificationPermissionLabel(permission: ClientNotificationPermissionState) {
  switch (permission) {
    case 'granted':
      return '권한 허용';
    case 'denied':
      return '권한 차단';
    case 'unsupported':
      return '브라우저 미지원';
    default:
      return '권한 확인 필요';
  }
}

function buildShareNotificationClientStatus(args: {
  roomEnabled: boolean;
  appEnabled: boolean;
  permission: ClientNotificationPermissionState;
  registrationReady: boolean;
}) {
  const roomLabel = args.roomEnabled ? '방 On' : '방 Off';
  const appLabel = args.appEnabled ? '앱 On' : '앱 Off';
  const permissionLabel = getClientNotificationPermissionLabel(args.permission);
  const registrationLabel = args.registrationReady ? '기기 등록됨' : '기기 미등록';

  if (!args.roomEnabled) {
    return {
      roomLabel,
      appLabel,
      permissionLabel,
      registrationLabel,
      summaryLabel: '이 채팅방 알림 꺼짐',
      tone: 'default',
    } satisfies ShareNotificationClientStatus;
  }

  if (!args.appEnabled) {
    return {
      roomLabel,
      appLabel,
      permissionLabel,
      registrationLabel,
      summaryLabel: '앱 전체 알림 차단',
      tone: 'warning',
    } satisfies ShareNotificationClientStatus;
  }

  if (!hasSecureOrigin()) {
    return {
      roomLabel,
      appLabel,
      permissionLabel,
      registrationLabel,
      summaryLabel: 'HTTPS 환경 필요',
      tone: 'warning',
    } satisfies ShareNotificationClientStatus;
  }

  if (isAppleMobileDevice() && !isStandaloneDisplayMode()) {
    return {
      roomLabel,
      appLabel,
      permissionLabel,
      registrationLabel,
      summaryLabel: 'iPhone PWA 실행 필요',
      tone: 'warning',
    } satisfies ShareNotificationClientStatus;
  }

  if (args.permission !== 'granted') {
    return {
      roomLabel,
      appLabel,
      permissionLabel,
      registrationLabel,
      summaryLabel: args.permission === 'denied' ? '브라우저 권한 차단' : permissionLabel,
      tone: 'warning',
    } satisfies ShareNotificationClientStatus;
  }

  if (!args.registrationReady) {
    return {
      roomLabel,
      appLabel,
      permissionLabel,
      registrationLabel,
      summaryLabel: '현재 기기 등록 필요',
      tone: 'warning',
    } satisfies ShareNotificationClientStatus;
  }

  return {
    roomLabel,
    appLabel,
    permissionLabel,
    registrationLabel,
    summaryLabel: '수신 가능',
    tone: 'success',
  } satisfies ShareNotificationClientStatus;
}

function buildAttachmentMessageBlock(attachments: ChatComposerAttachment[]) {
  if (attachments.length === 0) {
    return '';
  }

  return ['첨부 파일:', ...attachments.map((attachment) => `- ${attachment.name}: ${attachment.publicUrl || attachment.path}`)].join('\n');
}

function buildOutgoingShareMessageText(text: string, attachments: ChatComposerAttachment[]) {
  const trimmedText = text.trim();
  const attachmentBlock = buildAttachmentMessageBlock(attachments);

  if (trimmedText && attachmentBlock) {
    return `${trimmedText}\n\n${attachmentBlock}`;
  }

  return trimmedText || attachmentBlock;
}

function resolveShareComposerPasteFiles(clipboardData: DataTransfer) {
  const clipboardItemFiles = Array.from(clipboardData.items ?? [])
    .filter((item) => item.kind === 'file')
    .map((item) => item.getAsFile())
    .filter((file): file is File => Boolean(file) && file.size > 0);
  const files = Array.from(clipboardData.files ?? []).filter((file) => file.size > 0);
  const candidateFiles = clipboardItemFiles.length > 0 ? clipboardItemFiles : files;

  if (candidateFiles.length > 0) {
    return candidateFiles;
  }

  return [];
}

const COLLAPSIBLE_TEXT_MAX_LENGTH = 720;
const COLLAPSIBLE_TEXT_MAX_LINES = 8;
const DIFF_CODE_BLOCK_PATTERN = /```diff[^\n]*\n([\s\S]*?)```/g;
const SCROLL_JUMP_HIDE_THRESHOLD = 36;
const SCROLL_JUMP_MIN_OVERFLOW = 96;
const SCROLL_JUMP_DIRECTION_THRESHOLD = 2;
const SCROLL_JUMP_IDLE_HIDE_DELAY_MS = 180;
const PROGRAM_MINIMIZED_VIEWPORT_PADDING = 12;
const PROGRAM_MINIMIZED_DEFAULT_WIDTH = 176;
const PROGRAM_MINIMIZED_DEFAULT_HEIGHT = 58;
const SHARE_PROGRAM_MODAL_Z_INDEX = 1750;
const SHARE_PROGRAM_MINIMIZED_Z_INDEX = SHARE_PROGRAM_MODAL_Z_INDEX + 5;
const MOBILE_INPUT_VIEWPORT_TOP_PADDING_PX = 6;
const MOBILE_INPUT_VIEWPORT_BOTTOM_PADDING_PX = 8;
const MOBILE_INPUT_VIEWPORT_SYNC_RETRY_DELAYS_MS = [180, 360] as const;
const renderAccessPinVisibilityIcon = (visible: boolean) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />);

function areStringListsEqual(left: string[], right: string[]) {
  return left.length === right.length && left.every((value, index) => value === right[index]);
}

function resolveShareRoomDefaultContextIds(
  roomContextSettings: ReturnType<typeof resolveChatRoomContextSettings>,
  chatTypeDefaults: Parameters<typeof resolveChatTypeDefaultContextIds>[0],
  chatTypeId: string | null | undefined,
) {
  const inheritedDefaultContextIds = resolveChatTypeDefaultContextIds(chatTypeDefaults, chatTypeId);
  const roomDefaultContextIds = roomContextSettings?.defaultContextIds ?? [];

  return roomDefaultContextIds.length > 0 ? roomDefaultContextIds : inheritedDefaultContextIds;
}
const SHARE_EXPAND_MODE_LABELS: Record<ShareExpandMode, string> = {
  latest: '마지막건',
  pending: '처리중·미확인',
  all: '전체',
};
const TOKEN_USAGE_PERIODS = [
  { key: '7d', label: '1주일', windowMs: 7 * 24 * 60 * 60 * 1000 },
  { key: '5h', label: '5시간', windowMs: 5 * 60 * 60 * 1000 },
] as const;
const SHARE_APP_ENVIRONMENT_OPTIONS: Array<{
  key: ShareAppEnvironment;
  label: string;
  origin: string;
}> = [
  { key: 'preview', label: 'preview', origin: 'https://preview.sm-home.cloud' },
  { key: 'test', label: 'test', origin: 'https://test.sm-home.cloud' },
  { key: 'prod', label: 'prod', origin: 'https://sm-home.cloud' },
] as const;
const SHARE_APP_LAUNCH_USAGE_STORAGE_KEY = 'chat-share-page:app-launch-usage:v1';
const CHAT_SHARE_INSTALL_NAME = '리소스 공유 채팅방';
const CHAT_SHARE_INSTALL_SHORT_NAME = '공유채팅';
const CHAT_SHARE_INSTALL_THEME_COLOR = '#165dff';

type TokenUsagePeriodKey = (typeof TOKEN_USAGE_PERIODS)[number]['key'];

type TokenUsageWindowSummary = {
  totalUsedTokens: number;
  inputTokens: number;
  outputTokens: number;
  cachedTokens: number;
  reasoningTokens: number;
  requestCount: number;
  percentage: number | null;
  remainingTokens: number | null;
  windowStartedAt: string | null;
  nextUsageDropAt: string | null;
  fullResetAt: string | null;
  nextResetTokens: number;
};
const APPS_LAUNCHER_SEARCH_TERMS = ['apps', 'app', '앱', '프로그램', '실행', '빠른 실행'];
const SHARE_MANAGEMENT_APP_OPTIONS = [
  {
    value: 'text-memo-widget',
    label: '메모',
    description: '공유채팅 안에서 메모 컴포넌트를 바로 실행',
    icon: <FileTextOutlined />,
    usagePriority: 70,
  },
  {
    value: 'token-setting',
    label: '토큰관리 설정',
    description: '토큰 설정 목록과 상세 편집 접근',
    icon: <SettingOutlined />,
    usagePriority: 55,
  },
  {
    value: 'shared-resource',
    label: '공유 리소스 관리',
    description: '공유 링크와 권한, 활동 이력 관리',
    icon: <AppstoreOutlined />,
    usagePriority: 50,
  },
  {
    value: 'app-settings',
    label: '앱 설정',
    description: '헤더 설정, 알림, 업데이트 화면 접근',
    icon: <SettingOutlined />,
    usagePriority: 75,
  },
  {
    value: 'server-command',
    label: '서버관리',
    description: '여러 서버 상태 확인과 재기동 관리 화면 접근',
    icon: <ReloadOutlined />,
    usagePriority: 95,
  },
] as const;

type ShareAppLaunchUsageMap = Record<string, { count: number; lastOpenedAt: number }>;

function readShareAppLaunchUsage(): ShareAppLaunchUsageMap {
  if (typeof window === 'undefined') {
    return {};
  }

  try {
    const rawValue = window.localStorage.getItem(SHARE_APP_LAUNCH_USAGE_STORAGE_KEY);
    if (!rawValue) {
      return {};
    }

    const parsedValue = JSON.parse(rawValue) as unknown;
    if (!parsedValue || typeof parsedValue !== 'object') {
      return {};
    }

    return Object.entries(parsedValue as Record<string, unknown>).reduce<ShareAppLaunchUsageMap>((accumulator, [key, value]) => {
      if (!value || typeof value !== 'object') {
        return accumulator;
      }

      const count = Number((value as { count?: number }).count);
      const lastOpenedAt = Number((value as { lastOpenedAt?: number }).lastOpenedAt);
      if (!Number.isFinite(count) || count < 0 || !Number.isFinite(lastOpenedAt) || lastOpenedAt < 0) {
        return accumulator;
      }

      accumulator[key] = { count, lastOpenedAt };
      return accumulator;
    }, {});
  } catch {
    return {};
  }
}

function writeShareAppLaunchUsage(value: ShareAppLaunchUsageMap) {
  if (typeof window === 'undefined') {
    return;
  }

  try {
    window.localStorage.setItem(SHARE_APP_LAUNCH_USAGE_STORAGE_KEY, JSON.stringify(value));
  } catch {
    // Ignore storage failures and keep the UI usable.
  }
}

function resolveShareAppUsageBadge(record?: { count: number; lastOpenedAt: number } | null) {
  if (!record || record.count < 2) {
    return null;
  }

  return record.count >= 5 ? '자주 사용' : '최근 사용';
}

function compareShareAppLaunchOrder(
  leftId: string,
  rightId: string,
  leftPriority: number,
  rightPriority: number,
  usageMap: ShareAppLaunchUsageMap,
) {
  const leftUsage = usageMap[leftId];
  const rightUsage = usageMap[rightId];
  const leftCount = leftUsage?.count ?? 0;
  const rightCount = rightUsage?.count ?? 0;
  if (leftCount !== rightCount) {
    return rightCount - leftCount;
  }

  const leftLastOpenedAt = leftUsage?.lastOpenedAt ?? 0;
  const rightLastOpenedAt = rightUsage?.lastOpenedAt ?? 0;
  if (leftLastOpenedAt !== rightLastOpenedAt) {
    return rightLastOpenedAt - leftLastOpenedAt;
  }

  if (leftPriority !== rightPriority) {
    return rightPriority - leftPriority;
  }

  return leftId.localeCompare(rightId, 'ko');
}

function buildShareAllowedAppIdSet(allowedAppIds: string[] | null | undefined, permissions: string[] | null | undefined) {
  const normalizedAllowedAppIds = new Set(
    (allowedAppIds ?? [])
      .map((item) => item.trim().toLowerCase())
      .filter(Boolean),
  );
  const normalizedPermissions = new Set(
    (permissions ?? [])
      .map((item) => item.trim().toLowerCase())
      .filter(Boolean),
  );

  return normalizedAllowedAppIds;
}

function buildSharePromptAnchorKey(messageId: number, promptIndex: number) {
  return `${messageId}:${promptIndex}`;
}

function scrollToShareAnchorElement(element: HTMLElement | null | undefined) {
  if (!element) {
    return false;
  }

  element.scrollIntoView({
    behavior: 'smooth',
    block: 'start',
    inline: 'nearest',
  });
  return true;
}

function buildPhotoPrismProgramTarget(): ShareProgramTarget {
  return {
    key: 'launcher:photoprism',
    label: 'PhotoPrism',
    url: '/play/apps?app=photoprism&launchContext=embedded',
    kind: 'document',
    meta: '임시 프로그램 실행',
    appId: 'photoprism',
  };
}

function buildPlayAppProgramTarget(appId: string, label: string): ShareProgramTarget {
  return {
    key: `launcher:${appId}`,
    label,
    url: buildPlayAppPath(appId, 'embedded'),
    kind: 'document',
    meta: '허용된 Apps 실행',
    appId,
  };
}

function buildShareManagementProgramTarget(appId: string, label: string): ShareProgramTarget {
  return {
    key: `management:${appId}`,
    label,
    url: buildChatPath('live'),
    kind: 'document',
    meta: '공유채팅 관리 앱 실행',
    appId,
  };
}

function resolveShareWorkServerVersionStatus(item: ServerCommandItem | null): ShareWorkServerVersionStatus {
  if (!item) {
    return 'unknown';
  }

  if (item.buildRequired) {
    return 'build-required';
  }

  if (item.updateAvailable) {
    return 'update-available';
  }

  return 'latest';
}

function resolveShareWorkServerVersionLabel(item: ServerCommandItem | null) {
  const latestVersion = item?.latestVersion?.trim();
  const runningVersion = item?.runningVersion?.trim();

  if (latestVersion) {
    return latestVersion;
  }

  if (runningVersion) {
    return runningVersion;
  }

  return '확인 필요';
}

function resolveShareWorkServerStatusLabel(item: ServerCommandItem | null) {
  const status = resolveShareWorkServerVersionStatus(item);

  if (status === 'build-required') {
    return '빌드 필요';
  }

  if (status === 'update-available') {
    return '반영 대기';
  }

  if (status === 'latest') {
    return '최신';
  }

  return '확인 필요';
}

function resolveShareWorkServerVersionDescription(item: ServerCommandItem | null) {
  if (!item) {
    return 'WORK 서버 상태를 아직 확인하지 못했습니다.';
  }

  if (item.buildRequired) {
    return '소스 변경이 있어 최신 빌드가 더 필요합니다.';
  }

  if (item.updateAvailable) {
    return '새 빌드는 준비됐고 현재 런타임 반영만 남아 있습니다.';
  }

  return '무중단 배포 예약과 최신 런타임 상태를 확인합니다.';
}

function buildPlayAppEnvironmentUrl(appId: string, environment: ShareAppEnvironment) {
  const origin = SHARE_APP_ENVIRONMENT_OPTIONS.find((item) => item.key === environment)?.origin ?? SHARE_APP_ENVIRONMENT_OPTIONS[0].origin;
  return new URL(buildPlayAppPath(appId, 'embedded'), origin).toString();
}

function buildSharePlayAppInstallPath(appId: string, shareToken?: string | null) {
  const installPath = new URL(buildPlayAppPath(appId), 'https://preview.sm-home.cloud');
  const normalizedShareToken = shareToken?.trim() ?? '';

  if (appId === 'e-reader' && normalizedShareToken) {
    installPath.searchParams.set('shareToken', normalizedShareToken);
  }

  return `${installPath.pathname}${installPath.search}${installPath.hash}`;
}

function resolveSharePlayAppInstallThemeColor(appId: string) {
  switch (appId) {
    case 'baseball-ticket-bay':
      return '#1b3f91';
    case 'photoprism':
      return '#0f766e';
    case 'photo-puzzle':
      return '#d97706';
    case 'the-quest':
      return '#7c3aed';
    case 'tetris':
      return '#0f172a';
    default:
      return '#165dff';
  }
}

function resolveShareAppEnvironmentFromOrigin(origin?: string | null): ShareAppEnvironment {
  const normalizedOrigin = origin?.trim().toLowerCase();

  if (!normalizedOrigin) {
    return 'preview';
  }

  return SHARE_APP_ENVIRONMENT_OPTIONS.find((item) => item.origin.toLowerCase() === normalizedOrigin)?.key ?? 'preview';
}

function buildPlayAppEnvironmentTarget(
  appId: string,
  label: string,
  environment: ShareAppEnvironment,
): ShareProgramTarget {
  const environmentLabel = SHARE_APP_ENVIRONMENT_OPTIONS.find((item) => item.key === environment)?.label ?? environment;

  return {
    key: `launcher:${environment}:${appId}`,
    label,
    url: buildPlayAppEnvironmentUrl(appId, environment),
    kind: 'document',
    meta: `허용된 Apps 실행 · ${environmentLabel}`,
    appId,
  };
}

function shouldRenderSharePlayAppInline(target: ShareProgramTarget | null | undefined) {
  if (!target?.appId || !findReadyPlayAppEntryById(target.appId)) {
    return false;
  }

  if (typeof window === 'undefined') {
    return true;
  }

  try {
    return new URL(target.url, window.location.origin).origin === window.location.origin;
  } catch {
    return true;
  }
}

function resolveSupportedEnvironmentSummary(entry: PlayAppEntry) {
  return getSupportedPlayAppEnvironments(entry).join(', ');
}

function resolveFirstSupportedShareAppEnvironment(entries: PlayAppEntry[]) {
  for (const option of SHARE_APP_ENVIRONMENT_OPTIONS) {
    if (entries.some((entry) => isPlayAppSupportedInEnvironment(entry, option.key))) {
      return option.key;
    }
  }

  return 'preview';
}

function renderEmbeddedSharePlayApp(appId: string | undefined, onBack: () => void, shareToken?: string | null) {
  if (appId === 'photoprism') {
    return <PhotoPrismAppView onBack={onBack} launchContext="embedded" />;
  }

  if (appId === 'baseball-ticket-bay') {
    return <BaseballTicketBayPlayAppView onBack={onBack} launchContext="embedded" shareToken={shareToken} />;
  }

  if (appId === 'e-reader') {
    return <EReaderAppView onBack={onBack} launchContext="embedded" shareToken={shareToken} />;
  }

  if (appId === 'photo-puzzle') {
    return <PhotoPuzzleAppView onBack={onBack} launchContext="embedded" />;
  }

  if (appId === 'tetris') {
    return <TetrisAppView onBack={onBack} launchContext="embedded" />;
  }

  if (appId === 'the-quest') {
    return <TheQuestAppView onBack={onBack} launchContext="embedded" />;
  }

  return null;
}

function formatTimeLabel(value?: string | null) {
  const normalizedValue = value?.trim();

  if (!normalizedValue) {
    return '';
  }

  const parsedDate = new Date(normalizedValue);

  if (Number.isNaN(parsedDate.getTime())) {
    return normalizedValue;
  }

  return parsedDate.toLocaleString('ko-KR', {
    hour12: false,
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
}

function formatRemainingTimeLabel(expiresAt: string, nowMs: number) {
  const expiresAtMs = new Date(expiresAt).getTime();

  if (!Number.isFinite(expiresAtMs)) {
    return '';
  }

  const diffMs = expiresAtMs - nowMs;

  if (diffMs <= 0) {
    return '남은시간 없음';
  }

  const totalMinutes = Math.floor(diffMs / (60 * 1000));
  const days = Math.floor(totalMinutes / (24 * 60));
  const hours = Math.floor((totalMinutes % (24 * 60)) / 60);
  const minutes = totalMinutes % 60;
  const parts: string[] = [];

  if (days > 0) {
    parts.push(`${days}일`);
  }

  if (hours > 0) {
    parts.push(`${hours}시간`);
  }

  if (minutes > 0 || parts.length === 0) {
    parts.push(`${minutes}분`);
  }

  return `남은시간 ${parts.join(' ')}`;
}

function formatCountdownLabel(targetAt: string | null | undefined, nowMs: number) {
  const normalizedValue = targetAt?.trim();

  if (!normalizedValue) {
    return '예정 없음';
  }

  const targetMs = new Date(normalizedValue).getTime();

  if (!Number.isFinite(targetMs)) {
    return '시간 미기록';
  }

  const diffMs = Math.max(0, targetMs - nowMs);
  const totalSeconds = Math.floor(diffMs / 1000);
  const days = Math.floor(totalSeconds / (24 * 60 * 60));
  const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60));
  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
  const seconds = totalSeconds % 60;
  const timeLabel = [hours, minutes, seconds].map((value) => String(value).padStart(2, '0')).join(':');

  if (days > 0) {
    return `${days}일 ${timeLabel}`;
  }

  return timeLabel;
}

function formatDurationMinutesLabel(totalMinutes: number | null | undefined) {
  const normalizedMinutes = Number(totalMinutes ?? 0);

  if (!Number.isFinite(normalizedMinutes)) {
    return '';
  }

  if (normalizedMinutes <= 0) {
    return '무제한';
  }

  const roundedMinutes = Math.max(1, Math.round(normalizedMinutes));
  const days = Math.floor(roundedMinutes / (24 * 60));
  const hours = Math.floor((roundedMinutes % (24 * 60)) / 60);
  const minutes = roundedMinutes % 60;
  const parts: string[] = [];

  if (days > 0) {
    parts.push(`${days}일`);
  }

  if (hours > 0) {
    parts.push(`${hours}시간`);
  }

  if (minutes > 0 || parts.length === 0) {
    parts.push(`${minutes}분`);
  }

  return parts.join(' ');
}

function formatShareExpirySummary(expiresAt: string | null | undefined, nowMs: number) {
  const normalizedValue = expiresAt?.trim();

  if (!normalizedValue) {
    return '사용기간 제한 없음';
  }

  const formattedTime = formatTimeLabel(normalizedValue);
  const remainingTime = formatRemainingTimeLabel(normalizedValue, nowMs);
  const baseLabel = formattedTime || normalizedValue;

  if (remainingTime) {
    return `만료 ${baseLabel} · ${remainingTime}`;
  }

  return `만료 ${baseLabel}`;
}

function resolveShareEffectiveExpiresAt(share: ChatShareSnapshot['share'] | null | undefined) {
  const explicitExpiresAt = share?.expiresAt?.trim();

  if (explicitExpiresAt) {
    return explicitExpiresAt;
  }

  const defaultExpiresInMinutes = Number(share?.tokenSetting?.defaultExpiresInMinutes ?? 0);
  const createdAtMs = Date.parse(share?.createdAt?.trim() ?? '');

  if (!Number.isFinite(defaultExpiresInMinutes) || defaultExpiresInMinutes <= 0 || !Number.isFinite(createdAtMs)) {
    return '';
  }

  return new Date(createdAtMs + defaultExpiresInMinutes * 60 * 1000).toISOString();
}

function buildAbsoluteShareUrl(path?: string | null) {
  const normalizedPath = path?.trim();

  if (!normalizedPath) {
    return '';
  }

  if (/^https?:\/\//i.test(normalizedPath)) {
    return normalizedPath;
  }

  if (typeof window === 'undefined') {
    return normalizedPath;
  }

  return new URL(normalizedPath, window.location.origin).toString();
}

function createChatShareManifestObjectUrl(pathname: string, title?: string | null) {
  const normalizedTitle = title?.trim();
  return createInstallManifestObjectUrl({
    startPath: pathname,
    scope: pathname,
    name: normalizedTitle || CHAT_SHARE_INSTALL_NAME,
    shortName: CHAT_SHARE_INSTALL_SHORT_NAME,
    description: '리소스 공유 채팅방을 홈 화면 앱으로 바로 엽니다.',
    themeColor: CHAT_SHARE_INSTALL_THEME_COLOR,
    backgroundColor: '#f4f7fb',
  });
}

function swapManifestForChatShare(manifestHref: string, title?: string | null) {
  return swapInstallDocumentMetadata({
    manifestHref,
    title: title?.trim() || CHAT_SHARE_INSTALL_NAME,
    themeColor: CHAT_SHARE_INSTALL_THEME_COLOR,
  });
}

function getShareExpandModeLabel(mode: ShareExpandMode) {
  return SHARE_EXPAND_MODE_LABELS[mode];
}

function normalizeSearchKeyword(value: string) {
  return value.trim().toLocaleLowerCase('ko-KR');
}

function formatTokenCount(value: number) {
  return Math.max(0, Math.round(Number(value) || 0)).toLocaleString('ko-KR');
}

function resolveSmallestFiniteNumber(...values: Array<number | null | undefined>) {
  const normalizedValues = values.filter((value): value is number => typeof value === 'number' && Number.isFinite(value));

  if (normalizedValues.length === 0) {
    return null;
  }

  return Math.min(...normalizedValues);
}

function resolveRequestUsageAt(request: ChatConversationRequest) {
  const candidates = [request.answeredAt, request.terminalAt, request.updatedAt, request.createdAt];

  for (const candidate of candidates) {
    const normalized = candidate?.trim();

    if (!normalized) {
      continue;
    }

    const parsed = new Date(normalized).getTime();

    if (Number.isFinite(parsed)) {
      return parsed;
    }
  }

  return 0;
}

function resolveRequestUsageTokens(request: ChatConversationRequest) {
  return Math.max(
    0,
    Math.round(
      Number(
        request.usageSnapshot?.tokenTotals?.total ??
          request.usageSnapshot?.totalTokens ??
          request.totalTokens ??
          0,
      ) || 0,
    ),
  );
}

function resolveTokenUsageWindowSummary(
  requests: ChatConversationRequest[],
  periodKey: TokenUsagePeriodKey,
  nowMs: number,
  limit: number,
): TokenUsageWindowSummary {
  const period = TOKEN_USAGE_PERIODS.find((item) => item.key === periodKey) ?? TOKEN_USAGE_PERIODS[0];
  const threshold = nowMs - period.windowMs;
  const matchingRequests = requests.filter((request) => resolveRequestUsageAt(request) >= threshold);
  const tokenAccumulator = matchingRequests.reduce(
    (accumulator, request) => {
      accumulator.totalUsedTokens += resolveRequestUsageTokens(request);
      accumulator.inputTokens += Math.max(0, Math.round(Number(request.usageSnapshot?.tokenTotals?.input ?? 0) || 0));
      accumulator.outputTokens += Math.max(0, Math.round(Number(request.usageSnapshot?.tokenTotals?.output ?? 0) || 0));
      accumulator.cachedTokens += Math.max(0, Math.round(Number(request.usageSnapshot?.tokenTotals?.cached ?? 0) || 0));
      accumulator.reasoningTokens += Math.max(0, Math.round(Number(request.usageSnapshot?.tokenTotals?.reasoning ?? 0) || 0));
      return accumulator;
    },
    {
      totalUsedTokens: 0,
      inputTokens: 0,
      outputTokens: 0,
      cachedTokens: 0,
      reasoningTokens: 0,
    },
  );
  const usageResetSchedule = matchingRequests
    .map((request) => resolveRequestUsageAt(request) + period.windowMs)
    .filter((value) => Number.isFinite(value))
    .sort((left, right) => left - right);
  const nextUsageDropAtMs = usageResetSchedule.length > 0 ? usageResetSchedule[0] : null;
  const normalizedLimit = Math.max(0, Math.round(Number(limit) || 0));
  const percentage = normalizedLimit > 0 ? Math.min(100, (tokenAccumulator.totalUsedTokens / normalizedLimit) * 100) : null;
  const remainingTokens = normalizedLimit > 0 ? Math.max(0, normalizedLimit - tokenAccumulator.totalUsedTokens) : null;
  const nextResetTokens =
    nextUsageDropAtMs == null
      ? 0
      : matchingRequests.reduce((accumulator, request) => {
          if (resolveRequestUsageAt(request) + period.windowMs !== nextUsageDropAtMs) {
            return accumulator;
          }

          return accumulator + resolveRequestUsageTokens(request);
        }, 0);

  return {
    ...tokenAccumulator,
    requestCount: matchingRequests.length,
    percentage,
    remainingTokens,
    windowStartedAt: new Date(threshold).toISOString(),
    nextUsageDropAt: nextUsageDropAtMs != null ? new Date(nextUsageDropAtMs).toISOString() : null,
    fullResetAt: usageResetSchedule.length > 0 ? new Date(usageResetSchedule[usageResetSchedule.length - 1]).toISOString() : null,
    nextResetTokens,
  };
}

function resolveTokenUsageLimitForPeriod(
  setting:
    | {
        maxTokensPer30Days: number;
        maxTokensPer7Days: number;
        maxTokensPer5Hours: number;
      }
    | null
    | undefined,
  periodKey: TokenUsagePeriodKey,
) {
  if (!setting) {
    return 0;
  }

  if (periodKey === '7d') {
    return setting.maxTokensPer7Days;
  }

  if (periodKey === '5h') {
    return setting.maxTokensPer5Hours;
  }

  return setting.maxTokensPer7Days;
}

function clampProgramMinimizedValue(value: number, min: number, max: number) {
  if (max < min) {
    return min;
  }

  return Math.min(Math.max(value, min), max);
}

function resetMobileDocumentScrollOffset() {
  if (typeof window === 'undefined' || typeof document === 'undefined') {
    return;
  }

  const documentElement = document.documentElement;
  const body = document.body;
  const visualViewport = window.visualViewport;
  const layoutScrollTop = Math.max(window.scrollY || 0, documentElement?.scrollTop || 0, body?.scrollTop || 0);
  const visualOffsetTop = Math.max(visualViewport?.offsetTop ?? 0, visualViewport?.pageTop ?? 0);

  if (layoutScrollTop <= 0 && visualOffsetTop <= 0) {
    return;
  }

  window.scrollTo(0, 0);

  if (documentElement) {
    documentElement.scrollTop = 0;
  }

  if (body) {
    body.scrollTop = 0;
  }
}

function isMobileShareInputTarget(target: EventTarget | null): target is HTMLElement {
  if (!(target instanceof HTMLElement)) {
    return false;
  }

  const inputTarget = target.closest<HTMLElement>('textarea, input, [contenteditable="true"]');
  return Boolean(inputTarget) && isSnapshotDeferrableFocusTarget(inputTarget);
}

function getDefaultProgramMinimizedPosition() {
  if (typeof window === 'undefined') {
    return { x: PROGRAM_MINIMIZED_VIEWPORT_PADDING, y: PROGRAM_MINIMIZED_VIEWPORT_PADDING };
  }

  return {
    x: Math.max(PROGRAM_MINIMIZED_VIEWPORT_PADDING, window.innerWidth - PROGRAM_MINIMIZED_DEFAULT_WIDTH - PROGRAM_MINIMIZED_VIEWPORT_PADDING),
    y: Math.max(PROGRAM_MINIMIZED_VIEWPORT_PADDING, window.innerHeight - PROGRAM_MINIMIZED_DEFAULT_HEIGHT - PROGRAM_MINIMIZED_VIEWPORT_PADDING),
  };
}

function matchesSearchKeyword(keyword: string, ...values: Array<string | null | undefined>) {
  if (!keyword) {
    return true;
  }

  return values.some((value) => normalizeSearchKeyword(value ?? '').includes(keyword));
}

function buildSharePromptSelectionKey(parentRequestId: string, sourceMessageId: number, promptIndex: number, promptTitle: string, promptSignature: string) {
  return [parentRequestId.trim(), sourceMessageId, promptIndex, promptTitle.trim(), promptSignature.trim()].join('::');
}

function extractShareMessageRenderPayload(message: ChatMessage): ShareMessageRenderPayload {
  const extracted = extractChatMessageParts(message.text);
  const promptParts = (message.parts ?? []).filter(
    (part): part is Extract<ChatMessagePart, { type: 'prompt' }> => part.type === 'prompt',
  );
  const strippedPromptText = extracted.strippedText || message.text;
  const diffBlocks = Array.from(strippedPromptText.matchAll(DIFF_CODE_BLOCK_PATTERN))
    .map((match) => match[1]?.trim())
    .filter((value): value is string => Boolean(value));
  const visibleText = stripHiddenPreviewTags(strippedPromptText.replace(DIFF_CODE_BLOCK_PATTERN, '')).trim();

  return {
    visibleText,
    promptParts:
      promptParts.length > 0
        ? promptParts
        : extracted.parts.filter((part): part is Extract<ChatMessagePart, { type: 'prompt' }> => part.type === 'prompt'),
    diffBlocks,
    previewItems: extractPreviewItems([message]),
  };
}

function resolveRenderedMessage(message: ChatMessage): ShareRenderedMessage {
  return extractShareMessageRenderPayload(message);
}

function buildVisibleMessageText(message: ChatMessage, payload?: ShareMessageRenderPayload) {
  return (payload ?? resolveRenderedMessage(message)).visibleText.trim();
}

const SHARE_ATTACHMENT_ACCEPT = 'image/*,.heic,.heif,.zip,application/zip,application/x-zip-compressed';

function isCollapsibleText(value: string) {
  const normalized = value.trim();

  if (!normalized) {
    return false;
  }

  if (normalized.length > COLLAPSIBLE_TEXT_MAX_LENGTH) {
    return true;
  }

  return normalized.split(/\r?\n/).length > COLLAPSIBLE_TEXT_MAX_LINES;
}

function isShareSendDelayError(error: unknown) {
  const message = error instanceof Error ? error.message : String(error ?? '');
  return /지연|timeout|연결/i.test(message);
}

function buildRequestAnswerText(
  request: ChatConversationRequest,
  relatedMessages: ChatMessage[],
  messageRenderPayloadById?: Map<number, ShareMessageRenderPayload>,
) {
  const relatedSegments = relatedMessages
    .filter((message) => message.author !== 'user')
    .map((message) => buildVisibleMessageText(message, messageRenderPayloadById?.get(message.id)))
    .filter(Boolean);

  if (relatedSegments.length > 0) {
    return relatedSegments.join('\n\n').trim();
  }

  return stripHiddenPreviewTags(String(request.responseText ?? '').replace(DIFF_CODE_BLOCK_PATTERN, '')).trim();
}

function replaceChatShareSnapshotRequest(snapshot: ChatShareSnapshot, nextRequest: ChatConversationRequest): ChatShareSnapshot {
  return {
    ...snapshot,
    targetRequest:
      snapshot.targetRequest.requestId === nextRequest.requestId
        ? nextRequest
        : snapshot.targetRequest,
    requests: snapshot.requests.map((request) =>
      request.requestId === nextRequest.requestId ? nextRequest : request,
    ),
  };
}

function buildShareVisibleText(text: string) {
  return stripHiddenPreviewTags(extractAttachmentPreviewUrls(text).strippedText).trim();
}

function resolvePromptParentQuestionText(request: ChatConversationRequest | null | undefined) {
  return request?.userText?.replace(/\s+/g, ' ').trim() || '';
}

function resolveShareConversationParentRequest(
  request: ChatConversationRequest | null | undefined,
  requestById: ReadonlyMap<string, ChatConversationRequest>,
) {
  const parentRequestId = request?.parentRequestId?.trim() || '';
  return parentRequestId ? requestById.get(parentRequestId) ?? null : null;
}

function buildSharePreviewItemsFromText(text: string, shareToken: string) {
  if (!shareToken) {
    return [];
  }

  return extractPreviewItems([
    {
      id: -1,
      author: 'user',
      text,
      timestamp: '',
    },
  ]).map((item) => ({
    ...item,
    url: resolveShareScopedResourceUrl(item.url, shareToken),
  }));
}

function resolveShareScopedResourceUrl(url: string, shareToken: string) {
  const normalizedShareToken = shareToken.trim();
  const normalizedUrl = normalizeChatResourceUrl(String(url ?? '').trim());
  const storedSharePin = getStoredChatShareAccessPin(normalizedShareToken);

  if (!normalizedShareToken || !normalizedUrl || typeof window === 'undefined') {
    return normalizedUrl;
  }

  try {
    const resolvedUrl = new URL(normalizedUrl, window.location.origin);
    let relativePath = '';
    const searchParams = new URLSearchParams(resolvedUrl.search);

    searchParams.delete('token');
    searchParams.delete('clientId');
    searchParams.delete('sharePin');

    if (resolvedUrl.pathname.startsWith(CHAT_API_RESOURCE_ROUTE_PREFIX)) {
      relativePath = resolvedUrl.pathname.slice(CHAT_API_RESOURCE_ROUTE_PREFIX.length);
    } else if (resolvedUrl.pathname.startsWith(CHAT_PUBLIC_DOT_CODEX_PREFIX)) {
      relativePath = resolvedUrl.pathname.slice(CHAT_PUBLIC_DOT_CODEX_PREFIX.length);
    } else if (resolvedUrl.pathname.startsWith(CHAT_PUBLIC_ROUTE_PREFIX)) {
      relativePath = resolvedUrl.pathname.slice(CHAT_PUBLIC_ROUTE_PREFIX.length);
    } else if (resolvedUrl.pathname.startsWith(RESOURCE_MANAGER_PREVIEW_ROUTE_PREFIX)) {
      const resourceRelativePath = decodeURIComponent(
        resolvedUrl.pathname.slice(RESOURCE_MANAGER_PREVIEW_ROUTE_PREFIX.length),
      ).replace(/^\/+/, '');

      if (!resourceRelativePath) {
        return normalizedUrl;
      }

      relativePath = `${RESOURCE_MANAGER_ROOT_PREFIX}${resourceRelativePath}`;
    }

    if (!relativePath) {
      return normalizedUrl;
    }

    const encodedPath = relativePath
      .split('/')
      .filter(Boolean)
      .map((segment) => encodeURIComponent(decodeURIComponent(segment)))
      .join('/');

    if (storedSharePin) {
      searchParams.set('sharePin', storedSharePin);
    }

    const nextSearch = searchParams.toString();
    return `${window.location.origin}/api/chat/shares/${encodeURIComponent(normalizedShareToken)}/resources/${encodedPath}${nextSearch ? `?${nextSearch}` : ''}${resolvedUrl.hash || ''}`;
  } catch {
    return normalizedUrl;
  }
}
function rewritePromptPartForShare(
  prompt: Extract<ChatMessagePart, { type: 'prompt' }>,
  shareToken: string,
): Extract<ChatMessagePart, { type: 'prompt' }> {
  const rewritePreview = <T extends { preview?: { url?: string | null } | null }>(option: T): T => ({
    ...option,
    preview: option.preview
      ? {
          ...option.preview,
          url: option.preview.url ? resolveShareScopedResourceUrl(option.preview.url, shareToken) : option.preview.url ?? null,
        }
      : option.preview ?? null,
  });

  return {
    ...prompt,
    options: prompt.options.map((option) => rewritePreview(option)),
    steps: prompt.steps?.map((step) => ({
      ...step,
      options: step.options.map((option) => rewritePreview(option)),
    })),
  };
}

function isRequestProcessing(status: ChatConversationRequest['status']) {
  return status === 'accepted' || status === 'started';
}

function isRequestInFlight(status: ChatConversationRequest['status']) {
  return status === 'accepted' || status === 'queued' || status === 'started';
}

function isDisconnectedShareRequestNeedingAttention(request: ChatConversationRequest) {
  if (request.hasResponse) {
    return false;
  }

  if (request.status !== 'failed') {
    return false;
  }

  const statusMessage = request.statusMessage?.trim() ?? '';
  return statusMessage === '중단된 오래된 요청';
}

function resolveRequestStatusTag(status: ChatConversationRequest['status']) {
  switch (status) {
    case 'queued':
      return { label: '대기열', color: 'default' as const };
    case 'accepted':
    case 'started':
      return { label: '처리중', color: 'processing' as const };
    case 'completed':
      return { label: '완료', color: 'success' as const };
    case 'failed':
      return { label: '실패', color: 'error' as const };
    case 'cancelled':
      return { label: '취소', color: 'warning' as const };
    case 'removed':
      return { label: '삭제', color: 'default' as const };
    default:
      return { label: status, color: 'default' as const };
  }
}

function isRetriedRequest(request: ChatConversationRequest | null | undefined) {
  return Math.max(0, Number(request?.retryCount ?? 0) || 0) > 0;
}

function hasUnresolvedPromptPart(message: ChatMessage) {
  const promptParts = (message.parts ?? []).filter(
    (part): part is Extract<ChatMessagePart, { type: 'prompt' }> => part.type === 'prompt',
  );

  return promptParts.some((part) => !isPromptResolved(part));
}

function countUnresolvedPromptParts(
  promptParts: Extract<ChatMessagePart, { type: 'prompt' }>[],
) {
  return promptParts.filter((part) => !isPromptResolved(part)).length;
}

function buildSharePromptSearchText(prompt: Extract<ChatMessagePart, { type: 'prompt' }>) {
  return [
    prompt.title,
    prompt.description,
    ...prompt.options.map((option) => `${option.label} ${option.description ?? ''}`.trim()),
    ...(prompt.steps?.flatMap((step) => [
      step.title,
      step.description ?? '',
      ...step.options.map((option) => `${option.label} ${option.description ?? ''}`.trim()),
    ]) ?? []),
  ]
    .map((item) => item.trim())
    .filter(Boolean)
    .join('\n');
}

function hasPendingPromptRequest(
  request: ChatConversationRequest,
  relatedMessages: ChatMessage[],
  promptSubmittedCount = 0,
  messageRenderPayloadById?: Map<number, ShareMessageRenderPayload>,
) {
  if (request.manualPromptCompletedAt) {
    return false;
  }

  let unresolvedPromptCount = 0;

  relatedMessages.forEach((message) => {
    if (message.author !== 'codex' && message.author !== 'system') {
      return;
    }

    const promptParts = messageRenderPayloadById?.get(message.id)?.promptParts;
    const unresolvedCount = (promptParts ?? (message.parts ?? []).filter(
      (part): part is Extract<ChatMessagePart, { type: 'prompt' }> => part.type === 'prompt',
    )).filter((part) => !isPromptResolved(part)).length;

    unresolvedPromptCount += unresolvedCount;
  });

  if (unresolvedPromptCount === 0) {
    return false;
  }

  return unresolvedPromptCount > Math.max(0, promptSubmittedCount);
}

function hasCodexVisibleResponseMessage(message: ChatMessage, payload?: ShareMessageRenderPayload) {
  if (message.author !== 'codex' && message.author !== 'system') {
    return false;
  }

  const resolvedPayload = payload ?? resolveRenderedMessage(message);
  const { visibleText, promptParts, diffBlocks, previewItems } = resolvedPayload;

  return Boolean(
    promptParts.length > 0 ||
    previewItems.length > 0 ||
    diffBlocks.length > 0 ||
    visibleText.trim(),
  );
}

function hasAnsweredShareRequest(
  request: ChatConversationRequest,
  relatedMessages: ChatMessage[],
  messageRenderPayloadById?: Map<number, ShareMessageRenderPayload>,
) {
  if (request.hasResponse) {
    return true;
  }

  return relatedMessages.some((message) => hasCodexVisibleResponseMessage(message, messageRenderPayloadById?.get(message.id)));
}

function hasPendingAttentionVerificationTarget(text: string | null | undefined) {
  const normalized = String(text ?? '').trim();

  if (!normalized) {
    return false;
  }

  if (normalized.length > 720) {
    return true;
  }

  return /```diff[\s\S]*?```|\[\[preview:|\[\[link-card:|\[\[prompt:/i.test(normalized);
}

function hasVerificationTargetShareRequest(
  request: ChatConversationRequest,
  relatedMessages: ChatMessage[],
) {
  if (request.responseMessageId != null) {
    return true;
  }

  if (String(request.responseText ?? '').trim().length > 0) {
    return true;
  }

  if (request.status === 'completed' && request.requestOrigin === 'composer') {
    return relatedMessages.some(
      (message) =>
        (message.author === 'codex' || message.author === 'system')
        && hasPendingAttentionVerificationTarget(message.text),
    );
  }

  return false;
}

function buildShareChildRequestCountMap(requests: ChatConversationRequest[]) {
  const nextMap = new Map<string, number>();

  requests.forEach((request) => {
    const parentRequestId = request.parentRequestId?.trim() || '';
    const requestId = request.requestId.trim();

    if (!parentRequestId || parentRequestId === requestId) {
      return;
    }

    nextMap.set(parentRequestId, (nextMap.get(parentRequestId) ?? 0) + 1);
  });

  return nextMap;
}

function buildSharePromptFollowupCountMap(requests: ChatConversationRequest[]) {
  const nextMap = new Map<string, number>();

  requests.forEach((request) => {
    if (request.requestOrigin !== 'prompt') {
      return;
    }

    const parentRequestId = request.parentRequestId?.trim() || '';

    if (!parentRequestId) {
      return;
    }

    nextMap.set(parentRequestId, (nextMap.get(parentRequestId) ?? 0) + 1);
  });

  return nextMap;
}

function isShareReplyFollowupRequest(request: ChatConversationRequest) {
  return request.requestOrigin === 'composer' && Boolean(request.parentRequestId?.trim());
}

function isPromptFollowupShareRequest(request: ChatConversationRequest) {
  return request.requestOrigin === 'prompt';
}

function hasShareChildFollowupRequest(
  request: ChatConversationRequest,
  childRequestCountByParentId?: Map<string, number>,
) {
  return (childRequestCountByParentId?.get(request.requestId.trim()) ?? 0) > 0;
}

function hasShareManualCompletion(request: ChatConversationRequest) {
  return Boolean(request.manualPromptCompletedAt || request.manualVerificationCompletedAt);
}

function isCompletedHandledShareRequest(
  request: ChatConversationRequest,
  childRequestCountByParentId?: Map<string, number>,
) {
  if (hasShareManualCompletion(request)) {
    return true;
  }

  return hasShareChildFollowupRequest(request, childRequestCountByParentId);
}

function resolveSharePrimaryRequestId(
  request: ChatConversationRequest | null | undefined,
  requestById: ReadonlyMap<string, ChatConversationRequest>,
) {
  let currentRequest = request ?? null;
  const visitedRequestIds = new Set<string>();

  while (currentRequest) {
    const currentRequestId = currentRequest.requestId.trim();

    if (!currentRequestId || visitedRequestIds.has(currentRequestId)) {
      break;
    }

    visitedRequestIds.add(currentRequestId);

    if (currentRequest.requestOrigin !== 'prompt') {
      return currentRequestId;
    }

    const parentRequestId = currentRequest.parentRequestId?.trim() || '';

    if (!parentRequestId) {
      return currentRequestId;
    }

    currentRequest = requestById.get(parentRequestId) ?? null;
  }

  return request?.requestId?.trim() || '';
}

function isUnreadAnsweredShareRequest(
  request: ChatConversationRequest,
  relatedMessages: ChatMessage[],
  childRequestCountByParentId?: Map<string, number>,
  promptFollowupCountByParentId?: Map<string, number>,
  messageRenderPayloadById?: Map<number, ShareMessageRenderPayload>,
) {
  if (isRequestInFlight(request.status)) {
    return false;
  }

  if (
    hasPendingPromptRequest(
      request,
      relatedMessages,
      promptFollowupCountByParentId?.get(request.requestId.trim()) ?? 0,
      messageRenderPayloadById,
    )
  ) {
    return false;
  }

  if (request.manualPromptCompletedAt) {
    return false;
  }

  if (hasShareChildFollowupRequest(request, childRequestCountByParentId)) {
    return false;
  }

  if (request.manualVerificationCompletedAt) {
    return false;
  }

  if (!hasVerificationTargetShareRequest(request, relatedMessages)) {
    return false;
  }

  return hasAnsweredShareRequest(request, relatedMessages, messageRenderPayloadById);
}

function isPendingCompletionShareRequest(
  request: ChatConversationRequest,
  relatedMessages: ChatMessage[],
  childRequestCountByParentId?: Map<string, number>,
  promptFollowupCountByParentId?: Map<string, number>,
  messageRenderPayloadById?: Map<number, ShareMessageRenderPayload>,
) {
  if (isCompletedHandledShareRequest(request, childRequestCountByParentId)) {
    return false;
  }

  if (isRequestInFlight(request.status)) {
    return true;
  }

  if (request.status === 'failed') {
    return true;
  }

  if (
    hasPendingPromptRequest(
      request,
      relatedMessages,
      promptFollowupCountByParentId?.get(request.requestId.trim()) ?? 0,
      messageRenderPayloadById,
    )
  ) {
    return true;
  }

  if (isDisconnectedShareRequestNeedingAttention(request)) {
    return true;
  }

  if (request.status === 'cancelled' || request.status === 'removed') {
    return false;
  }

  if (hasVerificationTargetShareRequest(request, relatedMessages)) {
    return hasAnsweredShareRequest(request, relatedMessages, messageRenderPayloadById);
  }

  return request.status === 'completed';
}

function isShareRequestAwaitingManualAction(
  request: ChatConversationRequest,
  relatedMessages: ChatMessage[],
  childRequestCountByParentId?: Map<string, number>,
  promptFollowupCountByParentId?: Map<string, number>,
  messageRenderPayloadById?: Map<number, ShareMessageRenderPayload>,
) {
  if (isCompletedHandledShareRequest(request, childRequestCountByParentId)) {
    return false;
  }

  if (request.status === 'failed') {
    return true;
  }

  if (
    hasPendingPromptRequest(
      request,
      relatedMessages,
      promptFollowupCountByParentId?.get(request.requestId.trim()) ?? 0,
      messageRenderPayloadById,
    )
  ) {
    return true;
  }

  if (isDisconnectedShareRequestNeedingAttention(request)) {
    return true;
  }

  if (isRequestInFlight(request.status)) {
    return false;
  }

  if (request.status === 'cancelled' || request.status === 'removed') {
    return false;
  }

  if (hasVerificationTargetShareRequest(request, relatedMessages)) {
    return hasAnsweredShareRequest(request, relatedMessages, messageRenderPayloadById);
  }

  return request.status === 'completed';
}

type SharePromptFollowupState = {
  hasInFlight: boolean;
  hasPendingCompletion: boolean;
  hasManualAction: boolean;
  latestChildRequest: ChatConversationRequest;
};

function buildSharePromptFollowupStateByPrimaryRequestId(
  requests: ChatConversationRequest[],
  requestById: ReadonlyMap<string, ChatConversationRequest>,
  requestMessagesById: Map<string, ChatMessage[]>,
  promptFollowupCountByParentId?: Map<string, number>,
  messageRenderPayloadById?: Map<number, ShareMessageRenderPayload>,
) {
  const nextMap = new Map<string, SharePromptFollowupState>();

  requests.forEach((request) => {
    if (!isPromptFollowupShareRequest(request)) {
      return;
    }

    const primaryRequestId = resolveSharePrimaryRequestId(request, requestById);

    if (!primaryRequestId || primaryRequestId === request.requestId.trim()) {
      return;
    }

    const relatedMessages = requestMessagesById.get(request.requestId) ?? [];
    const hasInFlight = isRequestInFlight(request.status);
    const hasPendingCompletion = isPendingCompletionShareRequest(
      request,
      relatedMessages,
      undefined,
      promptFollowupCountByParentId,
      messageRenderPayloadById,
    );
    const hasManualAction = isShareRequestAwaitingManualAction(
      request,
      relatedMessages,
      undefined,
      promptFollowupCountByParentId,
      messageRenderPayloadById,
    );

    if (!hasInFlight && !hasPendingCompletion && !hasManualAction) {
      return;
    }

    const previous = nextMap.get(primaryRequestId);
    const currentUpdatedAt = request.updatedAt?.trim() || request.createdAt;
    const previousUpdatedAt = previous?.latestChildRequest.updatedAt?.trim() || previous?.latestChildRequest.createdAt || '';

    nextMap.set(primaryRequestId, {
      hasInFlight: hasInFlight || previous?.hasInFlight === true,
      hasPendingCompletion: hasPendingCompletion || previous?.hasPendingCompletion === true,
      hasManualAction: hasManualAction || previous?.hasManualAction === true,
      latestChildRequest:
        !previous || currentUpdatedAt.localeCompare(previousUpdatedAt) >= 0
          ? request
          : previous.latestChildRequest,
    });
  });

  return nextMap;
}

function summarizeShareReplyReferenceText(text: string, maxLength = 96) {
  const normalized = stripHiddenPreviewTags(text).replace(/\s+/gu, ' ').trim();

  if (normalized.length <= maxLength) {
    return normalized;
  }

  return `${normalized.slice(0, Math.max(0, maxLength - 1)).trimEnd()}…`;
}

function resolveShareRequestQuestionText(request: ChatConversationRequest | null | undefined) {
  if (!request) {
    return '';
  }

  return buildShareVisibleText(request.userText);
}

function summarizeActivityLogLines(lines: string[]) {
  const normalizedLines = lines.map((line) => line.trim()).filter(Boolean);

  if (normalizedLines.length === 0) {
    return [] as string[];
  }

  const summaries: string[] = [];
  const pushUnique = (label: string) => {
    if (!summaries.includes(label)) {
      summaries.push(label);
    }
  };

  normalizedLines.forEach((line) => {
    const lower = line.toLowerCase();

    if (/(read|search|inspect|context|analysis|analy|조사|확인|정리|검토|조회)/.test(lower)) {
      pushUnique('요청 내용을 확인하고 필요한 정보를 정리하고 있어요.');
    }

    if (/(edit|patch|write|implement|fix|update|modify|반영|수정|작성)/.test(lower)) {
      pushUnique('답변에 반영할 내용을 만들고 있어요.');
    }

    if (/(test|build|verify|check|validate|검증|점검|실행)/.test(lower)) {
      pushUnique('결과를 점검하고 있어요.');
    }

    if (/(file|resource|upload|preview|첨부|파일)/.test(lower)) {
      pushUnique('참고 자료와 첨부 내용을 함께 살펴보고 있어요.');
    }
  });

  if (summaries.length > 0) {
    return summaries.slice(0, 3);
  }

  const latestLine = normalizedLines[normalizedLines.length - 1]
    ?.replace(/[`*_>#-]+/g, ' ')
    .replace(/\s+/g, ' ')
    .trim();

  return latestLine ? [`현재 작업을 진행하고 있어요. ${latestLine}`] : ['현재 작업을 진행하고 있어요.'];
}

function formatElapsedDuration(startedAt: string | null | undefined, nowMs: number) {
  const normalized = startedAt?.trim();

  if (!normalized) {
    return '';
  }

  const startedMs = new Date(normalized).getTime();

  if (Number.isNaN(startedMs)) {
    return '';
  }

  const diffSeconds = Math.max(0, Math.floor((nowMs - startedMs) / 1000));
  const hours = Math.floor(diffSeconds / 3600);
  const minutes = Math.floor((diffSeconds % 3600) / 60);
  const seconds = diffSeconds % 60;

  if (hours > 0) {
    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  }

  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}

async function createSharePreviewFetchError(response: Response): Promise<SharePreviewFetchError> {
  const contentType = response.headers.get('content-type')?.toLowerCase() ?? '';
  let responseMessage = '';

  try {
    if (contentType.includes('application/json')) {
      const payload = (await response.json()) as { message?: string };
      responseMessage = String(payload.message ?? '').trim();
    } else {
      responseMessage = (await response.text()).trim();
    }
  } catch {
    responseMessage = '';
  }

  const statusLabel =
    response.status === 403
      ? '이 문서는 현재 권한으로 열 수 없습니다.'
      : response.status === 404
        ? '이 문서를 찾을 수 없습니다.'
        : response.status === 401
          ? '이 문서를 열기 위한 인증이 필요합니다.'
          : `preview 요청이 실패했습니다. (${response.status})`;
  const detail = responseMessage && responseMessage !== response.statusText ? responseMessage : response.statusText.trim();
  const error = new Error(detail ? `${statusLabel} ${detail}` : statusLabel) as SharePreviewFetchError;
  error.status = response.status;
  return error;
}

function ExpandableMessageText({
  text,
  className,
  collapsedLabel = '더보기',
  expandedLabel = '접기',
  onExpand,
}: {
  text: string;
  className?: string;
  collapsedLabel?: string;
  expandedLabel?: string;
  onExpand?: (() => void) | null;
}) {
  const normalizedText = text.trim();
  const [isExpanded, setIsExpanded] = useState(false);
  const canCollapse = useMemo(() => isCollapsibleText(normalizedText), [normalizedText]);

  useEffect(() => {
    setIsExpanded(false);
  }, [normalizedText]);

  if (!normalizedText) {
    return null;
  }

  return (
    <div className="chat-share-page__collapsible-text">
      <Paragraph
        className={`${className ?? 'chat-share-page__message-body'}${!isExpanded && canCollapse ? ' chat-share-page__message-body--collapsed' : ''}`}
      >
        {normalizedText}
      </Paragraph>
      {canCollapse ? (
        <Button
          type="text"
          size="small"
          className="chat-share-page__collapse-toggle"
          onClick={() =>
            setIsExpanded((current) => {
              const nextExpanded = !current;

              if (nextExpanded) {
                onExpand?.();
              }

              return nextExpanded;
            })
          }
        >
          {isExpanded ? expandedLabel : collapsedLabel}
        </Button>
      ) : null}
    </div>
  );
}

function ShareResponseBlock({
  message,
  requestById,
  fallbackRequestId,
  emphasisLabel,
  onSubmitPrompt,
  promptSelections,
  onPromptSelectionChange,
  onPromptSubmitted,
  onCompletePrompt,
  onCompleteVerification,
  isPromptCompletionSaving,
  isPromptManualCompleted,
  isVerificationCompletionSaving,
  isVerificationCompleted,
  hasChildRequest,
  activeReplyRequestId,
  onReplyToResponse,
  shareToken,
  onOpenProgram,
  canUploadAttachments = false,
  onUploadAttachment,
  onSetResponseAnchor,
  onSetPromptAnchor,
}: {
  message: ChatMessage;
  requestById: Map<string, ChatConversationRequest>;
  fallbackRequestId?: string;
  emphasisLabel?: string;
  onSubmitPrompt: (payload: PromptSubmitPayload & { parentRequestId: string; promptIndex: number; sourceMessageId: number }) => Promise<boolean>;
  promptSelections: Record<string, PendingSharePromptSelection>;
  onPromptSelectionChange: (selectionKey: string, selection: PromptDraftSelection | null) => void;
  onPromptSubmitted: (selectionKey: string, selection: PromptDraftSelection) => void;
  onCompletePrompt?: ((parentRequestId: string) => Promise<void>) | null;
  onCompleteVerification?: ((parentRequestId: string) => Promise<void>) | null;
  isPromptCompletionSaving?: boolean;
  isPromptManualCompleted?: boolean;
  isVerificationCompletionSaving?: boolean;
  isVerificationCompleted?: boolean;
  hasChildRequest?: boolean;
  activeReplyRequestId?: string | null;
  onReplyToResponse?: ((parentRequestId: string) => void) | null;
  shareToken?: string;
  onOpenProgram?: ((target: ShareProgramTarget) => void) | null;
  canUploadAttachments?: boolean;
  onUploadAttachment?: ((file: File) => Promise<ChatComposerAttachment>) | null;
  onSetResponseAnchor?: ((messageId: number, element: HTMLDivElement | null) => void) | null;
  onSetPromptAnchor?: ((messageId: number, promptIndex: number, element: HTMLDivElement | null) => void) | null;
}) {
  const { visibleText, promptParts: rawPromptParts, diffBlocks, previewItems: rawPreviewItems } = useMemo(
    () => extractShareMessageRenderPayload(message),
    [message],
  );
  const promptParts = useMemo(
    () => rawPromptParts.map((part) => (shareToken ? rewritePromptPartForShare(part, shareToken) : part)),
    [rawPromptParts, shareToken],
  );
  const previewItems = useMemo(
    () =>
      shareToken
        ? rawPreviewItems.map((item) => ({
            ...item,
            url: resolveShareScopedResourceUrl(item.url, shareToken),
          }))
        : [],
    [rawPreviewItems, shareToken],
  );
  const parentRequestId = message.clientRequestId?.trim() || fallbackRequestId?.trim() || '';
  const parentRequest = parentRequestId ? requestById.get(parentRequestId) ?? null : null;
  const isParentRequestInFlight = parentRequest ? isRequestInFlight(parentRequest.status) : false;
  const parentQuestionText = useMemo(
    () => resolvePromptParentQuestionText(parentRequestId ? requestById.get(parentRequestId) ?? null : null),
    [parentRequestId, requestById],
  );
  const canCompletePrompt =
    countUnresolvedPromptParts(promptParts) > 0 &&
    !isPromptManualCompleted &&
    !isParentRequestInFlight;
  const hasOpenPromptInResponse = countUnresolvedPromptParts(promptParts) > 0;
  const canCompleteVerification =
    !hasOpenPromptInResponse &&
    Boolean(parentRequestId) &&
    Boolean(onCompleteVerification) &&
    !hasChildRequest &&
    !isVerificationCompleted &&
    !isParentRequestInFlight;
  const canReplyToResponse =
    !hasOpenPromptInResponse &&
    Boolean(parentRequestId) &&
    Boolean(onReplyToResponse) &&
    !isParentRequestInFlight;
  const isReplyTargetActive = canReplyToResponse && activeReplyRequestId?.trim() === parentRequestId;

  return (
    <div
      className="chat-share-page__response-block"
      ref={(element) => {
        onSetResponseAnchor?.(message.id, element);
      }}
    >
      <span className="chat-share-page__message-time">{formatTimeLabel(message.timestamp)}</span>
      <div className="chat-share-page__message-headline chat-share-page__message-headline--inline">
        {emphasisLabel ? <Tag>{emphasisLabel}</Tag> : null}
        {canCompletePrompt && parentRequestId && onCompletePrompt ? (
          <Button
            type="text"
            size="small"
            className="chat-share-page__prompt-complete-button"
            icon={<CheckOutlined />}
            loading={isPromptCompletionSaving}
            onClick={() => {
              void onCompletePrompt(parentRequestId);
            }}
          >
            완료 처리
          </Button>
        ) : null}
        {!canCompletePrompt && isPromptManualCompleted ? <Tag color="success">prompt 완료 처리됨</Tag> : null}
        {canCompleteVerification && parentRequestId && onCompleteVerification ? (
          <Button
            type="text"
            size="small"
            className="chat-share-page__prompt-complete-button"
            icon={<CheckOutlined />}
            loading={isVerificationCompletionSaving}
            onClick={() => {
              void onCompleteVerification(parentRequestId);
            }}
          >
            완료 처리
          </Button>
        ) : null}
        {!canCompleteVerification && !hasOpenPromptInResponse && !hasChildRequest && isVerificationCompleted ? <Tag color="success">응답 확인 완료</Tag> : null}
        {canReplyToResponse && parentRequestId && onReplyToResponse ? (
          <Button
            type="text"
            size="small"
            className={`chat-share-page__prompt-complete-button chat-share-page__response-reply-button${
              isReplyTargetActive ? ' chat-share-page__response-reply-button--active' : ''
            }`}
            icon={<SendOutlined />}
            onClick={() => {
              onReplyToResponse(parentRequestId);
            }}
          >
            {isReplyTargetActive ? '답변 참조 중' : '답변하기'}
          </Button>
        ) : null}
      </div>
      <div className="chat-share-page__message-tone chat-share-page__message-tone--answer">
        <span className="chat-share-page__message-tone-label">답변</span>
        <ExpandableMessageText text={visibleText} />
      </div>
      {promptParts.length > 0
        ? promptParts.map((target, promptIndex) => {
            const promptSignature = buildPromptTargetSignature(target);
            const selectionKey = buildSharePromptSelectionKey(parentRequestId, message.id, promptIndex, target.title, promptSignature);
            const draftSelection = promptSelections[selectionKey]?.status === 'draft' ? promptSelections[selectionKey] : null;
            const submittedSelection = promptSelections[selectionKey]?.status === 'submitted' ? promptSelections[selectionKey] : null;

            return (
              <div
                key={`${message.id}-${promptIndex}-${target.title}`}
                ref={(element) => {
                  onSetPromptAnchor?.(message.id, promptIndex, element);
                }}
              >
                <ChatPromptCard
                  target={target}
                  parentQuestionText={parentQuestionText}
                  readOnly={Boolean(isPromptManualCompleted)}
                  draftSelection={draftSelection}
                  submittedSelection={submittedSelection}
                  onSelectionChange={(selection) => onPromptSelectionChange(selectionKey, selection)}
                  onSubmitted={(selection) => onPromptSubmitted(selectionKey, selection)}
                  onSubmit={(payload) => onSubmitPrompt({ ...payload, parentRequestId, promptIndex, sourceMessageId: message.id })}
                  allowAttachments={canUploadAttachments}
                  attachmentAccept={SHARE_ATTACHMENT_ACCEPT}
                  onUploadAttachment={onUploadAttachment}
                />
              </div>
            );
          })
        : null}
      {shareToken && previewItems.length > 0 ? (
        <div className="chat-share-page__resource-list">
          {previewItems.map((item) => (
            <ShareResourcePreviewCard
              key={item.id}
              item={item}
              shareToken={shareToken}
              onOpenProgram={onOpenProgram}
            />
          ))}
        </div>
      ) : null}
      {diffBlocks.length > 0 ? (
        <div className="chat-share-page__resource-list">
          {diffBlocks.map((diffText, index) => (
            <ShareInlinePreviewCard
              key={`${message.id}-diff-${index}`}
              item={{
                id: `${message.id}-diff-${index}`,
                label: diffBlocks.length > 1 ? `diff preview ${index + 1}` : 'diff preview',
                kind: 'diff',
                previewText: diffText,
              }}
            />
          ))}
        </div>
      ) : null}
    </div>
  );
}

function ShareInlinePreviewCard({
  item,
  onPreviewViewed,
}: {
  item: {
    id: string;
    label: string;
    kind: PreviewKind;
    previewText: string;
  };
  onPreviewViewed?: (() => void) | null;
}) {
  const [isExpanded, setIsExpanded] = useState(false);
  const target = useMemo<ChatPreviewTarget>(
    () => ({
      label: item.label,
      url: item.label,
      kind: item.kind,
    }),
    [item.kind, item.label],
  );

  return (
    <section className="chat-share-page__resource-card app-chat-preview-card">
      <div className="app-chat-preview-card__header">
        <div className="app-chat-preview-card__meta">
          <div className="app-chat-preview-card__titles">
            <span className="app-chat-preview-card__label">{item.label}</span>
            <span className="app-chat-preview-card__kind">{item.kind} preview</span>
          </div>
        </div>
        <div className="app-chat-preview-card__actions">
          <Button
            type="text"
            size="small"
            className="app-chat-preview-card__open-link"
            aria-label={isExpanded ? 'diff preview 접기' : 'diff preview 미리보기'}
            onClick={() =>
              setIsExpanded((current) => {
                const nextExpanded = !current;

                if (nextExpanded) {
                  onPreviewViewed?.();
                }

                return nextExpanded;
              })
            }
            icon={<EyeOutlined />}
          />
        </div>
      </div>
      {isExpanded ? (
        <div className="app-chat-preview-card__body chat-share-page__resource-card-body">
          <ChatPreviewBody
            target={target}
            previewText={item.previewText}
            isPreviewLoading={false}
            previewError=""
            renderHtmlAsFrame
          />
        </div>
      ) : null}
    </section>
  );
}

function ShareResourcePreviewCard({
  item,
  shareToken,
  onPreviewViewed,
  onOpenProgram,
}: {
  item: PreviewItem;
  shareToken: string;
  onPreviewViewed?: (() => void) | null;
  onOpenProgram?: ((target: ShareProgramTarget) => void) | null;
}) {
  const [isExpanded, setIsExpanded] = useState(false);
  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
  const [previewText, setPreviewText] = useState('');
  const [previewError, setPreviewError] = useState('');
  const [previewContentType, setPreviewContentType] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const scopedUrl = useMemo(() => resolveShareScopedResourceUrl(item.url, shareToken), [item.url, shareToken]);
  const target = useMemo<ChatPreviewTarget>(
    () => ({
      label: item.label,
      url: scopedUrl,
      kind: item.kind,
    }),
    [item.kind, item.label, scopedUrl],
  );
  const handleOpenProgram = useCallback(() => {
    onOpenProgram?.({
      key: `${item.id}-program`,
      label: item.label,
      url: scopedUrl,
      kind: item.kind,
      meta: `${item.kind} resource`,
    });
  }, [item.id, item.kind, item.label, onOpenProgram, scopedUrl]);

  useEffect(() => {
    if (!isPreviewOpen) {
      return undefined;
    }

    if (item.kind === 'image' || item.kind === 'video' || item.kind === 'pdf' || item.kind === 'file') {
      setPreviewText('');
      setPreviewError('');
      setPreviewContentType('');
      setIsLoading(false);
      return undefined;
    }

    const controller = new AbortController();
    setIsLoading(true);
    setPreviewError('');
    setPreviewContentType('');

    fetch(scopedUrl, {
      cache: 'no-store',
      credentials: 'include',
      signal: controller.signal,
    })
      .then(async (response) => {
        if (!response.ok) {
          throw await createSharePreviewFetchError(response);
        }

        setPreviewContentType(response.headers.get('content-type') ?? '');
        const text = await response.text();
        setPreviewText(text);
      })
      .catch((error: unknown) => {
        if (controller.signal.aborted) {
          return;
        }

        setPreviewText('');
        setPreviewContentType('');
        setPreviewError(error instanceof Error ? error.message : 'preview를 불러오지 못했습니다.');
      })
      .finally(() => {
        if (!controller.signal.aborted) {
          setIsLoading(false);
        }
      });

    return () => {
      controller.abort();
    };
  }, [isPreviewOpen, item.kind, scopedUrl]);

  return (
    <section className="chat-share-page__resource-card app-chat-preview-card">
      <div className="app-chat-preview-card__header">
        <div className="app-chat-preview-card__meta">
          <div className="app-chat-preview-card__titles">
            <span className="app-chat-preview-card__label">{item.label}</span>
            <span className="app-chat-preview-card__kind">{item.kind} preview</span>
          </div>
        </div>
        <div className="app-chat-preview-card__actions">
          <Button
            type="text"
            size="small"
            className="app-chat-preview-card__open-link"
            aria-label={isPreviewOpen ? `${item.label} 접기` : `${item.label} 미리보기`}
            onClick={() =>
              setIsPreviewOpen((current) => {
                const nextOpen = !current;

                if (nextOpen) {
                  onPreviewViewed?.();
                }

                return nextOpen;
              })
            }
            icon={<EyeOutlined />}
          />
          <Button
            type="text"
            size="small"
            className="app-chat-preview-card__open-link"
            icon={<FullscreenOutlined />}
            aria-label={`${item.label} 확대`}
            onClick={() => {
              onPreviewViewed?.();
              setIsPreviewOpen(true);
              setIsExpanded(true);
            }}
          />
        </div>
      </div>
      {isPreviewOpen ? (
        <div className="app-chat-preview-card__body chat-share-page__resource-card-body">
          <ChatPreviewBody
            target={target}
            previewText={previewText}
            isPreviewLoading={isLoading}
            previewError={previewError}
            previewContentType={previewContentType || undefined}
            maxMarkdownBlocks={5}
            renderHtmlAsFrame
          />
        </div>
      ) : null}
      <FullscreenPreviewModal
        open={isExpanded}
        title={item.label}
        meta={`${item.kind} preview`}
        fillContent
        onMinimize={onOpenProgram ? () => {
          handleOpenProgram();
          setIsExpanded(false);
        } : null}
        onClose={() => setIsExpanded(false)}
      >
        <ChatPreviewBody
          target={target}
          previewText={previewText}
          isPreviewLoading={isLoading}
          previewError={previewError}
          previewContentType={previewContentType || undefined}
          renderHtmlAsFrame
          fullscreen
        />
      </FullscreenPreviewModal>
    </section>
  );
}

function ShareRequestCard({
  request,
  requestById,
  answerText,
  relatedMessages,
  mode,
  onSubmitPrompt,
  promptSelections,
  onPromptSelectionChange,
  onPromptSubmitted,
  onCompletePrompt,
  onCompleteVerification,
  isPromptCompletionSaving,
  isVerificationCompletionSaving,
  isVerificationCompleted,
  hasChildRequest = false,
  activeReplyRequestId,
  onReplyToResponse,
  onCancelDisconnectedRequest,
  onRetryDisconnectedRequest,
  isRequestCancellationSaving = false,
  isRequestRetrySaving = false,
  shareToken,
  onOpenProgram,
  canUploadAttachments = false,
  onUploadAttachment,
  onSetRequestAnchor,
  onSetResponseAnchor,
  onSetPromptAnchor,
  onOpenPreviousQuestion,
}: {
  request: ChatConversationRequest;
  requestById: Map<string, ChatConversationRequest>;
  answerText: string;
  relatedMessages: ChatMessage[];
  mode: ShareRequestCardMode;
  onSubmitPrompt: (payload: PromptSubmitPayload & { parentRequestId: string; promptIndex: number; sourceMessageId: number }) => Promise<boolean>;
  promptSelections: Record<string, PendingSharePromptSelection>;
  onPromptSelectionChange: (selectionKey: string, selection: PromptDraftSelection | null) => void;
  onPromptSubmitted: (selectionKey: string, selection: PromptDraftSelection) => void;
  onCompletePrompt?: ((parentRequestId: string) => Promise<void>) | null;
  onCompleteVerification?: ((parentRequestId: string) => Promise<void>) | null;
  isPromptCompletionSaving?: boolean;
  isVerificationCompletionSaving?: boolean;
  isVerificationCompleted?: boolean;
  hasChildRequest?: boolean;
  activeReplyRequestId?: string | null;
  onReplyToResponse?: ((parentRequestId: string) => void) | null;
  onCancelDisconnectedRequest?: ((parentRequestId: string) => Promise<void>) | null;
  isRequestCancellationSaving?: boolean;
  onRetryDisconnectedRequest?: ((parentRequestId: string) => Promise<void>) | null;
  isRequestRetrySaving?: boolean;
  shareToken: string;
  onOpenProgram?: ((target: ShareProgramTarget) => void) | null;
  canUploadAttachments?: boolean;
  onUploadAttachment?: ((file: File) => Promise<ChatComposerAttachment>) | null;
  onSetRequestAnchor?: ((requestId: string, element: HTMLElement | null) => void) | null;
  onSetResponseAnchor?: ((messageId: number, element: HTMLDivElement | null) => void) | null;
  onSetPromptAnchor?: ((messageId: number, promptIndex: number, element: HTMLDivElement | null) => void) | null;
  onOpenPreviousQuestion?: ((requestId: string) => void) | null;
}) {
  const questionText = useMemo(() => buildShareVisibleText(request.userText), [request.userText]);
  const questionPreviewItems = useMemo(
    () => buildSharePreviewItemsFromText(request.userText, shareToken),
    [request.userText, shareToken],
  );
  const resolvedAnswerText = answerText.trim() || request.statusMessage?.trim() || '아직 답변이 없습니다.';
  const shouldRenderQuestion = mode !== 'answer-only';
  const shouldRenderFullAnswer = mode === 'full' || mode === 'answer-only';
  const isRequestStillRunning = isRequestInFlight(request.status);
  const responseMessages = useMemo(
    () => relatedMessages.filter((message) => message.author !== 'user'),
    [relatedMessages],
  );
  const responseRequestById = useMemo(() => new Map([[request.requestId, request]]), [request]);
  const shouldRenderAnswerSummary = shouldRenderFullAnswer && responseMessages.length === 0;
  const canReplyFromSummary =
    Boolean(onReplyToResponse) &&
    mode !== 'question-only' &&
    !isRequestStillRunning;
  const isSummaryReplyActive = canReplyFromSummary && activeReplyRequestId?.trim() === request.requestId;
  const canCompleteSummaryVerification =
    shouldRenderAnswerSummary &&
    Boolean(onCompleteVerification) &&
    !isVerificationCompleted &&
    !isRequestStillRunning;
  const canCancelDisconnectedRequest =
    Boolean(onCancelDisconnectedRequest)
    && !request.hasResponse
    && request.status === 'failed'
    && (request.statusMessage?.trim() ?? '') === '중단된 오래된 요청';
  const canRetryDisconnectedRequest =
    Boolean(onRetryDisconnectedRequest)
    && !request.hasResponse
    && request.status === 'failed'
    && (request.statusMessage?.trim() ?? '') === '중단된 오래된 요청';
  const retryCount = Math.max(0, Number(request.retryCount ?? 0) || 0);

  return (
    <section
      id={`chat-share-request-${request.requestId}`}
      className="chat-share-page__request-block"
      ref={(element) => {
        onSetRequestAnchor?.(request.requestId, element);
      }}
    >
      <div className="chat-share-page__message-headline chat-share-page__message-headline--inline">
        <span className="chat-share-page__message-time">{formatTimeLabel(request.createdAt)}</span>
        {isRetriedRequest(request) ? <Tag color="processing">재처리 {retryCount}회</Tag> : null}
        {canCancelDisconnectedRequest ? (
          <Button
            type="text"
            size="small"
            danger
            className="chat-share-page__prompt-complete-button"
            loading={isRequestCancellationSaving}
            icon={<CloseOutlined />}
            onClick={() => {
              void onCancelDisconnectedRequest?.(request.requestId);
            }}
          >
            취소 처리
          </Button>
        ) : null}
        {canRetryDisconnectedRequest ? (
          <Button
            type="text"
            size="small"
            className="chat-share-page__prompt-complete-button"
            loading={isRequestRetrySaving}
            icon={<ReloadOutlined />}
            onClick={() => {
              void onRetryDisconnectedRequest?.(request.requestId);
            }}
          >
            재처리
          </Button>
        ) : null}
      </div>
      {shouldRenderQuestion ? (
        <>
          <div className="chat-share-page__message-tone chat-share-page__message-tone--question">
            <span className="chat-share-page__message-tone-label">질문</span>
            <ExpandableMessageText text={questionText || '-'} />
          </div>
          {questionPreviewItems.length > 0 ? (
            <div className="chat-share-page__resource-list">
              {questionPreviewItems.map((item) => (
                <ShareResourcePreviewCard
                  key={`request-${request.requestId}-${item.id}`}
                  item={item}
                  shareToken={shareToken}
                  onOpenProgram={onOpenProgram}
                />
              ))}
            </div>
          ) : null}
        </>
      ) : null}
      {shouldRenderFullAnswer ? (
        <>
          {shouldRenderAnswerSummary ? (
            <>
              <div className="chat-share-page__message-divider" aria-hidden="true" />
              {canCompleteSummaryVerification || canReplyFromSummary || isVerificationCompleted ? (
                <div className="chat-share-page__message-headline chat-share-page__message-headline--inline">
                  {canCompleteSummaryVerification ? (
                    <Button
                      type="text"
                      size="small"
                      className="chat-share-page__prompt-complete-button"
                      icon={<CheckOutlined />}
                      loading={isVerificationCompletionSaving}
                  onClick={() => {
                    void onCompleteVerification?.(request.requestId);
                  }}
                >
                  완료 처리
                </Button>
              ) : null}
              {!canCompleteSummaryVerification && isVerificationCompleted ? <Tag color="success">응답 확인 완료</Tag> : null}
              {canReplyFromSummary ? (
                <Button
                      type="text"
                      size="small"
                      className={`chat-share-page__prompt-complete-button chat-share-page__response-reply-button${
                        isSummaryReplyActive ? ' chat-share-page__response-reply-button--active' : ''
                      }`}
                      icon={<SendOutlined />}
                      onClick={() => {
                        onReplyToResponse?.(request.requestId);
                      }}
                    >
                      {isSummaryReplyActive ? '답변 참조 중' : '답변하기'}
                    </Button>
                  ) : null}
                </div>
              ) : null}
              <div className="chat-share-page__message-tone chat-share-page__message-tone--answer">
                <span className="chat-share-page__message-tone-label">답변</span>
                <ExpandableMessageText text={resolvedAnswerText} />
              </div>
            </>
          ) : null}

          {responseMessages.length > 0 ? (
            <div className="chat-share-page__bundle-list">
              {responseMessages.map((message) => (
                <ShareResponseBlock
                  key={message.id}
                  message={message}
                  requestById={responseRequestById}
                  fallbackRequestId={request.requestId}
                  onSubmitPrompt={onSubmitPrompt}
                  promptSelections={promptSelections}
                  onPromptSelectionChange={onPromptSelectionChange}
                  onPromptSubmitted={onPromptSubmitted}
                  onCompletePrompt={onCompletePrompt}
                  onCompleteVerification={onCompleteVerification}
                  isPromptCompletionSaving={isPromptCompletionSaving}
                  isPromptManualCompleted={Boolean(request.manualPromptCompletedAt)}
                  isVerificationCompletionSaving={isVerificationCompletionSaving}
                  isVerificationCompleted={isVerificationCompleted}
                  hasChildRequest={hasChildRequest}
                  activeReplyRequestId={activeReplyRequestId}
                  onReplyToResponse={onReplyToResponse}
                  shareToken={shareToken}
                  onOpenProgram={onOpenProgram}
                  canUploadAttachments={canUploadAttachments}
                  onUploadAttachment={onUploadAttachment}
                  onSetResponseAnchor={onSetResponseAnchor}
                  onSetPromptAnchor={onSetPromptAnchor}
                />
              ))}
            </div>
          ) : null}
        </>
      ) : null}
    </section>
  );
}

export function ChatSharePage() {
  const { message, modal } = App.useApp();
  const appConfig = useAppConfig();
  const { token = '' } = useParams();
  const normalizedToken = token.trim();
  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
  const pageRef = useRef<HTMLDivElement | null>(null);
  const requestAnchorRefs = useRef(new Map<string, HTMLElement>());
  const responseAnchorRefs = useRef(new Map<number, HTMLDivElement>());
  const promptAnchorRefs = useRef(new Map<string, HTMLDivElement>());
  const isInteractingRef = useRef(false);
  const deferredSnapshotRef = useRef<ChatShareSnapshot | null>(null);
  const liveRefreshTimerRef = useRef<number | null>(null);
  const snapshotRefreshPromiseRef = useRef<Promise<boolean> | null>(null);
  const pendingSilentRefreshRef = useRef(false);
  const scrollSyncFrameRef = useRef<number | null>(null);
  const scrollIdleTimerRef = useRef<number | null>(null);
  const programmaticScrollTargetRef = useRef<'top' | 'bottom' | null>(null);
  const lastScrollTopRef = useRef(0);
  const [snapshot, setSnapshot] = useState<ChatShareSnapshot | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [, setIsRefreshing] = useState(false);
  const [isLiveConnected, setIsLiveConnected] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [requiresAccessPin, setRequiresAccessPin] = useState(false);
  const hasSnapshotRef = useRef(false);
  const requiresAccessPinRef = useRef(false);
  const [accessPinInput, setAccessPinInput] = useState('');
  const [accessPinSubmitError, setAccessPinSubmitError] = useState('');
  const [draftText, setDraftText] = useState('');
  const [composerAttachments, setComposerAttachments] = useState<ChatComposerAttachment[]>([]);
  const [isSending, setIsSending] = useState(false);
  const [isUploadingComposerAttachment, setIsUploadingComposerAttachment] = useState(false);
  const [immediateSendPinnedByToken, setImmediateSendPinnedByToken] = useState<Record<string, boolean>>(() =>
    readStoredShareImmediateSendPinnedByToken(),
  );
  const [nowMs, setNowMs] = useState(() => Date.now());
  const [expandMode, setExpandMode] = useState<ShareExpandMode>('pending');
  const [latestRequestId, setLatestRequestId] = useState('');
  const [pendingPromptSelections, setPendingPromptSelections] = useState<Record<string, PendingSharePromptSelection>>({});
  const [pendingPromptCompletionRequestIds, setPendingPromptCompletionRequestIds] = useState<string[]>([]);
  const [pendingVerificationCompletionRequestIds, setPendingVerificationCompletionRequestIds] = useState<string[]>([]);
  const [pendingRequestCancellationIds, setPendingRequestCancellationIds] = useState<string[]>([]);
  const [pendingRequestRetryIds, setPendingRequestRetryIds] = useState<string[]>([]);
  const [replyReferenceRequestId, setReplyReferenceRequestId] = useState('');
  const [previousQuestionModalRequestId, setPreviousQuestionModalRequestId] = useState('');
  const [showScrollToTop, setShowScrollToTop] = useState(false);
  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
  const [isClearingConversation, setIsClearingConversation] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [isTokenUsageOpen, setIsTokenUsageOpen] = useState(false);
  const [isRoomSettingsOpen, setIsRoomSettingsOpen] = useState(false);
  const [isSavingRoomSettings, setIsSavingRoomSettings] = useState(false);
  const [roomSettingsTabKey, setRoomSettingsTabKey] = useState<'chat-type' | 'default-contexts' | 'room-context' | 'notifications' | 'security'>('chat-type');
  const [editingRoomTitle, setEditingRoomTitle] = useState('');
  const [editingRoomChatTypeId, setEditingRoomChatTypeId] = useState<string | null>(null);
  const [editingRoomDefaultContextIds, setEditingRoomDefaultContextIds] = useState<string[]>([]);
  const [isEditingRoomDefaultContextsDirty, setIsEditingRoomDefaultContextsDirty] = useState(false);
  const [editingRoomCustomContextTitle, setEditingRoomCustomContextTitle] = useState('');
  const [editingRoomCustomContextContent, setEditingRoomCustomContextContent] = useState('');
  const [editingRoomUseAccessPin, setEditingRoomUseAccessPin] = useState(false);
  const [editingRoomAccessPin, setEditingRoomAccessPin] = useState('');
  const [editingRoomAccessPinPromptTtlMinutes, setEditingRoomAccessPinPromptTtlMinutes] = useState<number | null>(null);
  const [editingRoomNotifyOffline, setEditingRoomNotifyOffline] = useState(false);
  const [roomNotificationClientStatus, setRoomNotificationClientStatus] = useState<ShareNotificationClientStatus>(() =>
    buildShareNotificationClientStatus({
      roomEnabled: false,
      appEnabled: appConfig.chat.receiveRoomNotifications,
      permission: getClientNotificationPermission(),
      registrationReady: false,
    }),
  );
  const [isRefreshingRoomNotificationStatus, setIsRefreshingRoomNotificationStatus] = useState(false);
  const [isSendingRoomNotificationTest, setIsSendingRoomNotificationTest] = useState(false);
  const [searchKeyword, setSearchKeyword] = useState('');
  const [searchPanelMode, setSearchPanelMode] = useState<ShareSearchPanelMode>('all');
  const [selectedAppEnvironment, setSelectedAppEnvironment] = useState<ShareAppEnvironment>(() =>
    typeof window === 'undefined' ? 'preview' : resolveShareAppEnvironmentFromOrigin(window.location.origin),
  );
  const [programTarget, setProgramTarget] = useState<ShareProgramTarget | null>(null);
  const [programMinimizedTarget, setProgramMinimizedTarget] = useState<ShareProgramTarget | null>(null);
  const [isProgramMinimized, setIsProgramMinimized] = useState(false);
  const programMinimizedCardRef = useRef<HTMLDivElement | null>(null);
  const programMinimizedDragStateRef = useRef<{
    pointerId: number;
    lastX: number;
    lastY: number;
    captureTarget: HTMLDivElement;
  } | null>(null);
  const programMinimizedMovedRef = useRef(false);
  const programMinimizedPositionRef = useRef(getDefaultProgramMinimizedPosition());
  const [programMinimizedPosition, setProgramMinimizedPosition] = useState(() => programMinimizedPositionRef.current);
  const composerRef = useRef<TextAreaRef | null>(null);
  const composerAttachmentInputRef = useRef<HTMLInputElement | null>(null);
  const composerInputShellRef = useRef<HTMLDivElement | null>(null);
  const immediateSendHoldTimerRef = useRef<number | null>(null);
  const suppressImmediateSendClickRef = useRef(false);
  const focusedMobileInputRef = useRef<HTMLElement | null>(null);
  const composerFocusScrollTimerIdsRef = useRef<number[]>([]);
  const [isComposerViewportCompacted, setIsComposerViewportCompacted] = useState(false);
  const [appLaunchUsage, setAppLaunchUsage] = useState<ShareAppLaunchUsageMap>(() => readShareAppLaunchUsage());
  hasSnapshotRef.current = snapshot != null;
  requiresAccessPinRef.current = requiresAccessPin;

  const shareTokenSetting = snapshot?.share.tokenSetting ?? null;
  const shareAllowedAppIdSet = useMemo(
    () => buildShareAllowedAppIdSet(shareTokenSetting?.allowedAppIds, snapshot?.share.permissions),
    [shareTokenSetting?.allowedAppIds, snapshot?.share.permissions],
  );
  const sharePermissionSet = useMemo(
    () => new Set((snapshot?.share.permissions ?? []).map((item) => item.trim().toLowerCase()).filter(Boolean)),
    [snapshot?.share.permissions],
  );
  const allowedPlayAppEntries = useMemo(
    () => getReadyPlayAppEntries().filter((entry) => shareAllowedAppIdSet.has(entry.id)),
    [shareAllowedAppIdSet],
  );
  const sortedAllowedPlayAppEntries = useMemo(
    () => [...allowedPlayAppEntries].sort((left, right) => (
      compareShareAppLaunchOrder(
        left.id,
        right.id,
        left.usagePriority ?? 0,
        right.usagePriority ?? 0,
        appLaunchUsage,
      )
    )),
    [allowedPlayAppEntries, appLaunchUsage],
  );
  useEffect(() => {
    if (sortedAllowedPlayAppEntries.length === 0) {
      return;
    }

    if (sortedAllowedPlayAppEntries.some((entry) => isPlayAppSupportedInEnvironment(entry, selectedAppEnvironment))) {
      return;
    }

    const nextEnvironment = resolveFirstSupportedShareAppEnvironment(sortedAllowedPlayAppEntries);
    if (nextEnvironment !== selectedAppEnvironment) {
      setSelectedAppEnvironment(nextEnvironment);
    }
  }, [selectedAppEnvironment, sortedAllowedPlayAppEntries]);
  const allowedManagementApps = useMemo(
    () => SHARE_MANAGEMENT_APP_OPTIONS.filter((option) => shareAllowedAppIdSet.has(option.value)),
    [shareAllowedAppIdSet],
  );
  const sortedAllowedManagementApps = useMemo(
    () => [...allowedManagementApps].sort((left, right) => (
      compareShareAppLaunchOrder(left.value, right.value, left.usagePriority, right.usagePriority, appLaunchUsage)
    )),
    [allowedManagementApps, appLaunchUsage],
  );
  const hasSharedRoomSettingsApp = shareAllowedAppIdSet.has('chat-room-settings');
  const hasWorkServerCommandApp = shareAllowedAppIdSet.has('server-command');
  const canManageSharedTokenSetting = sharePermissionSet.has('manage') && shareAllowedAppIdSet.has('token-setting');
  const canManageSharedRoomSettings = sharePermissionSet.has('manage') && hasSharedRoomSettingsApp;
  const canEditSharedRoomAccessPin = hasSharedRoomSettingsApp;
  const canOpenSharedRoomSettings = hasSharedRoomSettingsApp;
  const isImmediateSendPinned = normalizedToken ? immediateSendPinnedByToken[normalizedToken] === true : false;
  const [shareWorkServerCommand, setShareWorkServerCommand] = useState<ServerCommandItem | null>(null);
  const refreshRoomNotificationStatus = useCallback(async (roomEnabled: boolean) => {
    const permission = getClientNotificationPermission();
    const appEnabled = appConfig.chat.receiveRoomNotifications;
    const fallbackStatus = buildShareNotificationClientStatus({
      roomEnabled,
      appEnabled,
      permission,
      registrationReady: false,
    });

    setRoomNotificationClientStatus(fallbackStatus);

    if (isPreviewRuntime() || !hasSecureOrigin()) {
      return fallbackStatus;
    }

    setIsRefreshingRoomNotificationStatus(true);

    try {
      if (permission !== 'granted') {
        const nextStatus = buildShareNotificationClientStatus({
          roomEnabled,
          appEnabled,
          permission,
          registrationReady: false,
        });
        setRoomNotificationClientStatus(nextStatus);
        return nextStatus;
      }

      const registration = await getPushServiceWorkerRegistration();
      const deviceId = getSavedNotificationDeviceId().trim();

      if (!registration || !deviceId) {
        setRoomNotificationClientStatus(fallbackStatus);
        return fallbackStatus;
      }

      const subscription = await registration.pushManager.getSubscription();
      if (subscription) {
        await syncExistingWebPushSubscriptionRegistration(registration, { deviceId }).catch(() => null);
      }

      const nextStatus = buildShareNotificationClientStatus({
        roomEnabled,
        appEnabled,
        permission,
        registrationReady: Boolean(subscription),
      });
      setRoomNotificationClientStatus(nextStatus);
      return nextStatus;
    } catch {
      setRoomNotificationClientStatus(fallbackStatus);
      return fallbackStatus;
    } finally {
      setIsRefreshingRoomNotificationStatus(false);
    }
  }, [appConfig.chat.receiveRoomNotifications]);
  const ensureRoomNotificationRegistration = useCallback(async () => {
    if (isPreviewRuntime()) {
      throw new Error('미리보기 런타임에서는 알림 등록을 지원하지 않습니다.');
    }

    if (!hasSecureOrigin()) {
      throw new Error('알림은 HTTPS 또는 localhost 환경에서만 사용할 수 있습니다.');
    }

    if (isAppleMobileDevice() && !isStandaloneDisplayMode()) {
      throw new Error('아이폰에서는 홈 화면에 추가한 PWA에서만 웹 푸시를 사용할 수 있습니다.');
    }

    if (
      typeof window === 'undefined'
      || typeof Notification === 'undefined'
      || typeof navigator === 'undefined'
      || !('serviceWorker' in navigator)
      || !('PushManager' in window)
    ) {
      throw new Error('현재 브라우저에서는 웹 푸시를 지원하지 않습니다.');
    }

    let permission = Notification.permission;

    if (permission !== 'granted') {
      permission = await Notification.requestPermission();
    }

    if (permission !== 'granted') {
      throw new Error('브라우저 알림 권한을 허용한 뒤 다시 시도해 주세요.');
    }

    if (!appConfig.chat.receiveRoomNotifications) {
      const savedAppConfig = await saveAppConfigToServer({
        ...appConfig,
        chat: {
          ...appConfig.chat,
          receiveRoomNotifications: true,
        },
      }, {
        shareToken: normalizedToken,
        skipAutomationNotifications: true,
      });
      setStoredAppConfig(savedAppConfig);
    }

    let registration = await getPushServiceWorkerRegistration();

    if (!registration) {
      await waitForDuration(1500);
      registration = await getPushServiceWorkerRegistration();
    }

    if (!registration) {
      throw new Error('알림 서비스워커 준비가 아직 끝나지 않았습니다. 잠시 후 다시 시도해 주세요.');
    }

    const deviceId = getSavedNotificationDeviceId().trim();

    if (!deviceId) {
      throw new Error('현재 기기 알림 식별자를 확인하지 못했습니다.');
    }

    const subscription = await ensureWebPushSubscriptionRegistered(registration, { deviceId });
    const nextStatus = buildShareNotificationClientStatus({
      roomEnabled: true,
      appEnabled: true,
      permission: 'granted',
      registrationReady: Boolean(subscription),
    });
    setRoomNotificationClientStatus(nextStatus);
    return { registration, deviceId, subscription };
  }, [appConfig, normalizedToken]);
  const handleSendRoomNotificationTest = useCallback(async () => {
    if (!snapshot?.conversation.sessionId) {
      message.warning('공유 채팅방 정보를 다시 불러온 뒤 시도해 주세요.');
      return;
    }

    if (isPreviewRuntime()) {
      message.warning('미리보기 런타임에서는 테스트 알림 전송을 지원하지 않습니다.');
      return;
    }

    if (!hasSecureOrigin()) {
      message.warning('테스트 알림은 HTTPS 또는 localhost 환경에서만 확인할 수 있습니다.');
      return;
    }

    if (isAppleMobileDevice() && !isStandaloneDisplayMode()) {
      message.warning('아이폰에서는 홈 화면에 추가한 PWA에서만 웹 푸시 테스트를 확인할 수 있습니다.');
      return;
    }

    if (
      typeof window === 'undefined'
      || typeof Notification === 'undefined'
      || typeof navigator === 'undefined'
      || !('serviceWorker' in navigator)
      || !('PushManager' in window)
    ) {
      message.warning('현재 브라우저에서는 웹 푸시 테스트를 지원하지 않습니다.');
      return;
    }

    setIsSendingRoomNotificationTest(true);

    try {
      let permission = Notification.permission;

      if (permission !== 'granted') {
        permission = await Notification.requestPermission();
      }

      if (permission !== 'granted') {
        throw new Error('브라우저 알림 권한을 허용한 뒤 다시 시도해 주세요.');
      }

      const registration = await getPushServiceWorkerRegistration();

      if (!registration) {
        throw new Error('알림 서비스워커 준비가 아직 끝나지 않았습니다. 잠시 후 다시 시도해 주세요.');
      }

      const deviceId = getSavedNotificationDeviceId().trim();

      if (!deviceId) {
        throw new Error('현재 기기 알림 식별자를 확인하지 못했습니다.');
      }

      await ensureWebPushSubscriptionRegistered(registration, { deviceId });

      const result = await sendClientNotification({
        title: '공유채팅방 테스트 알림',
        body: `${snapshot.conversation.title?.trim() || '공유채팅방'} 알림 테스트입니다.`,
        threadId: `chat:${snapshot.conversation.sessionId}:share-notification-test`,
        targetDeviceIds: [deviceId],
        data: {
          category: 'chat',
          type: 'chat-share-room-test',
          sessionId: snapshot.conversation.sessionId,
          title: snapshot.conversation.title?.trim() || '공유채팅방',
        },
      });

      if (result.web.sentCount > 0) {
        message.success('현재 기기로 테스트 알림 전송을 요청했습니다.');
      } else if (shouldFallbackToLocalNotification(result)) {
        const shown = await showLocalClientNotification({
          title: '공유채팅방 테스트 알림',
          body: `${snapshot.conversation.title?.trim() || '공유채팅방'} 알림 테스트입니다.`,
          threadId: `chat:${snapshot.conversation.sessionId}:share-notification-test-local`,
          data: {
            category: 'chat',
            type: 'chat-share-room-test-local',
            sessionId: snapshot.conversation.sessionId,
          },
        });

        if (!shown) {
          throw new Error(result.web.reason || '테스트 알림 전송 대상을 찾지 못했습니다.');
        }

        message.warning('서버 푸시 전송은 확인되지 않아 현재 브라우저 로컬 알림으로 대체했습니다.');
      } else {
        throw new Error(result.web.reason || '테스트 알림 전송 결과를 확인하지 못했습니다.');
      }

      await refreshRoomNotificationStatus(editingRoomNotifyOffline);
    } catch (error) {
      message.error(error instanceof Error ? error.message : '테스트 알림 전송에 실패했습니다.');
      await refreshRoomNotificationStatus(editingRoomNotifyOffline);
    } finally {
      setIsSendingRoomNotificationTest(false);
    }
  }, [editingRoomNotifyOffline, message, refreshRoomNotificationStatus, snapshot?.conversation.sessionId, snapshot?.conversation.title]);
  useLayoutEffect(() => {
    if (typeof window === 'undefined') {
      return undefined;
    }

    const sharePathname = `${window.location.pathname}${window.location.search}${window.location.hash}`;
    const activeInstallAppEntry = findReadyPlayAppEntryById(programTarget?.appId);
    const activeInstallAppId = activeInstallAppEntry?.id ?? '';
    const manifestObjectUrl = activeInstallAppEntry
      ? createInstallManifestObjectUrl({
          startPath: buildSharePlayAppInstallPath(activeInstallAppId, normalizedToken),
          scope: '/play/apps',
          name: activeInstallAppEntry.name,
          shortName: activeInstallAppEntry.name,
          description: `${activeInstallAppEntry.name} 앱을 홈 화면에서 바로 엽니다.`,
          themeColor: resolveSharePlayAppInstallThemeColor(activeInstallAppId),
          backgroundColor: '#eff5ff',
        })
      : createChatShareManifestObjectUrl(sharePathname, snapshot?.conversation.title);
    const restoreManifest = activeInstallAppEntry
      ? swapInstallDocumentMetadata({
          manifestHref: manifestObjectUrl,
          title: activeInstallAppEntry.name,
          themeColor: resolveSharePlayAppInstallThemeColor(activeInstallAppId),
        })
      : swapManifestForChatShare(manifestObjectUrl, snapshot?.conversation.title);

    return () => {
      restoreManifest();
      if (manifestObjectUrl) {
        window.URL.revokeObjectURL(manifestObjectUrl);
      }
    };
  }, [normalizedToken, programTarget?.appId, snapshot?.conversation.title]);
  useEffect(() => {
    if (!hasWorkServerCommandApp) {
      setShareWorkServerCommand(null);
      return;
    }

    let cancelled = false;

    void fetchServerCommands({ shareToken: normalizedToken })
      .then((items) => {
        if (cancelled) {
          return;
        }

        setShareWorkServerCommand(items.find((item) => item.key === 'work-server') ?? null);
      })
      .catch((error) => {
        console.error('failed to load shared work-server command status', error);

        if (!cancelled) {
          setShareWorkServerCommand(null);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [hasWorkServerCommandApp, normalizedToken]);

  const setRequestAnchorRef = useCallback((requestId: string, element: HTMLElement | null) => {
    const normalizedRequestId = requestId.trim();

    if (!normalizedRequestId) {
      return;
    }

    if (!element) {
      requestAnchorRefs.current.delete(normalizedRequestId);
      return;
    }

    requestAnchorRefs.current.set(normalizedRequestId, element);
  }, []);
  const setResponseAnchorRef = useCallback((messageId: number, element: HTMLDivElement | null) => {
    if (!Number.isFinite(messageId)) {
      return;
    }

    if (!element) {
      responseAnchorRefs.current.delete(messageId);
      return;
    }

    responseAnchorRefs.current.set(messageId, element);
  }, []);
  const setPromptAnchorRef = useCallback((messageId: number, promptIndex: number, element: HTMLDivElement | null) => {
    if (!Number.isFinite(messageId) || !Number.isFinite(promptIndex)) {
      return;
    }

    const anchorKey = buildSharePromptAnchorKey(messageId, promptIndex);

    if (!element) {
      promptAnchorRefs.current.delete(anchorKey);
      return;
    }

    promptAnchorRefs.current.set(anchorKey, element);
  }, []);
  const { chatTypes, isLoading: isChatTypesLoading, errorMessage: chatTypesErrorMessage } = useChatTypeRegistry();
  const {
    defaultContexts,
    chatTypeDefaults,
    roomContexts,
    setStore: setChatContextSettingsStore,
    isLoading: isChatContextSettingsLoading,
    errorMessage: chatContextSettingsErrorMessage,
  } = useChatContextSettingsRegistry();
  const enabledChatTypes = useMemo(() => chatTypes.filter((item) => item.enabled), [chatTypes]);
  const enabledDefaultContexts = useMemo(() => defaultContexts.filter((item) => item.enabled), [defaultContexts]);
  const currentSharedChatTypeId = useMemo(() => {
    const requestChatTypeIds = [
      snapshot?.conversation.chatTypeId,
      snapshot?.conversation.lastChatTypeId,
      snapshot?.targetRequest.chatTypeId,
      ...(snapshot?.requests ?? []).map((item) => item.chatTypeId),
    ];

    return requestChatTypeIds.find((item) => String(item ?? '').trim())?.trim() ?? null;
  }, [snapshot?.conversation.chatTypeId, snapshot?.conversation.lastChatTypeId, snapshot?.requests, snapshot?.targetRequest.chatTypeId]);
  const activeRoomContextSettings = useMemo(
    () => resolveChatRoomContextSettings(roomContexts, snapshot?.conversation.sessionId ?? null),
    [roomContexts, snapshot?.conversation.sessionId],
  );
  const minimizedProgramTarget = programMinimizedTarget ?? programTarget;
  const openSharedRoomSettings = useCallback(() => {
    if (!snapshot?.conversation.sessionId) {
      return;
    }

    const nextChatTypeId = currentSharedChatTypeId ?? enabledChatTypes[0]?.id ?? null;
    const fallbackRoomTitle =
      snapshot.conversation.title?.trim()
      || snapshot.targetRequest.userText?.trim()
      || snapshot.requests?.[0]?.userText?.trim()
      || '-';
    setEditingRoomTitle(fallbackRoomTitle);
    setEditingRoomChatTypeId(nextChatTypeId);
    setEditingRoomDefaultContextIds(resolveShareRoomDefaultContextIds(activeRoomContextSettings, chatTypeDefaults, nextChatTypeId));
    setIsEditingRoomDefaultContextsDirty(false);
    setEditingRoomCustomContextTitle(activeRoomContextSettings?.customContextTitle ?? '');
    setEditingRoomCustomContextContent(activeRoomContextSettings?.customContextContent ?? '');
    setEditingRoomNotifyOffline(snapshot.conversation.notifyOffline === true);
    setEditingRoomUseAccessPin(snapshot.share.hasAccessPin === true);
    setEditingRoomAccessPin('');
    setEditingRoomAccessPinPromptTtlMinutes(resolveAccessPinPromptTtlMinutes(snapshot.share.accessPinPromptTtlMinutes));
    setRoomSettingsTabKey('chat-type');
    setIsRoomSettingsOpen(true);
  }, [
    activeRoomContextSettings?.customContextContent,
    activeRoomContextSettings?.customContextTitle,
    activeRoomContextSettings?.defaultContextIds,
    chatTypeDefaults,
    currentSharedChatTypeId,
    enabledChatTypes,
    snapshot?.conversation.notifyOffline,
    snapshot?.conversation.title,
    snapshot?.requests,
    snapshot?.share.accessPinPromptTtlMinutes,
    snapshot?.share.hasAccessPin,
    snapshot?.conversation.sessionId,
    snapshot?.targetRequest.userText,
  ]);
  useEffect(() => {
    if (!isRoomSettingsOpen) {
      return;
    }

    void refreshRoomNotificationStatus(editingRoomNotifyOffline);
  }, [appConfig.chat.receiveRoomNotifications, editingRoomNotifyOffline, isRoomSettingsOpen, refreshRoomNotificationStatus]);
  const handleSaveSharedRoomSettings = useCallback(async () => {
    if (!snapshot?.conversation.sessionId) {
      setIsRoomSettingsOpen(false);
      return;
    }

    const nextChatType = enabledChatTypes.find((item) => item.id === editingRoomChatTypeId) ?? null;

    if (canManageSharedRoomSettings && !nextChatType) {
      message.warning('채팅유형을 먼저 선택하세요.');
      return;
    }

    if (!canManageSharedRoomSettings && !canEditSharedRoomAccessPin) {
      setIsRoomSettingsOpen(false);
      return;
    }

    const normalizedDefaultContextIds = Array.from(
      new Set(
        editingRoomDefaultContextIds
          .map((item) => item.trim())
          .filter((item) => enabledDefaultContexts.some((context) => context.id === item)),
      ),
    );
    const inheritedDefaultContextIds = resolveChatTypeDefaultContextIds(chatTypeDefaults, nextChatType?.id ?? null);
    const nextCustomContextTitle = editingRoomCustomContextTitle.trim();
    const nextCustomContextContent = editingRoomCustomContextContent.trim();
    const shouldPersistRoomDefaultContextIds = !areStringListsEqual(normalizedDefaultContextIds, inheritedDefaultContextIds);
    const shouldPersistRoomCustomContext = Boolean(nextCustomContextTitle || nextCustomContextContent);
    const currentRoomDefaultContextIds = activeRoomContextSettings?.defaultContextIds ?? [];
    const currentRoomCustomContextTitle = activeRoomContextSettings?.customContextTitle?.trim() ?? '';
    const currentRoomCustomContextContent = activeRoomContextSettings?.customContextContent?.trim() ?? '';
    const currentRoomCodexParticipants = activeRoomContextSettings?.codexParticipants ?? [];
    const shouldSaveRoomContextSettings =
      canManageSharedRoomSettings
      && (
        !areStringListsEqual(normalizedDefaultContextIds, currentRoomDefaultContextIds)
        || nextCustomContextTitle !== currentRoomCustomContextTitle
        || nextCustomContextContent !== currentRoomCustomContextContent
      );
    const normalizedRoomTitle = editingRoomTitle.trim();
    const normalizedAccessPin = editingRoomAccessPin.trim();
    const currentHasAccessPin = snapshot?.share.hasAccessPin === true;
    const currentAccessPinPromptTtlMinutes = resolveAccessPinPromptTtlMinutes(snapshot?.share.accessPinPromptTtlMinutes);
    const shouldSaveConversationSettings =
      canManageSharedRoomSettings
      && Boolean(nextChatType)
      && (
        normalizedRoomTitle !== (snapshot?.conversation.title?.trim() || '')
        || !(snapshot?.conversation.title?.trim())
        || currentSharedChatTypeId !== nextChatType.id
        || snapshot.conversation.notifyOffline !== editingRoomNotifyOffline
      );

    if (canManageSharedRoomSettings && !normalizedRoomTitle) {
      message.warning('채팅방 이름을 입력하세요.');
      return;
    }

    if (canEditSharedRoomAccessPin && editingRoomUseAccessPin && !currentHasAccessPin && !normalizedAccessPin) {
      message.warning('비밀번호를 새로 켜려면 숫자 4자리를 입력하세요.');
      return;
    }

    if (canEditSharedRoomAccessPin && normalizedAccessPin && !/^\d{4}$/u.test(normalizedAccessPin)) {
      message.warning('비밀번호는 숫자 4자리로 입력하세요.');
      return;
    }

    setIsSavingRoomSettings(true);

    try {
      if (
        shouldSaveConversationSettings
        && editingRoomNotifyOffline
        && (
          snapshot.conversation.notifyOffline !== editingRoomNotifyOffline
          || !appConfig.chat.receiveRoomNotifications
          || roomNotificationClientStatus.tone !== 'success'
        )
      ) {
        await ensureRoomNotificationRegistration();
      }

      if (shouldSaveRoomContextSettings) {
        const shouldKeepRoomContextRecord =
          shouldPersistRoomDefaultContextIds
          || shouldPersistRoomCustomContext
          || currentRoomCodexParticipants.length > 0;
        const nextRoomContexts = shouldKeepRoomContextRecord
          ? upsertChatRoomContextSettings(roomContexts, {
              sessionId: snapshot.conversation.sessionId,
              defaultContextIds: normalizedDefaultContextIds,
              customContextTitle: nextCustomContextTitle,
              customContextContent: nextCustomContextContent,
              codexParticipants: currentRoomCodexParticipants,
            })
          : roomContexts.filter((item) => item.sessionId !== snapshot.conversation.sessionId);

        await setChatContextSettingsStore({
          defaultContexts,
          chatTypeDefaults,
          roomContexts: nextRoomContexts,
        });
      }

      const shouldSaveAccessPinSettings =
        canEditSharedRoomAccessPin
        && (
          (!editingRoomUseAccessPin && currentHasAccessPin)
          || (editingRoomUseAccessPin && !currentHasAccessPin)
          || Boolean(normalizedAccessPin)
          || (editingRoomUseAccessPin && currentHasAccessPin && editingRoomAccessPinPromptTtlMinutes !== currentAccessPinPromptTtlMinutes)
        );

      const nextAccessPinUpdate =
        canEditSharedRoomAccessPin
          ? !editingRoomUseAccessPin
            ? currentHasAccessPin
              ? null
              : undefined
            : normalizedAccessPin
              ? normalizedAccessPin
              : undefined
          : undefined;

      if (shouldSaveAccessPinSettings || shouldSaveConversationSettings) {
        const roomSecurity = await saveChatShareRoomSettings(normalizedToken, {
          accessPin: nextAccessPinUpdate,
          accessPinPromptTtlMinutes: editingRoomUseAccessPin ? editingRoomAccessPinPromptTtlMinutes : null,
          chatTypeId: shouldSaveConversationSettings ? nextChatType?.id ?? null : undefined,
          chatTypeLabel: shouldSaveConversationSettings ? nextChatType?.name ?? null : undefined,
          title: shouldSaveConversationSettings ? normalizedRoomTitle : undefined,
          notifyOffline: shouldSaveConversationSettings ? editingRoomNotifyOffline : undefined,
        });

        if (nextAccessPinUpdate === null) {
          setAccessPinInput('');
        }

        if (!roomSecurity.hasAccessPin) {
          setAccessPinSubmitError('');
        }

        setSnapshot((previous) =>
          previous
            ? {
                ...previous,
                share: {
                  ...previous.share,
                  hasAccessPin: roomSecurity.hasAccessPin,
                  accessPinPromptTtlMinutes: roomSecurity.accessPinPromptTtlMinutes,
                },
                conversation: roomSecurity.conversation
                  ? {
                      ...previous.conversation,
                      ...roomSecurity.conversation,
                      title: roomSecurity.conversation.title ?? previous.conversation.title,
                    }
                  : previous.conversation,
              }
            : previous,
        );
      }

      message.success(canManageSharedRoomSettings ? '공유 채팅방 설정을 저장했습니다.' : '공유 비밀번호를 저장했습니다.');
      setIsEditingRoomDefaultContextsDirty(false);
      setIsRoomSettingsOpen(false);
    } catch (error) {
      message.error(error instanceof Error ? error.message : '공유 채팅방 설정 저장에 실패했습니다.');
    } finally {
      setIsSavingRoomSettings(false);
    }
  }, [
    chatTypeDefaults,
    canEditSharedRoomAccessPin,
    canManageSharedRoomSettings,
    defaultContexts,
    editingRoomChatTypeId,
    editingRoomTitle,
    editingRoomAccessPin,
    editingRoomAccessPinPromptTtlMinutes,
    editingRoomCustomContextContent,
    editingRoomCustomContextTitle,
    editingRoomDefaultContextIds,
    editingRoomNotifyOffline,
    editingRoomUseAccessPin,
    enabledChatTypes,
    enabledDefaultContexts,
    ensureRoomNotificationRegistration,
    currentSharedChatTypeId,
    message,
    normalizedToken,
    roomNotificationClientStatus.tone,
    activeRoomContextSettings?.codexParticipants,
    activeRoomContextSettings?.customContextContent,
    activeRoomContextSettings?.customContextTitle,
    activeRoomContextSettings?.defaultContextIds,
    roomContexts,
    setChatContextSettingsStore,
    snapshot?.conversation.notifyOffline,
    snapshot?.conversation.sessionId,
    snapshot?.share.accessPinPromptTtlMinutes,
    snapshot?.share.hasAccessPin,
  ]);
  useEffect(() => {
    if (!minimizedProgramTarget || !isProgramMinimized) {
      programMinimizedDragStateRef.current = null;
      programMinimizedMovedRef.current = false;
      return;
    }

    const clampPosition = (position: { x: number; y: number }) => {
      const cardWidth = programMinimizedCardRef.current?.offsetWidth ?? PROGRAM_MINIMIZED_DEFAULT_WIDTH;
      const cardHeight = programMinimizedCardRef.current?.offsetHeight ?? PROGRAM_MINIMIZED_DEFAULT_HEIGHT;
      const maxX = Math.max(PROGRAM_MINIMIZED_VIEWPORT_PADDING, window.innerWidth - cardWidth - PROGRAM_MINIMIZED_VIEWPORT_PADDING);
      const maxY = Math.max(PROGRAM_MINIMIZED_VIEWPORT_PADDING, window.innerHeight - cardHeight - PROGRAM_MINIMIZED_VIEWPORT_PADDING);

      return {
        x: clampProgramMinimizedValue(position.x, PROGRAM_MINIMIZED_VIEWPORT_PADDING, maxX),
        y: clampProgramMinimizedValue(position.y, PROGRAM_MINIMIZED_VIEWPORT_PADDING, maxY),
      };
    };

    const syncPosition = (position: { x: number; y: number }) => {
      const nextPosition = clampPosition(position);
      programMinimizedPositionRef.current = nextPosition;
      setProgramMinimizedPosition(nextPosition);
    };

    const handleResize = () => {
      syncPosition(programMinimizedPositionRef.current);
    };

    const handlePointerMove = (event: PointerEvent) => {
      const dragState = programMinimizedDragStateRef.current;

      if (!dragState || dragState.pointerId !== event.pointerId) {
        return;
      }

      const deltaX = event.clientX - dragState.lastX;
      const deltaY = event.clientY - dragState.lastY;

      if (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1) {
        programMinimizedMovedRef.current = true;
      }

      dragState.lastX = event.clientX;
      dragState.lastY = event.clientY;

      syncPosition({
        x: programMinimizedPositionRef.current.x + deltaX,
        y: programMinimizedPositionRef.current.y + deltaY,
      });
    };

    const finishPointerDrag = (event: PointerEvent) => {
      const dragState = programMinimizedDragStateRef.current;

      if (!dragState || dragState.pointerId !== event.pointerId) {
        return;
      }

      if (dragState.captureTarget.hasPointerCapture(event.pointerId)) {
        dragState.captureTarget.releasePointerCapture(event.pointerId);
      }

      programMinimizedDragStateRef.current = null;
    };

    window.addEventListener('resize', handleResize);
    window.addEventListener('pointermove', handlePointerMove);
    window.addEventListener('pointerup', finishPointerDrag);
    window.addEventListener('pointercancel', finishPointerDrag);
    handleResize();

    return () => {
      window.removeEventListener('resize', handleResize);
      window.removeEventListener('pointermove', handlePointerMove);
      window.removeEventListener('pointerup', finishPointerDrag);
      window.removeEventListener('pointercancel', finishPointerDrag);
    };
  }, [isProgramMinimized, minimizedProgramTarget]);

  const handleProgramMinimizedPointerDown = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
    if (event.pointerType === 'mouse' && event.button !== 0) {
      return;
    }

    const captureTarget = event.currentTarget;
    programMinimizedDragStateRef.current = {
      pointerId: event.pointerId,
      lastX: event.clientX,
      lastY: event.clientY,
      captureTarget,
    };
    programMinimizedMovedRef.current = false;
    captureTarget.setPointerCapture(event.pointerId);
  }, []);

  const handleRestoreProgram = useCallback(() => {
    if (programMinimizedTarget) {
      setProgramTarget(programMinimizedTarget);
    }

    setIsProgramMinimized(false);
  }, [programMinimizedTarget]);

  const handleReloadPage = useCallback(() => {
    if (typeof window === 'undefined') {
      return;
    }

    window.location.reload();
  }, []);

  useEffect(() => {
    setAccessPinInput('');
    setAccessPinSubmitError('');
    setRequiresAccessPin(false);
  }, [normalizedToken]);

  const handleCloseProgram = useCallback(() => {
    setProgramTarget(null);
    setProgramMinimizedTarget(null);
    setIsProgramMinimized(false);
  }, []);

  const minimizedProgramCard = minimizedProgramTarget && isProgramMinimized ? (
    <div
      ref={programMinimizedCardRef}
      className="chat-share-page__program-minimized"
      style={{
        transform: `translate3d(${programMinimizedPosition.x}px, ${programMinimizedPosition.y}px, 0)`,
        zIndex: SHARE_PROGRAM_MINIMIZED_Z_INDEX,
      }}
    >
      <div
        className="chat-share-page__program-minimized-drag"
        onPointerDown={handleProgramMinimizedPointerDown}
      >
        <span className="chat-share-page__program-minimized-drag-grip" aria-hidden="true" />
        <span className="chat-share-page__program-minimized-title">{minimizedProgramTarget.label}</span>
      </div>
      <div className="chat-share-page__program-minimized-actions">
        <Button
          type="primary"
          size="small"
          icon={<AppstoreOutlined />}
          className="chat-share-page__program-minimized-button"
          onClick={handleRestoreProgram}
        >
          열기
        </Button>
        <Button
          type="text"
          size="small"
          className="chat-share-page__program-minimized-icon chat-share-page__program-minimized-close"
          icon={<CloseOutlined />}
          aria-label="프로그램 닫기"
          onClick={handleCloseProgram}
        />
      </div>
    </div>
  ) : null;
  const syncScrollJumpVisibility = useCallback(() => {
    const scrollContainer = scrollContainerRef.current;

    if (!scrollContainer) {
      setShowScrollToTop(false);
      setShowScrollToBottom(false);
      return;
    }

    const topDistance = scrollContainer.scrollTop;
    const bottomDistance = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
    const maxScrollDistance = Math.max(0, scrollContainer.scrollHeight - scrollContainer.clientHeight);
    const isAtTop = topDistance <= SCROLL_JUMP_HIDE_THRESHOLD;
    const isAtBottom = bottomDistance <= SCROLL_JUMP_HIDE_THRESHOLD;
    const scrollDelta = topDistance - lastScrollTopRef.current;

    lastScrollTopRef.current = topDistance;

    if (maxScrollDistance < SCROLL_JUMP_MIN_OVERFLOW) {
      programmaticScrollTargetRef.current = null;
      setShowScrollToTop(false);
      setShowScrollToBottom(false);
      return;
    }

    if (programmaticScrollTargetRef.current === 'top') {
      if (isAtTop) {
        programmaticScrollTargetRef.current = null;
      }
      setShowScrollToTop(false);
      setShowScrollToBottom(false);
      return;
    }

    if (programmaticScrollTargetRef.current === 'bottom') {
      if (isAtBottom) {
        programmaticScrollTargetRef.current = null;
      }
      setShowScrollToTop(false);
      setShowScrollToBottom(false);
      return;
    }

    if (Math.abs(scrollDelta) < SCROLL_JUMP_DIRECTION_THRESHOLD) {
      setShowScrollToTop(false);
      setShowScrollToBottom(false);
      return;
    }

    if (scrollIdleTimerRef.current) {
      window.clearTimeout(scrollIdleTimerRef.current);
    }

    scrollIdleTimerRef.current = window.setTimeout(() => {
      scrollIdleTimerRef.current = null;
      setShowScrollToTop(false);
      setShowScrollToBottom(false);
    }, SCROLL_JUMP_IDLE_HIDE_DELAY_MS);

    if (scrollDelta < 0) {
      setShowScrollToTop(!isAtTop);
      setShowScrollToBottom(false);
      return;
    }

    setShowScrollToTop(false);
    setShowScrollToBottom(!isAtBottom);
  }, []);

  const queueScrollJumpVisibilitySync = useCallback(() => {
    if (scrollSyncFrameRef.current) {
      window.cancelAnimationFrame(scrollSyncFrameRef.current);
    }

    scrollSyncFrameRef.current = window.requestAnimationFrame(() => {
      scrollSyncFrameRef.current = null;
      syncScrollJumpVisibility();
    });
  }, [syncScrollJumpVisibility]);

  const handleScrollContainerScroll = useCallback(() => {
    queueScrollJumpVisibilitySync();
  }, [queueScrollJumpVisibilitySync]);

  const handleScrollToTop = useCallback(() => {
    const scrollContainer = scrollContainerRef.current;

    if (!scrollContainer) {
      return;
    }

    programmaticScrollTargetRef.current = 'top';
    setShowScrollToTop(false);
    setShowScrollToBottom(false);
    scrollContainer.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  }, []);

  const handleScrollToBottom = useCallback(() => {
    const scrollContainer = scrollContainerRef.current;

    if (!scrollContainer) {
      return;
    }

    programmaticScrollTargetRef.current = 'bottom';
    setShowScrollToTop(false);
    setShowScrollToBottom(false);
    scrollContainer.scrollTo({
      top: scrollContainer.scrollHeight,
      behavior: 'smooth',
    });
  }, []);

  useEffect(() => {
    const pageElement = pageRef.current;

    if (!pageElement) {
      return undefined;
    }

    const flushDeferredSnapshot = () => {
      if (!deferredSnapshotRef.current) {
        return;
      }

      setSnapshot(deferredSnapshotRef.current);
      deferredSnapshotRef.current = null;
    };

    const handleFocusIn = (event: FocusEvent) => {
      isInteractingRef.current = isSnapshotDeferrableFocusTarget(event.target);
    };

    const handleFocusOut = () => {
      window.setTimeout(() => {
        const activeElement = document.activeElement;
        const stillInside = activeElement instanceof Node && pageElement.contains(activeElement);

        if (stillInside && isSnapshotDeferrableFocusTarget(activeElement)) {
          return;
        }

        isInteractingRef.current = false;
        flushDeferredSnapshot();
      }, 0);
    };

    pageElement.addEventListener('focusin', handleFocusIn);
    pageElement.addEventListener('focusout', handleFocusOut);

    return () => {
      pageElement.removeEventListener('focusin', handleFocusIn);
      pageElement.removeEventListener('focusout', handleFocusOut);
    };
  }, []);

  useEffect(() => {
    const scrollContainer = scrollContainerRef.current;

    if (!scrollContainer) {
      return undefined;
    }

    const resizeObserver =
      typeof ResizeObserver === 'undefined'
        ? null
        : new ResizeObserver(() => {
            queueScrollJumpVisibilitySync();
          });

    lastScrollTopRef.current = scrollContainer.scrollTop;
    syncScrollJumpVisibility();
    window.addEventListener('resize', queueScrollJumpVisibilitySync);
    resizeObserver?.observe(scrollContainer);
    resizeObserver?.observe(scrollContainer.firstElementChild ?? scrollContainer);

    return () => {
      if (scrollSyncFrameRef.current) {
        window.cancelAnimationFrame(scrollSyncFrameRef.current);
        scrollSyncFrameRef.current = null;
      }
      if (scrollIdleTimerRef.current) {
        window.clearTimeout(scrollIdleTimerRef.current);
        scrollIdleTimerRef.current = null;
      }
      window.removeEventListener('resize', queueScrollJumpVisibilitySync);
      resizeObserver?.disconnect();
    };
  }, [queueScrollJumpVisibilitySync, syncScrollJumpVisibility]);

  const refreshSnapshot = useCallback(async (options?: { initialLoad?: boolean; silent?: boolean; sharePin?: string | null }) => {
    if (!normalizedToken) {
      return false;
    }

    const initialLoad = options?.initialLoad === true;
    const silent = options?.silent === true;

    if (snapshotRefreshPromiseRef.current) {
      if (!initialLoad) {
        pendingSilentRefreshRef.current = pendingSilentRefreshRef.current || silent;
      }
      return snapshotRefreshPromiseRef.current;
    }

    if (options?.initialLoad) {
      setIsLoading(true);
    } else {
      setIsRefreshing(true);
    }

    const refreshTask = (async () => {
      try {
        const nextSnapshot = await fetchChatShareSnapshot(normalizedToken, {
          sharePin: options?.sharePin,
        });

        const shouldApplyImmediately =
          !isInteractingRef.current || initialLoad || requiresAccessPinRef.current || !hasSnapshotRef.current;

        if (!shouldApplyImmediately) {
          deferredSnapshotRef.current = nextSnapshot;
        } else {
          setSnapshot(nextSnapshot);
          deferredSnapshotRef.current = null;
        }
        if (nextSnapshot.share.hasAccessPin) {
          const resolvedPin = normalizeAccessPinInput(options?.sharePin ?? '');
          const persistedPin = resolvedPin || getStoredChatShareAccessPin(normalizedToken);
          if (persistedPin) {
            setStoredChatShareAccessPin(normalizedToken, persistedPin, {
              expiresAt: nextSnapshot.share.accessPinSessionExpiresAt,
              ttlMinutes: nextSnapshot.share.accessPinPromptTtlMinutes,
            });
          }
        } else {
          setStoredChatShareAccessPin(normalizedToken, null);
        }
        setErrorMessage('');
        setRequiresAccessPin(false);
        setAccessPinSubmitError('');
        return true;
      } catch (error) {
        if (error instanceof ChatApiError && error.status === 401 && (error.code === 'share_pin_required' || error.code === 'share_pin_invalid')) {
          setStoredChatShareAccessPin(normalizedToken, null);
          setRequiresAccessPin(true);

          if (error.code === 'share_pin_invalid') {
            setAccessPinInput('');
            setAccessPinSubmitError(error.message);
          } else {
            setAccessPinSubmitError('');
          }
        }

        if (!silent) {
          setErrorMessage(error instanceof Error ? error.message : '공유 화면을 불러오지 못했습니다.');
        }
        return false;
      } finally {
        snapshotRefreshPromiseRef.current = null;
        setIsLoading(false);
        setIsRefreshing(false);

        if (pendingSilentRefreshRef.current) {
          pendingSilentRefreshRef.current = false;
          window.setTimeout(() => {
            void refreshSnapshot({ silent: true });
          }, 0);
        }
      }
    })();

    snapshotRefreshPromiseRef.current = refreshTask;
    return refreshTask;
  }, [normalizedToken]);

  const scheduleSnapshotRefresh = useCallback(
    (delayMs = 120) => {
      if (!normalizedToken) {
        return;
      }

      if (liveRefreshTimerRef.current != null) {
        window.clearTimeout(liveRefreshTimerRef.current);
      }

      liveRefreshTimerRef.current = window.setTimeout(() => {
        liveRefreshTimerRef.current = null;
        void refreshSnapshot({ silent: true });
      }, delayMs);
    },
    [normalizedToken, refreshSnapshot],
  );

  useEffect(() => {
    if (!normalizedToken) {
      setErrorMessage('공유 링크가 없습니다.');
      setIsLoading(false);
      return undefined;
    }

    void refreshSnapshot({ initialLoad: true });
    return undefined;
  }, [normalizedToken, refreshSnapshot]);

  const handleUnlockShare = useCallback(async (inputPin?: string) => {
    const normalizedPin = normalizeAccessPinInput(inputPin ?? accessPinInput.trim());

    if (!/^\d{4}$/.test(normalizedPin)) {
      setAccessPinSubmitError('비밀번호는 숫자 4자리로 입력하세요.');
      return;
    }

    setAccessPinInput(normalizedPin);
    setAccessPinSubmitError('');
    await refreshSnapshot({ initialLoad: true, sharePin: normalizedPin });
  }, [accessPinInput, refreshSnapshot]);

  useEffect(() => {
    const sessionExpiresAt = snapshot?.share.accessPinSessionExpiresAt?.trim() ?? '';

    if (!normalizedToken || !snapshot?.share.hasAccessPin || !sessionExpiresAt) {
      return undefined;
    }
    const expiresAtMs = Date.parse(sessionExpiresAt);

    if (!Number.isFinite(expiresAtMs)) {
      return undefined;
    }

    const remainingMs = expiresAtMs - Date.now();

    if (remainingMs <= 0) {
      setStoredChatShareAccessPin(normalizedToken, null);
      setAccessPinInput('');
      setAccessPinSubmitError('유지시간이 지나 비밀번호를 다시 입력해 주세요.');
      setRequiresAccessPin(true);
      return undefined;
    }

    const timeoutId = window.setTimeout(() => {
      setStoredChatShareAccessPin(normalizedToken, null);
      setAccessPinInput('');
      setAccessPinSubmitError('유지시간이 지나 비밀번호를 다시 입력해 주세요.');
      setRequiresAccessPin(true);
    }, remainingMs);

    return () => {
      window.clearTimeout(timeoutId);
    };
  }, [normalizedToken, snapshot?.share.accessPinSessionExpiresAt, snapshot?.share.hasAccessPin]);

  useEffect(() => {
    const sessionId = snapshot?.share.sessionId?.trim() ?? '';

    if (!normalizedToken || !sessionId || typeof window === 'undefined' || requiresAccessPin) {
      return undefined;
    }

    let isDisposed = false;
    let reconnectTimerId: number | null = null;
    let disconnectTimerId: number | null = null;
    let socket: WebSocket | null = null;

    const clearDisconnectTimer = () => {
      if (disconnectTimerId != null) {
        window.clearTimeout(disconnectTimerId);
        disconnectTimerId = null;
      }
    };

    const markDisconnected = () => {
      clearDisconnectTimer();
      disconnectTimerId = window.setTimeout(() => {
        disconnectTimerId = null;

        if (!isDisposed) {
          setIsLiveConnected(false);
        }
      }, 1500);
    };

    const connect = () => {
      if (isDisposed) {
        return;
      }

      const websocketUrl = resolveChatWebSocketUrl(sessionId, undefined, undefined, normalizedToken);

      if (!websocketUrl) {
        setIsLiveConnected(false);
        return;
      }

      socket = new WebSocket(websocketUrl);

      socket.addEventListener('open', () => {
        if (isDisposed) {
          return;
        }

        clearDisconnectTimer();
        setIsLiveConnected(true);
        scheduleSnapshotRefresh(0);
      });

      socket.addEventListener('message', (event) => {
        if (isDisposed || typeof event.data !== 'string') {
          return;
        }

        try {
          const payload = JSON.parse(event.data) as ChatServerEvent;

          if (payload.sessionId !== sessionId) {
            return;
          }

          if (
            payload.type === 'chat:status' ||
            payload.type === 'chat:runtime' ||
            payload.type === 'chat:runtime:detail' ||
            payload.type === 'notification:messages-updated'
          ) {
            return;
          }
        } catch {
          // 공유 화면은 세부 이벤트를 직접 반영하지 않고 스냅샷만 다시 조회한다.
        }

        scheduleSnapshotRefresh();
      });

      socket.addEventListener('error', () => {
        if (isDisposed) {
          return;
        }

        markDisconnected();
      });

      socket.addEventListener('close', () => {
        if (isDisposed) {
          return;
        }

        markDisconnected();
        reconnectTimerId = window.setTimeout(() => {
          reconnectTimerId = null;
          connect();
        }, 1500);
      });
    };

    connect();

    return () => {
      isDisposed = true;

      if (reconnectTimerId != null) {
        window.clearTimeout(reconnectTimerId);
      }

      clearDisconnectTimer();
      socket?.close();
    };
  }, [normalizedToken, requiresAccessPin, scheduleSnapshotRefresh, snapshot?.share.sessionId]);

  useEffect(() => {
    return () => {
      if (immediateSendHoldTimerRef.current !== null) {
        window.clearTimeout(immediateSendHoldTimerRef.current);
      }
    };
  }, []);

  useEffect(() => {
    const handleResumeSync = () => {
      if (document.visibilityState === 'hidden') {
        return;
      }

      setNowMs(Date.now());
      void refreshSnapshot({ silent: true });
    };

    window.addEventListener('focus', handleResumeSync);
    window.addEventListener('pageshow', handleResumeSync);
    window.addEventListener('online', handleResumeSync);
    document.addEventListener('visibilitychange', handleResumeSync);

    return () => {
      window.removeEventListener('focus', handleResumeSync);
      window.removeEventListener('pageshow', handleResumeSync);
      window.removeEventListener('online', handleResumeSync);
      document.removeEventListener('visibilitychange', handleResumeSync);
    };
  }, [refreshSnapshot]);

  const handleSubmitPrompt = async (
    payload: PromptSubmitPayload & { parentRequestId: string; promptIndex: number; sourceMessageId: number },
  ) => {
    try {
      await submitChatSharePrompt(normalizedToken, {
        parentRequestId: payload.parentRequestId,
        promptIndex: payload.promptIndex,
        promptTitle: payload.promptTitle,
        promptSignature: payload.promptSignature,
        sourceMessageId: payload.sourceMessageId,
        selectedValues: payload.selection.selectedValues,
        freeText: payload.selection.freeText,
        stepSelections: payload.selection.stepSelections,
        summaryText: payload.selection.summaryText ?? null,
        attachments: payload.selection.attachments ?? payload.attachments ?? [],
        followupText: payload.text,
        mode: payload.mode,
        contextRef: payload.contextRef ?? null,
      });
      message.success('답변을 전송했습니다. 최신 내용을 다시 불러옵니다.');
      void refreshSnapshot({ silent: true });
      return true;
    } catch (error) {
      if (isShareSendDelayError(error)) {
        message.warning('전송 후 응답 확인이 지연되고 있습니다. 연결 복구 시 최신 내용을 다시 불러옵니다.');
        return false;
      }

      message.error(error instanceof Error ? error.message : 'prompt 답변을 전송하지 못했습니다.');
      return false;
    }
  };

  const updatePendingPromptSelection = useCallback((selectionKey: string, selection: PromptDraftSelection | null) => {
    setPendingPromptSelections((current) => {
      if (!selection) {
        if (!(selectionKey in current)) {
          return current;
        }

        const next = { ...current };
        delete next[selectionKey];
        return next;
      }

      return {
        ...current,
        [selectionKey]: {
          ...selection,
          status: 'draft',
        },
      };
    });
  }, []);

  const markPendingPromptSelectionSubmitted = useCallback((selectionKey: string, selection: PromptDraftSelection) => {
    setPendingPromptSelections((current) => ({
      ...current,
      [selectionKey]: {
        ...selection,
        status: 'submitted',
      },
    }));
  }, []);

  const handleCompletePrompt = async (requestId: string) => {
    const normalizedRequestId = requestId.trim();

    if (!normalizedToken || !normalizedRequestId) {
      return;
    }

    const confirmed = await new Promise<boolean>((resolve) => {
      modal.confirm({
        title: 'prompt 완료 처리',
        content: '이 요청의 prompt 선택대기를 수동 완료 처리할까요?',
        okText: '완료 처리',
        cancelText: '취소',
        centered: true,
        onOk: async () => {
          resolve(true);
        },
        onCancel: () => {
          resolve(false);
        },
      });
    });

    if (!confirmed) {
      return;
    }

    setPendingPromptCompletionRequestIds((current) => Array.from(new Set([...current, normalizedRequestId])));

    try {
      await completeChatShareManualBadge(normalizedToken, {
        parentRequestId: normalizedRequestId,
        type: 'prompt',
      });
      message.success('prompt 완료 상태를 저장했습니다.');
      void refreshSnapshot({ silent: true });
    } catch (error) {
      message.error(error instanceof Error ? error.message : 'prompt 완료 상태를 저장하지 못했습니다.');
    } finally {
      setPendingPromptCompletionRequestIds((current) => current.filter((item) => item !== normalizedRequestId));
    }
  };

  const handleCompleteVerification = async (requestId: string) => {
    const normalizedRequestId = requestId.trim();

    if (
      !normalizedToken ||
      !normalizedRequestId ||
      pendingVerificationCompletionRequestIds.includes(normalizedRequestId) ||
      sortedRequests.some(
        (request) => request.requestId === normalizedRequestId && Boolean(request.manualVerificationCompletedAt),
      )
    ) {
      return;
    }

    const confirmed = await new Promise<boolean>((resolve) => {
      modal.confirm({
        title: '응답 확인 처리',
        content: '이 요청의 일반 답변을 응답 확인 완료로 처리할까요?',
        okText: '완료 처리',
        cancelText: '취소',
        centered: true,
        onOk: async () => {
          resolve(true);
        },
        onCancel: () => {
          resolve(false);
        },
      });
    });

    if (!confirmed) {
      return;
    }

    setPendingVerificationCompletionRequestIds((current) => Array.from(new Set([...current, normalizedRequestId])));

    try {
      const updatedRequest = await completeChatShareManualBadge(normalizedToken, {
        parentRequestId: normalizedRequestId,
        type: 'verification',
      });
      setSnapshot((current) => (current ? replaceChatShareSnapshotRequest(current, updatedRequest) : current));
      message.success('응답 확인 상태를 저장했습니다.');
    } catch (error) {
      message.error(error instanceof Error ? error.message : '응답 확인 상태를 저장하지 못했습니다.');
    } finally {
      setPendingVerificationCompletionRequestIds((current) => current.filter((item) => item !== normalizedRequestId));
    }
  };

  const handleCancelDisconnectedRequest = async (requestId: string) => {
    const normalizedRequestId = requestId.trim();

    if (!normalizedToken || !normalizedRequestId || pendingRequestCancellationIds.includes(normalizedRequestId)) {
      return;
    }

    const targetRequest = sortedRequests.find((request) => request.requestId === normalizedRequestId) ?? null;

    if (
      !targetRequest
      || targetRequest.hasResponse
      || targetRequest.status !== 'failed'
      || (targetRequest.statusMessage?.trim() ?? '') !== '중단된 오래된 요청'
    ) {
      return;
    }

    const confirmed = await new Promise<boolean>((resolve) => {
      modal.confirm({
        title: '중단 요청 취소 처리',
        content: '연결이 끊겨 멈춘 이 요청을 취소 상태로 정리할까요?',
        okText: '취소 처리',
        cancelText: '닫기',
        okButtonProps: { danger: true },
        centered: true,
        onOk: async () => {
          resolve(true);
        },
        onCancel: () => {
          resolve(false);
        },
      });
    });

    if (!confirmed) {
      return;
    }

    setPendingRequestCancellationIds((current) => Array.from(new Set([...current, normalizedRequestId])));

    try {
      const updatedRequest = await cancelChatShareRequest(normalizedToken, {
        parentRequestId: normalizedRequestId,
      });
      setSnapshot((current) => (current ? replaceChatShareSnapshotRequest(current, updatedRequest) : current));
      message.success('중단된 요청을 취소 처리했습니다.');
      void refreshSnapshot({ silent: true });
    } catch (error) {
      message.error(error instanceof Error ? error.message : '중단 요청 취소 처리에 실패했습니다.');
    } finally {
      setPendingRequestCancellationIds((current) => current.filter((item) => item !== normalizedRequestId));
    }
  };

  const handleRetryDisconnectedRequest = async (requestId: string) => {
    const normalizedRequestId = requestId.trim();

    if (!normalizedToken || !normalizedRequestId || pendingRequestRetryIds.includes(normalizedRequestId)) {
      return;
    }

    const targetRequest = sortedRequests.find((request) => request.requestId === normalizedRequestId) ?? null;

    if (
      !targetRequest
      || targetRequest.hasResponse
      || targetRequest.status !== 'failed'
      || (targetRequest.statusMessage?.trim() ?? '') !== '중단된 오래된 요청'
    ) {
      return;
    }

    const confirmed = await new Promise<boolean>((resolve) => {
      modal.confirm({
        title: '중단 요청 재처리',
        content: '연결이 끊겨 멈춘 이 요청을 같은 내용으로 다시 실행할까요?',
        okText: '재처리',
        cancelText: '닫기',
        centered: true,
        onOk: async () => {
          resolve(true);
        },
        onCancel: () => {
          resolve(false);
        },
      });
    });

    if (!confirmed) {
      return;
    }

    setPendingRequestRetryIds((current) => Array.from(new Set([...current, normalizedRequestId])));

    try {
      await retryChatShareRequest(normalizedToken, {
        parentRequestId: normalizedRequestId,
      });
      message.success('중단된 요청 재처리를 시작했습니다. 최신 상태를 다시 불러옵니다.');
      void refreshSnapshot({ silent: true });
    } catch (error) {
      message.error(error instanceof Error ? error.message : '중단 요청 재처리를 시작하지 못했습니다.');
    } finally {
      setPendingRequestRetryIds((current) => current.filter((item) => item !== normalizedRequestId));
    }
  };

  const shareKind = snapshot?.share.kind ?? 'request-bundle';
  const isPromptShare = shareKind === 'prompt';

  const handleSendMessageByMode = useCallback(async (mode: 'queue' | 'direct') => {
    const outgoingText = buildOutgoingShareMessageText(draftText, composerAttachments).trim();
    const resolvedParentRequestId =
      replyReferenceRequestId.trim()
      || (shareKind === 'inquiry-message' ? snapshot?.targetRequest.requestId?.trim() || '' : '')
      || '';

    if (!outgoingText || isSending || isUploadingComposerAttachment) {
      return;
    }

    setIsSending(true);

    try {
      await submitChatShareMessage(normalizedToken, outgoingText, {
        mode,
        parentRequestId: resolvedParentRequestId,
      });
      setDraftText('');
      setComposerAttachments([]);
      setReplyReferenceRequestId('');
      message.success(
        mode === 'direct'
          ? '즉시 전송했습니다. 최신 응답을 다시 불러옵니다.'
          : '대기열에 등록했습니다. 최신 응답을 다시 불러옵니다.',
      );
      void refreshSnapshot({ silent: true });
    } catch (error) {
      if (isShareSendDelayError(error)) {
        setDraftText('');
        setComposerAttachments([]);
        setReplyReferenceRequestId('');
        message.warning(
          mode === 'direct'
            ? '즉시 전송 후 응답 확인이 지연되고 있습니다. 연결 복구 시 최신 내용을 다시 불러옵니다.'
            : '대기열 등록 후 응답 확인이 지연되고 있습니다. 연결 복구 시 최신 내용을 다시 불러옵니다.',
        );
      } else {
        message.error(
          error instanceof Error
            ? error.message
            : mode === 'direct'
              ? '즉시 전송하지 못했습니다.'
              : '대기열에 등록하지 못했습니다.',
        );
      }
    } finally {
      setIsSending(false);
    }
  }, [
    composerAttachments,
    draftText,
    isSending,
    isUploadingComposerAttachment,
    message,
    normalizedToken,
    refreshSnapshot,
    replyReferenceRequestId,
    shareKind,
    snapshot?.targetRequest.requestId,
  ]);

  const handleSendMessage = useCallback(async () => {
    await handleSendMessageByMode(isImmediateSendPinned ? 'direct' : 'queue');
  }, [handleSendMessageByMode, isImmediateSendPinned]);

  const clearImmediateSendHoldTimer = useCallback(() => {
    if (immediateSendHoldTimerRef.current === null) {
      return;
    }

    window.clearTimeout(immediateSendHoldTimerRef.current);
    immediateSendHoldTimerRef.current = null;
  }, []);

  const handleToggleImmediateSendPinned = useCallback(() => {
    if (!normalizedToken) {
      return;
    }

    setImmediateSendPinnedByToken((previous) => {
      const nextState = {
        ...previous,
        [normalizedToken]: previous[normalizedToken] !== true,
      };

      writeStoredShareImmediateSendPinnedByToken(nextState);
      return nextState;
    });
  }, [normalizedToken]);

  const startImmediateSendHoldTimer = useCallback(() => {
    if (isSending || isUploadingComposerAttachment || !normalizedToken) {
      return;
    }

    clearImmediateSendHoldTimer();
    immediateSendHoldTimerRef.current = window.setTimeout(() => {
      immediateSendHoldTimerRef.current = null;
      suppressImmediateSendClickRef.current = true;
      handleToggleImmediateSendPinned();
    }, SHARE_IMMEDIATE_SEND_TOGGLE_HOLD_MS);
  }, [clearImmediateSendHoldTimer, handleToggleImmediateSendPinned, isSending, isUploadingComposerAttachment, normalizedToken]);

  const handleImmediateSendButtonClick = useCallback(() => {
    if (suppressImmediateSendClickRef.current) {
      suppressImmediateSendClickRef.current = false;
      return;
    }

    void handleSendMessageByMode('direct');
  }, [handleSendMessageByMode]);

  const handleComposerKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
    if (event.key !== 'Enter' || event.nativeEvent.isComposing) {
      return;
    }

    if (!event.ctrlKey && !event.metaKey) {
      return;
    }

    event.preventDefault();

    if ((!draftText.trim() && composerAttachments.length === 0) || isSending || isUploadingComposerAttachment) {
      return;
    }

    void handleSendMessageByMode(isImmediateSendPinned ? 'direct' : 'queue');
  };

  const syncFocusedInputIntoView = useCallback((inputTarget?: HTMLElement | null, behavior: ScrollBehavior = 'auto') => {
    if (typeof window === 'undefined' || window.innerWidth > 768) {
      return;
    }

    const scrollContainer = scrollContainerRef.current;
    const composerShell = composerInputShellRef.current;
    const targetInput = inputTarget ?? focusedMobileInputRef.current;
    const target =
      composerShell && targetInput && composerShell.contains(targetInput)
        ? composerShell
        : targetInput;

    if (!scrollContainer || !target) {
      return;
    }

    applyViewportCssVars();
    resetMobileDocumentScrollOffset();

    const containerRect = scrollContainer.getBoundingClientRect();
    const targetRect = target.getBoundingClientRect();
    const visualViewport = window.visualViewport;
    const viewportTop = Math.max(visualViewport?.offsetTop ?? 0, visualViewport?.pageTop ?? 0, 0);
    const viewportBottom = viewportTop + (visualViewport?.height ?? window.innerHeight);
    const visibleTop = Math.max(containerRect.top, viewportTop) + MOBILE_INPUT_VIEWPORT_TOP_PADDING_PX;
    const visibleBottom = Math.min(containerRect.bottom, viewportBottom) - MOBILE_INPUT_VIEWPORT_BOTTOM_PADDING_PX;

    if (visibleBottom <= visibleTop) {
      return;
    }

    if (targetRect.bottom > visibleBottom) {
      const nextScrollTop = scrollContainer.scrollTop + (targetRect.bottom - visibleBottom);
      scrollContainer.scrollTo({ top: Math.max(0, nextScrollTop), behavior });
      return;
    }

    if (targetRect.top < visibleTop) {
      const nextScrollTop = scrollContainer.scrollTop - (visibleTop - targetRect.top);
      scrollContainer.scrollTo({ top: Math.max(0, nextScrollTop), behavior });
    }
  }, []);

  const clearComposerViewportSyncTimers = useCallback(() => {
    if (typeof window === 'undefined') {
      composerFocusScrollTimerIdsRef.current = [];
      return;
    }

    composerFocusScrollTimerIdsRef.current.forEach((timerId) => {
      window.clearTimeout(timerId);
    });
    composerFocusScrollTimerIdsRef.current = [];
  }, []);

  const scheduleFocusedInputViewportSync = useCallback((
    inputTarget?: HTMLElement | null,
    behavior: ScrollBehavior = 'auto',
    options?: { includeRetryTimers?: boolean },
  ) => {
    if (typeof window === 'undefined' || window.innerWidth > 768) {
      return;
    }

    focusedMobileInputRef.current = inputTarget ?? focusedMobileInputRef.current;
    clearComposerViewportSyncTimers();

    window.requestAnimationFrame(() => {
      syncFocusedInputIntoView(inputTarget, behavior);
    });

    if (options?.includeRetryTimers === false) {
      return;
    }

    MOBILE_INPUT_VIEWPORT_SYNC_RETRY_DELAYS_MS.forEach((delay) => {
      const timerId = window.setTimeout(() => {
        syncFocusedInputIntoView(inputTarget, behavior);
        composerFocusScrollTimerIdsRef.current = composerFocusScrollTimerIdsRef.current.filter((value) => value !== timerId);
      }, delay);

      composerFocusScrollTimerIdsRef.current.push(timerId);
    });
  }, [clearComposerViewportSyncTimers, syncFocusedInputIntoView]);

  const syncComposerViewportCompactedState = useCallback(() => {
    if (typeof window === 'undefined') {
      setIsComposerViewportCompacted(false);
      return;
    }

    if (window.innerWidth > 768) {
      setIsComposerViewportCompacted(false);
      return;
    }

    const visualViewport = window.visualViewport;
    const activeElement = document.activeElement;
    const isFocusedShareInput =
      isMobileShareInputTarget(activeElement) && Boolean(scrollContainerRef.current?.contains(activeElement));

    if (!isFocusedShareInput || !visualViewport) {
      setIsComposerViewportCompacted(false);
      return;
    }

    const layoutViewportHeight = Math.max(window.innerHeight || 0, document.documentElement?.clientHeight || 0);
    const visualHeightDelta = Math.max(0, layoutViewportHeight - visualViewport.height);
    const visualOffsetTop = Math.max(visualViewport.offsetTop ?? 0, visualViewport.pageTop ?? 0);

    setIsComposerViewportCompacted(
      visualHeightDelta >= SHARE_COMPOSER_VIEWPORT_COMPACT_THRESHOLD_PX || visualOffsetTop > 0,
    );
  }, []);

  useEffect(() => {
    return () => {
      clearComposerViewportSyncTimers();
    };
  }, [clearComposerViewportSyncTimers]);

  useEffect(() => {
    if (typeof window === 'undefined') {
      return undefined;
    }

    const visualViewport = window.visualViewport;

    if (!visualViewport) {
      return undefined;
    }

    const handleViewportChange = () => {
      applyViewportCssVars();
      syncComposerViewportCompactedState();
      const activeElement = document.activeElement;
      const nextFocusTarget = isMobileShareInputTarget(activeElement) ? activeElement : null;

      if (!nextFocusTarget || !scrollContainerRef.current?.contains(nextFocusTarget)) {
        clearComposerViewportSyncTimers();
        return;
      }

      focusedMobileInputRef.current = nextFocusTarget;
      scheduleFocusedInputViewportSync(nextFocusTarget, 'auto', { includeRetryTimers: false });
    };

    visualViewport.addEventListener('resize', handleViewportChange);
    visualViewport.addEventListener('scroll', handleViewportChange);

    return () => {
      visualViewport.removeEventListener('resize', handleViewportChange);
      visualViewport.removeEventListener('scroll', handleViewportChange);
    };
  }, [clearComposerViewportSyncTimers, scheduleFocusedInputViewportSync, syncComposerViewportCompactedState]);

  const handleComposerFocus = () => {
    focusedMobileInputRef.current = composerRef.current?.resizableTextArea?.textArea ?? null;
    syncComposerViewportCompactedState();
    scheduleFocusedInputViewportSync(focusedMobileInputRef.current, 'auto', { includeRetryTimers: true });
  };

  const handleComposerBlur = () => {
    clearComposerViewportSyncTimers();
    setIsComposerViewportCompacted(false);
  };

  const handleScrollContainerFocusCapture = (event: FocusEvent<HTMLDivElement>) => {
    const nextFocusTarget = isMobileShareInputTarget(event.target) ? event.target : null;

    if (!nextFocusTarget) {
      return;
    }

    focusedMobileInputRef.current = nextFocusTarget;
    syncComposerViewportCompactedState();
    const isComposerFocusTarget = Boolean(composerInputShellRef.current?.contains(nextFocusTarget));
    scheduleFocusedInputViewportSync(nextFocusTarget, 'auto', { includeRetryTimers: isComposerFocusTarget });
  };

  const handleScrollContainerBlurCapture = (event: FocusEvent<HTMLDivElement>) => {
    const blurTarget = isMobileShareInputTarget(event.target) ? event.target : null;

    if (!blurTarget) {
      return;
    }

    clearComposerViewportSyncTimers();

    window.setTimeout(() => {
      const activeElement = document.activeElement;

      if (isMobileShareInputTarget(activeElement) && scrollContainerRef.current?.contains(activeElement)) {
        focusedMobileInputRef.current = activeElement;
        syncComposerViewportCompactedState();
        return;
      }

      if (focusedMobileInputRef.current === blurTarget) {
        focusedMobileInputRef.current = null;
      }

      setIsComposerViewportCompacted(false);
    }, 0);
  };

  const handleUploadPromptAttachment = useCallback(
    async (file: File) => {
      const sessionId = snapshot?.share.sessionId?.trim() ?? '';

      if (!sessionId) {
        throw new Error('공유 채팅 세션이 준비되지 않았습니다.');
      }

      return uploadChatShareComposerFile(normalizedToken, sessionId, file);
    },
    [normalizedToken, snapshot?.share.sessionId],
  );

  const handleUploadComposerAttachments = useCallback(
    async (files: File[]) => {
      if (!files.length || isUploadingComposerAttachment) {
        return;
      }

      setIsUploadingComposerAttachment(true);

      try {
        const uploadResults = await Promise.allSettled(files.map((file) => handleUploadPromptAttachment(file)));
        const succeeded = uploadResults
          .filter((result): result is PromiseFulfilledResult<ChatComposerAttachment> => result.status === 'fulfilled')
          .map((result) => result.value);
        const failed = uploadResults.filter((result): result is PromiseRejectedResult => result.status === 'rejected');

        if (succeeded.length > 0) {
          setComposerAttachments((current) => {
            const seenPaths = new Set(current.map((attachment) => attachment.path));

            return [
              ...current,
              ...succeeded.filter((attachment) => {
                if (seenPaths.has(attachment.path)) {
                  return false;
                }

                seenPaths.add(attachment.path);
                return true;
              }),
            ];
          });
        }

        if (failed.length > 0) {
          const firstError = failed[0]?.reason;
          message.error(firstError instanceof Error ? firstError.message : '일부 첨부 파일 업로드에 실패했습니다.');
        }
      } finally {
        setIsUploadingComposerAttachment(false);
      }
    },
    [handleUploadPromptAttachment, isUploadingComposerAttachment, message],
  );

  const handleComposerPaste = useCallback(
    (event: ClipboardEvent<HTMLTextAreaElement>) => {
      const files = resolveShareComposerPasteFiles(event.clipboardData);

      if (files.length === 0 || isSending || isUploadingComposerAttachment) {
        return;
      }

      event.preventDefault();
      event.stopPropagation();
      void handleUploadComposerAttachments(files);
    },
    [handleUploadComposerAttachments, isSending, isUploadingComposerAttachment],
  );


  const handleClearConversation = useCallback(async () => {
    const sessionId = snapshot?.share.sessionId?.trim() ?? '';
    const conversationTitle = snapshot?.conversation.title?.trim() || '현재 채팅방';

    if (!normalizedToken || !sessionId || isClearingConversation) {
      return;
    }

    const confirmed = await new Promise<boolean>((resolve) => {
      modal.confirm({
        title: '채팅방 데이터를 초기화할까요?',
        content: `"${conversationTitle}" 채팅방의 이름과 설정은 유지되고, 메시지·요청·활동 로그만 초기화됩니다.`,
        okText: '초기화',
        cancelText: '취소',
        okButtonProps: { danger: true },
        centered: true,
        onOk: async () => {
          resolve(true);
        },
        onCancel: () => {
          resolve(false);
        },
      });
    });

    if (!confirmed) {
      return;
    }

    setIsClearingConversation(true);

    try {
      await clearChatShareConversationRoom(normalizedToken);
      setDraftText('');
      setComposerAttachments([]);
      setLatestRequestId('');
      setExpandMode('pending');
      setSnapshot((current) =>
        current
          ? {
              ...current,
              requests: [],
              messages: [],
              activityLogs: [],
              roomRequestCounts: {
                processingCount: 0,
                unansweredCount: 0,
              },
              refreshedAt: new Date().toISOString(),
            }
          : current,
      );
      message.success('채팅방 데이터를 초기화했습니다.');
    } catch (error) {
      message.error(error instanceof Error ? error.message : '채팅방 데이터 초기화 중 오류가 발생했습니다.');
    } finally {
      setIsClearingConversation(false);
    }
  }, [isClearingConversation, message, modal, normalizedToken, snapshot]);

  const shareBlockedReason = snapshot?.share.blockedReason?.trim() ?? '';
  const canSendMessage = snapshot != null && !isPromptShare && (snapshot.share.canSendMessage ?? true);
  const sortedMessages = useMemo(() => [...(snapshot?.messages ?? [])].sort((left, right) => left.id - right.id), [snapshot]);
  const messageRenderPayloadById = useMemo(
    () => new Map(sortedMessages.map((message) => [message.id, extractShareMessageRenderPayload(message)] as const)),
    [sortedMessages],
  );
  const lastResponseMessage =
    [...sortedMessages].reverse().find((item) => {
      const payload = messageRenderPayloadById.get(item.id);
      return item.author === 'codex' && (payload?.promptParts.length ?? 0) === 0;
    }) ?? null;
  const promptTarget = snapshot?.promptTarget ?? null;
  const promptTargetRequestId = snapshot?.targetRequest?.requestId?.trim() ?? '';
  const sortedRequests = useMemo(
    () => [...(snapshot?.requests ?? [])].sort(compareShareConversationRequests),
    [snapshot],
  );
  const requestMessagesById = useMemo(() => {
    const nextMap = new Map<string, ChatMessage[]>();

    sortedMessages.forEach((message) => {
      const requestId = message.clientRequestId?.trim() || '';

      if (!requestId) {
        return;
      }

      const current = nextMap.get(requestId) ?? [];
      current.push(message);
      nextMap.set(requestId, current);
    });

    return nextMap;
  }, [sortedMessages]);
  const childRequestCountByParentId = useMemo(() => buildShareChildRequestCountMap(sortedRequests), [sortedRequests]);
  const promptFollowupCountByParentId = useMemo(() => buildSharePromptFollowupCountMap(sortedRequests), [sortedRequests]);
  const requestById = useMemo(
    () => new Map(sortedRequests.map((request) => [request.requestId.trim(), request])),
    [sortedRequests],
  );
  const promptFollowupStateByPrimaryRequestId = useMemo(
    () =>
      buildSharePromptFollowupStateByPrimaryRequestId(
        sortedRequests,
        requestById,
        requestMessagesById,
        promptFollowupCountByParentId,
        messageRenderPayloadById,
      ),
    [messageRenderPayloadById, promptFollowupCountByParentId, requestById, requestMessagesById, sortedRequests],
  );
  const promptShareFollowupRequests = useMemo(() => {
    if (!isPromptShare || !promptTargetRequestId) {
      return [] as ChatConversationRequest[];
    }

    return sortedRequests.filter((request) => {
      const requestId = request.requestId.trim();

      if (!requestId || requestId === promptTargetRequestId) {
        return false;
      }

      return resolveSharePrimaryRequestId(request, requestById) === promptTargetRequestId;
    });
  }, [isPromptShare, promptTargetRequestId, requestById, sortedRequests]);
  const latestRequest = sortedRequests[sortedRequests.length - 1] ?? null;
  const latestRequestIndex = useMemo(() => {
    if (sortedRequests.length === 0) {
      return -1;
    }

    const matchedIndex = sortedRequests.findIndex((request) => request.requestId === latestRequestId);
    return matchedIndex >= 0 ? matchedIndex : sortedRequests.length - 1;
  }, [latestRequestId, sortedRequests]);
  const currentRequest = latestRequestIndex >= 0 ? sortedRequests[latestRequestIndex] ?? null : latestRequest;
  const pendingCompletionRequests = useMemo(
    () =>
      sortedRequests.filter((request) => {
        return isPendingCompletionShareRequest(
          request,
          requestMessagesById.get(request.requestId) ?? [],
          childRequestCountByParentId,
          promptFollowupCountByParentId,
          messageRenderPayloadById,
        );
      }),
    [childRequestCountByParentId, messageRenderPayloadById, promptFollowupCountByParentId, requestMessagesById, sortedRequests],
  );
  const pendingManualActionRequests = useMemo(
    () =>
      pendingCompletionRequests.filter((request) =>
        isShareRequestAwaitingManualAction(
          request,
          requestMessagesById.get(request.requestId) ?? [],
          childRequestCountByParentId,
          promptFollowupCountByParentId,
          messageRenderPayloadById,
        )),
    [childRequestCountByParentId, messageRenderPayloadById, pendingCompletionRequests, promptFollowupCountByParentId, requestMessagesById],
  );
  const displayedRequests = useMemo(() => {
    if (expandMode === 'all') {
      return sortedRequests;
    }

    if (expandMode === 'pending') {
      return pendingCompletionRequests;
    }

    return currentRequest ? [currentRequest] : [];
  }, [currentRequest, expandMode, pendingCompletionRequests, sortedRequests]);
  const headerInquiryRequest = useMemo(() => {
    if (displayedRequests.length > 0) {
      return displayedRequests[0] ?? null;
    }

    return currentRequest ?? latestRequest ?? sortedRequests[0] ?? null;
  }, [currentRequest, displayedRequests, latestRequest, sortedRequests]);
  const headerTitleText = useMemo(() => {
    const savedConversationTitle = snapshot?.conversation.title?.trim() || '';

    if (savedConversationTitle) {
      return savedConversationTitle;
    }

    return headerInquiryRequest?.userText.trim() || '-';
  }, [headerInquiryRequest?.userText, snapshot?.conversation.title]);
  const hiddenBeforeCount = expandMode === 'latest' && latestRequestIndex >= 0 ? latestRequestIndex : 0;
  const hiddenAfterCount =
    expandMode === 'latest' && latestRequestIndex >= 0 ? Math.max(0, sortedRequests.length - latestRequestIndex - 1) : 0;
  const pendingProcessingCount = pendingCompletionRequests.filter(
    (request) => isRequestInFlight(request.status),
  ).length;
  const pendingUnansweredCount = Math.max(0, pendingCompletionRequests.length - pendingProcessingCount);
  const requestProgressLabel =
    sortedRequests.length === 0
      ? ''
      : expandMode === 'all'
        ? `전체 ${sortedRequests.length}건`
        : expandMode === 'pending'
          ? `처리중 ${pendingProcessingCount}건 · 미확인 ${pendingUnansweredCount}건`
          : `${latestRequestIndex + 1} / ${sortedRequests.length}`;
  const canMoveToPreviousRequest = expandMode === 'latest' && latestRequestIndex > 0;
  const canMoveToNextRequest = expandMode === 'latest' && latestRequestIndex >= 0 && latestRequestIndex < sortedRequests.length - 1;
  const aggregateStatusTag = useMemo(() => {
    if (sortedRequests.length === 0) {
      return null;
    }

    const processingTarget = displayedRequests.find((request) => isRequestProcessing(request.status))
      ?? sortedRequests.find((request) => isRequestProcessing(request.status))
      ?? null;

    if (processingTarget) {
      return {
        ...resolveRequestStatusTag('started'),
        elapsedLabel: formatElapsedDuration(processingTarget.updatedAt?.trim() || processingTarget.createdAt, nowMs),
      };
    }

    const hasPendingPrompt = sortedRequests.some((request) =>
      hasPendingPromptRequest(
        request,
        requestMessagesById.get(request.requestId) ?? [],
        promptFollowupCountByParentId.get(request.requestId.trim()) ?? 0,
        messageRenderPayloadById,
      ));

    if (hasPendingPrompt) {
      return { label: '입력 대기', color: 'warning' as const, elapsedLabel: '' };
    }

    if (sortedRequests.some((request) => request.status === 'queued')) {
      return { ...resolveRequestStatusTag('queued'), elapsedLabel: '' };
    }

    if (pendingCompletionRequests.length > 0) {
      return { label: '확인대기', color: 'warning' as const, elapsedLabel: '' };
    }

    if (sortedRequests.every((request) => request.status === 'completed')) {
      return { ...resolveRequestStatusTag('completed'), elapsedLabel: '' };
    }

    if (sortedRequests.some((request) => request.status === 'failed')) {
      return { label: '일부 실패', color: 'error' as const, elapsedLabel: '' };
    }

    if (sortedRequests.some((request) => request.status === 'cancelled')) {
      return { ...resolveRequestStatusTag('cancelled'), elapsedLabel: '' };
    }

    if (sortedRequests.some((request) => request.status === 'removed')) {
      return { ...resolveRequestStatusTag('removed'), elapsedLabel: '' };
    }

    return { ...resolveRequestStatusTag(sortedRequests[sortedRequests.length - 1]?.status ?? 'queued'), elapsedLabel: '' };
  }, [messageRenderPayloadById, nowMs, pendingCompletionRequests.length, promptFollowupCountByParentId, requestMessagesById, sortedRequests]);
  const requestAnswerTextById = useMemo(() => {
    const nextMap = new Map<string, string>();

    sortedRequests.forEach((request) => {
      nextMap.set(
        request.requestId,
        buildRequestAnswerText(
          request,
          requestMessagesById.get(request.requestId) ?? [],
          messageRenderPayloadById,
        ),
      );
    });

    return nextMap;
  }, [messageRenderPayloadById, requestMessagesById, sortedRequests]);
  const replyReferenceRequest = useMemo(
    () => (replyReferenceRequestId.trim() ? requestById.get(replyReferenceRequestId.trim()) ?? null : null),
    [replyReferenceRequestId, requestById],
  );
  const replyReferenceSummary = useMemo(() => {
    if (!replyReferenceRequest) {
      return '';
    }

    const answerText =
      requestAnswerTextById.get(replyReferenceRequest.requestId.trim())
      || replyReferenceRequest.responseText
      || replyReferenceRequest.statusMessage
      || '';

    return summarizeShareReplyReferenceText(answerText || replyReferenceRequest.userText || '선택한 답변');
  }, [replyReferenceRequest, requestAnswerTextById]);
  const shareSendModeSummary = useMemo(() => {
    if (isImmediateSendPinned) {
      return {
        tagLabel: '즉시전송 고정',
        description: '전송 버튼과 Ctrl+Enter가 즉시전송으로 동작합니다. 번개 버튼을 1초 이상 눌러 해제할 수 있습니다.',
      };
    }

    return {
      tagLabel: '일반 전송 대기열',
      description: '기본 전송은 대기열에 등록됩니다. 즉시전송은 번개 버튼을 누르거나 1초 이상 눌러 고정했을 때만 실행됩니다.',
    };
  }, [isImmediateSendPinned]);
  const previousQuestionModalRequest = useMemo(
    () => (previousQuestionModalRequestId.trim() ? requestById.get(previousQuestionModalRequestId.trim()) ?? null : null),
    [previousQuestionModalRequestId, requestById],
  );
  const previousQuestionModalText = useMemo(
    () => resolveShareRequestQuestionText(previousQuestionModalRequest),
    [previousQuestionModalRequest],
  );
  const previousQuestionModalPreviewItems = useMemo(
    () => buildSharePreviewItemsFromText(previousQuestionModalRequest?.userText ?? '', normalizedToken),
    [normalizedToken, previousQuestionModalRequest?.userText],
  );
  const activityLogByRequestId = useMemo(
    () => new Map((snapshot?.activityLogs ?? []).map((item) => [item.requestId.trim(), item])),
    [snapshot?.activityLogs],
  );
  const shareChatTypeLabel = useMemo(() => {
    const candidates = [
      currentRequest?.chatTypeLabel,
      snapshot?.targetRequest?.chatTypeLabel,
      ...sortedRequests.map((request) => request.chatTypeLabel),
    ];

    return candidates.find((value) => value?.trim())?.trim() || 'Codex Live';
  }, [currentRequest?.chatTypeLabel, snapshot?.targetRequest?.chatTypeLabel, sortedRequests]);
  const shareMenuLabel = useMemo(() => {
    const candidates = [
      snapshot?.conversation.requestBadgeLabel,
      snapshot?.conversation.title,
      headerInquiryRequest?.chatTypeLabel,
      currentRequest?.chatTypeLabel,
    ];

    return candidates.find((value) => value?.trim())?.trim() || '';
  }, [currentRequest?.chatTypeLabel, headerInquiryRequest?.chatTypeLabel, snapshot?.conversation.requestBadgeLabel, snapshot?.conversation.title]);
  const collapsedActivitySummary = useMemo(() => {
    if (expandMode !== 'latest' || !currentRequest || !isRequestProcessing(currentRequest.status)) {
      return [] as string[];
    }

    const activityLog = activityLogByRequestId.get(currentRequest.requestId.trim());
    return summarizeActivityLogLines(activityLog?.lines ?? []);
  }, [activityLogByRequestId, currentRequest, expandMode]);
  const headerSummaryLabel = useMemo(
    () =>
      `처리 시간 ${aggregateStatusTag?.elapsedLabel || '-'} · 처리중 ${pendingProcessingCount}건 · 미확인 ${pendingUnansweredCount}건`,
    [aggregateStatusTag?.elapsedLabel, pendingProcessingCount, pendingUnansweredCount],
  );

  useEffect(() => {
    if (!replyReferenceRequestId.trim()) {
      return;
    }

    if (requestById.has(replyReferenceRequestId.trim())) {
      return;
    }

    setReplyReferenceRequestId('');
  }, [replyReferenceRequestId, requestById]);

  useEffect(() => {
    if (sortedRequests.length === 0) {
      if (latestRequestId) {
        setLatestRequestId('');
      }
      return;
    }

    const nextLatestRequest = sortedRequests[sortedRequests.length - 1];
    if (!nextLatestRequest) {
      return;
    }

    if (latestRequestId && sortedRequests.some((request) => request.requestId === latestRequestId)) {
      return;
    }

    if (latestRequestId !== nextLatestRequest.requestId) {
      setLatestRequestId(nextLatestRequest.requestId);
    }
  }, [latestRequestId, sortedRequests]);

  const handleMoveToPreviousRequest = () => {
    if (!canMoveToPreviousRequest) {
      return;
    }

    const previousRequest = sortedRequests[latestRequestIndex - 1];
    if (previousRequest) {
      setLatestRequestId(previousRequest.requestId);
    }
  };

  const handleMoveToNextRequest = () => {
    if (!canMoveToNextRequest) {
      return;
    }

    const nextRequest = sortedRequests[latestRequestIndex + 1];
    if (nextRequest) {
      setLatestRequestId(nextRequest.requestId);
    }
  };
  const hasActiveProcessingRequest = useMemo(
    () => displayedRequests.some((request) => isRequestProcessing(request.status)),
    [displayedRequests],
  );
  const contentLayoutClassName = canSendMessage
    ? 'chat-share-page__content-layout chat-share-page__content-layout--with-composer'
    : 'chat-share-page__content-layout';
  const canLaunchShareProgram = useCallback(
    (appId?: ShareProgramTarget['appId']) => {
      if (!appId) {
        return true;
      }

      return shareAllowedAppIdSet.has(appId);
    },
    [shareAllowedAppIdSet],
  );
  const recordShareAppLaunch = useCallback((appId?: string) => {
    if (!appId) {
      return;
    }

    setAppLaunchUsage((current) => {
      const nextRecord = {
        count: (current[appId]?.count ?? 0) + 1,
        lastOpenedAt: Date.now(),
      };
      const nextValue = {
        ...current,
        [appId]: nextRecord,
      };
      writeShareAppLaunchUsage(nextValue);
      return nextValue;
    });
  }, []);
  const openProgramTarget = useCallback((target: ShareProgramTarget) => {
    if (!canLaunchShareProgram(target.appId)) {
      message.warning('이 공유 링크에서는 허용되지 않은 앱입니다.');
      return;
    }

    recordShareAppLaunch(target.appId);
    setProgramTarget(target);
    setProgramMinimizedTarget(target);
    setIsProgramMinimized(false);
  }, [canLaunchShareProgram, message, recordShareAppLaunch]);
  const openAllowedPlayAppEnvironment = useCallback((entry: PlayAppEntry, environment: ShareAppEnvironment) => {
    if (!shareAllowedAppIdSet.has(entry.id)) {
      message.warning('이 공유 링크에서는 허용되지 않은 앱입니다.');
      return;
    }

    if (!isPlayAppSupportedInEnvironment(entry, environment)) {
      const environmentLabel = SHARE_APP_ENVIRONMENT_OPTIONS.find((item) => item.key === environment)?.label ?? environment;
      const supportedLabel = resolveSupportedEnvironmentSummary(entry);
      message.warning(`${entry.name} 앱은 ${environmentLabel} 환경에서 아직 열 수 없습니다. 지원 환경: ${supportedLabel}`);
      return;
    }

    setIsSearchOpen(false);
    openProgramTarget(buildPlayAppEnvironmentTarget(entry.id, entry.name, environment));
  }, [message, openProgramTarget, shareAllowedAppIdSet]);
  const handleMinimizeProgram = useCallback(() => {
    if (programTarget) {
      setProgramMinimizedTarget(programTarget);
    }

    setIsProgramMinimized(true);
  }, [programTarget]);
  const handleSearchResultSelect = useCallback((result: ShareSearchResult) => {
    if (result.appEntry) {
      openAllowedPlayAppEnvironment(result.appEntry, selectedAppEnvironment);
      return;
    }

    if (result.resource && !result.requestId && !result.scrollTarget) {
      setIsSearchOpen(false);
      openProgramTarget(result.resource);
      return;
    }

    setIsSearchOpen(false);

    if (result.requestId) {
      setLatestRequestId(result.requestId);
      setExpandMode('all');
    }

    const scrollTarget = result.scrollTarget;

    if (!scrollTarget) {
      return;
    }

    window.requestAnimationFrame(() => {
      window.setTimeout(() => {
        if (scrollTarget.type === 'request') {
          if (scrollToShareAnchorElement(requestAnchorRefs.current.get(scrollTarget.value))) {
            return;
          }
        } else if (scrollTarget.type === 'response') {
          const messageId = Number(scrollTarget.value);
          if (Number.isFinite(messageId) && scrollToShareAnchorElement(responseAnchorRefs.current.get(messageId))) {
            return;
          }
        } else if (scrollTarget.type === 'prompt') {
          if (scrollToShareAnchorElement(promptAnchorRefs.current.get(scrollTarget.value))) {
            return;
          }
        } else if (scrollToShareAnchorElement(document.getElementById(scrollTarget.value))) {
          return;
        }

        const selector =
          scrollTarget.type === 'request'
            ? `#chat-share-request-${CSS.escape(scrollTarget.value)}`
            : `#${CSS.escape(scrollTarget.value)}`;
        document.querySelector<HTMLElement>(selector)?.scrollIntoView({
          behavior: 'smooth',
          block: scrollTarget.type === 'activity' ? 'center' : 'start',
        });
      }, 80);
    });
  }, [openAllowedPlayAppEnvironment, openProgramTarget, selectedAppEnvironment]);
  const closeProgramTarget = useCallback(() => {
    setProgramTarget(null);
    setProgramMinimizedTarget(null);
    setIsProgramMinimized(false);
  }, []);
  const sharedServerCommandAccess = useMemo(
    () => ({
      shareToken: normalizedToken,
      allowedKeys: ['test', 'rel', 'prod', 'work-server', 'command-runner'] as const,
    }),
    [normalizedToken],
  );
  const shouldInlineProgramTarget = shouldRenderSharePlayAppInline(programTarget);
  const embeddedPlayAppContent = shouldInlineProgramTarget && programTarget
    ? renderEmbeddedSharePlayApp(programTarget.appId, closeProgramTarget, normalizedToken)
    : null;
  const searchResults = useMemo<ShareSearchResult[]>(() => {
    const keyword = normalizeSearchKeyword(searchKeyword);
    const results: ShareSearchResult[] = [];

    if (searchPanelMode === 'apps') {
      const photoprismLauncher = buildPhotoPrismProgramTarget();

      sortedAllowedManagementApps.forEach((item) => {
        if (!matchesSearchKeyword(keyword, item.value, item.label, item.description, ...APPS_LAUNCHER_SEARCH_TERMS)) {
          return;
        }

        results.push({
          key: `management-app:${item.value}`,
          title: item.label,
          description: item.description,
          category: 'resource',
          icon: item.icon,
          usageBadge: resolveShareAppUsageBadge(appLaunchUsage[item.value]),
          resource: buildShareManagementProgramTarget(item.value, item.label),
        });
      });

      sortedAllowedPlayAppEntries.forEach((entry) => {
        if (
          !matchesSearchKeyword(
            keyword,
            entry.id,
            entry.name,
            entry.searchDescription,
            ...APPS_LAUNCHER_SEARCH_TERMS,
            ...(entry.searchKeywords ?? []),
          )
        ) {
          return;
        }

        results.push({
          key: `app:${entry.id}`,
          title: entry.name,
          description: resolveSupportedEnvironmentSummary(entry),
          category: 'resource',
          icon: entry.icon,
          usageBadge: resolveShareAppUsageBadge(appLaunchUsage[entry.id]),
          appEntry: entry,
          resource:
            entry.id === 'photoprism'
              ? photoprismLauncher
              : buildPlayAppProgramTarget(entry.id, entry.name),
        });
      });

      return results;
    }

    if (!keyword) {
      return results;
    }

    sortedRequests.forEach((request) => {
      const requestText = buildShareVisibleText(request.userText);

      if (matchesSearchKeyword(keyword, requestText, request.statusMessage, request.requestId)) {
        results.push({
          key: `request:${request.requestId}`,
          title: requestText || '질문',
          description: `질문 · ${formatTimeLabel(request.createdAt)}`,
          category: 'request',
          requestId: request.requestId,
          scrollTarget: {
            type: 'request',
            value: request.requestId,
          },
        });
      }

      buildSharePreviewItemsFromText(request.userText, normalizedToken).forEach((item) => {
        if (!matchesSearchKeyword(keyword, item.label, item.url, item.kind)) {
          return;
        }

        const scopedUrl = resolveShareScopedResourceUrl(item.url, normalizedToken);
        results.push({
          key: `request-resource:${request.requestId}:${item.id}`,
          title: item.label,
          description: `질문 리소스 · ${item.kind}`,
          category: 'resource',
          requestId: request.requestId,
          resource: {
            key: `request-resource:${request.requestId}:${item.id}`,
            label: item.label,
            url: scopedUrl,
            kind: item.kind,
            meta: `${item.kind} resource`,
          },
          scrollTarget: {
            type: 'request',
            value: request.requestId,
          },
        });
      });
    });

    sortedMessages.forEach((entry) => {
      const payload = messageRenderPayloadById.get(entry.id);
      const visibleText = buildVisibleMessageText(entry, payload);
      const requestId = entry.clientRequestId?.trim() || snapshot?.rootRequestId?.trim() || '';

      if (matchesSearchKeyword(keyword, visibleText, entry.author, requestId)) {
        results.push({
          key: `response:${entry.id}`,
          title: visibleText || '응답',
          description: `${entry.author === 'user' ? '질문 메시지' : '응답'} · ${formatTimeLabel(entry.timestamp)}`,
          category: 'response',
          requestId: requestId || undefined,
          scrollTarget: {
            type: 'response',
            value: String(entry.id),
          },
        });
      }

      (payload?.promptParts ?? []).forEach((prompt, promptIndex) => {
        if (!matchesSearchKeyword(keyword, buildSharePromptSearchText(prompt), requestId, entry.id)) {
          return;
        }

        results.push({
          key: `prompt:${entry.id}:${promptIndex}`,
          title: prompt.title || 'prompt',
          description: `prompt · ${formatTimeLabel(entry.timestamp)}`,
          category: 'response',
          requestId: requestId || undefined,
          scrollTarget: {
            type: 'prompt',
            value: buildSharePromptAnchorKey(entry.id, promptIndex),
          },
        });
      });

      (payload?.previewItems ?? []).forEach((item) => {
        if (!requestId || !matchesSearchKeyword(keyword, item.label, item.url, item.kind)) {
          return;
        }

        const scopedUrl = resolveShareScopedResourceUrl(item.url, normalizedToken);
        results.push({
          key: `response-resource:${entry.id}:${item.id}`,
          title: item.label,
          description: `응답 리소스 · ${item.kind}`,
          category: 'resource',
          requestId,
          resource: {
            key: `response-resource:${entry.id}:${item.id}`,
            label: item.label,
            url: scopedUrl,
            kind: item.kind,
            meta: `${item.kind} resource`,
          },
          scrollTarget: {
            type: 'response',
            value: String(entry.id),
          },
        });
      });
    });

    (snapshot?.activityLogs ?? []).forEach((activity, index) => {
      const summary = summarizeActivityLogLines(activity.lines ?? []).join(' ');

      if (!matchesSearchKeyword(keyword, activity.requestId, summary)) {
        return;
      }

      results.push({
        key: `activity:${activity.requestId}:${index}`,
        title: summary || `활동 로그 ${index + 1}`,
        description: `활동 로그 · ${activity.requestId}`,
        category: 'activity',
        requestId: activity.requestId,
        scrollTarget: {
          type: 'activity',
          value: 'chat-share-activity-panel',
        },
      });
    });

    return results
      .filter((item) => !item.scrollTarget || item.scrollTarget.value.trim())
      .slice(0, 40);
  }, [appLaunchUsage, messageRenderPayloadById, normalizedToken, searchKeyword, searchPanelMode, snapshot?.activityLogs, snapshot?.rootRequestId, sortedAllowedManagementApps, sortedAllowedPlayAppEntries, sortedMessages, sortedRequests]);
  const selectedTokenUsageSetting = shareTokenSetting;
  const tokenUsageSummaryByPeriod = useMemo(
    () =>
      Object.fromEntries(
        TOKEN_USAGE_PERIODS.map((period) => [
          period.key,
          resolveTokenUsageWindowSummary(
            sortedRequests,
            period.key,
            nowMs,
            resolveTokenUsageLimitForPeriod(selectedTokenUsageSetting, period.key),
          ),
        ]),
      ) as Record<TokenUsagePeriodKey, TokenUsageWindowSummary>,
    [nowMs, selectedTokenUsageSetting, sortedRequests],
  );
  const tokenUsageFiveHourSummary = tokenUsageSummaryByPeriod['5h'];
  const tokenUsageSevenDaySummary = tokenUsageSummaryByPeriod['7d'];
  const tokenUsageOverview = useMemo(() => {
    const sevenDayLimit = Math.max(0, Math.round(Number(resolveTokenUsageLimitForPeriod(selectedTokenUsageSetting, '7d')) || 0));
    const fiveHourLimit = Math.max(0, Math.round(Number(resolveTokenUsageLimitForPeriod(selectedTokenUsageSetting, '5h')) || 0));
    const sevenDayRemaining = tokenUsageSevenDaySummary.remainingTokens;
    const fiveHourRemaining = tokenUsageFiveHourSummary.remainingTokens;
    const currentAvailableTokens = resolveSmallestFiniteNumber(sevenDayRemaining, fiveHourRemaining);
    const axisLimit = sevenDayLimit > 0 ? sevenDayLimit : Math.max(fiveHourLimit, currentAvailableTokens ?? 0);
    const overallLabel = sevenDayLimit > 0 ? `${formatTokenCount(sevenDayLimit)} 토큰` : '무제한';
    const sevenDayRemainingLabel = sevenDayRemaining == null ? '무제한' : `${formatTokenCount(sevenDayRemaining)} 토큰`;
    const fiveHourRemainingLabel = fiveHourRemaining == null ? '무제한' : `${formatTokenCount(fiveHourRemaining)} 토큰`;
    const currentAvailableLabel = currentAvailableTokens == null ? '무제한' : `${formatTokenCount(currentAvailableTokens)} 토큰`;
    const resolveAxisWidthPercent = (value: number | null, fallback: number) => {
      if (axisLimit <= 0) {
        return fallback;
      }

      if (value == null) {
        return fallback;
      }

      return Math.max(4, Math.min(100, (value / axisLimit) * 100));
    };

    return {
      currentAvailableLabel,
      overallLabel,
      sevenDayRemainingLabel,
      fiveHourRemainingLabel,
      fiveHourBucketLabel: `5시간 버킷 ${fiveHourRemainingLabel}`,
      oneLineSummary:
        sevenDayLimit > 0
          ? `전체는 1주일 총량 ${overallLabel}, 1주일은 현재 남은 ${sevenDayRemainingLabel}, 5시간은 주간 잔여 상한이 적용된 실제 사용 가능 ${currentAvailableLabel}`
          : `현재 사용 가능 ${currentAvailableLabel}`,
      fiveHourResetAmountLabel:
        tokenUsageFiveHourSummary.nextUsageDropAt && tokenUsageFiveHourSummary.nextResetTokens > 0
          ? `${formatTokenCount(tokenUsageFiveHourSummary.nextResetTokens)} 토큰`
          : tokenUsageFiveHourSummary.nextUsageDropAt
            ? '일부 초기화'
            : '예정 없음',
      fiveHourResetTimeLabel: tokenUsageFiveHourSummary.nextUsageDropAt
        ? formatTimeLabel(tokenUsageFiveHourSummary.nextUsageDropAt) || '시간 미기록'
        : '예정 없음',
      fiveHourCountdownLabel: formatCountdownLabel(tokenUsageFiveHourSummary.nextUsageDropAt, nowMs),
      sevenDayResetTimeLabel: tokenUsageSevenDaySummary.nextUsageDropAt
        ? formatTimeLabel(tokenUsageSevenDaySummary.nextUsageDropAt) || '시간 미기록'
        : '예정 없음',
      meterLegendItems: [
        {
          key: 'overall',
          label: '전체',
          colorClassName: 'chat-share-page__token-usage-meter-fill--overall',
          caption: overallLabel,
        },
        {
          key: '7d',
          label: '1주일',
          colorClassName: 'chat-share-page__token-usage-meter-fill--7d',
          caption: sevenDayRemainingLabel,
        },
        {
          key: '5h',
          label: '5시간',
          colorClassName: 'chat-share-page__token-usage-meter-fill--5h',
          caption: currentAvailableLabel,
        },
      ],
      meterLayers: [
        {
          key: 'overall',
          colorClassName: 'chat-share-page__token-usage-meter-fill--overall',
          widthPercent: 100,
        },
        {
          key: '7d',
          colorClassName: 'chat-share-page__token-usage-meter-fill--7d',
          widthPercent: resolveAxisWidthPercent(sevenDayRemaining, 100),
        },
        {
          key: '5h',
          colorClassName: 'chat-share-page__token-usage-meter-fill--5h',
          widthPercent: resolveAxisWidthPercent(currentAvailableTokens, 100),
        },
      ],
    };
  }, [nowMs, selectedTokenUsageSetting, tokenUsageFiveHourSummary, tokenUsageSevenDaySummary]);
  const currentShareUrl = useMemo(() => buildAbsoluteShareUrl(snapshot?.share.sharePath), [snapshot?.share.sharePath]);
  const currentShareEffectiveExpiresAt = useMemo(() => resolveShareEffectiveExpiresAt(snapshot?.share ?? null), [snapshot?.share]);
  const currentShareDefaultExpiryLabel = useMemo(() => {
    const label = formatDurationMinutesLabel(snapshot?.share.tokenSetting?.defaultExpiresInMinutes);
    return label ? `기본 유효시간 ${label}` : '';
  }, [snapshot?.share.tokenSetting?.defaultExpiresInMinutes]);
  const currentShareDefaultPolicyLabel = useMemo(
    () => currentShareDefaultExpiryLabel || '사용기간 제한 없음',
    [currentShareDefaultExpiryLabel],
  );
  const currentShareExpiresAtLabel = useMemo(
    () =>
      currentShareEffectiveExpiresAt
        ? formatShareExpirySummary(currentShareEffectiveExpiresAt, nowMs)
        : currentShareDefaultPolicyLabel,
    [currentShareDefaultPolicyLabel, currentShareEffectiveExpiresAt, nowMs],
  );
  const currentShareRemainingTimeLabel = useMemo(
    () => (currentShareEffectiveExpiresAt ? formatRemainingTimeLabel(currentShareEffectiveExpiresAt, nowMs) : ''),
    [currentShareEffectiveExpiresAt, nowMs],
  );
  const currentShareTokenUsageStatusLabel = useMemo(
    () => currentShareRemainingTimeLabel || currentShareDefaultPolicyLabel,
    [currentShareDefaultPolicyLabel, currentShareRemainingTimeLabel],
  );
  const handleCopyCurrentShareUrl = useCallback(async () => {
    if (!currentShareUrl) {
      return;
    }

    try {
      await copyTextToClipboard(currentShareUrl);
      message.success('토큰 URL을 복사했습니다.');
    } catch (error) {
      console.error('failed to copy share url', error);
      message.error('토큰 URL 복사에 실패했습니다.');
    }
  }, [currentShareUrl, message]);
  const shareHeaderSettingsItems = useMemo<MenuProps['items']>(
    () => [
      {
        key: 'conversation-title',
        label: (
          <span className="chat-share-page__settings-item chat-share-page__settings-item--summary">
            <span className="chat-share-page__settings-item-title">
              {snapshot?.conversation.title?.trim() || '현재 채팅방'}
            </span>
            <span className="chat-share-page__settings-item-description">현재 공유 채팅방</span>
          </span>
        ),
        disabled: true,
      },
      {
        key: 'conversation-search',
        label: (
          <span className="chat-share-page__settings-item">
            <span className="chat-share-page__settings-item-title">통합검색</span>
            <span className="chat-share-page__settings-item-description">질문, 답변, 리소스, 활동 로그를 함께 찾습니다.</span>
          </span>
        ),
        icon: <SearchOutlined />,
      },
      {
        key: 'conversation-refresh',
        label: (
          <span className="chat-share-page__settings-item">
            <span className="chat-share-page__settings-item-title">화면 새로고침</span>
            <span className="chat-share-page__settings-item-description">PWA 반영이 늦을 때 현재 공유채팅방 화면을 다시 불러옵니다.</span>
          </span>
        ),
        icon: <ReloadOutlined />,
      },
      ...(allowedManagementApps.length > 0 || allowedPlayAppEntries.length > 0
        ? [
            {
              key: 'conversation-apps',
              label: (
                <span className="chat-share-page__settings-item">
                  <span className="chat-share-page__settings-item-title">Apps</span>
                  <span className="chat-share-page__settings-item-description">
                    허용된 앱을 빠르게 확인하고 실행합니다.
                  </span>
                </span>
              ),
              icon: <AppstoreOutlined />,
            },
          ]
        : []),
      {
        key: 'conversation-token-usage',
        label: (
          <span className="chat-share-page__settings-item chat-share-page__settings-item--token">
            <span className="chat-share-page__settings-item-title-row">
              <span className="chat-share-page__settings-item-title">토큰 관리</span>
              <span className="chat-share-page__settings-item-meta">
                {selectedTokenUsageSetting ? selectedTokenUsageSetting.name : '설정 필요'}
              </span>
            </span>
            <span className="chat-share-page__settings-item-description">
                {selectedTokenUsageSetting
                  ? `지금 사용 가능 ${tokenUsageOverview.currentAvailableLabel}`
                : '공유 링크 생성 시 선택된 토큰 설정이 없습니다.'}
            </span>
            <span className="chat-share-page__settings-item-description">
              5시간 초기화 {tokenUsageOverview.fiveHourCountdownLabel}
            </span>
            <span className="chat-share-page__settings-meter" aria-hidden="true">
              <span
                className="chat-share-page__settings-meter-fill"
                style={{
                  width: `${
                    selectedTokenUsageSetting && tokenUsageFiveHourSummary.percentage != null
                      ? Math.max(6, tokenUsageFiveHourSummary.percentage)
                      : 18
                  }%`,
                }}
              />
            </span>
          </span>
        ),
        icon: <SettingOutlined />,
      },
      ...(canOpenSharedRoomSettings
        ? [
            {
              key: 'conversation-room-settings',
              label: (
                <span className="chat-share-page__settings-item">
                  <span className="chat-share-page__settings-item-title">채팅방 설정</span>
                  <span className="chat-share-page__settings-item-description">
                    Codex Live와 동일한 Context 기준으로 유형과 문맥을 조정합니다.
                  </span>
                </span>
              ),
              icon: <AppstoreOutlined />,
            },
          ]
        : []),
      ...(hasWorkServerCommandApp
        ? [
            {
              key: 'conversation-work-server-command',
              label: (
                <span className="chat-share-page__settings-item">
                  <span className="chat-share-page__settings-item-title-row">
                    <span className="chat-share-page__settings-item-title">
                      <span
                        className={`chat-share-page__settings-version-indicator chat-share-page__settings-version-indicator--${resolveShareWorkServerVersionStatus(shareWorkServerCommand)}`}
                        aria-hidden="true"
                      />
                      서버관리
                    </span>
                    <span
                      className={`chat-share-page__settings-status-badge chat-share-page__settings-status-badge--${resolveShareWorkServerVersionStatus(shareWorkServerCommand)}`}
                    >
                      {resolveShareWorkServerStatusLabel(shareWorkServerCommand)}
                    </span>
                  </span>
                  <span className="chat-share-page__settings-item-description">
                    {resolveShareWorkServerVersionDescription(shareWorkServerCommand)}
                  </span>
                  <span className="chat-share-page__settings-item-meta chat-share-page__settings-item-meta--detail">
                    {resolveShareWorkServerVersionLabel(shareWorkServerCommand)}
                  </span>
                </span>
              ),
              icon: <ReloadOutlined />,
            },
          ]
        : []),
      {
        key: 'conversation-clear',
        label: (
          <span className="chat-share-page__settings-item">
            <span className="chat-share-page__settings-item-title">채팅방 비우기</span>
            <span className="chat-share-page__settings-item-description">메시지, 요청, 활동 로그를 초기화합니다.</span>
          </span>
        ),
        icon: <DeleteOutlined />,
        danger: true,
        disabled: !canSendMessage || isClearingConversation || !(snapshot?.share.sessionId?.trim()),
      },
    ],
    [
      allowedManagementApps.length,
      allowedPlayAppEntries.length,
      canSendMessage,
      canOpenSharedRoomSettings,
      hasWorkServerCommandApp,
      isClearingConversation,
      selectedTokenUsageSetting,
      shareWorkServerCommand,
      snapshot?.conversation.title,
      snapshot?.share.sessionId,
        tokenUsageFiveHourSummary.percentage,
        tokenUsageOverview.currentAvailableLabel,
        tokenUsageOverview.fiveHourCountdownLabel,
      ],
    );
  const handleShareHeaderSettingsClick = useCallback<NonNullable<MenuProps['onClick']>>(
    ({ key }) => {
      if (key === 'conversation-search') {
        setSearchPanelMode('all');
        setSearchKeyword('');
        setIsSearchOpen(true);
        return;
      }

      if (key === 'conversation-refresh') {
        handleReloadPage();
        return;
      }

      if (key === 'conversation-apps') {
        setSearchPanelMode('apps');
        setSearchKeyword('');
        setIsSearchOpen(true);
        return;
      }

      if (key === 'conversation-token-usage') {
        setIsTokenUsageOpen(true);
        return;
      }

      if (key === 'conversation-room-settings') {
        openSharedRoomSettings();
        return;
      }

      if (key === 'conversation-work-server-command') {
        openProgramTarget(buildShareManagementProgramTarget('server-command', '서버관리'));
        return;
      }

      if (key === 'conversation-clear') {
        void handleClearConversation();
      }
    },
    [handleClearConversation, handleReloadPage, openProgramTarget, openSharedRoomSettings],
  );
  const shareExpandModeMenuItems = useMemo<MenuProps['items']>(
    () => [
      {
        key: 'latest',
        label: `마지막건${sortedRequests.length > 0 ? ` (${latestRequestIndex + 1}/${sortedRequests.length})` : ''}`,
      },
      {
        key: 'pending',
        label: `처리중·미확인 (${pendingCompletionRequests.length})`,
      },
      {
        key: 'all',
        label: `전체 (${sortedRequests.length})`,
      },
    ],
    [latestRequestIndex, pendingCompletionRequests.length, sortedRequests.length],
  );
  const handleSelectExpandMode: MenuProps['onClick'] = ({ key }) => {
    if (key === 'latest' || key === 'pending' || key === 'all') {
      if (key === 'latest') {
        const nextLatestRequest = sortedRequests[sortedRequests.length - 1];
        if (nextLatestRequest) {
          setLatestRequestId(nextLatestRequest.requestId);
        }
      }

      setExpandMode(key);
    }
  };

  useEffect(() => {
    const activePromptSelectionKeys = new Set<string>();

    sortedMessages.forEach((message) => {
      const promptParts = (messageRenderPayloadById.get(message.id)?.promptParts ?? []).map((part) =>
        normalizedToken ? rewritePromptPartForShare(part, normalizedToken) : part,
      );
      const parentRequestId = message.clientRequestId?.trim() || '';

      promptParts.forEach((target, promptIndex) => {
        activePromptSelectionKeys.add(
          buildSharePromptSelectionKey(
            parentRequestId,
            message.id,
            promptIndex,
            target.title,
            buildPromptTargetSignature(target),
          ),
        );
      });
    });

    if (promptTarget && promptTargetRequestId) {
      const rewrittenPromptTarget = normalizedToken ? rewritePromptPartForShare(promptTarget.prompt, normalizedToken) : promptTarget.prompt;
      activePromptSelectionKeys.add(
        buildSharePromptSelectionKey(
          promptTargetRequestId,
          promptTarget.sourceMessageId,
          promptTarget.promptIndex,
          rewrittenPromptTarget.title,
          buildPromptTargetSignature(rewrittenPromptTarget),
        ),
      );
    }

    setPendingPromptSelections((current) => {
      const nextEntries = Object.entries(current).filter(([key]) => activePromptSelectionKeys.has(key));

      if (nextEntries.length === Object.keys(current).length) {
        return current;
      }

      return Object.fromEntries(nextEntries);
    });
  }, [messageRenderPayloadById, normalizedToken, promptTarget, promptTargetRequestId, sortedMessages]);

  useEffect(() => {
    if (!hasActiveProcessingRequest) {
      return undefined;
    }

    setNowMs(Date.now());
    const intervalId = window.setInterval(() => {
      setNowMs(Date.now());
    }, SHARE_PROCESSING_CLOCK_INTERVAL_MS);

    return () => {
      window.clearInterval(intervalId);
    };
  }, [hasActiveProcessingRequest]);

  useEffect(() => {
    if (hasActiveProcessingRequest) {
      return undefined;
    }

    if (isTokenUsageOpen && selectedTokenUsageSetting) {
      setNowMs(Date.now());
      const intervalId = window.setInterval(() => {
        setNowMs(Date.now());
      }, SHARE_TOKEN_USAGE_CLOCK_INTERVAL_MS);

      return () => {
        window.clearInterval(intervalId);
      };
    }

    if (!currentShareEffectiveExpiresAt) {
      return undefined;
    }

    setNowMs(Date.now());
    const intervalId = window.setInterval(() => {
      setNowMs(Date.now());
    }, SHARE_EXPIRY_CLOCK_INTERVAL_MS);

    return () => {
      window.clearInterval(intervalId);
    };
  }, [currentShareEffectiveExpiresAt, hasActiveProcessingRequest, isTokenUsageOpen, selectedTokenUsageSetting]);

  useEffect(() => {
    return () => {
      if (liveRefreshTimerRef.current != null) {
        window.clearTimeout(liveRefreshTimerRef.current);
      }
    };
  }, []);

  useEffect(() => {
    queueScrollJumpVisibilitySync();

    return () => {
      if (scrollSyncFrameRef.current) {
        window.cancelAnimationFrame(scrollSyncFrameRef.current);
        scrollSyncFrameRef.current = null;
      }
      if (scrollIdleTimerRef.current) {
        window.clearTimeout(scrollIdleTimerRef.current);
        scrollIdleTimerRef.current = null;
      }
    };
  }, [displayedRequests, isPromptShare, queueScrollJumpVisibilitySync, sortedMessages.length]);

  if (isLoading) {
    return (
      <div className="chat-share-page chat-share-page--centered">
        <Spin size="large" />
      </div>
    );
  }

  if (requiresAccessPin) {
    return (
      <div className="chat-share-page chat-share-page--centered">
        <div className="chat-share-page__panel chat-share-page__empty-card chat-share-page__lock-card">
          <Title level={4}>공유 채팅방 비밀번호</Title>
          <Paragraph>이 공유 채팅방은 접근 전에 숫자 4자리 비밀번호 입력이 필요합니다.</Paragraph>
          <div className="chat-share-page__lock-form">
            <Input.Password
              value={accessPinInput}
              maxLength={SHARE_ACCESS_PIN_MAX_LENGTH}
              inputMode="numeric"
              autoComplete="one-time-code"
              placeholder="숫자 4자리"
              iconRender={renderAccessPinVisibilityIcon}
              onChange={(event) => {
                const nextValue = normalizeAccessPinInput(event.target.value);
                setAccessPinInput(nextValue);
                if (accessPinSubmitError) {
                  setAccessPinSubmitError('');
                }
                if (nextValue.length === SHARE_ACCESS_PIN_MAX_LENGTH) {
                  void handleUnlockShare(nextValue);
                }
              }}
              onPressEnter={() => {
                void handleUnlockShare();
              }}
            />
            {accessPinSubmitError ? <Text type="danger">{accessPinSubmitError}</Text> : null}
            <Button type="primary" onClick={() => void handleUnlockShare()}>
              잠금 해제
            </Button>
          </div>
        </div>
      </div>
    );
  }

  if (errorMessage || !snapshot) {
    return (
      <div className="chat-share-page chat-share-page--centered">
        <div className="chat-share-page__panel chat-share-page__empty-card">
          <Title level={4}>공유 화면을 열 수 없습니다.</Title>
          <Paragraph>{errorMessage || '공유 데이터가 없습니다.'}</Paragraph>
        </div>
      </div>
    );
  }

  return (
    <>
      <div
        ref={scrollContainerRef}
        className={`chat-share-page${isComposerViewportCompacted ? ' chat-share-page--composer-viewport-compacted' : ''}`}
        onScroll={handleScrollContainerScroll}
        onFocusCapture={handleScrollContainerFocusCapture}
        onBlurCapture={handleScrollContainerBlurCapture}
      >
        <div ref={pageRef} className="chat-share-page__shell">
        {isPromptShare ? (
          <div className="chat-share-page__prompt-layout">
            <section className="chat-share-page__panel chat-share-page__panel--focus">
              <div className="chat-share-page__section-head">
                <div className="chat-share-page__section-copy">
                  <Title level={5}>공유된 prompt</Title>
                </div>
                {promptTarget &&
                promptTargetRequestId &&
                !isPromptResolved(promptTarget.prompt) &&
                !snapshot.targetRequest.manualPromptCompletedAt &&
                !isRequestInFlight(snapshot.targetRequest.status) ? (
                  <div className="chat-share-page__section-actions">
                    <Button
                      size="small"
                      icon={<CheckOutlined />}
                      loading={pendingPromptCompletionRequestIds.includes(promptTargetRequestId)}
                      onClick={() => {
                        void handleCompletePrompt(promptTargetRequestId);
                      }}
                    >
                      완료 처리
                    </Button>
                  </div>
                ) : null}
              </div>
              {promptTarget && promptTargetRequestId ? (
                (() => {
                  const target = rewritePromptPartForShare(promptTarget.prompt, normalizedToken);
                  const promptSignature = buildPromptTargetSignature(target);
                  const selectionKey = buildSharePromptSelectionKey(
                    promptTargetRequestId,
                    promptTarget.sourceMessageId,
                    promptTarget.promptIndex,
                    target.title,
                    promptSignature,
                  );
                  const draftSelection = pendingPromptSelections[selectionKey]?.status === 'draft'
                    ? pendingPromptSelections[selectionKey]
                    : null;
                  const submittedSelection = pendingPromptSelections[selectionKey]?.status === 'submitted'
                    ? pendingPromptSelections[selectionKey]
                    : null;

                  return (
                    <ChatPromptCard
                      target={target}
                      readOnly={Boolean(snapshot.targetRequest.manualPromptCompletedAt)}
                      draftSelection={draftSelection}
                      submittedSelection={submittedSelection}
                      onSelectionChange={(selection) => updatePendingPromptSelection(selectionKey, selection)}
                      onSubmitted={(selection) => markPendingPromptSelectionSubmitted(selectionKey, selection)}
                      onSubmit={(payload) =>
                        handleSubmitPrompt({
                          ...payload,
                          parentRequestId: promptTargetRequestId,
                          promptIndex: promptTarget.promptIndex,
                          sourceMessageId: promptTarget.sourceMessageId,
                        })
                      }
                      allowAttachments={Boolean(snapshot?.share.sessionId?.trim())}
                      attachmentAccept={SHARE_ATTACHMENT_ACCEPT}
                      onUploadAttachment={handleUploadPromptAttachment}
                    />
                  );
                })()
              ) : (
                <Text type="secondary">표시할 prompt가 없습니다.</Text>
              )}
            </section>

            {lastResponseMessage ? (
              <section className="chat-share-page__panel chat-share-page__panel--focus">
                <div className="chat-share-page__section-head">
                  <div className="chat-share-page__section-copy">
                    <Title level={5}>결과</Title>
                    <Text type="secondary">이 prompt에 대해 받은 최신 응답입니다.</Text>
                  </div>
                </div>
                <ShareResponseBlock
                  message={lastResponseMessage}
                  requestById={new Map(promptTargetRequestId ? [[promptTargetRequestId, snapshot.targetRequest]] : [])}
                  emphasisLabel="최신 결과"
                  onSubmitPrompt={handleSubmitPrompt}
                  promptSelections={pendingPromptSelections}
                  onPromptSelectionChange={updatePendingPromptSelection}
                  onPromptSubmitted={markPendingPromptSelectionSubmitted}
                  onCompletePrompt={handleCompletePrompt}
                  onCompleteVerification={handleCompleteVerification}
                  isPromptCompletionSaving={pendingPromptCompletionRequestIds.includes(promptTargetRequestId)}
                  isPromptManualCompleted={Boolean(snapshot.targetRequest.manualPromptCompletedAt)}
                  isVerificationCompletionSaving={pendingVerificationCompletionRequestIds.includes(promptTargetRequestId)}
                  isVerificationCompleted={Boolean(snapshot.targetRequest.manualVerificationCompletedAt)}
                  shareToken={normalizedToken}
                  canUploadAttachments={Boolean(snapshot?.share.sessionId?.trim())}
                  onUploadAttachment={handleUploadPromptAttachment}
                  onSetResponseAnchor={setResponseAnchorRef}
                  onSetPromptAnchor={setPromptAnchorRef}
                />
              </section>
            ) : null}

            {promptShareFollowupRequests.length > 0 ? (
              <section className="chat-share-page__panel chat-share-page__panel--focus">
                <div className="chat-share-page__section-head">
                  <div className="chat-share-page__section-copy">
                    <Title level={5}>전달 내역</Title>
                    <Text type="secondary">선택 없이 보낸 기타 요청도 여기에서 계속 확인할 수 있습니다.</Text>
                  </div>
                </div>
                <div className="chat-share-page__message-list">
                  {promptShareFollowupRequests.map((request) => (
                    <ShareRequestCard
                      key={request.requestId}
                      request={request}
                      requestById={requestById}
                      answerText={requestAnswerTextById.get(request.requestId) ?? ''}
                      relatedMessages={requestMessagesById.get(request.requestId) ?? []}
                      mode="full"
                      onSubmitPrompt={handleSubmitPrompt}
                      promptSelections={pendingPromptSelections}
                      onPromptSelectionChange={updatePendingPromptSelection}
                      onPromptSubmitted={markPendingPromptSelectionSubmitted}
                      onCompletePrompt={handleCompletePrompt}
                      onCompleteVerification={handleCompleteVerification}
                      isPromptCompletionSaving={pendingPromptCompletionRequestIds.includes(request.requestId)}
                      isVerificationCompletionSaving={pendingVerificationCompletionRequestIds.includes(request.requestId)}
                      isVerificationCompleted={Boolean(request.manualVerificationCompletedAt)}
                      hasChildRequest={(childRequestCountByParentId.get(request.requestId.trim()) ?? 0) > 0}
                      activeReplyRequestId={null}
                      onCancelDisconnectedRequest={handleCancelDisconnectedRequest}
                      isRequestCancellationSaving={pendingRequestCancellationIds.includes(request.requestId)}
                      onRetryDisconnectedRequest={handleRetryDisconnectedRequest}
                      isRequestRetrySaving={pendingRequestRetryIds.includes(request.requestId)}
                      onReplyToResponse={null}
                      shareToken={normalizedToken}
                      onOpenProgram={openProgramTarget}
                      canUploadAttachments={Boolean(snapshot?.share.sessionId?.trim())}
                      onUploadAttachment={handleUploadPromptAttachment}
                      onSetRequestAnchor={setRequestAnchorRef}
                      onSetResponseAnchor={setResponseAnchorRef}
                      onSetPromptAnchor={setPromptAnchorRef}
                    />
                  ))}
                </div>
              </section>
            ) : null}
          </div>
        ) : (
          <div className={contentLayoutClassName}>
            <section className="chat-share-page__panel chat-share-page__conversation-panel">
              <div className="chat-share-page__section-head">
                  <div className="chat-share-page__section-copy">
                  <div className="chat-share-page__section-title-row">
                    <Title level={5}>채팅</Title>
                    <span
                      className={`chat-share-page__live-dot ${isLiveConnected ? 'chat-share-page__live-dot--connected' : 'chat-share-page__live-dot--disconnected'}`}
                      aria-label={isLiveConnected ? '웹소켓 연결됨' : '웹소켓 연결 끊김'}
                      title={isLiveConnected ? '웹소켓 연결됨' : '웹소켓 연결 끊김'}
                    />
                    {aggregateStatusTag ? <Tag color={aggregateStatusTag.color}>{aggregateStatusTag.label}</Tag> : null}
                    <Text type="secondary" className="chat-share-page__header-summary">
                      {headerSummaryLabel}
                    </Text>
                  </div>
                </div>
                <div className="chat-share-page__section-actions">
                  <div className="chat-share-page__request-nav" aria-label="요청 이동">
                    <Button
                      type="text"
                      size="small"
                      className="chat-share-page__section-action"
                      icon={<LeftOutlined />}
                      disabled={!canMoveToPreviousRequest}
                      onClick={handleMoveToPreviousRequest}
                    >
                      이전
                    </Button>
                    <Button
                      type="text"
                      size="small"
                      className="chat-share-page__section-action"
                      icon={<RightOutlined />}
                      iconPosition="end"
                      disabled={!canMoveToNextRequest}
                      onClick={handleMoveToNextRequest}
                    >
                      다음
                    </Button>
                  </div>
                  <Dropdown
                    trigger={['click']}
                    menu={{
                      items: shareHeaderSettingsItems,
                      className: 'chat-share-page__settings-menu',
                      onClick: handleShareHeaderSettingsClick,
                    }}
                    placement="bottomRight"
                  >
                    <Button
                      type="text"
                      size="small"
                      className="chat-share-page__section-action chat-share-page__section-action--tool"
                      aria-label="채팅 설정"
                      title="채팅 설정"
                      icon={<SettingOutlined />}
                      >
                      <span className="chat-share-page__tool-button-label">설정</span>
                    </Button>
                  </Dropdown>
                </div>
              </div>
              <div className="chat-share-page__message-list">
                {headerInquiryRequest ? (
                  <section className="chat-share-page__first-inquiry">
                    <div className="chat-share-page__first-inquiry-head">
                      <div className="chat-share-page__first-inquiry-copy">
                        <div className="chat-share-page__first-inquiry-title-row">
                          <Title
                            level={5}
                            className="chat-share-page__first-inquiry-title"
                            ellipsis={{ rows: 1, tooltip: headerTitleText }}
                          >
                            {headerTitleText}
                          </Title>
                          {canOpenSharedRoomSettings ? (
                            <Button
                              type="text"
                              size="small"
                              className="chat-share-page__section-action chat-share-page__section-action--tool"
                              aria-label="채팅방 이름 및 설정 편집"
                              title="채팅방 이름 및 설정 편집"
                              icon={<EditOutlined />}
                              onClick={() => {
                                openSharedRoomSettings();
                              }}
                            />
                          ) : null}
                        </div>
                      </div>
                      <Dropdown
                        trigger={['click']}
                        placement="bottomRight"
                        menu={{
                          items: shareExpandModeMenuItems,
                          selectable: true,
                          selectedKeys: [expandMode],
                          onClick: handleSelectExpandMode,
                        }}
                      >
                        <Button
                          type="text"
                          size="small"
                          className={`chat-share-page__section-action chat-share-page__section-action--tool chat-share-page__expand-mode-filter${expandMode !== 'latest' ? ' chat-share-page__expand-mode-filter--active' : ''}`}
                          aria-label={`공유 채팅 펼치기 필터: ${getShareExpandModeLabel(expandMode)} ${requestProgressLabel}`.trim()}
                          title={`공유 채팅 펼치기 필터: ${getShareExpandModeLabel(expandMode)} ${requestProgressLabel}`.trim()}
                          icon={<FilterOutlined />}
                        >
                          <span className="chat-share-page__tool-button-label">
                            {expandMode === 'latest' ? '필터' : getShareExpandModeLabel(expandMode)}
                          </span>
                        </Button>
                      </Dropdown>
                    </div>
                  </section>
                ) : null}
                {expandMode === 'latest' && hiddenBeforeCount > 0 ? (
                  <div className="chat-share-page__omission chat-share-page__omission--collapsed chat-share-page__omission--before" aria-label={`위쪽 채팅 ${hiddenBeforeCount}건 숨김`}>
                    <span className="chat-share-page__omission-line" aria-hidden="true" />
                    <Text type="secondary" className="chat-share-page__omission-label">{`위로 생략 ${hiddenBeforeCount}건`}</Text>
                    <span className="chat-share-page__omission-line" aria-hidden="true" />
                  </div>
                ) : null}
                {displayedRequests.map((request) => (
                  <ShareRequestCard
                    key={request.requestId}
                    request={request}
                    requestById={requestById}
                    answerText={requestAnswerTextById.get(request.requestId) ?? ''}
                    relatedMessages={requestMessagesById.get(request.requestId) ?? []}
                    mode="full"
                    onSubmitPrompt={handleSubmitPrompt}
                    promptSelections={pendingPromptSelections}
                    onPromptSelectionChange={updatePendingPromptSelection}
                    onPromptSubmitted={markPendingPromptSelectionSubmitted}
                    onCompletePrompt={handleCompletePrompt}
                    onCompleteVerification={handleCompleteVerification}
                    isPromptCompletionSaving={pendingPromptCompletionRequestIds.includes(request.requestId)}
                    isVerificationCompletionSaving={pendingVerificationCompletionRequestIds.includes(request.requestId)}
                    isVerificationCompleted={Boolean(request.manualVerificationCompletedAt)}
                    hasChildRequest={(childRequestCountByParentId.get(request.requestId.trim()) ?? 0) > 0}
                    activeReplyRequestId={replyReferenceRequestId}
                    onCancelDisconnectedRequest={handleCancelDisconnectedRequest}
                    isRequestCancellationSaving={pendingRequestCancellationIds.includes(request.requestId)}
                    onRetryDisconnectedRequest={handleRetryDisconnectedRequest}
                    isRequestRetrySaving={pendingRequestRetryIds.includes(request.requestId)}
                    onReplyToResponse={
                      isPromptShare
                        ? null
                        : (parentRequestId) => {
                            setReplyReferenceRequestId(parentRequestId.trim());
                            window.setTimeout(() => {
                              composerRef.current?.focus({ cursor: 'end' });
                            }, 0);
                          }
                    }
                    shareToken={normalizedToken}
                    onOpenProgram={openProgramTarget}
                    canUploadAttachments={Boolean(snapshot?.share.sessionId?.trim())}
                    onUploadAttachment={handleUploadPromptAttachment}
                    onSetRequestAnchor={setRequestAnchorRef}
                    onSetResponseAnchor={setResponseAnchorRef}
                    onSetPromptAnchor={setPromptAnchorRef}
                    onOpenPreviousQuestion={(requestId) => {
                      setPreviousQuestionModalRequestId(requestId.trim());
                    }}
                  />
                ))}
                {expandMode === 'latest' && hiddenAfterCount > 0 ? (
                  <div className="chat-share-page__omission chat-share-page__omission--collapsed chat-share-page__omission--after" aria-label={`아래쪽 채팅 ${hiddenAfterCount}건 숨김`}>
                    <span className="chat-share-page__omission-line" aria-hidden="true" />
                    <Text type="secondary" className="chat-share-page__omission-label">{`아래로 생략 ${hiddenAfterCount}건`}</Text>
                    <span className="chat-share-page__omission-line" aria-hidden="true" />
                  </div>
                ) : null}
                {expandMode === 'pending' && displayedRequests.length === 0 ? (
                  <div className="chat-share-page__omission chat-share-page__omission--empty">
                    <span className="chat-share-page__omission-line" aria-hidden="true" />
                    <Text type="secondary">현재 처리중이거나 확인이 필요한 건이 없습니다.</Text>
                    <span className="chat-share-page__omission-line" aria-hidden="true" />
                  </div>
                ) : null}
              </div>
            </section>

            {canSendMessage ? (
              <>
                {expandMode === 'latest' && collapsedActivitySummary.length > 0 ? (
                  <section
                    id="chat-share-activity-panel"
                    className="chat-share-page__panel chat-share-page__activity-panel"
                    aria-label="현재 진행 상황"
                  >
                    <div className="chat-share-page__section-head chat-share-page__section-head--compact">
                      <div className="chat-share-page__section-copy">
                        <Title level={5}>현재 진행 상황</Title>
                      </div>
                    </div>
                    <div className="chat-share-page__activity-summary-list">
                      {collapsedActivitySummary.map((item) => (
                        <Text key={item} type="secondary" className="chat-share-page__activity-summary-item">{item}</Text>
                      ))}
                    </div>
                  </section>
                ) : null}
                <section className="chat-share-page__panel chat-share-page__composer-panel">
                  <div className="chat-share-page__composer-shell app-chat-panel__composer">
                    <input
                      ref={composerAttachmentInputRef}
                      type="file"
                      multiple
                      accept={SHARE_ATTACHMENT_ACCEPT}
                      className="chat-share-page__composer-file-input"
                      onChange={(event) => {
                        const files = Array.from(event.target.files ?? []);
                        event.target.value = '';
                        void handleUploadComposerAttachments(files);
                      }}
                    />
                    <div className="chat-share-page__composer-topline">
                      <div className="app-chat-panel__composer-utility-buttons">
                        <Button
                          icon={<PlusOutlined />}
                          aria-label="파일 첨부"
                          title="파일 첨부"
                          onClick={() => {
                            composerAttachmentInputRef.current?.click();
                          }}
                          disabled={isSending || isUploadingComposerAttachment}
                          loading={isUploadingComposerAttachment}
                        />
                      </div>
                      <div className="app-chat-panel__composer-type chat-share-page__composer-type-readonly">
                        <Select
                          value={shareChatTypeLabel}
                          aria-label="현재 채팅유형"
                          options={[
                            {
                              value: shareChatTypeLabel,
                              label: (
                                <div className="app-chat-panel__type-option">
                                  <span>{shareChatTypeLabel}</span>
                                </div>
                              ),
                            },
                          ]}
                          disabled
                        />
                      </div>
                      <div className="app-chat-panel__composer-actions chat-share-page__composer-topline-actions">
                        <div className="app-chat-panel__composer-action-buttons">
                          <Button
                            icon={<ThunderboltOutlined />}
                            type={isImmediateSendPinned ? 'primary' : 'default'}
                            title={isImmediateSendPinned ? '즉시전송 항상 켜짐' : '즉시 전송'}
                            aria-label={isImmediateSendPinned ? '즉시전송 항상 켜짐' : '즉시 전송'}
                            onPointerDown={startImmediateSendHoldTimer}
                            onPointerUp={clearImmediateSendHoldTimer}
                            onPointerLeave={clearImmediateSendHoldTimer}
                            onPointerCancel={clearImmediateSendHoldTimer}
                            onClick={handleImmediateSendButtonClick}
                            loading={isSending}
                            disabled={(!draftText.trim() && composerAttachments.length === 0) || isUploadingComposerAttachment}
                          />
                          <Button
                            type="primary"
                            icon={<SendOutlined />}
                            title={isImmediateSendPinned ? '즉시전송으로 보내기' : '대기열로 보내기'}
                            aria-label={isImmediateSendPinned ? '즉시전송으로 보내기' : '대기열로 보내기'}
                            onClick={() => void handleSendMessage()}
                            loading={isSending}
                            disabled={(!draftText.trim() && composerAttachments.length === 0) || isUploadingComposerAttachment}
                          />
                        </div>
                      </div>
                    </div>
                    <div className="chat-share-page__composer-send-mode" aria-live="polite">
                      <Tag color={isImmediateSendPinned ? 'blue' : 'default'}>{shareSendModeSummary.tagLabel}</Tag>
                      <Text type="secondary" className="chat-share-page__composer-send-mode-text">
                        {shareSendModeSummary.description}
                      </Text>
                    </div>
                    {replyReferenceRequest ? (
                      <div className="chat-share-page__reply-reference" aria-live="polite">
                        <div className="chat-share-page__reply-reference-copy">
                          <span className="chat-share-page__reply-reference-label">답변 참조 중</span>
                          <span className="chat-share-page__reply-reference-text">{replyReferenceSummary}</span>
                        </div>
                        <Button
                          type="text"
                          size="small"
                          className="chat-share-page__reply-reference-clear"
                          onClick={() => {
                            setReplyReferenceRequestId('');
                          }}
                        >
                          해제
                        </Button>
                      </div>
                    ) : null}
                    <div className="chat-share-page__composer-entry-row">
                      <div
                        ref={composerInputShellRef}
                        className={`app-chat-panel__composer-input-shell chat-share-page__composer-input-shell${
                          isSending ? ' chat-share-page__composer-input-shell--sending' : ''
                        }`}
                      >
                        <Input.TextArea
                          ref={composerRef}
                          value={draftText}
                          onChange={(event) => setDraftText(event.target.value)}
                          onKeyDown={handleComposerKeyDown}
                          onPaste={handleComposerPaste}
                          onFocus={handleComposerFocus}
                          onBlur={handleComposerBlur}
                          placeholder={
                            replyReferenceRequest
                              ? '선택한 답변을 바탕으로 공유채팅에 이어서 보낼 내용을 입력하세요. 첨부만 추가해서 보내도 됩니다.'
                              : '공유채팅에 보낼 내용을 입력하세요. 첨부만 추가해서 보내도 됩니다.'
                          }
                          aria-busy={isSending}
                          rows={1}
                          maxLength={20000}
                          disabled={isSending || isUploadingComposerAttachment}
                        />
                      </div>
                    </div>
                    {composerAttachments.length > 0 ? (
                      <div className="app-chat-panel__composer-attachment-strip" aria-live="polite">
                        {composerAttachments.map((attachment) => (
                          <div key={attachment.id} className="app-chat-panel__composer-attachment-chip">
                            <span className="app-chat-panel__composer-attachment-name">{attachment.name}</span>
                            <Button
                              type="text"
                              size="small"
                              className="app-chat-panel__composer-attachment-remove"
                              icon={<CloseOutlined />}
                              aria-label={`${attachment.name} 첨부 제거`}
                              onClick={() => {
                                setComposerAttachments((current) => current.filter((item) => item.id !== attachment.id));
                              }}
                            />
                          </div>
                        ))}
                      </div>
                    ) : null}
                  </div>
                </section>
              </>
            ) : !isPromptShare && shareBlockedReason ? (
              <section className="chat-share-page__panel chat-share-page__composer-panel">
                <Alert
                  showIcon
                  type="warning"
                  message="이 공유 링크에서는 더 이상 답변을 보낼 수 없습니다."
                  description={shareBlockedReason}
                />
              </section>
            ) : null}
          </div>
        )}
        </div>
      </div>
      {showScrollToTop || showScrollToBottom ? (
        <div className="chat-share-page__scroll-jump">
          {showScrollToTop ? (
            <Button type="primary" shape="circle" icon={<UpOutlined />} aria-label="채팅 처음으로 이동" onClick={handleScrollToTop} />
          ) : null}
          {showScrollToBottom ? (
            <Button type="primary" shape="circle" icon={<DownOutlined />} aria-label="채팅 끝으로 이동" onClick={handleScrollToBottom} />
          ) : null}
        </div>
      ) : null}
      <Modal
        open={Boolean(previousQuestionModalRequest)}
        title="부모 요청"
        footer={null}
        centered
        onCancel={() => {
          setPreviousQuestionModalRequestId('');
        }}
      >
        <div className="chat-share-page__previous-question-modal">
          <div className="chat-share-page__previous-question-modal-section">
            <Text strong>부모 요청</Text>
            <Text type="secondary">
              {previousQuestionModalRequest ? formatTimeLabel(previousQuestionModalRequest.createdAt) || '요청 시각 없음' : ''}
            </Text>
            <Paragraph className="chat-share-page__previous-question-modal-text">
              {previousQuestionModalText || '부모 요청 내용을 찾지 못했습니다.'}
            </Paragraph>
            {previousQuestionModalPreviewItems.length > 0 ? (
              <div className="chat-share-page__resource-list">
                {previousQuestionModalPreviewItems.map((item) => (
                  <ShareResourcePreviewCard
                    key={`previous-question-${item.id}`}
                    item={item}
                    shareToken={normalizedToken}
                    onOpenProgram={openProgramTarget}
                  />
                ))}
              </div>
            ) : null}
          </div>
        </div>
      </Modal>
      <Modal
        open={isTokenUsageOpen}
        footer={null}
        title="토큰 관리"
        className="chat-share-page__token-usage-modal"
        onCancel={() => setIsTokenUsageOpen(false)}
      >
        <div className="chat-share-page__token-usage-modal-body">
          {selectedTokenUsageSetting ? (
            <div className="chat-share-page__token-usage-select-row">
              <Text type="secondary">적용 토큰 설정</Text>
              <Text strong>{`${selectedTokenUsageSetting.name} (${selectedTokenUsageSetting.id})`}</Text>
            </div>
          ) : null}
          <div className="chat-share-page__token-usage-overview-card" aria-label="토큰 집계 요약">
            <div className="chat-share-page__token-usage-overview-head">
              <div>
                <div className="chat-share-page__token-usage-overview-label">지금 사용 가능</div>
                <div className="chat-share-page__token-usage-overview-value">{tokenUsageOverview.currentAvailableLabel}</div>
              </div>
              <Tag color={tokenUsageFiveHourSummary.requestCount > 0 ? 'gold' : 'default'}>
                {tokenUsageOverview.fiveHourBucketLabel}
              </Tag>
            </div>
            <div className="chat-share-page__token-usage-meter-card">
              <div className="chat-share-page__token-usage-meter-track chat-share-page__token-usage-meter-track--merged" aria-hidden="true">
                {tokenUsageOverview.meterLayers.map((item) => (
                  <span
                    key={item.key}
                    className={`chat-share-page__token-usage-meter-fill ${item.colorClassName}`}
                    style={{ width: `${item.widthPercent}%` }}
                  />
                ))}
              </div>
              <div className="chat-share-page__token-usage-meter-legend">
                {tokenUsageOverview.meterLegendItems.map((item) => (
                  <div key={item.key} className="chat-share-page__token-usage-meter-row">
                    <span className={`chat-share-page__token-usage-meter-dot ${item.colorClassName}`} aria-hidden="true" />
                    <span className="chat-share-page__token-usage-meter-label">{item.label}</span>
                    <span className="chat-share-page__token-usage-meter-value">{item.caption}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="chat-share-page__token-usage-summary-copy">{tokenUsageOverview.oneLineSummary}</div>
            <div className="chat-share-page__token-usage-reset-grid">
              <div className="chat-share-page__token-usage-reset-card chat-share-page__token-usage-reset-card--primary">
                <span className="chat-share-page__token-usage-reset-label">5시간 초기화까지</span>
                <strong className="chat-share-page__token-usage-reset-value">{tokenUsageOverview.fiveHourCountdownLabel}</strong>
                <span className="chat-share-page__token-usage-summary-copy">
                  {tokenUsageOverview.fiveHourResetTimeLabel} · {tokenUsageOverview.fiveHourResetAmountLabel}
                </span>
              </div>
              <div className="chat-share-page__token-usage-reset-card">
                <span className="chat-share-page__token-usage-reset-label">1주일 초기화</span>
                <strong className="chat-share-page__token-usage-reset-value chat-share-page__token-usage-reset-value--compact">
                  {tokenUsageOverview.sevenDayResetTimeLabel}
                </strong>
              </div>
            </div>
          </div>
          <div className="chat-share-page__token-usage-select-row">
            <Text type="secondary">현재 공유 토큰</Text>
            <div className="chat-share-page__token-usage-share-url-row">
              <Paragraph
                className="chat-share-page__token-usage-share-url"
                ellipsis={currentShareUrl ? { rows: 1, tooltip: currentShareUrl } : { rows: 1 }}
                style={{ maxWidth: '100%', marginBottom: 0 }}
              >
                {currentShareUrl || 'URL 없음'}
              </Paragraph>
              {currentShareUrl ? (
                <Button
                  type="text"
                  size="small"
                  className="chat-share-page__token-usage-copy-button"
                  icon={<CopyOutlined />}
                  aria-label="토큰 URL 복사"
                  onClick={() => {
                    void handleCopyCurrentShareUrl();
                  }}
                />
              ) : null}
            </div>
            <div className="chat-share-page__token-usage-token-meta">
              <Text type="secondary">{currentShareTokenUsageStatusLabel}</Text>
            </div>
          </div>
          <div className="chat-share-page__token-usage-summary-copy">
            {selectedTokenUsageSetting
              ? `현재 토큰 ${
                  currentShareEffectiveExpiresAt ? currentShareExpiresAtLabel : currentShareDefaultPolicyLabel
                } · 기본 정책 ${
                  currentShareDefaultExpiryLabel ? currentShareDefaultExpiryLabel.replace(/^기본 유효시간\s*/, '') : '사용기간 제한 없음'
                }`
              : '토큰 설정이 없으면 사용량만 집계합니다.'}
          </div>
        </div>
      </Modal>
      <Drawer
        open={isRoomSettingsOpen}
        title="공유 채팅방 설정"
        placement="right"
        width="100vw"
        className="chat-share-page__room-settings-drawer"
        onClose={() => {
          if (isSavingRoomSettings) {
            return;
          }

          setIsRoomSettingsOpen(false);
        }}
        extra={(
          <div className="chat-share-page__room-settings-actions">
            <Button
              onClick={() => setIsRoomSettingsOpen(false)}
              disabled={isSavingRoomSettings}
            >
              취소
            </Button>
            <Button
              type="primary"
              loading={isSavingRoomSettings}
              disabled={
                isSavingRoomSettings ||
                (!canManageSharedRoomSettings && !canEditSharedRoomAccessPin) ||
                (canManageSharedRoomSettings && (isChatTypesLoading || isChatContextSettingsLoading))
              }
              onClick={() => {
                void handleSaveSharedRoomSettings();
              }}
            >
              {canManageSharedRoomSettings || canEditSharedRoomAccessPin ? '저장' : '닫기'}
            </Button>
          </div>
        )}
      >
        <div className="chat-share-page__room-settings-shell">
          {chatTypesErrorMessage ? <Alert showIcon type="error" message={chatTypesErrorMessage} /> : null}
          {chatContextSettingsErrorMessage ? <Alert showIcon type="error" message={chatContextSettingsErrorMessage} /> : null}
          {!canManageSharedRoomSettings ? (
            <Alert
              showIcon
              type="info"
              message={
                canEditSharedRoomAccessPin
                  ? '이 공유 링크는 채팅유형과 문맥은 읽기 전용이며, 비밀번호만 변경할 수 있습니다.'
                  : '이 공유 링크는 채팅방 설정을 읽기 전용으로만 볼 수 있습니다.'
              }
            />
          ) : null}
          <Tabs
            activeKey={roomSettingsTabKey}
            onChange={(value) => setRoomSettingsTabKey(value as typeof roomSettingsTabKey)}
            className="chat-share-page__room-settings-tabs"
            items={[
              {
                key: 'chat-type',
                label: '채팅유형',
                children: (
                  <div className="chat-share-page__room-settings-panel">
                    <div className="chat-share-page__room-settings-panel-head">
                      <Text strong>채팅방 이름</Text>
                      <Text type="secondary">공유 채팅 헤더와 알림에 표시할 이름을 직접 저장합니다.</Text>
                    </div>
                    <Input
                      value={editingRoomTitle}
                      placeholder="예: 관리자 공유 채팅"
                      readOnly={!canManageSharedRoomSettings}
                      maxLength={200}
                      onChange={(event) => {
                        setEditingRoomTitle(event.target.value);
                      }}
                    />
                    <div className="chat-share-page__room-settings-panel-head">
                      <Text strong>기본 채팅유형</Text>
                      <Text type="secondary">공유채팅이 기본으로 사용할 유형을 먼저 고릅니다.</Text>
                    </div>
                    <Select
                      value={editingRoomChatTypeId ?? undefined}
                      placeholder="채팅유형 선택"
                      loading={isChatTypesLoading}
                      disabled={!canManageSharedRoomSettings}
                      onChange={(value) => {
                        setEditingRoomChatTypeId(value);
                        if (!isEditingRoomDefaultContextsDirty) {
                          setEditingRoomDefaultContextIds(resolveShareRoomDefaultContextIds(activeRoomContextSettings, chatTypeDefaults, value));
                        }
                      }}
                      options={enabledChatTypes.map((item) => ({
                        value: item.id,
                        label: item.name,
                      }))}
                    />
                    <div className="chat-share-page__room-settings-card">
                      <Text strong>{enabledChatTypes.find((item) => item.id === editingRoomChatTypeId)?.name ?? '채팅유형 선택 필요'}</Text>
                      <Text type="secondary">
                        {enabledChatTypes.find((item) => item.id === editingRoomChatTypeId)?.description || '선택한 채팅유형의 기본 설명이 여기에 표시됩니다.'}
                      </Text>
                    </div>
                  </div>
                ),
              },
              {
                key: 'default-contexts',
                label: '공통 문맥',
                children: (
                  <div className="chat-share-page__room-settings-panel">
                    <div className="chat-share-page__room-settings-panel-head">
                      <Text strong>적용 공통 문맥</Text>
                      <Text type="secondary">비워 두면 선택한 채팅유형의 기본 공통 문맥을 그대로 상속합니다.</Text>
                    </div>
                    {enabledDefaultContexts.length > 0 ? (
                      <Checkbox.Group
                        className="chat-share-page__room-settings-checkbox-group"
                        value={editingRoomDefaultContextIds}
                        disabled={!canManageSharedRoomSettings || isChatContextSettingsLoading}
                        onChange={(checkedValues) => {
                          setIsEditingRoomDefaultContextsDirty(true);
                          setEditingRoomDefaultContextIds(
                            checkedValues
                              .map((value) => String(value).trim())
                              .filter((value) => enabledDefaultContexts.some((context) => context.id === value)),
                          );
                        }}
                      >
                        {enabledDefaultContexts.map((item) => (
                          <label key={item.id} className="chat-share-page__room-settings-card">
                            <Checkbox value={item.id}>{item.title}</Checkbox>
                            <Text type="secondary">
                              {item.content.split('\n')[0]?.replace(/^#+\s*/, '') || '설명 없음'}
                            </Text>
                          </label>
                        ))}
                      </Checkbox.Group>
                    ) : (
                      <Alert showIcon type="info" message="등록된 공통 문맥이 없습니다." />
                    )}
                  </div>
                ),
              },
              {
                key: 'room-context',
                label: '방 전용',
                children: (
                  <div className="chat-share-page__room-settings-panel">
                    <div className="chat-share-page__room-settings-panel-head">
                      <Text strong>방 전용 문맥</Text>
                      <Text type="secondary">이 공유채팅방에서만 추가로 참조할 규칙을 적습니다.</Text>
                    </div>
                    <Input
                      value={editingRoomCustomContextTitle}
                      placeholder="예: 공유 검수용 응답 규칙"
                      readOnly={!canManageSharedRoomSettings}
                      onChange={(event) => {
                        setEditingRoomCustomContextTitle(event.target.value);
                      }}
                    />
                    <Input.TextArea
                      value={editingRoomCustomContextContent}
                      rows={14}
                      placeholder="이 공유 채팅방에만 적용할 추가 규칙을 입력하세요."
                      readOnly={!canManageSharedRoomSettings}
                      onChange={(event) => {
                        setEditingRoomCustomContextContent(event.target.value);
                      }}
                    />
                  </div>
                ),
              },
              {
                key: 'notifications',
                label: '채팅 알림',
                children: (
                  <div className="chat-share-page__room-settings-panel">
                    <div className="chat-share-page__room-settings-panel-head">
                      <Text strong>이 채팅방 알림</Text>
                      <Text type="secondary">현재 기기에서 이 공유채팅방 새 답변 알림을 받을지 설정합니다.</Text>
                    </div>
                    <label className="chat-share-page__room-settings-toggle-card">
                      <Checkbox
                        checked={editingRoomNotifyOffline}
                        disabled={!canManageSharedRoomSettings}
                        onChange={(event) => {
                          setEditingRoomNotifyOffline(event.target.checked);
                        }}
                      >
                        채팅방 알림 수신
                      </Checkbox>
                      <Text type="secondary">
                        {editingRoomNotifyOffline
                          ? '새 답변이 도착하면 이 브라우저 클라이언트 기준으로 알림 대상에 포함합니다.'
                          : '이 기기는 현재 공유채팅방 오프라인 알림 대상에서 제외됩니다.'}
                      </Text>
                    </label>
                    <div className="chat-share-page__room-settings-card chat-share-page__room-settings-card--status">
                      <Text strong>{roomNotificationClientStatus.summaryLabel}</Text>
                      <div className="chat-share-page__room-settings-status-tags">
                        <Tag color={editingRoomNotifyOffline ? 'green' : 'default'}>{roomNotificationClientStatus.roomLabel}</Tag>
                        <Tag color={appConfig.chat.receiveRoomNotifications ? 'green' : 'default'}>{roomNotificationClientStatus.appLabel}</Tag>
                        <Tag color={roomNotificationClientStatus.tone === 'warning' ? 'gold' : 'default'}>
                          {roomNotificationClientStatus.permissionLabel}
                        </Tag>
                        <Tag color={roomNotificationClientStatus.tone === 'success' ? 'green' : 'default'}>
                          {roomNotificationClientStatus.registrationLabel}
                        </Tag>
                      </div>
                      <Text type="secondary">
                        방 설정, 앱 전체 허용, 브라우저 권한, 현재 기기 등록 상태만 간단히 합쳐서 표시합니다.
                      </Text>
                    </div>
                    <div className="chat-share-page__room-settings-inline-actions">
                      <Button size="small" onClick={() => void refreshRoomNotificationStatus(editingRoomNotifyOffline)} loading={isRefreshingRoomNotificationStatus}>
                        상태 다시 확인
                      </Button>
                      <Button
                        size="small"
                        type="primary"
                        icon={<SendOutlined />}
                        onClick={() => void handleSendRoomNotificationTest()}
                        loading={isSendingRoomNotificationTest}
                      >
                        테스트 전송
                      </Button>
                    </div>
                  </div>
                ),
              },
              {
                key: 'security',
                label: '보안',
                children: (
                  <div className="chat-share-page__room-settings-panel">
                    <div className="chat-share-page__room-settings-panel-head">
                      <Text strong>공유 비밀번호</Text>
                      <Text type="secondary">공유 URL 자체에 4자리 비밀번호를 걸어 접근을 제한합니다.</Text>
                    </div>
                    <label className="chat-share-page__room-settings-toggle-card">
                      <Checkbox
                        checked={editingRoomUseAccessPin}
                        disabled={!canEditSharedRoomAccessPin}
                        onChange={(event) => {
                          setEditingRoomUseAccessPin(event.target.checked);
                          if (!event.target.checked) {
                            setEditingRoomAccessPin('');
                          }
                        }}
                      >
                        공유 URL 접근 시 숫자 4자리 비밀번호 요구
                      </Checkbox>
                    </label>
                    <Input.Password
                      value={editingRoomAccessPin}
                      maxLength={4}
                      inputMode="numeric"
                      autoComplete="one-time-code"
                      iconRender={renderAccessPinVisibilityIcon}
                      placeholder={
                        editingRoomUseAccessPin
                          ? snapshot?.share.hasAccessPin
                            ? '변경할 때만 새 4자리를 입력'
                            : '숫자 4자리'
                          : '사용 안 함'
                      }
                      disabled={!editingRoomUseAccessPin || !canEditSharedRoomAccessPin}
                      onChange={(event) => {
                        setEditingRoomAccessPin(event.target.value);
                      }}
                    />
                    <Select
                      value={resolveAccessPinPromptTtlOptionValue(editingRoomAccessPinPromptTtlMinutes)}
                      disabled={!editingRoomUseAccessPin || !canEditSharedRoomAccessPin}
                      options={SHARE_ACCESS_PIN_PROMPT_TTL_OPTIONS.map((item) => ({
                        value: item.value,
                        label: item.label,
                      }))}
                      onChange={(value) => {
                        setEditingRoomAccessPinPromptTtlMinutes(parseAccessPinPromptTtlOptionValue(value));
                      }}
                    />
                    <Text type="secondary">
                      {!canManageSharedRoomSettings && !canEditSharedRoomAccessPin
                        ? '현재 비밀번호 상태만 확인할 수 있습니다.'
                        : editingRoomUseAccessPin
                          ? snapshot?.share.hasAccessPin
                            ? (editingRoomAccessPinPromptTtlMinutes ?? 0) > 0
                              ? `현재 비밀번호가 설정되어 있습니다. 유지하려면 비워 두고 저장하세요. 한 번 잠금 해제하면 ${resolveAccessPinPromptTtlLabel(editingRoomAccessPinPromptTtlMinutes ?? 0)} 동안은 새로고침해도 다시 묻지 않습니다.`
                              : '현재 비밀번호가 설정되어 있습니다. 유지하려면 비워 두고 저장하세요. 공유채팅방에 다시 접근할 때마다 4자리를 다시 입력합니다.'
                            : (editingRoomAccessPinPromptTtlMinutes ?? 0) > 0
                              ? `비밀번호를 켜면 공유받은 사용자는 진입 전에 4자리를 입력해야 합니다. 한 번 잠금 해제하면 ${resolveAccessPinPromptTtlLabel(editingRoomAccessPinPromptTtlMinutes ?? 0)} 동안은 새로고침해도 다시 묻지 않습니다.`
                              : '비밀번호를 켜면 공유받은 사용자는 공유채팅방에 접근할 때마다 4자리를 입력해야 합니다.'
                        : '비밀번호를 끄면 기존 잠금이 있더라도 해제됩니다. 이 비밀번호는 공유받은 사용자가 필요할 때 직접 설정하는 용도입니다.'}
                    </Text>
                  </div>
                ),
              },
            ]}
          />
        </div>
      </Drawer>
      <Modal
        open={isSearchOpen}
        footer={null}
        title={searchPanelMode === 'apps' ? '공유채팅방 Apps' : '공유채팅방 통합검색'}
        className="chat-share-page__search-modal"
        onCancel={() => setIsSearchOpen(false)}
      >
        <div className="chat-share-page__search-modal-body">
          <Input
            autoFocus
            allowClear
            size="large"
            prefix={<SearchOutlined />}
            placeholder={searchPanelMode === 'apps' ? '허용된 Apps 검색' : '질문, 답변, 리소스, 활동 로그 검색'}
            value={searchKeyword}
            onChange={(event) => setSearchKeyword(event.target.value)}
          />
          <div className="chat-share-page__search-summary">
            <Text type="secondary">
              {searchKeyword.trim()
                ? `검색 결과 ${searchResults.length}건`
                : searchPanelMode === 'apps'
                  ? '최근 자주 연 앱을 먼저 보여주며, 아이콘 중심으로 빠르게 실행할 수 있습니다.'
                  : '질문, 답변, 리소스, 활동 로그를 함께 찾습니다.'}
            </Text>
          </div>
          {searchPanelMode === 'apps' ? (
            <div className="chat-share-page__search-app-environment">
              <Text type="secondary">실행 환경</Text>
              <Select
                size="middle"
                value={selectedAppEnvironment}
                options={SHARE_APP_ENVIRONMENT_OPTIONS.map((environment) => ({
                  label: environment.label,
                  value: environment.key,
                }))}
                onChange={(value) => setSelectedAppEnvironment(value)}
              />
            </div>
          ) : null}
          <div className={`chat-share-page__search-results${searchPanelMode === 'apps' ? ' chat-share-page__search-results--apps' : ''}`}>
            {searchResults.length > 0 ? (
              searchResults.map((result) => (
                searchPanelMode === 'apps' ? (
                  <button
                    key={result.key}
                    type="button"
                    className={`chat-share-page__app-tile${
                      result.appEntry && !isPlayAppSupportedInEnvironment(result.appEntry, selectedAppEnvironment)
                        ? ' chat-share-page__app-tile--disabled'
                        : ''
                    }`}
                    disabled={Boolean(result.appEntry) && !isPlayAppSupportedInEnvironment(result.appEntry, selectedAppEnvironment)}
                    onClick={() => handleSearchResultSelect(result)}
                  >
                    <span className="chat-share-page__app-tile-icon">{result.icon ?? <AppstoreOutlined />}</span>
                    <span className="chat-share-page__app-tile-title">{result.title}</span>
                    <span className="chat-share-page__app-tile-description">
                      {result.appEntry ? `지원 ${result.description}` : result.description}
                    </span>
                    <span className="chat-share-page__app-tile-meta">
                      <span className="chat-share-page__app-tile-meta-label">
                        {result.appEntry
                          ? isPlayAppSupportedInEnvironment(result.appEntry, selectedAppEnvironment)
                            ? `${selectedAppEnvironment} 실행`
                            : '환경 미지원'
                          : '관리 앱'}
                      </span>
                      {result.usageBadge ? (
                        <span className="chat-share-page__app-tile-usage">{result.usageBadge}</span>
                      ) : null}
                    </span>
                  </button>
                ) : (
                  <div key={result.key} className="chat-share-page__search-result">
                    <button type="button" className="chat-share-page__search-result-main" onClick={() => handleSearchResultSelect(result)}>
                      <span className="chat-share-page__search-result-title">{result.title}</span>
                      <span className="chat-share-page__search-result-description">{result.description}</span>
                    </button>
                    {result.appEntry ? (
                      <div className="chat-share-page__search-result-action-group">
                        <Tag bordered={false} className="chat-share-page__search-result-tag">
                          {`지원 ${resolveSupportedEnvironmentSummary(result.appEntry)}`}
                        </Tag>
                        <Button
                          type="text"
                          size="small"
                          disabled={!isPlayAppSupportedInEnvironment(result.appEntry, selectedAppEnvironment)}
                          className="chat-share-page__search-result-action chat-share-page__search-result-action--environment"
                          onClick={() => openAllowedPlayAppEnvironment(result.appEntry, selectedAppEnvironment)}
                        >
                          {isPlayAppSupportedInEnvironment(result.appEntry, selectedAppEnvironment) ? '앱 실행' : '미지원'}
                        </Button>
                      </div>
                    ) : result.resource ? (
                      <Button
                        type="text"
                        size="small"
                        className="chat-share-page__search-result-action"
                        icon={<AppstoreOutlined />}
                        onClick={() => { if (result.resource) openProgramTarget(result.resource); }}
                      >
                        실행
                      </Button>
                    ) : null}
                  </div>
                )
              ))
            ) : (
              <div className="chat-share-page__search-empty">
                <Text type="secondary">
                  {searchKeyword.trim() ? '검색 결과가 없습니다.' : searchPanelMode === 'apps' ? '허용된 Apps가 없습니다.' : '검색어를 입력해 주세요.'}
                </Text>
              </div>
            )}
          </div>
        </div>
      </Modal>
      <FullscreenPreviewModal
        open={Boolean(programTarget) && !isProgramMinimized}
        title={programTarget?.label ?? '공유 프로그램'}
        meta={programTarget?.meta ?? '공유 토큰 실행'}
        zIndex={SHARE_PROGRAM_MODAL_Z_INDEX}
        maskClosable={false}
        hideHeader={false}
        onMinimize={programTarget ? handleMinimizeProgram : null}
        onClose={closeProgramTarget}
        className={`chat-share-page__program-modal${
          ''
        }`}
        contentClassName="chat-share-page__program-modal-content"
        fillContent
      >
        {programTarget ? (
          embeddedPlayAppContent ? (
            <div className="chat-share-page__program-app-shell">
              {embeddedPlayAppContent}
            </div>
          ) : programTarget.appId && findReadyPlayAppEntryById(programTarget.appId) ? (
            <iframe
              title={programTarget.label}
              src={programTarget.url}
              className="app-chat-panel__preview-frame"
            />
          ) : programTarget.appId === 'text-memo-widget' ? (
            <div className="chat-share-page__program-app-shell chat-share-page__program-app-shell--surface">
              <Suspense
                fallback={(
                  <div className="chat-share-page__program-app-loading" role="status" aria-live="polite">
                    <Spin size="large" />
                  </div>
                )}
              >
                <LazyTextMemoWidget cardWrapper={false} headerless skin="flat" title="공유 메모" />
              </Suspense>
            </div>
          ) : programTarget.appId === 'token-setting' ? (
            <div className="chat-share-page__program-app-shell chat-share-page__program-app-shell--surface">
              <TokenSettingManagementPage
                sharedPreviewTokenSetting={shareTokenSetting}
                sharedAccess={
                  canManageSharedTokenSetting
                    ? {
                        shareToken: normalizedToken,
                        canManage: true,
                      }
                    : null
                }
              />
            </div>
          ) : programTarget.appId === 'shared-resource' ? (
            <div className="chat-share-page__program-app-shell chat-share-page__program-app-shell--surface">
              <SharedResourceManagementPage
                disableInstallMetadata
                sharedPreview={{
                  managedResourceTokenId: snapshot?.share.managedResourceTokenId ?? null,
                  sharePath: snapshot?.share.sharePath ?? null,
                  expiresAt: snapshot?.share.expiresAt ?? null,
                  tokenSetting: shareTokenSetting,
                }}
                sharedAccess={
                  sharePermissionSet.has('manage') && shareAllowedAppIdSet.has('shared-resource')
                    ? {
                        shareToken: normalizedToken,
                        managedResourceTokenId: snapshot?.share.managedResourceTokenId ?? null,
                      }
                    : null
                }
              />
            </div>
          ) : programTarget.appId === 'app-settings' ? (
            <div className="chat-share-page__program-app-shell chat-share-page__program-app-shell--surface">
              <SharedAppSettingsPage shareToken={normalizedToken} />
            </div>
          ) : programTarget.appId === 'server-command' ? (
            <div className="chat-share-page__program-app-shell chat-share-page__program-app-shell--surface">
              <ServerCommandPage sharedAccess={sharedServerCommandAccess} />
            </div>
          ) : (
            <ChatPreviewBody
              target={{
                label: programTarget.label,
                url: programTarget.url,
                kind: programTarget.kind,
              }}
              previewText=""
              isPreviewLoading={false}
              previewError=""
              renderHtmlAsFrame
              fullscreen
            />
          )
          ) : null}
      </FullscreenPreviewModal>
      {typeof document !== 'undefined' && minimizedProgramCard
        ? createPortal(minimizedProgramCard, document.body)
        : minimizedProgramCard}
    </>
  );
}