[PR #10124] feat(app): add Status button popover to session header (per Figma request) #13347

Closed
opened 2026-02-16 18:18:12 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/anomalyco/opencode/pull/10124

State: closed
Merged: No


Implementation follows Figma design request.

Fixes #10111

Summary

Adds a Status button to the session header that shows a popover with system status across four tabs: Servers, MCP, LSP, and Plugins.

  • Status button appears after session starts (matches Share button behavior)
  • Aggregate health indicator shows green/red/gray based on connectivity
  • Servers tab shows health, version, default indicator, and active checkmark
  • MCP tab shows connection status with toggles to connect/disconnect
  • LSP tab shows language server status
  • Plugins tab shows installed plugins
  • Full i18n support

Video

https://github.com/user-attachments/assets/b256996e-077c-4c7a-9844-4fa0a5ef4caf

Changes

  • Feature: Added StatusPopover component and integrated it into SessionHeader
  • UI: Fixed Switch component styling (prevented white background on hover for checked state, fixed cursor for disabled state)

Verification

Tested in the web app:

  • Opening a project and starting a session
  • Clicking the Status button to verify popover opens
  • Switching between all four tabs
  • Verifying server health indicators update (refreshes every 10s when open)
  • Toggling MCP servers on/off
  • Scrolling behavior in lists with many items
**Original Pull Request:** https://github.com/anomalyco/opencode/pull/10124 **State:** closed **Merged:** No --- Implementation follows [Figma design request](https://www.figma.com/design/nm7fT1he2hcniHIipY1iEk/opencode-open-source?node-id=62-15981&t=eRaHUat9zChEiiRr-0). Fixes #10111 ## Summary Adds a Status button to the session header that shows a popover with system status across four tabs: Servers, MCP, LSP, and Plugins. - Status button appears after session starts (matches Share button behavior) - Aggregate health indicator shows green/red/gray based on connectivity - Servers tab shows health, version, default indicator, and active checkmark - MCP tab shows connection status with toggles to connect/disconnect - LSP tab shows language server status - Plugins tab shows installed plugins - Full i18n support ## Video https://github.com/user-attachments/assets/b256996e-077c-4c7a-9844-4fa0a5ef4caf ## Changes - **Feature:** Added `StatusPopover` component and integrated it into `SessionHeader` - **UI:** Fixed `Switch` component styling (prevented white background on hover for checked state, fixed cursor for disabled state) ## Verification Tested in the web app: - Opening a project and starting a session - Clicking the Status button to verify popover opens - Switching between all four tabs - Verifying server health indicators update (refreshes every 10s when open) - Toggling MCP servers on/off - Scrolling behavior in lists with many items
yindo added the pull-request label 2026-02-16 18:18:12 -05:00
yindo closed this issue 2026-02-16 18:18:12 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#13347