xgen-dex-cli 1.4.0 → 1.5.0

package/dist/chunks/{tui-MLHYSLBS.js → tui-KJAW7DSU.js}

@@ -8,12 +8,12 @@ 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 { useCallback, useEffect as useEffect8, useState as useState11 } from "react";
+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 { useEffect as useEffect6, useReducer, useRef as useRef3, useState as useState7 } from "react";
+import { Box as Box6, Text as Text6, useApp, useInput as useInput5 } from "ink";
 
 // src/tui/chat-state.ts
 var initialChatState = { messages: [], running: false };
@@ -134,18 +134,178 @@ function chatReducer(state, action) {
   }
 }
 
+// src/tui/measure.ts
+import { useEffect, useRef, useState } from "react";
+function placementOf(node) {
+  const yogaSelf = node?.yogaNode;
+  if (!node || !yogaSelf) 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: yogaSelf.getComputedWidth(), height: yogaSelf.getComputedHeight() };
+}
+function useMeasured() {
+  const ref = useRef(null);
+  const [placement, setPlacement] = useState(void 0);
+  useEffect(() => {
+    const measured = placementOf(ref.current);
+    if (!measured) return;
+    if (placement?.x !== measured.x || placement?.y !== measured.y || placement?.width !== measured.width || placement?.height !== measured.height) {
+      setPlacement(measured);
+    }
+  });
+  return [ref, placement];
+}
+
+// src/tui/transcript.ts
+import stringWidth from "string-width";
+var INDENT = "  ";
+function colorOf(role) {
+  if (role === "user") return "cyan";
+  if (role === "assistant") return "green";
+  if (role === "activity") return "yellow";
+  if (role === "system") return "red";
+  return void 0;
+}
+function labelOf(role, agentName) {
+  if (role === "user") return "You";
+  if (role === "assistant") return agentName;
+  if (role === "activity") return "Tool";
+  return "System";
+}
+function wrapToWidth(text, width) {
+  if (width <= 0) return [text];
+  const lines = [];
+  for (const paragraph of text.split("\n")) {
+    if (paragraph === "") {
+      lines.push("");
+      continue;
+    }
+    let line = "";
+    let lineWidth = 0;
+    const flush = () => {
+      lines.push(line);
+      line = "";
+      lineWidth = 0;
+    };
+    for (const word of paragraph.match(/\s+|\S+/g) ?? []) {
+      const wordWidth = stringWidth(word);
+      if (lineWidth > 0 && lineWidth + wordWidth > width) {
+        flush();
+        if (/^\s+$/.test(word)) continue;
+      }
+      if (wordWidth <= width) {
+        line += word;
+        lineWidth += wordWidth;
+        continue;
+      }
+      for (const char of word) {
+        const charWidth = stringWidth(char);
+        if (lineWidth + charWidth > width) flush();
+        line += char;
+        lineWidth += charWidth;
+      }
+    }
+    flush();
+  }
+  return lines;
+}
+function ruleFor(label, width) {
+  const room = Math.max(0, width - stringWidth("\u2500\u2500  "));
+  let trimmed = "";
+  let used = 0;
+  for (const char of label) {
+    const charWidth = stringWidth(char);
+    if (used + charWidth > room) {
+      trimmed = trimmed.slice(0, -1) + "\u2026";
+      break;
+    }
+    trimmed += char;
+    used += charWidth;
+  }
+  const head = `\u2500\u2500 ${trimmed} `;
+  return head + "\u2500".repeat(Math.max(0, width - stringWidth(head)));
+}
+function renderTranscript(messages, agentName, width) {
+  const lines = [];
+  const bodyWidth = Math.max(1, width - INDENT.length);
+  for (const message of messages) {
+    const color = colorOf(message.role);
+    if (message.role === "activity") {
+      for (const [index, text] of wrapToWidth(message.text, bodyWidth).entries()) {
+        lines.push({
+          key: `${message.id}:${index}`,
+          text: `${index === 0 ? "\xB7 " : INDENT}${text}`,
+          role: "activity",
+          color
+        });
+      }
+      continue;
+    }
+    if (lines.length > 0) lines.push({ key: `${message.id}:gap`, text: "", role: "text" });
+    lines.push({
+      key: `${message.id}:label`,
+      text: ruleFor(labelOf(message.role, agentName), width),
+      role: "label",
+      color
+    });
+    const body = message.text || (message.role === "assistant" ? "\u2026" : "");
+    for (const [index, text] of wrapToWidth(body, bodyWidth).entries()) {
+      lines.push({
+        key: `${message.id}:${index}`,
+        text: INDENT + text,
+        role: message.role === "system" ? "system" : "text",
+        color: message.role === "system" ? color : void 0
+      });
+    }
+  }
+  return lines;
+}
+function viewportOf(lines, height, scrollUp) {
+  if (height <= 0) return { lines: [], above: lines.length, below: 0 };
+  const maximumScroll2 = Math.max(0, lines.length - height);
+  const up = Math.min(Math.max(0, scrollUp), maximumScroll2);
+  const end = lines.length - up;
+  const start = Math.max(0, end - height);
+  return { lines: lines.slice(start, end), above: start, below: lines.length - end };
+}
+function maximumScroll(lineCount, height) {
+  return Math.max(0, lineCount - Math.max(0, height));
+}
+
 // src/tui/command-palette.tsx
-import { useState as useState2 } from "react";
-import { Box as Box2, Text as Text3, useInput as useInput2 } from "ink";
+import { useState as useState3 } from "react";
+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 stringWidth from "string-width";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Box, Text, useCursor, useInput } from "ink";
+import stringWidth2 from "string-width";
+
+// 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);
@@ -156,10 +316,10 @@ function clamp(value, minimum, maximum) {
 function visibleInput(segments, cursor, maximumWidth) {
   let start = cursor;
   let widthBeforeCursor = 0;
-  const followingWidth = cursor < segments.length ? stringWidth(segments[cursor] ?? "") : 0;
+  const followingWidth = cursor < segments.length ? stringWidth2(segments[cursor] ?? "") : 0;
   const beforeLimit = Math.max(0, maximumWidth - Math.min(followingWidth, maximumWidth));
   while (start > 0) {
-    const width = stringWidth(segments[start - 1] ?? "");
+    const width = stringWidth2(segments[start - 1] ?? "");
     if (widthBeforeCursor + width > beforeLimit) break;
     widthBeforeCursor += width;
     start -= 1;
@@ -167,7 +327,7 @@ function visibleInput(segments, cursor, maximumWidth) {
   let end = cursor;
   let totalWidth = widthBeforeCursor;
   while (end < segments.length) {
-    const width = stringWidth(segments[end] ?? "");
+    const width = stringWidth2(segments[end] ?? "");
     if (totalWidth + width > maximumWidth) break;
     totalWidth += width;
     end += 1;
@@ -177,17 +337,18 @@ 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: stdout2 } = useStdout();
+  const [ref, placement] = useMeasured();
   const initialSegments = graphemes(props.value);
-  const [cursor, setCursor] = useState(initialSegments.length);
-  const valueRef = useRef(props.value);
-  const cursorRef = useRef(initialSegments.length);
+  const [cursor, setCursor] = useState2(initialSegments.length);
+  const valueRef = useRef2(props.value);
+  const cursorRef = useRef2(initialSegments.length);
+  const pastingRef = useRef2(false);
   const moveCursor = (next, length) => {
     const resolved = clamp(next, 0, length);
     cursorRef.current = resolved;
@@ -199,7 +360,7 @@ function ImeTextInput(props) {
     moveCursor(nextCursor, segments.length);
     props.onChange(nextValue);
   };
-  useEffect(() => {
+  useEffect2(() => {
     if (props.value === valueRef.current) return;
     const previousLength = graphemes(valueRef.current).length;
     const nextLength = graphemes(props.value).length;
@@ -211,6 +372,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;
@@ -237,10 +415,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);
     },
@@ -249,18 +428,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, (stdout2.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,
@@ -273,52 +452,55 @@ 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
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function CommandPalette(props) {
-  const [cursor, setCursor] = useState2(0);
+  const [cursor, setCursor] = useState3(0);
   useInput2((_input, key) => {
     if (key.escape) props.onCancel();
     if (key.upArrow) setCursor((current) => Math.max(0, current - 1));
     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,15 +510,15 @@ 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 { useEffect as useEffect3, useState as useState4 } from "react";
+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([]);
-  const [cursor, setCursor] = useState3(0);
-  const [loading, setLoading] = useState3(true);
-  const [error, setError] = useState3();
-  useEffect2(() => {
+  const [items, setItems] = useState4([]);
+  const [cursor, setCursor] = useState4(0);
+  const [loading, setLoading] = useState4(true);
+  const [error, setError] = useState4();
+  useEffect3(() => {
     let alive = true;
     props.engine.listConversations(props.profile).then((result) => alive && setItems(result)).catch((reason) => alive && setError(publicError(reason).message)).finally(() => alive && setLoading(false));
     return () => {
@@ -364,7 +546,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,18 +567,18 @@ 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 { useEffect as useEffect4, useState as useState5 } from "react";
+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 = [
     { kind: "new" },
     ...props.conversations.map((conversation) => ({ kind: "conversation", conversation }))
   ];
-  const [cursor, setCursor] = useState4(0);
-  const [opening, setOpening] = useState4(false);
-  const [error, setError] = useState4();
-  useEffect3(() => {
+  const [cursor, setCursor] = useState5(0);
+  const [opening, setOpening] = useState5(false);
+  const [error, setError] = useState5();
+  useEffect4(() => {
     setCursor((current) => Math.min(current, Math.max(0, rows.length - 1)));
   }, [rows.length]);
   useInput4(
@@ -429,10 +611,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") {
@@ -457,7 +639,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,17 +653,17 @@ 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 { useEffect as useEffect5, useState as useState6 } from "react";
+import { useStdout } from "ink";
 function useTerminalSize() {
-  const { stdout: stdout2 } = useStdout2();
+  const { stdout: stdout2 } = useStdout();
   const read = () => {
     const columns = stdout2.columns || 100;
     const rows = stdout2.rows || 30;
     return { columns, rows, wide: columns >= 88 };
   };
-  const [size, setSize] = useState5(read);
-  useEffect4(() => {
+  const [size, setSize] = useState6(read);
+  useEffect5(() => {
     const resize = () => setSize(read());
     stdout2.on("resize", resize);
     return () => {
@@ -497,7 +679,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);
@@ -514,39 +696,46 @@ function AgentSidebar(props) {
     props.agents.length === 0 ? /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "\uC0AC\uC6A9 \uAC00\uB2A5\uD55C Agent\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null
   ] });
 }
-function messageColor(role) {
-  if (role === "user") return "cyan";
-  if (role === "assistant") return "green";
-  if (role === "activity") return "yellow";
-  if (role === "system") return "red";
-  return void 0;
-}
-function labelOf(role, agentName) {
-  if (role === "user") return "You";
-  if (role === "assistant") return agentName;
-  if (role === "activity") return "Tool";
-  return "System";
-}
 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: [
-    /* @__PURE__ */ jsx6(Text6, { bold: true, children: props.agent?.workflowName ?? "Agent\uB97C \uC120\uD0DD\uD558\uC138\uC694" }),
-    /* @__PURE__ */ jsxs6(Box5, { 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: [
-        /* @__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))
+  const [ref, box] = useMeasured();
+  const width = box?.width ?? 20;
+  const height = box?.height ?? 1;
+  const lines = renderTranscript(props.messages, props.agent?.workflowName ?? "Agent", width);
+  const view = viewportOf(lines, height, props.scrollUp);
+  useEffect6(() => {
+    props.onViewport(lines.length, height);
+  }, [lines.length, height]);
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: "blue", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs6(Box6, { children: [
+      /* @__PURE__ */ jsx6(Text6, { bold: true, wrap: "truncate-end", children: props.agent?.workflowName ?? "Agent\uB97C \uC120\uD0DD\uD558\uC138\uC694" }),
+      view.below > 0 ? /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+        " \xB7 \u2193",
+        view.below,
+        "\uC904"
+      ] }) : null
     ] }),
-    props.status ? /* @__PURE__ */ jsxs6(Text6, { color: "yellow", children: [
+    /* @__PURE__ */ jsxs6(Box6, { ref, flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [
+      view.lines.length === 0 ? /* @__PURE__ */ jsx6(Text6, { dimColor: true, wrap: "truncate-end", 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,
+      view.lines.map((line) => /* @__PURE__ */ jsx6(
+        Text6,
+        {
+          wrap: "truncate-end",
+          bold: line.role === "label",
+          dimColor: line.role === "activity",
+          color: line.color,
+          children: line.text || " "
+        },
+        line.key
+      ))
+    ] }),
+    props.status ? /* @__PURE__ */ jsxs6(Text6, { color: "yellow", wrap: "truncate-end", children: [
       "\u25C6 ",
       props.status
     ] }) : null
   ] });
 }
 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,
@@ -555,7 +744,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"
       }
     )
@@ -565,20 +753,22 @@ function Dashboard(props) {
   const { exit } = useApp();
   const size = useTerminalSize();
   const bodyHeight = Math.max(12, size.rows - 5);
-  const [focus, setFocus] = useState6("agents");
-  const [cursor, setCursor] = useState6(0);
-  const [selected, setSelected] = useState6(() => {
+  const [focus, setFocus] = useState7("agents");
+  const [cursor, setCursor] = useState7(0);
+  const [selected, setSelected] = useState7(() => {
     const first = props.session.agents[0];
     return first ? { workflowId: first.workflowId, workflowName: first.workflowName } : void 0;
   });
-  const [input, setInput] = useState6("");
+  const [input, setInput] = useState7("");
   const [chat, dispatch] = useReducer(chatReducer, initialChatState);
-  const [palette, setPalette] = useState6(false);
-  const [history, setHistory] = useState6(false);
-  const [start, setStart] = useState6();
-  const [starting, setStarting] = useState6(false);
-  const controller = useRef2(null);
-  useEffect5(() => () => controller.current?.abort(), []);
+  const [palette, setPalette] = useState7(false);
+  const [history, setHistory] = useState7(false);
+  const [start, setStart] = useState7();
+  const [scrollUp, setScrollUp] = useState7(0);
+  const viewport = useRef3({ lineCount: 0, height: 0 });
+  const [starting, setStarting] = useState7(false);
+  const controller = useRef3(null);
+  useEffect6(() => () => controller.current?.abort(), []);
   const selectAgent = async () => {
     const agent = props.session.agents[cursor];
     if (!agent || chat.running || starting) return;
@@ -604,12 +794,14 @@ function Dashboard(props) {
     setSelected(ref);
     dispatch({ type: "reset" });
     setInput("");
+    setScrollUp(0);
     setStart(void 0);
     setFocus("composer");
   };
   const openHistory = (conversation, turns) => {
     setSelected({ workflowId: conversation.workflowId, workflowName: conversation.workflowName });
     dispatch({ type: "history_loaded", interactionId: conversation.interactionId, turns });
+    setScrollUp(0);
     const index = props.session.agents.findIndex((agent) => agent.workflowId === conversation.workflowId);
     if (index >= 0) setCursor(index);
     setHistory(false);
@@ -624,6 +816,7 @@ function Dashboard(props) {
     if (chat.running) return;
     dispatch({ type: "reset" });
     setInput("");
+    setScrollUp(0);
     setPalette(false);
     setFocus("composer");
   };
@@ -639,6 +832,7 @@ function Dashboard(props) {
         input: text
       });
       setInput("");
+      setScrollUp(0);
       dispatch({ type: "turn_started", interactionId: resolved.interactionId, input: text });
       const active = new AbortController();
       controller.current = active;
@@ -654,6 +848,12 @@ function Dashboard(props) {
       controller.current = null;
     }
   };
+  const scrollBy = (direction) => {
+    const { lineCount, height } = viewport.current;
+    const step = Math.max(1, Math.floor(height / 2));
+    const limit = maximumScroll(lineCount, height);
+    setScrollUp((current) => Math.min(limit, Math.max(0, current - direction * step)));
+  };
   useInput5(
     (keyInput, key) => {
       if (key.ctrl && keyInput === "k") setPalette(true);
@@ -664,6 +864,8 @@ function Dashboard(props) {
         if (chat.running) cancelTurn();
         setHistory(true);
       } else if (key.ctrl && keyInput === "n") newConversation();
+      else if (key.pageUp) scrollBy(-1);
+      else if (key.pageDown) scrollBy(1);
       else if (key.escape && chat.running) cancelTurn();
       else if (key.escape) setFocus("agents");
       else if (key.tab) setFocus((current) => current === "agents" ? "composer" : "agents");
@@ -744,8 +946,19 @@ function Dashboard(props) {
           setFocus("agents");
         }
       }
-    ) : /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", flexGrow: 1, children: [
-      /* @__PURE__ */ jsx6(ChatPane, { agent: selected, messages: chat.messages, status: chat.status, height: bodyHeight - 3 }),
+    ) : /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx6(
+        ChatPane,
+        {
+          agent: selected,
+          messages: chat.messages,
+          status: chat.status,
+          scrollUp,
+          onViewport: (lineCount, height) => {
+            viewport.current = { lineCount, height };
+          }
+        }
+      ),
       /* @__PURE__ */ jsx6(
         Composer,
         {
@@ -753,17 +966,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,
       {
@@ -773,18 +985,18 @@ function Dashboard(props) {
       }
     ),
     body,
-    /* @__PURE__ */ jsx6(Footer, { text: "Tab \uD328\uB110 \xB7 Ctrl+K \uBA85\uB839 \xB7 Ctrl+H \uAE30\uB85D \xB7 Ctrl+P \uD504\uB85C\uD544 \xB7 Esc \uCDE8\uC18C \xB7 Ctrl+Q \uC885\uB8CC" })
+    /* @__PURE__ */ jsx6(Footer, { text: "Tab \uD328\uB110 \xB7 PgUp/PgDn \uC2A4\uD06C\uB864 \xB7 Ctrl+K \uBA85\uB839 \xB7 Ctrl+H \uAE30\uB85D \xB7 Ctrl+P \uD504\uB85C\uD544 \xB7 Esc \uCDE8\uC18C \xB7 Ctrl+Q \uC885\uB8CC" })
   ] });
 }
 
 // src/tui/login-screen.tsx
-import { useState as useState7 } from "react";
-import { Box as Box6, Text as Text7, useInput as useInput6 } from "ink";
+import { useState as useState8 } from "react";
+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("");
-  const [password, setPassword] = useState7("");
-  const [focus, setFocus] = useState7("email");
+  const [email, setEmail] = useState8("");
+  const [password, setPassword] = useState8("");
+  const [focus, setFocus] = useState8("email");
   useInput6(
     (input, key) => {
       if (key.tab) setFocus((current) => current === "email" ? "password" : "email");
@@ -804,16 +1016,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,
           {
@@ -822,7 +1034,6 @@ function LoginScreen(props) {
             onChange: setEmail,
             onSubmit: () => setFocus("password"),
             focus: !props.busy && focus === "email",
-            cursorOrigin: { x: 16, y: 6 },
             placeholder: "me@corp.com"
           }
         ),
@@ -834,7 +1045,6 @@ function LoginScreen(props) {
             onChange: setPassword,
             onSubmit: submit,
             focus: !props.busy && focus === "password",
-            cursorOrigin: { x: 16, y: 7 },
             secret: true
           }
         )
@@ -847,16 +1057,16 @@ 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 { useEffect as useEffect7, useState as useState9 } from "react";
+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)));
-  const [creating, setCreating] = useState8(false);
-  const [focus, setFocus] = useState8("name");
-  const [name, setName] = useState8("");
-  const [serverUrl, setServerUrl] = useState8("");
-  useEffect6(() => setCursor((current) => Math.min(current, Math.max(0, props.profiles.length - 1))), [props.profiles]);
+  const [cursor, setCursor] = useState9(Math.max(0, props.profiles.findIndex((profile) => profile.current)));
+  const [creating, setCreating] = useState9(false);
+  const [focus, setFocus] = useState9("name");
+  const [name, setName] = useState9("");
+  const [serverUrl, setServerUrl] = useState9("");
+  useEffect7(() => setCursor((current) => Math.min(current, Math.max(0, props.profiles.length - 1))), [props.profiles]);
   useInput7(
     (input, key) => {
       if (key.escape) {
@@ -887,11 +1097,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,
           {
@@ -900,7 +1110,6 @@ function ProfileScreen(props) {
             onChange: setName,
             onSubmit: () => setFocus("url"),
             focus: !props.busy && focus === "name",
-            cursorOrigin: { x: 16, y: 5 },
             placeholder: "corp"
           }
         ),
@@ -912,11 +1121,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,11 +1150,11 @@ 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 { useState as useState10 } from "react";
+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 ?? "");
+  const [serverUrl, setServerUrl] = useState10(props.initialValue ?? "");
   const editing = props.initialValue !== void 0;
   useInput8(
     (_input, key) => {
@@ -954,12 +1162,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",
@@ -967,7 +1175,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"
         }
       ) }),
@@ -988,13 +1195,13 @@ function ServerScreen(props) {
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function App({ engine }) {
   const { exit } = useApp2();
-  const [route, setRoute] = useState10("boot");
-  const [session, setSession] = useState10();
-  const [profiles, setProfiles] = useState10([]);
-  const [loginTarget, setLoginTarget] = useState10();
-  const [editingServer, setEditingServer] = useState10();
-  const [busy, setBusy] = useState10(false);
-  const [error, setError] = useState10();
+  const [route, setRoute] = useState11("boot");
+  const [session, setSession] = useState11();
+  const [profiles, setProfiles] = useState11([]);
+  const [loginTarget, setLoginTarget] = useState11();
+  const [editingServer, setEditingServer] = useState11();
+  const [busy, setBusy] = useState11(false);
+  const [error, setError] = useState11();
   useInput9((input, key) => {
     if (key.ctrl && input === "q") exit();
   });
@@ -1045,7 +1252,7 @@ function App({ engine }) {
     },
     [engine]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     void bootstrap();
   }, [bootstrap]);
   const configure = async (serverUrl) => {
@@ -1120,7 +1327,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" })
@@ -1185,7 +1392,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." }),
@@ -1205,6 +1412,20 @@ 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;
@@ -1213,12 +1434,12 @@ function createScreenGuard(stream) {
     enter() {
       if (entered || !alt) return;
       entered = true;
-      stream.write(ENTER_ALT_SCREEN);
+      stream.write(ENTER_ALT_SCREEN + DISABLE_REPORTS + ENABLE_BRACKETED_PASTE);
     },
     restore() {
       if (restored) return;
       restored = true;
-      if (entered) stream.write(LEAVE_ALT_SCREEN);
+      if (entered) stream.write(DISABLE_BRACKETED_PASTE + LEAVE_ALT_SCREEN);
       stream.write(SHOW_CURSOR);
     }
   };
@@ -1253,4 +1474,4 @@ async function runTui(engine) {
 export {
   runTui
 };
-//# sourceMappingURL=tui-MLHYSLBS.js.map
+//# sourceMappingURL=tui-KJAW7DSU.js.map