loadtoagent 1.1.0 → 1.3.1

package/renderer/terminal.js

@@ -2,7 +2,9 @@
 
 (() => {
   const { $, esc, uiLocale, providerLabel, reportRecoverableError } = window.LoadToAgentRendererUtils;
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const SESSION_ORDER_KEY = 'loadtoagent:terminal-session-order:v1';
+  const TERMINAL_VIEW_KEY = 'loadtoagent:terminal-view:v1';
 
   function loadSessionOrder() {
     try {
@@ -14,6 +16,19 @@
     }
   }
 
+  function loadTerminalViewPreferences() {
+    try {
+      const saved = JSON.parse(localStorage.getItem(TERMINAL_VIEW_KEY) || '{}');
+      const fontSize = Math.min(20, Math.max(12, Number(saved.fontSize) || 15));
+      return { fontSize };
+    } catch (error) {
+      reportRecoverableError('terminal-view-load', error);
+      return { fontSize: 15 };
+    }
+  }
+
+  const terminalViewPreferences = loadTerminalViewPreferences();
+
   const state = {
     sessions: [],
     selectedId: null,
@@ -27,6 +42,7 @@
     remoteCapture: '',
     remoteViewportAnchor: null,
     remoteViewportAtBottom: false,
+    remoteCaptureApplying: false,
     captureTimer: null,
     captureInFlight: false,
     captureGeneration: 0,
@@ -41,20 +57,37 @@
     historyCollapsed: false,
     historyRefreshTimer: null,
     historyRequests: new Map(),
+    historyRenderKey: '',
+    historyPointerActive: false,
+    historyUserRevision: 0,
+    historyFollowFrame: 0,
+    historyRenderPending: false,
+    historyFlushFrame: 0,
     commandDrafts: new Map(),
+    commandHistory: new Map(),
+    commandHistoryNavigation: { targetId: '', index: -1, draft: '' },
     commandSending: false,
+    pendingActions: new Set(),
     sessionOrder: loadSessionOrder(),
+    sessionRenderKey: '',
     draggedSessionId: '',
     sessionDragJustEnded: false,
-    platform: { id: 'win32', label: 'Windows', localShell: 'powershell', localShellLabel: 'Windows 명령창', nativeTmux: false },
+    terminalFontSize: terminalViewPreferences.fontSize,
+    terminalFocusMode: false,
+    platform: { id: 'win32', label: 'Windows', localShell: 'powershell', localShellLabel: 'Windows Terminal', nativeTmux: false },
   };
 
-  const STATUS_LABELS = {
-    starting: window.LoadToAgentI18n.t("ui.preparing"),
-    running: '세션 유지 중',
-    exited: '끝남',
-    failed: '열지 못함',
-  };
+  const STATUS_LABELS = {};
+
+  function refreshStatusLabels() {
+    Object.assign(STATUS_LABELS, {
+      starting: t('ui.preparing'),
+      running: t('terminal.status.running'),
+      exited: t('terminal.status.exited'),
+      failed: t('terminal.status.failed'),
+    });
+  }
+  refreshStatusLabels();
 
   function notice(message, tone = '') {
     const element = $('#terminalNotice');
@@ -64,7 +97,7 @@
   }
 
   function errorMessage(error) {
-    return error && error.message ? error.message : String(error || '알 수 없는 오류');
+    return window.LoadToAgentI18n.errorText(error, 'terminal.error.unknown');
   }
 
   function persistSessionOrder() {
@@ -134,12 +167,12 @@
   }
 
   function resumeSupport(agentSession) {
-    if (!agentSession) return { supported: false, reason: '세션 정보가 없습니다.' };
+    if (!agentSession) return { supported: false, reason: t('terminal.resume.no_session_info') };
     const sessionId = String(agentSession.externalId || '').trim();
-    if (!sessionId) return { supported: false, reason: '재개에 필요한 세션 ID가 기록되지 않았습니다.' };
+    if (!sessionId) return { supported: false, reason: t('terminal.resume.no_session_id') };
     const provider = String(agentSession.provider || '').toLowerCase();
     if (!['codex', 'claude', 'gemini'].includes(provider)) {
-      return { supported: false, reason: `${providerLabel(provider)} CLI의 세션 ID 재개 방식이 공식 문서에서 확인되지 않았습니다.` };
+      return { supported: false, reason: t('terminal.resume.unsupported_provider', { provider: providerLabel(provider) }) };
     }
     const args = provider === 'codex' ? ['resume', sessionId] : ['--resume', sessionId];
     return { supported: true, provider, sessionId, args };
@@ -153,13 +186,13 @@
   }
 
   function terminalTypeLabel(session) {
-    if (!session) return '터미널';
+    if (!session) return t('terminal.type.terminal');
     if (session.type === 'wsl') return session.distro || 'Linux';
     if (session.type === 'agent') return providerLabel(session.provider);
     if (session.type === 'powershell') return 'PowerShell';
-    if (session.type === 'cmd') return '명령 프롬프트';
+    if (session.type === 'cmd') return t('terminal.type.command_prompt');
     if (session.type === 'shell') return session.shell || 'Shell';
-    return String(session.type || '터미널').toUpperCase();
+    return String(session.type || t('terminal.type.terminal')).toUpperCase();
   }
 
   function terminalTypeMark(session) {
@@ -179,6 +212,58 @@
     element.dataset.status = status;
   }
 
+  function persistTerminalViewPreferences() {
+    try {
+      localStorage.setItem(TERMINAL_VIEW_KEY, JSON.stringify({ fontSize: state.terminalFontSize }));
+    } catch (error) {
+      reportRecoverableError('terminal-view-save', error);
+    }
+  }
+
+  function syncTerminalViewControls() {
+    const section = $('#terminalSection');
+    const focusButton = $('#terminalFocusBtn');
+    section?.classList.toggle('terminal-focus-mode', state.terminalFocusMode);
+    $('#terminalResourcePanel')?.toggleAttribute('inert', state.terminalFocusMode);
+    $('#terminalHistoryPanel')?.toggleAttribute('inert', state.terminalFocusMode);
+    if ($('#terminalFontSizeLabel')) $('#terminalFontSizeLabel').textContent = `${state.terminalFontSize}px`;
+    if ($('#terminalFontDecreaseBtn')) $('#terminalFontDecreaseBtn').disabled = state.terminalFontSize <= 12;
+    if ($('#terminalFontIncreaseBtn')) $('#terminalFontIncreaseBtn').disabled = state.terminalFontSize >= 20;
+    if (focusButton) {
+      focusButton.setAttribute('aria-pressed', state.terminalFocusMode ? 'true' : 'false');
+      focusButton.title = state.terminalFocusMode ? t('terminal.view.focus_exit') : t('terminal.view.focus');
+      const label = focusButton.querySelector('span');
+      if (label) label.textContent = state.terminalFocusMode ? t('terminal.view.focus_exit') : t('terminal.view.focus');
+    }
+  }
+
+  function refitVisibleTerminal() {
+    const session = currentSession();
+    const entry = session ? state.terminals.get(session.id) : state.remoteTerminal;
+    fitEntry(entry, session?.id || '');
+  }
+
+  function setTerminalFontSize(value) {
+    const next = Math.min(20, Math.max(12, Math.round(Number(value) || 15)));
+    if (next === state.terminalFontSize) return;
+    state.terminalFontSize = next;
+    for (const entry of [...state.terminals.values(), state.remoteTerminal].filter(Boolean)) {
+      entry.terminal.options.fontSize = next;
+      entry.terminal.options.lineHeight = next >= 17 ? 1.32 : 1.28;
+    }
+    persistTerminalViewPreferences();
+    syncTerminalViewControls();
+    refitVisibleTerminal();
+    window.LoadToAgentA11y?.announce(t('terminal.view.font_size_value', { size: next }));
+  }
+
+  function toggleTerminalFocusMode() {
+    state.terminalFocusMode = !state.terminalFocusMode;
+    syncTerminalViewControls();
+    requestAnimationFrame(refitVisibleTerminal);
+    window.LoadToAgentA11y?.announce(state.terminalFocusMode ? t('terminal.view.focus_on') : t('terminal.view.focus_off'));
+  }
+
   function currentTargetId() {
     const session = currentSession();
     if (session) return session.id;
@@ -187,7 +272,9 @@
   }
 
   function visibleBoundAgent() {
-    return state.boundAgent && state.boundTargetId === currentTargetId() ? state.boundAgent : null;
+    if (!state.boundAgent || state.boundTargetId !== currentTargetId()) return null;
+    if (window.LoadToAgentApp?.isProviderVisible?.(state.boundAgent.provider) === false) return null;
+    return state.boundAgent;
   }
 
   function saveCurrentDraft() {
@@ -198,7 +285,144 @@
 
   function restoreCurrentDraft() {
     const input = $('#terminalCommandInput');
-    if (input) input.value = state.commandDrafts.get(currentTargetId()) || '';
+    if (input) {
+      input.value = state.commandDrafts.get(currentTargetId()) || '';
+      $('#terminalCommandClearBtn')?.classList.toggle('hidden', !input.value);
+    }
+  }
+
+  function observedProgressText(value) {
+    const observed = window.LoadToAgentI18n.observedText
+      ? window.LoadToAgentI18n.observedText(value)
+      : String(value || '');
+    const readable = window.LoadToAgentApp?.readableActivityDetail?.(observed);
+    return String(readable || observed || '').replace(/\s+/g, ' ').trim();
+  }
+
+  function terminalSubagentRecords(root) {
+    const sessions = Array.isArray(state.snapshot?.sessions) ? state.snapshot.sessions : [];
+    const byId = new Map(sessions.map(session => [session.id, session]));
+    // A detail refresh can contain newer root collaboration events than the card
+    // in the snapshot, so keep it as the authoritative root record.
+    byId.set(root.id, root);
+    const records = [];
+    const seen = new Set([root.id]);
+    const visit = (parent, depth) => {
+      const declaredIds = Array.isArray(parent?.childIds) ? parent.childIds : [];
+      const inferredIds = sessions
+        .filter(session => session?.parentId === parent?.id)
+        .map(session => session.id);
+      for (const id of [...new Set([...declaredIds, ...inferredIds])]) {
+        if (!id || seen.has(id)) continue;
+        const session = byId.get(id);
+        if (!session) continue;
+        seen.add(id);
+        records.push({ session, parent, depth });
+        visit(session, depth + 1);
+      }
+    };
+    visit(root, 1);
+
+    return records.map(record => {
+      const { session, parent, depth } = record;
+      const taskName = session.taskName || session.delegation?.taskName || session.title || '';
+      const communications = Array.isArray(parent?.collaboration?.communications)
+        ? parent.collaboration.communications
+        : [];
+      const related = communications
+        .filter(event => event && !event.protected)
+        .filter(event => ['assignment', 'started', 'followup', 'message', 'result', 'interrupt'].includes(event.kind))
+        .filter(event => event.childId === session.id || (taskName && event.taskName === taskName));
+      const assignmentEvent = [...related].reverse().find(event => event.kind === 'assignment' && observedProgressText(event.text));
+      const delegation = session.delegation || {};
+      const assignment = delegation.assignmentObserved && !delegation.assignmentProtected && observedProgressText(delegation.assignment)
+        ? observedProgressText(delegation.assignment)
+        : (assignmentEvent ? observedProgressText(assignmentEvent.text) : observedProgressText(session.title || taskName));
+      const lifecycle = (Array.isArray(session.lifecycle) ? session.lifecycle : [])
+        .filter(item => item && (item.label || item.detail))
+        .map((item, index) => ({
+          id: item.id || `lifecycle:${index}`,
+          kind: item.type || 'activity',
+          label: observedProgressText(item.label || t('ui.progress')),
+          detail: observedProgressText(item.detail),
+          timestamp: item.timestamp || session.updatedAt || '',
+        }));
+      const coordination = related
+        .filter(event => event.kind !== 'assignment')
+        .map(event => ({
+          id: event.id || `${event.kind}:${event.timestamp || ''}`,
+          kind: event.kind,
+          label: observedProgressText(event.label || event.kind),
+          detail: event.kind === 'started' && String(event.text || '').trim().toLowerCase() === 'started'
+            ? ''
+            : observedProgressText(event.text),
+          timestamp: event.timestamp || session.updatedAt || '',
+        }));
+      const events = [...lifecycle, ...coordination]
+        .sort((left, right) => (Date.parse(left.timestamp || 0) || 0) - (Date.parse(right.timestamp || 0) || 0))
+        .filter((event, index, items) => index === items.findIndex(candidate => (
+          candidate.kind === event.kind
+          && candidate.label === event.label
+          && candidate.detail === event.detail
+          && candidate.timestamp === event.timestamp
+        )))
+        .slice(-4);
+      const workState = window.LoadToAgentApp?.subagentWorkState?.(session)
+        || (session.status === 'running' || session.status === 'starting' ? 'working' : (session.status === 'failed' ? 'attention' : 'resting'));
+      const stateLabel = window.LoadToAgentApp?.subagentWorkLabel?.(session)
+        || ({ working: t('ui.working'), attention: t('ui.needs_attention'), resting: t('ui.idle') })[workState];
+      return {
+        session,
+        depth,
+        taskName,
+        assignment,
+        events,
+        workState,
+        stateLabel,
+        name: observedProgressText(session.agentName || taskName || session.title || providerLabel(session.provider)),
+        role: observedProgressText(session.agentRole || providerLabel(session.provider)),
+        statusDetail: observedProgressText(session.statusDetail),
+      };
+    });
+  }
+
+  function terminalSubagentProgress(root) {
+    const records = terminalSubagentRecords(root);
+    if (!records.length) return { html: '', key: [], count: 0, working: 0, attention: 0 };
+    const working = records.filter(record => record.workState === 'working').length;
+    const attention = records.filter(record => record.workState === 'attention').length;
+    const summary = [
+      t('tmux.subagents.connected_count', { count: records.length }),
+      working ? t('tmux.subagents.working_count', { count: working }) : t('tmux.subagents.all_idle'),
+      attention ? t('tmux.subagents.attention_count', { count: attention }) : '',
+    ].filter(Boolean).join(' · ');
+    const cards = records.map(record => {
+      const events = record.events.length
+        ? record.events.map(event => `<li data-terminal-subagent-event="${esc(event.kind)}">
+            <i></i><div><b>${esc(event.label || t('ui.progress'))}</b>${event.detail ? `<span>${esc(event.detail)}</span>` : ''}</div><time>${esc(timeLabel(event.timestamp))}</time>
+          </li>`).join('')
+        : `<li class="empty"><i></i><span>${esc(t('terminal.subagents.no_updates'))}</span></li>`;
+      return `<article class="terminal-subagent-card ${esc(record.workState)}" data-terminal-subagent-id="${esc(record.session.id)}" data-terminal-subagent-state="${esc(record.workState)}" data-terminal-subagent-depth="${record.depth}" style="--terminal-subagent-depth:${Math.min(record.depth - 1, 3)}">
+        <header><div><span>${record.depth > 1 ? '↳ ' : ''}${esc(record.name)}</span><small>${esc(record.role)}</small></div><b>${esc(record.stateLabel)}</b></header>
+        <div class="terminal-subagent-assignment"><em>${esc(t('drawer.assignment'))}</em><span>${esc(record.assignment || t('tmux.subagents.checking_assignment'))}</span></div>
+        ${record.statusDetail ? `<div class="terminal-subagent-current"><em>${esc(t('terminal.subagents.current'))}</em><span>${esc(record.statusDetail)}</span></div>` : ''}
+        <ol>${events}</ol>
+      </article>`;
+    }).join('');
+    return {
+      html: `<section class="terminal-subagent-progress" data-terminal-subagent-progress data-terminal-subagent-count="${records.length}">
+        <header><div><b>${esc(t('terminal.subagents.title'))}</b><span>${esc(t('terminal.subagents.description'))}</span></div><small>${esc(summary)}</small></header>
+        <div class="terminal-subagent-cards">${cards}</div>
+      </section>`,
+      key: records.map(record => [
+        record.session.id, record.session.parentId || '', record.depth, record.workState,
+        record.name, record.role, record.assignment, record.statusDetail,
+        record.events.map(event => [event.id, event.kind, event.label, event.detail, event.timestamp]),
+      ]),
+      count: records.length,
+      working,
+      attention,
+    };
   }
 
   function renderHistoryPanel(forceBottom = false) {
@@ -212,28 +436,72 @@
     if (toggle) {
       toggle.setAttribute('aria-expanded', state.historyCollapsed ? 'false' : 'true');
       toggle.textContent = state.historyCollapsed ? '›' : '‹';
-      toggle.title = state.historyCollapsed ? '대화 영역 펼치기' : window.LoadToAgentI18n.t("ui.collapse_conversation_panel");
+      toggle.title = state.historyCollapsed ? t('terminal.history.expand') : t('ui.collapse_conversation_panel');
     }
     if (!agent) return;
     const allMessages = Array.isArray(agent.messages) ? agent.messages.filter(message => message && message.text) : [];
     const messages = allMessages.filter(message => message.role === 'user' || message.role === 'assistant');
     const activityCount = allMessages.length - messages.length;
     const shown = messages.slice(-80);
-    $('#terminalHistoryTitle').textContent = agent.title || `${providerLabel(agent.provider)} 세션`;
+    const subagents = terminalSubagentProgress(agent);
+    $('#terminalHistoryTitle').textContent = agent.title || t('terminal.history.provider_session', { provider: providerLabel(agent.provider) });
     $('#terminalHistoryMeta').textContent = [
       providerLabel(agent.provider),
       window.LoadToAgentI18n.t('session.messages', { count: messages.length }),
+      subagents.count ? t('tmux.subagents.connected_count', { count: subagents.count }) : '',
       activityCount ? window.LoadToAgentI18n.t('terminal.activity_details', { count: activityCount }) : '',
       messages.length > shown.length ? window.LoadToAgentI18n.t('session.latest_count', { count: shown.length }) : '',
     ].filter(Boolean).join(' · ');
     const list = $('#terminalHistoryList');
-    const nearBottom = list.scrollHeight - list.scrollTop - list.clientHeight < 90;
-    list.innerHTML = shown.length ? shown.map(message => {
-      const role = message.role === 'assistant' ? 'assistant' : (message.role === 'tool' ? 'tool' : (message.role === 'system' ? 'system' : 'user'));
-      const label = role === 'assistant' ? providerLabel(agent.provider) : (role === 'tool' ? (message.title || '도구') : (role === 'system' ? '시스템' : '나'));
-      return `<article class="terminal-history-message ${role}"><header><b>${esc(label)}</b><time>${esc(timeLabel(message.timestamp))}</time></header>${historyMessageHtml(message.text)}</article>`;
-    }).join('') : '<div class="terminal-history-empty"><b>아직 표시할 대화가 없습니다</b><span>터미널 출력은 오른쪽에 그대로 유지됩니다.</span></div>';
-    if (forceBottom || nearBottom) requestAnimationFrame(() => { list.scrollTop = list.scrollHeight; });
+    const previousTop = list.scrollTop;
+    const wasAtBottom = window.LoadToAgentRendererUtils.isScrolledToEnd(list);
+    const renderKey = JSON.stringify([
+      agent.id,
+      uiLocale(),
+      providerLabel(agent.provider),
+      subagents.key,
+      shown.map(message => [message.id || '', message.role || '', message.title || '', message.timestamp || '', message.text || '']),
+    ]);
+    const contentChanged = state.historyRenderKey !== renderKey;
+    const selection = window.getSelection?.();
+    const selectionInside = Boolean(selection && !selection.isCollapsed && (
+      (selection.anchorNode && list.contains(selection.anchorNode))
+      || (selection.focusNode && list.contains(selection.focusNode))
+    ));
+    if (contentChanged && !forceBottom && (state.historyPointerActive || selectionInside)) {
+      state.historyRenderPending = true;
+      return;
+    }
+    state.historyRenderPending = false;
+    if (contentChanged) {
+      const conversationHtml = shown.length ? shown.map(message => {
+        const role = message.role === 'assistant' ? 'assistant' : (message.role === 'tool' ? 'tool' : (message.role === 'system' ? 'system' : 'user'));
+        const label = role === 'assistant' ? providerLabel(agent.provider) : (role === 'tool' ? (message.title || t('terminal.history.tool')) : (role === 'system' ? t('terminal.history.system') : t('terminal.history.me')));
+        return `<article class="terminal-history-message ${role}"><header><b>${esc(label)}</b><time>${esc(timeLabel(message.timestamp))}</time></header>${historyMessageHtml(message.text)}</article>`;
+      }).join('') : `<div class="terminal-history-empty${subagents.count ? ' with-subagents' : ''}"><b>${t('terminal.history.empty_title')}</b><span>${t('terminal.history.empty_description')}</span></div>`;
+      list.innerHTML = `${subagents.html}${conversationHtml}`;
+      state.historyRenderKey = renderKey;
+    }
+
+    const shouldFollow = forceBottom || (contentChanged && wasAtBottom && !state.historyPointerActive && !selectionInside);
+    if (state.historyFollowFrame) cancelAnimationFrame(state.historyFollowFrame);
+    state.historyFollowFrame = 0;
+    if (!contentChanged && !forceBottom) return;
+    if (!shouldFollow) {
+      list.scrollTop = Math.min(previousTop, Math.max(0, list.scrollHeight - list.clientHeight));
+      return;
+    }
+    const revision = state.historyUserRevision;
+    state.historyFollowFrame = requestAnimationFrame(() => {
+      state.historyFollowFrame = 0;
+      if (revision !== state.historyUserRevision || state.historyPointerActive) return;
+      const activeSelection = window.getSelection?.();
+      if (activeSelection && !activeSelection.isCollapsed && (
+        (activeSelection.anchorNode && list.contains(activeSelection.anchorNode))
+        || (activeSelection.focusNode && list.contains(activeSelection.focusNode))
+      )) return;
+      list.scrollTop = list.scrollHeight;
+    });
   }
 
   function bindAgent(agentSession, target) {
@@ -271,7 +539,9 @@
     }, 240);
   }
 
-  async function guarded(action, successMessage = '') {
+  async function guarded(action, successMessage = '', actionKey = '') {
+    if (actionKey && state.pendingActions.has(actionKey)) return null;
+    if (actionKey) state.pendingActions.add(actionKey);
     try {
       const result = await action();
       if (successMessage) notice(successMessage, 'success');
@@ -279,6 +549,8 @@
     } catch (error) {
       notice(errorMessage(error), 'error');
       return null;
+    } finally {
+      if (actionKey) state.pendingActions.delete(actionKey);
     }
   }
 
@@ -303,6 +575,8 @@
   function modeSessions(mode = state.mode) {
     const rank = new Map(normalizedSessionOrder().map((id, index) => [id, index]));
     return state.sessions
+      .filter(Boolean)
+      .filter(session => session.type !== 'agent' || window.LoadToAgentApp?.isProviderVisible?.(session.provider) !== false)
       .filter(session => mode === 'tmux' ? session.type === 'tmux' : session.type !== 'tmux')
       .sort((left, right) => (rank.get(left.id) ?? Number.MAX_SAFE_INTEGER) - (rank.get(right.id) ?? Number.MAX_SAFE_INTEGER));
   }
@@ -322,14 +596,14 @@
   function configurePlatform() {
     const localButton = $('#newPowerShellBtn');
     const linuxButton = $('#newWslBtn');
-    if (localButton) localButton.textContent = `＋ ${state.platform.localShellLabel.replace('명령창', '세션')}`;
+    if (localButton) localButton.textContent = t('terminal.new_local_session', { platform: state.platform.label });
     if (linuxButton) linuxButton.classList.toggle('hidden', state.platform.id !== 'win32');
     const explain = $('#terminalPlatformExplain');
     if (explain) explain.textContent = state.platform.id === 'win32'
-      ? '기존 Windows·WSL 터미널 세션을 유지한 채 같은 화면에서 계속 입력합니다. AI 카드에서 열면 이전 대화도 함께 표시됩니다.'
-      : `기존 ${state.platform.label} 터미널 세션을 유지한 채 계속 입력합니다. AI 카드에서 열면 이전 대화도 함께 표시됩니다.`;
+      ? t('terminal.platform.windows_description')
+      : t('terminal.platform.description', { platform: state.platform.label });
     const environmentLabel = $('#tmuxEnvironmentLabel');
-    if (environmentLabel) environmentLabel.textContent = state.platform.nativeTmux ? '로컬 tmux 환경' : 'WSL 환경';
+    if (environmentLabel) environmentLabel.textContent = state.platform.nativeTmux ? t('terminal.environment.local_tmux') : t('terminal.environment.wsl');
   }
 
   function xtermOptions(readOnly = false) {
@@ -341,8 +615,8 @@
       convertEol: readOnly,
       screenReaderMode: true,
       fontFamily: '"Cascadia Code", Consolas, monospace',
-      fontSize: 13,
-      lineHeight: 1.22,
+      fontSize: state.terminalFontSize,
+      lineHeight: state.terminalFontSize >= 17 ? 1.32 : 1.28,
       scrollback: 10_000,
       theme: {
         background: '#080c12',
@@ -402,6 +676,8 @@
       notice,
       reorderSession,
       moveSessionByOffset,
+      setTerminalFontSize,
+      toggleTerminalFocusMode,
     });
   }
 
@@ -435,13 +711,25 @@
   }
 
   function updateSnapshot(snapshot, workspaces = state.workspaces) {
-    state.snapshot = snapshot || state.snapshot;
+    const projected = snapshot && window.LoadToAgentApp?.projectVisibleSnapshot
+      ? window.LoadToAgentApp.projectVisibleSnapshot(snapshot)
+      : snapshot;
+    state.snapshot = projected || state.snapshot;
     state.workspaces = Array.isArray(workspaces) ? workspaces : state.workspaces;
     if (!state.initialized) return;
     if (state.boundAgent && state.snapshot && Array.isArray(state.snapshot.sessions)) {
       const updated = state.snapshot.sessions.find(session => session.id === state.boundAgent.id);
+      // Keep the conversation associated with its live terminal even when a
+      // monitor refresh temporarily omits an ended or slow-to-scan AI session.
+      // The binding is explicitly cleared when the terminal closes, and the
+      // provider visibility guard above prevents hidden providers from leaking.
       if (updated && updated.updatedAt !== state.boundAgent.updatedAt) queueHistoryRefresh(updated);
+      // Child sessions are updated independently from their parent. The render
+      // key prevents unnecessary DOM replacement while still reflecting their
+      // latest lifecycle and collaboration events in the terminal history.
+      renderHistoryPanel();
     }
+    renderSessions();
     renderTmuxResources();
     renderTarget();
     if (state.active && state.selectedTmux) startCapture();
@@ -457,6 +745,20 @@
     return true;
   }
 
+  function scrollTmuxByLines(lines) {
+    if (!state.remoteTerminal) return false;
+    state.remoteTerminal.terminal.scrollLines(Math.trunc(Number(lines) || 0));
+    return true;
+  }
+
+  function scrollTerminalToLine(id, line) {
+    const entry = state.terminals.get(String(id || ''));
+    if (!entry) return false;
+    entry.userScrollRevision += 1;
+    entry.terminal.scrollToLine(Math.max(0, Math.floor(Number(line) || 0)));
+    return true;
+  }
+
   function init() {
     if (state.initPromise) return state.initPromise;
     state.initPromise = (async () => {
@@ -471,6 +773,7 @@
       state.wslDistros = Array.isArray(environments) ? environments : [];
       state.initialized = true;
       configurePlatform();
+      syncTerminalViewControls();
       renderAll();
     })().catch(error => {
       state.initialized = false;
@@ -493,11 +796,15 @@
     openForAgent,
     resumeForAgent,
     scrollTmuxToLine,
+    scrollTmuxByLines,
+    scrollTerminalToLine,
   };
   window.addEventListener('loadtoagent:locale-changed', () => {
+    refreshStatusLabels();
     if (!state.initialized) return;
     configurePlatform();
+    syncTerminalViewControls();
     renderAll();
   });
-  init().catch(error => notice(`명령창 준비 실패: ${errorMessage(error)}`, 'error'));
+  init().catch(error => notice(t('terminal.error.initialization_failed', { message: errorMessage(error) }), 'error'));
 })();