loadtoagent 1.3.5 → 1.3.6

package/docs/PROVIDER-CONTRACTS.md

@@ -19,7 +19,9 @@ LoadToAgent는 제공사별 이벤트를 아래 공통 단계로 정규화합니
 
 관측 이벤트가 없는 값은 사실로 단정하지 않고 `inferred` 또는 `unverified`로 표시합니다. 시간 기반 건강 신호는 매분 다시 계산됩니다.
 
-화면의 최근 세션 기준은 마지막 활동 후 24시간입니다. 실행 중인 세션은 마지막 활동 시각과 관계없이 계속 표시합니다. `확인할 일`은 이 범위 안의 실제 응답 요청과 현재 실행 위험만 집계하며, 오래된 세션이나 단순한 낮은 확인 수준은 제외합니다.
+서브에이전트 작업 지시는 제공사 호출 로그에서 확인한 원문만 `assignment`로 취급합니다. Claude의 `Agent`/`Task` 도구는 `input.prompt`, Codex의 `spawn_agent`는 평문 `message`가 근거입니다. Codex가 `message`를 암호문으로 저장한 경우 직전 메인 AI 설명을 실제 전달 원문으로 대체하지 않으며, 원문은 `protected`, 직전 설명은 별도 참고 문맥으로 표시합니다.
+
+화면의 최근 세션 기준은 마지막 활동 후 24시간입니다. 실행 중인 세션은 마지막 활동 시각과 관계없이 계속 표시합니다. 앱이 실행 상태를 관측한 세션은 실행이 끝나도 마지막 AI 응답 후 30분 동안 관제 화면에서 `대기 중`으로 유지하며, 사용자가 직접 지난 기록으로 옮기면 즉시 제외합니다. 새 AI 응답이 생기면 이전의 수동 이동 기록은 무효화됩니다. `확인할 일`은 24시간 범위 안의 실제 응답 요청과 현재 실행 위험만 집계하며, 오래된 세션이나 단순한 낮은 확인 수준은 제외합니다.
 
 ## 명령·백그라운드 실행 계약
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loadtoagent",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "A local desktop dashboard for Claude, Codex, Gemini, and Grok sessions.",
   "main": "main.js",
   "author": "wincube AX",

package/renderer/app-dashboard.js

@@ -16,6 +16,7 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
     visibleSessions = () => ((state.snapshot && state.snapshot.sessions) || []),
     isProviderVisible = () => true,
     isRuntimeLoopSession = () => false,
+    isControlRoomSession = session => session?.status === "running" || session?.status === "starting",
   } = context;
 
   function displaySessions() {
@@ -64,11 +65,11 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
     return normalized.split("/").filter(Boolean).pop() || t("workspace.unknown");
   }
 
-  function observedProjects() {
+  function observedProjects(sessions = displaySessions().filter((session) => !session.parentId)) {
     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) => {
+    sessions.filter((session) => !session.parentId && !isProjectlessSession(session)).forEach((session) => {
       const originPath = sessionOriginPath(session);
       if (!originPath) return;
       const owner = saved
@@ -97,9 +98,26 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
   }
 
   function sessionWorkspaceLabel(session) {
-    return isProjectlessSession(session)
-      ? t("ui.no_project")
-      : (session && session.workspace) || projectName(sessionOriginPath(session));
+    if (isProjectlessSession(session)) return t("ui.no_project");
+    const originPath = sessionOriginPath(session);
+    const owner = state.workspaces
+      .filter((item) => projectContainsPath(item.path, originPath))
+      .sort((a, b) => normalizedProjectPath(b.path).length - normalizedProjectPath(a.path).length)[0];
+    return owner?.name || (session && session.workspace) || projectName(originPath);
+  }
+
+  function controlRoomProject(session) {
+    if (isProjectlessSession(session)) return { key: PROJECTLESS_WORKSPACE, path: PROJECTLESS_WORKSPACE, label: t("control.other_projects") };
+    const originPath = sessionOriginPath(session);
+    const owner = state.workspaces
+      .filter((item) => projectContainsPath(item.path, originPath))
+      .sort((a, b) => normalizedProjectPath(b.path).length - normalizedProjectPath(a.path).length)[0];
+    const path = owner?.path || originPath;
+    return {
+      key: normalizedProjectPath(path) || String(session?.workspace || session?.id || "unknown").toLocaleLowerCase(),
+      path,
+      label: owner?.name || (session && session.workspace) || projectName(originPath) || t("control.other_projects"),
+    };
   }
 
   function matchesWorkspaceFilter(session) {
@@ -109,21 +127,29 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
   }
 
   function renderWorkspaces() {
-    const lists = [$("#workspaceList"), $("#mobileWorkspaceList")].filter(Boolean);
     const rootSessions = displaySessions().filter((session) => !session.parentId);
-    const projects = observedProjects();
+    const liveRootSessions = rootSessions.filter(isControlRoomSession);
+    const projects = observedProjects(rootSessions);
+    const savedProjectOrder = new Map(state.workspaces.map((workspace, index) => [normalizedProjectPath(workspace.path), index]));
+    const liveProjects = observedProjects(liveRootSessions).sort((a, b) => {
+      const aOrder = savedProjectOrder.get(normalizedProjectPath(a.path));
+      const bOrder = savedProjectOrder.get(normalizedProjectPath(b.path));
+      if (aOrder != null || bOrder != null) return (aOrder ?? Number.MAX_SAFE_INTEGER) - (bOrder ?? Number.MAX_SAFE_INTEGER);
+      return Number(b.count || 0) - Number(a.count || 0) || String(a.name).localeCompare(String(b.name), uiLocale());
+    });
     const projectlessCount = rootSessions.filter(isProjectlessSession).length;
+    const liveProjectlessCount = liveRootSessions.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" : ""}"
+    const projectButton = (item, compactClass = "") => `<button type="button" class="workspace-item observed-project ${compactClass} ${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 =
+    const mobileHtml =
       `<button type="button" class="workspace-item ${state.workspace === "all" ? "selected" : ""}"
         data-workspace="all" aria-pressed="${state.workspace === "all" ? "true" : "false"}">
       <strong>${window.LoadToAgentI18n.t("project.all")}</strong><small>${rootSessions.length}</small>
@@ -144,7 +170,40 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
           title="${esc(window.LoadToAgentI18n.t("ui.remove_from_list"))}">×</button>
         </div>` : projectButton(item)).join("") +
       (!projects.length && !projectlessCount ? `<div class="workspace-empty">${window.LoadToAgentI18n.t("project.empty")}</div>` : "");
-    lists.forEach((list) => { list.innerHTML = html; });
+    const desktopHtml =
+      `<button type="button" class="workspace-item control-room-project-chip ${state.workspace === "all" ? "selected" : ""}"
+        data-workspace="all" aria-pressed="${state.workspace === "all" ? "true" : "false"}">
+      <strong>${esc(t("control.all_projects"))}</strong><small>${liveRootSessions.length}</small>
+      </button>` +
+      liveProjects.map((item) => projectButton(item, "control-room-project-chip")).join("") +
+      (liveProjectlessCount
+        ? `<button type="button" class="workspace-item projectless control-room-project-chip ${state.workspace === PROJECTLESS_WORKSPACE ? "selected" : ""}"
+          data-workspace="${PROJECTLESS_WORKSPACE}" aria-pressed="${state.workspace === PROJECTLESS_WORKSPACE ? "true" : "false"}">
+        <strong>${esc(t("control.other_projects"))}</strong><small>${liveProjectlessCount}</small>
+        </button>`
+        : "") +
+      (!liveProjects.length && !liveProjectlessCount ? `<div class="workspace-empty">${window.LoadToAgentI18n.t("project.empty")}</div>` : "");
+    const desktopList = $("#workspaceList");
+    const mobileList = $("#mobileWorkspaceList");
+    if (desktopList) desktopList.innerHTML = desktopHtml;
+    if (mobileList) mobileList.innerHTML = mobileHtml;
+    const projectSelect = $("#controlRoomProjectSelect");
+    if (projectSelect) {
+      projectSelect.innerHTML = `<option value="all">${esc(t("control.all_projects"))}</option>`
+        + liveProjects.map((item) => `<option value="${esc(item.path)}">${esc(item.name)}</option>`).join("")
+        + (liveProjectlessCount ? `<option value="${PROJECTLESS_WORKSPACE}">${esc(t("control.other_projects"))}</option>` : "");
+      projectSelect.value = [...projectSelect.options].some((option) => option.value === state.workspace) ? state.workspace : "all";
+    }
+    const controlSort = $("#controlRoomSortSelect");
+    if (controlSort) controlSort.value = state.controlRoomSort || "recent";
+    const controlSearch = $("#controlRoomSearchInput");
+    if (controlSearch && controlSearch.value !== state.search) controlSearch.value = state.search;
+    $("#controlRoomSearch")?.classList.toggle("is-open", Boolean(state.search));
+    $("#controlRoomSearchBtn")?.setAttribute("aria-expanded", state.search ? "true" : "false");
+    if (controlSearch) {
+      controlSearch.tabIndex = state.search ? 0 : -1;
+      controlSearch.setAttribute("aria-hidden", state.search ? "false" : "true");
+    }
     const selectedProject = projects.find((project) => normalizedProjectPath(project.path) === normalizedProjectPath(state.workspace));
     const mobileSummary = $("#mobileWorkspaceSummary");
     if (mobileSummary) mobileSummary.textContent = state.workspace === "all"
@@ -181,7 +240,7 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
       )
       .join("");
     $("#navAllCount").textContent = rootCount;
-    const activeRootCount = sessions.filter((session) => !session.parentId && ["running", "starting"].includes(session.status)).length;
+    const activeRootCount = sessions.filter((session) => !session.parentId && isControlRoomSession(session)).length;
     $("#navActiveCount").textContent = activeRootCount;
     const reviewCount = sessions.filter((session) => context.needsManagementReview?.(session)).length;
     $("#navWaitingCount").textContent = reviewCount;
@@ -426,7 +485,7 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
   function filteredSessions() {
     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 === "active") sessions = sessions.filter(isControlRoomSession);
     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);
@@ -489,7 +548,9 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
           .toLowerCase()
           .includes(query),
       );
-    return stableSessionSort(sessions);
+    if (state.controlRoomSort === "tokens") return [...sessions].sort((a, b) => Number((b.usage && b.usage.total) || 0) - Number((a.usage && a.usage.total) || 0));
+    if (state.controlRoomSort === "context") return [...sessions].sort((a, b) => Number((b.context && b.context.percent) || 0) - Number((a.context && a.context.percent) || 0));
+    return [...sessions].sort((a, b) => Date.parse(b.updatedAt || 0) - Date.parse(a.updatedAt || 0));
   }
 
   function renderProviderVisibilitySettings() {
@@ -515,6 +576,7 @@ window.LoadToAgentAppFactories.createDashboard = function createDashboard(contex
     sessionOriginPath,
     observedProjects,
     sessionWorkspaceLabel,
+    controlRoomProject,
     matchesWorkspaceFilter,
     renderWorkspaces,
     renderGlobalStats,

package/renderer/app-drawer-content.js

@@ -84,9 +84,149 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
       </details>`;
   }
 
+  function subagentCallEvents(session) {
+    const spawns = session?.collaboration?.spawns || [];
+    const children = (session?.childIds || [])
+      .map(id => state.details.get(id) || snapshotSession(id))
+      .filter(Boolean);
+    const recordedChildren = new Set(spawns.map(spawn => spawn.childId).filter(Boolean));
+    const records = spawns.concat(children
+      .filter(child => !recordedChildren.has(child.id)
+        && !spawns.some(spawn => (spawn.agentPath && child.agentPath === spawn.agentPath)
+          || (spawn.taskName && child.taskName === spawn.taskName)))
+      .map(child => ({
+        callId: `inferred:${child.id}`,
+        childId: child.id,
+        agentPath: child.agentPath,
+        taskName: child.taskName || child.delegation?.taskName || child.agentName,
+        assignment: child.delegation?.assignmentObserved ? child.delegation.assignment : "",
+        assignmentProtected: Boolean(child.delegation?.assignmentProtected),
+        assignmentSource: child.delegation?.assignmentSource || "unavailable",
+        status: child.status,
+        startedAt: child.delegation?.startedAt || child.startedAt,
+      })));
+    const calls = records.map((spawn, index) => {
+      const child = (spawn.childId && (state.details.get(spawn.childId) || snapshotSession(spawn.childId)))
+        || children.find(candidate => (spawn.agentPath && candidate.agentPath === spawn.agentPath)
+          || (spawn.taskName && candidate.taskName === spawn.taskName));
+      const timestamp = spawn.startedAt || child?.startedAt || session.startedAt || session.updatedAt;
+      const assignmentProtected = Boolean(spawn.assignmentProtected || child?.delegation?.assignmentProtected);
+      const observedAssignment = spawn.assignmentObserved
+        ? spawn.assignment
+        : (child?.delegation?.assignmentObserved ? child.delegation.assignment : "");
+      const childTitle = String(child?.title || "").trim();
+      return {
+        id: spawn.callId || child?.id || `subagent-call-${index}`,
+        childId: child?.id || spawn.childId || "",
+        taskName: spawn.taskName || child?.taskName || child?.agentName || t("control.subagent"),
+        assignment: observedAssignment,
+        workSummary: observedAssignment || (!assignmentProtected && childTitle && childTitle !== session.title ? childTitle : ""),
+        assignmentProtected,
+        assignmentSource: spawn.assignmentSource || child?.delegation?.assignmentSource || "unavailable",
+        status: child?.status || spawn.status || "idle",
+        timestamp,
+      };
+    }).sort((left, right) => Date.parse(left.timestamp || 0) - Date.parse(right.timestamp || 0));
+    const messages = session.messages || [];
+    return calls.map((call, index) => {
+      const calledAt = Date.parse(call.timestamp || 0);
+      const latestUserAt = messages.reduce((latest, message) => {
+        const messageAt = Date.parse(message?.timestamp || 0);
+        return message?.role === "user" && messageAt <= calledAt ? Math.max(latest, messageAt) : latest;
+      }, Number.NEGATIVE_INFINITY);
+      const anchor = [...messages].reverse().find(message => {
+        const messageAt = Date.parse(message?.timestamp || 0);
+        return message?.role === "assistant" && String(message.text || "").trim()
+          && messageAt <= calledAt && messageAt >= latestUserAt;
+      });
+      const anchorText = String(anchor?.text || "").replace(/\s+/g, " ").trim();
+      return {
+        ...call,
+        sequence: index + 1,
+        anchorText: anchorText.length > 240 ? `${anchorText.slice(0, 240).trimEnd()}…` : anchorText,
+        anchorTimestamp: anchor?.timestamp || "",
+        requestTimestamp: Number.isFinite(latestUserAt) ? new Date(latestUserAt).toISOString() : "",
+        elapsedAfterRequestMs: Number.isFinite(latestUserAt) && Number.isFinite(calledAt)
+          ? Math.max(0, calledAt - latestUserAt)
+          : null,
+      };
+    });
+  }
+
+  function subagentCallElapsed(milliseconds) {
+    if (!Number.isFinite(milliseconds)) return "";
+    const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+    if (totalSeconds < 1) return t("drawer.duration_less_than_second");
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    if (hours) return t("drawer.duration_hours_minutes_seconds", { hours, minutes, seconds });
+    if (minutes) return t("drawer.duration_minutes_seconds", { minutes, seconds });
+    return t("drawer.duration_seconds", { seconds });
+  }
+
+  function subagentCallStatus(status) {
+    if (status === "completed") return t("ui.completed");
+    if (status === "running" || status === "starting") return t("ui.working");
+    if (status === "waiting") return t("ui.waiting_for_review");
+    if (status === "failed") return t("ui.problem");
+    if (status === "cancelled") return t("ui.stopped");
+    return t("ui.idle");
+  }
+
+  function subagentCallHtml(call, options = {}) {
+    const fullTime = new Date(call.timestamp).toLocaleString(uiLocale());
+    const assignment = call.workSummary || call.assignment || (call.assignmentProtected ? t("drawer.assignment_protected_short") : call.taskName);
+    const elapsed = subagentCallElapsed(call.elapsedAfterRequestMs);
+    const timing = elapsed
+      ? t("drawer.called_after_user_request", { elapsed })
+      : t("drawer.subagent_called");
+    const anchorTime = call.anchorTimestamp ? timeOnly(call.anchorTimestamp) : "";
+    const anchor = call.anchorText
+      ? `<div class="subagent-call-anchor"><span aria-hidden="true">AI</span><div><small>${esc(t("drawer.called_after_main_message"))}${anchorTime ? ` · ${esc(anchorTime)}` : ""}</small><blockquote>${esc(call.anchorText)}</blockquote></div></div>`
+      : `<div class="subagent-call-anchor is-context-only"><span aria-hidden="true">AI</span><div><small>${esc(t("drawer.main_called_here"))}</small></div></div>`;
+    const showAnchor = options.showAnchor !== false || !call.anchorText;
+    const content = `<span class="subagent-call-icon" aria-hidden="true">⑂</span>
+      <span class="subagent-call-copy"><small class="subagent-call-timing">${esc(timing)}</small><span class="subagent-call-clock">${esc(t("drawer.subagent_call_point", { count: call.sequence }))} · <time title="${esc(fullTime)}">${esc(timeOnly(call.timestamp))}</time></span>
+      <b>${esc(assignment)}</b><span>${esc(t("drawer.subagent_name", { name: call.taskName }))}</span></span>
+      <span class="subagent-call-action"><em class="status-${esc(call.status)}">${esc(subagentCallStatus(call.status))}</em><strong>${esc(t("drawer.open_subagent_work"))} →</strong></span>`;
+    const event = !call.childId
+      ? `<div class="subagent-call-event is-unavailable" data-subagent-call-event="${esc(call.id)}">${content}</div>`
+      : `<button type="button" class="subagent-call-event" data-subagent-call-event="${esc(call.id)}"
+        data-open-subagent-chat="${esc(call.childId)}" aria-label="${esc(t("control.open_subagent", { task: call.taskName }))}">${content}</button>`;
+    return `<div class="subagent-call-moment${showAnchor ? "" : " is-inline"}" data-subagent-call-sequence="${call.sequence}"${Number.isFinite(call.elapsedAfterRequestMs) ? ` data-subagent-call-elapsed-ms="${call.elapsedAfterRequestMs}"` : ""}>${showAnchor ? anchor : ""}<span class="subagent-call-connector" aria-hidden="true"><i></i><b>↓</b></span>${event}</div>`;
+  }
+
+  function turnWithSubagentCallsHtml(turn, session, calls, labels) {
+    const representativeId = turn.representative?.id || "";
+    const items = [
+      ...turn.assistants.map((message, index) => ({ kind: "message", message, index, timestamp: message.timestamp })),
+      ...calls.map((call, index) => ({ kind: "call", call, index, timestamp: call.timestamp })),
+    ].sort((left, right) => {
+      const leftAt = Date.parse(left.timestamp || 0);
+      const rightAt = Date.parse(right.timestamp || 0);
+      if (leftAt !== rightAt) return leftAt - rightAt;
+      if (left.kind !== right.kind) return left.kind === "message" ? -1 : 1;
+      return left.index - right.index;
+    });
+    return items.map(item => {
+      if (item.kind === "call") return subagentCallHtml(item.call, { showAnchor: false });
+      const finalMessage = item.message.id === representativeId;
+      return conversationRowHtml(item.message, session, {
+        userLabel: labels.userLabel,
+        assistantLabel: labels.assistantLabel,
+        answerKind: finalMessage
+          ? t(turn.live ? "drawer.current_progress" : turn.awaitingFinal ? "drawer.last_progress" : "drawer.final_answer")
+          : t("drawer.main_progress_before_call"),
+        live: turn.live && finalMessage,
+      });
+    }).join("");
+  }
+
   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 calls = options.showSubagentCalls === false ? [] : subagentCallEvents(session);
+    if (!messages.length && !calls.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");
@@ -97,7 +237,7 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
       omitted || session.truncated
         ? `<div class="chat-truncated">${esc(t("drawer.recent_history"))}${omitted ? ` · ${esc(t("drawer.messages_omitted", { count: omitted.toLocaleString(uiLocale()) }))}` : ""}</div>`
         : "";
-    const rows = turns.map((turn) => {
+    const rows = turns.map((turn, turnIndex) => {
       const user = conversationRowHtml(turn.user, session, { userLabel, assistantLabel });
       const representative = conversationRowHtml(turn.representative, session, {
         userLabel,
@@ -108,16 +248,35 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
       const waiting = turn.live && !turn.representative
         ? `<div class="chat-turn-waiting"><span aria-hidden="true"></span><b>${esc(t("drawer.preparing_response"))}</b></div>`
         : "";
+      const turnStartedAt = Date.parse(turn.user?.timestamp || turn.representative?.timestamp || 0);
+      const nextTurnTimestamp = turns[turnIndex + 1]?.user?.timestamp;
+      const nextTurnStartedAt = nextTurnTimestamp ? Date.parse(nextTurnTimestamp) : Number.NaN;
+      const turnCalls = calls.filter(call => {
+        const calledAt = Date.parse(call.timestamp || 0);
+        if (Number.isFinite(turnStartedAt) && calledAt < turnStartedAt) return false;
+        return !Number.isFinite(nextTurnStartedAt) || calledAt < nextTurnStartedAt;
+      });
+      const timeline = turnCalls.length
+        ? turnWithSubagentCallsHtml(turn, session, turnCalls, { userLabel, assistantLabel })
+        : `${representative}${waiting}${progressUpdatesHtml(turn, session)}`;
       return `<section class="chat-turn${turn.live ? " is-live" : ""}" data-conversation-turn="${esc(turn.id)}">
-        ${user}${representative}${waiting}${progressUpdatesHtml(turn, session)}
+        ${user}${timeline}${turnCalls.length ? waiting : ""}
       </section>`;
     }).join("");
-    const emptyConversation = turns.length ? "" : `<div class="empty-state compact"><h3>${esc(t("drawer.no_user_ai_conversation"))}</h3></div>`;
+    const unmatchedCalls = calls.filter(call => !turns.some((turn, turnIndex) => {
+      const startedAt = Date.parse(turn.user?.timestamp || turn.representative?.timestamp || 0);
+      const nextTimestamp = turns[turnIndex + 1]?.user?.timestamp;
+      const nextStartedAt = nextTimestamp ? Date.parse(nextTimestamp) : Number.NaN;
+      const calledAt = Date.parse(call.timestamp || 0);
+      return (!Number.isFinite(startedAt) || calledAt >= startedAt) && (!Number.isFinite(nextStartedAt) || calledAt < nextStartedAt);
+    }));
+    const callOnlyRows = unmatchedCalls.map(subagentCallHtml).join("");
+    const emptyConversation = turns.length || calls.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.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}<div class="chat-latest-anchor" aria-label="${esc(t("drawer.latest_conversation"))}">
+      <div class="chat-list">${callOnlyRows}${rows}${emptyConversation}<div class="chat-latest-anchor" aria-label="${esc(t("drawer.latest_conversation"))}">
       </div>
       </div>`;
   }
@@ -265,7 +424,23 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
     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();
+    const delegatedAssignment = delegation.assignmentObserved && String(delegation.assignment || "").trim()
+      ? delegation.assignment
+      : "";
+    const eventAssignment = assignmentEvent && !assignmentEvent.protected ? assignmentEvent.text : "";
+    const assignment = String(delegatedAssignment || eventAssignment || "").trim();
+    const assignmentProtected = Boolean(delegation.assignmentProtected || assignmentEvent?.protected);
+    const assignmentContext = String(delegation.assignmentContext || "").trim();
+    const assignmentBody = assignment || (assignmentProtected
+      ? t("drawer.assignment_protected")
+      : t("management.signal_unavailable"));
+    const assignmentSource = delegation.assignmentSource === "claude-agent-prompt"
+      ? t("drawer.assignment_source_claude")
+      : delegation.assignmentSource === "spawn-message"
+        ? t("drawer.assignment_source_codex")
+        : assignmentProtected
+          ? t("drawer.assignment_source_protected")
+          : "";
     let assignmentRemoved = false;
     const messages = subagentWorkMessages(session).filter(message => {
       if (assignmentRemoved || message.role !== "user" || !assignment) return true;
@@ -279,7 +454,8 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
       ? t("drawer.subagent_history_reconstructed")
       : t("drawer.subagent_history_actual");
     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>
+      <span aria-hidden="true">⌁</span><div><b>${esc(t("control.main_assignment"))}</b>${parent ? `<small>${esc(t("control.created_from"))} · ${esc(parent.title)}</small>` : ""}${assignmentSource ? `<small>${esc(assignmentSource)}</small>` : ""}<p>${esc(assignmentBody)}</p>
+      ${assignmentContext ? `<aside><b>${esc(t("drawer.assignment_context"))}</b><p>${esc(assignmentContext)}</p></aside>` : ""}</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, {
@@ -306,7 +482,12 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
       : `${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,
+      activity.updatedAt ? {
+        label: activity.status === "running" || activity.status === "unverified"
+          ? 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">

package/renderer/app-drawer.js

@@ -6,7 +6,7 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
   const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const {
     $, $$, esc, state, motionPreference, motionState, STATUS, markGuideStep, rememberDialogTrigger, restoreDialogTrigger, setDialogOpenState,
-    providerInfo, isLiveSession, subagentWorkState, subagentWorkLabel, isProjectlessSession, sessionOriginPath, sessionWorkspaceLabel,
+    providerInfo, isLiveSession, controlRoomStatus = session => session?.status, subagentWorkState, subagentWorkLabel, isProjectlessSession, sessionOriginPath, sessionWorkspaceLabel,
     agentResumeSupport, originAppInfo, selectedSession, snapshotSession, loadSessionDetail, loadSubagentParentDetail,
     chatHtml, lifecycleHtml, tokensHtml, outcomeHtml, subagentCoordinationEvents, subagentConversationHtml, executionActivityDetailHtml,
     agentCommandComposer,
@@ -97,6 +97,7 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     const session = selectedSession();
     if (!session) return closeDrawer();
     const provider = providerInfo(session.provider);
+    const presentationStatus = controlRoomStatus(session);
     const subagentMode = state.drawerMode === "subagent" && Boolean(session.parentId);
     const executionMode = state.drawerMode === "execution" && Boolean(state.drawerExecutionId);
     const snapshot = snapshotSession(session.id);
@@ -115,8 +116,8 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     $("#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}`;
+      ? `${t("control.subagent")} · ${STATUS[presentationStatus] || presentationStatus}`
+      : `${provider.company} · ${STATUS[presentationStatus] || presentationStatus}`;
     const drawerTitle = executionMode
       ? context.inferredExecutionSummary(activity || {}).text
       : subagentMode ? session.title || session.taskName || (session.delegation && session.delegation.taskName) : session.title;

package/renderer/app-events-dialogs.js

@@ -9,7 +9,7 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
     closeDrawer, renderDrawer, providerPickerHtml, syncRunComposer, openRunModal, closeRunModal, toast, performUiAction,
     handleRun, trapDialogFocus, currentDialog, selectView, saveRunDraft = () => {}, safeBackdrop = null,
     copyText = async () => false,
-    dispatchAgentCommand, controlManagedRun, quickRespond, prepareReassignment,
+    dispatchAgentCommand, controlManagedRun, quickRespond, prepareReassignment, openSubagentConversation,
   } = context;
 
   function bindRunComposerEvents() {
@@ -161,6 +161,11 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
       $(`.drawer-tab[data-tab="${state.drawerTab}"]`)?.focus();
     });
     $("#detailDrawer").addEventListener("click", async (event) => {
+      const subagent = event.target.closest("[data-open-subagent-chat]");
+      if (subagent) {
+        openSubagentConversation(subagent.dataset.openSubagentChat);
+        return;
+      }
       const route = event.target.closest("[data-agent-command-route]");
       if (route) {
         state.agentCommandRoutes.set(route.dataset.agentCommandSession, route.dataset.agentCommandRoute);

package/renderer/app-events-filters.js

@@ -9,7 +9,7 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
   function bindFilterAndWorkspaceEvents() {
     const syncFilterResetButton = () => {
       const hasFilters = Boolean(
-        $("#searchInput").value || state.search || state.providerFilters.size || state.workspace !== "all" || state.sort !== "recent",
+        $("#searchInput").value || state.search || state.providerFilters.size || state.workspace !== "all" || state.sort !== "recent" || state.controlRoomSort !== "recent",
       );
       $("#resetFiltersBtn").classList.toggle("hidden", !hasFilters);
     };
@@ -62,6 +62,7 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
       if (item) {
         const label = item.querySelector("strong")?.textContent.trim() || t("project.all");
         state.workspace = item.dataset.workspace;
+        state.controlRoomPage = 0;
         state.visibleLimit = 30;
         renderWorkspaces();
         renderSessions("filter");
@@ -85,9 +86,80 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
     workspaceLists.forEach((list) => {
       list.addEventListener("click", handleWorkspaceClick);
       list.addEventListener("keydown", (event) => {
-        moveFocus(event, event.currentTarget, "[data-workspace]", ["ArrowUp"], ["ArrowDown"]);
+        const horizontal = event.currentTarget.id === "workspaceList";
+        moveFocus(event, event.currentTarget, "[data-workspace]", horizontal ? ["ArrowLeft", "ArrowUp"] : ["ArrowUp"], horizontal ? ["ArrowRight", "ArrowDown"] : ["ArrowDown"]);
       });
     });
+    const controlProjectSelect = $("#controlRoomProjectSelect");
+    controlProjectSelect?.addEventListener("change", (event) => {
+      state.workspace = event.target.value;
+      state.controlRoomPage = 0;
+      state.visibleLimit = 30;
+      renderWorkspaces();
+      renderSessions("filter");
+      syncFilterResetButton();
+      saveDashboardPreferences();
+      announce(t("filter.workspace_results", { project: event.target.selectedOptions[0]?.textContent || t("control.all_projects"), count: filteredSessions().length }));
+    });
+    const controlSortSelect = $("#controlRoomSortSelect");
+    controlSortSelect?.addEventListener("change", (event) => {
+      state.controlRoomSort = event.target.value;
+      state.controlRoomPage = 0;
+      state.visibleLimit = 30;
+      renderSessions("filter");
+      syncFilterResetButton();
+      saveDashboardPreferences();
+      announce(t("filter.sort_changed", { sort: event.target.selectedOptions[0]?.textContent || event.target.value, count: filteredSessions().length }));
+    });
+    const controlSearch = $("#controlRoomSearch");
+    const controlSearchInput = $("#controlRoomSearchInput");
+    const controlSearchButton = $("#controlRoomSearchBtn");
+    let controlSearchTimer = null;
+    const setControlSearchOpen = (open) => {
+      controlSearch?.classList.toggle("is-open", open);
+      controlSearchButton?.setAttribute("aria-expanded", open ? "true" : "false");
+      if (controlSearchInput) {
+        controlSearchInput.tabIndex = open ? 0 : -1;
+        controlSearchInput.setAttribute("aria-hidden", open ? "false" : "true");
+      }
+      if (open) requestAnimationFrame(() => controlSearchInput?.focus());
+    };
+    controlSearchButton?.addEventListener("click", () => setControlSearchOpen(!controlSearch?.classList.contains("is-open")));
+    controlSearchInput?.addEventListener("input", (event) => {
+      clearTimeout(controlSearchTimer);
+      const value = event.target.value;
+      if ($("#searchInput")) $("#searchInput").value = value;
+      controlSearchTimer = setTimeout(() => {
+        state.search = normalizedSearch(value);
+        state.controlRoomPage = 0;
+        state.visibleLimit = 30;
+        renderSessions("filter");
+        syncFilterResetButton();
+        saveDashboardPreferences();
+        announce(t("filter.search_results", { count: filteredSessions().length }));
+      }, 120);
+    });
+    controlSearchInput?.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      if (event.currentTarget.value) {
+        event.currentTarget.value = "";
+        event.currentTarget.dispatchEvent(new Event("input", { bubbles: true }));
+      } else {
+        setControlSearchOpen(false);
+        controlSearchButton?.focus();
+      }
+    });
+    $("#controlRoomPagePrev")?.addEventListener("click", (event) => {
+      state.controlRoomPage = Math.max(0, Number(state.controlRoomPage || 0) - 1);
+      renderSessions("filter");
+      event.currentTarget.focus({ preventScroll: true });
+    });
+    $("#controlRoomPageNext")?.addEventListener("click", (event) => {
+      state.controlRoomPage = Math.max(0, Number(state.controlRoomPage || 0) + 1);
+      renderSessions("filter");
+      event.currentTarget.focus({ preventScroll: true });
+    });
     let searchTimer = null;
     $("#searchInput").addEventListener("input", (event) => {
       clearTimeout(searchTimer);
@@ -96,6 +168,7 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
       syncFilterResetButton();
       searchTimer = setTimeout(() => {
         state.search = normalizedSearch(value);
+        state.controlRoomPage = 0;
         state.visibleLimit = 30;
         renderSessions("filter");
         announce(window.LoadToAgentI18n.t("filter.search_results", { count: filteredSessions().length }));
@@ -108,6 +181,7 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
       $("#searchInput").value = "";
       $("#searchClearBtn").classList.add("hidden");
       state.search = "";
+      state.controlRoomPage = 0;
       state.visibleLimit = 30;
       renderSessions("filter");
       announce(window.LoadToAgentI18n.t("filter.search_cleared"));
@@ -138,6 +212,7 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
       const chip = event.target.closest("[data-provider-filter]");
       if (!chip) return;
       toggleProviderFilter(chip.dataset.providerFilter);
+      state.controlRoomPage = 0;
       state.visibleLimit = 30;
       renderProviderFilter();
       renderProviderOverview();
@@ -154,6 +229,7 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
     });
     $("#sortSelect").addEventListener("change", (event) => {
       state.sort = event.target.value;
+      state.controlRoomPage = 0;
       state.visibleLimit = 30;
       renderSessions("filter");
       const label = event.target.selectedOptions[0]?.textContent || event.target.value;
@@ -167,6 +243,8 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
       state.providerFilters.clear();
       state.workspace = "all";
       state.sort = "recent";
+      state.controlRoomSort = "recent";
+      state.controlRoomPage = 0;
       state.visibleLimit = 30;
       $("#searchInput").value = "";
       $("#searchClearBtn").classList.add("hidden");