CommandCodeAI / CommandCodeAI/command-code

ModApi: UI Interactions & Dialogs

Abierto
#634 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
Sin datos de lenguaje
Estrellas
4k
Forks
350
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

El issue no especifica archivos, pruebas ni un punto de entrada para la implementación. Primero divida el trabajo solicitado sobre el spinner, el progreso, el menú, la confirmación, la notificación, la animación y el tooltip en propuestas delimitadas; después, defina el comportamiento de terminal compatible y las pruebas para cada una antes de implementarlas.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
typescript
Área
cli, design
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Tranquilo
Claridad
Necesita aclaración
Aptitud para principiantes
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.