loadtoagent 1.3.7 → 1.3.9

package/renderer/app-drawer-content.js

@@ -6,6 +6,7 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
   const {
     esc, uiLocale, state, messageContentHtml, compact, fullNumber, timeOnly, providerInfo, statusIcon, agentPathTaskName, snapshotSession,
     controlRoomAgentGoal, inferredExecutionSummary, executionActivityLabel, executionActivityStatus,
+    conversationDeliveryState, observeConversationDelivery,
   } = context;
   const t = (key, params) => window.LoadToAgentI18n.t(key, params);
 
@@ -38,7 +39,7 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
       if (message.role === "tool" && current && current.assistants.length) current.activityAfterAssistant = true;
     }
     const latestIndex = turns.length - 1;
-    const live = session.status === "running" || session.status === "starting";
+    const live = options.forceLatestLive || session.status === "running" || session.status === "starting";
     return turns.map((turn, index) => ({
       ...turn,
       representative: turn.assistants.at(-1) || null,
@@ -57,31 +58,81 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
     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 || "")}">
+    const deliveryStatusKey = {
+      sending: "drawer.message_sending",
+      confirming: "drawer.message_confirming",
+      delayed: "drawer.message_unconfirmed",
+      received: "drawer.message_received",
+      responding: "drawer.message_responding",
+      failed: "drawer.message_failed",
+    };
+    const deliveryStatus = !assistant && message.deliveryStatus
+      ? `<span class="chat-delivery-status ${esc(message.deliveryStatus)}">${esc(t(deliveryStatusKey[message.deliveryStatus]
+        || "drawer.message_sent"))}</span>`
+      : "";
+    const optimisticClasses = message.optimistic
+      ? ` is-optimistic is-${esc(message.deliveryStatus || "awaiting")}${message.animate ? " is-new" : ""}`
+      : "";
+    return `<div class="chat-row ${assistant ? "assistant" : "user"}${optimisticClasses}" 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}
+      <span title="${esc(fullTime)}">${esc(timeOnly(message.timestamp))}</span>${deliveryStatus}${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 conversationOverlay(session) {
+    const pending = state.pendingConversationMessages.get(session.id) || [];
+    if (!pending.length) return { session, forceLatestLive: false };
+    const messages = [...(session.messages || [])];
+    const retained = [];
+    let forceLatestLive = false;
+    for (const entry of pending) {
+      const delivery = conversationDeliveryState({ ...session, messages }, entry);
+      if (!delivery) continue;
+      observeConversationDelivery(session, entry, delivery);
+      if (delivery.phase === "responded") {
+        clearTimeout(entry.confirmationTimer);
+        continue;
+      }
+      const tracking = {
+        phase: delivery.phase,
+        elapsedMs: delivery.elapsedMs,
+        error: entry.error || "",
+        receivedAt: delivery.receivedAt,
+        responseObservedAt: delivery.responseObservedAt,
+      };
+      if (!delivery.userMessage) {
+        messages.push({
+          id: entry.id,
+          role: "user",
+          text: entry.text,
+          timestamp: entry.timestamp,
+          optimistic: true,
+          animate: !entry.presented,
+          deliveryStatus: delivery.phase,
+          deliveryTracking: tracking,
+        });
+        entry.presented = true;
+      } else {
+        const actualIndex = messages.indexOf(delivery.userMessage);
+        if (actualIndex >= 0) {
+          messages[actualIndex] = {
+            ...delivery.userMessage,
+            deliveryStatus: delivery.phase,
+            deliveryTracking: tracking,
+          };
+        }
+      }
+      forceLatestLive = true;
+      retained.push(entry);
+    }
+    if (retained.length) state.pendingConversationMessages.set(session.id, retained);
+    else state.pendingConversationMessages.delete(session.id);
+    messages.sort((left, right) => Date.parse(left.timestamp || 0) - Date.parse(right.timestamp || 0));
+    return { session: { ...session, messages }, forceLatestLive };
   }
 
   function subagentCallEvents(session) {
@@ -211,27 +262,80 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
     });
     return items.map(item => {
       if (item.kind === "call") return subagentCallHtml(item.call, { showAnchor: false });
-      const finalMessage = item.message.id === representativeId;
+      const finalMessage = item.index === turn.assistants.length - 1
+        || (representativeId && 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 deliveryProgressHtml(tracking) {
+    if (!tracking) {
+      return `<div class="chat-delivery-progress phase-observed" data-delivery-phase="observed" role="status" aria-live="polite">
+        <header><span aria-hidden="true"></span><div><b>${esc(t("drawer.delivery_observed_title"))}</b><small>${esc(t("drawer.delivery_observed_detail"))}</small></div></header>
+        <ol>
+          <li class="done"><i aria-hidden="true">✓</i><span><b>${esc(t("drawer.delivery_observed_message"))}</b><small>${esc(t("drawer.delivery_observed_message_help"))}</small></span></li>
+          <li class="active"><i aria-hidden="true">2</i><span><b>${esc(t("drawer.delivery_observed_session"))}</b><small>${esc(t("drawer.delivery_observed_session_help"))}</small></span></li>
+        </ol>
+        <footer><i aria-hidden="true">◎</i><span>${esc(t("drawer.delivery_evidence_observed"))}</span></footer>
+      </div>`;
+    }
+    const phase = tracking.phase || "confirming";
+    const copy = {
+      sending: ["drawer.delivery_sending_title", "drawer.delivery_sending_detail", "drawer.delivery_evidence_sending"],
+      confirming: ["drawer.delivery_confirming_title", "drawer.delivery_confirming_detail", "drawer.delivery_evidence_confirming"],
+      delayed: ["drawer.delivery_delayed_title", "drawer.delivery_delayed_detail", "drawer.delivery_evidence_delayed"],
+      received: ["drawer.delivery_received_title", "drawer.delivery_received_detail", "drawer.delivery_evidence_received"],
+      responding: ["drawer.delivery_responding_title", "drawer.delivery_responding_detail", "drawer.delivery_evidence_responding"],
+      failed: ["drawer.delivery_failed_title", "drawer.delivery_failed_detail", "drawer.delivery_evidence_failed"],
+    }[phase] || ["drawer.delivery_confirming_title", "drawer.delivery_confirming_detail", "drawer.delivery_evidence_confirming"];
+    const stepState = (step) => {
+      if (phase === "failed") return step === 0 ? "error" : "pending";
+      if (phase === "sending") return step === 0 ? "active" : "pending";
+      if (phase === "confirming" || phase === "delayed") {
+        if (step === 0) return "done";
+        if (step === 1) return phase === "delayed" ? "warning" : "active";
+        return "pending";
+      }
+      if (phase === "received") return step < 2 ? "done" : "active";
+      if (phase === "responding") return step < 2 ? "done" : "active";
+      return "pending";
+    };
+    const steps = [
+      ["drawer.delivery_step_dispatch", "drawer.delivery_step_dispatch_help"],
+      ["drawer.delivery_step_received", "drawer.delivery_step_received_help"],
+      ["drawer.delivery_step_response", "drawer.delivery_step_response_help"],
+    ].map(([label, detail], index) => {
+      const status = stepState(index);
+      const marker = status === "done" ? "✓" : status === "error" ? "!" : String(index + 1);
+      return `<li class="${status}"><i aria-hidden="true">${marker}</i><span><b>${esc(t(label))}</b><small>${esc(t(detail))}</small></span></li>`;
+    }).join("");
+    const detail = phase === "failed" && tracking.error
+      ? t("drawer.delivery_failed_with_reason", { reason: tracking.error })
+      : t(copy[1]);
+    return `<div class="chat-delivery-progress phase-${esc(phase)}" data-delivery-phase="${esc(phase)}" role="status" aria-live="polite">
+      <header><span aria-hidden="true"></span><div><b>${esc(t(copy[0]))}</b><small>${esc(detail)}</small></div></header>
+      <ol>${steps}</ol>
+      <footer><i aria-hidden="true">◎</i><span>${esc(t(copy[2]))}</span></footer>
+    </div>`;
+  }
+
   function chatHtml(session, options = {}) {
+    const overlay = conversationOverlay(session);
+    session = overlay.session;
     const messages = session.messages || [];
     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");
-    const turns = conversationTurns(session, options);
-    const progressCount = turns.reduce((sum, turn) => sum + turn.progress.length, 0);
+    const turns = conversationTurns(session, { ...options, forceLatestLive: overlay.forceLatestLive });
     const omitted = Number(session.omittedMessages || 0);
     const notice =
       omitted || session.truncated
@@ -239,14 +343,8 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
         : "";
     const rows = turns.map((turn, turnIndex) => {
       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>`
+        ? deliveryProgressHtml(turn.user?.deliveryTracking)
         : "";
       const turnStartedAt = Date.parse(turn.user?.timestamp || turn.representative?.timestamp || 0);
       const nextTurnTimestamp = turns[turnIndex + 1]?.user?.timestamp;
@@ -256,11 +354,9 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
         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)}`;
+      const timeline = turnWithSubagentCallsHtml(turn, session, turnCalls, { userLabel, assistantLabel });
       return `<section class="chat-turn${turn.live ? " is-live" : ""}" data-conversation-turn="${esc(turn.id)}">
-        ${user}${timeline}${turnCalls.length ? waiting : ""}
+        ${user}${timeline}${waiting}
       </section>`;
     }).join("");
     const unmatchedCalls = calls.filter(call => !turns.some((turn, turnIndex) => {
@@ -273,7 +369,7 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
     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>
+      <span>${esc(t("drawer.turn_summary", { label: conversationLabel, count: turns.length, updates: "" }))}</span>
       <button type="button" data-scroll-latest>${esc(t("drawer.latest_conversation"))} ↓</button>
       </div>
       <div class="chat-list">${callOnlyRows}${rows}${emptyConversation}<div class="chat-latest-anchor" aria-label="${esc(t("drawer.latest_conversation"))}">
@@ -375,17 +471,31 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
       const inheritedText = parentMessageKeys.has(messageKey(message));
       return !inheritedId && !inheritedText;
     });
+    const existingKeys = new Set(messages.map(messageKey));
+    for (const event of subagentCoordinationEvents(session)) {
+      if (!["followup", "message"].includes(event.kind) || !normalizedText(event.text)) continue;
+      const message = {
+        id: `${session.id}:coordination:${event.id}`,
+        role: "user",
+        text: event.text,
+        timestamp: event.timestamp || session.updatedAt,
+        source: "coordination",
+      };
+      const key = messageKey(message);
+      if (existingKeys.has(key)) continue;
+      messages.push(message);
+      existingKeys.add(key);
+    }
     const hasConversation = messages.some((message) =>
       (message.role === "user" || message.role === "assistant") && String(message.text || "").trim(),
     );
-    if (hasConversation) return messages;
-    if (delegation.assignmentObserved && !delegation.assignmentProtected && String(delegation.assignment || "").trim()) {
+    if (!hasConversation && delegation.assignmentObserved && !delegation.assignmentProtected && String(delegation.assignment || "").trim()) {
       messages.push({
         id: `${session.id}:delegation`, role: "user", text: delegation.assignment,
         timestamp: delegation.startedAt || session.startedAt || session.updatedAt,
       });
     }
-    if (String(session.result || delegation.result || "").trim()) {
+    if (!hasConversation && String(session.result || delegation.result || "").trim()) {
       messages.push({
         id: `${session.id}:result`, role: "assistant", text: session.result || delegation.result,
         timestamp: session.completedAt || delegation.completedAt || session.updatedAt,
@@ -515,5 +625,9 @@ window.LoadToAgentAppFactories.createDrawerContent = function createDrawerConten
     </div>`;
   }
 
-  return { conversationTurns, chatHtml, lifecycleHtml, tokensHtml, subagentCommunicationEvents, subagentCoordinationEvents, subagentTextPreview, subagentConversationHtml, executionActivityDetailHtml };
+  return {
+    conversationTurns, chatHtml, lifecycleHtml, tokensHtml,
+    subagentCommunicationEvents, subagentCoordinationEvents, subagentWorkMessages,
+    subagentTextPreview, subagentConversationHtml, executionActivityDetailHtml,
+  };
 };

package/renderer/app-drawer.js

@@ -7,11 +7,20 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
   const {
     $, $$, esc, state, motionPreference, motionState, STATUS, markGuideStep, rememberDialogTrigger, restoreDialogTrigger, setDialogOpenState,
     providerInfo, isLiveSession, controlRoomStatus = session => session?.status, subagentWorkState, subagentWorkLabel, isProjectlessSession, sessionOriginPath, sessionWorkspaceLabel,
+    pendingConversationDelivery = () => null,
     agentResumeSupport, originAppInfo, selectedSession, snapshotSession, loadSessionDetail, loadSubagentParentDetail,
     chatHtml, lifecycleHtml, tokensHtml, outcomeHtml, subagentCoordinationEvents, subagentConversationHtml, executionActivityDetailHtml,
     agentCommandComposer,
     rememberDisclosureStates = () => {}, restoreDisclosureStates = () => {},
   } = context;
+  const deliveryLabelKey = (phase) => ({
+    sending: "control.delivery_sending",
+    confirming: "control.delivery_confirming",
+    delayed: "control.delivery_delayed",
+    received: "control.delivery_received",
+    responding: "control.delivery_responding",
+    failed: "control.delivery_failed",
+  })[phase] || "control.delivery_confirming";
 
   function openDrawer(id) {
     rememberDialogTrigger();
@@ -98,6 +107,8 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     if (!session) return closeDrawer();
     const provider = providerInfo(session.provider);
     const presentationStatus = controlRoomStatus(session);
+    const delivery = pendingConversationDelivery(session);
+    const presentationLabel = delivery ? t(deliveryLabelKey(delivery.phase)) : STATUS[presentationStatus] || presentationStatus;
     const subagentMode = state.drawerMode === "subagent" && Boolean(session.parentId);
     const executionMode = state.drawerMode === "execution" && Boolean(state.drawerExecutionId);
     const snapshot = snapshotSession(session.id);
@@ -116,8 +127,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[presentationStatus] || presentationStatus}`
-      : `${provider.company} · ${STATUS[presentationStatus] || presentationStatus}`;
+      ? `${t("control.subagent")} · ${presentationLabel}`
+      : `${provider.company} · ${presentationLabel}`;
     const drawerTitle = executionMode
       ? context.inferredExecutionSummary(activity || {}).text
       : subagentMode ? session.title || session.taskName || (session.delegation && session.delegation.taskName) : session.title;

package/renderer/app-events-filters.js

@@ -4,7 +4,7 @@ window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
 
 window.LoadToAgentAppFactories.createFilterEventBindings = function createFilterEventBindings(context = {}) {
   const t = (key, params) => window.LoadToAgentI18n.t(key, params);
-  const { $, state, setProviderVisible = () => {}, visibleSnapshot = () => state.snapshot, closeDrawer = () => {}, openDrawer = () => {}, renderSessions, render, renderWorkspaces, renderProviderOverview, renderProviderFilter, toggleProviderFilter, announceProviderFilter, filteredSessions, performUiAction, toast, announce, normalizedSearch = (value) => String(value || "").trim(), saveDashboardPreferences = () => {}, restoreDialogTrigger = () => {}, setDialogOpenState = () => {} } = context;
+  const { $, state, setProviderVisible = () => {}, visibleSnapshot = () => state.snapshot, closeDrawer = () => {}, openDrawer = () => {}, renderSessions, render, renderWorkspaces, renderProviderOverview, renderProviderFilter, toggleProviderFilter, announceProviderFilter, filteredSessions, performUiAction, toast, announce, normalizedSearch = (value) => String(value || "").trim(), saveDashboardPreferences = () => {}, restoreDialogTrigger = () => {}, setDialogOpenState = () => {}, syncControlRoomDisclosureButtons = () => {} } = context;
 
   function bindFilterAndWorkspaceEvents() {
     const syncFilterResetButton = () => {
@@ -62,7 +62,6 @@ 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");
@@ -74,9 +73,12 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
           setDialogOpenState(menu, false);
           menu?.classList.add("hidden");
           $("#mobileMoreBtn")?.setAttribute("aria-expanded", "false");
-          const focusResults = () => ($("#liveSessionGrid")?.querySelector("[data-graph-focus], [data-open-session]")
-            || $("#sessionGrid")?.querySelector("[data-session-id]")
-            || $("#mainContent"))?.focus({ preventScroll: true });
+          const focusResults = () => {
+            const result = $("#liveSessionGrid")?.querySelector("[data-graph-focus], [data-open-session]")
+              || $("#sessionGrid")?.querySelector("[data-session-id]");
+            result?.focus({ preventScroll: true });
+            if (document.activeElement !== result) $("#mainContent")?.focus({ preventScroll: true });
+          };
           restoreDialogTrigger();
           focusResults();
           requestAnimationFrame(focusResults);
@@ -93,7 +95,6 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
     const controlProjectSelect = $("#controlRoomProjectSelect");
     controlProjectSelect?.addEventListener("change", (event) => {
       state.workspace = event.target.value;
-      state.controlRoomPage = 0;
       state.visibleLimit = 30;
       renderWorkspaces();
       renderSessions("filter");
@@ -104,7 +105,6 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
     const controlSortSelect = $("#controlRoomSortSelect");
     controlSortSelect?.addEventListener("change", (event) => {
       state.controlRoomSort = event.target.value;
-      state.controlRoomPage = 0;
       state.visibleLimit = 30;
       renderSessions("filter");
       syncFilterResetButton();
@@ -131,7 +131,6 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
       if ($("#searchInput")) $("#searchInput").value = value;
       controlSearchTimer = setTimeout(() => {
         state.search = normalizedSearch(value);
-        state.controlRoomPage = 0;
         state.visibleLimit = 30;
         renderSessions("filter");
         syncFilterResetButton();
@@ -150,16 +149,18 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
         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 });
-    });
+    const setAllControlRoomGroups = (open) => {
+      document.querySelectorAll("#liveSessionGrid .control-room-project-group").forEach(group => {
+        group.open = open;
+      });
+      syncControlRoomDisclosureButtons();
+      announce(t(open ? "control.all_projects_expanded" : "control.all_projects_collapsed"));
+    };
+    $("#controlRoomExpandAll")?.addEventListener("click", () => setAllControlRoomGroups(true));
+    $("#controlRoomCollapseAll")?.addEventListener("click", () => setAllControlRoomGroups(false));
+    $("#liveSessionGrid")?.addEventListener("toggle", (event) => {
+      if (event.target.matches?.(".control-room-project-group")) syncControlRoomDisclosureButtons();
+    }, true);
     let searchTimer = null;
     $("#searchInput").addEventListener("input", (event) => {
       clearTimeout(searchTimer);
@@ -168,7 +169,6 @@ 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 }));
@@ -181,7 +181,6 @@ 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"));
@@ -212,7 +211,6 @@ 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();
@@ -229,7 +227,6 @@ 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;
@@ -244,7 +241,6 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
       state.workspace = "all";
       state.sort = "recent";
       state.controlRoomSort = "recent";
-      state.controlRoomPage = 0;
       state.visibleLimit = 30;
       $("#searchInput").value = "";
       $("#searchClearBtn").classList.add("hidden");

package/renderer/app-events-sessions.js

@@ -10,10 +10,12 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
     copyText = async () => false,
     announce = () => {},
     moveSessionOrder = () => false,
+    moveProjectOrder = () => false,
     archiveSession = () => false,
   } = context;
 
   let sessionDragJustEnded = false;
+  let projectDragEndedAt = 0;
 
   const sortableSessionId = node => String(node?.dataset.sessionSortable || "");
   const clearSessionDropState = container => {
@@ -118,6 +120,96 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
     });
   };
 
+  const bindSortableProjectGroups = (container) => {
+    const selector = ".control-room-project-group[data-project-sortable]";
+    let draggedProjectId = "";
+    const projectId = node => String(node?.dataset.projectSortable || "");
+    const clearProjectDropState = () => {
+      container.querySelectorAll(selector).forEach(group => {
+        group.classList.remove("project-sort-dragging");
+        group.removeAttribute("data-project-drop-edge");
+        group.querySelector(":scope > .control-project-header")?.setAttribute("aria-grabbed", "false");
+      });
+    };
+    const finishProjectDrag = () => {
+      clearProjectDropState();
+      draggedProjectId = "";
+      projectDragEndedAt = Date.now();
+    };
+    const commitProjectPosition = (sourceId, targetId, placeAfter, focusSource = false) => {
+      if (!moveProjectOrder(sourceId, targetId, placeAfter)) return false;
+      saveDashboardPreferences();
+      renderSessions("reorder");
+      announce(window.LoadToAgentI18n.t("project.position_changed"));
+      if (focusSource) {
+        requestAnimationFrame(() => container
+          .querySelector(`${selector}[data-project-sortable="${CSS.escape(sourceId)}"] > .control-project-header`)
+          ?.focus({ preventScroll: true }));
+      }
+      return true;
+    };
+    container.addEventListener("dragstart", (event) => {
+      const header = event.target.closest(".control-project-header[draggable='true']");
+      const group = header?.closest(selector);
+      if (!group) return;
+      draggedProjectId = projectId(group);
+      if (!draggedProjectId) {
+        event.preventDefault();
+        return;
+      }
+      group.classList.add("project-sort-dragging");
+      header.setAttribute("aria-grabbed", "true");
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", draggedProjectId);
+        event.dataTransfer.setData("application/x-loadtoagent-project-list", container.id);
+        event.dataTransfer.setDragImage(header, 20, 20);
+      }
+    });
+    container.addEventListener("dragover", (event) => {
+      if (!draggedProjectId) return;
+      const target = event.target.closest(selector);
+      if (!target || projectId(target) === draggedProjectId) return;
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+      container.querySelectorAll(`${selector}[data-project-drop-edge]`).forEach(group => group.removeAttribute("data-project-drop-edge"));
+      const bounds = target.getBoundingClientRect();
+      target.dataset.projectDropEdge = event.clientY > bounds.top + bounds.height / 2 ? "bottom" : "top";
+    });
+    container.addEventListener("drop", (event) => {
+      if (!draggedProjectId) return;
+      const target = event.target.closest(selector);
+      if (!target || projectId(target) === draggedProjectId) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const bounds = target.getBoundingClientRect();
+      const changed = commitProjectPosition(
+        draggedProjectId,
+        projectId(target),
+        event.clientY > bounds.top + bounds.height / 2,
+      );
+      finishProjectDrag();
+      if (!changed) clearProjectDropState();
+    });
+    container.addEventListener("dragend", finishProjectDrag);
+    container.addEventListener("dragleave", (event) => {
+      if (!container.contains(event.relatedTarget)) clearProjectDropState();
+    });
+    container.addEventListener("keydown", (event) => {
+      const header = event.target.closest(".control-project-header[draggable='true']");
+      if (!header || event.target !== header || !event.altKey || !["ArrowUp", "ArrowDown"].includes(event.key)) return;
+      const group = header.closest(selector);
+      const groups = Array.from(container.querySelectorAll(selector));
+      const current = groups.indexOf(group);
+      const offset = event.key === "ArrowUp" ? -1 : 1;
+      const target = groups[current + offset];
+      if (current < 0 || !target) return;
+      event.preventDefault();
+      event.stopPropagation();
+      commitProjectPosition(projectId(group), projectId(target), offset > 0, true);
+    });
+  };
+
   const managementFilterLabel = value => value === "all" ? window.LoadToAgentI18n.t("management.filter_all") : window.LoadToAgentI18n.t(`management.health.${value}`);
   const announceManagementFilter = value => announce(window.LoadToAgentI18n.t("management.filter_results", {
     filter: managementFilterLabel(value),
@@ -336,7 +428,13 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
 
   function bindLiveAgentEvents() {
     bindSortableSessionList($("#liveSessionGrid"), "[data-control-session][data-session-sortable]");
+    bindSortableProjectGroups($("#liveSessionGrid"));
     $("#liveSessionGrid").addEventListener("click", async (event) => {
+      if (Date.now() - projectDragEndedAt < 250 && event.target.closest(".control-project-header")) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
       if (sessionDragJustEnded) return;
       const archive = event.target.closest("[data-session-archive]");
       if (archive) {

package/renderer/app-graph-model.js

@@ -11,6 +11,7 @@ window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(cont
     compact,
     isLiveSession,
     isControlRoomSession = isLiveSession,
+    isSessionManuallyArchived = () => false,
     stableSessionSort = sessions => [...sessions],
   } = context;
 
@@ -33,7 +34,7 @@ window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(cont
       let current = session;
       const seen = new Set();
       while (current && !seen.has(current.id)) {
-        included.add(current.id);
+        if (!isSessionManuallyArchived(current) || isControlRoomSession(current)) included.add(current.id);
         seen.add(current.id);
         current = current.parentId ? byId.get(current.parentId) : null;
       }
@@ -58,7 +59,10 @@ window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(cont
     }
     for (const id of [...included]) {
       const session = byId.get(id);
-      for (const childId of (session && session.childIds) || []) included.add(childId);
+      for (const childId of (session && session.childIds) || []) {
+        const child = byId.get(childId);
+        if (child && (!isSessionManuallyArchived(child) || isControlRoomSession(child))) included.add(childId);
+      }
     }
     return { byId, included, nodes: sessions.filter((session) => included.has(session.id)) };
   }