@jun133/kitty 0.0.7 → 0.0.9

package/README.md

@@ -14,13 +14,20 @@
   <img alt="agent" src="https://img.shields.io/badge/mode-agent-7c3aed">
 </p>
 
-小猫智能体是给本地代码仓库使用的 agent harness。
-
-它把模型、工具、上下文、会话、变更记录和验证事实收进一个稳定的本地编程体验里，让长任务可以被推进、保存、恢复和继续。
-
-## ✨ 为什么是小猫智能体
-
-小猫智能体的核心体验很明确：
+小猫智能体是给本地代码仓库使用的 agent harness。
+
+它把模型、工具、上下文、会话、变更记录和验证事实收进一个稳定的本地编程体验里，让长任务可以被推进、保存、恢复和继续。
+
+它的主线不是自我改造，而是把本地 coding agent 做成可恢复、可验收、省钱的执行系统：
+
+- 本地执行内核：聊天只是入口，session、workset、execution、events、memory 和 status 才是任务现场。
+- 生产现场：`kitty status` 把当前目标、下一步、阻塞、后台、成本、恢复、skill 和 memory 汇成一眼可读的现场。
+- Cost Kernel：即使只用一个模型，也通过稳定前缀、易变尾部、大内容压缩、按需 skill 和 cache usage 审阅来省 token。
+- 产品级验收合同：`kitty eval` 验证真实用户路径，而不是只证明模块能 import。
+
+## ✨ 为什么是小猫智能体
+
+小猫智能体的核心体验很明确：
 
 - 🧭 一个 agent 主循环负责推进任务。
 - 🛠️ 四个 core 工具完成基础编程闭环。
@@ -37,14 +44,15 @@
 | 💾 Session | 会话记录、checkpoint、todo、工作集、恢复现场、结构化可审阅 memory assets |
 | 🗺️ Project Map | 目录、入口、脚本、测试、仓库文档和 git 事实进入短项目地图 |
 | 🔌 Provider | OpenAI-compatible provider、请求恢复、连接诊断 |
-| ❄️ 缓存与省钱 | 读取 provider usage 里的缓存命中事实，记录 cache hit / miss / read / write，展示稳定前缀指纹和最近请求命中状态 |
+| ❄️ Cost Kernel | 稳定前缀和易变尾部分离，大输出压缩，skill 默认只给索引，读取 provider usage 里的 cache hit / miss / read / write，status 显示稳定比例和最近请求命中状态 |
 | 🛠️ Core tools | `read`、`edit`、`write`、`bash` |
 | 🧩 Extensions | `todo`、`worktree`、`network`、`background`、`subagent`、`skills` |
 | 🧾 Control plane | SQLite 账本记录 task lifecycle、execution、deadline、输出健康、wait policy、pid、状态和 wake 事实；host 负责等待和恢复 lead |
+| 🧯 Production scene | `status` 把 session、background、subagent、memory、skills、cache、wake 和失败边界投影成当前现场、下一步和阻塞原因 |
 | 📋 Plan 工作流 | `plan.md` 是当前任务总管，配合 plan skill 管理需求、事实、失败测试、目标、设计、任务、验证和收口 |
 | 💬 产品面 | CLI、交互终端、Telegram 私聊服务 |
 | 📎 证据记录 | session events、终端日志、崩溃记录、文件变更记录 |
-| 🧪 Evaluation | `kitty eval` 只暴露机器检查，`--run` 会跑本地检查闭环 |
+| 🧪 Evaluation | `kitty eval` 暴露产品验收场景，`--run` 会跑本地可验证检查闭环 |
 
 ## ⚡ 快速开始
 
@@ -61,15 +69,43 @@ npm.cmd run build
 kitty init
 ```
 
-启动交互式 agent：
-
-```bash
-kitty
-```
-
-如果已有会话，`kitty` 会先显示最近会话列表：输入 `1` 继续最近会话，输入 `0` 新建会话。没有历史会话时会直接新建。会话标题由模型在第一次真实对话完成后生成，后续保持稳定。
+启动交互式 agent：
+
+```bash
+kitty
+```
 
-执行一次明确任务：
+如果已有会话，`kitty` 会先显示最近会话列表：输入 `1` 继续最近会话，输入 `0` 新建会话。没有历史会话时会直接新建。会话标题由模型在第一次真实对话完成后生成，后续保持稳定。
+
+启动 Ink TUI：
+
+```bash
+kitty tui
+node dist/cli.js tui
+```
+
+TUI 是可替换的终端壳层，复用同一套 session、driver、工具和斜杠命令。主区显示用户输入、thinking 和回复；工具、后台任务、subagent 和上下文占用在底部现场区呈现，不灌进主对话区。按键：`Enter` 发送，`Ctrl+J` 换行，`PageUp` / `PageDown` 滚动，`Home` / `End` 跳到顶部 / 底部，鼠标滚轮滚动，`Ctrl+C` 中断当前轮。
+
+交互模式支持本地斜杠命令。斜杠命令直接读取本地现场，不发送给模型：
+
+| 斜杠命令 | 用途 |
+| --- | --- |
+| `/help` | 查看当前可用斜杠命令 |
+| `/status` | 查看当前项目现场 |
+| `/background`、`/bg` | 查看后台任务现场 |
+| `/memory` | 查看 runtime memory assets |
+| `/skills` | 查看 runtime skills 健康状态 |
+| `/events` | 查看当前 session 最近事件 |
+| `/doctor` | 运行本地配置 preflight |
+| `/sessions` | 查看最近会话 |
+| `/session` | 查看当前 session id |
+| `/copy` | 打印当前 session 对话文本 |
+| `/export` | 打印当前 session JSON 快照 |
+| `/clear` | 清空 UI shell 的当前输入语义 |
+| `/reset` | 清空当前项目运行状态并退出 |
+| `/exit`、`quit`、`q` | 退出当前会话 |
+
+执行一次明确任务：
 
 ```bash
 kitty "检查这个仓库并修复失败测试"
@@ -81,19 +117,20 @@ kitty "检查这个仓库并修复失败测试"
 | --- | --- |
 | `kitty` | 进入默认 agent 交互；有历史会话时先选择继续或新建，也可直接接收一次性 prompt |
 | `kitty agent` | 显式进入 agent 模式 |
+| `kitty tui` | 进入 Ink 终端工作台，支持主区滚动、底部输入和运行现场 |
 | `kitty background` | 查看后台任务；`wait <id>` 等待任务；`stop <id>` 停止任务 |
 | `kitty resume [sessionId]` | 恢复最近会话或指定会话 |
 | `kitty sessions` | 查看最近会话 |
 | `kitty events [sessionId]` | 查看最近会话或指定会话的机器事件 |
 | `kitty config show` | 查看从 `.kitty/.env` 解析出的当前运行配置 |
 | `kitty config path` | 查看当前项目 `.kitty/.env` 路径 |
-| `kitty status` | 查看当前项目现场：焦点、下一步、阻塞项、session、context budget、memory、skills、project map、execution、wake |
+| `kitty status` | 查看当前项目现场：当前目标、下一步、阻塞、后台、恢复、成本、session、context budget、memory、skills、project map、execution、wake |
 | `kitty memory` | 创建、查看、读取、搜索、删除 runtime memory assets，或把 memory 沉淀到 skill references |
 | `kitty changes` | 查看记录的文件变更 |
 | `kitty undo [changeId]` | 撤销最近一次或指定变更 |
 | `kitty diff [path]` | 查看当前 git diff |
 | `kitty doctor` | 检查 `.kitty` 文件、env contract、provider preset、runtime、provider 连接和下一步 |
-| `kitty eval` | 查看机器检查；`kitty eval --run` 运行本地机器验收 |
+| `kitty eval` | 查看产品验收场景；`kitty eval --run` 运行本地机器验收 |
 | `kitty telegram serve` | 启动 Telegram 私聊服务 |
 
 ## 🛠️ 工具体系
@@ -126,9 +163,11 @@ Runtime skills 放在项目 `SKILL.md`、`.skills/**/SKILL.md` 或 `skills/**/SK
 
 Provider 请求优先携带同 session 的近场可见对话。短会话不靠账本拼上下文；长会话超预算时摘要旧对话，保留最近对话 tail。Session memory 由模型在 turn 收口时按固定 Markdown 区块写出：`Current Focus`、`User Constraints`、`Decisions`、`Open Threads`、`Verification Facts`、`Reusable Lessons`。机器只维护格式和保存边界，不替模型判断事实重要性。
 
+Cost Kernel 的边界很硬：省钱不靠模型路由，不靠把能力关掉，而靠上下文结构。稳定内容放在前缀，易变事实放在尾部；大段工具输出和旧历史进入压缩摘要或证据资产；skill 正文、resources、examples 不默认注入，模型需要时再加载。
+
 Provider usage 会归一化缓存事实：DeepSeek 的 `prompt_cache_hit_tokens` / `prompt_cache_miss_tokens`，OpenAI 的 `prompt_tokens_details.cached_tokens`，Anthropic 的 `cache_read_input_tokens` / `cache_creation_input_tokens`，以及 Gemini cached content tokens。`model.request` observability 事件会记录这些字段，`kitty status` 会显示最近模型请求的缓存命中和 context cache layout。OpenAI 请求会使用同 session 稳定 `prompt_cache_key`；DeepSeek 不写无效 `cache_control`，优先保持稳定前缀和命中观测。
 
-`kitty eval --run` 包含 cache economy 检查：usage 字段解析、provider cache policy 和 stable prefix fingerprint 都必须能机器验证。真实省钱仍取决于 provider 是否返回 usage，以及同一 session 的前缀是否真的被上游缓存命中。
+`kitty eval` 是产品验收合同：每个场景都说明用户路径和机器证据。`kitty eval --run` 包含生产现场、恢复演练、远程入口、cache economy、skill/memory readiness 和失败边界检查。usage 字段解析、provider cache policy、stable prefix fingerprint、volatile tail、skill index boundary 和大输出压缩都必须能机器验证。真实省钱仍取决于 provider 是否返回 usage，以及同一 session 的前缀是否真的被上游缓存命中。
 
 Session workset 记录当前会话实际读过和改过的文件。`read` 成功后记录读取事实，`edit` / `write` 成功后记录变更事实和 change id。工作集会进入 session、working memory 和 `kitty status`，让用户看到当前任务真正碰过哪些文件。
 

package/dist/App-6FETP3LH.mjs

@@ -0,0 +1,521 @@
+import {
+  TRANSCRIPT_OUTER_PADDING_X,
+  TUI_COLORS,
+  renderTranscriptLineViews
+} from "./chunk-DFDOKON5.mjs";
+
+// src/shell/tui/layout.ts
+var TUI_MIN_WIDTH = 48;
+var TUI_MIN_HEIGHT = 14;
+var TUI_DOCK_ROWS = 2;
+var TUI_COMPOSER_MAX_ROWS = 6;
+var TUI_FOOTER_BORDER_TOP_ROWS = 1;
+var TUI_FOOTER_PADDING_X = 2;
+var TUI_FOOTER_PADDING_BOTTOM_ROWS = 1;
+var COMPOSER_VERTICAL_PADDING_ROWS = 2;
+function measureTuiFooterRows(composerRows) {
+  return TUI_FOOTER_BORDER_TOP_ROWS + TUI_DOCK_ROWS + COMPOSER_VERTICAL_PADDING_ROWS + normalizeComposerRows(composerRows) + TUI_FOOTER_PADDING_BOTTOM_ROWS;
+}
+function normalizeComposerRows(rows) {
+  return Math.max(1, Math.min(TUI_COMPOSER_MAX_ROWS, Math.floor(rows)));
+}
+
+// src/shell/tui/composerEditing.ts
+function applyComposerInput(state, input, key) {
+  if (key.return && (key.shift || key.ctrl)) {
+    return insertText(state, "\n");
+  }
+  if (key.return) {
+    return { kind: "submit", state: { cursor: 0, value: "" }, value: state.value };
+  }
+  if (key.ctrl && input.toLowerCase() === "a") {
+    return update({ ...state, cursor: 0 });
+  }
+  if (key.ctrl && input.toLowerCase() === "e") {
+    return update({ ...state, cursor: state.value.length });
+  }
+  if (key.ctrl && input.toLowerCase() === "u") {
+    return update({ cursor: 0, value: "" });
+  }
+  if (key.leftArrow) {
+    return update({ ...state, cursor: previousGraphemeOffset(state.value, state.cursor) });
+  }
+  if (key.rightArrow) {
+    return update({ ...state, cursor: nextGraphemeOffset(state.value, state.cursor) });
+  }
+  if (key.home) {
+    return update({ ...state, cursor: 0 });
+  }
+  if (key.end) {
+    return update({ ...state, cursor: state.value.length });
+  }
+  if (key.backspace || key.delete) {
+    if (state.cursor <= 0) {
+      return update(state);
+    }
+    const nextCursor = previousGraphemeOffset(state.value, state.cursor);
+    return update({
+      cursor: nextCursor,
+      value: state.value.slice(0, nextCursor) + state.value.slice(state.cursor)
+    });
+  }
+  if (key.tab) {
+    return insertText(state, "  ");
+  }
+  if (!key.ctrl && !key.meta && input) {
+    return insertText(state, normalizeTypedInput(input));
+  }
+  return update(state);
+}
+function insertText(state, text) {
+  if (!text) {
+    return update(state);
+  }
+  const value = state.value.slice(0, state.cursor) + text + state.value.slice(state.cursor);
+  return update({
+    cursor: state.cursor + text.length,
+    value
+  });
+}
+function normalizeTypedInput(input) {
+  return input.replace(/\r\n/g, "\n");
+}
+function update(state) {
+  return { kind: "update", state };
+}
+var graphemeSegmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
+function previousGraphemeOffset(value, cursor) {
+  if (cursor <= 0) {
+    return 0;
+  }
+  let previous = 0;
+  for (const segment of graphemeSegmenter.segment(value)) {
+    if (segment.index >= cursor) {
+      break;
+    }
+    previous = segment.index;
+  }
+  return previous;
+}
+function nextGraphemeOffset(value, cursor) {
+  if (cursor >= value.length) {
+    return value.length;
+  }
+  for (const segment of graphemeSegmenter.segment(value)) {
+    const end = segment.index + segment.segment.length;
+    if (end > cursor) {
+      return end;
+    }
+  }
+  return value.length;
+}
+
+// src/shell/tui/composerLayout.ts
+import stringWidth from "string-width";
+import wrapAnsi from "wrap-ansi";
+var COMPOSER_FRAME = {
+  gap: 2,
+  gutter: "\u2503",
+  paddingX: 2,
+  paddingY: 1,
+  tabWidth: 2
+};
+function measureComposerContentWidth(containerWidth) {
+  return Math.max(
+    1,
+    Math.floor(containerWidth) - COMPOSER_FRAME.paddingX * 2 - stringWidth(COMPOSER_FRAME.gutter) - COMPOSER_FRAME.gap
+  );
+}
+function measureComposerTextOrigin(metrics) {
+  if (!metrics.hasMeasured) {
+    return void 0;
+  }
+  return {
+    x: metrics.left,
+    y: metrics.top
+  };
+}
+function layoutComposer(input) {
+  const contentWidth = Math.max(1, Math.floor(input.contentWidth ?? input.frame.width));
+  const rows = wrapComposerRows(input.value, contentWidth);
+  const visibleRows = normalizeComposerRows(rows.length);
+  const visibleStart = Math.max(0, rows.length - visibleRows);
+  const visible = rows.slice(visibleStart);
+  const origin = measureComposerTextOrigin(input.frame);
+  const cursor = origin ? measureComposerCursor({
+    contentWidth,
+    cursor: input.cursor,
+    origin,
+    rows,
+    visibleStart,
+    value: input.value
+  }) : void 0;
+  const cursorCell = measureComposerCursorCell({
+    contentWidth,
+    cursor: input.cursor,
+    rows,
+    visibleStart,
+    value: input.value
+  });
+  return {
+    contentWidth,
+    cursor,
+    cursorCell,
+    rows: visible,
+    visibleRows
+  };
+}
+function composeInkCursorPosition(input) {
+  if (!input.cell || !input.rowFrame.hasMeasured) {
+    return input.fallback ? shiftInkCursorRow(input.fallback) : void 0;
+  }
+  return {
+    x: input.rowFrame.left + input.cell.x,
+    y: input.rowFrame.top + 1
+  };
+}
+function measureComposerCursor(input) {
+  const cell = measureComposerCursorCell(input);
+  return {
+    x: input.origin.x + cell.x,
+    y: input.origin.y + cell.y
+  };
+}
+function measureComposerCursorCell(input) {
+  const beforeCursor = input.value.slice(0, Math.max(0, Math.min(input.cursor, input.value.length)));
+  const rowsBeforeCursor = wrapComposerRows(beforeCursor, input.contentWidth);
+  const cursorRow = Math.max(0, rowsBeforeCursor.length - 1);
+  const cursorVisibleRow = Math.max(0, cursorRow - input.visibleStart);
+  const cursorLine = rowsBeforeCursor.at(-1) ?? "";
+  return {
+    x: Math.min(stringWidth(cursorLine), input.contentWidth),
+    y: cursorVisibleRow
+  };
+}
+function shiftInkCursorRow(position) {
+  return {
+    x: position.x,
+    y: position.y + 1
+  };
+}
+function wrapComposerRows(value, width) {
+  const text = value || "";
+  const rows = text.split(/\r?\n/).flatMap((line) => {
+    const wrapped = wrapAnsi(line, width, { hard: true, trim: false });
+    return wrapped.split(/\r?\n/).map((row) => row.trim() ? row : "");
+  });
+  return rows.length > 0 ? rows : [""];
+}
+
+// src/shell/tui/inkGeometry.ts
+function measureAbsoluteBox(node) {
+  if (!node?.yogaNode) {
+    return {
+      hasMeasured: false,
+      left: 0,
+      top: 0,
+      width: 0
+    };
+  }
+  let left = 0;
+  let top = 0;
+  let current = node;
+  while (current?.yogaNode) {
+    const layout = current.yogaNode.getComputedLayout();
+    left += layout.left;
+    top += layout.top;
+    current = current.parentNode;
+  }
+  return {
+    hasMeasured: true,
+    left,
+    top,
+    width: node.yogaNode.getComputedLayout().width
+  };
+}
+
+// src/shell/tui/components/Composer.ts
+function createComposerComponent(kit) {
+  const { React, Box, Text, useCursor, useInput } = kit;
+  return function Composer(props) {
+    const [draft, setDraft] = React.useState({ cursor: 0, value: "" });
+    const contentRef = React.useRef(null);
+    const cursorRowRef = React.useRef(null);
+    const [measuredFrame, setMeasuredFrame] = React.useState({
+      hasMeasured: false,
+      left: 0,
+      top: 0,
+      width: props.frame.width
+    });
+    const [measuredCursorRow, setMeasuredCursorRow] = React.useState({
+      hasMeasured: false,
+      left: 0,
+      top: 0,
+      width: props.frame.width
+    });
+    React.useEffect(() => {
+      const next = measureAbsoluteBox(contentRef.current);
+      setMeasuredFrame((previous) => previous.hasMeasured === next.hasMeasured && previous.left === next.left && previous.top === next.top && previous.width === next.width ? previous : next);
+      const nextCursorRow = measureAbsoluteBox(cursorRowRef.current);
+      setMeasuredCursorRow((previous) => previous.hasMeasured === nextCursorRow.hasMeasured && previous.left === nextCursorRow.left && previous.top === nextCursorRow.top && previous.width === nextCursorRow.width ? previous : nextCursorRow);
+    });
+    const contentWidth = measuredFrame.hasMeasured ? measuredFrame.width : measureComposerContentWidth(props.frame.width);
+    const layout = layoutComposer({
+      contentWidth,
+      cursor: draft.cursor,
+      frame: measuredFrame.hasMeasured ? measuredFrame : props.frame,
+      value: draft.value
+    });
+    const { setCursorPosition } = useCursor();
+    const cursorPosition = composeInkCursorPosition({
+      cell: layout.cursorCell,
+      fallback: layout.cursor,
+      rowFrame: measuredCursorRow
+    });
+    React.useEffect(() => {
+      props.controller.updateComposerVisibleRows(layout.visibleRows);
+    }, [props.controller, layout.visibleRows]);
+    setCursorPosition(cursorPosition);
+    useInput((input, key) => {
+      const action = applyComposerInput(draft, input, key);
+      setDraft(action.state);
+      if (action.kind === "submit") {
+        props.controller.submitInput(action.value);
+      }
+    });
+    return React.createElement(
+      Box,
+      {
+        flexDirection: "row",
+        backgroundColor: TUI_COLORS.panelStrong,
+        paddingX: COMPOSER_FRAME.paddingX,
+        paddingY: COMPOSER_FRAME.paddingY,
+        minHeight: 3,
+        width: "100%"
+      },
+      React.createElement(Text, { color: TUI_COLORS.user, wrap: "truncate-end" }, COMPOSER_FRAME.gutter),
+      React.createElement(
+        Box,
+        {
+          flexDirection: "column",
+          ref: contentRef,
+          width: layout.contentWidth,
+          marginLeft: COMPOSER_FRAME.gap
+        },
+        ...draft.value ? layout.rows.map((row, index) => React.createElement(
+          Box,
+          {
+            key: index,
+            ref: layout.cursorCell?.y === index ? cursorRowRef : void 0,
+            height: 1,
+            width: layout.contentWidth
+          },
+          React.createElement(
+            Text,
+            { color: TUI_COLORS.text, wrap: "truncate-end" },
+            row || " "
+          )
+        )) : [React.createElement(
+          Box,
+          {
+            key: "placeholder",
+            ref: cursorRowRef,
+            height: 1,
+            width: layout.contentWidth
+          },
+          React.createElement(
+            Text,
+            { color: TUI_COLORS.muted, wrap: "truncate-end" },
+            "\u8F93\u5165\u6D88\u606F"
+          )
+        )]
+      )
+    );
+  };
+}
+
+// src/shell/tui/components/RuntimeDock.ts
+function createRuntimeDockComponent(kit) {
+  const { React, Box, Text } = kit;
+  return function RuntimeDock(props) {
+    return React.createElement(
+      Box,
+      {
+        flexDirection: "column",
+        width: "100%"
+      },
+      React.createElement(
+        Box,
+        { flexDirection: "row" },
+        props.dock.work.active ? React.createElement(Text, { color: TUI_COLORS.user }, "\u25A3 ") : null,
+        React.createElement(Text, { color: props.dock.work.active ? TUI_COLORS.user : TUI_COLORS.muted }, props.dock.work.label),
+        React.createElement(Text, { color: TUI_COLORS.muted }, " \xB7 "),
+        React.createElement(Text, { color: props.dock.work.active ? TUI_COLORS.text : TUI_COLORS.muted }, props.dock.work.detail)
+      ),
+      React.createElement(
+        Box,
+        { marginTop: 0 },
+        null,
+        React.createElement(Text, { color: TUI_COLORS.muted }, "\u540E\u53F0\u4EFB\u52A1 "),
+        React.createElement(Text, { color: readFactColor(props.dock.background) }, props.dock.background),
+        React.createElement(Text, { color: TUI_COLORS.muted }, "   "),
+        React.createElement(Text, { color: TUI_COLORS.muted }, "\u5B50\u4EE3\u7406 "),
+        React.createElement(Text, { color: readFactColor(props.dock.subagent) }, props.dock.subagent),
+        React.createElement(Text, { color: TUI_COLORS.muted }, "   "),
+        React.createElement(Text, { color: TUI_COLORS.muted }, "\u4E0A\u4E0B\u6587 "),
+        React.createElement(Text, { color: TUI_COLORS.text }, props.dock.context)
+      )
+    );
+  };
+}
+function readFactColor(value) {
+  if (value.includes("\u5931\u8D25") || value.includes("\u9519\u8BEF") || value.includes("\u5361\u4F4F")) {
+    return TUI_COLORS.error;
+  }
+  if (value.includes("\u8FD0\u884C") || value.includes("\u7B49\u5F85") || value.includes("\u6267\u884C")) {
+    return TUI_COLORS.warning;
+  }
+  if (value.includes("\u5B8C\u6210")) {
+    return TUI_COLORS.success;
+  }
+  return TUI_COLORS.muted;
+}
+
+// src/shell/tui/components/Transcript.ts
+function createTranscriptComponent(kit) {
+  const { React, Box, Text } = kit;
+  return function Transcript(props) {
+    const rows = renderTranscriptLineViews(props.state.transcript, props.viewport.width).slice(props.state.scroll.offset, props.state.scroll.offset + props.viewport.height);
+    return React.createElement(
+      Box,
+      {
+        flexDirection: "column",
+        width: "100%",
+        height: props.viewport.height,
+        overflow: "hidden",
+        backgroundColor: TUI_COLORS.background,
+        paddingX: TRANSCRIPT_OUTER_PADDING_X
+      },
+      ...rows.map((row) => renderTranscriptLine(React, Box, Text, row)),
+      props.state.scroll.newContentPending ? React.createElement(Text, { color: TUI_COLORS.warning }, "\u6709\u65B0\u5185\u5BB9\uFF0C\u6309 End \u56DE\u5230\u5E95\u90E8") : null
+    );
+  };
+}
+function renderTranscriptLine(React, Box, Text, row) {
+  if (row.kind === "spacer") {
+    return React.createElement(Box, { key: row.id, height: 1 });
+  }
+  return React.createElement(
+    Box,
+    {
+      key: row.id,
+      flexDirection: "row",
+      width: "100%",
+      height: 1,
+      backgroundColor: row.style.background,
+      marginLeft: row.frame.marginLeft,
+      paddingLeft: row.frame.paddingLeft,
+      paddingRight: row.frame.paddingRight
+    },
+    React.createElement(Text, { color: row.style.accent, wrap: "truncate-end" }, row.frame.gutter),
+    React.createElement(
+      Box,
+      { width: row.frame.bodyWidth, marginLeft: row.frame.gap },
+      row.prefix ? React.createElement(
+        Text,
+        { color: row.style.text, wrap: "truncate-end" },
+        React.createElement(Text, { color: TUI_COLORS.thought, italic: row.style.italicPrefix, wrap: "truncate-end" }, row.prefix),
+        row.text
+      ) : React.createElement(Text, {
+        color: row.style.text,
+        bold: row.style.bold,
+        dimColor: row.style.dim,
+        wrap: "truncate-end"
+      }, row.text)
+    )
+  );
+}
+
+// src/shell/tui/components/App.ts
+function createTuiAppComponent(kit) {
+  const { React, Box, useInput, useStdout } = kit;
+  const Composer = createComposerComponent(kit);
+  const RuntimeDock = createRuntimeDockComponent(kit);
+  const Transcript = createTranscriptComponent(kit);
+  return function TuiApp(props) {
+    const state = useTuiState(React, props.controller);
+    const { stdout } = useStdout();
+    const width = Math.max(TUI_MIN_WIDTH, stdout.columns ?? 80);
+    const height = Math.max(TUI_MIN_HEIGHT, stdout.rows ?? 24);
+    const footerRows = measureTuiFooterRows(state.composer.visibleRows);
+    const transcriptViewport = React.useMemo(() => ({
+      width,
+      height: Math.max(1, height - footerRows)
+    }), [footerRows, height, width]);
+    const composerFrame = React.useMemo(() => ({
+      hasMeasured: false,
+      left: 0,
+      top: 0,
+      width: Math.max(1, width - TUI_FOOTER_PADDING_X * 2)
+    }), [transcriptViewport.height, width]);
+    React.useEffect(() => {
+      props.controller.setViewport(transcriptViewport);
+    }, [props.controller, transcriptViewport]);
+    React.useEffect(() => {
+      const disableMouse = props.enableMouseTracking();
+      return () => {
+        disableMouse();
+      };
+    }, [props.enableMouseTracking]);
+    useInput((input, key) => {
+      if (key.ctrl && input === "c") {
+        props.controller.interrupt();
+      } else if (key.pageUp) {
+        props.controller.pageUp();
+      } else if (key.pageDown) {
+        props.controller.pageDown();
+      } else if (key.home) {
+        props.controller.scrollTop();
+      } else if (key.end) {
+        props.controller.scrollBottom();
+      }
+    });
+    return React.createElement(
+      Box,
+      { flexDirection: "column", width, height },
+      React.createElement(Transcript, { state, viewport: transcriptViewport }),
+      React.createElement(
+        Box,
+        {
+          flexDirection: "column",
+          borderStyle: "single",
+          borderTop: true,
+          borderBottom: false,
+          borderLeft: false,
+          borderRight: false,
+          borderColor: TUI_COLORS.border,
+          backgroundColor: TUI_COLORS.panel,
+          paddingX: TUI_FOOTER_PADDING_X,
+          paddingBottom: TUI_FOOTER_PADDING_BOTTOM_ROWS,
+          width: "100%"
+        },
+        React.createElement(RuntimeDock, { dock: state.dock }),
+        React.createElement(Composer, {
+          controller: props.controller,
+          frame: composerFrame,
+          state
+        })
+      )
+    );
+  };
+}
+function useTuiState(React, controller) {
+  return React.useSyncExternalStore(
+    (listener) => controller.subscribe(listener),
+    () => controller.getState(),
+    () => controller.getState()
+  );
+}
+export {
+  createTuiAppComponent
+};