Agent skill

Knowledge Interaction Surfaces Terminal UI

by echoVic in echoVic/blade-code

覆盖 Blade React + Ink TUI 的初始化、输入协议、消息与工具渲染、确认队列、Session 切换、流式缓冲和 Runtime 清理。进入时机:修改终端键盘行为、粘贴、Ctrl+C、审批与 问答、流式输出、Static 布局、会话恢复或 slash command 展示。

MITAuto-check passedAgent Workflows

Install Knowledge Interaction Surfaces Terminal UI

skills CLI
$ npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-terminal-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install echoVic/blade-code knowledge-interaction-surfaces-terminal-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/echoVic/blade-code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.trae/knowledges/interaction-surfaces/terminal-ui .claude/skills/knowledge-interaction-surfaces-terminal-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
knowledge-interaction-surfaces-terminal-ui
GitHub stars
181
Token cost
~1.5k tokens
SKILL.md length
374 words
Files
1
Skills in repo
38
Repo updated
First seen
Licence
MIT

At a glance

覆盖 Blade React + Ink TUI 的初始化、输入协议、消息与工具渲染、确认队列、Session 切换、流式缓冲和 Runtime 清理。进入时机:修改终端键盘行为、粘贴、Ctrl+C、审批与 问答、流式输出、Static 布局、会话恢复或 slash command 展示。

  • Tasks that involve Hooks and plugins
  • SKILL.md covers Module Structure, Gotchas, Architecture and Decisions, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Knowledge Interaction Surfaces Terminal UI is an agent skill from echoVic/blade-code. 覆盖 Blade React + Ink TUI 的初始化、输入协议、消息与工具渲染、确认队列、Session 切换、流式缓冲和 Runtime 清理。进入时机:修改终端键盘行为、粘贴、Ctrl+C、审批与 问答、流式输出、Static 布局、会话恢复或 slash command 展示。 不包含:Headless/Print 输出(见 ../cli-bootstrap-headless-and-print/)、Web React 状态(见 ../web-client/)。 关键词:AppWrapper, BladeInterface, MessageArea, useCommandHandler, useAgent, useConfirmation, parseTerminalInput, Static, rawStreamRenderer。

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Agent Workflows, covering Hooks and plugins. It works with React. The repository describes itself as: AI-powered CLI coding agent with 20+ built-in tools, MCP support, and multi-model providers. The licence is MIT.

When your agent uses it

  • Tasks that involve Hooks and plugins

Example prompts

  • “/knowledge-interaction-surfaces-terminal-ui”

What it can do on your machine

Read from SKILL.md and the folder at commit 30f8684. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Knowledge Interaction Surfaces Terminal UI loads about 1.5k tokens when it runs. Until then it costs about 105 tokens; SKILL.md has 374 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~105
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from echoVic/blade-code at commit 30f8684, republished under its MIT licence (© echoVic). 374 words, ~1,536 tokens.

Download SKILL.mdSave it as .claude/skills/knowledge-interaction-surfaces-terminal-ui/SKILL.md (or your agent's skills folder).
name
knowledge-interaction-surfaces-terminal-ui
description
覆盖 Blade React + Ink TUI 的初始化、输入协议、消息与工具渲染、确认队列、Session 切换、流式缓冲和 Runtime 清理。进入时机:修改终端键盘行为、粘贴、Ctrl+C、审批与 问答、流式输出、Static 布局、会话恢复或 slash command 展示。 不包含:Headless/Print 输出(见 ../cli-bootstrap-headless-and-print/)、Web React 状态(见 ../web-client/)。 关键词:AppWrapper, BladeInterface, MessageArea, useCommandHandler, useAgent, useConfirmation, parseTerminalInput, Static, rawStreamRenderer。

Module Structure

TUI 以单个 vanilla Zustand Store 投影当前 Session,React Hook 只持有活动 Agent/Runtime 和输入交互生命周期;durable 消息、权限模式与恢复数据仍由 Session 服务管理。

Directory Layout
  • packages/cli/src/ui/App.tsx — 版本提示、Workspace Trust、资源与 Hook 初始化
  • packages/cli/src/ui/components/BladeInterface.tsx — 主界面、阻塞弹窗与 Session 启动路由
  • packages/cli/src/ui/components/MessageArea.tsx — 单 Static 根、流式块和 raw tail 渲染
  • packages/cli/src/ui/components/ — 输入、确认、问答、状态和工具展示组件
  • packages/cli/src/ui/hooks/ — Agent、命令、输入、确认、Ctrl+C 与缓冲生命周期
  • packages/cli/src/ui/input/terminalInput.ts — bracketed paste 与终端控制序列解析
  • packages/cli/src/ui/utils/ — LoopEvent 投影、Session 激活、Markdown 和工具格式化
  • packages/cli/src/store/ — React 与非 React 代码共享的当前进程状态
  • packages/cli/src/slash-commands/ — TUI 内置与自定义命令路由
Key Entry Points
  • AppWrapper in packages/cli/src/ui/App.tsx — 完成信任判断后挂载主界面
  • BladeInterface in packages/cli/src/ui/components/BladeInterface.tsx — 组合输入、弹窗、消息与状态区
  • useCommandHandler() in packages/cli/src/ui/hooks/useCommandHandler.ts — 单轮命令、取消和恢复编排
  • useAgent() in packages/cli/src/ui/hooks/useAgent.ts — Agent/SessionRuntime 的唯一 React 所有者
  • createLoopEventHandler() in packages/cli/src/ui/utils/loopEventHandler.ts — LoopEvent 到 TUI Store 的投影

Gotchas

  • 取消顺序不可交换:先 dismissAll() 释放阻塞审批,再排空流式缓冲,再 abort,最后 finalize;先 abort 会把审批拒绝误判为普通 permission denial,晚到 stream_end 还可能重复提交 (packages/cli/src/ui/hooks/useCommandHandler.ts, packages/cli/src/ui/hooks/useConfirmation.ts)
  • createAbortController() 会主动中止并替换已有 controller;命令下层必须复用外层 controller,否则 finally 的所有权检查失败并让 isProcessing 永久卡住 (packages/cli/src/ui/hooks/useCommandHandler.ts, packages/cli/src/store/slices/commandSlice.ts)
  • MessageArea 只能有一个 Ink Static 根;条件挂载第二个 Static 曾让 Ink 保留已释放 Yoga 节点并在后续 commit 崩溃 (packages/cli/src/ui/components/MessageArea.tsx, docs/testing/tui-single-static-root-ownership-evidence.md, git:c68977b7)
  • 高频 Markdown tail 绕过 React 直接写 stdout;在 Static 增长、finalize、清屏、resize 或历史展开前必须先清理 raw renderer,否则终端会残留或错位 (packages/cli/src/ui/components/MessageArea.tsx, packages/cli/src/ui/utils/rawStreamRenderer.ts)
  • clearCount 是 Static 的唯一强制重挂边界,finalize 时还必须先 eraseScreen + cursorTo(0,0);仅清屏不归位会在顶部留下大段空白 (packages/cli/src/ui/components/MessageArea.tsx)
  • 一次 stdin 回调可能是完整 IME 文本或批量自动化输入,不能逐字符假设;bracketed paste marker 还可能被 Ink 去掉 ESC 或跨 chunk 到达 (packages/cli/src/ui/input/terminalInput.ts, docs/reference/tui-terminal-input.md)
  • 未闭合 paste 会留在 parser buffer,超过消息字符预算后一直丢弃到 end marker;不要把半段 paste 当普通输入提交 (packages/cli/src/ui/input/terminalInput.ts)
  • 第一次 Ctrl+C 在执行中只取消任务并显示二次退出提示,3 秒内第二次才走 GracefulShutdown;直接恢复 Ink 的默认 exitOnCtrlC 会跳过资源释放 (packages/cli/src/ui/hooks/useCtrlCHandler.ts, packages/cli/src/blade.tsx)
  • Session 激活必须先完成 fork/load 和 UI-safe 转换,再 cleanupAgent(),最后一次性恢复新 Store;清理失败时不能提前切换界面身份 (packages/cli/src/ui/utils/sessionActivation.ts)
  • fork 提示是 UI-only assistant message,不进入恢复的 model context;把 visible messages 重建为上下文会污染后续模型输入 (packages/cli/src/ui/utils/sessionActivation.ts, packages/cli/src/ui/utils/sessionContext.ts)
  • 阻塞弹窗通过 display="none" 隐藏主界面而不卸载,目的是保留 Static 和输入状态;改成条件卸载会重复打印历史并丢失输入组件状态 (packages/cli/src/ui/components/BladeInterface.tsx)
Show full SKILL.md (162 more words)Show less

Architecture

  • AppWrapper 先处理版本提示和 Workspace Trust,再解析可信资源与 Hooks;选择“安全继续”只跳过信任授予,不跳过应用初始化 (packages/cli/src/ui/App.tsx)
  • useAgent 同时拥有 Agent 和 SessionRuntime 引用;Session ID 或 workspace 改变时先幂等销毁旧 Agent,再 dispose 整个 Runtime 边界 (packages/cli/src/ui/hooks/useAgent.ts, git:959149a8)
  • TUI Store 不做持久化:会话写入 JSONL、配置写入 ConfigService;Store 只保存当前进程投影和渲染缓冲 (packages/cli/src/store/vanilla.ts)
  • createLoopEventHandler 为每轮创建闭包,以 streamFinalized 隔离 abort、fallback 和正常 stream_end;跨轮复用 handler 会让上一轮终态污染下一轮 (packages/cli/src/ui/utils/loopEventHandler.ts)
  • 流式内容有 Hook 层批缓冲、Store 外模块级 chunks、Markdown 增量缓存和 raw tail 四层状态,正常结束与取消都必须按所有权逐层排空或丢弃 (packages/cli/src/ui/hooks/useStreamingBuffer.ts, packages/cli/src/store/slices/sessionSlice.ts, packages/cli/src/ui/utils/markdownIncremental.ts)
  • Confirmation Hook 把请求串成单活动项队列,并为每项绑定 AbortSignal;工具执行并不直接依赖某个具体 Ink 组件 (packages/cli/src/ui/hooks/useConfirmation.ts)

Decisions

  • React 与 Agent/工具共享 vanilla Zustand 实例,但只暴露 actions 和 selectors,以避免非 React 路径另建状态源 (packages/cli/src/store/vanilla.ts, packages/cli/src/store/selectors/index.ts)
  • 已完成历史使用 Ink Static,最高频 tail 使用 raw renderer,是为兼顾原生 scrollback 与流式性能;这两条路径通过 message ID 和 finalize 标记去重 (packages/cli/src/ui/components/MessageArea.tsx)
  • TUI 启用 bracketed paste 并显式关闭 focus reporting,退出时重复恢复终端模式,避免异常关闭把宿主 shell 留在特殊输入状态 (packages/cli/src/ui/hooks/useTerminalInputModes.ts, docs/reference/tui-terminal-input.md)

Patterns

  • Session 级模型、reasoning、service tier、verbosity 和 communication style 都先刷新 Runtime、再持久化 metadata;持久化失败会回滚 Runtime,避免界面与重启状态分叉 (packages/cli/src/ui/hooks/useAgent.ts)
  • 恢复 Session 时同时保存 UI-safe messages 与原始 model context,后续只把恢复边界后的新 UI 消息追加到原始上下文 (packages/cli/src/store/slices/sessionSlice.ts, packages/cli/src/ui/utils/sessionContext.ts)
  • 用户输入在 slash command、Hook 改写和 Agent 输入之间保留不同表示:Hook 可改写模型输入,但不能回写已经提交的用户可见消息 (packages/cli/src/ui/hooks/useCommandHandler.ts)
  • 工具进度、Provider 恢复和 MCP 事件通过统一 LoopEvent handler 投影;新增事件必须保持 exhaustive switch,并避免把结构化输出保留工具渲染成普通工具卡 (packages/cli/src/ui/utils/loopEventHandler.ts)
  • 主题、权限、Session 选择等弹窗共享焦点状态,主输入仅在没有阻塞弹窗时接管键盘;组件自己的 useInput 必须检查对应 FocusId (packages/cli/src/ui/components/BladeInterface.tsx, packages/cli/src/ui/components/ConfirmationPrompt.tsx)

Dependencies

  • TUI 使用 React、Ink、Yoga 与 Zustand;ink-text-input 只处理编辑行为,终端 framing 和批量输入由项目自己的 parser 补齐 (packages/cli/src/ui/components/CustomTextInput.tsx, packages/cli/src/ui/input/terminalInput.ts)

© echoVic, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .trae/knowledges/interaction-surfaces/terminal-ui of echoVic/blade-code.

Open the folder on GitHubat commit 30f8684

Compare with similar skills

Knowledge Interaction Surfaces Terminal UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Knowledge Interaction Surfaces Terminal UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Knowledge Interaction Surfaces Terminal UI this skillechoVic/blade-code181—~1.5kAutomated safety check: PassMIT
Plate Plugin Creatorudecode/plate17k—~2.3kAutomated safety check: PassCustom licence
Creating Modsletta-ai/letta-code3.5k—~2.5kAutomated safety check: PassApache-2.0
Create Opencode PluginIgorWarzocha/Opencode-Workflows122—~2.4kAutomated safety check: PassNone
Tsh Writing HooksTheSoftwareHouse/copilot-collections284—~3kAutomated safety check: PassMIT
Hook Development for Claude Code Pluginsanthropics/claude-plugins-official38k11 repos~4.1kAutomated safety check: NotesApache-2.0

Similar skills

  • Build new Plate plugins with Slate-first architecture, sane typing, and explicit React/Plate wrapper boundaries.

    17k GitHub stars~2.3k tokensUpdated today
    Agent WorkflowsAuto-check passed
  • Creating Mods

    letta-ai/letta-code

    Creates and edits trusted local Letta Code mods, including tools, slash commands, local-only model providers, lifecycle/turn events, scoped conversation helpers, panels, and capability-gated behavior.

    3.5k GitHub stars~2.5k tokensUpdated today
    Agent WorkflowsAuto-check passed
  • Create Opencode Plugin

    IgorWarzocha/Opencode-Workflows

    Create OpenCode plugins using the @opencode-ai/plugin SDK. An agent skill from IgorWarzocha/Opencode-Workflows.

    122 GitHub stars~2.4k tokensUpdated 8 mo ago
    DevelopmentAuto-check passed
  • Tsh Writing Hooks

    TheSoftwareHouse/copilot-collections

    Custom hook and composable patterns — naming, composition, stable return shapes, lifecycle cleanup, and testing strategies.

    284 GitHub stars~3k tokensUpdated 2 days ago
    DevelopmentAuto-check passed
  • Hook Development for Claude Code Plugins

    anthropics/claude-plugins-official

    Official

    Explains how to write Claude Code plugin hooks, both prompt-based checks and bash commands, for events such as PreToolUse, Stop and SessionStart.

    38k GitHub starsUsed in 11 repos~4.1k tokens
    Agent WorkflowsAuto-check: notes
  • Claude Code Agent Development

    anthropics/claude-plugins-official

    Official

    Explains how to write agents for Claude Code plugins: the markdown file with YAML frontmatter, trigger descriptions, model and color settings, and system prompt design.

    38k GitHub starsUsed in 8 repos~2.8k tokens
    Agent WorkflowsAuto-check passed

More from echoVic/blade-code

All 38 skills in this repo
  • Base64 Parser

    echoVic/blade-code

    Base64 编解码工具,支持编码/解码文本、JSON、二进制文件,自动检测格式,支持批量处理. An agent skill from echoVic/blade-code.

    181 GitHub stars~545 tokensUpdated 10 days ago
    Auto-check: notes
  • Code Review

    echoVic/blade-code

    Review frontend code for best practices, bugs, and improvements.

    181 GitHub stars~377 tokensUpdated 10 days ago
    Auto-check: notes
  • GitHub Explorer

    echoVic/blade-code

    Explore and summarize popular GitHub projects. An agent skill from echoVic/blade-code.

    181 GitHub stars~434 tokensUpdated 10 days ago
    Auto-check passed
  • 覆盖 Session 级 LSP 配置快照、stdio 进程、文档同步、语义查询、诊断回注、崩溃恢复 和子 Session 继承。进入条件:新增语言服务器、修改 LSP 工具、排查诊断缺失/重复、 处理 worktree 或 ACP 差异、修复进程泄漏或 transport 代际问题。不包含:VS Code 扩展桥接(见…

    181 GitHub stars~1.9k tokensUpdated 10 days ago
    Auto-check passed
  • 覆盖 SkillRegistry、SKILL.md 延迟加载、自定义命令 Markdown 解析、来源覆盖、插件 命名空间、Session 快照和模型/用户调用入口。进入条件:新增 Skill 或命令字段、调整 发现优先级、调试 /command 或 Skill 工具、修改 Prompt 元数据或消费者集成。不包含: 插件安装生命周期(见…

    181 GitHub stars~2.1k tokensUpdated 10 days ago
    Auto-check passed
  • Covers 领域能力如何包装成内置工具、getBuiltinTools 的 Session 依赖注入、ToolSearch 延迟激活,以及 Goal/Task/Team/Plan/Skill/LSP/MCP/Web/Config/Worktree 适配边界。

    181 GitHub stars~2.1k tokensUpdated 10 days ago
    Auto-check passed

Works with

Categories

Questions about Knowledge Interaction Surfaces Terminal UI

What does Knowledge Interaction Surfaces Terminal UI do?

覆盖 Blade React + Ink TUI 的初始化、输入协议、消息与工具渲染、确认队列、Session 切换、流式缓冲和 Runtime 清理。进入时机:修改终端键盘行为、粘贴、Ctrl+C、审批与 问答、流式输出、Static 布局、会话恢复或 slash command 展示。. Knowledge Interaction Surfaces Terminal UI is an agent skill from echoVic/blade-code.

When should I use Knowledge Interaction Surfaces Terminal UI?

Knowledge Interaction Surfaces Terminal UI fits situations like: tasks that involve Hooks and plugins.

How do I install Knowledge Interaction Surfaces Terminal UI in Claude Code?

Run `npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-terminal-ui -a claude-code`. Or copy the skill folder (.trae/knowledges/interaction-surfaces/terminal-ui in echoVic/blade-code) into .claude/skills/knowledge-interaction-surfaces-terminal-ui in your project. Claude Code loads it when a task matches its description.

How do I install Knowledge Interaction Surfaces Terminal UI in Codex?

Run `npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-terminal-ui -a codex`. Or copy the skill folder (.trae/knowledges/interaction-surfaces/terminal-ui in echoVic/blade-code) into .agents/skills/knowledge-interaction-surfaces-terminal-ui in your project. Codex loads it when a task matches its description.

Can I use Knowledge Interaction Surfaces Terminal UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add echoVic/blade-code --skill knowledge-interaction-surfaces-terminal-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/knowledge-interaction-surfaces-terminal-ui, .gemini/skills/knowledge-interaction-surfaces-terminal-ui, .github/skills/knowledge-interaction-surfaces-terminal-ui and .opencode/skills/knowledge-interaction-surfaces-terminal-ui in your project.

What does Knowledge Interaction Surfaces Terminal UI need to run?

SKILL.md names no scripts, command-line tools or credentials: Knowledge Interaction Surfaces Terminal UI is instructions for the agent only.

Does Knowledge Interaction Surfaces Terminal UI access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Knowledge Interaction Surfaces Terminal UI safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Knowledge Interaction Surfaces Terminal UI use?

Knowledge Interaction Surfaces Terminal UI is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Knowledge Interaction Surfaces Terminal UI use?

About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Knowledge Interaction Surfaces Terminal UI?

Skills that share tags, products or a category with Knowledge Interaction Surfaces Terminal UI: Plate Plugin Creator (udecode/plate, 17k stars), Creating Mods (letta-ai/letta-code, 3.5k stars), Create Opencode Plugin (IgorWarzocha/Opencode-Workflows, 122 stars) and Tsh Writing Hooks (TheSoftwareHouse/copilot-collections, 284 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Knowledge Interaction Surfaces Terminal UI?

echoVic (a GitHub user) maintains it in echoVic/blade-code, which has 181 GitHub stars. The repository holds 38 skills in this directory. The repository was last updated on September 27, 2026.

Source: echoVic/blade-code on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.