loadtoagent 1.0.0 → 1.3.1

package/renderer/app-drawer-content.js

@@ -4,33 +4,40 @@ window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createDrawerContent = function createDrawerContent(context = {}) {
   const { esc, uiLocale, state, messageContentHtml, compact, fullNumber, timeOnly, providerInfo, statusIcon, agentPathTaskName, snapshotSession } = context;
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
 
-  function chatHtml(session) {
+  function chatHtml(session, options = {}) {
     const messages = session.messages || [];
-    if (!messages.length) return '<div class="empty-state"><h3>표시할 대화가 없습니다</h3></div>';
+    if (!messages.length) return `<div class="empty-state"><h3>${esc(t("drawer.no_conversation"))}</h3></div>`;
+    const userLabel = options.userLabel || t("drawer.user");
+    const assistantLabel = options.assistantLabel || providerInfo(session.provider).label;
+    const conversationLabel = options.conversationLabel || t("drawer.conversation");
     const conversation = messages.filter((message) => message.role === "user" || message.role === "assistant");
     const activities = messages.filter((message) => message.role !== "user" && message.role !== "assistant");
     const omitted = Number(session.omittedMessages || 0);
     const notice =
       omitted || session.truncated
-        ? `<div class="chat-truncated">이 작업의 최근 기록을 표시합니다${omitted ? ` · 이전 ${omitted.toLocaleString(uiLocale())}개 메시지 생략` : ""}</div>`
+        ? `<div class="chat-truncated">${esc(t("drawer.recent_history"))}${omitted ? ` · ${esc(t("drawer.messages_omitted", { count: omitted.toLocaleString(uiLocale()) }))}` : ""}</div>`
         : "";
     const statusLabels = {
-      started: "실행 중", running: "실행 중",
-      done: window.LoadToAgentI18n.t("ui.completed"), completed: window.LoadToAgentI18n.t("ui.completed"), failed: "실패",
+      started: t("ui.working"), running: t("ui.working"),
+      done: t("ui.completed"), completed: t("ui.completed"), failed: t("drawer.failed"),
     };
     const statusLabel = (value) => statusLabels[value] || value || "";
     const rows = conversation
       .map((message) => {
         const role = message.role === "assistant" ? "assistant" : message.role === "tool" ? "tool" : message.role === "system" ? "system" : "user";
+        const renderedMessage = role === "tool" || role === "system"
+          ? { ...message, text: window.LoadToAgentI18n.observedText(message.text) }
+          : message;
         const label =
           role === "assistant"
-            ? providerInfo(session.provider).label
+            ? assistantLabel
             : role === "tool"
-              ? message.title || "도구"
+              ? window.LoadToAgentI18n.observedText(message.title || t("session.tool"))
               : message.role === "system"
-                ? "시스템"
-                : "사용자";
+                ? t("drawer.system")
+                : userLabel;
         const avatar = role === "assistant" ? providerInfo(session.provider).mark : role === "tool" ? "⌘" : role === "system" ? "i" : "ME";
         const fullTime = new Date(message.timestamp).toLocaleString(uiLocale());
         return `<div class="chat-row ${role}" data-message-id="${esc(message.id || "")}">
@@ -40,44 +47,44 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
         <b>${esc(label)}</b>
         <span title="${esc(fullTime)}">${esc(timeOnly(message.timestamp))}</span>
         ${message.status ? `<span>${esc(statusLabel(message.status))}</span>` : ""}
-        </div>${messageContentHtml(message)}</div>
+        </div>${messageContentHtml(renderedMessage, session.id)}</div>
         </div>`;
       })
       .join("");
     const activityHtml = activities.length
-      ? `<details class="chat-activities">
-      <summary>도구·시스템 활동 ${activities.length}건 보기</summary>
+      ? `<details class="chat-activities" data-disclosure-key="${esc(`drawer:${session.id}:activities`)}">
+      <summary>${esc(t("drawer.activities_view", { count: activities.length }))}</summary>
       <div>${activities
         .map(
           (message) => `<article>
       <header>
-      <b>${esc(message.title || (message.role === "tool" ? "도구 실행" : "시스템"))}</b>
+      <b>${esc(window.LoadToAgentI18n.observedText(message.title || (message.role === "tool" ? t("drawer.tool_execution") : t("drawer.system"))))}</b>
       <span>${esc(statusLabel(message.status))} · ${esc(timeOnly(message.timestamp))}</span>
-      </header>${messageContentHtml(message)}</article>`,
+      </header>${messageContentHtml({ ...message, text: window.LoadToAgentI18n.observedText(message.text) }, session.id)}</article>`,
         )
         .join("")}</div>
       </details>`
       : "";
-    const emptyConversation = conversation.length ? "" : '<div class="empty-state compact"><h3>사용자와 AI의 대화는 아직 없습니다</h3></div>';
+    const emptyConversation = conversation.length ? "" : `<div class="empty-state compact"><h3>${esc(t("drawer.no_user_ai_conversation"))}</h3></div>`;
     return `${notice}<div class="chat-history-head">
-      <span>대화 ${conversation.length}개${activities.length ? ` · 활동 ${activities.length}건` : ""}</span>
-      <button type="button" data-scroll-latest>가장 최근 대화 ↓</button>
+      <span>${esc(t("drawer.conversation_summary", { label: conversationLabel, count: conversation.length, activities: activities.length ? ` · ${t("drawer.activities", { count: activities.length })}` : "" }))}</span>
+      <button type="button" data-scroll-latest>${esc(t("drawer.latest_conversation"))} ↓</button>
       </div>
-      <div class="chat-list">${rows}${emptyConversation}${activityHtml}<div class="chat-latest-anchor" aria-label="가장 최근 대화">
+      <div class="chat-list">${rows}${emptyConversation}${activityHtml}<div class="chat-latest-anchor" aria-label="${esc(t("drawer.latest_conversation"))}">
       </div>
       </div>`;
   }
 
   function lifecycleHtml(session) {
     const events = session.lifecycle || [];
-    if (!events.length) return '<div class="empty-state"><h3>아직 기록된 진행 과정이 없습니다</h3></div>';
+    if (!events.length) return `<div class="empty-state"><h3>${esc(t("drawer.no_lifecycle"))}</h3></div>`;
     return `<div class="lifecycle-list">${events
       .map(
         (event) => `<div class="lifecycle-event ${esc(event.status)}">
       <span class="life-node">${statusIcon(event.type)}</span>
       <div class="life-copy">
-      <b>${esc(event.label)}</b>
-      <span>${esc(event.detail || event.type)}</span>
+      <b>${esc(window.LoadToAgentI18n.observedText(event.label))}</b>
+      <span>${esc(window.LoadToAgentI18n.observedText(event.detail || event.type))}</span>
       </div>
       <time>${esc(timeOnly(event.timestamp))}</time>
       </div>`,
@@ -91,14 +98,14 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
     const context = session.context || {};
     const sourceLabel =
       context.source === "session"
-        ? "이 작업 기록에서 직접 확인한 기억 공간"
+        ? t("drawer.context_source_session")
         : context.source === "model-catalog"
-          ? "AI 모델 정보에 적힌 기억 공간"
-          : "기억 공간 크기 정보 없음";
+          ? t("drawer.context_source_catalog")
+          : t("session.context_size_unknown");
     return `<div class="token-hero" style="--drawer-provider:${providerInfo(session.provider).accent}">
       <div class="token-hero-head">
-        <span>AI의 기억 공간 사용량</span>
-        <b>${context.window ? `${fullNumber(context.used)} / ${fullNumber(context.window)} 토큰` : `${fullNumber(context.used)} 토큰`}</b>
+        <span>${esc(t("session.context_usage"))}</span>
+        <b>${esc(t("drawer.tokens", { count: context.window ? `${fullNumber(context.used)} / ${fullNumber(context.window)}` : fullNumber(context.used) }))}</b>
         </div>
       <div class="big-context"><span style="width:${Math.min(100, context.percent || 0)}%"></span></div>
       <div class="context-scale">
@@ -107,15 +114,15 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
       </div>
     </div>
     <div class="token-grid">
-      <div class="token-tile"><span>AI가 받은 글</span><strong>${fullNumber(usage.input)}</strong><small>AI에게 전달된 내용의 양</small></div>
-      <div class="token-tile"><span>AI가 쓴 글</span><strong>${fullNumber(usage.output)}</strong><small>AI가 답하고 만든 내용의 양</small></div>
-      <div class="token-tile"><span>다시 사용한 기억</span><strong>${fullNumber(usage.cachedInput)}</strong><small>전에 읽은 내용을 다시 활용한 양</small></div>
-      <div class="token-tile"><span>새로 저장한 기억</span><strong>${fullNumber(usage.cacheWrite)}</strong><small>다음에 다시 쓰도록 저장한 양</small></div>
-      <div class="token-tile"><span>생각에 사용</span><strong>${fullNumber(usage.reasoning)}</strong><small>AI가 따로 알려준 경우만 표시</small></div>
-      <div class="token-tile"><span>전체 사용량</span><strong>${fullNumber(usage.total)}</strong><small>이 작업에서 사용한 토큰 합계</small></div>
-      <div class="token-tile"><span>최근에 받은 글</span><strong>${fullNumber(turn.input)}</strong><small>가장 최근 대화 기준</small></div>
-      <div class="token-tile"><span>최근 대화 전체</span><strong>${fullNumber(turn.total)}</strong><small>가장 최근 한 번의 사용량</small></div>
-    </div><div class="token-note">${esc(sourceLabel)}입니다. 토큰은 AI가 글을 읽고 쓰는 양을 세는 단위이고, 기억 공간은 AI가 한 번에 기억할 수 있는 양입니다.</div>`;
+      <div class="token-tile"><span>${esc(t("drawer.input"))}</span><strong>${fullNumber(usage.input)}</strong><small>${esc(t("drawer.input_help"))}</small></div>
+      <div class="token-tile"><span>${esc(t("drawer.output"))}</span><strong>${fullNumber(usage.output)}</strong><small>${esc(t("drawer.output_help"))}</small></div>
+      <div class="token-tile"><span>${esc(t("drawer.cached"))}</span><strong>${fullNumber(usage.cachedInput)}</strong><small>${esc(t("drawer.cached_help"))}</small></div>
+      <div class="token-tile"><span>${esc(t("drawer.cache_write"))}</span><strong>${fullNumber(usage.cacheWrite)}</strong><small>${esc(t("drawer.cache_write_help"))}</small></div>
+      <div class="token-tile"><span>${esc(t("drawer.reasoning"))}</span><strong>${fullNumber(usage.reasoning)}</strong><small>${esc(t("drawer.reasoning_help"))}</small></div>
+      <div class="token-tile"><span>${esc(t("drawer.total"))}</span><strong>${fullNumber(usage.total)}</strong><small>${esc(t("drawer.total_help"))}</small></div>
+      <div class="token-tile"><span>${esc(t("drawer.last_input"))}</span><strong>${fullNumber(turn.input)}</strong><small>${esc(t("drawer.latest_turn"))}</small></div>
+      <div class="token-tile"><span>${esc(t("drawer.last_total"))}</span><strong>${fullNumber(turn.total)}</strong><small>${esc(t("drawer.last_total_help"))}</small></div>
+    </div><div class="token-note">${esc(t("drawer.token_note", { source: sourceLabel }))}</div>`;
   }
 
   function subagentCommunicationEvents(session) {
@@ -136,68 +143,78 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
     return { text: `${text.slice(0, maxCharacters).trimEnd()}…`, truncated: true };
   }
 
-  function protectedSubagentEventText(event, taskName) {
-    if (event.kind === "followup") return "보호된 추가 작업 지시를 전달했습니다.";
-    if (event.kind === "message") return "보호된 메시지를 전달했습니다.";
-    return `${taskName || "이 작업"}을 서브에이전트에게 배정했습니다.`;
+  function subagentCoordinationEvents(session) {
+    return subagentCommunicationEvents(session).filter((event) => {
+      if (!event || event.protected || event.kind === "started") return false;
+      if (!["assignment", "followup", "message", "result", "interrupt"].includes(event.kind)) return false;
+      const text = String(event.text || "").trim();
+      return Boolean(text && text.toLowerCase() !== "started");
+    });
   }
 
-  function subagentConversationHtml(session) {
-    const events = subagentCommunicationEvents(session);
+  function subagentWorkMessages(session) {
+    const messages = [...(session.messages || [])];
+    const hasConversation = messages.some((message) =>
+      (message.role === "user" || message.role === "assistant") && String(message.text || "").trim(),
+    );
+    if (hasConversation) return messages;
+    const delegation = session.delegation || {};
+    if (delegation.assignmentObserved && !delegation.assignmentProtected && String(delegation.assignment || "").trim()) {
+      messages.push({
+        id: `${session.id}:delegation`, role: "user", text: delegation.assignment,
+        timestamp: delegation.startedAt || session.startedAt || session.updatedAt,
+      });
+    }
+    if (String(session.result || delegation.result || "").trim()) {
+      messages.push({
+        id: `${session.id}:result`, role: "assistant", text: session.result || delegation.result,
+        timestamp: session.completedAt || delegation.completedAt || session.updatedAt,
+      });
+    }
+    return messages.sort((left, right) => Date.parse(left.timestamp || 0) - Date.parse(right.timestamp || 0));
+  }
+
+  function subagentCoordinationHtml(session) {
+    const events = subagentCoordinationEvents(session);
+    if (!events.length) return "";
     const taskName = session.taskName || (session.delegation && session.delegation.taskName) || session.title;
     const childPath = String(session.agentPath || "");
     const endpointIsChild = (value) => {
       const endpoint = String(value || "");
       return endpoint === childPath || endpoint === session.id || agentPathTaskName(endpoint) === taskName;
     };
-    const enriched = events.map((event) => ({ ...event, fromChild: event.kind === "result" || endpointIsChild(event.from) }));
-    const received = enriched.filter((event) => !event.fromChild && event.kind !== "started").length;
-    const answered = enriched.filter((event) => event.fromChild).length;
-    if (!events.length)
-      return '<div class="empty-state"><h3>메인 AI와 주고받은 기록이 없습니다</h3><p>세션 로그에서 배정·추가 지시·결과 반환 이벤트를 찾지 못했습니다.</p></div>';
-    const provider = providerInfo(session.provider);
-    const rows = enriched
+    const rows = events
       .map((event) => {
-        const runtime = event.kind === "started";
-        const role = runtime ? "system" : event.fromChild ? "assistant" : "user";
-        const label = runtime ? "실행 상태" : event.fromChild ? `서브 AI · ${session.agentName || taskName}` : "메인 AI";
-        const avatar = runtime ? "↗" : event.fromChild ? provider.mark : "M";
-        const route = runtime ? "런타임 → 서브 AI" : event.fromChild ? "서브 AI → 메인 AI" : "메인 AI → 서브 AI";
-        const text = event.protected
-          ? protectedSubagentEventText(event, taskName)
-          : event.text || (runtime ? "서브에이전트 실행이 시작되었습니다." : "내용 없이 통신 상태만 기록되었습니다.");
-        const preview = subagentTextPreview(text);
-        const eventLabel = `${event.label || event.kind}${event.assignmentSource === "parent-narration" ? " · 작업 시작 직전 메인 AI 설명" : ""}`;
-        return `<div class="chat-row ${role} subagent-dialog-row" data-subagent-communication="${esc(event.kind)}">
-        <span class="chat-avatar">${esc(avatar)}</span>
-        <div class="chat-bubble">
-          <div class="chat-bubble-head">
-            <b>${esc(label)}</b><span class="subagent-route">${esc(route)}</span>
-            <span>${esc(timeOnly(event.timestamp))}</span>
-          </div>
-          <small class="subagent-event-label">${esc(eventLabel)}</small>
-          <div class="chat-content subagent-message-preview${preview.truncated ? " is-truncated" : ""}"
-            data-subagent-message-preview data-truncated="${preview.truncated ? "true" : "false"}">
-            <p>${esc(preview.text)}</p>
-          </div>
-        </div>
-      </div>`;
+        const fromChild = event.kind === "result" || endpointIsChild(event.from);
+        const preview = subagentTextPreview(event.text);
+        const label = fromChild ? t("drawer.child_to_main", { child: session.agentName || taskName }) : t("drawer.main_to_child");
+        return `<article data-subagent-communication="${esc(event.kind)}">
+          <header><b>${esc(window.LoadToAgentI18n.observedText(event.label || event.kind))}</b><span>${esc(label)} · ${esc(timeOnly(event.timestamp))}</span></header>
+          <div class="chat-content plain subagent-message-preview${preview.truncated ? " is-truncated" : ""}"
+            data-subagent-message-preview data-truncated="${preview.truncated ? "true" : "false"}"><p>${esc(preview.text)}</p></div>
+        </article>`;
       })
       .join("");
-    return `<div class="subagent-conversation-summary" data-subagent-dialog-count="${events.length}">
-      <span>
-      <small>받은 지시·응답</small>
-      <b>${received}</b>건</span>
-      <span>
-      <small>메인에 보낸 답변</small>
-      <b>${answered}</b>건</span>
-      <span>
-      <small>전체 소통</small>
-      <b>${events.length}</b>건</span>
-      </div>
-      <div class="chat-history-head"><span><b>${esc(taskName)}</b>와 메인 AI가 주고받은 내용만 표시</span><button type="button" data-scroll-latest>가장 최근 대화 ↓</button></div>
-      <div class="chat-list subagent-dialog-list">${rows}<div class="chat-latest-anchor" aria-label="가장 최근 대화"></div></div>`;
+    return `<details class="chat-activities subagent-coordination" data-subagent-coordination-count="${events.length}" data-disclosure-key="${esc(`drawer:${session.id}:coordination`)}">
+      <summary>${esc(t("drawer.coordination_events", { count: events.length }))}</summary><div>${rows}</div>
+    </details>`;
+  }
+
+  function subagentConversationHtml(session) {
+    const messages = subagentWorkMessages(session);
+    const conversationCount = messages.filter((message) => message.role === "user" || message.role === "assistant").length;
+    const workSession = { ...session, messages };
+    const sourceCopy = session.source === "collaboration-history"
+      ? t("drawer.subagent_history_reconstructed")
+      : t("drawer.subagent_history_actual");
+    return `<section class="subagent-work-source" data-subagent-work-messages="${conversationCount}">
+      <b>${esc(t("drawer.subagent_work_history"))}</b><span>${esc(sourceCopy)}</span>
+    </section>${chatHtml(workSession, {
+      userLabel: t("drawer.assignment"),
+      assistantLabel: session.agentName || t("drawer.sub_ai"),
+      conversationLabel: t("drawer.work_history"),
+    })}${subagentCoordinationHtml(session)}`;
   }
 
-  return { chatHtml, lifecycleHtml, tokensHtml, subagentCommunicationEvents, subagentTextPreview, protectedSubagentEventText, subagentConversationHtml };
+  return { chatHtml, lifecycleHtml, tokensHtml, subagentCommunicationEvents, subagentCoordinationEvents, subagentTextPreview, subagentConversationHtml };
 };

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, subagentCommunicationEvents, 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,25 +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,
@@ -71,60 +73,70 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     if (!session) return closeDrawer();
     const provider = providerInfo(session.provider);
     const subagentMode = state.drawerMode === "subagent" && Boolean(session.parentId);
-    const detailLoading = !subagentMode && state.detailLoadingIds.has(state.selectedId);
+    const detailLoading = state.detailLoadingIds.has(state.selectedId);
     $("#detailDrawer").style.setProperty("--drawer-provider", provider.accent);
     $("#drawerProviderMark").style.setProperty("--provider", provider.accent);
     $("#drawerProviderMark").textContent = provider.mark;
     $("#drawerProvider").textContent = subagentMode
-      ? `${session.agentName || provider.label} · 메인 AI와의 소통`
+      ? 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 ? subagentCommunicationEvents(session).length : 0;
+    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 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");
@@ -133,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;
@@ -143,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>'
-      : detailError && !subagentMode
+      ? `<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 };