Reduce TUI visual noise and simplify navigation

[christso]

Summary

The interactive TUI wizard (npx allagents with no args) is functional but feels busy and cluttered compared to npx skills and Claude Code. This issue tracks UX improvements informed by side-by-side agent-tui observation of all three tools.

Ground-Truth Observations (via agent-tui)

npx skills (Vercel Labs) — observed patterns

No-args = help, not wizard. Running npx skills shows an ASCII banner followed by flat commands (skills add, skills find, skills list, skills remove). No menu loop.

skills find — fzf-style interactive search:

Search skills: pdf_

  > pdf anthropics/skills 44.2K installs
    pdftk-server github/awesome-copilot 7.3K installs
    nano-pdf steipete/clawdis 830 installs
    pdf openai/skills 588 installs
    ...

up/down navigate | enter select | esc cancel

• Real-time type-ahead with debounced API calls
• Install counts visible inline
• Minimal chrome — just the search box, results, and keybinding hints

skills list — clean 2-line format:

Project Skills

agent-browser ~/.agents/skills/agent-browser
  Agents: Augment, Claude Code, Cline, CodeBuddy, Codex +24 more
agent-tui ~/.agents/skills/agent-tui
  Agents: Augment, Claude Code, Cline, CodeBuddy, Codex +24 more

• Name + path on line 1 (name in distinct color)
• Agents on line 2, indented, with +N more truncation

Install flow — linear pipeline, not a loop:

1. Clone source → Found N skills → Selected skill
2. Agent multiselect with locked "Universal" section:

   ── Universal (.agents/skills) ── always included ────────────
     • Amp, Cline, Codex, Cursor, Gemini CLI, ...
   
   ── Additional agents ─────────────────────────────
   Search:
   ↑↓ move, space select, enter confirm
   
   ❯ ○ Antigravity (.agent/skills)
     ○ Augment (.augment/skills)
     ○ Claude Code (.claude/skills)
     ...
   
   Selected: Amp, Cline, Codex +6 more
   

   • Universal agents shown as non-toggleable bullets
   • "Additional agents" section has inline search
   • Running selection count shown at bottom
3. Scope selection: Project vs Global (radio, not a repeated prompt)
4. Installation summary with security assessment:

   ◇  Installation Summary ─────────────────────────────────╮
   │  ~/.agents/skills/pdf                                   │
   │    copy → Amp, Cline, Codex, Cursor, Gemini CLI +4 more │
   ├────────────────────────────────────────────────────────╯
   
   ◇  Security Risk Assessments ────────────────────────╮
   │       Gen               Socket            Snyk     │
   │  pdf  Safe              0 alerts          High Risk│
   │  Details: https://skills.sh/anthropics/skills      │
   ├────────────────────────────────────────────────────╯
   
   ◆  Proceed with installation?
   │  ● Yes / ○ No
   

   • Single confirmation step, no sequential spinners
   • Security risk from multiple providers shown before confirmation

Claude Code — observed patterns

• Flat subcommands: claude mcp, claude plugin, claude auth, claude agents
• No wizard, no menu loop, no ASCII banners
• Conversation-first (/init, /help) rather than menu-driven

npx allagents v1.2.0 — current state observed

Main menu (6 items, not 7 as previously reported):

┌  allagents v1.2.0
│
◇  Workspace ─────────────╮
│                         │
│  No workspace detected  │
│  User plugins: 0        │
│  Marketplaces: 6        │
│                         │
├─────────────────────────╯
│
◆  What would you like to do?
│  ● Workspace
│  ○ Plugins
│  ○ Skills
│  ○ Clients
│  ○ Marketplaces
│  ○ Exit
└

Problem 1: Workspace summary box repeats on every loop. After Plugins → Back, the full p.note() workspace box appears again above the menu, AND the previous navigation trail stays visible:

◇  What would you like to do?
│  Plugins
│
◇  Plugins
│  Back
│
◇  Workspace ─────────────╮   ← repeated
│  ...                     │
├─────────────────────────╯
│
◆  What would you like to do?   ← menu again

Problem 2: Skills browse is extremely dense. Each marketplace entry lists ALL skills for the entire marketplace — not just the skill being browsed. For anthropic-agent-skills, the same 17-skill list appears 3 times (once per skill entry from that marketplace):

│  ○ example-skills@anthropic-agent-skills - Collection of example skills...
│      Skills: algorithmic-art, brand-guidelines, canvas-design, claude-api,
│  doc-coauthoring, docx, frontend-design, internal-comms, mcp-builder, pdf,
│  pptx, skill-creator, slack-gif-creator, theme-factory,
│  web-artifacts-builder, webapp-testing, xlsx
│  ○ claude-api@anthropic-agent-skills - Claude API and SDK...
│      Skills: algorithmic-art, brand-guidelines, canvas-design, claude-api,
│  doc-coauthoring, docx, frontend-design, ...  ← SAME list repeated

Problem 3: Plugins vs Marketplaces are separate menu items but allagents plugin marketplace already exists as a CLI subcommand — the concepts are entangled.

Problem 4: Clients multiselect has no search (unlike npx skills agent selection which includes an inline search box).

What works well:

• Clients tree structure (Universal vs Client-specific grouping) is clean
• Marketplaces list is clean and well-formatted
• CLI subcommands (allagents workspace, allagents plugin, allagents skills) are well-organized
• allagents workspace status output is clean

Proposals (revised with ground-truth evidence)

1. Show workspace summary once, then compact (quick win)

Evidence: agent-tui confirmed the p.note() box repeats on every menu loop iteration, AND previous navigation trail accumulates.

Proposal:

• First entry: full p.note() box
• Subsequent loops: single-line status like Workspace: 0 plugins, 6 marketplaces
• Consider clearing the screen or using @clack/prompts outro/intro to reset visual state between menu iterations

2. Fix Skills browse density (high impact)

Evidence: Each marketplace entry shows the full skill list for the marketplace, not the individual skill's capabilities. This causes massive repetition.

npx skills comparison: skills list shows one skill per entry with a truncated agent list (+N more).

Proposal:

• Each skill entry should show: skill name, description, compatible agents (truncated)
• Do NOT show the full marketplace skill inventory on every entry
• Consider adding search/filter (like skills find) instead of a flat multiselect

3. Merge Plugins + Marketplaces menu items (moderate)

Evidence: Both Plugins and Marketplaces appear as separate top-level menu items. The CLI already has allagents plugin marketplace as a subcommand — the TUI should match.

npx skills comparison: skills add <package> handles both discovery and installation in one flow.

Proposal: Consolidate to a single "Plugins" menu with:

• Installed plugins
• Browse marketplace (submenu)
• Add plugin

4. Add search to agent/client multiselect (polish)

Evidence: npx skills agent selection has an inline Search: box within the multiselect. The allagents Clients tree has 24+ items with no search.

Proposal: Add search/filter to the Clients multiselect, matching the npx skills pattern.

5. Combine sequential spinners (quick win)

Evidence from issue (not re-verified): Double spinners on install+sync.

npx skills comparison: Single "Proceed?" confirmation, then one operation completes. No sequential spinners visible to the user.

Proposal: One spinner per user-facing operation. Internal steps (install, sync, validate) run under a single progress indicator.

6. Use hint field for plugin metadata (polish)

Evidence: Marketplaces list already shows clean format (agentv (Local: /home/christso/projects/agentv)). But plugin labels in other contexts pack scope/type into the label text.

Proposal: Use @clack/prompts hint field to separate name from metadata. Use color hierarchy matching npx skills pattern (name prominent, metadata dimmed).

7. Consider security assessment before install (future)

Evidence: npx skills shows Gen/Socket/Snyk risk assessment before confirming installation. allagents has no equivalent.

Proposal: Consider adding a security/trust signal before plugin installation, especially for marketplace plugins.

Priority (revised)

Priority	Proposal	Impact	Effort
1	Fix Skills browse density (#2)	High	Medium
2	Show workspace summary once (#1)	High	Low
3	Combine sequential spinners (#5)	Medium	Low
4	Merge Plugins + Marketplaces (#3)	Medium	Medium
5	Add client search (#4)	Low	Low
6	Use hint field (#6)	Low	Low
7	Security assessment (#7)	Low	High

Methodology

All observations captured via agent-tui sessions on npx skills, claude --help, and npx allagents v1.2.0. Screenshots taken programmatically to ensure accuracy.

🤖 Generated with Claude Code

[christso]

Agent Handoff: Visual TUI Evaluation

Goal

Use agent-tui on Linux to visually screenshot the allagents TUI wizard and npx skills flows side by side, then validate/refine the proposals above based on actual visual comparison.

Setup

1. Install prerequisites:

npm i -g agent-tui    # or: bun add -g agent-tui
npm i -g skills       # Vercel skills CLI

2. Clone and build allagents:

git clone https://github.com/EntityProcess/allagents.git
cd allagents
bun install
bun run build

3. Set up test workspace with a plugin:

mkdir /tmp/test-workspace && cd /tmp/test-workspace
npx allagents workspace init
npx allagents plugin install deepwiki@allagents --scope user

Flows to screenshot with agent-tui

A. allagents wizard (main menu loop):

agent-tui run npx allagents
agent-tui screenshot --format json   # Main menu with workspace summary
# Navigate through each menu item and screenshot

B. allagents plugin install flow:

# From wizard: select Plugins → + Add plugin → select a plugin → scope selection → install
# Screenshot each step

C. allagents skills toggle:

# From wizard: select Skills → Toggle installed skills → multiselect
# Screenshot each step

D. allagents sync output:

# From wizard: select Sync (if available) or run `npx allagents workspace sync`
# Screenshot the output

E. npx skills (for comparison):

agent-tui run npx skills list
agent-tui screenshot --format json

agent-tui run npx skills list -g
agent-tui screenshot --format json

What to evaluate

• Information density per screen (too much? too little?)
• Number of interactions to complete common tasks (install a plugin, toggle a skill)
• Visual hierarchy — can you tell what's important at a glance?
• Compare label formatting between the two tools
• Note any screens that feel redundant or could be collapsed

Deliverable

Comment back on this issue with screenshots and a revised assessment of which proposals have the highest visual impact.