loadtoagent 1.1.0 → 1.3.2

package/renderer/app-dashboard.js

@@ -3,6 +3,7 @@
 window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createDashboard = function createDashboard(context = {}) {
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const {
     $,
     esc,
@@ -11,10 +12,20 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
     state,
     compact,
     providerStyle,
+    visibleProviders = () => state.providers,
+    visibleSessions = () => ((state.snapshot && state.snapshot.sessions) || []),
+    isProviderVisible = () => true,
+    isRuntimeLoopSession = () => false,
   } = context;
 
+  function displaySessions() {
+    return visibleSessions().filter((session) => (
+      typeof context.isRecentSession !== "function" || context.isRecentSession(session)
+    ));
+  }
+
   function renderProviderRail() {
-    $("#providerRail").innerHTML = state.providers
+    $("#providerRail").innerHTML = visibleProviders()
       .map((provider) => {
         const available = !!state.availability[provider.id];
         return `<div class="provider-rail-item ${available ? "connected" : ""}" style="${providerStyle(provider.id)}">
@@ -27,34 +38,95 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
   }
 
   function isProjectlessSession(session) {
-    if (!session || !session.cwd) return true;
+    const cwd = session && (session.originCwd || session.cwd);
+    if (!cwd) return true;
     if (typeof session.projectless === "boolean") return session.projectless;
-    const normalized = String(session.cwd).replace(/\\/g, "/").replace(/\/+$/, "");
+    const normalized = String(cwd).replace(/\\/g, "/").replace(/\/+$/, "");
     return session.provider === "codex" && session.clientKind === "codex-desktop" && /(?:^|\/)Documents\/Codex\/\d{4}-\d{2}-\d{2}\/new-chat$/i.test(normalized);
   }
 
+  function sessionOriginPath(session) {
+    return String(session && (session.originCwd || session.cwd) || "").trim();
+  }
+
+  function normalizedProjectPath(value) {
+    return String(value || "").trim().replace(/\\/g, "/").replace(/\/+$/, "").toLocaleLowerCase();
+  }
+
+  function projectContainsPath(projectPath, candidatePath) {
+    const project = normalizedProjectPath(projectPath);
+    const candidate = normalizedProjectPath(candidatePath);
+    return Boolean(project && candidate && (candidate === project || candidate.startsWith(`${project}/`)));
+  }
+
+  function projectName(projectPath) {
+    const normalized = String(projectPath || "").replace(/\\/g, "/").replace(/\/+$/, "");
+    return normalized.split("/").filter(Boolean).pop() || t("workspace.unknown");
+  }
+
+  function observedProjects() {
+    const projects = new Map();
+    const saved = state.workspaces.map((item) => ({ ...item, key: normalizedProjectPath(item.path) }));
+    saved.forEach((item) => projects.set(item.key, { path: item.path, name: item.name || projectName(item.path), saved: true, count: 0 }));
+    displaySessions().filter((session) => !session.parentId && !isProjectlessSession(session)).forEach((session) => {
+      const originPath = sessionOriginPath(session);
+      if (!originPath) return;
+      const owner = saved
+        .filter((item) => projectContainsPath(item.path, originPath))
+        .sort((a, b) => b.key.length - a.key.length)[0];
+      const path = owner ? owner.path : originPath;
+      const key = normalizedProjectPath(path);
+      const project = projects.get(key) || { path, name: projectName(path), saved: false, count: 0 };
+      project.count += 1;
+      project.lastActivityAt = !project.lastActivityAt || Date.parse(session.updatedAt || 0) > Date.parse(project.lastActivityAt || 0)
+        ? session.updatedAt
+        : project.lastActivityAt;
+      projects.set(key, project);
+    });
+    const items = [...projects.values()];
+    const duplicateNames = new Map();
+    items.forEach((item) => duplicateNames.set(item.name.toLocaleLowerCase(), (duplicateNames.get(item.name.toLocaleLowerCase()) || 0) + 1));
+    items.forEach((item) => {
+      if (duplicateNames.get(item.name.toLocaleLowerCase()) < 2) return;
+      const parts = String(item.path).replace(/\\/g, "/").replace(/\/+$/, "").split("/").filter(Boolean);
+      item.name = parts.slice(-2).join("/") || item.name;
+    });
+    return items.sort((a, b) => Number(b.count || 0) - Number(a.count || 0)
+      || Number(b.saved) - Number(a.saved)
+      || String(a.name).localeCompare(String(b.name), uiLocale()));
+  }
+
   function sessionWorkspaceLabel(session) {
-    return isProjectlessSession(session) ? window.LoadToAgentI18n.t("ui.no_project") : (session && session.workspace) || "작업 폴더 미상";
+    return isProjectlessSession(session)
+      ? t("ui.no_project")
+      : (session && session.workspace) || projectName(sessionOriginPath(session));
   }
 
   function matchesWorkspaceFilter(session) {
     if (state.workspace === "all") return true;
     if (state.workspace === PROJECTLESS_WORKSPACE) return isProjectlessSession(session);
-    return (
-      !isProjectlessSession(session) &&
-      String((session && session.cwd) || "")
-        .toLowerCase()
-        .startsWith(state.workspace.toLowerCase())
-    );
+    return !isProjectlessSession(session) && projectContainsPath(state.workspace, sessionOriginPath(session));
   }
 
   function renderWorkspaces() {
-    const list = $("#workspaceList");
-    const projectlessCount = ((state.snapshot && state.snapshot.sessions) || []).filter((session) => !session.parentId && isProjectlessSession(session)).length;
-    list.innerHTML =
+    const lists = [$("#workspaceList"), $("#mobileWorkspaceList")].filter(Boolean);
+    const rootSessions = displaySessions().filter((session) => !session.parentId);
+    const projects = observedProjects();
+    const projectlessCount = rootSessions.filter(isProjectlessSession).length;
+    const savedWorkspaceExists = state.workspace === "all"
+      || (state.workspace === PROJECTLESS_WORKSPACE && projectlessCount > 0)
+      || projects.some((project) => normalizedProjectPath(project.path) === normalizedProjectPath(state.workspace));
+    if (!savedWorkspaceExists) state.workspace = "all";
+    const projectButton = (item) => `<button type="button" class="workspace-item observed-project ${state.workspace === item.path ? "selected" : ""}"
+      data-workspace="${esc(item.path)}" title="${esc(item.path)}"
+      aria-label="${esc(t("project.filter_named", { name: item.name, count: item.count }))}"
+      aria-pressed="${state.workspace === item.path ? "true" : "false"}">
+      <strong>${esc(item.name)}</strong><small>${Number(item.count || 0)}</small>
+      </button>`;
+    const html =
       `<button type="button" class="workspace-item ${state.workspace === "all" ? "selected" : ""}"
         data-workspace="all" aria-pressed="${state.workspace === "all" ? "true" : "false"}">
-      <strong>${window.LoadToAgentI18n.t("ui.all_workspaces")}</strong>
+      <strong>${window.LoadToAgentI18n.t("project.all")}</strong><small>${rootSessions.length}</small>
       </button>` +
       (projectlessCount
         ? `<button type="button" class="workspace-item projectless ${state.workspace === PROJECTLESS_WORKSPACE ? "selected" : ""}"
@@ -65,34 +137,39 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
         <small>${projectlessCount}</small>
         </button>`
         : "") +
-      state.workspaces
-        .map(
-          (item) => `<div class="workspace-row">
-        <button type="button" class="workspace-item ${state.workspace === item.path ? "selected" : ""}"
-          data-workspace="${esc(item.path)}" title="${esc(item.path)}"
-          aria-pressed="${state.workspace === item.path ? "true" : "false"}">
-        <strong>${esc(item.name)}</strong>
-        </button>
+      projects.map((item) => item.saved ? `<div class="workspace-row">
+        ${projectButton(item)}
         <button type="button" class="workspace-remove" data-remove-workspace="${esc(item.path)}"
-          aria-label="${esc(item.name)} 작업 폴더를 목록에서 제거"
+          aria-label="${esc(t("workspace.remove_named", { name: item.name }))}"
           title="${esc(window.LoadToAgentI18n.t("ui.remove_from_list"))}">×</button>
-        </div>`,
-        )
-        .join("") +
-      (!state.workspaces.length ? `<div class="workspace-empty">${window.LoadToAgentI18n.t("ui.use_the_button_to_add_frequently_used_workspaces")}</div>` : "");
+        </div>` : projectButton(item)).join("") +
+      (!projects.length && !projectlessCount ? `<div class="workspace-empty">${window.LoadToAgentI18n.t("project.empty")}</div>` : "");
+    lists.forEach((list) => { list.innerHTML = html; });
+    const selectedProject = projects.find((project) => normalizedProjectPath(project.path) === normalizedProjectPath(state.workspace));
+    const mobileSummary = $("#mobileWorkspaceSummary");
+    if (mobileSummary) mobileSummary.textContent = state.workspace === "all"
+      ? t("project.all")
+      : state.workspace === PROJECTLESS_WORKSPACE
+        ? t("ui.no_project")
+        : selectedProject?.name || projectName(state.workspace);
   }
 
   function renderGlobalStats() {
-    const totals = (state.snapshot && state.snapshot.summary && state.snapshot.summary.totals) || {};
-    const sessions = (state.snapshot && state.snapshot.sessions) || [];
+    const sessions = displaySessions();
+    const totals = {
+      active: sessions.filter((session) => session.status === "running" || session.status === "starting").length,
+      waiting: sessions.filter((session) => context.matchesManagementFilter?.(session, "attention")).length,
+      usage: { total: sessions.reduce((sum, session) => sum + Number(session.usage && session.usage.total || 0), 0) },
+    };
     const rootCount = sessions.filter((session) => !session.parentId).length;
-    const helperCount = sessions.filter((session) => session.parentId).length;
+    const criticalCount = sessions.filter((session) => context.matchesManagementFilter?.(session, "critical")).length;
+    const riskCount = sessions.filter((session) => context.matchesManagementFilter?.(session, "warning")).length;
     const items = [
       [window.LoadToAgentI18n.t("ui.all_tasks"), rootCount, window.LoadToAgentI18n.t("ui.items"), ""],
       [window.LoadToAgentI18n.t("ui.ai_working_now"), totals.active || 0, window.LoadToAgentI18n.t("ui.items"), "live"],
-      [window.LoadToAgentI18n.t("ui.waiting_for_review"), totals.waiting || 0, window.LoadToAgentI18n.t("ui.items"), "alert"],
-      [window.LoadToAgentI18n.t("ui.helper_ai_history"), helperCount, window.LoadToAgentI18n.t("ui.items"), ""],
-      [window.LoadToAgentI18n.t("ui.tokens_used"), compact(totals.usage && totals.usage.total), window.LoadToAgentI18n.t("ui.items"), ""],
+      [window.LoadToAgentI18n.t("management.action_required"), totals.waiting || 0, window.LoadToAgentI18n.t("ui.items"), "alert"],
+      [window.LoadToAgentI18n.t("management.health.critical"), criticalCount, window.LoadToAgentI18n.t("ui.items"), "critical"],
+      [window.LoadToAgentI18n.t("management.risk_total"), riskCount, window.LoadToAgentI18n.t("ui.items"), "warning"],
     ];
     $("#globalStats").innerHTML = items
       .map(
@@ -104,9 +181,46 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
       )
       .join("");
     $("#navAllCount").textContent = rootCount;
-    $("#navActiveCount").textContent = totals.active || 0;
-    $("#navWaitingCount").textContent = totals.waiting || 0;
-    $("#navTmuxCount").textContent = (state.snapshot && state.snapshot.tmux && state.snapshot.tmux.summary && state.snapshot.tmux.summary.aiPanes) || 0;
+    const activeRootCount = sessions.filter((session) => !session.parentId && ["running", "starting"].includes(session.status)).length;
+    $("#navActiveCount").textContent = activeRootCount;
+    const reviewCount = sessions.filter((session) => context.needsManagementReview?.(session)).length;
+    $("#navWaitingCount").textContent = reviewCount;
+    const scheduledCount = (state.snapshot?.automations || [])
+      .filter((item) => isProviderVisible(item.provider || "codex")).length;
+    const loopCount = sessions.filter(isRuntimeLoopSession).length;
+    $("#navRuntimeCount").textContent = scheduledCount + loopCount;
+    const tmuxSessionCount = Number(state.snapshot?.tmux?.summary?.sessions || 0);
+    $("#navTmuxCount").textContent = tmuxSessionCount;
+    $("#advancedToolsCount").textContent = scheduledCount + loopCount + Number($("#navTerminalCount").textContent || 0) + tmuxSessionCount;
+    const navCounts = {
+      all: rootCount,
+      active: activeRootCount,
+      waiting: reviewCount,
+      runtime: scheduledCount + loopCount,
+      terminal: Number($("#navTerminalCount").textContent || 0),
+      tmux: tmuxSessionCount,
+    };
+    document.querySelectorAll(".nav-item[data-view]").forEach((button) => {
+      const key = {
+        all: "app.nav.home", active: "app.nav.active", waiting: "app.nav.needs_review", runtime: "app.nav.runtime",
+        terminal: "app.nav.session_terminal", tmux: "app.nav.tmux", settings: "app.nav.settings",
+      }[button.dataset.view];
+      const label = t(key);
+      const count = navCounts[button.dataset.view];
+      const unitKey = { all: "tasks", active: "tasks", waiting: "items", runtime: "runs", terminal: "sessions", tmux: "sessions" }[button.dataset.view];
+      const unit = unitKey ? t(`quality.unit.${unitKey}`) : "";
+      const accessibleLabel = Number.isFinite(count) ? t("quality.nav_count_detailed", { label, count, unit }) : label;
+      button.setAttribute("aria-label", accessibleLabel);
+      button.setAttribute("title", accessibleLabel);
+    });
+    const advancedCount = scheduledCount + loopCount + Number($("#navTerminalCount").textContent || 0) + tmuxSessionCount;
+    $("#advancedToolsNav")?.querySelector("summary")?.setAttribute("aria-label", t("quality.nav_count_detailed", {
+      label: t("management.advanced_tools"), count: advancedCount, unit: t("quality.unit.items"),
+    }));
+    const tmuxShortcut = $("#openTmuxFromAgentWork");
+    $("#agentWorkTmuxCount").textContent = tmuxSessionCount;
+    tmuxShortcut.dataset.i18nParams = JSON.stringify({ count: tmuxSessionCount });
+    tmuxShortcut.setAttribute("aria-label", t("graph.open_tmux_workspace_count", { count: tmuxSessionCount }));
   }
 
   function formatBytes(value) {
@@ -159,7 +273,7 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
       ],
       downloaded: [
         "✓", window.LoadToAgentI18n.t("ui.ready_to_install"), window.LoadToAgentI18n.t("ui.the_update_file_is_ready"),
-        window.LoadToAgentI18n.t("ui.open_the_installer_and_follow_its_instructions_to_finish_updating"),
+        window.LoadToAgentI18n.t("settings.update.auto_install_restart"),
       ],
       error: [
         "!", window.LoadToAgentI18n.t("ui.check_failed"), window.LoadToAgentI18n.t("ui.could_not_check_for_updates"),
@@ -202,7 +316,7 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
     install.textContent = downloading
       ? window.LoadToAgentI18n.t("ui.downloading_2")
       : downloaded
-        ? window.LoadToAgentI18n.t("ui.open_installer")
+        ? `${window.LoadToAgentI18n.t("settings.update.download")} · ${window.LoadToAgentI18n.t("ui.restart")}`
         : window.LoadToAgentI18n.t("settings.update.download");
     const progress = $("#updateProgress");
     progress.classList.toggle("hidden", !downloading && !downloaded);
@@ -210,11 +324,13 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
     $("#updateProgressBar").style.width = `${Math.max(0, Math.min(100, Number(update.progress || 0)))}%`;
     $(".update-progress-track").setAttribute("aria-valuenow", String(Math.max(0, Math.min(100, Number(update.progress || 0)))));
     $("#updateProgressBytes").textContent = downloaded
-      ? `${formatBytes(update.totalBytes || update.downloadedBytes)} · 파일 검증 완료`
+      ? `${formatBytes(update.totalBytes || update.downloadedBytes)} · ${window.LoadToAgentI18n.t("settings.update.file_verified")}`
       : `${formatBytes(update.downloadedBytes)} / ${update.totalBytes ? formatBytes(update.totalBytes) : window.LoadToAgentI18n.t("ui.checking_size")}`;
     const error = $("#updateError");
     error.classList.toggle("hidden", !update.error);
-    error.textContent = update.error || "";
+    error.textContent = update.error
+      ? window.LoadToAgentI18n.errorText(update.error, "ui.could_not_check_for_updates")
+      : "";
     const notes = $("#releaseNotes");
     notes.classList.toggle("hidden", !update.latestVersion);
     $("#releaseNotesText").textContent =
@@ -231,16 +347,20 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
   function renderProviderOverview() {
     pruneProviderFilters();
     const summaries = (state.snapshot && state.snapshot.summary && state.snapshot.summary.providers) || state.providers;
-    const sessions = (state.snapshot && state.snapshot.sessions) || [];
-    $("#providerOverview").innerHTML = summaries
-      .map((provider) => {
+    const sessions = displaySessions();
+    const visibleSummaries = summaries.filter((provider) => isProviderVisible(provider.id));
+    const overviewTabStopId = state.providerFilters.size ? [...state.providerFilters][0] : visibleSummaries[0]?.id;
+    $("#providerOverview").innerHTML = visibleSummaries
+      .map((provider, index) => {
         const rootCount = sessions.filter((session) => session.provider === provider.id && !session.parentId).length;
         const selected = state.providerFilters.has(provider.id);
+        const tabStop = provider.id === overviewTabStopId;
         return `<button type="button" class="provider-overview-card ${selected ? "selected" : ""}"
           data-provider-card="${esc(provider.id)}"
           data-motion-key="provider:${esc(provider.id)}"
           data-motion-value="${provider.active || 0}:${rootCount}:${(provider.usage && provider.usage.total) || 0}"
           style="${providerStyle(provider.id)}"
+          tabindex="${tabStop ? "0" : "-1"}"
           aria-pressed="${selected ? "true" : "false"}">
       <div class="poc-head">
         <span class="provider-mark">${esc(provider.mark)}</span>
@@ -263,7 +383,7 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
   }
 
   function pruneProviderFilters() {
-    const valid = new Set(state.providers.map((provider) => provider.id));
+    const valid = new Set(visibleProviders().map((provider) => provider.id));
     for (const id of [...state.providerFilters]) if (!valid.has(id)) state.providerFilters.delete(id);
     if (valid.size > 0 && state.providerFilters.size === valid.size) state.providerFilters.clear();
   }
@@ -273,28 +393,29 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
     if (providerId === "all") state.providerFilters.clear();
     else if (state.providerFilters.has(providerId)) state.providerFilters.delete(providerId);
     else state.providerFilters.add(providerId);
-    if (state.providers.length > 0 && state.providerFilters.size === state.providers.length) state.providerFilters.clear();
+    if (visibleProviders().length > 0 && state.providerFilters.size === visibleProviders().length) state.providerFilters.clear();
   }
 
   function renderProviderFilter() {
     pruneProviderFilters();
     const allSelected = state.providerFilters.size === 0;
+    const tabStopId = allSelected ? "all" : [...state.providerFilters][0];
     const button = (id, label, mark = "") => {
       const selected = id === "all" ? allSelected : state.providerFilters.has(id);
       return `<button type="button" class="provider-filter-chip ${selected ? "selected" : ""}"
-        data-provider-filter="${esc(id)}" aria-pressed="${selected ? "true" : "false"}">
+        data-provider-filter="${esc(id)}" tabindex="${id === tabStopId ? "0" : "-1"}" aria-pressed="${selected ? "true" : "false"}">
         <i class="provider-filter-check" aria-hidden="true">✓</i>
         ${mark ? `<span class="provider-filter-mark" aria-hidden="true">${esc(mark)}</span>` : ""}<b>${esc(label)}</b>
       </button>`;
     };
     $("#providerFilter").innerHTML =
       button("all", window.LoadToAgentI18n.t("ui.all_ai")) +
-      state.providers.map((provider) => button(provider.id, provider.label, provider.mark)).join("");
+      visibleProviders().map((provider) => button(provider.id, provider.label, provider.mark)).join("");
   }
 
   function announceProviderFilter() {
     const labels = state.providerFilters.size
-      ? state.providers.filter((provider) => state.providerFilters.has(provider.id)).map((provider) => provider.label).join(", ")
+      ? visibleProviders().filter((provider) => state.providerFilters.has(provider.id)).map((provider) => provider.label).join(", ")
       : window.LoadToAgentI18n.t("ui.all_ai");
     $("#providerFilterStatus").textContent = window.LoadToAgentI18n.t("filter.result_summary", {
       providers: labels,
@@ -303,16 +424,16 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
   }
 
   function filteredSessions() {
-    const allSessions = [...((state.snapshot && state.snapshot.sessions) || [])];
+    const allSessions = displaySessions();
     let sessions = state.view === "waiting" ? allSessions : allSessions.filter((session) => !session.parentId);
     if (state.view === "active") sessions = sessions.filter((session) => session.status === "running" || session.status === "starting");
-    if (state.view === "waiting") sessions = sessions.filter((session) => session.status === "waiting");
+    if (state.view === "waiting") sessions = sessions.filter((session) => context.needsManagementReview?.(session));
     if (state.providerFilters.size) sessions = sessions.filter((session) => state.providerFilters.has(session.provider));
     sessions = sessions.filter(matchesWorkspaceFilter);
-    const query = state.search.trim().toLowerCase();
+    const query = state.search.replace(/\s+/g, " ").trim().toLowerCase();
     if (query) {
       sessions = sessions.filter((session) =>
-        [session.title, session.model, session.cwd, session.agentName, ...(session.messages || []).slice(-12).map((item) => item.text)]
+        [session.title, session.model, session.originCwd, session.cwd, session.workspace, session.agentName, ...(session.messages || []).slice(-12).map((item) => item.text)]
           .join(" ")
           .toLowerCase()
           .includes(query),
@@ -330,13 +451,13 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
   }
 
   function graphFilteredSessions() {
-    let sessions = [...((state.snapshot && state.snapshot.sessions) || [])];
+    let sessions = displaySessions();
     if (state.providerFilters.size) sessions = sessions.filter((session) => state.providerFilters.has(session.provider));
     sessions = sessions.filter(matchesWorkspaceFilter);
-    const query = state.search.trim().toLowerCase();
+    const query = state.search.replace(/\s+/g, " ").trim().toLowerCase();
     if (query)
       sessions = sessions.filter((session) =>
-        [session.title, session.model, session.cwd, session.agentName, session.agentRole, ...(session.messages || []).map((item) => item.text)]
+        [session.title, session.model, session.originCwd, session.cwd, session.workspace, session.agentName, session.agentRole, ...(session.messages || []).map((item) => item.text)]
           .join(" ")
           .toLowerCase()
           .includes(query),
@@ -344,9 +465,28 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
     return sessions;
   }
 
+  function renderProviderVisibilitySettings() {
+    const list = $("#providerVisibilityList");
+    if (!list) return;
+    list.innerHTML = state.providers.map((provider) => {
+      const visible = isProviderVisible(provider.id);
+      const status = window.LoadToAgentI18n.t(visible ? "settings.providers.visible" : "settings.providers.hidden");
+      return `<label class="provider-visibility-option ${visible ? "enabled" : "disabled"}" style="${providerStyle(provider.id)}">
+        <span class="provider-mark" aria-hidden="true">${esc(provider.mark)}</span>
+        <span class="provider-visibility-name"><b>${esc(provider.label)}</b><small>${esc(provider.company)}</small></span>
+        <span class="provider-visibility-status">${esc(status)}</span>
+        <input type="checkbox" data-provider-visibility="${esc(provider.id)}" ${visible ? "checked" : ""}
+          aria-label="${esc(`${provider.label} ${status}`)}">
+        <span class="provider-toggle" aria-hidden="true"><i></i></span>
+      </label>`;
+    }).join("");
+  }
+
   return {
     renderProviderRail,
     isProjectlessSession,
+    sessionOriginPath,
+    observedProjects,
     sessionWorkspaceLabel,
     matchesWorkspaceFilter,
     renderWorkspaces,
@@ -361,5 +501,6 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
     announceProviderFilter,
     filteredSessions,
     graphFilteredSessions,
+    renderProviderVisibilitySettings,
   };
 };

package/renderer/app-drawer-content.js

@@ -4,35 +4,39 @@ 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, options = {}) {
     const messages = session.messages || [];
-    if (!messages.length) return '<div class="empty-state"><h3>표시할 대화가 없습니다</h3></div>';
-    const userLabel = options.userLabel || "사용자";
+    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 || "대화";
+    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"
             ? 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());
@@ -43,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>${esc(conversationLabel)} ${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>`,
@@ -94,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">
@@ -110,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) {
@@ -183,16 +187,16 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
       .map((event) => {
         const fromChild = event.kind === "result" || endpointIsChild(event.from);
         const preview = subagentTextPreview(event.text);
-        const label = fromChild ? `${session.agentName || taskName} → 메인 AI` : "메인 AI → 서브에이전트";
+        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(event.label || event.kind)}</b><span>${esc(label)} · ${esc(timeOnly(event.timestamp))}</span></header>
+          <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 `<details class="chat-activities subagent-coordination" data-subagent-coordination-count="${events.length}">
-      <summary>메인 AI와 주고받은 지시·결과 ${events.length}건</summary><div>${rows}</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>`;
   }
 
@@ -201,14 +205,14 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
     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>서브에이전트 실제 작업 기록</b><span>${esc(sourceCopy)}</span>
+      <b>${esc(t("drawer.subagent_work_history"))}</b><span>${esc(sourceCopy)}</span>
     </section>${chatHtml(workSession, {
-      userLabel: "작업 지시",
-      assistantLabel: session.agentName || "서브 AI",
-      conversationLabel: "작업 기록",
+      userLabel: t("drawer.assignment"),
+      assistantLabel: session.agentName || t("drawer.sub_ai"),
+      conversationLabel: t("drawer.work_history"),
     })}${subagentCoordinationHtml(session)}`;
   }