xgen-dex-cli 1.7.1 → 1.8.0

package/dist/chunks/{tui-H3VM2MGV.js → tui-WG5AIWUR.js}

@@ -2,19 +2,19 @@ import {
   DexError,
   dataDirectory,
   publicError
-} from "./chunk-ULMEXJOR.js";
+} from "./chunk-KY3K4GV4.js";
 
 // src/tui/index.tsx
 import { render } from "ink";
 import { stdin, stdout } from "node:process";
 
 // src/tui/app.tsx
-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";
+import { useCallback, useEffect as useEffect9, useState as useState12 } from "react";
+import { Box as Box11, Text as Text11, useApp as useApp2, useInput as useInput10 } from "ink";
 
 // src/tui/dashboard.tsx
-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";
+import { useEffect as useEffect7, useReducer, useRef as useRef3, useState as useState8 } from "react";
+import { Box as Box7, Text as Text7, useApp, useInput as useInput6 } from "ink";
 
 // src/tui/chat-state.ts
 var initialChatState = { messages: [], running: false };
@@ -288,7 +288,7 @@ import { Box as Box2, Text as Text2 } from "ink";
 
 // src/tui/ime-text-input.tsx
 import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
-import { Box, Text, useCursor, useInput, useStdin } from "ink";
+import { Box, Text, useCursor, useInput } from "ink";
 import stringWidth2 from "string-width";
 
 // src/tui/terminal-input.ts
@@ -504,67 +504,6 @@ function backspace(session) {
   };
 }
 
-// src/tui/kitty.ts
-var ESC = "\x1B";
-var QUERY = `${ESC}[?u`;
-var KEY_CODES = {
-  57358: "capslock",
-  57449: "rightalt"
-};
-var CAPS_LOCK_BIT = 64;
-function parseKeyEvents(chunk) {
-  const events = [];
-  const pattern = /\u001B\[(\d+)(?::\d+)*(?:;(\d+)(?::(\d+))?)?(?:;[\d:]*)?u/g;
-  for (const match of chunk.matchAll(pattern)) {
-    const code = Number(match[1]);
-    const modifiers = match[2] ? Number(match[2]) - 1 : 0;
-    events.push({
-      name: KEY_CODES[code],
-      // eslint-disable-next-line no-bitwise
-      capsLock: (modifiers & CAPS_LOCK_BIT) !== 0,
-      eventType: match[3] ? Number(match[3]) : 1
-    });
-  }
-  return events;
-}
-function knownKittyTerminal(env = process.env) {
-  if (env.KITTY_WINDOW_ID) return true;
-  if (env.GHOSTTY_RESOURCES_DIR) return true;
-  const term = (env.TERM ?? "").toLowerCase();
-  if (term === "xterm-kitty" || term === "xterm-ghostty" || term.includes("foot")) return true;
-  const program = (env.TERM_PROGRAM ?? "").toLowerCase();
-  return program === "wezterm" || program === "ghostty" || program === "kitty";
-}
-async function supportsKittyKeyboard(streams, timeoutMs = 200, env = process.env) {
-  if (env.DEX_NO_KITTY === "1") return false;
-  if (!streams.stdout.isTTY || !streams.isTTY) return false;
-  if (knownKittyTerminal(env)) return true;
-  const wasRaw = streams.stdin.isRaw === true;
-  const wasPaused = !wasRaw;
-  streams.stdin.setRawMode?.(true);
-  streams.stdin.resume?.();
-  return new Promise((resolve) => {
-    let settled = false;
-    let seen = "";
-    const finish = (supported) => {
-      if (settled) return;
-      settled = true;
-      clearTimeout(timer);
-      streams.stdin.removeListener("data", onData);
-      if (!wasRaw) streams.stdin.setRawMode?.(false);
-      if (wasPaused) streams.stdin.pause?.();
-      resolve(supported);
-    };
-    const onData = (data) => {
-      seen += typeof data === "string" ? data : data.toString("utf8");
-      if (/\u001B\[\?\d*u/.test(seen)) finish(true);
-    };
-    const timer = setTimeout(() => finish(false), timeoutMs);
-    streams.stdin.on("data", onData);
-    streams.stdout.write(QUERY);
-  });
-}
-
 // src/tui/ime-text-input.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var segmenter = new Intl.Segmenter("ko", { granularity: "grapheme" });
@@ -628,22 +567,6 @@ function ImeTextInput(props) {
     moveCursor(nextCursor, segments.length);
     props.onChange(nextValue);
   };
-  const { stdin: stdin2, isRawModeSupported } = useStdin();
-  const onModeKeyRef = useRef2(void 0);
-  onModeKeyRef.current = () => props.onHangulModeChange?.(!props.hangulMode);
-  useEffect2(() => {
-    if (!props.focus || !isRawModeSupported) return void 0;
-    const onData = (data) => {
-      const chunk = typeof data === "string" ? data : data.toString("utf8");
-      for (const event of parseKeyEvents(chunk)) {
-        typingRef.current = { ...typingRef.current, capsLock: event.capsLock };
-        if (event.eventType !== 1) continue;
-        if (event.name === "rightalt" || event.name === "capslock") onModeKeyRef.current?.();
-      }
-    };
-    stdin2?.on("data", onData);
-    return () => void stdin2?.off("data", onData);
-  }, [props.focus, isRawModeSupported, stdin2]);
   useEffect2(() => {
     if (!props.focus || !props.hangulMode) {
       typingRef.current = { ...IDLE, capsLock: typingRef.current.capsLock };
@@ -994,8 +917,204 @@ function when(conversation) {
   return sameDay ? `\uC624\uB298 ${pad(date.getHours())}:${pad(date.getMinutes())}` : `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
 }
 
+// src/tui/agent-create.tsx
+import { useEffect as useEffect5, useMemo, useState as useState6 } from "react";
+import { Box as Box6, Text as Text6, useInput as useInput5 } from "ink";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var ADVANCED_ORDER = [
+  "system_prompt",
+  "temperature",
+  "max_tokens",
+  "max_iterations",
+  "context_window",
+  "tool_exposure",
+  "enable_builtin_tools",
+  "enable_self_evolution",
+  "enable_delegation",
+  "enable_memory",
+  "enable_compaction",
+  "streaming",
+  "base_url"
+];
+function advancedFields(settings) {
+  const rank = (id) => {
+    const i = ADVANCED_ORDER.indexOf(id);
+    return i === -1 ? ADVANCED_ORDER.length : i;
+  };
+  return [...settings].sort((a, b) => rank(a.id) - rank(b.id)).map((setting) => {
+    const type = (setting.type || "").toUpperCase();
+    if (type === "BOOL") return { key: setting.id, label: setting.label, kind: "toggle" };
+    if (setting.options && setting.options.length > 0) {
+      return {
+        key: setting.id,
+        label: setting.label,
+        kind: "choice",
+        choices: setting.options
+      };
+    }
+    return { key: setting.id, label: setting.label, kind: "text" };
+  });
+}
+function AgentCreateScreen(props) {
+  const [options, setOptions] = useState6();
+  const [loadError, setLoadError] = useState6();
+  const [values, setValues] = useState6({});
+  const [cursor, setCursor] = useState6(0);
+  const [advanced, setAdvanced] = useState6(false);
+  const [busy, setBusy] = useState6(false);
+  const [error, setError] = useState6();
+  useEffect5(() => {
+    let cancelled = false;
+    props.engine.agentCreateOptions(props.profile).then((data) => {
+      if (cancelled) return;
+      const provider = data.providers.find((p) => p.value === data.defaultProvider)?.value ?? data.providers[0]?.value ?? "";
+      const info = data.providers.find((p) => p.value === provider);
+      setOptions(data);
+      const seeded = {};
+      for (const setting of data.settings) seeded[setting.id] = setting.default;
+      setValues({
+        ...seeded,
+        ...data.defaults,
+        name: "",
+        provider,
+        model: info?.defaultModel || info?.models[0]?.value || ""
+      });
+    }).catch((err) => {
+      if (!cancelled) setLoadError(publicError(err).message);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [props.engine, props.profile]);
+  const providerInfo = useMemo(
+    () => options?.providers.find((p) => p.value === values.provider),
+    [options, values.provider]
+  );
+  const fields = useMemo(() => {
+    if (!options) return [];
+    const base = [
+      { key: "name", label: "\uC774\uB984", kind: "text", hint: "\uC608: \uC601\uC5C5 \uB9AC\uC11C\uCE58 \uB3C4\uC6B0\uBBF8" },
+      {
+        key: "provider",
+        label: "AI \uC81C\uACF5\uC0AC",
+        kind: "choice",
+        choices: options.providers.map((p) => ({ value: p.value, label: p.label }))
+      },
+      { key: "model", label: "\uBAA8\uB378", kind: "choice", choices: providerInfo?.models ?? [] }
+    ];
+    return advanced ? [...base, ...advancedFields(options.settings)] : base;
+  }, [options, providerInfo, advanced]);
+  const active = fields[cursor];
+  const name = String(values.name ?? "").trim();
+  const setValue = (key, value) => {
+    setValues((prev) => {
+      if (key !== "provider") return { ...prev, [key]: value };
+      const info = options?.providers.find((p) => p.value === value);
+      return { ...prev, provider: value, model: info?.defaultModel || info?.models[0]?.value || "" };
+    });
+  };
+  const cycle = (field, step) => {
+    if (field.kind === "toggle") {
+      setValue(field.key, !values[field.key]);
+      return;
+    }
+    const choices = field.choices ?? [];
+    if (choices.length === 0) return;
+    const at = Math.max(0, choices.findIndex((c) => c.value === String(values[field.key] ?? "")));
+    const next = (at + step + choices.length) % choices.length;
+    setValue(field.key, choices[next].value);
+  };
+  const submit = async () => {
+    if (!name || busy) return;
+    setBusy(true);
+    setError(void 0);
+    try {
+      const { name: _n, provider: _p, model: _m, ...settings } = values;
+      const created = await props.engine.createAgent(
+        {
+          name,
+          provider: String(values.provider ?? ""),
+          model: String(values.model ?? ""),
+          settings
+        },
+        props.profile
+      );
+      props.onCreated(created);
+    } catch (err) {
+      setError(publicError(err).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+  useInput5((input, key) => {
+    const onText = active?.kind === "text";
+    if (key.escape) {
+      props.onCancel();
+      return;
+    }
+    if (key.tab) {
+      setAdvanced((v) => !v);
+      return;
+    }
+    if (key.upArrow) {
+      setCursor((c) => Math.max(0, c - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setCursor((c) => Math.min(fields.length - 1, c + 1));
+      return;
+    }
+    if (!active || onText) return;
+    if (key.leftArrow) cycle(active, -1);
+    else if (key.rightArrow) cycle(active, 1);
+    else if (input === " " && !key.ctrl && !key.meta) cycle(active, 1);
+    else if (key.return) void submit();
+  });
+  if (loadError) {
+    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", padding: 1, children: [
+      /* @__PURE__ */ jsx6(Text6, { color: "red", children: loadError }),
+      /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "Esc \uB85C \uB3CC\uC544\uAC11\uB2C8\uB2E4." })
+    ] });
+  }
+  if (!options) {
+    return /* @__PURE__ */ jsx6(Box6, { padding: 1, children: /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "\uBD88\uB7EC\uC624\uB294 \uC911..." }) });
+  }
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
+    /* @__PURE__ */ jsx6(Text6, { bold: true, children: "\uC0C8 \uC5D0\uC774\uC804\uD2B8" }),
+    /* @__PURE__ */ jsx6(Text6, { dimColor: true, wrap: "truncate-end", children: "\uC774\uB984\uACFC \uBAA8\uB378\uB9CC \uC815\uD558\uBA74 \uB429\uB2C8\uB2E4. \uB3C4\uAD6C\xB7\uAE30\uC5B5\xB7\uC790\uAE30\uC9C4\uD654\uB294 \uC774\uBBF8 \uC548\uC5D0 \uC788\uC2B5\uB2C8\uB2E4." }),
+    /* @__PURE__ */ jsx6(Box6, { height: 1 }),
+    fields.map((field, index) => {
+      const focused = index === cursor;
+      const raw = values[field.key];
+      const shown = field.kind === "toggle" ? raw ? "\uCF2C" : "\uB054" : field.kind === "choice" ? field.choices?.find((c) => c.value === String(raw ?? ""))?.label ?? String(raw ?? "") : String(raw ?? "");
+      return /* @__PURE__ */ jsxs6(Box6, { children: [
+        /* @__PURE__ */ jsx6(Box6, { width: 24, flexShrink: 0, children: /* @__PURE__ */ jsxs6(Text6, { color: focused ? "cyan" : void 0, wrap: "truncate-end", children: [
+          focused ? "\u203A" : " ",
+          " ",
+          field.label
+        ] }) }),
+        field.kind === "text" && focused ? /* @__PURE__ */ jsx6(
+          ImeTextInput,
+          {
+            value: String(raw ?? ""),
+            onChange: (v) => setValue(field.key, v),
+            onSubmit: () => void submit(),
+            focus: true,
+            placeholder: field.hint ?? "",
+            hangulMode: props.hangulMode,
+            onHangulModeChange: props.onHangulModeChange
+          }
+        ) : /* @__PURE__ */ jsx6(Text6, { dimColor: !focused, wrap: "truncate-end", children: field.kind === "text" ? shown || field.hint || "" : `\u2039 ${shown} \u203A` })
+      ] }, field.key);
+    }),
+    /* @__PURE__ */ jsx6(Box6, { height: 1 }),
+    error ? /* @__PURE__ */ jsx6(Text6, { color: "red", children: error }) : null,
+    /* @__PURE__ */ jsx6(Text6, { dimColor: true, wrap: "truncate-end", children: busy ? "\uB9CC\uB4DC\uB294 \uC911..." : `\u2191\u2193 \uC774\uB3D9 \xB7 \u2190\u2192 \uACE0\uB974\uAE30 \xB7 Tab ${advanced ? "\uC138\uBD80\uC124\uC815 \uC811\uAE30" : "\uC138\uBD80\uC124\uC815"} \xB7 Enter \uB9CC\uB4E4\uAE30 \xB7 Esc \uCDE8\uC18C` })
+  ] });
+}
+
 // src/tui/use-terminal-size.ts
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useEffect as useEffect6, useState as useState7 } from "react";
 import { useStdout } from "ink";
 function useTerminalSize() {
   const { stdout: stdout2 } = useStdout();
@@ -1004,8 +1123,8 @@ function useTerminalSize() {
     const rows = stdout2.rows || 30;
     return { columns, rows, wide: columns >= 88 };
   };
-  const [size, setSize] = useState6(read);
-  useEffect5(() => {
+  const [size, setSize] = useState7(read);
+  useEffect6(() => {
     const resize = () => setSize(read());
     stdout2.on("resize", resize);
     return () => {
@@ -1016,18 +1135,22 @@ function useTerminalSize() {
 }
 
 // src/tui/dashboard.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 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(Box6, { flexDirection: "column", width: 30, borderStyle: "round", borderColor: props.focused ? "cyan" : "gray", paddingX: 1, children: [
-    /* @__PURE__ */ jsx6(Text6, { bold: true, children: "Agents" }),
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", width: 30, borderStyle: "round", borderColor: props.focused ? "cyan" : "gray", paddingX: 1, children: [
+    /* @__PURE__ */ jsx7(Text7, { bold: true, children: "Agents" }),
+    /* @__PURE__ */ jsxs7(Text7, { color: props.cursor === -1 && props.focused ? "cyan" : void 0, wrap: "truncate-end", children: [
+      props.cursor === -1 ? "\u203A" : " ",
+      " \uFF0B \uC0C8 \uC5D0\uC774\uC804\uD2B8"
+    ] }),
     visible.map((agent) => {
       const index = props.agents.indexOf(agent);
       const cursor = index === props.cursor;
       const selected = agent.workflowId === props.selected;
-      return /* @__PURE__ */ jsxs6(Text6, { color: cursor && props.focused ? "cyan" : void 0, wrap: "truncate-end", children: [
+      return /* @__PURE__ */ jsxs7(Text7, { color: cursor && props.focused ? "cyan" : void 0, wrap: "truncate-end", children: [
         cursor ? "\u203A" : " ",
         " ",
         selected ? "\u25CF" : "\u25CB",
@@ -1035,7 +1158,7 @@ function AgentSidebar(props) {
         agent.workflowName
       ] }, agent.workflowId);
     }),
-    props.agents.length === 0 ? /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "\uC0AC\uC6A9 \uAC00\uB2A5\uD55C Agent\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null
+    props.agents.length === 0 ? /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "\uC0AC\uC6A9 \uAC00\uB2A5\uD55C Agent\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null
   ] });
 }
 function ChatPane(props) {
@@ -1044,22 +1167,22 @@ function ChatPane(props) {
   const height = box?.height ?? 1;
   const lines = renderTranscript(props.messages, props.agent?.workflowName ?? "Agent", width);
   const view = viewportOf(lines, height, props.scrollUp);
-  useEffect6(() => {
+  useEffect7(() => {
     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: [
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: "blue", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs7(Box7, { children: [
+      /* @__PURE__ */ jsx7(Text7, { bold: true, wrap: "truncate-end", children: props.agent?.workflowName ?? "Agent\uB97C \uC120\uD0DD\uD558\uC138\uC694" }),
+      view.below > 0 ? /* @__PURE__ */ jsxs7(Text7, { 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,
+    /* @__PURE__ */ jsxs7(Box7, { ref, flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [
+      view.lines.length === 0 ? /* @__PURE__ */ jsx7(Text7, { 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__ */ jsx7(
+        Text7,
         {
           wrap: "truncate-end",
           bold: line.role === "label",
@@ -1070,17 +1193,17 @@ function ChatPane(props) {
         line.key
       ))
     ] }),
-    props.status ? /* @__PURE__ */ jsxs6(Text6, { color: "yellow", wrap: "truncate-end", children: [
+    props.status ? /* @__PURE__ */ jsxs7(Text7, { color: "yellow", wrap: "truncate-end", children: [
       "\u25C6 ",
       props.status
     ] }) : null
   ] });
 }
 function Composer(props) {
-  return /* @__PURE__ */ jsxs6(Box6, { borderStyle: "round", borderColor: props.focused ? "cyan" : "gray", paddingX: 1, children: [
-    /* @__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(
+  return /* @__PURE__ */ jsxs7(Box7, { borderStyle: "round", borderColor: props.focused ? "cyan" : "gray", paddingX: 1, children: [
+    /* @__PURE__ */ jsx7(Text7, { color: props.hangulMode ? "yellow" : void 0, dimColor: !props.hangulMode, children: props.hangulMode ? "\uD55C" : "EN" }),
+    /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: " \u203A " }),
+    props.disabled ? /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "\uC751\uB2F5\uC744 \uAE30\uB2E4\uB9AC\uB294 \uC911..." }) : /* @__PURE__ */ jsx7(
       ImeTextInput,
       {
         value: props.value,
@@ -1098,28 +1221,42 @@ function Dashboard(props) {
   const { exit } = useApp();
   const size = useTerminalSize();
   const bodyHeight = Math.max(12, size.rows - 5);
-  const [focus, setFocus] = useState7("agents");
-  const [cursor, setCursor] = useState7(0);
-  const [selected, setSelected] = useState7(() => {
+  const [focus, setFocus] = useState8("agents");
+  const [cursor, setCursor] = useState8(0);
+  const [creatingAgent, setCreatingAgent] = useState8(false);
+  const [selected, setSelected] = useState8(() => {
     const first = props.session.agents[0];
     return first ? { workflowId: first.workflowId, workflowName: first.workflowName } : void 0;
   });
-  const [input, setInput] = useState7("");
+  const [input, setInput] = useState8("");
   const [chat, dispatch] = useReducer(chatReducer, initialChatState);
-  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 [palette, setPalette] = useState8(false);
+  const [history, setHistory] = useState8(false);
+  const [start, setStart] = useState8();
+  const [scrollUp, setScrollUp] = useState8(0);
+  const [hangulMode, setHangulMode] = useState8(props.preferences?.hangulMode ?? false);
   const changeHangulMode = (enabled) => {
     setHangulMode(enabled);
     props.preferences?.onHangulModeChange?.(enabled);
   };
+  useEffect7(
+    () => props.preferences?.onModeKey?.(
+      () => setHangulMode((current) => {
+        props.preferences?.onHangulModeChange?.(!current);
+        return !current;
+      })
+    ),
+    [props.preferences]
+  );
   const viewport = useRef3({ lineCount: 0, height: 0 });
-  const [starting, setStarting] = useState7(false);
+  const [starting, setStarting] = useState8(false);
   const controller = useRef3(null);
-  useEffect6(() => () => controller.current?.abort(), []);
+  useEffect7(() => () => controller.current?.abort(), []);
   const selectAgent = async () => {
+    if (cursor === -1) {
+      setCreatingAgent(true);
+      return;
+    }
     const agent = props.session.agents[cursor];
     if (!agent || chat.running || starting) return;
     const ref = { workflowId: agent.workflowId, workflowName: agent.workflowName };
@@ -1204,7 +1341,7 @@ function Dashboard(props) {
     const limit = maximumScroll(lineCount, height);
     setScrollUp((current) => Math.min(limit, Math.max(0, current - direction * step)));
   };
-  useInput5(
+  useInput6(
     (keyInput, key) => {
       if (key.ctrl && keyInput === "k") setPalette(true);
       else if (key.ctrl && keyInput === "p") {
@@ -1219,14 +1356,14 @@ function Dashboard(props) {
       else if (key.escape && chat.running) cancelTurn();
       else if (key.escape) setFocus("agents");
       else if (key.tab) setFocus((current) => current === "agents" ? "composer" : "agents");
-      else if (focus === "agents" && key.upArrow) setCursor((current) => Math.max(0, current - 1));
+      else if (focus === "agents" && key.upArrow) setCursor((current) => Math.max(-1, current - 1));
       else if (focus === "agents" && key.downArrow && props.session.agents.length > 0) {
         setCursor((current) => Math.min(props.session.agents.length - 1, current + 1));
       } else if (focus === "agents" && key.return) void selectAgent();
     },
     // 갈림길·팔레트·이력 화면이 떠 있으면 그 화면이 키를 갖는다 — 여기서도 받으면
     // 방향키 하나가 두 곳에서 움직인다.
-    { isActive: !palette && !history && !start }
+    { isActive: !palette && !history && !start && !creatingAgent }
   );
   const paletteActions = [
     { id: "new", label: "\uC0C8 \uB300\uD654", run: newConversation },
@@ -1259,10 +1396,25 @@ function Dashboard(props) {
     { id: "quit", label: "\uC885\uB8CC", run: exit }
   ];
   let body;
-  if (palette) {
-    body = /* @__PURE__ */ jsx6(CommandPalette, { actions: paletteActions, onCancel: () => setPalette(false) });
+  if (creatingAgent) {
+    body = /* @__PURE__ */ jsx7(
+      AgentCreateScreen,
+      {
+        engine: props.engine,
+        profile: props.session.profile,
+        hangulMode,
+        onHangulModeChange: changeHangulMode,
+        onCancel: () => setCreatingAgent(false),
+        onCreated: (agent) => {
+          setCreatingAgent(false);
+          openNewChat(agent);
+        }
+      }
+    );
+  } else if (palette) {
+    body = /* @__PURE__ */ jsx7(CommandPalette, { actions: paletteActions, onCancel: () => setPalette(false) });
   } else if (history) {
-    body = /* @__PURE__ */ jsx6(
+    body = /* @__PURE__ */ jsx7(
       HistoryScreen,
       {
         engine: props.engine,
@@ -1272,7 +1424,7 @@ function Dashboard(props) {
       }
     );
   } else {
-    const sidebar = /* @__PURE__ */ jsx6(
+    const sidebar = /* @__PURE__ */ jsx7(
       AgentSidebar,
       {
         agents: props.session.agents,
@@ -1282,7 +1434,7 @@ function Dashboard(props) {
         height: bodyHeight
       }
     );
-    const conversation = start ? /* @__PURE__ */ jsx6(
+    const conversation = start ? /* @__PURE__ */ jsx7(
       StartPanel,
       {
         engine: props.engine,
@@ -1296,8 +1448,8 @@ function Dashboard(props) {
           setFocus("agents");
         }
       }
-    ) : /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", flexGrow: 1, children: [
-      /* @__PURE__ */ jsx6(
+    ) : /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx7(
         ChatPane,
         {
           agent: selected,
@@ -1309,7 +1461,7 @@ function Dashboard(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         Composer,
         {
           value: input,
@@ -1322,13 +1474,13 @@ function Dashboard(props) {
         }
       )
     ] });
-    body = size.wide ? /* @__PURE__ */ jsxs6(Box6, { height: bodyHeight, children: [
+    body = size.wide ? /* @__PURE__ */ jsxs7(Box7, { height: bodyHeight, children: [
       sidebar,
       conversation
-    ] }) : focus === "agents" ? /* @__PURE__ */ jsx6(Box6, { height: bodyHeight, children: sidebar }) : /* @__PURE__ */ jsx6(Box6, { height: bodyHeight, children: conversation });
+    ] }) : focus === "agents" ? /* @__PURE__ */ jsx7(Box7, { height: bodyHeight, children: sidebar }) : /* @__PURE__ */ jsx7(Box7, { height: bodyHeight, children: conversation });
   }
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx7(
       Header,
       {
         profile: props.session.profile,
@@ -1337,7 +1489,7 @@ function Dashboard(props) {
       }
     ),
     body,
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       Footer,
       {
         mode: hangulMode ? "\uD55C" : "EN",
@@ -1348,14 +1500,14 @@ function Dashboard(props) {
 }
 
 // src/tui/login-screen.tsx
-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";
+import { 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 LoginScreen(props) {
-  const [email, setEmail] = useState8("");
-  const [password, setPassword] = useState8("");
-  const [focus, setFocus] = useState8("email");
-  useInput6(
+  const [email, setEmail] = useState9("");
+  const [password, setPassword] = useState9("");
+  const [focus, setFocus] = useState9("email");
+  useInput7(
     (input, key) => {
       if (key.tab) setFocus((current) => current === "email" ? "password" : "email");
       if (key.ctrl && input === "p") props.onProfiles();
@@ -1374,17 +1526,17 @@ function LoginScreen(props) {
       props.onSubmit(email.trim(), secret);
     }
   };
-  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx7(Header, { profile: props.profile, connected: false }),
-    /* @__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: [
+  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx8(Header, { profile: props.profile, connected: false }),
+    /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", borderStyle: "round", borderColor: "blue", padding: 1, children: [
+      /* @__PURE__ */ jsx8(Text8, { bold: true, children: "\uB85C\uADF8\uC778" }),
+      /* @__PURE__ */ jsxs8(Text8, { dimColor: true, children: [
         props.serverUrl,
         " ",
-        /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: "(Ctrl+E \uBC14\uAFB8\uAE30)" })
+        /* @__PURE__ */ jsx8(Text8, { color: "cyan", children: "(Ctrl+E \uBC14\uAFB8\uAE30)" })
       ] }),
-      /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
+        /* @__PURE__ */ jsx8(
           FormField,
           {
             label: "Email",
@@ -1395,7 +1547,7 @@ function LoginScreen(props) {
             placeholder: "me@corp.com"
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           FormField,
           {
             label: "Password",
@@ -1407,25 +1559,25 @@ function LoginScreen(props) {
           }
         )
       ] }),
-      props.busy ? /* @__PURE__ */ jsx7(Loading, { label: "\uB85C\uADF8\uC778\uD558\uB294 \uC911..." }) : null,
-      props.error ? /* @__PURE__ */ jsx7(Notice, { error: true, children: props.error }) : null
+      props.busy ? /* @__PURE__ */ jsx8(Loading, { label: "\uB85C\uADF8\uC778\uD558\uB294 \uC911..." }) : null,
+      props.error ? /* @__PURE__ */ jsx8(Notice, { error: true, children: props.error }) : null
     ] }),
-    /* @__PURE__ */ jsx7(Footer, { text: "Tab \uC774\uB3D9 \xB7 Enter \uB85C\uADF8\uC778 \xB7 Ctrl+E \uC11C\uBC84 \xB7 Ctrl+P \uD504\uB85C\uD544 \xB7 Ctrl+Q \uC885\uB8CC" })
+    /* @__PURE__ */ jsx8(Footer, { text: "Tab \uC774\uB3D9 \xB7 Enter \uB85C\uADF8\uC778 \xB7 Ctrl+E \uC11C\uBC84 \xB7 Ctrl+P \uD504\uB85C\uD544 \xB7 Ctrl+Q \uC885\uB8CC" })
   ] });
 }
 
 // src/tui/profile-screen.tsx
-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";
+import { useEffect as useEffect8, 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 ProfileScreen(props) {
-  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(
+  const [cursor, setCursor] = useState10(Math.max(0, props.profiles.findIndex((profile) => profile.current)));
+  const [creating, setCreating] = useState10(false);
+  const [focus, setFocus] = useState10("name");
+  const [name, setName] = useState10("");
+  const [serverUrl, setServerUrl] = useState10("");
+  useEffect8(() => setCursor((current) => Math.min(current, Math.max(0, props.profiles.length - 1))), [props.profiles]);
+  useInput8(
     (input, key) => {
       if (key.escape) {
         if (creating) setCreating(false);
@@ -1455,12 +1607,12 @@ function ProfileScreen(props) {
     }
     if (name.trim() && serverUrl.trim()) props.onCreate(name.trim(), serverUrl.trim());
   };
-  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx8(Header, {}),
-    /* @__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(Box8, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx9(Header, {}),
+    /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", padding: 1, children: [
+      /* @__PURE__ */ jsx9(Text9, { bold: true, children: creating ? "\uC0C8 \uD504\uB85C\uD544" : "\uD504\uB85C\uD544 \uC804\uD658" }),
+      creating ? /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", marginTop: 1, children: [
+        /* @__PURE__ */ jsx9(
           FormField,
           {
             label: "Name",
@@ -1471,7 +1623,7 @@ function ProfileScreen(props) {
             placeholder: "corp"
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           FormField,
           {
             label: "Server URL",
@@ -1482,8 +1634,8 @@ function ProfileScreen(props) {
             placeholder: "https://xgen.example.com"
           }
         )
-      ] }) : /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
-        props.profiles.map((profile, index) => /* @__PURE__ */ jsxs8(Text8, { color: index === cursor ? "cyan" : void 0, children: [
+      ] }) : /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", marginTop: 1, children: [
+        props.profiles.map((profile, index) => /* @__PURE__ */ jsxs9(Text9, { color: index === cursor ? "cyan" : void 0, children: [
           index === cursor ? "\u203A" : " ",
           " ",
           profile.current ? "\u25CF" : "\u25CB",
@@ -1491,14 +1643,14 @@ function ProfileScreen(props) {
           profile.name,
           " \xB7",
           " ",
-          /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: profile.serverUrl })
+          /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: profile.serverUrl })
         ] }, profile.name)),
-        props.profiles.length === 0 ? /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "\uC800\uC7A5\uB41C \uD504\uB85C\uD544\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null
+        props.profiles.length === 0 ? /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "\uC800\uC7A5\uB41C \uD504\uB85C\uD544\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null
       ] }),
-      props.busy ? /* @__PURE__ */ jsx8(Loading, { label: "\uD504\uB85C\uD544\uC744 \uC804\uD658\uD558\uB294 \uC911..." }) : null,
-      props.error ? /* @__PURE__ */ jsx8(Notice, { error: true, children: props.error }) : null
+      props.busy ? /* @__PURE__ */ jsx9(Loading, { label: "\uD504\uB85C\uD544\uC744 \uC804\uD658\uD558\uB294 \uC911..." }) : null,
+      props.error ? /* @__PURE__ */ jsx9(Notice, { error: true, children: props.error }) : null
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       Footer,
       {
         text: creating ? "Tab \uC774\uB3D9 \xB7 Enter \uC800\uC7A5 \xB7 Esc \uB4A4\uB85C" : "\u2191\u2193 \uC774\uB3D9 \xB7 Enter \uC120\uD0DD \xB7 N \uC0C8 \uD504\uB85C\uD544 \xB7 Esc \uB2EB\uAE30"
@@ -1508,24 +1660,24 @@ function ProfileScreen(props) {
 }
 
 // src/tui/server-screen.tsx
-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";
+import { useState as useState11 } from "react";
+import { Box as Box10, Text as Text10, useInput as useInput9 } from "ink";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function ServerScreen(props) {
-  const [serverUrl, setServerUrl] = useState10(props.initialValue ?? "");
+  const [serverUrl, setServerUrl] = useState11(props.initialValue ?? "");
   const editing = props.initialValue !== void 0;
-  useInput8(
+  useInput9(
     (_input, key) => {
       if (key.escape) props.onCancel?.();
     },
     { isActive: !props.busy && !!props.onCancel }
   );
-  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx9(Header, { profile: props.profile, connected: false }),
-    /* @__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(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx10(Header, { profile: props.profile, connected: false }),
+    /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", borderStyle: "round", borderColor: "blue", padding: 1, children: [
+      /* @__PURE__ */ jsx10(Text10, { bold: true, children: editing ? "\uC11C\uBC84 \uC8FC\uC18C \uBC14\uAFB8\uAE30" : "\uCC98\uC74C \uC624\uC168\uAD70\uC694" }),
+      /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "\uC5F0\uACB0\uD560 XGEN Gateway \uC8FC\uC18C\uB97C \uC785\uB825\uD558\uC138\uC694." }),
+      /* @__PURE__ */ jsx10(Box10, { marginTop: 1, children: /* @__PURE__ */ jsx10(
         FormField,
         {
           label: "Server URL",
@@ -1536,11 +1688,11 @@ function ServerScreen(props) {
           placeholder: "xgen.example.com"
         }
       ) }),
-      /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "https:// \uB294 \uC0DD\uB7B5\uD574\uB3C4 \uB429\uB2C8\uB2E4." }),
-      props.busy ? /* @__PURE__ */ jsx9(Loading, { label: "\uC11C\uBC84 \uD504\uB85C\uD544\uC744 \uC800\uC7A5\uD558\uB294 \uC911..." }) : null,
-      props.error ? /* @__PURE__ */ jsx9(Notice, { error: true, children: props.error }) : null
+      /* @__PURE__ */ jsx10(Text10, { dimColor: true, children: "https:// \uB294 \uC0DD\uB7B5\uD574\uB3C4 \uB429\uB2C8\uB2E4." }),
+      props.busy ? /* @__PURE__ */ jsx10(Loading, { label: "\uC11C\uBC84 \uD504\uB85C\uD544\uC744 \uC800\uC7A5\uD558\uB294 \uC911..." }) : null,
+      props.error ? /* @__PURE__ */ jsx10(Notice, { error: true, children: props.error }) : null
     ] }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Footer,
       {
         text: props.onCancel ? "Enter \uC800\uC7A5 \xB7 Esc \uCDE8\uC18C \xB7 Ctrl+Q \uC885\uB8CC" : "Enter \uACC4\uC18D \xB7 Ctrl+Q \uC885\uB8CC"
@@ -1550,20 +1702,20 @@ function ServerScreen(props) {
 }
 
 // src/tui/app.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function App({
   engine,
   preferences
 }) {
   const { exit } = useApp2();
-  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) => {
+  const [route, setRoute] = useState12("boot");
+  const [session, setSession] = useState12();
+  const [profiles, setProfiles] = useState12([]);
+  const [loginTarget, setLoginTarget] = useState12();
+  const [editingServer, setEditingServer] = useState12();
+  const [busy, setBusy] = useState12(false);
+  const [error, setError] = useState12();
+  useInput10((input, key) => {
     if (key.ctrl && input === "q") exit();
   });
   const bootstrap = useCallback(
@@ -1613,7 +1765,7 @@ function App({
     },
     [engine]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     void bootstrap();
   }, [bootstrap]);
   const configure = async (serverUrl) => {
@@ -1688,14 +1840,14 @@ function App({
     }
   };
   if (route === "boot") {
-    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" })
+    return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx11(Header, {}),
+      /* @__PURE__ */ jsx11(Loading, { label: "Dex\uB97C \uC900\uBE44\uD558\uB294 \uC911..." }),
+      /* @__PURE__ */ jsx11(Footer, { text: "Ctrl+Q \uC885\uB8CC" })
     ] });
   }
   if (route === "server") {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       ServerScreen,
       {
         initialValue: editingServer?.serverUrl,
@@ -1712,7 +1864,7 @@ function App({
     );
   }
   if (route === "login" && loginTarget) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       LoginScreen,
       {
         profile: loginTarget.profile,
@@ -1730,7 +1882,7 @@ function App({
     );
   }
   if (route === "profiles") {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       ProfileScreen,
       {
         profiles,
@@ -1743,7 +1895,7 @@ function App({
     );
   }
   if (route === "dashboard" && session) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       Dashboard,
       {
         preferences,
@@ -1754,41 +1906,41 @@ function App({
       }
     );
   }
-  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." }),
-    /* @__PURE__ */ jsx10(Footer, { text: "R \uB2E4\uC2DC \uC2DC\uB3C4 \xB7 Ctrl+Q \uC885\uB8CC" }),
-    /* @__PURE__ */ jsx10(RetryInput, { onRetry: () => void bootstrap() })
+  return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx11(Header, {}),
+    /* @__PURE__ */ jsx11(Notice, { error: true, children: error ?? "\uC54C \uC218 \uC5C6\uB294 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4." }),
+    /* @__PURE__ */ jsx11(Text11, { dimColor: true, children: "\uC11C\uBC84\uC640 \uD0A4\uCCB4\uC778 \uC0C1\uD0DC\uB97C \uD655\uC778\uD55C \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uC138\uC694." }),
+    /* @__PURE__ */ jsx11(Footer, { text: "R \uB2E4\uC2DC \uC2DC\uB3C4 \xB7 Ctrl+Q \uC885\uB8CC" }),
+    /* @__PURE__ */ jsx11(RetryInput, { onRetry: () => void bootstrap() })
   ] });
 }
 function RetryInput({ onRetry }) {
-  useInput9((input) => {
+  useInput10((input) => {
     if (input.toLowerCase() === "r") onRetry();
   });
   return null;
 }
 
 // src/tui/screen.ts
-var ESC2 = "\x1B";
-var ENTER_ALT_SCREEN = `${ESC2}[?1049h`;
-var LEAVE_ALT_SCREEN = `${ESC2}[?1049l`;
-var SHOW_CURSOR = `${ESC2}[?25h`;
+var ESC = "\x1B";
+var ENTER_ALT_SCREEN = `${ESC}[?1049h`;
+var LEAVE_ALT_SCREEN = `${ESC}[?1049l`;
+var SHOW_CURSOR = `${ESC}[?25h`;
 var DISABLE_REPORTS = [
-  `${ESC2}[?1004l`,
+  `${ESC}[?1004l`,
   // 포커스 들어옴/나감
-  `${ESC2}[?1000l`,
+  `${ESC}[?1000l`,
   // 마우스 클릭
-  `${ESC2}[?1002l`,
+  `${ESC}[?1002l`,
   // 마우스 드래그
-  `${ESC2}[?1003l`,
+  `${ESC}[?1003l`,
   // 마우스 이동 전부
-  `${ESC2}[?1006l`
+  `${ESC}[?1006l`
   // SGR 확장 좌표
 ].join("");
-var ENABLE_BRACKETED_PASTE = `${ESC2}[?2004h`;
-var DISABLE_BRACKETED_PASTE = `${ESC2}[?2004l`;
-var POP_KITTY_KEYBOARD = `${ESC2}[<u`;
+var ENABLE_BRACKETED_PASTE = `${ESC}[?2004h`;
+var DISABLE_BRACKETED_PASTE = `${ESC}[?2004l`;
+var POP_KITTY_KEYBOARD = `${ESC}[<u`;
 function createScreenGuard(stream, options = {}) {
   const alt = Boolean(stream.isTTY);
   let entered = false;
@@ -1841,8 +1993,133 @@ async function writePreferences(preferences, env = process.env) {
   }
 }
 
+// src/tui/kitty.ts
+var ESC2 = "\x1B";
+var QUERY = `${ESC2}[?u`;
+var KEY_CODES = {
+  57358: "capslock",
+  57449: "rightalt"
+};
+var CAPS_LOCK_BIT = 64;
+function parseKeyEvents(chunk) {
+  const events = [];
+  const pattern = /\u001B\[(\d+)(?::\d+)*(?:;(\d+)(?::(\d+))?)?(?:;[\d:]*)?u/g;
+  for (const match of chunk.matchAll(pattern)) {
+    const code = Number(match[1]);
+    const modifiers = match[2] ? Number(match[2]) - 1 : 0;
+    events.push({
+      name: KEY_CODES[code],
+      // eslint-disable-next-line no-bitwise
+      capsLock: (modifiers & CAPS_LOCK_BIT) !== 0,
+      eventType: match[3] ? Number(match[3]) : 1
+    });
+  }
+  return events;
+}
+function knownKittyTerminal(env = process.env) {
+  if (env.KITTY_WINDOW_ID) return true;
+  if (env.GHOSTTY_RESOURCES_DIR) return true;
+  const term = (env.TERM ?? "").toLowerCase();
+  if (term === "xterm-kitty" || term === "xterm-ghostty" || term.includes("foot")) return true;
+  const program = (env.TERM_PROGRAM ?? "").toLowerCase();
+  return program === "wezterm" || program === "ghostty" || program === "kitty";
+}
+async function supportsKittyKeyboard(streams, timeoutMs = 200, env = process.env) {
+  if (env.DEX_NO_KITTY === "1") return false;
+  if (!streams.stdout.isTTY || !streams.isTTY) return false;
+  if (knownKittyTerminal(env)) return true;
+  const wasRaw = streams.stdin.isRaw === true;
+  const wasPaused = !wasRaw;
+  streams.stdin.setRawMode?.(true);
+  streams.stdin.resume?.();
+  return new Promise((resolve) => {
+    let settled = false;
+    let seen = "";
+    const finish = (supported) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      streams.stdin.removeListener("data", onData);
+      if (!wasRaw) streams.stdin.setRawMode?.(false);
+      if (wasPaused) streams.stdin.pause?.();
+      resolve(supported);
+    };
+    const onData = (data) => {
+      seen += typeof data === "string" ? data : data.toString("utf8");
+      if (/\u001B\[\?\d*u/.test(seen)) finish(true);
+    };
+    const timer = setTimeout(() => finish(false), timeoutMs);
+    streams.stdin.on("data", onData);
+    streams.stdout.write(QUERY);
+  });
+}
+var KEY_EVENT = /\u001B\[([0-9]+)(?::[0-9:]*)?(?:;([0-9]*(?::[0-9]+)?))?(?:;([0-9:]+))?u/g;
+function normalizeKeyEvents(chunk) {
+  return chunk.replace(
+    KEY_EVENT,
+    (all, code, modifiers, text) => {
+      const hasAlternate = all.slice(0, all.indexOf(";") === -1 ? all.length : all.indexOf(";")).includes(":");
+      const needsModifier = modifiers !== void 0 && modifiers.length === 0;
+      if (!hasAlternate && !needsModifier) return all;
+      const mods = modifiers === void 0 ? void 0 : modifiers.length > 0 ? modifiers : "1";
+      const fields = [code, mods, text].filter((field) => field !== void 0).join(";");
+      return `\x1B[${fields}u`;
+    }
+  );
+}
+var PARTIAL_TAIL = /\u001B\[[0-9:;]*$/;
+var MAX_PARTIAL = 64;
+function createNormalizer() {
+  let pending = "";
+  return (chunk) => {
+    const combined = pending + chunk;
+    const match = PARTIAL_TAIL.exec(combined);
+    if (match && combined.length - match.index <= MAX_PARTIAL) {
+      pending = combined.slice(match.index);
+      return normalizeKeyEvents(combined.slice(0, match.index));
+    }
+    pending = "";
+    return normalizeKeyEvents(combined);
+  };
+}
+function normalizedStdin(stdin2, onSpecialKey) {
+  const normalize = createNormalizer();
+  return new Proxy(stdin2, {
+    get(target, property, receiver) {
+      if (property === "read") {
+        return (...args) => {
+          const chunk = target.read(...args);
+          if (chunk === null || chunk === void 0) return null;
+          const text = typeof chunk === "string" ? chunk : String(chunk);
+          if (onSpecialKey) {
+            for (const event of parseKeyEvents(text)) {
+              if (event.name && event.eventType === 1) onSpecialKey(event.name);
+            }
+          }
+          return normalize(text);
+        };
+      }
+      void receiver;
+      const value = Reflect.get(target, property, target);
+      return typeof value === "function" ? value.bind(target) : value;
+    }
+  });
+}
+function createKeySignal() {
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    notify(name) {
+      for (const listener of listeners) listener(name);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => void listeners.delete(listener);
+    }
+  };
+}
+
 // src/tui/index.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 async function runTui(engine) {
   let screen = createScreenGuard(stdout);
   const restore = () => screen.restore();
@@ -1856,22 +2133,31 @@ async function runTui(engine) {
   const preferences = await readPreferences();
   const kitty = await supportsKittyKeyboard({ stdin, stdout, isTTY: stdin.isTTY });
   screen = createScreenGuard(stdout, { kittyKeyboard: kitty });
+  const modeKeys = createKeySignal();
   screen.enter();
   try {
     const instance = render(
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         App,
         {
           engine,
           preferences: {
             hangulMode: preferences.hangulMode,
-            onHangulModeChange: (enabled) => void writePreferences({ hangulMode: enabled })
+            onHangulModeChange: (enabled) => void writePreferences({ hangulMode: enabled }),
+            onModeKey: modeKeys.subscribe
           }
         }
       ),
       {
         exitOnCtrlC: true,
         patchConsole: true,
+        // 프로토콜을 켜면 kitty 가 ink 이 못 읽는 모양으로 키를 보낸다 — 사이에서
+        // 고쳐 넘기지 않으면 글자가 하나도 입력되지 않는다.
+        ...kitty ? {
+          stdin: normalizedStdin(stdin, (name) => {
+            if (name === "rightalt" || name === "capslock") modeKeys.notify(name);
+          })
+        } : {},
         // 모든 키를 이스케이프로 받아야 한/영 키(오른쪽 Alt)와 Caps Lock 이 사건으로
         // 온다. 그런데 그렇게만 켜면 터미널이 **글쇠 코드만** 보내서 Shift+r 이
         // 소문자 `r` 로 도착한다 — 된소리도 영문 대문자도 사라진다. 그래서 글자까지
@@ -1899,4 +2185,4 @@ async function runTui(engine) {
 export {
   runTui
 };
-//# sourceMappingURL=tui-H3VM2MGV.js.map
+//# sourceMappingURL=tui-WG5AIWUR.js.map