Karanjot786/TermUI

Summary The TermUI repository's README does not contain a comprehensive API reference or usage examples that would allow a new developer to integrate the library into their project. For a library project, documentation is as critical as the code itself — without it, adoption is impossible regardless of the library's technical quality. Problem The README does not document individual components, their props, or their expected behavior. There are no runnable code examples demonstrating how to use TermUI in a real terminal application. New contributors and potential library consumers cannot understand the library's capabilities without reading source code directly. There is no "Getting Started" section with installation instructions, a minimal working example, and an explanation of the component model. Impact Zero discoverability for developers searching for a terminal UI library — without documentation, TermUI cannot compete with alternatives like ink or blessed. GSSoC contributors

What to build Add a TokenUsage widget to packages/widgets/src/display/TokenUsage.ts. TokenUsage renders a context window meter showing used and total tokens with a colored progress bar. Acceptance criteria Accepts used: number, total: number. Renders: [########----] 1024 / 8192 tokens (12.5%) Color changes based on fill ratio: green below 80%, yellow from 80-95%, red above 95%. setUsed(n) updates the display. Calls this.markDirty(). Has a .test.ts with at least 4 tests: renders correct percentage, green below 80%, yellow at 85%, red at 96%. Implementation notes Place at packages/widgets/src/display/TokenUsage.ts. Export from packages/widgets/src/index.ts. Reuse ProgressBar internally for the bar render. Apply color via the bar's fillColor prop based on the ratio. Example usage const usage = new TokenUsage({ total: 8192, width: 40 }) usage.setUsed(1024) GSSoC 2026 This is an intermediate-level issue. Comment "I would like to work on this" to get assigned. You have 7 days to open a P

What to build Add a FormField widget to packages/ui/src/FormField.ts. FormField wraps any input widget with a label above and an optional error message below. Acceptance criteria Accepts label: string, error?: string, and a child widget. Renders the label above the child widget. When error is set, renders the error string below the child widget in red. When error is not set, no extra line renders below. Calls this.markDirty() when label or error changes. Has a .test.ts with at least 3 tests: label renders above, error renders below in red, no error = no extra line. Implementation notes Place at packages/ui/src/FormField.ts. Export from packages/ui/src/index.ts. Look at packages/ui/src/Form.ts for field wrapping patterns. Example usage const field = new FormField({ label: 'Username', error: 'Required' }) field.addChild(new TextInput({ placeholder: 'Enter username' })) GSSoC 2026 This is a beginner-level issue. Comment "I would like to work on this" to get assigned. You have 7 days t