loadtoagent 1.0.0

package/renderer/styles.css

@@ -0,0 +1,486 @@
+/*
+ * Foundation
+ * -----------
+ * Design tokens, document defaults, application shell, and primary navigation.
+ */
+
+* {
+  box-sizing: border-box;
+}
+
+.hidden {
+  display: none!important;
+}
+
+.sidebar>.brand {
+  flex-shrink: 0;
+}
+
+.sidebar>.view-nav {
+  flex-shrink: 0;
+}
+
+.sidebar>.sidebar-section {
+  flex-shrink: 0;
+}
+
+.sidebar>.sidebar-footer {
+  flex-shrink: 0;
+}
+
+.sidebar>.workspace-section {
+  flex: none;
+  overflow: visible;
+}
+
+.sidebar>.workspace-section .workspace-list {
+  max-height: 180px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 8px 24px;
+}
+
+.brand-orbit {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  border: 1px solid #365169;
+  border-radius: 50%;
+  box-shadow: inset 0 0 14px rgba(77,190,232,.09);
+}
+
+.brand-orbit:before {
+  content: "";
+  position: absolute;
+  inset: 6px;
+  border: 1px solid #263849;
+  border-radius: 50%;
+}
+
+.brand-orbit span {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--cyan);
+  box-shadow: 0 0 14px var(--cyan);
+  top: 4px;
+  left: 4px;
+}
+
+.view-nav {
+  display: grid;
+  gap: 4px;
+}
+
+.nav-item:hover {
+  background: #121824;
+  color: #dbe5f2;
+}
+
+.nav-item.active {
+  background: linear-gradient(90deg,rgba(77,183,226,.15),rgba(77,183,226,.05));
+  color: #eefaff;
+  box-shadow: inset 2px 0 var(--cyan);
+}
+
+.nav-item.active b {
+  background: #173b4a;
+  color: #85e5ff;
+}
+
+.nav-icon {
+  font-size: 14px;
+  text-align: center;
+}
+
+.sidebar-section {
+  margin-top: 24px;
+  min-height: 0;
+}
+
+.sidebar-footer {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 15px 8px 0;
+  border-top: 1px solid var(--line-soft);
+}
+
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 40px;
+  align-items: flex-start;
+  max-width: 1640px;
+  margin: auto;
+}
+
+.top-actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding-top: 5px;
+}
+
+.sidebar {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg,rgba(14,18,28,.98),rgba(9,12,19,.98));
+  border-right: 1px solid var(--line);
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 24px 17px 18px;
+}
+
+.brand strong {
+  display: block;
+  letter-spacing: -.02em;
+  font-size: 20px;
+}
+
+.brand small {
+  display: block;
+  margin-top: 3px;
+  color: #657187;
+  font-weight: 700;
+  letter-spacing: .18em;
+  font-size: 9px;
+}
+
+.nav-group-label {
+  margin: 18px 10px 6px;
+  color: #718096;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .08em;
+}
+
+html[data-motion="full"] {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  font-family: Geist,"Segoe UI",sans-serif;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.sidebar-app-version {
+  margin-left: auto;
+  padding: 4px 7px;
+  border: 1px solid #2b3b44;
+  border-radius: 7px;
+  background: #101923;
+  color: #7f929d;
+  font-family: "Geist Mono","Cascadia Code",Consolas,monospace;
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: .02em;
+  white-space: nowrap;
+}
+
+html {
+  margin: 0;
+  min-height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  font-family: Geist,"Segoe UI",sans-serif;
+  max-width: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:root {
+  color-scheme: dark;
+  --bg: #070910;
+  --panel: #0d111a;
+  --panel-2: #111722;
+  --panel-3: #151c28;
+  --line: #202838;
+  --line-soft: #171e2b;
+  --text: #f4f7fb;
+  --cyan: #59d8ff;
+  --green: #4ce39a;
+  --amber: #f6bd55;
+  --red: #ff6b7f;
+  --radius: 17px;
+  --sidebar: 272px;
+  --motion-fast: 160ms;
+  --motion-medium: 280ms;
+  --motion-slow: 440ms;
+  --motion-ease: cubic-bezier(.22,1,.36,1);
+  --motion-standard: cubic-bezier(.2,.8,.2,1);
+  --muted: #aab6c5;
+  --dim: #8794a6;
+  --focus: #8ae8ff;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  font-weight: 760;
+  letter-spacing: .17em;
+  color: #8d9bad;
+  font-size: 11px;
+}
+
+.nav-item b {
+  min-width: 22px;
+  text-align: center;
+  padding: 2px 6px;
+  border-radius: 10px;
+  background: #1c2431;
+  color: #aeb9c7;
+  font-size: 11px;
+}
+
+.sidebar-footer strong {
+  display: block;
+  color: #aeb9c7;
+  font-size: 11px;
+}
+
+.sidebar-footer small {
+  display: block;
+  margin-top: 3px;
+  color: #8795a6;
+  font-size: 10px;
+}
+
+.app-shell {
+  height: 100vh;
+  display: grid;
+  grid-template-columns: var(--sidebar) minmax(0,1fr);
+  background: radial-gradient(circle at 76% -12%,rgba(58,115,160,.16),transparent 35%),var(--bg);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.main-stage {
+  height: 100vh;
+  overflow: auto;
+  scrollbar-color: #283244 transparent;
+  padding: 28px clamp(24px,2.5vw,44px) 64px;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.topbar>div {
+  min-width: 0;
+}
+
+.nav-item {
+  width: 100%;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  display: grid;
+  grid-template-columns: 22px 1fr auto;
+  align-items: center;
+  gap: 7px;
+  text-align: left;
+  cursor: pointer;
+  height: 46px;
+  min-height: 44px;
+  color: #aab5c4;
+  font-size: 13px;
+  transition: transform var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-medium) ease,opacity var(--motion-fast) ease;
+}
+
+.nav-item.active .nav-icon {
+  animation: motion-select-pop var(--motion-medium) var(--motion-ease);
+}
+
+.subtitle {
+  max-width: 750px;
+  margin: 10px 0 0;
+  color: #a0adbd;
+  font-size: 14px;
+  line-height: 1.65;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+.topbar h1 {
+  margin: 0;
+  font-weight: 680;
+  letter-spacing: -.045em;
+  font-size: clamp(28px,2vw,36px);
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+
+@font-face {
+  font-family: Geist;
+  src: url("fonts/geist.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Geist;
+  src: url("fonts/geist-ext.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+1100-11FF,U+3130-318F,U+AC00-D7AF;
+}
+
+@keyframes wave {
+  50% {
+    transform: scaleY(.45);
+    opacity: .32;
+  }
+}
+
+@keyframes meter-alert {
+  50% {
+    filter: brightness(1.25);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes motion-select-pop {
+  0% {
+    transform: scale(.86);
+    opacity: .65;
+  }
+
+  70% {
+    transform: scale(1.08);
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes motion-section-in {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes motion-edge-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes motion-content-in {
+  from {
+    opacity: .55;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes motion-item-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes motion-backdrop-in {
+  from {
+    opacity: 0;
+    backdrop-filter: blur(0);
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes motion-backdrop-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    backdrop-filter: blur(0);
+  }
+}
+
+@keyframes motion-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(18px) scale(.975);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes motion-modal-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(10px) scale(.985);
+  }
+}
+
+@keyframes motion-toast-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%,12px) scale(.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%,0) scale(1);
+  }
+}
+
+@keyframes motion-toast-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%,0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate(-50%,8px);
+  }
+}

package/renderer/terminal-agent.js

@@ -0,0 +1,152 @@
+'use strict';
+
+/** Connect dashboard agent sessions to live or resumed terminal targets. */
+window.LoadToAgentTerminalAgentActions = function createModule(context) {
+  const {
+    $, state, init, notice, moveWorkbench, selectTmux, selectSession, bindAgent, queueHistoryRefresh,
+    renderTarget, fitEntry, refreshSessions, resumeSupport, resumeLaunchArgs, preferredWorkspace, providerLabel, esc,
+  } = context;
+
+  function tmuxRows(snapshot = state.snapshot) {
+    const rows = [];
+    for (const distro of snapshot && snapshot.tmux && snapshot.tmux.distros || []) {
+      for (const session of distro.sessions || []) {
+        for (const windowItem of session.windows || []) {
+          for (const pane of windowItem.panes || []) rows.push({ distro, session, window: windowItem, pane });
+        }
+      }
+    }
+    return rows;
+  }
+
+  function agentTargets(agentSession) {
+    if (!agentSession || !agentSession.id) return [];
+    const targets = [];
+    const presence = Array.isArray(agentSession.runtimePresence) ? agentSession.runtimePresence : [];
+    const tmuxPresence = presence.filter(item => item.kind === 'tmux');
+    for (const row of tmuxRows()) {
+      const pane = row.pane || {};
+      const linked = pane.agent && pane.agent.linkedSessionId === agentSession.id;
+      const observed = tmuxPresence.some(item => item.paneId === pane.id
+        || item.paneNativeId === pane.nativeId
+        || item.id === `tmux:${row.distro.name}:${pane.nativeId}`);
+      if (!linked && !observed) continue;
+      targets.push({
+        id: `tmux:${row.distro.name}:${pane.nativeId}`,
+        kind: 'tmux',
+        label: `${row.distro.name} · ${row.session.name} · ${pane.nativeId}`,
+        detail: `${row.window.index}:${row.window.name} · ${pane.command || 'AI 명령창'}`,
+        distro: row.distro.name,
+        paneId: pane.id,
+        paneNativeId: pane.nativeId,
+      });
+    }
+    for (const terminal of state.sessions) {
+      if (terminal.status !== 'running') continue;
+      const matched = terminal.bridgeId === agentSession.id || presence.some(item => item.terminalId === terminal.id
+        || Number(item.pid || 0) === Number(terminal.pid || -1)
+        || Number(item.parentPid || 0) === Number(terminal.pid || -1));
+      if (!matched) continue;
+      targets.push({
+        id: terminal.id,
+        kind: 'terminal',
+        label: terminal.title,
+        detail: `${String(terminal.type || '').toUpperCase()} · PID ${terminal.pid || '--'}`,
+        terminalId: terminal.id,
+      });
+    }
+    return [...new Map(targets.map(target => [target.id, target])).values()];
+  }
+
+  function requiredAgentTarget(agentSession, targetId = '') {
+    const targets = agentTargets(agentSession);
+    if (!targets.length) throw new Error('이 AI가 실행 중인 입력 가능한 터미널을 찾지 못했습니다. 외부 터미널에서 시작한 AI는 LoadToAgent가 직접 입력할 수 없습니다.');
+    if (targetId) {
+      const selected = targets.find(target => target.id === targetId);
+      if (!selected) throw new Error('선택한 터미널 연결이 더 이상 유효하지 않습니다.');
+      return selected;
+    }
+    if (targets.length > 1) throw new Error('지시를 보낼 터미널을 먼저 선택하세요.');
+    return targets[0];
+  }
+
+  async function dispatchAgentCommand(agentSession, command, targetId = '') {
+    await init();
+    const text = String(command || '').trim();
+    if (!text) throw new Error('AI에게 보낼 지시를 입력하세요.');
+    const target = requiredAgentTarget(agentSession, targetId);
+    const result = target.kind === 'tmux'
+      ? await window.loadtoagent.tmuxSendText({ distro: target.distro, target: target.paneNativeId, text, enter: true })
+      : await window.loadtoagent.terminalCommand(target.terminalId, text);
+    if (!result || result.ok === false) throw new Error(result && result.error || '터미널에 지시를 보내지 못했습니다.');
+    notice(`${target.label}에 AI 지시를 보냈습니다.`, 'success');
+    return { ok: true, target };
+  }
+
+  async function openForAgent(agentSession, targetId = '', draft = '') {
+    await init();
+    const target = requiredAgentTarget(agentSession, targetId);
+    state.mode = target.kind === 'tmux' ? 'tmux' : 'general';
+    moveWorkbench(state.mode);
+    if (target.kind === 'tmux') await selectTmux(target.distro, target.paneNativeId);
+    else await selectSession(target.terminalId);
+    bindAgent(agentSession, target);
+    queueHistoryRefresh(agentSession);
+    renderTarget();
+    const entry = target.kind === 'tmux' ? state.remoteTerminal : state.terminals.get(target.terminalId);
+    fitEntry(entry, target.kind === 'tmux' ? '' : target.terminalId);
+    const input = $('#terminalCommandInput');
+    input.value = String(draft || '');
+    state.commandDrafts.set(target.id, input.value);
+    input.focus({ preventScroll: true });
+    notice(`${target.label}의 기존 세션을 유지하고 있습니다. 이전 대화를 보면서 이어서 입력하세요.`, 'success');
+    return target;
+  }
+
+  async function resumeForAgent(agentSession, draft = '', sendDraft = false) {
+    await init();
+    const support = resumeSupport(agentSession);
+    if (!support.supported) throw new Error(support.reason);
+    const cwd = String(agentSession.cwd || preferredWorkspace() || '').trim();
+    if (!cwd) throw new Error('이 AI가 작업하던 폴더를 찾지 못해 세션을 안전하게 재개할 수 없습니다.');
+    const prompt = String(draft || '').trim();
+    const title = `${providerLabel(agentSession.provider)} · ${agentSession.taskName || agentSession.agentName || '세션'} 이어서 작업`;
+    const created = await window.loadtoagent.terminalCreate({
+      type: 'agent',
+      provider: support.provider,
+      args: resumeLaunchArgs(support, sendDraft ? prompt : ''),
+      cwd,
+      bridgeId: agentSession.id,
+      title,
+      cols: 120,
+      rows: 32,
+    });
+    if (!created || !created.id) throw new Error('AI 세션을 재개할 터미널을 만들지 못했습니다.');
+    state.mode = 'general';
+    moveWorkbench('general');
+    await refreshSessions();
+    await selectSession(created.id);
+    const target = {
+      id: created.id,
+      kind: 'terminal',
+      label: created.title || title,
+      detail: `${String(created.type || 'agent').toUpperCase()} · PID ${created.pid || '--'}`,
+      terminalId: created.id,
+    };
+    bindAgent(agentSession, target);
+    queueHistoryRefresh(agentSession);
+    renderTarget();
+    const input = $('#terminalCommandInput');
+    if (input) {
+      input.value = sendDraft ? '' : String(draft || '');
+      state.commandDrafts.set(target.id, input.value);
+      input.focus({ preventScroll: true });
+    }
+    notice(sendDraft && prompt
+      ? `${providerLabel(agentSession.provider)} 세션 ${support.sessionId.slice(0, 12)}을 이어받아 지시를 보냈습니다.`
+      : `${providerLabel(agentSession.provider)} 세션 ${support.sessionId.slice(0, 12)}을 다시 연결했습니다. 이어서 지시할 수 있습니다.`, 'success');
+    return { ...target, promptSent: Boolean(sendDraft && prompt) };
+  }
+
+  return { tmuxRows, agentTargets, requiredAgentTarget, dispatchAgentCommand, openForAgent, resumeForAgent };
+};