xgen-dex-cli 1.4.1 → 1.6.0

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

@@ -1,5 +1,6 @@
 import {
   DexError,
+  dataDirectory,
   publicError
 } from "./chunk-ULMEXJOR.js";
 
@@ -8,11 +9,11 @@ import { render } from "ink";
 import { stdout } from "node:process";
 
 // src/tui/app.tsx
-import { useCallback, useEffect as useEffect7, useState as useState10 } from "react";
+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 { 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
@@ -134,17 +135,161 @@ 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 flush2 = () => {
+      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) {
+        flush2();
+        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) flush2();
+        line += char;
+        lineWidth += charWidth;
+      }
+    }
+    flush2();
+  }
+  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 { useState as useState3 } from "react";
 import { Box as Box3, Text as Text3, useInput as useInput2 } from "ink";
 
 // src/tui/components.tsx
 import { Box as Box2, Text as Text2 } from "ink";
 
 // src/tui/ime-text-input.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { Box, Text, useCursor, useInput } from "ink";
-import stringWidth from "string-width";
+import stringWidth2 from "string-width";
 
 // src/tui/terminal-input.ts
 var PASTE_START = "[200~";
@@ -160,6 +305,155 @@ function classifyInput(input, pasting = false) {
   return text ? { kind: "text", text } : { kind: "ignore" };
 }
 
+// src/tui/hangul.ts
+var CHO = "\u3131\u3132\u3134\u3137\u3138\u3139\u3141\u3142\u3143\u3145\u3146\u3147\u3148\u3149\u314A\u314B\u314C\u314D\u314E";
+var JUNG = "\u314F\u3150\u3151\u3152\u3153\u3154\u3155\u3156\u3157\u3158\u3159\u315A\u315B\u315C\u315D\u315E\u315F\u3160\u3161\u3162\u3163";
+var JONG = " \u3131\u3132\u3133\u3134\u3135\u3136\u3137\u3139\u313A\u313B\u313C\u313D\u313E\u313F\u3140\u3141\u3142\u3144\u3145\u3146\u3147\u3148\u314A\u314B\u314C\u314D\u314E";
+var SYLLABLE_BASE = 44032;
+var KEYS = {
+  r: "\u3131",
+  R: "\u3132",
+  s: "\u3134",
+  e: "\u3137",
+  E: "\u3138",
+  f: "\u3139",
+  a: "\u3141",
+  q: "\u3142",
+  Q: "\u3143",
+  t: "\u3145",
+  T: "\u3146",
+  d: "\u3147",
+  w: "\u3148",
+  W: "\u3149",
+  c: "\u314A",
+  z: "\u314B",
+  x: "\u314C",
+  v: "\u314D",
+  g: "\u314E",
+  k: "\u314F",
+  o: "\u3150",
+  i: "\u3151",
+  O: "\u3152",
+  j: "\u3153",
+  p: "\u3154",
+  u: "\u3155",
+  P: "\u3156",
+  h: "\u3157",
+  y: "\u315B",
+  n: "\u315C",
+  b: "\u3160",
+  m: "\u3161",
+  l: "\u3163"
+};
+var VOWEL_PAIRS = {
+  "\u3157\u314F": "\u3158",
+  "\u3157\u3150": "\u3159",
+  "\u3157\u3163": "\u315A",
+  "\u315C\u3153": "\u315D",
+  "\u315C\u3154": "\u315E",
+  "\u315C\u3163": "\u315F",
+  "\u3161\u3163": "\u3162"
+};
+var FINAL_PAIRS = {
+  "\u3131\u3145": "\u3133",
+  "\u3134\u3148": "\u3135",
+  "\u3134\u314E": "\u3136",
+  "\u3139\u3131": "\u313A",
+  "\u3139\u3141": "\u313B",
+  "\u3139\u3142": "\u313C",
+  "\u3139\u3145": "\u313D",
+  "\u3139\u314C": "\u313E",
+  "\u3139\u314D": "\u313F",
+  "\u3139\u314E": "\u3140",
+  "\u3142\u3145": "\u3144"
+};
+var SPLIT = Object.fromEntries(
+  [...Object.entries(VOWEL_PAIRS), ...Object.entries(FINAL_PAIRS)].map(([pair, joined]) => [
+    joined,
+    [pair[0], pair[1]]
+  ])
+);
+var EMPTY = {};
+function jamoOf(key) {
+  if (KEYS[key]) return KEYS[key];
+  const lower = key.toLowerCase();
+  return lower === key ? void 0 : KEYS[lower];
+}
+function isVowel(jamo) {
+  return JUNG.includes(jamo) || jamo === "\u3157" || jamo === "\u315C" || jamo === "\u3161";
+}
+function canBeFinal(jamo) {
+  return JONG.indexOf(jamo) > 0;
+}
+function display(state) {
+  const { cho, jung, jong } = state;
+  if (cho && jung) {
+    const l = CHO.indexOf(cho);
+    const v = JUNG.indexOf(jung);
+    const t = jong ? JONG.indexOf(jong) : 0;
+    if (l >= 0 && v >= 0 && t >= 0) {
+      return String.fromCharCode(SYLLABLE_BASE + (l * 21 + v) * 28 + t);
+    }
+  }
+  return cho ?? jung ?? "";
+}
+function feed(state, jamo) {
+  const { cho, jung, jong } = state;
+  if (isVowel(jamo)) {
+    if (cho && jung && jong) {
+      const parts = SPLIT[jong];
+      const moved = parts ? parts[1] : jong;
+      const kept = parts ? parts[0] : void 0;
+      return {
+        commit: display({ cho, jung, jong: kept }),
+        state: { cho: moved, jung: jamo }
+      };
+    }
+    if (cho && jung) {
+      const merged = VOWEL_PAIRS[jung + jamo];
+      if (merged) return { commit: "", state: { cho, jung: merged } };
+      return { commit: display(state), state: { jung: jamo } };
+    }
+    if (cho) return { commit: "", state: { cho, jung: jamo } };
+    if (jung) {
+      const merged = VOWEL_PAIRS[jung + jamo];
+      if (merged) return { commit: "", state: { jung: merged } };
+      return { commit: jung, state: { jung: jamo } };
+    }
+    return { commit: "", state: { jung: jamo } };
+  }
+  if (cho && jung) {
+    if (!jong) {
+      if (canBeFinal(jamo)) return { commit: "", state: { cho, jung, jong: jamo } };
+      return { commit: display(state), state: { cho: jamo } };
+    }
+    const merged = FINAL_PAIRS[jong + jamo];
+    if (merged) return { commit: "", state: { cho, jung, jong: merged } };
+    return { commit: display(state), state: { cho: jamo } };
+  }
+  if (cho) {
+    return { commit: cho, state: { cho: jamo } };
+  }
+  if (jung) return { commit: jung, state: { cho: jamo } };
+  return { commit: "", state: { cho: jamo } };
+}
+function back(state) {
+  const { cho, jung, jong } = state;
+  if (jong) {
+    const parts = SPLIT[jong];
+    return { state: { cho, jung, jong: parts ? parts[0] : void 0 }, handled: true };
+  }
+  if (jung) {
+    const parts = SPLIT[jung];
+    return { state: { cho, jung: parts ? parts[0] : void 0 }, handled: true };
+  }
+  if (cho) return { state: EMPTY, handled: true };
+  return { state: EMPTY, handled: false };
+}
+function flush(state) {
+  return { commit: display(state), state: EMPTY };
+}
+
 // src/tui/ime-text-input.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var segmenter = new Intl.Segmenter("ko", { granularity: "grapheme" });
@@ -169,26 +463,13 @@ 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;
-  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;
@@ -196,7 +477,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;
@@ -212,20 +493,13 @@ function TerminalCursor({ x, y }) {
   return null;
 }
 function ImeTextInput(props) {
-  const ref = useRef(null);
-  const [placement, setPlacement] = useState(void 0);
+  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 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 [cursor, setCursor] = useState2(initialSegments.length);
+  const valueRef = useRef2(props.value);
+  const cursorRef = useRef2(initialSegments.length);
+  const pastingRef = useRef2(false);
+  const composingRef = useRef2(EMPTY);
   const moveCursor = (next, length) => {
     const resolved = clamp(next, 0, length);
     cursorRef.current = resolved;
@@ -237,7 +511,10 @@ function ImeTextInput(props) {
     moveCursor(nextCursor, segments.length);
     props.onChange(nextValue);
   };
-  useEffect(() => {
+  useEffect2(() => {
+    if (!props.focus || !props.hangulMode) composingRef.current = EMPTY;
+  }, [props.focus, props.hangulMode]);
+  useEffect2(() => {
     if (props.value === valueRef.current) return;
     const previousLength = graphemes(valueRef.current).length;
     const nextLength = graphemes(props.value).length;
@@ -245,12 +522,24 @@ function ImeTextInput(props) {
     valueRef.current = props.value;
     moveCursor(wasAtEnd ? nextLength : cursorRef.current, nextLength);
   }, [props.value]);
+  const applyComposition = (segments, cursor2, previous, commit, next) => {
+    const removed = previous ? 1 : 0;
+    const inserted = graphemes(commit + next);
+    segments.splice(cursor2 - removed, removed, ...inserted);
+    updateValue(segments, cursor2 - removed + inserted.length);
+  };
   useInput(
     (input, key) => {
       const current = graphemes(valueRef.current);
       const currentCursor = clamp(cursorRef.current, 0, current.length);
       const event = classifyInput(input, pastingRef.current);
+      const composing = composingRef.current;
+      const shown = display(composing);
+      const settle = () => {
+        composingRef.current = EMPTY;
+      };
       if (event.kind === "paste-start") {
+        settle();
         pastingRef.current = true;
         return;
       }
@@ -266,36 +555,81 @@ function ImeTextInput(props) {
         }
         return;
       }
+      if (key.ctrl && (input === "`" || input === "l")) {
+        settle();
+        props.onHangulModeChange?.(!props.hangulMode);
+        return;
+      }
       if (key.return) {
+        settle();
         props.onSubmit?.(valueRef.current);
         return;
       }
       if (key.leftArrow) {
+        settle();
         moveCursor(currentCursor - 1, current.length);
         return;
       }
       if (key.rightArrow) {
+        settle();
         moveCursor(currentCursor + 1, current.length);
         return;
       }
       if (key.home) {
+        settle();
         moveCursor(0, current.length);
         return;
       }
       if (key.end) {
+        settle();
         moveCursor(current.length, current.length);
         return;
       }
       if (key.backspace || key.delete) {
+        const stepped = back(composing);
+        if (stepped.handled) {
+          composingRef.current = stepped.state;
+          applyComposition(current, currentCursor, shown, "", display(stepped.state));
+          return;
+        }
         if (currentCursor === 0) return;
         current.splice(currentCursor - 1, 1);
         updateValue(current, currentCursor - 1);
         return;
       }
       if (key.ctrl || key.meta || key.tab || key.escape || key.upArrow || key.downArrow || key.pageUp || key.pageDown) {
+        settle();
         return;
       }
       if (event.kind !== "text") return;
+      if (props.hangulMode) {
+        let state = composing;
+        let previous = shown;
+        let segments = current;
+        let cursor2 = currentCursor;
+        for (const character of event.text) {
+          const jamo = jamoOf(character);
+          if (!jamo) {
+            const flushed = flush(state);
+            state = flushed.state;
+            applyComposition(segments, cursor2, previous, flushed.commit + character, "");
+            segments = graphemes(valueRef.current);
+            cursor2 = cursorRef.current;
+            previous = "";
+            continue;
+          }
+          const result = feed(state, jamo);
+          state = result.state;
+          const next = display(state);
+          applyComposition(segments, cursor2, previous, result.commit, next);
+          segments = graphemes(valueRef.current);
+          cursor2 = cursorRef.current;
+          previous = next;
+        }
+        composingRef.current = state;
+        return;
+      }
+      settle();
       const inserted = graphemes(event.text);
       current.splice(currentCursor, 0, ...inserted);
       updateValue(current, currentCursor + inserted.length);
@@ -368,7 +702,7 @@ function FormField(props) {
 // 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));
@@ -387,15 +721,15 @@ function CommandPalette(props) {
 }
 
 // src/tui/history-screen.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+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 () => {
@@ -444,7 +778,7 @@ function HistoryScreen(props) {
 }
 
 // src/tui/start-panel.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
+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) {
@@ -452,10 +786,10 @@ function StartPanel(props) {
     { 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(
@@ -530,7 +864,7 @@ function when(conversation) {
 }
 
 // src/tui/use-terminal-size.ts
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useState as useState6 } from "react";
 import { useStdout } from "ink";
 function useTerminalSize() {
   const { stdout: stdout2 } = useStdout();
@@ -539,8 +873,8 @@ function useTerminalSize() {
     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 () => {
@@ -573,32 +907,39 @@ 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);
+  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__ */ jsx6(Text6, { bold: true, children: props.agent?.workflowName ?? "Agent\uB97C \uC120\uD0DD\uD558\uC138\uC694" }),
-    /* @__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(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))
+    /* @__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
+    ] }),
+    /* @__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", children: [
+    props.status ? /* @__PURE__ */ jsxs6(Text6, { color: "yellow", wrap: "truncate-end", children: [
       "\u25C6 ",
       props.status
     ] }) : null
@@ -606,7 +947,8 @@ function ChatPane(props) {
 }
 function Composer(props) {
   return /* @__PURE__ */ jsxs6(Box6, { borderStyle: "round", borderColor: props.focused ? "cyan" : "gray", paddingX: 1, children: [
-    /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: "\u203A " }),
+    /* @__PURE__ */ jsx6(Text6, { color: props.hangulMode ? "yellow" : void 0, dimColor: !props.hangulMode, children: props.hangulMode ? "\uD55C" : "EN" }),
+    /* @__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,
       {
@@ -614,7 +956,9 @@ function Composer(props) {
         onChange: props.onChange,
         onSubmit: props.onSubmit,
         focus: props.focused,
-        placeholder: "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694"
+        placeholder: "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694",
+        hangulMode: props.hangulMode,
+        onHangulModeChange: props.onHangulModeChange
       }
     )
   ] });
@@ -623,20 +967,27 @@ 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 [hangulMode, setHangulMode] = useState7(props.preferences?.hangulMode ?? false);
+  const changeHangulMode = (enabled) => {
+    setHangulMode(enabled);
+    props.preferences?.onHangulModeChange?.(enabled);
+  };
+  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;
@@ -662,12 +1013,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);
@@ -682,6 +1035,7 @@ function Dashboard(props) {
     if (chat.running) return;
     dispatch({ type: "reset" });
     setInput("");
+    setScrollUp(0);
     setPalette(false);
     setFocus("composer");
   };
@@ -697,6 +1051,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;
@@ -712,6 +1067,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);
@@ -722,6 +1083,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");
@@ -803,7 +1166,18 @@ function Dashboard(props) {
         }
       }
     ) : /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", flexGrow: 1, children: [
-      /* @__PURE__ */ jsx6(ChatPane, { agent: selected, messages: chat.messages, status: chat.status, height: bodyHeight - 3 }),
+      /* @__PURE__ */ jsx6(
+        ChatPane,
+        {
+          agent: selected,
+          messages: chat.messages,
+          status: chat.status,
+          scrollUp,
+          onViewport: (lineCount, height) => {
+            viewport.current = { lineCount, height };
+          }
+        }
+      ),
       /* @__PURE__ */ jsx6(
         Composer,
         {
@@ -811,7 +1185,9 @@ function Dashboard(props) {
           onChange: setInput,
           onSubmit: (value) => void send(value),
           focused: focus === "composer",
-          disabled: chat.running || !selected
+          disabled: chat.running || !selected,
+          hangulMode,
+          onHangulModeChange: changeHangulMode
         }
       )
     ] });
@@ -830,18 +1206,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: "Ctrl+Space \uD55C/\uC601 \xB7 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 { 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");
@@ -902,16 +1278,16 @@ function LoginScreen(props) {
 }
 
 // src/tui/profile-screen.tsx
-import { useEffect as useEffect6, useState as useState8 } from "react";
+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) {
@@ -995,11 +1371,11 @@ function ProfileScreen(props) {
 }
 
 // src/tui/server-screen.tsx
-import { useState as useState9 } from "react";
+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) => {
@@ -1038,15 +1414,18 @@ function ServerScreen(props) {
 
 // src/tui/app.tsx
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
-function App({ engine }) {
+function App({
+  engine,
+  preferences
+}) {
   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();
   });
@@ -1097,7 +1476,7 @@ function App({ engine }) {
     },
     [engine]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     void bootstrap();
   }, [bootstrap]);
   const configure = async (serverUrl) => {
@@ -1230,6 +1609,7 @@ function App({ engine }) {
     return /* @__PURE__ */ jsx10(
       Dashboard,
       {
+        preferences,
         engine,
         session,
         onProfiles: () => void openProfiles(),
@@ -1290,6 +1670,35 @@ function createScreenGuard(stream) {
   };
 }
 
+// src/tui/preferences.ts
+import { readFile, writeFile, mkdir } from "node:fs/promises";
+import { dirname, join } from "node:path";
+function preferencesPath(env = process.env) {
+  return join(dataDirectory(env), "tui.json");
+}
+function localeDefaultHangul(env = process.env) {
+  const locale = env.LC_ALL || env.LC_CTYPE || env.LANG || "";
+  return /^ko(_|-|\.|$)/i.test(locale.trim());
+}
+async function readPreferences(env = process.env) {
+  const fallback = { hangulMode: localeDefaultHangul(env) };
+  try {
+    const raw = JSON.parse(await readFile(preferencesPath(env), "utf8"));
+    return typeof raw.hangulMode === "boolean" ? { hangulMode: raw.hangulMode } : fallback;
+  } catch {
+    return fallback;
+  }
+}
+async function writePreferences(preferences, env = process.env) {
+  try {
+    const path = preferencesPath(env);
+    await mkdir(dirname(path), { recursive: true });
+    await writeFile(path, `${JSON.stringify(preferences, null, 2)}
+`, "utf8");
+  } catch {
+  }
+}
+
 // src/tui/index.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
 async function runTui(engine) {
@@ -1302,12 +1711,25 @@ async function runTui(engine) {
   process.once("exit", restore);
   process.once("SIGINT", onSignal);
   process.once("SIGTERM", onSignal);
+  const preferences = await readPreferences();
   screen.enter();
   try {
-    const instance = render(/* @__PURE__ */ jsx11(App, { engine }), {
-      exitOnCtrlC: true,
-      patchConsole: true
-    });
+    const instance = render(
+      /* @__PURE__ */ jsx11(
+        App,
+        {
+          engine,
+          preferences: {
+            hangulMode: preferences.hangulMode,
+            onHangulModeChange: (enabled) => void writePreferences({ hangulMode: enabled })
+          }
+        }
+      ),
+      {
+        exitOnCtrlC: true,
+        patchConsole: true
+      }
+    );
     await instance.waitUntilExit();
   } finally {
     restore();
@@ -1319,4 +1741,4 @@ async function runTui(engine) {
 export {
   runTui
 };
-//# sourceMappingURL=tui-HKY3YBAY.js.map
+//# sourceMappingURL=tui-DTMX2JZ7.js.map