loadtoagent 1.0.0 → 1.3.1

package/renderer/app-session-render.js

@@ -3,6 +3,7 @@
 window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRenderer(context = {}) {
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const {
     $,
     esc,
@@ -27,17 +28,25 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
     statusIcon,
     renderProviderRail,
     isProjectlessSession,
+    sessionOriginPath,
     sessionWorkspaceLabel,
     renderWorkspaces,
     renderGlobalStats,
     renderUpdateSettings,
     renderProviderOverview,
     renderProviderFilter,
+    renderRuntimeOverview,
+    renderProviderVisibilitySettings = () => {},
+    visibleSnapshot = () => state.snapshot,
     filteredSessions,
     graphFilteredSessions,
     executionModeBadge,
     renderAgentMap,
     renderTmuxMap,
+    renderAttentionInbox,
+    renderOperationsOverview,
+    progressHtml,
+    healthHtml,
   } = context;
 
   function recentConversation(session) {
@@ -46,10 +55,10 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
     const assistant = [...messages].reverse().find((message) => message.role === "assistant");
     const tool = [...messages].reverse().find((message) => message.role === "tool");
     const rows = [];
-    if (user) rows.push({ label: "나", text: readablePreview(user.text, 140).text, tone: "user" });
+    if (user) rows.push({ label: t("session.me"), text: readablePreview(user.text, 140).text, tone: "user" });
     if (assistant) rows.push({ label: providerInfo(session.provider).label, text: readablePreview(assistant.text, 140).text, tone: "assistant" });
-    else if (tool) rows.push({ label: tool.title || "도구", text: readablePreview(tool.text, 140).text, tone: "tool" });
-    if (!rows.length) rows.push({ label: "상태", text: session.statusDetail || "대화 이벤트를 기다리는 중입니다.", tone: "system" });
+    else if (tool) rows.push({ label: tool.title || t("session.tool"), text: readablePreview(tool.text, 140).text, tone: "tool" });
+    if (!rows.length) rows.push({ label: t("session.status"), text: window.LoadToAgentI18n.observedText(session.statusDetail || t("session.waiting_for_event")), tone: "system" });
     return rows.slice(-2);
   }
 
@@ -60,16 +69,18 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
     const activity = currentActivity(session);
     const running = session.status === "running" || session.status === "starting";
     const children = session.childIds || [];
-    const model = session.model || "사용 모델 정보 없음";
+    const model = session.model || t("session.model_unknown");
     const contextPercent = Math.max(0, Math.min(100, Number(context.percent || 0)));
     const remaining = context.window ? Math.max(0, Number(context.window) - Number(context.used || 0)) : 0;
     const gaugeTone = contextPercent >= 90 ? "critical" : contextPercent >= 75 ? "warning" : "safe";
     const conversation = recentConversation(session);
     const runtime = session.runtimePresence || [];
     const titlePreview = readablePreview(session.title, 96);
-    const activityCopy = latestWorkCopy(session) || session.statusDetail || "새 이벤트 대기";
+    const activityCopy = latestWorkCopy(session) || window.LoadToAgentI18n.observedText(session.statusDetail) || t("session.waiting_for_new_event");
     const activityPreview = readablePreview(activityCopy, 116);
     const accessibleId = `session-${String(session.id || "").replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+    const originPath = sessionOriginPath(session);
+    const originLabel = sessionWorkspaceLabel(session);
     return `<article class="session-card ${opts.live ? "live-card" : ""} ${statusClass(session.status)} ${session.parentId ? "subagent" : ""}"
       data-session-id="${esc(session.id)}"
       data-motion-key="session:${esc(session.id)}"
@@ -88,8 +99,9 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
         <span>${esc(model)}</span>
         <i>
         </i>
-        <span title="${esc(isProjectlessSession(session) ? window.LoadToAgentI18n.t("ui.session_not_linked_to_a_specific_project") : session.cwd)}">
-          ${esc(sessionWorkspaceLabel(session))}
+        <span class="origin-project" title="${esc(isProjectlessSession(session) ? window.LoadToAgentI18n.t("ui.session_not_linked_to_a_specific_project") : originPath)}"
+          aria-label="${esc(t("project.origin_named", { name: originLabel }))}">
+          <small>${esc(t("project.origin"))}</small><b>${esc(originLabel)}</b>
         </span>${
           session.agentName
             ? `<i>
@@ -99,16 +111,18 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
         }</div>
       <div id="${accessibleId}-summary" class="now-strip ${running ? "is-live" : ""}">
         <span class="now-strip-icon">${statusIcon(activity.type)}</span>
-        <div><b>${running ? "지금: " : ""}${esc(activity.title)}</b><span title="${esc(activityPreview.full)}">${esc(activityPreview.text)}</span></div>
+        <div><b>${running ? `${esc(t("session.now"))}: ` : ""}${esc(activity.title)}</b><span title="${esc(activityPreview.full)}">${esc(activityPreview.text)}</span></div>
         ${running ? '<span class="activity-wave"><i></i><i></i><i></i><i></i><i></i></span>' : ""}
       </div>
+      ${progressHtml(session, true)}
+      ${healthHtml(session, true)}
       ${
         runtime.length
           ? `<div class="runtime-strip">
         <span class="runtime-pulse">
         </span>
-        <b>실제로 실행 중인 프로그램 ${runtime.length}개</b>
-        <span>${esc(runtime.map((item) => item.label || `프로그램 ${item.pid}`).join(" · "))}</span>
+        <b>${esc(t("session.running_programs", { count: runtime.length }))}</b>
+        <span>${esc(runtime.map((item) => item.label || t("session.program_pid", { pid: item.pid })).join(" · "))}</span>
         </div>`
           : ""
       }
@@ -118,28 +132,28 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
       <div class="context-meter ${gaugeTone}">
         <div class="context-meter-head">
           <div>
-          <span>AI의 기억 공간 사용량</span>
+          <span>${esc(t("session.context_usage"))}</span>
           <strong>${context.window ? `${fullNumber(context.used)} / ${fullNumber(context.window)}` : `${fullNumber(context.used)} / --`}</strong>
           </div>
           <b>${context.window ? `${contextPercent.toFixed(1)}%` : "--"}</b>
           </div>
         <div class="context-meter-track"><span style="width:${contextPercent}%"></span><i style="left:75%"></i><i style="left:90%"></i></div>
         <div class="context-meter-foot">
-          <span>${context.window ? `아직 ${compact(remaining)} 토큰만큼 기억 가능` : "기억 공간 크기 정보 없음"}</span>
-          <span>지금까지 ${compact(usage.total)} 토큰 사용</span>
+          <span>${esc(context.window ? t("session.context_remaining", { count: compact(remaining) }) : t("session.context_size_unknown"))}</span>
+          <span>${esc(t("session.tokens_used_so_far", { count: compact(usage.total) }))}</span>
           </div>
       </div>
       <div class="token-row">
-        <div><span>받은 글</span><b>${compact(usage.input)}</b></div>
-        <div><span>AI가 쓴 글</span><b>${compact(usage.output)}</b></div>
-        <div><span>다시 쓴 기억</span><b>${compact(usage.cachedInput)}</b></div>
-        <div class="total"><span>전체 사용</span><b>${compact(usage.total)}</b></div>
+        <div><span>${esc(t("session.input_tokens"))}</span><b>${compact(usage.input)}</b></div>
+        <div><span>${esc(t("session.output_tokens"))}</span><b>${compact(usage.output)}</b></div>
+        <div><span>${esc(t("session.cached_tokens"))}</span><b>${compact(usage.cachedInput)}</b></div>
+        <div class="total"><span>${esc(t("session.total_tokens"))}</span><b>${compact(usage.total)}</b></div>
       </div>
       ${
         children.length
           ? `<div class="child-row">
         <b>⑂</b>
-        <span>서브에이전트 ${children.length}개 누적 생성</span>
+        <span>${esc(t("session.subagents_created", { count: children.length }))}</span>
         <span class="child-dots">${children
           .slice(0, 4)
           .map(() => "<i></i>")
@@ -148,31 +162,47 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
           : ""
       }
       <footer class="card-footer">
-        <span class="source-tag">${esc(session.sourceLabel || "내 PC의 작업 기록")}</span>
+        <span class="source-tag">${esc(window.LoadToAgentI18n.observedText(session.sourceLabel || t("session.local_history")))}</span>
         <span>${esc(timeAgo(session.updatedAt))}</span>
       </footer>
     </article>`;
   }
 
-  function renderSessions(motionKind = "refresh", deferMotion = false) {
+  function renderSessionsContent(motionKind = "refresh", deferMotion = false) {
     const previousLayout = deferMotion ? null : captureMotionLayout();
     syncViewChrome();
     renderGuide();
     const tmuxView = state.view === "tmux";
     const terminalView = state.view === "terminal";
     const settingsView = state.view === "settings";
+    const runtimeView = state.view === "runtime";
+    const attentionView = state.view === "waiting";
+    const operationsView = state.view === "all" || state.view === "active";
+    const focusedToolView = tmuxView || terminalView || settingsView || runtimeView;
     $("#terminalSection").classList.toggle("hidden", !terminalView);
     $("#tmuxSection").classList.toggle("hidden", !tmuxView);
     $("#settingsSection").classList.toggle("hidden", !settingsView);
-    $("#globalStats").classList.toggle("hidden", tmuxView || terminalView || settingsView);
-    $("#providerOverview").classList.toggle("hidden", tmuxView || terminalView || settingsView);
-    $("#sessionSection").classList.toggle("hidden", tmuxView || terminalView || settingsView);
+    $("#globalStats").classList.toggle("hidden", focusedToolView);
+    $("#providerOverview").classList.toggle("hidden", focusedToolView || state.view !== "all");
+    $("#sessionSection").classList.toggle("hidden", focusedToolView || state.view === "active" || attentionView);
+    $("#operationsOverview").classList.toggle("hidden", !operationsView);
+    $("#attentionInbox").classList.toggle("hidden", !attentionView);
+    if (runtimeView) renderRuntimeOverview();
+    $("#automationOverview").classList.toggle("hidden", !runtimeView);
     const guideVisible = state.view === "all" && state.guideExpanded && !state.graphFocusId;
     $("#beginnerGuide").classList.toggle("hidden", !guideVisible);
     $("#guideBtn").setAttribute("aria-expanded", guideVisible ? "true" : "false");
     renderUpdateSettings();
+    if (runtimeView) {
+      $("#liveSection").classList.add("hidden");
+      if (window.LoadToAgentTerminal) window.LoadToAgentTerminal.deactivate();
+      if (!deferMotion) playMotionLayout(previousLayout, motionKind);
+      if (motionKind === "view") animateVisibleSections();
+      return;
+    }
     if (settingsView) {
       $("#liveSection").classList.add("hidden");
+      renderProviderVisibilitySettings();
       if (window.LoadToAgentTerminal) window.LoadToAgentTerminal.deactivate();
       if (!deferMotion) playMotionLayout(previousLayout, motionKind);
       if (motionKind === "view") animateVisibleSections();
@@ -180,7 +210,7 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
     }
     if (terminalView) {
       $("#liveSection").classList.add("hidden");
-      if (window.LoadToAgentTerminal) window.LoadToAgentTerminal.activate(state.snapshot, state.workspaces, "general");
+      if (window.LoadToAgentTerminal) window.LoadToAgentTerminal.activate(visibleSnapshot(), state.workspaces, "general");
       if (!deferMotion) playMotionLayout(previousLayout, motionKind);
       if (motionKind === "view") animateVisibleSections();
       return;
@@ -188,24 +218,32 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
     if (tmuxView) {
       $("#liveSection").classList.add("hidden");
       renderTmuxMap();
-      if (window.LoadToAgentTerminal) window.LoadToAgentTerminal.activate(state.snapshot, state.workspaces, "tmux");
+      if (window.LoadToAgentTerminal) window.LoadToAgentTerminal.activate(visibleSnapshot(), state.workspaces, "tmux");
       if (!deferMotion) playMotionLayout(previousLayout, motionKind);
       if (motionKind === "view") animateVisibleSections();
       return;
     }
     if (window.LoadToAgentTerminal) window.LoadToAgentTerminal.deactivate();
     const sessions = filteredSessions();
+    if (operationsView) renderOperationsOverview();
+    const attentionCount = attentionView ? renderAttentionInbox() : 0;
     const showMap = ["all", "active"].includes(state.view);
     const graphLiveCount = showMap ? renderAgentMap(graphFilteredSessions(), motionKind) : 0;
     const regular = state.view === "all" ? sessions.filter((session) => !isLiveSession(session)) : state.view === "active" ? [] : sessions;
     const visible = regular.slice(0, state.visibleLimit);
-    $("#liveSection").classList.toggle("hidden", graphLiveCount === 0);
+    const resultCount = attentionView ? attentionCount : graphLiveCount + regular.length;
+    $("#sessionResultSummary").textContent = window.LoadToAgentI18n.t("quality.results_summary", { count: resultCount });
+    const activeEmpty = state.view === "active" && graphLiveCount === 0;
+    $("#activeEmptyState").classList.toggle("hidden", !activeEmpty);
+    $("#liveSection").classList.toggle("hidden", attentionView || (graphLiveCount === 0 && state.view !== "active"));
     $("#viewTitle").textContent = VIEW_TITLES[state.view] || window.LoadToAgentI18n.t("ui.recent_conversations_and_tasks");
     $("#sessionGrid").innerHTML = visible.map((session) => sessionCard(session)).join("");
     $("#sessionGrid").classList.toggle("hidden", visible.length === 0);
     $("#loadMoreBtn").classList.toggle("hidden", regular.length <= state.visibleLimit);
     $("#loadMoreBtn").textContent = window.LoadToAgentI18n.t("common.remaining", { count: regular.length - state.visibleLimit });
-    $("#emptyState").classList.toggle("hidden", graphLiveCount + regular.length !== 0);
+    $("#emptyState").classList.toggle("hidden", attentionView || graphLiveCount + regular.length !== 0);
+    const hasConditions = Boolean(state.search || state.providerFilters.size || state.workspace !== "all" || state.sort !== "recent");
+    $("#emptyClearFiltersBtn").classList.toggle("hidden", resultCount !== 0 || !hasConditions);
     if (graphLiveCount + regular.length === 0) {
       const emptyCopy = state.search
         ? [window.LoadToAgentI18n.t("ui.no_search_results"), window.LoadToAgentI18n.t("ui.clear_the_search_or_change_the_ai_and_workspace_filters")]
@@ -221,17 +259,36 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
     if (motionKind === "view") animateVisibleSections();
   }
 
+  function renderSessions(motionKind = "refresh", deferMotion = false) {
+    const restoreScroll = window.LoadToAgentRendererUtils.preserveScrollPositions([".main-stage", ".sidebar"]);
+    context.rememberDisclosureStates?.(document);
+    try {
+      return renderSessionsContent(motionKind, deferMotion);
+    } finally {
+      context.restoreDisclosureStates?.(document);
+      restoreScroll();
+    }
+  }
+
   function render(motionKind = "refresh") {
-    const previousLayout = captureMotionLayout();
-    renderProviderRail();
-    renderWorkspaces();
-    renderGlobalStats();
-    renderProviderOverview();
-    renderProviderFilter();
-    renderSessions(motionKind, true);
-    if (state.selectedId && $("#detailDrawer").classList.contains("open")) context.renderDrawer();
-    playMotionLayout(previousLayout, motionKind);
-    if (motionKind === "view") animateVisibleSections();
+    const restoreScroll = window.LoadToAgentRendererUtils.preserveScrollPositions([".main-stage", ".sidebar"]);
+    context.rememberDisclosureStates?.(document);
+    try {
+      const previousLayout = captureMotionLayout();
+      renderProviderRail();
+      renderWorkspaces();
+      renderGlobalStats();
+      renderProviderOverview();
+      renderProviderFilter();
+      renderProviderVisibilitySettings();
+      renderSessions(motionKind, true);
+      if (state.selectedId && $("#detailDrawer").classList.contains("open")) context.renderDrawer();
+      playMotionLayout(previousLayout, motionKind);
+      if (motionKind === "view") animateVisibleSections();
+    } finally {
+      context.restoreDisclosureStates?.(document);
+      restoreScroll();
+    }
   }
 
   return {

package/renderer/app-tmux-render.js

@@ -3,7 +3,23 @@
 window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createTmuxRenderer = function createTmuxRenderer(context = {}) {
-  const { $, esc, state, compact, providerInfo, providerStyle } = context;
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
+  const {
+    $,
+    esc,
+    state,
+    compact,
+    providerInfo,
+    providerStyle,
+    agentRoleLabel,
+    subagentWorkState,
+    subagentWorkLabel,
+    latestWorkCopy,
+    readablePreview,
+    timeAgo,
+    visibleTmux = () => state.snapshot && state.snapshot.tmux,
+    visibleSessions = () => ((state.snapshot && state.snapshot.sessions) || []),
+  } = context;
 
   function tmuxEntities(tmux) {
     const distros = new Map();
@@ -55,11 +71,70 @@ window.LoadToAgentAppFactories.createTmuxRenderer = function createTmuxRenderer(
           { type: "distro", id: found.distro.id, label: found.distro.name },
           { type: "session", id: found.session.id, label: found.session.name },
           { type: "window", id: found.window.id, label: `${found.window.index}:${found.window.name}` },
-          { type: "pane", id: found.item.id, label: `pane ${found.item.index}` },
+          { type: "pane", id: found.item.id, label: t('tmux.pane_label', { index: found.item.index }) },
         ]
       : [];
   }
 
+  function linkedTmuxSubagents(agent) {
+    if (!agent || !agent.linkedSessionId) return [];
+    const sessions = visibleSessions();
+    const byId = new Map(sessions.map((session) => [session.id, session]));
+    const root = byId.get(agent.linkedSessionId);
+    const queue = (root && root.childIds || agent.childIds || []).map((id) => ({ id, depth: 1 }));
+    const seen = new Set(root ? [root.id] : []);
+    const children = [];
+    for (let cursor = 0; cursor < queue.length; cursor += 1) {
+      const item = queue[cursor];
+      if (!item.id || seen.has(item.id)) continue;
+      seen.add(item.id);
+      const child = byId.get(item.id);
+      if (!child) continue;
+      children.push({ session: child, depth: item.depth });
+      for (const childId of child.childIds || []) queue.push({ id: childId, depth: item.depth + 1 });
+    }
+    return children;
+  }
+
+  function tmuxSubagentPanel(pane, agent) {
+    const children = linkedTmuxSubagents(agent);
+    if (!children.length) return "";
+    const expanded = state.expandedTmuxSubagents.has(pane.id);
+    const listId = `tmux-subagents-list-${encodeURIComponent(pane.id)}`;
+    const working = children.filter(({ session }) => subagentWorkState(session) === "working").length;
+    const attention = children.filter(({ session }) => subagentWorkState(session) === "attention").length;
+    const statusSummary = [
+      working ? t('tmux.subagents.working_count', { count: working }) : "",
+      attention ? t('tmux.subagents.attention_count', { count: attention }) : "",
+    ].filter(Boolean).join(" · ") || t('tmux.subagents.all_idle');
+    const rows = children
+      .map(({ session, depth }) => {
+        const provider = providerInfo(session.provider);
+        const role = session.agentName || agentRoleLabel(session.agentRole);
+        const assigned = session.delegation && session.delegation.assignment || session.taskName || session.title || t('tmux.subagents.checking_assignment');
+        const work = readablePreview(latestWorkCopy(session) || window.LoadToAgentI18n.observedText(session.statusDetail) || t('tmux.subagents.checking_status'), 96);
+        const workState = subagentWorkState(session);
+        return `<article class="tmux-subagent-row work-${workState}" data-tmux-subagent-id="${esc(session.id)}"
+          style="${providerStyle(session.provider)};--tmux-subagent-depth:${Math.min(2, Math.max(0, depth - 1))}">
+          <span class="provider-mark" aria-hidden="true">${esc(provider.mark)}</span>
+          <span class="tmux-subagent-copy">
+            <span><b>${esc(role)}</b><i>${esc(subagentWorkLabel(session))}</i><small>${esc(timeAgo(session.updatedAt))}</small></span>
+            <strong>${esc(assigned)}</strong>
+            <em title="${esc(work.full)}">${esc(work.text)}</em>
+          </span>
+          <button type="button" data-open-subagent-chat="${esc(session.id)}" aria-label="${esc(t('tmux.subagents.view_conversation_aria', { role, assignment: assigned }))}">${t('tmux.subagents.view_conversation')}</button>
+        </article>`;
+      })
+      .join("");
+    return `<section class="tmux-subagents ${expanded ? "expanded" : ""}" data-tmux-subagents="${esc(pane.id)}">
+      <button type="button" class="tmux-subagents-toggle" data-tmux-subagents-toggle="${esc(pane.id)}" aria-expanded="${expanded}" aria-controls="${esc(listId)}">
+        <span><b>${t('tmux.subagents.connected_count', { count: children.length })}</b><small>${statusSummary} · ${t('tmux.subagents.main_session_basis')}</small></span>
+        <i aria-hidden="true">↓</i>
+      </button>
+      <div id="${esc(listId)}" class="tmux-subagent-list ${expanded ? "" : "hidden"}">${rows}</div>
+    </section>`;
+  }
+
   function tmuxPaneCard(pane) {
     const agent = pane.agent;
     const provider = agent && providerInfo(agent.provider);
@@ -68,26 +143,26 @@ window.LoadToAgentAppFactories.createTmuxRenderer = function createTmuxRenderer(
     const percent = Math.max(0, Math.min(100, Number(context.percent || 0)));
     return `<article class="tmux-pane-node ${pane.active ? "active" : ""} ${pane.dead ? "dead" : ""} ${agent ? "has-agent" : ""}"
       ${agent ? `style="${providerStyle(agent.provider)}"` : ""}>
-      <button type="button" class="tmux-pane-main" data-tmux-type="pane" data-tmux-id="${esc(pane.id)}">
+      <button type="button" class="tmux-pane-main" data-tmux-type="pane" data-tmux-id="${esc(pane.id)}" aria-pressed="${state.tmuxFocus?.type === "pane" && state.tmuxFocus?.id === pane.id ? "true" : "false"}">
         <span class="tmux-pane-head">
-          <b>나눠진 칸 ${pane.index + 1}</b><span>프로그램 ${pane.pid || "--"}</span>
-          <i>${pane.dead ? "끝남" : pane.active ? "사용 중" : "뒤에서 실행"}</i>
+          <b>${t('tmux.split_pane_number', { number: pane.index + 1 })}</b><span>${t('tmux.process_number', { pid: pane.pid || "--" })}</span>
+          <i>${pane.dead ? t('tmux.state.ended') : pane.active ? t('tmux.state.active') : t('tmux.state.background')}</i>
         </span>
         <strong class="tmux-pane-command">${esc(pane.command || "shell")}</strong>
-        <span class="tmux-pane-cwd" title="${esc(pane.cwd)}">${esc(pane.cwd || "경로 미보고")}</span>
+        <span class="tmux-pane-cwd" title="${esc(pane.cwd)}">${esc(pane.cwd || t('terminal.path_unreported'))}</span>
         ${
           agent
             ? `<span class="tmux-agent-block">
           <span class="provider-mark">${esc(provider.mark)}</span>
           <span>
-          <small>${esc(provider.label)} · 실행 번호 ${agent.pid}</small>
+          <small>${esc(provider.label)} · ${t('tmux.process_number', { pid: agent.pid })}</small>
           <strong>${esc(agent.title)}</strong>
-          <em>${esc(agent.statusDetail)}</em>
+          <em>${esc(window.LoadToAgentI18n.observedText(agent.statusDetail))}</em>
           </span>
           </span>
           <span class="tmux-agent-metrics">
             <span>
-            <small>기억 사용</small>
+            <small>${t('tmux.context_usage')}</small>
             <b>${context.window ? `${percent.toFixed(1)}%` : "--"}</b>
             </span>
             <span>
@@ -95,19 +170,20 @@ window.LoadToAgentAppFactories.createTmuxRenderer = function createTmuxRenderer(
             <b>${compact(usage.total)}</b>
             </span>
             <span>
-            <small>도움 AI</small>
+            <small>${t('tmux.helper_ai')}</small>
             <b>${(agent.childIds || []).length}</b>
             </span>
             </span>
           <span class="tmux-context-track"><i style="width:${percent}%"></i></span>`
-            : '<span class="tmux-shell-note">AI가 아닌 일반 명령창입니다.</span>'
+            : `<span class="tmux-shell-note">${t('tmux.regular_terminal_note')}</span>`
         }
       </button>
+      ${tmuxSubagentPanel(pane, agent)}
       <footer>
-        <span>${agent ? (agent.linkedSessionId ? "대화 기록과 연결됨" : "AI가 실행 중인 것을 확인함") : pane.title || "명령창"}</span>
+        <span>${agent ? (agent.linkedSessionId ? t('tmux.linked_to_history') : t('tmux.ai_detected')) : pane.title || t('terminal.type.terminal')}</span>
         <span class="tmux-pane-actions">
-        <button type="button" data-control-tmux="${esc(pane.id)}">이 칸 조작하기 ↓</button>
-        ${agent && agent.linkedSessionId ? `<button type="button" data-open-session="${esc(agent.linkedSessionId)}">대화 내용 보기 ↗</button>` : ""}
+        <button type="button" data-control-tmux="${esc(pane.id)}">${t('tmux.control_pane')}</button>
+        ${agent && agent.linkedSessionId ? `<button type="button" data-open-session="${esc(agent.linkedSessionId)}">${t('tmux.view_conversation')}</button>` : ""}
         </span>
         </footer>
     </article>`;
@@ -115,10 +191,10 @@ window.LoadToAgentAppFactories.createTmuxRenderer = function createTmuxRenderer(
 
   function tmuxWindowTree(window) {
     return `<div class="tmux-window-tree">
-      <button type="button" class="tmux-window-node ${window.active ? "active" : ""}" data-tmux-type="window" data-tmux-id="${esc(window.id)}">
-      <small>열린 창</small>
+      <button type="button" class="tmux-window-node ${window.active ? "active" : ""}" data-tmux-type="window" data-tmux-id="${esc(window.id)}" aria-pressed="${state.tmuxFocus?.type === "window" && state.tmuxFocus?.id === window.id ? "true" : "false"}">
+      <small>${t('tmux.open_window')}</small>
       <strong>${window.index + 1}. ${esc(window.name)}</strong>
-      <span>${window.panes.length}개 칸으로 나눔</span>
+      <span>${t('tmux.split_count', { count: window.panes.length })}</span>
       </button>
       <div class="tmux-link-line" aria-hidden="true">
       <i>
@@ -130,10 +206,10 @@ window.LoadToAgentAppFactories.createTmuxRenderer = function createTmuxRenderer(
 
   function tmuxSessionTree(tmuxSession) {
     return `<div class="tmux-session-tree">
-      <button type="button" class="tmux-session-node ${tmuxSession.attached ? "attached" : ""}" data-tmux-type="session" data-tmux-id="${esc(tmuxSession.id)}">
-      <small>작업 묶음</small>
+      <button type="button" class="tmux-session-node ${tmuxSession.attached ? "attached" : ""}" data-tmux-type="session" data-tmux-id="${esc(tmuxSession.id)}" aria-pressed="${state.tmuxFocus?.type === "session" && state.tmuxFocus?.id === tmuxSession.id ? "true" : "false"}">
+      <small>${t('tmux.workspace')}</small>
       <strong>${esc(tmuxSession.name)}</strong>
-      <span>${tmuxSession.attached ? "화면에 연결됨" : "뒤에서 실행 중"} · 열린 창 ${tmuxSession.windows.length}개</span>
+      <span>${tmuxSession.attached ? t('terminal.tmux.attached') : t('terminal.tmux.running_background')} · ${t('tmux.open_window_count', { count: tmuxSession.windows.length })}</span>
       </button>
       <div class="tmux-link-line session-link" aria-hidden="true">
       <i>
@@ -179,15 +255,16 @@ window.LoadToAgentAppFactories.createTmuxRenderer = function createTmuxRenderer(
   }
 
   function renderTmuxMap() {
-    const tmux = (state.snapshot && state.snapshot.tmux) || { available: false, status: "확인 중", distros: [], summary: {} };
+    const tmux = visibleTmux() || { available: false, status: t('tmux.status.checking'), distros: [], summary: {} };
     const summary = tmux.summary || {};
+    const environmentLabel = state.platform?.nativeTmux ? (state.platform.label || t('tmux.local_environment')) : t('tmux.stats.linux_environments');
     $("#tmuxStats").innerHTML = [
-      ["Linux 환경", summary.distros || 0, window.LoadToAgentI18n.t("ui.items")],
-      ["작업 묶음", summary.sessions || 0, window.LoadToAgentI18n.t("ui.items")],
-      ["열린 창", summary.windows || 0, window.LoadToAgentI18n.t("ui.items")],
-      ["나눠진 칸", summary.panes || 0, window.LoadToAgentI18n.t("ui.items")],
-      ["AI가 일하는 칸", summary.aiPanes || 0, window.LoadToAgentI18n.t("ui.items")],
-      ["대화 기록 연결", summary.linked || 0, window.LoadToAgentI18n.t("ui.items")],
+      [t('tmux.stats.environments'), summary.distros || 0, t('ui.items')],
+      [t('tmux.workspace'), summary.sessions || 0, t('ui.items')],
+      [t('tmux.open_window'), summary.windows || 0, t('ui.items')],
+      [t('tmux.stats.split_panes'), summary.panes || 0, t('ui.items')],
+      [t('tmux.stats.ai_panes'), summary.aiPanes || 0, t('ui.items')],
+      [t('tmux.stats.linked_history'), summary.linked || 0, t('ui.items')],
     ]
       .map(
         ([label, value, unit], index) => `<div class="${index >= 4 ? "accent" : ""}">
@@ -200,40 +277,41 @@ window.LoadToAgentAppFactories.createTmuxRenderer = function createTmuxRenderer(
     const index = tmuxEntities(tmux);
     const path = tmuxFocusPath(index);
     $("#tmuxBreadcrumbs").innerHTML = path.length
-      ? `<button type="button" data-tmux-reset>전체 목록</button>${path
+      ? `<button type="button" data-tmux-reset tabindex="-1">${t('tmux.full_list')}</button>${path
           .map(
-            (item) => `<i>›</i>
+            (item) => `<i aria-hidden="true">›</i>
       <button type="button"
         class="${item.type === state.tmuxFocus.type && item.id === state.tmuxFocus.id ? "current" : ""}"
+        ${item.type === state.tmuxFocus.type && item.id === state.tmuxFocus.id ? 'aria-current="location" tabindex="0"' : 'tabindex="-1"'}
         data-tmux-type="${item.type}" data-tmux-id="${esc(item.id)}">
         ${esc(item.label)}
       </button>`,
           )
           .join("")}`
       : `<span class="map-hint">
-      <b>${summary.sessions || 0}</b>개 작업 묶음 · <b>${summary.aiPanes || 0}</b>개 칸에서 AI가 일하는 중</span>`;
+      ${t('tmux.summary', { sessions: `<b>${summary.sessions || 0}</b>`, panes: `<b>${summary.aiPanes || 0}</b>` })}</span>`;
     $("#tmuxResetBtn").classList.toggle("hidden", !path.length);
     const distros = filteredTmuxDistros(tmux, index);
     if (!distros.length || !Number(summary.sessions || 0)) {
       $("#tmuxMap").innerHTML = `<div class="tmux-empty">
         <span>▦</span>
-        <h3>나눠서 실행 중인 명령창이 없습니다</h3>
-        <p>${esc(tmux.status || "Linux 명령창 상태를 확인하는 중입니다.")}</p>
-        <small>이 화면은 tmux를 사용하는 고급 작업이 있을 때 자동으로 채워집니다.</small>
+        <h3>${t('tmux.empty.title')}</h3>
+        <p>${esc(window.LoadToAgentI18n.observedText(tmux.status || t('tmux.empty.checking_linux')))}</p>
+        <small>${t('tmux.empty.description')}</small>
         </div>`;
       return;
     }
     $("#tmuxMap").innerHTML = distros
       .map(
         (distro) => `<section class="tmux-distro-group">
-      <button type="button" class="tmux-distro-node" data-tmux-type="distro" data-tmux-id="${esc(distro.id)}">
-      <span>Linux</span>
+      <button type="button" class="tmux-distro-node" data-tmux-type="distro" data-tmux-id="${esc(distro.id)}" aria-pressed="${state.tmuxFocus?.type === "distro" && state.tmuxFocus?.id === distro.id ? "true" : "false"}">
+      <span>${esc(environmentLabel)}</span>
       <div>
-      <small>실행 환경</small>
+      <small>${t('tmux.runtime_environment')}</small>
       <strong>${esc(distro.name)}</strong>
       <em>${esc(distro.tmuxVersion || "tmux")}</em>
       </div>
-      <b>작업 묶음 ${distro.sessions.length}개</b>
+      <b>${t('terminal.tmux.workspace_count', { count: distro.sessions.length })}</b>
       </button>
       <div class="tmux-distro-line" aria-hidden="true">
       </div>
@@ -241,7 +319,10 @@ window.LoadToAgentAppFactories.createTmuxRenderer = function createTmuxRenderer(
       </section>`,
       )
       .join("");
+    const mapNodes = Array.from($("#tmuxMap").querySelectorAll("[data-tmux-type][data-tmux-id]"));
+    const focusedNode = mapNodes.find((node) => node.dataset.tmuxType === state.tmuxFocus?.type && node.dataset.tmuxId === state.tmuxFocus?.id) || mapNodes[0];
+    mapNodes.forEach((node) => { node.tabIndex = node === focusedNode ? 0 : -1; });
   }
 
-  return { tmuxEntities, tmuxFocusPath, tmuxPaneCard, tmuxWindowTree, tmuxSessionTree, filteredTmuxDistros, renderTmuxMap };
+  return { tmuxEntities, tmuxFocusPath, linkedTmuxSubagents, tmuxPaneCard, tmuxWindowTree, tmuxSessionTree, filteredTmuxDistros, renderTmuxMap };
 };