loadtoagent 1.3.4 → 1.3.6

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");

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 };