CommandCodeAI / CommandCodeAI/command-code

ModApi: UI Interactions & Dialogs

未关闭
#634 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

主要语言
没有语言数据
星标
4k
派生
350
PR 合并指标
30 天内没有已合并 PR

描述

Feature Description

Disclaimer: This message was synthesized by an AI from a long, unstructured Markdown file of notes accumulated while building real mods. Use cases have been kept intentionally simple and generic. If anything seems off or incoherent, feel free to ask for clarification.

1. cmd.ui.spinner() — native spinners

Problem: There's no way to show a loading indicator during async work. Packages like ora don't work inside the harness sandbox.

Use case: A mod that does any async operation at startup (network call, file scan, etc.) has no way to tell the user it's working. A native spinner is the most basic UX expectation.

const spinner = cmd.ui.spinner("Loading...");
await task();
spinner.success("Done!");

2. cmd.ui.progress() — progress bar for long operations

Problem: There's no way to show progress during a multi-step or time-consuming operation. The user has no feedback while the mod is working.

Use case: Any mod that processes multiple items sequentially should be able to show a progress bar rather than leaving the user wondering if it's stuck.

const bar = cmd.ui.progress({ total: 100, label: 'Processing...' });
bar.update(45);
bar.complete('Done!');

3. cmd.ui.menu() — interactive select with groups and search

Problem: cmd.ui.select() is basic — no groups, no filtering, no advanced keyboard navigation.

Use case: Any mod presenting a long list of options would benefit from a searchable, keyboard-navigable menu rather than a flat list the user has to scroll through.


4. cmd.ui.confirm() with custom button labels

Problem: cmd.ui.confirm() always shows "OK" and "Cancel". There's no way to customize the button labels.

Use case: Any confirmation that involves a specific action ("Delete", "Overwrite", "Enable") should label its buttons accordingly rather than relying on the generic "OK".

cmd.ui.confirm({
  title: 'Overwrite this file?',
  labels: { confirm: 'Overwrite', cancel: 'Keep existing' },
});

5. ANSI / color support in dialogs (confirm, select, notify)

Problem: Dialog text in cmd.ui.confirm(), cmd.ui.select(), and cmd.ui.notify() is rendered as plain text — ANSI escape codes are not parsed.

Use case: A confirmation dialog that visually distinguishes a dangerous action (red/bold title, colored options) is much clearer than a plain-text prompt. Color in dialogs is a basic UX expectation.


6. cmd.ui.push() — more prominent push notification

Problem: cmd.ui.notify() adds a message to the feed, which gets lost in the scroll. There's no way to attract the user's attention more visibly.

Use case: A mod that needs to alert the user about something important should have a way to show a more prominent notification that doesn't get buried in feed history.

cmd.ui.push({ title: 'Threshold reached', body: 'The limit has been exceeded', level: 'warning' });

PART 2

5. Animations — Smooth visual transitions

Problem: The only visual feedback during async operations is a text spinner. There are no transitions, no gradients, no animated indicators. The terminal feels static and lifeless compared to modern TUI applications.

Use case: A mod that tracks live data (prices, counters, status) should be able to animate value changes — smooth color transitions, pulse effects on threshold alerts, or animated progress indicators. A mod that displays a loading state should show a smooth spinner, not a static ... text.

cmd.ui.animate({
  target: statusBadge,
  from: { color: 'yellow' },
  to: { color: 'green' },
  duration: 300,
});

References: ChromaCat (12 pattern types — plasma, aurora, fire, wave, spiral, ripple — 40+ built-in themes — cyberpunk, nebula, neon, retrowave — 60fps animations with interactive controls), terminui (animated spinners, progress transitions with easing), Ink (animated components via React state — smooth re-renders), SilkCircuit (design language with neon, soft, glow, vibrant styles — 20+ tools). The TUI Renaissance article (2026): "Smooth animations breathe life into your terminal with fluid color transitions."

6. Tooltips / Popovers — Contextual information

Problem: There is no way to show contextual information on hover or focus. If a mod wants to explain what a status badge means or show details about a metric, it must dump the info into the feed, polluting the conversation history.

Use case: A mod that displays a cost summary badge in the footer should show detailed breakdown (input tokens, output tokens, cache savings) when the user hovers over it, without printing anything in the feed.

cmd.ui.tooltip({
  target: costBadge,
  content: ['Input: 12,400 tokens', 'Output: 3,200 tokens', 'Cache saved: $0.42'],
});

References: OpenTUI (console overlay for contextual info — built into the framework), Ink UI (interactive components with focus states and hover), terminui (popover-like widgets with positioning), Ratatui (popup/modal overlays). Modern TUIs treat contextual info as a first-class concern, not an afterthought.

Use Case

No response

Additional Context

No response

How important is this to you?

None

贡献指南

这个仓库没有索引到贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

该 issue 没有指定文件、测试或实现入口。首先,将所请求的 spinner、进度、菜单、确认、通知、动画和 tooltip 工作拆分为范围明确的提案,然后在实现之前,为每个提案定义受支持的终端行为和测试。

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
cli, design
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
冷清
描述清晰度
需要澄清
新手友好度
25/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。