loadtoagent 1.3.5 → 1.3.7

package/renderer/app-events-sessions.js

@@ -10,21 +10,112 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
     copyText = async () => false,
     announce = () => {},
     moveSessionOrder = () => false,
+    archiveSession = () => false,
   } = context;
 
-  const moveVisibleSession = (button, container, selector) => {
-    const nodes = Array.from(container.querySelectorAll(selector));
-    const current = nodes.findIndex(node => (node.dataset.controlSession || node.dataset.sessionId) === button.dataset.sessionOrderMove);
-    const offset = Number(button.dataset.sessionOrderOffset || 0);
-    const target = nodes[current + offset];
-    const targetId = target && (target.dataset.controlSession || target.dataset.sessionId);
-    if (current < 0 || !targetId || !moveSessionOrder(button.dataset.sessionOrderMove, targetId, offset > 0)) return;
+  let sessionDragJustEnded = false;
+
+  const sortableSessionId = node => String(node?.dataset.sessionSortable || "");
+  const clearSessionDropState = container => {
+    container.querySelectorAll("[data-session-sortable]").forEach(node => {
+      node.classList.remove("session-sort-dragging");
+      node.removeAttribute("data-session-drop-edge");
+      node.setAttribute("aria-grabbed", "false");
+    });
+  };
+  const sessionDropPlacement = (target, event) => {
+    const bounds = target.getBoundingClientRect();
+    const layout = window.getComputedStyle(target.parentElement || target);
+    const columns = String(layout.gridTemplateColumns || "none").trim().split(/\s+/).filter(value => value && value !== "none");
+    const horizontal = columns.length > 1;
+    const placeAfter = horizontal
+      ? event.clientX > bounds.left + bounds.width / 2
+      : event.clientY > bounds.top + bounds.height / 2;
+    return {
+      placeAfter,
+      edge: horizontal ? (placeAfter ? "right" : "left") : (placeAfter ? "bottom" : "top"),
+    };
+  };
+  const commitSessionPosition = (container, sourceId, targetId, placeAfter, focusSource = false) => {
+    if (!moveSessionOrder(sourceId, targetId, placeAfter)) return false;
     state.sort = "recent";
+    state.controlRoomSort = "recent";
     if ($("#sortSelect")) $("#sortSelect").value = "recent";
+    if ($("#controlRoomSortSelect")) $("#controlRoomSortSelect").value = "recent";
     saveDashboardPreferences();
     renderSessions("reorder");
     announce(window.LoadToAgentI18n.t("session.position_changed"));
-    requestAnimationFrame(() => document.querySelector(`[data-session-order-move="${CSS.escape(button.dataset.sessionOrderMove)}"][data-session-order-offset="${offset}"]`)?.focus({ preventScroll: true }));
+    if (focusSource) requestAnimationFrame(() => container.querySelector(`[data-session-sortable="${CSS.escape(sourceId)}"]`)?.focus({ preventScroll: true }));
+    return true;
+  };
+  const bindSortableSessionList = (container, selector) => {
+    let draggedSessionId = "";
+    const finishDrag = () => {
+      clearSessionDropState(container);
+      draggedSessionId = "";
+      sessionDragJustEnded = true;
+      setTimeout(() => { sessionDragJustEnded = false; }, 0);
+    };
+    container.addEventListener("dragstart", (event) => {
+      const item = event.target.closest(selector);
+      if (!item) return;
+      if (event.target !== item && event.target.closest("button, a, input, select, textarea, summary, [contenteditable='true']")) {
+        event.preventDefault();
+        return;
+      }
+      draggedSessionId = sortableSessionId(item);
+      if (!draggedSessionId) {
+        event.preventDefault();
+        return;
+      }
+      item.classList.add("session-sort-dragging");
+      item.setAttribute("aria-grabbed", "true");
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", draggedSessionId);
+        event.dataTransfer.setData("application/x-loadtoagent-session-list", container.id);
+        const dragImage = item.querySelector(":scope > header, .card-head") || item;
+        event.dataTransfer.setDragImage(dragImage, 20, 20);
+      }
+    });
+    container.addEventListener("dragover", (event) => {
+      const target = event.target.closest(selector);
+      const sourceId = draggedSessionId || event.dataTransfer?.getData("text/plain");
+      const sourceList = event.dataTransfer?.getData("application/x-loadtoagent-session-list");
+      if (!target || !sourceId || (!draggedSessionId && sourceList !== container.id) || sortableSessionId(target) === sourceId) return;
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+      container.querySelectorAll("[data-session-drop-edge]").forEach(node => node.removeAttribute("data-session-drop-edge"));
+      target.dataset.sessionDropEdge = sessionDropPlacement(target, event).edge;
+    });
+    container.addEventListener("drop", (event) => {
+      const target = event.target.closest(selector);
+      const sourceId = draggedSessionId || event.dataTransfer?.getData("text/plain");
+      const sourceList = event.dataTransfer?.getData("application/x-loadtoagent-session-list");
+      if (!target || !sourceId || (!draggedSessionId && sourceList !== container.id) || sortableSessionId(target) === sourceId) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const placement = sessionDropPlacement(target, event);
+      const changed = commitSessionPosition(container, sourceId, sortableSessionId(target), placement.placeAfter);
+      finishDrag();
+      if (!changed) clearSessionDropState(container);
+    });
+    container.addEventListener("dragend", finishDrag);
+    container.addEventListener("dragleave", (event) => {
+      if (!container.contains(event.relatedTarget)) clearSessionDropState(container);
+    });
+    container.addEventListener("keydown", (event) => {
+      const item = event.target.closest(selector);
+      if (!item || event.target !== item || !event.altKey || !["ArrowUp", "ArrowDown"].includes(event.key)) return;
+      const nodes = Array.from(container.querySelectorAll(selector));
+      const current = nodes.indexOf(item);
+      const offset = event.key === "ArrowUp" ? -1 : 1;
+      const target = nodes[current + offset];
+      if (current < 0 || !target) return;
+      event.preventDefault();
+      event.stopPropagation();
+      commitSessionPosition(container, sortableSessionId(item), sortableSessionId(target), offset > 0, true);
+    });
   };
 
   const managementFilterLabel = value => value === "all" ? window.LoadToAgentI18n.t("management.filter_all") : window.LoadToAgentI18n.t(`management.health.${value}`);
@@ -172,6 +263,7 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
   }
 
   function bindSessionListEvents() {
+    bindSortableSessionList($("#sessionGrid"), "[data-session-id][data-session-sortable]");
     $("#automationOverview").addEventListener("click", (event) => {
       const loopSelect = event.target.closest("[data-loop-select]");
       if (loopSelect) {
@@ -228,12 +320,7 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
       cards[next].focus();
     });
     $("#sessionGrid").addEventListener("click", (event) => {
-      const order = event.target.closest("[data-session-order-move]");
-      if (order) {
-        event.stopPropagation();
-        moveVisibleSession(order, $("#sessionGrid"), "[data-session-id]");
-        return;
-      }
+      if (sessionDragJustEnded) return;
       const card = event.target.closest("[data-session-id]");
       if (card) openDrawer(card.dataset.sessionId);
     });
@@ -248,11 +335,17 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
   }
 
   function bindLiveAgentEvents() {
+    bindSortableSessionList($("#liveSessionGrid"), "[data-control-session][data-session-sortable]");
     $("#liveSessionGrid").addEventListener("click", async (event) => {
-      const order = event.target.closest("[data-session-order-move]");
-      if (order) {
+      if (sessionDragJustEnded) return;
+      const archive = event.target.closest("[data-session-archive]");
+      if (archive) {
         event.stopPropagation();
-        moveVisibleSession(order, $("#liveSessionGrid"), "[data-control-session]");
+        if (archiveSession(archive.dataset.sessionArchive)) {
+          if (state.graphFocusId === archive.dataset.sessionArchive) state.graphFocusId = null;
+          renderSessions("archive");
+          announce(window.LoadToAgentI18n.t("control.moved_to_history"));
+        }
         return;
       }
       const route = event.target.closest("[data-agent-command-route]");

package/renderer/app-graph-model.js

@@ -10,6 +10,7 @@ window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(cont
     state,
     compact,
     isLiveSession,
+    isControlRoomSession = isLiveSession,
     stableSessionSort = sessions => [...sessions],
   } = context;
 
@@ -27,7 +28,7 @@ window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(cont
 
   function connectedGraphSessions(sessions, focusId = state.graphFocusId) {
     const byId = new Map(sessions.map((session) => [session.id, session]));
-    const included = new Set(sessions.filter(isLiveSession).map((session) => session.id));
+    const included = new Set(sessions.filter(isControlRoomSession).map((session) => session.id));
     const includeAncestors = (session) => {
       let current = session;
       const seen = new Set();
@@ -37,7 +38,7 @@ window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(cont
         current = current.parentId ? byId.get(current.parentId) : null;
       }
     };
-    sessions.filter(isLiveSession).forEach(includeAncestors);
+    sessions.filter(isControlRoomSession).forEach(includeAncestors);
     const includeDescendants = (session) => {
       const queue = [...((session && session.childIds) || [])];
       const seen = new Set();
@@ -102,6 +103,7 @@ window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(cont
   }
 
   function runtimeAgentSummary(model, tmuxEntries = []) {
+    const controlNodes = model.nodes.filter(isControlRoomSession);
     const liveNodes = model.nodes.filter(isLiveSession);
     const liveById = new Map(liveNodes.map((session) => [session.id, session]));
     const tmuxSessionIds = new Set(
@@ -114,12 +116,13 @@ window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(cont
       if (agentExecutionMode(session).kind === "tmux") tmuxSessionIds.add(session.id);
     }
     const tmuxCount = liveNodes.filter((session) => tmuxSessionIds.has(session.id)).length;
-    const runningExecutions = liveNodes.flatMap((session) => (session.executions || []).filter((activity) => activity.status === "running"));
+    const runningExecutions = controlNodes.flatMap((session) => (session.executions || []).filter((activity) => activity.status === "running"));
     return {
-      activeCount: liveNodes.length,
+      activeCount: controlNodes.length,
+      waitingCount: controlNodes.filter((session) => !isLiveSession(session)).length,
       standardCount: liveNodes.length - tmuxCount,
       tmuxCount,
-      rootCount: liveNodes.filter((session) => !session.parentId).length,
+      rootCount: controlNodes.filter((session) => !session.parentId).length,
       activeHelperCount: liveNodes.filter((session) => session.parentId).length,
       helperRecordCount: model.nodes.filter((session) => session.parentId).length,
       runningExecutionCount: runningExecutions.length,

package/renderer/app-graph-orchestration.js

@@ -10,32 +10,52 @@ window.LoadToAgentAppFactories.createGraphOrchestration = function createGraphOr
     readablePreview,
     agentRoleLabel,
     isLiveSession,
+    isControlRoomSession = isLiveSession,
     graphPath,
     connectedGraphSessions,
     sortGraphNodes,
+    stableSessionSort = sessions => [...sessions],
     runtimeAgentSummary,
     liveTmuxEntries,
     runtimeSeparatedOverview,
     focusedGraph,
     scheduleAgentWorkflowConnections,
+    rememberDisclosureStates = () => {},
+    restoreDisclosureStates = () => {},
   } = context;
   const t = (key, params) => window.LoadToAgentI18n.t(key, params);
 
   function renderAgentMap(sessions, motionKind = "refresh") {
+    const liveSessionGrid = $("#liveSessionGrid");
+    rememberDisclosureStates(liveSessionGrid);
     const model = connectedGraphSessions(sessions);
     const focus =
       state.graphFocusId && model.byId.get(state.graphFocusId) && model.included.has(state.graphFocusId) ? model.byId.get(state.graphFocusId) : null;
     if (state.graphFocusId && !focus) state.graphFocusId = null;
-    const roots = sortGraphNodes(model.nodes.filter((session) => !session.parentId || !model.included.has(session.parentId)));
+    const rootSessions = model.nodes.filter((session) => !session.parentId || !model.included.has(session.parentId));
+    const roots = state.controlRoomSort === "tokens"
+      ? [...rootSessions].sort((a, b) => Number((b.usage && b.usage.total) || 0) - Number((a.usage && a.usage.total) || 0))
+      : state.controlRoomSort === "context"
+        ? [...rootSessions].sort((a, b) => Number((b.context && b.context.percent) || 0) - Number((a.context && a.context.percent) || 0))
+        : stableSessionSort(rootSessions);
     if (!model.nodes.length) {
-      $("#liveSessionGrid").innerHTML = "";
+      liveSessionGrid.innerHTML = "";
       $("#graphBreadcrumbs").innerHTML = "";
       $("#graphResetBtn").classList.add("hidden");
+      $("#agentMapToolbar")?.classList.add("hidden");
+      $("#controlRoomProjectToolbar")?.classList.remove("hidden");
+      $("#controlRoomListToolbar")?.classList.remove("hidden");
+      if ($("#controlRoomPageSummary")) $("#controlRoomPageSummary").textContent = t("control.page_summary", { start: 0, end: 0, total: 0 });
+      if ($("#controlRoomPagePrev")) $("#controlRoomPagePrev").disabled = true;
+      if ($("#controlRoomPageNext")) $("#controlRoomPageNext").disabled = true;
       return 0;
     }
 
     if (focus) {
-      $("#liveSessionGrid").innerHTML = focusedGraph(focus, model, motionKind);
+      $("#agentMapToolbar")?.classList.remove("hidden");
+      $("#controlRoomProjectToolbar")?.classList.add("hidden");
+      $("#controlRoomListToolbar")?.classList.add("hidden");
+      liveSessionGrid.innerHTML = focusedGraph(focus, model, motionKind);
       const path = graphPath(focus, model.byId);
       $("#graphBreadcrumbs").innerHTML = `<button type="button" data-graph-reset>${esc(t("graph.task_list"))}</button>${path
         .map((item) => {
@@ -51,17 +71,29 @@ window.LoadToAgentAppFactories.createGraphOrchestration = function createGraphOr
       scheduleAgentWorkflowConnections();
     } else {
       const runtime = runtimeAgentSummary(model, liveTmuxEntries(state.snapshot && state.snapshot.tmux));
-      $("#liveSessionGrid").innerHTML = runtimeSeparatedOverview(roots, model);
-      $("#graphBreadcrumbs").innerHTML = `<span class="control-room-legend">
-        <span><i class="spawn"></i>${esc(t("control.legend_spawn"))}</span>
-        <span><i class="running"></i>${esc(t("control.legend_running"))}</span>
-        <span><i class="done"></i>${esc(t("control.legend_completed"))}</span>
-        <b>${esc(t("control.live_summary", { sessions: runtime.rootCount, helpers: runtime.activeHelperCount, executions: runtime.runningExecutionCount }))}</b>
-      </span>`;
+      const pageSize = Math.max(1, Number(state.controlRoomPageSize || 4));
+      const maxPage = Math.max(0, Math.ceil(roots.length / pageSize) - 1);
+      state.controlRoomPage = Math.min(maxPage, Math.max(0, Number(state.controlRoomPage || 0)));
+      const startIndex = state.controlRoomPage * pageSize;
+      const endIndex = Math.min(roots.length, startIndex + pageSize);
+      const visibleRoots = roots.slice(startIndex, endIndex);
+      liveSessionGrid.innerHTML = runtimeSeparatedOverview(visibleRoots, model, roots);
+      restoreDisclosureStates(liveSessionGrid);
+      $("#graphBreadcrumbs").innerHTML = "";
+      $("#agentMapToolbar")?.classList.add("hidden");
+      $("#controlRoomProjectToolbar")?.classList.remove("hidden");
+      $("#controlRoomListToolbar")?.classList.remove("hidden");
+      if ($("#controlRoomPageSummary")) $("#controlRoomPageSummary").textContent = t("control.page_summary", {
+        start: roots.length ? startIndex + 1 : 0,
+        end: endIndex,
+        total: roots.length,
+      });
+      if ($("#controlRoomPagePrev")) $("#controlRoomPagePrev").disabled = state.controlRoomPage === 0;
+      if ($("#controlRoomPageNext")) $("#controlRoomPageNext").disabled = state.controlRoomPage >= maxPage;
       $("#graphResetBtn").classList.add("hidden");
       return runtime.activeCount;
     }
-    return model.nodes.filter(isLiveSession).length;
+    return model.nodes.filter(isControlRoomSession).length;
   }
 
   return { renderAgentMap };

package/renderer/app-graph-view.js

@@ -20,6 +20,9 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
     statusClass,
     currentActivity,
     isLiveSession,
+    isControlRoomSession = isLiveSession,
+    controlRoomStatus = session => session?.status,
+    sessionRetentionMinutes = () => 0,
     subagentWorkState,
     subagentWorkLabel,
     latestWorkCopy,
@@ -30,6 +33,7 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
     executionModeBadge,
     graphDescendantCount,
     sessionWorkspaceLabel,
+    controlRoomProject = session => ({ key: String(session?.workspace || session?.id || "unknown"), label: sessionWorkspaceLabel(session) }),
   } = context;
   const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const statusLabel = (status) => ({
@@ -44,6 +48,8 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
     const usage = session.usage || {};
     const percent = Math.max(0, Math.min(100, Number(context.percent || 0)));
     const running = isLiveSession(session);
+    const presentationStatus = controlRoomStatus(session);
+    const retained = isControlRoomSession(session) && !running;
     const childCount = (session.childIds || []).length;
     const childMetrics = session.collaboration && session.collaboration.metrics;
     const cumulativeChildren = childMetrics ? childMetrics.cumulativeCreated : childCount;
@@ -72,10 +78,12 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
           <span class="provider-mark">${esc(provider.mark)}</span>
           <span class="agent-identity"><b>${esc(role)}</b><small>${esc(provider.label)} · ${esc(session.model || t("graph.model_unknown"))}</small></span>
           ${executionModeBadge(session, true)}
-          <span class="status-pill ${statusClass(session.status)}">${esc(statusLabel(session.status))}</span>
+          <span class="status-pill ${statusClass(presentationStatus)}">${esc(statusLabel(presentationStatus))}</span>
         </span>
         <span class="agent-task-label">
-          ${session.parentId ? t("graph.assigned_task", { source: delegation.assignmentSource === "parent-narration" ? t("graph.main_ai_explanation_suffix") : "" }) : t("graph.current_goal")}
+          ${session.parentId ? t("graph.assigned_task", { source: delegation.assignmentSource === "protected"
+            ? t("graph.assignment_protected_suffix")
+            : (delegation.assignmentSource === "parent-narration" ? t("graph.main_ai_explanation_suffix") : "") }) : t("graph.current_goal")}
         </span>
         <strong class="agent-task" title="${esc(goalPreview.full)}">${esc(goalPreview.text)}</strong>
         ${goalPreview.truncated ? `<span class="agent-goal-note">${esc(t("graph.summary_shown"))}</span>` : ""}
@@ -103,6 +111,7 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
         <span>${session.parentId
           ? (cumulativeChildren ? t("graph.subagents_created", { count: cumulativeChildren }) : t("graph.helper_ai"))
           : t("project.origin_named", { name: sessionWorkspaceLabel(session) })}</span>
+        ${retained ? `<button type="button" data-session-archive="${esc(session.id)}">${esc(t("control.move_to_history"))}</button>` : ""}
         <button type="button" data-open-session="${esc(session.id)}">${esc(t("graph.view_conversation"))} <b>↗</b>
         </button>
         </footer>
@@ -113,6 +122,7 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
     const provider = providerInfo(session.provider);
     const usage = session.usage || {};
     const directChildren = graphChildren(session, model).length;
+    const presentationStatus = controlRoomStatus(session);
     const identity = session.parentId
       ? t("graph.helper_ai_named", { name: session.agentName || agentRoleLabel(session.agentRole) })
       : t("project.origin_named", { name: sessionWorkspaceLabel(session) });
@@ -124,8 +134,9 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
     const outcomeText = outcome || latestWorkCopy(session);
     const assignedWorkPreview = readablePreview(assignedWork, session.parentId ? 110 : 104);
     const taskLabel = session.parentId ? `${label || agentRoleLabel(session.agentRole)}${taskName ? t("graph.assigned_name_suffix", { name: taskName }) : ""}` : label;
-    const assignmentSourceNote =
-      session.parentId && delegation.assignmentSource === "parent-narration"
+    const assignmentSourceNote = session.parentId && delegation.assignmentSource === "protected"
+      ? `<span class="agent-flow-assignment-source">${esc(t("graph.assignment_source_protected"))}</span>`
+      : session.parentId && delegation.assignmentSource === "parent-narration"
         ? `<span class="agent-flow-assignment-source">${esc(t("graph.main_ai_prestart_explanation"))}</span>`
         : "";
     const sharedGoalCopy =
@@ -173,7 +184,7 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
         </span>
       </button>`;
     }
-    return `<button type="button" class="agent-flow-row ${isLiveSession(session) ? "running" : ""} ${statusClass(session.status)}"
+    return `<button type="button" class="agent-flow-row ${isLiveSession(session) ? "running" : ""} ${statusClass(presentationStatus)}"
       data-graph-focus="${esc(session.id)}"
       data-motion-key="agent:${esc(session.id)}"
       data-motion-value="${esc(session.updatedAt || "")}:${usage.total || 0}:${esc(session.status || "")}"
@@ -185,7 +196,7 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
         <em>${esc(identity)} · ${directChildren ? `${t("graph.helper_ai_count", { count: directChildren })} · ` : ""}${esc(timeAgo(session.updatedAt))}</em>
         ${assignmentSourceNote}${sharedGoalCopy}${outcomeCopy}
       </span>
-      <span class="agent-flow-provider"><i>${esc(provider.mark)}</i><small>${esc(statusLabel(session.status))}</small></span>
+      <span class="agent-flow-provider"><i>${esc(provider.mark)}</i><small>${esc(statusLabel(presentationStatus))}</small></span>
     </button>`;
   }
 
@@ -418,7 +429,8 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
     const executionLabel = t("control.runtime_work", { runtime, kind: executionKind });
     const ownerGoal = controlRoomAgentGoal(owner, 52);
     const running = activity.status === "running";
-    return `<button type="button" class="control-room-node execution-node ${running ? "is-running" : "is-complete"}"
+    const stateClass = running ? "is-running" : (activity.status === "unverified" ? "is-unverified" : "is-complete");
+    return `<button type="button" class="control-room-node execution-node ${stateClass}"
       data-open-execution-owner="${esc(owner.id)}"
       data-open-execution-id="${esc(activity.id)}"
       data-control-summary="${esc(summary.text)}"
@@ -433,10 +445,13 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
 
   function controlRoomSession(root, model) {
     const provider = providerInfo(root.provider);
+    const presentationStatus = controlRoomStatus(root);
+    const waiting = presentationStatus === "waiting";
+    const retained = isControlRoomSession(root) && !isLiveSession(root);
     const descendants = controlRoomDescendants(root, model);
     const actors = [root, ...descendants];
     const executionItems = actors.flatMap(owner => (owner.executions || []).map(activity => ({ activity, owner })));
-    const activeChildren = descendants.filter(child => !["completed", "cancelled", "failed"].includes(child.status) && !child.completionObserved);
+    const activeChildren = descendants.filter(child => ["starting", "running", "paused", "waiting"].includes(child.status) && !child.completionObserved);
     const completedChildren = descendants.filter(child => ["completed", "cancelled", "failed"].includes(child.status) || child.completionObserved);
     const activeExecutions = executionItems.filter(item => item.activity.status === "running");
     const completedExecutions = executionItems
@@ -454,7 +469,7 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
       data-control-summary="${esc(title.text)}"
       data-motion-key="control-main:${esc(root.id)}" data-motion-value="${esc(root.updatedAt || "")}:${esc(root.status || "")}"
       style="${providerStyle(root.provider)}">
-      <span class="control-main-top"><span class="provider-mark">${esc(provider.mark)}</span><span><small>${esc(t("control.main_agent"))}</small><b>${esc(provider.label)} · ${esc(root.model || t("session.model_unknown"))}</b></span><em><i aria-hidden="true"></i>${esc(statusLabel(root.status))}</em></span>
+      <span class="control-main-top"><span class="provider-mark">${esc(provider.mark)}</span><span><small>${esc(t("control.main_agent"))}</small><b>${esc(provider.label)} · ${esc(root.model || t("session.model_unknown"))}</b></span><em><i aria-hidden="true"></i>${esc(statusLabel(presentationStatus))}</em></span>
       <strong title="${esc(title.full)}">${esc(title.text)}</strong>
       <span class="control-main-now"><small>${esc(t("graph.current_work"))}</small><b title="${esc(current.full)}">${esc(current.text)}</b></span>
       <span class="control-main-meta"><small>${esc(t("control.unit_counts", { helpers: activeChildren.length, executions: activeExecutions.length }))}</small><b>${esc(t("graph.view_conversation"))} →</b></span>
@@ -467,8 +482,16 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
     const completed = completedUnits.length
       ? completedUnits.map(unit => unit.kind === "child" ? controlRoomChildNode(unit.child) : controlRoomExecutionNode(unit.item)).join("")
       : `<div class="control-room-complete-empty"><span>✓</span><small>${esc(t("control.completed_empty"))}</small></div>`;
-    return `<article class="control-room-session" data-control-session="${esc(root.id)}" style="${providerStyle(root.provider)}">
-      <header><div><span class="control-session-live"><i></i>${esc(t("control.live_session"))}</span><b>${esc(title.text)}</b></div><span class="session-order-actions control-session-order" role="group" aria-label="${esc(t("session.change_position"))}"><button type="button" data-session-order-move="${esc(root.id)}" data-session-order-offset="-1" title="${esc(t("session.move_up"))}" aria-label="${esc(t("session.move_up"))}">↑</button><button type="button" data-session-order-move="${esc(root.id)}" data-session-order-offset="1" title="${esc(t("session.move_down"))}" aria-label="${esc(t("session.move_down"))}">↓</button></span><button type="button" data-graph-focus="${esc(root.id)}">${esc(t("control.open_full_flow"))} ↗</button></header>
+    const waitingWithBackground = waiting && activeExecutions.some(item => item.activity.mode === "background" || item.activity.kind === "background");
+    const sessionStateKey = waitingWithBackground
+      ? "control.waiting_background_session"
+      : (waiting ? "control.waiting_session" : "control.live_session");
+    const retention = retained ? `<small class="control-session-retention">${esc(t("control.auto_history_in_minutes", { minutes: sessionRetentionMinutes(root) }))}</small>` : "";
+    const archive = retained ? `<button type="button" class="control-session-archive" data-session-archive="${esc(root.id)}">${esc(t("control.move_to_history"))}</button>` : "";
+    return `<article class="control-room-session ${waiting ? "is-waiting" : ""} ${waitingWithBackground ? "has-background-work" : ""}" data-control-session="${esc(root.id)}" data-session-sortable="${esc(root.id)}"
+      style="${providerStyle(root.provider)}" role="group" tabindex="0" draggable="true" aria-grabbed="false"
+      aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown" aria-label="${esc(t("session.drag_label", { title: title.text }))}" aria-describedby="sessionReorderHelp">
+      <header><div><span class="control-session-live"><i></i>${esc(t(sessionStateKey))}</span><b>${esc(title.text)}</b>${retention}</div><span class="session-drag-handle" aria-hidden="true" title="${esc(t("session.reorder_hint"))}"></span>${archive}<button type="button" class="control-session-flow" data-graph-focus="${esc(root.id)}">${esc(t("control.open_full_flow"))} ↗</button></header>
       <div class="control-room-flow">
         <section class="control-room-column main-column"><span class="control-column-label">${esc(t("control.main_work_column"))}</span>${main}</section>
         <span class="control-flow-link live" aria-hidden="true"><i></i></span>
@@ -479,9 +502,44 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
     </article>`;
   }
 
-  function runtimeSeparatedOverview(roots, model) {
+  function runtimeSeparatedOverview(roots, model, allRoots = roots) {
+    const projectDescriptor = (root) => {
+      const project = controlRoomProject(root);
+      return { key: project.key, name: project.label };
+    };
+    const allGroups = new Map();
+    allRoots.forEach((root) => {
+      const { key, name } = projectDescriptor(root);
+      if (!allGroups.has(key)) allGroups.set(key, { name, roots: [] });
+      allGroups.get(key).roots.push(root);
+    });
+    const groups = new Map();
+    roots.forEach((root) => {
+      const { key, name } = projectDescriptor(root);
+      if (!groups.has(key)) groups.set(key, { name, roots: [] });
+      groups.get(key).roots.push(root);
+    });
+    const projectGroups = [...groups.entries()].map(([key, { name, roots: projectRoots }], index) => {
+      const projectTotals = allGroups.get(key)?.roots || projectRoots;
+      const activeCount = projectTotals.filter((root) => isLiveSession(root)).length;
+      const attentionCount = projectTotals.filter((root) => !isLiveSession(root) && isControlRoomSession(root)).length;
+      const summary = attentionCount
+        ? t("control.project_live_attention_summary", { active: activeCount, attention: attentionCount })
+        : t("control.project_live_summary", { active: activeCount });
+      const disclosureKey = `control-project:${key}`;
+      const presentation = index === 0 ? "is-primary" : "is-secondary";
+      const projectFocusId = projectRoots[0]?.id || "";
+      return `<details class="control-room-project-group ${presentation}" data-control-project="${esc(name)}" data-disclosure-key="${esc(disclosureKey)}" ${index === 0 ? "open" : ""}>
+        <summary class="control-project-header" data-project-toggle="${esc(name)}">
+          <span class="control-project-heading"><i aria-hidden="true">□</i><b>${esc(name)}</b><small>${esc(summary)}</small><em>${projectTotals.length}</em></span>
+          <span class="control-project-handle" role="img" aria-label="프로젝트 그룹" title="프로젝트 그룹 · 세션은 최근 활동순으로 표시됩니다"></span>
+        </summary>
+        <button type="button" class="control-project-flow-link" data-graph-focus="${esc(projectFocusId)}"><span>${esc(t("control.open_full_flow"))} ↗</span></button>
+        <div class="control-project-body">${projectRoots.map(root => controlRoomSession(root, model)).join("")}</div>
+      </details>`;
+    }).join("");
     return `<div class="control-room-overview" data-control-room-overview="true">
-      ${sortGraphNodes(roots).map(root => controlRoomSession(root, model)).join("")}
+      ${projectGroups}
     </div>`;
   }
 
@@ -609,7 +667,9 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
             : event.kind === "started"
               ? t("graph.runtime_start_confirmed")
               : t("graph.status_only_recorded"));
-        const sourceLabel = event.assignmentSource === "parent-narration" ? ` · ${t("graph.main_ai_prestart_short")}` : "";
+        const sourceLabel = event.assignmentSource === "protected"
+          ? ` · ${t("graph.assignment_source_protected_short")}`
+          : (event.assignmentSource === "parent-narration" ? ` · ${t("graph.main_ai_prestart_short")}` : "");
         return `<article class="agent-communication-event ${esc(event.kind)}" data-communication-kind="${esc(event.kind)}">
         <span class="communication-route">
           <b>${esc(communicationEndpoint(event.from, owner, model))}</b><i>→</i>
@@ -650,6 +710,7 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
       running: t("graph.execution_running"),
       completed: t("graph.execution_completed"),
       failed: t("graph.execution_failed"),
+      unverified: t("graph.execution_unverified"),
       cancelled: t("ui.stopped"),
     })[activity.status] || activity.status;
   }

package/renderer/app-quality.js

@@ -94,6 +94,7 @@ window.LoadToAgentAppFactories.createQualityEnhancements = function createQualit
         ? dashboard.workspace
         : "all";
       state.sort = ["recent", "tokens", "context"].includes(dashboard.sort) ? dashboard.sort : "recent";
+      state.controlRoomSort = ["recent", "tokens", "context"].includes(dashboard.controlRoomSort) ? dashboard.controlRoomSort : "recent";
       state.sessionOrder = Array.isArray(dashboard.sessionOrder)
         ? dashboard.sessionOrder.filter(id => typeof id === "string" && id.length <= 500).slice(0, 1_000)
         : [];
@@ -130,6 +131,7 @@ window.LoadToAgentAppFactories.createQualityEnhancements = function createQualit
       providers: [...state.providerFilters],
       workspace: String(state.workspace || "all").slice(0, 2_000),
       sort: ["recent", "tokens", "context"].includes(state.sort) ? state.sort : "recent",
+      controlRoomSort: ["recent", "tokens", "context"].includes(state.controlRoomSort) ? state.controlRoomSort : "recent",
       sessionOrder: (state.sessionOrder || []).filter(id => typeof id === "string" && id.length <= 500).slice(0, 1_000),
     };
     try {

package/renderer/app-session-render.js

@@ -24,6 +24,7 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
     statusClass,
     currentActivity,
     isLiveSession,
+    isControlRoomSession = isLiveSession,
     latestWorkCopy,
     statusIcon,
     renderProviderRail,
@@ -75,11 +76,13 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
     const originLabel = sessionWorkspaceLabel(session);
     return `<article class="session-card session-record ${opts.live ? "live-card" : ""} ${statusClass(session.status)} ${session.parentId ? "subagent" : ""}"
       data-session-id="${esc(session.id)}"
+      data-session-sortable="${esc(session.id)}"
       data-motion-key="session:${esc(session.id)}"
       data-motion-value="${esc(session.updatedAt || "")}:${esc(session.status || "")}"
       style="${providerStyle(session.provider)}"
-      role="button" tabindex="0"
-      aria-labelledby="${accessibleId}-title" aria-describedby="${accessibleId}-summary">
+      role="button" tabindex="0" draggable="true" aria-grabbed="false"
+      aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown"
+      aria-labelledby="${accessibleId}-title" aria-describedby="${accessibleId}-summary sessionReorderHelp">
       <div class="card-head">
         <span class="provider-mark">${esc(provider.mark)}</span>
         <div class="card-head-main"><div class="card-provider-line"><b>${esc(provider.label)}</b><span>${esc(session.model || t("session.model_unknown"))}</span></div></div>
@@ -95,10 +98,7 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
       </div>
       <footer class="card-footer">
         <span>${esc(timeAgo(session.updatedAt))}</span>
-        <span class="session-order-actions" role="group" aria-label="${esc(t("session.change_position"))}">
-          <button type="button" data-session-order-move="${esc(session.id)}" data-session-order-offset="-1" title="${esc(t("session.move_up"))}" aria-label="${esc(t("session.move_up"))}">↑</button>
-          <button type="button" data-session-order-move="${esc(session.id)}" data-session-order-offset="1" title="${esc(t("session.move_down"))}" aria-label="${esc(t("session.move_down"))}">↓</button>
-        </span>
+        <span class="session-drag-handle" aria-hidden="true" title="${esc(t("session.reorder_hint"))}"></span>
         <strong>${esc(t("graph.view_conversation"))}<i aria-hidden="true">→</i></strong>
       </footer>
     </article>`;
@@ -166,7 +166,7 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
     const attentionCount = attentionView ? renderAttentionInbox() : 0;
     const showMap = ["all", "active"].includes(state.view);
     const graphLiveCount = showMap ? renderAgentMap(graphFilteredSessions(), motionKind) : 0;
-    const regular = state.view === "all" ? sessions.filter((session) => !isLiveSession(session)) : state.view === "active" ? [] : sessions;
+    const regular = state.view === "all" ? sessions.filter((session) => !isControlRoomSession(session)) : state.view === "active" ? [] : sessions;
     const visible = regular.slice(0, state.visibleLimit);
     const resultCount = attentionView ? attentionCount : graphLiveCount + regular.length;
     $("#sessionResultSummary").textContent = window.LoadToAgentI18n.t("quality.results_summary", { count: resultCount });