OpenTUI-based terminal user interface components and interactions
Use this skill for:
Read mission context
Check OpenTUI setup
bun install to get @opentui packagesDesign the screen
Implement the screen
Test with tuistory
Manual verification
{
"salientSummary": "Implemented model browser screen in OpenTUI. Shows downloaded models with sizes and quantization status. Arrow keys navigate, Enter selects, ? shows help. Tested with tuistory automation.",
"whatWasImplemented": "Created src/tui/screens/ModelBrowser.tsx using @opentui/react. Displays scrollable list of models with metadata. Uses useState for selection and useEffect for keyboard handling. Integrates with backend API for model list.",
"whatWasLeftUndone": "",
"verification": {
"commandsRun": [
{"command": "bun run tui", "exitCode": 0, "observation": "TUI launches, model browser visible"},
{"command": "tuistory --test tests/tui/model_browser.test.ts", "exitCode": 0, "observation": "All 5 test scenarios passed, screenshots captured"}
],
"interactiveChecks": [
{"action": "Launch llm-compress tui", "observed": "Model browser shows with 3 test models"},
{"action": "Press Down arrow 2 times", "observed": "Highlight moves to third model"},
{"action": "Press Enter", "observed": "Model detail screen opens"},
{"action": "Press ?", "observed": "Help modal appears with shortcuts"}
]
},
"discoveredIssues": []
}