anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-21 17:56:33 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

Implement StatusBar component #8319

New Issue
Closed
opened 2026-02-16 18:09:40 -05:00 by yindo · 1 comment
yindo commented 2026-02-16 18:09:40 -05:00
Owner
Copy Link
Copy Source

Originally created by @randomm on GitHub (Feb 2, 2026).

Originally assigned to: @thdxr on GitHub.

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

Originally created by @randomm on GitHub (Feb 2, 2026). Originally assigned to: @thdxr on GitHub. ## 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 ```tsx 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 - #11763 (Setup Ink dependencies) - #11764 (App component)
yindo added the opentui label 2026-02-16 18:09:40 -05:00
yindo closed this issue 2026-02-16 18:09:41 -05:00
yindo commented 2026-02-16 18:09:41 -05:00
Author
Owner
Copy Link
Copy Source

@github-actions[bot] commented on GitHub (Feb 2, 2026):

This issue might be a duplicate of existing issues. Please check:

  • #10354: [FEATURE]: Near-Real-Time Token and Cost Visibility - Requests a status bar or panel showing token consumption and session metrics
  • #8619: [FEATURE]: Native StatusLine Hook for Plugins (Context-Free Display) - Proposes a persistent statusLine hook showing session metrics like tokens and cost
  • #5872: [FEATURE]: Show elapsed runtime per command / instruction in TUI + Replay - Requests visibility of elapsed time in status bar
  • #6096: [FEATURE]: Adding Experimental Calculation and Display of Tokens per second - Requests TPS display
  • #5374: [FEATURE]: show tokens / second - Requests tokens/s display for performance comparison

Feel free to ignore if your implementation has a different scope or represents the Ink-based TUI rewrite effort specifically.

@github-actions[bot] commented on GitHub (Feb 2, 2026): This issue might be a duplicate of existing issues. Please check: - #10354: [FEATURE]: Near-Real-Time Token and Cost Visibility - Requests a status bar or panel showing token consumption and session metrics - #8619: [FEATURE]: Native StatusLine Hook for Plugins (Context-Free Display) - Proposes a persistent statusLine hook showing session metrics like tokens and cost - #5872: [FEATURE]: Show elapsed runtime per command / instruction in TUI + Replay - Requests visibility of elapsed time in status bar - #6096: [FEATURE]: Adding Experimental Calculation and Display of Tokens per second - Requests TPS display - #5374: [FEATURE]: show tokens / second - Requests tokens/s display for performance comparison Feel free to ignore if your implementation has a different scope or represents the Ink-based TUI rewrite effort specifically.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
acp
bad
bug
discussion
docs
documentation
enhancement
extension
good first issue
growth
help-wanted
mcp
model-problem
needs:compliance
nix
opentui
perf
pull-request
Mirrored from GitHub Pull Request
 tui
web
windows
zen
No Label opentui
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#8319
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?