xgen-dex-cli 1.3.0 → 1.4.1

package/dist/chunks/{tui-GDC2NODL.js → tui-HKY3YBAY.js}

@@ -5,14 +5,15 @@ import {
 
 // src/tui/index.tsx
 import { render } from "ink";
+import { stdout } from "node:process";
 
 // src/tui/app.tsx
 import { useCallback, useEffect as useEffect7, useState as useState10 } from "react";
-import { Box as Box9, Text as Text10, useApp as useApp2, useInput as useInput9 } from "ink";
+import { Box as Box10, Text as Text10, useApp as useApp2, useInput as useInput9 } from "ink";
 
 // src/tui/dashboard.tsx
 import { useEffect as useEffect5, useReducer, useRef as useRef2, useState as useState6 } from "react";
-import { Box as Box5, Text as Text6, useApp, useInput as useInput5 } from "ink";
+import { Box as Box6, Text as Text6, useApp, useInput as useInput5 } from "ink";
 
 // src/tui/chat-state.ts
 var initialChatState = { messages: [], running: false };
@@ -135,16 +136,32 @@ function chatReducer(state, action) {
 
 // src/tui/command-palette.tsx
 import { useState as useState2 } from "react";
-import { Box as Box2, Text as Text3, useInput as useInput2 } from "ink";
+import { Box as Box3, Text as Text3, useInput as useInput2 } from "ink";
 
 // src/tui/components.tsx
-import { Box, Text as Text2 } from "ink";
+import { Box as Box2, Text as Text2 } from "ink";
 
 // src/tui/ime-text-input.tsx
 import { useEffect, useRef, useState } from "react";
-import { Text, useCursor, useInput, useStdout } from "ink";
+import { Box, Text, useCursor, useInput } from "ink";
 import stringWidth from "string-width";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+// src/tui/terminal-input.ts
+var PASTE_START = "[200~";
+var PASTE_END = "[201~";
+var CONTROL_TAIL = /^(?:\[[\d;:<>?!"'$ ]*[@-~]|O[@-~])$/;
+var CONTROL_CHARS = /[\u0000-\u001F\u007F]/g;
+function classifyInput(input, pasting = false) {
+  if (input === PASTE_START) return { kind: "paste-start" };
+  if (input === PASTE_END) return { kind: "paste-end" };
+  if (!pasting && input.length > 1 && CONTROL_TAIL.test(input)) return { kind: "ignore" };
+  const flattened = input.replace(/\r\n|[\r\n]/g, " ");
+  const text = flattened.replace(CONTROL_CHARS, "");
+  return text ? { kind: "text", text } : { kind: "ignore" };
+}
+
+// src/tui/ime-text-input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 var segmenter = new Intl.Segmenter("ko", { granularity: "grapheme" });
 function graphemes(value) {
   return [...segmenter.segment(value)].map(({ segment }) => segment);
@@ -152,6 +169,19 @@ function graphemes(value) {
 function clamp(value, minimum, maximum) {
   return Math.min(Math.max(value, minimum), maximum);
 }
+function placementOf(node) {
+  const width = node?.yogaNode?.getComputedWidth();
+  if (!node || width === void 0) return void 0;
+  let x = 0;
+  let y = 0;
+  for (let current = node; current; current = current.parentNode) {
+    const yoga = current.yogaNode;
+    if (!yoga) continue;
+    x += yoga.getComputedLeft();
+    y += yoga.getComputedTop();
+  }
+  return { x, y, width };
+}
 function visibleInput(segments, cursor, maximumWidth) {
   let start = cursor;
   let widthBeforeCursor = 0;
@@ -176,17 +206,26 @@ function visibleInput(segments, cursor, maximumWidth) {
     cursorWidth: widthBeforeCursor
   };
 }
-function TerminalCursor({ origin, offset }) {
+function TerminalCursor({ x, y }) {
   const { setCursorPosition } = useCursor();
-  setCursorPosition({ x: origin.x + offset, y: origin.y });
+  setCursorPosition({ x, y });
   return null;
 }
 function ImeTextInput(props) {
-  const { stdout } = useStdout();
+  const ref = useRef(null);
+  const [placement, setPlacement] = useState(void 0);
   const initialSegments = graphemes(props.value);
   const [cursor, setCursor] = useState(initialSegments.length);
   const valueRef = useRef(props.value);
   const cursorRef = useRef(initialSegments.length);
+  const pastingRef = useRef(false);
+  useEffect(() => {
+    const measured = placementOf(ref.current);
+    if (!measured) return;
+    if (placement?.x !== measured.x || placement?.y !== measured.y || placement?.width !== measured.width) {
+      setPlacement(measured);
+    }
+  });
   const moveCursor = (next, length) => {
     const resolved = clamp(next, 0, length);
     cursorRef.current = resolved;
@@ -210,6 +249,23 @@ function ImeTextInput(props) {
     (input, key) => {
       const current = graphemes(valueRef.current);
       const currentCursor = clamp(cursorRef.current, 0, current.length);
+      const event = classifyInput(input, pastingRef.current);
+      if (event.kind === "paste-start") {
+        pastingRef.current = true;
+        return;
+      }
+      if (event.kind === "paste-end") {
+        pastingRef.current = false;
+        return;
+      }
+      if (pastingRef.current) {
+        if (event.kind === "text") {
+          const inserted2 = graphemes(event.text);
+          current.splice(currentCursor, 0, ...inserted2);
+          updateValue(current, currentCursor + inserted2.length);
+        }
+        return;
+      }
       if (key.return) {
         props.onSubmit?.(valueRef.current);
         return;
@@ -236,10 +292,11 @@ function ImeTextInput(props) {
         updateValue(current, currentCursor - 1);
         return;
       }
-      if (!input || key.ctrl || key.meta || key.tab || key.escape || key.upArrow || key.downArrow || key.pageUp || key.pageDown) {
+      if (key.ctrl || key.meta || key.tab || key.escape || key.upArrow || key.downArrow || key.pageUp || key.pageDown) {
         return;
       }
-      const inserted = graphemes(input);
+      if (event.kind !== "text") return;
+      const inserted = graphemes(event.text);
       current.splice(currentCursor, 0, ...inserted);
       updateValue(current, currentCursor + inserted.length);
     },
@@ -248,18 +305,18 @@ function ImeTextInput(props) {
   const rawSegments = graphemes(props.value);
   const safeCursor = clamp(cursor, 0, rawSegments.length);
   const displayedSegments = props.mask ? rawSegments.map(() => props.mask ?? "") : rawSegments;
-  const maximumWidth = Math.max(1, (stdout.columns || 100) - props.cursorOrigin.x - 3);
+  const maximumWidth = Math.max(1, (placement?.width ?? 40) - 1);
   const visible = visibleInput(displayedSegments, safeCursor, maximumWidth);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Box, { ref, flexGrow: 1, children: [
     rawSegments.length === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: props.placeholder ?? "" }) : /* @__PURE__ */ jsx(Text, { children: visible.text }),
-    props.focus ? /* @__PURE__ */ jsx(TerminalCursor, { origin: props.cursorOrigin, offset: visible.cursorWidth }) : null
+    props.focus && placement ? /* @__PURE__ */ jsx(TerminalCursor, { x: placement.x + visible.cursorWidth, y: placement.y }) : null
   ] });
 }
 
 // src/tui/components.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Header(props) {
-  return /* @__PURE__ */ jsxs2(Box, { paddingX: 1, justifyContent: "space-between", children: [
+  return /* @__PURE__ */ jsxs2(Box2, { paddingX: 1, justifyContent: "space-between", children: [
     /* @__PURE__ */ jsx2(Text2, { bold: true, color: "blueBright", children: "XGEN Dex" }),
     props.profile ? /* @__PURE__ */ jsxs2(Text2, { children: [
       props.profile,
@@ -272,37 +329,40 @@ function Header(props) {
   ] });
 }
 function Footer({ text }) {
-  return /* @__PURE__ */ jsx2(Box, { paddingX: 1, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: text }) });
+  return /* @__PURE__ */ jsx2(Box2, { paddingX: 1, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: text }) });
 }
 function Loading({ label = "\uBD88\uB7EC\uC624\uB294 \uC911..." }) {
-  return /* @__PURE__ */ jsx2(Box, { padding: 1, children: /* @__PURE__ */ jsxs2(Text2, { color: "cyan", children: [
+  return /* @__PURE__ */ jsx2(Box2, { padding: 1, children: /* @__PURE__ */ jsxs2(Text2, { color: "cyan", children: [
     "\u25C6 ",
     label
   ] }) });
 }
 function Notice({ children, error = false }) {
-  return /* @__PURE__ */ jsx2(Box, { borderStyle: "round", borderColor: error ? "red" : "cyan", paddingX: 1, children: /* @__PURE__ */ jsx2(Text2, { color: error ? "red" : void 0, children }) });
+  return /* @__PURE__ */ jsx2(Box2, { borderStyle: "round", borderColor: error ? "red" : "cyan", paddingX: 1, children: /* @__PURE__ */ jsx2(Text2, { color: error ? "red" : void 0, children }) });
 }
 function FormField(props) {
-  return /* @__PURE__ */ jsxs2(Box, { children: [
-    /* @__PURE__ */ jsx2(Box, { width: 14, children: /* @__PURE__ */ jsxs2(Text2, { color: props.focus ? "cyan" : void 0, children: [
-      props.focus ? "\u203A" : " ",
-      " ",
-      props.label
-    ] }) }),
-    /* @__PURE__ */ jsx2(
-      ImeTextInput,
-      {
-        value: props.value,
-        onChange: props.onChange,
-        onSubmit: props.onSubmit,
-        focus: props.focus,
-        cursorOrigin: props.cursorOrigin,
-        placeholder: props.placeholder,
-        mask: props.secret ? "\u2022" : void 0
-      }
-    )
-  ] });
+  return (
+    // 가로로 늘려 둬야 입력 칸이 남는 폭을 알 수 있다. 내용만큼만 넓으면 칸의 폭이
+    // 곧 글자 폭이 되어, 긴 주소가 스스로를 잘라 내는 꼴이 된다.
+    /* @__PURE__ */ jsxs2(Box2, { flexGrow: 1, children: [
+      /* @__PURE__ */ jsx2(Box2, { width: 14, flexShrink: 0, children: /* @__PURE__ */ jsxs2(Text2, { color: props.focus ? "cyan" : void 0, children: [
+        props.focus ? "\u203A" : " ",
+        " ",
+        props.label
+      ] }) }),
+      /* @__PURE__ */ jsx2(
+        ImeTextInput,
+        {
+          value: props.value,
+          onChange: props.onChange,
+          onSubmit: props.onSubmit,
+          focus: props.focus,
+          placeholder: props.placeholder,
+          mask: props.secret ? "\u2022" : void 0
+        }
+      )
+    ] })
+  );
 }
 
 // src/tui/command-palette.tsx
@@ -315,9 +375,9 @@ function CommandPalette(props) {
     if (key.downArrow) setCursor((current) => Math.min(props.actions.length - 1, current + 1));
     if (key.return && props.actions[cursor]) props.actions[cursor].run();
   });
-  return /* @__PURE__ */ jsxs3(Box2, { flexDirection: "column", flexGrow: 1, borderStyle: "double", borderColor: "magenta", padding: 1, children: [
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", flexGrow: 1, borderStyle: "double", borderColor: "magenta", padding: 1, children: [
     /* @__PURE__ */ jsx3(Text3, { bold: true, children: "\uBA85\uB839" }),
-    /* @__PURE__ */ jsx3(Box2, { flexDirection: "column", marginTop: 1, children: props.actions.map((action, index) => /* @__PURE__ */ jsxs3(Text3, { color: index === cursor ? "magentaBright" : void 0, children: [
+    /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", marginTop: 1, children: props.actions.map((action, index) => /* @__PURE__ */ jsxs3(Text3, { color: index === cursor ? "magentaBright" : void 0, children: [
       index === cursor ? "\u203A" : " ",
       " ",
       action.label
@@ -328,7 +388,7 @@ function CommandPalette(props) {
 
 // src/tui/history-screen.tsx
 import { useEffect as useEffect2, useState as useState3 } from "react";
-import { Box as Box3, Text as Text4, useInput as useInput3 } from "ink";
+import { Box as Box4, Text as Text4, useInput as useInput3 } from "ink";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function HistoryScreen(props) {
   const [items, setItems] = useState3([]);
@@ -363,7 +423,7 @@ function HistoryScreen(props) {
     },
     { isActive: !loading }
   );
-  return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: "cyan", padding: 1, children: [
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: "cyan", padding: 1, children: [
     /* @__PURE__ */ jsx4(Text4, { bold: true, children: "\uB300\uD654 \uAE30\uB85D" }),
     loading ? /* @__PURE__ */ jsx4(Loading, {}) : null,
     !loading && items.length === 0 ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "\uB300\uD654 \uAE30\uB85D\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null,
@@ -385,7 +445,7 @@ function HistoryScreen(props) {
 
 // src/tui/start-panel.tsx
 import { useEffect as useEffect3, useState as useState4 } from "react";
-import { Box as Box4, Text as Text5, useInput as useInput4 } from "ink";
+import { Box as Box5, Text as Text5, useInput as useInput4 } from "ink";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function StartPanel(props) {
   const rows = [
@@ -428,10 +488,10 @@ function StartPanel(props) {
     },
     { isActive: !opening }
   );
-  return /* @__PURE__ */ jsxs5(Box4, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: "cyan", padding: 1, children: [
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: "cyan", padding: 1, children: [
     /* @__PURE__ */ jsx5(Text5, { bold: true, children: props.agentName }),
     /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "\uC5B4\uB5BB\uAC8C \uC2DC\uC791\uD560\uAE4C\uC694?" }),
-    /* @__PURE__ */ jsx5(Box4, { flexDirection: "column", marginTop: 1, children: rows.map((row, index) => {
+    /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", marginTop: 1, children: rows.map((row, index) => {
       const active = index === cursor;
       const mark = active ? "\u203A" : " ";
       if (row.kind === "new") {
@@ -456,7 +516,7 @@ function StartPanel(props) {
     }) }),
     opening ? /* @__PURE__ */ jsx5(Loading, { label: "\uB300\uD654\uB97C \uBD88\uB7EC\uC624\uB294 \uC911..." }) : null,
     error ? /* @__PURE__ */ jsx5(Notice, { error: true, children: error }) : null,
-    /* @__PURE__ */ jsx5(Box4, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "\u2191\u2193 \uC774\uB3D9 \xB7 Enter \uC120\uD0DD \xB7 Esc \uBAA9\uB85D\uC73C\uB85C" }) })
+    /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "\u2191\u2193 \uC774\uB3D9 \xB7 Enter \uC120\uD0DD \xB7 Esc \uBAA9\uB85D\uC73C\uB85C" }) })
   ] });
 }
 function when(conversation) {
@@ -471,22 +531,22 @@ function when(conversation) {
 
 // src/tui/use-terminal-size.ts
 import { useEffect as useEffect4, useState as useState5 } from "react";
-import { useStdout as useStdout2 } from "ink";
+import { useStdout } from "ink";
 function useTerminalSize() {
-  const { stdout } = useStdout2();
+  const { stdout: stdout2 } = useStdout();
   const read = () => {
-    const columns = stdout.columns || 100;
-    const rows = stdout.rows || 30;
+    const columns = stdout2.columns || 100;
+    const rows = stdout2.rows || 30;
     return { columns, rows, wide: columns >= 88 };
   };
   const [size, setSize] = useState5(read);
   useEffect4(() => {
     const resize = () => setSize(read());
-    stdout.on("resize", resize);
+    stdout2.on("resize", resize);
     return () => {
-      stdout.off("resize", resize);
+      stdout2.off("resize", resize);
     };
-  }, [stdout]);
+  }, [stdout2]);
   return size;
 }
 
@@ -496,7 +556,7 @@ function AgentSidebar(props) {
   const radius = Math.max(3, Math.floor((props.height - 4) / 2));
   const start = Math.max(0, props.cursor - radius);
   const visible = props.agents.slice(start, start + radius * 2 + 1);
-  return /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", width: 30, borderStyle: "round", borderColor: props.focused ? "cyan" : "gray", paddingX: 1, children: [
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", width: 30, borderStyle: "round", borderColor: props.focused ? "cyan" : "gray", paddingX: 1, children: [
     /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Agents" }),
     visible.map((agent) => {
       const index = props.agents.indexOf(agent);
@@ -529,11 +589,11 @@ function labelOf(role, agentName) {
 function ChatPane(props) {
   const visibleCount = Math.max(4, Math.floor((props.height - 5) / 2));
   const visible = props.messages.slice(-visibleCount);
-  return /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: "blue", paddingX: 1, children: [
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: "blue", paddingX: 1, children: [
     /* @__PURE__ */ jsx6(Text6, { bold: true, children: props.agent?.workflowName ?? "Agent\uB97C \uC120\uD0DD\uD558\uC138\uC694" }),
-    /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", flexGrow: 1, children: [
       visible.length === 0 ? /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: props.agent ? "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD574 \uB300\uD654\uB97C \uC2DC\uC791\uD558\uC138\uC694." : "\uC67C\uCABD\uC5D0\uC11C Agent\uB97C \uC120\uD0DD\uD558\uC138\uC694." }) : null,
-      visible.map((message) => /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", marginTop: message.role === "activity" ? 0 : 1, children: [
+      visible.map((message) => /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", marginTop: message.role === "activity" ? 0 : 1, children: [
         /* @__PURE__ */ jsx6(Text6, { bold: true, color: messageColor(message.role), children: labelOf(message.role, props.agent?.workflowName ?? "Agent") }),
         /* @__PURE__ */ jsx6(Text6, { dimColor: message.role === "activity", children: message.text || (message.role === "assistant" ? "\u2026" : "") })
       ] }, message.id))
@@ -545,7 +605,7 @@ function ChatPane(props) {
   ] });
 }
 function Composer(props) {
-  return /* @__PURE__ */ jsxs6(Box5, { borderStyle: "round", borderColor: props.focused ? "cyan" : "gray", paddingX: 1, children: [
+  return /* @__PURE__ */ jsxs6(Box6, { borderStyle: "round", borderColor: props.focused ? "cyan" : "gray", paddingX: 1, children: [
     /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: "\u203A " }),
     props.disabled ? /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "\uC751\uB2F5\uC744 \uAE30\uB2E4\uB9AC\uB294 \uC911..." }) : /* @__PURE__ */ jsx6(
       ImeTextInput,
@@ -554,7 +614,6 @@ function Composer(props) {
         onChange: props.onChange,
         onSubmit: props.onSubmit,
         focus: props.focused,
-        cursorOrigin: props.cursorOrigin,
         placeholder: "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694"
       }
     )
@@ -743,7 +802,7 @@ function Dashboard(props) {
           setFocus("agents");
         }
       }
-    ) : /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", flexGrow: 1, children: [
+    ) : /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", flexGrow: 1, children: [
       /* @__PURE__ */ jsx6(ChatPane, { agent: selected, messages: chat.messages, status: chat.status, height: bodyHeight - 3 }),
       /* @__PURE__ */ jsx6(
         Composer,
@@ -752,17 +811,16 @@ function Dashboard(props) {
           onChange: setInput,
           onSubmit: (value) => void send(value),
           focused: focus === "composer",
-          disabled: chat.running || !selected,
-          cursorOrigin: { x: size.wide ? 34 : 4, y: bodyHeight - 1 }
+          disabled: chat.running || !selected
         }
       )
     ] });
-    body = size.wide ? /* @__PURE__ */ jsxs6(Box5, { height: bodyHeight, children: [
+    body = size.wide ? /* @__PURE__ */ jsxs6(Box6, { height: bodyHeight, children: [
       sidebar,
       conversation
-    ] }) : focus === "agents" ? /* @__PURE__ */ jsx6(Box5, { height: bodyHeight, children: sidebar }) : /* @__PURE__ */ jsx6(Box5, { height: bodyHeight, children: conversation });
+    ] }) : focus === "agents" ? /* @__PURE__ */ jsx6(Box6, { height: bodyHeight, children: sidebar }) : /* @__PURE__ */ jsx6(Box6, { height: bodyHeight, children: conversation });
   }
-  return /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx6(
       Header,
       {
@@ -778,7 +836,7 @@ function Dashboard(props) {
 
 // src/tui/login-screen.tsx
 import { useState as useState7 } from "react";
-import { Box as Box6, Text as Text7, useInput as useInput6 } from "ink";
+import { Box as Box7, Text as Text7, useInput as useInput6 } from "ink";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function LoginScreen(props) {
   const [email, setEmail] = useState7("");
@@ -803,16 +861,16 @@ function LoginScreen(props) {
       props.onSubmit(email.trim(), secret);
     }
   };
-  return /* @__PURE__ */ jsxs7(Box6, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx7(Header, { profile: props.profile, connected: false }),
-    /* @__PURE__ */ jsxs7(Box6, { flexDirection: "column", borderStyle: "round", borderColor: "blue", padding: 1, children: [
+    /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", borderStyle: "round", borderColor: "blue", padding: 1, children: [
       /* @__PURE__ */ jsx7(Text7, { bold: true, children: "\uB85C\uADF8\uC778" }),
       /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
         props.serverUrl,
         " ",
         /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: "(Ctrl+E \uBC14\uAFB8\uAE30)" })
       ] }),
-      /* @__PURE__ */ jsxs7(Box6, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", marginTop: 1, children: [
         /* @__PURE__ */ jsx7(
           FormField,
           {
@@ -821,7 +879,6 @@ function LoginScreen(props) {
             onChange: setEmail,
             onSubmit: () => setFocus("password"),
             focus: !props.busy && focus === "email",
-            cursorOrigin: { x: 16, y: 6 },
             placeholder: "me@corp.com"
           }
         ),
@@ -833,7 +890,6 @@ function LoginScreen(props) {
             onChange: setPassword,
             onSubmit: submit,
             focus: !props.busy && focus === "password",
-            cursorOrigin: { x: 16, y: 7 },
             secret: true
           }
         )
@@ -847,7 +903,7 @@ function LoginScreen(props) {
 
 // src/tui/profile-screen.tsx
 import { useEffect as useEffect6, useState as useState8 } from "react";
-import { Box as Box7, Text as Text8, useInput as useInput7 } from "ink";
+import { Box as Box8, Text as Text8, useInput as useInput7 } from "ink";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function ProfileScreen(props) {
   const [cursor, setCursor] = useState8(Math.max(0, props.profiles.findIndex((profile) => profile.current)));
@@ -886,11 +942,11 @@ function ProfileScreen(props) {
     }
     if (name.trim() && serverUrl.trim()) props.onCreate(name.trim(), serverUrl.trim());
   };
-  return /* @__PURE__ */ jsxs8(Box7, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx8(Header, {}),
-    /* @__PURE__ */ jsxs8(Box7, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", padding: 1, children: [
+    /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", padding: 1, children: [
       /* @__PURE__ */ jsx8(Text8, { bold: true, children: creating ? "\uC0C8 \uD504\uB85C\uD544" : "\uD504\uB85C\uD544 \uC804\uD658" }),
-      creating ? /* @__PURE__ */ jsxs8(Box7, { flexDirection: "column", marginTop: 1, children: [
+      creating ? /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
         /* @__PURE__ */ jsx8(
           FormField,
           {
@@ -899,7 +955,6 @@ function ProfileScreen(props) {
             onChange: setName,
             onSubmit: () => setFocus("url"),
             focus: !props.busy && focus === "name",
-            cursorOrigin: { x: 16, y: 5 },
             placeholder: "corp"
           }
         ),
@@ -911,11 +966,10 @@ function ProfileScreen(props) {
             onChange: setServerUrl,
             onSubmit: create,
             focus: !props.busy && focus === "url",
-            cursorOrigin: { x: 16, y: 6 },
             placeholder: "https://xgen.example.com"
           }
         )
-      ] }) : /* @__PURE__ */ jsxs8(Box7, { flexDirection: "column", marginTop: 1, children: [
+      ] }) : /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
         props.profiles.map((profile, index) => /* @__PURE__ */ jsxs8(Text8, { color: index === cursor ? "cyan" : void 0, children: [
           index === cursor ? "\u203A" : " ",
           " ",
@@ -942,7 +996,7 @@ function ProfileScreen(props) {
 
 // src/tui/server-screen.tsx
 import { useState as useState9 } from "react";
-import { Box as Box8, Text as Text9, useInput as useInput8 } from "ink";
+import { Box as Box9, Text as Text9, useInput as useInput8 } from "ink";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function ServerScreen(props) {
   const [serverUrl, setServerUrl] = useState9(props.initialValue ?? "");
@@ -953,12 +1007,12 @@ function ServerScreen(props) {
     },
     { isActive: !props.busy && !!props.onCancel }
   );
-  return /* @__PURE__ */ jsxs9(Box8, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx9(Header, { profile: props.profile, connected: false }),
-    /* @__PURE__ */ jsxs9(Box8, { flexDirection: "column", borderStyle: "round", borderColor: "blue", padding: 1, children: [
+    /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", borderStyle: "round", borderColor: "blue", padding: 1, children: [
       /* @__PURE__ */ jsx9(Text9, { bold: true, children: editing ? "\uC11C\uBC84 \uC8FC\uC18C \uBC14\uAFB8\uAE30" : "\uCC98\uC74C \uC624\uC168\uAD70\uC694" }),
       /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "\uC5F0\uACB0\uD560 XGEN Gateway \uC8FC\uC18C\uB97C \uC785\uB825\uD558\uC138\uC694." }),
-      /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx9(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx9(
         FormField,
         {
           label: "Server URL",
@@ -966,7 +1020,6 @@ function ServerScreen(props) {
           onChange: setServerUrl,
           onSubmit: (value) => value.trim() && props.onSubmit(value.trim()),
           focus: !props.busy,
-          cursorOrigin: { x: 16, y: 6 },
           placeholder: "xgen.example.com"
         }
       ) }),
@@ -1119,7 +1172,7 @@ function App({ engine }) {
     }
   };
   if (route === "boot") {
-    return /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", children: [
+    return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", children: [
       /* @__PURE__ */ jsx10(Header, {}),
       /* @__PURE__ */ jsx10(Loading, { label: "Dex\uB97C \uC900\uBE44\uD558\uB294 \uC911..." }),
       /* @__PURE__ */ jsx10(Footer, { text: "Ctrl+Q \uC885\uB8CC" })
@@ -1184,7 +1237,7 @@ function App({ engine }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx10(Header, {}),
     /* @__PURE__ */ jsx10(Notice, { error: true, children: error ?? "\uC54C \uC218 \uC5C6\uB294 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4." }),
     /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "\uC11C\uBC84\uC640 \uD0A4\uCCB4\uC778 \uC0C1\uD0DC\uB97C \uD655\uC778\uD55C \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uC138\uC694." }),
@@ -1199,16 +1252,71 @@ function RetryInput({ onRetry }) {
   return null;
 }
 
+// src/tui/screen.ts
+var ESC = "\x1B";
+var ENTER_ALT_SCREEN = `${ESC}[?1049h`;
+var LEAVE_ALT_SCREEN = `${ESC}[?1049l`;
+var SHOW_CURSOR = `${ESC}[?25h`;
+var DISABLE_REPORTS = [
+  `${ESC}[?1004l`,
+  // 포커스 들어옴/나감
+  `${ESC}[?1000l`,
+  // 마우스 클릭
+  `${ESC}[?1002l`,
+  // 마우스 드래그
+  `${ESC}[?1003l`,
+  // 마우스 이동 전부
+  `${ESC}[?1006l`
+  // SGR 확장 좌표
+].join("");
+var ENABLE_BRACKETED_PASTE = `${ESC}[?2004h`;
+var DISABLE_BRACKETED_PASTE = `${ESC}[?2004l`;
+function createScreenGuard(stream) {
+  const alt = Boolean(stream.isTTY);
+  let entered = false;
+  let restored = false;
+  return {
+    enter() {
+      if (entered || !alt) return;
+      entered = true;
+      stream.write(ENTER_ALT_SCREEN + DISABLE_REPORTS + ENABLE_BRACKETED_PASTE);
+    },
+    restore() {
+      if (restored) return;
+      restored = true;
+      if (entered) stream.write(DISABLE_BRACKETED_PASTE + LEAVE_ALT_SCREEN);
+      stream.write(SHOW_CURSOR);
+    }
+  };
+}
+
 // src/tui/index.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
 async function runTui(engine) {
-  const instance = render(/* @__PURE__ */ jsx11(App, { engine }), {
-    exitOnCtrlC: true,
-    patchConsole: true
-  });
-  await instance.waitUntilExit();
+  const screen = createScreenGuard(stdout);
+  const restore = () => screen.restore();
+  const onSignal = () => {
+    restore();
+    process.exit(0);
+  };
+  process.once("exit", restore);
+  process.once("SIGINT", onSignal);
+  process.once("SIGTERM", onSignal);
+  screen.enter();
+  try {
+    const instance = render(/* @__PURE__ */ jsx11(App, { engine }), {
+      exitOnCtrlC: true,
+      patchConsole: true
+    });
+    await instance.waitUntilExit();
+  } finally {
+    restore();
+    process.off("exit", restore);
+    process.off("SIGINT", onSignal);
+    process.off("SIGTERM", onSignal);
+  }
 }
 export {
   runTui
 };
-//# sourceMappingURL=tui-GDC2NODL.js.map
+//# sourceMappingURL=tui-HKY3YBAY.js.map