loadtoagent 1.1.0 → 1.3.2

package/renderer/terminal-agent.js

@@ -2,6 +2,7 @@
 
 /** Connect dashboard agent sessions to live or resumed terminal targets. */
 window.LoadToAgentTerminalAgentActions = function createModule(context) {
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const {
     $, state, init, notice, moveWorkbench, selectTmux, selectSession, bindAgent, queueHistoryRefresh,
     renderTarget, fitEntry, refreshSessions, resumeSupport, resumeLaunchArgs, preferredWorkspace, providerLabel, esc,
@@ -35,7 +36,7 @@ window.LoadToAgentTerminalAgentActions = function createModule(context) {
         id: `tmux:${row.distro.name}:${pane.nativeId}`,
         kind: 'tmux',
         label: `${row.distro.name} · ${row.session.name} · ${pane.nativeId}`,
-        detail: `${row.window.index}:${row.window.name} · ${pane.command || 'AI 명령창'}`,
+        detail: `${row.window.index}:${row.window.name} · ${pane.command || t('terminal.agent.ai_terminal')}`,
         distro: row.distro.name,
         paneId: pane.id,
         paneNativeId: pane.nativeId,
@@ -60,26 +61,26 @@ window.LoadToAgentTerminalAgentActions = function createModule(context) {
 
   function requiredAgentTarget(agentSession, targetId = '') {
     const targets = agentTargets(agentSession);
-    if (!targets.length) throw new Error('이 AI가 실행 중인 입력 가능한 터미널을 찾지 못했습니다. 외부 터미널에서 시작한 AI는 LoadToAgent가 직접 입력할 수 없습니다.');
+    if (!targets.length) throw new Error(t('terminal.agent.no_input_target'));
     if (targetId) {
       const selected = targets.find(target => target.id === targetId);
-      if (!selected) throw new Error('선택한 터미널 연결이 더 이상 유효하지 않습니다.');
+      if (!selected) throw new Error(t('terminal.agent.target_expired'));
       return selected;
     }
-    if (targets.length > 1) throw new Error('지시를 보낼 터미널을 먼저 선택하세요.');
+    if (targets.length > 1) throw new Error(t('terminal.agent.select_target'));
     return targets[0];
   }
 
   async function dispatchAgentCommand(agentSession, command, targetId = '') {
     await init();
     const text = String(command || '').trim();
-    if (!text) throw new Error('AI에게 보낼 지시를 입력하세요.');
+    if (!text) throw new Error(t('terminal.agent.command_required'));
     const target = requiredAgentTarget(agentSession, targetId);
     const result = target.kind === 'tmux'
       ? await window.loadtoagent.tmuxSendText({ distro: target.distro, target: target.paneNativeId, text, enter: true })
       : await window.loadtoagent.terminalCommand(target.terminalId, text);
-    if (!result || result.ok === false) throw new Error(result && result.error || '터미널에 지시를 보내지 못했습니다.');
-    notice(`${target.label}에 AI 지시를 보냈습니다.`, 'success');
+    if (!result || result.ok === false) throw new Error(result && result.error || t('terminal.agent.send_failed'));
+    notice(t('terminal.agent.command_sent', { target: target.label }), 'success');
     return { ok: true, target };
   }
 
@@ -99,7 +100,7 @@ window.LoadToAgentTerminalAgentActions = function createModule(context) {
     input.value = String(draft || '');
     state.commandDrafts.set(target.id, input.value);
     input.focus({ preventScroll: true });
-    notice(`${target.label}의 기존 세션을 유지하고 있습니다. 이전 대화를 보면서 이어서 입력하세요.`, 'success');
+    notice(t('terminal.agent.session_kept', { target: target.label }), 'success');
     return target;
   }
 
@@ -108,9 +109,12 @@ window.LoadToAgentTerminalAgentActions = function createModule(context) {
     const support = resumeSupport(agentSession);
     if (!support.supported) throw new Error(support.reason);
     const cwd = String(agentSession.cwd || preferredWorkspace() || '').trim();
-    if (!cwd) throw new Error('이 AI가 작업하던 폴더를 찾지 못해 세션을 안전하게 재개할 수 없습니다.');
+    if (!cwd) throw new Error(t('terminal.agent.cwd_missing'));
     const prompt = String(draft || '').trim();
-    const title = `${providerLabel(agentSession.provider)} · ${agentSession.taskName || agentSession.agentName || '세션'} 이어서 작업`;
+    const title = t('terminal.agent.resume_title', {
+      provider: providerLabel(agentSession.provider),
+      session: agentSession.taskName || agentSession.agentName || t('terminal.type.session'),
+    });
     const created = await window.loadtoagent.terminalCreate({
       type: 'agent',
       provider: support.provider,
@@ -121,7 +125,7 @@ window.LoadToAgentTerminalAgentActions = function createModule(context) {
       cols: 120,
       rows: 32,
     });
-    if (!created || !created.id) throw new Error('AI 세션을 재개할 터미널을 만들지 못했습니다.');
+    if (!created || !created.id) throw new Error(t('terminal.agent.resume_terminal_failed'));
     state.mode = 'general';
     moveWorkbench('general');
     await refreshSessions();
@@ -143,8 +147,8 @@ window.LoadToAgentTerminalAgentActions = function createModule(context) {
       input.focus({ preventScroll: true });
     }
     notice(sendDraft && prompt
-      ? `${providerLabel(agentSession.provider)} 세션 ${support.sessionId.slice(0, 12)}을 이어받아 지시를 보냈습니다.`
-      : `${providerLabel(agentSession.provider)} 세션 ${support.sessionId.slice(0, 12)}을 다시 연결했습니다. 이어서 지시할 수 있습니다.`, 'success');
+      ? t('terminal.agent.resumed_and_sent', { provider: providerLabel(agentSession.provider), sessionId: support.sessionId.slice(0, 12) })
+      : t('terminal.agent.reconnected', { provider: providerLabel(agentSession.provider), sessionId: support.sessionId.slice(0, 12) }), 'success');
     return { ...target, promptSent: Boolean(sendDraft && prompt) };
   }
 

package/renderer/terminal-events.js

@@ -2,23 +2,90 @@
 
 /** Bind terminal DOM/preload events using dependencies owned by terminal.js. */
 window.LoadToAgentTerminalEvents = function bindTerminalEvents(context) {
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const {
     $, state, createTerminal, openTmuxModal, refreshSnapshot, selectSession, selectTmux,
     sendCommand, currentTargetId, sendSignal, currentSession, guarded, renderAll, showSelection,
     refreshSessions, renderHistoryPanel, fitEntry, attachTmux, currentTmux, manageTmux,
     closeTmuxModal, errorMessage, notice, reorderSession, moveSessionByOffset,
+    setTerminalFontSize, toggleTerminalFocusMode,
+    isAiTerminalSession,
   } = context;
 
+  const runBusy = async (button, action) => {
+    if (!button || button.dataset.busy === 'true') return null;
+    const wasDisabled = button.disabled;
+    button.dataset.busy = 'true';
+    button.disabled = true;
+    button.setAttribute('aria-busy', 'true');
+    try {
+      return await action();
+    } finally {
+      if (button.isConnected) {
+        delete button.dataset.busy;
+        button.disabled = wasDisabled;
+        button.removeAttribute('aria-busy');
+      }
+    }
+  };
+
+  const writeTerminalOutput = (entry, data) => {
+    if (!entry || !data) return;
+    const buffer = entry.terminal.buffer.active;
+    if (entry.outputWritePending === 0) {
+      entry.outputViewportAnchor = Number(buffer.viewportY) || 0;
+      entry.outputShouldFollow = entry.outputViewportAnchor >= Number(buffer.baseY || 0);
+      entry.outputUserScrollRevision = entry.userScrollRevision;
+    }
+    entry.outputWritePending += 1;
+    entry.terminal.write(data, () => {
+      entry.outputWritePending = Math.max(0, entry.outputWritePending - 1);
+      if (entry.outputWritePending > 0) return;
+      if (!entry.outputShouldFollow && entry.outputUserScrollRevision === entry.userScrollRevision) {
+        entry.terminal.scrollToLine(entry.outputViewportAnchor);
+      }
+    });
+  };
+
   bindTerminalSessionEvents();
   bindTmuxEvents();
   bindTerminalWindowAndPreloadEvents();
 
   function bindTerminalSessionEvents() {
-    $('#newPowerShellBtn').addEventListener('click', () => createTerminal(state.platform.localShell));
-    $('#newWslBtn').addEventListener('click', () => createTerminal('wsl'));
+    $('#newPowerShellBtn').addEventListener('click', event => runBusy(event.currentTarget, () => createTerminal(state.platform.localShell)));
+    $('#newWslBtn').addEventListener('click', event => runBusy(event.currentTarget, () => createTerminal('wsl')));
     $('#newTmuxSessionBtn').addEventListener('click', openTmuxModal);
-    $('#refreshTmuxTerminalBtn').addEventListener('click', refreshSnapshot);
+    $('#refreshTmuxTerminalBtn').addEventListener('click', event => runBusy(event.currentTarget, refreshSnapshot));
     const sessionList = $('#terminalSessionList');
+    const historyList = $('#terminalHistoryList');
+    const cancelHistoryFollow = () => {
+      state.historyUserRevision += 1;
+      if (state.historyFollowFrame) cancelAnimationFrame(state.historyFollowFrame);
+      state.historyFollowFrame = 0;
+    };
+    const flushPendingHistory = () => {
+      if (!state.historyRenderPending || state.historyFlushFrame) return;
+      state.historyFlushFrame = requestAnimationFrame(() => {
+        state.historyFlushFrame = 0;
+        if (!state.historyPointerActive) renderHistoryPanel();
+      });
+    };
+    historyList.addEventListener('pointerdown', () => {
+      state.historyPointerActive = true;
+      cancelHistoryFollow();
+    }, true);
+    historyList.addEventListener('wheel', cancelHistoryFollow, { capture: true, passive: true });
+    historyList.addEventListener('click', () => {
+      cancelHistoryFollow();
+      flushPendingHistory();
+    }, true);
+    const finishHistoryPointer = () => {
+      state.historyPointerActive = false;
+      flushPendingHistory();
+    };
+    window.addEventListener('pointerup', finishHistoryPointer, true);
+    window.addEventListener('pointercancel', finishHistoryPointer, true);
+    document.addEventListener('selectionchange', flushPendingHistory);
     const clearDropMarkers = () => {
       sessionList.querySelectorAll('.dragging, .drop-before, .drop-after').forEach(item => {
         item.classList.remove('dragging', 'drop-before', 'drop-after');
@@ -87,6 +154,19 @@ window.LoadToAgentTerminalEvents = function bindTerminalEvents(context) {
     });
     sessionList.addEventListener('keydown', event => {
       const item = event.target.closest('[data-terminal-id]');
+      if (item && !event.altKey && ['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+        const items = Array.from(sessionList.querySelectorAll('[data-terminal-id]'));
+        const current = Math.max(0, items.indexOf(item));
+        const next = event.key === 'Home'
+          ? 0
+          : event.key === 'End'
+            ? items.length - 1
+            : (current + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+        event.preventDefault();
+        items.forEach((candidate, index) => { candidate.tabIndex = index === next ? 0 : -1; });
+        items[next]?.focus();
+        return;
+      }
       if (!item || !event.altKey || !['ArrowUp', 'ArrowDown'].includes(event.key)) return;
       event.preventDefault();
       const changed = moveSessionByOffset(item.dataset.terminalId, event.key === 'ArrowUp' ? -1 : 1);
@@ -99,62 +179,157 @@ window.LoadToAgentTerminalEvents = function bindTerminalEvents(context) {
       const item = event.target.closest('[data-tmux-distro][data-tmux-pane]');
       if (item) selectTmux(item.dataset.tmuxDistro, item.dataset.tmuxPane);
     });
+    $('#terminalTmuxList').addEventListener('keydown', event => {
+      if (!['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return;
+      const items = Array.from(event.currentTarget.querySelectorAll('[data-tmux-distro][data-tmux-pane]'));
+      const current = Math.max(0, items.indexOf(event.target.closest('[data-tmux-distro][data-tmux-pane]')));
+      const next = event.key === 'Home'
+        ? 0
+        : event.key === 'End'
+          ? items.length - 1
+          : (current + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+      event.preventDefault();
+      items.forEach((candidate, index) => { candidate.tabIndex = index === next ? 0 : -1; });
+      items[next]?.focus();
+    });
     $('#terminalCommandForm').addEventListener('submit', async event => {
       event.preventDefault();
       if (state.commandSending) return;
       const input = $('#terminalCommandInput');
       const sent = await sendCommand(input.value);
-      if (!sent) return;
+      if (!sent) {
+        if ($('#terminalNotice')?.dataset.tone === 'error') $('#terminalNotice').focus({ preventScroll: true });
+        return;
+      }
+      const targetId = currentTargetId();
+      const history = state.commandHistory.get(targetId) || [];
+      const command = input.value;
+      if (command && history[history.length - 1] !== command) state.commandHistory.set(targetId, [...history, command].slice(-100));
       input.value = '';
-      state.commandDrafts.delete(currentTargetId());
+      state.commandDrafts.delete(targetId);
+      state.commandHistoryNavigation = { targetId, index: -1, draft: '' };
+      $('#terminalCommandClearBtn').classList.add('hidden');
+      $('#terminalCommandCount').classList.remove('warning');
       input.focus({ preventScroll: true });
     });
     $('#terminalCommandInput').addEventListener('input', event => {
       const targetId = currentTargetId();
       if (targetId) state.commandDrafts.set(targetId, event.target.value);
+      $('#terminalCommandCount').textContent = `${event.target.value.length.toLocaleString()} / 8,000`;
+      $('#terminalCommandClearBtn').classList.toggle('hidden', !event.target.value);
+      const count = $('#terminalCommandCount');
+      const wasWarning = count.dataset.warning === 'true';
+      const warning = event.target.value.length >= 7_200;
+      count.classList.toggle('warning', warning);
+      count.dataset.warning = warning ? 'true' : 'false';
+      if (warning && !wasWarning) window.LoadToAgentA11y?.announce(t('quality.command_near_limit', { count: 8_000 - event.target.value.length }));
+      state.commandHistoryNavigation = { targetId, index: -1, draft: event.target.value };
     });
     $('#terminalCommandInput').addEventListener('keydown', event => {
       if (event.key === 'Enter' && !event.shiftKey && !event.isComposing && event.keyCode !== 229) {
         event.preventDefault();
         $('#terminalCommandForm').requestSubmit();
+        return;
       }
+      if (event.key === 'Escape' && event.currentTarget.value) {
+        event.preventDefault();
+        $('#terminalCommandClearBtn').click();
+        return;
+      }
+      if (!['ArrowUp', 'ArrowDown'].includes(event.key) || event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) return;
+      const targetId = currentTargetId();
+      const history = state.commandHistory.get(targetId) || [];
+      if (!history.length) return;
+      event.preventDefault();
+      let navigation = state.commandHistoryNavigation;
+      if (navigation.targetId !== targetId || navigation.index < 0) navigation = { targetId, index: history.length, draft: event.currentTarget.value };
+      if (event.key === 'ArrowUp') navigation.index = Math.max(0, navigation.index - 1);
+      else navigation.index = Math.min(history.length, navigation.index + 1);
+      event.currentTarget.value = navigation.index >= history.length ? navigation.draft : history[navigation.index];
+      state.commandHistoryNavigation = navigation;
+      state.commandDrafts.set(targetId, event.currentTarget.value);
+      $('#terminalCommandClearBtn').classList.toggle('hidden', !event.currentTarget.value);
+      $('#terminalCommandCount').textContent = `${event.currentTarget.value.length.toLocaleString()} / 8,000`;
+      const input = event.currentTarget;
+      requestAnimationFrame(() => {
+        if (input.isConnected) input.setSelectionRange(input.value.length, input.value.length);
+      });
+    });
+    $('#terminalCommandClearBtn').addEventListener('click', () => {
+      const input = $('#terminalCommandInput');
+      input.value = '';
+      const targetId = currentTargetId();
+      if (targetId) state.commandDrafts.delete(targetId);
+      state.commandHistoryNavigation = { targetId, index: -1, draft: '' };
+      $('#terminalCommandClearBtn').classList.add('hidden');
+      $('#terminalCommandCount').textContent = '0 / 8,000';
+      $('#terminalCommandCount').classList.remove('warning');
+      input.focus({ preventScroll: true });
+      window.LoadToAgentA11y?.announce(t('quality.terminal_draft_cleared'));
     });
+    $('#terminalFontDecreaseBtn').addEventListener('click', () => setTerminalFontSize(state.terminalFontSize - 1));
+    $('#terminalFontIncreaseBtn').addEventListener('click', () => setTerminalFontSize(state.terminalFontSize + 1));
+    $('#terminalFocusBtn').addEventListener('click', toggleTerminalFocusMode);
     document.querySelectorAll('[data-terminal-signal]').forEach(button => button.addEventListener('click', () => sendSignal(button.dataset.terminalSignal)));
-    $('#terminalRestartBtn').addEventListener('click', async () => {
+    $('#terminalRestartBtn').addEventListener('click', async event => {
       const session = currentSession();
       if (!session) return;
-      const restarted = await guarded(() => window.loadtoagent.terminalRestart(session.id), '명령창을 다시 시작했습니다.');
-      if (restarted) {
+      await runBusy(event.currentTarget, async () => {
+        const restarted = await guarded(() => window.loadtoagent.terminalRestart(session.id), t('terminal.session.restarted'), `terminal-restart:${session.id}`);
+        if (restarted) {
+          const entry = state.terminals.get(session.id);
+          if (entry) entry.terminal.reset();
+          await refreshSessions();
+        }
+      });
+      renderAll();
+    });
+    const endTerminalSession = async (button, session) => {
+      if (!session) return;
+      const confirmation = isAiTerminalSession(session) ? 'terminal.session.confirm_end_ai' : 'terminal.session.confirm_end';
+      if (session.type !== 'tmux' && session.status === 'running' && !window.confirm(t(confirmation, { title: session.title }))) return;
+      await runBusy(button, async () => {
+        const message = session.type === 'tmux' ? t('terminal.tmux.detached_input') : t('terminal.session.ended');
+        const closed = await guarded(() => window.loadtoagent.terminalClose(session.id), message, `terminal-close:${session.id}`);
+        if (!closed) return;
         const entry = state.terminals.get(session.id);
-        if (entry) entry.terminal.reset();
+        if (entry) {
+          entry.terminal.dispose();
+          entry.host.remove();
+          state.terminals.delete(session.id);
+        }
+        state.commandDrafts.delete(session.id);
+        state.selectedId = null;
+        if (state.boundTargetId === session.id) {
+          state.boundAgent = null;
+          state.boundTargetId = '';
+        }
         await refreshSessions();
-      }
-    });
-    $('#terminalCloseBtn').addEventListener('click', async () => {
+      });
+      renderAll();
+    };
+    $('#terminalCloseBtn').addEventListener('click', async event => {
       const session = currentSession();
       if (!session) {
         state.selectedTmux = null;
         renderAll();
-        showSelection();
+        await showSelection();
         return;
       }
-      if (session.status === 'running' && !window.confirm(`${session.title} 세션과 실행 중인 프로세스를 끝낼까요?\n이 작업은 터미널을 숨기는 것이 아니라 실제 세션을 종료합니다.`)) return;
-      const closed = await guarded(() => window.loadtoagent.terminalClose(session.id), '터미널 세션을 종료했습니다.');
-      if (!closed) return;
-      const entry = state.terminals.get(session.id);
-      if (entry) {
-        entry.terminal.dispose();
-        entry.host.remove();
-        state.terminals.delete(session.id);
-      }
-      state.commandDrafts.delete(session.id);
-      state.selectedId = null;
-      if (state.boundTargetId === session.id) {
+      if (isAiTerminalSession(session)) {
+        state.captureGeneration += 1;
+        state.selectedId = null;
         state.boundAgent = null;
         state.boundTargetId = '';
+        renderAll();
+        renderHistoryPanel();
+        await showSelection();
+        notice(t('terminal.view_closed_ai_kept'), 'success');
+        return;
       }
-      await refreshSessions();
+      await endTerminalSession(event.currentTarget, session);
     });
+    $('#terminalEndSessionBtn').addEventListener('click', event => endTerminalSession(event.currentTarget, currentSession()));
     $('#terminalHistoryToggle').addEventListener('click', () => {
       state.historyCollapsed = !state.historyCollapsed;
       renderHistoryPanel();
@@ -164,21 +339,26 @@ window.LoadToAgentTerminalEvents = function bindTerminalEvents(context) {
   }
 
   function bindTmuxEvents() {
-    $('#terminalAttachBtn').addEventListener('click', attachTmux);
+    $('#terminalAttachBtn').addEventListener('click', event => runBusy(event.currentTarget, attachTmux));
     $('#terminalTmuxTools').addEventListener('click', event => {
       const button = event.target.closest('[data-tmux-manage]');
-      if (button) manageTmux(button.dataset.tmuxManage);
+      if (button) runBusy(button, () => manageTmux(button.dataset.tmuxManage));
     });
     $('#terminalTmuxLayout').addEventListener('change', async event => {
       const remote = currentTmux();
       if (!remote) return;
-      const result = await guarded(() => window.loadtoagent.tmuxSelectLayout({ distro: remote.distro.name, target: remote.window.nativeId, layout: event.target.value }), '창 배치를 변경했습니다.');
+      const result = await guarded(() => window.loadtoagent.tmuxSelectLayout({ distro: remote.distro.name, target: remote.window.nativeId, layout: event.target.value }), t('terminal.tmux.layout_changed'), `tmux-layout:${remote.window.nativeId}`);
       if (result) setTimeout(refreshSnapshot, 250);
     });
     $('#tmuxCreateForm').addEventListener('submit', async event => {
       event.preventDefault();
       const submit = event.currentTarget.querySelector('[type="submit"]');
+      if (submit.dataset.busy === 'true') return;
+      submit.dataset.busy = 'true';
       submit.disabled = true;
+      submit.setAttribute('aria-busy', 'true');
+      $('#closeTmuxCreateBtn').disabled = true;
+      $('#cancelTmuxCreateBtn').disabled = true;
       const error = $('#tmuxCreateError');
       error.classList.add('hidden');
       try {
@@ -189,23 +369,55 @@ window.LoadToAgentTerminalEvents = function bindTerminalEvents(context) {
           command: $('#tmuxCreateCommand').value,
         });
         if (result && result.ok) {
-          closeTmuxModal();
-          notice('새 여러 창 작업을 만들었습니다.', 'success');
+          closeTmuxModal(true);
+          notice(t('terminal.tmux.workspace_created'), 'success');
           setTimeout(refreshSnapshot, 300);
         } else {
-          error.textContent = result && result.error || '새 tmux 작업을 만들지 못했습니다.';
+          error.textContent = result && result.error || t('terminal.tmux.workspace_create_failed');
           error.classList.remove('hidden');
+          error.focus({ preventScroll: true });
         }
       } catch (failure) {
         error.textContent = errorMessage(failure);
         error.classList.remove('hidden');
+        error.focus({ preventScroll: true });
       } finally {
+        delete submit.dataset.busy;
         submit.disabled = false;
+        submit.removeAttribute('aria-busy');
+        $('#closeTmuxCreateBtn').disabled = false;
+        $('#cancelTmuxCreateBtn').disabled = false;
       }
     });
-    $('#closeTmuxCreateBtn').addEventListener('click', closeTmuxModal);
-    $('#cancelTmuxCreateBtn').addEventListener('click', closeTmuxModal);
-    $('#tmuxCreateModal').addEventListener('click', event => { if (event.target === event.currentTarget) closeTmuxModal(); });
+    $('#tmuxCreateForm').addEventListener('invalid', event => {
+      event.target.setAttribute('aria-invalid', 'true');
+    }, true);
+    $('#tmuxCreateForm').addEventListener('input', event => {
+      if (event.target.matches('input, textarea, select') && event.target.checkValidity()) event.target.removeAttribute('aria-invalid');
+    });
+    $('#tmuxCreateName').addEventListener('blur', event => {
+      const normalized = event.target.value.trim().replace(/\s+/g, '-');
+      if (normalized !== event.target.value) {
+        event.target.value = normalized;
+        event.target.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    });
+    $('#pickTmuxCwdBtn').addEventListener('click', event => runBusy(event.currentTarget, async () => {
+      try {
+        const folder = await window.loadtoagent.pickWorkspace();
+        if (folder) $('#tmuxCreateCwd').value = folder;
+      } catch (failure) {
+        notice(errorMessage(failure), 'error');
+      }
+    }));
+    $('#closeTmuxCreateBtn').addEventListener('click', () => closeTmuxModal());
+    $('#cancelTmuxCreateBtn').addEventListener('click', () => closeTmuxModal());
+    let tmuxBackdropPress = null;
+    $('#tmuxCreateModal').addEventListener('pointerdown', event => { tmuxBackdropPress = event.target === event.currentTarget; });
+    $('#tmuxCreateModal').addEventListener('click', event => {
+      if (event.target === event.currentTarget && tmuxBackdropPress !== false) closeTmuxModal();
+      tmuxBackdropPress = null;
+    });
   }
 
   function bindTerminalWindowAndPreloadEvents() {
@@ -218,9 +430,13 @@ window.LoadToAgentTerminalEvents = function bindTerminalEvents(context) {
     });
     window.loadtoagent.onTerminalData(payload => {
       const entry = state.terminals.get(payload && payload.id);
-      if (entry && payload.data) entry.terminal.write(payload.data);
+      writeTerminalOutput(entry, payload && payload.data);
     });
     window.loadtoagent.onTerminalState(payload => refreshSessions(payload));
-    window.loadtoagent.onTerminalError(payload => notice(payload && payload.message || '명령창 입력에 실패했습니다.', 'error'));
+    window.loadtoagent.onTerminalError(payload => notice(payload && payload.message || t('terminal.error.input_failed'), 'error'));
+    window.loadtoagent.onTerminalConnection?.(payload => {
+      const tone = payload?.state === 'failed' ? 'error' : payload?.state === 'connected' ? 'success' : 'info';
+      notice(payload?.message || t('terminal.error.input_failed'), tone);
+    });
   }
 };