Skip to content

Tab-based side-by-side UI for package and script selection #3

Description

@nyatinte

AS IS

Package and script selection are two separate sequential prompts. The user must fully complete package selection before seeing any scripts. There is no way to preview available scripts while browsing packages.

```
Step 1 — Select package:
❯ @myapp/web apps/web
@myapp/api apps/api
@myapp/ui packages/ui

Step 2 — Select script:
❯ dev
build
test
```

TO BE

A single tab-based (two-column) screen where the left panel shows packages and the right panel shows the scripts of the currently highlighted package. The user can navigate between packages and instantly see the corresponding scripts without committing to a selection first.

```
┌─ Package ──────────┬─ Script ─────────────┐
│ ❯ @myapp/web │ ❯ dev next dev │
│ @myapp/api │ build tsc && next │
│ @myapp/ui │ test vitest │
└────────────────────┴──────────────────────┘
```

  • Arrow keys navigate within the active panel; Tab switches focus between panels
  • Pressing Enter on a script confirms the selection and executes
  • The right panel updates in real-time as the highlighted package changes

This addresses the core UX goal from ADR-001: reduce the number of interactions needed to reach script execution.

Notes

@clack/prompts cannot support this UI. It is designed for sequential single-panel prompts and has no API for simultaneous multi-panel rendering or focus management.

Implementing this feature requires replacing @clack/prompts with a more capable TUI library. Recommended options:

Option Notes
Ink React for CLI. Easiest to reason about with component-based layout. Recommended.
blessed Full TUI framework with windows and borders. Higher complexity.
Raw ANSI + readline No extra dependency but requires significant implementation effort.

This issue has a larger implementation cost than the other open issues and requires a dependency decision before work begins.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions