loadtoagent 1.1.0 → 1.3.1

package/renderer/app-run-modal.js

@@ -3,34 +3,43 @@
 window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createRunModal = function createRunModal(context = {}) {
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const {
     $,
     esc,
     uiLocale,
     state,
+    PROJECTLESS_WORKSPACE,
     motionPreference,
     motionState,
     markGuideStep,
     rememberDialogTrigger,
     restoreDialogTrigger,
+    setDialogOpenState,
+    announce,
     providerInfo,
     providerStyle,
+    visibleProviders = () => state.providers,
+    isProviderVisible = () => true,
+    restoreRunDraft = () => {},
+    clearRunDraft = () => {},
   } = context;
 
   function providerPickerHtml() {
-    return state.providers
+    return visibleProviders()
       .map((provider) => {
         const installed = !!state.availability[provider.id];
         const selected = state.runProvider === provider.id;
         return `<button type="button" class="run-provider-option ${selected ? "selected" : ""}"
           data-run-provider="${esc(provider.id)}"
           style="${providerStyle(provider.id)}"
-          aria-pressed="${selected ? "true" : "false"}"
+          role="radio" aria-checked="${selected ? "true" : "false"}"
+          tabindex="${selected ? "0" : "-1"}"
           ${installed ? "" : "disabled"}>
         <span class="provider-mini-mark">${esc(provider.mark)}</span>
         <span class="run-provider-copy">
         <b>${esc(provider.label)}</b>
-        <small>${esc(installed ? `${provider.company} · CLI 발견됨` : window.LoadToAgentI18n.t("ui.setup_required"))}</small>
+        <small>${esc(installed ? t("run.cli_found", { company: provider.company }) : t("ui.setup_required"))}</small>
         </span>
         <span class="run-provider-check" aria-hidden="true">✓</span>
         </button>`;
@@ -39,26 +48,30 @@ window.LoadToAgentAppFactories.createRunModal = function createRunModal(context
   }
 
   function runProviderHelpHtml() {
-    const available = state.providers.filter((provider) => state.availability[provider.id]);
+    if (!visibleProviders().length) return `<div class="run-provider-help-copy">
+      <b>${t("settings.providers.all_hidden_title")}</b>
+      <p>${t("settings.providers.all_hidden_description")}</p>
+      </div>`;
+    const available = visibleProviders().filter((provider) => state.availability[provider.id]);
     if (available.length) return "";
-    const docs = state.providers
+    const docs = visibleProviders()
       .map(
         (provider) => `<button type="button" data-provider-docs="${esc(provider.id)}">
       <span class="provider-mini-mark" style="${providerStyle(provider.id)}">${esc(provider.mark)}</span>
       <span>
-      <b>${esc(window.LoadToAgentI18n.t("provider.install_guide", { provider: provider.label }))}</b>
-      <small>공식 문서에서 CLI 설치와 로그인을 확인하세요.</small>
+      <b>${esc(t("provider.install_guide", { provider: provider.label }))}</b>
+      <small>${esc(t("run.check_official_docs"))}</small>
       </span>
       <i aria-hidden="true">↗</i>
       </button>`,
       )
       .join("");
     return `<div class="run-provider-help-copy">
-      <b>먼저 AI CLI 한 개를 준비해 주세요</b>
-      <p>1. 아래 공식 설치 안내 열기 → 2. 터미널에서 로그인 → 3. 설치 확인을 누르면 됩니다.</p>
+      <b>${esc(t("run.prepare_cli"))}</b>
+      <p>${esc(t("run.prepare_cli_steps"))}</p>
       </div>
       <div class="run-provider-docs">${docs}</div>
-      <button type="button" class="provider-recheck" data-provider-recheck>↻ 설치 상태 다시 확인</button>`;
+      <button type="button" class="provider-recheck" data-provider-recheck>↻ ${esc(t("run.recheck_installation"))}</button>`;
   }
 
   function runWorkspaceSuggestionsHtml() {
@@ -68,7 +81,7 @@ window.LoadToAgentAppFactories.createRunModal = function createRunModal(context
       .map((workspace) => {
         const path = workspace.path || workspace.name || "";
         const active = path === selected;
-        return `<button type="button" data-run-workspace="${esc(path)}" class="${active ? "selected" : ""}" title="${esc(path)}">
+        return `<button type="button" data-run-workspace="${esc(path)}" class="${active ? "selected" : ""}" title="${esc(path)}" aria-pressed="${active ? "true" : "false"}">
         <span aria-hidden="true">⌘</span>
         ${esc(workspace.name || path.split(/[\\/]/).filter(Boolean).pop() || window.LoadToAgentI18n.t("ui.workspaces"))}
         </button>`;
@@ -79,23 +92,30 @@ window.LoadToAgentAppFactories.createRunModal = function createRunModal(context
   function syncRunComposer() {
     const prompt = $("#runPrompt");
     const count = $("#runPromptCount");
-    if (prompt && count) count.textContent = `${prompt.value.length.toLocaleString(uiLocale())} / 8,000`;
+    if (prompt && count) {
+      const wasWarning = count.dataset.warning === "true";
+      const warning = prompt.value.length >= 7_200;
+      count.textContent = `${prompt.value.length.toLocaleString(uiLocale())} / 8,000`;
+      count.classList.toggle("warning", warning);
+      count.dataset.warning = warning ? "true" : "false";
+      if (warning && !wasWarning) announce(t("run.prompt_near_limit", { count: Math.max(0, 8_000 - prompt.value.length) }));
+    }
     const submitLabel = $("#runSubmitLabel");
     const submit = $('#runForm button[type="submit"]');
-    const hasProvider = Boolean(state.availability[state.runProvider]);
+    const hasProvider = isProviderVisible(state.runProvider) && Boolean(state.availability[state.runProvider]);
     const providerHelp = $("#runProviderHelp");
     if (providerHelp) {
       providerHelp.innerHTML = runProviderHelpHtml();
       providerHelp.classList.toggle(
         "hidden",
-        state.providers.some((provider) => state.availability[provider.id]),
+        visibleProviders().some((provider) => state.availability[provider.id]),
       );
     }
     if (submit) submit.disabled = submit.dataset.submitting === "true" || !hasProvider;
     if (submitLabel && submit.dataset.submitting !== "true")
       submitLabel.textContent = hasProvider
-        ? window.LoadToAgentI18n.t("provider.assign", { provider: providerInfo(state.runProvider).label })
-        : "AI 설치가 필요합니다";
+        ? t("provider.assign", { provider: providerInfo(state.runProvider).label })
+        : visibleProviders().length ? t("run.ai_installation_required") : t("settings.providers.enable_to_run");
     const writeIntent = /(고치|수정|추가|구현|변경|삭제|작성|리팩터|fix|implement|update|edit|refactor)/i.test((prompt && prompt.value) || "");
     const permissionHint = $("#runPermissionHint");
     const permissionNeeded = writeIntent && !$("#allowWrites").checked;
@@ -110,40 +130,57 @@ window.LoadToAgentAppFactories.createRunModal = function createRunModal(context
     const submit = $('#runForm button[type="submit"]');
     if (!submit) return;
     submit.dataset.submitting = submitting ? "true" : "false";
-    submit.disabled = submitting || !state.availability[state.runProvider];
+    submit.disabled = submitting || !isProviderVisible(state.runProvider) || !state.availability[state.runProvider];
     submit.setAttribute("aria-busy", submitting ? "true" : "false");
+    $("#closeRunModalBtn").disabled = submitting;
+    $("#cancelRunBtn").disabled = submitting;
     const label = $("#runSubmitLabel");
     if (label) label.textContent = submitting
-      ? "AI 작업을 준비하는 중…"
-      : window.LoadToAgentI18n.t("provider.assign", { provider: providerInfo(state.runProvider).label });
+      ? t("run.preparing")
+      : t("provider.assign", { provider: providerInfo(state.runProvider).label });
   }
 
   function openRunModal() {
     rememberDialogTrigger();
-    const installed = state.providers.find((provider) => state.availability[provider.id]);
-    if (!state.availability[state.runProvider] && installed) state.runProvider = installed.id;
+    restoreRunDraft();
+    const installed = visibleProviders().find((provider) => state.availability[provider.id]);
+    if ((!isProviderVisible(state.runProvider) || !state.availability[state.runProvider]) && installed) state.runProvider = installed.id;
+    if (!isProviderVisible(state.runProvider)) state.runProvider = visibleProviders()[0]?.id || "";
     $("#runProviderPicker").innerHTML = providerPickerHtml();
-    if (!$("#runCwd").value) $("#runCwd").value = state.workspace !== "all" ? state.workspace : (state.workspaces[0] && state.workspaces[0].path) || "";
+    if (!$("#runCwd").value) $("#runCwd").value = state.workspace !== "all" && state.workspace !== PROJECTLESS_WORKSPACE
+      ? state.workspace
+      : state.workspace === PROJECTLESS_WORKSPACE ? "" : (state.workspaces[0] && state.workspaces[0].path) || "";
     $("#runCwd").placeholder = state.platform.id === "win32" ? "D:\\project" : "/Users/me/project";
-    const advanced = $("#runForm .run-advanced");
-    if (advanced) advanced.open = Boolean($("#runModel").value.trim());
     $("#runError").classList.add("hidden");
     syncRunComposer();
     clearTimeout(motionState.modalTimer);
+    clearTimeout(motionState.modalFocusTimer);
+    setDialogOpenState($("#runModal"), true);
     $("#runModal").classList.remove("hidden", "closing");
-    setTimeout(() => $("#runPrompt").focus(), 0);
+    const focusPromptIfOutside = () => {
+      const modal = $("#runModal");
+      if (!modal.classList.contains("hidden") && !modal.classList.contains("closing") && !modal.contains(document.activeElement)) {
+        $("#runPrompt").focus();
+      }
+    };
+    setTimeout(focusPromptIfOutside, 0);
+    motionState.modalFocusTimer = setTimeout(focusPromptIfOutside, motionPreference.matches ? 0 : 300);
   }
 
-  function closeRunModal() {
+  function closeRunModal(force = false) {
     const modal = $("#runModal");
     if (modal.classList.contains("hidden") || modal.classList.contains("closing")) return;
+    if (force !== true && $('#runForm button[type="submit"]').dataset.submitting === "true") return;
+    const modalGeneration = motionState.dialogGeneration;
+    clearTimeout(motionState.modalFocusTimer);
     modal.classList.add("closing");
     clearTimeout(motionState.modalTimer);
     motionState.modalTimer = setTimeout(
       () => {
         modal.classList.add("hidden");
         modal.classList.remove("closing");
-        restoreDialogTrigger();
+        setDialogOpenState(modal, false);
+        restoreDialogTrigger(modalGeneration);
       },
       motionPreference.matches ? 0 : 220,
     );
@@ -166,20 +203,52 @@ window.LoadToAgentAppFactories.createRunModal = function createRunModal(context
     }, 3200);
   }
 
-  async function performUiAction(action, failureMessage) {
+  async function performUiAction(action, failureMessage, control = null) {
+    if (control?.dataset.busy === "true") return null;
+    const wasDisabled = Boolean(control?.disabled);
+    if (control) {
+      control.dataset.busy = "true";
+      control.disabled = true;
+      control.setAttribute("aria-busy", "true");
+    }
     try {
       return await action();
     } catch (error) {
-      toast((error && error.message) || failureMessage);
+      toast(window.LoadToAgentI18n.errorText(error, failureMessage));
       return null;
+    } finally {
+      if (control?.isConnected) {
+        delete control.dataset.busy;
+        control.disabled = wasDisabled;
+        control.removeAttribute("aria-busy");
+      }
     }
   }
 
   async function handleRun(event) {
     event.preventDefault();
-    if (!state.availability[state.runProvider]) {
+    const prompt = $("#runPrompt");
+    const cwd = $("#runCwd");
+    const invalid = [];
+    if (!prompt.value.trim()) {
+      prompt.setAttribute("aria-invalid", "true");
+      invalid.push({ element: prompt, message: t("quality.run_prompt_required") });
+    }
+    if (!cwd.value.trim()) {
+      cwd.setAttribute("aria-invalid", "true");
+      invalid.push({ element: cwd, message: t("quality.run_cwd_required") });
+    }
+    if (invalid.length) {
+      $("#runError").textContent = invalid[0].message;
+      $("#runError").classList.remove("hidden");
+      invalid[0].element.focus({ preventScroll: true });
+      announce(invalid[0].message);
+      return;
+    }
+    if (!isProviderVisible(state.runProvider) || !state.availability[state.runProvider]) {
       $("#runError").textContent = window.LoadToAgentI18n.t("ui.no_ai_cli_is_ready_follow_the_official_setup_guide");
       $("#runError").classList.remove("hidden");
+      $("#runError").focus({ preventScroll: true });
       return;
     }
     setRunSubmitting(true);
@@ -194,13 +263,14 @@ window.LoadToAgentAppFactories.createRunModal = function createRunModal(context
       });
       if (!result.ok) throw new Error(result.error || window.LoadToAgentI18n.t("ui.could_not_start_the_task"));
       markGuideStep("create");
-      closeRunModal();
-      $("#runPrompt").value = "";
+      closeRunModal(true);
+      clearRunDraft({ silent: true, focus: false });
       syncRunComposer();
       toast(window.LoadToAgentI18n.t("provider.started", { provider: providerInfo(state.runProvider).label }));
     } catch (error) {
-      $("#runError").textContent = error.message;
+      $("#runError").textContent = window.LoadToAgentI18n.errorText(error, "ui.could_not_start_the_task");
       $("#runError").classList.remove("hidden");
+      $("#runError").focus({ preventScroll: true });
     } finally {
       setRunSubmitting(false);
     }

package/renderer/app-runtime-overview.js

@@ -0,0 +1,312 @@
+"use strict";
+
+window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
+
+window.LoadToAgentAppFactories.createRuntimeOverview = function createRuntimeOverview(context = {}) {
+  const t = (key, params) => window.LoadToAgentI18n.t(key, params);
+  const {
+    $,
+    esc,
+    uiLocale,
+    state,
+    providerInfo,
+    providerStyle,
+    currentActivity,
+    visibleSessions = () => ((state.snapshot && state.snapshot.sessions) || []),
+    isProviderVisible = () => true,
+    isRuntimeLoopSession = () => false,
+  } = context;
+
+  let runtimeTicker = 0;
+  let runtimeRenderVersion = 0;
+  let pendingRuntimeFocus = null;
+
+  function activeRootLoops() {
+    return visibleSessions()
+      .filter(isRuntimeLoopSession)
+      .sort((a, b) => Date.parse(b.updatedAt || 0) - Date.parse(a.updatedAt || 0));
+  }
+
+  function visibleAutomations() {
+    return ((state.snapshot && state.snapshot.automations) || [])
+      .filter((item) => isProviderVisible(item.provider || "codex"))
+      .sort((a, b) => Date.parse(a.nextRunAt || 0) - Date.parse(b.nextRunAt || 0));
+  }
+
+  function automationSession(item) {
+    if (!item || !item.targetThreadId) return null;
+    return visibleSessions().find((session) => session.externalId === item.targetThreadId || session.id === item.targetThreadId) || null;
+  }
+
+  function scheduleTime(value) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return t("runtime.not_scheduled");
+    const now = new Date();
+    const start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    const day = Math.round((target.getTime() - start.getTime()) / 86_400_000);
+    const time = date.toLocaleTimeString(uiLocale(), { hour: "2-digit", minute: "2-digit" });
+    if (day === 0) return t("runtime.today_at", { time });
+    if (day === 1) return t("runtime.tomorrow_at", { time });
+    return date.toLocaleString(uiLocale(), { month: "short", day: "numeric", weekday: "short", hour: "2-digit", minute: "2-digit" });
+  }
+
+  function scheduleRule(value) {
+    const rule = Object.fromEntries(String(value || "").split(";").map((pair) => pair.split("=", 2)).filter((pair) => pair.length === 2));
+    const interval = Math.max(1, Number.parseInt(rule.INTERVAL || "1", 10) || 1);
+    const frequencyKeys = {
+      DAILY: "runtime.every_day",
+      WEEKLY: "runtime.every_week",
+      HOURLY: "runtime.every_hour",
+      MINUTELY: "runtime.every_minute",
+    };
+    const intervalKeys = {
+      DAILY: "runtime.every_n_days",
+      WEEKLY: "runtime.every_n_weeks",
+      HOURLY: "runtime.every_n_hours",
+      MINUTELY: "runtime.every_n_minutes",
+    };
+    const base = interval > 1 && intervalKeys[rule.FREQ]
+      ? t(intervalKeys[rule.FREQ], { count: interval })
+      : frequencyKeys[rule.FREQ] ? t(frequencyKeys[rule.FREQ]) : t("runtime.recurring");
+    const details = [];
+    if (rule.BYDAY) {
+      const weekdayDates = { SU: 4, MO: 5, TU: 6, WE: 7, TH: 8, FR: 9, SA: 10 };
+      const days = rule.BYDAY.split(",")
+        .map((day) => weekdayDates[day])
+        .filter(Boolean)
+        .map((day) => new Intl.DateTimeFormat(uiLocale(), { weekday: "short" }).format(new Date(2026, 0, day)));
+      if (days.length) details.push(days.join("·"));
+    }
+    if (rule.BYHOUR) {
+      const hour = String(rule.BYHOUR).padStart(2, "0");
+      const minute = String(rule.BYMINUTE || "0").padStart(2, "0");
+      details.push(`${hour}:${minute}`);
+    } else if (rule.FREQ === "HOURLY" && rule.BYMINUTE) {
+      details.push(t("runtime.at_minute", { minute: Number.parseInt(rule.BYMINUTE, 10) || 0 }));
+    }
+    return [base, ...details].join(" · ");
+  }
+
+  function loopPhase(session) {
+    const explicitPhase = String(session.loop && session.loop.phase || "").toLowerCase();
+    const explicitIndex = { input: 0, decide: 1, decision: 1, act: 2, action: 2, observe: 3, observation: 3 }[explicitPhase];
+    if (Number.isInteger(explicitIndex)) return explicitIndex;
+    const event = [...(session.lifecycle || [])].reverse().find((item) => item.status === "running")
+      || (session.lifecycle || [])[session.lifecycle.length - 1]
+      || {};
+    const signal = `${event.type || ""} ${event.label || ""}`.toLowerCase();
+    if (/result|output|wait|complete|observe|검수|확인/.test(signal)) return 3;
+    if (/tool|collaboration|command|exec|실행|도구/.test(signal)) return 2;
+    if (/reason|think|decid|추론|판단/.test(signal)) return 1;
+    return 0;
+  }
+
+  function loopPhases(session) {
+    const active = loopPhase(session);
+    const definitions = [
+      ["input", "runtime.phase_input", "runtime.phase_input_detail"],
+      ["decide", "runtime.phase_decide", "runtime.phase_decide_detail"],
+      ["act", "runtime.phase_act", "runtime.phase_act_detail"],
+      ["observe", "runtime.phase_observe", "runtime.phase_observe_detail"],
+    ];
+    return definitions.map(([key, label, detail], index) => ({
+      key,
+      label: t(label),
+      detail: t(detail),
+      state: index < active ? "done" : index === active ? "active" : "queued",
+    }));
+  }
+
+  function phaseStatusLabel(stateValue) {
+    return t({ done: "runtime.phase_done", active: "runtime.phase_active", queued: "runtime.phase_queued" }[stateValue] || "runtime.phase_queued");
+  }
+
+  function elapsedSince(value) {
+    if (!value) return t("runtime.just_started");
+    const elapsed = Date.now() - Date.parse(value || 0);
+    if (!Number.isFinite(elapsed) || elapsed < 60_000) return t("runtime.just_started");
+    const minutes = Math.floor(elapsed / 60_000);
+    if (minutes < 60) return t("runtime.elapsed_minutes", { count: minutes });
+    return t("runtime.elapsed_hours", { count: Math.floor(minutes / 60) });
+  }
+
+  function scheduleCard(item) {
+    const session = automationSession(item);
+    const cwd = (item.cwds || [])[0] || "";
+    const workspace = String(cwd).replace(/\\/g, "/").split("/").filter(Boolean).pop();
+    const location = workspace || (item.environment?.kind === "wsl" && item.sourceLabel) || t("runtime.workspace_unspecified");
+    const body = `<span class="runtime-schedule-time" ${item.enabled ? `data-runtime-next-run-at="${esc(item.nextRunAt || "")}"` : ""}>${esc(item.enabled ? scheduleTime(item.nextRunAt) : t("runtime.paused"))}</span>
+      <strong>${esc(item.name)}</strong>
+      <small>${esc(scheduleRule(item.rrule))} · ${esc(location)}</small>`;
+    const card = session
+      ? `<button type="button" class="runtime-schedule-card ${item.enabled ? "" : "paused"}" data-automation-id="${esc(item.id)}" data-automation-enabled="${item.enabled ? "true" : "false"}" data-automation-session="${esc(session.id)}">${body}<i aria-hidden="true">↗</i></button>`
+      : `<article class="runtime-schedule-card ${item.enabled ? "" : "paused"}" data-automation-id="${esc(item.id)}" data-automation-enabled="${item.enabled ? "true" : "false"}">${body}<i aria-hidden="true">${item.enabled ? "●" : "Ⅱ"}</i></article>`;
+    return `<div class="runtime-schedule-item" role="listitem">${card}</div>`;
+  }
+
+  function emptySchedules() {
+    return `<div class="runtime-schedule-empty"><span aria-hidden="true">＋</span><div><b>${esc(t("runtime.no_schedules"))}</b><small>${esc(t("runtime.no_schedules_detail"))}</small></div></div>`;
+  }
+
+  function loopSelector(loop, selected) {
+    const provider = providerInfo(loop.provider);
+    const activePhase = loopPhases(loop).find((phase) => phase.state === "active") || loopPhases(loop)[0];
+    return `<button type="button" class="runtime-loop-tab ${selected ? "selected" : ""}" data-loop-select="${esc(loop.id)}"
+      id="runtime-loop-tab-${esc(loop.id)}" role="tab" aria-controls="runtime-loop-panel-${esc(loop.id)}"
+      style="${providerStyle(loop.provider)}" aria-selected="${selected ? "true" : "false"}" aria-pressed="${selected ? "true" : "false"}" tabindex="${selected ? "0" : "-1"}">
+      <span class="runtime-loop-tab-mark">${esc(provider.mark)}</span>
+      <span><b>${esc(loop.title)}</b><small>${esc(provider.label)} · ${esc(activePhase.label)} · <span data-runtime-started-at="${esc(loop.startedAt || "")}">${esc(elapsedSince(loop.startedAt))}</span></small></span>
+      <i aria-hidden="true"></i>
+    </button>`;
+  }
+
+  function loopDiagram(session) {
+    const phases = loopPhases(session);
+    const activeIndex = Math.max(0, phases.findIndex((phase) => phase.state === "active"));
+    const activePhase = phases[activeIndex];
+    return `<div class="runtime-loop-cycle" role="img" aria-label="${esc(t("runtime.loop_flow_state", { phase: activePhase.label }))}" style="--loop-progress:${activeIndex / Math.max(1, phases.length - 1) * 100}%">
+      <div class="runtime-loop-spine" aria-hidden="true"><span></span></div>
+      ${phases.map((phase, index) => `<div class="runtime-loop-phase ${phase.state}" data-loop-phase="${phase.key}">
+        <span class="runtime-loop-phase-index">0${index + 1}<em>${esc(phaseStatusLabel(phase.state))}</em></span>
+        <i aria-hidden="true">${phase.state === "done" ? "✓" : phase.state === "active" ? "●" : "·"}</i>
+        <b>${esc(phase.label)}</b>
+        <small>${esc(phase.detail)}</small>
+      </div>`).join("")}
+      <div class="runtime-loop-return" aria-hidden="true"><span>↺</span><b>${esc(t("runtime.phase_repeat"))}</b></div>
+    </div>`;
+  }
+
+  function loopDetail(session) {
+    const provider = providerInfo(session.provider);
+    const activity = currentActivity(session);
+    const children = (session.childIds || []).map((id) => visibleSessions().find((item) => item.id === id)).filter(Boolean);
+    const runningChildren = children.filter((item) => ["running", "starting"].includes(item.status)).length;
+    const iteration = Number(session.loop && session.loop.iteration || 0);
+    const iterationLabel = iteration > 0
+      ? t("runtime.iteration_value", { count: iteration })
+      : session.loop ? t("runtime.iteration_observed") : t("runtime.iteration_scheduled");
+    const activePhase = loopPhases(session).find((phase) => phase.state === "active") || loopPhases(session)[0];
+    const activityTitle = window.LoadToAgentI18n.observedText(activity.title);
+    const activityDetail = window.LoadToAgentI18n.observedText(activity.detail || session.statusDetail || "");
+    return `<article id="runtime-loop-panel-${esc(session.id)}" class="runtime-loop-detail" role="tabpanel" aria-labelledby="runtime-loop-tab-${esc(session.id)}" style="${providerStyle(session.provider)}" data-motion-key="runtime-loop:${esc(session.id)}" data-motion-value="${esc(session.updatedAt || "")}">
+      <header>
+        <div><span class="runtime-loop-kicker"><i></i>${esc(t("runtime.active_loop"))}</span><h3>${esc(session.title)}</h3><p>${esc(provider.label)} · ${esc(session.model || t("session.model_unknown"))}</p></div>
+        <div class="runtime-loop-header-actions"><span class="runtime-active-phase"><small>${esc(t("runtime.current_phase"))}</small><b>${esc(activePhase.label)}</b></span><button type="button" class="runtime-open-task" data-loop-open="${esc(session.id)}">${esc(t("runtime.open_task"))}<span aria-hidden="true">↗</span></button></div>
+      </header>
+      <section class="runtime-now-strip" aria-label="${esc(t("runtime.now_working"))}">
+        <span class="runtime-now-mark" aria-hidden="true">NOW</span>
+        <div><small>${esc(t("runtime.now_working"))}</small><b title="${esc(activityTitle)}">${esc(activityTitle)}</b><p title="${esc(activityDetail)}">${esc(activityDetail)}</p></div>
+        <time data-runtime-updated-at="${esc(session.updatedAt || session.startedAt || "")}">${esc(t("runtime.last_signal_time", { time: elapsedSince(session.updatedAt || session.startedAt) }))}</time>
+      </section>
+      ${loopDiagram(session)}
+      <footer class="runtime-loop-footer">
+        <dl>
+          <div><dt>${esc(t("runtime.running_time"))}</dt><dd data-runtime-started-at="${esc(session.startedAt || "")}">${esc(elapsedSince(session.startedAt))}</dd></div>
+          <div><dt>${esc(t("runtime.iteration"))}</dt><dd>${esc(iterationLabel)}</dd></div>
+          <div><dt>${esc(t("runtime.subagents"))}</dt><dd>${runningChildren ? esc(t("runtime.subagents_running", { running: runningChildren, total: children.length })) : esc(t("runtime.subagents_total", { count: children.length }))}</dd></div>
+        </dl>
+      </footer>
+    </article>`;
+  }
+
+  function noActiveLoop() {
+    return `<div class="runtime-loop-empty"><span class="runtime-loop-empty-orbit" aria-hidden="true"><i></i></span><div><b>${esc(t("runtime.no_active_loop"))}</b><p>${esc(t("runtime.no_active_loop_detail"))}</p></div></div>`;
+  }
+
+  function refreshRuntimeTimes(section = $("#automationOverview")) {
+    if (!section || section.classList.contains("hidden")) return;
+    section.querySelectorAll("[data-runtime-next-run-at]").forEach((element) => {
+      element.textContent = scheduleTime(element.dataset.runtimeNextRunAt);
+    });
+    section.querySelectorAll("[data-runtime-started-at]").forEach((element) => {
+      element.textContent = elapsedSince(element.dataset.runtimeStartedAt);
+    });
+    section.querySelectorAll("[data-runtime-updated-at]").forEach((element) => {
+      element.textContent = t("runtime.last_signal_time", { time: elapsedSince(element.dataset.runtimeUpdatedAt) });
+    });
+  }
+
+  function ensureRuntimeTicker() {
+    if (runtimeTicker) return;
+    runtimeTicker = window.setInterval(() => refreshRuntimeTimes(), 30_000);
+  }
+
+  function renderRuntimeOverview() {
+    const renderVersion = ++runtimeRenderVersion;
+    const section = $("#automationOverview");
+    const previousScheduleList = section.querySelector(".runtime-schedule-list");
+    const previousLoopTabs = section.querySelector(".runtime-loop-tabs");
+    const previousSelectedId = section.querySelector(".runtime-loop-tab.selected")?.dataset.loopSelect || "";
+    const scheduleScrollTop = previousScheduleList?.scrollTop || 0;
+    const loopScrollLeft = previousLoopTabs?.scrollLeft || 0;
+    const restoreScheduleFocus = document.activeElement === previousScheduleList;
+    const focusedAutomationId = document.activeElement?.closest?.("[data-automation-id]")?.dataset.automationId || "";
+    const focusedLoopId = document.activeElement?.closest?.("[data-loop-select]")?.dataset.loopSelect || "";
+    const detectedFocus = restoreScheduleFocus
+      ? { type: "schedule-list", id: "" }
+      : focusedAutomationId ? { type: "automation", id: focusedAutomationId }
+        : focusedLoopId ? { type: "loop", id: focusedLoopId } : null;
+    if (detectedFocus) pendingRuntimeFocus = detectedFocus;
+    const focusIntent = detectedFocus || pendingRuntimeFocus;
+    const automations = visibleAutomations();
+    const interactiveScheduleCount = automations.filter((item) => automationSession(item)).length;
+    const scheduleListFocusable = automations.length > 0 && interactiveScheduleCount === 0;
+    const scheduleListLabel = scheduleListFocusable
+      ? t("runtime.schedule_list_scroll_label")
+      : interactiveScheduleCount > 0 ? t("runtime.schedule_list_action_label") : t("runtime.schedule_list_label");
+    const loops = activeRootLoops();
+    const enabled = automations.filter((item) => item.enabled);
+    const paused = automations.filter((item) => !item.enabled);
+    if (!loops.some((loop) => loop.id === state.selectedRuntimeLoopId)) state.selectedRuntimeLoopId = loops[0] && loops[0].id || null;
+    const selected = loops.find((loop) => loop.id === state.selectedRuntimeLoopId) || loops[0] || null;
+    const selectedId = selected?.id || "";
+    section.innerHTML = `<header class="runtime-overview-head">
+      <div class="runtime-overview-title"><span class="runtime-overview-emblem" aria-hidden="true"><i></i><b>↻</b></span><div><p>${esc(t("runtime.eyebrow"))}</p><h2>${esc(t("runtime.status_summary"))}</h2></div></div>
+      <div class="runtime-overview-counts"><span><i></i>${esc(t("runtime.schedules_count", { count: enabled.length }))}</span>${paused.length ? `<span class="paused"><i></i>${esc(t("runtime.paused_count", { count: paused.length }))}</span>` : ""}<span><i></i>${esc(t("runtime.loops_count", { count: loops.length }))}</span><b><i></i>${esc(t("runtime.live_status"))}</b></div>
+    </header>
+    <div class="runtime-overview-grid">
+      <aside class="runtime-schedule-lane">
+        <header><div><span>${esc(t("runtime.schedule_lane"))}</span><b>${esc(t("runtime.schedule_list"))}</b></div><em>${String(automations.length).padStart(2, "0")}</em></header>
+        <div class="runtime-schedule-list" role="list" tabindex="${scheduleListFocusable ? "0" : "-1"}" aria-label="${esc(scheduleListLabel)}">${automations.length ? automations.map(scheduleCard).join("") : emptySchedules()}</div>
+      </aside>
+      <section class="runtime-loop-lane" aria-label="${esc(t("runtime.loop_lane"))}">
+        <header class="runtime-loop-lane-head"><div><span>${esc(t("runtime.loop_lane"))}</span><b>${esc(t("runtime.loop_system"))}</b><small>${esc(t("runtime.inferred_phase"))}</small></div>${loops.length ? `<div class="runtime-loop-tabs" role="tablist" aria-orientation="horizontal" aria-label="${esc(t("runtime.choose_loop"))}">${loops.map((loop) => loopSelector(loop, loop.id === selectedId)).join("")}</div>` : ""}</header>
+        ${selected ? loopDetail(selected) : noActiveLoop()}
+      </section>
+    </div>`;
+    requestAnimationFrame(() => {
+      if (renderVersion !== runtimeRenderVersion) return;
+      const scheduleList = section.querySelector(".runtime-schedule-list");
+      const selectedTab = section.querySelector(".runtime-loop-tab.selected");
+      const tabList = selectedTab && selectedTab.closest(".runtime-loop-tabs");
+      if (scheduleList) scheduleList.scrollTop = scheduleScrollTop;
+      if (tabList) tabList.scrollLeft = loopScrollLeft;
+      if (selectedTab && tabList && (!previousLoopTabs || previousSelectedId !== selectedId)) {
+        const item = selectedTab.getBoundingClientRect();
+        const list = tabList.getBoundingClientRect();
+        if (item.left < list.left || item.right > list.right) selectedTab.scrollIntoView({ block: "nearest", inline: "nearest" });
+      }
+      const focusTarget = focusIntent?.type === "schedule-list"
+        ? scheduleList
+        : focusIntent?.type === "automation" ? section.querySelector(`[data-automation-id="${CSS.escape(focusIntent.id)}"]`)
+          : focusIntent?.type === "loop" ? section.querySelector(`[data-loop-select="${CSS.escape(focusIntent.id)}"]`) : null;
+      focusTarget?.focus({ preventScroll: true });
+      if (focusTarget && document.activeElement === focusTarget) pendingRuntimeFocus = null;
+      if (scheduleList) scheduleList.scrollTop = scheduleScrollTop;
+      if (tabList && previousLoopTabs && previousSelectedId === selectedId) tabList.scrollLeft = loopScrollLeft;
+    });
+    ensureRuntimeTicker();
+    return automations.length + loops.length;
+  }
+
+  return {
+    activeRootLoops,
+    visibleAutomations,
+    scheduleTime,
+    scheduleRule,
+    loopPhases,
+    refreshRuntimeTimes,
+    renderRuntimeOverview,
+  };
+};