Switch interview CLI to TUI library (Ink) for better streaming output

[jharris1679]

Problem

Currently the interview command has issues with interleaved output when the agent streams text between tool calls. The spinner and streaming text conflict, causing garbled output.

Current Workaround

We guard spinner operations with a textOutputStarted flag - once text streaming begins, the spinner stays stopped. Tool calls are still displayed but without the animated spinner.

Solution: Ink (React for Terminals)

Based on research, both Claude Code and Gemini CLI use Ink for their terminal UI. This is the industry standard for TypeScript-based AI CLI tools.

Key Benefits

• <Static> component for tool calls that scroll while status bar stays put
• Declarative state management (no more textOutputStarted hack)
• Component isolation - spinner and content don't interfere
• Future-proof for more complex UI features

Implementation Plan

1. Install dependencies: ink, ink-spinner, react
2. Create component structure in src/cli/components/:
   • InterviewUI.tsx - Root component
   • StatusBar.tsx - Sticky spinner at bottom
   • ToolCallList.tsx - Scrolling tool calls using <Static>
   • StreamingOutput.tsx - Text delta accumulator
3. Refactor interview.ts to use declarative React state
4. Test across terminals (iTerm, Terminal.app)

Files Affected

• src/cli/commands/interview.ts - Main interview TUI logic
• src/utils/ui.ts - UI utilities
• package.json - Dependencies

References

• How Claude Code is built
• Gemini CLI GitHub
• Ink documentation

---

Linear Issue: ANS-449

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Possible Duplicates

• Fix interview spinner and streaming output display #30

Related Issues

• Implement Comprehension Case Runner #11

🔗 Related PRs

#1 - Feature/ans 441 comprehension runner [merged]
#31 - Feature/15 claude agent sdk wrapper [merged]
AnswerLayer/answerlayer-web#92 - feat(semantic-layer): unified agent activity stream UI [merged]

👤 Suggested Assignees

• jharris1679

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!