Add running indicator for bash commands in TUI

[shuv1337]

Problem/Context

Currently, when an agent executes a bash command in the TUI, there is no visual indicator to show whether the command is still running or has finished. Users might be left wondering if the process is stuck or if it's still generating output.

Acceptance Criteria

• A spinner indicator is displayed next to the bash command title while it is running.
• The spinner disappears once the command completes or fails.
• The spinner color matches the agent color (the color of the symbol next to the agent name).
• The indicator works for both short-lived and long-running bash commands.

Implementation Details

1. Extend ToolProps: Update the ToolProps interface in packages/opencode/src/cli/cmd/tui/routes/session/index.tsx to include the tool call status.
2. Pass Status to Tools: In the ToolPart component, pass the status from props.part.state.status to the dynamic tool component.
3. Update ToolTitle: Modify the ToolTitle component to accept an optional loading prop. When loading is true, display a spinner.
4. Theming: The spinner should use the agent's color, which can be retrieved via local.agent.color(props.message.mode).
5. Bash Tool Integration: Update the BashTool registration to pass loading={props.status !== 'completed' && props.status !== 'error'} to its ToolTitle.

Code References

• Tool Rendering Logic: packages/opencode/src/cli/cmd/tui/routes/session/index.tsx (around line 1649)
• Bash Tool Definition: packages/opencode/src/cli/cmd/tui/routes/session/index.tsx (around line 1792)
• Agent Color Logic: packages/opencode/src/cli/cmd/tui/routes/session/index.tsx (around line 1528)
• Existing Spinner Frames: packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx (line 30)

Tasks

• Propagate tool call status to tool components.
• Add loading support to ToolTitle.
• Implement spinner in BashTool (and potentially other long-running tools like WebFetchTool).
• Verify visual consistency with the agent color and sidebar spinner.

[coderabbitai]

📝 CodeRabbit Plan Mode

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

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

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

🔗 Similar Issues

Related Issues

• Implement System Theme Support in OpenTUI #2
• Restore fork features lost in upstream merge: shuvcode branding and subagent sidebar #96
• Integrate upstream PR #4515: Show plugins in /status dialog #92
• feat: Integrate plugin commands from upstream PR #4411 #132

🔗 Related PRs

#105 - revert: remove PR anomalyco#4773 subagent restrictions feature [merged]

👤 Suggested Assignees

• kcrommett

---

🧪 Issue enrichment is currently in open beta.

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!

[coderabbitai]

Coding Plan

Approach

Add a loading spinner indicator to the bash command title in the TUI to show when a command is running, using the agent's color theme and the existing spinner infrastructure.

Observations

The session rendering system in packages/opencode/src/cli/cmd/tui/routes/session/index.tsx implements a tool registry pattern where each tool (bash, webfetch, websearch, etc.) registers a render function. The ToolTitle component provides a standardized header with icon, text, and optional loading indicator. A shared spinner animation system using SPINNER_FRAMES and getSpinnerFrame() provides consistent visual feedback. The ToolProps interface already includes status information, and tools like WebFetch and WebSearch already implement loading indicators correctly.

Assumptions

Assumption 1: Loading indicator implementation for other tools

Options Considered:

• Update only the bash tool as specified in the ticket
• Audit and update all tools that might benefit from loading indicators
• Update bash tool now, document pattern for future tools

Chosen Option: Update only the bash tool as specified in the ticket.

Rationale: This aligns with the ticket scope, follows the existing successful pattern demonstrated by WebFetch/WebSearch, and avoids scope creep. The pattern is well-established and documented through multiple examples, making it easy for future tool implementations to adopt.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Update Bash Tool Loading Indicator

The bash tool's render function already computes the running status but doesn't pass loading props to its ToolTitle component. This phase updates the bash tool to match the pattern used successfully by WebFetch and WebSearch tools.

Add Loading Indicator to Bash Tool ToolTitle

Update the bash tool's ToolTitle component call to display a spinner during command execution.

• In packages/opencode/src/cli/cmd/tui/routes/session/index.tsx, locate the bash tool registration render function (around line 1938)
• The render function already computes isRunning = props.status === "running" (line 1912)
• Update the ToolTitle component call to pass loading={isRunning} and loadingColor={props.agentColor} props
• This matches the pattern already used in WebFetch (line 2190) and WebSearch (line 2230) tools
• The ToolTitle component already supports these props (defined at line 1875) and uses the existing getSpinnerFrame() spinner animation system

🤖 Prompt for AI agents

Update the bash tool to display a loading spinner in its title during command
execution.

In `packages/opencode/src/cli/cmd/tui/routes/session/index.tsx`:
- Locate the bash tool's ToolTitle component call in the render function
- Add `loading={isRunning}` prop to the ToolTitle component
- Add `loadingColor={props.agentColor}` prop to the ToolTitle component
- The `isRunning` variable is already computed from `props.status === "running"`
- Follow the same pattern used by WebFetch and WebSearch tools

---

🚀 Next Steps

🤖 All AI agent prompts combined

Update the bash tool to display a loading spinner in its title during command
execution.

In `packages/opencode/src/cli/cmd/tui/routes/session/index.tsx`:
- Locate the bash tool's ToolTitle component call in the render function
- Add `loading={isRunning}` prop to the ToolTitle component
- Add `loadingColor={props.agentColor}` prop to the ToolTitle component
- The `isRunning` variable is already computed from `props.status === "running"`
- Follow the same pattern used by WebFetch and WebSearch tools

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

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

[opencode-agent]

User coderabbitai[bot] does not have write permissions

github run