loadtoagent 1.0.0 → 1.3.1

package/renderer/app-events-navigation.js

@@ -3,17 +3,39 @@
 window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createNavigationEventBindings = function createNavigationEventBindings(context = {}) {
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const {
     $, state, motionPreference, saveGuideState, selectView, renderUpdateSettings,
-    filteredSessions, renderSessions, openRunModal, openDrawer, toast,
+    filteredSessions, renderSessions, openRunModal, openDrawer, toast, performUiAction,
+    rememberDialogTrigger, restoreDialogTrigger, setDialogOpenState, trapDialogFocus,
   } = context;
 
   function bindNavigationAndUpdateEvents() {
+    const closeMobileTools = (restoreFocus = true) => {
+      const menu = $("#mobileToolsMenu");
+      setDialogOpenState(menu, false);
+      menu.classList.add("hidden");
+      $("#mobileMoreBtn").setAttribute("aria-expanded", "false");
+      if (restoreFocus) restoreDialogTrigger();
+    };
     $(".view-nav").addEventListener("click", (event) => {
       const button = event.target.closest(".nav-item");
       if (!button || !button.dataset.view) return;
       selectView(button.dataset.view);
     });
+    $(".view-nav").addEventListener("keydown", (event) => {
+      if (!["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
+      const buttons = Array.from(document.querySelectorAll(".view-nav .nav-item[data-view]"))
+        .filter((button) => !button.hidden && button.getClientRects().length > 0 && getComputedStyle(button).visibility !== "hidden");
+      const current = Math.max(0, buttons.indexOf(event.target.closest(".nav-item[data-view]")));
+      const next = event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? buttons.length - 1
+          : (current + (event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length;
+      event.preventDefault();
+      buttons[next]?.focus();
+    });
     $("#updateNoticeBtn").addEventListener("click", () => {
       selectView("settings");
     });
@@ -33,7 +55,7 @@ window.LoadToAgentAppFactories.createNavigationEventBindings = function createNa
       state.guideExpanded = false;
       saveGuideState();
       renderSessions("guide");
-      $("#guideBtn").focus();
+      $("#guideBtn").focus({ preventScroll: true });
     });
     $("#beginnerGuide").addEventListener("click", (event) => {
       const action = event.target.closest("[data-guide-action]")?.dataset.guideAction;
@@ -44,7 +66,7 @@ window.LoadToAgentAppFactories.createNavigationEventBindings = function createNa
         const first = filteredSessions()[0] || ((state.snapshot && state.snapshot.sessions) || [])[0];
         if (first) openDrawer(first.id);
         else {
-          toast("아직 열어볼 작업이 없어요. 먼저 AI에게 첫 일을 맡겨보세요.");
+          toast(t("guide.no_task_to_open"));
           openRunModal();
         }
       }
@@ -52,43 +74,68 @@ window.LoadToAgentAppFactories.createNavigationEventBindings = function createNa
     $("#mobileMoreBtn").addEventListener("click", () => {
       const menu = $("#mobileToolsMenu");
       const opening = menu.classList.contains("hidden");
-      menu.classList.toggle("hidden", !opening);
-      $("#mobileMoreBtn").setAttribute("aria-expanded", opening ? "true" : "false");
-      if (opening) setTimeout(() => menu.querySelector("button")?.focus(), 0);
+      if (!opening) return closeMobileTools(true);
+      $("#mobileMoreBtn").focus({ preventScroll: true });
+      rememberDialogTrigger();
+      menu.classList.remove("hidden");
+      setDialogOpenState(menu, true);
+      $("#mobileMoreBtn").setAttribute("aria-expanded", "true");
+      menu.querySelector("button")?.focus({ preventScroll: true });
+    });
+    $("#mobileToolsCloseBtn").addEventListener("click", () => closeMobileTools(true));
+    $("#mobileToolsMenu").addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeMobileTools(true);
+        return;
+      }
+      if (event.key === "Tab") {
+        trapDialogFocus(event);
+        return;
+      }
+      if (!["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
+      const buttons = Array.from(event.currentTarget.querySelectorAll("button:not([disabled])"));
+      const current = Math.max(0, buttons.indexOf(event.target.closest("button")));
+      const next = event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? buttons.length - 1
+          : (current + (event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length;
+      event.preventDefault();
+      buttons[next]?.focus();
     });
     $("#mobileToolsMenu").addEventListener("click", (event) => {
       const button = event.target.closest("[data-mobile-view]");
-      if (button) selectView(button.dataset.mobileView, { focusMain: true });
+      if (button) {
+        closeMobileTools(false);
+        selectView(button.dataset.mobileView, { focusMain: true });
+      }
+    });
+    document.addEventListener("pointerdown", (event) => {
+      const menu = $("#mobileToolsMenu");
+      if (menu.classList.contains("hidden") || menu.contains(event.target) || $("#mobileMoreBtn").contains(event.target)) return;
+      const focusWasInside = menu.contains(document.activeElement);
+      closeMobileTools(focusWasInside);
     });
     $("#checkUpdateBtn").addEventListener("click", async () => {
-      try {
-        state.update = { ...(state.update || {}), status: "checking", error: "" };
-        renderUpdateSettings();
-        state.update = await window.loadtoagent.checkForUpdate();
-        renderUpdateSettings();
-      } catch (error) {
-        toast((error && error.message) || window.LoadToAgentI18n.t("ui.could_not_check_for_updates"));
-      }
+      state.update = { ...(state.update || {}), status: "checking", error: "" };
+      renderUpdateSettings();
+      const update = await performUiAction(() => window.loadtoagent.checkForUpdate(), "ui.could_not_check_for_updates", $("#checkUpdateBtn"));
+      if (update) state.update = update;
+      else state.update = { ...(state.update || {}), status: "error" };
+      renderUpdateSettings();
     });
     $("#installUpdateBtn").addEventListener("click", async () => {
-      try {
-        if (state.update && state.update.status === "downloaded") {
-          await window.loadtoagent.openDownloadedUpdate();
-          toast("설치 파일을 열었습니다. 화면의 안내에 따라 업데이트를 마무리하세요.");
-        } else {
-          state.update = await window.loadtoagent.downloadUpdate();
-          renderUpdateSettings();
-        }
-      } catch (error) {
-        toast((error && error.message) || window.LoadToAgentI18n.t("ui.could_not_prepare_the_update_file"));
-      }
+      state.update = { ...(state.update || {}), status: "downloading", error: "" };
+      renderUpdateSettings();
+      const update = await performUiAction(() => window.loadtoagent.installDownloadedUpdate(), "ui.could_not_prepare_the_update_file", $("#installUpdateBtn"));
+      if (update) state.update = update;
+      else if (state.update && state.update.asset) state.update.status = "available";
+      renderUpdateSettings();
+      if (state.update && state.update.installMode === "manual") toast(t("ui.open_installer"));
     });
     $("#openReleaseBtn").addEventListener("click", async () => {
-      try {
-        await window.loadtoagent.openUpdateRelease();
-      } catch (error) {
-        toast((error && error.message) || window.LoadToAgentI18n.t("ui.could_not_open_the_github_release_page"));
-      }
+      await performUiAction(() => window.loadtoagent.openUpdateRelease(), "ui.could_not_open_the_github_release_page", $("#openReleaseBtn"));
     });
   }
 

package/renderer/app-events-sessions.js

@@ -5,10 +5,99 @@ window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 window.LoadToAgentAppFactories.createSessionEventBindings = function createSessionEventBindings(context = {}) {
   const {
     $, state, selectView, renderProviderOverview, renderProviderFilter, toggleProviderFilter, announceProviderFilter, renderSessions, renderTmuxMap, openDrawer, openSubagentConversation,
-    dispatchAgentCommand, openAgentTerminal, copyBridgeCommand, openSessionOrigin,
+    dispatchAgentCommand, openAgentTerminal, copyBridgeCommand, openSessionOrigin, saveDashboardPreferences = () => {},
+    controlManagedRun, quickRespond, prepareReassignment,
+    copyText = async () => false,
+    announce = () => {},
   } = context;
 
+  const managementFilterLabel = value => value === "all" ? window.LoadToAgentI18n.t("management.filter_all") : window.LoadToAgentI18n.t(`management.health.${value}`);
+  const announceManagementFilter = value => announce(window.LoadToAgentI18n.t("management.filter_results", {
+    filter: managementFilterLabel(value),
+    count: $("#attentionInbox")?.querySelectorAll("[data-management-session]").length || 0,
+  }));
+
+  function bindManagementEvents() {
+    $("#operationsOverview").addEventListener("click", (event) => {
+      const open = event.target.closest("[data-open-session]");
+      if (open) return openDrawer(open.dataset.openSession);
+      const filter = event.target.closest("[data-management-filter]");
+      if (!filter) return;
+      selectView("waiting", { focusMain: true, managementFilter: filter.dataset.managementFilter });
+      announceManagementFilter(filter.dataset.managementFilter);
+    });
+    $("#attentionInbox").addEventListener("click", async (event) => {
+      const filter = event.target.closest("[data-management-inbox-filter]");
+      if (filter) {
+        state.managementFilter = filter.dataset.managementInboxFilter;
+        renderSessions("filter");
+        announceManagementFilter(state.managementFilter);
+        requestAnimationFrame(() => $("#attentionInbox")?.querySelector(`[data-management-inbox-filter="${CSS.escape(state.managementFilter)}"]`)?.focus({ preventScroll: true }));
+        return;
+      }
+      const open = event.target.closest("[data-open-session]");
+      if (open) return openDrawer(open.dataset.openSession);
+      const quick = event.target.closest("[data-attention-quick]");
+      if (quick) return quickRespond(quick.dataset.attentionSessionId, quick.dataset.attentionQuick, $("#attentionInbox"));
+      const managed = event.target.closest("[data-managed-run-action]");
+      if (managed) return controlManagedRun(managed.dataset.managementSessionId, managed.dataset.managedRunAction);
+      const reassign = event.target.closest("[data-reassign-session]");
+      if (reassign) prepareReassignment(reassign.dataset.reassignSession);
+    });
+    $("#attentionInbox").addEventListener("input", (event) => {
+      const input = event.target.closest("[data-agent-command-draft]");
+      if (input) state.agentCommandDrafts.set(input.dataset.agentCommandDraft, input.value);
+    });
+    $("#attentionInbox").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; });
+    });
+    $("#attentionInbox").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();
+    });
+    $("#attentionInbox").addEventListener("submit", (event) => {
+      const form = event.target.closest("[data-agent-command-form]");
+      if (!form) return;
+      event.preventDefault();
+      dispatchAgentCommand(form.dataset.agentCommandForm, form);
+    });
+  }
+
   function bindSessionListEvents() {
+    $("#automationOverview").addEventListener("click", (event) => {
+      const loopSelect = event.target.closest("[data-loop-select]");
+      if (loopSelect) {
+        state.selectedRuntimeLoopId = loopSelect.dataset.loopSelect;
+        renderSessions("focus");
+        requestAnimationFrame(() => $("#automationOverview").querySelector(`[data-loop-select="${CSS.escape(state.selectedRuntimeLoopId)}"]`)?.focus({ preventScroll: true }));
+        return;
+      }
+      const sessionTarget = event.target.closest("[data-loop-open], [data-automation-session]");
+      if (sessionTarget) openDrawer(sessionTarget.dataset.loopOpen || sessionTarget.dataset.automationSession);
+    });
+    $("#automationOverview").addEventListener("keydown", (event) => {
+      const loop = event.target.closest("[data-loop-select]");
+      if (loop && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+        const tabs = Array.from(event.currentTarget.querySelectorAll("[data-loop-select]"));
+        const current = Math.max(0, tabs.indexOf(loop));
+        const next = event.key === "Home"
+          ? 0
+          : event.key === "End"
+            ? tabs.length - 1
+            : (current + (["ArrowRight", "ArrowDown"].includes(event.key) ? 1 : -1) + tabs.length) % tabs.length;
+        event.preventDefault();
+        state.selectedRuntimeLoopId = tabs[next].dataset.loopSelect;
+        renderSessions("focus");
+        requestAnimationFrame(() => $("#automationOverview")?.querySelector(`[data-loop-select="${CSS.escape(state.selectedRuntimeLoopId)}"]`)?.focus({ preventScroll: true }));
+        return;
+      }
+    });
     $("#providerOverview").addEventListener("click", (event) => {
       const card = event.target.closest("[data-provider-card]");
       if (!card) return;
@@ -18,7 +107,23 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
       renderProviderOverview();
       renderSessions("filter");
       announceProviderFilter();
-      requestAnimationFrame(() => $("#providerOverview").querySelector(`[data-provider-card="${CSS.escape(card.dataset.providerCard)}"]`)?.focus());
+      saveDashboardPreferences();
+      const next = $("#providerOverview").querySelector(`[data-provider-card="${CSS.escape(card.dataset.providerCard)}"]`);
+      next?.classList.add("filter-clicked");
+      next?.focus();
+    });
+    $("#providerOverview").addEventListener("keydown", (event) => {
+      if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
+      const cards = Array.from(event.currentTarget.querySelectorAll("[data-provider-card]"));
+      if (!cards.length) return;
+      const current = Math.max(0, cards.indexOf(event.target.closest("[data-provider-card]")));
+      const next = event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? cards.length - 1
+          : (current + (["ArrowRight", "ArrowDown"].includes(event.key) ? 1 : -1) + cards.length) % cards.length;
+      event.preventDefault();
+      cards[next].focus();
     });
     $("#sessionGrid").addEventListener("click", (event) => {
       const card = event.target.closest("[data-session-id]");
@@ -34,7 +139,23 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
   }
 
   function bindLiveAgentEvents() {
-    $("#liveSessionGrid").addEventListener("click", (event) => {
+    $("#liveSessionGrid").addEventListener("click", async (event) => {
+      const copy = event.target.closest("[data-copy-text]");
+      if (copy) {
+        event.stopPropagation();
+        await copyText(copy.dataset.copyText);
+        return;
+      }
+      const executionHistory = event.target.closest("[data-execution-history-toggle]");
+      if (executionHistory) {
+        event.stopPropagation();
+        const ownerId = executionHistory.dataset.executionHistoryToggle;
+        if (state.expandedExecutionSessions.has(ownerId)) state.expandedExecutionSessions.delete(ownerId);
+        else state.expandedExecutionSessions.add(ownerId);
+        renderSessions("expand");
+        requestAnimationFrame(() => $("#liveSessionGrid")?.querySelector(`[data-execution-history-toggle="${CSS.escape(ownerId)}"]`)?.focus({ preventScroll: true }));
+        return;
+      }
       const tmuxPane = event.target.closest('.live-tmux-pane[data-tmux-type="pane"][data-tmux-id]');
       const tmuxOverview = event.target.closest(".live-tmux-overview-open");
       if (tmuxPane || tmuxOverview) {
@@ -133,6 +254,7 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
   }
 
   function bindGraphNavigationEvents() {
+    $("#openTmuxFromAgentWork").addEventListener("click", () => selectView("tmux", { focusMain: true }));
     $("#graphBreadcrumbs").addEventListener("click", (event) => {
       if (event.target.closest("[data-graph-reset]")) state.graphFocusId = null;
       else {
@@ -150,6 +272,22 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
 
   function bindTmuxMapEvents() {
     $("#tmuxMap").addEventListener("click", (event) => {
+      const subagentToggle = event.target.closest("[data-tmux-subagents-toggle]");
+      if (subagentToggle) {
+        event.stopPropagation();
+        const paneId = subagentToggle.dataset.tmuxSubagentsToggle;
+        if (state.expandedTmuxSubagents.has(paneId)) state.expandedTmuxSubagents.delete(paneId);
+        else state.expandedTmuxSubagents.add(paneId);
+        renderTmuxMap();
+        requestAnimationFrame(() => $("#tmuxMap").querySelector(`[data-tmux-subagents-toggle="${CSS.escape(paneId)}"]`)?.focus({ preventScroll: true }));
+        return;
+      }
+      const subagentChat = event.target.closest("[data-open-subagent-chat]");
+      if (subagentChat) {
+        event.stopPropagation();
+        openSubagentConversation(subagentChat.dataset.openSubagentChat);
+        return;
+      }
       const control = event.target.closest("[data-control-tmux]");
       if (control) {
         event.stopPropagation();
@@ -165,10 +303,25 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
       }
       const node = event.target.closest("[data-tmux-type][data-tmux-id]");
       if (!node) return;
-      state.tmuxFocus = { type: node.dataset.tmuxType, id: node.dataset.tmuxId };
+      const nextFocus = { type: node.dataset.tmuxType, id: node.dataset.tmuxId };
+      state.tmuxFocus = nextFocus;
       renderTmuxMap();
+      requestAnimationFrame(() => $("#tmuxMap")?.querySelector(`[data-tmux-type="${CSS.escape(nextFocus.type)}"][data-tmux-id="${CSS.escape(nextFocus.id)}"]`)?.focus({ preventScroll: true }));
       if (node.dataset.tmuxType === "pane") window.LoadToAgentTerminal?.selectTmuxById(node.dataset.tmuxId);
     });
+    $("#tmuxMap").addEventListener("keydown", (event) => {
+      if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) return;
+      const nodes = Array.from(event.currentTarget.querySelectorAll("[data-tmux-type][data-tmux-id]"));
+      const current = Math.max(0, nodes.indexOf(event.target.closest("[data-tmux-type][data-tmux-id]")));
+      const next = event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? nodes.length - 1
+          : (current + (["ArrowRight", "ArrowDown"].includes(event.key) ? 1 : -1) + nodes.length) % nodes.length;
+      event.preventDefault();
+      nodes.forEach((candidate, index) => { candidate.tabIndex = index === next ? 0 : -1; });
+      nodes[next]?.focus();
+    });
     $("#tmuxBreadcrumbs").addEventListener("click", (event) => {
       if (event.target.closest("[data-tmux-reset]")) state.tmuxFocus = null;
       else {
@@ -178,6 +331,19 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
       }
       renderTmuxMap();
     });
+    $("#tmuxBreadcrumbs").addEventListener("keydown", (event) => {
+      if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+      const items = Array.from(event.currentTarget.querySelectorAll("button"));
+      const current = Math.max(0, items.indexOf(event.target.closest("button")));
+      const next = event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? items.length - 1
+          : (current + (event.key === "ArrowRight" ? 1 : -1) + items.length) % items.length;
+      event.preventDefault();
+      items.forEach((candidate, index) => { candidate.tabIndex = index === next ? 0 : -1; });
+      items[next]?.focus();
+    });
     $("#tmuxResetBtn").addEventListener("click", () => {
       state.tmuxFocus = null;
       renderTmuxMap();
@@ -185,6 +351,7 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
   }
 
   function bindSessionAndAgentEvents() {
+    bindManagementEvents();
     bindSessionListEvents();
     bindLiveAgentEvents();
     bindGraphNavigationEvents();

package/renderer/app-events.js

@@ -3,13 +3,14 @@
 window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createEventBindings = function createEventBindings(context = {}) {
-  const { bindNavigationAndUpdateEvents, bindSessionAndAgentEvents, bindFilterAndWorkspaceEvents, bindDialogAndGlobalEvents } = context;
+  const { bindNavigationAndUpdateEvents, bindSessionAndAgentEvents, bindFilterAndWorkspaceEvents, bindDialogAndGlobalEvents, bindQualityEvents = () => {} } = context;
 
   function bindEvents() {
     bindNavigationAndUpdateEvents();
     bindSessionAndAgentEvents();
     bindFilterAndWorkspaceEvents();
     bindDialogAndGlobalEvents();
+    bindQualityEvents();
   }
 
   return { bindEvents };

package/renderer/app-graph-model.js

@@ -3,6 +3,7 @@
 window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(context = {}) {
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const {
     $,
     esc,
@@ -78,10 +79,10 @@ window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(cont
     if (tmux)
       return {
         kind: "tmux",
-        label: "TMUX 사용",
-        detail: [tmux.distro, tmux.sessionName, tmux.paneNativeId || tmux.paneId].filter(Boolean).join(" · ") || "분할 터미널에서 실행",
+        label: t("graph.tmux_used"),
+        detail: [tmux.distro, tmux.sessionName, tmux.paneNativeId || tmux.paneId].filter(Boolean).join(" · ") || t("graph.running_in_split_terminal"),
       };
-    return { kind: "standard", label: "일반 실행", detail: "TMUX 미사용" };
+    return { kind: "standard", label: t("graph.standard_run"), detail: t("graph.tmux_not_used") };
   }
 
   function executionModeBadge(session, compact = false) {
@@ -103,5 +104,32 @@ window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(cont
     return seen.size;
   }
 
-  return { graphPath, connectedGraphSessions, sortGraphNodes, graphChildren, agentExecutionMode, executionModeBadge, graphDescendantCount };
+  function runtimeAgentSummary(model, tmuxEntries = []) {
+    const liveNodes = model.nodes.filter(isLiveSession);
+    const liveById = new Map(liveNodes.map((session) => [session.id, session]));
+    const tmuxSessionIds = new Set(
+      tmuxEntries
+        .filter((entry) => entry && entry.pane && !entry.pane.dead)
+        .map((entry) => String(entry.agent && entry.agent.linkedSessionId || ""))
+        .filter((id) => id && liveById.has(id)),
+    );
+    for (const session of liveNodes) {
+      if (agentExecutionMode(session).kind === "tmux") tmuxSessionIds.add(session.id);
+    }
+    const tmuxCount = liveNodes.filter((session) => tmuxSessionIds.has(session.id)).length;
+    const runningExecutions = liveNodes.flatMap((session) => (session.executions || []).filter((activity) => activity.status === "running"));
+    return {
+      activeCount: liveNodes.length,
+      standardCount: liveNodes.length - tmuxCount,
+      tmuxCount,
+      rootCount: liveNodes.filter((session) => !session.parentId).length,
+      activeHelperCount: liveNodes.filter((session) => session.parentId).length,
+      helperRecordCount: model.nodes.filter((session) => session.parentId).length,
+      runningExecutionCount: runningExecutions.length,
+      shellExecutionCount: runningExecutions.filter((activity) => activity.kind === "shell").length,
+      backgroundExecutionCount: runningExecutions.filter((activity) => activity.mode === "background" || activity.kind === "background").length,
+    };
+  }
+
+  return { graphPath, connectedGraphSessions, sortGraphNodes, graphChildren, agentExecutionMode, executionModeBadge, graphDescendantCount, runtimeAgentSummary };
 };

package/renderer/app-graph-orchestration.js

@@ -13,12 +13,13 @@ window.LoadToAgentAppFactories.createGraphOrchestration = function createGraphOr
     graphPath,
     connectedGraphSessions,
     sortGraphNodes,
-    agentExecutionMode,
+    runtimeAgentSummary,
     liveTmuxEntries,
     runtimeSeparatedOverview,
     focusedGraph,
     scheduleAgentWorkflowConnections,
   } = context;
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
 
   function renderAgentMap(sessions, motionKind = "refresh") {
     const model = connectedGraphSessions(sessions);
@@ -36,7 +37,7 @@ window.LoadToAgentAppFactories.createGraphOrchestration = function createGraphOr
     if (focus) {
       $("#liveSessionGrid").innerHTML = focusedGraph(focus, model, motionKind);
       const path = graphPath(focus, model.byId);
-      $("#graphBreadcrumbs").innerHTML = `<button type="button" data-graph-reset>작업 목록</button>${path
+      $("#graphBreadcrumbs").innerHTML = `<button type="button" data-graph-reset>${esc(t("graph.task_list"))}</button>${path
         .map((item) => {
           const label = item.parentId ? item.agentName || agentRoleLabel(item.agentRole) : item.title;
           const preview = readablePreview(label, item.parentId ? 42 : 72);
@@ -49,27 +50,29 @@ window.LoadToAgentAppFactories.createGraphOrchestration = function createGraphOr
       $("#graphResetBtn").classList.remove("hidden");
       scheduleAgentWorkflowConnections();
     } else {
-      const tmuxEntries = liveTmuxEntries();
-      const standardRoots = roots.filter((root) => agentExecutionMode(root).kind !== "tmux");
-      const activeCount = model.nodes.filter(isLiveSession).length + tmuxEntries.filter((entry) => !entry.agent.linkedSessionId).length;
-      $("#liveSessionGrid").innerHTML = `<details class="runtime-disclosure" open>
+      const runtime = runtimeAgentSummary(model, liveTmuxEntries(state.snapshot && state.snapshot.tmux));
+      $("#liveSessionGrid").innerHTML = `<details class="runtime-disclosure" data-disclosure-key="home:runtime-overview" open>
         <summary>
         <span>
-        <b>${activeCount}개 AI가 작업 중입니다</b>
-        <small>일반 실행과 tmux의 세부 흐름은 필요할 때 펼쳐보세요.</small>
+        <b>${esc(t("graph.ai_working_count", { count: runtime.activeCount }))}</b>
+        <small>${esc(t("graph.runtime_count_explanation", { standard: runtime.standardCount, tmux: runtime.tmuxCount, helpers: runtime.activeHelperCount }))}${runtime.runningExecutionCount ? ` · ${esc(t("graph.runtime_execution_count", { shell: runtime.shellExecutionCount, background: runtime.backgroundExecutionCount }))}` : ""}</small>
         </span>
-        <em>상세 흐름 보기 <i aria-hidden="true">↓</i>
+        <em>${esc(t("graph.view_detailed_flow"))} <i aria-hidden="true">↓</i>
         </em>
         </summary>${runtimeSeparatedOverview(roots, model)}</details>`;
       $("#graphBreadcrumbs").innerHTML =
         `<span class="map-hint">
-          일반 실행 <b>${standardRoots.length}</b>개 ·
-          TMUX AI <b>${tmuxEntries.length}</b>개 ·
-          <b>${model.nodes.filter((item) => item.parentId).length}</b>개 도움 AI
+          ${esc(t("graph.standard_ai"))} <b>${runtime.standardCount}</b> ·
+          ${esc(t("graph.tmux_ai"))} <b>${runtime.tmuxCount}</b> ·
+          ${esc(t("graph.active_helper_ai"))} <b>${runtime.activeHelperCount}</b> ·
+          ${esc(t("graph.helper_ai_history"))} <b>${runtime.helperRecordCount}</b> ·
+          ${esc(t("graph.running_shell"))} <b>${runtime.shellExecutionCount}</b> ·
+          ${esc(t("graph.running_background"))} <b>${runtime.backgroundExecutionCount}</b>
         </span>`;
       $("#graphResetBtn").classList.add("hidden");
+      return runtime.activeCount;
     }
-    return model.nodes.filter(isLiveSession).length + liveTmuxEntries().filter((entry) => !entry.agent.linkedSessionId).length;
+    return model.nodes.filter(isLiveSession).length;
   }
 
   return { renderAgentMap };