loadtoagent 1.0.0

package/renderer/app-events-sessions.js

@@ -0,0 +1,195 @@
+"use strict";
+
+window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
+
+window.LoadToAgentAppFactories.createSessionEventBindings = function createSessionEventBindings(context = {}) {
+  const {
+    $, state, selectView, renderProviderOverview, renderProviderFilter, toggleProviderFilter, announceProviderFilter, renderSessions, renderTmuxMap, openDrawer, openSubagentConversation,
+    dispatchAgentCommand, openAgentTerminal, copyBridgeCommand, openSessionOrigin,
+  } = context;
+
+  function bindSessionListEvents() {
+    $("#providerOverview").addEventListener("click", (event) => {
+      const card = event.target.closest("[data-provider-card]");
+      if (!card) return;
+      toggleProviderFilter(card.dataset.providerCard);
+      state.visibleLimit = 30;
+      renderProviderFilter();
+      renderProviderOverview();
+      renderSessions("filter");
+      announceProviderFilter();
+      requestAnimationFrame(() => $("#providerOverview").querySelector(`[data-provider-card="${CSS.escape(card.dataset.providerCard)}"]`)?.focus());
+    });
+    $("#sessionGrid").addEventListener("click", (event) => {
+      const card = event.target.closest("[data-session-id]");
+      if (card) openDrawer(card.dataset.sessionId);
+    });
+    $("#sessionGrid").addEventListener("keydown", (event) => {
+      const card = event.target.closest("[data-session-id]");
+      if (card && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        openDrawer(card.dataset.sessionId);
+      }
+    });
+  }
+
+  function bindLiveAgentEvents() {
+    $("#liveSessionGrid").addEventListener("click", (event) => {
+      const tmuxPane = event.target.closest('.live-tmux-pane[data-tmux-type="pane"][data-tmux-id]');
+      const tmuxOverview = event.target.closest(".live-tmux-overview-open");
+      if (tmuxPane || tmuxOverview) {
+        event.stopPropagation();
+        if (tmuxPane) state.tmuxFocus = { type: "pane", id: tmuxPane.dataset.tmuxId };
+        selectView("tmux");
+        if (tmuxPane) window.LoadToAgentTerminal?.selectTmuxById(tmuxPane.dataset.tmuxId);
+        return;
+      }
+      const bridge = event.target.closest("[data-agent-bridge-copy]");
+      if (bridge) {
+        event.stopPropagation();
+        copyBridgeCommand(bridge.dataset.agentBridgeCopy);
+        return;
+      }
+      const origin = event.target.closest("[data-agent-open-origin]");
+      if (origin) {
+        event.stopPropagation();
+        openSessionOrigin(origin.dataset.agentOpenOrigin);
+        return;
+      }
+      const terminal = event.target.closest("[data-agent-terminal-open]");
+      if (terminal) {
+        event.stopPropagation();
+        openAgentTerminal(terminal.dataset.agentTerminalOpen);
+        return;
+      }
+      const completedToggle = event.target.closest("[data-subagent-completed-toggle]");
+      if (completedToggle) {
+        const ownerId = completedToggle.dataset.subagentCompletedToggle;
+        if (state.expandedCompletedSubagents.has(ownerId)) state.expandedCompletedSubagents.delete(ownerId);
+        else state.expandedCompletedSubagents.add(ownerId);
+        renderSessions("expand");
+        return;
+      }
+      const more = event.target.closest("[data-graph-provider-more]");
+      if (more) {
+        state.graphExpandedProviders.add(more.dataset.graphProviderMore);
+        renderSessions("expand");
+        return;
+      }
+      const less = event.target.closest("[data-graph-provider-less]");
+      if (less) {
+        state.graphExpandedProviders.delete(less.dataset.graphProviderLess);
+        renderSessions("expand");
+        return;
+      }
+      const open = event.target.closest("[data-open-session]");
+      if (open) {
+        event.stopPropagation();
+        openDrawer(open.dataset.openSession);
+        return;
+      }
+      const subagentChat = event.target.closest("[data-open-subagent-chat]");
+      if (subagentChat) {
+        event.stopPropagation();
+        openSubagentConversation(subagentChat.dataset.openSubagentChat);
+        return;
+      }
+      const node = event.target.closest("[data-graph-focus]");
+      if (!node) return;
+      if (state.graphFocusId === node.dataset.graphFocus) openDrawer(node.dataset.graphFocus);
+      else {
+        state.graphFocusId = node.dataset.graphFocus;
+        renderSessions("focus");
+      }
+    });
+    $("#liveSessionGrid").addEventListener("input", (event) => {
+      const input = event.target.closest("[data-agent-command-draft]");
+      if (input) state.agentCommandDrafts.set(input.dataset.agentCommandDraft, input.value);
+    });
+    $("#liveSessionGrid").addEventListener("change", (event) => {
+      const picker = event.target.closest("[data-agent-command-target]");
+      if (!picker) return;
+      if (picker.value) state.agentCommandTargets.set(picker.dataset.agentCommandTarget, picker.value);
+      else state.agentCommandTargets.delete(picker.dataset.agentCommandTarget);
+      const form = picker.closest("[data-agent-command-form]");
+      const enabled = Boolean(picker.value);
+      form &&
+        form.querySelectorAll("button").forEach((button) => {
+          button.disabled = !enabled;
+        });
+    });
+    $("#liveSessionGrid").addEventListener("keydown", (event) => {
+      const input = event.target.closest("[data-agent-command-draft]");
+      if (!input || event.key !== "Enter" || event.shiftKey || event.isComposing || event.keyCode === 229) return;
+      event.preventDefault();
+      input.closest("form")?.requestSubmit();
+    });
+    $("#liveSessionGrid").addEventListener("submit", (event) => {
+      const form = event.target.closest("[data-agent-command-form]");
+      if (!form) return;
+      event.preventDefault();
+      dispatchAgentCommand(form.dataset.agentCommandForm, form);
+    });
+  }
+
+  function bindGraphNavigationEvents() {
+    $("#graphBreadcrumbs").addEventListener("click", (event) => {
+      if (event.target.closest("[data-graph-reset]")) state.graphFocusId = null;
+      else {
+        const node = event.target.closest("[data-graph-focus]");
+        if (!node) return;
+        state.graphFocusId = node.dataset.graphFocus;
+      }
+      renderSessions("focus-back");
+    });
+    $("#graphResetBtn").addEventListener("click", () => {
+      state.graphFocusId = null;
+      renderSessions("focus-back");
+    });
+  }
+
+  function bindTmuxMapEvents() {
+    $("#tmuxMap").addEventListener("click", (event) => {
+      const control = event.target.closest("[data-control-tmux]");
+      if (control) {
+        event.stopPropagation();
+        window.LoadToAgentTerminal?.selectTmuxById(control.dataset.controlTmux);
+        $("#tmuxControlSection").scrollIntoView({ behavior: "smooth", block: "start" });
+        return;
+      }
+      const open = event.target.closest("[data-open-session]");
+      if (open) {
+        event.stopPropagation();
+        openDrawer(open.dataset.openSession);
+        return;
+      }
+      const node = event.target.closest("[data-tmux-type][data-tmux-id]");
+      if (!node) return;
+      state.tmuxFocus = { type: node.dataset.tmuxType, id: node.dataset.tmuxId };
+      renderTmuxMap();
+      if (node.dataset.tmuxType === "pane") window.LoadToAgentTerminal?.selectTmuxById(node.dataset.tmuxId);
+    });
+    $("#tmuxBreadcrumbs").addEventListener("click", (event) => {
+      if (event.target.closest("[data-tmux-reset]")) state.tmuxFocus = null;
+      else {
+        const node = event.target.closest("[data-tmux-type][data-tmux-id]");
+        if (!node) return;
+        state.tmuxFocus = { type: node.dataset.tmuxType, id: node.dataset.tmuxId };
+      }
+      renderTmuxMap();
+    });
+    $("#tmuxResetBtn").addEventListener("click", () => {
+      state.tmuxFocus = null;
+      renderTmuxMap();
+    });
+  }
+
+  function bindSessionAndAgentEvents() {
+    bindSessionListEvents();
+    bindLiveAgentEvents();
+    bindGraphNavigationEvents();
+    bindTmuxMapEvents();
+  }
+
+  return { bindSessionAndAgentEvents };
+};

package/renderer/app-events.js

@@ -0,0 +1,16 @@
+"use strict";
+
+window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
+
+window.LoadToAgentAppFactories.createEventBindings = function createEventBindings(context = {}) {
+  const { bindNavigationAndUpdateEvents, bindSessionAndAgentEvents, bindFilterAndWorkspaceEvents, bindDialogAndGlobalEvents } = context;
+
+  function bindEvents() {
+    bindNavigationAndUpdateEvents();
+    bindSessionAndAgentEvents();
+    bindFilterAndWorkspaceEvents();
+    bindDialogAndGlobalEvents();
+  }
+
+  return { bindEvents };
+};

package/renderer/app-graph-layout.js

@@ -0,0 +1,71 @@
+"use strict";
+
+window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
+
+window.LoadToAgentAppFactories.createGraphLayout = function createGraphLayout(context = {}) {
+  const {
+    $,
+  } = context;
+
+  let agentWorkflowFrame = 0;
+
+  function workflowPortPoint(port, canvasRect) {
+    const rect = port.getBoundingClientRect();
+    return { x: rect.left - canvasRect.left + rect.width / 2, y: rect.top - canvasRect.top + rect.height / 2 };
+  }
+
+  function workflowCurve(from, to) {
+    const horizontal = Math.abs(to.x - from.x) >= Math.abs(to.y - from.y);
+    if (horizontal) {
+      const distance = Math.max(34, Math.abs(to.x - from.x) * 0.48);
+      return [
+        `M ${from.x.toFixed(1)} ${from.y.toFixed(1)}`,
+        `C ${(from.x + distance).toFixed(1)} ${from.y.toFixed(1)},`,
+        `${(to.x - distance).toFixed(1)} ${to.y.toFixed(1)},`,
+        `${to.x.toFixed(1)} ${to.y.toFixed(1)}`,
+      ].join(" ");
+    }
+    const distance = Math.max(34, Math.abs(to.y - from.y) * 0.48);
+    return [
+      `M ${from.x.toFixed(1)} ${from.y.toFixed(1)}`,
+      `C ${from.x.toFixed(1)} ${(from.y + distance).toFixed(1)},`,
+      `${to.x.toFixed(1)} ${(to.y - distance).toFixed(1)},`,
+      `${to.x.toFixed(1)} ${to.y.toFixed(1)}`,
+    ].join(" ");
+  }
+
+  function drawAgentWorkflowConnections() {
+    const canvas = document.querySelector(".agent-workflow-canvas");
+    if (!canvas || !canvas.isConnected) return;
+    const svg = canvas.querySelector(".agent-workflow-edges");
+    const paths = svg && svg.querySelector("[data-workflow-paths]");
+    const upstream = canvas.querySelector('[data-workflow-port="upstream-output"]');
+    const focusInput = canvas.querySelector('[data-workflow-port="focus-input"]');
+    const focusOutput = canvas.querySelector('[data-workflow-port="focus-output"]');
+    const childrenGroupInput = canvas.querySelector('[data-workflow-port="children-group-input"]');
+    if (!svg || !paths || !upstream || !focusInput) return;
+    const rect = canvas.getBoundingClientRect();
+    svg.setAttribute("viewBox", `0 0 ${Math.max(1, rect.width)} ${Math.max(1, rect.height)}`);
+    const upstreamPath = `<path class="agent-workflow-edge upstream branch"
+      data-workflow-edge-kind="upstream" pathLength="1"
+      d="${workflowCurve(workflowPortPoint(upstream, rect), workflowPortPoint(focusInput, rect))}"
+      marker-end="url(#workflowArrow)">
+      </path>`;
+    const downstreamPath =
+      focusOutput && childrenGroupInput
+        ? `<path class="agent-workflow-edge downstream group"
+          data-workflow-edge-kind="children-group" pathLength="1"
+          d="${workflowCurve(workflowPortPoint(focusOutput, rect), workflowPortPoint(childrenGroupInput, rect))}"
+          marker-end="url(#workflowArrow)">
+        </path>`
+        : "";
+    paths.innerHTML = `${upstreamPath}${downstreamPath}`;
+  }
+
+  function scheduleAgentWorkflowConnections() {
+    cancelAnimationFrame(agentWorkflowFrame);
+    agentWorkflowFrame = requestAnimationFrame(() => requestAnimationFrame(drawAgentWorkflowConnections));
+  }
+
+  return { agentWorkflowFrame, workflowPortPoint, workflowCurve, drawAgentWorkflowConnections, scheduleAgentWorkflowConnections };
+};

package/renderer/app-graph-model.js

@@ -0,0 +1,107 @@
+"use strict";
+
+window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
+
+window.LoadToAgentAppFactories.createGraphModel = function createGraphModel(context = {}) {
+  const {
+    $,
+    esc,
+    state,
+    compact,
+    isLiveSession,
+  } = context;
+
+  function graphPath(session, byId) {
+    const path = [];
+    const seen = new Set();
+    let current = session;
+    while (current && !seen.has(current.id)) {
+      path.unshift(current);
+      seen.add(current.id);
+      current = current.parentId ? byId.get(current.parentId) : null;
+    }
+    return path;
+  }
+
+  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 includeAncestors = (session) => {
+      let current = session;
+      const seen = new Set();
+      while (current && !seen.has(current.id)) {
+        included.add(current.id);
+        seen.add(current.id);
+        current = current.parentId ? byId.get(current.parentId) : null;
+      }
+    };
+    sessions.filter(isLiveSession).forEach(includeAncestors);
+    const includeDescendants = (session) => {
+      const queue = [...((session && session.childIds) || [])];
+      const seen = new Set();
+      while (queue.length) {
+        const id = queue.shift();
+        if (!id || seen.has(id)) continue;
+        seen.add(id);
+        included.add(id);
+        const child = byId.get(id);
+        if (child) queue.push(...(child.childIds || []));
+      }
+    };
+    const requestedFocus = focusId && byId.get(focusId);
+    if (requestedFocus) {
+      includeAncestors(requestedFocus);
+      includeDescendants(requestedFocus);
+    }
+    for (const id of [...included]) {
+      const session = byId.get(id);
+      for (const childId of (session && session.childIds) || []) included.add(childId);
+    }
+    return { byId, included, nodes: sessions.filter((session) => included.has(session.id)) };
+  }
+
+  function sortGraphNodes(sessions) {
+    return [...sessions].sort((a, b) => {
+      const statusA = isLiveSession(a) ? 3 : a.status === "waiting" ? 2 : a.status === "failed" ? 1 : 0;
+      const statusB = isLiveSession(b) ? 3 : b.status === "waiting" ? 2 : b.status === "failed" ? 1 : 0;
+      return statusB - statusA || Date.parse(b.updatedAt || 0) - Date.parse(a.updatedAt || 0);
+    });
+  }
+
+  function graphChildren(session, model) {
+    return sortGraphNodes((session.childIds || []).map((id) => model.byId.get(id)).filter(Boolean));
+  }
+
+  function agentExecutionMode(session) {
+    const presence = Array.isArray(session && session.runtimePresence) ? session.runtimePresence : [];
+    const tmux = presence.find((item) => item.kind === "tmux");
+    if (tmux)
+      return {
+        kind: "tmux",
+        label: "TMUX 사용",
+        detail: [tmux.distro, tmux.sessionName, tmux.paneNativeId || tmux.paneId].filter(Boolean).join(" · ") || "분할 터미널에서 실행",
+      };
+    return { kind: "standard", label: "일반 실행", detail: "TMUX 미사용" };
+  }
+
+  function executionModeBadge(session, compact = false) {
+    const mode = agentExecutionMode(session);
+    return `<span class="execution-mode-badge ${mode.kind}" title="${esc(mode.detail)}">
+      <i>${mode.kind === "tmux" ? "▦" : "›_"}</i>
+      <b>${esc(mode.label)}</b>${compact ? "" : `<small>${esc(mode.detail)}</small>`}</span>`;
+  }
+
+  function graphDescendantCount(session, model) {
+    const queue = [...(session.childIds || [])];
+    const seen = new Set();
+    while (queue.length) {
+      const id = queue.shift();
+      if (!id || seen.has(id) || !model.byId.has(id)) continue;
+      seen.add(id);
+      queue.push(...(model.byId.get(id).childIds || []));
+    }
+    return seen.size;
+  }
+
+  return { graphPath, connectedGraphSessions, sortGraphNodes, graphChildren, agentExecutionMode, executionModeBadge, graphDescendantCount };
+};

package/renderer/app-graph-orchestration.js

@@ -0,0 +1,76 @@
+"use strict";
+
+window.LoadToAgentAppFactories = window.LoadToAgentAppFactories || {};
+
+window.LoadToAgentAppFactories.createGraphOrchestration = function createGraphOrchestration(context = {}) {
+  const {
+    $,
+    esc,
+    state,
+    readablePreview,
+    agentRoleLabel,
+    isLiveSession,
+    graphPath,
+    connectedGraphSessions,
+    sortGraphNodes,
+    agentExecutionMode,
+    liveTmuxEntries,
+    runtimeSeparatedOverview,
+    focusedGraph,
+    scheduleAgentWorkflowConnections,
+  } = context;
+
+  function renderAgentMap(sessions, motionKind = "refresh") {
+    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)));
+    if (!model.nodes.length) {
+      $("#liveSessionGrid").innerHTML = "";
+      $("#graphBreadcrumbs").innerHTML = "";
+      $("#graphResetBtn").classList.add("hidden");
+      return 0;
+    }
+
+    if (focus) {
+      $("#liveSessionGrid").innerHTML = focusedGraph(focus, model, motionKind);
+      const path = graphPath(focus, model.byId);
+      $("#graphBreadcrumbs").innerHTML = `<button type="button" data-graph-reset>작업 목록</button>${path
+        .map((item) => {
+          const label = item.parentId ? item.agentName || agentRoleLabel(item.agentRole) : item.title;
+          const preview = readablePreview(label, item.parentId ? 42 : 72);
+          return `<i>›</i>
+          <button type="button" data-graph-focus="${esc(item.id)}"
+            class="${item.id === focus.id ? "current" : ""}"
+            title="${esc(preview.full)}">${esc(preview.text)}</button>`;
+        })
+        .join("")}`;
+      $("#graphResetBtn").classList.remove("hidden");
+      scheduleAgentWorkflowConnections();
+    } else {
+      const tmuxEntries = liveTmuxEntries();
+      const standardRoots = roots.filter((root) => agentExecutionMode(root).kind !== "tmux");
+      const activeCount = model.nodes.filter(isLiveSession).length + tmuxEntries.filter((entry) => !entry.agent.linkedSessionId).length;
+      $("#liveSessionGrid").innerHTML = `<details class="runtime-disclosure" open>
+        <summary>
+        <span>
+        <b>${activeCount}개 AI가 작업 중입니다</b>
+        <small>일반 실행과 tmux의 세부 흐름은 필요할 때 펼쳐보세요.</small>
+        </span>
+        <em>상세 흐름 보기 <i aria-hidden="true">↓</i>
+        </em>
+        </summary>${runtimeSeparatedOverview(roots, model)}</details>`;
+      $("#graphBreadcrumbs").innerHTML =
+        `<span class="map-hint">
+          일반 실행 <b>${standardRoots.length}</b>개 ·
+          TMUX AI <b>${tmuxEntries.length}</b>개 ·
+          <b>${model.nodes.filter((item) => item.parentId).length}</b>개 도움 AI
+        </span>`;
+      $("#graphResetBtn").classList.add("hidden");
+    }
+    return model.nodes.filter(isLiveSession).length + liveTmuxEntries().filter((entry) => !entry.agent.linkedSessionId).length;
+  }
+
+  return { renderAgentMap };
+};