loadtoagent 1.3.10 → 1.3.12

package/renderer/app-drawer.js

@@ -22,7 +22,59 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     failed: "control.delivery_failed",
   })[phase] || "control.delivery_confirming";
 
-  function openDrawer(id) {
+  function scheduleFlowConnections() {
+    requestAnimationFrame(() => {
+      window.LoadToAgentApp?.scheduleAgentWorkflowConnections?.();
+      window.LoadToAgentApp?.drawAgentWorkflowConnections?.();
+    });
+  }
+
+  function resolvedPresentation(options = {}) {
+    const requested = options.presentation || (options.context ? "context" : "modal");
+    if (requested !== "context") return "modal";
+    return state.view === "all" && window.matchMedia("(min-width: 1280px)").matches
+      ? "context"
+      : "modal";
+  }
+
+  function setDrawerPresentation(presentation) {
+    const drawer = $("#detailDrawer");
+    const contextual = presentation === "context";
+    state.drawerPresentation = presentation;
+    drawer.dataset.presentation = presentation;
+    drawer.setAttribute("role", contextual ? "complementary" : "dialog");
+    if (contextual) drawer.removeAttribute("aria-modal");
+    else drawer.setAttribute("aria-modal", "true");
+    $("#drawerBackToFlowBtn").classList.toggle("hidden", !contextual);
+    $("#drawerResizeHandle").classList.toggle("hidden", !contextual);
+    document.body.classList.toggle("conversation-context-open", contextual);
+    const currentWidth = Math.round(drawer.getBoundingClientRect().width || 640);
+    $("#drawerResizeHandle").setAttribute("aria-valuenow", String(currentWidth));
+    if (contextual) {
+      $("#drawerBackdrop").classList.add("hidden");
+      $("#drawerBackdrop").classList.remove("closing");
+    } else {
+      $("#drawerBackdrop").classList.remove("hidden");
+      $("#drawerBackdrop").classList.remove("closing");
+    }
+    scheduleFlowConnections();
+  }
+
+  function openDrawerSurface(presentation) {
+    clearTimeout(motionState.drawerTimer);
+    setDrawerPresentation(presentation);
+    $("#detailDrawer").classList.add("open");
+    if (presentation === "modal") {
+      setDialogOpenState($("#detailDrawer"), true);
+    } else {
+      $("#detailDrawer").removeAttribute("inert");
+      $("#detailDrawer").setAttribute("aria-hidden", "false");
+      $("#appShell")?.removeAttribute("inert");
+      document.body.classList.remove("dialog-open");
+    }
+  }
+
+  function openDrawer(id, options = {}) {
     rememberDialogTrigger();
     markGuideStep("detail");
     state.selectedId = id;
@@ -30,19 +82,18 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     state.drawerExecutionId = null;
     state.drawerTab = "chat";
     state.drawerForceLatest = true;
-    clearTimeout(motionState.drawerTimer);
-    $("#drawerBackdrop").classList.remove("hidden");
-    $("#drawerBackdrop").classList.remove("closing");
-    $("#detailDrawer").classList.add("open");
-    setDialogOpenState($("#detailDrawer"), true);
+    openDrawerSurface(resolvedPresentation(options));
     renderDrawer();
     loadSessionDetail(id, true);
-    setTimeout(() => $("#closeDrawerBtn").focus({ preventScroll: true }), 0);
+    setTimeout(
+      () => (state.drawerPresentation === "modal" ? $("#closeDrawerBtn") : $("#drawerBackToFlowBtn")).focus({ preventScroll: true }),
+      0,
+    );
   }
 
-  function openSubagentConversation(id) {
+  function openSubagentConversation(id, options = {}) {
     const child = snapshotSession(id) || state.details.get(id);
-    if (!child || !child.parentId) return openDrawer(id);
+    if (!child || !child.parentId) return openDrawer(id, options);
     rememberDialogTrigger();
     markGuideStep("detail");
     state.selectedId = id;
@@ -51,15 +102,14 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     state.drawerTab = "chat";
     state.agentCommandRoutes.delete(id);
     state.drawerForceLatest = true;
-    clearTimeout(motionState.drawerTimer);
-    $("#drawerBackdrop").classList.remove("hidden");
-    $("#drawerBackdrop").classList.remove("closing");
-    $("#detailDrawer").classList.add("open");
-    setDialogOpenState($("#detailDrawer"), true);
+    openDrawerSurface(resolvedPresentation(options));
     renderDrawer();
     loadSessionDetail(id);
     loadSubagentParentDetail(child);
-    setTimeout(() => $("#closeDrawerBtn").focus({ preventScroll: true }), 0);
+    setTimeout(
+      () => (state.drawerPresentation === "modal" ? $("#closeDrawerBtn") : $("#drawerBackToFlowBtn")).focus({ preventScroll: true }),
+      0,
+    );
   }
 
   function openExecutionActivity(ownerId, executionId) {
@@ -72,11 +122,7 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     state.drawerExecutionId = executionId;
     state.drawerTab = "chat";
     state.drawerForceLatest = false;
-    clearTimeout(motionState.drawerTimer);
-    $("#drawerBackdrop").classList.remove("hidden");
-    $("#drawerBackdrop").classList.remove("closing");
-    $("#detailDrawer").classList.add("open");
-    setDialogOpenState($("#detailDrawer"), true);
+    openDrawerSurface("modal");
     renderDrawer();
     loadSessionDetail(ownerId);
     if (owner.parentId) loadSubagentParentDetail(owner);
@@ -85,15 +131,27 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
 
   function closeDrawer(restoreFocus = true) {
     if (!$("#detailDrawer").classList.contains("open")) return;
+    const presentation = state.drawerPresentation;
     const drawerGeneration = motionState.dialogGeneration;
     $("#detailDrawer").classList.remove("open");
-    setDialogOpenState($("#detailDrawer"), false);
-    $("#drawerBackdrop").classList.add("closing");
+    if (presentation === "modal") {
+      setDialogOpenState($("#detailDrawer"), false);
+      $("#drawerBackdrop").classList.add("closing");
+    } else {
+      $("#detailDrawer").setAttribute("inert", "");
+      $("#detailDrawer").setAttribute("aria-hidden", "true");
+      $("#drawerBackdrop").classList.add("hidden");
+      $("#drawerBackdrop").classList.remove("closing");
+      document.body.classList.remove("conversation-context-open");
+      scheduleFlowConnections();
+    }
     clearTimeout(motionState.drawerTimer);
     motionState.drawerTimer = setTimeout(
       () => {
         $("#drawerBackdrop").classList.add("hidden");
         $("#drawerBackdrop").classList.remove("closing");
+        setDrawerPresentation("modal");
+        $("#drawerBackdrop").classList.add("hidden");
         if (drawerGeneration !== motionState.dialogGeneration) return;
         if (restoreFocus) restoreDialogTrigger(drawerGeneration);
         else motionState.activeDialogTrigger = null;
@@ -102,6 +160,10 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     );
   }
 
+  function backToAgentFlow() {
+    closeDrawer();
+  }
+
   function renderDrawer() {
     const session = selectedSession();
     if (!session) return closeDrawer();
@@ -124,7 +186,9 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     $("#detailDrawer").style.setProperty("--drawer-provider", provider.accent);
     $("#drawerProviderMark").style.setProperty("--provider", provider.accent);
     $("#drawerProviderMark").textContent = executionMode && activity?.kind === "shell" ? ">_" : provider.mark;
-    $("#drawerProvider").textContent = executionMode
+    $("#drawerProvider").textContent = state.drawerPresentation !== "modal" && !executionMode
+      ? `${t("drawer.agent_flow")} · ${presentationLabel}`
+      : executionMode
       ? `${activity?.runtime || activity?.tool || t("drawer.execution_unit")} · ${activity ? context.executionActivityStatus(activity) : t("drawer.unknown")}`
       : subagentMode
       ? `${t("control.subagent")} · ${presentationLabel}`
@@ -185,8 +249,14 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
       tab.tabIndex = active ? 0 : -1;
     });
     const activeTab = $(`.drawer-tab[data-tab="${state.drawerTab}"]`);
-    if (activeTab) $("#drawerContent").setAttribute("aria-labelledby", activeTab.id);
     const content = $("#drawerContent");
+    if (subagentMode && state.drawerPresentation === "context") {
+      content.removeAttribute("aria-labelledby");
+      content.setAttribute("aria-label", t("control.subagent_conversation"));
+    } else {
+      content.removeAttribute("aria-label");
+      if (activeTab) content.setAttribute("aria-labelledby", activeTab.id);
+    }
     rememberDisclosureStates(content);
     const previousTop = content.scrollTop;
     const wasAtBottom = window.LoadToAgentRendererUtils.isScrolledToEnd(content);
@@ -223,7 +293,11 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     const composer = $("#drawerComposer");
     const showComposer = !executionMode && !detailLoading && !detailError && state.drawerTab === "chat" && typeof agentCommandComposer === "function";
     composer.classList.toggle("hidden", !showComposer);
-    const nextComposerHtml = showComposer ? agentCommandComposer(session, { conversation: true }) : "";
+    const nextComposerHtml = showComposer ? agentCommandComposer(session, {
+      conversation: true,
+      delivery,
+      deliveryLabel: delivery ? t(deliveryLabelKey(delivery.phase)) : "",
+    }) : "";
     const focusedDraft = document.activeElement?.matches?.("[data-agent-command-draft]")
       && composer.contains(document.activeElement)
       && document.activeElement.dataset.agentCommandDraft === session.id;
@@ -272,5 +346,12 @@ window.LoadToAgentAppFactories.createDrawer = function createDrawer(context = {}
     }
   }
 
-  return { openDrawer, openSubagentConversation, openExecutionActivity, closeDrawer, renderDrawer };
+  return {
+    openDrawer,
+    openSubagentConversation,
+    openExecutionActivity,
+    closeDrawer,
+    backToAgentFlow,
+    renderDrawer,
+  };
 };

package/renderer/app-events-dialogs.js

@@ -6,10 +6,10 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
   const t = (key, params) => window.LoadToAgentI18n.t(key, params);
   const {
     $, $$, state, providerInfo, visibleProviders = () => state.providers, renderProviderRail, scheduleAgentWorkflowConnections, resumeAgentTerminal, loadSessionDetail,
-    closeDrawer, renderDrawer, providerPickerHtml, syncRunComposer, openRunModal, closeRunModal, toast, performUiAction,
+    closeDrawer, backToAgentFlow, renderDrawer, providerPickerHtml, syncRunComposer, openRunModal, closeRunModal, toast, performUiAction,
     handleRun, trapDialogFocus, currentDialog, selectView, saveRunDraft = () => {}, safeBackdrop = null,
     copyText = async () => false,
-    dispatchAgentCommand, controlManagedRun, quickRespond, prepareReassignment, openSubagentConversation,
+    dispatchAgentCommand, openAgentTerminal, controlManagedRun, quickRespond, prepareReassignment, openSubagentConversation,
   } = context;
 
   function bindRunComposerEvents() {
@@ -133,8 +133,49 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
 
   function bindDrawerAndGlobalEvents() {
     $("#closeDrawerBtn").addEventListener("click", closeDrawer);
+    $("#drawerBackToFlowBtn").addEventListener("click", backToAgentFlow);
     if (safeBackdrop) safeBackdrop($("#drawerBackdrop"), closeDrawer, $("#detailDrawer"));
     else $("#drawerBackdrop").addEventListener("click", closeDrawer);
+    const resizeHandle = $("#drawerResizeHandle");
+    const setConversationPanelWidth = (nextWidth) => {
+      const maximum = Math.max(560, Math.min(860, window.innerWidth - 700));
+      const width = Math.max(560, Math.min(maximum, Math.round(nextWidth)));
+      document.documentElement.style.setProperty("--conversation-panel-width", `${width}px`);
+      resizeHandle.setAttribute("aria-valuemax", String(maximum));
+      resizeHandle.setAttribute("aria-valuenow", String(width));
+      scheduleAgentWorkflowConnections();
+    };
+    resizeHandle.addEventListener("pointerdown", (event) => {
+      if (state.drawerPresentation !== "context" || event.button !== 0) return;
+      event.preventDefault();
+      resizeHandle.setPointerCapture?.(event.pointerId);
+      document.body.classList.add("conversation-panel-resizing");
+      setConversationPanelWidth(window.innerWidth - event.clientX);
+    });
+    resizeHandle.addEventListener("pointermove", (event) => {
+      if (!document.body.classList.contains("conversation-panel-resizing")) return;
+      setConversationPanelWidth(window.innerWidth - event.clientX);
+    });
+    const finishPanelResize = (event) => {
+      if (!document.body.classList.contains("conversation-panel-resizing")) return;
+      document.body.classList.remove("conversation-panel-resizing");
+      try { resizeHandle.releasePointerCapture?.(event.pointerId); } catch {}
+      scheduleAgentWorkflowConnections();
+    };
+    resizeHandle.addEventListener("pointerup", finishPanelResize);
+    resizeHandle.addEventListener("pointercancel", finishPanelResize);
+    resizeHandle.addEventListener("keydown", (event) => {
+      if (state.drawerPresentation !== "context" || !["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+      event.preventDefault();
+      const current = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--conversation-panel-width"))
+        || $("#detailDrawer").getBoundingClientRect().width;
+      const next = event.key === "Home"
+        ? 560
+        : event.key === "End"
+          ? 860
+          : current + (event.key === "ArrowLeft" ? 32 : -32);
+      setConversationPanelWidth(next);
+    });
     $(".drawer-tabs").addEventListener("click", (event) => {
       const tab = event.target.closest("[data-tab]");
       if (tab) {
@@ -163,14 +204,23 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
     $("#detailDrawer").addEventListener("click", async (event) => {
       const subagent = event.target.closest("[data-open-subagent-chat]");
       if (subagent) {
-        openSubagentConversation(subagent.dataset.openSubagentChat);
+        openSubagentConversation(subagent.dataset.openSubagentChat, { presentation: state.drawerPresentation });
         return;
       }
-      const route = event.target.closest("[data-agent-command-route]");
-      if (route) {
-        state.agentCommandRoutes.set(route.dataset.agentCommandSession, route.dataset.agentCommandRoute);
+      const inputMode = event.target.closest("[data-agent-command-input-mode]");
+      if (inputMode) {
+        const sessionId = inputMode.dataset.agentCommandSession;
+        const nextMode = inputMode.dataset.agentCommandInputMode;
+        state.agentCommandInputModes.set(sessionId, nextMode);
         renderDrawer();
-        requestAnimationFrame(() => $("#detailDrawer")?.querySelector(`[data-agent-command-session="${CSS.escape(route.dataset.agentCommandSession)}"][data-agent-command-route="${CSS.escape(route.dataset.agentCommandRoute)}"]`)?.focus({ preventScroll: true }));
+        requestAnimationFrame(() => {
+          const target = nextMode === "terminal"
+            ? $("#detailDrawer")?.querySelector(`[data-agent-command-draft="${CSS.escape(sessionId)}"]`)
+            : $("#detailDrawer")?.querySelector(
+              `[data-agent-command-session="${CSS.escape(sessionId)}"][data-agent-command-input-mode="terminal"]`,
+            );
+          target?.focus({ preventScroll: true });
+        });
         return;
       }
       const copy = event.target.closest("[data-copy-text]");
@@ -178,6 +228,11 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
         await copyText(copy.dataset.copyText);
         return;
       }
+      const terminal = event.target.closest("[data-agent-terminal-open]");
+      if (terminal) {
+        await openAgentTerminal(terminal.dataset.agentTerminalOpen);
+        return;
+      }
       const resume = event.target.closest("[data-resume-agent]");
       if (resume) {
         if (resume.dataset.busy === "true") return;
@@ -278,7 +333,10 @@ window.LoadToAgentAppFactories.createDialogEventBindings = function createDialog
       } else if (!$("#runModal").classList.contains("hidden")) closeRunModal();
       else closeDrawer();
     });
-    window.addEventListener("resize", scheduleAgentWorkflowConnections);
+    window.addEventListener("resize", () => {
+      scheduleAgentWorkflowConnections();
+      if (window.innerWidth < 1280 && state.drawerPresentation === "context") closeDrawer(false);
+    });
   }
 
   function bindDialogAndGlobalEvents() {

package/renderer/app-events-filters.js

@@ -61,7 +61,9 @@ window.LoadToAgentAppFactories.createFilterEventBindings = function createFilter
       const item = event.target.closest("[data-workspace]");
       if (item) {
         const label = item.querySelector("strong")?.textContent.trim() || t("project.all");
-        state.workspace = item.dataset.workspace;
+        state.workspace = item.dataset.workspace !== "all" && state.workspace === item.dataset.workspace
+          ? "all"
+          : item.dataset.workspace;
         state.visibleLimit = 30;
         renderWorkspaces();
         renderSessions("filter");

package/renderer/app-events-sessions.js

@@ -218,12 +218,6 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
 
   function bindManagementEvents() {
     $("#operationsOverview").addEventListener("click", async (event) => {
-      const route = event.target.closest("[data-agent-command-route]");
-      if (route) {
-        state.agentCommandRoutes.set(route.dataset.agentCommandSession, route.dataset.agentCommandRoute);
-        renderSessions("route");
-        return;
-      }
       const intervention = event.target.closest("[data-supervision-intervention-open]");
       if (intervention) {
         const details = $("#operationsOverview")?.querySelector(`.supervision-intervention[data-disclosure-key="supervision:command:${CSS.escape(intervention.dataset.supervisionInterventionOpen)}"]`);
@@ -290,12 +284,6 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
       dispatchAgentCommand(form.dataset.agentCommandForm, form);
     });
     $("#attentionInbox").addEventListener("click", async (event) => {
-      const route = event.target.closest("[data-agent-command-route]");
-      if (route) {
-        state.agentCommandRoutes.set(route.dataset.agentCommandSession, route.dataset.agentCommandRoute);
-        renderSessions("route");
-        return;
-      }
       const filter = event.target.closest("[data-management-inbox-filter]");
       if (filter) {
         state.managementFilter = filter.dataset.managementInboxFilter;
@@ -446,14 +434,6 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
         }
         return;
       }
-      const route = event.target.closest("[data-agent-command-route]");
-      if (route) {
-        event.stopPropagation();
-        state.agentCommandRoutes.set(route.dataset.agentCommandSession, route.dataset.agentCommandRoute);
-        renderSessions("route");
-        requestAnimationFrame(() => $("#liveSessionGrid")?.querySelector(`[data-agent-command-session="${CSS.escape(route.dataset.agentCommandSession)}"][data-agent-command-route="${CSS.escape(route.dataset.agentCommandRoute)}"]`)?.focus({ preventScroll: true }));
-        return;
-      }
       const copy = event.target.closest("[data-copy-text]");
       if (copy) {
         event.stopPropagation();
@@ -520,18 +500,18 @@ window.LoadToAgentAppFactories.createSessionEventBindings = function createSessi
       const open = event.target.closest("[data-open-session]");
       if (open) {
         event.stopPropagation();
-        openDrawer(open.dataset.openSession);
+        openDrawer(open.dataset.openSession, { context: true });
         return;
       }
       const subagentChat = event.target.closest("[data-open-subagent-chat]");
       if (subagentChat) {
         event.stopPropagation();
-        openSubagentConversation(subagentChat.dataset.openSubagentChat);
+        openSubagentConversation(subagentChat.dataset.openSubagentChat, { context: true });
         return;
       }
       const node = event.target.closest("[data-graph-focus]");
       if (!node) return;
-      if (state.graphFocusId === node.dataset.graphFocus) openDrawer(node.dataset.graphFocus);
+      if (state.graphFocusId === node.dataset.graphFocus) openDrawer(node.dataset.graphFocus, { context: true });
       else {
         state.graphFocusId = node.dataset.graphFocus;
         renderSessions("focus");

package/renderer/app-graph-orchestration.js

@@ -17,6 +17,7 @@ window.LoadToAgentAppFactories.createGraphOrchestration = function createGraphOr
     stableSessionSort = sessions => [...sessions],
     runtimeAgentSummary,
     liveTmuxEntries,
+    filteredLiveTmuxEntries,
     runtimeSeparatedOverview,
     focusedGraph,
     scheduleAgentWorkflowConnections,
@@ -39,6 +40,7 @@ window.LoadToAgentAppFactories.createGraphOrchestration = function createGraphOr
       && liveSessionGrid.contains(document.activeElement);
     rememberDisclosureStates(liveSessionGrid);
     const model = connectedGraphSessions(sessions);
+    const tmuxEntries = filteredLiveTmuxEntries(model, liveTmuxEntries(state.snapshot && state.snapshot.tmux));
     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;
@@ -48,7 +50,7 @@ window.LoadToAgentAppFactories.createGraphOrchestration = function createGraphOr
       : 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) {
+    if (!model.nodes.length && !tmuxEntries.length) {
       if (!preserveFocusedComposer) liveSessionGrid.innerHTML = "";
       $("#graphBreadcrumbs").innerHTML = "";
       $("#graphResetBtn").classList.add("hidden");
@@ -78,8 +80,8 @@ window.LoadToAgentAppFactories.createGraphOrchestration = function createGraphOr
       $("#graphResetBtn").classList.remove("hidden");
       scheduleAgentWorkflowConnections();
     } else {
-      const runtime = runtimeAgentSummary(model, liveTmuxEntries(state.snapshot && state.snapshot.tmux));
-      if (!preserveFocusedComposer) liveSessionGrid.innerHTML = runtimeSeparatedOverview(roots, model, roots);
+      const runtime = runtimeAgentSummary(model, tmuxEntries);
+      if (!preserveFocusedComposer) liveSessionGrid.innerHTML = runtimeSeparatedOverview(roots, model, roots, tmuxEntries);
       restoreDisclosureStates(liveSessionGrid);
       $("#graphBreadcrumbs").innerHTML = "";
       $("#agentMapToolbar")?.classList.add("hidden");
@@ -87,7 +89,7 @@ window.LoadToAgentAppFactories.createGraphOrchestration = function createGraphOr
       $("#controlRoomListToolbar")?.classList.remove("hidden");
       syncControlRoomDisclosureButtons();
       $("#graphResetBtn").classList.add("hidden");
-      return runtime.activeCount;
+      return runtime.activeCount + tmuxEntries.length;
     }
     return model.nodes.filter(isControlRoomSession).length;
   }

package/renderer/app-graph-view.js

@@ -35,6 +35,7 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
     graphDescendantCount,
     sessionWorkspaceLabel,
     controlRoomProject = session => ({ key: String(session?.workspace || session?.id || "unknown"), label: sessionWorkspaceLabel(session) }),
+    matchesWorkspaceFilter = () => true,
     ensureProjectOrder = projectKeys => projectKeys,
   } = context;
   const t = (key, params) => window.LoadToAgentI18n.t(key, params);
@@ -280,11 +281,49 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
     );
   }
 
+  function tmuxEntrySession(entry) {
+    return {
+      id: `tmux:${entry?.pane?.id || ""}`,
+      provider: entry?.agent?.provider || "",
+      status: "running",
+      title: entry?.agent?.title || entry?.tmuxSession?.name || "",
+      workspace: "",
+      originCwd: entry?.pane?.cwd || "",
+      cwd: entry?.pane?.cwd || "",
+    };
+  }
+
+  function filteredLiveTmuxEntries(model, entries = liveTmuxEntries(state.snapshot && state.snapshot.tmux)) {
+    const sessionsById = new Map((state.snapshot?.sessions || []).map((session) => [String(session.id || ""), session]));
+    const modelSessionIds = new Set((model?.nodes || []).map((session) => String(session.id || "")));
+    const query = String(state.search || "").replace(/\s+/g, " ").trim().toLowerCase();
+    return entries.filter((entry) => {
+      const linkedId = String(entry?.agent?.linkedSessionId || "");
+      const linkedSession = linkedId ? sessionsById.get(linkedId) : null;
+      if (linkedId && modelSessionIds.has(linkedId)) return false;
+      if (linkedSession && !isControlRoomSession(linkedSession)) return false;
+      const session = tmuxEntrySession(entry);
+      if (!session.originCwd || !matchesWorkspaceFilter(session)) return false;
+      if (!query) return true;
+      return [
+        session.title,
+        session.workspace,
+        session.originCwd,
+        entry?.distro?.name,
+        entry?.window?.name,
+        entry?.pane?.command,
+        entry?.agent?.command,
+      ].join(" ").toLowerCase().includes(query);
+    });
+  }
+
   function liveTmuxPaneCard(entry) {
     const { distro, tmuxSession, window, pane, agent } = entry;
     const provider = providerInfo(agent.provider);
     const linked = agent.linkedSessionId ? (state.snapshot?.sessions || []).find((session) => session.id === agent.linkedSessionId) || null : null;
-    const title = linked ? linked.title : pane.title || t("graph.tmux_task", { provider: provider.label });
+    const title = linked
+      ? linked.title
+      : agent.title || pane.title || t("graph.tmux_task", { provider: provider.label });
     const stateLabel = pane.dead ? t("graph.ended") : pane.active ? t("graph.selected_pane") : t("graph.background_running");
     return `<article class="live-tmux-card ${pane.active ? "active" : ""} ${pane.dead ? "dead" : ""}"
       style="${providerStyle(agent.provider)}"
@@ -525,50 +564,69 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
     </article>`;
   }
 
-  function runtimeSeparatedOverview(roots, model, allRoots = roots) {
+  function runtimeSeparatedOverview(roots, model, allRoots = roots, tmuxEntries = filteredLiveTmuxEntries(model)) {
     const projectDescriptor = (root) => {
       const project = controlRoomProject(root);
       return { key: project.key, name: project.label };
     };
+    const addGroupItem = (groups, key, name, field, value) => {
+      if (!groups.has(key)) groups.set(key, { name, roots: [], tmuxEntries: [] });
+      groups.get(key)[field].push(value);
+    };
     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);
+      addGroupItem(allGroups, key, name, "roots", 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);
+      addGroupItem(groups, key, name, "roots", root);
+    });
+    tmuxEntries.forEach((entry) => {
+      const { key, name } = projectDescriptor(tmuxEntrySession(entry));
+      addGroupItem(allGroups, key, name, "tmuxEntries", entry);
+      addGroupItem(groups, key, name, "tmuxEntries", entry);
     });
     const defaultOrderedGroups = [...groups.entries()].sort(([leftKey], [rightKey]) =>
-      Number(allGroups.get(rightKey)?.roots.length || 0) - Number(allGroups.get(leftKey)?.roots.length || 0));
+      Number((allGroups.get(rightKey)?.roots.length || 0) + (allGroups.get(rightKey)?.tmuxEntries.length || 0))
+      - Number((allGroups.get(leftKey)?.roots.length || 0) + (allGroups.get(leftKey)?.tmuxEntries.length || 0)));
     const projectOrder = ensureProjectOrder(defaultOrderedGroups.map(([key]) => key));
     const projectRank = new Map(projectOrder.map((key, index) => [key, index]));
     const orderedGroups = defaultOrderedGroups.sort(([leftKey], [rightKey]) =>
       Number(projectRank.get(leftKey) ?? Number.MAX_SAFE_INTEGER) - Number(projectRank.get(rightKey) ?? Number.MAX_SAFE_INTEGER));
-    const projectGroups = orderedGroups.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) =>
+    const projectGroups = orderedGroups.map(([key, { name, roots: projectRoots, tmuxEntries: projectTmuxEntries }], index) => {
+      const projectTotals = allGroups.get(key) || { roots: projectRoots, tmuxEntries: projectTmuxEntries };
+      const activeCount = projectTotals.roots.filter((root) => isLiveSession(root)).length;
+      const attentionCount = projectTotals.roots.filter((root) =>
         !isLiveSession(root)
         && isControlRoomSession(root)
         && ["waiting", "failed", "paused"].includes(root.status)).length;
-      const summary = attentionCount
+      const sessionSummary = attentionCount
         ? t("control.project_live_attention_summary", { active: activeCount, attention: attentionCount })
         : t("control.project_live_summary", { active: activeCount });
+      const tmuxSummary = projectTotals.tmuxEntries.length
+        ? t("control.project_tmux_summary", { count: projectTotals.tmuxEntries.length })
+        : "";
+      const summary = projectTotals.roots.length ? [sessionSummary, tmuxSummary].filter(Boolean).join(" · ") : tmuxSummary;
       const disclosureKey = `control-project:${key}`;
       const presentation = index === 0 ? "is-primary" : "is-secondary";
       const projectFocusId = projectRoots[0]?.id || "";
+      const totalCount = projectTotals.roots.length + projectTotals.tmuxEntries.length;
+      const tmuxCards = projectTmuxEntries.length
+        ? `<section class="control-project-tmux-section">
+          <header><span><i aria-hidden="true">▦</i><b>${esc(t("graph.tmux_session"))}</b></span><small>${esc(t("control.project_tmux_help"))}</small></header>
+          <div class="live-tmux-grid">${projectTmuxEntries.map((entry) => liveTmuxPaneCard(entry)).join("")}</div>
+        </section>`
+        : "";
       return `<details class="control-room-project-group ${presentation}" data-control-project="${esc(name)}" data-project-sortable="${esc(key)}" data-disclosure-key="${esc(disclosureKey)}">
         <summary class="control-project-header" data-project-toggle="${esc(name)}" draggable="true" aria-grabbed="false"
           aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown" aria-label="${esc(t("project.drag_label", { name }))}" aria-describedby="projectReorderHelp">
-          <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-heading"><i aria-hidden="true">□</i><b>${esc(name)}</b><small>${esc(summary)}</small><em>${totalCount}</em></span>
           <span class="control-project-handle" aria-hidden="true" title="${esc(t("project.reorder_hint"))}"></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>
+        ${projectFocusId ? `<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("")}${tmuxCards}</div>
       </details>`;
     }).join("");
     return `<div class="control-room-overview" data-control-room-overview="true">
@@ -892,7 +950,7 @@ window.LoadToAgentAppFactories.createGraphView = function createGraphView(contex
   }
 
   return {
-    graphNode, compactGraphNode, providerFlowLane, workflowCompactNode, liveTmuxEntries, liveTmuxPaneCard, runtimeSeparatedOverview,
+    graphNode, compactGraphNode, providerFlowLane, workflowCompactNode, liveTmuxEntries, tmuxEntrySession, filteredLiveTmuxEntries, liveTmuxPaneCard, runtimeSeparatedOverview,
     controlRoomIntent, controlRoomSummary, controlRoomAgentGoal, inferredExecutionSummary,
     workflowMetrics, workflowChildrenSummary, splitSubagents, completedSubagentDisclosure, agentPathTaskName, communicationEndpoint,
     workflowCommunicationPanel, executionActivityLabel, executionActivityStatus, executionActivityCard, executionActivityPanel, focusedGraph,

package/renderer/app-session-render.js

@@ -168,7 +168,11 @@ window.LoadToAgentAppFactories.createSessionRenderer = function createSessionRen
     const graphLiveCount = showMap ? renderAgentMap(graphFilteredSessions(), motionKind) : 0;
     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;
+    const resultCount = attentionView
+      ? attentionCount
+      : state.view === "active"
+        ? graphLiveCount
+        : regular.length;
     $("#sessionResultSummary").textContent = window.LoadToAgentI18n.t("quality.results_summary", { count: resultCount });
     const activeEmpty = state.view === "active" && graphLiveCount === 0;
     $("#activeEmptyState").classList.toggle("hidden", !activeEmpty);