codex-agent-view 0.4.3 → 0.4.5

package/public/app.js

@@ -1,13 +1,420 @@
 const API_STATE_URL = "/api/state";
 const POLL_INTERVAL_MS = 2_000;
 const SESSION_TOKEN_KEY = "codex-agent-view-access-token";
+const EXCLUDED_SESSION_KEY = "codex-agent-view-excluded-session";
+const LANGUAGE_KEY = "codex-agent-view-language";
+const SUPPORTED_LANGUAGES = new Set(["en", "ko", "es"]);
 const KNOWN_STATUSES = new Set(["running", "waiting", "completed", "unknown"]);
+const VIEWER_TOKEN_PATTERN = /^[A-Za-z0-9_-]{43}$/;
+const CANONICAL_SESSION_ID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
+
+const MESSAGES = Object.freeze({
+  en: Object.freeze({
+    metaDescription: "A clear, live view of Codex work and the agents moving it forward.",
+    skipToContent: "Skip to content",
+    brandHome: "Codex Agent View home",
+    brandSubtitle: "Live work overview",
+    languageLabel: "Language",
+    connectionConnecting: "Connecting to local status",
+    connectionConnected: "Local monitor connected",
+    connectionRetrying: "Disconnected · retrying",
+    authenticationRequired: "Live view authentication required",
+    heroEyebrow: "LIVE CODEX WORK",
+    heroTitle: "See active work at a glance",
+    heroCopy: "See what Codex is working on, which agents are involved, and how each part is progressing—all in one place.",
+    freshnessAria: "Refresh information",
+    lastUpdatedLabel: "Last updated",
+    notYet: "Not yet",
+    refreshIntervalLabel: "Refresh interval",
+    twoSeconds: "2 seconds",
+    metricsAria: "Task status summary",
+    parentTasks: "Work items",
+    currentlyObserved: "Currently observed",
+    runningAgents: "Active agents",
+    workingNow: "Working now",
+    waitingStatus: "Waiting",
+    waitingExplanation: "Waiting for input or the next step",
+    completedAgents: "Completed agents",
+    currentView: "In the current view",
+    liveWork: "LIVE WORK",
+    sessionsHeading: "Work and participating agents",
+    loadingState: "Loading status.",
+    toolbarAria: "Filter automatically observed work and participating agents",
+    searchLabel: "Filter list (optional)",
+    searchPlaceholder: "Find work or an agent",
+    statusFilterLabel: "Status filter (optional)",
+    statusAll: "All statuses",
+    statusRunning: "Running",
+    statusWaiting: "Waiting",
+    statusCompleted: "Completed",
+    statusUnknown: "Unknown",
+    connectingCopy: "Connecting to the Codex app's local status.",
+    sessionListAria: "Codex work list",
+    privacyPrompt: "This view shows only a shortened request summary; it never displays the full request or tool inputs.",
+    privacyLocal: "Data is read only from the local monitor on this device.",
+    timeUnknown: "Time unavailable",
+    startedUnknown: "Start time unavailable",
+    noReceivedActivity: "No activity received",
+    parentTask: "WORK",
+    projectUnknown: "Project unavailable",
+    taskSummary: "Request",
+    taskSummaryUnavailable: "A short request summary is not available yet.",
+    recentActivity: "Recent activity",
+    recent: "Recent",
+    subagentsCount: "Participating agents · {count}",
+    subagentName: "Agent {ordinal}",
+    agentProfile: "Role/profile · {profile}",
+    agentProfileNote: "Codex currently provides each agent's role, but not its full assignment description.",
+    noSubagents: "No participating agents have been observed for this work item.",
+    noRecentActivity: "No recent activity to display.",
+    technicalInfo: "Technical information",
+    agentId: "Agent ID",
+    rawProfile: "Raw role/profile",
+    rawEvent: "Raw event",
+    rawTool: "Raw tool",
+    retry: "Retry connection",
+    retryAuthentication: "Try this tab again",
+    checkAuthentication: "Check authentication again",
+    recoveryTitle: "Open a newly authenticated view",
+    recoveryStep: "In the Codex app, select @codex-agent-view in the composer, then choose the actual $show-agents skill from the skill picker.",
+    recoveryNote: "The skill opens a new live view with fresh authentication. No terminal command or external browser is needed.",
+    resultsFiltered: "Showing {visible} of {total}",
+    resultsTotal: "{count} work items",
+    searchEmptyTitle: "No matching results.",
+    searchEmptyCopy: "Try changing the search term or status filter.",
+    emptyWithDiagnosticsTitle: "No work can be displayed.",
+    emptyWithDiagnosticsCopy: "The local monitor received {count} activity records but could not apply them to displayable work items.",
+    emptyTitle: "No task activity has been received in this observation window.",
+    emptyCopy: "The local monitor is connected. This result alone does not mean that Codex has no active work or participating agents.",
+    emptyGuidanceTitle: "If work does not appear",
+    automaticTracking: "You do not need to enter or register task IDs. Activity from trusted hooks is added automatically.",
+    emptyStep1: "After installing the plugin, fully restart the official Codex app.",
+    emptyStep2: "In a new task, review and explicitly trust the Codex Agent View hook command.",
+    emptyStep3: "After trusting it, start new work and run agents. New activity is added automatically.",
+    observationBoundary: "Observation starts with the first trusted hook event. Earlier activity and activity missed while local collection was stopped cannot be replayed; restarting collection opens a new observation window.",
+    diagnosticsCount: "Validation information · {count}",
+    diagnosticOccurrences: "{count} occurrences",
+    disconnectedTitle: "Local status disconnected; retrying.",
+    authTitle: "This live view cannot be authenticated.",
+    retryWithState: "Reconnecting automatically every 2 seconds while keeping the last good state visible.",
+    retryWithoutState: "Reconnecting automatically every 2 seconds. You can leave this view open in the Codex app.",
+    missingToken: "This tab does not have the authentication needed to display live work.",
+    expiredToken: "This tab's live-view authentication was rejected or is no longer valid.",
+    requestFailed: "Status request failed ({status})",
+    unknownConnectionError: "An unknown connection error occurred.",
+    offline: "This device is offline.",
+    invalidState: "The status response format is invalid.",
+    durationSeconds: "{count}s",
+    durationMinutes: "{count}m",
+    durationHours: "{count}h",
+    durationHoursMinutes: "{hours}h {minutes}m",
+    toolFallback: "Tool · {name}",
+    activityFallback: "Activity · {name}",
+    nameUnknown: "Unknown name",
+    activityUnknown: "Unknown",
+    approvalRequest: "{tool} approval requested",
+    agentStarted: "Agent {ordinal} started",
+    agentStopped: "Agent {ordinal} completed",
+    activitySessionStarted: "Observation started",
+    activitySessionEnded: "Observation ended",
+    activityTurnStarted: "Work started",
+    activityTurnStopped: "Work response completed",
+    activitySubagentStarted: "Agent started",
+    activitySubagentStopped: "Agent completed",
+    activityToolStarted: "Tool activity",
+    activityToolCompleted: "Tool activity",
+    activityPermissionRequested: "User approval requested",
+    toolApplyPatch: "File edit",
+    toolBash: "Terminal activity",
+    toolFollowup: "Agent follow-up requested",
+    toolInterrupt: "Agent interruption requested",
+    toolList: "Agent status checked",
+    toolMessage: "Message sent to agent",
+    toolSpawn: "Agent started",
+    toolWaitAgent: "Waiting for agent",
+    toolExec: "Terminal activity",
+    toolUserInput: "User input requested",
+    toolWait: "Waiting for completion",
+    toolStdin: "Terminal input",
+    roleExplorer: "Research",
+    roleReviewer: "Review",
+    roleWorker: "Implementation",
+    roleDefault: "General agent",
+    roleUnknown: "Not reported",
+  }),
+  ko: Object.freeze({
+    metaDescription: "Codex가 수행 중인 작업과 참여 에이전트의 진행 상황을 한눈에 확인합니다.",
+    skipToContent: "본문으로 건너뛰기",
+    brandHome: "Codex Agent View 홈",
+    brandSubtitle: "실시간 작업 현황",
+    languageLabel: "언어",
+    connectionConnecting: "로컬 상태 연결 중",
+    connectionConnected: "로컬 모니터 연결됨",
+    connectionRetrying: "연결 끊김 · 재시도 중",
+    authenticationRequired: "실시간 화면 인증 필요",
+    heroEyebrow: "CODEX 작업 현황",
+    heroTitle: "작업 흐름을 한눈에",
+    heroCopy: "Codex가 어떤 요청을 처리하고 있는지, 어떤 에이전트가 참여하는지, 각 단계가 어디까지 왔는지 한 화면에서 확인하세요.",
+    freshnessAria: "상태 갱신 정보",
+    lastUpdatedLabel: "마지막 갱신",
+    notYet: "아직 없음",
+    refreshIntervalLabel: "갱신 주기",
+    twoSeconds: "2초",
+    metricsAria: "작업 상태 요약",
+    parentTasks: "작업",
+    currentlyObserved: "현재 관찰 중",
+    runningAgents: "실행 중 에이전트",
+    workingNow: "작업 수행 중",
+    waitingStatus: "대기 상태",
+    waitingExplanation: "사용자 응답 또는 다음 작업 대기",
+    completedAgents: "완료 에이전트",
+    currentView: "현재 화면 기준",
+    liveWork: "실시간 작업",
+    sessionsHeading: "작업과 참여 에이전트",
+    loadingState: "상태를 불러오는 중입니다.",
+    toolbarAria: "자동 수신된 작업과 참여 에이전트 목록 필터",
+    searchLabel: "목록 필터 (선택)",
+    searchPlaceholder: "작업 또는 에이전트 찾기",
+    statusFilterLabel: "상태 필터 (선택)",
+    statusAll: "모든 상태",
+    statusRunning: "실행 중",
+    statusWaiting: "대기",
+    statusCompleted: "완료",
+    statusUnknown: "알 수 없음",
+    connectingCopy: "Codex 앱의 로컬 상태에 연결하고 있습니다.",
+    sessionListAria: "Codex 작업 목록",
+    privacyPrompt: "이 화면은 짧게 줄인 요청 요약만 표시하며, 전체 요청이나 도구 입력은 표시하지 않습니다.",
+    privacyLocal: "데이터는 이 기기의 로컬 모니터에서만 읽습니다.",
+    timeUnknown: "시간 정보 없음",
+    startedUnknown: "시작 시간 없음",
+    noReceivedActivity: "수신된 활동 없음",
+    parentTask: "작업",
+    projectUnknown: "프로젝트 정보 없음",
+    taskSummary: "요청 내용",
+    taskSummaryUnavailable: "요청 내용을 요약할 수 있는 정보가 아직 없습니다.",
+    recentActivity: "최근 활동",
+    recent: "최근",
+    subagentsCount: "참여 에이전트 · {count}",
+    subagentName: "에이전트 {ordinal}",
+    agentProfile: "역할/프로필 · {profile}",
+    agentProfileNote: "Codex는 현재 각 에이전트의 역할을 제공하지만, 구체적인 할당 내용 전체는 제공하지 않습니다.",
+    noSubagents: "이 작업에 참여한 에이전트가 아직 관찰되지 않았습니다.",
+    noRecentActivity: "표시할 최근 활동이 없습니다.",
+    technicalInfo: "기술 정보",
+    agentId: "에이전트 ID",
+    rawProfile: "원본 역할/프로필",
+    rawEvent: "원본 이벤트",
+    rawTool: "원본 도구",
+    retry: "연결 다시 시도",
+    retryAuthentication: "이 탭에서 다시 시도",
+    checkAuthentication: "인증 정보 다시 확인",
+    recoveryTitle: "새 인증 화면 열기",
+    recoveryStep: "Codex 앱 입력창에서 @codex-agent-view를 선택한 다음, 스킬 선택기에서 실제 $show-agents 스킬을 선택하세요.",
+    recoveryNote: "새 인증이 적용된 실시간 화면이 열립니다. 터미널 명령이나 외부 브라우저는 필요하지 않습니다.",
+    resultsFiltered: "전체 {total}개 중 {visible}개 표시",
+    resultsTotal: "작업 {count}개",
+    searchEmptyTitle: "검색 결과가 없습니다.",
+    searchEmptyCopy: "검색어나 상태 필터를 바꿔 보세요.",
+    emptyWithDiagnosticsTitle: "표시 가능한 작업이 없습니다.",
+    emptyWithDiagnosticsCopy: "로컬 모니터가 활동 정보 {count}건을 받았지만 표시 가능한 작업으로 적용하지 못했습니다.",
+    emptyTitle: "이 관찰 화면에서 수신된 작업 활동이 없습니다.",
+    emptyCopy: "로컬 모니터 연결은 정상입니다. 이 결과만으로 Codex에 진행 중인 작업이나 참여 에이전트가 없다고 판단할 수 없습니다.",
+    emptyGuidanceTitle: "표시되지 않을 때 확인 순서",
+    automaticTracking: "작업 ID를 입력하거나 작업별로 등록할 필요가 없습니다. 신뢰한 hook의 작업 활동이 이 목록에 자동으로 추가됩니다.",
+    emptyStep1: "플러그인을 설치한 뒤 공식 Codex 앱을 완전히 재시작했는지 확인합니다.",
+    emptyStep2: "새 작업에서 표시되는 Codex Agent View hook 명령을 검토하고 직접 신뢰합니다.",
+    emptyStep3: "신뢰 설정 후 새 작업을 시작해 에이전트를 실행합니다. 새 활동은 이 목록에 자동으로 추가됩니다.",
+    observationBoundary: "관찰 화면은 첫 번째로 신뢰한 hook을 받은 시점부터 시작합니다. 그 전에 이미 지나간 활동과 로컬 상태 수집이 중단된 동안의 활동은 재생되지 않으며, 수집이 다시 시작되면 새 관찰 화면이 열립니다.",
+    diagnosticsCount: "검증 정보 · {count}건",
+    diagnosticOccurrences: "{count}건",
+    disconnectedTitle: "로컬 상태 연결이 끊겨 다시 시도 중입니다.",
+    authTitle: "이 실시간 화면을 인증할 수 없습니다.",
+    retryWithState: "2초마다 자동으로 다시 연결합니다. 마지막 정상 상태를 계속 표시합니다.",
+    retryWithoutState: "2초마다 자동으로 다시 연결합니다. Codex 앱에서 이 화면을 그대로 두어도 됩니다.",
+    missingToken: "이 탭에는 실시간 작업을 표시하는 데 필요한 인증 정보가 없습니다.",
+    expiredToken: "이 탭의 실시간 화면 인증이 거부되었거나 더 이상 유효하지 않습니다.",
+    requestFailed: "상태 요청 실패 ({status})",
+    unknownConnectionError: "알 수 없는 연결 오류가 발생했습니다.",
+    offline: "이 기기가 오프라인입니다.",
+    invalidState: "상태 응답 형식이 올바르지 않습니다.",
+    durationSeconds: "{count}초",
+    durationMinutes: "{count}분",
+    durationHours: "{count}시간",
+    durationHoursMinutes: "{hours}시간 {minutes}분",
+    toolFallback: "도구 · {name}",
+    activityFallback: "활동 · {name}",
+    nameUnknown: "이름 미상",
+    activityUnknown: "알 수 없음",
+    approvalRequest: "{tool} 승인 요청",
+    agentStarted: "에이전트 {ordinal} 시작",
+    agentStopped: "에이전트 {ordinal} 완료",
+    activitySessionStarted: "관찰 시작",
+    activitySessionEnded: "관찰 종료",
+    activityTurnStarted: "작업 시작",
+    activityTurnStopped: "작업 응답 완료",
+    activitySubagentStarted: "에이전트 시작",
+    activitySubagentStopped: "에이전트 완료",
+    activityToolStarted: "도구 작업",
+    activityToolCompleted: "도구 작업",
+    activityPermissionRequested: "사용자 승인 요청",
+    toolApplyPatch: "파일 수정",
+    toolBash: "터미널 작업",
+    toolFollowup: "에이전트 후속 작업 요청",
+    toolInterrupt: "에이전트 작업 중단 요청",
+    toolList: "에이전트 상태 확인",
+    toolMessage: "에이전트에게 메시지 전달",
+    toolSpawn: "에이전트 시작",
+    toolWaitAgent: "에이전트 응답 대기",
+    toolExec: "터미널 작업",
+    toolUserInput: "사용자 입력 요청",
+    toolWait: "작업 완료 대기",
+    toolStdin: "터미널 입력",
+    roleExplorer: "조사",
+    roleReviewer: "검토",
+    roleWorker: "구현",
+    roleDefault: "일반 에이전트",
+    roleUnknown: "보고되지 않음",
+  }),
+  es: Object.freeze({
+    metaDescription: "Una vista clara del trabajo de Codex y de los agentes que lo hacen avanzar.",
+    skipToContent: "Saltar al contenido",
+    brandHome: "Inicio de Codex Agent View",
+    brandSubtitle: "Resumen del trabajo en vivo",
+    languageLabel: "Idioma",
+    connectionConnecting: "Conectando al estado local",
+    connectionConnected: "Monitor local conectado",
+    connectionRetrying: "Desconectado · reintentando",
+    authenticationRequired: "Se requiere autenticar la vista",
+    heroEyebrow: "TRABAJO ACTIVO EN CODEX",
+    heroTitle: "Observa el trabajo activo de un vistazo",
+    heroCopy: "Consulta qué está haciendo Codex, qué agentes participan y cómo avanza cada parte, todo en un solo lugar.",
+    freshnessAria: "Información de actualización",
+    lastUpdatedLabel: "Última actualización",
+    notYet: "Aún no",
+    refreshIntervalLabel: "Intervalo de actualización",
+    twoSeconds: "2 segundos",
+    metricsAria: "Resumen del estado de las tareas",
+    parentTasks: "Trabajos",
+    currentlyObserved: "En observación",
+    runningAgents: "Agentes activos",
+    workingNow: "Trabajando ahora",
+    waitingStatus: "En espera",
+    waitingExplanation: "Esperando una respuesta o el siguiente paso",
+    completedAgents: "Agentes que terminaron",
+    currentView: "En la vista actual",
+    liveWork: "TRABAJO EN VIVO",
+    sessionsHeading: "Trabajos y agentes participantes",
+    loadingState: "Cargando el estado.",
+    toolbarAria: "Filtrar trabajos y agentes participantes observados automáticamente",
+    searchLabel: "Filtrar lista (opcional)",
+    searchPlaceholder: "Buscar un trabajo o agente",
+    statusFilterLabel: "Filtrar por estado (opcional)",
+    statusAll: "Todos los estados",
+    statusRunning: "En ejecución",
+    statusWaiting: "En espera",
+    statusCompleted: "Completado",
+    statusUnknown: "Desconocido",
+    connectingCopy: "Conectando al estado local de la aplicación Codex.",
+    sessionListAria: "Lista de trabajos de Codex",
+    privacyPrompt: "Esta vista solo muestra un resumen abreviado de la solicitud; nunca muestra la solicitud completa ni las entradas de herramientas.",
+    privacyLocal: "Los datos se leen únicamente del monitor local de este dispositivo.",
+    timeUnknown: "Hora no disponible",
+    startedUnknown: "Hora de inicio no disponible",
+    noReceivedActivity: "No se recibió actividad",
+    parentTask: "TRABAJO",
+    projectUnknown: "Proyecto no disponible",
+    taskSummary: "Solicitud",
+    taskSummaryUnavailable: "Todavía no hay información para resumir esta solicitud.",
+    recentActivity: "Actividad reciente",
+    recent: "Reciente",
+    subagentsCount: "Agentes participantes · {count}",
+    subagentName: "Agente {ordinal}",
+    agentProfile: "Rol/perfil · {profile}",
+    agentProfileNote: "Codex proporciona el rol de cada agente, pero no la descripción completa de su asignación.",
+    noSubagents: "Todavía no se observaron agentes participantes en este trabajo.",
+    noRecentActivity: "No hay actividad reciente que mostrar.",
+    technicalInfo: "Información técnica",
+    agentId: "ID del agente",
+    rawProfile: "Rol/perfil original",
+    rawEvent: "Evento original",
+    rawTool: "Herramienta original",
+    retry: "Reintentar conexión",
+    retryAuthentication: "Reintentar en esta pestaña",
+    checkAuthentication: "Volver a comprobar la autenticación",
+    recoveryTitle: "Abrir una vista con autenticación nueva",
+    recoveryStep: "En el cuadro de texto de Codex, selecciona @codex-agent-view y luego elige la skill real $show-agents en el selector de skills.",
+    recoveryNote: "La skill abre una vista en vivo nueva con autenticación actualizada. No necesitas la terminal ni un navegador externo.",
+    resultsFiltered: "Mostrando {visible} de {total}",
+    resultsTotal: "{count} trabajos",
+    searchEmptyTitle: "No hay resultados.",
+    searchEmptyCopy: "Prueba otra búsqueda o filtro de estado.",
+    emptyWithDiagnosticsTitle: "No hay trabajos que mostrar.",
+    emptyWithDiagnosticsCopy: "El monitor local recibió {count} registros de actividad, pero no pudo aplicarlos a trabajos visibles.",
+    emptyTitle: "No se recibió actividad en esta ventana de observación.",
+    emptyCopy: "El monitor local está conectado. Este resultado no implica por sí solo que Codex no tenga trabajos o agentes activos.",
+    emptyGuidanceTitle: "Si el trabajo no aparece",
+    automaticTracking: "No es necesario introducir ni registrar IDs de tareas. La actividad de hooks confiables se añade automáticamente.",
+    emptyStep1: "Tras instalar el plugin, reinicia por completo la aplicación oficial de Codex.",
+    emptyStep2: "En una tarea nueva, revisa y autoriza explícitamente el comando hook de Codex Agent View.",
+    emptyStep3: "Después, inicia un trabajo nuevo y ejecuta agentes. La actividad se añadirá automáticamente.",
+    observationBoundary: "La observación comienza con el primer evento de un hook autorizado. La actividad anterior o perdida mientras la recopilación local estuvo detenida no se puede reproducir; al reiniciarla se abre una ventana nueva.",
+    diagnosticsCount: "Información de validación · {count}",
+    diagnosticOccurrences: "{count} apariciones",
+    disconnectedTitle: "Se perdió la conexión local; reintentando.",
+    authTitle: "No se puede autenticar esta vista en vivo.",
+    retryWithState: "Se reconecta automáticamente cada 2 segundos y mantiene visible el último estado válido.",
+    retryWithoutState: "Se reconecta automáticamente cada 2 segundos. Puedes dejar esta vista abierta en Codex.",
+    missingToken: "Esta pestaña no tiene la autenticación necesaria para mostrar el trabajo en vivo.",
+    expiredToken: "La autenticación de esta pestaña fue rechazada o ya no es válida.",
+    requestFailed: "Falló la solicitud de estado ({status})",
+    unknownConnectionError: "Se produjo un error de conexión desconocido.",
+    offline: "Este dispositivo está sin conexión.",
+    invalidState: "El formato de la respuesta de estado no es válido.",
+    durationSeconds: "{count} s",
+    durationMinutes: "{count} min",
+    durationHours: "{count} h",
+    durationHoursMinutes: "{hours} h {minutes} min",
+    toolFallback: "Herramienta · {name}",
+    activityFallback: "Actividad · {name}",
+    nameUnknown: "Nombre desconocido",
+    activityUnknown: "Desconocida",
+    approvalRequest: "Se solicitó aprobación para {tool}",
+    agentStarted: "Agente {ordinal} iniciado",
+    agentStopped: "Agente {ordinal} completado",
+    activitySessionStarted: "Observación iniciada",
+    activitySessionEnded: "Observación finalizada",
+    activityTurnStarted: "Trabajo iniciado",
+    activityTurnStopped: "Respuesta del trabajo completada",
+    activitySubagentStarted: "Agente iniciado",
+    activitySubagentStopped: "Agente completado",
+    activityToolStarted: "Actividad de herramienta",
+    activityToolCompleted: "Actividad de herramienta",
+    activityPermissionRequested: "Se solicitó aprobación",
+    toolApplyPatch: "Edición de archivo",
+    toolBash: "Actividad de terminal",
+    toolFollowup: "Seguimiento del agente solicitado",
+    toolInterrupt: "Interrupción del agente solicitada",
+    toolList: "Estado de agentes consultado",
+    toolMessage: "Mensaje enviado al agente",
+    toolSpawn: "Agente iniciado",
+    toolWaitAgent: "Esperando al agente",
+    toolExec: "Actividad de terminal",
+    toolUserInput: "Se solicitó entrada del usuario",
+    toolWait: "Esperando finalización",
+    toolStdin: "Entrada de terminal",
+    roleExplorer: "Investigación",
+    roleReviewer: "Revisión",
+    roleWorker: "Implementación",
+    roleDefault: "Agente general",
+    roleUnknown: "No informado",
+  }),
+});
 
-const STATUS_LABELS = Object.freeze({
-  running: "실행 중",
-  waiting: "대기",
-  completed: "완료",
-  unknown: "알 수 없음",
+const STATUS_KEYS = Object.freeze({
+  running: "statusRunning",
+  waiting: "statusWaiting",
+  completed: "statusCompleted",
+  unknown: "statusUnknown",
 });
 
 const STATUS_ORDER = Object.freeze({
@@ -17,45 +424,86 @@ const STATUS_ORDER = Object.freeze({
   completed: 3,
 });
 
-const ACTIVITY_LABELS = Object.freeze({
-  session_started: "관찰 시작",
-  session_ended: "관찰 종료",
-  turn_started: "부모 작업 시작",
-  turn_stopped: "부모 작업 응답 완료",
-  subagent_started: "작업 에이전트 시작",
-  subagent_stopped: "작업 에이전트 완료",
-  tool_started: "도구 작업",
-  tool_completed: "도구 작업",
-  permission_requested: "사용자 승인 요청",
+const ACTIVITY_KEYS = Object.freeze({
+  session_started: "activitySessionStarted",
+  session_ended: "activitySessionEnded",
+  turn_started: "activityTurnStarted",
+  turn_stopped: "activityTurnStopped",
+  subagent_started: "activitySubagentStarted",
+  subagent_stopped: "activitySubagentStopped",
+  tool_started: "activityToolStarted",
+  tool_completed: "activityToolCompleted",
+  permission_requested: "activityPermissionRequested",
 });
 
-const TOOL_LABELS = Object.freeze({
-  apply_patch: "파일 수정",
-  bash: "터미널 작업",
-  collaborationfollowup_task: "에이전트 후속 작업 요청",
-  collaborationinterrupt_agent: "에이전트 작업 중단 요청",
-  collaborationlist_agents: "에이전트 상태 확인",
-  collaborationsend_message: "에이전트에게 메시지 전달",
-  collaborationspawn_agent: "작업 에이전트 시작",
-  collaborationwait_agent: "에이전트 응답 대기",
-  exec_command: "터미널 작업",
-  request_user_input: "사용자 입력 요청",
-  wait: "작업 완료 대기",
-  write_stdin: "터미널 입력",
+const TOOL_KEYS = Object.freeze({
+  apply_patch: "toolApplyPatch",
+  bash: "toolBash",
+  collaborationfollowup_task: "toolFollowup",
+  collaborationinterrupt_agent: "toolInterrupt",
+  collaborationlist_agents: "toolList",
+  collaborationsend_message: "toolMessage",
+  collaborationspawn_agent: "toolSpawn",
+  collaborationwait_agent: "toolWaitAgent",
+  exec_command: "toolExec",
+  request_user_input: "toolUserInput",
+  wait: "toolWait",
+  write_stdin: "toolStdin",
 });
 
-const AGENT_ROLE_LABELS = Object.freeze({
-  explorer: "조사 담당",
-  reviewer: "검토 담당",
-  worker: "작업 담당",
+const AGENT_ROLE_KEYS = Object.freeze({
+  explorer: "roleExplorer",
+  reviewer: "roleReviewer",
+  worker: "roleWorker",
+  default: "roleDefault",
+  unknown: "roleUnknown",
 });
 
-const HIDDEN_AGENT_ROLES = new Set(["", "default", "unknown"]);
 const CONTROL_CHARACTERS = /[\u0000-\u001f\u007f-\u009f]/g;
 
-function consumeAccessToken() {
-  const fragment = new URLSearchParams(window.location.hash.slice(1));
-  const fragmentToken = fragment.get("token")?.trim() || "";
+function readStoredLanguage() {
+  try {
+    const stored = window.localStorage.getItem(LANGUAGE_KEY);
+    return SUPPORTED_LANGUAGES.has(stored) ? stored : "en";
+  } catch {
+    return "en";
+  }
+}
+
+let currentLanguage = readStoredLanguage();
+
+function t(key, replacements = {}) {
+  const template = MESSAGES[currentLanguage][key] ?? MESSAGES.en[key] ?? key;
+  return Object.entries(replacements).reduce(
+    (result, [name, value]) => result.replaceAll(`{${name}}`, String(value)),
+    template,
+  );
+}
+
+function isExactLiveFragment(entries) {
+  const tokenEntries = entries.filter(([key]) => key === "token");
+  const excludeEntries = entries.filter(([key]) => key === "exclude");
+  return (
+    entries.length === tokenEntries.length + excludeEntries.length &&
+    tokenEntries.length === 1 &&
+    excludeEntries.length <= 1 &&
+    VIEWER_TOKEN_PATTERN.test(tokenEntries[0][1]) &&
+    (excludeEntries.length === 0 || CANONICAL_SESSION_ID_PATTERN.test(excludeEntries[0][1]))
+  );
+}
+
+function consumeLiveContext() {
+  const hasFragment = window.location.hash.length > 1;
+  const entries = hasFragment
+    ? [...new URLSearchParams(window.location.hash.slice(1)).entries()]
+    : [];
+  const validFragment = hasFragment && isExactLiveFragment(entries);
+  const fragmentToken = validFragment
+    ? entries.find(([key]) => key === "token")[1]
+    : "";
+  const fragmentExclude = validFragment
+    ? entries.find(([key]) => key === "exclude")?.[1] || ""
+    : "";
 
   if (window.location.hash) {
     window.history.replaceState(
@@ -66,25 +514,39 @@ function consumeAccessToken() {
   }
 
   let token = fragmentToken;
+  let excludedSessionId = fragmentExclude;
   try {
-    if (fragmentToken) {
+    if (validFragment) {
       window.sessionStorage.setItem(SESSION_TOKEN_KEY, fragmentToken);
+      if (fragmentExclude) {
+        window.sessionStorage.setItem(EXCLUDED_SESSION_KEY, fragmentExclude);
+      } else {
+        window.sessionStorage.removeItem(EXCLUDED_SESSION_KEY);
+      }
     } else {
       token = window.sessionStorage.getItem(SESSION_TOKEN_KEY)?.trim() || "";
+      excludedSessionId = window.sessionStorage.getItem(EXCLUDED_SESSION_KEY)?.trim() || "";
     }
   } catch {
     // Storage can be unavailable in hardened browser contexts. The fragment
     // token remains usable for this page load and is never copied elsewhere.
   }
 
-  return token;
+  return {
+    accessToken: VIEWER_TOKEN_PATTERN.test(token) ? token : "",
+    excludedSessionId: CANONICAL_SESSION_ID_PATTERN.test(excludedSessionId)
+      ? excludedSessionId
+      : "",
+  };
 }
 
-const accessToken = consumeAccessToken();
+let { accessToken, excludedSessionId } = consumeLiveContext();
 
 const elements = Object.freeze({
   connectionStatus: document.querySelector("#connection-status"),
   connectionLabel: document.querySelector("#connection-label"),
+  language: document.querySelector("#language-select"),
+  metaDescription: document.querySelector("#meta-description"),
   lastUpdated: document.querySelector("#last-updated"),
   metricSessions: document.querySelector("#metric-sessions"),
   metricRunning: document.querySelector("#metric-running"),
@@ -98,12 +560,43 @@ const elements = Object.freeze({
   sessionList: document.querySelector("#session-list"),
 });
 
+function applyStaticTranslations() {
+  document.documentElement.lang = currentLanguage;
+  elements.language.value = currentLanguage;
+  elements.metaDescription.content = t("metaDescription");
+  for (const element of document.querySelectorAll("[data-i18n]")) {
+    element.textContent = t(element.dataset.i18n);
+  }
+  for (const element of document.querySelectorAll("[data-i18n-aria-label]")) {
+    element.setAttribute("aria-label", t(element.dataset.i18nAriaLabel));
+  }
+  for (const element of document.querySelectorAll("[data-i18n-placeholder]")) {
+    element.setAttribute("placeholder", t(element.dataset.i18nPlaceholder));
+  }
+}
+
+function setLanguage(value) {
+  currentLanguage = SUPPORTED_LANGUAGES.has(value) ? value : "en";
+  try {
+    window.localStorage.setItem(LANGUAGE_KEY, currentLanguage);
+  } catch {
+    // The selected language still applies for this page load.
+  }
+  applyStaticTranslations();
+  setConnectionStatus(
+    elements.connectionStatus.dataset.status,
+    viewState.authenticationFailed ? t("authenticationRequired") : "",
+  );
+  render();
+}
+
 const viewState = {
   updatedAtMs: null,
   sessions: [],
   diagnostics: [],
   hasLoaded: false,
   errorMessage: "",
+  errorKey: "",
   canRetry: true,
   authenticationFailed: false,
   requestInFlight: false,
@@ -139,26 +632,27 @@ function normalizedLookupKey(value) {
 
 function formatAgentRole(agentType) {
   const key = normalizedLookupKey(agentType);
-  if (HIDDEN_AGENT_ROLES.has(key)) {
-    return "";
-  }
-  return AGENT_ROLE_LABELS[key] || sanitizedFallbackLabel(agentType, "");
+  return AGENT_ROLE_KEYS[key]
+    ? t(AGENT_ROLE_KEYS[key])
+    : sanitizedFallbackLabel(agentType, t("roleUnknown"));
 }
 
 function formatToolLabel(toolName) {
   const key = normalizedLookupKey(toolName);
-  return TOOL_LABELS[key] || `도구 · ${sanitizedFallbackLabel(toolName, "이름 미상")}`;
+  return TOOL_KEYS[key]
+    ? t(TOOL_KEYS[key])
+    : t("toolFallback", { name: sanitizedFallbackLabel(toolName, t("nameUnknown")) });
 }
 
 function formatActivityLabel(activity) {
   if (activity.eventName === "subagent_started" && activity.agentOrdinal !== null) {
-    return `작업 에이전트 ${activity.agentOrdinal} 시작`;
+    return t("agentStarted", { ordinal: activity.agentOrdinal });
   }
   if (activity.eventName === "subagent_stopped" && activity.agentOrdinal !== null) {
-    return `작업 에이전트 ${activity.agentOrdinal} 완료`;
+    return t("agentStopped", { ordinal: activity.agentOrdinal });
   }
   if (activity.eventName === "permission_requested" && activity.toolName) {
-    return `${formatToolLabel(activity.toolName)} 승인 요청`;
+    return t("approvalRequest", { tool: formatToolLabel(activity.toolName) });
   }
   if (
     (activity.eventName === "tool_started" || activity.eventName === "tool_completed") &&
@@ -166,8 +660,11 @@ function formatActivityLabel(activity) {
   ) {
     return formatToolLabel(activity.toolName);
   }
-  return ACTIVITY_LABELS[activity.eventName] ||
-    `활동 · ${sanitizedFallbackLabel(activity.eventName, "알 수 없음")}`;
+  return ACTIVITY_KEYS[activity.eventName]
+    ? t(ACTIVITY_KEYS[activity.eventName])
+    : t("activityFallback", {
+      name: sanitizedFallbackLabel(activity.eventName, t("activityUnknown")),
+    });
 }
 
 function safeTimestamp(value) {
@@ -322,6 +819,7 @@ function normalizeSession(value, index) {
   return {
     sessionId: safeString(session.session_id, `unknown-session-${index + 1}`),
     workspaceLabel: safeString(session.workspace_label, ""),
+    taskSummary: safeString(session.task_summary, ""),
     status: deriveSessionStatus(session, agents, recentActivities),
     lastActivityAtMs: safeTimestamp(session.last_seen_at_ms),
     agents,
@@ -337,7 +835,7 @@ function normalizeState(value) {
     !Array.isArray(value.sessions) ||
     !Array.isArray(value.diagnostics)
   ) {
-    throw new TypeError("상태 응답 형식이 올바르지 않습니다.");
+    throw new TypeError(t("invalidState"));
   }
 
   return {
@@ -363,10 +861,10 @@ function compareSessions(left, right) {
 
 function formatDateTime(timestampMs) {
   if (timestampMs === null) {
-    return "시간 정보 없음";
+    return t("timeUnknown");
   }
 
-  return new Intl.DateTimeFormat("ko-KR", {
+  return new Intl.DateTimeFormat(currentLanguage, {
     dateStyle: "medium",
     timeStyle: "medium",
   }).format(new Date(timestampMs));
@@ -374,12 +872,12 @@ function formatDateTime(timestampMs) {
 
 function formatRelativeTime(timestampMs) {
   if (timestampMs === null) {
-    return "시간 정보 없음";
+    return t("timeUnknown");
   }
 
   const differenceSeconds = Math.round((timestampMs - Date.now()) / 1_000);
   const absoluteSeconds = Math.abs(differenceSeconds);
-  const formatter = new Intl.RelativeTimeFormat("ko", { numeric: "auto" });
+  const formatter = new Intl.RelativeTimeFormat(currentLanguage, { numeric: "auto" });
 
   if (absoluteSeconds < 60) {
     return formatter.format(differenceSeconds, "second");
@@ -395,23 +893,25 @@ function formatRelativeTime(timestampMs) {
 
 function formatDuration(startedAtMs, stoppedAtMs) {
   if (startedAtMs === null) {
-    return "시작 시간 없음";
+    return t("startedUnknown");
   }
 
   const endAtMs = stoppedAtMs ?? Date.now();
   const seconds = Math.max(0, Math.floor((endAtMs - startedAtMs) / 1_000));
   if (seconds < 60) {
-    return `${seconds}초`;
+    return t("durationSeconds", { count: seconds });
   }
 
   const minutes = Math.floor(seconds / 60);
   if (minutes < 60) {
-    return `${minutes}분`;
+    return t("durationMinutes", { count: minutes });
   }
 
   const hours = Math.floor(minutes / 60);
   const remainingMinutes = minutes % 60;
-  return remainingMinutes ? `${hours}시간 ${remainingMinutes}분` : `${hours}시간`;
+  return remainingMinutes
+    ? t("durationHoursMinutes", { hours, minutes: remainingMinutes })
+    : t("durationHours", { count: hours });
 }
 
 function createStatusBadge(status) {
@@ -424,7 +924,7 @@ function createStatusBadge(status) {
   dot.setAttribute("aria-hidden", "true");
 
   const label = document.createElement("span");
-  label.textContent = STATUS_LABELS[status];
+  label.textContent = t(STATUS_KEYS[status]);
 
   badge.append(dot, label);
   return badge;
@@ -439,7 +939,7 @@ function createTime(timestampMs, prefix) {
   }
 
   if (timestampMs === null) {
-    wrapper.append("시간 정보 없음");
+    wrapper.append(t("timeUnknown"));
     return wrapper;
   }
 
@@ -451,12 +951,13 @@ function createTime(timestampMs, prefix) {
   return wrapper;
 }
 
-function createTechnicalDetails(rows) {
-  const details = document.createElement("details");
-  details.className = "technical-details";
+function createTechnicalInfo(rows) {
+  const info = document.createElement("div");
+  info.className = "technical-info";
 
-  const summary = document.createElement("summary");
-  summary.textContent = "기술 정보";
+  const heading = document.createElement("p");
+  heading.className = "technical-info-title";
+  heading.textContent = t("technicalInfo");
   const list = document.createElement("dl");
 
   for (const [label, value] of rows) {
@@ -472,8 +973,8 @@ function createTechnicalDetails(rows) {
     list.append(term, description);
   }
 
-  details.append(summary, list);
-  return details;
+  info.append(heading, list);
+  return info;
 }
 
 function createAgentItem(agent) {
@@ -488,31 +989,27 @@ function createAgentItem(agent) {
   identity.className = "agent-identity";
   const name = document.createElement("strong");
   name.className = "agent-name";
-  name.textContent = `작업 에이전트 ${agent.ordinal}`;
+  name.textContent = t("subagentName", { ordinal: agent.ordinal });
   identity.append(name);
 
   const roleLabel = formatAgentRole(agent.agentType);
-  if (roleLabel) {
-    const role = document.createElement("span");
-    role.className = "agent-role";
-    role.textContent = roleLabel;
-    identity.append(role);
-  }
+  const role = document.createElement("span");
+  role.className = "agent-role";
+  role.textContent = t("agentProfile", { profile: roleLabel });
+  identity.append(role);
   heading.append(identity, createStatusBadge(agent.status));
 
   const metadata = document.createElement("div");
   metadata.className = "agent-metadata";
   metadata.append(
-    createTime(agent.lastActivityAtMs, "최근"),
+    createTime(agent.lastActivityAtMs, t("recent")),
     document.createTextNode(` · ${formatDuration(agent.startedAtMs, agent.stoppedAtMs)}`),
   );
 
-  const technicalRows = [["에이전트 ID", agent.agentId]];
-  if (roleLabel) {
-    technicalRows.push(["원본 역할", agent.agentType]);
-  }
+  const technicalRows = [[t("agentId"), agent.agentId]];
+  technicalRows.push([t("rawProfile"), agent.agentType]);
 
-  item.append(heading, metadata, createTechnicalDetails(technicalRows));
+  item.append(heading, metadata, createTechnicalInfo(technicalRows));
   return item;
 }
 
@@ -536,12 +1033,12 @@ function createActivityItem(activity) {
   metadata.className = "activity-metadata";
   metadata.append(createStatusBadge(activity.status), createTime(activity.occurredAtMs, ""));
 
-  const technicalRows = [["원본 이벤트", activity.eventName]];
+  const technicalRows = [[t("rawEvent"), activity.eventName]];
   if (activity.toolName) {
-    technicalRows.push(["원본 도구", activity.toolName]);
+    technicalRows.push([t("rawTool"), activity.toolName]);
   }
 
-  content.append(title, metadata, createTechnicalDetails(technicalRows));
+  content.append(title, metadata, createTechnicalInfo(technicalRows));
   item.append(marker, content);
   return item;
 }
@@ -566,20 +1063,23 @@ function createSessionCard(session) {
   identity.className = "session-identity";
   const eyebrow = document.createElement("span");
   eyebrow.className = "session-kind";
-  eyebrow.textContent = "부모 작업";
+  eyebrow.textContent = t("parentTask");
   const title = document.createElement("h3");
-  title.textContent = session.workspaceLabel || "프로젝트 정보 없음";
-  identity.append(
-    eyebrow,
-    title,
-    createTechnicalDetails([["세션 ID", session.sessionId]]),
-  );
+  title.textContent = session.workspaceLabel || t("projectUnknown");
+  const taskSummary = document.createElement("p");
+  taskSummary.className = "task-summary";
+  const taskSummaryLabel = document.createElement("strong");
+  taskSummaryLabel.textContent = `${t("taskSummary")} · `;
+  const taskSummaryCopy = document.createElement("span");
+  taskSummaryCopy.textContent = session.taskSummary || t("taskSummaryUnavailable");
+  taskSummary.append(taskSummaryLabel, taskSummaryCopy);
+  identity.append(eyebrow, title, taskSummary);
 
   const sessionState = document.createElement("div");
   sessionState.className = "session-state";
   sessionState.append(
     createStatusBadge(session.status),
-    createTime(session.lastActivityAtMs, "최근 활동"),
+    createTime(session.lastActivityAtMs, t("recentActivity")),
   );
 
   cardHeader.append(identity, sessionState);
@@ -590,8 +1090,11 @@ function createSessionCard(session) {
   const agentPanel = document.createElement("section");
   agentPanel.className = "session-panel";
   const agentTitle = document.createElement("h4");
-  agentTitle.textContent = `작업 에이전트 · ${session.agents.length}`;
-  agentPanel.append(agentTitle);
+  agentTitle.textContent = t("subagentsCount", { count: session.agents.length });
+  const profileNote = document.createElement("p");
+  profileNote.className = "agent-profile-note";
+  profileNote.textContent = t("agentProfileNote");
+  agentPanel.append(agentTitle, profileNote);
 
   if (session.agents.length) {
     const list = document.createElement("ul");
@@ -601,13 +1104,13 @@ function createSessionCard(session) {
     });
     agentPanel.append(list);
   } else {
-    agentPanel.append(createEmptyPanel("이 부모 작업에서 관찰된 작업 에이전트가 없습니다."));
+    agentPanel.append(createEmptyPanel(t("noSubagents")));
   }
 
   const activityPanel = document.createElement("section");
   activityPanel.className = "session-panel";
   const activityTitle = document.createElement("h4");
-  activityTitle.textContent = "최근 활동";
+  activityTitle.textContent = t("recentActivity");
   activityPanel.append(activityTitle);
 
   if (session.recentActivities.length) {
@@ -618,7 +1121,7 @@ function createSessionCard(session) {
     });
     activityPanel.append(list);
   } else {
-    activityPanel.append(createEmptyPanel("표시할 최근 활동이 없습니다."));
+    activityPanel.append(createEmptyPanel(t("noRecentActivity")));
   }
 
   panels.append(agentPanel, activityPanel);
@@ -635,6 +1138,7 @@ function sessionMatchesQuery(session, query) {
   const searchableValues = [
     session.sessionId,
     session.workspaceLabel,
+    session.taskSummary,
     session.status,
     ...session.agents.flatMap((agent) => [
       agent.agentId,
@@ -659,33 +1163,38 @@ function sessionMatchesStatus(session, status) {
   );
 }
 
+function observableSessions() {
+  return viewState.sessions.filter((session) => session.sessionId !== excludedSessionId);
+}
+
 function filteredSessions() {
   const query = elements.search.value.trim().toLocaleLowerCase();
   const status = elements.statusFilter.value;
 
-  return [...viewState.sessions]
+  return observableSessions()
     .filter((session) => sessionMatchesQuery(session, query))
     .filter((session) => sessionMatchesStatus(session, status))
     .sort(compareSessions);
 }
 
 function renderMetrics() {
-  const agents = viewState.sessions.flatMap((session) => session.agents);
+  const sessions = observableSessions();
+  const agents = sessions.flatMap((session) => session.agents);
   const countStatus = (status) => agents.filter((agent) => agent.status === status).length;
 
-  elements.metricSessions.textContent = String(viewState.sessions.length);
+  elements.metricSessions.textContent = String(sessions.length);
   elements.metricRunning.textContent = String(countStatus("running"));
-  const waitingCount = countStatus("waiting") + viewState.sessions.filter(
+  const waitingCount = countStatus("waiting") + sessions.filter(
     (session) => session.status === "waiting",
   ).length;
   elements.metricWaiting.textContent = String(waitingCount);
   elements.metricCompleted.textContent = String(countStatus("completed"));
   elements.lastUpdated.textContent = !viewState.updatedAtMs
-    ? "수신된 활동 없음"
+    ? t("noReceivedActivity")
     : formatDateTime(viewState.updatedAtMs);
 }
 
-function setStateMessage(kind, title, description, includeRetry = false) {
+function setStateMessage(kind, title, description, retryMode = "") {
   elements.stateMessage.className = `state-message state-${kind}`;
   elements.stateMessage.replaceChildren();
 
@@ -695,16 +1204,61 @@ function setStateMessage(kind, title, description, includeRetry = false) {
   copy.textContent = description;
   elements.stateMessage.append(heading, copy);
 
-  if (includeRetry) {
+  if (retryMode === "authentication") {
+    const recovery = document.createElement("div");
+    recovery.className = "recovery-guidance";
+
+    const recoveryTitle = document.createElement("strong");
+    recoveryTitle.textContent = t("recoveryTitle");
+    const recoveryStep = document.createElement("p");
+    recoveryStep.textContent = t("recoveryStep");
+    const recoveryNote = document.createElement("p");
+    recoveryNote.className = "recovery-note";
+    recoveryNote.textContent = t("recoveryNote");
+    recovery.append(recoveryTitle, recoveryStep, recoveryNote);
+    elements.stateMessage.append(recovery);
+  }
+
+  if (retryMode) {
     const retry = document.createElement("button");
     retry.type = "button";
     retry.className = "retry-button";
-    retry.textContent = "다시 연결";
-    retry.addEventListener("click", refreshState);
+    retry.textContent = retryMode === "authentication"
+      ? (accessToken ? t("retryAuthentication") : t("checkAuthentication"))
+      : t("retry");
+    retry.addEventListener(
+      "click",
+      retryMode === "authentication" ? retryAuthentication : refreshState,
+    );
     elements.stateMessage.append(retry);
   }
 }
 
+function retryAuthentication() {
+  const refreshedContext = consumeLiveContext();
+  accessToken = refreshedContext.accessToken;
+  excludedSessionId = refreshedContext.excludedSessionId;
+
+  if (!accessToken) {
+    viewState.hasLoaded = true;
+    viewState.canRetry = false;
+    viewState.authenticationFailed = true;
+    viewState.errorKey = "missingToken";
+    viewState.errorMessage = t(viewState.errorKey);
+    setConnectionStatus("error", t("authenticationRequired"));
+    render();
+    return;
+  }
+
+  viewState.authenticationFailed = false;
+  viewState.canRetry = true;
+  viewState.errorKey = "";
+  viewState.errorMessage = "";
+  setConnectionStatus("connecting");
+  render();
+  void refreshState();
+}
+
 function setEmptyObservationMessage() {
   elements.stateMessage.className = "state-message state-empty state-empty-observation";
   elements.stateMessage.replaceChildren();
@@ -713,29 +1267,25 @@ function setEmptyObservationMessage() {
   const copy = document.createElement("span");
 
   if (viewState.diagnostics.length) {
-    heading.textContent = "표시 가능한 부모 작업이 없습니다.";
-    copy.textContent = `로컬 모니터가 활동 정보 ${viewState.diagnostics.length}건을 받았지만 표시 가능한 부모 작업으로 적용하지 못했습니다.`;
+    heading.textContent = t("emptyWithDiagnosticsTitle");
+    copy.textContent = t("emptyWithDiagnosticsCopy", { count: viewState.diagnostics.length });
   } else {
-    heading.textContent = "이 관찰 화면에서 수신된 작업 활동이 없습니다.";
-    copy.textContent = "로컬 모니터 연결은 정상입니다. 이 결과만으로 Codex에 실행 중인 부모 작업이나 작업 에이전트가 없다고 판단할 수 없습니다.";
+    heading.textContent = t("emptyTitle");
+    copy.textContent = t("emptyCopy");
   }
 
   const guidance = document.createElement("div");
   guidance.className = "empty-guidance";
 
   const guidanceTitle = document.createElement("h3");
-  guidanceTitle.textContent = "표시되지 않을 때 확인 순서";
+  guidanceTitle.textContent = t("emptyGuidanceTitle");
 
   const automaticTracking = document.createElement("p");
   automaticTracking.className = "automatic-tracking";
-  automaticTracking.textContent = "작업 ID를 입력하거나 작업별로 등록할 필요가 없습니다. 신뢰한 hook의 작업 활동이 이 목록에 자동으로 추가됩니다.";
+  automaticTracking.textContent = t("automaticTracking");
 
   const steps = document.createElement("ol");
-  for (const step of [
-    "플러그인을 설치한 뒤 공식 Codex 앱을 완전히 재시작했는지 확인합니다.",
-    "새 작업에서 표시되는 Codex Agent View hook 명령을 검토하고 직접 신뢰합니다.",
-    "신뢰 설정 후 새 작업을 시작해 작업 에이전트를 실행합니다. 새 활동은 이 목록에 자동으로 추가됩니다.",
-  ]) {
+  for (const step of [t("emptyStep1"), t("emptyStep2"), t("emptyStep3")]) {
     const item = document.createElement("li");
     item.textContent = step;
     steps.append(item);
@@ -743,15 +1293,16 @@ function setEmptyObservationMessage() {
 
   const boundary = document.createElement("p");
   boundary.className = "observation-boundary";
-  boundary.textContent = "관찰 화면은 첫 번째로 신뢰한 hook을 받은 시점부터 시작합니다. 그 전에 이미 지나간 활동과 로컬 상태 수집이 중단된 동안의 활동은 재생되지 않으며, 수집이 다시 시작되면 새 관찰 화면이 열립니다.";
+  boundary.textContent = t("observationBoundary");
 
   guidance.append(guidanceTitle, automaticTracking, steps, boundary);
 
   if (viewState.diagnostics.length) {
-    const diagnostics = document.createElement("details");
-    diagnostics.className = "diagnostic-details";
-    const summary = document.createElement("summary");
-    summary.textContent = `검증 정보 ${viewState.diagnostics.length}건`;
+    const diagnostics = document.createElement("div");
+    diagnostics.className = "diagnostic-info";
+    const diagnosticsTitle = document.createElement("p");
+    diagnosticsTitle.className = "diagnostic-info-title";
+    diagnosticsTitle.textContent = t("diagnosticsCount", { count: viewState.diagnostics.length });
     const codes = document.createElement("ul");
     const diagnosticCounts = new Map();
     for (const { code } of viewState.diagnostics) {
@@ -761,10 +1312,10 @@ function setEmptyObservationMessage() {
       const item = document.createElement("li");
       const code = document.createElement("code");
       code.textContent = diagnosticCode;
-      item.append(code, ` · ${count}건`);
+      item.append(code, ` · ${t("diagnosticOccurrences", { count })}`);
       codes.append(item);
     }
-    diagnostics.append(summary, codes);
+    diagnostics.append(diagnosticsTitle, codes);
     guidance.append(diagnostics);
   }
 
@@ -772,10 +1323,11 @@ function setEmptyObservationMessage() {
 }
 
 function renderSessions() {
+  const sessions = observableSessions();
   const visibleSessions = filteredSessions();
   const hasFilters = elements.search.value.trim() || elements.statusFilter.value !== "all";
 
-  elements.toolbar.hidden = viewState.sessions.length === 0;
+  elements.toolbar.hidden = sessions.length === 0;
   elements.stateMessage.hidden = false;
 
   elements.sessionList.replaceChildren();
@@ -784,34 +1336,34 @@ function renderSessions() {
   });
 
   elements.resultsSummary.textContent = hasFilters
-    ? `전체 ${viewState.sessions.length}개 중 ${visibleSessions.length}개 표시`
-    : `${viewState.sessions.length}개 부모 작업`;
+    ? t("resultsFiltered", { total: sessions.length, visible: visibleSessions.length })
+    : t("resultsTotal", { count: sessions.length });
 
   if (!viewState.hasLoaded) {
     elements.sessionList.hidden = true;
-    setStateMessage("loading", "상태를 불러오는 중입니다.", "로컬 모니터에 연결하고 있습니다.");
+    setStateMessage("loading", t("loadingState"), t("connectingCopy"));
     return;
   }
 
   if (viewState.errorMessage) {
     elements.sessionList.hidden = !visibleSessions.length;
     const description = viewState.canRetry
-      ? viewState.sessions.length
-        ? "2초마다 자동으로 다시 연결합니다. 마지막 정상 상태를 계속 표시합니다."
-        : "2초마다 자동으로 다시 연결합니다. Codex 앱에서 이 화면을 그대로 두어도 됩니다."
-      : viewState.errorMessage;
+      ? sessions.length
+        ? t("retryWithState")
+        : t("retryWithoutState")
+      : viewState.errorKey ? t(viewState.errorKey) : viewState.errorMessage;
     setStateMessage(
       "error",
       viewState.canRetry
-        ? "로컬 상태 연결이 끊겨 다시 시도 중입니다."
-        : "이 실시간 화면을 인증할 수 없습니다.",
+        ? t("disconnectedTitle")
+        : t("authTitle"),
       description,
-      viewState.canRetry,
+      viewState.canRetry ? "connection" : "authentication",
     );
     return;
   }
 
-  if (!viewState.sessions.length) {
+  if (!sessions.length) {
     elements.sessionList.hidden = true;
     setEmptyObservationMessage();
     return;
@@ -821,8 +1373,8 @@ function renderSessions() {
     elements.sessionList.hidden = true;
     setStateMessage(
       "empty",
-      "검색 결과가 없습니다.",
-      "검색어나 상태 필터를 바꿔 보세요.",
+      t("searchEmptyTitle"),
+      t("searchEmptyCopy"),
     );
     return;
   }
@@ -840,9 +1392,9 @@ function render() {
 function setConnectionStatus(status, labelOverride = "") {
   elements.connectionStatus.dataset.status = status;
   const labels = {
-    connecting: "로컬 상태 연결 중",
-    connected: "로컬 모니터 연결됨",
-    error: "연결 끊김 · 재시도 중",
+    connecting: t("connectionConnecting"),
+    connected: t("connectionConnected"),
+    error: t("connectionRetrying"),
   };
   elements.connectionLabel.textContent = labelOverride || labels[status];
 }
@@ -856,8 +1408,9 @@ async function refreshState() {
     viewState.hasLoaded = true;
     viewState.canRetry = false;
     viewState.authenticationFailed = true;
-    viewState.errorMessage = "이 탭에는 접근 토큰이 없습니다. Codex 앱에서 Codex Agent View의 실시간 화면 열기를 다시 요청하세요.";
-    setConnectionStatus("error", "실시간 화면 인증 필요");
+    viewState.errorKey = "missingToken";
+    viewState.errorMessage = t(viewState.errorKey);
+    setConnectionStatus("error", t("authenticationRequired"));
     render();
     return;
   }
@@ -882,13 +1435,14 @@ async function refreshState() {
       viewState.hasLoaded = true;
       viewState.canRetry = false;
       viewState.authenticationFailed = true;
-      viewState.errorMessage = "이 실시간 화면의 인증이 더 이상 유효하지 않습니다. Codex 앱에서 Codex Agent View의 실시간 화면 열기를 다시 요청하세요.";
-      setConnectionStatus("error", "실시간 화면 인증 필요");
+      viewState.errorKey = "expiredToken";
+      viewState.errorMessage = t(viewState.errorKey);
+      setConnectionStatus("error", t("authenticationRequired"));
       return;
     }
 
     if (!response.ok) {
-      throw new Error(`상태 요청 실패 (${response.status})`);
+      throw new Error(t("requestFailed", { status: response.status }));
     }
 
     const nextState = normalizeState(await response.json());
@@ -897,6 +1451,7 @@ async function refreshState() {
     viewState.diagnostics = nextState.diagnostics;
     viewState.hasLoaded = true;
     viewState.errorMessage = "";
+    viewState.errorKey = "";
     viewState.canRetry = true;
     setConnectionStatus("connected");
   } catch (error) {
@@ -904,7 +1459,8 @@ async function refreshState() {
     viewState.canRetry = true;
     viewState.errorMessage = error instanceof Error
       ? error.message
-      : "알 수 없는 연결 오류가 발생했습니다.";
+      : t("unknownConnectionError");
+    viewState.errorKey = "";
     setConnectionStatus("error");
   } finally {
     viewState.requestInFlight = false;
@@ -914,6 +1470,7 @@ async function refreshState() {
 
 elements.search.addEventListener("input", renderSessions);
 elements.statusFilter.addEventListener("change", renderSessions);
+elements.language.addEventListener("change", (event) => setLanguage(event.target.value));
 elements.toolbar.addEventListener("submit", (event) => {
   event.preventDefault();
 });
@@ -923,7 +1480,8 @@ window.addEventListener("offline", () => {
     return;
   }
   viewState.canRetry = true;
-  viewState.errorMessage = "이 기기가 오프라인입니다.";
+  viewState.errorMessage = t("offline");
+  viewState.errorKey = "offline";
   setConnectionStatus("error");
   render();
 });
@@ -933,6 +1491,7 @@ document.addEventListener("visibilitychange", () => {
   }
 });
 
+applyStaticTranslations();
 render();
 refreshState();
 if (accessToken) {