Repository navigation
Implement StatusBar component #11774
Description
Parent Epic
Part of #11762 (Ink-based TUI Rewrite)
Objective
Create status bar showing session metrics, duration, and token count.
Current Behavior
~27s · 275.9k tokens
────────────────────────────────
Component Design
interface StatusBarProps {
duration: number // seconds since session start
tokenCount: number // total tokens used
agent: string // current agent name
model?: string // current model (optional display)
}
const StatusBar: React.FC<StatusBarProps> = ({ duration, tokenCount, agent, model }) => {
const formattedDuration = formatDuration(duration)
const formattedTokens = formatTokenCount(tokenCount)
return (
<Box flexDirection="column">
<Box>
<Text dimColor>{formattedDuration} · {formattedTokens}</Text>
</Box>
<Text dimColor>{'─'.repeat(process.stdout.columns || 80)}</Text>
</Box>
)
}
function formatDuration(seconds: number): string {
if (seconds < 60) return `~${seconds}s`
return `~${Math.floor(seconds / 60)}m`
}
function formatTokenCount(tokens: number): string {
if (tokens < 1000) return `${tokens} tokens`
if (tokens < 1000000) return `${(tokens / 1000).toFixed(1)}k tokens`
return `${(tokens / 1000000).toFixed(1)}m tokens`
}Tasks
- Create
src/cli/ink/components/StatusBar.tsx - Implement duration formatting
- Implement token count formatting
- Implement separator line (respects terminal width)
- Update duration every second (useEffect with interval)
- Get token count from session metrics
Acceptance Criteria
- Duration displays and updates
- Token count displays correctly
- Separator line spans terminal width
- Styling matches current theme
Estimated Effort
0.5 days
Risk
Low - simple display component
Dependencies
- Setup Ink dependencies and verify Bun compatibility #11763 (Setup Ink dependencies)
- Implement core App component and state management #11764 (App component)
Activity
github-actions commentedon Feb 2, 2026
This issue might be a duplicate of existing issues. Please check:
Feel free to ignore if your implementation has a different scope or represents the Ink-based TUI rewrite effort specifically.
feat(opencode): add Phase 2 Ink components (anomalyco#11765, anomalyc…
feat(opencode): add Phase 2 Ink components (anomalyco#11765, anomalyc…
feat(opencode): add Ink-based TUI components for oclite