loadtoagent 1.1.0 → 1.3.2

package/renderer/app-drawer-data.js

@@ -3,27 +3,40 @@
 window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createDrawerData = function createDrawerData(context = {}) {
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const { reportRecoverableError, state } = context;
+  const detailRequests = new Map();
+  let detailRequestGeneration = 0;
 
   async function loadSessionDetail(id, force = false) {
     if (!force && state.details.has(id)) return state.details.get(id);
+    if (!force && detailRequests.has(id)) return detailRequests.get(id).promise;
+    const generation = ++detailRequestGeneration;
     state.detailErrors.delete(id);
     state.detailLoadingIds.add(id);
     context.renderDrawer();
-    try {
-      const detail = await window.loadtoagent.sessionDetail(id);
-      if (detail) state.details.set(id, detail);
-      return detail;
-    } catch (error) {
-      state.detailErrors.set(id, (error && error.message) || "작업 기록을 불러오지 못했습니다.");
-      return null;
-    } finally {
-      state.detailLoadingIds.delete(id);
-      if (state.selectedId === id) {
-        state.drawerForceLatest = state.drawerTab === "chat";
-        context.renderDrawer();
+    const promise = (async () => {
+      try {
+        const detail = await window.loadtoagent.sessionDetail(id);
+        if (detailRequests.get(id)?.generation === generation && detail) state.details.set(id, detail);
+        return detail;
+      } catch (error) {
+        if (detailRequests.get(id)?.generation === generation)
+          state.detailErrors.set(id, window.LoadToAgentI18n.errorText(error, "drawer.history_failed"));
+        return null;
+      } finally {
+        if (detailRequests.get(id)?.generation === generation) {
+          detailRequests.delete(id);
+          state.detailLoadingIds.delete(id);
+          if (state.selectedId === id) {
+            state.drawerForceLatest = state.drawerTab === "chat";
+            context.renderDrawer();
+          }
+        }
       }
-    }
+    })();
+    detailRequests.set(id, { generation, promise });
+    return promise;
   }
 
   async function loadSubagentParentDetail(child) {

package/renderer/app-drawer.js

@@ -3,11 +3,13 @@
 window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}) {
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const {
-    $, $$, esc, state, motionPreference, motionState, STATUS, markGuideStep, rememberDialogTrigger, restoreDialogTrigger,
-    providerInfo, isLiveSession, subagentWorkState, subagentWorkLabel, isProjectlessSession, sessionWorkspaceLabel,
+    $, $$, esc, state, motionPreference, motionState, STATUS, markGuideStep, rememberDialogTrigger, restoreDialogTrigger, setDialogOpenState,
+    providerInfo, isLiveSession, subagentWorkState, subagentWorkLabel, isProjectlessSession, sessionOriginPath, sessionWorkspaceLabel,
     agentResumeSupport, originAppInfo, selectedSession, snapshotSession, loadSessionDetail, loadSubagentParentDetail,
-    chatHtml, lifecycleHtml, tokensHtml, subagentCoordinationEvents, subagentConversationHtml,
+    chatHtml, lifecycleHtml, tokensHtml, outcomeHtml, subagentCoordinationEvents, subagentConversationHtml,
+    rememberDisclosureStates = () => {}, restoreDisclosureStates = () => {},
   } = context;
 
   function openDrawer(id) {
@@ -15,17 +17,16 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     markGuideStep("detail");
     state.selectedId = id;
     state.drawerMode = "session";
-    state.drawerTab = "chat";
+    state.drawerTab = "summary";
     state.drawerForceLatest = true;
     clearTimeout(motionState.drawerTimer);
     $("#drawerBackdrop").classList.remove("hidden");
     $("#drawerBackdrop").classList.remove("closing");
     $("#detailDrawer").classList.add("open");
-    $("#detailDrawer").removeAttribute("inert");
-    $("#detailDrawer").setAttribute("aria-hidden", "false");
+    setDialogOpenState($("#detailDrawer"), true);
     renderDrawer();
     loadSessionDetail(id, true);
-    setTimeout(() => $("#closeDrawerBtn").focus(), 0);
+    setTimeout(() => $("#closeDrawerBtn").focus({ preventScroll: true }), 0);
   }
 
   function openSubagentConversation(id) {
@@ -41,26 +42,26 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     $("#drawerBackdrop").classList.remove("hidden");
     $("#drawerBackdrop").classList.remove("closing");
     $("#detailDrawer").classList.add("open");
-    $("#detailDrawer").removeAttribute("inert");
-    $("#detailDrawer").setAttribute("aria-hidden", "false");
+    setDialogOpenState($("#detailDrawer"), true);
     renderDrawer();
     loadSessionDetail(id);
     loadSubagentParentDetail(child);
-    setTimeout(() => $("#closeDrawerBtn").focus(), 0);
+    setTimeout(() => $("#closeDrawerBtn").focus({ preventScroll: true }), 0);
   }
 
   function closeDrawer(restoreFocus = true) {
     if (!$("#detailDrawer").classList.contains("open")) return;
+    const drawerGeneration = motionState.dialogGeneration;
     $("#detailDrawer").classList.remove("open");
-    $("#detailDrawer").setAttribute("aria-hidden", "true");
-    $("#detailDrawer").setAttribute("inert", "");
+    setDialogOpenState($("#detailDrawer"), false);
     $("#drawerBackdrop").classList.add("closing");
     clearTimeout(motionState.drawerTimer);
     motionState.drawerTimer = setTimeout(
       () => {
         $("#drawerBackdrop").classList.add("hidden");
         $("#drawerBackdrop").classList.remove("closing");
-        if (restoreFocus) restoreDialogTrigger();
+        if (drawerGeneration !== motionState.dialogGeneration) return;
+        if (restoreFocus) restoreDialogTrigger(drawerGeneration);
         else motionState.activeDialogTrigger = null;
       },
       motionPreference.matches ? 0 : 260,
@@ -77,60 +78,65 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     $("#drawerProviderMark").style.setProperty("--provider", provider.accent);
     $("#drawerProviderMark").textContent = provider.mark;
     $("#drawerProvider").textContent = subagentMode
-      ? `${session.agentName || provider.label} · 서브에이전트 작업 기록`
+      ? t("drawer.subagent_title", { name: session.agentName || provider.label })
       : `${provider.company} · ${STATUS[session.status] || session.status}`;
-    $("#drawerTitle").textContent = subagentMode ? session.taskName || (session.delegation && session.delegation.taskName) || session.title : session.title;
+    const drawerTitle = subagentMode ? session.taskName || (session.delegation && session.delegation.taskName) || session.title : session.title;
+    $("#drawerTitle").textContent = drawerTitle;
+    $("#drawerTitle").title = drawerTitle;
     const stopping = session.runId && state.stopRequests.has(session.runId);
     const stop =
       session.runId && (session.status === "running" || session.status === "starting")
-        ? `<button class="meta-chip stop-run" data-stop-run="${esc(session.runId)}"
+        ? `<button type="button" class="meta-chip stop-run" data-stop-run="${esc(session.runId)}"
           ${stopping ? 'disabled aria-busy="true"' : ""}>
-          ${stopping ? "중지 요청 중…" : "■ 실행 중지"}</button>`
+          ${esc(t(stopping ? "drawer.stop_requested" : "drawer.stop_run"))}</button>`
         : "";
     const runtime = session.runtimePresence || [];
     const resume =
       !isLiveSession(session) && agentResumeSupport(session).supported
-        ? `<button class="meta-chip resume-agent" data-resume-agent="${esc(session.id)}">▶
-          <b>${originAppInfo(session) ? "백그라운드 터미널로 이어가기" : "터미널로 다시 일 시키기"}</b>
+        ? `<button type="button" class="meta-chip resume-agent" data-resume-agent="${esc(session.id)}">▶
+          <b>${esc(t(originAppInfo(session) ? "drawer.continue_background_terminal" : "drawer.resume_in_terminal"))}</b>
         </button>`
         : "";
     const communicationCount = subagentMode ? subagentCoordinationEvents(session).length : 0;
     const subagentMessageCount = subagentMode
       ? (session.messages || []).filter((message) => message.role === "user" || message.role === "assistant").length
       : 0;
+    const taskId = String(session.externalId || session.id || "");
+    const copyTask = taskId
+      ? `<button type="button" class="meta-chip meta-copy" data-copy-text="${esc(taskId)}" aria-label="${esc(t("quality.copy_task_id"))}">${esc(t("quality.task_id"))} <b>${esc(taskId.slice(0, 12))}</b><span aria-hidden="true">⧉</span></button>`
+      : "";
+    const originPath = sessionOriginPath(session);
+    const copyWorkspace = !isProjectlessSession(session) && originPath
+      ? `<button type="button" class="meta-chip meta-copy origin-project-meta" data-copy-text="${esc(originPath)}" aria-label="${esc(t("quality.copy_workspace"))}">${esc(t("project.origin"))} <b>${esc(sessionWorkspaceLabel(session))}</b><span aria-hidden="true">⧉</span></button>`
+      : "";
     $("#drawerMeta").innerHTML = subagentMode
       ? `<span class="meta-chip work-state ${subagentWorkState(session)}">
         <b>${esc(subagentWorkLabel(session))}</b>
         </span>
-        <span class="meta-chip">사용 모델 <b>${esc(session.model || "정보 없음")}</b>
-        </span>
-        <span class="meta-chip">작업 기록 <b>${subagentMessageCount}건</b>
+        <span class="meta-chip">${esc(t("drawer.model"))} <b>${esc(session.model || t("drawer.unknown"))}</b>
         </span>
-        <span class="meta-chip">메인 지시·결과 <b>${communicationCount}건</b>
-        </span>${resume}`
-      : `<span class="meta-chip">사용 모델 <b>${esc(session.model || "정보 없음")}</b>
+        <span class="meta-chip">${esc(t("drawer.work_history"))} <b>${esc(t("drawer.event_count", { count: subagentMessageCount }))}</b>
         </span>
-        <span class="meta-chip">작업 폴더
-          <b title="${esc(isProjectlessSession(session) ? window.LoadToAgentI18n.t("ui.session_not_linked_to_a_specific_project") : session.cwd)}">
-            ${esc(sessionWorkspaceLabel(session))}
-          </b>
+        <span class="meta-chip">${esc(t("drawer.main_instructions_results"))} <b>${esc(t("drawer.event_count", { count: communicationCount }))}</b>
+        </span>${copyTask}${copyWorkspace}${resume}`
+      : `<span class="meta-chip">${esc(t("drawer.model"))} <b>${esc(session.model || t("drawer.unknown"))}</b>
         </span>
-        <span class="meta-chip">작업 번호 <b>${esc(String(session.externalId || "").slice(0, 12) || "정보 없음")}</b>
-        </span>${
+        ${copyWorkspace || `<span class="meta-chip origin-project-meta">${esc(t("project.origin"))} <b>${esc(sessionWorkspaceLabel(session))}</b></span>`}
+        ${copyTask}${
           session.parentId
-            ? `<span class="meta-chip">⑂ <b>도움을 맡은 AI</b>
+            ? `<span class="meta-chip">⑂ <b>${esc(t("drawer.helper_ai"))}</b>
         </span>`
             : ""
         }${
           runtime.length
-            ? `<span class="meta-chip runtime-meta">● <b>실행 중인 프로그램 ${runtime.length}개</b>
+            ? `<span class="meta-chip runtime-meta">● <b>${esc(t("session.running_programs", { count: runtime.length }))}</b>
         </span>`
             : ""
         }${resume}${stop}`;
     $$(".drawer-tab").forEach((tab) => {
       const hidden = subagentMode && tab.dataset.tab !== "chat";
       tab.classList.toggle("hidden", hidden);
-      if (tab.dataset.tab === "chat") tab.textContent = subagentMode ? "작업 내용" : window.LoadToAgentI18n.t("ui.conversation");
+      if (tab.dataset.tab === "chat") tab.textContent = subagentMode ? t("drawer.work_content") : t("ui.conversation");
       const active = tab.dataset.tab === state.drawerTab;
       tab.classList.toggle("active", active);
       tab.setAttribute("aria-selected", active ? "true" : "false");
@@ -139,8 +145,9 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     const activeTab = $(`.drawer-tab[data-tab="${state.drawerTab}"]`);
     if (activeTab) $("#drawerContent").setAttribute("aria-labelledby", activeTab.id);
     const content = $("#drawerContent");
+    rememberDisclosureStates(content);
     const previousTop = content.scrollTop;
-    const wasNearBottom = content.scrollHeight - content.scrollTop - content.clientHeight < 90;
+    const wasAtBottom = window.LoadToAgentRendererUtils.isScrolledToEnd(content);
     const renderKey = `${state.drawerMode}:${state.selectedId}:${state.drawerTab}:${detailLoading ? "loading" : "ready"}`;
     const previousRenderKey = motionState.drawerRenderKey;
     const shouldAnimateContent = previousRenderKey !== renderKey;
@@ -149,40 +156,51 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     motionState.drawerTab = state.drawerTab;
     const detailError = state.detailErrors.get(state.selectedId);
     content.innerHTML = detailLoading
-      ? '<div class="drawer-loading"><span></span><b>전체 작업 기록을 불러오는 중</b><small>잠시만 기다리면 대화와 진행 과정을 볼 수 있어요.</small></div>'
+      ? `<div class="drawer-loading"><span></span><b>${esc(t("drawer.loading_history"))}</b><small>${esc(t("drawer.loading_history_help"))}</small></div>`
       : detailError
         ? `<div class="drawer-error">
-        <b>작업 기록을 불러오지 못했습니다</b>
+        <b>${esc(t("drawer.history_failed"))}</b>
         <span>${esc(detailError)}</span>
-        <button type="button" data-retry-detail="${esc(state.selectedId)}">다시 시도</button>
+        <button type="button" data-retry-detail="${esc(state.selectedId)}">${esc(t("drawer.retry"))}</button>
         </div>`
         : subagentMode
           ? subagentConversationHtml(session)
-          : state.drawerTab === "chat"
+          : state.drawerTab === "summary"
+            ? outcomeHtml(session)
+            : state.drawerTab === "chat"
             ? chatHtml(session)
             : state.drawerTab === "lifecycle"
               ? lifecycleHtml(session)
               : tokensHtml(session);
+    restoreDisclosureStates(content);
     content.classList.toggle("motion-content-in", shouldAnimateContent && !motionPreference.matches);
     clearTimeout(motionState.drawerContentTimer);
     if (shouldAnimateContent)
       motionState.drawerContentTimer = setTimeout(() => content.classList.remove("motion-content-in"), motionPreference.matches ? 0 : 520);
-    if (!detailLoading)
-      requestAnimationFrame(() => {
-        const forceLatest = state.drawerForceLatest;
-        if (state.drawerTab === "chat" && forceLatest) {
-          const rows = [...content.querySelectorAll(".chat-row")];
-          const latest = rows[rows.length - 1];
-          if (latest && latest.offsetHeight > content.clientHeight - 90) {
-            const contentTop = content.getBoundingClientRect().top;
-            const stickyHeight = content.querySelector(".chat-history-head")?.getBoundingClientRect().height || 0;
-            content.scrollTop = Math.max(0, content.scrollTop + latest.getBoundingClientRect().top - contentTop - stickyHeight - 12);
-          } else content.scrollTop = content.scrollHeight;
-        } else if (tabChanged) content.scrollTop = 0;
-        else if (state.drawerTab === "chat" && wasNearBottom) content.scrollTop = content.scrollHeight;
-        else content.scrollTop = Math.min(previousTop, Math.max(0, content.scrollHeight - content.clientHeight));
+    if (!detailLoading) {
+      if (tabChanged) {
+        content.scrollTop = 0;
         state.drawerForceLatest = false;
-      });
+      } else {
+        const scrollGeneration = (motionState.drawerScrollGeneration || 0) + 1;
+        motionState.drawerScrollGeneration = scrollGeneration;
+        requestAnimationFrame(() => {
+          if (motionState.drawerScrollGeneration !== scrollGeneration) return;
+          const forceLatest = state.drawerForceLatest;
+          if (state.drawerTab === "chat" && forceLatest) {
+            const rows = [...content.querySelectorAll(".chat-row")];
+            const latest = rows[rows.length - 1];
+            if (latest && latest.offsetHeight > content.clientHeight - 90) {
+              const contentTop = content.getBoundingClientRect().top;
+              const stickyHeight = content.querySelector(".chat-history-head")?.getBoundingClientRect().height || 0;
+              content.scrollTop = Math.max(0, content.scrollTop + latest.getBoundingClientRect().top - contentTop - stickyHeight - 12);
+            } else content.scrollTop = content.scrollHeight;
+          } else if (state.drawerTab === "chat" && wasAtBottom) content.scrollTop = content.scrollHeight;
+          else content.scrollTop = Math.min(previousTop, Math.max(0, content.scrollHeight - content.clientHeight));
+          state.drawerForceLatest = false;
+        });
+      }
+    }
   }
 
   return { openDrawer, openSubagentConversation, closeDrawer, renderDrawer };

package/renderer/app-events-dialogs.js

@@ -3,18 +3,22 @@
 window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createDialogEventBindings = function createDialogEventBindings(context = {}) {
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const {
-    $, $$, state, providerInfo, renderProviderRail, scheduleAgentWorkflowConnections, resumeAgentTerminal, loadSessionDetail,
+    $, $$, state, providerInfo, visibleProviders = () => state.providers, renderProviderRail, scheduleAgentWorkflowConnections, resumeAgentTerminal, loadSessionDetail,
     closeDrawer, renderDrawer, providerPickerHtml, syncRunComposer, openRunModal, closeRunModal, toast, performUiAction,
-    handleRun, trapDialogFocus,
+    handleRun, trapDialogFocus, currentDialog, selectView, saveRunDraft = () => {}, safeBackdrop = null,
+    copyText = async () => false,
+    dispatchAgentCommand, controlManagedRun, quickRespond, prepareReassignment,
   } = context;
 
   function bindRunComposerEvents() {
     $("#newRunBtn").addEventListener("click", openRunModal);
     $$("[data-open-run]").forEach((button) => button.addEventListener("click", openRunModal));
-    $("#closeRunModalBtn").addEventListener("click", closeRunModal);
-    $("#cancelRunBtn").addEventListener("click", closeRunModal);
-    $("#runModal").addEventListener("click", (event) => {
+    $("#closeRunModalBtn").addEventListener("click", () => closeRunModal());
+    $("#cancelRunBtn").addEventListener("click", () => closeRunModal());
+    if (safeBackdrop) safeBackdrop($("#runModal"), () => closeRunModal());
+    else $("#runModal").addEventListener("click", (event) => {
       if (event.target === $("#runModal")) closeRunModal();
     });
     $("#runProviderPicker").addEventListener("click", (event) => {
@@ -23,6 +27,20 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
       state.runProvider = button.dataset.runProvider;
       $("#runProviderPicker").innerHTML = providerPickerHtml();
       syncRunComposer();
+      saveRunDraft();
+    });
+    $("#runProviderPicker").addEventListener("keydown", (event) => {
+      if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
+      const options = $$("#runProviderPicker [data-run-provider]:not(:disabled)");
+      const current = Math.max(0, options.indexOf(event.target.closest("[data-run-provider]")));
+      const next = event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? options.length - 1
+          : (current + (["ArrowRight", "ArrowDown"].includes(event.key) ? 1 : -1) + options.length) % options.length;
+      event.preventDefault();
+      options[next]?.click();
+      requestAnimationFrame(() => $("#runProviderPicker").querySelector(`[data-run-provider="${CSS.escape(state.runProvider)}"]`)?.focus());
     });
     $("#runProviderHelp").addEventListener("click", async (event) => {
       const docs = event.target.closest("[data-provider-docs]");
@@ -31,31 +49,33 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
         if (provider.docs)
           await performUiAction(async () => {
             const result = await window.loadtoagent.openExternal(provider.docs);
-            if (!result || result.ok === false) throw new Error("공식 설치 문서를 열지 못했습니다.");
-          }, "공식 설치 문서를 열지 못했습니다.");
+            if (!result || result.ok === false) throw new Error(t("run.docs_open_failed"));
+          }, t("run.docs_open_failed"), docs);
         return;
       }
-      if (event.target.closest("[data-provider-recheck]")) {
-        const nextAvailability = await performUiAction(() => window.loadtoagent.probeProviders(), "AI CLI 연결 상태를 확인하지 못했습니다.");
+      const recheck = event.target.closest("[data-provider-recheck]");
+      if (recheck) {
+        const nextAvailability = await performUiAction(() => window.loadtoagent.probeProviders(), t("run.cli_check_failed"), recheck);
         if (!nextAvailability) return;
         state.availability = nextAvailability;
-        const installed = state.providers.find((provider) => state.availability[provider.id]);
+        const installed = visibleProviders().find((provider) => state.availability[provider.id]);
         if (installed) state.runProvider = installed.id;
         $("#runProviderPicker").innerHTML = providerPickerHtml();
         renderProviderRail();
         syncRunComposer();
-        toast(installed ? `${installed.label} CLI를 찾았습니다. 이제 작업을 시작할 수 있어요.` : "아직 설치된 AI CLI를 찾지 못했습니다. 설치와 로그인을 확인해 주세요.");
+        toast(installed ? t("run.cli_ready", { provider: installed.label }) : t("run.cli_not_found"));
       }
     });
     $("#runPrompt").addEventListener("input", syncRunComposer);
     $(".run-prompt-examples").addEventListener("click", (event) => {
-      const example = event.target.closest("[data-run-prompt-example]");
+      const example = event.target.closest("[data-run-prompt-key]");
       if (!example) return;
       const input = $("#runPrompt");
-      const text = example.dataset.runPromptExample;
+      const text = t(example.dataset.runPromptKey);
       if (!input.value.trim()) input.value = text;
       else input.setRangeText(`${input.selectionStart ? "\n\n" : ""}${text}`, input.selectionStart, input.selectionEnd, "end");
       syncRunComposer();
+      saveRunDraft();
       input.focus();
     });
     $("#runWorkspaceSuggestions").addEventListener("click", (event) => {
@@ -63,14 +83,28 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
       if (!workspace) return;
       $("#runCwd").value = workspace.dataset.runWorkspace;
       syncRunComposer();
+      saveRunDraft();
+    });
+    $("#runWorkspaceSuggestions").addEventListener("keydown", (event) => {
+      if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+      const options = $$("#runWorkspaceSuggestions [data-run-workspace]");
+      const current = Math.max(0, options.indexOf(event.target.closest("[data-run-workspace]")));
+      const next = event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? options.length - 1
+          : (current + (event.key === "ArrowRight" ? 1 : -1) + options.length) % options.length;
+      event.preventDefault();
+      options[next]?.focus();
     });
     $("#runCwd").addEventListener("input", syncRunComposer);
     $("#allowWrites").addEventListener("change", syncRunComposer);
     $("#pickRunCwdBtn").addEventListener("click", async () => {
-      const folder = await performUiAction(() => window.loadtoagent.pickWorkspace(), "작업 폴더를 선택하지 못했습니다.");
+      const folder = await performUiAction(() => window.loadtoagent.pickWorkspace(), t("workspace.pick_failed"), $("#pickRunCwdBtn"));
       if (folder) {
         $("#runCwd").value = folder;
         syncRunComposer();
+        saveRunDraft();
       }
     });
     $("#runForm").addEventListener("keydown", (event) => {
@@ -80,11 +114,27 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
       }
     });
     $("#runForm").addEventListener("submit", handleRun);
+    $("#runForm").addEventListener("invalid", (event) => {
+      event.target.setAttribute("aria-invalid", "true");
+      if (!$("#runForm").dataset.invalidFocusQueued) {
+        $("#runForm").dataset.invalidFocusQueued = "true";
+        queueMicrotask(() => {
+          delete $("#runForm").dataset.invalidFocusQueued;
+          $("#runForm").querySelector(":invalid")?.focus({ preventScroll: true });
+        });
+      }
+    }, true);
+    $("#runForm").addEventListener("input", (event) => {
+      if (event.target.matches("input, textarea, select") && event.target.checkValidity()) event.target.removeAttribute("aria-invalid");
+      $("#runError").classList.add("hidden");
+      $("#runError").textContent = "";
+    });
   }
 
   function bindDrawerAndGlobalEvents() {
     $("#closeDrawerBtn").addEventListener("click", closeDrawer);
-    $("#drawerBackdrop").addEventListener("click", closeDrawer);
+    if (safeBackdrop) safeBackdrop($("#drawerBackdrop"), closeDrawer, $("#detailDrawer"));
+    else $("#drawerBackdrop").addEventListener("click", closeDrawer);
     $(".drawer-tabs").addEventListener("click", (event) => {
       const tab = event.target.closest("[data-tab]");
       if (tab) {
@@ -94,7 +144,8 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
       }
     });
     $(".drawer-tabs").addEventListener("keydown", (event) => {
-      if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+      const pageKey = event.ctrlKey && ["PageUp", "PageDown"].includes(event.key);
+      if (!pageKey && !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
       const tabs = $$(".drawer-tab:not(.hidden)");
       const current = Math.max(0, tabs.indexOf(event.target.closest(".drawer-tab")));
       const next =
@@ -102,7 +153,7 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
           ? 0
           : event.key === "End"
             ? tabs.length - 1
-            : (current + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length;
+            : (current + (["ArrowRight", "ArrowDown", "PageDown"].includes(event.key) ? 1 : -1) + tabs.length) % tabs.length;
       event.preventDefault();
       state.drawerTab = tabs[next].dataset.tab;
       state.drawerForceLatest = state.drawerTab === "chat";
@@ -110,14 +161,50 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
       $(`.drawer-tab[data-tab="${state.drawerTab}"]`)?.focus();
     });
     $("#detailDrawer").addEventListener("click", async (event) => {
+      const copy = event.target.closest("[data-copy-text]");
+      if (copy) {
+        await copyText(copy.dataset.copyText);
+        return;
+      }
       const resume = event.target.closest("[data-resume-agent]");
       if (resume) {
-        await resumeAgentTerminal(resume.dataset.resumeAgent);
+        if (resume.dataset.busy === "true") return;
+        resume.dataset.busy = "true";
+        resume.disabled = true;
+        resume.setAttribute("aria-busy", "true");
+        try {
+          await resumeAgentTerminal(resume.dataset.resumeAgent);
+        } finally {
+          if (resume.isConnected) {
+            delete resume.dataset.busy;
+            resume.disabled = false;
+            resume.removeAttribute("aria-busy");
+          }
+        }
+        return;
+      }
+      const quick = event.target.closest("[data-attention-quick]");
+      if (quick) {
+        quickRespond(quick.dataset.attentionSessionId || state.selectedId, quick.dataset.attentionQuick, $("#detailDrawer"));
+        return;
+      }
+      const managedAction = event.target.closest("[data-managed-run-action]");
+      if (managedAction) {
+        await controlManagedRun(managedAction.dataset.managementSessionId || state.selectedId, managedAction.dataset.managedRunAction);
+        return;
+      }
+      const reassign = event.target.closest("[data-reassign-session]");
+      if (reassign) {
+        prepareReassignment(reassign.dataset.reassignSession);
         return;
       }
       const retry = event.target.closest("[data-retry-detail]");
       if (retry) {
-        loadSessionDetail(retry.dataset.retryDetail, true);
+        if (retry.dataset.busy === "true") return;
+        retry.dataset.busy = "true";
+        retry.disabled = true;
+        retry.setAttribute("aria-busy", "true");
+        await loadSessionDetail(retry.dataset.retryDetail, true);
         return;
       }
       const latest = event.target.closest("[data-scroll-latest]");
@@ -127,33 +214,55 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
         return;
       }
       const stop = event.target.closest("[data-stop-run]");
-      if (!stop) return;
-      const runId = stop.dataset.stopRun;
-      if (state.stopRequests.has(runId)) return;
-      state.stopRequests.add(runId);
-      renderDrawer();
-      try {
-        const result = await window.loadtoagent.stopAgent(runId);
-        toast(result.ok ? window.LoadToAgentI18n.t("ui.stop_request_sent") : result.error);
-      } catch (error) {
-        toast((error && error.message) || window.LoadToAgentI18n.t("ui.could_not_send_the_stop_request"));
-      } finally {
-        state.stopRequests.delete(runId);
-        if (state.selectedId) renderDrawer();
-      }
+      if (stop) await controlManagedRun(state.selectedId, "stop");
+    });
+    $("#detailDrawer").addEventListener("input", (event) => {
+      const input = event.target.closest("[data-agent-command-draft]");
+      if (input) state.agentCommandDrafts.set(input.dataset.agentCommandDraft, input.value);
+    });
+    $("#detailDrawer").addEventListener("change", (event) => {
+      const picker = event.target.closest("[data-agent-command-target]");
+      if (!picker) return;
+      if (picker.value) state.agentCommandTargets.set(picker.dataset.agentCommandTarget, picker.value);
+      else state.agentCommandTargets.delete(picker.dataset.agentCommandTarget);
+      picker.closest("form")?.querySelectorAll("button").forEach(button => { button.disabled = !picker.value; });
+    });
+    $("#detailDrawer").addEventListener("keydown", (event) => {
+      const input = event.target.closest("[data-agent-command-draft]");
+      if (!input || event.key !== "Enter" || event.shiftKey || event.isComposing || event.keyCode === 229) return;
+      event.preventDefault();
+      input.closest("form")?.requestSubmit();
+    });
+    $("#detailDrawer").addEventListener("submit", (event) => {
+      const form = event.target.closest("[data-agent-command-form]");
+      if (!form) return;
+      event.preventDefault();
+      dispatchAgentCommand(form.dataset.agentCommandForm, form);
     });
     document.addEventListener("keydown", (event) => {
       trapDialogFocus(event);
-      if (event.key.toLowerCase() === "n" && (event.metaKey || event.ctrlKey) && !event.shiftKey && !event.altKey) {
+      const editable = event.target instanceof HTMLElement && Boolean(event.target.closest("input, textarea, select, [contenteditable='true']"));
+      const dialogOpen = Boolean(currentDialog?.());
+      const viewShortcuts = ["all", "active", "waiting", "runtime", "terminal", "tmux", "settings"];
+      if (!editable && !dialogOpen && (event.metaKey || event.ctrlKey) && /^[1-7]$/.test(event.key)) {
+        event.preventDefault();
+        selectView(viewShortcuts[Number(event.key) - 1], { focusMain: true });
+        return;
+      }
+      if (!editable && !dialogOpen && event.key === "/" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+        event.preventDefault();
+        if (state.view !== "all") selectView("all");
+        $("#searchInput").focus();
+        return;
+      }
+      if (!editable && !dialogOpen && event.key.toLowerCase() === "n" && (event.metaKey || event.ctrlKey) && !event.shiftKey && !event.altKey) {
         event.preventDefault();
         if ($("#runModal").classList.contains("hidden")) openRunModal();
         return;
       }
       if (event.key !== "Escape") return;
       if (!$("#mobileToolsMenu").classList.contains("hidden")) {
-        $("#mobileToolsMenu").classList.add("hidden");
-        $("#mobileMoreBtn").setAttribute("aria-expanded", "false");
-        $("#mobileMoreBtn").focus();
+        $("#mobileToolsCloseBtn")?.click();
       } else if (!$("#runModal").classList.contains("hidden")) closeRunModal();
       else closeDrawer();
     });