loadtoagent 1.3.3 → 1.3.5

package/renderer/app-drawer-content.js

@@ -3,74 +3,121 @@
 window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createDrawerContent = function createDrawerContent(context = {}) {
-  const { esc, uiLocale, state, messageContentHtml, compact, fullNumber, timeOnly, providerInfo, statusIcon, agentPathTaskName, snapshotSession } = context;
+  const {
+    esc, uiLocale, state, messageContentHtml, compact, fullNumber, timeOnly, providerInfo, statusIcon, agentPathTaskName, snapshotSession,
+    controlRoomAgentGoal, inferredExecutionSummary, executionActivityLabel, executionActivityStatus,
+  } = context;
   const t = (key, params) => window.LoadToAgentI18n.t(key, params);
 
+  function conversationTurns(session, options = {}) {
+    const turns = [];
+    let current = null;
+    for (const message of session.messages || []) {
+      if (!message) continue;
+      if (message.role === "user") {
+        current = { id: message.id || `turn-${turns.length}`, user: message, assistants: [], activityAfterAssistant: false };
+        turns.push(current);
+        continue;
+      }
+      if (message.role === "assistant") {
+        if (!current) {
+          const title = String(session.title || "").trim();
+          const syntheticUser = options.synthesizeRequest === false || !title
+            ? null
+            : {
+              id: `${session.id}:request`, role: "user", text: title,
+              timestamp: session.startedAt || message.timestamp,
+            };
+          current = { id: syntheticUser?.id || message.id || `turn-${turns.length}`, user: syntheticUser, assistants: [], activityAfterAssistant: false };
+          turns.push(current);
+        }
+        current.assistants.push(message);
+        current.activityAfterAssistant = false;
+        continue;
+      }
+      if (message.role === "tool" && current && current.assistants.length) current.activityAfterAssistant = true;
+    }
+    const latestIndex = turns.length - 1;
+    const live = session.status === "running" || session.status === "starting";
+    return turns.map((turn, index) => ({
+      ...turn,
+      representative: turn.assistants.at(-1) || null,
+      progress: turn.assistants.slice(0, -1),
+      live: live && index === latestIndex,
+      awaitingFinal: Boolean(turn.activityAfterAssistant),
+    }));
+  }
+
+  function conversationRowHtml(message, session, options = {}) {
+    if (!message) return "";
+    const assistant = message.role === "assistant";
+    const label = assistant ? options.assistantLabel : options.userLabel;
+    const avatar = assistant ? providerInfo(session.provider).mark : "ME";
+    const fullTime = new Date(message.timestamp).toLocaleString(uiLocale());
+    const answerKind = assistant && options.answerKind
+      ? `<span class="chat-answer-kind${options.live ? " is-live" : ""}">${esc(options.answerKind)}</span>`
+      : "";
+    return `<div class="chat-row ${assistant ? "assistant" : "user"}" data-message-id="${esc(message.id || "")}">
+      <span class="chat-avatar">${esc(avatar)}</span>
+      <div class="chat-bubble">
+      <div class="chat-bubble-head">
+      <b>${esc(label)}</b>
+      <span title="${esc(fullTime)}">${esc(timeOnly(message.timestamp))}</span>${answerKind}
+      </div>${messageContentHtml(message, session.id)}</div>
+      </div>`;
+  }
+
+  function progressUpdatesHtml(turn, session) {
+    if (!turn.progress.length) return "";
+    const rows = turn.progress.map((message, index) => {
+      const fullTime = new Date(message.timestamp).toLocaleString(uiLocale());
+      return `<article data-progress-message-id="${esc(message.id || "")}">
+        <header><b>${esc(t("drawer.progress_update_item", { count: index + 1 }))}</b><time title="${esc(fullTime)}">${esc(timeOnly(message.timestamp))}</time></header>
+        ${messageContentHtml(message, session.id)}
+      </article>`;
+    }).join("");
+    return `<details class="chat-progress-updates" data-progress-count="${turn.progress.length}"
+      data-disclosure-key="${esc(`drawer:${session.id}:turn:${turn.id}:progress`)}">
+      <summary><span><b>${esc(t("drawer.progress_updates", { count: turn.progress.length }))}</b>
+      <small>${esc(t("drawer.progress_updates_help"))}</small></span><i aria-hidden="true">↓</i></summary>
+      <div class="chat-progress-list">${rows}</div>
+      </details>`;
+  }
+
   function chatHtml(session, options = {}) {
     const messages = session.messages || [];
     if (!messages.length) return `<div class="empty-state"><h3>${esc(t("drawer.no_conversation"))}</h3></div>`;
     const userLabel = options.userLabel || t("drawer.user");
     const assistantLabel = options.assistantLabel || providerInfo(session.provider).label;
     const conversationLabel = options.conversationLabel || t("drawer.conversation");
-    const conversation = messages.filter((message) => message.role === "user" || message.role === "assistant");
-    const activities = messages.filter((message) => message.role !== "user" && message.role !== "assistant");
+    const turns = conversationTurns(session, options);
+    const progressCount = turns.reduce((sum, turn) => sum + turn.progress.length, 0);
     const omitted = Number(session.omittedMessages || 0);
     const notice =
       omitted || session.truncated
         ? `<div class="chat-truncated">${esc(t("drawer.recent_history"))}${omitted ? ` · ${esc(t("drawer.messages_omitted", { count: omitted.toLocaleString(uiLocale()) }))}` : ""}</div>`
         : "";
-    const statusLabels = {
-      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"
-              ? window.LoadToAgentI18n.observedText(message.title || t("session.tool"))
-              : message.role === "system"
-                ? t("drawer.system")
-                : userLabel;
-        const avatar = role === "assistant" ? providerInfo(session.provider).mark : role === "tool" ? "⌘" : role === "system" ? "i" : "ME";
-        const fullTime = new Date(message.timestamp).toLocaleString(uiLocale());
-        return `<div class="chat-row ${role}" data-message-id="${esc(message.id || "")}">
-        <span class="chat-avatar">${esc(avatar)}</span>
-        <div class="chat-bubble">
-        <div class="chat-bubble-head">
-        <b>${esc(label)}</b>
-        <span title="${esc(fullTime)}">${esc(timeOnly(message.timestamp))}</span>
-        ${message.status ? `<span>${esc(statusLabel(message.status))}</span>` : ""}
-        </div>${messageContentHtml(renderedMessage, session.id)}</div>
-        </div>`;
-      })
-      .join("");
-    const activityHtml = activities.length
-      ? `<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(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, text: window.LoadToAgentI18n.observedText(message.text) }, session.id)}</article>`,
-        )
-        .join("")}</div>
-      </details>`
-      : "";
-    const emptyConversation = conversation.length ? "" : `<div class="empty-state compact"><h3>${esc(t("drawer.no_user_ai_conversation"))}</h3></div>`;
+    const rows = turns.map((turn) => {
+      const user = conversationRowHtml(turn.user, session, { userLabel, assistantLabel });
+      const representative = conversationRowHtml(turn.representative, session, {
+        userLabel,
+        assistantLabel,
+        answerKind: t(turn.live ? "drawer.current_progress" : turn.awaitingFinal ? "drawer.last_progress" : "drawer.final_answer"),
+        live: turn.live,
+      });
+      const waiting = turn.live && !turn.representative
+        ? `<div class="chat-turn-waiting"><span aria-hidden="true"></span><b>${esc(t("drawer.preparing_response"))}</b></div>`
+        : "";
+      return `<section class="chat-turn${turn.live ? " is-live" : ""}" data-conversation-turn="${esc(turn.id)}">
+        ${user}${representative}${waiting}${progressUpdatesHtml(turn, session)}
+      </section>`;
+    }).join("");
+    const emptyConversation = turns.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(t("drawer.conversation_summary", { label: conversationLabel, count: conversation.length, activities: activities.length ? ` · ${t("drawer.activities", { count: activities.length })}` : "" }))}</span>
+      <span>${esc(t("drawer.turn_summary", { label: conversationLabel, count: turns.length, updates: progressCount ? ` · ${t("drawer.progress_updates", { count: progressCount })}` : "" }))}</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="${esc(t("drawer.latest_conversation"))}">
+      <div class="chat-list">${rows}${emptyConversation}<div class="chat-latest-anchor" aria-label="${esc(t("drawer.latest_conversation"))}">
       </div>
       </div>`;
   }
@@ -153,12 +200,26 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
   }
 
   function subagentWorkMessages(session) {
-    const messages = [...(session.messages || [])];
+    const parent = session.parentId ? state.details.get(session.parentId) || snapshotSession(session.parentId) : null;
+    const delegation = session.delegation || {};
+    const startValue = delegation.startedAt || session.startedAt || "";
+    const startedAt = startValue ? Date.parse(startValue) : Number.NaN;
+    const normalizedText = value => String(value || "").replace(/\s+/g, " ").trim();
+    const messageKey = message => `${message.role || ""}:${normalizedText(message.text)}`;
+    const parentMessageIds = new Set((parent?.messages || []).map(message => String(message.id || "")).filter(Boolean));
+    const parentMessageKeys = new Set((parent?.messages || []).map(messageKey));
+    const messages = (session.messages || []).filter(message => {
+      if (!message || !["user", "assistant"].includes(message.role) || message.protected || !normalizedText(message.text)) return false;
+      const messageAt = message.timestamp ? Date.parse(message.timestamp) : Number.NaN;
+      if (Number.isFinite(startedAt) && startedAt > 0 && Number.isFinite(messageAt) && messageAt < startedAt - 2000) return false;
+      const inheritedId = message.id && parentMessageIds.has(String(message.id));
+      const inheritedText = parentMessageKeys.has(messageKey(message));
+      return !inheritedId && !inheritedText;
+    });
     const hasConversation = messages.some((message) =>
       (message.role === "user" || message.role === "assistant") && String(message.text || "").trim(),
     );
     if (hasConversation) return messages;
-    const delegation = session.delegation || {};
     if (delegation.assignmentObserved && !delegation.assignmentProtected && String(delegation.assignment || "").trim()) {
       messages.push({
         id: `${session.id}:delegation`, role: "user", text: delegation.assignment,
@@ -201,20 +262,77 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
   }
 
   function subagentConversationHtml(session) {
-    const messages = subagentWorkMessages(session);
+    const delegation = session.delegation || {};
+    const parent = session.parentId ? state.details.get(session.parentId) || snapshotSession(session.parentId) : null;
+    const assignmentEvent = subagentCoordinationEvents(session).find(event => event.kind === "assignment" && String(event.text || "").trim());
+    const assignment = String(delegation.assignment || assignmentEvent?.text || delegation.taskName || session.taskName || session.title || "").trim();
+    let assignmentRemoved = false;
+    const messages = subagentWorkMessages(session).filter(message => {
+      if (assignmentRemoved || message.role !== "user" || !assignment) return true;
+      if (String(message.text || "").replace(/\s+/g, " ").trim() !== assignment.replace(/\s+/g, " ").trim()) return true;
+      assignmentRemoved = true;
+      return false;
+    });
     const conversationCount = messages.filter((message) => message.role === "user" || message.role === "assistant").length;
     const workSession = { ...session, messages };
     const sourceCopy = session.source === "collaboration-history"
       ? t("drawer.subagent_history_reconstructed")
       : t("drawer.subagent_history_actual");
-    return `<section class="subagent-work-source" data-subagent-work-messages="${conversationCount}">
-      <b>${esc(t("drawer.subagent_work_history"))}</b><span>${esc(sourceCopy)}</span>
+    return `<section class="subagent-assignment-card" data-subagent-assignment="true">
+      <span aria-hidden="true">⌁</span><div><b>${esc(t("control.main_assignment"))}</b>${parent ? `<small>${esc(t("control.created_from"))} · ${esc(parent.title)}</small>` : ""}<p>${esc(assignment || t("management.signal_unavailable"))}</p></div>
+    </section><section class="subagent-work-source" data-subagent-work-messages="${conversationCount}" data-conversation-scope="subagent-only">
+      <b>${esc(t("control.subagent_conversation"))}</b><span>${esc(sourceCopy)}</span>
     </section>${chatHtml(workSession, {
-      userLabel: t("drawer.assignment"),
+      userLabel: t("drawer.user"),
       assistantLabel: session.agentName || t("drawer.sub_ai"),
       conversationLabel: t("drawer.work_history"),
+      synthesizeRequest: false,
     })}${subagentCoordinationHtml(session)}`;
   }
 
-  return { chatHtml, lifecycleHtml, tokensHtml, subagentCommunicationEvents, subagentCoordinationEvents, subagentTextPreview, subagentConversationHtml };
+  function executionActivityDetailHtml(session, activity) {
+    if (!activity) return `<div class="empty-state"><h3>${esc(t("drawer.execution_unavailable"))}</h3></div>`;
+    const purpose = inferredExecutionSummary(activity);
+    const ownerGoal = controlRoomAgentGoal(session, 180);
+    const runtime = activity.runtime || activity.tool || t("graph.runtime_unknown");
+    const handle = activity.backgroundId
+      ? `${activity.backgroundIdType || t("graph.execution_handle")} · ${activity.backgroundId}`
+      : "";
+    const command = String(activity.command || activity.label || purpose.full || "").trim();
+    const output = String(activity.output || "").trim();
+    const status = executionActivityStatus(activity);
+    const ownerLabel = session.parentId
+      ? `${t("control.subagent")} · ${session.agentName || session.taskName || providerInfo(session.provider).label}`
+      : `${t("control.main_agent")} · ${session.agentName || providerInfo(session.provider).label}`;
+    const timeline = [
+      activity.startedAt ? { label: t("drawer.execution_started"), value: activity.startedAt } : null,
+      activity.updatedAt ? { label: activity.status === "running" ? t("drawer.execution_latest_activity") : t("drawer.execution_finished"), value: activity.updatedAt } : null,
+    ].filter(Boolean);
+    return `<div class="execution-drawer" data-execution-detail="${esc(activity.id)}" data-conversation-scope="execution-only">
+      <section class="execution-purpose-card">
+        <span class="execution-purpose-icon" aria-hidden="true">${activity.kind === "shell" ? "›_" : "◌"}</span>
+        <div><small>${esc(t("drawer.execution_purpose"))}</small><b>${esc(purpose.text)}</b><p>${esc(t("drawer.execution_owner_context", { owner: ownerLabel, task: ownerGoal.text }))}</p></div>
+      </section>
+      <section class="execution-process-card">
+        <header><span><small>${esc(executionActivityLabel(activity))}</small><b>${esc(status)}</b></span><em class="${activity.status === "running" ? "is-running" : ""}"><i aria-hidden="true"></i>${esc(activity.statusDetail || status)}</em></header>
+        <dl>
+          <div><dt>${esc(t("graph.execution_runtime"))}</dt><dd>${esc(runtime)}</dd></div>
+          ${activity.cwd ? `<div><dt>${esc(t("graph.execution_workdir"))}</dt><dd title="${esc(activity.cwd)}">${esc(activity.cwd)}</dd></div>` : ""}
+          ${handle ? `<div><dt>${esc(t("graph.execution_handle"))}</dt><dd>${esc(handle)}</dd></div>` : ""}
+          ${activity.exitCode != null ? `<div><dt>${esc(t("drawer.execution_exit_code"))}</dt><dd>${esc(activity.exitCode)}</dd></div>` : ""}
+        </dl>
+      </section>
+      <section class="execution-code-card">
+        <header><span><small>${esc(t("drawer.execution_command_from", { owner: ownerLabel }))}</small><b>${esc(t("graph.execution_command"))}</b></span>${command ? `<button type="button" data-copy-text="${esc(command)}">${esc(t("graph.copy_command"))}</button>` : ""}</header>
+        ${command ? `<pre><code>${esc(command)}</code></pre>` : `<p>${esc(t("drawer.execution_command_unavailable"))}</p>`}
+      </section>
+      <section class="execution-code-card output-card">
+        <header><span><small>${esc(t("drawer.execution_output_help"))}</small><b>${esc(t("graph.execution_output"))}</b></span>${output ? `<button type="button" data-copy-text="${esc(output)}">${esc(t("graph.copy_output"))}</button>` : ""}</header>
+        ${output ? `<pre>${esc(output)}</pre>` : `<p>${esc(activity.status === "running" ? t("drawer.execution_waiting_output") : t("graph.execution_output_unavailable"))}</p>`}
+      </section>
+      ${timeline.length ? `<section class="execution-timeline" aria-label="${esc(t("drawer.execution_timeline"))}">${timeline.map((item, index) => `<div><i aria-hidden="true"></i><span><b>${esc(item.label)}</b><time title="${esc(item.value)}">${esc(new Date(item.value).toLocaleString(uiLocale()))}</time></span>${index === timeline.length - 1 && activity.status === "running" ? `<em>${esc(t("graph.execution_running"))}</em>` : ""}</div>`).join("")}</section>` : ""}
+    </div>`;
+  }
+
+  return { conversationTurns, chatHtml, lifecycleHtml, tokensHtml, subagentCommunicationEvents, subagentCoordinationEvents, subagentTextPreview, subagentConversationHtml, executionActivityDetailHtml };
 };

package/renderer/app-drawer-data.js

@@ -10,7 +10,11 @@ window.LoadToAgentAppFactories.createDrawerData = function createDrawerData(cont
 
   async function loadSessionDetail(id, force = false) {
     if (!force && state.details.has(id)) return state.details.get(id);
-    if (!force && detailRequests.has(id)) return detailRequests.get(id).promise;
+    // A live snapshot can advance again while the previous detail request is
+    // still running. Share that request instead of stacking more full-history
+    // reads for the same session.
+    if (detailRequests.has(id)) return detailRequests.get(id).promise;
+    const hadCachedDetail = state.details.has(id);
     const generation = ++detailRequestGeneration;
     state.detailErrors.delete(id);
     state.detailLoadingIds.add(id);
@@ -29,7 +33,7 @@ window.LoadToAgentAppFactories.createDrawerData = function createDrawerData(cont
           detailRequests.delete(id);
           state.detailLoadingIds.delete(id);
           if (state.selectedId === id) {
-            state.drawerForceLatest = state.drawerTab === "chat";
+            if (!hadCachedDetail) state.drawerForceLatest = state.drawerTab === "chat";
             context.renderDrawer();
           }
         }
@@ -44,7 +48,7 @@ window.LoadToAgentAppFactories.createDrawerData = function createDrawerData(cont
     try {
       const detail = await window.loadtoagent.sessionDetail(child.parentId);
       if (detail) state.details.set(child.parentId, detail);
-      if (state.drawerMode === "subagent" && state.selectedId === child.id) context.renderDrawer();
+      if ((state.drawerMode === "subagent" || state.drawerMode === "execution") && state.selectedId === child.id) context.renderDrawer();
     } catch (error) {
       reportRecoverableError("subagent-parent-detail", error);
     }

package/renderer/app-drawer.js

@@ -8,7 +8,8 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     $, $$, esc, state, motionPreference, motionState, STATUS, markGuideStep, rememberDialogTrigger, restoreDialogTrigger, setDialogOpenState,
     providerInfo, isLiveSession, subagentWorkState, subagentWorkLabel, isProjectlessSession, sessionOriginPath, sessionWorkspaceLabel,
     agentResumeSupport, originAppInfo, selectedSession, snapshotSession, loadSessionDetail, loadSubagentParentDetail,
-    chatHtml, lifecycleHtml, tokensHtml, outcomeHtml, subagentCoordinationEvents, subagentConversationHtml,
+    chatHtml, lifecycleHtml, tokensHtml, outcomeHtml, subagentCoordinationEvents, subagentConversationHtml, executionActivityDetailHtml,
+    agentCommandComposer,
     rememberDisclosureStates = () => {}, restoreDisclosureStates = () => {},
   } = context;
 
@@ -17,7 +18,8 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     markGuideStep("detail");
     state.selectedId = id;
     state.drawerMode = "session";
-    state.drawerTab = "summary";
+    state.drawerExecutionId = null;
+    state.drawerTab = "chat";
     state.drawerForceLatest = true;
     clearTimeout(motionState.drawerTimer);
     $("#drawerBackdrop").classList.remove("hidden");
@@ -36,7 +38,9 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     markGuideStep("detail");
     state.selectedId = id;
     state.drawerMode = "subagent";
+    state.drawerExecutionId = null;
     state.drawerTab = "chat";
+    state.agentCommandRoutes.delete(id);
     state.drawerForceLatest = true;
     clearTimeout(motionState.drawerTimer);
     $("#drawerBackdrop").classList.remove("hidden");
@@ -49,6 +53,27 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     setTimeout(() => $("#closeDrawerBtn").focus({ preventScroll: true }), 0);
   }
 
+  function openExecutionActivity(ownerId, executionId) {
+    const owner = snapshotSession(ownerId) || state.details.get(ownerId);
+    if (!owner) return;
+    rememberDialogTrigger();
+    markGuideStep("detail");
+    state.selectedId = ownerId;
+    state.drawerMode = "execution";
+    state.drawerExecutionId = executionId;
+    state.drawerTab = "chat";
+    state.drawerForceLatest = false;
+    clearTimeout(motionState.drawerTimer);
+    $("#drawerBackdrop").classList.remove("hidden");
+    $("#drawerBackdrop").classList.remove("closing");
+    $("#detailDrawer").classList.add("open");
+    setDialogOpenState($("#detailDrawer"), true);
+    renderDrawer();
+    loadSessionDetail(ownerId);
+    if (owner.parentId) loadSubagentParentDetail(owner);
+    setTimeout(() => $("#closeDrawerBtn").focus({ preventScroll: true }), 0);
+  }
+
   function closeDrawer(restoreFocus = true) {
     if (!$("#detailDrawer").classList.contains("open")) return;
     const drawerGeneration = motionState.dialogGeneration;
@@ -73,14 +98,28 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     if (!session) return closeDrawer();
     const provider = providerInfo(session.provider);
     const subagentMode = state.drawerMode === "subagent" && Boolean(session.parentId);
-    const detailLoading = state.detailLoadingIds.has(state.selectedId);
+    const executionMode = state.drawerMode === "execution" && Boolean(state.drawerExecutionId);
+    const snapshot = snapshotSession(session.id);
+    const activity = executionMode
+      ? (session.executions || []).find(item => item.id === state.drawerExecutionId)
+        || (snapshot?.executions || []).find(item => item.id === state.drawerExecutionId)
+        || null
+      : null;
+    // Live sessions refresh frequently. Keep an already loaded conversation on
+    // screen while its newer detail is fetched instead of flashing the loader.
+    const detailLoading = state.detailLoadingIds.has(state.selectedId) && !state.details.has(state.selectedId);
+    $("#detailDrawer").dataset.mode = executionMode ? "execution" : subagentMode ? "subagent" : "session";
     $("#detailDrawer").style.setProperty("--drawer-provider", provider.accent);
     $("#drawerProviderMark").style.setProperty("--provider", provider.accent);
-    $("#drawerProviderMark").textContent = provider.mark;
-    $("#drawerProvider").textContent = subagentMode
-      ? t("drawer.subagent_title", { name: session.agentName || provider.label })
+    $("#drawerProviderMark").textContent = executionMode && activity?.kind === "shell" ? ">_" : provider.mark;
+    $("#drawerProvider").textContent = executionMode
+      ? `${activity?.runtime || activity?.tool || t("drawer.execution_unit")} · ${activity ? context.executionActivityStatus(activity) : t("drawer.unknown")}`
+      : subagentMode
+      ? `${t("control.subagent")} · ${STATUS[session.status] || session.status}`
       : `${provider.company} · ${STATUS[session.status] || session.status}`;
-    const drawerTitle = subagentMode ? session.taskName || (session.delegation && session.delegation.taskName) || session.title : session.title;
+    const drawerTitle = executionMode
+      ? context.inferredExecutionSummary(activity || {}).text
+      : subagentMode ? session.title || session.taskName || (session.delegation && session.delegation.taskName) : session.title;
     $("#drawerTitle").textContent = drawerTitle;
     $("#drawerTitle").title = drawerTitle;
     const stopping = session.runId && state.stopRequests.has(session.runId);
@@ -97,32 +136,23 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
           <b>${esc(t(originAppInfo(session) ? "drawer.continue_background_terminal" : "drawer.resume_in_terminal"))}</b>
         </button>`
         : "";
-    const communicationCount = subagentMode ? subagentCoordinationEvents(session).length : 0;
-    const subagentMessageCount = subagentMode
-      ? (session.messages || []).filter((message) => message.role === "user" || message.role === "assistant").length
-      : 0;
-    const taskId = String(session.externalId || session.id || "");
-    const copyTask = taskId
-      ? `<button type="button" class="meta-chip meta-copy" data-copy-text="${esc(taskId)}" aria-label="${esc(t("quality.copy_task_id"))}">${esc(t("quality.task_id"))} <b>${esc(taskId.slice(0, 12))}</b><span aria-hidden="true">⧉</span></button>`
-      : "";
     const originPath = sessionOriginPath(session);
     const copyWorkspace = !isProjectlessSession(session) && originPath
       ? `<button type="button" class="meta-chip meta-copy origin-project-meta" data-copy-text="${esc(originPath)}" aria-label="${esc(t("quality.copy_workspace"))}">${esc(t("project.origin"))} <b>${esc(sessionWorkspaceLabel(session))}</b><span aria-hidden="true">⧉</span></button>`
       : "";
-    $("#drawerMeta").innerHTML = subagentMode
+    $("#drawerMeta").innerHTML = executionMode
+      ? `<span class="meta-chip work-state ${activity?.status === "running" ? "working" : "resting"}"><b>${esc(activity ? context.executionActivityStatus(activity) : t("drawer.unknown"))}</b></span>
+        <span class="meta-chip">${esc(session.parentId ? t("control.subagent") : t("control.main_agent"))} <b>${esc(session.agentName || provider.label)}</b></span>
+        ${activity?.backgroundId ? `<span class="meta-chip">${esc(t("graph.execution_handle"))} <b>${esc(activity.backgroundId)}</b></span>` : ""}`
+      : subagentMode
       ? `<span class="meta-chip work-state ${subagentWorkState(session)}">
         <b>${esc(subagentWorkLabel(session))}</b>
         </span>
-        <span class="meta-chip">${esc(t("drawer.model"))} <b>${esc(session.model || t("drawer.unknown"))}</b>
-        </span>
-        <span class="meta-chip">${esc(t("drawer.work_history"))} <b>${esc(t("drawer.event_count", { count: subagentMessageCount }))}</b>
-        </span>
-        <span class="meta-chip">${esc(t("drawer.main_instructions_results"))} <b>${esc(t("drawer.event_count", { count: communicationCount }))}</b>
-        </span>${copyTask}${copyWorkspace}${resume}`
+        <span class="meta-chip">${esc(t("drawer.model"))} <b>${esc(session.model || t("drawer.unknown"))}</b></span>${resume}`
       : `<span class="meta-chip">${esc(t("drawer.model"))} <b>${esc(session.model || t("drawer.unknown"))}</b>
         </span>
         ${copyWorkspace || `<span class="meta-chip origin-project-meta">${esc(t("project.origin"))} <b>${esc(sessionWorkspaceLabel(session))}</b></span>`}
-        ${copyTask}${
+        ${
           session.parentId
             ? `<span class="meta-chip">⑂ <b>${esc(t("drawer.helper_ai"))}</b>
         </span>`
@@ -134,9 +164,9 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
             : ""
         }${resume}${stop}`;
     $$(".drawer-tab").forEach((tab) => {
-      const hidden = subagentMode && tab.dataset.tab !== "chat";
+      const hidden = (subagentMode || executionMode) && tab.dataset.tab !== "chat";
       tab.classList.toggle("hidden", hidden);
-      if (tab.dataset.tab === "chat") tab.textContent = subagentMode ? t("drawer.work_content") : t("ui.conversation");
+      if (tab.dataset.tab === "chat") tab.textContent = executionMode ? t("drawer.execution_process") : subagentMode ? t("drawer.work_content") : t("ui.conversation");
       const active = tab.dataset.tab === state.drawerTab;
       tab.classList.toggle("active", active);
       tab.setAttribute("aria-selected", active ? "true" : "false");
@@ -163,6 +193,8 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
         <span>${esc(detailError)}</span>
         <button type="button" data-retry-detail="${esc(state.selectedId)}">${esc(t("drawer.retry"))}</button>
         </div>`
+        : executionMode
+          ? executionActivityDetailHtml(session, activity)
         : subagentMode
           ? subagentConversationHtml(session)
           : state.drawerTab === "summary"
@@ -172,6 +204,10 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
             : state.drawerTab === "lifecycle"
               ? lifecycleHtml(session)
               : tokensHtml(session);
+    const composer = $("#drawerComposer");
+    const showComposer = !executionMode && !detailLoading && !detailError && state.drawerTab === "chat" && typeof agentCommandComposer === "function";
+    composer.classList.toggle("hidden", !showComposer);
+    composer.innerHTML = showComposer ? agentCommandComposer(session, { conversation: true }) : "";
     restoreDisclosureStates(content);
     content.classList.toggle("motion-content-in", shouldAnimateContent && !motionPreference.matches);
     clearTimeout(motionState.drawerContentTimer);
@@ -188,13 +224,16 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
           if (motionState.drawerScrollGeneration !== scrollGeneration) return;
           const forceLatest = state.drawerForceLatest;
           if (state.drawerTab === "chat" && forceLatest) {
-            const rows = [...content.querySelectorAll(".chat-row")];
-            const latest = rows[rows.length - 1];
-            if (latest && latest.offsetHeight > content.clientHeight - 90) {
-              const contentTop = content.getBoundingClientRect().top;
-              const stickyHeight = content.querySelector(".chat-history-head")?.getBoundingClientRect().height || 0;
-              content.scrollTop = Math.max(0, content.scrollTop + latest.getBoundingClientRect().top - contentTop - stickyHeight - 12);
-            } else content.scrollTop = content.scrollHeight;
+            if (subagentMode || executionMode) content.scrollTop = 0;
+            else {
+              const rows = [...content.querySelectorAll(".chat-row")];
+              const latest = rows[rows.length - 1];
+              if (latest && latest.offsetHeight > content.clientHeight - 90) {
+                const contentTop = content.getBoundingClientRect().top;
+                const stickyHeight = content.querySelector(".chat-history-head")?.getBoundingClientRect().height || 0;
+                content.scrollTop = Math.max(0, content.scrollTop + latest.getBoundingClientRect().top - contentTop - stickyHeight - 12);
+              } else content.scrollTop = content.scrollHeight;
+            }
           } else if (state.drawerTab === "chat" && wasAtBottom) content.scrollTop = content.scrollHeight;
           else content.scrollTop = Math.min(previousTop, Math.max(0, content.scrollHeight - content.clientHeight));
           state.drawerForceLatest = false;
@@ -203,5 +242,5 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     }
   }
 
-  return { openDrawer, openSubagentConversation, closeDrawer, renderDrawer };
+  return { openDrawer, openSubagentConversation, openExecutionActivity, closeDrawer, renderDrawer };
 };

package/renderer/app-events-dialogs.js

@@ -161,6 +161,13 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
       $(`.drawer-tab[data-tab="${state.drawerTab}"]`)?.focus();
     });
     $("#detailDrawer").addEventListener("click", async (event) => {
+      const route = event.target.closest("[data-agent-command-route]");
+      if (route) {
+        state.agentCommandRoutes.set(route.dataset.agentCommandSession, route.dataset.agentCommandRoute);
+        renderDrawer();
+        requestAnimationFrame(() => $("#detailDrawer")?.querySelector(`[data-agent-command-session="${CSS.escape(route.dataset.agentCommandSession)}"][data-agent-command-route="${CSS.escape(route.dataset.agentCommandRoute)}"]`)?.focus({ preventScroll: true }));
+        return;
+      }
       const copy = event.target.closest("[data-copy-text]");
       if (copy) {
         await copyText(copy.dataset.copyText);
@@ -225,7 +232,7 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
       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; });
+      picker.closest("form")?.querySelectorAll("[data-agent-terminal-open], button[type='submit']").forEach(button => { button.disabled = !picker.value; });
     });
     $("#detailDrawer").addEventListener("keydown", (event) => {
       const input = event.target.closest("[data-agent-command-draft]");

package/renderer/app-events-navigation.js

@@ -105,6 +105,13 @@ window.LoadToAgentAppFactories.createNavigationEventBindings = function createNa
       buttons[next]?.focus();
     });
     $("#mobileToolsMenu").addEventListener("click", (event) => {
+      const guide = event.target.closest("[data-mobile-guide]");
+      if (guide) {
+        closeMobileTools(false);
+        $("#guideBtn")?.click();
+        requestAnimationFrame(() => $("#beginnerGuide")?.scrollIntoView({ behavior: "smooth", block: "start" }));
+        return;
+      }
       const button = event.target.closest("[data-mobile-view]");
       if (button) {
         closeMobileTools(false);